/* ============================================================
   LAKEFOX — component-header.css（Wave 2 任务 9）
   顶部导航（spec-g §07 / v7.html：72px 白底 sticky；Logo 双 V 折纸标 + 900/.06em 字标；
     14.5/500 链接 hover --pri；登录=线灰胶囊 注册=朱砂胶囊+强投影）+ 语言切换下拉 + 移动抽屉
   断点（DESIGN-SPEC §6）：桌面 nav ≥1024px；汉堡 + 抽屉 <1024px
   令牌全部引用 base.css :root（无裸 hex）；水平方向一律逻辑属性（RTL 自动镜像）
   动效三档令牌（--duration-fast/--duration-base，§7）；reduced-motion 由 base.css 全局兜底
   header 及附属表面（下拉/语言列表/抽屉）背景钉死 --bg-white（纯白 #FFF），
   不随 scheme 的米白页面底色（--color-background = #F4F4F2）漂移（v7 .nav 白底规格）
   ============================================================ */

.lf-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-white);
  border-block-end: 1px solid var(--color-card-border);
  transition: box-shadow var(--duration-base) var(--ease-out);
}

.lf-header--scrolled {
  box-shadow: 0 1px 5px rgba(20, 30, 34, 0.1); /* 滚动轻投影（客户 2026-08 指定） */
}

.lf-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px; /* v7 布局紧凑（8 链接场景） */
  min-height: 72px; /* v7 导航高度 */
  padding-block: var(--space-3);
}

/* ---------- 品牌 LOGO：墨玉双 V 折纸标同族（G§10：左片 --pri / 右片 --acc）+ 900 字标 ---------- */
.lf-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  text-decoration: none;
}

.lf-logo__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  line-height: var(--leading-none);
}

.lf-logo__text {
  font-family: var(--font-heading-family);
  font-size: var(--text-7); /* 22px（v7 logo 字标档） */
  font-weight: 900;
  letter-spacing: 0.06em; /* G logo 字距 */
  color: var(--pri); /* 主色字标（G 墨玉主色） */
}

/* ---------- 桌面导航（<1024px 隐藏，由汉堡抽屉接管） ---------- */
.lf-nav {
  display: none;
  align-items: center;
  gap: 14px; /* 主题 8 链接 + 3 下拉的紧凑间距（v7 26px 放不下，收缩到 14） */
}

@media (min-width: 1080px) {
  .lf-nav {
    display: flex;
  }
}

.lf-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 36px; /* 客户 2026-08：导航链接高度 */
  padding-inline: var(--space-3); /* 胶囊内距（客户 2026-08：hover 椭圆形状，对齐语言切换器） */
  border-radius: var(--radius-pill);
  font-size: 0.90625rem; /* 14.5px（v7 导航链接） */
  font-weight: 500;
  color: var(--color-foreground); /* 正文小字禁朱砂；hover/active 用朱砂装饰下划线双通道 */
  text-decoration: none;
}

.lf-nav__link:hover,
.lf-nav__link--active,
.lf-nav__item[open] > summary {
  background-color: var(--color-card-background); /* 一级 hover/active/展开 = 浅底胶囊（客户 2026-08） */
}

.lf-nav__link--active {
  font-weight: 600; /* 双通道：字重 + 浅底 */
}

/* ---------- 二级下拉菜单（details/summary 原生开合 + 桌面 hover 增强） ----------
   data-lf-nav-dropdown 契约见 global.js：互斥展开 / 外点关闭 / Escape 全关；
   显示动画复用语言列表的 visibility/opacity 模式；RTL 由 inset-inline 自动镜像 */
.lf-nav__item {
  position: relative;
}

.lf-nav__item > summary {
  list-style: none; /* 去 UA marker */
  cursor: pointer;
}

.lf-nav__item > summary::-webkit-details-marker {
  display: none;
}

/* 下拉契约统一：nav 二级菜单与语言列表共享同一套 dropdown 盒模型
   （margin/padding/border/radius/background/shadow 逐字一致，防两套数值漂移） */
.lf-nav__submenu,
.lf-lang-list {
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  background: var(--bg-white);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-lift);
}

.lf-nav__submenu {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2)); /* 客户 2026-08：回退为 100% + 8px */
  inset-inline-start: 0;
  z-index: 60;
  min-width: 11rem;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-out), /* 淡入淡出 300ms */
    visibility 0s linear var(--duration-slow);
}

