/* ==========================================================================
   portal-r29a.css（第 29a 轮 · 只追加，不覆盖 portal.css / portal-extra.css）
   引入位置：放在 portal.css（建议连同 portal-extra.css）之后，最后引入最稳。

   作用域：只有官网公共头部（.site-top / .nav），全部规则都带 .site-top 前缀，
           特异性高于 portal.css / portal-extra.css 里的同名规则（.nav__sub 等），
           所以即使引入顺序靠前，也不会被那两个文件盖掉。

   内容：
     A. 头部导航滚动吸顶（问题4）
     B. 一级导航二级下拉面板（问题1）：白底 / 浅金边 / 圆角 / 轻阴影 / 金色 hover
     C. 窄屏（≤1180px，与 portal.css 的导航断点一致）下拉铺开，不裁剪、不溢出
     D. 减少动态效果
   ========================================================================== */

/* ==========================================================================
   A. 滚动吸顶（问题4）：<header class="nav"> 贴视口顶部，顶栏随页面滚走
   --------------------------------------------------------------------------
   A1. 为什么原设计「不吸顶」：
       portal.css:78 给「顶栏 + 导航」整组 .site-top 写了 position:sticky，
       但 portal.css:481-482 的兜底又给 html/body 写了 overflow-x:hidden。
       overflow-x:hidden 会让该元素成为滚动容器（另一轴被提升为 auto），
       body 一旦成为滚动容器，里面的 position:sticky 就只在 body 自己的滚动口内
       粘住 —— body 自身永远不滚动，于是粘性完全失效，看起来就是不吸顶。

       改法：body/html 用 overflow-x:clip。clip 同样裁掉横向溢出（仍然不会出现
       横向滚动条），但它**不生成滚动容器**，sticky 重新以视口为参照。
       老浏览器不支持 clip 时这条声明被丢弃，自动退回 portal.css 的 hidden
       （即只是不吸顶，不会比现在更糟）。

   A2. 为什么改成 display:contents：
       sticky 的粘住范围受「父元素盒子」限制。.site-top 只包住顶栏 + 导航（高约 116px），
       在它自己上面 sticky、或让里面的 <header class="nav"> sticky，导航最多只能在
       这 116px 里挪动 —— 滚过 116px 就跟着一起滚走（实测 nav.top = -473 @ scrollY 512）。
       让 .site-top 生成 display:contents：这个 div 不再生成盒子，导航的包含块变成
       <body>（整页高），sticky 的粘住范围才够长。.site-top 本身没有背景/边框
       （portal.css:78 只有 position/top/z-index），去盒子不丢任何视觉。
       层级改由导航自己承担：
         · 导航 900 —— 高于页面内容（hero 等最高 z-index:2），
         · 右侧浮窗 .fab 是 1200（footer.html 内联样式），仍然压在导航之上，
           不会被吸顶导航遮住；站内下拉面板在导航的层叠上下文里，也随导航一起置顶。
   ========================================================================== */
html{overflow-x:clip}
body{overflow-x:clip}

/* div.site-top（0,1,1）特异性高于 portal.css 的 .site-top（0,1,0），
   即使本文件被误引在 portal.css 之前也能生效。 */
div.site-top{display:contents}

.site-top header.nav{
  position:sticky;
  top:0;
  z-index:900;
}

/* A3. 「已固定」态：滚动后实底微透 + 模糊 + 阴影 + 高度略收紧。
   触发类 .is-scrolled 由已有的 portal.js:89-98 在 scrollY>8 时切换（不改 JS），
   portal-extra.css:89 只给了实底白 + 阴影，这里补上半透明 + 模糊 + 收紧。 */
.site-top header.nav.is-scrolled{
  background:rgba(255,255,255,.93);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 10px 26px rgba(31,31,31,.09);
  border-bottom-color:rgba(250,193,0,.30);
}

/* 高度收紧只在 ≥1181px（单行导航）做；≤1180px 时 .nav__in 是两行的 height:auto，
   硬给高度会把菜单行压掉，所以窄屏只保留阴影/底色变化（见 C 段末尾）。 */
@media (min-width:1181px){
  .site-top header.nav{
    transition:background .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
  }
  .site-top header.nav .nav__in{transition:height .22s var(--ease)}
  .site-top header.nav.is-scrolled .nav__in{height:70px}
}

/* ==========================================================================
   B. 二级下拉面板（问题1）
   --------------------------------------------------------------------------
   B1. 面板本体：portal-extra.css:76 已有基础样式，但边框是 --line（冷灰）、
       阴影是通用 --shadow，这里统一成站点的「白底 + 浅金边 + 14px 圆角 + 轻阴影」。
       宽度用 max-content：分类名一行放得下，绝不折成两行（4 条服务分类 / 3 条资讯
       分类都是一个名字一行，不会因为 min-width 被挤成两行）。
   B2. 显隐：hover 与键盘 focus-within 都能打开（触屏点按第一下通常也会落到
       :hover，见 C 段）。
   B3. 鼠标桥：面板与 <li> 之间留了 8px 视觉空隙（top:calc(100% + 8px)），
       鼠标斜着移进面板时会经过这段空白，:hover 立刻断开、面板 0.2s 就消失。
       做法与 portal-extra.css:119 的 .fab__pop::before 相同：给面板加一块透明的
       伪元素，盖住空隙并左右各外扩，鼠标停在桥上时仍算停在 li 内。
       面板隐藏时 visibility:hidden 会同时让伪元素不可命中，所以不会在页面上
       留下一块「点不动的死区」。
   ========================================================================== */
