/* ============================================================
   site-header.css — 站点公共头部样式（顶栏 topbar + 主导航 header）
   与 site-header.js 配套使用，供多个页面复用。

   说明：
   1. 下面的 :root 颜色变量与 .wrap 容器宽度是全站共用的基础设定，
      所以放在本文件里统一维护，各页面 <link> 本文件后即可直接使用。
   2. 换主题色：只改 :root 里的变量值。
   3. 通常无需改本文件；改导航项、logo 文件名请见 site-header.js。
   ============================================================ */

/* SECTION: 全站共享变量与容器（供页面其它区域复用） */
:root{
  --blue:#0a4f9c;--blue-d:#073a75;--blue-l:#e8f1fb;--ink:#22303f;--gray:#6b7a8c;
  --line:#dfe6ee;--accent:#f08c00;--accent-d:#d97b04;--ok:#1a9e5c;--bad:#d33a2f;
}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}

/* SECTION: 顶栏 topbar */
.topbar{background:#0b2545;color:#c7d6ea;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:34px}
.topbar a{text-decoration:none}
.topbar .lang a{margin-left:10px;color:#c7d6ea}
.topbar .lang a.on{color:#fff;font-weight:700}

/* SECTION: 主导航 header */
header.site{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60;box-shadow:0 2px 8px rgba(11,37,69,.06)}
header.site a{color:inherit;text-decoration:none}
header.site img{display:block;max-width:100%}
header.site button{font-family:inherit;cursor:pointer}
.hd{display:flex;align-items:center;gap:22px;height:72px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo svg{width:40px;height:40px}
.logo img{height:40px;width:auto;display:block}
.logo b{font-size:20px;color:var(--blue);line-height:1.2;display:block}
.logo span{font-size:12px;color:var(--gray);letter-spacing:1px;display:block}
nav.main{flex:1;display:flex;gap:2px}
nav.main>.item{position:relative}
nav.main>.item>a,.nav-btn{display:block;padding:0 14px;line-height:72px;font-size:16px;color:var(--ink);background:none;border:none;cursor:default}
nav.main>.item:hover>a,nav.main>.item.active>a{color:var(--blue);font-weight:700}
nav.main .drop{display:none;position:absolute;left:0;top:64px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px rgba(11,37,69,.12);min-width:190px;padding:6px 0;z-index:70}
nav.main .drop a{display:block;padding:8px 18px;white-space:nowrap;cursor:default}
nav.main .drop a:hover{background:var(--blue-l);color:var(--blue)}
nav.main>.item:hover .drop{display:block}
.hd-search{display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden;flex-shrink:0}
.hd-search input{border:none;padding:0 10px;width:150px;height:36px;outline:none;font-size:14px}
.hd-search button{background:var(--blue);color:#fff;border:none;width:40px}
.burger{display:none;background:none;border:none;font-size:25px;color:var(--blue)}

/* SECTION: 头部轻提示（页面自带 #toast 时优先用页面的） */
.sh-toast{position:fixed;left:50%;bottom:36px;transform:translateX(-50%) translateY(20px);background:rgba(11,37,69,.94);color:#fff;padding:11px 22px;border-radius:24px;font-size:14.5px;opacity:0;pointer-events:none;transition:.25s;z-index:200;max-width:86vw;text-align:center}
.sh-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* SECTION: 移动端（窄屏折叠导航） */
@media (max-width:860px){
  nav.main,.hd-search{display:none}
  .burger{display:block}
  header.site nav.main.open{display:flex;position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;border-bottom:1px solid var(--line);max-height:70vh;overflow:auto;box-shadow:0 12px 24px rgba(11,37,69,.15)}
  header.site nav.main.open>.item>a,.nav-btn{line-height:46px;padding:0 20px}
  nav.main .drop{position:static;display:block;box-shadow:none;border:none;background:#f8fafc}
}