/* ================================================================
   NAV — 顶部主菜单（透明置顶 → 吸附磨砂玻璃白条）
   含 logo 切换、下拉子菜单、语言切换按钮。
   依赖 tokens.css 的变量。
   ================================================================ */
.nav {
  position: fixed; left: 0; right: 0; top: 14px;
  z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px clamp(20px, 4vw, 56px);
  transition: top .35s var(--ease-out),
              background .4s var(--ease-out),
              backdrop-filter .4s var(--ease-out),
              box-shadow .4s var(--ease-out),
              opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.nav.is-scrolled {
  top: 0;
  background: transparent;                          /* 毛玻璃移到 ::before：伪元素不是子菜单的祖先 → .nav 本身不是 backdrop root，导航与子菜单可同时有磨砂 */
  box-shadow: 0 1px 0 rgba(47,131,78,.08), 0 6px 28px -16px rgba(0,0,0,.12);
}
.nav.is-scrolled::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(255,255,255,.78);              /* 略提底色不透明度，补偿更轻的模糊 */
  backdrop-filter: saturate(150%) blur(8px);      /* 8px：磨砂仍在，滚动重算成本显著降低 */
  -webkit-backdrop-filter: saturate(150%) blur(8px);
}
.nav.is-scrolled .nav__lang:hover { color: white; }
.nav__logo img { height: 48px; }
/* logo 切换：顶部透明菜单用反白 logo，吸附白条菜单用彩色 logo */
.nav__logo .logo--scrolled,
.nav.is-scrolled .nav__logo .logo--default { display: none; }
.nav.is-scrolled .nav__logo .logo--scrolled { display: inline-block; }
.nav__menu {
  display: flex; gap: clamp(18px, 2.6vw, 36px);
  font-size: 15px; font-weight: 500; letter-spacing: .04em;
  font-family: var(--font-cn);
}
.nav__item { position: relative; }
.nav__menu > a, .nav__item > a {
  position: relative; display: inline-block; padding: 6px 2px;
  color: rgba(255,255,255,.92);
  transition: color .3s;
  text-shadow: 0 1px 8px rgba(0,0,0,.25);
}
.nav__menu > a::after, .nav__item > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--green); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.nav__menu > a:hover::after, .nav__menu > a.is-active::after,
.nav__item:hover > a::after, .nav__item > a.is-active::after { transform: scaleX(1); }
.nav.is-scrolled .nav__menu > a, .nav.is-scrolled .nav__item > a { color: var(--ink); text-shadow: none; }

/* Down-arrow caret — inline SVG using currentColor so it inherits text color.
   Stays static on hover (no rotation). */
.nav__caret {
  display: inline-block; vertical-align: middle;
  width: 10px; height: 6px;
  margin-left: 6px;
  color: currentColor;
}
/* Bricks/主题给 svg 设了 min-width/min-height:1em，会把三角撑到 15px。
   必须连 min-* 一起清零，width/height 才生效。 */
.nav__caret svg { width: 10px !important; height: 6px !important; min-width: 0 !important; min-height: 0 !important; display: block; }

/* DROPDOWN submenu (frosted glass).
   Uses an INVISIBLE BRIDGE (.nav__item::after) covering the gap so the
   hover state stays alive when moving from the menu item to the submenu. */
