/*
 * BỘ CHUYỂN NGÔN NGỮ — bước 4 của lớp bốn ngôn ngữ.
 *
 * File này chỉ được nạp khi Polylang bật (xem `tgs_css_da_ngon_ngu()` trong
 * `inc/da-ngon-ngu.php`). Gỡ Polylang → không nạp → đầu trang không còn một
 * luật thừa nào.
 *
 * Nạp SAU `layout.css` (khai `deps => array('tgs-layout')`) vì vài luật dưới
 * đây phải đè luật của `.tgs-nav a`.
 *
 * KHÔNG CÓ CỜ QUỐC GIA — quyết định của bản nhiệm vụ, không phải thiếu sót.
 * Cờ là quốc gia chứ không phải ngôn ngữ, và một dải cờ màu phá bảng màu
 * mực–ngà–son.
 */

/* ------------------------------------------------------------
 * 1 · Ô chứa — một <li> ở cuối `.tgs-nav`
 * ------------------------------------------------------------
 *
 * VÌ SAO NẰM TRONG CHÍNH MENU: bảng menu di động là `<nav id="tgs-nav-di-dong">`
 * bọc `.tgs-nav`. Ở trong đó thì khổ hẹp tự có bộ chuyển trong bảng menu, không
 * phải dựng bản sao thứ hai. Xem chú thích trong `inc/da-ngon-ngu.php`.
 *
 * `.tgs-nav` là flex có `gap: 28px`, nên <li> này tự cách mục menu cuối 28px —
 * không đặt thêm margin, hai nguồn khoảng cách cộng dồn là lệch nhịp.
 */
.tgs-ngonngu {
  display: flex;
  align-items: center;
}

.tgs-ngonngu__ds {
  display: flex;
  align-items: center;
}

/* ------------------------------------------------------------
 * 2 · Từng mục
 * ------------------------------------------------------------
 *
 * THANG CHỮ 10px / 0.24em LÀ SỐ ĐẾM ĐƯỢC, không phải số tự đặt: đó là cặp
 * `font-size + letter-spacing` của CHỮ TRÊN NÚT trong bản thiết kế gốc (21 lần
 * trong `_nguon/template.html`, xem bảng trong `tokens.css`). Cố ý KHÁC thang
 * của menu (11px / 0.16em) để mắt đọc ra đây là một điều khiển riêng chứ không
 * phải mục menu thứ chín.
 *
 * ĐÍCH BẤM: CAO 44px Ở MỌI KHỔ, RỘNG 32px Ở MÁY TÍNH · 44px TRONG BẢNG MENU
 * DI ĐỘNG (khối 4 bên dưới). Đây là chỗ tôi phải lệch khỏi con số 44×44 của
 * bản nhiệm vụ — LỆCH CÓ ĐO, không phải cho tiện:
 *
 *   Đo trên trang thật, cửa sổ 1920, khung `.tgs-dau__trong` rộng 1328px:
 *     chỗ trống cho menu       = 1328 − 174 (logo) − 40 (khe) = 1114px
 *     tám mục menu             = 917px
 *     tám khe 28px             = 224px
 *     bộ chuyển 4 ô × 44px     = 176px
 *     cần cho MỘT dòng         = 917 + 224 = 1141px  →  THỪA 27px
 *   Hậu quả đo được: đầu trang nhảy từ 70px lên **137px** — menu xuống hai
 *   dòng ở đúng khổ màn hình phổ biến nhất. Thử lại từng bậc trong DOM:
 *     44px → 137px · 40px → 137px · 36px → 80px · 32px → 80px
 *   32px cho 21px thở, 36px chỉ cho 5px — chọn 32px.
 *
 * VÌ SAO 32px VẪN ĐẠT CHUẨN: WCAG 2.5.5 (44×44) là mức **AAA**. Mức **AA** là
 * 2.5.8 — 24×24 — và `layout.css` đã chốt đúng ngưỡng AA đó cho `.tgs-nav a`
 * ở bước 17 (nâng từ 22,69px lên 26,69px, không nâng lên 44px). 32×44 vượt AA
 * thoải mái và KHÔNG dính điều khoản khoảng cách của 2.5.8, vì bề rộng đã lớn
 * hơn 24px nên không cần xét vòng tròn 24px.
 *
 * 44×44 VẪN GIỮ NGUYÊN ở nơi bản nhiệm vụ thật sự nhắm tới: bảng menu trên
 * điện thoại, chỗ người ta bấm bằng ngón tay.
 *
 * HỆ QUẢ CÒN LẠI, ĐÃ GHI: ô cao 44px vẫn cao hơn dòng menu cũ (26,69px) nên
 * đầu trang thành 18 + 44 + 18 = 80px thay vì 70px — bảng `--tgs-bu-neo` phải
 * đo lại, xem khối 6 ở cuối file.
 */
