/* Header layer: the masthead, the navigation, and the language control.

   Sticky and translucent, so the page moves under it rather than the header
   sitting on top of a static document. Twelve top-level items is a lot, so the
   nav scrolls horizontally on narrow viewports rather than stacking into a
   twelve-row block that pushed the content a whole screen down.

   Load order: tokens.css, base.css, this, sections.css, interior.css. */

.wr-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--color-ground) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--color-border);
}

.wr-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
  /* Wraps so the nav can drop to its own row on a phone -- see .wr-nav. */
  flex-wrap: wrap;
}

.wr-header__brand {
  flex: 0 0 auto;
  display: inline-flex;
  border-radius: var(--radius-sm);
}

.wr-header__logo {
  height: clamp(1.5rem, 1.1rem + 1.8vw, 1.875rem);
  width: auto;
}

@media (prefers-color-scheme: dark) {
  .wr-header__logo {
    /* No dark wordmark asset exists (logo/README.md) and the near-black
       "Reserve" half would vanish. Flatten to white rather than invert
       hue-for-hue, which would turn the brand green pink. */
    filter: brightness(0) invert(1);
  }
}

/* ---------- Navigation ---------- */

/* Twelve items do not fit on one line beside the wordmark and the language
   control at any realistic width. Below 90rem the nav scrolls horizontally --
   a familiar phone pattern, and the mask makes the overflow legible. At 90rem
   and up it wraps to a second line instead, because a desktop visitor should
   not have to discover that three menu items are hidden off the right edge. */
.wr-nav {
  /* Its own full-width row until there is room for one line, because sharing a
     row with the wordmark and the language toggle left it about 60px wide on a
     390px phone -- a scroll strip that showed one item and gave no sign the
     other four existed. The horizontal scroll below is the intended pattern;
     it just needs the whole width to be usable. */
  order: 3;
  flex: 1 0 100%;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, transparent 0, #000 var(--space-4), #000 calc(100% - var(--space-5)), transparent 100%);
}

@media (min-width: 48rem) {
  .wr-header__inner {
    /* Back to one row -- and nowrap, so when the five items no longer fit it is
       the nav that shrinks into its scroll strip (min-width: 0 below) rather
       than the language toggle dropping to a second row on its own. */
    flex-wrap: nowrap;
  }

  .wr-nav {
    order: 0;
    flex: 1 1 auto;
  }

  .wr-lang {
    margin-inline-start: 0;
  }
}

@media (min-width: 90rem) {
  .wr-nav {
    overflow-x: visible;
    mask-image: none;
  }

  .wr-nav__list {
    flex-wrap: wrap;
    row-gap: var(--space-1);
  }
}

.wr-nav::-webkit-scrollbar {
  display: none;
}

.wr-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-inline: var(--space-4) var(--space-5);
}

.wr-nav__item {
  flex: 0 0 auto;
}

.wr-nav__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease);
}

.wr-nav__link:hover {
  background: var(--color-surface);
  color: var(--color-ink);
}

.wr-nav__link[aria-current="page"] {
  background: var(--color-accent-wash);
  color: var(--color-accent-text);
  font-weight: var(--weight-semibold);
}

/* ---------- Language control ---------- */

.wr-lang {
  /* Held to the right of the wordmark: the nav used to push it there by
     growing, and it no longer shares that row on narrow screens. */
  margin-inline-start: auto;
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--color-surface-sunk);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

.wr-lang__cell {
  display: block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  color: var(--color-ink-faint);
  text-decoration: none;
  transition:
    background-color var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease);
}

a.wr-lang__cell:hover {
  color: var(--color-ink);
}

.wr-lang__cell--current {
  background: var(--color-surface);
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-sm);
}