/* ============================================================
   武汉纺织大学科学技术协会 —— 「协会概况」栏目页 自定义样式
   ------------------------------------------------------------
   编写原则（重要）：
   1. 本文件只「新增」自定义类，不重写 Bootstrap 原有的类（如 .card、
      .table、.btn 等），避免破坏框架默认样式；
   2. 自定义类统一使用 site- / 语义化前缀，方便与 Bootstrap 类区分；
   3. 只在必须微调框架组件时，才用「父级作用域限定」的方式局部覆盖，
      影响范围可控；
   4. 加载顺序：必须先引入 bootstrap.min.css，再引入本文件。
   ============================================================ */

/* ---------- 0. 主题变量（改这里即可整体换色） ---------- */
:root {
    --wtu-primary: #0b4f8a;        /* 主色：深蓝 */
    --wtu-primary-dark: #0a3f6e;   /* 主色加深（左侧栏目名底色） */
    --wtu-accent: #12a1a1;         /* 辅助色：青绿 */
    --wtu-text: #333333;           /* 正文文字 */
    --wtu-text-light: #6c757d;     /* 次要文字 */
    --wtu-border: #e6e9ee;         /* 分隔线颜色 */
    --wtu-bg-soft: #f7f9fc;        /* 浅灰背景 */
}

body {
    color: var(--wtu-text);
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    background-color: #ffffff;
}

/* 正文段落统一样式：行高放大，长文更易读 */
.site-text {
    font-size: 0.9375rem;
    line-height: 2;
    color: var(--wtu-text);
    margin-bottom: 14px;
}

/* ============================================================
   1. 顶部信息条
   ============================================================ */
.site-topbar {
    background-color: var(--wtu-primary-dark);
    color: #cfd8e3;
    font-size: 0.8125rem;
    line-height: 34px;
}

.site-topbar-text {
    color: #cfd8e3;
}

.site-topbar-link {
    color: #cfd8e3;
    text-decoration: none;
}

.site-topbar-link:hover {
    color: #ffffff;
    text-decoration: none;
}

.site-topbar-divider {
    margin: 0 8px;
    color: #4a6784;
}

/* ============================================================
   2. 站名头部（Logo + 站名 + 搜索）
   本页无主导航栏，站名头部即页面最顶部标识
   ============================================================ */
.site-masthead {
    background-color: #ffffff;
    padding: 22px 0;
    border-bottom: 1px solid var(--wtu-border);
}

.site-brand {
    display: inline-block;
    text-decoration: none;
}

.site-brand:hover {
    text-decoration: none;
}

/* 纯 CSS 徽标：不依赖任何外部图片 */
.site-brand-logo {
    display: inline-block;
    width: 58px;
    height: 58px;
    line-height: 58px;
    text-align: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wtu-primary) 0%, var(--wtu-accent) 100%);
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 1px;
    vertical-align: middle;
    box-shadow: 0 4px 12px rgba(11, 79, 138, 0.25);
}

.site-brand-text {
    display: inline-block;
    vertical-align: middle;
    margin-left: 14px;
}

.site-brand-title {
    display: block;
    font-size: 1.5rem;
    color: var(--wtu-primary);
    letter-spacing: 1px;
    line-height: 1.4;
}

.site-brand-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--wtu-text-light);
    letter-spacing: 0.2px;
    line-height: 1.2;
}

.site-search {
    max-width: 420px;
    margin-left: auto;
}

/* 移动端：站名与搜索框居中排布并缩小 */
@media (max-width: 767.98px) {
    .site-masthead {
        padding: 16px 0;
    }
    .site-brand-title {
        font-size: 1.125rem;
    }
    .site-brand-logo {
        width: 46px;
        height: 46px;
        line-height: 46px;
        font-size: 1rem;
    }
    .site-search {
        margin-left: 0;
    }
}

/* ============================================================
   3. 静态横幅
   原首页的三屏轮播已移除，改为固定横幅
   如需换成真实图片，给 .site-banner 加：
       background-image: url("../img/banner.jpg");
       background-size: cover;  background-position: center;
   ============================================================ */
.site-banner {
    height: 200px;
    background-image: linear-gradient(120deg, #0b4f8a 0%, #12a1a1 100%);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* 右下角装饰圆，让纯色横幅不至于太单调（纯 CSS，不依赖图片） */
.site-banner::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08);
}

