/* ==========================================================================
   site-header.css — sticky top bar: wordmark, Work/Contact buttons, theme
   toggle. Behaviour lives in js/modules/nav.js and js/modules/theme.js

   There is no mobile menu. Both links point at a section of the landing page
   rather than a page of their own, and there are only two of them, so they
   stay on the bar at every width and the off-canvas panel and its hamburger
   were removed on 2026-08-27 along with the /work/ index. Nothing in this bar
   hides below a breakpoint — the sizes step down instead, at 48rem and again
   at 30rem, and the arithmetic that keeps it on one line at 320px is noted on
   the narrow block at the bottom of this file.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--color-header-bg);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}

/* js/modules/nav.js adds this once the page is scrolled off the top. */
.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

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

/* --- Wordmark ------------------------------------------------------------- */
.site-header__brand {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  white-space: nowrap;
}
.site-header__brand:hover { color: var(--color-accent); }

/* --- Right-hand controls --------------------------------------------------
   Everything interactive sits here, always visible. flex:none so the group
   is never squashed to save the wordmark — the wordmark gives way instead.
   -------------------------------------------------------------------------- */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

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

/* A shade tighter than a body button so the bar keeps its height. */
.site-header__link {
  padding: var(--space-2) var(--space-4);
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.icon-button:hover {
  background-color: var(--color-bg-sunken);
  color: var(--color-text);
}
.icon-button svg { width: 1.25rem; height: 1.25rem; }

/* Theme toggle shows one icon at a time, chosen by the active theme. */
.theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun  { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__sun  { display: none; }
  :root:not([data-theme="light"]) .theme-toggle__moon { display: block; }
}

/* --- Narrow widths --------------------------------------------------------
   Four things share one line down here — wordmark, two buttons, toggle — so
   the room comes back out of the gaps and the buttons' side padding.
   -------------------------------------------------------------------------- */
@media (max-width: 48rem) {
  .site-header__inner { gap: var(--space-3); }
  .site-header__link  { padding-inline: var(--space-3); }

  /* The name ellipsises rather than pushing the bar past the viewport. */
  .site-header__brand {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Phones. Budget at a 320px viewport, the narrowest worth designing for:
   32px of gutter, ~47px Work, ~64px Contact, 36px toggle and 12px of gaps
   leaves ~129px for the wordmark, which sets at about 108px here. It fits,
   with the ellipsis above still standing as the guard. */
@media (max-width: 30rem) {
  .site-header__inner   { gap: var(--space-2); }
  .site-header__actions { gap: var(--space-1); }
  .site-header__nav     { gap: var(--space-1); }
  .site-header__brand   { font-size: var(--text-base); }

  .site-header__link {
    padding-inline: var(--space-2);
    font-size: var(--text-xs);
  }

  .icon-button     { width: 2.25rem; height: 2.25rem; }
  .icon-button svg { width: 1.1rem; height: 1.1rem; }
}