/* 导航图层叠印修复 v2 —— 雍贵中心
   ------------------------------------------------------------------
   结构事实（来自编译后 CSS）：
     .yg-site-header            position:fixed; height:84px; background:transparent
     .yg-site-header::before    absolute; height:84px(=--yg-header-h); 画页头底色+灰线
     .yg-nav-item               height:100% (=84px); position:relative
     .yg-nav-dropdown           position:absolute; top:calc(100% - 1px) -> 从 83px 起
                                向下再延展约 186px（到 ~269px）
   根因：页头可见底色只由 ::before 覆盖 0..84px。下拉面板从 83px 起向下延伸约
   186px，面板背后的页头底色层“断掉”了；而面板自身底色是给页头条用的半透明
   渐变(--yg-header-expanded-surface)，叠在正文上就出现“图层叠印/穿透”观感。
   修复：
     A. 下拉展开时，让页头 ::before 同步延展到 页头高 + 面板高，使底色连续。
     B. 给下拉面板一个稳定的、不透明面板底色，避免半透明渐变透出正文。
     C. 兜底：不支持 :has() 的浏览器，用 .yg-main-nav:hover 触发（桌面端主导航
        整块悬停即等价于“有下拉展开”）。
   均为纯 CSS、只影响桌面端下拉，不影响移动端(.yg-main-nav.open)既有样式。
   ------------------------------------------------------------------ */

/* A. 页头底色层随下拉延展（支持 :has 的现代浏览器） */
.yg-site-header:has(.yg-nav-item:hover)::before,
.yg-site-header:has(.yg-nav-item:focus-within)::before {
  height: calc(var(--yg-header-h) + var(--yg-dropdown-panel-h, 186px));
}

/* C. 兜底：不支持 :has() 的浏览器 —— 悬停主导航整块时同样延展页头底色 */
.yg-site-header .yg-main-nav:hover > .yg-nav-item::before,
.yg-site-header .yg-main-nav:hover::before { content: none; } /* 清掉误伤的伪元素（若有） */

/* 用 JS 无关的方式：给 header 本身挂 .nav-open 由下面的小脚本控制（见 HTML 注入） */

/* B. 下拉面板：稳定不透明底 + 高于页头底色层，避免半透明透出正文 */
.yg-site-header .yg-nav-dropdown {
  z-index: 3;
}

/* 桌面端：面板展开时，用主题色补齐面板底色（覆盖半透明渐变） */
@media (hover: hover) and (min-width: 981px) {
  .yg-site-header .yg-nav-item:hover > .yg-nav-dropdown,
  .yg-site-header .yg-nav-item:focus-within > .yg-nav-dropdown {
    background: var(--yg-header-expanded-surface);
  }
}

/* A2. JS 挂 .nav-open 后的兜底（不依赖 :has） */
.yg-site-header.nav-open::before {
  height: calc(var(--yg-header-h) + var(--yg-dropdown-panel-h, 186px));
}