/* Accessibility Core System - Jonia */

.a11y-visually-hidden {
  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 Link (WCAG 2.1 Bypass Blocks) */
.a11y-skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10002;
  padding: 10px 16px;
  color: #ffffff;
  background: #061e2d;
  border: 2px solid #7be8dc;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  transform: translateY(-180%);
  transition: transform 0.2s ease-in-out;
}

.a11y-skip-link:focus {
  transform: translateY(0);
  outline: 4px solid #f59e0b;
}

/* Modal Open Body Lock */
body.a11y-modal-open {
  overflow: hidden !important;
}

/* Modal & Controls */
.a11y-backdrop[hidden] {
  display: none !important;
}

.a11y-switch {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 24px;
  background: #cbd5e1;
  border-radius: 12px;
  transition: background-color 200ms ease;
}

.a11y-switch::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  content: "";
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 200ms ease;
}

.a11y-card-toggle input:checked + .a11y-switch {
  background-color: #0d9488 !important;
}

.a11y-card-toggle input:checked + .a11y-switch::after {
  transform: translateX(20px) !important;
}

/* 1. Font Sizing */
html[data-a11y-font="small"] { font-size: 90% !important; }
html[data-a11y-font="default"] { font-size: 100% !important; }
html[data-a11y-font="large"] { font-size: 112.5% !important; }
html[data-a11y-font="xlarge"] { font-size: 125% !important; }

/* 2. Dyslexia / Readable Font */
html[data-a11y-readable="true"] body,
html[data-a11y-readable="true"] button,
html[data-a11y-readable="true"] input,
html[data-a11y-readable="true"] select,
html[data-a11y-readable="true"] textarea {
  font-family: Arial, "Helvetica Neue", Verdana, sans-serif !important;
  letter-spacing: 0.04em !important;
}

/* 3. Increased Spacing */
html[data-a11y-spacing="true"] body,
html[data-a11y-spacing="true"] p,
html[data-a11y-spacing="true"] li,
html[data-a11y-spacing="true"] a,
html[data-a11y-spacing="true"] span {
  line-height: 2.0 !important;
  word-spacing: 0.16em !important;
  letter-spacing: 0.06em !important;
}

/* 4. Reading Guide */
.a11y-reading-guide {
  position: fixed;
  top: calc(var(--a11y-guide-y, 50vh) - 18px);
  right: 0;
  left: 0;
  z-index: 9998;
  display: none;
  height: 36px;
  pointer-events: none;
  background: rgba(13, 148, 136, 0.2);
  border-top: 2px solid rgba(13, 148, 136, 0.8);
  border-bottom: 2px solid rgba(13, 148, 136, 0.8);
}
html[data-a11y-guide="true"] .a11y-reading-guide { display: block; }

/* 5. Highlight Headings */
html[data-a11y-headings="true"] h1,
html[data-a11y-headings="true"] h2,
html[data-a11y-headings="true"] h3,
html[data-a11y-headings="true"] h4,
html[data-a11y-headings="true"] h5,
html[data-a11y-headings="true"] h6 {
  outline: 2px dashed #0d9488 !important;
  outline-offset: 4px !important;
  background-color: rgba(13, 148, 136, 0.08) !important;
  border-radius: 4px !important;
}

/* 6. Dark High Contrast */
html[data-a11y-contrast="true"] body,
html[data-a11y-contrast="true"] main,
html[data-a11y-contrast="true"] section,
html[data-a11y-contrast="true"] header,
html[data-a11y-contrast="true"] footer,
html[data-a11y-contrast="true"] nav,
html[data-a11y-contrast="true"] div:not(.a11y-modal-container) {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

html[data-a11y-contrast="true"] a,
html[data-a11y-contrast="true"] p,
html[data-a11y-contrast="true"] span,
html[data-a11y-contrast="true"] h1,
html[data-a11y-contrast="true"] h2,
html[data-a11y-contrast="true"] h3,
html[data-a11y-contrast="true"] h4 {
  color: #ffffff !important;
}

/* 7. Yellow on Black Contrast */
html[data-a11y-yellowblack="true"] body,
html[data-a11y-yellowblack="true"] main,
html[data-a11y-yellowblack="true"] section,
html[data-a11y-yellowblack="true"] header,
html[data-a11y-yellowblack="true"] footer,
html[data-a11y-yellowblack="true"] nav,
html[data-a11y-yellowblack="true"] div:not(.a11y-modal-container) {
  background-color: #000000 !important;
  color: #ffff00 !important;
  border-color: #ffff00 !important;
}

html[data-a11y-yellowblack="true"] a,
html[data-a11y-yellowblack="true"] p,
html[data-a11y-yellowblack="true"] span,
html[data-a11y-yellowblack="true"] h1,
html[data-a11y-yellowblack="true"] h2,
html[data-a11y-yellowblack="true"] h3,
html[data-a11y-yellowblack="true"] h4 {
  color: #ffff00 !important;
}

/* 8. Color Inversion */
html[data-a11y-invert="true"] body {
  filter: invert(100%) hue-rotate(180deg) !important;
}
html[data-a11y-invert="true"] img,
html[data-a11y-invert="true"] video,
html[data-a11y-invert="true"] .a11y-backdrop {
  filter: invert(100%) hue-rotate(180deg) !important;
}

/* 9. Grayscale Monochromatic */
html[data-a11y-grayscale="true"] body {
  filter: grayscale(100%) !important;
}

/* 10. Large High-Visibility Cursor */
html[data-a11y-cursor="true"] *,
html[data-a11y-cursor="true"] a,
html[data-a11y-cursor="true"] button {
  cursor: crosshair !important;
}

/* 11. Hide Images */
html[data-a11y-images="true"] img,
html[data-a11y-images="true"] svg:not(.a11y-icon),
html[data-a11y-images="true"] video {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* 12. Reduced Motion (WCAG 2.2.2) */
html[data-a11y-motion="true"] *,
html[data-a11y-motion="true"] *::before,
html[data-a11y-motion="true"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* 13. Highlight Links */
html[data-a11y-links="true"] a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

/* 14. High Contrast Focus Ring (WCAG 2.4.7) */
html[data-a11y-focus="true"] :focus-visible {
  outline: 4px solid #f59e0b !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.4) !important;
}