/**
 * accessibility.css — Accessibility Plugin Styles
 * Zero to Hero — WCAG 2.1 AA
 *
 * Sections:
 *  1. Screen-reader only utility (.sr-only)
 *  2. Launcher button
 *  3. Panel / Dialog
 *  4. Panel header
 *  5. Panel body & sections
 *  6. Range sliders
 *  7. Toggle/action buttons
 *  8. Reader highlight
 *  9. Reading guide & mask
 * 10. Table of contents
 * 11. Visual mode classes
 * 12. Focus styles (WCAG 2.4.7)
 * 13. prefers-reduced-motion
 * 14. Status/live region
 * 15. Responsive
 */

/* ─────────────────────────────────────────
   1. Screen-reader-only (visually hidden)
   WCAG 1.3.1: Preserve semantic info for AT
───────────────────────────────────────── */
.sr-only,
.a11y-status {
  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;
}

/* ─────────────────────────────────────────
   2. Launcher Button (fixed, always visible)
───────────────────────────────────────── */
.a11y-launcher {
  position:  fixed;
  top:       90px;
  right:     18px;
  width:     94px;
  height:    94px;
  border-radius: 50%;
  border:    7px solid #009ad0;
  background: #1d1d1d;
  color:     #fff;
  z-index:   99998;
  display:   flex;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  gap:       4px;
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
  cursor:    pointer;
  font-weight: 900;
  font-family: inherit;
  font-size:   13px;
  text-align:  center;
  transition:  transform .15s ease, box-shadow .15s ease;
}

.a11y-launcher:hover {
  transform:  scale(1.07);
  box-shadow: 0 18px 36px rgba(0,0,0,.35);
}

.a11y-launcher span:first-child {
  font-size:   34px;
  line-height: 1;
}