/* 三通道显示：指针悬停 / details open（抽屉点击开合）/ 键盘 focus */
.lf-nav__item:hover > .lf-nav__submenu,
.lf-nav__item[open] > .lf-nav__submenu,
.lf-nav__item:focus-within > .lf-nav__submenu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--duration-slow) var(--ease-out); /* 淡入 300ms */
}

.lf-nav__sublink {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px; /* 触摸契约 ≥44px */
  padding-inline: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-4);
  white-space: nowrap;
  color: var(--color-foreground);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out);
}

/* 条目 hover：浅底 + 左侧朱砂竖线（参考示例 2，双通道） */
.lf-nav__sublink::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block: 7px;
  width: 2px;
  border-radius: 1px;
  background: var(--acc);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.lf-nav__sublink:hover {
  background-color: var(--color-card-background);
}

.lf-nav__sublink:hover::before {
  opacity: 1;
}

/* 条目前置图标（简单 icon，无描述） */
.lf-nav__sic {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--pri);
}

/* 下拉内部分组标签（menu-main「交易」下：交易产品/账户/平台）
   不可点击（aria-hidden + 非 a 元素），小号大写 + 发丝分隔线，与链接形成层级 */
.lf-nav__group {
  margin-block: var(--space-2) var(--space-1);
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-block-end: 1px solid var(--hairline);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.lf-nav__group:first-child {
  margin-block-start: var(--space-1);
}

.lf-nav__group span {
  display: block;
}

/* 宽下拉（交易）：多行分组面板，行高对齐 44px 触摸契约 */
.lf-nav__submenu--wide {
  min-width: 14rem;
  max-height: min(70vh, 34rem);
  overflow-y: auto;
}


/* 「交易」宽幅三列面板（客户 2026-08：产品/账户/平台 从左至右同时显示） */
.lf-nav__submenu--mega {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--space-2) var(--space-5);
  align-items: start;
  min-width: max-content; /* 面板按内容扩展为三列（修复窄宽挤压重叠） */
}

.lf-nav__mega-col {
  min-width: 0;
}

.lf-nav__mega-col .lf-nav__group {
  margin-block: var(--space-1) var(--space-2);
}

.lf-nav__mega-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media (max-width: 1079.98px) {
  .lf-nav__submenu--mega {
    grid-template-columns: 1fr; /* 抽屉内还原单列 */
    gap: var(--space-3);
  }

  /* GL-01：抽屉内子菜单降级 —— 桌面 absolute 浮层 → 静态流入 + 视口内滚动。
     原 absolute 面板（810px）在 375 溢出视口 132px 且覆盖其后导航/CTA 兄弟；
     display:none 闭态零占位（覆盖 mega display:grid 会盖过 details 原生隐藏的隐患），
     details[open] 时恢复 grid 单列进入文档流，后续项被推下不被遮挡，
     max-height 限面板不超视口 + overflow-y 内滚动保末项可达。桌面 hover 浮层不受影响（≥1080 桌面 nav 才显示）。 */
  .lf-menu .lf-nav__item > .lf-nav__submenu {
    display: none;
    position: static;
    inset: auto;
    min-width: 0;
    width: 100%;
    margin-block: var(--space-1) var(--space-2);
    padding-block: var(--space-1) var(--space-2);
    background: transparent;
    border: none;
    box-shadow: none;
    max-height: calc(100vh - 9rem); /* 视口预算：header 72 + 抽屉顶距 + 一级项高 */
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .lf-menu .lf-nav__item[open] > .lf-nav__submenu {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* ---------- header 动作区：语言切换 + CTA + 汉堡 ---------- */
.lf-header__actions {
  display: flex;
  align-items: center;
  gap: 10px; /* v7 动作区间距（紧凑） */
}

/* 动作区按钮 v7 尺寸：btn-login 9px 18px / btn-reg 10px 22px · 14px */
.lf-header__actions .lf-btn {
  font-size: 14px;
}

.lf-header__actions .lf-btn--secondary {
  padding-block: 6px; /* 客户 2026-08 */
  padding-inline: 18px;
  font-weight: 600;
}

.lf-header__actions .lf-btn--primary {
  padding-block: 6px; /* 客户 2026-08 */
  padding-inline: 22px;
  font-weight: 700;
}

/* 语言切换器（snippet 持有类名；dropdown 展开契约见 global.js：hidden + .lf-lang-list--open） */
.lf-lang-switcher {
  position: relative;
}

.lf-lang-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px; /* 触摸目标 ≥44px（CHK-B11；客户 2026-08 曾取 36 与导航同高，Stage B 终审
                       D06 复测 36px → 按触摸契约提升至 44px，悬停区不变量，header 行高随动） */
  padding-inline: 12px;
  background: transparent;
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-pill);
  color: var(--color-foreground);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.lf-lang-button:hover {
  border-color: var(--acc);
}

.lf-lang-button__label {
  font-size: var(--text-3);
  font-weight: 600; /* 字重越档修复：与导航标签一致用 600（500 不在字重档位） */
}

/* 下拉列表：absolute + inset-inline-end 对齐（RTL 自动镜像）、白底、shadow-lift、行高 ≥44px
   仅 .lf-lang-list--open 显示；visibility/opacity 动画（不依赖 [hidden] 的 display:none） */
.lf-lang-list {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-end: 0;
  z-index: 60;
  min-width: 12rem;
  display: block; /* 覆盖 UA [hidden]{display:none}，展开动画交给 visibility/opacity */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-out), /* 淡入淡出 300ms */
    visibility 0s linear var(--duration-slow);
}

.lf-lang-list--open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--duration-slow) var(--ease-out); /* 淡入 300ms */
}

