/* ==========================================================================
   LuminShoal 官网样式表
   对应：docs/S2_plan.md — S2.1 视觉与交互方案（代码原型）
   规范来源：docs/S1.2_content.md 第二节「视觉规范（色彩与字体）」

   ⚠️ 硬性要求：本文件中不得出现硬编码色值。
      所有颜色一律经下方 :root 中的 CSS 变量引用。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 网页字体 —— 思源黑体 Noto Sans SC 子集
   规范来源：docs/S1.2_content.md 2.4 节「字体规范」

   两档来源：本机 Noto Sans SC 实装 Regular / Medium / Bold 三档，
   项目**只用 Regular + Bold 两档**（Medium 已排除），对应 font-weight 400 / 700。
   ⚠️ 全站字重只允许 400 / 700，禁止 500 / 600（见下方第 2 节字重约束）。

   ⚠️ 子集与页面文案强绑定：**文案变更后必须重跑**
        python tools/build_font_subset.py
   否则页面会出现缺字（方框）。见 docs/S3_plan.md 的风险条目 S3-R6。

   ⚠️ **重跑子集必须与「改下面两处 url() 的 ?v=」同批完成**：
       .woff2 是**固定文件名**且由 Nginx 下发 `immutable`（30 天）——
       `immutable` 下浏览器**连校验请求都不发**。只重跑子集而不改这里的
       ?v=，回访者最长 30 天仍用旧子集，新字继续显示方框，
       而**开发侧自查完全看不出异常**。见 docs/WS8_plan.md 风险 WS8-R1。
       ⚠️ 四个 HTML 的 `href="/css/style.css?v=…"` 必须用**同一个 token**。

   font-display: swap —— 回退字体立即渲染，字体到达后替换，
   首屏不被字体下载阻塞（这是满足「首屏 ≤2 秒」的关键）。
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Noto Sans SC";
  src: url("/assets/fonts/noto-sans-sc-subset.woff2?v=20261015") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("/assets/fonts/noto-sans-sc-subset-bold.woff2?v=20261015") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. 色彩变量 —— 9 个角色，与视觉规范一一对应
   -------------------------------------------------------------------------- */

:root {
  --color-primary: #0A2540;          /* 主色（深蓝）   页面主背景、页头页脚底色 */
  --color-accent: #1E90FF;           /* 辅助色（亮蓝） 正文链接、强调边框 */
  --color-accent-hover: #4DA6FF;     /* 链接悬停 / focus 描边 */
  --color-btn: #0A66C2;              /* 下载按钮底色（白字 5.69:1） */
  --color-btn-hover: #0B6FD4;        /* 下载按钮 hover 态（白字 4.95:1） */
  --color-text: #FFFFFF;             /* 文字（主） */
  --color-text-secondary: #C7D3DE;   /* 文字（次） */
  --color-text-muted: #8A9BA8;       /* 文字（弱）     页脚、备案号 */
  --color-border: #1E3A5F;           /* 边框 / 分隔线（装饰性） */
}

/* --------------------------------------------------------------------------
   2. 基础重置与排版
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-primary);
  color: var(--color-text);
  font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
  /* 基准字号用相对单位 —— 全站其余 12 处字号均为 rem，此处是唯一例外，
     用绝对 px 会覆盖用户在浏览器中设置的字号偏好，导致"标题变大、正文不变"。
     默认设置下 1rem 的计算值仍为 16px，视觉零变化。
     依据：docs/S2.2_a11y.md 条目 F3（改进项，2026-09-21 于 S3.8 落实）。 */
  font-size: 1rem;
  line-height: 1.75;
}

/* ⚠️ 字重约束：字体仅做 Regular(400) + Bold(700) 两档
   （见 docs/S1.2_content.md 2.4 节「字重」）。
   全站字重只用这两个值 —— 禁止使用 500 / 600：
   所选字体中 Medium(500) 已排除，500/600 只能落到浏览器的字体匹配规则上，不可控。
   映射：正文与说明文字 400；标题 h1 / h2 / h3 与按钮文案 700。 */
strong {
  font-weight: 700;
}

img {
  max-width: 100%;
  height: auto;
}

