/* =====================================================================
   ABILITY - Frontend Accessibility UI
   - Readability-focused defaults
   - High-contrast and focus indicators
   - Touch target sizing
   - Reduced motion support
   - Dyslexia-friendly font toggle (lazy-loaded by JS)
   - Configurable widget position
   ===================================================================== */

/* Widget surface variables (scoped to widget) */
:root {
  --ability-ui-bg: #0f172a;         /* panel header background */
  --ability-ui-surface: #ffffff;    /* panel body background */
  --ability-ui-text: #0b1220;       /* panel text */
  --ability-ui-muted: #556271;      /* muted text */
  --ability-ui-border: #d7e1ea;
  --ability-ui-primary: #007cba;
  --ability-ui-primary-600: #005a87;
  --ability-ui-focus-ring: rgba(0,124,186,.35);
}

/* Screen reader only utility (widget) */
#accessibility-widget .sr-only,
#screen-reader-announcements.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;
}

/* Overlay */
.dws-a11y-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9998;
  display: none;
}
.dws-a11y-overlay.is-active { display: block; }

/* Toggle (floating action button) */
#accessibility-toggle {
  position: sticky;
  z-index: 9999;
  margin: 25px 5px 5px 5px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, rgba(0, 142, 214, 0) 0%, #008ed6 50%, #57bff3 100%) !important;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  outline: none;
}

/* Position presets for the toggle button (sticky positioning) */
#accessibility-toggle.pos-bottom-right { 
  float: right;
  margin: 25px 5px 5px 5px;
}
#accessibility-toggle.pos-bottom-left { 
  float: left;
  margin: 25px 5px 5px 5px;
}
#accessibility-toggle.pos-top-right { 
  float: right;
  margin: 5px 5px 25px 5px;
}
#accessibility-toggle.pos-top-left { 
  float: left;
  margin: 5px 5px 25px 5px;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  #accessibility-toggle {
    margin: 16px 4px;
    width: 52px;
    height: 52px;
  }
}

/* Toggle focus/hover */
#accessibility-toggle:hover,
#accessibility-toggle:focus-visible {
  background: var(--ability-ui-primary-600);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
#accessibility-toggle:focus-visible {
  outline: 2px solid #fff;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 5px var(--ability-ui-focus-ring),
    0 10px 30px rgba(0,0,0,.28);
}

/* Panel (dialog) */
#accessibility-panel.accessibility-panel {
  position: fixed;
  right: 18px;
  bottom: 82px;
  width: min(92vw, 420px);
  max-height: 85vh;
  display: none;
  background: var(--ability-ui-surface);
  color: var(--ability-ui-text);
  border: 1px solid var(--ability-ui-border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  z-index: 10000;
}

/* If toggle is top, drop panel below it */
#accessibility-toggle.pos-top-right ~ #accessibility-panel,
#accessibility-toggle.pos-top-left ~ #accessibility-panel {
  top: 82px;
  bottom: auto;
}

.accessibility-header {
  background: var(--ability-ui-bg);
  color: #e6edf7;
  padding: .9rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.accessibility-header h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
}
.accessibility-header .close-panel {
  background: transparent;
  color: #e6edf7;
  border: 1px solid rgba(230,237,247,.25);
  width: 36px;
  height: 36px;
  border-radius: 6px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.accessibility-header .close-panel:hover,
.accessibility-header .close-panel:focus-visible {
  background: rgba(255,255,255,.08);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.3);
}

