/* assets/css/components/nav.css
 * @layer components — .nav BEM block
 * ════════════════════════════════════════════════════════════════════
 *
 * Two-layer structure
 * ────────────────────
 * .nav-wrapper — full-width sticky chrome. Owns position, z-index,
 *                background, border, and container context.
 *                container-type: inline-size (named "nav") lives here
 *                so @container nav queries fire on the full bar width.
 *
 * .nav         — centered content rail inside the wrapper. Mirrors
 *                .container: max-inline-size + margin-inline: auto.
 *                Owns display flex, height, and inner padding only.
 *
 * Mobile pattern
 * ───────────────
 * JS toggles .nav--open on .nav-wrapper when the hamburger fires.
 * The dropdown positions absolute relative to .nav-wrapper (sticky,
 * so it is the containing block).
 *
 * Token sources: §19 --nav-item-*, §8 --header-*, §16 --z-*, §17 --focus-*
 * ════════════════════════════════════════════════════════════════════ */


@layer components {

  /* ════════════════════════════════════════════════════════════════════
     Wrapper — full-width sticky chrome + container context
     ════════════════════════════════════════════════════════════════════ */

  .nav-wrapper {
    container-type: inline-size;
    container-name: nav;
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    background-color: var(--body-bg);
    border-block-end: var(--divider);
  }


  /* ════════════════════════════════════════════════════════════════════
     Nav — centered content rail
     ════════════════════════════════════════════════════════════════════ */

  .nav {
    display: flex;
    align-items: center;
    block-size: var(--header-height);
    padding-block: var(--header-padding-block);
    padding-inline: var(--gutter);
    max-inline-size: var(--content-width);
    margin-inline: auto;
  }


  /* ════════════════════════════════════════════════════════════════════
     Nav list and items
     ════════════════════════════════════════════════════════════════════ */

  .nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav__item {
    display: flex;
    align-items: center;
  }

  .nav__link {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding-block: var(--nav-item-padding-block);
    padding-inline: var(--nav-item-padding-inline);
    font-family: var(--font-body);
    font-size: var(--text-m);
    font-weight: var(--weight-medium);
    color: var(--text-body);
    text-decoration: none;
    border-radius: var(--nav-item-radius);
    border-block-end: 2px solid transparent;
    transition:
      color            var(--duration-fast) var(--ease-default),
      background-color var(--duration-fast) var(--ease-default),
      border-color     var(--duration-fast) var(--ease-default);
  }

  .nav__link:hover {
    color: var(--nav-item-active-text);
    background-color: var(--nav-item-hover-bg);
  }

  .nav__link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* ── Active state — current page indicator ── */

  .nav__link--active,
  .nav__link[aria-current="page"] {
    color: var(--nav-item-active-text);
    background-color: var(--nav-item-active-bg);
    border-block-end: var(--nav-item-active-border);
    font-weight: var(--weight-semibold);
  }


  /* ════════════════════════════════════════════════════════════════════
     Mobile toggle button
     ════════════════════════════════════════════════════════════════════ */

  .nav__toggle {
    display: none;              /* visible only inside @container nav below */
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    padding: 0;
    margin-inline-start: auto;
    background-color: transparent;
    border: 2px solid transparent;
    border-radius: var(--nav-item-radius);
    color: var(--text-body);
    cursor: pointer;
    flex-shrink: 0;
    transition:
      color            var(--duration-fast) var(--ease-default),
      background-color var(--duration-fast) var(--ease-default);
  }

  .nav__toggle:hover {
    background-color: var(--nav-item-hover-bg);
    color: var(--nav-item-active-text);
  }

  .nav__toggle:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* Hamburger icon — three stacked lines */
  .nav__toggle-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.3125rem;
    inline-size: 1.25rem;
    pointer-events: none;
  }

  .nav__toggle-icon span {
    display: block;
    block-size: var(--line-medium);
    background-color: currentColor;
    border-radius: var(--radius-full);
    transform-origin: center;
    transition:
      transform var(--duration-normal) var(--ease-default),
      opacity   var(--duration-normal) var(--ease-default);
  }

  /* Animate hamburger → × when nav is open */
  .nav--open .nav__toggle-icon span:nth-child(1) {
    transform: translateY(0.4375rem) rotate(45deg);
  }

  .nav--open .nav__toggle-icon span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .nav--open .nav__toggle-icon span:nth-child(3) {
    transform: translateY(-0.4375rem) rotate(-45deg);
  }


  /* ════════════════════════════════════════════════════════════════════
     Container-query: mobile layout
     Fires when .nav-wrapper's rendered width falls below 48em.
     Dropdown positions absolute relative to .nav-wrapper (sticky
     element = containing block for absolute children).
     ════════════════════════════════════════════════════════════════════ */

  @container nav (width < 48em) {

    /* Show toggle, hide the inline list */
    .nav__toggle {
      display: flex;
    }

    .nav__list {
      /* Hidden by default on narrow nav */
      display: none;
      /* Positioned below the nav bar, full-width of .nav-wrapper */
      position: absolute;
      inset-block-start: var(--header-height);
      inset-inline: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: var(--space-s);
      background-color: var(--body-bg);
      border-block-end: var(--divider);
      box-shadow: var(--shadow-m);
      z-index: var(--z-dropdown);
    }

    /* Reveal list when nav is toggled open */
    .nav--open .nav__list {
      display: flex;
    }

    /* Full-width touch targets for mobile items */
    .nav__link {
      padding-block: var(--space-s);
      border-block-end: var(--divider);
      border-radius: 0;
    }

    /* Active link: left-edge accent instead of bottom border */
    .nav__link--active,
    .nav__link[aria-current="page"] {
      border-block-end: var(--divider);
      border-inline-start: var(--nav-item-active-border);
      padding-inline-start: calc(var(--nav-item-padding-inline) - 2px);
    }

  }

}