/* 链接：颜色 + 下划线**双重**提示；悬停转强调色。
   ⚠️ 下划线不得移除。
   仅靠颜色区分链接违反 WCAG 2.1 SC 1.4.1：正文链接 #1E90FF 与周围文字
   #C7D3DE 对比度仅 2.13:1，页脚链接更与周围文字同色（1.00:1），
   两类均达不到该标准要求的 3:1。下划线是非颜色的额外提示，是修复手段。
   详见 docs/S2.2_a11y.md 条目 E4。 */
a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--color-accent-hover);
}

/* 所有可聚焦元素的 focus 样式 —— 不得使用 outline: none 移除 */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-accent-hover);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 尊重用户的减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. 布局容器
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 锚点定位时留出页头高度 */
section[id],
footer[id] {
  scroll-margin-top: 24px;
}

/* --------------------------------------------------------------------------
   4. 页头
   -------------------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--color-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 14px;
  /* 允许换行：窄屏下主导航整体落到第二行（见第 11 节平板端） */
  flex-wrap: wrap;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* 页头是品牌标识区，含 Logo 图形，按惯例整块可点击回首页。
   此处以「图形 + 版位」作为非颜色提示，故不加下划线——
   这是**经说明的例外**，理由见 docs/S2.2_a11y.md 条目 E4。

   ⚠️ 本选择器**必须收窄到 .site-brand**（WS8.2 起）：
      若仍写作后代选择器 .site-header a，会连带命中主导航内的每个 <a>，
      使导航项变 display:flex 并**丢掉下划线**——既是视觉静默损坏，
      也违反上面的 E4 例外边界（导航不是品牌区）。
      见 docs/WS8_plan.md 风险 WS8-R3。 */
.site-header .site-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--color-text);
  text-decoration: none;
}

.site-header .site-brand:hover {
  color: var(--color-text);
  text-decoration: none;
}

