/* =====================================================================
   base.css — 贵州师范大学生命科学学院官网 · 三页共用外壳样式
   ---------------------------------------------------------------------
   v0.1 来源：由 新网站设计/public/css/base.css 移植（2026-09-19 · it-005）。
   与设计稿的差别只有一处性质：外壳中「由博达模板/组件负责的区域」已换成
   组件渲染态的结构与类名，本文件把这些类名重新定义到设计稿外观上。

   已对齐的组件位（结构取自 当前模板/*.jsp 与 当前静态网站/*.html）：
     · 190510 当前时间     模板容器 .nav-time
     · 190514 LOGO         模板容器 .nav-logo
     · 1058780 简单检索    模板容器 .nav-search / 组件态 .nav-search-input
     · 190557 网站导航     模板容器 .nav-columnbox / 组件态（it-009 起）nav_menustyle_1_1
     · 190569 版权         模板容器 .foot-copyright
   未对齐区域（页面框架，新设计自研）保持设计稿类名不变。

   引入顺序必须是：base.css → 本页 css（页面规则需能覆盖共用规则）。
   ===================================================================== */

/* ============ Design Tokens ============ */
:root{
  --navy:#071B3A;
  --navy-2:#0B2A55;
  --ink:#16233A;
  --body:#44536B;
  --line:#E6ECF4;
  --bg:#F5F8FC;
  --white:#FFFFFF;
  --teal:#00A389;
  --cyan:#2DD4BF;
  --blue:#2F7BFF;
  --gold:#C9A45C;
  --grad:linear-gradient(100deg,#071B3A 0%,#0B3B66 52%,#0A6B5C 100%);
  --shadow-sm:0 2px 10px rgba(11,42,85,.06);
  --shadow-md:0 12px 32px rgba(11,42,85,.10);
  --shadow-lg:0 24px 60px rgba(7,27,58,.18);
  --radius:14px;
  --container:1240px;
  --font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",system-ui,-apple-system,sans-serif;
  --font-en:"Helvetica Neue",Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);color:var(--body);background:var(--bg);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit;transition:all .25s ease}
