/**
 * Accessibility Utilities
 * =======================
 * WCAG 2.1 AA compliant accessibility utilities.
 *
 * Includes:
 * - Screen reader utilities
 * - Focus management styles
 * - Reduced motion support
 * - High contrast support
 * - Skip links
 */

/* ========================================
 * SCREEN READER UTILITIES
 * ======================================== */

/* Visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Becomes visible on focus (for skip links) */
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Live region for dynamic announcements */
.aria-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

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

/* Default focus outline for all interactive elements */
:focus-visible {
  outline: 2px solid var(--focus-ring-color, #4a90e2);
  outline-offset: 2px;
}

/* Remove default focus for mouse users (but keep for keyboard) */
:focus:not(:focus-visible) {
  outline: none;
}

/* High visibility focus for dark backgrounds */
.focus-light:focus-visible {
  outline-color: var(--focus-ring-light, #ffffff);
}

/* Focus within container - highlight entire container */
.focus-within:focus-within {
  box-shadow: 0 0 0 2px var(--focus-ring-color, #4a90e2);
}

/* Focus trap indicator - visual cue that focus is trapped */
.focus-trap-active {
  position: relative;
}

.focus-trap-active::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px dashed var(--focus-ring-color, #4a90e2);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.5;
}

/* ========================================
 * SKIP LINKS
 * ======================================== */

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 10000;
  padding: 1rem;
  background: var(--terminal-bg, #0a0a0a);
  color: var(--terminal-text-primary, #e0e0e0);
  text-decoration: none;
  font-weight: 600;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid var(--focus-ring-color, #4a90e2);
  outline-offset: 2px;
}

/* ========================================
 * REDUCED MOTION
 * Respect user's motion preferences
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep essential animations but simplify them */
  .toast,
  .tooltip,
  .modal {
    animation: none !important;
  }

  /* Disable parallax and scroll effects */
  .parallax,
  .scroll-animation {
    transform: none !important;
  }
}

/* Utility class to force animation even with reduced motion */
.motion-safe {
  /* Use with caution - only for essential feedback */
}

@media (prefers-reduced-motion: no-preference) {
  .motion-safe {
    transition: all 0.2s ease;
  }
}

/* ========================================
 * HIGH CONTRAST MODE
 * Support for Windows High Contrast mode
 * ======================================== */

@media (forced-colors: active) {
  /* Ensure borders are visible */
  .btn,
  .panel,
  .card,
  .modal,
  input,
  select,
  textarea {
    border: 1px solid CanvasText;
  }

  /* Ensure focus is visible */
  :focus-visible {
    outline: 3px solid Highlight;
  }

  /* Ensure links are distinguishable */
  a {
    text-decoration: underline;
  }

  /* Icons should use system colors */
  svg {
    fill: currentColor;
  }
}

/* ========================================
 * TOUCH TARGETS
 * Minimum 44x44px for touch accessibility
 * ======================================== */

.touch-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Larger touch target for mobile */
@media (pointer: coarse) {
  .btn,
  button,
  [role="button"],
  a:not(.text-link) {
    min-height: 44px;
    min-width: 44px;
  }

  /* Increase spacing between clickable items */
  .clickable-list > * {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

/* ========================================
 * TEXT SIZING
 * Support for user font size preferences
 * ======================================== */

/* Don't prevent text scaling */
html {
  -webkit-text-size-adjust: 100%;
}

/* Use rem for text that should scale with user preferences */
.text-scalable {
  font-size: 1rem;
  line-height: 1.5;
}

/* ========================================
 * COLOR CONTRAST UTILITIES
 * For maintaining WCAG AA compliance
 * ======================================== */

/* High contrast text on dark backgrounds */
.text-high-contrast {
  color: var(--terminal-text-primary, #e0e0e0);
  text-shadow: none;
}

/* Ensure link visibility */
.link-visible {
  color: var(--color-primary, #4a90e2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link-visible:hover {
  text-decoration-thickness: 2px;
}

/* ========================================
 * SEMANTIC STATES
 * Visual indicators for interactive states
 * ======================================== */

/* Disabled state */
[disabled],
.disabled,
[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Selected state */
[aria-selected="true"],
.selected {
  background: var(--selection-bg, rgba(74, 144, 226, 0.2));
  border-color: var(--color-primary, #4a90e2);
}

/* Current/active state */
[aria-current="true"],
[aria-current="page"],
.current {
  font-weight: 600;
  border-left: 3px solid var(--color-primary, #4a90e2);
  padding-left: calc(1rem - 3px);
}

/* Expanded state indicator */
[aria-expanded="true"] .expand-icon {
  transform: rotate(180deg);
}

/* ========================================
 * ERROR AND VALIDATION STATES
 * ======================================== */

/* Error state */
[aria-invalid="true"],
.has-error {
  border-color: var(--color-error, #ef4444) !important;
}

[aria-invalid="true"]:focus-visible,
.has-error:focus-visible {
  outline-color: var(--color-error, #ef4444);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* Error message */
.error-message,
[role="alert"] {
  color: var(--color-error, #ef4444);
  font-size: 0.875rem;
}

/* Required field indicator */
.required::after {
  content: ' *';
  color: var(--color-error, #ef4444);
}

/* ========================================
 * LOADING STATES
 * ======================================== */

[aria-busy="true"] {
  cursor: wait;
  opacity: 0.7;
}

/* ========================================
 * DIALOG/MODAL ACCESSIBILITY
 * ======================================== */

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden;
}

/* Modal backdrop should not receive focus */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay-medium-plus);
  z-index: 999;
}

/* Modal should be centered and focusable */
[role="dialog"],
[role="alertdialog"] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  max-height: 90vh;
  overflow-y: auto;
}

/* Close button should be easily identifiable */
.modal-close,
[aria-label="Close"] {
  min-width: 44px;
  min-height: 44px;
}