/* Public site header — sticky, blurred, with logo / pill nav / actions.
 * ---------------------------------------------------------------------- */

@layer modules {
  .web-header {
    align-items: center;
    backdrop-filter: blur(8px);
    background-color: color-mix(in oklab, var(--color-surface) 92%, transparent);
    border-block-end: 1px solid var(--color-border);
    display: grid;
    grid-template-columns: auto 1fr auto;
    inset-block-start: 0;
    padding: var(--space-s) clamp(var(--space-m), 3vw, var(--space-xxl));
    position: sticky;
    z-index: var(--z-nav);
  }

  .web-header__logo {
    align-items: center;
    color: var(--color-ink);
    display: inline-flex;
    gap: 0.625rem;
    text-decoration: none;
  }

  .web-header__logo-mark {
    block-size: 1.75rem;
    display: inline-block;
    inline-size: auto;
    object-fit: contain;
  }

  .web-header__brand {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: var(--font-display-tracking);
  }

  .web-header__links {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
  }

  .web-header__link {
    border-radius: 99rem;
    color: var(--color-ink-dark);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 0.875rem;
    text-decoration: none;
    transition: background-color 150ms, color 150ms;
  }

  .web-header__link:hover,
  .web-header__link.is-active {
    background-color: var(--color-hover);
    color: var(--color-ink);
  }

  /* Dropdown groups — the trigger is a real link to the section index, and the
   * panel opens on hover or when focus lands inside, so it works with the
   * keyboard and needs no JavaScript. */
  .web-nav {
    position: relative;
  }

  .web-nav__trigger {
    align-items: center;
    display: inline-flex;
    gap: 0.25rem;
  }

  .web-nav__chevron {
    block-size: 0.875rem;
    inline-size: 0.875rem;
    transition: transform 150ms;
  }

  .web-nav:hover > .web-nav__trigger,
  .web-nav:focus-within > .web-nav__trigger {
    background-color: var(--color-hover);
    color: var(--color-ink);
  }

  .web-nav:hover .web-nav__chevron,
  .web-nav:focus-within .web-nav__chevron {
    transform: rotate(180deg);
  }

  /* The panel itself is an invisible bridge: it reaches up to the trigger so the
   * pointer never loses hover, while its transparent top padding keeps the card
   * below the header edge instead of painting a white strip inside the header. */
  .web-nav__panel {
    display: none;
    inset-block-start: 100%;
    inset-inline-start: 0;
    min-inline-size: 15rem;
    padding-block-start: var(--space-s);
    position: absolute;
    z-index: var(--z-nav-open);
  }

  .web-nav:hover > .web-nav__panel,
  .web-nav:focus-within > .web-nav__panel {
    display: block;
  }

  .web-nav__card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-end-end-radius: var(--border-radius-l);
    border-end-start-radius: var(--border-radius-l);
    box-shadow: 0 24px 50px -22px oklch(var(--lch-ink-darkest) / 0.22);
    display: flex;
    flex-direction: column;
    padding: var(--space-xs);
  }

  .web-nav__item {
    border-radius: var(--border-radius-m);
    color: var(--color-ink-dark);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 0.625rem;
    text-decoration: none;
    white-space: nowrap;
  }

  .web-nav__item:hover {
    background-color: var(--color-hover);
    color: var(--color-ink);
  }


  .web-header__actions {
    align-items: center;
    display: flex;
    gap: 0.625rem;
    justify-self: end;
  }

  .web-header__cta {
    align-items: center;
    background-color: var(--color-ink);
    border-radius: 99rem;
    color: var(--color-ink-inverted);
    display: inline-flex;
    font-family: var(--font-sans);
    font-size: 0.825rem;
    font-weight: 600;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    text-decoration: none;
    transition: transform 150ms;
  }

  .web-header__cta:hover {
    transform: translateY(-1px);
  }

  .web-header__search {
    align-items: center;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 99rem;
    color: var(--color-ink);
    display: inline-flex;
    font-family: var(--font-sans);
    font-size: 0.825rem;
    font-weight: 600;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    text-decoration: none;
    transition: background-color 150ms, border-color 150ms;
  }

  .web-header__search:hover {
    background-color: var(--color-hover);
    border-color: var(--color-border-strong);
  }


  .web-header__details {
    position: static;
  }

  .web-header__details > summary {
    list-style: none;
  }

  .web-header__details > summary::-webkit-details-marker {
    display: none;
  }

  .web-header__toggle {
    align-items: center;
    background: none;
    block-size: 2.25rem;
    border: 1px solid var(--color-border);
    border-radius: 99rem;
    cursor: pointer;
    display: inline-flex;
    inline-size: 2.25rem;
    justify-content: center;
    padding: 0;
  }

  .web-header__toggle-icon {
    block-size: 1.1rem;
    color: var(--color-ink-dark);
    inline-size: 1.1rem;
  }

  .web-header__menu {
    background-color: var(--color-surface);
    border-block-end: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    inset-block-start: 100%;
    inset-inline: 0;
    max-block-size: calc(100dvh - 4rem);
    overflow-y: auto;
    padding: var(--space-s);
    position: absolute;
    text-align: center;
    z-index: var(--z-nav-open);
  }

  .web-header__menu-group {
    border-block-start: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-block-start: var(--space-xs);
  }

  .web-header__menu-group:first-child {
    border-block-start: 0;
    padding-block-start: 0;
  }

  .web-header__menu-heading {
    color: var(--color-ink);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding-block: var(--space-xxs);
    text-decoration: none;
    text-transform: uppercase;
  }

  .web-header__menu .web-header__link {
    border-radius: 0;
    width: 100%;
  }
}