/*
 * Signal and Echo design system: site-header (pack site; issue 164, .claude/reference/site-profile.md s4, s6).
 *
 * The bar on top of every site page. The bar spans the full width; the brand sits at the left
 * gutter and the actions at the right (decision 1), inside --sds-page-gutter.
 *
 *   <header class="sds-site-header" data-collapse="md">
 *     <a class="sds-site-header-brand" href="/">...</a>
 *     <details class="sds-site-header-menu">
 *       <summary class="sds-icon-button" data-variant="ghost" aria-label="Menu">
 *         <svg class="sds-icon" aria-hidden="true"><use href="icons.svg#menu"></use></svg>
 *         <svg class="sds-icon" aria-hidden="true"><use href="icons.svg#close"></use></svg>
 *       </summary>
 *     </details>
 *     <nav class="sds-site-header-nav" aria-label="Primary">
 *       <a class="sds-link" data-variant="quiet" href="/" aria-current="page">Home</a> ...
 *     </nav>
 *     <div class="sds-site-header-actions">...</div>
 *   </header>
 *
 * One nav, no copy: the menu is a <details> whose summary shows the menu icon closed and the close
 * icon open, and the nav after it is the drop-down panel under the bar while the menu is open
 * (decision 4). It works with no JS; site-header.js adds Escape and outside-tap close and returns
 * focus to the summary.
 * data-collapse="sm|md|lg" (default md): the nav folds into the menu below 47.5em, 62.5em or 75em
 * (760, 1000 or 1200 CSS pixels). At 37.5em (600 CSS pixels) and below the actions fold into the panel too,
 * so the bar holds only the brand and the menu button. A theme cannot move a breakpoint.
 * data-sticky (opt-in, decision 10): the bar sticks to the top on color.glass with a blur.
 * The current page link (aria-current="page") is drawn in color.text-strong with a thick underline.
 *
 * Every value is a token; the only literals are 0, percentages and unitless numbers.
 */

/* sds-claims: site-header */

@layer sds.reset, sds.components;

