/* nav.css — 全站统一导航样式（与首页 100% 一致）
   说明：由 nav.js 注入统一结构；本文件在每个页面最后加载，
   用于覆盖各页面自带的旧导航样式（styles.css 的 .bar=62px/.mi a=14.5px
   以及缺失 .sub 下拉面板规则等问题），保证所有页面导航外观完全一致。 */
:root{
  --green:#0e7c54; --green-deep:#0a5238; --green-soft:#e8f4ee;
  --gold:#c8a24a; --gold-deep:#a8842f;
  --ink:#1c2b25; --muted:#5f6f68; --line:#e3ece7;
  --shadow:0 1px 2px rgba(16,40,30,.05),0 10px 30px rgba(16,40,30,.07);
}
.util{background:var(--green-deep);color:#dbeee5;font-size:12.5px}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:36px}
.util a{color:#bfe0cf;margin-left:16px}
/* 关键修复（2026-10-02）：移除 header 的 backdrop-filter。
   带 backdrop-filter 的元素会建立「backdrop root」合成层；其 position:absolute 子元素
   （下拉子菜单 .sub）一旦溢出 header 盒子，在部分真实浏览器（Safari / 某些 GPU 合成的
   Chrome）会被合成进 background 图层，表现为「子菜单被页面正文遮挡 / 半透明露底」——
   这正是用户报的「点志愿填报后所有子菜单被遮挡」。无头 Chrome（软件渲染）不重现该 GPU 合成 bug。
   这里显式 backdrop-filter:none 覆盖各页面自带的 header{backdrop-filter:blur(...)}
   （nav.css 在每页最后加载，同特异性下后者胜出）。isolation:isolate + z-index:120
   保证下拉层始终位于页面正文之上。 */
header{position:sticky;top:0;z-index:120;background:#fff;isolation:isolate;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:20px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--green-deep);white-space:nowrap}
.logo .mk{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--green),var(--green-deep));color:#fff;display:grid;place-items:center;font-size:17px;font-weight:800;box-shadow:var(--shadow)}
.logo small{display:block;font-size:10.5px;color:var(--muted);font-weight:600;letter-spacing:1px}
.menu{display:flex;flex:1;gap:2px}
.mi{position:relative}
.mi>a{display:flex;align-items:center;gap:4px;padding:10px 12px;border-radius:8px;font-size:15px;font-weight:600;color:var(--ink);transition:.18s;white-space:nowrap}
.mi>a:hover{background:var(--green-soft);color:var(--green)}
.mi>a.active{background:var(--green-soft);color:var(--green)}
.mi>a .care{font-size:10px;color:var(--muted)}
.sub{position:absolute;top:100%;left:0;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;z-index:60}
.mi:hover .sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub a{display:block;padding:7px 11px;border-radius:8px;border-left:3px solid transparent;transition:.15s}
.sub a:hover{border-left-color:var(--gold);background:var(--green-soft)}
/* 当前所在子菜单项常亮高亮（与 hover 同视觉），解决「点了军警司法院校却点亮多元升学通道」 */
.sub a.active{border-left-color:var(--gold);background:var(--green-soft);color:var(--green);font-weight:600}
.sub a.active b{color:var(--green)}
.sub a b{display:block;font-size:14px;color:var(--ink)}
.sub a small{color:var(--muted);font-size:12px}
/* 高考资讯子菜单：条目副文本仅是「N 条」计数，双行布局徒增高度 —— 改单行（标题 + 计数同行）压缩行距 */
#nav-news-sub a b{display:inline}
#nav-news-sub a small{display:inline;margin-left:8px}
/* 三级菜单（如 院校库 › 软科排名 › 中国大学排名/民办/驻鲁/单科）：右侧浮出，悬停展开 */
.sub3{position:relative}
.sub3>.sub3-t{display:flex;align-items:center;gap:6px;padding:9px 11px;border-radius:8px;border-left:3px solid transparent;cursor:pointer;transition:.15s}
.sub3:hover>.sub3-t{border-left-color:var(--gold);background:var(--green-soft)}
.sub3>.sub3-t b{font-size:14px;color:var(--ink)}
.sub3>.sub3-t small{color:var(--muted);font-size:12px}
.sub3>.sub3-t .care{margin-left:auto;color:var(--muted);font-style:normal;font-size:13px}
.sub3-box{position:absolute;left:100%;top:-8px;margin-left:4px;min-width:210px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:8px;opacity:0;visibility:hidden;transform:translateX(4px);transition:.16s;z-index:70}
.sub3:hover .sub3-box{opacity:1;visibility:visible;transform:translateX(0)}
.auth{display:flex;gap:8px;white-space:nowrap}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;border:1px solid transparent}
.btn-gold{background:var(--gold);color:#3a2c08}
.btn-gold:hover{background:var(--gold-deep);color:#fff}
.btn-ghost{border-color:var(--line);color:var(--green-deep)}
.btn-ghost:hover{background:var(--green-soft)}
@media(max-width:980px){
  .auth .btn-ghost{display:none}
  .util .wrap{font-size:12px}
}

/* ==== 隔离层：防止各页面自有 CSS 污染导航 ====
   部分页面自定义了 .wrap / .auth / .menu / .bar（如 account.html 的居中卡片、
   page_volunteer.html 的 .menu），会造成导航走样。这里用更高特异性锁定导航，
   保证无论页面自带什么规则，导航外观始终与首页一致。 */
header>.wrap{max-width:1280px;margin:0 auto;padding:0 20px;display:block;flex:none}
/* ⚠ overflow:visible 必须显式声明——这是「子菜单被整条裁掉」的根因防线。
   背景：在 <header> 之内的定位祖先链上，只要任何一层 overflow 不是 visible，
   .sub（position:absolute; top:100%）就会连同溢出部分一起被裁切。表现为计算样式
   opacity:1 / visibility:visible（看似正常），实际像素全被裁掉、elementFromPoint 也
   命中不到面板——这正是用户报的「点志愿填报后所有子菜单都看不到」。
   踩坑实例：page_advance.html 里一条本意给表格色阶条用的裸规则 .bar{overflow:hidden}
   会命中 header 内部的 <div class="wrap bar">，把整条导航层设成裁切。
   这里用 header>.wrap.bar(0,1,1) 压过各页页内裸 .bar(0,1,0)；隔离层本来就该锁死导航样式，
   缺这个显式声明 = 任何页面只要写一条同名裸规则就能再次搞坏全站下拉。 */
header>.wrap.bar{display:flex;align-items:center;justify-content:flex-start;gap:20px;height:64px;overflow:visible}
header .menu{display:flex;flex:1;gap:2px;flex-wrap:nowrap;overflow:visible}
header .menu .sub{overflow:visible}
header .auth{display:flex;gap:8px;white-space:nowrap;width:auto;max-width:none;margin:0;padding:0;background:none;border:0;box-shadow:none}
/* 防页面自带 header 规则把导航压到次级菜单条之下：nav.js 注入的 header 永远在顶层，
   保证子菜单下拉层（.sub 在 header 堆叠上下文内）能盖住页面内的 sticky 次级菜单条（如 page_volunteer 的 .menubar z-index:68） */
#site-nav header{z-index:120}

/* ==== 收窄视口：菜单换行 + 下拉层改为整条导航对齐，避免整页横向滚动 ====
   必须放在隔离层之后：媒体查询不提升优先级，写在前面会被同特异性的
   header .menu{overflow:visible} 覆盖，导致窄屏出现整页横向溢出。
   两点实测结论（chrome-cdp-page-measure，多页一致）：
   1) 单行菜单的自然宽度约 1174px，原断点 980px 太低 → 981–1179px 区间
      导航自身把整页撑出横向滚动，故断点提到 1199px（导航换行为两行）。
   2) 下拉面板 .sub 用 opacity/visibility 隐藏时仍占据布局，仅靠自身宽度
      就会在 ≤1180px 溢出（390 溢 9px、768 溢 19px，且与是否悬停无关）。
      这里让 .mi 退出定位上下文、把 .sub 改为以 header 为基准并限制宽度，
      隐藏态与展开态都不会越过视口右边界；同时保留原有的淡入动画。 */
@media(max-width:1199px){
  /* 修复：页面「稍微缩小」时，登录/退出(auth) 与菜单(menu) 始终同行。
     原规则 .menu{order:3;flex:1 1 100%} 强制菜单独占第二行，把 auth 留在顶行
     → 两者不同行。现改为：bar 保持单行(flex-wrap:nowrap)，菜单 min-width:0
     允许其内部换行/收缩而不撑破整页（不再触发整页横向滚动），auth 用
     flex:0 0 auto + margin-left:auto 钉在顶行最右。无论菜单内部换行成几行，
     auth 始终与菜单同处一条水平带（垂直居中），彻底解决分行问题。
     仅在 ≤768px 真正移动端才允许整条导航换行堆叠。 */
  header>.wrap.bar{flex-wrap:nowrap;height:auto;padding-top:8px;padding-bottom:8px;gap:12px;align-items:center}
  header .menu{order:2;flex:1 1 auto;min-width:0;margin-top:0;margin-left:0;flex-wrap:wrap;overflow:visible}
  header .auth{order:3;flex:0 0 auto;margin-left:auto}
  header .menu .mi{position:static}
  header .menu .mi>a{padding:8px 10px;font-size:14px}
  header .menu .sub{left:12px;right:auto;min-width:0;max-width:none;width:min(240px,calc(100vw - 24px))}
}
/* 真正移动端：视口极窄时整体换行堆叠（菜单占满一行在下，auth 在最右），属预期行为 */
@media(max-width:768px){
  header>.wrap.bar{flex-wrap:wrap;height:auto;row-gap:4px;gap:8px}
  header .menu{order:2;flex:1 1 100%}
  header .auth{order:3;flex:0 0 auto;margin-left:auto}
}