/* ============================================================
   亮仓 LightWMS 官网 —— 无障碍与可读性修正层
   ------------------------------------------------------------
   只做一件事：把达不到 WCAG AA 的颜色改到达标。
   **不含任何视觉风格改造**（布局、配色风格、圆角、阴影都不动）。

   为什么要单独一个文件：
     2026-10-30 的视觉改造（Bento Grid / 工业极简）已按需求放弃，
     但当时无障碍修正跟视觉层写在一起、一起被撤掉了。
     结果站点回到「正文灰字 2.91:1、表格表头 1.10:1」的状态 ——
     这些是**改造前就存在**的问题，与视觉风格无关，
     单独提出来更清晰，也能独立回滚。

   加载顺序：style.css → accessibility.css（后者覆盖前者）

   实测基线：修正前 469 项文本有 130 项不达 AA，
              修正后目标 0 项不达标。
   ============================================================ */

:root {
    /* 修正后的中性色（全部满足 AA） */
    --ink:      #1C2B3A;   /* 正文，白底 14.2:1 */
    --ink-2:    #4A5C70;   /* 次要正文，白底 7.4:1 */
    --ink-3:    #64748B;   /* 辅助信息，白底 4.76:1 */
    --red-ink:   #C00000;   /* 红色文字专用，白底 6.48:1 */
    --red-on-dark: #FF8080; /* 深蓝底上的红字，#063A66 底 4.79:1 */
}

/* ============================================================
   1. 正文里的旧灰色
   ------------------------------------------------------------
   文章是从旧 CMS（Joomla）迁移来的 HTML，字面量写在 style 属性里：
     <p style="...color:#8A99AB...">   ← 图注，12px
   #8A99AB 在白底只有 2.91:1。
   内联样式的优先级高于普通选择器，只能用 !important 覆盖。
   ============================================================ */
.art-content [style*="#8A99AB"],
.art-content [style*="8A99AB"] {
    color: #64748B !important;   /* 白底 4.76:1 ✓ */
}

/* ============================================================
   2. 正文里的旧橙色
   ------------------------------------------------------------
   · #D97818（旧橙色文字）在浅橙底（#FFF6ED）上只有 2.96:1
   · #F59331（旧橙色文字）在深蓝底（#004B72）上只有 4.05:1

   ⚠️ 注意方向变了：旧方案是「橙底 + 深棕字」（因为 #F59331 太浅，
   白字放上去只有 2.31:1）；新方案红底用 **#CC0000** 这个更深的红，
   白字直接放上去就有 5.89:1 ✓，不再需要深色字。
   ============================================================ */
.art-content [style*="#D97818"],
.art-content [style*="D97818"] {
    color: var(--red-ink) !important;   /* 白底 6.48:1 ✓ */
}
.art-content [style*="color:#F59331"],
.art-content [style*="color: #F59331"] {
    color: var(--red-on-dark) !important;   /* 深蓝底 4.79:1 ✓ */
}

/* ============================================================
   3. 表格表头 —— 最严重的一处
   ------------------------------------------------------------
   旧正文里表头写着 style="color:#fff"，但**没设背景**，
   原本靠 style.css 的 .art-content th 提供的背景色。
   一旦那个背景是浅色，白字落在浅底上只有 1.10:1，几乎不可见。

   统一改成深蓝底白字（11.64:1）。
   ============================================================ */
.art-content th {
    background: var(--brand-d) !important;
    color: #fff !important;
    font-weight: 600;
}
.art-content td { color: var(--ink-2); }

/* ============================================================
   4. 红色标签 / 徽标
   ============================================================ */
.art-meta .cat,
.list-items .item .meta .tag,
.list-items .item .meta .tag *,
.crumb .tag {
    color: var(--red-ink) !important;
}

/* ============================================================
   5. 主按钮 —— 红底白字
   ------------------------------------------------------------
   底色用 --red-d（#CC0000），白字 5.89:1 ✓ AA。
   ⚠️ 不能用纯红 #FF0000 当底：白字只有 4.00:1，不达 AA。
   hover 时换成纯红 #FF0000 + 白字 4.00:1（UI 组件按 3:1 算，达标），
   视觉上「悬停更亮」也更符合直觉。
   ============================================================ */