@layer sds.components {
  .sds-site-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sds-space-5);
    min-height: calc(var(--sds-touch-target) + var(--sds-space-3) * 2);
    padding: var(--sds-space-3) var(--sds-page-gutter);
    background-color: var(--sds-color-bg);
    border-bottom: var(--sds-border-thin) solid var(--sds-color-line);
    color: var(--sds-color-text);
    font-family: var(--sds-font-ui);
  }

  .sds-site-header:where([data-sticky]) {
    position: sticky;
    top: 0;
    z-index: var(--sds-layer-hud);
    background-color: var(--sds-color-glass);
    -webkit-backdrop-filter: blur(var(--sds-space-3));
    backdrop-filter: blur(var(--sds-space-3));
  }

  /* --- brand: the left gutter; it pushes the nav and actions to the end. */

  .sds-site-header-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sds-space-3);
    min-height: var(--sds-touch-target);
    margin-inline-end: auto;
    color: inherit;
    text-decoration: none;
    font-family: var(--sds-font-display);
    font-size: calc(var(--sds-type-heading-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-heading-weight);
    letter-spacing: var(--sds-type-heading-tracking);
    line-height: var(--sds-type-heading-line-height);
    border-radius: var(--sds-radius-sm);
  }

  /* --- nav: links in a row, each a full touch target. */

  .sds-site-header-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sds-space-1) var(--sds-space-4);
    font-size: calc(var(--sds-type-small-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-small-weight);
    letter-spacing: var(--sds-type-small-tracking);
    line-height: var(--sds-type-small-line-height);
  }

  .sds-site-header-nav > a {
    display: inline-flex;
    align-items: center;
    min-height: var(--sds-touch-target);
    padding-inline: var(--sds-space-2);
  }

  .sds-site-header-nav > a:where([aria-current="page"]) {
    color: var(--sds-color-text-strong);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: var(--sds-color-accent-text);
    text-decoration-thickness: calc(var(--sds-link-thickness) * 2);
    text-underline-offset: var(--sds-link-offset);
  }

  .sds-site-header-actions {
    display: flex;
    align-items: center;
    gap: var(--sds-space-3);
  }

  /* --- menu: hidden while the nav fits; the summary is an icon button (menu, then close). */

  .sds-site-header-menu {
    display: none;
  }

  .sds-site-header-menu > summary {
    list-style: none;
  }

  .sds-site-header-menu > summary::-webkit-details-marker {
    display: none;
  }

  .sds-site-header-menu:where(:not([open])) > summary > .sds-icon + .sds-icon,
  .sds-site-header-menu:where([open]) > summary > .sds-icon:first-child {
    display: none;
  }

  /* --- folded: below the collapse step, the menu button shows and the nav hides. Open, the nav
     is the panel under the bar, one full-width row per link; it opens in the flow, so it never
     covers the page. Every folded rule sits inside its step, so a menu left open on a page that
     widens past the step draws the plain bar again. */

  @media (width < 47.5em) {
    .sds-site-header:where([data-collapse="sm"]) {
      flex-wrap: wrap;
    }

    .sds-site-header:where([data-collapse="sm"]) > .sds-site-header-menu {
      display: block;
      order: 2;
    }

    .sds-site-header:where([data-collapse="sm"]) > .sds-site-header-nav {
      display: none;
      order: 3;
      flex-basis: 100%;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding-block: var(--sds-space-2);
      border-top: var(--sds-border-thin) solid var(--sds-color-line);
      font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
      line-height: var(--sds-type-body-line-height);
    }

    .sds-site-header:where([data-collapse="sm"]) > .sds-site-header-menu:where([open]) ~ .sds-site-header-nav {
      display: flex;
    }

    .sds-site-header:where([data-collapse="sm"]) > .sds-site-header-actions {
      order: 1;
    }
  }

  @media (width < 62.5em) {
    .sds-site-header:where(:not([data-collapse]), [data-collapse="md"]) {
      flex-wrap: wrap;
    }

    .sds-site-header:where(:not([data-collapse]), [data-collapse="md"]) > .sds-site-header-menu {
      display: block;
      order: 2;
    }

    .sds-site-header:where(:not([data-collapse]), [data-collapse="md"]) > .sds-site-header-nav {
      display: none;
      order: 3;
      flex-basis: 100%;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding-block: var(--sds-space-2);
      border-top: var(--sds-border-thin) solid var(--sds-color-line);
      font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
      line-height: var(--sds-type-body-line-height);
    }

    .sds-site-header:where(:not([data-collapse]), [data-collapse="md"]) > .sds-site-header-menu:where([open]) ~ .sds-site-header-nav {
      display: flex;
    }

    .sds-site-header:where(:not([data-collapse]), [data-collapse="md"]) > .sds-site-header-actions {
      order: 1;
    }
  }

  @media (width < 75em) {
    .sds-site-header:where([data-collapse="lg"]) {
      flex-wrap: wrap;
    }

    .sds-site-header:where([data-collapse="lg"]) > .sds-site-header-menu {
      display: block;
      order: 2;
    }

    .sds-site-header:where([data-collapse="lg"]) > .sds-site-header-nav {
      display: none;
      order: 3;
      flex-basis: 100%;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding-block: var(--sds-space-2);
      border-top: var(--sds-border-thin) solid var(--sds-color-line);
      font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
      line-height: var(--sds-type-body-line-height);
    }

    .sds-site-header:where([data-collapse="lg"]) > .sds-site-header-menu:where([open]) ~ .sds-site-header-nav {
      display: flex;
    }

    .sds-site-header:where([data-collapse="lg"]) > .sds-site-header-actions {
      order: 1;
    }
  }

  /* --- phone: the bar holds only the brand and the menu button; open, the actions join the
     panel as its last row. */

  @media (width <= 37.5em) {
    .sds-site-header > .sds-site-header-actions {
      display: none;
    }

    .sds-site-header > .sds-site-header-menu:where([open]) ~ .sds-site-header-actions {
      display: flex;
      flex-wrap: wrap;
      flex-basis: 100%;
      order: 4;
      padding-block: var(--sds-space-3);
      border-top: var(--sds-border-thin) solid var(--sds-color-line);
    }
  }
}