/* Header (scoped) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(18,25,35,0.92), rgba(18,25,35,0.80));
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  background: var(--color-primary);
  color: #03161a;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.skip-link:focus {
  left: var(--space-16);
  top: var(--space-16);
}

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

/* Brand */
.brand-wrap { display: flex; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text); font-weight: 800; font-size: 1.125rem; letter-spacing: 0.02em; }
.brand:hover { color: var(--color-text); text-shadow: 0 0 12px rgba(0,229,255,0.25); }
.brand-mark { width: 28px; height: 28px; border-radius: 6px; background:
  conic-gradient(from 180deg at 50% 50%, var(--color-primary), var(--color-accent), var(--color-primary));
  box-shadow: 0 0 0 2px rgba(255,255,255,0.06), 0 0 18px rgba(0,229,255,0.25);
}
.brand-text { font-family: var(--font-display); }

/* Navigation */
.primary-nav { display: flex; align-items: center; gap: var(--space-16); }
.nav-list { display: flex; align-items: center; gap: clamp(10px, 2.5vw, 22px); }
.nav-list a { color: var(--color-text); font-weight: 600; font-size: var(--text-sm); }
.nav-list a:hover { color: var(--color-primary); }

/* Search */
.site-search { display: inline-flex; align-items: center; gap: 8px; margin-left: var(--space-8); }
.search-input { width: min(38vw, 280px); }
.search-btn { padding: 10px 12px; }

/* Toggle */
.menu-toggle { display: none; align-items: center; gap: 10px; }
.menu-icon { display: inline-flex; flex-direction: column; gap: 4px; width: 20px; }
.menu-icon span { display: block; height: 2px; width: 100%; background: var(--color-text); transition: transform var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing); border-radius: 2px; }

/* Mobile behavior (progressive enhancement):
   Nav is visible by default. When JS is enabled, we add .js-enabled to .site-header and control visibility. */
@media (max-width: 960px) {
  .menu-toggle { display: inline-flex; }
  .site-header .primary-nav { flex: 1 1 auto; }
  .site-header.js-enabled .primary-nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--color-elevated);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: var(--shadow-lg);
    padding: var(--space-16);
    display: block;
  }
  .site-header.js-enabled .primary-nav[hidden] { display: none !important; }
  .site-header.js-enabled .nav-list { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: var(--space-12); }
  .site-header.js-enabled .nav-list a { padding: 10px 8px; border-radius: var(--radius-sm); }
  .site-header.js-enabled .nav-list a:focus-visible { outline-offset: 3px; }
  .site-header .site-search { width: 100%; }
  .site-header .search-input { width: 100%; }
}

/* Toggle active state (animate burger to X) */
.site-header.is-open .menu-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.is-open .menu-icon span:nth-child(2) { opacity: 0; }
.site-header.is-open .menu-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }