/* Site header: sticky, clear over the hero, a solid surface once the page scrolls. */
html:has(.site-header) {
  scroll-padding-top: 72px;
}

.site-header {
  --header-height: 56px;
  position: sticky;
  top: 0;
  z-index: 50;
}

/* The surface and its hairline are their own layers so only opacity animates. */
.site-header::before,
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: opacity var(--duration-snappy) var(--ease-standard);
}

.site-header::before {
  /* Opaque, so shadows passing underneath never read as smudges on the bar. */
  background: var(--canvas);
}

/* A hairline that fades out toward both edges of the window. */
.site-header::after {
  top: auto;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--ink) 10%, transparent) 18%,
    color-mix(in srgb, var(--ink) 10%, transparent) 82%,
    transparent
  );
}

/* With scripting on, the surface waits until the visitor scrolls. */
.js .site-header:not(.is-scrolled)::before,
.js .site-header:not(.is-scrolled)::after {
  opacity: 0;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--header-height);
}

.site-header .wordmark {
  flex: none;
  border-radius: var(--space-sm);
}

.site-header .logo {
  height: 24px;
}

.site-header .site-nav ul {
  display: flex;
  align-items: center;
  margin-inline-end: calc(-1 * var(--space-md));
}

.site-header .site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-md);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-secondary);
  text-decoration: none;
  border-radius: var(--radius-pill);
}

/* Hover: a chip of lifted white glass behind the label. */
.site-header .site-nav a::before {
  content: "";
  position: absolute;
  inset: 6px 0;
  z-index: -1;
  background: color-mix(in srgb, var(--surface) 68%, transparent);
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--jet-ink) 7%, transparent);
  opacity: 0;
  transition: opacity var(--duration-rest) var(--ease-standard);
}

.site-header .site-nav a:hover::before,
.site-header .site-nav a[aria-current]::before {
  opacity: 1;
}

.site-header .site-nav a:hover {
  color: var(--ink);
}

/* The section or page you are on: a brand-blue label on a tinted chip, hovered or not. */
.site-header .site-nav a[aria-current] {
  color: var(--jet);
}

.site-header .site-nav a[aria-current]::before {
  background: color-mix(in srgb, var(--jet) 9%, transparent);
  box-shadow: none;
}

/* On the last link's own page its chip, not its label, ends on the content edge. */
.site-header .site-nav ul:has(li:last-child a[aria-current="page"]) {
  transform: translateX(calc(-1 * var(--space-md)));
}

.site-header .site-nav a:focus-visible {
  outline-offset: -4px;
}

@media (min-width: 640px) {
  .site-header {
    --header-height: 64px;
  }

  .site-header .logo {
    height: 26px;
  }

  /* The last label's text ends on the content edge, in line with everything below it. */
  .site-header .site-nav ul {
    gap: var(--space-xs);
    margin-inline-end: calc(-1 * var(--space-lg));
  }

  .site-header .site-nav a {
    padding-inline: var(--space-lg);
  }

  .site-header .site-nav ul:has(li:last-child a[aria-current="page"]) {
    transform: translateX(calc(-1 * var(--space-lg)));
  }
}

/* Without scripting, browsers that can tie an animation to the scroll position still
   keep the header clear over the top of the page and bring the surface in as it scrolls. */
@supports (animation-timeline: scroll()) {
  html:not(.js) .site-header::before,
  html:not(.js) .site-header::after {
    animation: header-surface linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 48px;
  }
}

@keyframes header-surface {
  from {
    opacity: 0;
  }
}

@media print {
  .site-header {
    position: static;
  }
}

/* Simple pages (support, 404) load only the header and footer styles, so their one layout
   rule lives here: a single centred column, so the page never sits in the left half. */
.simple .wrap {
  max-width: calc(40rem + 2 * var(--gutter));
}

.simple .card {
  max-width: none;
}

.simple .simple-links {
  display: grid;
  width: 100%;
}

.simple .simple-links li {
  display: grid;
  padding-block: var(--space-xs) var(--space-md);
}

.simple .simple-links li + li {
  padding-top: var(--space-md);
  box-shadow: inset 0 1px 0 var(--hairline);
}

.simple .simple-links .text-link {
  justify-self: start;
  color: var(--jet);
  text-decoration: none;
}

.simple .simple-links .text-link:hover {
  text-decoration: underline;
}

/* Small phones: four links do not fit beside the logo, so the FAQ link steps out (the FAQ is still on the home page). */
@media (max-width: 419px) {
  .site-header .site-nav .nav-wide {
    display: none;
  }

  .site-header .site-nav a {
    padding-inline: var(--space-sm);
  }
}