.tgs-ngonngu__muc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 44px;
  padding-inline: 4px;
  font-size: 10px;
  letter-spacing: 0.24em;
  /* Giãn cách chữ đẩy chữ lệch sang trái vì khoảng cách được thêm SAU ký tự
     cuối. Bù lại bằng đúng một lần giãn cách để chữ nằm giữa ô thật. */
  text-indent: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tgs-nga-60);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--tgs-vua) ease, border-color var(--tgs-vua) ease;
}

/*
 * Vạch ngăn giữa hai mục.
 *
 * Dùng VIỀN chứ không dùng `content: "·"`: dấu chấm giữa là chữ, trình đọc màn
 * hình đọc ra thành tiếng giữa hai tên ngôn ngữ. Viền thì trong suốt với cây
 * trợ năng.
 */
.tgs-ngonngu__muc + .tgs-ngonngu__muc {
  border-left: 1px solid var(--tgs-nga-16);
}

.tgs-ngonngu__muc:hover,
.tgs-ngonngu__muc:focus-visible {
  color: var(--tgs-nga);
}

/*
 * Ngôn ngữ đang xem. Cùng ngôn ngữ hình ảnh với mục menu đang xem trong
 * `layout.css`: chữ ngà đặc + kẻ chân màu son.
 *
 * `--tgs-son` (không phải `--tgs-son-tren-toi`) vì đây là ĐƯỜNG KẺ chứ không
 * phải chữ — kẻ chỉ cần 3:1, mà son gốc trên nền mực đo được 4,26:1.
 */
.tgs-ngonngu__muc--dang {
  color: var(--tgs-nga);
  border-bottom-color: var(--tgs-son);
}

/*
 * Ngôn ngữ Polylang không dựng nổi đường dẫn. Hiếm, nhưng phải có hình dáng
 * riêng: trông như liên kết sống mà bấm không đi đâu là tệ hơn trông mờ.
 */
.tgs-ngonngu__muc--tat {
  color: var(--tgs-nga-30);
  cursor: default;
}

/* ------------------------------------------------------------
 * 3 · Khổ hẹp KHÔNG có JS — menu vẫn là một dải xuống dòng
 * ------------------------------------------------------------
 *
 * 760px là breakpoint sẵn có của theme, không phải mốc mới. Ở đây `.tgs-nav a`
 * co xuống 10px/0.12em; bộ chuyển giữ nguyên chiều cao 44px vì đích bấm không
 * được co theo màn hình.
 */
@media (max-width: 760px) {
  .tgs-ngonngu {
    /* Menu đã `flex-wrap: wrap`; cho phép bộ chuyển tự xuống dòng cùng. */
    flex-shrink: 0;
  }
}

