/**
 * P3-G320 — 法律三页共用的原生样式表（/privacyPolicy ＝ private_pc、/protocal ＝ user_pc、/data-security）。
 *
 * 为什么会有这个文件：这三页是站里唯一「既不引 fragments::theme，也不自带 Tailwind 引擎」的三个孤岛，
 * HTML 写的却是 Tailwind 类名——样式来源是各页 <style> 里**手抄的一份原生 CSS 子集**，抄漏的类当场无规则可依。
 * 线上实测：private_pc 26 种、user_pc 25 种、data-security 10 种「用了但没有定义」的类，后果都看得见——
 * 导航在任意宽度都是 display:none（链接计算尺寸 0×0）、固定头部全透明、卡片没内边距、链接没 hover 反馈。
 * 所以这里**只放三页都缺的那批**，页面自己已经定义的一条不动（避免同一类两处定义、谁赢看顺序）。
 *
 * 三条口径，改这个文件前先读：
 *  ① 类名与 Tailwind 同名同义（含转义写法 `.md\:grid-cols-2`），这样页面 HTML 一个字都不用改；
 *     断点用 Tailwind 的 768px。注意 `.md-flex` 与页面里的 `.hidden` 权重相同、**靠加载先后决胜**，
 *     所以本文件必须挂在页面 <style> 之后（挂前面导航照样隐藏）。
 *  ② 品牌色只在本文件出现一次：三个 var 的兜底值必须等于 js/theme.js 的 primary／secondary／page，
 *     由 tools-tests/g320-legal-pages/test-style.js 从 theme.js 跑出来核对（R61①，不抄第二份清单）。
 *     三页内联样式里原来那些 #0F2E59／#FF7D29 是 G281 换肤前的旧 navy/orange，已改成引用 var()——
 *     那是全站最后一份旧品牌色（G261 当年记的「第三份品牌色」就是它）。
 *  ③ secondary（金）不可作文字底：theme.js 明写白字压在它上只有 3.0:1、AA 不过；
 *     所以 CTA 按钮用「金底 + primary 深字」，不是「金底白字」。门禁量对比度。
 */

:root {
  --legal-primary: #12305C;   /* = theme.js colors.primary（藏青） */
  --legal-secondary: #B08A44; /* = theme.js colors.secondary（金） */
  --legal-page: #F7F8FB;      /* = theme.js colors.page（页面底） */
  --legal-dark: #0B1B33;      /* = theme.js colors.dark（页脚与品牌底）。三页原来各自写 #081A30，是 theme.js 之前的第三份深色 */
  --legal-ink: #101A2B;       /* = theme.js colors.ink（正文主色）。原来两页写 #2c3e50、data-security 写 #1f2937 */
  /* 版式基准：三页原来一份是 900px/15px/行高 1.8、另一份是 1280px/16px/默认行高 ⇒ 同一条顶栏在三页里宽度和字号都不一样 */
  --legal-container: 900px;
  --legal-gutter: 20px;
  --legal-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* ---------- 元素级基准（不是 utility，故不受"页面自己定义的那批"约束）----------
   data-security 从来没写 a{} 基础规则 ⇒ 它页脚里的备案链接是浏览器默认的蓝色带下划线，压在深蓝底上；
   另外两页有这条，所以同一段页脚在三页里长得不一样。收一份，三页共用。 */
a { color: inherit; text-decoration: none; }
a:hover { color: var(--legal-secondary); }

/* ---------- 背景与层：固定头部以前是透明的 ---------- */
.bg-white { background-color: #ffffff; }
.bg-white\/95 { background-color: rgba(255, 255, 255, 0.95); }
.backdrop-blur-sm { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* ---------- 断点：private_pc／user_pc 的 <style> 里只有 max-width 查询，
   md-* 这批从来没定义过 ⇒ `hidden md-flex` 的导航恒隐藏、`md-hidden` 的汉堡恒显示 ---------- */
@media (min-width: 768px) {
  .md-flex { display: flex; }
  .md-hidden { display: none; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 排距：正文卡片的内边距与段距以前整批缺失 ---------- */
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }   /* 页脚内边距：data-security 原来用 py-6（24px），另两页 py-8（32px） */
.pb-12 { padding-bottom: 3rem; }
.my-10 { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
/* space-y-*：Tailwind 的原始选择器是 `.space-y-N > :not([hidden]) ~ :not([hidden])`，
   这三页里没有带 hidden 的子元素，用相邻兄弟等价且更好读 */
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }

/* ---------- 尺寸与盒模型 ---------- */
.w-20 { width: 5rem; }
.h-20 { height: 5rem; }
.max-w-2xl { max-width: 42rem; }
.inline-block { display: inline-block; }
.overflow-x-auto { overflow-x: auto; }

/* ---------- 正文里标"禁止/违约"与"合规"的两支颜色（页面各自只用到一两次） ---------- */
.text-red-600 { color: #dc2626; }
.text-green-600 { color: #16a34a; }

/* ---------- 过渡与交互态：hover 系列以前一个都没定义 ⇒ 链接与按钮没有任何反馈 ---------- */
.transition-colors {
  transition-property: color, background-color, border-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}
.duration-300 { transition-duration: 0.3s; }
.hover\:underline:hover { text-decoration-line: underline; }
.hover\:text-secondary:hover { color: var(--legal-secondary); }

/* ---------- 三页共用的两个零件 ---------- */
/* 汉堡钮：以前 .md-hidden 没定义 ⇒ 按钮恒显示却什么都没绑，等于一个"不存在的链接"。
   现在三页都在页尾脚本里给它接线（.legal-nav-open 由 id＋class 组成，权重高过页面里的 .hidden）。 */
@media (max-width: 767.98px) {
  #legalNav.legal-nav-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 100%;
    padding: 0.75rem 1rem 1rem;
    background: #ffffff;
    border: 1px solid #eef0f3;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(8, 26, 48, 0.18);
  }
}
/* 公安备案徽标：原来靠 inline style 压住没定义的 .w-16/.h-16（4rem）——
   R59②「默认值写在 inline style 上会永久遮住 CSS 规则」的同族：尺寸回到样式表里。 */
.icp-badge {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: -3px;
  margin: 0 6px;
}

@media (max-width: 767.98px) {
  /* 汉堡钮是三页移动端唯一的导航入口，可点面积不能只有图标那么大（WCAG 2.5.5 目标尺寸 ≥44px） */
  #legalNavToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}