/* ============================================================
   亮仓 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 */
    --orange-ink: #A85410; /* 橙色文字专用，白底 5.33: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
   ============================================================ */
.art-content [style*="#D97818"],
.art-content [style*="D97818"] {
    color: var(--orange-ink) !important;   /* 白底 5.33:1 ✓ */
}
.art-content [style*="color:#F59331"],
.art-content [style*="color: #F59331"] {
    color: #FFC98A !important;   /* 深蓝底 6.1:1 ✓ */
}

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

   统一改成深蓝底白字（9.34:1）。
   ============================================================ */
.art-content th {
    background: #004B72 !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(--orange-ink) !important;
}

/* ============================================================
   5. 主按钮 —— 橙底白字只有 2.31:1
   ------------------------------------------------------------
   改成深棕字（#22160A）在橙底上是 9.6:1。
   视觉上仍然是橙底，但文字清晰可读。
   ============================================================ */
.cta-btn {
    color: #22160A !important;
}
.cta-btn:hover {
    background: var(--orange-d);
    color: #fff !important;   /* 深橙底 5.4:1 ✓ */
}
.f-submit {
    background: var(--orange);
    color: #22160A !important;
    border-radius: 4px;
}
.f-submit:hover {
    background: var(--orange-d);
    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 的处理。
   ============================================================ */
.slide .btns .b2 {
    color: #22160A !important;
}
.slide .btns .b2:hover {
    background: var(--orange-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: #9B2C2C; }   /* 必填星号 */
.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(0, 101, 152, .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: #FDF0F0; border: 1px solid #EFA9A9; color: #9B2C2C; }

/* ============================================================
   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(--orange)        —— 不透明橙底
            旧规则白字在橙底只有 2.31:1 → 改深棕字（9.6:1 ✓）
     · .b2  background: rgba(255,255,255,.16) —— **半透明白玻璃底**
            它叠在深蓝遮罩上，合成后是浅蓝灰（约 rgb(77,106,127)），
            白字在那个底上是 5.3:1 ✓，**保持白色**。
            （曾误改成深棕字 → 3.09:1，反而更差）
   ============================================================ */
.slide .btns .b1 {
    color: #22160A !important;   /* 橙底 9.6:1 ✓ */
}
.slide .btns .b1:hover {
    background: #fff;
    color: #8A4B08 !important;   /* 白底 7.2:1 ✓ */
}
.slide .btns .b2 {
    color: #fff !important;      /* 玻璃底 5.3:1 ✓ */
}
.slide .btns .b2:hover {
    background: #fff;
    color: #004B72 !important;   /* 白底 9.3:1 ✓ */
}

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

/* ============================================================
   15. 页脚底栏链接
   ------------------------------------------------------------
   旧色 #7FAECD 在深蓝底(#004B72)上只有 3.93:1。
   换成更亮的 #B9D9EC（深蓝底 6.8:1 ✓）。
   ============================================================ */
.foot-bottom a,
.foot-links 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: #004B72;
    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(--orange);
    outline-offset: -4px;
}