/* =====================================================================
   OSE · Mobile menu (navigation sheet for phones and tablets)
   ---------------------------------------------------------------------
   A navy sheet opened by the nav toggle: big link rows with a current-page
   marker, the "Đăng ký tư vấn" CTA and quick contacts (Zalo, Gọi,
   Messenger). Full screen on phones; from --mobile-menu-max-width up it
   becomes a side sheet over a scrim. Hidden (and absent) without JS.

   Markup — put it right after the <header class="nav">, never inside it
   (the nav's backdrop-filter would trap position: fixed).
     <div class="mobile-menu" id="site-menu" data-js="mobile-menu" hidden>
       <div class="mobile-menu__scrim" data-mobile-menu-close></div>
       <div class="mobile-menu__sheet" data-surface="navy" role="dialog"
            aria-modal="true" aria-label="Menu">
         <div class="mobile-menu__head">
           <a class="mobile-menu__brand" href="/"><img class="mobile-menu__logo"
              src="/brand/logo/OSE_mark_cream.svg" alt="OSE – Outer Space Education"
              width="994" height="429"></a>
           <button class="mobile-menu__close" type="button" data-mobile-menu-close>
             <span class="visually-hidden">Đóng menu</span></button>
         </div>
         <nav aria-label="Điều hướng chính">
           <ul class="mobile-menu__links" role="list">
             <li class="mobile-menu__item"><a class="mobile-menu__link" href="/khoa-hoc/">Khoá học</a></li>
             …
           </ul>
         </nav>
         <div class="mobile-menu__item mobile-menu__cta">
           <a class="btn btn--primary btn--lg" href="/lien-he/">Đăng ký tư vấn</a></div>
         <div class="mobile-menu__item mobile-menu__contact">
           <p class="mobile-menu__label" id="…">Liên hệ nhanh</p>
           <ul class="mobile-menu__contact-list" role="list" aria-labelledby="…">
             <li><a class="mobile-menu__contact-link" href="https://zalo.me/…">
               <span class="mobile-menu__contact-icon mobile-menu__contact-icon--zalo"
                     aria-hidden="true"></span>Zalo</a></li>
             … --call (Gọi) · --messenger (Messenger)
           </ul>
         </div>
       </div>
     </div>
   Toggle — lives in the nav bar but belongs to this component:
     <button class="mobile-menu__toggle" type="button" aria-expanded="false"
             aria-controls="site-menu"><span class="visually-hidden">Mở menu</span></button>
     Shown only when JS runs (html.js) and below 64em.
     .mobile-menu__toggle--always keeps it at every width (previews).

   States
     closed: [hidden] · open: [data-state="open"] (set by JS; links stagger in)
     link        :hover :focus-visible :active [aria-current="page"] (gradient dash)
     toggle/close :hover :focus-visible :active :disabled [aria-disabled="true"]
                 toggle[aria-expanded="true"] shows the close icon
     contact     :hover :focus-visible :active [aria-disabled="true"]
     html.is-menu-open  locks page scroll while the sheet is open
   JS  data-js="mobile-menu" on .mobile-menu (the root, which needs an id).
       js/components/mobile-menu.js finds its toggles by aria-controls, opens
       and closes the sheet, traps focus, closes on Escape / close button /
       scrim and returns focus to the toggle.
   ===================================================================== */

