/* =====================================================================
   OSE · Nav bar (sticky site header)
   ---------------------------------------------------------------------
   The page header: OSE mark, the four page links, the "Đăng ký tư vấn"
   CTA and, below 64em, the mobile-menu toggle. Glass bar with a blur;
   once the page scrolls a hairline appears (no shadow: elevation is kept
   for dropdowns, the modal and toasts). Links in the UI family.

   Markup
     <header class="nav" data-js="nav">
       <div class="nav__inner">
         <a class="nav__brand" href="/">
           <img class="nav__logo" src="/brand/logo/OSE_mark_navy.svg"
                alt="OSE – Outer Space Education" width="994" height="429">
         </a>
         <nav class="nav__menu" aria-label="Điều hướng chính">
           <ul class="nav__links" role="list">
             <li><a class="nav__link" href="/khoa-hoc/">Khoá học</a></li>
             <li><a class="nav__link" href="/gioi-thieu/" aria-current="page">Giới thiệu</a></li>
             <li><a class="nav__link" href="/blog/">Blog</a></li>
             <li><a class="nav__link" href="/lien-he/">Liên hệ</a></li>
           </ul>
         </nav>
         <div class="nav__actions">
           <a class="btn btn--primary btn--sm nav__cta" href="/lien-he/">Đăng ký tư vấn</a>
           <button class="mobile-menu__toggle" type="button" aria-expanded="false"
                   aria-controls="site-menu"><span class="visually-hidden">Mở menu</span></button>
         </div>
       </div>
     </header>
     <div class="mobile-menu" id="site-menu" data-js="mobile-menu" hidden>…</div>
   The mobile menu is a SIBLING of the header, never inside it: the nav's
   backdrop-filter would become the containing block of its position: fixed.
   The toggle is styled by mobile-menu.css (it uses --mobile-menu-toggle-*).

   Variants
     .nav--overlay   over a navy hero: add data-surface="navy" and use
                     OSE_mark_cream.svg. Transparent until scrolled (only when
                     JS runs; without JS it stays a navy glass bar so it is
                     never unreadable). Pulls the next element up under itself
                     by --nav-height: give the hero top padding >= --nav-height.
     .nav--compact   the phone layout at every width (previews, narrow frames);
                     pair it with .mobile-menu__toggle--always.
   States
     .nav--scrolled                  hairline (overlay: glass bg)
     .nav__link :hover               lilac underline grows in
     .nav__link :focus-visible       focus ring
     .nav__link :active              muted text
     .nav__link [aria-current=page]  solid indicator in the text colour
   Layout
     < 64em  logo + toggle; the links live in the mobile menu. Without JS
             (no .js class on <html>) there is no toggle and the links become
             a scrollable row under the logo. CTA shown from 48em.
     >= 64em logo · links · CTA in one row.
   JS        data-js="nav" → js/components/nav.js toggles .nav--scrolled
             (IntersectionObserver on a zero-size sentinel placed before it).
   ===================================================================== */

@layer components {
  .nav {
    --_bg: var(--nav-bg);
    --_border: var(--nav-border-rest);
    position: sticky;
    inset-block-start: var(--nav-sticky-offset);
    z-index: var(--nav-z);
    border-block-end: var(--nav-border-width) solid var(--_border);
    background-color: var(--_bg);
    color: var(--nav-text);
    -webkit-backdrop-filter: blur(var(--nav-blur));
    backdrop-filter: blur(var(--nav-blur));
    transition:
      background-color var(--nav-duration) var(--nav-ease),
      border-color var(--nav-duration) var(--nav-ease);
  }

  .nav--scrolled {
    --_border: var(--nav-border);
  }

  /* Overlay: sits on top of the hero that follows it. */
  .nav--overlay {
    margin-block-end: calc(var(--nav-height) * -1);
  }

  .js .nav--overlay:not(.nav--scrolled) {
    --_bg: var(--nav-bg-overlay);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Zero-size scroll sentinel inserted by nav.js just before the bar. */
  .nav__sentinel {
    position: absolute;
    inline-size: 0;
    block-size: 0;
    pointer-events: none;
  }

  /* Phone first: row 1 = logo + actions, row 2 = links (no-JS fallback). */
  .nav__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(var(--nav-height), auto);
    grid-template-areas:
      "brand actions"
      "menu menu";
    align-items: center;
    column-gap: var(--nav-gap);
    inline-size: min(var(--nav-max-width), 100% - var(--nav-padding-inline) - var(--nav-padding-inline));
    margin-inline: auto;
  }

  .nav__brand {
    grid-area: brand;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-block-size: var(--nav-link-min-height);
    border-radius: var(--nav-link-radius);
  }

  .nav__brand:focus-visible {
    box-shadow: var(--nav-focus-ring);
  }

  .nav__logo {
    inline-size: auto;
    block-size: var(--nav-logo-height);
  }

  .nav__menu {
    grid-area: menu;
    min-inline-size: 0;
    padding: var(--nav-menu-padding);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  /* With JS the phone links move into the mobile menu. */
  .js .nav__menu {
    display: none;
  }

  .nav__links {
    display: flex;
    align-items: center;
    gap: var(--nav-link-gap-sm);
    padding: 0;
    list-style: none;
  }

  .nav__actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: var(--nav-actions-gap);
  }

  /* Phones get the CTA from the contact bar and the mobile menu. */
  .nav--compact .nav__cta {
    display: none;
  }

  @media (width < 48em) {
    .nav .nav__cta {
      display: none;
    }
  }

  /* ---- Links -------------------------------------------------------- */
  .nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--nav-link-min-height);
    min-inline-size: var(--nav-link-min-width);
    padding-inline: var(--nav-link-padding-inline);
    border-radius: var(--nav-link-radius);
    color: var(--nav-link-text);
    font-family: var(--nav-link-font-family);
    font-size: var(--nav-link-font-size);
    font-weight: var(--nav-link-font-weight);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--nav-duration) var(--nav-ease);
  }

  .nav__link::after {
    content: "";
    position: absolute;
    inset-inline: var(--nav-link-padding-inline);
    inset-block-end: var(--nav-link-indicator-inset);
    block-size: var(--nav-link-indicator-height);
    border-radius: var(--nav-link-indicator-radius);
    background: var(--nav-link-underline-hover);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--nav-duration) var(--nav-ease);
    forced-color-adjust: none;
  }

  @media (hover: hover) {
    .nav__link:hover {
      color: var(--nav-link-text-hover);
    }

    .nav__link:hover::after {
      transform: none;
    }
  }

  .nav__link:focus-visible {
    box-shadow: var(--nav-focus-ring);
  }

  .nav__link:active {
    color: var(--nav-link-text-active);
  }

  .nav__link[aria-current="page"]::after {
    background: var(--nav-link-indicator-current);
    transform: none;
  }

  /* ---- Desktop: one row --------------------------------------------- */
  @media (min-width: 64em) {
    .nav:not(.nav--compact) .nav__inner {
      /* max-content floor: if space ever runs out the row overflows at the
         end instead of sliding the links under the logo. */
      grid-template-columns: auto minmax(max-content, 1fr) auto;
      grid-template-areas: "brand menu actions";
    }

    .nav:not(.nav--compact) .nav__menu {
      display: block;
      justify-self: end;
      padding: 0;
      overflow: visible;
    }

    .nav:not(.nav--compact) .nav__links {
      gap: var(--nav-link-gap);
    }
  }
}