/* The site header (markup: tools/web/site_header.py). Its own colours, so it
   looks the same on every page whatever the page's own variables are. Rules
   here also undo the old `header { … }` rules some pages still carry. */
:root { --sh-bar: rgba(13, 16, 22, 0.92); --sh-panel: #121722; --sh-line: rgba(255, 255, 255, 0.08); --sh-ink: #f4f6fa; --sh-quiet: #a4adbc; --sh-accent: #0050fd; --sh-accent-press: #0042d4; }
html { color-scheme: dark; scroll-padding-top: 88px; }

/* 74.5rem = the pages' 72rem column plus the bar's 1.25rem inset each side, so the logo lines up with the text below. */
.site-header { position: sticky; top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 50; display: block; width: min(100% - 1rem, 74.5rem); margin: 10px auto 0; padding: 0; gap: 0; font-family: inherit; }
.site-header--overlay { position: fixed; left: 0; right: 0; top: calc(10px + env(safe-area-inset-top, 0px)); margin: 0 auto; transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; }
.site-header--overlay.is-away { transform: translateY(calc(-100% - 20px)); visibility: hidden; transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 320ms; }

.site-header__bar { position: relative; display: flex; align-items: center; gap: 0.75rem; height: 56px; padding: 0 0.5rem 0 1.25rem; border-radius: 999px; }
/* The pill is its own layer, faded in once the page moves (always shown on home), so only opacity animates. */
.site-header__bar::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--sh-bar); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); box-shadow: inset 0 0 0 1px var(--sh-line), 0 12px 32px rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity 200ms ease; }
.site-header.is-scrolled .site-header__bar::before, .site-header--overlay .site-header__bar::before { opacity: 1; }

.site-header__logo { display: block; flex: none; }
.site-header .site-header__logo img { display: block; width: 128px; height: auto; }
.site-header__links { display: flex; align-items: center; gap: 0.15rem; margin-left: auto; }
.site-header a, .site-header summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.site-header__links > a, .site-header .nav-menu > summary { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.45rem 0.8rem; border-radius: 999px; color: var(--sh-quiet); font-size: 0.95rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: color 160ms ease, background-color 160ms ease; }
.site-header__links > a:hover, .site-header .nav-menu > summary:hover, .site-header .nav-menu[open] > summary { color: var(--sh-ink); background: rgba(255, 255, 255, 0.06); }
.site-header__links > a[aria-current="page"] { color: var(--sh-ink); }
.site-header .nav-menu > summary { list-style: none; }
.site-header .nav-menu > summary::-webkit-details-marker { display: none; }
.nav-chevron { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 160ms ease; }
.nav-menu[open] .nav-chevron { transform: rotate(180deg); }

.site-header__cta { display: inline-flex; flex: none; align-items: center; min-height: 40px; padding: 0 1.1rem; border-radius: 999px; background: var(--sh-accent); color: #fff; font-size: 0.95rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color 160ms ease; }
.site-header__cta:hover, .site-header__cta:active { background: var(--sh-accent-press); }
.site-header__links > a:active, .site-header .nav-menu > summary:active, .nav-panel a:active { background: rgba(255, 255, 255, 0.12); }
.site-header__cta .cta-short { display: none; }

/* the Guides panel and the phone menu */
.nav-menu { position: relative; }
.nav-panel { position: absolute; top: calc(100% + 14px); right: 0; width: 19rem; max-height: calc(100svh - 96px); overflow-y: auto; overscroll-behavior: contain; padding: 0.5rem; border-radius: 16px; background: var(--sh-panel); box-shadow: inset 0 0 0 1px var(--sh-line), 0 18px 44px rgba(0, 0, 0, 0.55); }
.nav-panel ul { margin: 0; padding: 0; list-style: none; }
.nav-panel ul + .nav-group { margin-top: 0.4rem; }
.nav-group { margin: 0; padding: 0.55rem 0.75rem 0.2rem; color: var(--sh-quiet); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.01em; }
.nav-panel a { display: block; padding: 0.5rem 0.75rem; border-radius: 10px; color: var(--sh-ink); font-size: 0.95rem; line-height: 1.3; text-decoration: none; }
.nav-panel a:hover, .nav-panel a:focus-visible { background: rgba(255, 255, 255, 0.07); }
.nav-panel a[aria-current="page"] { background: rgba(0, 80, 253, 0.18); }
.site-header :focus-visible { outline: 2px solid #6f9bff; outline-offset: 2px; }

.site-menu { display: none; }
.site-menu > summary { width: 40px; height: 40px; justify-content: center; padding: 0; }
.site-menu > summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* phones and small tablets: the links fold into the menu */
@media (max-width: 52rem) {
  .site-header__bar { padding-left: 12px; }
  .site-header__links { display: none; }
  .site-menu { display: block; }
  .site-header__cta { margin-left: auto; }
  .site-menu { position: static; }
  .site-menu .nav-panel { left: 0; right: 0; width: auto; top: calc(100% + 8px); }
}
@media (max-width: 26rem) {
  .site-header__bar { gap: 0.4rem; padding-left: 1rem; }
  .site-header .site-header__logo img { width: 110px; }
  .site-header__cta .cta-long { display: none; }
  .site-header__cta .cta-short { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header--overlay, .site-header--overlay.is-away { transition: visibility 0s; }
  .site-header__bar::before, .nav-chevron { transition: none; }
}

/* Skip to the content: hidden until a keyboard reaches it. */
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 60; padding: 0.6rem 1rem; border-radius: 999px; background: var(--sh-ink); color: #050609; font-weight: 600; text-decoration: none; }
.skip-link:focus, .skip-link:focus-visible { top: 8px; }