/* Header styles scoped to .site-header */
.site-header { 
  position: sticky; top: 0; z-index: 1000; 
  background: linear-gradient(180deg, #0b0e14 0%, #0b0e14cc 100%);
  backdrop-filter: saturate(140%) blur(6px);
  color: #e6f1ff;
  border-bottom: 1px solid rgba(0, 229, 255, 0.18);
}
.site-header .header-inner { 
  max-width: 1200px; margin: 0 auto; 
  display: flex; align-items: center; justify-content: space-between; 
  padding: 0.75rem 1rem; 
}

/* Brand */
.site-header .brand a { 
  font-family: 'Orbitron', system-ui, sans-serif; 
  font-weight: 700; letter-spacing: 0.04em; 
  color: #e6f1ff; text-decoration: none; 
  text-shadow: 0 0 6px rgba(0,229,255,0.45), 0 0 24px rgba(255,46,147,0.25);
  white-space: nowrap;
}
.site-header .brand a:focus-visible { outline: 2px solid #00e5ff; outline-offset: 3px; border-radius: 4px; }

/* Nav list */
.primary-nav { 
  /* visible by default for no-JS scenario */
}
.primary-nav .nav-list { 
  list-style: none; margin: 0; padding: 0; 
  display: flex; gap: 0.5rem; align-items: center; 
}
.primary-nav a { 
  display: inline-block; padding: 0.5rem 0.75rem; 
  color: #cfe8ff; text-decoration: none; font-family: 'Inter', system-ui, sans-serif; 
  border-radius: 0.5rem; transition: color .2s ease, background-color .2s ease, box-shadow .2s ease; 
}
.primary-nav a:hover { color: #ffffff; background-color: rgba(0,229,255,0.08); }
.primary-nav a:focus-visible { outline: 2px dashed #00e5ff; outline-offset: 3px; }
.primary-nav a.cta { 
  color: #0b0e14; background: linear-gradient(90deg, #00e5ff, #ff2e93); 
  box-shadow: 0 0 16px rgba(0,229,255,0.25), inset 0 0 8px rgba(255,46,147,0.3);
}
.primary-nav a.cta:hover { filter: brightness(1.08); }

/* Toggle (hamburger) */
.nav-toggle { 
  display: none; position: relative; 
  width: 44px; height: 44px; border: 1px solid rgba(0,229,255,0.25); 
  background: #101521; color: #e6f1ff; border-radius: 0.5rem; 
}
.nav-toggle:focus-visible { outline: 2px solid #ff2e93; outline-offset: 3px; }
.nav-toggle .bar { position: absolute; left: 9px; right: 9px; height: 2px; background: #e6f1ff; border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
.nav-toggle .bar:nth-child(2) { top: 14px; }
.nav-toggle .bar:nth-child(3) { top: 21px; }
.nav-toggle .bar:nth-child(4) { top: 28px; }

/* When expanded, transform to X */
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

/* Skip link */
.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { position: static; width: auto; height: auto; margin: 0.5rem; padding: 0.5rem 0.75rem; background: #00e5ff; color: #0b0e14; border-radius: 0.375rem; z-index: 1001; }

/* Visually hidden utility */
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* Responsive: collapse on small screens only when JS is enabled */
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  html.js .primary-nav { 
    position: absolute; right: 1rem; left: 1rem; top: calc(100% + 0.5rem); 
    background: #0b0e14; border: 1px solid rgba(0,229,255,0.15); border-radius: 0.75rem; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    padding: 0.5rem; 
    transform-origin: top right; 
    transform: scale(0.98); opacity: 0; visibility: hidden; 
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; 
  }
  html.js .primary-nav.is-open { 
    transform: scale(1); opacity: 1; visibility: visible; transition-delay: 0s; 
  }
  .primary-nav .nav-list { flex-direction: column; align-items: stretch; gap: 0.25rem; }
  .primary-nav a { padding: 0.75rem; }
}