/* Header styles (builds on base.css) */
.site-header { position: sticky; top: 0; z-index: 1000; background: var(--color-surface-1); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }

/* Brand */
.brand__link { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--color-text); font-weight: 600; letter-spacing: 0.02em; }
.brand__mark { color: var(--color-primary); filter: drop-shadow(0 1px 0 var(--color-edge-highlight)); }
.brand__text { font-family: var(--font-display); text-transform: uppercase; }

/* Navigation */
.site-nav { /* visible by default for progressive enhancement */ }
.nav-list { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 24px); }
.nav-item a { color: var(--color-text); text-decoration: none; padding: 8px 6px; border-radius: var(--radius-sm); border: 1px solid transparent; }
.nav-item a:hover { color: var(--color-primary); text-decoration: none; }
.nav-item a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* CTA as button already uses .btn styles from base */
.nav-item--cta a { padding: 8px 12px; }

/* Toggle button */
.nav-toggle { display: none; align-items: center; justify-content: center; gap: 8px; background: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 8px 10px; box-shadow: var(--shadow-sm); cursor: pointer; }
.nav-toggle:hover { box-shadow: var(--shadow-md); }
.nav-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.nav-toggle .icon--close { display: none; }

/* Mobile layout */
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--color-surface-1); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-md); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-8) 0; }
  .nav-item a, .nav-item .btn { display: block; width: 100%; padding: 12px 16px; border-radius: 0; border-bottom: 1px solid var(--color-border); }
  .nav-item:last-child a, .nav-item:last-child .btn { border-bottom: 0; }

  /* Hidden state controlled by JS for progressive enhancement */
  .site-nav.is-collapsed { display: none; }

  /* When menu is open, swap icons */
  .site-header.menu-open .nav-toggle .icon--menu { display: none; }
  .site-header.menu-open .nav-toggle .icon--close { display: inline-block; }
}

/* Skip link visible on focus */
.skip-link:focus { position: absolute; left: var(--space-16); top: var(--space-16); background: var(--color-warning); color: #0b0c0e; padding: 8px 12px; border-radius: var(--radius-md); z-index: 1100; text-decoration: none; box-shadow: var(--shadow-md); }