/*
 * Accessibility Enhancements
 * Comprehensive accessibility features for modern top page UI
 * Requirements: 5.2, 5.3, 5.4
 */

/* ===== FOCUS MANAGEMENT ===== */

/* Enhanced focus indicators */
:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-base);
}

/* Focus-visible support for better UX */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-base);
  box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.2);
}

/* High contrast focus indicators */
@media (prefers-contrast: high) {
  :focus,
  :focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(108, 92, 231, 0.4);
  }
}

/* ===== KEYBOARD NAVIGATION ENHANCEMENTS ===== */

/* Skip to main content link */
.skip-to-main {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  border-radius: var(--radius-base);
  font-weight: var(--font-weight-semibold);
  z-index: var(--z-modal);
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-to-main:focus {
  top: 6px;
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

/* Enhanced keyboard navigation for cards */
.navigation-card {
  position: relative;
}

.navigation-card:focus {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  box-shadow: 
    var(--shadow-lg),
    0 0 0 6px rgba(108, 92, 231, 0.2);
  transform: translateY(-4px) scale(1.01);
}

.navigation-card:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  box-shadow: 
    var(--shadow-lg),
    0 0 0 6px rgba(108, 92, 231, 0.2);
}

/* Keyboard activation feedback */
.navigation-card[data-keyboard-activated] {
  background: var(--glass-bg-light);
  transform: translateY(-2px) scale(0.98);
  transition: all var(--duration-fast) var(--ease-out);
}

/* ===== SCREEN READER ENHANCEMENTS ===== */

/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Screen reader only content that becomes visible on focus */
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: var(--space-2) var(--space-4);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-base);
  z-index: var(--z-modal);
}

/* Enhanced ARIA live regions */
.live-region {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Status announcements - Disabled for mobile stability */
.status-announcement {
  display: none;
}

/* ===== HIGH CONTRAST MODE SUPPORT ===== */

@media (prefers-contrast: high) {
  /* Enhanced contrast for all interactive elements */
  .navigation-card {
    background: var(--color-white);
    border: 2px solid var(--color-gray-900);
    color: var(--color-gray-900);
  }
  
  .navigation-card:hover,
  .navigation-card:focus {
    background: var(--color-gray-100);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary);
  }
  
  .navigation-card-icon {
    background: var(--color-primary);
    border: 2px solid var(--color-gray-900);
  }
  
  .navigation-card-title {
    color: var(--color-gray-900);
    font-weight: var(--font-weight-bold);
  }
  
  .navigation-card-description {
    color: var(--color-gray-700);
    font-weight: var(--font-weight-medium);
  }
  
  /* Hero section high contrast */
  .hero-section {
    background: var(--color-primary);
    color: var(--color-white);
  }
  
  .hero-title,
  .hero-subtitle,
  .hero-description {
    color: var(--color-white);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  }
  
  /* Header high contrast */
  .modern-header {
    background: var(--color-white);
    border-bottom: 2px solid var(--color-gray-900);
  }
  
  .modern-header__nav-link {
    color: var(--color-gray-900);
    border: 1px solid transparent;
  }
  
  .modern-header__nav-link:hover,
  .modern-header__nav-link:focus {
    background: var(--color-gray-100);
    border-color: var(--color-primary);
  }
}

/* ===== REDUCED MOTION PREFERENCES ===== */

@media (prefers-reduced-motion: reduce) {
  /* Disable all animations and transitions */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Remove transform animations */
  .navigation-card:hover,
  .navigation-card:focus {
    transform: none;
  }
  
  .navigation-card-icon:hover {
    transform: none;
  }
  
  /* Maintain focus indicators without animation */
  .navigation-card:focus {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(108, 92, 231, 0.3);
  }
  
  /* Static hero section */
  .hero-section,
  .hero-section::before,
  .hero-section::after {
    animation: none;
    background: var(--color-primary);
  }
  
  .hero-content,
  .hero-title,
  .hero-subtitle,
  .hero-description {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ===== COLOR CONTRAST ENHANCEMENTS ===== */

/* Ensure minimum contrast ratios */
.navigation-card-title {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.navigation-card-description {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-normal);
}



/* ===== TOUCH TARGET ENHANCEMENTS ===== */

/* Ensure minimum touch target size (44px x 44px) */
.navigation-card,
.modern-header__nav-link,
.modern-header__mobile-toggle,
.theme-toggle {
  min-height: 44px;
  min-width: 44px;
}

/* Enhanced touch targets for mobile */
@media (max-width: 768px) {
  .navigation-card {
    min-height: 48px;
    padding: var(--space-6) var(--space-4);
  }
  
  .modern-header__nav-link {
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
  }
  
  .modern-header__mobile-toggle {
    min-height: 48px;
    min-width: 48px;
  }
}

/* ===== SEMANTIC HTML ENHANCEMENTS ===== */

/* Ensure proper heading hierarchy */
.hero-title {
  /* Already h1 in template */
}

.navigation-title {
  /* Already h2 in template */
}

.navigation-card-title {
  /* Already h3 in template */
}

/* ===== ARIA ENHANCEMENTS ===== */

/* Loading states with ARIA - Disabled for mobile stability */
.navigation-card[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}

/* Error states with ARIA */
.navigation-card[aria-invalid="true"] {
  border-color: var(--color-error);
  background: rgba(225, 112, 85, 0.1);
}

.navigation-card[aria-invalid="true"] .navigation-card-icon {
  background: var(--color-error);
}

/* ===== KEYBOARD SHORTCUTS HELP ===== */

.keyboard-shortcuts-help {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-white);
  border: 2px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 400px;
  z-index: var(--z-modal);
  box-shadow: var(--shadow-xl);
  display: none;
}

.keyboard-shortcuts-help.show {
  display: block;
}

.keyboard-shortcuts-help h3 {
  margin: 0 0 var(--space-4) 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.keyboard-shortcuts-help ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.keyboard-shortcuts-help li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-gray-200);
}

