/* ========================================================================
   stepkeep — header.css
   Header, navigation, theme/lang switches, buttons.
   Split from css/components.css; load order in HTML preserves the cascade.
   ======================================================================== */

/* ==========================================================================
   stepkeep — components
   ========================================================================== */

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.site-header.is-stuck {
  border-bottom-color: var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  text-decoration: none;
}

.brand__mark {
  flex: none;
}

.brand__word {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
  line-height: 1;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  font-size: var(--step--1);
  font-weight: 500;
}

.site-nav > a:not(.btn) {
  color: var(--graphite);
  text-decoration: none;
  padding-block: 0.4rem;
  /* Marker underline motif on the active item. */
  background-image: linear-gradient(var(--marker), var(--marker));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 0.18s var(--ease), color 0.15s var(--ease);
}

.site-nav > a:not(.btn):hover,
.site-nav > a:not(.btn):focus-visible,
.site-nav > a:not(.btn)[aria-current='true'] {
  color: var(--ink);
  background-size: 100% 2px;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  padding: 0.45rem 0.7rem;
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 14px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  content: '';
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before {
  position: absolute;
  top: -5px;
}

.nav-toggle__bars::after {
  position: absolute;
  top: 5px;
}

/* The right-hand cluster. Keeping the nav and the two buttons in one group
   holds the hamburger and the colour switch together on narrow screens, where
   the nav itself drops into the panel below the bar. */
.site-header__end {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Language switcher. Unlike the colour-scheme switch the link itself needs no
   script: it is a plain href, and the build fills it in per locale. But it is
   revealed through the same data-theme-js gate as the colour-scheme button, so
   that the header has exactly one rule about scripting: with scripting off the
   header is the brand and the nav, and both controls disappear together rather
   than one of them pointing at a page the reader cannot get back from. The build
   emits the anchor on its own inside the wrapper, so the styles hang off the
   wrapper rather than off a nested element. */
.lang-switch {
  display: none;
  align-items: center;
}

:root[data-theme-js] .lang-switch {
  display: inline-flex;
}

.lang-switch > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.125rem;
  height: 2.125rem;
  padding-inline: 0.5rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.lang-switch > a:hover {
  border-color: var(--rule-strong);
}

/* Colour-scheme switch. Hidden until the head script has set data-theme-js:
   with scripting off the button could not do anything, and the media query in
   tokens.css honours the system preference on its own. */
.theme-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  padding: 0;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease),
    color 0.15s var(--ease);
}

:root[data-theme-js] .theme-toggle {
  display: inline-flex;
}

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

/* The icon shows the scheme the click would switch to: a moon while the page is
   light, a sun while it is dark. The head script always sets data-theme, so the
   attribute alone is enough and no media query is needed here. */
.theme-toggle__icon {
  display: block;
}

.theme-toggle__icon--sun {
  display: none;
}

:root[data-theme='dark'] .theme-toggle__icon--sun {
  display: block;
}

:root[data-theme='dark'] .theme-toggle__icon--moon {
  display: none;
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.7rem 1.15rem;
  cursor: pointer;
  transition: transform 0.12s var(--ease), background-color 0.15s var(--ease),
    border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--ink);
  color: var(--on-ink);
  border-color: var(--ink);
}

.btn--primary:hover {
  background: color-mix(in srgb, var(--ink) 88%, var(--paper));
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}

.btn--ghost:hover {
  background: var(--ink-soft);
  border-color: var(--ink);
}

.btn--sm {
  padding: 0.45rem 0.8rem;
}

/* The hero pair. One size up from the page default so the two primary actions
   are the largest targets above the fold, which is the only place on this page
   where that is true. */
.btn--lg {
  padding: 0.9rem 1.5rem;
  font-size: var(--step-0);
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn__meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--slate);
}

.btn--primary .btn__meta {
  color: var(--on-ink);
  opacity: 0.75;
}