/* Site header — floating rounded white bar. Navigation lives in navigation.css. */

.site-header {
  position: fixed;
  /* The non-sticky accessibility bar sits above the header in flow. At the top
     the floating header rests just BELOW it; header-offset.js then shrinks
     --header-current-offset back to --header-offset as the bar scrolls off, so
     the header rises to its normal 35px spot. No JS → header simply rests below
     the bar (graceful). On mobile the bar is hidden, so the offset is reset
     to --header-offset in the mobile block below. */
  inset-block-start: var(--header-current-offset, calc(var(--header-offset) + var(--a11y-bar-height)));
  inset-inline: 0;
  z-index: 50;
}

.site-header-inner {
  position: relative;
  z-index: 0; /* own stacking context so the mobile menu panel can tuck behind the pill */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: 1rem;
  padding-inline: 2rem;
}

/* The white floating pill is a pseudo-element (not the element background) so the
   off-canvas mobile menu can paint behind it (see navigation.css). */
.site-header-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-white);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
}

/* Pill contents sit above the white pseudo-element. */
.site-brand,
.nav-toggle,
.site-nav {
  position: relative;
  z-index: 1;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  text-decoration: none;
  color: var(--color-green-dark);
  font-family: var(--font-serif);
}

.site-brand-logo {
  width: auto;
  height: 2.75rem;
}

.site-brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  font-weight: 700;
}

.site-brand-tagline {
  font-family: var(--font-sans-serif);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-green);
}

/* Mobile: a smaller pill inset 10px from the screen edges (per the mobile nav
   design). The .container rule otherwise stretches it edge-to-edge. */
@media (max-width: 60rem) {
  /* The accessibility bar is hidden on mobile (tools move into the drawer), so
     the header returns to its normal offset — no bar-height to clear. */
  .site-header {
    inset-block-start: var(--header-offset);
  }

  .site-header-inner {
    width: auto;
    margin-inline: 0.625rem; /* 10px from each side */
    padding-block: 0.625rem; /* 10px */
    padding-inline: 1.25rem; /* 20px */
  }

  .site-brand-logo {
    height: 2.25rem; /* 36px, per design */
  }
}