/* ========================================
   WCAG 2.1 AA Compliance CSS Enhancements
   For GuideAI Special Education Support System
   ======================================== */

/* CSS Variables for Accessibility */
:root {
  /* WCAG AA Color Contrast Ratios */
  --wcag-text-primary: #212529;        /* 4.5:1 on white */
  --wcag-text-secondary: #495057;      /* 4.5:1 on white */
  --wcag-text-muted: #5a5a5a;         /* 4.5:1 on white */
  --wcag-bg-primary: #ffffff;
  --wcag-bg-secondary: #f8f9fa;
  
  /* Focus Colors */
  --wcag-focus-color: #005fcc;
  --wcag-focus-shadow: rgba(0, 95, 204, 0.3);
  --wcag-focus-width: 3px;
  
  /* Error/Success Colors */
  --wcag-error: #d32f2f;              /* 4.5:1 on white */
  --wcag-success: #2e7d32;            /* 4.5:1 on white */
  --wcag-warning: #f57c00;            /* 4.5:1 on white */
  
  /* High Contrast Colors */
  --hc-bg: #ffffff;
  --hc-text: #000000;
  --hc-link: #0000ee;
  --hc-visited: #551a8b;
  --hc-border: #000000;
  
  /* Font Sizes for Scaling */
  --font-size-sm: clamp(0.875rem, 2vw, 1rem);
  --font-size-base: clamp(1rem, 2.5vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 3vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 3.5vw, 1.5rem);
  
  /* Touch Target Sizes */
  --touch-target-min: 44px;
  --focus-offset: 2px;
}

/* ========================================
   WCAG 1.4.3 - Color Contrast (AA)
   Minimum 4.5:1 for normal text
   ======================================== */

/* Override Bootstrap's potentially low-contrast colors */
.text-muted {
  color: var(--wcag-text-muted) !important;
}

.text-secondary {
  color: var(--wcag-text-secondary) !important;
}

/* Ensure links are distinguishable from surrounding text */
a:not(.btn):not(.navbar-brand):not(.nav-link):not(.text-white) {
  color: #0066cc !important; /* 4.59:1 contrast on white */
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 2px !important;
}

/* Preserve navigation and footer link colors */
.navbar-brand,
.nav-link,
.text-white,
footer a,
.nav-guideai a,
.bg-purple a {
  color: white !important;
}

a:not(.btn):not(.navbar-brand):not(.nav-link):not(.text-white):hover,
a:not(.btn):not(.navbar-brand):not(.nav-link):not(.text-white):focus {
  color: #004499 !important; /* Higher contrast on hover/focus */
  text-decoration-thickness: 3px !important;
  background-color: rgba(0, 102, 204, 0.1) !important;
  padding: 2px 4px !important;
  border-radius: 4px !important;
}

/* Preserve navigation and footer link hover states */
.navbar-brand:hover,
.nav-link:hover,
.text-white:hover,
footer a:hover,
.nav-guideai a:hover,
.bg-purple a:hover {
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none !important;
}

a:visited:not(.btn):not(.navbar-brand):not(.nav-link):not(.text-white) {
  color: #663399 !important; /* 4.5:1 contrast for visited links */
}

/* Preserve navigation and footer visited link states */
.navbar-brand:visited,
.nav-link:visited,
.text-white:visited,
footer a:visited,
.nav-guideai a:visited,
.bg-purple a:visited {
  color: white !important;
}

/* ========================================
   WCAG 2.4.7 - Focus Visible (AA)
   Visible focus indicators for all elements
   ======================================== */

/* Remove default browser focus, add custom accessible focus */
*:focus {
  outline: none !important;
}

/* Enhanced focus indicators for better visibility */
button:focus,
.btn:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus {
  outline: var(--wcag-focus-width) solid var(--wcag-focus-color) !important;
  outline-offset: var(--focus-offset) !important;
  box-shadow: 0 0 0 5px var(--wcag-focus-shadow) !important;
  transform: scale(1.02) !important;
  transition: all 0.2s ease !important;
}

/* Form controls focus */
input:focus,
textarea:focus,
select:focus {
  outline: var(--wcag-focus-width) solid var(--wcag-focus-color) !important;
  outline-offset: 1px !important;
  box-shadow: 0 0 0 3px var(--wcag-focus-shadow) !important;
  border-color: var(--wcag-focus-color) !important;
  transition: all 0.2s ease !important;
}

