/* =========================================================
   Qi-Theme — 多级导航（一 / 二 / 三级）样式与交互层
   职责解耦：
     - main.css        头部结构布局（.site-header / .brand / .nav-tools / 一级下划线）
     - responsive.css  导航容器在移动端的显示/隐藏（汉堡）
     - 本文件          「菜单层级视觉 + 交互反馈 + 各断点适配」
   颜色/间距复用设计令牌（--c-navy-900 / --c-accent / --sp-* / --r-*），保持一致。
   ========================================================= */

/* 链接统一过渡，作为交互反馈基底 */
.nav-primary a { transition: color .18s ease, background-color .18s ease; }

/* 一级菜单项统一为弹性容器并垂直居中。
   关键：此前只有「含子菜单」的项被设为 display:flex（为摆放 chevron），
   其余项仍是默认 inline —— 而 inline 元素的纵向 padding 不参与布局
   （padding 只是视觉溢出、不撑开行盒），导致无下拉的项文字比有下拉的项高 12px。
   实测：inline 项文字中心 61px，flex 项 73px，头部 72px 的垂直中心为 73px。 */
.nav-primary > ul > li > a { display: flex; align-items: center; }

/* 一级：当前项 / 悬停高亮（与 main.css 的下划线指示互补）
   颜色用 --c-accent-ink 而非 --c-accent-d：头部是浅色底，实测
   --c-accent-d(#E08E12) 白底仅 2.61:1，低于正文所需的 4.5:1；
   --c-accent-ink(#9A5B00) 约 5.0:1，且与全站眉标/小字号强调文字保持一致。 */
.nav-primary > ul > li > a:hover { color: var(--c-accent-ink); }
.nav-primary > ul > li.current-menu-item > a,
.nav-primary > ul > li.current-menu-ancestor > a { color: var(--c-accent-ink); }

/* 含子菜单项的指示符（一/二级通用）：右侧 chevron（向下表示可展开） */
.nav-primary li.menu-item-has-children > a {
  display: flex; align-items: center; gap: 6px;
  padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5l3.5 3.5 3.5-3.5' fill='none' stroke='%231B3A63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 9px 9px;
}
/* 悬停/展开：箭头翻转朝上 + 变主题色，提供明确反馈 */
.nav-primary li.menu-item-has-children:hover > a,
.nav-primary li.menu-item-has-children:focus-within > a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 6.5l3.5-3.5 3.5 3.5' fill='none' stroke='%23B5730A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 二级下拉容器 */
.nav-primary li.menu-item-has-children { position: relative; }
/* 关键：必须覆盖 .nav-primary ul { display:flex }，否则子菜单 <ul>
   会继承为横向弹性容器，导致子菜单项横排而非竖排堆叠（即用户反馈的「菜单错位」）*/
.nav-primary .sub-menu {
  display: block;
  position: absolute; top: 100%; left: 0; min-width: 230px; margin: 0; padding: 8px; list-style: none;
  background: #fff; border: 1px solid var(--c-line); border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: var(--sh-2); opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 50;
}
.nav-primary li.menu-item-has-children:hover > .sub-menu,
.nav-primary li.menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }

.nav-primary .sub-menu a { display: block; padding: 10px 14px; border-radius: 8px; font-weight: 500; color: var(--c-navy-900); }
.nav-primary .sub-menu a:hover { background: var(--c-navy-100); color: var(--c-navy-900); }
.nav-primary .sub-menu .current-menu-item > a,
.nav-primary .sub-menu .current-menu-ancestor > a { background: var(--c-navy-100); color: var(--c-navy-900); font-weight: 600; }

/* 三级（及更深）：桌面端向右 flyout，形成清晰第三层；箭头改用指向右 */
.nav-primary .sub-menu li.menu-item-has-children > a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M3.5 1.5l3.5 3.5-3.5 3.5' fill='none' stroke='%231B3A63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.nav-primary .sub-menu li.menu-item-has-children:hover > a,
.nav-primary .sub-menu li.menu-item-has-children:focus-within > a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M3.5 1.5l3.5 3.5-3.5 3.5' fill='none' stroke='%23B5730A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.nav-primary .sub-menu .sub-menu {
  display: block;
  top: -9px; left: 100%; min-width: 210px;
  border-radius: var(--r-md);
}

