/**
 * 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;
}

/* ========================================
 * TERMINAL-SPECIFIC FOCUS STYLES
 * Enhanced focus indicators for game UI
 * ======================================== */

/* Panel focus - golden glow for terminal theme */
.panel:focus-within,
.split-panel:focus-within {
  box-shadow: 0 0 0 2px var(--color-gold, #ffd700);
}

/* Narrative entry focus */
.narrative-entry:focus-visible {
  outline: 2px solid var(--color-gold, #ffd700);
  outline-offset: 2px;
  background: rgba(255, 215, 0, 0.05);
}

/* Menu item focus - consistent left border indicator */
.room-menu__item:focus-visible,
.world-menu__item:focus-visible,
.session-menu-dropdown .menu-item:focus-visible {
  outline: none;
  background: var(--color-bg-hover);
  box-shadow: inset 3px 0 0 var(--color-gold, #ffd700);
}

/* Card/option focus - scale and glow effect */
.world-selector__option:focus-visible,
.lobby-welcome__action:focus-visible,
.quest-card:focus-visible,
.inventory-item:focus-visible {
  outline: 2px solid var(--color-gold, #ffd700);
  outline-offset: 2px;
  transform: translateX(4px);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
}

/* Form control focus - terminal style */
.terminal-input:focus-visible,
input[type="text"]:focus-visible,
input[type="number"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--color-gold, #ffd700);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
}

/* ========================================
 * KEYBOARD NAVIGATION PATTERNS
 * Roving tabindex and arrow key navigation
 * ======================================== */

/* Roving tabindex container */
[data-keyboard-nav="roving"] [tabindex="-1"]:focus-visible {
  outline: 2px solid var(--color-gold, #ffd700);
  outline-offset: -2px;
}

/* List navigation - highlight current item */
[role="listbox"] [role="option"]:focus,
[role="listbox"] [role="option"][aria-selected="true"],
[role="menu"] [role="menuitem"]:focus,
[role="tablist"] [role="tab"]:focus-visible {
  outline: none;
  background: var(--color-bg-hover, rgba(255, 215, 0, 0.1));
  box-shadow: inset 3px 0 0 var(--color-gold, #ffd700);
}

/* Grid navigation (e.g., inventory) */
[role="grid"] [role="gridcell"]:focus-visible {
  outline: 2px solid var(--color-gold, #ffd700);
  outline-offset: -2px;
  z-index: 1;
}

/* Tab panel focus */
[role="tabpanel"]:focus-visible {
  outline: 2px dashed var(--color-gold, #ffd700);
  outline-offset: 4px;
}

/* ========================================
 * SCREEN READER GAME ANNOUNCEMENTS
 * ======================================== */

/* Combat/narrative/status announcers - visually hidden */
.combat-announcer,
.narrative-announcer,
.status-announcer,
[aria-live="assertive"].combat-event,
[aria-live="polite"].narrative-event,
[aria-live="polite"].status-update {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
 * GAME-SPECIFIC SKIP LINKS
 * ======================================== */

.skip-links {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
}

.skip-links a {
  display: block;
  padding: 12px 16px;
  background: var(--color-bg-primary, #0a0a0a);
  color: var(--color-gold, #ffd700);
  text-decoration: none;
  font-weight: 600;
  border: 2px solid var(--color-gold, #ffd700);
  border-radius: 4px;
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}

.skip-links a:focus {
  transform: translateY(0);
  outline: none;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

/* ========================================
 * KEYBOARD SHORTCUT HINTS
 * ======================================== */

.kbd,
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  box-shadow: 0 2px 0 var(--color-border-default);
}

/* ========================================
 * HIGH CONTRAST MODE ENHANCEMENTS
 * ======================================== */

@media (prefers-contrast: more) {
  :root {
    --color-text-primary: #ffffff;
    --color-text-secondary: #d1d5db;
    --color-text-muted: #9ca3af;
    --color-border-default: #6b7280;
  }

  .panel,
  .card,
  .modal,
  .narrative-entry,
  input,
  select,
  textarea {
    border-width: 2px;
  }

  :focus-visible {
    outline-width: 3px;
    outline-offset: 3px;
  }
}

/* Windows high contrast - terminal specific */
@media (forced-colors: active) {
  .narrative-entry {
    border: 2px solid CanvasText;
    margin-bottom: 8px;
  }

  .narrative-entry.dm-message {
    border-color: Highlight;
  }

  .narrative-entry.player-message {
    border-color: LinkText;
  }

  .combat-turn-indicator,
  .current-turn {
    border: 3px solid Highlight;
    background: Canvas;
  }

  .hp-bar,
  .xp-bar {
    border: 2px solid CanvasText;
  }

  .hp-bar__fill,
  .xp-bar__fill {
    background: Highlight;
  }

  .btn,
  button {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }

  .btn:hover,
  button:hover {
    border-color: Highlight;
  }

  .panel-header {
    border-bottom: 2px solid CanvasText;
  }

  .status-bar {
    border-bottom: 2px solid CanvasText;
  }
}

/* ========================================
 * ANIMATION SAFETY
 * ======================================== */

/* User preference to disable animations */
.no-animations *,
.no-animations *::before,
.no-animations *::after {
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .typing-indicator,
  .thinking-indicator,
  .loading-spinner,
  .pulse,
  .bounce {
    animation: none;
  }

  .typing-indicator span,
  .thinking-indicator__dots span {
    opacity: 1;
  }
}