/* ==========================================================================
   Site header -- pairs with templates/includes/site_header.html
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom: var(--hairline);
  /* Progressive: where backdrop-filter is unsupported the header is simply a
     more opaque bar, which is why the background above is not fully
     transparent. */
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}

/* color-mix is recent enough to warrant a fallback: without this, an engine
   that cannot parse the value drops the declaration and the header renders
   with NO background over scrolling content. Declared first so the modern
   value overrides it where supported. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .site-header { background: var(--bg); }
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: var(--s-8);
  padding-block: var(--s-3);
}

/* --- wordmark ------------------------------------------------------------ */

.site-header__mark {
  display: flex;
  flex-direction: column;
  gap: 2px;                 /* sub-token: optical pairing, not spacing rhythm */
  text-decoration: none;
  color: var(--text);
  line-height: var(--lh-tight);
  margin-right: auto;       /* pushes nav + actions to the far edge */
}

.site-header__mark:hover { color: var(--text); }

.site-header__name {
  font-size: var(--fs-md);
  font-weight: 640;
  letter-spacing: var(--tracking-tight);
}

.site-header__role {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* --- nav ----------------------------------------------------------------- */

.site-header__list {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  list-style: none;
}

/* The design marks the current section with a rule under the label, not a filled
   pill -- the accent budget is spent on the page's primary action, and a pill in
   the header competes with it. */
.site-header__list a {
  display: block;
  padding-bottom: 2px;           /* optical gap to the rule, not a spacing step */
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.site-header__list a:hover { color: var(--text); }

.site-header__list a[aria-current] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* --- actions ------------------------------------------------------------- */

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* Styled here rather than in its own stylesheet because the button exists only
   in this slot and is created by the header's own script. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s-6);
  height: var(--s-6);
  padding: 0;
  border: var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.theme-toggle:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.theme-toggle svg {
  width: 16px;   /* icon optical size, not a spacing token */
  height: 16px;
}

/* Show the sun in dark mode and the moon in light: the icon advertises the
   theme you would switch TO, which is what a toggle should communicate. */
.theme-toggle__sun  { display: none; }
:root[data-theme="dark"] .theme-toggle__sun  { display: block; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__sun  { display: block; }
  :root:not([data-theme="light"]) .theme-toggle__moon { display: none; }
}

/* --- narrow -------------------------------------------------------------- */

@media (max-width: 34rem) {
  .site-header__role { display: none; }
  .site-header__inner { gap: var(--s-3); }
  .site-header__list a { padding-inline: var(--s-2); }
}