/* Link focus indicators */
a:focus {
  outline: var(--wcag-focus-width) solid var(--wcag-focus-color) !important;
  outline-offset: var(--focus-offset) !important;
  background-color: rgba(0, 95, 204, 0.1) !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  padding: 2px 4px !important;
  transition: all 0.2s ease !important;
}

/* Interactive elements focus */
[role="button"]:focus,
[tabindex]:focus {
  outline: var(--wcag-focus-width) solid var(--wcag-focus-color) !important;
  outline-offset: var(--focus-offset) !important;
  box-shadow: 0 0 0 5px var(--wcag-focus-shadow) !important;
}

/* ========================================
   WCAG 1.4.4 - Resize Text (AA)
   Text must be resizable up to 200%
   ======================================== */

html {
  font-size: 16px; /* Base font size */
}

/* Scalable text sizes */
body {
  font-size: var(--font-size-base);
  line-height: 1.5 !important; /* WCAG recommendation */
}

.h1, h1 { font-size: calc(var(--font-size-base) * 2.5); }
.h2, h2 { font-size: calc(var(--font-size-base) * 2); }
.h3, h3 { font-size: calc(var(--font-size-base) * 1.75); }
.h4, h4 { font-size: calc(var(--font-size-base) * 1.5); }
.h5, h5 { font-size: calc(var(--font-size-base) * 1.25); }
.h6, h6 { font-size: calc(var(--font-size-base) * 1.1); }

/* Small text should still be readable */
small, .small {
  font-size: max(var(--font-size-sm), 14px);
}

/* ========================================
   WCAG 2.5.5 - Target Size (AA)
   Touch targets minimum 44x44 pixels
   ======================================== */

button,
.btn,
a,
input,
select,
textarea,
[role="button"],
[tabindex]:not([tabindex="-1"]) {
  min-height: var(--touch-target-min) !important;
  min-width: var(--touch-target-min) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 8px 16px !important;
  touch-action: manipulation !important;
}

/* Exception for inline text links */
a:not(.btn):not([role="button"]) {
  min-height: auto !important;
  min-width: auto !important;
  display: inline !important;
  padding: 2px 4px !important;
}

/* Small buttons get extra padding to meet size requirements */
.btn-sm {
  padding: 12px 20px !important;
}

/* ========================================
   WCAG 1.4.10 - Reflow (AA)
   Content reflows without horizontal scrolling
   ======================================== */

/* Prevent horizontal scrolling */
body {
  overflow-x: hidden !important;
}

* {
  box-sizing: border-box !important;
}

/* Responsive images and media */
img,
video,
iframe,
embed,
object {
  max-width: 100% !important;
  height: auto !important;
}

/* Responsive tables */
table {
  width: 100% !important;
  table-layout: auto !important;
}

@media (max-width: 576px) {
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block !important;
  }
  
  th,
  td {
    border: none !important;
    border-bottom: 1px solid #ddd !important;
    padding: 8px !important;
  }
  
  th {
    background-color: #f8f9fa !important;
    font-weight: bold !important;
  }
}