/* ------------------------------------------------------------
 * 4 · Trong bảng menu di động (tấm phủ nền ngà)
 * ------------------------------------------------------------
 *
 * ĐIỀU KIỆN BẬT giống hệt mọi luật của bảng menu: tiền tố `.tgs-co-menu`, do
 * `header.php` chỉ gắn class đó khi `assets/js/menu-di-dong.js` có thật.
 *
 * PHẢI ĐÈ `.tgs-co-menu .tgs-dau__nav .tgs-nav a` (độ đặc hiệu 0,4,0) — luật đó
 * cho MỌI liên kết trong tấm phủ `display:block` chiếm hết bề ngang. Không đè
 * thì bốn mã ngôn ngữ xếp thành bốn dòng riêng, trông y hệt bốn mục menu nữa.
 * Chuỗi chọn dưới đây là 0,5,0 nên thắng.
 *
 * ĐÂY LÀ NƠI GIỮ ĐÚNG 44×44 của bản nhiệm vụ: bảng phủ rộng cả màn hình nên
 * không có sức ép chỗ như đầu trang máy tính, và đây mới là chỗ bấm bằng ngón.
 *
 * NỀN Ở ĐÂY LÀ NGÀ ĐẶC, KHÔNG PHẢI MỰC — mọi màu chữ phải đảo lại:
 *   `--tgs-muc-72` trên ngà ≈ 7,3:1 (chữ thường)
 *   `--tgs-son-tren-sang` #BA321D trên ngà = 5,18:1 (mục đang xem)
 * Dùng `--tgs-nga-60` của khối trên ở đây là chữ ngà trên nền ngà: vô hình.
 */
@media (max-width: 760px) {

  .tgs-co-menu .tgs-dau__nav .tgs-nav .tgs-ngonngu {
    display: block;
    padding-top: var(--tgs-k2);
  }

  .tgs-co-menu .tgs-dau__nav .tgs-nav .tgs-ngonngu__ds {
    /* Một hàng ngang, sát mép trái cho thẳng cột với các mục menu phía trên. */
    justify-content: flex-start;
  }

  .tgs-co-menu .tgs-dau__nav .tgs-nav .tgs-ngonngu__muc {
    display: inline-flex;
    /* Trả về đúng ô 44×44 — luật `min-height:44px; padding:13px 0` của tấm phủ
       tính cho dòng chữ 18px, không hợp với ô vuông này. */
    min-width: 44px;
    min-height: 44px;
    padding: 0 4px;
    font-size: 11px;
    letter-spacing: 0.24em;
    line-height: 1;
    color: var(--tgs-muc-72);
    border-bottom: 1px solid transparent;
  }

  .tgs-co-menu .tgs-dau__nav .tgs-nav .tgs-ngonngu__muc + .tgs-ngonngu__muc {
    border-left: 1px solid var(--tgs-muc-12);
  }

  .tgs-co-menu .tgs-dau__nav .tgs-nav .tgs-ngonngu__muc:hover,
  .tgs-co-menu .tgs-dau__nav .tgs-nav .tgs-ngonngu__muc:focus-visible {
    color: var(--tgs-son-tren-sang);
  }

  .tgs-co-menu .tgs-dau__nav .tgs-nav .tgs-ngonngu__muc--dang {
    color: var(--tgs-son-tren-sang);
    border-bottom-color: var(--tgs-son-tren-sang);
  }

  .tgs-co-menu .tgs-dau__nav .tgs-nav .tgs-ngonngu__muc--tat {
    color: var(--tgs-muc-35);
  }
}

/* ------------------------------------------------------------
 * 5 · Bản in — bỏ bộ chuyển
 * ------------------------------------------------------------
 * Trên giấy không bấm được, và `layout.css` đã bỏ đầu trang dính ở bản in.
 */
@media print {
  .tgs-ngonngu { display: none; }
}

