/* =============================================================
   header.css — 全站统一页眉（2026-09-21）
   主站与 /blog/ + /ai-news/ 双语静态包共用同一页眉：
   HBD.TOP 标志 + DSH 插件市场 wordmark + 7 个主导航 Tab + 中文/EN 切换。
   变量 scoped 在 .site-header 上（博客页没有主站 :root，也不会污染其主题）。
   维护约定：页眉样式以本文件为唯一权威源；assets/style.css 里的同名规则
   是历史遗留兜底，若改页眉样式请以本文件为准。
   语言机制（与博客包共用一个契约）：
     <html data-lang="en|zh"> + localStorage('lang')；
     en/无标记 = 现有双语排版（英文主、中文副）；
     zh = 中文升为主文案、英文副标隐藏（DOM 里两语言都在，SEO 无损）。
   ============================================================= */

.site-header {
  /* 主站配色，仅作用于页眉内部。
     2026-09-26 改为浅色「护眼纸」主题：暖米玻璃底 + 暖灰边线。
     深色主题由 :root[data-theme="dark"] 切换回去。 */
  --border: #E0D9C5;
  --border-strong: #C7BFA8;
  --text: #2A2926;
  --text-dim: #5E574B;
  --accent: #1F5F9E;
  --purple: #6B4FA0;
  /* 排行榜火焰色：浅色态要压深（#ff9d3c 在 cream 上只有 1.85:1），深色态见下方覆盖 */
  --flame: #A9500A;

  position: sticky; top: 0; z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 28px;
  background: rgba(246, 242, 232, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header .brand { grid-column: 1; }
.site-header nav.site-nav-main { grid-column: 2; justify-self: center; }
.site-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(31,95,158,0.55), rgba(107,79,160,0.30) 45%, rgba(30,123,126,0.25) 75%, transparent);
  pointer-events: none;
}
.site-header .brand { display: flex; align-items: baseline; gap: 12px; }
.logo {
  font-weight: 700; font-size: 20px;
  color: var(--text) !important;
  letter-spacing: 0.2px;
}
.logo:hover { text-decoration: none; }
.logo-yhbd {
  display: inline-flex;
  align-items: center;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--text) !important;
}
.logo-yhbd:hover { text-decoration: none; }
.logo-y { width: 1.2em; height: 1.2em; flex: none; margin-right: 3px; }
.logo-hbd { color: var(--accent); }
.wordmark {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  padding-left: 10px;
  border-left: 1px solid var(--border-strong);
  white-space: nowrap;
}
/* 双语容器（英文主文案 + 中文副）——主站既有排版 */
.site-header .bilingual { display: inline; }
.site-header .bilingual .en { display: inline; }
.site-header .bilingual .zh {
  display: inline;
  font-size: 0.72em;
  color: var(--text-dim);
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0 0 0 4px;
  opacity: 0.85;
}
.site-header nav.site-nav-main { display: flex; gap: 20px; }
.site-header nav.site-nav-main a {
  position: relative;
  color: var(--text-dim); font-size: 25px;
  padding: 4px 2px;
  transition: color .12s;
}
.site-header nav.site-nav-main a.active,
.site-header nav.site-nav-main a:hover { color: var(--text); text-decoration: none; }
.site-header nav.site-nav-main a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--purple));
}

/* ---- 排行榜火焰特效（2026-09-21）：🔥 图标 + 火焰橙 + text-shadow 摇曳 ----
   云桌面安全配方：不用 animated background-clip:text / drop-shadow 滤镜（曾致花屏），
   只做小面积 text-shadow 重绘；prefers-reduced-motion 时静止。 */