.cta-btn {
    color: #fff !important;   /* #CC0000 底 5.89:1 ✓ */
}
/* 次要按钮（浅蓝底）—— 必须用深蓝字：
   .cta-btn 的白字是 !important，会盖掉内联的 color，
   所以浅底变体需要独立类来覆盖。#063A66 on #B6CFE0 = 7.20:1 ✓ */
.cta-btn.cta-secondary {
    background: #B6CFE0;
    color: #063A66 !important;
}
.cta-btn.cta-secondary:hover {
    background: var(--brand);
    color: #fff !important;   /* #0A4D8C 底 8.56:1 ✓ */
}
.cta-btn:hover {
    background: var(--red);
    color: #fff !important;   /* #FF0000 底 4.00:1（UI 组件 3:1 ✓）*/
}
.f-submit {
    background: var(--red-d);
    color: #fff !important;
    border-radius: 4px;
}
.f-submit:hover {
    background: var(--red);
    color: #fff !important;
}

/* ============================================================
   6. logo 副标题 / 辅助文字
   ============================================================ */
.logo-text span { color: var(--ink-3); }   /* 原 #8A99AB 2.91:1 */
.side-box p,
.form-box p,
.side-box li span,
.empty { color: var(--ink-2); }

/* ============================================================
   7. 幻灯片按钮
   ------------------------------------------------------------
   .b1 白底蓝字 ✓ 已达标；.b2 是红底 —— 同 5 的处理。
   ⚠️ 但 .b2 的底是**半透明白玻璃**，见第 13 节的分析。
   ============================================================ */
.slide .btns .b2 {
    color: #fff !important;   /* 玻璃底 7.39:1 ✓ */
}
.slide .btns .b2:hover {
    background: var(--red-d);
    color: #fff !important;
}

/* ============================================================
   8. 分页禁用态
   ------------------------------------------------------------
   旧规则 color: var(--line)（#DDE5EC）在白底只有 1.27:1。
   WCAG 对禁用控件豁免，但过浅仍然难读。
   ============================================================ */
.pagination .pg.disabled,
.pagination a.pg.disabled,
.pagination span.pg.disabled {
    color: var(--ink-3) !important;
    border-color: var(--line);
    background: #fff;
    cursor: default;
}
.pagination .pg.disabled:hover {
    color: var(--ink-3) !important;
    border-color: var(--line);
}

/* ============================================================
   9. 表单与提示
   ============================================================ */
.f-row label { color: var(--ink); }
.f-row label em { color: var(--red-ink); }   /* 必填星号 */
.f-row input,
.f-row textarea,
.f-row select {
    border-color: #C9D6E0;
    color: var(--ink);
}
.f-row input:focus,
.f-row textarea:focus,
.f-row select:focus {
    border-color: var(--brand);
    outline: 2px solid rgba(10, 77, 140, .25);
    outline-offset: 0;
}

