/* assets/css/layout/header.css — 吸顶页头：9 项主导航 + 双 CTA + 移动端汉堡面板。
   与基准项目的差别：这是多页站，导航项用 <a href> 跳真实文件，当前页靠 aria-current="page"
   高亮；不再是锚点滚动。行动区放在 <nav> 内部，所以移动端展开面板时按钮跟着一起走，
   DOM 只有一份，不需要为手机另做一套按钮。 */

.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(244,246,247,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)){
  .site-head{ background:var(--paper); }
}
.head-in{ display:flex; align-items:center; gap:24px; height:68px; }

/* ============ 品牌 ============ */
.brand{ display:flex; align-items:center; gap:10px; flex:none; text-decoration:none; }
.seal{ width:40px; height:40px; flex:none; }
.brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.brand-name{ font-family:var(--serif); font-weight:900; font-size:19px; letter-spacing:.01em; }
.brand-sub{ font-size:12px; color:var(--muted); }

/* ============ 主导航 ============ */
.head-nav{ display:flex; align-items:center; gap:22px; margin-left:auto; }
.nav-list{ display:flex; align-items:center; gap:22px; }
.nav-list a{
  position:relative; display:block; font-size:15px; text-decoration:none; color:var(--ink);
  padding-block:4px; white-space:nowrap;
}
.nav-list a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--cinnabar); transform:scaleX(0); transform-origin:left;
  transition:transform .18s ease;
}
.nav-list a:hover::after{ transform:scaleX(1); }
.nav-list a[aria-current="page"]{ font-weight:700; }
.nav-list a[aria-current="page"]::after{ transform:scaleX(1); }

/* ============ 行动区 ============ */
.head-actions{ display:flex; align-items:center; gap:12px; }
.head-cta{ padding:9px 20px; font-size:14px; }

/* ============ 移动菜单遮罩：由 main.js 创建并插入 body ============ */
.nav-backdrop{
  position:fixed; inset:0; z-index:45;
  background:rgba(15,35,56,.42);
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease;
}
.nav-backdrop.is-visible{ opacity:1; visibility:visible; }
/* 面板展开时锁住背景滚动。只在窄屏生效——桌面端面板不存在，锁滚动会有副作用 */
@media (max-width:960px){
  body.nav-locked{ overflow:hidden; }
}

/* ============ 汉堡按钮：基础样式隐藏，960 断点显示（见 responsive.css） ============ */
.nav-toggle{
  display:none; width:40px; height:40px; padding:8px 4px; flex:none;
  flex-direction:column; justify-content:center; gap:5px;
}
.nav-toggle span{ display:block; height:2px; background:var(--ink); transition:transform .2s ease, opacity .2s ease; }
.nav-toggle span:nth-child(2){ width:70%; }
.site-head.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.site-head.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
.site-head.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }