/* ==========================================================================
 * nav-mega.css — 官网 v5 顶部导航（下拉 mega menu）
 * --------------------------------------------------------------------------
 * 结构真源：_tools/build_web_nav.js（34 页注入；--check 防漂移）
 * 路由真源：_tools/lib_site_routes.js
 * 样式真源：本文件（**独立文件**，不改 site.css —— site.css 进 hashed 构建链，
 *          动它必须跑 _tools/r74_sync_hashed.js 重建产物，代价远大于收益）
 *
 * 交互契约（三处必须一致，改一处要同步另外两处）：
 *   1. 结构上有 .nav-has-menu > .nav-menu；CSS 用 :hover / :focus-within 展开
 *      —— 无 JS 也能用（键盘 Tab 进来靠 :focus-within 展开）
 *   2. site.js 的 initNav() 只管移动端 .nav-links.open；桌面下拉不归它管
 *   3. nav-session.js 往 .nav-tools 里插账户按钮，**不碰** nav-links → 不冲突
 *
 * 移动端（≤1023px）：下拉层退化为「点顶级项 → 展开分组」的折叠块，
 *   .nav-menu 改为 static 定位，占满宽度，不做横向卡片。
 * ========================================================================== */

/* ---------- 顶级项 ---------- */
.header .nav-links .nav-item { position: relative; }

.header .nav-links .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-caret {
  width: 13px; height: 13px;
  opacity: .45;
  transition: transform .2s ease;
  flex: 0 0 auto;
}
.nav-has-menu:hover .nav-caret,
.nav-has-menu:focus-within .nav-caret { transform: rotate(180deg); opacity: .75; }

/* ---------- 下拉面板 ---------- */
.nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 480px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 20px;
  padding: 14px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 24px 56px -22px rgba(15, 23, 42, .38), 0 2px 8px -2px rgba(15, 23, 42, .10);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 120;
}
/* 四列时（开发者项 8 条）稍微放宽，避免描述文案挤成两行 */
.nav-item:nth-child(3) .nav-menu { min-width: 520px; }

.nav-has-menu:hover .nav-menu,
.nav-has-menu:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* 下拉面板顶部的小箭头（视觉锚点，指向顶级项） */
.nav-menu::before {
  content: "";
  position: absolute;
  top: -5px; left: 50%;
  width: 10px; height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--card);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 2px 0 0 0;
}

/* ---------- 分组 ---------- */
.nav-menu-col { min-width: 0; }
.nav-menu-t {
  margin: 0 0 6px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-menu-list { list-style: none; margin: 0; padding: 0; }

/* ---------- 条目 ---------- */
.header .nav-links .nav-menu-link {
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  transition: background .16s ease;
}
.header .nav-links .nav-menu-link:hover,
.header .nav-links .nav-menu-link:focus-visible {
  background: var(--brand-grad-soft);
}
.header .nav-links .nav-menu-link:hover .nm-t,
.header .nav-links .nav-menu-link:focus-visible .nm-t { color: var(--brand); }

.header .nav-links .nm-t {
  display: block;
  font-size: 13.6px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  transition: color .16s ease;
}
.header .nav-links .nm-d {
  display: block;
  margin-top: 1px;
  font-size: 12.2px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  white-space: normal;
}
.header .nav-links .nav-menu-link:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* ---------- 深色主题 ---------- */
[data-theme="dark"] .nav-menu {
  box-shadow: 0 24px 56px -20px rgba(0, 0, 0, .7), 0 2px 10px -2px rgba(0, 0, 0, .5);
}
[data-theme="dark"] .nav-menu::before { background: var(--card); }

/* ---------- 中屏收敛 ---------- */
@media (max-width: 1240px) {
  .nav-menu { min-width: 440px; }
  .nav-item:nth-child(3) .nav-menu { min-width: 470px; }
  .header .nav-links .nm-d { font-size: 11.8px; }
}

/* ---------- 移动端：折叠分组 ---------- */
@media (max-width: 1023px) {
  .header .nav-links .nav-item { display: block; }

  .header .nav-links .nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 12px 14px;
    font-size: 15px;
  }

  .nav-menu {
    position: static;
    transform: none;
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 2px;
    margin: 0 0 6px 8px;
    padding: 6px 0 6px 10px;
    border: 0;
    border-left: 2px solid var(--line-2);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    /* 移动端默认收起：hover/focus-within 在触屏上不触发，改用 .open */
    display: none;
    opacity: 1;
    visibility: visible;
  }
  .nav-menu::before { display: none; }

  /* 移动端：导航整体打开时把分组也铺开（避免两层折叠点击） */
  .header .nav-links.open .nav-menu { display: grid; }
  .header .nav-links.open .nav-has-menu:focus-within .nav-menu { display: grid; }

  .header .nav-links .nm-t { font-size: 14.2px; }
  .header .nav-links .nm-d { font-size: 12.4px; }

  .nav-caret { width: 15px; height: 15px; }
}

@media (max-width: 480px) {
  .header .nav-links .nav-menu { margin-left: 4px; padding-left: 8px; }
}