.site-logo {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.site-name {
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* 主导航（WS8.2 新增；标记定稿见 docs/WS8.1_shell.md）

   ⚠️ 页头内只有 .site-brand 享有上面的「不加下划线」例外。
      本块**不得**再写 text-decoration: none ——
      下划线是 a11y E4 的唯一支撑，移除即缺陷复发。

   ⚠️ 全站没有 ul 的全局重置，故必须显式清掉
      浏览器默认的项目符号、margin 与 padding-inline-start。

   ⚠️ 明确不做：不加 position: sticky；不加折叠菜单
      （含 <details> 式「无 JS 汉堡」）。四项常驻可见。 */
.site-nav {
  margin-left: auto;                 /* 桌面端推到行尾 */
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;                  /* ≥ WCAG 2.2 SC 2.5.8 的 24×24；移动端加高到 44px */
  padding: 6px 2px;
  font-size: 1rem;                   /* 档次：与正文同级（S2.3 字号表的既有档位） */
  /* 颜色与下划线沿用全局 a / a:hover（--color-accent 对主背景 5.43:1、
     --color-accent-hover），此处**不重复声明**，避免与全局规则漂移。 */
}

/* 当前页：aria-current="page" + 700 字重 双标记
   （字重仅取 400/700 —— 字体只做了这两档） */
.site-nav a[aria-current="page"] {
  color: var(--color-text);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   5. 区块通用
   -------------------------------------------------------------------------- */

.section {
  padding: 56px 0;
  border-bottom: 1px solid var(--color-border);
}

.section h2 {
  margin: 0 0 20px;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.section p {
  margin: 0 0 16px;
  color: var(--color-text-secondary);
}

.section p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   6. 软件简介区（首屏核心）
   -------------------------------------------------------------------------- */

.software {
  padding-top: 64px;
}

/* ⚠️ 泛化到 .section h1（WS8.2 起）：子页与首页的 <h1> 不在 .software 内，
   若只写 .software h1，子页 <h1> 会回落 UA 默认约 2em，
   落到 docs/S2.3_responsive.md 字号表之外。 */
.section h1 {
  margin: 0 0 8px;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

/* 同为泛化：导语段落不再限定在 .software 内 */
.lead {
  margin: 0 0 24px;
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
}

/* 核心特性列表 */
.feature-list {
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

/* ⚠️ 不添加 ::before 标记——文案定稿中每条已自带 ✅，
   此处再加标记会重复。保持与 docs/S1.2_content.md 逐字一致。 */
.feature-list li {
  margin-bottom: 8px;
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   7. 下载入口 —— 首屏可见
   -------------------------------------------------------------------------- */

.download {
  padding: 28px 0 0;
}

/* 下载按钮：底色 #0A66C2 + 白字（白字对比度 5.69:1）
   ⚠️ 不得改用 --color-accent（#1E90FF 配白字仅 3.24:1，不达 WCAG AA） */
.btn-download {
  display: inline-block;
  padding: 15px 34px;
  border: none;
  border-radius: 6px;
  background-color: var(--color-btn);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.18s ease;
  /* 按钮以背景填充与圆角表达可点击，属图形化的非颜色提示，
     故不加下划线（下划线会使按钮外观失真）。
     这是**经说明的例外**，理由见 docs/S2.2_a11y.md 条目 E4。 */
  text-decoration: none;
}

.btn-download:hover,
.btn-download:focus-visible {
  background-color: var(--color-btn-hover);
  color: var(--color-text);
  text-decoration: none;
}

.download-note {
  display: inline-block;
  margin-left: 14px;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  vertical-align: middle;
}

/* 文件信息与校验值 */
.file-meta {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.file-meta li {
  margin-bottom: 4px;
}

.file-meta .label {
  display: inline-block;
  min-width: 5.5em;
  color: var(--color-text-muted);
}

.file-meta .value {
  color: var(--color-text-secondary);
}

/* SHA-256 校验值：等宽字体，允许断行以容纳 64 位十六进制串 */
.hash {
  display: inline-block;
  max-width: 100%;
  color: var(--color-text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
  word-break: break-all;
}

/* --------------------------------------------------------------------------
   8. 隐私政策区
   -------------------------------------------------------------------------- */

.privacy h3 {
  margin: 24px 0 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

.privacy h3:first-of-type {
  margin-top: 0;
}

.privacy .updated {
  margin-bottom: 24px;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   9. 问答区

   7 个问题用 <h3>。取值逐条沿用 .privacy h3——不引入新字号、新字重、新色值，
   以免出现 S2.3 字号表之外的字号（浏览器对未设样式的 h3 会回落到约 1.17rem）。
   -------------------------------------------------------------------------- */

.faq h3 {
  margin: 24px 0 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

.faq h3:first-of-type {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   10. 页脚
   -------------------------------------------------------------------------- */

.site-footer {
  padding: 32px 0 40px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.site-footer p {
  margin: 0 0 8px;
}

.site-footer p:last-child {
  margin-bottom: 0;
}

.site-footer a {
  color: var(--color-text-muted);
}

.site-footer a:hover {
  color: var(--color-accent-hover);
}

/* --------------------------------------------------------------------------
   11. 响应式 —— 初步实现
   断点：≥1024px 桌面 / 768–1023px 平板 / <768px 移动

   ⚠️ 本段为「够评审用」的初步适配。
      正式规范由 S2.3 产出，完整实现由 S3.8 完成。
   -------------------------------------------------------------------------- */

/* 平板端 */
@media (max-width: 1023px) {
  .container {
    max-width: 100%;
  }

  .section {
    padding: 44px 0;
  }

  /* 导航整体落到第二行（依赖第 4 节里的 flex-wrap: wrap） */
  .site-nav {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* 移动端 */
@media (max-width: 767px) {
  .container {
    padding: 0 18px;
  }

  .section {
    padding: 36px 0;
  }

  .software {
    padding-top: 44px;
  }

  /* 下载按钮：移动端加宽加高，便于触控 */
  .btn-download {
    display: block;
    width: 100%;
    padding: 17px 24px;
    font-size: 1.125rem;
  }

  .download-note {
    display: block;
    margin: 12px 0 0;
    text-align: center;
  }

  .file-meta .label {
    display: block;
    min-width: 0;
  }

  /* 导航：移动端加高触控目标，≥44×44 CSS px（WCAG 2.5.5 AAA / 2.5.8 AA） */
  .site-nav a {
    min-height: 44px;
  }
}