frontend/src/css/responsive/accessibility.css

/* Accessibility-Focused Responsive Design */

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .card {
    border: 2px solid currentColor;
  }
  
  .btn {
    border: 2px solid currentColor;
  }
  
  .form-input {
    border: 2px solid currentColor;
  }
  
  .nav-link {
    border: 1px solid currentColor;
  }
  
  .mobile-nav-item {
    border-bottom: 2px solid currentColor;
  }
  
  .mobile-menu-content {
    border-right: 2px solid currentColor;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .mobile-menu-content {
    transition: none;
  }
  
  .mobile-menu-button span {
    transition: none;
  }
  
  .mobile-overlay {
    transition: none;
  }
  
  .btn {
    transition: none;
  }
  
  .card {
    transition: none;
  }
}

/* Focus Visible for Keyboard Navigation */
@media (hover: hover) and (pointer: fine) {
  .btn:focus-visible,
  .clickable:focus-visible,
  .nav-link:focus-visible,
  .form-input:focus-visible,
  .mobile-nav-item:focus-visible,
  .mobile-menu-button:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
  }
  
  .skip-link:focus-visible,
  .skip-link-mobile:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --border-color: #404040;
  }
}

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  .print-break-before {
    page-break-before: always;
  }
  
  .print-break-inside-avoid {
    page-break-inside: avoid;
  }
  
  .print-black-text {
    color: black !important;
  }
  
  .print-no-background {
    background: none !important;
  }
}

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

.sr-only:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip to Content Links */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary-color);
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 0 4px 4px 0;
  z-index: 100;
  font-size: 14px;
  font-weight: 500;
}

.skip-link:focus {
  top: 0;
}

/* Focus Indicators */
.focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Keyboard Navigation Enhancements */
.keyboard-nav {
  position: relative;
}

.keyboard-nav:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Touch-Friendly Target Sizes */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .clickable,
  .nav-link,
  .form-input,
  .mobile-nav-item {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
  }
  
  .mobile-menu-button {
    min-height: 48px;
    min-width: 48px;
  }
  
  .btn-large {
    min-height: 48px;
    min-width: 48px;
    padding: 14px 20px;
    font-size: 16px;
  }
  
  .btn-group .btn {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Prevent zoom on focus */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  input[type="color"],
  textarea,
  select {
    font-size: 16px;
  }
}

/* High DPI Support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .high-dpi {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Text Readability Enhancements */
.text-readable {
  font-size: 16px;
  line-height: 1.5;
}

.text-readable-large {
  font-size: 18px;
  line-height: 1.6;
}

/* Fluid Typography for Better Readability */
.text-fluid {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: 1.5;
}

.text-fluid-lg {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  line-height: 1.6;
}

.text-fluid-xl {
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.7;
}

.text-fluid-2xl {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.8;
}

.text-fluid-3xl {
  font-size: clamp(3rem, 6vw, 4rem);
  line-height: 1.9;
}

/* Mobile Text Readability */
@media (max-width: 768px) {
  .mobile-readable {
    font-size: 16px;
    line-height: 1.5;
  }
  
  .mobile-readable-large {
    font-size: 18px;
    line-height: 1.6;
  }
}

/* Color Contrast Enhancements */
.high-contrast-text {
  color: #000000;
  background-color: #ffffff;
}

.high-contrast-text-inverse {
  color: #ffffff;
  background-color: #000000;
}

/* Focus Management */
.focus-trap {
  outline: none;
}

.focus-trap:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* ARIA Support */
.aria-hidden {
  display: none !important;
}

