/*
 * BookVitae Accessibility Module
 * Comprehensive accessibility support that integrates with the design system
 * Subtle visual indicators that enhance rather than interfere with UX
 */

/* ===== ACCESSIBILITY FOUNDATIONS ===== */

/* Enhanced screen reader only - more robust than standard sr-only */
.a11y-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  clip-path: inset(50%) !important;
}

/* Show sr-only content when focused - useful for skip links */
.a11y-sr-only:focus,
.a11y-sr-only:active {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: var(--space-2) var(--space-3) !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  clip-path: none !important;
  background: var(--gray-10) !important;
  color: var(--gray-0) !important;
  border: var(--border-width-2) solid var(--color-primary) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-medium) !important;
  text-decoration: none !important;
  z-index: var(--z-max) !important;
}

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

.a11y-skip-links {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-max);
  background: transparent;
  pointer-events: none;
}

.a11y-skip-link {
  position: absolute;
  top: -100vh;
  left: var(--space-4);
  background: var(--gray-10);
  color: var(--gray-0);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border: var(--border-width-2) solid var(--color-primary);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all var(--transition-fast);
  pointer-events: auto;
}

.a11y-skip-link:focus,
.a11y-skip-link:active {
  top: var(--space-4);
  transform: none;
}

.a11y-skip-link:hover {
  background: var(--color-primary);
  color: var(--gray-0);
}

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

/* Enhanced focus indicators - subtle but visible */
.a11y-focus-visible:focus-visible {
  outline: var(--border-width-2) solid var(--color-primary);
  outline-offset: var(--space-1);
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.2);
  border-radius: var(--radius-xs);
}

/* Special focus for interactive elements */
.a11y-focus-visible.nav__link:focus-visible,
.a11y-focus-visible.btn:focus-visible,
.a11y-focus-visible[role="button"]:focus-visible {
  outline: var(--border-width-2) solid var(--color-primary);
  outline-offset: var(--space-1);
  box-shadow: inset 0 0 0 var(--border-width-1) var(--color-primary);
  background-color: var(--bg-hover);
}

/* Input focus enhancement */
.a11y-focus-visible.form__input:focus-visible,
.a11y-focus-visible.form__textarea:focus-visible,
.a11y-focus-visible.form__select:focus-visible {
  outline: var(--border-width-2) solid var(--color-primary);
  outline-offset: 0;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}

/* ===== LANDMARK INDICATORS ===== */

/* Subtle visual indicators for main landmarks */
.a11y-landmark-indicator {
  position: relative;
}

.a11y-landmark-indicator::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: transparent;
  transition: background-color var(--transition-fast);
  opacity: 0;
}

/* Show landmark indicators on focus within or when specifically enabled */
.a11y-landmarks-visible .a11y-landmark-indicator::before,
.a11y-landmark-indicator:focus-within::before {
  opacity: 1;
}

[role="banner"].a11y-landmark-indicator::before,
header.a11y-landmark-indicator::before {
  background: linear-gradient(to bottom, var(--color-primary), transparent);
}

[role="navigation"].a11y-landmark-indicator::before,
nav.a11y-landmark-indicator::before {
  background: linear-gradient(to bottom, var(--color-secondary), transparent);
}

[role="main"].a11y-landmark-indicator::before,
main.a11y-landmark-indicator::before {
  background: linear-gradient(to bottom, var(--color-accent), transparent);
}

[role="contentinfo"].a11y-landmark-indicator::before,
footer.a11y-landmark-indicator::before {
  background: linear-gradient(to bottom, var(--color-muted), transparent);
}

/* ===== ENHANCED FORM ACCESSIBILITY ===== */

/* Required field indicators */
.a11y-required {
  position: relative;
}

.a11y-required::after {
  content: ' *';
  color: var(--color-error);
  font-weight: var(--font-semibold);
  margin-left: var(--space-1);
}

/* Error states with enhanced visibility */
.a11y-error {
  border-color: var(--color-error) !important;
  background-color: rgba(var(--color-error-rgb), 0.05);
  box-shadow: 0 0 0 var(--border-width-1) rgba(var(--color-error-rgb), 0.2);
}

.a11y-error:focus {
  box-shadow: 0 0 0 3px rgba(var(--color-error-rgb), 0.3);
}

/* Success states */
.a11y-success {
  border-color: var(--color-success) !important;
  background-color: rgba(var(--color-success-rgb), 0.05);
  box-shadow: 0 0 0 var(--border-width-1) rgba(var(--color-success-rgb), 0.2);
}

/* ===== ENHANCED NAVIGATION ACCESSIBILITY ===== */