img{max-width:100%;display:block}
ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
.container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
::selection{background:var(--teal);color:#fff}

/* ============ Top Utility Bar ============ */
.topbar{background:var(--navy);color:rgba(255,255,255,.72);font-size:12.5px}
.topbar .container{display:flex;justify-content:space-between;align-items:center;height:36px;gap:26px}
.topbar a{color:rgba(255,255,255,.72)}
.topbar a:hover{color:var(--cyan)}
.topbar .links{display:flex;gap:22px;margin-left:auto}
.topbar .links a{display:inline-flex;align-items:center;gap:6px}
.topbar .welcome{white-space:nowrap}
/* 组件 190510 当前时间（模板容器 .nav-time）——设计稿顶栏无此位，
   为保住设计稿文案，欢迎语保留，时间接在其后，同色同字号不改变视觉观感。 */
.topbar .nav-time{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}

/* ============ Header ============ */
.header{background:rgba(255,255,255,1);backdrop-filter:blur(14px);position:sticky;top:0;z-index:100;border-bottom:1px solid var(--line)}
.header .container{display:flex;align-items:center;justify-content:space-between;height:92px}
.brand{display:flex;align-items:center;flex:none}
/* 组件 190514 LOGO（模板容器 .nav-logo）——渲染态为 table>tr>td>a>img
   it-009：宽 300px → 238px。真实栏目树有 11 个一级栏目（比设计稿的 9 个多需约 255px），
   而头部可用宽度受 max-width:1240px 限制（容器 1240 − 院徽 − 工具区 ≈ 952px 上限），
   故从院徽让出 62px（详见 VERSION.md §12 导航改造与 U-1 处置）。 */
.brand .nav-logo{display:block;width:238px;flex:none}
.brand .nav-logo table{width:100%}
.brand .nav-logo img{width:100%;height:auto;display:block}

/* ══════════ 组件 190557 网站导航 —— 「菜单模块」新内部 HTML 适配层 ══════════
   it-009（2026-09-24）：菜单模块的内部 HTML 换成系统通用的 .nav_menustyle_1_1 结构
   （原文见项目根 `菜单模块内部html.txt`），生产渲染态为：
     .nav-columnbox#mainNav > table > tr > td > div.nav_menustyle_1_1 > ul > li > a（+ 嵌套 ul）

   ⚠ 该内部 HTML 同时带来一套**系统自带样式**，必须逐条覆盖，否则导航会变回系统默认外观：
     · .nav_menustyle_1_1 a        { width:90px;height:25px;line-height:25px;font-size:14px;
                                      color:#000;background:#eeeeee;border:1px solid #fff;border-width:0 1px 1px 0 }
     · .nav_menustyle_1_1 a:hover  { color:#fff;background:#2687eb }
     · .nav_menustyle_1_1 li       { float:left;text-align:center;position:relative }
     · .nav_menustyle_1_1 li ul    { display:none }   .nav_menustyle_1_1 li:hover ul { display:block;position:absolute }
     · .nav_menustyle_1_1 a        { display:block;text-decoration:none;white-space:nowrap }
   其中 width:90px / border-width 这两条**最隐蔽**：只声明 height 而不声明 width 时，
   系统样式的 width:90px 会照旧生效（每条一级项被卡成 90px 宽）。故本段对 a 显式写 width:auto。

   · .nav_menustyle_1_1 ul li ul li { float:none;z-index:100 }   · .nav_menustyle_1_1 li { position:relative }
   （二级 li 的 position/z-index 也一并归零：它们只会在卡片自身层叠上下文里生效，
     但保留下来会让注入系统样式前后的计算样式出现非零差异，归零后逐属性零差异，便于回归。）

   覆盖策略：选择器一律以框架容器 id `#mainNav` 开头 → 权重至少 (1,1,x)，
   高于系统自带样式的全部规则（最高 (0,2,3)），**不依赖 <style> 注入顺序、不使用 !important**。
   （`#mainNav` 由模板/静态页的 .nav-columnbox 容器承载，见各页导航注释。）
   ══════════════════════════════════════════════════════════════════════ */
.nav-columnbox{min-width:0}
#mainNav{display:flex;align-items:center;min-width:0}
/* 中和内部 HTML 外层的 table/tr/td：该层只服务于 IE6 兼容，无布局语义 */
#mainNav>table,#mainNav>table>tbody,#mainNav>table>tbody>tr,#mainNav>table>tbody>tr>td{display:contents}
#mainNav .nav_menustyle_1_1{display:flex;align-items:center;min-width:0}
#mainNav .nav_menustyle_1_1>ul{display:flex;gap:2px}
#mainNav .nav_menustyle_1_1>ul>li{float:none;position:relative;text-align:left}
#mainNav .nav_menustyle_1_1>ul>li>a{display:block;width:auto;height:92px;line-height:92px;padding:0 11px;font-size:14px;font-weight:500;color:var(--ink);background:none;border:0;position:relative;white-space:nowrap;overflow:hidden;transition:font-size .28s ease,padding .28s ease,opacity .28s ease}
#mainNav .nav_menustyle_1_1>ul>li>a::after{content:"";position:absolute;left:11px;right:11px;bottom:24px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--cyan));transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
#mainNav .nav_menustyle_1_1>ul>li:hover>a::after,#mainNav .nav_menustyle_1_1>ul>li>a#current::after{transform:scaleX(1)}
#mainNav .nav_menustyle_1_1>ul>li>a#current{color:var(--teal)}
#mainNav .nav_menustyle_1_1>ul>li:hover>a{color:var(--teal);background:none}
/* 二级菜单：新内部 HTML 用**嵌套 <ul>**（旧内部 HTML 是 .nav-two-item 这个 div） */
#mainNav .nav_menustyle_1_1>ul>li>ul{display:block;position:absolute;top:92px;left:50%;transform:translate(-50%,10px);min-width:172px;margin:0;padding:8px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transition:all .25s ease;z-index:5}
#mainNav .nav_menustyle_1_1>ul>li:hover>ul{opacity:1;visibility:visible;transform:translate(-50%,0)}
#mainNav .nav_menustyle_1_1>ul>li>ul>li{float:none;text-align:left;position:static;top:auto;left:auto;right:auto;bottom:auto;z-index:auto}
#mainNav .nav_menustyle_1_1>ul>li>ul>li>a{display:block;width:auto;height:auto;line-height:1.7;padding:9px 14px;font-size:13.5px;font-weight:400;background:none;border:0;border-radius:8px;color:var(--body);white-space:nowrap}
#mainNav .nav_menustyle_1_1>ul>li>ul>li>a:hover{background:#F0F7F5;color:var(--teal)}

/* 组件 1058780 简单检索（模板容器 .nav-search；组件态 .nav-search-input > input[type=text]+input[type=submit]）
   设计稿只画了一个 40px 图标按钮，故默认把文本框收成 0 宽，点/悬停时展开。 */
.h-tools{display:flex;align-items:center;gap:10px;flex:none}
.h-tools .nav-search{display:flex;align-items:center}
.nav-search-input{display:flex;align-items:center}
.nav-search-input input[type=text]{width:0;height:40px;padding:0;margin-right:0;border:0 solid transparent;border-radius:10px;background:#fff;font-family:var(--font);font-size:14px;color:var(--ink);outline:none;transition:width .28s ease,padding .28s ease,margin .28s ease,border-width .28s ease,border-color .28s ease}
.nav-search:hover input[type=text],.nav-search-input:focus-within input[type=text]{width:168px;padding:0 14px;margin-right:8px;border-width:1px;border-color:var(--line)}
.nav-search-input input[type=submit]{flex:none;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316233A' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat center/17px;color:transparent;cursor:pointer;transition:border-color .25s ease}
.nav-search:hover input[type=submit]{border-color:var(--teal)}

/* ══════════ 搜索框展开态：让出被压住的右侧两个栏目（it-009 修订 R1） ══════════
   问题（用户 2026-09-24 反馈）：11 个一级栏目后，PC 端把搜索框展开会吃掉 176px
   （`.h-tools` 实测 40 → 216px），而 11 栏目自然宽 878px、头部容器上限 1240px，
   于是导航可用宽度最大只有 `1240 − 238 − 216 = 786px`。实测展开态导航末项右缘越出
   工具区 **92px**（1440 档 `gapToTools = −92`），表现就是栏目文字压在搜索框上。

   处置：**展开搜索时收拢最右两项**（服务指南 78 + 实验教学中心 106 + 2 处间隙 = 188px），
   剩余 690px ≤ 743px（最紧的 1260 档）→ 余量 53px，全 PC 档位不再重叠。
   （只收 1 项在任何档位都不够：1440 下仍余 800px > 786px。）

   为什么用"过渡收拢"而不是 `display:none`（**两种方案都实测过**）：
  搜索框本身有 0.28s 宽度过渡，若被裁的两项"瞬间消失/出现"，则**收起方向**会出现约 0.28s
  的重叠窗口（栏目已回来、搜索框还没缩回去）——CDP 实测 `display:none` 时该窗口的重叠量
  最大 135px（1260 档），只是随时间衰减。
  改过渡后两条过渡同帧推进：占宽 = 238 + (878 − 184p) + (40 + 176p) = 1156 − 8p，
  最紧的 1260 档容器 1197，**全过程任一时刻都有 ≥41px 余量**（CDP 逐帧采样实测 min gap ≥ 0）。

  ⚠ 过渡属性必须是 `font-size`（14px → 0）+ `padding`，**不能是 `max-width`**：
  `max-width` 基值是 auto/50vw 这类远大于实际宽度的值，插值时"实际宽度"要到过渡末段才
  开始变（实测展开过程 min gap = −19 ~ −47、收起 −15 ~ −43，等于没修）；
  `font-size` 与文字占宽严格成正比（文字宽 = 字数 × font-size），插值全程同步。
  `overflow:hidden` 放在基态 `a` 上：收拢时文字被裁掉而不是溢出到搜索框上，
  且它只裁 `a` 自身（下拉卡片是 `li` 的子节点，不受影响）；`height/line-height` 保持 92px，
  竖向不跳。

   ⚠ 必须限定 ≥1260px：≤1259px 导航本就是汉堡面板，若不限档位，则"先聚焦搜索再开面板"
   会让面板里少两项（面板没有这个空间压力，不该裁栏目）。 */
@media(min-width:1260px){
  .header .container:has(.nav-search:hover) #mainNav .nav_menustyle_1_1>ul>li:nth-last-child(-n+2)>a,
  .header .container:has(.nav-search-input:focus-within) #mainNav .nav_menustyle_1_1>ul>li:nth-last-child(-n+2)>a{font-size:0;padding:0;opacity:0}
}

.burger{display:none}
.sub-toggle{display:none}

/* ============ Mobile Nav（移动端导航面板） ============ */
/* 说明：.header 的 backdrop-filter 会为 fixed 后代建立包含块，
   故移动端导航采用「吸附在吸顶头下方的全宽面板」而非右侧固定抽屉：
   #mainNav 以 .header 为包含块（position:sticky），top:100% 即头部正下方，
   全宽 + 内部滚动，规避包含块错位与层叠上下文两个坑。
   注：.sub-toggle 按钮在博达组件渲染的导航 HTML 中不存在（组件 HTML 不可改），
   由 assets/js/main.js 在运行时注入——见 VERSION.md 已知偏差。 */
.nav-mask{display:none}
body.nav-open{overflow:hidden}

/* ============ Footer ============ */
.footer{background:var(--navy);color:rgba(255,255,255,.6);position:relative}
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent)}
.footer-main{padding:64px 0 44px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px}
.f-brand .name{font-size:19px;font-weight:700;color:#fff;margin-bottom:6px}
.f-brand .en{font-size:11px;letter-spacing:2px;color:rgba(255,255,255,.4);font-family:var(--font-en);display:block;margin-bottom:20px}
.f-brand p{font-size:13.5px;line-height:2}
.f-col h5{font-size:15px;color:#fff;font-weight:600;margin-bottom:20px;position:relative;padding-bottom:10px}
.f-col h5::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;background:var(--teal)}
.f-col a{display:block;font-size:13.5px;padding:5px 0;color:rgba(255,255,255,.55)}
.f-col a:hover{color:var(--cyan);padding-left:6px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:20px 0;font-size:12.5px;color:rgba(255,255,255,.4)}
.footer-bottom .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.footer-bottom a{color:rgba(255,255,255,.55)}
.footer-bottom a:hover{color:var(--cyan)}
/* 组件 190569 版权（模板容器 .foot-copyright） */
.footer-bottom .foot-copyright p{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.4)}

/* ---- 页脚二维码（仅首页：index.html / index.jsp） ----
   来源：旧站 https://sjxy.gznu.edu.cn/szdw/bssds.htm 页脚的「红色党建 / 青春生科」两个
   公众号入口（旧站类名 .foot-logo / .foot-wx / .foot-wb / .foot-code，jQuery 切 display）。
   本版沿用旧站的交互口径：常态只显示微信图标，鼠标移到图标上显示二维码；改用纯 CSS
   `:hover` 实现（本版不引入 jQuery），并补 `:focus-visible` 以便键盘可达。
   图标与二维码图片已本地化：静态站 assets/img/、模板 template_files/9/img/。 */
/* 含二维码块的页脚改为 5 列（.f-qr 紧跟 .f-brand 并排）；未含该块的其它页面
   保持原 4 列网格不受影响，故用 :has() 限定作用面。 */
.footer-main:has(.f-qr){grid-template-columns:1.4fr auto 1fr 1fr 1fr}
.footer-main:has(.f-qr) .f-brand{min-width:272px}
.f-qr{display:flex;align-items:flex-start;gap:28px}
.f-qr-item{position:relative;display:block;width:110px;text-align:center}
.f-qr-item .f-qr-icon{width:110px;height:auto;opacity:.82;transition:opacity .25s ease}
.f-qr-item:hover .f-qr-icon,.f-qr-item:focus-visible .f-qr-icon{opacity:1}
.f-qr-label{display:block;margin-top:10px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.55);white-space:nowrap;transition:color .25s ease}
.f-qr-item:hover .f-qr-label,.f-qr-item:focus-visible .f-qr-label{color:var(--cyan)}
/* 二维码：常态隐藏，hover 图标时原地浮出（覆盖图标位，与旧站一致，不会撑出页脚） */
.f-qr-code{position:absolute;left:-5px;top:-5px;width:120px;height:120px;border:4px solid #fff;border-radius:10px;background:#fff;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;z-index:6}
.f-qr-item:hover .f-qr-code,.f-qr-item:focus-visible .f-qr-code{opacity:1;visibility:visible}

/* ============ Back to top ============ */
.to-top{position:fixed;right:28px;bottom:28px;width:46px;height:46px;border-radius:12px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transition:all .3s;z-index:90}
.to-top.show{opacity:1;visibility:visible}
.to-top:hover{background:var(--teal)}

/* ============ Responsive ============ */
/* 导航折叠断点（it-009：1199px → 1259px）
   真实栏目树有 11 个一级栏目（见 `菜单模块内部html.txt`），按「院徽 238px + 14px 字号 +
   11px 左右内边距」实测需 924px 上下，而头部可用宽度受 max-width:1240px 限制；
   需 ≥1260px 视口才能单行不折行，故低于 1260px 改用汉堡 + 下方展开面板。
   ⚠ 该断点必须与 assets/js/main.js 的 matchMedia('(max-width:1259px)') 保持一致。 */
@media(max-width:1259px){
  .burger{display:flex;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);align-items:center;justify-content:center;background:#fff;cursor:pointer}
  /* 移动端导航面板：默认收起，点击汉堡后现身于吸顶头正下方 */
  #mainNav{display:none}
  .header #mainNav.open{display:block;position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 22px 44px rgba(7,27,58,.16);padding:6px 0 18px;max-height:calc(100vh - 130px);overflow-y:auto;overscroll-behavior:contain}
  #mainNav.open .nav_menustyle_1_1{display:block}
  #mainNav.open .nav_menustyle_1_1>ul{display:block}
  #mainNav.open .nav_menustyle_1_1>ul>li{position:relative}
  #mainNav.open .nav_menustyle_1_1>ul>li>a{display:block;height:auto;line-height:1.4;padding:12px 20px;font-size:15.5px;border-bottom:1px solid var(--line)}
  #mainNav.open .nav_menustyle_1_1>ul>li>a::after{display:none}
  /* 子菜单折叠：默认收起，点右侧箭头展开 */
  #mainNav.open .nav_menustyle_1_1>ul>li:has(>ul)>a{padding-right:58px}
  #mainNav.open .sub-toggle{display:flex;position:absolute;top:9px;right:12px;width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);align-items:center;justify-content:center;cursor:pointer}
  #mainNav.open .sub-toggle svg{transition:transform .25s ease}
  #mainNav.open li.sub-open>.sub-toggle svg{transform:rotate(180deg)}
  #mainNav.open .nav_menustyle_1_1>ul>li>ul{display:none}
  #mainNav.open .nav_menustyle_1_1>ul>li.sub-open>ul{display:block;position:static;top:auto;left:auto;min-width:0;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;border-radius:0;background:#F7FAFD;padding:4px 0 8px;transition:none}
  #mainNav.open .nav_menustyle_1_1>ul>li>ul>li>a{padding:8px 20px 8px 34px;font-size:14px;border-radius:0;white-space:normal}
  .nav-mask{display:block;position:fixed;inset:0;background:rgba(7,27,58,.45);z-index:95;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease}
  .nav-mask.open{opacity:1;visibility:visible}
}
@media(max-width:1080px){
  /* 手机模式（≤1080px）：顶部工具条整条隐藏 —— GOAL it-004 第 2 项（v0.1 沿用）。 */
  .topbar{display:none}
  /* 头部进一步收窄（院徽已在基样式统一为 238px，此处不再重复声明） */
  .header .container{height:76px}
  .footer-main{grid-template-columns:1fr 1fr}
  /* 二维码块所在页脚：:has() 权重高于本断点规则，须同比复述，否则仍是 5 列 */
  .footer-main:has(.f-qr){grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .container{width:min(var(--container),calc(100% - 32px))}
  /* 头部进一步收窄 */
  .header .container{height:64px}
  .brand .nav-logo{width:186px}
  .footer-main{grid-template-columns:1fr}
  .footer-main:has(.f-qr){grid-template-columns:1fr}
  .footer-main:has(.f-qr) .f-brand{min-width:0}
}