/* Header (builds on base.css) */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: linear-gradient(180deg, rgba(224,177,92,0.06), transparent 18%), var(--color-surface);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: var(--shadow-sm);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-5); }

/* Skip link */
.skip-link { position: absolute; left: var(--space-7); top: -200%; padding: var(--space-4) var(--space-6); background: var(--color-elevated); color: var(--gray-50); border: 1px solid var(--gray-700); border-radius: var(--radius-md); box-shadow: var(--shadow-md); transition: top var(--motion-base); }
.skip-link:focus { top: var(--space-6); outline: 2px solid var(--ring-color); }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--gray-50); }
.brand__icon { border-radius: var(--radius-sm); box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 8px 20px rgba(0,0,0,0.55); }
.brand__name { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; }

/* Nav */
.site-nav { display: block; }
.nav__list { display: flex; align-items: center; gap: clamp(var(--space-5), 2vw, var(--space-8)); }
.nav__link { color: var(--gray-100); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); line-height: 1; white-space: nowrap; }
.nav__link:hover { color: #fff; background: rgba(224,177,92,0.08); }
.nav__link:focus-visible { outline: 2px solid var(--ring-color); outline-offset: var(--ring-offset); }

/* Hamburger */
.nav-toggle { display: none; align-items: center; gap: var(--space-3); color: var(--gray-50); padding: var(--space-3) var(--space-4); border: 1px solid var(--gray-700); border-radius: var(--radius-md); background: var(--color-elevated); box-shadow: var(--shadow-sm); }
.nav-toggle:hover { filter: brightness(1.05); }
.nav-toggle__box { display: inline-flex; flex-direction: column; gap: 4px; }
.nav-toggle .bar { display: block; width: 22px; height: 2px; background: var(--gray-100); border-radius: 1px; transition: transform var(--motion-base), opacity var(--motion-base); }
.nav-toggle__text { font-size: var(--fs-sm); color: var(--gray-300); }

/* Mobile layout */
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { position: absolute; inset-inline: 0; top: calc(100% - 1px); background: var(--color-elevated); border-bottom: 1px solid rgba(255,255,255,0.06); box-shadow: var(--shadow-lg); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-4); }
  .nav__link { display: block; padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); }
  /* Hidden only when JS adds the attribute */
  .site-nav[data-collapsed="true"] { visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity var(--motion-base), transform var(--motion-base), visibility 0s linear var(--motion-base); }
  .site-nav:not([data-collapsed]) { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity var(--motion-base), transform var(--motion-base); }
  body.menu-open { overflow: hidden; }
  /* Animate hamburger into X when open */
  .nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}