/* ══════════════════════════════════════════════════════════════════════
 * _shared/a11y.css — lớp tiếp cận dùng chung cho MỌI theme.
 * Thêm 14/09/2026 sau đợt rà /apple-design.
 *
 * Vì sao để ở _shared thay vì nướng vào từng style.css: sửa một lần là 552
 * theme cùng nhận, không phải chạy lại ThemeBuilder::buildAll(). Cũng là cách
 * duy nhất phủ được 5 theme VIẾT TAY (default, dark-pro, local-brand-pro,
 * tin-tuc-pro-1, tin-tuc-pro-10) vốn nằm ngoài generator.
 *
 * PHẢI nạp SAU style.css của theme.
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Chỉ dành cho trình đọc màn hình ──────────────────────────────────
   Bootstrap 5 bỏ .sr-only (đổi tên thành .visually-hidden) nhưng markup
   trong dự án vẫn dùng .sr-only → nhãn đang HIỆN ra màn hình. Khai báo cả hai. */
.sr-only,
.visually-hidden{
    position:absolute !important;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* ── Bỏ qua điều hướng ────────────────────────────────────────────────
   Người dùng bàn phím trước đây phải tab qua toàn bộ menu ở MỌI trang. */
.skip-link{
    position:absolute; left:-9999px; top:0; z-index:9999;
    background:#0f172a; color:#fff;
    padding:12px 20px;
    border-radius:0 0 8px 0;
    font-weight:600; text-decoration:none;
}
.skip-link:focus{ left:0 }

/* ── Vòng focus nhìn thấy được ────────────────────────────────────────
   Trước đây 0/552 theme có :focus-visible, và ô nhập còn `outline:none`
   thay bằng vòng --clr-primary-100 chỉ đạt 1.09–1.27:1 (coi như vô hình).

   --clr-focus do ss_theme_tokens_style() sinh, luôn >= 4.5:1 trên nền trắng.
   Theme nền tối tự đặt lại --clr-focus trong style.css của mình.
   :where() giữ độ đặc hiệu = 0 nên quy tắc riêng của theme vẫn đè lên được. */
:where(a,button,input,select,textarea,summary,[role="button"],[role="tab"],[tabindex]:not([tabindex="-1"])):focus-visible{
    outline:3px solid var(--clr-focus, #0b5ed7);
    outline-offset:2px;
    border-radius:4px;
}
/* Vòng focus trên vùng NỀN TỐI / NỀN MÀU.
   --clr-focus được kiểm trên nền SÁNG nên ở chân trang (#0a0f1d), trong hero nền
   tối/gradient và trên thanh nav nền primary thì gần như vô hình — đo được
   203/547 theme dưới 3:1 ngay tại chân trang. --clr-focus-on-dark được kiểm
   riêng trên #0a0f1d, dự phòng là màu trắng (19.6:1) nếu theme chưa có token. */
.site-footer :where(a,button,input,select,textarea,[tabindex]):focus-visible,
.nav-mega-top :where(a,button):focus-visible,
[class*="hero-"] :where(a,button):focus-visible,
.drawer :where(a,button):focus-visible{
    outline-color:var(--clr-focus-on-dark, #ffffff);
}

/* Bấm chuột thì không hiện vòng; bàn phím thì có. KHÔNG bao giờ tắt hẳn. */
:where(a,button,input,select,textarea,summary):focus:not(:focus-visible){ outline:none }

/* Bootstrap 5.3 CỐ Ý đặt `.btn:focus-visible{outline:0}` và thay bằng box-shadow
   tô theo màu của chính nút. Trên site dùng màu do tenant tự chọn, cái bóng đó
   không bảo đảm tương phản. Luật :where() ở trên có đặc hiệu 0 nên thua
   `.btn:focus-visible` (0,2,0) — phải nâng đặc hiệu để giành lại vòng focus. */
.btn:focus-visible,
.btn-check:focus-visible + .btn,
a.btn:focus-visible,
button.btn:focus-visible{
    outline:3px solid #0b5ed7 !important;
    outline-color:var(--clr-focus, #0b5ed7) !important;
    outline-offset:2px;
}

/* Vùng chạm tối thiểu cho nút biểu tượng (HIG: mặc định 44x44, sàn 28x28). */
:where(.btn-icon,.icon-btn,[data-icon-button]){ min-width:44px; min-height:44px }

/* ── Giảm chuyển động ─────────────────────────────────────────────────
   551/552 theme có animation nhưng chỉ 1 theme tôn trọng thiết lập này. */
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto }
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
    .reveal{ opacity:1 !important; transform:none !important }
}

/* ── Tăng tương phản ──────────────────────────────────────────────────
   Chỉ siết các token trung tính; KHÔNG đụng token màu thương hiệu vì
   những token đó đã qua kiểm tương phản ở Palette::tokens(). */
@media (prefers-contrast: more){
    :root{
        --clr-text-muted:#334155;
        --clr-text-subtle:#334155;
        --clr-border:#64748b;
        --clr-border-input:#334155;
        --clr-border-strong:#334155;
    }
    :where(a){ text-decoration:underline }
}

/* Bootstrap 5.3 cũng đặt outline:0 cho điều khiển biểu mẫu và thay bằng box-shadow
   tô alpha .25 — trên nền trắng chỉ khoảng 1.3:1, quá nhạt để làm dấu hiệu focus.
   Khai báo HAI LỚP: dòng đầu màu literal an toàn, dòng sau nâng cấp theo biến; nếu
   biến không phân giải được thì dòng đầu vẫn giữ, không rơi về currentColor. */
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.form-range:focus-visible,
input.form-control:focus-visible,
textarea.form-control:focus-visible,
select.form-select:focus-visible{
    outline:3px solid #0b5ed7 !important;
    outline-color:var(--clr-focus, #0b5ed7) !important;
    outline-offset:2px;
}