/* Header component styles */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: linear-gradient(180deg, var(--color-black-glossy) 0%, var(--color-navy) 100%);
  border-bottom: 1px solid var(--color-gray-800);
  box-shadow: var(--shadow-base);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  background: var(--color-gold);
  color: var(--color-navy);
  padding: var(--space-2) var(--space-4);
  z-index: var(--z-fixed);
}

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

.brand-wrap { display: flex; align-items: center; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-gold);
  font-family: var(--font-accent);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.brand:hover { color: var(--color-gold-light); }
.brand-mark { color: var(--color-crimson); text-shadow: 0 0 6px rgba(220,20,60,0.6); }
.brand-text { font-size: 1.125rem; }

/* Navigation */
.primary-nav { display: flex; align-items: center; gap: var(--space-6); }
.nav-list { display: flex; align-items: center; gap: var(--space-6); list-style: none; padding: 0; margin: 0; }
.nav-item a {
  color: var(--color-gray-100);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-base);
  transition: color var(--transition-base) var(--ease-out), background-color var(--transition-base) var(--ease-out);
}
.nav-item a:hover,
.nav-item a:focus-visible {
  color: var(--color-white);
  background-color: var(--color-navy-light);
}

.nav-cta-wrap { display: inline-flex; }
.header-cta { white-space: nowrap; box-shadow: var(--shadow-glow-gold); }

/* Menu toggle (mobile) */
.menu-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 2px solid var(--color-gray-700);
  border-radius: var(--radius-base);
  color: var(--color-gold);
}
.menu-toggle:hover { border-color: var(--color-gold); }
.menu-toggle:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 3px; }
.menu-toggle-box { display: inline-flex; flex-direction: column; gap: 4px; }
.menu-bar { width: 22px; height: 2px; background: var(--color-gold); border-radius: var(--radius-full); transition: transform var(--transition-base) var(--ease-out), opacity var(--transition-base) var(--ease-out); }
.menu-toggle.is-active .menu-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-active .menu-bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-active .menu-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-toggle-text { font-size: var(--font-size-sm); }

/* Responsive behavior */
@media (max-width: 992px) {
  .menu-toggle { display: inline-flex; }
  .primary-nav { width: 100%; }

  /* Progressive enhancement: only collapse when JS enables it */
  .site-header.js-nav-enabled .primary-nav {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: linear-gradient(180deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
    border-bottom: 1px solid var(--color-gray-800);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height var(--transition-slower) var(--ease-out), opacity var(--transition-base) var(--ease-out), visibility var(--transition-base) var(--ease-out);
  }
  .site-header.js-nav-enabled.is-open .primary-nav {
    max-height: 480px; /* large enough for all items */
    visibility: visible;
    opacity: 1;
  }
  .site-header .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6) 0 var(--space-6);
  }
  .site-header .nav-cta-wrap { width: 100%; padding: var(--space-4) var(--space-6) var(--space-6) var(--space-6); }
  .site-header .header-cta { width: 100%; }
}