.lf-lang-link {
  display: flex;
  align-items: center;
  gap: 8px; /* 国旗与语言名间距（客户 2026-09） */
  min-height: 44px; /* base.css 未覆盖 .lf-lang-link，此处补齐触摸契约 */
  padding-inline: var(--space-3);
  border-inline-start: 3px solid transparent; /* 占位防 active 位移 */
  border-radius: var(--radius-sm);
  font-size: var(--text-4);
  color: var(--color-foreground);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.lf-lang-link:hover {
  background-color: var(--color-card-background);
}

.lf-lang-link[aria-current='true'] {
  font-weight: 600;
  border-inline-start-color: var(--acc); /* 朱条约 + 字重双通道（§1 color-not-only） */
}

/* ---------- 汉堡按钮（<1024px 显示；图标按 aria-expanded 状态切换） ---------- */
.lf-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-base);
  color: var(--color-foreground);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.lf-menu-toggle:hover {
  border-color: var(--acc);
}

.lf-menu-toggle__open,
.lf-menu-toggle__close {
  display: inline-flex;
}

.lf-menu-toggle__close {
  display: none;
}

.lf-menu-toggle[aria-expanded='true'] .lf-menu-toggle__open {
  display: none;
}

.lf-menu-toggle[aria-expanded='true'] .lf-menu-toggle__close {
  display: inline-flex;
}

@media (min-width: 1080px) {
  .lf-menu-toggle {
    display: none;
  }
}

/* ---------- 移动抽屉（默认隐藏，仅 .lf-menu--open 显示；JS 只切类不切 hidden） ---------- */
.lf-menu {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  padding-inline: var(--space-6);
  padding-block: var(--space-3) var(--space-4);
  background: var(--bg-white);
  border-block-start: 1px solid var(--color-card-border);
}

.lf-menu--open {
  display: flex;
}

/* 桌面断点兜底：抽屉永不显示（汉堡已隐藏，此处防窗口从窄拉宽时残留 open） */
@media (min-width: 1080px) {
  .lf-menu {
    display: none;
  }
}

.lf-menu__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.lf-menu .lf-nav__link {
  width: 100%;
  padding-block: var(--space-2);
}

.lf-menu .lf-nav__link::after {
  display: none; /* 抽屉内无下划线装饰，走完整行 hover/active 即可 */
}

.lf-menu .lf-open-account {
  width: 100%;
  margin-block-start: var(--space-2);
}

/* ---------- <1024px：桌面 nav 隐藏、动作区 CTA 隐藏（抽屉内 CTA 接管） ---------- */
@media (max-width: 1079.98px) {
  .lf-header__actions .lf-open-account {
    display: none;
  }
}


/* 语言国旗（SVG 内联，宽 20px 圆角微影） */
.lf-lang-flag {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.lf-lang-flag {
  width: 21px;
  height: 15px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(20, 30, 34, 0.1);
}