/* ==========================================================================
 * 小屏头部收敛（≤640px）
 * --------------------------------------------------------------------------
 * 现象（390px 实测截图）：头部被挤成两行 —— logo 单独一行、
 * 工具条再占两排，首屏白白吃掉约 150px。
 *
 * 为什么不是「少放几个按钮」：.nav-tools 里的成员不只 header 自己放的
 * （langSwitch / themeToggle / navToggle），nav-session.js 还会往里插
 * 「登录 + 注册」两个按钮（.qf-login-link / .qf-register-link）。
 * 所以按钮数量会随登录态变化，这里必须按**可用宽度**收敛，不能假设固定个数。
 *
 * 三条措施（缺一不可）：
 *   ① 工具条禁止换行 —— 换行是塌成两行的直接原因
 *   ② 主题切换按钮隐藏 —— 小屏跟随系统配色是合理默认，腾出 44px
 *   ③ 语言切换压到最小宽度（只留文字缩写）
 * ========================================================================== */
@media (max-width: 640px) {
  /* ① 工具条不换行；② 隐藏主题切换 */
  .header .header-inner { flex-wrap: nowrap; gap: 8px; }
  .header .nav-tools { flex-wrap: nowrap; gap: 6px; }
  .header #themeToggle { display: none; }

  /*
   * 品牌名恢复显示。
   *
   * ⚠ 定位过程（390px 实测，记下来免得重走）：
   *   现象：头部只剩一个放大镜图标，QuickFind 文字不见了。
   *   误判 1：以为是 flex 收缩 → 加 flex:0 0 auto，无效（brandRect.w 仍 44px）
   *   误判 2：以为是 min-width → 加 min-width:auto，反而更小（30px）
   *   真因：site.css:2373 `.brand { font-size: 0; gap: 0 }`（@media ≤479px）——
   *         旧设计为给工具条腾空间**刻意隐藏**品牌文字，不是本次改动的 bug。
   *         字号为 0 时元素宽度自然塌到 logo 的 30px。
   *
   * 处置（用户拍板 2026-10-16：恢复品牌文字）：
   *   字号恢复正常，并把登录/注册两枚按钮移出工具条（见下方 .qf-account 规则），
   *   让出的空间正好够放下品牌名 —— 而不是继续压缩品牌。
   */
  .header .brand {
    flex: 0 0 auto;
    white-space: nowrap;
    min-width: auto;            /* 覆盖 site.css 的 44px（那是触控靶区下限，不是内容宽） */
    font-size: 15px;            /* 覆盖 site.css 的 font-size:0 */
    gap: 6px;
    overflow: visible;
  }
  .header .brand .logo { width: 26px; height: 26px; border-radius: 8px; }
  .header .brand .logo svg { width: 15px; height: 15px; }

  /* 搜索面板是绝对定位浮层，不该参与主排版宽度 */
  .header .qf-search-panel { position: absolute; }

  /* ③ 语言切换：三语缩写已经够短，只压缩内边距 */
  .header .lang-switch button { padding: 0 7px; min-width: 34px; }

  /*
   * 登录态按钮：390px 下「登录 + 注册」两枚实心按钮会挤掉品牌名。
   * 由 main-nav-compact.js 把它们**搬进汉堡菜单**，所以这里只需让工具条里的原件
   * 在小屏收起（display:none，不是 visibility —— 避免占位留白）。
   * ⚠ 不能只做 display:none 而不做搬迁：那等于删掉小屏的登录/注册入口
   *   （首页没有第二个登录链接），是功能损失。
   */
  .header .qf-account { display: none; }
}

/* 极窄屏（≤360px）：语言切换再压一档，避免与汉堡按钮同排不下 */
@media (max-width: 360px) {
  .header .lang-switch button { padding: 0 5px; min-width: 30px; font-size: 11.5px; }
}
@media (max-width: 360px) {
  .header .lang-switch button { padding: 0 5px; min-width: 30px; font-size: 11.5px; }
  .header .qf-login-link { padding: 0 10px; font-size: 12px; }
}

/* ---------- 打印：下拉一律不出现 ---------- */
@media print {
  .nav-menu { display: none !important; }
}

/* ==========================================================================
 * 小屏菜单里的账号分组（由 main-nav-compact.js 注入）
 * ========================================================================== */
.qf-m-compact { margin-top: 10px; border-top: 1px solid var(--line-2); padding-top: 10px; }
.header .nav-links .qf-m-compact-t {
  display: block;
  padding: 6px 14px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.qf-m-compact-list { list-style: none; margin: 0; padding: 0; }
.header .nav-links .qf-m-compact-list a {
  display: block;
  width: 100%;
  padding: 11px 14px;
  font-size: 14.5px;
  color: var(--ink-2);
  text-decoration: none;
}
.header .nav-links .qf-m-compact-list a:hover { color: var(--brand); }

/* 桌面端菜单里不该出现这个分组（JS 只在小屏注入，这里兜底） */
@media (min-width: 641px) { .qf-m-compact { display: none !important; } }