/* ---------------------------------------------------------
   子菜单「展开 / 收起」按钮
   由 main.js 动态注入到每个含子菜单的 li 中，桌面端不需要
   （桌面端走 hover / focus-within），故默认隐藏。
   --------------------------------------------------------- */
.nav-primary .sub-toggle { display: none; }

/* ---------------------------------------------------------
   桌面端（≥768px）
   --------------------------------------------------------- */
@media (min-width: 768px) {
  /* 悬停桥接，消除父子菜单 4px 间隙导致的中断；兼顾键盘 focus 可达 */
  .nav-primary .sub-menu { pointer-events: none; }
  .nav-primary li.menu-item-has-children:hover > .sub-menu,
  .nav-primary li.menu-item-has-children:focus-within > .sub-menu { pointer-events: auto; }

  /* 边缘保护：靠右的一级项，下拉与三级 flyout 改为向左展开，避免溢出视口 */
  .nav-primary > ul > li:nth-last-child(-n + 2) > .sub-menu { left: auto; right: 0; }
  .nav-primary > ul > li:nth-last-child(-n + 2) .sub-menu .sub-menu { left: auto; right: 100%; top: -9px; }
}

/* ---------------------------------------------------------
   移动端（≤767px）：抽屉 + 可折叠多级菜单
   说明：此前子菜单在移动端是「常驻展开」的静态堆叠，一级项本身又是链接，
   点击父项会直接跳转，子菜单实际上点不到；且长菜单会顶出视口无法滚动。
   现改为：抽屉整体限高滚动 + 每层由独立按钮折叠/展开。
   --------------------------------------------------------- */
@media (max-width: 767px) {
  /* 抽屉：限高一屏并允许纵向滚动，长菜单也能完整触达 */
  .nav-primary {
    max-height: calc(100dvh - var(--header-h, 72px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* 移动端由独立的展开按钮承担指示，去掉 a 上的箭头背景 */
  .nav-primary li.menu-item-has-children > a { background-image: none; padding-right: 52px; }

  /* 展开按钮：44×44 触摸目标，垂直居中于所在行 */
  .nav-primary .sub-toggle {
    display: grid; place-items: center;
    position: absolute; top: 50%; right: 4px; margin-top: -22px;
    width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--c-navy-700);
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  .nav-primary .sub-toggle::after {
    content: ""; width: 9px; height: 9px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .2s ease; opacity: .65;
  }
  .nav-primary .sub-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); opacity: 1; color: var(--c-accent-ink); }
  .nav-primary .sub-toggle:hover { color: var(--c-accent-ink); }
  .nav-primary .sub-toggle:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -3px; }

  /* 子菜单：默认收起，父级 li.is-open 时展开 */
  .nav-primary .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: transparent;
    display: none; margin: 0; padding: 0 0 0 8px; min-width: 0;
    pointer-events: auto;
  }
  .nav-primary li.menu-item-has-children.is-open > .sub-menu { display: block; }

  .nav-primary .sub-menu a { padding: 10px 12px; color: var(--c-muted); }
  .nav-primary .sub-menu a:hover { background: var(--c-navy-100); color: var(--c-navy-900); }

  /* 第三层用左侧竖线 + 缩进，视觉上明显比第二层更深一级 */
  .nav-primary .sub-menu .sub-menu {
    margin-left: 10px; padding-left: 12px; border-left: 2px solid var(--c-line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-primary .sub-toggle::after { transition: none; }
}

/* ---------------------------------------------------------
   抽屉打开时锁定页面滚动（class 由 main.js 加在 <html> 上）
   --------------------------------------------------------- */
html.nav-open, html.nav-open body { overflow: hidden; }

/* ---------------------------------------------------------
   汉堡按钮图标：展开态在「三横杠 / 关闭叉」之间切换
   --------------------------------------------------------- */
.nav-toggle { position: relative; }
.nav-toggle .nav-toggle-icon { transition: opacity .18s ease, transform .18s ease; }
.nav-toggle .nav-toggle-close { position: absolute; inset: var(--sp-2); opacity: 0; transform: rotate(-90deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { opacity: 0; transform: rotate(90deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-close { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .nav-toggle .nav-toggle-icon { transition: none; }
}