.site-header nav.site-nav-main a.nav-flame { color: var(--flame); }
.site-header nav.site-nav-main a.nav-flame .bilingual .en,
.site-header nav.site-nav-main a.nav-flame .bilingual .zh { color: inherit; }
.site-header nav.site-nav-main a.nav-flame .bilingual {
  animation: flame-flicker 1.6s ease-in-out infinite;
}
.site-header nav.site-nav-main a.nav-flame::after {
  content: '\1F525';
  font-size: 0.72em;
  margin-left: 4px;
}
@keyframes flame-flicker {
  0%, 100% { text-shadow: 0 0 6px rgba(255, 122, 24, 0.55), 0 0 14px rgba(255, 80, 0, 0.28); }
  50%      { text-shadow: 0 0 10px rgba(255, 140, 0, 0.85), 0 0 22px rgba(255, 80, 0, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header nav.site-nav-main a.nav-flame .bilingual { animation: none; }
}

/* ---- 中文/EN 切换（沿用博客包机制：data-set-lang + data-lang + localStorage） ---- */
.langsw {
  grid-column: 3; justify-self: end;
  display: flex; gap: 2px; padding: 3px;
  background: rgba(252, 250, 241, 0.9);
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* 深色主题：页眉内的 scoped token 回深色态（header.css 的 token 挂在 .site-header 上，
   所以按 [data-theme="dark"] .site-header 覆盖，而不是只写 [data-theme="dark"]） */
[data-theme="dark"] .site-header {
  --border: #30363d;
  --border-strong: #444c56;
  --text: #e6edf3;
  --text-dim: #8b949e;
  --accent: #58a6ff;
  --purple: #bc8cff;
  --flame: #ff9d3c;
  background: rgba(13, 17, 23, 0.88);
}
[data-theme="dark"] .site-header::after {
  background: linear-gradient(90deg, rgba(88,166,255,0.5), rgba(188,140,255,0.25) 45%, rgba(57,208,216,0.2) 75%, transparent);
}
[data-theme="dark"] .site-header .langsw { background: rgba(22, 27, 34, 0.9); }
[data-theme="dark"] .site-header .wordmark { color: #c9d1d9; }
[data-theme="dark"] .site-header .logo-hbd { color: #79c0ff; }
.langsw button {
  padding: 5px 14px;
  border: none; border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 14px; font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  transition: color .18s, background .18s;
}
.langsw button:hover { color: var(--text); }
.langsw button.on {
  color: #0d1117;
  background: linear-gradient(90deg, var(--accent), var(--purple));
}
/* ---- 2026-09-21 语言切换按钮:国旗底色(中文=中国红底/明黄字,EN=米字旗藏青底/白字) ---- */
.langsw button[data-set-lang="zh"] {
  background: linear-gradient(180deg, #e63422, #c81f0d);
  color: #ffde00;
  border: 1px solid rgba(255, 222, 0, 0.35);
}
.langsw button[data-set-lang="en"] {
  background: linear-gradient(180deg, #10307e, #012169);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.langsw button[data-set-lang="zh"]:hover,
.langsw button[data-set-lang="en"]:hover { filter: brightness(1.15); color: inherit; }

/* ---- 主题切换按钮（2026-09-29）：与语言切换器同一个胶囊里，浅色 ⇄ 深色 ----
   图标用 Unicode 文字字形（不依赖 emoji 字体/图标库，headless 截图也稳定）；
   显示的是「点下去会变成什么」：浅色态显示月亮（点了变深），深色态显示太阳。
   状态存 localStorage('theme')，与 data-theme 属性是一对（脚本见页尾 yhdTheme）。 */
.langsw .theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 10px;                 /* 与语言按钮同样的纵向内距，胶囊高度一致 */
  border: none; border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px; line-height: 1;
  cursor: pointer;
  transition: color .18s, background .18s;
}
.langsw .theme-toggle:hover { color: var(--text); background: rgba(43, 41, 38, 0.08); }
[data-theme="dark"] .site-header .langsw .theme-toggle:hover { background: rgba(255, 255, 255, 0.10); }
.langsw .theme-toggle .tt-icon { display: none; }
/* ⚠ 必须写 html:not(...)：只写 :not([data-theme="dark"]) 会命中 <body>（它没有这个属性），
   于是深色态下「浅色分支」也会生效（实测两个图标同时显示）。锚到 html 才是真·主题判定。 */
html:not([data-theme="dark"]) .langsw .theme-toggle .tt-moon { display: inline; }
[data-theme="dark"] .langsw .theme-toggle .tt-sun { display: inline; }

/* ---- zh 模式：中文升为主文案（页眉/全站 .bilingual 通用） ---- */
[data-lang="zh"] .bilingual .en { display: none; }
[data-lang="zh"] .bilingual .zh {
  display: inline;
  font-size: inherit;
  color: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  margin: 0;
  opacity: 1;
}
[data-lang="zh"] .hero-title .bilingual .zh {
  display: block;
  margin-top: 0;
  font-size: inherit;
}
[data-lang="zh"] .bilingual-intro .en { display: none; }
[data-lang="zh"] .bilingual-intro .zh {
  margin-top: 0; padding-top: 0; border-top: none;
  font-size: 15px; line-height: 1.72; color: inherit;
}

/* ---- en 模式：纯英文（2026-09-21 用户指定，与 zh 模式对等）——
   隐藏所有 .bilingual 的 zh 副标（含 hero 双标题行、hero-sub、分区标题、页眉 wordmark 副行） ---- */
[data-lang="en"] .bilingual .zh { display: none; }
[data-lang="en"] .site-header .bilingual .zh { display: none; }

/* ---- 切换器只显示"目标语言"按钮（2026-09-21）：EN 页眉不再出现"中文"字样，反之亦然 ---- */
[data-lang="en"] .langsw button[data-set-lang="en"] { display: none; }
[data-lang="zh"] .langsw button[data-set-lang="zh"] { display: none; }

/* ---- 移动端：两行布局（品牌+切换 / 导航横滚） ---- */
@media (max-width: 900px) {
  .site-header {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand langsw" "nav nav";
    row-gap: 8px;
    padding: 10px 16px;
  }
  .logo-yhbd { font-size: 19px; }
  .site-header .brand { grid-area: brand; }
  .site-header .langsw { grid-area: langsw; }
  .wordmark { display: none; }
  .site-header nav.site-nav-main {
    grid-area: nav;
    justify-self: stretch;
    justify-content: flex-start;
    gap: 14px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
  }
  /* flex 项默认 flex-shrink:1，会被压到 min-content（中文 = 一个字宽）——
     "首页"竖排成两行、"排行榜"竖排成三行，而 overflow-x:auto 永远不触发。
     钉住自然宽度后，这一行才真的按设计横滚。 */
  .site-header nav.site-nav-main a { font-size: 17px; flex: 0 0 auto; white-space: nowrap; }
  .site-header nav.site-nav-main::-webkit-scrollbar { display: none; }
}
@media (max-width: 400px) {
  .site-header nav.site-nav-main { gap: 10px; }
  .langsw button { padding: 4px 10px; }
}