.keyboard-shortcuts-help li:last-child {
  border-bottom: none;
}

.keyboard-shortcuts-help kbd {
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
}

/* ===== RESPONSIVE ACCESSIBILITY ===== */

/* Ensure accessibility features work on all screen sizes */
@media (max-width: 768px) {
  .skip-to-main {
    left: var(--space-2);
    right: var(--space-2);
    width: auto;
  }
  
  .status-announcement {
    left: var(--space-2);
    right: var(--space-2);
    transform: none;
  }
  
  .keyboard-shortcuts-help {
    left: var(--space-2);
    right: var(--space-2);
    transform: translateY(-50%);
    max-width: none;
  }
}

/* ===== PRINT ACCESSIBILITY ===== */

@media print {
  /* Ensure content is accessible in print */
  .sr-only {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    overflow: visible;
    white-space: normal;
  }
  
  .navigation-card {
    border: 1px solid #000;
    background: #fff;
    color: #000;
    page-break-inside: avoid;
  }
  
  .navigation-card-icon {
    background: #000;
  }
  
  /* Hide interactive elements that don't work in print */
  .theme-toggle,
  .modern-header__mobile-toggle {
    display: none;
  }
}

/* ===== FORCED COLORS MODE (Windows High Contrast) ===== */

@media (forced-colors: active) {
  .navigation-card {
    background: Canvas;
    border: 1px solid ButtonText;
    color: CanvasText;
  }
  
  .navigation-card:hover,
  .navigation-card:focus {
    background: Highlight;
    color: HighlightText;
    border-color: HighlightText;
  }
  
  .navigation-card-icon {
    background: ButtonFace;
    border: 1px solid ButtonText;
  }
  
  .navigation-card-icon svg {
    fill: ButtonText;
  }
  
  .hero-section {
    background: Canvas;
    color: CanvasText;
  }
  
  .hero-title,
  .hero-subtitle,
  .hero-description {
    color: CanvasText;
  }
}

/* ===== ACCESSIBILITY UTILITIES ===== */

/* Hide decorative elements from screen readers */
.decorative {
  aria-hidden: true;
}

/* Ensure interactive elements are properly labeled */
[role="button"]:not([aria-label]):not([aria-labelledby]) {
  /* This will be handled by JavaScript */
}

/* Focus trap for modal dialogs */
.focus-trap {
  position: relative;
}

.focus-trap::before,
.focus-trap::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ===== ANIMATION PERFORMANCE FOR ACCESSIBILITY ===== */

/* Optimize animations for users with vestibular disorders */
@media (prefers-reduced-motion: no-preference) {
  /* Only apply complex animations if user hasn't requested reduced motion */
  .navigation-card {
    transition: transform var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out),
                background var(--duration-normal) var(--ease-out);
  }
  
  .navigation-card:hover {
    transform: translateY(-4px) scale(1.01);
  }
  
  .navigation-card:focus {
    transform: translateY(-4px) scale(1.01);
  }
}

/* ===== LANGUAGE AND DIRECTION SUPPORT ===== */

/* RTL language support */
[dir="rtl"] .navigation-card {
  text-align: right;
}

[dir="rtl"] .skip-to-main {
  left: auto;
  right: 6px;
}

[dir="rtl"] .status-announcement {
  left: auto;
  right: 50%;
  transform: translateX(50%);
}

/* ===== ACCESSIBILITY TESTING HELPERS ===== */

/* Development mode accessibility indicators */
.a11y-debug .navigation-card:not([aria-label]):not([aria-labelledby]) {
  outline: 2px dashed red !important;
}

.a11y-debug img:not([alt]) {
  outline: 2px dashed red !important;
}

.a11y-debug [role="button"]:not([aria-label]):not([aria-labelledby]) {
  outline: 2px dashed orange !important;
}