/* ==========================================================================
   power-knowledge.tech 站群 · 统一页脚样式
   --------------------------------------------------------------------------
   配合 assets/footer.tsx（React 站）或 assets/footer.html（零构建站）。

   ⚠️ 与线上 motor-lighting 的差别：那边吃的是站内语义别名
      （--navy / --line / --subtext / --panel-strong / --on-dark-muted / --white），
      别名层是每个站自己定义的，搬到别的站会全部失效、退化成默认色。
      这里**直接改成 --color-* 原始变量**，粘到任何自带 theme-vars.css 的站都能用。

   命名映射（建站时若要改回别名，按此对照）：
     原 --navy          → --color-text-primary
     原 --subtext       → --color-text-secondary
     原 --line          → --color-border
     原 --panel-strong  → --color-surface
     原 --white         → --color-surface-elevated
     原 --primary       → --color-brand        （control-mode 用 --color-primary）
     原 --accent        → --color-accent       （amber，不随主题变）
     原 --on-dark-muted → --color-text-muted
     原 --mono          → --font-mono
   ========================================================================== */

/* ---------- ① 容器 ---------- */
footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  padding: 40px 28px 30px;
}
.foot-wrap { max-width: 1280px; margin: 0 auto; }

/* 三栏。1.05 / 0.95 / 1.25 是实测出来的：
   左栏是品牌+简介+按钮（内容最矮但要留呼吸），中栏两列链接（最窄也够），
   右栏两段长文（最宽）。改成三等分会把右栏文案挤到 20 字/行以下。 */
.foot-grid { display: grid; grid-template-columns: 1.05fr 0.95fr 1.25fr; gap: 40px; }

/* ---------- ② 左栏：品牌 ---------- */
.foot-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.foot-brand .mark {
  width: 8px; height: 18px; border-radius: 2px;
  background: var(--color-accent);      /* amber 竖条，与顶栏 brand 同款 */
  display: inline-block; flex-shrink: 0;
}
.foot-brand b {
  font-size: 14px; letter-spacing: .05em; font-weight: 800;
  color: var(--color-text-primary);
}
.foot-desc {
  font-size: 13px; line-height: 1.85; margin: 0 0 16px;
  color: var(--color-text-secondary);
}

/* 返回站群入口：站群互通的唯一出口 */
.foot-back {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
  border-radius: 8px; padding: 8px 14px;
  font-size: 13px; font-weight: 700;
  transition: border-color .15s, color .15s;
}
.foot-back:hover {
  border-color: var(--color-brand);          /* control-mode 换成 --color-primary */
  color: var(--color-text-primary);
  text-decoration: none;
}

/* ---------- ③ 中/右栏：小标题与链接 ---------- */
.foot-col h4 {
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-text-primary);
  margin: 0 0 14px;
}
.foot-col h4.foot-h-gap { margin-top: 16px; }

/* 两列排链接：11 项导航竖排会让左栏高出一大截，两列刚好与左栏齐平 */
.foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 16px; }
.foot-links a { font-size: 12.5px; color: var(--color-text-secondary); }
.foot-links a:hover { color: var(--color-brand); text-decoration: none; }

.foot-note { font-size: 12px; line-height: 1.85; margin: 0 0 8px; color: var(--color-text-secondary); }
.foot-note-tight { font-size: 11.5px; color: var(--color-text-muted); margin-bottom: 16px; }

/* ---------- ④ 备案行：分隔线 + 左右两端 ---------- */
.foot-legal {
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;             /* 窄屏自动换行成两行，不要 nowrap */
}
.foot-copy { font-size: 12.5px; margin: 0 0 6px; color: var(--color-text-secondary); }

.foot-beian { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; }
.foot-beian a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--color-text-secondary);
}
.foot-beian a:hover { color: var(--color-text-primary); text-decoration: none; }
/* 15px 是公安徽标在正文里不抢眼的临界值：再大就比文字醒目了 */
.foot-beian img { height: 15px; width: auto; display: inline-block; }

.foot-legal-right { display: flex; align-items: center; gap: 18px; }
.foot-legal-right a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--color-text-secondary);
}
.foot-legal-right a:hover { color: var(--color-text-primary); text-decoration: none; }

.app-version {
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 11px; color: var(--color-accent);
  border: 1px solid var(--color-border); border-radius: 5px;
  padding: 1px 6px;
}

/* ---------- ⑤ 免责声明 ---------- */
.foot-disclaimer {
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid var(--color-border);
}
.foot-disclaimer p {
  font-size: 11.5px; line-height: 1.9;
  color: var(--color-text-muted);
  margin: 0 0 7px;
}
.foot-disclaimer p b { color: var(--color-text-secondary); font-weight: 800; }

/* ==========================================================================
   响应式：三档
   1080 —— 三栏压成「品牌占整行 + 后两栏各半」，避免中栏被挤到 3 字/行
   820  —— 全部单列堆叠，链接列回到两列（此时宽度够）
   ========================================================================== */
@media (max-width: 1080px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px 36px; }
  .foot-col:first-child { grid-column: 1 / -1; }   /* 品牌栏独占整行 */
}
@media (max-width: 820px) {
  footer { padding: 32px 20px 24px; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .foot-col:first-child { grid-column: auto; }
  .foot-legal { margin-top: 24px; padding-top: 18px; }
  .foot-legal-right { width: 100%; justify-content: flex-start; }
}
@media (max-width: 480px) {
  /* 极窄屏**仍然保留两列**，只收紧间距。
     曾经试过在这里改单列，结果 11 项导航竖排把页脚拉高近 200px，
     而 390px 下两列各 167px、最长项「标准体系」只要约 50px —— 空间完全够。
     单列的判据不该是「屏幕窄」，而是「两列时最长项会折行」，中文四字项到 320px 都不折。 */
  .foot-links { gap: 6px 10px; }
}