.site-top .nav__sub{
  top:calc(100% + 8px);
  left:50%;
  width:max-content;
  min-width:200px;
  max-width:calc(100vw - 40px);
  padding:8px;
  background:#fff;
  border:1px solid var(--gold-100);
  border-radius:14px;
  box-shadow:0 18px 44px rgba(31,31,31,.10),0 2px 8px rgba(31,31,31,.04);
  transform:translateX(-50%) translateY(6px);
}

.site-top .nav__item.has-sub:hover .nav__sub,
.site-top .nav__item.has-sub:focus-within .nav__sub{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

/* 鼠标桥：8px 空隙 + 上下各留余量，横向比面板再宽 10px，斜向移动也不断 */
.site-top .nav__sub::before{
  content:"";
  position:absolute;
  left:-10px;
  right:-10px;
  top:-12px;
  height:14px;
}

/* 键盘聚焦在面板里时，箭头也翻上去，和 hover 表现一致 */
.site-top .nav__item.has-sub:hover .nav__caret,
.site-top .nav__item.has-sub:focus-within .nav__caret{transform:rotate(180deg)}

/* B5. 触屏展开态：header.html 末尾的内联脚本只对 (hover:none) 设备生效，
   点一下给 <li> 加 .is-open。规则放在媒体查询之外，因为 iPad 横屏（1194px 宽）
   也是 hover:none，但不会命中 ≤1180px 那条 —— 放里面会让点一下「什么都不发生」。 */
.site-top .nav__item.has-sub.is-open .nav__sub{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.site-top .nav__item.has-sub.is-open .nav__caret{transform:rotate(180deg)}

/* 桌面端点击页内锚点子链接后强制收起下拉（覆盖 :hover / :focus-within，加 !important）。
   锁在 .nav-sub-locked 上，鼠标离开该一级项即由 header.html 内联脚本解锁，恢复正常 hover 行为。 */
.site-top .nav__item.has-sub.nav-sub-locked .nav__sub{
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateX(-50%) translateY(6px) !important;
  pointer-events:none !important;
}

/* B4. 单项：单行不折行；hover / 键盘聚焦用金色底 + 深金字（不用亮金 #FAC100 上写白字） */
.site-top .nav__sub li + li{margin-top:2px}
.site-top .nav__sub li a{
  display:block;
  padding:9px 14px;
  border-radius:9px;
  font-size:14px;
  font-weight:500;
  line-height:1.5;
  color:var(--ink-700);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.site-top .nav__sub li a:hover,
.site-top .nav__sub li a:focus-visible{
  background:var(--gold-50);
  color:var(--gold-600);
}

/* ==========================================================================
   C. 窄屏 / 触屏（≤1180px，与 portal.css:441 的导航断点一致）
   --------------------------------------------------------------------------
   现状问题：portal.css:446 把 .nav__menu 改成了「横向滚动条」
   （overflow-x:auto，另一轴随之 auto），而下拉面板当时是相对 <li> 绝对定位的，
   包含块在滚动容器内部 —— 于是面板被这个滚动容器裁掉，展开也看不见。

   改法：把面板的定位祖先从 <li> 上提到 <header class="nav">（它是 sticky，
   本身就是定位元素）。绝对定位元素的包含块一旦在裁剪祖先之外，就不再被
   .nav__menu 的 overflow 裁剪；同时宽度以整条导航为参照，天然不会溢出屏幕。

   面板做成「居中、最宽 560px、两列」：分类项仍是 nowrap（不折行），
   窄到 560px 以下改一列，手机上也不会横向出屏。
   ========================================================================== */
@media (max-width:1180px){
  .site-top .nav__item{position:static}

  .site-top .nav__sub{
    top:100%;
    left:50%;
    right:auto;
    width:min(560px,calc(100vw - 24px));
    min-width:0;
    max-width:none;
    padding:8px 10px 12px;
    border-top:1px solid var(--gold-100);
    border-radius:0 0 16px 16px;
    box-shadow:0 20px 40px rgba(31,31,31,.14);
    transform:translateX(-50%) translateY(-6px);
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2px 6px;
  }
  .site-top .nav__item.has-sub:hover .nav__sub,
  .site-top .nav__item.has-sub:focus-within .nav__sub{
    transform:translateX(-50%) translateY(0);
  }
  /* 面板已经贴住导航条下沿（top:100%），没有空隙，不需要鼠标桥；
     否则这块透明命中区会压在导航条底部，反而让菜单一直不收起 */
  .site-top .nav__sub::before{display:none}

  /* 极端长的分类名：单行 + 省略号，宁可截断也不折成两行 */
  .site-top .nav__sub li a{
    padding:10px 12px;
    font-size:14.5px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

/* 手机：一列，避免两列里名字被截得太狠 */
@media (max-width:560px){
  .site-top .nav__sub{grid-template-columns:1fr}
}

/* ==========================================================================
   D. 减少动态效果：只保留显隐本身，去掉位移与高度过渡
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .site-top header.nav,
  .site-top header.nav .nav__in,
  .site-top .nav__sub,
  .site-top .nav__sub li a{transition:none}
}