.nav__item::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 200px; height: 28px;
  transform: translateX(-50%);
  pointer-events: none;
}
.nav__item:hover::after { pointer-events: auto; }
.nav__sub {
  position: absolute; left: 50%; top: calc(100% + 28px);
  transform: translateX(-50%) translateY(-6px);
  list-style: none; padding: 8px 0; min-width: 152px;
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border: 1px solid rgba(47,131,78,.08);
  border-radius: 10px;
  box-shadow: 0 14px 36px -16px rgba(31,92,54,.25);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s var(--ease-out),
              visibility .25s,
              transform .25s var(--ease-out);
}
.nav__item:hover .nav__sub {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__sub li { list-style: none; }
.nav__sub a {
  display: block; padding: 9px 22px;
  font-size: 14px; color: var(--ink) !important; text-shadow: none !important;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.nav__sub a::after { display: none; }
.nav__sub a:hover { background: rgba(47,131,78,.10); color: var(--green) !important; }
.nav__lang {
  display: inline-block; background: transparent; cursor: pointer; line-height: 1;
  text-decoration: none; -webkit-appearance: none; appearance: none;
  border: 1px solid rgba(255,255,255,.6); padding: 6px 14px; border-radius: 20px;
  font-size: 13px; color: #fff; letter-spacing: .08em;
  transition: all .3s;
}
.nav.is-scrolled .nav__lang { border-color: var(--green); color: var(--green); }
.nav__lang:hover { background: var(--green); color: #fff; border-color: var(--green); }

/* hero（透明导航）上：KV 视频帧明暗多变，给 logo / 汉堡线 / 语言胶囊加投影+微暗底色，
   保证在明亮云层帧上也清晰可见（白色细元素否则会被亮背景吞掉）。仅未吸附透明态生效。 */
.nav:not(.is-scrolled) .nav__logo img { filter: drop-shadow(0 2px 7px rgba(0,0,0,.45)); }
.nav:not(.is-scrolled) .nav__toggle { filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
body:not(.nav-open) .nav:not(.is-scrolled) .nav__lang {
  border-color: rgba(255,255,255,.85);   /* 仅保留白描边（hero 顶部 .hero__shade 暗渐变已保证可读）；不加底色/投影 */
}

/* 右侧操作区（语言 + 汉堡）；桌面汉堡隐藏 */
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav__toggle { display: none; }

/* ════════ 移动端菜单（≤980px）：汉堡 → 全屏滑入面板 + 手风琴子菜单（参照 nexans.com 形式）════════ */
@media (max-width: 980px) {
  /* ★ 关键修复（移动端整页被缩小 / 右上角汉堡+语言+页脚「消失」的真正根因）：
     全屏 off-canvas 菜单 .nav__menu 是 position:fixed + transform:translateX(100%)，
     关闭时停在视口右侧之外（right≈2×视口宽），把文档横向撑宽 → 触发移动端浏览器的
     shrink-to-fit 缩放：window.innerWidth 从 414 变成 ~778，整页等比缩小、右侧汉堡/语言
     被挤出可视区、页脚也被推远。桌面用窗口缩放测不出（桌面模式不做 shrink-to-fit），
     只有真机 / DevTools 设备模式（mobile 仿真）才会复现。
     在根元素裁掉横向溢出即根治。用 clip 而非 hidden：不会把 overflow-y 变成 auto、
     不创建滚动容器、不干扰 Lenis 平滑滚动与 position:fixed（实测 innerWidth 恢复 414）。 */
  html { overflow-x: hidden; overflow-x: clip; }

  /* —— 汉堡按钮（三线 → ×）—— */
  .nav__toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 0; border: 0; background: transparent; cursor: pointer;
    position: relative; z-index: 90;
  }
  .nav__toggle span {
    display: block; width: 24px; height: 2px; margin: 0 auto; border-radius: 2px;
    background: #fff; transition: transform .3s var(--ease-out), opacity .2s, background .3s;
  }
  .nav.is-scrolled .nav__toggle span { background: var(--ink); }
  body.nav-open .nav__toggle span { background: var(--ink); }
  /* 打开时移除阴影：白底面板上的深色 X 无需投影；也避免 iOS Safari/WeChat 的 drop-shadow
     给 opacity:0 的中线也投影 → 形成「X 两侧 2 个小点」的残留。 */
  body.nav-open .nav__toggle { filter: none !important; }
  body.nav-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav__toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); }   /* 中线彻底收为 0 宽，杜绝两端残留/投影 */
  body.nav-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* 头部 logo + 操作区（语言/汉堡）抬到面板之上（面板 z-index:70），打开时仍可见 */
  .nav__logo, .nav__actions { position: relative; z-index: 90; }

  /* —— 面板打开时：头部强制吸附态（彩色 logo + 绿色语言，白底面板上可见）—— */
  body.nav-open .nav__logo .logo--default { display: none; }
  body.nav-open .nav__logo .logo--scrolled { display: inline-block; }
  body.nav-open .nav__lang { border-color: var(--green); color: var(--green); }

  /* —— 全屏面板（复用 .nav__menu）—— */
  .nav__menu {
    display: flex; flex-direction: column; gap: 0; align-items: stretch;
    position: fixed; inset: 0; z-index: 70;
    padding: calc(env(safe-area-inset-top, 0px) + 80px) 0 40px;
    background: #fff; font-size: 18px; letter-spacing: 0;
    transform: translateX(100%); visibility: hidden; opacity: 0;
    transition: transform .42s var(--ease-out), opacity .3s, visibility .42s;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  body.nav-open .nav__menu { transform: translateX(0); visibility: visible; opacity: 1; }
  body.nav-open { overflow: hidden; }

  /* 顶级行（直链 + 下拉父项）：满宽、深色、横线分隔 */
  .nav__menu > a,
  .nav__item > a {
    color: var(--ink) !important; text-shadow: none !important;
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 18px clamp(22px, 6vw, 34px);
    font-family: var(--font-cn); font-weight: 600; font-size: 18px;
  }
  .nav__menu > a { border-bottom: 1px solid var(--rule); }
  .nav__item { position: static; border-bottom: 1px solid var(--rule); }
  /* 去掉桌面下划线 / 悬浮桥 */
  .nav__menu > a::after, .nav__item > a::after, .nav__item::after { display: none; }
  .nav__menu > a.is-active, .nav__item > a.is-active, .nav__item.is-open > a { color: var(--green) !important; }

  /* caret 放大成手风琴指示，展开时翻转；用 padding 扩大点击热区（约 58×41）便于触摸，
     负 margin 抵消 padding 不改变视觉位置。文字区与 caret 区分离 → 点文字跳转、点箭头展开。 */
  .nav__caret {
    width: 14px; height: 9px;
    padding: 16px 22px; margin: -16px -8px -16px auto;
    transition: transform .3s var(--ease-out);
  }
  .nav__caret svg { width: 14px !important; height: 9px !important; }
  .nav__item.is-open > a .nav__caret { transform: rotate(180deg); }

  /* 子菜单：手风琴（折叠 → 展开） */
  .nav__sub {
    position: static; left: auto; right: auto; top: auto; transform: none;
    width: 100%; min-width: 0; max-width: none; box-sizing: border-box;        /* 防御：彻底重置桌面绝对定位/居中残留，保证满宽左对齐 */
    opacity: 1; visibility: visible; pointer-events: auto;
    box-shadow: none; border: 0; border-radius: 0; padding: 0; margin: 0;
    background: var(--bg-dim); backdrop-filter: none; -webkit-backdrop-filter: none;
    max-height: 0; overflow: hidden; transition: max-height .38s var(--ease-out);
  }
  .nav__item.is-open .nav__sub { max-height: 70vh; }
  .nav__sub a {
    padding: 14px clamp(34px, 9vw, 50px); font-size: 15px;
    color: var(--ink-soft) !important; border-bottom: 1px solid rgba(0,0,0,.05);
  }
  .nav__sub a:hover { background: rgba(47,131,78,.08); color: var(--green) !important; }

  /* 关键修复：移动端禁用桌面 hover 下拉行为。设备模式/触控板有鼠标悬浮时，
     桌面规则 .nav__item:hover .nav__sub{transform:translateX(-50%)} 会把子菜单左移半屏变"空白"。
     这里把 hover 态强制回正（与手风琴一致：位置不变、显隐由 .is-open 的 max-height 控制）。 */
  .nav__item:hover .nav__sub,
  .nav__menu .nav__item:hover .nav__sub {
    transform: none !important; left: auto !important; right: auto !important; top: auto !important;
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
  }
  .nav__item:hover::after { display: none !important; }
}