.site-banner-inner {
    position: relative;
    z-index: 1;
}

.site-banner-title {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 4px;
    margin-bottom: 6px;
}

.site-banner-sub {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 3px;
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .site-banner {
        height: 130px;
    }
    .site-banner-title {
        font-size: 1.375rem;
        letter-spacing: 2px;
    }
    .site-banner-sub {
        font-size: 0.6875rem;
        letter-spacing: 1px;
    }
}

/* ============================================================
   4. 主体内容区
   ============================================================ */
.site-main {
    padding: 26px 0 48px;
    background-color: #ffffff;
}

/* ---------- 左侧：「协会概况」子目录 ---------- */
.side-nav-wrap {
    border: 1px solid var(--wtu-border);
    border-radius: 4px;
    overflow: hidden;
    background-color: #ffffff;
}

/* 桌面端吸顶：正文很长时子目录始终可见，方便随时切换 */
@media (min-width: 992px) {
    .side-nav-wrap {
        position: sticky;
        top: 20px;
    }
}

/* 栏目名深色块（链接，点击回到「协会概况」栏目页） */
.side-nav-title {
    display: block;
    background-color: var(--wtu-primary-dark);
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    padding: 16px 10px;
    margin-bottom: 0;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.side-nav-title:hover {
    background-color: var(--wtu-primary);
    color: #ffffff;
    text-decoration: none;
}

.side-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-nav li + li {
    border-top: 1px solid var(--wtu-border);
}

.side-nav-link {
    display: block;
    text-align: center;
    padding: 14px 10px;
    font-size: 0.9375rem;
    color: var(--wtu-text);
    text-decoration: none;
    /* 左侧高亮条默认透明，激活时显现 */
    border-left: 3px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.side-nav-link:hover {
    background-color: var(--wtu-bg-soft);
    color: var(--wtu-primary);
    text-decoration: none;
}

/* 当前所在页面的高亮态（由各页面 HTML 静态标注，无需 JS） */
.side-nav-link.active {
    background-color: var(--wtu-bg-soft);
    border-left-color: var(--wtu-accent);
    color: var(--wtu-primary);
    font-weight: 700;
}

/* ---------- 右侧：正文标题栏 ---------- */
.content-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--wtu-primary);
    padding-bottom: 10px;
    margin-bottom: 22px;
}

.content-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wtu-primary);
    letter-spacing: 1px;
    margin-bottom: 0;
}

.content-breadcrumb {
    font-size: 0.8125rem;
    color: var(--wtu-text-light);
    margin-bottom: 0;
}

.content-breadcrumb a {
    color: var(--wtu-text-light);
    text-decoration: none;
}

.content-breadcrumb a:hover {
    color: var(--wtu-primary);
}

.content-breadcrumb-sep {
    margin: 0 6px;
}

@media (max-width: 575.98px) {
    .content-title {
        font-size: 1.25rem;
    }
    .content-breadcrumb {
        margin-top: 6px;
    }
}

/* ============================================================
   5. 正文区块（协会简介 / 章程 / 工作职责 / …）
   ============================================================ */
.site-panel {
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px dashed var(--wtu-border);
    /* 锚点跳转时留出顶部间距，避免标题紧贴视口边缘 */
    scroll-margin-top: 20px;
}

.site-panel:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 区块标题：左侧渐变竖条 + 下划线 */
.site-panel-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--wtu-primary);
    padding-left: 14px;
    padding-bottom: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--wtu-border);
    position: relative;
}

.site-panel-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 5px;
    height: 18px;
    background: linear-gradient(180deg, var(--wtu-primary), var(--wtu-accent));
    border-radius: 2px;
}

/* 区块内的二级小标题（如「历次代表大会」） */
.site-panel-subtitle {
    font-size: 1rem;
    font-weight: 700;
    color: var(--wtu-text);
    margin: 22px 0 12px;
}

/* 区块末尾的说明性小字（提示哪些内容待补充） */
.site-note {
    font-size: 0.8125rem;
    line-height: 1.9;
    color: var(--wtu-text-light);
    margin-top: 12px;
}

/* 「查看完整…」等更多内容链接 */
.site-more-link {
    color: var(--wtu-primary);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
}

