/* ==========================================================================
   base.css — token + lưới an toàn dùng chung cho toàn theme
   Nạp ĐẦU TIÊN (trước header/footer/home/...), xem bjj_gear_enqueue_styles().

   Lưu ý: `style.css` ở gốc theme KHÔNG được enqueue (chỉ chứa header khai báo child
   theme), nên token phải đặt ở đây chứ không đặt trong style.css như dự định ban đầu
   ở docs/responsive/step-0-nen-tang.md.
   ========================================================================== */

/* === Breakpoint chuẩn của theme — xem docs/RESPONSIVE.md §3 ===
   laptop : max-width 1200px
   tablet : max-width 1024px
   mobile : max-width  782px   <- trùng breakpoint overlayMenu của WP core, KHÔNG đổi
   small  : max-width  480px

   Chỉ dùng đúng 4 số này. CSS không cho dùng biến trong điều kiện @media nên vẫn phải
   viết số cứng — bảng trên là nguồn tham chiếu duy nhất.

   Hai ngoại lệ ĐÃ ĐO và cố ý giữ, đừng "chuẩn hoá" chúng:
   - my-account.css @media (max-width: 768px) — phải khớp đúng con số của
     woocommerce-smallscreen.css (nạp với media="only screen and (max-width: 768px)",
     xem class-wc-frontend-scripts.php:91). Đổi thành 782 sẽ tạo khoảng 769–782px mà
     override của mình chạy còn layout thẻ của WooCommerce thì chưa → vỡ bảng đơn hàng.
   - header.css @media (min-width: 783px) — cận trên của mốc mobile, dùng cho các rule
     CHỈ dành desktop (mega-menu). 783 chứ không phải 782 để không chồng lấn.
   ============================================================================ */

:root {
	--bjj-gutter: 25px;      /* padding ngang container ở desktop (đo từ bjjfightgear.com) */
	--bjj-header-h: 136px;   /* header.css set lại theo từng viewport */
	--bjj-tap-min: 44px;     /* vùng bấm tối thiểu — WCAG 2.5.8 / Google Mobile-Friendly */
}

@media (max-width: 1024px) { :root { --bjj-gutter: 20px; } }
@media (max-width:  782px) { :root { --bjj-gutter: 16px; } }
@media (max-width:  480px) { :root { --bjj-gutter: 14px; } }

/* === Lưới an toàn chống tràn ngang ===
   Nguyên nhân phổ biến nhất của horizontal scroll là ảnh/iframe/pre vượt bề rộng cha.

   KHÔNG dùng `overflow-x: hidden` trên html/body: nó chỉ GIẤU tràn (khách vẫn mất nội dung
   bên phải, chỉ là không cuộn tới được) và nó phá `position: sticky` của header — một
   ancestor có overflow khác `visible` biến thành scroll container mới, sticky neo vào đó
   thay vì vào viewport.

   Bọc trong :where() để specificity = 0 → mọi rule của component đều đè lên được, kể cả
   các rule dùng selector đơn giản như `.bjj-brand-item img { width: 160px; height: 160px }`. */
:where(img, video, iframe, canvas, svg, object) {
	max-width: 100%;
}
:where(img, video, iframe, canvas) {
	height: auto;
}

/* Bảng trong nội dung bài/trang: cuộn ngang trong khung của nó thay vì đẩy rộng cả trang.
   CHỈ nhắm <figure class="wp-block-table"> mà core tự bọc quanh bảng — cố ý KHÔNG áp
   `table { display: block }` toàn cục: rule đó phá cách WooCommerce dựng bảng giỏ hàng và
   bảng đơn hàng (chúng dựa vào layout table thật + có responsive riêng). Bảng nào cần
   xử lý riêng thì làm ở step tương ứng (size chart ở step 4, đơn hàng ở step 5). */
:where(figure.wp-block-table) {
	max-width: 100%;
	overflow-x: auto;
}

:where(pre) {
	overflow-x: auto;
	max-width: 100%;
}

/* Từ dài không có chỗ ngắt (URL, mã sản phẩm) làm tràn khối chứa nó ở màn hình hẹp. */
@media (max-width: 782px) {
	:where(p, li, h1, h2, h3, h4, dd, dt, figcaption) {
		overflow-wrap: break-word;
	}
}

/* === Chống iOS tự phóng to trang khi chạm vào ô nhập ===
   Safari trên iPhone tự zoom cả trang khi focus vào <input>/<select>/<textarea> có font-size
   NHỎ HƠN 16px, rồi không tự thu lại — khách phải tự pinch để đọc tiếp. Đo được trên site này:
   ô tìm kiếm ở header 14px, ô số lượng trong giỏ 14px, form đăng nhập/đăng ký 15px, ô email
   nhận tin ở footer 13.6px, textarea ghi chú đơn hàng 14px — tức là gần như mọi ô nhập.

   Không dùng :where() ở đây (dù các rule khác trong file này đều dùng): :where() có specificity
   0 nên mọi rule component đặt 14-15px sẽ thắng lại, đúng thứ cần chặn. Selector dưới đây nặng
   0-3-1, đủ để thắng các rule đó mà không phải dùng !important.

   Loại trừ checkbox/radio: chúng không nhận chữ, font-size chỉ ảnh hưởng kích thước ô ở một số
   trình duyệt và Safari cũng không zoom vì chúng.

   `select`/`textarea` phải kèm một :not(...) vô hại để nâng độ đặc hiệu lên 0-1-1 — viết trần
   thì chỉ 0-0-1, thua mọi rule dạng `.wc-block-components-textarea` của WooCommerce (đã gặp:
   textarea ghi chú đơn hàng vẫn giữ nguyên 14px).

   `!important` ở đây là CÓ CHỦ Ý, không phải cho tiện. Đây là ràng buộc CHỨC NĂNG (dưới 16px
   thì Safari phóng to cả trang và không thu lại), không phải lựa chọn thẩm mỹ — mọi component
   đặt cỡ nhỏ hơn trên mobile đều đang gây hại. Và đua độ đặc hiệu ở đây là cuộc đua không
   thắng được: rule thắng của WooCommerce là
       .woocommerce-page form .form-row input.input-text
   nặng 0-4-1 (woocommerce-blocktheme.css). Vá từng chỗ thì cứ thêm component mới là lại hỏng —
   đã phải vá 2 lần trước khi chốt cách này (ô sắp xếp ở trang danh mục 14px, form đăng nhập 15px). */
@media (max-width: 782px) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
	select:not([multiple]),
	textarea:not([hidden]) {
		font-size: 16px !important;
	}
}