/* ==============================================================================
   SITE HEADER
   ============================================================================== */

/* The header is a band of the chrome's slate (tokens.css). The site's
   violet focus ring would vanish on it (2.0:1), so inside the band the
   ring takes the chrome's own ring, the off-white in light (5.1:1). */
.site-header {
  --focus-ring: var(--chrome-focus-ring);

  background: var(--chrome-bg);
  color: var(--chrome-text);
  box-shadow: var(--shadow-sm);
}

.site-header__bar {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.site-header__logo {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--action-bar-text);
}

.site-header__logo:hover {
  text-decoration: none;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__list a {
  color: var(--action-bar-text-muted);
  text-decoration: none;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible {
  color: var(--action-bar-text);
  background: var(--action-bar-hover-bg);
}

.site-nav__list li.is-current a {
  color: var(--action-bar-text);
  background: var(--action-bar-active-bg);
}

/* The language switcher: a small group of plain links, not a control that
   needs its own visual weight next to the page navigation. */
.lang-switch {
  display: flex;
  gap: var(--spacing-xs);
}

.lang-switch__link {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  color: var(--action-bar-text-muted);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.lang-switch__link:hover,
.lang-switch__link.is-current {
  color: var(--action-bar-text);
  background: var(--action-bar-active-bg);
}

/* The assembly's round logo beside the site name (partials/header.html):
   the name's own height, with a small gap so the two read as one logo.
   The link is a flex row so the mark and the name share a centre line
   instead of the image sitting on the text baseline. */
.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

/* The site's name is lettered like the poster's titles (ADR-034): the
   hand font in capitals, at its only weight so no fake bold is drawn. */
.site-header__logo span {
  font-family: var(--font-title);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* The image file is 150 px and carries width/height for the layout to
   reserve its box before it loads; these rules draw it at 1.5em instead.
   flex: none keeps it from growing or shrinking when a narrow screen
   wraps the bar, so it never squeezes the name. The PNG is already a
   transparent disc; border-radius and object-fit keep it round should
   the original that replaces it come square. */
.site-header__mark {
  flex: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  object-fit: cover;
}

/* ------------------------------------------------------------------------------
   PHONE MENU
   The menu button (partials/header.html) is born hidden and menu.js shows
   it; the button is never drawn outside the phone layout either, so on
   desktop, and on a phone without JavaScript, the list stays inline as it
   always was. Everything that folds the list hangs off .has-menu-js, the
   class menu.js puts on <html>: without the script nothing here applies.
   ------------------------------------------------------------------------------ */

.site-nav__toggle {
  display: none;
}

@media (max-width: 767.98px) {
  /* One row: logo and name on the left, the button on the right. The list
     wraps to a row of its own under them, and the bar loses its vertical
     padding so that row can run from edge to edge of the band. */
  .has-menu-js .site-header__bar {
    flex-wrap: wrap;
    row-gap: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* min-width: 0 lets the name wrap to a second line instead of pushing
     the button out of the band at 320 px. */
  .has-menu-js .site-header__logo {
    flex: 1 1 0;
    min-width: 0;
    min-height: 3.25rem;
    font-size: 1rem;
    line-height: 1.2;
  }

  /* 2.75rem is the 44 px touch target; the icon inside is 1.5rem. */
  .has-menu-js .site-nav__toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: calc(-1 * var(--spacing-sm));
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--chrome-text);
    cursor: pointer;
  }

  .has-menu-js .site-nav__toggle:hover {
    background: var(--action-bar-hover-bg);
  }

  .has-menu-js .site-nav__toggle:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .has-menu-js .site-nav__toggle-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* The button carries both icons and both labels; aria-expanded says
     which pair is current. display: none also drops the other label from
     the accessible name, so a screen reader hears only one of them. */
  .has-menu-js .site-nav__toggle[aria-expanded="false"] .site-nav__toggle-icon--close,
  .has-menu-js .site-nav__toggle[aria-expanded="false"] .site-nav__toggle-label--close,
  .has-menu-js .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon--open,
  .has-menu-js .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-label--open {
    display: none;
  }

  /* The list runs under the bar across the whole band: the negative
     margins undo the bar's side padding. Folded, it is gone, links and
     all, so the keyboard never tabs into a menu nobody can see. */
  .has-menu-js .site-nav {
    flex: 0 0 calc(100% + 2 * var(--spacing-lg));
    margin: 0 calc(-1 * var(--spacing-lg));
    display: none;
  }

  .has-menu-js .site-header.is-open .site-nav {
    display: block;
    max-height: calc(100vh - 3.25rem);
    overflow-y: auto;
  }

  /* One link per row, divided by thin lines of the lilac border on the
     slate; the current page keeps the darker band it has on desktop. */
  .has-menu-js .site-nav__list {
    display: block;
  }

  .has-menu-js .site-nav__list li {
    border-top: 1px solid var(--border-light);
  }

  .has-menu-js .site-nav__list a {
    display: block;
    padding: 0.9rem 1rem;
    border-radius: 0;
  }

  /* The name may go down a step on the narrowest phones so it fits in two
     lines beside the button. */
  @media (max-width: 399.98px) {
    .has-menu-js .site-header__logo {
      font-size: 0.9rem;
    }
  }

  /* Opening slides the list down in 0.2 s; @starting-style gives the
     transition a closed height to start from, since display: none has
     none. Whoever asked for less motion gets the list at once. */
  @media (prefers-reduced-motion: no-preference) {
    .has-menu-js .site-header.is-open .site-nav {
      transition: max-height 0.2s ease-out;
    }

    @starting-style {
      .has-menu-js .site-header.is-open .site-nav {
        max-height: 0;
      }
    }
  }
}