/* Code blocks wrap */
pre,
code {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* ========================================
   WCAG 1.4.12 - Text Spacing (AA)
   Text spacing requirements
   ======================================== */

/* Paragraph spacing */
p {
  margin-bottom: 1em !important;
  line-height: 1.5 !important;
}

/* Letter spacing for readability */
body {
  letter-spacing: 0.05em !important;
}

/* Word spacing */
body {
  word-spacing: 0.1em !important;
}

/* Heading spacing */
h1, h2, h3, h4, h5, h6 {
  margin-top: 1.5em !important;
  margin-bottom: 0.75em !important;
  line-height: 1.3 !important;
}

/* ========================================
   WCAG 2.4.1 - Bypass Blocks (AA)
   Skip navigation links
   ======================================== */

.skip-link {
  position: absolute !important;
  top: -40px !important;
  left: 6px !important;
  z-index: 99999 !important;
  color: white !important;
  background: #000 !important;
  padding: 12px 16px !important;
  text-decoration: none !important;
  border-radius: 0 0 4px 4px !important;
  font-weight: bold !important;
  font-size: 1rem !important;
  transition: top 0.3s ease !important;
  min-height: var(--touch-target-min) !important;
}

.skip-link:focus {
  top: 0 !important;
  color: white !important;
  text-decoration: none !important;
  outline: 3px solid #ffff00 !important;
  outline-offset: 2px !important;
}

/* ========================================
   WCAG 1.3.1 - Screen Reader Support
   Hidden content for screen readers only
   ======================================== */

.sr-only,
.visually-hidden {
  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;
}

/* Focusable sr-only elements */
.sr-only:focus,
.visually-hidden:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: inherit !important;
  margin: inherit !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* ========================================
   WCAG 3.3.1 - Error Identification (AA)
   Error messages and validation
   ======================================== */

.invalid-feedback,
.error-message,
.form-error {
  color: var(--wcag-error) !important;
  font-size: 0.875rem !important;
  margin-top: 0.25rem !important;
  display: block !important;
  font-weight: 500 !important;
}

.is-invalid,
.form-control.error,
input:invalid {
  border-color: var(--wcag-error) !important;
  box-shadow: 0 0 0 0.2rem rgba(211, 47, 47, 0.25) !important;
}

.valid-feedback,
.success-message {
  color: var(--wcag-success) !important;
  font-size: 0.875rem !important;
  margin-top: 0.25rem !important;
  display: block !important;
  font-weight: 500 !important;
}

/* Required field indicators */
.required::after,
[required] + label::after {
  content: " *" !important;
  color: var(--wcag-error) !important;
  font-weight: bold !important;
}

/* ========================================
   High Contrast Mode Support
   ======================================== */

/* Windows High Contrast Mode */
@media (prefers-contrast: high) {
  * {
    background-color: var(--hc-bg) !important;
    color: var(--hc-text) !important;
    border-color: var(--hc-border) !important;
  }
  
  a:not(.btn) {
    color: var(--hc-link) !important;
  }
  
  a:visited:not(.btn) {
    color: var(--hc-visited) !important;
  }
  
  button,
  .btn,
  input,
  select,
  textarea {
    border: 2px solid var(--hc-border) !important;
    background-color: var(--hc-bg) !important;
    color: var(--hc-text) !important;
  }
  
  /* Ensure focus is visible in high contrast */
  *:focus {
    outline: 3px solid var(--hc-text) !important;
    outline-offset: 2px !important;
  }
}

/* Forced Colors Mode (Windows) */
@media (forced-colors: active) {
  * {
    forced-color-adjust: auto !important;
  }
  
  /* Maintain custom focus indicators */
  *:focus {
    outline: 3px solid Highlight !important;
    outline-offset: 2px !important;
  }
}

/* ========================================
   Reduced Motion Support (WCAG 2.3.3)
   ======================================== */

@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;
  }
  
  /* Remove parallax and auto-playing animations */
  .parallax,
  [data-parallax] {
    transform: none !important;
  }
  
  .autoplay {
    animation-play-state: paused !important;
  }
}

/* ========================================
   Large Fonts Accessibility Feature
   ======================================== */

body.large-fonts {
  font-size: 1.25rem !important;
}

body.large-fonts .h1, 
body.large-fonts h1 { font-size: 3.125rem !important; }
body.large-fonts .h2, 
body.large-fonts h2 { font-size: 2.5rem !important; }
body.large-fonts .h3, 
body.large-fonts h3 { font-size: 2.1875rem !important; }
body.large-fonts .h4, 
body.large-fonts h4 { font-size: 1.875rem !important; }
body.large-fonts .h5, 
body.large-fonts h5 { font-size: 1.5625rem !important; }
body.large-fonts .h6, 
body.large-fonts h6 { font-size: 1.375rem !important; }

body.large-fonts small,
body.large-fonts .small {
  font-size: 1.125rem !important;
}

body.large-fonts button,
body.large-fonts .btn,
body.large-fonts input,
body.large-fonts select,
body.large-fonts textarea {
  font-size: 1.25rem !important;
  padding: 12px 20px !important;
}

/* ========================================
   High Contrast Accessibility Feature
   ======================================== */

body.high-contrast {
  background-color: #000000 !important;
  color: #ffffff !important;
}

