/**
 * Header Component Enhancements
 * Comprehensive hover states and mobile navigation fixes
 */

/* Header container improvements */
header {
  position: relative;
  background: var(--site-bg);
  transition: background-color var(--transition-normal);
  z-index: var(--z-sticky);
}

/* Navigation improvements */
header nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

/* Enhanced navigation link styles */
header nav a {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  /* Disable all transitions/animations for nav links to keep interactions static */
  transition: none !important;
  animation: none !important;
  position: relative;
  display: inline-block;
}

/* Hover effects for navigation links */
header nav a:hover {
  /* Only show underline on hover; no movement or color shift */
  color: var(--accent-color);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transform: none !important;
}

/* Focus states for accessibility */
header nav a:focus {
  /* Defer visible focus to :focus-visible and use brand ring to avoid stacking */
  outline: none !important;
  box-shadow: none !important;
}

/* Active/current page state */
header nav a:active,
header nav a[aria-current='page'] {
  background: var(--accent-color);
  color: var(--text-inverse);
  text-decoration: none;
}

/* Mobile navigation enhancements */
@media (max-width: 640px) {
  header nav {
    flex-direction: column;
    gap: var(--space-4);
    padding-top: var(--space-6);
  }

  header nav a {
    width: 100%;
    max-width: 200px;
    text-align: center;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-lg);
  }

  header nav a:hover {
    /* Mobile: keep underline only, no scale or shadow */
    transform: none !important;
    box-shadow: none !important;
    text-decoration: underline;
  }
}

/* Skip link enhancements */
.sr-only:focus {
  position: absolute !important;
  top: var(--space-4) !important;
  left: var(--space-4) !important;
  background: var(--accent-color) !important;
  color: var(--text-inverse) !important;
  padding: var(--space-3) var(--space-4) !important;
  border-radius: var(--radius-md) !important;
  z-index: var(--z-toast) !important;
  font-weight: var(--font-weight-bold) !important;
  text-decoration: none !important;
  box-shadow: var(--shadow-lg) !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

/* Header title improvements */
header h1 {
  font-weight: var(--font-weight-black);
  letter-spacing: -0.025em;
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  color: var(--text-primary);
  transition: color var(--transition-normal);

  /* Enhanced responsive scaling */
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: 0.9;
}

/* Mobile-specific header adjustments */
@media (max-width: 768px) {
  header {
    min-height: 100vh;
    padding: var(--space-6) var(--space-4);
  }

  header h1 {
    font-size: clamp(2.5rem, 10vw, 6rem);
    margin-bottom: var(--space-6);
  }
}

/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 1024px) {
  header nav {
    flex-direction: row;
    gap: var(--space-6);
  }

  header nav a {
    font-size: var(--font-size-lg);
    padding: var(--space-3) var(--space-4);
  }
}

/* Dark mode specific adjustments */
.dark header nav a:focus {
  outline: none !important;
  box-shadow: none !important;
}

.dark header nav a:hover {
  color: var(--accent-light);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  header nav a {
    border: 2px solid transparent;
  }

  header nav a:hover {
    border-color: var(--accent-color);
    background: var(--accent-color);
    color: var(--text-inverse);
    text-decoration: none;
  }

  header nav a:focus {
    outline: none !important;
    box-shadow: none !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  header nav a {
    transition: none;
  }

  header nav a:hover {
    transform: none;
  }
}

/* Print styles */
@media print {
  header {
    min-height: auto;
    page-break-inside: avoid;
  }

  header nav {
    display: none;
  }
}

/* Enhanced touch targets for mobile */
@media (pointer: coarse) {
  header nav a {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Animation for smooth scrolling when clicking nav links */
html {
  scroll-behavior: smooth;
}

/* Enhanced smooth scrolling with JavaScript fallback */
@supports not (scroll-behavior: smooth) {
  html {
    overflow-x: hidden;
  }
}

/* Ensure proper stacking context */
header {
  isolation: isolate;
}

/* Fix any potential z-index issues with other components */
header nav a:focus,
header nav a:hover {
  z-index: 1;
  position: relative;
}