@layer components {

  /* Header */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    background-color: color-mix(in oklch, var(--body-bg) 96%, transparent);
    border-block-end: var(--divider);
    /* backdrop-filter removed from base — it creates a stacking context
       that breaks position:fixed on the mobile drawer (child element).
       Applied only on desktop via @media (min-width: 70em) below. */
    padding-inline: var(--gutter);
    box-shadow: var(--shadow-xs);
    transition:
      box-shadow var(--duration-normal) var(--ease-default),
      background-color var(--duration-normal) var(--ease-default);
  }

  .site-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    min-block-size: var(--header-height);
    padding-block: var(--space-xs);
  }

  .site-header__brand {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
  }

  .site-header__logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-main);
  }

  .site-header__logo {
    block-size: clamp(2rem, 1.85rem + 0.7vw, 2.5rem);
    inline-size: auto;
  }

  .site-header__logo-text {
    font-size: var(--text-l);
    font-weight: var(--weight-semibold);
    color: var(--text-main);
    letter-spacing: var(--tracking-tight);
  }

  .site-header__logo-dark {
    display: none;
  }

  .site-header__nav {
    display: flex;
    align-items: center;
  }

  /* ── Desktop: nav stays inside header ────────────────────────────────
     container-type removed from .site-header so position:fixed on the
     mobile drawer works without moving nav to body. On desktop the nav
     is simply a flex child of .site-header__inner. */
  @media (min-width: 70em) {
    /* Backdrop-filter safe on desktop — no position:fixed children */
    .site-header {
      backdrop-filter: saturate(180%) var(--backdrop-blur);
    }

    .site-header__nav {
      display: flex;
      align-items: center;
      flex: 1 1 auto;
      justify-content: center;
      /* Reset mobile drawer state */
      position: static;
      transform: none;
      visibility: visible;
      background: transparent;
      border-radius: 0;
      box-shadow: none;
      overflow: visible;
      inline-size: auto;
    }

    /* Hide drawer-only chrome on desktop */
    .site-header__nav .nav-drawer__header,
    .site-header__nav .nav-drawer__footer {
      display: none;
    }

    /* Unwrap the drawer body wrapper so menu renders flat */
    .site-header__nav .nav-drawer__body {
      display: contents;
    }
  }

  .site-header__menu {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-header__menu .menu-item {
    display: flex;
    align-items: center;
    position: relative;
  }

  /* Sub-menus hidden by default — mobile accordion and desktop dropdowns
     override this in their respective media queries. This prevents
     unstyled sub-menus from rendering if JS fails or between breakpoints. */
  .site-header__menu .sub-menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Mobile drawer: re-enable with flex + block-size: 0 accordion */
  @media (max-width: 69.99em) {
    .site-header__nav .site-header__menu .sub-menu {
      display: flex;
    }
  }

  .site-header__menu .menu-item > a,
  .site-header__menu .menu-item > .nav-item-row > a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding-block: var(--nav-item-padding-block);
    padding-inline: var(--nav-item-padding-inline);
    border-radius: var(--nav-item-radius);
    color: var(--text-body);
    text-decoration: none;
    font-size: var(--text-s);
    font-weight: var(--weight-medium);
    /* Box-shadow reserves the 2px bottom space without affecting layout */
    box-shadow: inset 0 -2px 0 transparent;
    transition:
      color            var(--duration-fast) var(--ease-default),
      background-color var(--duration-fast) var(--ease-default),
      box-shadow       var(--duration-fast) var(--ease-default);
  }

  .site-header__menu .menu-item > a:hover,
  .site-header__menu .menu-item > .nav-item-row > a:hover {
    color: var(--nav-item-active-text);
    background-color: var(--nav-item-hover-bg);
    box-shadow: inset 0 -2px 0 color-mix(in oklch, var(--card-accent) 35%, transparent);
  }

  /* Active / current-page indicator — strong primary bottom rail */
  .site-header__menu .current-menu-item > a,
  .site-header__menu .current-menu-item > .nav-item-row > a,
  .site-header__menu .current-menu-ancestor > a,
  .site-header__menu .current-menu-ancestor > .nav-item-row > a,
  .site-header__menu .menu-item > a[aria-current="page"],
  .site-header__menu .menu-item > .nav-item-row > a[aria-current="page"] {
    color: var(--nav-item-active-text);
    background-color: var(--nav-item-active-bg);
    font-weight: var(--weight-semibold);
    box-shadow: inset 0 -2px 0 var(--card-accent);
  }

  .site-header__menu .menu-item > a:focus-visible,
  .site-header__menu .menu-item > .nav-item-row > a:focus-visible,
  .site-header__logo-link:focus-visible,
  .site-header__cta:focus-visible,
  .site-header__toggle:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-inline-start: var(--space-xs);
    flex-shrink: 0;
  }

  .site-header__search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: none;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-round);
    color: var(--text-body);
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease-default),
      color var(--duration-fast) var(--ease-default);
  }

  .site-header__search-btn:hover {
    background-color: var(--surface-tinted);
    color: var(--text-link);
  }

  .site-header__cta {
    min-inline-size: max-content;
  }

  .site-header__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    border: var(--line-thin) solid var(--border-default);
    border-radius: var(--radius-s);
    background-color: var(--surface-raised);
    color: var(--text-main);
    padding-block: var(--space-2xs);
    padding-inline: var(--space-s);
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-none);
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease-default),
      border-color     var(--duration-fast) var(--ease-default),
      color            var(--duration-fast) var(--ease-default);
  }

  .site-header__toggle:hover {
    background-color: var(--surface-tinted);
    border-color: var(--border-strong);
  }

  .site-header__toggle-label {
    letter-spacing: var(--tracking-wide);
  }

  /* ════════════════════════════════════════════════════════════════════
     Hamburger icon — injected by header.php, animated on open
     ════════════════════════════════════════════════════════════════════ */

  .site-header__hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2xs);
    inline-size: 1.125rem;
    flex-shrink: 0;
    pointer-events: none;
  }

  .site-header__hamburger span {
    display: block;
    inline-size: 100%;
    block-size: 2px;
    background-color: currentColor;
    border-radius: 1px;
    transform-origin: center;
    transition:
      transform var(--duration-normal) var(--ease-default),
      opacity   var(--duration-normal) var(--ease-default);
  }

  /* Animate hamburger → × when the drawer is open */
  .site-header__toggle[aria-expanded="true"] .site-header__hamburger span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .site-header__toggle[aria-expanded="true"] .site-header__hamburger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .site-header__toggle[aria-expanded="true"] .site-header__hamburger span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }


  /* ════════════════════════════════════════════════════════════════════
     Off-canvas mobile drawer
     Fires on @media (max-width: 69.99em)
     ════════════════════════════════════════════════════════════════════ */

  @media (max-width: 69.99em) {

    /* Show toggle button, hide desktop CTA */
    .site-header__toggle {
      display: inline-flex;
      margin-inline-start: auto;
    }

    .site-header__actions {
      display: none;
    }

    /* Off-canvas drawer — lives on document.body (JS moves it there)
       so it escapes the header's container-type stacking context.
       position:fixed now correctly references the viewport. */
    .site-header__nav {
      position: fixed;
      inset-block: 0;
      inset-inline-end: 0;
      inline-size: min(24rem, 90vw);
      z-index: calc(var(--z-header) + 20);
      display: flex;
      flex-direction: column;
      background: var(--body-bg);
      border-radius: var(--radius-l) 0 0 var(--radius-l);
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      box-shadow: -4px 0 24px oklch(0% 0 0 / 18%);
      transform: translateX(110%);
      visibility: hidden;
      transition:
        transform    var(--duration-page) cubic-bezier(0.4, 0, 0.2, 1),
        visibility   0s   0.32s;
    }

    /* Open state */
    .site-header__nav.is-open {
      transform: translateX(0);
      visibility: visible;
      transition:
        transform    var(--duration-page) cubic-bezier(0.4, 0, 0.2, 1),
        visibility   0s   0s;
    }

    /* Main menu list inside drawer */
    .site-header__menu {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: 0;
    }

    /* Each menu item at L1 */
    .site-header__menu > .menu-item {
      display: block;
    }

    /* L1 links — reset desktop styles */
    .site-header__menu > .menu-item > a,
    .site-header__menu > .menu-item > .nav-item-row > a {
      flex: 1;
      display: flex;
      align-items: center;
      inline-size: 100%;
      min-block-size: 2.75rem;
      padding-block: var(--space-s);
      padding-inline: var(--space-m);
      font-size: var(--text-m);
      font-weight: var(--weight-semibold);
      color: var(--text-body);
      text-decoration: none;
      border-bottom: var(--divider);
      border-radius: 0;
      border-inline: none;
      box-shadow: none; /* clear desktop underline indicator */
      transition:
        color            var(--duration-fast) var(--ease-default),
        background-color var(--duration-fast) var(--ease-default);
    }

    .site-header__menu > .menu-item > a:hover,
    .site-header__menu > .menu-item > .nav-item-row > a:hover {
      color: var(--nav-item-active-text);
      background-color: var(--nav-item-hover-bg);
    }

    /* Active / current page — left-rail primary accent */
    .site-header__menu > .current-menu-item > a,
    .site-header__menu > .current-menu-item > .nav-item-row > a,
    .site-header__menu > .current-menu-ancestor > a,
    .site-header__menu > .current-menu-ancestor > .nav-item-row > a {
      color: var(--nav-item-active-text);
      font-weight: var(--weight-semibold);
      background-color: var(--nav-item-active-bg);
      border-inline-start: 3px solid var(--card-accent);
      padding-inline-start: calc(var(--space-m) - 3px);
    }

    /* Sub-menu links in mobile — covers both plain > a and JS-wrapped > .nav-item-row > a */
    .site-header__menu .sub-menu .menu-item > a,
    .site-header__menu .sub-menu .menu-item > .nav-item-row > a {
      flex: 1;
      display: flex;
      align-items: center;
      min-block-size: 2.75rem;
      padding-block: var(--space-xs);
      padding-inline: calc(var(--space-m) + var(--space-m));
      font-size: var(--text-s);
      font-weight: var(--weight-medium);
      color: var(--text-body);
      text-decoration: none;
      border-bottom: var(--divider);
      border-radius: 0;
      transition:
        color            var(--duration-fast) var(--ease-default),
        background-color var(--duration-fast) var(--ease-default);
    }

    .site-header__menu .sub-menu .menu-item > a:hover,
    .site-header__menu .sub-menu .menu-item > .nav-item-row > a:hover {
      color: var(--nav-item-active-text);
      background-color: var(--nav-item-hover-bg);
    }

    /* L3 items — deeper indent */
    .site-header__menu .sub-menu .sub-menu .menu-item > a,
    .site-header__menu .sub-menu .sub-menu .menu-item > .nav-item-row > a {
      padding-inline-start: calc(var(--space-m) + var(--space-m) + var(--space-m));
    }

    /* Sub-menus collapsed by default on mobile — JS drives height open/close */
    .site-header__menu .sub-menu {
      display: flex;
      flex-direction: column;
      background-color: var(--surface-tinted);
      border-inline-start: 3px solid color-mix(in oklch, var(--card-accent) 22%, transparent);
      list-style: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      /* block-size: 0 set by JS on init; transitions also driven by JS inline style */
      block-size: 0;
      transition: block-size var(--duration-normal) var(--ease-default);
    }
    /* NOTE: no .is-expanded { block-size: auto } rule — that would fire before
       JS sets the inline value, causing an instant jump with no animation. */
    /* NOTE: no .is-expanded { block-size: auto } rule — that would fire before
       JS sets the inline value, causing an instant jump with no animation. */

  }

  /* ════════════════════════════════════════════════════════════════════
     Drawer injected elements (JS-created, styled here)
     ════════════════════════════════════════════════════════════════════ */

  /* Sticky header bar inside the drawer */
  .nav-drawer__header {
    position: sticky;
    inset-block-start: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    padding: var(--space-s) var(--space-m);
    background: var(--body-bg);
    border-block-end: var(--divider);
    box-shadow: 0 2px 8px oklch(0% 0 0 / 5%);
    z-index: 1;
    flex-shrink: 0;
  }

  .nav-drawer__brand {
    font-size: var(--text-m);
    font-weight: var(--weight-semibold);
    color: var(--text-main);
  }

  /* Close (×) button inside the drawer */
  .nav-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    padding: 0;
    background-color: transparent;
    border: var(--line-thin) solid var(--border-default);
    border-radius: var(--radius-s);
    color: var(--text-body);
    font-size: var(--text-l);
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition:
      background-color var(--duration-fast) var(--ease-default),
      border-color     var(--duration-fast) var(--ease-default);
  }

  .nav-drawer__close:hover {
    background-color: var(--nav-item-hover-bg);
    border-color: var(--border-strong);
  }

  .nav-drawer__close:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* Scrollable body of the drawer containing the menu */
  .nav-drawer__body {
    flex: 1;
    overflow-y: auto;
    /* No padding — links own their spacing and extend edge-to-edge */
    padding: 0;
  }

  /* Footer strip inside the drawer with the CTA */
  .nav-drawer__footer {
    padding: var(--space-m);
    border-block-start: var(--divider);
    flex-shrink: 0;
  }

  .nav-drawer__footer .button,
  .nav-drawer__footer .btn {
    inline-size: 100%;
    justify-content: center;
  }

  /* ════════════════════════════════════════════════════════════════════
     Nav-item-row — wrapper div (JS-injected) around link + toggle btn
     ════════════════════════════════════════════════════════════════════ */

  .nav-item-row {
    display: flex;
    align-items: stretch;
    inline-size: 100%;
  }

  /* Sub-menu toggle chevron button (JS-injected, mobile only) */
  .sub-menu-toggle {
    display: none;              /* hidden on desktop */
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    inline-size: 3rem;
    min-block-size: 2.75rem;    /* match link min-block-size for consistent touch target */
    padding: 0;
    background-color: transparent;
    border: none;
    border-inline-start: var(--divider);
    border-radius: 0;
    color: var(--text-body);
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease-default),
      color            var(--duration-fast) var(--ease-default);
  }

  .sub-menu-toggle:hover {
    background-color: var(--nav-item-hover-bg);
    color: var(--nav-item-active-text);
  }

  .sub-menu-toggle:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* Chevron via ::after */
  .sub-menu-toggle::after {
    content: '';
    display: block;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-0.125rem);
    transition: transform var(--duration-fast) ease;
  }

  /* Rotated chevron + tinted background when expanded */
  .menu-item-has-children.is-expanded > .nav-item-row > .sub-menu-toggle {
    background-color: var(--nav-item-active-bg);
    color: var(--nav-item-active-text);
  }

  .menu-item-has-children.is-expanded > .nav-item-row > .sub-menu-toggle::after {
    transform: rotate(225deg) translateY(-0.125rem);
  }

  @media (max-width: 69.99em) {
    .sub-menu-toggle {
      display: flex;
    }
  }

  /* ════════════════════════════════════════════════════════════════════
     Backdrop — dimmed overlay behind the drawer
     ════════════════════════════════════════════════════════════════════ */

  .nav-backdrop {
    position: fixed;
    inset: 0;
    background-color: oklch(0% 0 0 / 45%); /* intentional: dark scrim, no token needed */
    z-index: calc(var(--z-header) + 19);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-page) cubic-bezier(0.4, 0, 0.2, 1);
  }

  .nav-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }


  /* ════════════════════════════════════════════════════════════════════
     FOOTER
     ════════════════════════════════════════════════════════════════════
     Layout: blush bar → [nav links ···|··· social icons]
             thin divider → copyright centred
  ════════════════════════════════════════════════════════════════════ */

  .site-footer {
    background-color: var(--neutral-ultra-dark, oklch(12% 0.005 260));
    color: color-mix(in oklch, var(--white) 50%, transparent);
    padding-inline: var(--gutter);
  }


  /* ── Main: brand / nav / contact ── */

  .site-footer__main {
    padding-block: var(--space-3xl) var(--space-xl);
    border-block-end: 1px solid color-mix(in oklch, var(--white) 6%, transparent);
  }

  .site-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: var(--space-xl);
  }

  /* ── Brand column ── */

  .site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }

  .site-footer__logo-link {
    display: inline-flex;
    text-decoration: none;
  }

  .site-footer__logo-link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-xs);
  }

  .site-footer__logo {
    display: block;
    max-inline-size: 8rem;
    block-size: auto;
  }

  .site-footer__logo-text {
    font-family: var(--font-heading);
    font-size: var(--heading-xs);
    font-weight: var(--weight-bold);
    color: var(--white);
  }

  .site-footer__tagline {
    margin: 0;
    font-size: var(--text-s);
    line-height: var(--leading-relaxed);
    color: color-mix(in oklch, var(--white) 40%, transparent);
    max-inline-size: 16rem;
  }

  /* ── Vertical nav (in main grid) ── */

  .site-footer__menu--vertical {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-footer__menu--vertical > li + li::before {
    display: none;
  }

  .site-footer__menu--vertical a {
    font-size: var(--text-s);
    font-weight: var(--weight-medium);
    color: var(--text-body);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-default);
  }

  .site-footer__menu--vertical a:hover {
    color: var(--text-link-hover);
  }

  .site-footer__menu--vertical a:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-xs);
  }

  /* ── Contact column ── */

  .site-footer__contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .site-footer__contact-label {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-accent);
  }

  .site-footer__address {
    margin: 0;
    font-style: normal;
    font-size: var(--text-s);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
  }

  .site-footer__phone,
  .site-footer__email {
    margin: 0;
    font-size: var(--text-s);
  }

  .site-footer__phone a,
  .site-footer__email a {
    color: var(--text-body);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-default);
  }

  .site-footer__phone a:hover,
  .site-footer__email a:hover {
    color: var(--text-link-hover);
  }

  .site-footer__phone a:focus-visible,
  .site-footer__email a:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-xs);
  }


  /* ── Footer column titles + links (5-col V3 layout) ── */

  .site-footer__col-title {
    font-family: var(--font-body);
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--white) 30%, transparent);
    margin: 0 0 var(--space-m) 0;
    line-height: 1;
  }

  .site-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
  }

  .site-footer__links a {
    font-size: var(--text-s);
    font-weight: var(--weight-light, 300);
    color: color-mix(in oklch, var(--white) 50%, transparent);
    text-decoration: none;
    padding-block: var(--space-3xs);
    transition: color var(--duration-fast) var(--ease-default);
  }

  .site-footer__links a:hover {
    color: color-mix(in oklch, var(--white) 85%, transparent);
  }

  .site-footer__contact-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .site-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xs);
    font-size: var(--text-s);
    font-weight: var(--weight-light, 300);
    line-height: var(--leading-relaxed);
    color: color-mix(in oklch, var(--white) 50%, transparent);
  }

  .site-footer__contact-item svg {
    flex-shrink: 0;
    margin-block-start: 0.2em;
    stroke: var(--text-accent);
  }

  .site-footer__contact-item a {
    color: color-mix(in oklch, var(--white) 50%, transparent);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-default);
  }

  .site-footer__contact-item a:hover {
    color: color-mix(in oklch, var(--white) 85%, transparent);
  }

  .site-footer__social-row {
    display: flex;
    gap: var(--space-xs);
    margin-block-start: var(--space-m);
  }

  /* ── Responsive: footer grid collapses ── */
  @media (max-width: 64em) {
    .site-footer__grid {
      grid-template-columns: 1.5fr 1fr 1fr;
      row-gap: var(--space-xl);
    }
  }

  @media (max-width: 48em) {
    .site-footer__grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (max-width: 30em) {
    .site-footer__grid {
      grid-template-columns: 1fr;
    }
  }


  /* ── Accreditations strip ── */

  .site-footer__accreditations {
    padding-block: var(--space-l);
    border-block-end: 1px solid var(--border-secondary);
  }

  .site-footer__accreditations-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-l) var(--space-xl);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-footer__accreditations-item img {
    display: block;
    max-block-size: 2.5rem;
    max-inline-size: 7rem;
    inline-size: auto;
    object-fit: contain;
    filter: grayscale(1) opacity(0.45);
    transition: filter var(--duration-normal) var(--ease-default);
  }

  .site-footer__accreditations-item:hover img {
    filter: grayscale(0) opacity(1);
  }


  /* ── Nav + social row ── */
  .site-footer__bar {
    padding-block: var(--space-m) var(--space-s);
    border-block-end: 1px solid color-mix(in oklch, var(--white) 6%, transparent);
  }

  .site-footer__bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-l);
    flex-wrap: wrap;
  }

  /* Horizontal menu */
  .site-footer__menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-footer__menu > li {
    display: flex;
    align-items: center;
  }

  /* Pipe separators via CSS — no extra markup */
  .site-footer__menu > li + li::before {
    content: '|';
    padding-inline: var(--space-xs);
    color: color-mix(in oklch, var(--white) 15%, transparent);
    pointer-events: none;
    aria-hidden: true;
  }

  .site-footer__menu a {
    font-size: var(--text-s);
    font-weight: var(--weight-medium);
    color: color-mix(in oklch, var(--white) 50%, transparent);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease-default);
  }

  .site-footer__menu a:hover {
    color: color-mix(in oklch, var(--white) 85%, transparent);
    text-decoration: none;
  }

  .site-footer__menu a:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-xs);
  }

  /* Social icon list */
  .site-footer__social {
    display: flex;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
  }

  .site-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.125rem;
    block-size: 2.125rem;
    border-radius: var(--radius-s);
    background-color: color-mix(in oklch, var(--white) 6%, transparent);
    color: color-mix(in oklch, var(--white) 50%, transparent);
    text-decoration: none;
    transition:
      background-color var(--duration-fast) var(--ease-default),
      color            var(--duration-fast) var(--ease-default),
      transform        var(--duration-instant) var(--ease-default);
  }

  .site-footer__social-link:hover {
    transform: translateY(-1px);
  }

  .site-footer__social-link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* Per-brand hover colours */
  .site-footer__social-link--facebook:hover  { background-color: oklch(42% 0.155 264); color: var(--text-on-dark); }
  .site-footer__social-link--youtube:hover   { background-color: oklch(50% 0.215 28);  color: var(--text-on-dark); }
  .site-footer__social-link--linkedin:hover  { background-color: oklch(42% 0.130 245); color: var(--text-on-dark); }

  /* ── Copyright bar ── */
  .site-footer__bottom {
    padding-block: var(--space-s);
  }

  .site-footer__copyright {
    margin: 0;
    font-size: var(--text-xs);
    color: color-mix(in oklch, var(--white) 25%, transparent);
    text-align: center;
  }

  @media (max-width: 42em) {
    .site-footer__bar-inner {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-m);
    }

    .site-footer__social {
      align-self: flex-start;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-header__menu .menu-item > a,
    .site-footer__menu a,
    .site-footer__social-link,
    .site-header__toggle,
    .site-header__nav,
    .nav-backdrop,
    .sub-menu-toggle,
    .sub-menu-toggle::after,
    .site-header__hamburger span,
    .site-header__menu .sub-menu,
    body.home .site-header {
      transition: none;
    }
  }

}