.accessibility-controls {
  padding: .75rem 1rem 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
.accessibility-panel p,
.accessibility-footer {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Control rows */
.control-group {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem .75rem;
  align-items: center;
  padding: .55rem .6rem;
  border: 1px solid var(--ability-ui-border);
  border-radius: 8px;
  background: #fff;
}
.control-group label {
  font-size: .93rem;
  font-weight: 600;
  color: #0f172a;
}

/* Toggle button */
.toggle-button {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #c8d4de;
  background: #f1f5f9;
  color: #0f172a;
  border-radius: 999px;
  padding: .35rem .75rem;
  font-size: .85rem;
  font-weight: 600;
  min-width: 64px;
  text-align: center;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.toggle-button[aria-pressed="true"] {
  background: var(--ability-ui-primary);
  border-color: var(--ability-ui-primary);
  color: #fff;
}
.toggle-button:focus-visible {
  outline: 2px solid #fff;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 5px var(--ability-ui-focus-ring);
}

/* Font size controls cluster */
.font-size-controls {
  display: inline-flex;
  gap: .35rem;
}
.font-button {
  border: 1px solid #c8d4de;
  background: #fff;
  color: #0f172a;
  border-radius: 6px;
  padding: .3rem .55rem;
  font-size: .9rem;
  min-width: 40px;
  text-align: center;
  cursor: pointer;
}
.font-button:hover,
.font-button:focus-visible {
  background: #f8fafc;
  outline: none;
  box-shadow: 0 0 0 3px var(--ability-ui-focus-ring);
}

/* Panel Disclaimer */
.a11y-disclaimer {
  margin: .8rem 1rem 0;
  color: var(--ability-ui-muted);
  font-size: .85rem;
}

/* Footer */
.accessibility-footer {
  border-top: 1px solid var(--ability-ui-border);
  padding: .8rem 1rem 1rem;
  font-size: .88rem;
  color: #1f2937;
  align-content: center;
  text-align: center;
}
.compliance-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  margin: 0.5rem auto;
  border: 1px solid var(--ability-ui-primary);
  background: var(--ability-ui-primary);
  color: #fff;
  border-radius: 8px;
  padding: .5rem .8rem;
  font-weight: 600;
  cursor: pointer;
}
.compliance-button:hover,
.compliance-button:focus-visible {
  background: var(--ability-ui-primary-600);
  outline: none;
  box-shadow: 0 0 0 4px var(--ability-ui-focus-ring);
}
.compliance-info a {
  color: #0ea5e9;
  text-decoration: underline;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  #accessibility-toggle,
  #accessibility-panel,
  .toggle-button,
  .font-button {
    transition: none!important;
    animation: none!important;
  }
}

/* =====================================================================
   Readability states (apply when body has the corresponding class)
   ===================================================================== */

/* High Contrast: invert on light surfaces, enforce link underline and clear borders */
body.high-contrast {
  color: #0b0b0b !important;
  background-color: #ffffff !important;
}
body.high-contrast a { color: #0a58ff !important; text-decoration: underline !important; }
body.high-contrast * { border-color: #111 !important; }

/* Line spacing and comfortable reading rhythm */
body.line-spacing p,
body.line-spacing li,
body.line-spacing blockquote,
body.line-spacing dd {
  line-height: 1.7 !important;
  letter-spacing: .003em !important;
  word-spacing: .02em !important;
}
body.line-spacing p { margin: 0 0 1.05em 0 !important; }

/* Focus indicators */
body.focus-indicators :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #1c64f2 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(28,100,242,.25) !important;
}

/* Screen Reader Mode: ensure outline/links and remove excessive text decorations */
body.screen-reader-mode a { text-decoration: underline; }


/* Dyslexia-friendly font: prefer Comic Sans MS, fall back to OpenDyslexic and system UI stack
   Includes WCAG 1.4.12 (Text Spacing) compliant letter and word spacing for optimal readability */
body.dyslexia-font {
  font-family: "Comic Sans MS", "OpenDyslexic", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji" !important;
  letter-spacing: 0.12em !important; /* WCAG 1.4.12 minimum: 0.12 times font size */
  word-spacing: 0.16em !important;   /* WCAG 1.4.12 minimum: 0.16 times font size */
  line-height: 1.5 !important;       /* WCAG 1.4.12 minimum: 1.5 times font size */
}

/* Enhanced spacing for text elements within dyslexia mode */
body.dyslexia-font p,
body.dyslexia-font li,
body.dyslexia-font blockquote,
body.dyslexia-font dd,
body.dyslexia-font td,
body.dyslexia-font th {
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
  line-height: 1.5 !important;
}

body.dyslexia-font p {
  margin-bottom: 2em !important; /* WCAG 1.4.12: paragraph spacing at least 2 times font size */
}

/* Reduce Motion: disable common animations/transitions across the page */
body.reduce-motion *,
body.reduce-motion ::before,
body.reduce-motion ::after {
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}

/* ADHD/ADD Distraction-Free Mode: reduce visual noise while preserving content */
body.adhd-mode {
  background-color: #ffffff !important;
}
body.adhd-mode .site-header,
body.adhd-mode .site-footer,
body.adhd-mode .sidebar,
body.adhd-mode .widget-area,
body.adhd-mode [role="complementary"] {
  opacity: 0.35 !important;
}
body.adhd-mode main,
body.adhd-mode [role="main"],
body.adhd-mode #main-content {
  background-color: #ffffff !important;
  box-shadow: none !important;
}
body.adhd-mode *,
body.adhd-mode ::before,
body.adhd-mode ::after {
  transition: none !important;
}

/* Respect OS high-contrast preference by reinforcing focus/underline without forcing theme */
@media (prefers-contrast: more) {
  a { text-decoration-thickness: .12em; text-underline-offset: .16em; }
  :focus-visible { outline-width: 3px; }
}

/* Skip links visibility improvements */
.skip-links a:focus {
  position: static !important;
  clip: auto !important;
  width: auto !important;
  height: auto !important;
  margin: .25rem 0 !important;
  padding: .45rem .6rem !important;
  background: #111 !important;
  color: #fff !important;
  border-radius: 6px !important;
}

/* Duplicate variables on :root for broader browser support */
:root {
  --ability-ui-bg: #0f172a;         /* panel header background */
  --ability-ui-surface: #ffffff;    /* panel body background */
  --ability-ui-text: #0b1220;       /* panel text */
  --ability-ui-muted: #556271;      /* muted text */
  --ability-ui-border: #d7e1ea;
  --ability-ui-primary: #007cba;
  --ability-ui-primary-600: #005a87;
  --ability-ui-focus-ring: rgba(0,124,186,.35);
}