@layer components {
  :root.is-menu-open {
    overflow: hidden;
  }

  /* ---- Root: scrim layer + positioning -------------------------------- */
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: var(--mobile-menu-z);
    display: flex;
    justify-content: flex-end;
    transition: opacity var(--mobile-menu-exit-duration) var(--mobile-menu-exit-ease);
  }

  .mobile-menu:not([data-state="open"]) {
    opacity: 0;
    pointer-events: none;
  }

  .mobile-menu[data-state="open"] {
    transition-duration: var(--mobile-menu-enter-duration);
    transition-timing-function: var(--mobile-menu-enter-ease);
  }

  .mobile-menu__scrim {
    position: absolute;
    inset: 0;
    background-color: var(--mobile-menu-scrim);
  }

  /* ---- Sheet ---------------------------------------------------------- */
  .mobile-menu__sheet {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--mobile-menu-gap);
    inline-size: min(100%, var(--mobile-menu-max-width));
    block-size: 100%;
    padding-inline: var(--mobile-menu-padding);
    padding-block-end: calc(var(--mobile-menu-padding) + var(--mobile-menu-safe-area));
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--mobile-menu-bg);
    color: var(--mobile-menu-text);
    box-shadow: var(--mobile-menu-shadow);
    transition: transform var(--mobile-menu-exit-duration) var(--mobile-menu-exit-ease);
  }

  .mobile-menu:not([data-state="open"]) .mobile-menu__sheet {
    transform: translateX(var(--mobile-menu-enter-offset));
  }

  .mobile-menu[data-state="open"] .mobile-menu__sheet {
    transition-duration: var(--mobile-menu-enter-duration);
    transition-timing-function: var(--mobile-menu-enter-ease);
  }

  /* Staggered entrance: JS sets --_i (0, 1, 2 …) on every .mobile-menu__item.
     Reduced motion: offset and stagger collapse to 0 → a plain fade. */
  .mobile-menu__item {
    transition:
      opacity var(--mobile-menu-exit-duration) var(--mobile-menu-exit-ease),
      transform var(--mobile-menu-exit-duration) var(--mobile-menu-exit-ease);
  }

  .mobile-menu:not([data-state="open"]) .mobile-menu__item {
    opacity: 0;
    transform: translateY(var(--mobile-menu-enter-offset));
  }

  .mobile-menu[data-state="open"] .mobile-menu__item {
    transition-duration: var(--mobile-menu-enter-duration);
    transition-timing-function: var(--mobile-menu-enter-ease);
    transition-delay: calc(var(--_i, 0) * var(--mobile-menu-stagger));
  }

  /* ---- Head: logo + close ---------------------------------------------- */
  .mobile-menu__head {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--mobile-menu-head-z);
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--mobile-menu-link-gap);
    min-block-size: var(--mobile-menu-head-height);
    background-color: var(--mobile-menu-bg);
  }

  .mobile-menu__brand {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--mobile-menu-toggle-size);
    border-radius: var(--mobile-menu-link-radius);
  }

  .mobile-menu__brand:focus-visible {
    box-shadow: var(--mobile-menu-focus-ring);
  }

  .mobile-menu__logo {
    inline-size: auto;
    block-size: var(--mobile-menu-logo-height);
  }

  /* ---- Toggle (in the nav bar) and close button ------------------------- */
  .mobile-menu__toggle,
  .mobile-menu__close {
    --_icon: var(--mobile-menu-toggle-icon);
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: var(--mobile-menu-toggle-size);
    block-size: var(--mobile-menu-toggle-size);
    padding: 0;
    border: 0;
    border-radius: var(--mobile-menu-toggle-radius);
    background-color: var(--mobile-menu-toggle-bg);
    color: var(--mobile-menu-toggle-color);
    cursor: pointer;
    transition: background-color var(--mobile-menu-duration) var(--mobile-menu-ease);
  }

  .mobile-menu__close {
    --_icon: var(--mobile-menu-close-icon);
    display: inline-flex;
  }

  /* No JS, no toggle: the nav keeps its links visible instead. */
  .mobile-menu__toggle {
    display: none;
  }

  .js .mobile-menu__toggle {
    display: inline-flex;
  }

  @media (min-width: 64em) {
    .js .mobile-menu__toggle:not(.mobile-menu__toggle--always) {
      display: none;
    }
  }

  .mobile-menu__toggle[aria-expanded="true"] {
    --_icon: var(--mobile-menu-close-icon);
  }

  .mobile-menu__toggle::before,
  .mobile-menu__close::before {
    content: "";
    inline-size: var(--mobile-menu-toggle-icon-size);
    block-size: var(--mobile-menu-toggle-icon-size);
    background-color: currentColor;
    -webkit-mask: var(--_icon) center / contain no-repeat;
    mask: var(--_icon) center / contain no-repeat;
    forced-color-adjust: none;
  }

  @media (hover: hover) {
    .mobile-menu__toggle:hover,
    .mobile-menu__close:hover {
      background-color: var(--mobile-menu-toggle-bg-hover);
    }
  }

  .mobile-menu__toggle:focus-visible,
  .mobile-menu__close:focus-visible {
    box-shadow: var(--mobile-menu-focus-ring);
  }

  .mobile-menu__toggle:active,
  .mobile-menu__close:active {
    background-color: var(--mobile-menu-toggle-bg-active);
  }

  .mobile-menu__toggle:disabled,
  .mobile-menu__toggle[aria-disabled="true"],
  .mobile-menu__close:disabled,
  .mobile-menu__close[aria-disabled="true"] {
    background-color: var(--mobile-menu-toggle-bg);
    color: var(--mobile-menu-toggle-color-disabled);
    cursor: not-allowed;
  }

  /* ---- Links ----------------------------------------------------------- */
  .mobile-menu__links {
    display: grid;
    padding: 0;
    list-style: none;
  }

  .mobile-menu__links > li {
    border-block-end: var(--mobile-menu-link-border-width) solid var(--mobile-menu-link-border);
  }

  .mobile-menu__link {
    display: flex;
    align-items: center;
    gap: var(--mobile-menu-link-gap);
    min-block-size: var(--mobile-menu-link-min-height);
    padding: var(--mobile-menu-link-padding-block) var(--mobile-menu-link-padding-inline);
    border-radius: var(--mobile-menu-link-radius);
    color: var(--mobile-menu-link-text);
    font: var(--mobile-menu-link-font);
    font-family: var(--mobile-menu-link-font-family);
    letter-spacing: var(--mobile-menu-link-tracking);
    text-decoration: none;
    transition:
      background-color var(--mobile-menu-duration) var(--mobile-menu-ease),
      color var(--mobile-menu-duration) var(--mobile-menu-ease);
  }

  .mobile-menu__link[aria-current="page"]::before {
    content: "";
    flex: none;
    inline-size: var(--mobile-menu-link-indicator-width);
    block-size: var(--mobile-menu-link-indicator-height);
    border-radius: var(--mobile-menu-link-indicator-radius);
    background: var(--mobile-menu-link-indicator-current);
    forced-color-adjust: none;
  }

  @media (hover: hover) {
    .mobile-menu__link:hover {
      background-color: var(--mobile-menu-link-bg-hover);
    }
  }

  .mobile-menu__link:focus-visible {
    box-shadow: var(--mobile-menu-focus-ring);
  }

  .mobile-menu__link:active {
    background-color: var(--mobile-menu-link-bg-active);
    color: var(--mobile-menu-link-text-active);
  }

  /* ---- CTA ------------------------------------------------------------- */
  .mobile-menu__cta {
    display: grid;
  }

  /* ---- Quick contacts --------------------------------------------------- */
  .mobile-menu__contact {
    display: grid;
    gap: var(--mobile-menu-link-gap);
  }

  .mobile-menu__label {
    color: var(--mobile-menu-label-color);
    font: var(--mobile-menu-label-font);
    letter-spacing: var(--mobile-menu-label-tracking);
    text-transform: var(--mobile-menu-label-case);
  }

  .mobile-menu__contact-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mobile-menu-contact-gap);
    padding: 0;
    list-style: none;
  }

  .mobile-menu__contact-list > li {
    display: grid;
  }

  .mobile-menu__contact-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mobile-menu-contact-gap);
    min-block-size: var(--mobile-menu-contact-min-height);
    padding: var(--mobile-menu-contact-padding) var(--mobile-menu-contact-padding-inline);
    border: var(--mobile-menu-contact-border-width) solid var(--mobile-menu-contact-border);
    border-radius: var(--mobile-menu-contact-radius);
    background-color: var(--mobile-menu-contact-bg);
    color: var(--mobile-menu-contact-text);
    font-family: var(--mobile-menu-contact-font-family);
    font-size: var(--mobile-menu-contact-font-size);
    font-weight: var(--mobile-menu-contact-font-weight);
    text-align: center;
    text-decoration: none;
    transition:
      background-color var(--mobile-menu-duration) var(--mobile-menu-ease),
      border-color var(--mobile-menu-duration) var(--mobile-menu-ease),
      color var(--mobile-menu-duration) var(--mobile-menu-ease);
  }

  /* Official third-party logos (Zalo, Messenger): unmodified colours. */
  .mobile-menu__contact-logo {
    flex: none;
    inline-size: var(--mobile-menu-contact-icon-size);
    block-size: var(--mobile-menu-contact-icon-size);
  }

  .mobile-menu__contact-icon {
    flex: none;
    inline-size: var(--mobile-menu-contact-icon-size);
    block-size: var(--mobile-menu-contact-icon-size);
    background-color: currentColor;
    -webkit-mask: var(--_icon) center / contain no-repeat;
    mask: var(--_icon) center / contain no-repeat;
    forced-color-adjust: none;
  }

  .mobile-menu__contact-icon--zalo {
    --_icon: var(--mobile-menu-zalo-icon);
  }

  .mobile-menu__contact-icon--call {
    --_icon: var(--mobile-menu-call-icon);
  }

  .mobile-menu__contact-icon--messenger {
    --_icon: var(--mobile-menu-messenger-icon);
  }

  @media (hover: hover) {
    .mobile-menu__contact-link:hover {
      background-color: var(--mobile-menu-contact-bg-hover);
    }
  }

  .mobile-menu__contact-link:focus-visible {
    box-shadow: var(--mobile-menu-focus-ring);
  }

  .mobile-menu__contact-link:active {
    background-color: var(--mobile-menu-contact-bg-active);
  }

  .mobile-menu__contact-link[aria-disabled="true"] {
    border-color: var(--mobile-menu-contact-border-disabled);
    background-color: var(--mobile-menu-contact-bg);
    color: var(--mobile-menu-contact-text-disabled);
    cursor: not-allowed;
  }

  .mobile-menu__note {
    color: var(--mobile-menu-note-color);
    font-size: var(--mobile-menu-note-font-size);
  }
}