/* Header styles scoped to .site-header */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-fixed);
  background: linear-gradient(180deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.85) 100%);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--color-neutral-800);
}

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

/* Brand */
.brand-link { display: inline-flex; align-items: center; gap: var(--space-3); }
.brand-name {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.brand img { filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6)); border-radius: var(--radius-full); }

/* Navigation */
.primary-nav { display: flex; align-items: center; gap: var(--space-6); }
.nav-list { display: flex; align-items: center; gap: var(--space-6); }
.nav-list a {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
}
.nav-list a:hover { background-color: var(--color-bg-tertiary); }

/* Search */
.site-search { display: inline-flex; align-items: center; gap: var(--space-2); }
.search-input { width: 18ch; }
@media (min-width: 1024px) { .search-input { width: 28ch; } }
.search-submit i { font-size: 0.95em; }

/* Menu toggle (mobile) */
.menu-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-primary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-neutral-800);
}
.menu-toggle:hover { background-color: var(--color-bg-tertiary); }
.menu-icon { display: inline-flex; flex-direction: column; gap: 4px; }
.menu-icon span { width: 20px; height: 2px; background: var(--color-text-primary); border-radius: var(--radius-full); transition: transform var(--transition-base) var(--transition-ease), opacity var(--transition-base) var(--transition-ease); }

/* Backdrop for mobile nav */
.nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); z-index: var(--z-sticky); opacity: 0; pointer-events: none; transition: opacity var(--transition-base) var(--transition-ease); }

/* JS-enhanced responsive behavior: hide nav on small screens only when JS is available */
@media (max-width: 1024px) {
  .menu-toggle { display: inline-flex; }
  .js .primary-nav { 
    position: fixed; 
    top: 0; right: 0; bottom: 0; 
    width: min(92vw, 360px);
    background: var(--color-bg-secondary);
    border-left: 1px solid var(--color-neutral-800);
    box-shadow: var(--shadow-2xl);
    padding: var(--space-8) var(--space-6);
    display: flex; flex-direction: column; gap: var(--space-6);
    transform: translateX(100%);
    transition: transform var(--transition-slow) var(--transition-ease);
    z-index: var(--z-fixed);
  }
  .js .nav-list { flex-direction: column; align-items: flex-start; gap: var(--space-4); background: var(--color-bg-secondary); width: 100%; }
  .js .site-search { width: 100%; }
  .js .search-input { width: 100%; }

  .js .primary-nav.is-open { transform: translateX(0); }
  .js .nav-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }

  /* Transform hamburger to close */
  .menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* Focus states */
.site-header a:focus-visible, .menu-toggle:focus-visible { outline: 2px solid var(--color-accent-blue); outline-offset: 4px; }