// ==========================================================================
// ACCESSIBILITY UTILITIES
// ==========================================================================
// Main accessibility utility file that imports all utilities
// ==========================================================================

@use '../tokens/a11y-tokens' as tokens;

// Import all utility modules
@forward 'focus-visible';
@forward 'screen-reader';

// Skip links styles
.skip-links {
  position: fixed;
  top: 0;
  left: 0;
  z-index: tokens.$a11y-skip-link-z-index;
  
  .skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: tokens.$a11y-skip-link-bg;
    color: tokens.$a11y-skip-link-color;
    padding: tokens.$a11y-skip-link-padding-y tokens.$a11y-skip-link-padding-x;
    text-decoration: none;
    border: 1px solid tokens.$a11y-skip-link-border;
    border-radius: tokens.$a11y-skip-link-border-radius;
    box-shadow: tokens.$a11y-skip-link-shadow;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all tokens.$a11y-focus-transition-duration tokens.$a11y-focus-transition-timing;
    
    &:focus {
      top: 6px;
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    
    // Multiple skip links positioning
    &:nth-child(2):focus {
      top: 50px;
    }
    
    &:nth-child(3):focus {
      top: 94px;
    }
  }
}

// Touch target sizing
.touch-target {
  min-height: tokens.$a11y-min-touch-target;
  min-width: tokens.$a11y-min-touch-target;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

// Error announcements
.error-announcement {
  @extend .sr-only;
  
  &.error-visible {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    color: tokens.$a11y-error-color;
    font-weight: 600;
    margin-top: 4px;
  }
}

// Loading announcements
.loading-announcement {
  @extend .sr-only;
}

// Keyboard navigation indicators
.keyboard-navigation {
  // Hide mouse focus indicators when using keyboard navigation
  &.using-mouse {
    * {
      &:focus:not(:focus-visible) {
        outline: none;
        box-shadow: none;
      }
    }
  }
  
  // Enhanced focus indicators when using keyboard
  &.using-keyboard {
    *:focus-visible {
      outline: 2px solid tokens.$a11y-focus-color;
      outline-offset: 2px;
    }
  }
}

// High contrast mode utilities
@media (prefers-contrast: high) {
  .high-contrast-border {
    border: 1px solid tokens.$a11y-high-contrast-border-color !important;
  }
  
  .high-contrast-bg {
    background: tokens.$a11y-high-contrast-bg-color !important;
    color: tokens.$a11y-high-contrast-text-color !important;
  }
  
  // Remove shadows and transparency in high contrast
  * {
    text-shadow: none !important;
    box-shadow: none !important;
  }
  
  // Ensure sufficient contrast for interactive elements
  button,
  [role="button"],
  a,
  input,
  select,
  textarea {
    border: 1px solid tokens.$a11y-high-contrast-border-color;
  }
}

// Reduced motion utilities
@media (prefers-reduced-motion: reduce) {
  .respect-reduced-motion {
    * {
      animation-duration: tokens.$a11y-reduced-motion-duration !important;
      animation-iteration-count: 1 !important;
      transition-duration: tokens.$a11y-reduced-motion-duration !important;
      scroll-behavior: auto !important;
    }
  }
}

// ARIA live region styling
.aria-live-region {
  @extend .live-region;
  
  &.aria-live-assertive {
    speak: literal;
  }
  
  &.aria-live-polite {
    speak: spell-out;
  }
}

// Focus management utilities
.focus-within-highlight {
  &:focus-within {
    outline: 1px solid tokens.$a11y-focus-color;
    outline-offset: 2px;
  }
}

// Accessible hide/show animations
@keyframes fadeInA11y {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOutA11y {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.fade-in-a11y {
  animation: fadeInA11y tokens.$a11y-animation-fade-duration tokens.$a11y-focus-transition-timing;
}

.fade-out-a11y {
  animation: fadeOutA11y tokens.$a11y-animation-fade-duration tokens.$a11y-focus-transition-timing;
}

// Respect reduced motion for animations
@media (prefers-reduced-motion: reduce) {
  .fade-in-a11y,
  .fade-out-a11y {
    animation-duration: tokens.$a11y-reduced-motion-duration;
    animation-timing-function: tokens.$a11y-reduced-motion-easing;
  }
}

// Arrow navigation visual indicators (dev mode)
.arrow-navigation-active {
  &.arrow-navigation-debug {
    position: relative;
    
    &::before {
      content: '← ↑ ↓ → Arrow Navigation';
      position: absolute;
      top: -20px;
      right: 0;
      font-size: 12px;
      color: tokens.$a11y-focus-color;
      background: tokens.$a11y-skip-link-bg;
      padding: 2px 6px;
      border-radius: 3px;
      z-index: 1000;
      pointer-events: none;
    }
  }
  
  // Highlight navigable items
  [tabindex="0"] {
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      border: 1px dashed tokens.$a11y-focus-color;
      pointer-events: none;
      opacity: 0.3;
    }
  }
}