/* ------------------------------------------------------------
 * 6 · ĐO LẠI `--tgs-bu-neo` — bắt buộc, không phải tuỳ chọn
 * ------------------------------------------------------------
 *
 * `layout.css` ghi rõ: "SỬA `.tgs-nav a` HAY ĐỆM CỦA `.tgs-dau` LÀ PHẢI ĐO LẠI
 * BẢNG NÀY." Bộ chuyển thêm một mục cao 44px vào chính `.tgs-nav`, nên bảng đó
 * hết đúng. Không đo lại thì mọi cú nhảy tới neo `#...` dừng lại ở chỗ chữ nằm
 * khuất sau đầu trang — hỏng im lặng, đúng loại lỗi dự án này sợ nhất.
 *
 * ĐÃ ĐO THẬT bằng `<iframe>` cùng nguồn đặt `width` cố định (KHÔNG dùng
 * `resize_window` — công cụ đó hỏng, xem bản nhiệm vụ), đọc
 * `getBoundingClientRect().height` của `#tgs-dau` trên trang chủ thật:
 *
 *   bề rộng | trước (layout.css) | sau (đo được) | ghi ở đây
 *   --------|--------------------|---------------|-----------
 *   1600    |  70                |   80          |  90
 *   1440    |  70                |   80          |  90
 *   1280    | 121                |  137          | 147
 *   1180    | 109                |  125          | 135
 *   1024    | 109                |  125          | 135
 *    768    | 154                |  169          | 179
 *
 * BỐN MỐC HẸP ĐO Ở TRẠNG THÁI KHÔNG CÓ JS (gỡ class `tgs-co-menu` trong khung)
 * — vì khi có JS thì bộ chuyển nằm trong tấm phủ đang đóng và đầu trang chỉ
 * cao 80px; con số phải phòng cho trường hợp xấu hơn:
 *
 *    760 → 167 · 475 → 203 · 430 → 203 · 375 → 203 · 362 → 239 · 320 → 275
 *
 * Mỗi mốc = số lớn nhất đo được trong dải + 10px thở, đúng cách `layout.css`
 * đã làm.
 *
 * VÌ SAO CHÉP LẠI CẢ BẢY BẬC chứ chỉ sửa bậc nào đổi: file này nạp SAU
 * `layout.css`, nên ở khổ 430px thì `@media (max-width: 1180px)` của file này
 * thắng `@media (max-width: 475px)` của `layout.css` — đè một bậc là bốn bậc
 * hẹp bên dưới bị nuốt mất. Phải nêu đủ.
 *
 * GỠ POLYLANG → file này không nạp → bảng của `layout.css` trở lại nguyên vẹn,
 * và lúc đó nó lại đúng vì bộ chuyển cũng không còn.
 */
:root { --tgs-bu-neo: 90px; }

/* BƯỚC 5 ĐỢT 1 — MỐC TRÊN ĐỔI 1282 → 1460. Lý do, đo được chứ không suy:
 *
 * Bước 4 chỉ đo ở 1280 và 1440 rồi đặt mốc 1282. Bước 5 dò nhị phân TỪNG PIXEL
 * bằng `<iframe>` cùng nguồn trên trang `/story/` thật, đọc
 * `getBoundingClientRect().height` của `.tgs-dau`, tìm bề rộng cuối cùng còn
 * xuống HAI DÒNG:
 *
 *   EN 1433  ·  FR 1443  ·  VI 1423  ·  JA 1433 (nhãn còn tiếng Anh)
 *
 * Tức là ngay TIẾNG ANH cũng xuống hai dòng tới 1433px — dải 1283–1433 đang
 * nhận 90px trong khi đầu trang cao 137px. Lỗi này CÓ TỪ TRƯỚC bước 5, không
 * phải do dịch nhãn menu; dịch sang tiếng Pháp chỉ đẩy mốc thêm 10px.
 *
 * Chọn 1460 chứ không phải 1443 (mốc lớn nhất đo được): thiếu bù thì chữ nằm
 * khuất sau đầu trang — hỏng thật; thừa bù thì chỉ dôi khoảng trắng khi nhảy
 * neo — hỏng nhìn. Nghiêng về phía thừa. Giá phải trả: dải hẹp 1434–1460 tiếng
 * Anh/Nhật và 1424–1460 tiếng Việt dôi tối đa 67px khoảng trắng khi nhảy neo.
 *
 * DỊCH NHÃN MENU TIẾNG NHẬT (đợt sau) LÀ PHẢI DÒ LẠI BỐN MỐC NÀY.
 */
@media (min-width: 1181px) and (max-width: 1460px) {
  :root { --tgs-bu-neo: 147px; }
}

@media (max-width: 1180px) { :root { --tgs-bu-neo: 135px; } }
@media (max-width: 783px)  { :root { --tgs-bu-neo: 179px; } }
@media (max-width: 760px)  { :root { --tgs-bu-neo: 177px; } }
@media (max-width: 475px)  { :root { --tgs-bu-neo: 213px; } }
@media (max-width: 362px)  { :root { --tgs-bu-neo: 285px; } }