/* Header (builds on base.css) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-surface);
  border-bottom: 3px solid var(--color-yellow);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space-5);
  top: -100%;
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
}
.skip-link:focus { top: var(--space-3); }

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: var(--space-4);
}

/* Branding */
.logo { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 800; letter-spacing: -0.02em; }
.logo__icon { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--color-accent), var(--color-primary)); box-shadow: 0 0 0 3px rgba(20,184,166,0.15); }
.logo__text { color: var(--color-navy); }
.logo:hover .logo__text { color: var(--color-accent); text-decoration: none; }

/* Menu toggle */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--gray-100);
  color: var(--color-navy);
}
.menu-toggle:hover { background: var(--gray-200); }

/* Primary nav */
.nav-primary__list { display: inline-flex; gap: var(--space-3); align-items: center; }
.nav-primary__list a { font-weight: 700; color: var(--color-navy); padding: 10px 14px; border-radius: var(--radius-pill); }
.nav-primary__list a:hover { background: var(--gray-100); color: var(--color-accent); text-decoration: none; }

/* Backdrop (for mobile) */
.menu-backdrop { position: fixed; inset: 0; background: rgba(11,27,43,0.45); backdrop-filter: blur(2px); }
.menu-backdrop[hidden] { display: none !important; }

/* Mobile styles (enhanced when JS is enabled) */
@media (max-width: 960px) {
  .menu-toggle { display: inline-flex; }
  /* No-JS friendly: nav remains inline unless JS adds .js-enabled */
  .nav-primary__list { gap: var(--space-2); }

  /* JS-enhanced off-canvas */
  .js-enabled .nav-primary { position: fixed; top: 0; right: 0; height: 100dvh; width: min(92vw, 360px); background: var(--color-surface); box-shadow: var(--shadow-lg); border-left: 3px solid var(--color-yellow); padding: var(--space-8) var(--space-6); transform: translateX(100%); transition: transform var(--duration-slow) var(--ease-out); }
  .js-enabled .nav-primary.is-open { transform: translateX(0); z-index: 999; }
  .js-enabled .nav-primary__list { display: grid; gap: var(--space-8); }
  .js-enabled .nav-primary__list a { padding: 12px 14px; background: var(--gray-50); border: 1px solid var(--color-border); }
  .js-enabled .nav-primary__list a:hover { background: var(--gray-100); }
  .js-enabled .nav-primary[hidden] { display: none !important; }
}

/* Prevent body scroll when mobile menu is open */
.no-scroll { overflow: hidden; }