body.high-contrast * {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

body.high-contrast .bg-primary,
body.high-contrast .btn-primary {
  background-color: #0000ff !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

body.high-contrast .bg-secondary,
body.high-contrast .btn-secondary {
  background-color: #666666 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

body.high-contrast a:not(.btn) {
  color: #00ff00 !important;
  text-decoration: underline !important;
}

body.high-contrast a:visited:not(.btn) {
  color: #ff00ff !important;
}

body.high-contrast input,
body.high-contrast textarea,
body.high-contrast select {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #ffffff !important;
}

body.high-contrast button,
body.high-contrast .btn {
  border: 2px solid #ffffff !important;
}

body.high-contrast .card,
body.high-contrast .modal,
body.high-contrast .drawer {
  border: 2px solid #ffffff !important;
}

/* ========================================
   Dyslexia-Friendly Font Feature
   ======================================== */

body.dyslexia-friendly,
body.dyslexia-friendly * {
  font-family: "Comic Sans MS", "OpenDyslexic", "Arial", sans-serif !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.1em !important;
  word-spacing: 0.2em !important;
}

body.dyslexia-friendly p,
body.dyslexia-friendly li {
  margin-bottom: 1.2em !important;
}

/* ========================================
   Print Styles for Accessibility
   ======================================== */

@media print {
  /* Ensure good contrast for printing */
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  /* Show URL after links */
  a[href]:after {
    content: " (" attr(href) ")" !important;
  }
  
  /* Don't show URLs for fragment identifiers or javascript */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "" !important;
  }
  
  /* Avoid page breaks inside important elements */
  blockquote,
  pre,
  img,
  .chat-message {
    page-break-inside: avoid !important;
  }
  
  /* Ensure adequate margins */
  @page {
    margin: 1in !important;
  }
  
  /* Hide interactive elements that don't make sense when printed */
  button,
  .btn,
  .accessibility-drawer,
  .skip-link,
  nav {
    display: none !important;
  }
}

/* ========================================
   Mobile Accessibility Improvements
   ======================================== */

@media (max-width: 768px) {
  /* Larger touch targets on mobile */
  button,
  .btn,
  a[role="button"],
  input[type="button"],
  input[type="submit"] {
    min-height: 48px !important;
    min-width: 48px !important;
    padding: 12px 16px !important;
  }
  
  /* Better spacing for mobile */
  .form-group,
  .mb-3 {
    margin-bottom: 1.5rem !important;
  }
  
  /* Ensure text is readable on mobile */
  body {
    font-size: max(16px, var(--font-size-base)) !important;
  }
  
  /* Prevent zoom on form inputs */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ========================================
   Keyboard Navigation Enhancements
   ======================================== */

/* Improve table keyboard navigation */
table {
  border-collapse: collapse !important;
}

th[tabindex],
td[tabindex] {
  position: relative !important;
}

th[tabindex]:focus,
td[tabindex]:focus {
  outline: var(--wcag-focus-width) solid var(--wcag-focus-color) !important;
  outline-offset: -2px !important;
  background-color: rgba(0, 95, 204, 0.1) !important;
}

/* Modal and drawer keyboard trap support */
.modal[aria-hidden="false"],
.drawer[aria-hidden="false"],
.accessibility-drawer.open {
  /* Focus should be trapped - handled by JavaScript */
}

/* ========================================
   Loading and Animation Accessibility
   ======================================== */

/* Accessible loading indicators */
.loading-spinner,
.spinner-border {
  width: 2rem !important;
  height: 2rem !important;
  border-width: 0.25em !important;
}

/* Reduce motion for loading animations when requested */
@media (prefers-reduced-motion: reduce) {
  .loading-spinner,
  .spinner-border,
  .fa-spin {
    animation: none !important;
  }
  
  .loading-spinner::after {
    content: "Loading..." !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 0.875rem !important;
    color: currentColor !important;
  }
}

/* ========================================
   Accessibility Utilities
   ======================================== */

/* Focus within - keep focus visible when child elements are focused */
.focus-within:focus-within {
  outline: var(--wcag-focus-width) solid var(--wcag-focus-color) !important;
  outline-offset: var(--focus-offset) !important;
}

/* Accessible hiding (can still be focused) */
.accessible-hide {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.accessible-hide:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

/* High visibility focus for critical elements */
.focus-high-visibility:focus {
  outline: 5px solid #ffff00 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 8px rgba(255, 255, 0, 0.5) !important;
  background-color: #ffff00 !important;
  color: #000000 !important;
  z-index: 9999 !important;
  position: relative !important;
}

/* Accessible disabled state */
[disabled],
[aria-disabled="true"] {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ========================================
   Emergency Accessibility Reset
   Use this class to quickly reset all custom styles
   ======================================== */

.accessibility-reset * {
  all: revert !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  line-height: 1.5 !important;
  color: #000000 !important;
  background-color: #ffffff !important;
}

.accessibility-reset button,
.accessibility-reset .btn,
.accessibility-reset input,
.accessibility-reset textarea,
.accessibility-reset select {
  padding: 8px 16px !important;
  border: 2px solid #000000 !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  font-size: 1rem !important;
}

.accessibility-reset a {
  color: #0000ee !important;
  text-decoration: underline !important;
}

.accessibility-reset a:visited {
  color: #551a8b !important;
}

.accessibility-reset *:focus {
  outline: 3px solid #000000 !important;
  outline-offset: 2px !important;
}