/* ════════════════════════════════════════════════════════════════════
   SIMPLE DROPDOWN — Desktop only (≥ 70em)
   ════════════════════════════════════════════════════════════════════
   Clean single-level dropdown for menu items with children.
   No mega menu, no L3 panels. Just parent hover → dropdown list.
   Uses @media (not @container) because nav is moved to body by JS.
   ════════════════════════════════════════════════════════════════════ */

@layer components {

  @media (min-width: 70em) {

    /* ── Hide mobile-only elements on desktop ── */
    .sub-menu-toggle {
      display: none;
    }

    .nav-item-row {
      display: contents;
    }

    .nav-drawer__header,
    .nav-drawer__footer {
      display: none;
    }

    .nav-drawer__body {
      display: contents;
    }

    /* ── Chevron on parent links ── */
    .site-header__menu .menu-item-has-children > a::after {
      content: '';
      display: inline-block;
      flex-shrink: 0;
      inline-size: 0.4rem;
      block-size: 0.4rem;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: rotate(45deg) translateY(-0.125rem);
      opacity: 0.55;
      margin-inline-start: 0.25rem;
      transition:
        transform var(--duration-fast) var(--ease-default),
        opacity   var(--duration-fast) var(--ease-default);
    }

    /* Chevron rotates up when open */
    .site-header__menu > .menu-item-has-children:hover > a::after,
    .site-header__menu > .menu-item-has-children:focus-within > a::after {
      transform: rotate(-135deg) translateY(-0.125rem);
      opacity: 0.9;
    }

    /* ── Parent item — position context ── */
    .site-header__menu > .menu-item-has-children {
      position: relative;
    }

    /* ── Dropdown panel ── */
    .site-header__menu > .menu-item-has-children > .sub-menu {
      display: block;
      position: absolute;
      inset-block-start: 100%;
      inset-inline-start: 0;
      z-index: var(--z-dropdown, 100);
      list-style: none;
      margin: 0;
      padding: var(--space-2xs) 0;
      min-inline-size: 14rem;
      background-color: var(--body-bg);
      border: 1px solid var(--border-default);
      border-block-start: var(--card-accent-strip);
      border-radius: 0 0 var(--radius-xs) var(--radius-xs);
      box-shadow: 0 8px 24px oklch(0% 0 0 / 10%);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
        opacity    150ms ease,
        visibility 0s    150ms;
    }

    /* Reveal on hover / focus-within */
    .site-header__menu > .menu-item-has-children:hover > .sub-menu,
    .site-header__menu > .menu-item-has-children:focus-within > .sub-menu {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition:
        opacity    150ms ease,
        visibility 0s    0s;
    }

    /* ── Dropdown item links ── */
    .site-header__menu > .menu-item-has-children > .sub-menu > .menu-item > a {
      display: block;
      padding: 0.6rem var(--space-m);
      font-size: var(--text-s);
      font-weight: var(--weight-medium);
      color: var(--text-body);
      text-decoration: none;
      white-space: nowrap;
      transition:
        color            var(--duration-fast) var(--ease-default),
        background-color var(--duration-fast) var(--ease-default);
    }

    .site-header__menu > .menu-item-has-children > .sub-menu > .menu-item > a:hover {
      color: var(--text-link-hover);
      background-color: var(--surface-tinted);
    }

    /* ── L2 parent items — position context for flyout ── */
    .site-header__menu .sub-menu > .menu-item-has-children {
      position: relative;
    }

    /* ── L2 flyout sub-menu ── */
    .site-header__menu .sub-menu .sub-menu {
      display: block;
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 100%;
      z-index: var(--z-dropdown, 100);
      list-style: none;
      margin: 0;
      padding: var(--space-2xs) 0;
      min-inline-size: 14rem;
      background-color: var(--body-bg);
      border: 1px solid var(--border-default);
      border-block-start: 3px solid color-mix(in oklch, var(--card-accent) 50%, transparent);
      border-radius: 0 0 var(--radius-xs) var(--radius-xs);
      box-shadow: 0 8px 24px oklch(0% 0 0 / 10%);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
        opacity    150ms ease,
        visibility 0s    150ms;
    }

    /* Reveal flyout on hover / focus */
    .site-header__menu .sub-menu > .menu-item-has-children:hover > .sub-menu,
    .site-header__menu .sub-menu > .menu-item-has-children:focus-within > .sub-menu {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition:
        opacity    150ms ease,
        visibility 0s    0s;
    }

    /* Flyout item links */
    .site-header__menu .sub-menu .sub-menu > .menu-item > a {
      display: block;
      padding: 0.5rem var(--space-m);
      font-size: var(--text-s);
      color: var(--text-body);
      text-decoration: none;
      white-space: nowrap;
      transition:
        color            var(--duration-fast) var(--ease-default),
        background-color var(--duration-fast) var(--ease-default);
    }

    .site-header__menu .sub-menu .sub-menu > .menu-item > a:hover {
      color: var(--text-link-hover);
      background-color: var(--surface-tinted);
    }

    /* Chevron on L2 items that have children — points right */
    .site-header__menu .sub-menu > .menu-item-has-children > a::after {
      content: '';
      display: inline-block;
      flex-shrink: 0;
      inline-size: 0.35rem;
      block-size: 0.35rem;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: rotate(-45deg);
      opacity: 0.5;
      margin-inline-start: auto;
      padding-inline-start: var(--space-s);
    }

    /* Hide L4+ (anything deeper than flyout) */
    .site-header__menu .sub-menu .sub-menu .sub-menu {
      display: none;
    }

    /* ── Focus ring ── */
    .site-header__menu .sub-menu a:focus-visible {
      outline: var(--focus-ring);
      outline-offset: -2px;
      border-radius: var(--radius-xs);
    }

  } /* end @media (min-width: 70em) */

  @media (prefers-reduced-motion: reduce) {
    .site-header__menu > .menu-item-has-children > .sub-menu,
    .site-header__menu .menu-item-has-children > a::after {
      transition: none;
    }
  }


  /* ════════════════════════════════════════════════════════════════════
     HOMEPAGE TRANSPARENT HEADER
     Overrides sticky solid header when user is at the very top of the
     front page. JS adds .is-scrolled once scroll > 60px.
     ════════════════════════════════════════════════════════════════════ */

  body.home .site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    background-color: transparent;
    border-block-end-color: transparent;
    backdrop-filter: none;
    box-shadow: none;
    /* Smooth transition to solid on scroll */
    transition:
      background-color var(--duration-page) ease,
      border-color     var(--duration-page) ease,
      backdrop-filter  var(--duration-page) ease,
      box-shadow       var(--duration-page) ease;
  }

  body.home .site-header.is-scrolled {
    background-color: color-mix(in oklch, var(--body-bg) 96%, transparent);
    border-block-end: var(--divider);
    backdrop-filter: saturate(180%) var(--backdrop-blur);
    box-shadow: var(--shadow-s);
  }


  /* White nav links over the dark hero — desktop only.
     On mobile these links are inside the white-background drawer, so default
     text colours apply. Logo, toggle, and CTA remain white on all widths. */
  @media (min-width: 70em) {

    body.home .site-header:not(.is-scrolled) .site-header__menu > .menu-item > a,
    body.home .site-header:not(.is-scrolled) .site-header__menu > .menu-item > .nav-item-row > a {
      color: var(--text-on-dark-muted);
    }

    body.home .site-header:not(.is-scrolled) .site-header__menu > .menu-item > a:hover,
    body.home .site-header:not(.is-scrolled) .site-header__menu > .menu-item > .nav-item-row > a:hover,
    body.home .site-header:not(.is-scrolled) .site-header__menu > .current-menu-item > a,
    body.home .site-header:not(.is-scrolled) .site-header__menu > .current-menu-item > .nav-item-row > a,
    body.home .site-header:not(.is-scrolled) .site-header__menu > .current-menu-ancestor > a,
    body.home .site-header:not(.is-scrolled) .site-header__menu > .current-menu-ancestor > .nav-item-row > a {
      color: var(--text-on-dark);
      background-color: var(--overlay-subtle);
      border-color: transparent;
    }

  }

  /* White logo / text logo over hero */
  body.home .site-header:not(.is-scrolled) .site-header__logo {
    filter: brightness(0) invert(1);
  }

  body.home .site-header:not(.is-scrolled) .site-header__logo-text {
    color: var(--text-on-dark);
  }

  /* Search icon white over hero */
  body.home .site-header:not(.is-scrolled) .site-header__search-btn {
    color: var(--text-on-dark);
  }

  body.home .site-header:not(.is-scrolled) .site-header__search-btn:hover {
    color: var(--text-on-dark);
    background-color: var(--overlay-glass-subtle);
  }

  /* CTA button over hero — keep secondary (blush) visible on dark */
  body.home .site-header:not(.is-scrolled) .site-header__cta {
    background-color: var(--secondary);
    color: var(--btn-secondary-text);
    border: none;
  }

  body.home .site-header:not(.is-scrolled) .site-header__cta:hover {
    background-color: var(--btn-secondary-bg-hover);
  }

  /* Mobile toggle — white border over hero */
  body.home .site-header:not(.is-scrolled) .site-header__toggle {
    background-color: transparent;
    border-color: var(--text-on-dark-subtle);
    color: var(--text-on-dark);
  }

}