.aria-hidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Language Support */
[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .flex-row {
  flex-direction: row;
}

[dir="rtl"] .flex-row-reverse {
  flex-direction: row;
}

[dir="rtl"] .ml-4 {
  margin-left: 0;
  margin-right: 1rem;
}

[dir="rtl"] .mr-4 {
  margin-right: 0;
  margin-left: 1rem;
}

/* Zoom Control */
@media (prefers-reduced-data: reduce) {
  .lazy-load {
    display: none;
  }
  
  .animation {
    display: none;
  }
}

/* Performance Optimizations for Accessibility */
@media (max-width: 767px) {
  .mobile-accessible {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
  
  .mobile-accessible-reduced {
    animation-duration: 0.3s !important;
    transition-duration: 0.3s !important;
  }
}

/* Cognitive Accessibility */
@media (prefers-reduced-motion: no-preference) {
  .cognitive-friendly {
    animation-duration: 2s;
    transition-duration: 2s;
  }
}

/* Seizure Safety */
@media (prefers-reduced-motion: reduce) {
  .no-flashing {
    animation: none !important;
  }
  
  .no-blinking {
    animation: none !important;
  }
}

/* Responsive Font Sizes */
.text-responsive-xs { font-size: clamp(0.75rem, 2vw, 0.875rem); }
.text-responsive-sm { font-size: clamp(0.875rem, 2.5vw, 1rem); }
.text-responsive-base { font-size: clamp(1rem, 3vw, 1.125rem); }
.text-responsive-lg { font-size: clamp(1.125rem, 3.5vw, 1.25rem); }
.text-responsive-xl { font-size: clamp(1.25rem, 4vw, 1.5rem); }
.text-responsive-2xl { font-size: clamp(1.5rem, 4.5vw, 1.875rem); }
.text-responsive-3xl { font-size: clamp(1.875rem, 5vw, 2.25rem); }

/* Responsive Line Heights */
.leading-responsive-tight { line-height: clamp(1.25, 1.5, 1.75); }
.leading-responsive-snug { line-height: clamp(1.375, 1.625, 1.875); }
.leading-responsive-normal { line-height: clamp(1.5, 1.75, 2); }
.leading-responsive-relaxed { line-height: clamp(1.625, 1.875, 2.125); }
.leading-responsive-loose { line-height: clamp(1.75, 2, 2.25); }

/* Mobile-First Responsive Text Sizes */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }

@media (min-width: 640px) {
  .sm\:text-xs { font-size: 0.75rem; }
  .sm\:text-sm { font-size: 0.875rem; }
  .sm\:text-base { font-size: 1rem; }
  .sm\:text-lg { font-size: 1.125rem; }
  .sm\:text-xl { font-size: 1.25rem; }
  .sm\:text-2xl { font-size: 1.5rem; }
  .sm\:text-3xl { font-size: 1.875rem; }
}

@media (min-width: 768px) {
  .md\:text-xs { font-size: 0.75rem; }
  .md\:text-sm { font-size: 0.875rem; }
  .md\:text-base { font-size: 1rem; }
  .md\:text-lg { font-size: 1.125rem; }
  .md\:text-xl { font-size: 1.25rem; }
  .md\:text-2xl { font-size: 1.5rem; }
  .md\:text-3xl { font-size: 1.875rem; }
}

@media (min-width: 1024px) {
  .lg\:text-xs { font-size: 0.75rem; }
  .lg\:text-sm { font-size: 0.875rem; }
  .lg\:text-base { font-size: 1rem; }
  .lg\:text-lg { font-size: 1.125rem; }
  .lg\:text-xl { font-size: 1.25rem; }
  .lg\:text-2xl { font-size: 1.5rem; }
  .lg\:text-3xl { font-size: 1.875rem; }
}

@media (min-width: 1280px) {
  .xl\:text-xs { font-size: 0.75rem; }
  .xl\:text-sm { font-size: 0.875rem; }
  .xl\:text-base { font-size: 1rem; }
  .xl\:text-lg { font-size: 1.125rem; }
  .xl\:text-xl { font-size: 1.25rem; }
  .xl\:text-2xl { font-size: 1.5rem; }
  .xl\:text-3xl { font-size: 1.875rem; }
}

/* Mobile-First Responsive Line Heights */
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }

@media (min-width: 640px) {
  .sm\:leading-tight { line-height: 1.25; }
  .sm\:leading-snug { line-height: 1.375; }
  .sm\:leading-normal { line-height: 1.5; }
  .sm\:leading-relaxed { line-height: 1.625; }
  .sm\:leading-loose { line-height: 2; }
}

@media (min-width: 768px) {
  .md\:leading-tight { line-height: 1.25; }
  .md\:leading-snug { line-height: 1.375; }
  .md\:leading-normal { line-height: 1.5; }
  .md\:leading-relaxed { line-height: 1.625; }
  .md\:leading-loose { line-height: 2; }
}

@media (min-width: 1024px) {
  .lg\:leading-tight { line-height: 1.25; }
  .lg\:leading-snug { line-height: 1.375; }
  .lg\:leading-normal { line-height: 1.5; }
  .lg\:leading-relaxed { line-height: 1.625; }
  .lg\:leading-loose { line-height: 2; }
}

@media (min-width: 1280px) {
  .xl\:leading-tight { line-height: 1.25; }
  .xl\:leading-snug { line-height: 1.375; }
  .xl\:leading-normal { line-height: 1.5; }
  .xl\:leading-relaxed { line-height: 1.625; }
  .xl\:leading-loose { line-height: 2; }
}