/* ==========================================================================
   power-knowledge.tech 站群 · 统一顶栏样式
   --------------------------------------------------------------------------
   配合 assets/header.tsx（React）或自建 HTML 结构。核心是三件事：
     ① 品牌两行堆叠 —— 把横向占位从 402px 收到 238px
     ② 导航 nowrap + 切换器排最后 —— 11 项单行，不折行
     ③ 四档断点 —— 1280 / 1240 / 1139 / 820

   ⚠️ 与线上 motor-lighting 的差别：那边吃站内别名
      （--navy / --line / --subtext / --white / --lightblue / --accent / --primary），
      这里改成 --color-* 原始变量，换站可直接用。

   命名映射：
     原 --navy       → --color-text-primary
     原 --subtext    → --color-text-secondary
     原 --line       → --color-border
     原 --white      → --color-surface-elevated
     原 --lightblue  → --color-surface        （hover 底色）
     原 --accent     → --color-accent
     原 --primary    → --color-brand          （control-mode 用 --color-primary）
   ========================================================================== */

/* ---------- 容器 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 100;
  /* 92% 不透明 + 模糊：既让下面的内容透一点，又不至于读不清导航文字。
     用 color-mix 而不是 rgba()，因为主题切换时 --color-surface 会变，
     rgba 硬编码的深色会在浅色主题下留下一层灰雾。 */
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--color-border);
}

.topbar .bar {
  max-width: 1280px; margin: 0 auto;
  padding: 10px 28px;
  display: flex; align-items: center;
  gap: 14px;                 /* 18 → 14：11 项导航时这 4px 就是折不折行的分界 */
}

/* ---------- 品牌：两行堆叠 ----------
   单行「英文 + 中文」实测占 402px，两行堆叠后 238px，省下 164px。
   这是腾横向空间最有效的一刀 —— 比压字号、减 padding 都干净，
   因为英文与中文本来就该分主次，堆叠只是把层级摆正。 */
.brand {
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap; flex-shrink: 0;   /* 品牌永不被压缩 */
}
.brand .mark {
  width: 8px; height: 26px; border-radius: 2px;
  background: var(--color-accent);        /* amber 竖条 */
  display: inline-block; flex-shrink: 0;
}
.brand-text { display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.brand-en {
  font-size: 13px; letter-spacing: .065em; font-weight: 800;
  color: var(--color-text-primary); line-height: 1.2;
}
.brand-sub {
  font-size: 11.5px; letter-spacing: .02em;
  color: var(--color-text-secondary); line-height: 1.45;
}

/* ---------- 导航 ----------
   nowrap：11 项永不折行（折行会让顶栏从 53px 变 88px，正文整体下移）
   margin-left:auto：把「导航 + 切换器」整体推到右侧。
     注意这条在 .navlinks 上，不在 .bar 上 —— 所以切换器必须排在 navlinks
     **之后**，否则会被夹在品牌与导航之间，"看起来没生效"。 */
.navlinks {
  display: flex; gap: 2px;
  flex-wrap: nowrap;
  margin-left: auto;
  min-width: 0;
}
.navlinks a {
  font-size: 12px; padding: 6px 7px; border-radius: 7px;
  font-weight: 600; white-space: nowrap;
  color: var(--color-text-secondary);
  transition: color .15s, background-color .15s;
}
.navlinks a:hover,
.navlinks a.active {
  color: var(--color-text-primary);
  background: var(--color-surface);
  text-decoration: none;
}

/* 移动端「目录 ▾」。桌面隐藏，1139 以下才出 */
.nav-toggle {
  display: none;
  border: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
  border-radius: 8px; padding: 5px 10px;
  font-size: 13px; cursor: pointer;
}

/* ---------- 切换器槽位 ----------
   flex-shrink:0 是硬要求。缺了它，窄屏下浏览器会先压切换器（因为 navlinks
   的 min-width:0 让它看起来"更能屈"），结果是色点被压成一条线。 */
.theme-switcher,
.pk-theme-switcher {
  position: relative;
  flex-shrink: 0;
}

/* ==========================================================================
   四档断点
   ========================================================================== */

/* ① ≤1240：只收紧导航字号与内边距，仍保持单行。
      这里不隐藏任何东西 —— 1139 以上是"桌面"，功能必须完整。 */
@media (max-width: 1240px) {
  .topbar .bar { gap: 10px; }
  .navlinks { gap: 1px; }
  .navlinks a { font-size: 11.5px; padding: 5px 5px; }
}

/* ② ≤1139：导航收进「目录 ▾」抽屉。
      1139 是实测临界：再往上一点，11 项 × 最小可读宽度 + 品牌 + 切换器
      就超了 1224px 内容区；再往下一点，其实还塞得下，但余量不足 10px，
      字体渲染差异就能让它折行。留 80px 冗余比赌渲染一致性安全。 */
@media (max-width: 1139px) {
  .topbar .bar { flex-wrap: wrap; }
  .navlinks {
    display: none;
    width: 100%; margin-left: 0; padding-top: 8px;
  }
  .navlinks.open { display: flex; flex-wrap: wrap; gap: 3px; }
  .nav-toggle { display: inline-block; margin-left: auto; }
}

/* ③ ≤820：窄屏。英文名隐藏（只留中文），因为两行堆叠在 375px 下
      每行都会截断；品牌 mark 竖条也同步收到 22px。 */
@media (max-width: 820px) {
  .topbar .bar { padding: 10px 16px; }
  .brand .mark { height: 22px; }
  .brand-en { display: none; }
  .brand-sub { font-size: 12.5px; font-weight: 700; color: var(--color-text-primary); }
}

/* ④ ≤480：极窄屏，导航项按两列铺，避免每行一个字 */
@media (max-width: 480px) {
  .navlinks.open { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .navlinks a { text-align: center; }
}