/* Header (scoped) */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--color-surface); border-bottom: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); }
.header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 70px; gap: var(--space-6); }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--color-primary); font-weight: 800; letter-spacing: -0.01em; }
.brand:hover { color: var(--color-accent); text-decoration: none; }
.brand__name { font-size: clamp(1.125rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1; }

/* Navigation */
.site-nav { /* desktop defaults */ }
.nav__list { display: flex; align-items: center; gap: var(--space-6); }
.nav__link { display: inline-flex; align-items: center; padding: 0.5rem 0.25rem; border-radius: var(--radius-sm); font-weight: 600; color: var(--color-text); }
.nav__link:hover { color: var(--color-accent); text-decoration: none; }
.nav__link:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.nav__link[aria-current="page"] { color: var(--color-primary); position: relative; }
.nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--color-accent); border-radius: var(--radius-xs); }

/* Menu toggle (mobile) */
.menu-toggle { display: none; align-items: center; gap: var(--space-3); padding: 0.5rem 0.75rem; border-radius: var(--radius-pill); color: var(--color-text); border: 1px solid var(--gray-300); background: #fff; }
.menu-toggle:hover { border-color: var(--color-primary); }
.menu-toggle:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.menu-toggle__text { font-weight: 600; }
.menu-toggle .icon--close { display: none; }
.menu-toggle[aria-expanded="true"] .icon--menu { display: none; }
.menu-toggle[aria-expanded="true"] .icon--close { display: inline-block; }

/* Skip link */
.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { left: var(--space-8); top: var(--space-6); width: auto; height: auto; padding: 0.5rem 0.75rem; background: #fff; color: var(--color-text); border: 1px solid var(--gray-300); border-radius: var(--radius-pill); box-shadow: var(--focus-ring); z-index: 100; }

/* Responsive: mobile menu */
@media (max-width: 960px) {
  .menu-toggle { display: inline-flex; }
  /* Progressive enhancement: hide only when JS is available */
  .js #primary-navigation { display: none; }
  .js #primary-navigation.is-open { display: block; }

  #primary-navigation { position: absolute; left: 0; right: 0; top: 100%; background: var(--color-surface); border-bottom: 1px solid var(--gray-200); box-shadow: var(--shadow-md); }
  .nav__list { flex-direction: column; align-items: flex-start; gap: 0; padding: var(--space-5) var(--space-8); }
  .nav__link { width: 100%; padding: 0.75rem 0; border-radius: var(--radius-md); }
  .nav__link[aria-current="page"]::after { bottom: 0; }
}

/* Brand logo (responsive) */
.brand__logo { display: block; width: 120px; height: auto; }
@media (max-width: 480px) {
  .brand__logo { width: 80px; max-width: 100%; }
}