/* Current page indicator for screen readers */
.a11y-current-page {
  position: relative;
}

.a11y-current-page::after {
  content: attr(data-current-label);
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Enhanced dropdown indicators */
.a11y-dropdown-indicator {
  position: relative;
}

.a11y-dropdown-indicator[aria-expanded="false"]::after {
  content: '▼';
  font-size: var(--text-xs);
  margin-left: var(--space-1);
  opacity: 0.7;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.a11y-dropdown-indicator[aria-expanded="true"]::after {
  transform: rotate(180deg);
  opacity: 1;
}

/* ===== LIVE REGIONS FOR DYNAMIC CONTENT ===== */

.a11y-live-region {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Status messages with enhanced visibility */
.a11y-status-message {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  margin: var(--space-4) 0;
  border-left: 4px solid;
  background-color: rgba(var(--color-primary-rgb), 0.05);
  border-color: var(--color-primary);
}

.a11y-status-message--success {
  background-color: rgba(var(--color-success-rgb), 0.05);
  border-color: var(--color-success);
}

.a11y-status-message--warning {
  background-color: rgba(var(--color-warning-rgb), 0.05);
  border-color: var(--color-warning);
}

.a11y-status-message--error {
  background-color: rgba(var(--color-error-rgb), 0.05);
  border-color: var(--color-error);
}

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

@media (prefers-contrast: high) {
  .a11y-focus-visible:focus-visible {
    outline-width: 3px;
    outline-offset: 2px;
  }
  
  .a11y-skip-link {
    border-width: 3px;
    font-weight: var(--font-bold);
  }
  
  .a11y-landmark-indicator::before {
    width: 4px;
  }
  
  .a11y-status-message {
    border-left-width: 6px;
  }
}

/* ===== REDUCED MOTION SUPPORT ===== */

@media (prefers-reduced-motion: reduce) {
  .a11y-focus-visible,
  .a11y-skip-link,
  .a11y-dropdown-indicator::after,
  .a11y-landmark-indicator::before {
    transition: none;
  }
  
  .a11y-dropdown-indicator[aria-expanded="true"]::after {
    transform: none;
  }
}

/* ===== TOUCH ACCESSIBILITY ===== */

@media (pointer: coarse) {
  .a11y-focus-visible:focus-visible {
    outline-width: 3px;
    outline-offset: 2px;
  }
  
  .a11y-skip-link {
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-base);
  }
}

/* ===== RTL SUPPORT FOR MULTILINGUAL ===== */

[dir="rtl"] .a11y-skip-link {
  left: auto;
  right: var(--space-4);
}

[dir="rtl"] .a11y-landmark-indicator::before {
  left: auto;
  right: 0;
}

[dir="rtl"] .a11y-dropdown-indicator::after {
  margin-left: 0;
  margin-right: var(--space-1);
}

[dir="rtl"] .a11y-required::after {
  margin-left: 0;
  margin-right: var(--space-1);
}

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

/* Enhanced keyboard navigation for complex components */
.a11y-roving-tabindex [tabindex="-1"] {
  outline: none;
}

.a11y-roving-tabindex [tabindex="0"]:focus {
  outline: var(--border-width-2) solid var(--color-primary);
  outline-offset: var(--space-1);
}

/* ===== CONTENT ACCESSIBILITY ===== */

/* Better text spacing for readability */
.a11y-readable-text {
  line-height: 1.6;
  word-spacing: 0.1em;
  letter-spacing: 0.02em;
}

/* Enhanced link indicators */
.a11y-external-link::after {
  content: ' (external link)';
  font-size: 0;
  speak: spell-out;
}

.a11y-new-window::after {
  content: ' (opens in new window)';
  font-size: 0;
  speak: spell-out;
}

/* ===== UTILITY CLASSES ===== */

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

/* Force announcement of dynamic content changes */
.a11y-announce {
  speak: always;
}

/* Polite announcements that don't interrupt */
.a11y-announce-polite {
  speak: spell-out;
}

/* ===== DEBUG MODE FOR DEVELOPMENT ===== */

.a11y-debug * {
  outline: 1px solid red !important;
}

.a11y-debug [role]::before {
  content: attr(role);
  position: absolute;
  background: red;
  color: white;
  padding: 2px 4px;
  font-size: 10px;
  font-family: monospace;
  z-index: 9999;
  top: 0;
  left: 0;
}

.a11y-debug [aria-label]::after {
  content: 'aria-label: ' attr(aria-label);
  position: absolute;
  background: blue;
  color: white;
  padding: 2px 4px;
  font-size: 10px;
  font-family: monospace;
  z-index: 9999;
  bottom: 0;
  left: 0;
}