.site-more-link:hover {
    color: var(--wtu-accent);
    text-decoration: none;
}

/* 章程条款序号 */
.site-clause {
    color: var(--wtu-primary);
}

/* 正文有序列表 */
.site-list {
    font-size: 0.9375rem;
    line-height: 2;
    color: var(--wtu-text);
    padding-left: 22px;
    margin-bottom: 14px;
}

.site-list li {
    margin-bottom: 4px;
}

/* ---------- 工作职责列表 ---------- */
.duty-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.duty-list li {
    font-size: 0.9375rem;
    line-height: 2;
    color: var(--wtu-text);
    padding: 12px 0 12px 16px;
    border-bottom: 1px dashed var(--wtu-border);
    border-left: 3px solid var(--wtu-accent);
    margin-bottom: 10px;
    background-color: var(--wtu-bg-soft);
    border-radius: 0 4px 4px 0;
    transition: background-color 0.2s ease;
}

.duty-list li:hover {
    background-color: #eaf2f9;
}

.duty-list li:last-child {
    margin-bottom: 0;
}

.duty-name {
    color: var(--wtu-primary);
    margin-right: 8px;
}

/* ---------- 栏目子目录卡片（Bootstrap card 的轻量修饰） ----------
   仅新增外观类，不修改 .card / .card-body 等框架类本身的定义 */
.site-card {
    border: 1px solid var(--wtu-border);
    border-radius: 4px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.site-card:hover {
    border-color: var(--wtu-accent);
    box-shadow: 0 6px 18px rgba(11, 79, 138, 0.12);
    transform: translateY(-2px);
}

.site-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--wtu-primary);
}

.site-card-text {
    font-size: 0.8125rem;
    line-height: 1.9;
    color: var(--wtu-text-light);
    margin-bottom: 0;
}

.site-card-footer {
    background-color: var(--wtu-bg-soft);
    border-top: 1px solid var(--wtu-border);
    padding: 10px 20px;
}

/* ---------- 表格微调 ---------- */
.site-table th,
.site-table td {
    font-size: 0.875rem;
    vertical-align: middle;
}

.site-table thead th {
    color: var(--wtu-primary);
    font-weight: 700;
    white-space: nowrap;
}

.site-table-col-name {
    width: 32%;
}

/* 待补充内容的弱化显示 */
.site-table-todo {
    color: var(--wtu-text-light);
}

/* 委员名单：序号列窄、居中、弱化，姓名列居中，整体更紧凑 */
.site-table-roster td {
    text-align: center;
    white-space: nowrap;
}

.site-table-roster .site-table-num {
    width: 2.5rem;
    color: var(--wtu-text-light);
    background-color: var(--wtu-bg-soft);
    font-size: 0.8125rem;
}

/* ============================================================
   6. 页脚
   ============================================================ */
.site-footer {
    background-color: #0f2c47;
    color: #b6c6d6;
    padding: 40px 0 20px;
    font-size: 0.875rem;
}

.footer-title {
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 14px;
    font-size: 0.9375rem;
}

.footer-text {
    font-size: 0.8125rem;
    line-height: 1.9;
    color: #93a7ba;
}

.footer-links a {
    display: inline-block;
    color: #b6c6d6;
    text-decoration: none;
    font-size: 0.8125rem;
    line-height: 2;
    margin-right: 14px;
    transition: color 0.2s ease;
}

.footer-links li a {
    display: block;
    margin-right: 0;
}

.footer-links a:hover {
    color: #ffffff;
    text-decoration: none;
}

.footer-hr {
    border-top: 1px solid #1d3f5e;
    margin: 22px 0 16px;
}

.footer-copyright {
    font-size: 0.8125rem;
    color: #8ba0b5;
}

/* ============================================================
   7. 返回顶部按钮
   ============================================================ */
.back-to-top {
    position: fixed;
    right: 22px;
    bottom: 28px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background-color: var(--wtu-primary);
    color: #ffffff;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, visibility 0.25s ease;
    z-index: 1030;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background-color: var(--wtu-accent);
}

@media (max-width: 575.98px) {
    .back-to-top {
        right: 12px;
        bottom: 16px;
        width: 38px;
        height: 38px;
    }
}