/* ─────────────────────────────────────────
   3. Panel / Dialog
   WCAG 4.1.2: role="dialog", aria-modal
───────────────────────────────────────── */
.a11y-panel {
  position:  fixed;
  top:       0;
  right:     0;
  width:     min(660px, 100vw);
  height:    100vh;
  background: #fff;
  z-index:   99999;
  box-shadow: -14px 0 50px rgba(0,0,0,.28);
  transform: translateX(110%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  overflow:   auto;
  overscroll-behavior: contain;
}

/* Hidden state: also remove from AT */
.a11y-panel[aria-hidden="true"] {
  visibility: hidden;
}

.a11y-panel.is-open {
  transform:  translateX(0);
  visibility: visible;
}

/* ─────────────────────────────────────────
   4. Panel Header
───────────────────────────────────────── */
.a11y-header {
  background: linear-gradient(100deg, #08749d, #00b9e9);
  color:      #fff;
  padding:    22px 76px 22px 22px;
  position:   sticky;
  top:        0;
  z-index:    2;
}

/* RTL: close button on the left side */
[dir="rtl"] .a11y-header { padding: 22px 22px 22px 76px; }

.a11y-header h2 {
  margin:     0;
  font-size:  26px;
  font-weight: 900;
}

.a11y-header p {
  margin:     .35rem 0 0;
  font-size:  13px;
  opacity:    .9;
  line-height: 1.5;
}

/* Close button */
.a11y-close {
  position:  absolute;
  right:     18px;
  top:       14px;
  width:     50px;
  height:    50px;
  border-radius: 50%;
  border:    0;
  background: rgba(255,255,255,.2);
  color:     #fff;
  font-size: 28px;
  cursor:    pointer;
  display:   flex;
  align-items:     center;
  justify-content: center;
  transition: background .15s;
}

/* RTL: close on the left */
[dir="rtl"] .a11y-close {
  right: auto;
  left:  18px;
}

.a11y-close:hover {
  background: rgba(255,255,255,.35);
}

/* ─────────────────────────────────────────
   5. Panel Body & Sections
───────────────────────────────────────── */
.a11y-body {
  padding: 20px;
}

/* Logical sections inside the panel */
.a11y-section {
  border: 1px solid #dde8f0;
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 18px;
  background: #f9fcff;
}

.a11y-section-title {
  margin:    0 0 14px;
  font-size: 15px;
  font-weight: 900;
  color:     #005f87;
  padding-bottom: 8px;
  border-bottom: 2px solid #d0e8f5;
}

/* ─────────────────────────────────────────
   6. Range Sliders
───────────────────────────────────────── */
.a11y-range {
  margin-bottom: 16px;
}

.a11y-range label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  color:    #4a5568;
  font-size: 13px;
  margin-bottom: 4px;
}

.a11y-range output {
  background:   #e2f3fb;
  color:        #005f87;
  font-weight:  900;
  padding:      2px 8px;
  border-radius: 8px;
  font-size:    12px;
  min-width:    40px;
  text-align:   center;
}

.a11y-range input[type="range"] {
  width:        100%;
  accent-color: #006b94;
  height:       6px;
  cursor:       pointer;
}

/* ─────────────────────────────────────────
   7. Toggle / Action Buttons Grid
───────────────────────────────────────── */
.a11y-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.reader-grid {
  grid-template-columns: repeat(3, 1fr);
}

.a11y-btn {
  min-height: 110px;
  border-radius: 14px;
  border:    2px solid #4a5568;
  background: #272727;
  color:     #eee;
  font:      inherit;
  font-size: 12px;
  cursor:    pointer;
  display:   flex;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  gap:       8px;
  text-align: center;
  padding:   10px 6px;
  transition: background .15s, border-color .15s, box-shadow .15s;
  /* WCAG 1.4.3: text contrast > 4.5:1 on dark bg */
}

.a11y-btn .ico {
  font-size:   28px;
  line-height: 1;
}

.a11y-btn:hover {
  background:   #383838;
  border-color: #009ad0;
}

/* Toggled on (aria-pressed="true") */
.a11y-btn[aria-pressed="true"] {
  border-color: #00c4f7;
  background:   #002f44;
  box-shadow:   0 0 0 3px rgba(0,196,247,.3);
  color:        #00e5ff;
}

/* Reset button */
.a11y-reset {
  width:       100%;
  margin-top:  20px;
  border:      2px solid #e53e3e;
  color:       #c53030;
  background:  #fff5f5;
  border-radius: 14px;
  min-height:  56px;
  font:        inherit;
  font-weight: 900;
  font-size:   15px;
  cursor:      pointer;
  transition:  background .15s;
}

.a11y-reset:hover {
  background: #fed7d7;
}

/* ─────────────────────────────────────────
   8. Reading Highlight (current element)
───────────────────────────────────────── */
.a11y-reading-highlight {
  outline:        3px solid #f6ad55 !important;
  outline-offset: 2px !important;
  background:     rgba(246, 173, 85, 0.12) !important;
  border-radius:  4px;
  scroll-margin:  60px;
}

/* ─────────────────────────────────────────
   9. Reading Guide & Mask
───────────────────────────────────────── */
/* Reading Guide: horizontal highlight bar */
.a11y-reading-guide {
  position:       fixed;
  left:   0;
  right:  0;
  height: 80px;
  background:  rgba(255, 255, 0, .22);
  border-top:  3px solid #333;
  border-bottom: 3px solid #333;
  z-index:     99997;
  pointer-events: none;
  display:     none;
}

/* Reading Mask: darken above & below focus zone */
.a11y-reading-mask::before,
.a11y-reading-mask::after {
  content: '';
  position: fixed;
  left:  0;
  right: 0;
  background: rgba(0, 0, 0, .72);
  z-index:    99996;
  pointer-events: none;
}

.a11y-reading-mask::before {
  top:    0;
  height: var(--mask-top, 0px);
}

.a11y-reading-mask::after {
  top:    var(--mask-bottom, 100vh);
  bottom: 0;
}

/* ─────────────────────────────────────────
   10. Table of Contents
───────────────────────────────────────── */
.a11y-content-list {
  background:    #f0f9ff;
  border:        1px solid #bee3f8;
  border-radius: 12px;
  padding:       14px;
  margin-top:    14px;
}

.a11y-content-list strong {
  display:     block;
  margin-bottom: 10px;
  color:       #005f87;
  font-size:   14px;
}

.a11y-content-list a {
  display:    block;
  margin:     6px 0;
  color:      #006b94;
  font-weight: 600;
  font-size:  13px;
  text-decoration: underline;
}

.a11y-content-list a:hover {
  color: #004966;
}

/* ─────────────────────────────────────────
   11. Visual Mode Classes
───────────────────────────────────────── */

/* Grayscale */
.a11y-grayscale {
  filter: grayscale(1) !important;
}

/* Invert */
.a11y-invert {
  filter: invert(1) hue-rotate(180deg) !important;
}

/* High Contrast
   WCAG 1.4.6: Enhanced contrast (7:1)
*/
.a11y-high-contrast,
.a11y-high-contrast * {
  background-color: #000 !important;
  color:            #fff !important;
  border-color:     #fff !important;
}

.a11y-high-contrast a,
.a11y-high-contrast button {
  color: #ffff00 !important;
}

.a11y-high-contrast input,
.a11y-high-contrast textarea,
.a11y-high-contrast select {
  background: #000 !important;
  color:      #fff !important;
  border:     2px solid #fff !important;
}

/* Highlight Links */
.a11y-highlight-links a {
  outline:    3px solid #ffbf47 !important;
  background: #fff7d6 !important;
  color:      #000 !important;
}

/* Hide Images (but keep alt text accessible) */
.a11y-hide-images img {
  visibility: hidden !important;
}

/* Big Cursor */
.a11y-big-cursor,
.a11y-big-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='black' d='M5 2l38 22-17 3-9 16z'/%3E%3Cpath fill='white' d='M8 6l32 18-14 2.5-7.5 13z'/%3E%3C/svg%3E") 6 4, crosshair !important;
}

