/* ============ Wadicos · Header component ============ *
 * All CSS that styles the global site header lives here:
 * the .header sticky wrapper, the wordmark, the desktop +
 * mobile navigation, the language switcher, the mobile
 * drawer with its extras section, and the home-page
 * wordmark scale override.
 *
 * Generic widgets the header uses (.icon-button,
 * .theme-toggle) stay in _shared.css.
 *
 * Per-viewport overrides live inline as @media queries on
 * each rule. The mobile drawer (max-width: 47.99em) is a
 * fixed overlay offset below the live header height; the
 * offset value is supplied by header.js via the
 * --header-height custom property (kept in sync via a
 * ResizeObserver) so the drawer never overlaps the
 * wordmark on the home page (where the wordmark scales up).
 *
 * Layer assignments mirror _shared.css:
 *   @layer components → resting rules
 *   @layer overrides  → home-only wordmark lift
 * ===================================================== */

@layer components {

  /* ---- Mount + sticky wrapper -------------------- *
   * The runtime mount point (<div data-partial="header">)
   * is replaced byte-for-byte by the partial's child
   * nodes via partial-loader's mount.replaceWith(), so
   * the post-injection DOM is identical to the legacy
   * inline form. */
  .header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    padding-block: var(--space-4);
    background-color: transparent;
    transition:
      background-color var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out),
      backdrop-filter var(--dur-base) var(--ease-out);
  }
  .header.is-stuck {
    background-color: var(--color-header-stuck);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-card);
  }
  /* Drop the backdrop blur while the mobile drawer is open.
     A non-'none' backdrop-filter establishes a containing block
     for fixed-positioned descendants, which would trap the
     drawer inside the header's bounding box (≈80 px tall) instead
     of letting it span the viewport. The drawer's solid background
     hides the blur target anyway, so removing it is invisible to
     the user but unlocks true viewport coverage. */
  .header:has(.header__nav.is-open) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* iOS-safe button reset, scoped to the header so it
     doesn't leak. Removes the default rounded-grey UA style
     and the grey tap-flash that breaks the premium feel. */
  .header button {
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* ---- Inner grid -------------------------------- */
  .header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-5);
  }
  @media (max-width: 47.99em) {
    .header__inner { gap: var(--space-3); }
  }

  /* ---- Wordmark ---------------------------------- */
  .header__logo {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 600;
    letter-spacing: var(--tracking-section);
    text-transform: uppercase;
    color: var(--color-ink);
  }

  /* ---- Primary nav (desktop) --------------------- */
  .header__nav { justify-self: center; }
  .header__nav-list {
    display: flex;
    gap: var(--space-6);
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .header__nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--color-ink-soft);
    padding-block: var(--space-2);
    position: relative;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .header__nav-icon { flex: none; }
  @media (hover: hover) {
    .header__nav-link:hover { color: var(--color-ink); }
  }
  .header__nav-link--current { color: var(--color-ink); }
  .header__nav-link--current .header__nav-text {
    text-decoration: underline;
    text-decoration-color: var(--color-red);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }

  /* Mobile-only extras (theme + lang) — invisible on desktop */
  .header__nav-extras { display: none; }

  /* ---- Primary nav (MOBILE drawer) --------------- *
   * Fixed overlay that begins below the header. The top
   * offset reads from --header-height which header.js
   * keeps in sync with the live element rect — that means
   * a tall home-page wordmark won't sit under the drawer.
   *
   * The drawer is always in the DOM (no display:none) so
   * it can animate in and out cleanly. While closed it is
   * visibility:hidden + opacity:0 + pointer-events:none,
   * which keeps it off the accessibility tree AND out of
   * the tab order. */
  @media (max-width: 47.99em) {
    .header__nav {
      position: fixed;
      inset-block-start: var(--header-height, 4.5rem);
      inset-block-end: 0;
      inset-inline-start: 0;
      inset-inline-end: 0;
      inline-size: 100vw;
      max-inline-size: 100vw;
      background-color: var(--color-bg);
      padding-block: var(--space-7);
      padding-inline: var(--gutter);
      overflow-y: auto;
      overscroll-behavior: contain;
      z-index: var(--z-overlay);

      opacity: 0;
      visibility: hidden;
      transform: translateY(-0.5rem);
      pointer-events: none;
      transition:
        opacity var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out),
        visibility 0s linear var(--dur-base);
    }
    .header__nav.is-open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
      transition-delay: 0s;
    }

    .header__nav-list {
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-2);
    }
    .header__nav-list > li {
      opacity: 0;
      transform: translateY(0.5rem);
      transition:
        opacity var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
    }
    .header__nav.is-open .header__nav-list > li {
      opacity: 1;
      transform: translateY(0);
    }
    .header__nav.is-open .header__nav-list > li:nth-child(1) { transition-delay:  80ms; }
    .header__nav.is-open .header__nav-list > li:nth-child(2) { transition-delay: 120ms; }
    .header__nav.is-open .header__nav-list > li:nth-child(3) { transition-delay: 160ms; }
    .header__nav.is-open .header__nav-list > li:nth-child(4) { transition-delay: 200ms; }
    .header__nav.is-open .header__nav-list > li:nth-child(5) { transition-delay: 240ms; }

    .header__nav-link {
      font-size: clamp(1.375rem, 1.125rem + 1.2vw, 1.75rem);
      font-family: var(--font-display);
      font-weight: 500;
      gap: var(--space-3);
      padding-block: var(--space-3);
      letter-spacing: -0.01em;
    }
    .header__nav-icon {
      inline-size: 1.5rem;
      block-size: 1.5rem;
      color: var(--color-ink-muted);
    }
    .header__nav-link--current .header__nav-icon { color: var(--color-red); }
    .header__nav-link--current .header__nav-text {
      text-underline-offset: 8px;
    }

    /* Extras section: theme + flag tiles inside the open drawer */
    .header__nav-extras {
      display: block;
      margin-block-start: var(--space-7);
      padding-block-start: var(--space-6);
      border-block-start: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);

      opacity: 0;
      transform: translateY(0.5rem);
      transition:
        opacity var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
      transition-delay: 0ms;
    }
    .header__nav.is-open .header__nav-extras {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 280ms;
    }

    .header__nav-section { margin-block-end: var(--space-6); }
    .header__nav-section:last-child { margin-block-end: 0; }
    .header__nav-section-title {
      font-family: var(--font-body);
      font-size: var(--fs-eyebrow);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: var(--tracking-eyebrow);
      color: var(--color-ink-muted);
      margin: 0 0 var(--space-3);
    }

    .header__lang-tiles {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-3);
    }
    .header__lang-tile {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-3) var(--space-4);
      min-block-size: 56px;
      border: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent);
      border-radius: var(--radius-md);
      color: var(--color-ink-soft);
      transition:
        background-color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out);
    }
    @media (hover: hover) {
      .header__lang-tile:hover {
        border-color: color-mix(in srgb, var(--color-ink) 28%, transparent);
        color: var(--color-ink);
      }
    }
    .header__lang-tile:focus-visible {
      outline: 2px solid var(--color-red);
      outline-offset: 2px;
    }
    .header__lang-tile[aria-current="page"] {
      background-color: color-mix(in srgb, var(--color-red) 10%, transparent);
      border-color: color-mix(in srgb, var(--color-red) 60%, transparent);
      color: var(--color-ink);
    }
    .header__lang-tile-flag {
      inline-size: 2rem;
      block-size: 1.333rem;
      flex: none;
      border-radius: 2px;
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 20%, transparent);
    }
    .header__lang-tile-name {
      font-size: var(--fs-small);
      font-weight: 500;
    }

    /* Hide the desktop lang dropdown in the actions row on mobile
       — it lives inside the drawer extras section instead. The
       theme-toggle stays visible in the actions row at every
       viewport so the user can flip dark/light without opening
       the drawer; theme.js syncs aria-checked across every
       [data-theme-toggle] so the drawer's duplicate stays in
       lockstep automatically. */
    .header__actions > .lang-switch {
      display: none;
    }
  }

  /* prefers-reduced-motion: skip the slide/fade so users who
     prefer reduced animation get an instant drawer open/close.
     Visibility still flips so focus management works. */
  @media (prefers-reduced-motion: reduce) {
    .header__nav,
    .header__nav-list > li,
    .header__nav-extras {
      transition-duration: 0.01ms !important;
      transition-delay: 0s !important;
      transform: none !important;
    }
  }

  /* ---- Actions row ------------------------------- */
  .header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  @media (max-width: 47.99em) {
    .header__actions { gap: var(--space-2); }
  }

  /* ---- Hamburger button icon morph -------------- *
   * Two SVGs stacked in the same button; CSS swaps which
   * one is visible based on aria-expanded so the icon
   * communicates the menu state without any JS.   */
  .icon-button--menu__icon { display: inline-flex; }
  .icon-button--menu .icon-button--menu__icon--close { display: none; }
  .icon-button--menu[aria-expanded="true"] .icon-button--menu__icon--open { display: none; }
  .icon-button--menu[aria-expanded="true"] .icon-button--menu__icon--close { display: inline-flex; }
  /* Subtle accent when the drawer is open so the button reads
     as "active" even when its surrounding chrome is muted. */
  .icon-button--menu[aria-expanded="true"] {
    border-color: var(--color-red);
    color: var(--color-red);
  }

  /* ---- Language switcher (desktop dropdown) ------ *
   * Visible only at >=48em. Pill toggle with a globe-style
   * icon (bi-translate) and a chevron that flips when the
   * menu is open. The menu floats over the page below the
   * toggle, anchored to its right edge so it never spills
   * past the viewport's inline-end. */
  .lang-switch {
    position: relative;
    display: inline-flex;
  }
  .lang-switch__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-block-size: 44px;
    min-inline-size: 44px;
    padding-inline: var(--space-2);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    color: var(--color-ink-muted);
    transition:
      color var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out);
  }
  .lang-switch__toggle:hover,
  .lang-switch__toggle:focus-visible {
    color: var(--color-ink);
    background-color: color-mix(in srgb, var(--color-ink) 6%, transparent);
    border-color: color-mix(in srgb, var(--color-ink) 14%, transparent);
    outline: none;
  }
  .lang-switch__toggle[aria-expanded="true"] {
    color: var(--color-ink);
    background-color: color-mix(in srgb, var(--color-ink) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-ink) 18%, transparent);
  }
  .lang-switch__chevron {
    display: inline-flex;
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .lang-switch__chevron svg {
    inline-size: 0.625rem;
    block-size: 0.625rem;
  }
  .lang-switch__toggle[aria-expanded="true"] .lang-switch__chevron {
    transform: rotate(180deg);
  }
  .lang-switch__menu {
    position: absolute;
    inset-block-start: calc(100% + var(--space-1));
    inset-inline-end: 0;
    z-index: 50;
    min-inline-size: 12rem;
    list-style: none;
    margin: 0;
    padding: var(--space-1);
    background-color: var(--color-bg-surface);
    border: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lifted);
  }
  .lang-switch__menu[hidden] { display: none; }
  .lang-switch__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    color: var(--color-ink-soft);
    font-size: var(--fs-small);
    font-weight: 400;
    border-radius: var(--radius-sm);
    transition:
      background-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out);
  }
  .lang-switch__item:hover,
  .lang-switch__item:focus-visible {
    background-color: color-mix(in srgb, var(--color-ink) 8%, transparent);
    color: var(--color-ink);
    outline: none;
  }
  .lang-switch__item[aria-current="page"] {
    color: var(--color-ink);
    font-weight: 500;
  }
  .lang-switch__flag {
    inline-size: 1.25rem;
    block-size: 0.875rem;
    flex: none;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 20%, transparent);
  }
  .lang-switch__name { flex: 1; }
  .lang-switch__check {
    color: var(--color-red);
    flex: none;
  }
}

/* ============ Overrides layer ============ *
 * Home-only wordmark lift. The desktop clamp scales the
 * wordmark up to a brand-statement size on the home route.
 * Mobile gets a tighter clamp so the wordmark never crowds
 * the actions row at small viewports.
 * ===================================================== */
@layer overrides {
  [data-page="home"] .header__logo {
    font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
    letter-spacing: var(--tracking-display);
    line-height: var(--lh-display);
  }
  @media (max-width: 47.99em) {
    [data-page="home"] .header__logo {
      font-size: clamp(1.5rem, 1.25rem + 1.5vw, 2rem);
    }
  }
}