/* ==========================================================================
   page-tabs.css — bổ sung a11y/cảm ứng cho atom `.page-tabs`/`.page-tab`
   (UI_COMPONENT_LIBRARY.md §2.25). Thêm 2026-08-16, task nhóm trang
   subscription.

   ⚠️ ĐÂY LÀ FILE THỨ HAI CỦA CÙNG MỘT HỌ CLASS. Định nghĩa gốc (màu, padding,
   gạch chân active, `.page-tab__count`, `.page-tab--disabled`, và rule
   cuộn ngang ở <=768px) vẫn nằm ở `css/style.css:6733+` và VẪN LÀ NGUỒN CHUẨN
   cho hình thức của tab. File này CỐ Ý chỉ chứa các rule **cộng thêm** —
   không khai báo lại một thuộc tính nào mà style.css đã đặt — nên không có
   cuộc đua cascade giữa hai file (đúng cái bẫy `.filter-group` đã vấp: cùng
   một class sống ở 2 file với cùng specificity, sửa một bên quên bên kia thì
   kết quả phụ thuộc thứ tự nạp stylesheet).

   Sửa hình thức tab -> style.css. Thêm hành vi a11y/cảm ứng -> file này.

   Nạp toàn cục từ `page/_parts/header.php` (ngay sau style.css) vì `.page-tabs`
   xuất hiện ở 8+ trang; nạp theo trang sẽ khiến cùng một component hiện khác
   nhau tuỳ trang — đúng loại drift mà thư viện component tồn tại để chặn.
   ========================================================================== */

/* --- 1. Vùng chạm 44px trên thiết bị cảm ứng ------------------------------
   `.page-tab` cao ~34px (padding 9px + line-height 1.2 * 13px) — dưới ngưỡng
   44px của WCAG 2.5.5. KHÔNG nâng chiều cao vô điều kiện: với chuột, ngưỡng
   áp dụng là WCAG 2.5.8 (24px) và tab đã vượt; nâng cho tất cả sẽ đội thêm
   ~10px chiều cao chrome trên MỌI trang có tab — ngược hẳn hướng task 137 vừa
   nén margin để kéo nội dung lên trên màn hình đầu.

   `pointer: coarse` = ngón tay (điện thoại/tablet), đúng nhóm cần 44px. */
@media (pointer: coarse) {

    .page-tab,
    .page-tab--disabled {
        min-height: 44px;
    }

    /* Tab trên cảm ứng cuộn ngang trong chính nó (rule <=768px ở style.css).
       `scroll-snap` giữ tab dừng gọn ở mép trái thay vì cắt đôi giữa chữ. */
    .page-tabs {
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .page-tabs > .page-tab,
    .page-tabs > .page-tab--disabled {
        scroll-snap-align: start;
    }
}

/* --- 2. Vòng focus nhìn thấy được ----------------------------------------
   `.page-tab` chưa từng có style focus riêng: người dùng bàn phím chỉ có vòng
   mặc định của trình duyệt, mà vòng đó vẽ sát mép chữ và gần như chìm vào
   gạch chân 2px của tab. Dùng `:focus-visible` (không phải `:focus`) để chuột
   bấm không bật vòng.

   `outline-offset` âm để vòng nằm TRONG ô tab — tab dính sát nhau (gap 2px),
   offset dương sẽ đè lên tab bên cạnh. */
.page-tab:focus-visible,
.page-tab--disabled:focus-visible {
    outline: 2px solid var(--brand-600, #2158d8);
    outline-offset: -3px;
    border-radius: 4px;
}

/* --- 3. Không cho nav tab tự đẩy trang cuộn ngang -------------------------
   `.page-tabs` là flex container; ở <=768px style.css đặt `flex-wrap: nowrap`
   + `overflow-x: auto`. Một flex item có nội dung dài hơn container vẫn có thể
   thổi phồng container nếu container nằm trong grid/flex cha — `min-width: 0`
   là khoá chốt tiêu chuẩn cho việc đó, và nó không đổi gì khi tab đã vừa. */
.page-tabs {
    min-width: 0;
    max-width: 100%;
}

/* --- 4. Giảm chuyển động ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .page-tab {
        transition: none;
    }

    .page-tabs {
        scroll-behavior: auto;
    }
}