/* Calm mode */
.a11y-calm {
  background: #f0f7f4 !important;
}

.a11y-calm * {
  box-shadow: none !important;
}

/* ADHD mode: narrower line width for focus */
.a11y-adhd p,
.a11y-adhd li {
  max-width: 66ch;
}

/* Dyslexia / readable font */
.a11y-dyslexia,
.a11y-dyslexia * {
  font-family:     Arial, Tahoma, sans-serif !important;
  letter-spacing:  .08em !important;
  word-spacing:    .16em !important;
}

/* Stop motion (prefers-reduced-motion support) */
.a11y-reduce-motion *,
.a11y-reduce-motion *::before,
.a11y-reduce-motion *::after {
  animation:        none !important;
  transition:       none !important;
  scroll-behavior:  auto !important;
}

/* Simplify: hide hero-card and footer decorations */
.a11y-simplify .hero-card,
.a11y-simplify .site-footer {
  display: none !important;
}

/* ─────────────────────────────────────────
   12. Focus Styles
   WCAG 2.4.7: Visible keyboard focus
───────────────────────────────────────── */

/* Global focus ring */
:focus-visible {
  outline:        3px solid #ffbf47;
  outline-offset: 3px;
  border-radius:  4px;
}

/* Enhanced focus for plugin elements */
.a11y-panel :focus-visible,
.a11y-launcher:focus-visible,
.a11y-btn:focus-visible,
.a11y-reset:focus-visible,
.a11y-close:focus-visible {
  outline:        4px solid #ffbf47 !important;
  outline-offset: 3px !important;
  border-radius:  4px !important;
  box-shadow:     0 0 0 6px rgba(255,191,71,.25) !important;
}

/* ─────────────────────────────────────────
   13. prefers-reduced-motion
   WCAG 2.3.3: Animation from interactions
───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .a11y-panel {
    transition: none !important;
  }

  .a11y-launcher {
    transition: none !important;
  }

  * {
    animation-duration:    0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:   0.01ms !important;
    scroll-behavior:       auto !important;
  }
}

/* ─────────────────────────────────────────
   14. Status / live region (visually hidden)
   Visible in DOM for AT, hidden visually
───────────────────────────────────────── */
/* already defined in sr-only section above */

/* ─────────────────────────────────────────
   15. Responsive
───────────────────────────────────────── */
@media (max-width: 700px) {
  .a11y-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .a11y-launcher {
    width:  78px;
    height: 78px;
    right:  10px;
    top:    80px;
    font-size: 11px;
  }

  .a11y-launcher span:first-child {
    font-size: 28px;
  }

  .a11y-header h2 {
    font-size: 20px;
  }

  .a11y-btn {
    min-height: 90px;
  }
}

@media (max-width: 520px) {
  .a11y-grid {
    grid-template-columns: 1fr;
  }

  .a11y-panel {
    width: 100vw;
  }

  .a11y-body {
    padding: 14px;
  }

  .a11y-btn {
    min-height: 70px;
  }
}

.a11y-grid.lang-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.a11y-grid.lang-grid .a11y-btn .ico {
  font-weight: 900;
  font-size: 15px;
}