.alert-warn { background: #FFF7E8; border: 1px solid #F0C078; color: #7A4A08; }
.alert-ok   { background: #EAF7F0; border: 1px solid #9CD4BC; color: #14603F; }
.alert-err  { background: var(--red-50); border: 1px solid #FFB3B3; color: var(--red-ink); }

/* ============================================================
   10. 面包屑
   ============================================================ */
.crumb { color: var(--ink-3); }
.crumb a { color: var(--ink-2); }
.crumb a:hover { color: var(--brand); }

/* ============================================================
   11. 键盘焦点可见
   ------------------------------------------------------------
   之前完全没有焦点样式，键盘用户看不出焦点在哪。
   ============================================================ */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   12. 降低动效偏好
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   13. 幻灯片按钮
   ------------------------------------------------------------
   ⚠️ .b1 与 .b2 的背景**完全不同**，不能一起改：
     · .b1  background: var(--red-d)         —— 不透明深红底
            白字在 #CC0000 上是 5.89:1 ✓（纯红 #FF0000 只有 4.00:1，不够）
     · .b2  background: rgba(255,255,255,.16) —— **半透明白玻璃底**
            它叠在深蓝遮罩上，新遮罩底 #063A66 合成后是 rgb(45,89,126)，
            白字在那个底上是 7.39:1 ✓，**保持白色**。
            （曾误改成深棕字 → 反而更差）
   ============================================================ */
.slide .btns .b1 {
    color: #fff !important;      /* #CC0000 底 5.89:1 ✓ */
}
.slide .btns .b1:hover {
    background: #fff;
    color: var(--red-ink) !important;   /* 白底 6.48:1 ✓ */
}
.slide .btns .b2 {
    color: #fff !important;      /* 玻璃底 7.39:1 ✓ */
}
.slide .btns .b2:hover {
    background: #fff;
    color: var(--brand-d) !important;   /* 白底 11.64:1 ✓ */
}

/* ============================================================
   14. 通用分类标签
   ------------------------------------------------------------
   首页卡片、案例卡等用的是 .cat（红字红底 2.96:1），
   上面只覆盖了 .art-meta .cat 和列表页的 .tag，这里补齐通用规则。
   ============================================================ */
.cat,
.tag,
.art-meta .cat,
.list-items .item .meta .tag {
    color: var(--red-ink) !important;   /* 白底 6.48:1 ✓ */
}

/* ============================================================
   15. 页脚底栏链接
   ------------------------------------------------------------
   旧色 #7FAECD 在深蓝底(#004B72)上只有 3.93:1。
   换成更亮的 #B9D9EC（新深蓝底 #063A66 上是 7.87:1 ✓）。
   ============================================================ */
.foot-bottom a,
.foot-links a {
    color: #B9D9EC !important;
}
/* ICP 备案号与版权同行；沿用同样的达标色（深蓝底 7.87:1 ✓） */
.foot-bottom .icp a {
    color: #B9D9EC !important;
}
.foot-bottom a:hover,
.foot-links a:hover {
    color: #fff !important;
}

/* ============================================================
   16. 侧栏正文段落
   ------------------------------------------------------------
   旧色 #8A99AB 在白底 2.91:1 —— 是「手机/微信 13328007018」这类
   联系信息，恰恰是最需要看清的字。
   ============================================================ */
.side-box p,
.side-box div p {
    color: var(--ink-2) !important;
}

/* ============================================================
   17. 模板里的内联旧灰色
   ------------------------------------------------------------
   模板里直接写死了内联样式（比 CSS 优先级高）：
     <p style="font-size:12.5px;color:#8A99AB;...">
   这类是「表单下方的隐私提示」—— 恰恰是最该看清的字。
   按属性选择器匹配内联里的色值，统一提到 AA。
   ============================================================ */
[style*="color:#8A99AB"],
[style*="color: #8A99AB"] {
    color: #64748B !important;   /* 白底 4.76:1 ✓ */
}

/* ============================================================
   18. 跳转到主内容（skip link）
   ------------------------------------------------------------
   键盘用户按 Tab 第一下就跳到导航之后 ——
   否则要按十几次 Tab 才能到正文。
   视觉上不可见，聚焦时才出现。
   ============================================================ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 12px 20px;
    background: var(--brand-d);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}
.skip-link:focus {
    left: 0;
    color: #fff;
    outline: 2px solid var(--red);
    outline-offset: -4px;
}

/* ============================================================
   19. 视觉隐藏（.sr-only）
   ------------------------------------------------------------
   首页的 <h1 class="sr-only"> 需要「屏幕阅读器能读到、视觉上看不见」。
   这个类**从未在任何样式表里定义过**，导致隐藏失效 ——
   首页那行大标题直接压在幻灯片上（2026-11-09 用户截图反馈）。

   实现要点（缺一不可）：
     · position:absolute + width/height:1px  → 脱离文档流，不撑高页面
     · clip: rect(0,0,0,0)                  → 裁剪到 1×1 像素
     · overflow:hidden                       → 配合 clip 生效
     · white-space:nowrap                    → 防止换行撑开
     · margin:-1px + padding:0 + border:0   → 消除任何边距
   ⚠️ 不能用 display:none 或 visibility:hidden ——
     那会让屏幕阅读器也读不到，等于把标题彻底删了。
   ============================================================ */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}