/* Accessibility Panel — gym.uoa.gr
   Per /root/project-defaults/20_ACCESSIBILITY_PANEL.md
   Brand color: #1e73be (matches site theme) */

#a11y-toggle {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; padding: 0; border: 0;
  background: #1e73be; color: #fff; cursor: pointer;
  border-radius: 8px 0 0 8px; z-index: 9990;
  display: flex; align-items: center; justify-content: center;
  box-shadow: -2px 2px 8px rgba(0,0,0,0.2);
}
#a11y-toggle:hover { background: #2587d8; }

#a11y-panel {
  position: fixed; right: -380px; top: 0; height: 100vh; width: 360px;
  background: #fff; color: #111; z-index: 9991;
  transition: right 0.3s ease;
  overflow-y: auto; box-shadow: -4px 0 16px rgba(0,0,0,0.2);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
}
#a11y-panel.open { right: 0; }
#a11y-panel header {
  position: sticky; top: 0; background: #fff; padding: 16px 20px;
  border-bottom: 1px solid #e5e5e5;
  display: flex; align-items: center; gap: 8px;
}
#a11y-panel header h3 { margin: 0; flex: 1; font-size: 17px; color: #111; }
#a11y-panel header button {
  background: transparent; border: 1px solid #ccc; border-radius: 4px;
  padding: 4px 10px; font-size: 12px; cursor: pointer; color: #333;
}
#a11y-panel #a11y-close { font-size: 22px; line-height: 1; padding: 0 8px; }
#a11y-panel section { padding: 12px 20px; border-bottom: 1px solid #f0f0f0; }
#a11y-panel section h4 {
  margin: 0 0 10px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; color: #888;
}

.a11y-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; gap: 8px;
}
.a11y-label { flex: 1; font-size: 13px; color: #333; }

/* Toggle switch */
.a11y-tgl {
  position: relative; width: 36px; height: 20px; padding: 0;
  border: 0; background: #ccc; border-radius: 10px; cursor: pointer;
  transition: background 0.2s;
}
.a11y-tgl.on { background: #1e73be; }
.a11y-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  background: #fff; border-radius: 50%; transition: left 0.2s;
}
.a11y-tgl.on .a11y-knob { left: 18px; }

/* Segmented control */
.a11y-seg { display: flex; gap: 0; }
.a11y-seg button {
  border: 1px solid #ccc; background: #fff; padding: 4px 10px;
  font-size: 12px; cursor: pointer; min-width: 32px; color: #333;
}
.a11y-seg button:not(:last-child) { border-right: 0; }
.a11y-seg button:first-child { border-radius: 4px 0 0 4px; }
.a11y-seg button:last-child  { border-radius: 0 4px 4px 0; }
.a11y-seg button.on { background: #1e73be; color: #fff; border-color: #1e73be; }

/* ── Applied states ────────────────────────────────────────────── */

/* Text */
html.a11y-font-large  { font-size: 110%; }
html.a11y-font-xlarge { font-size: 125%; }
html.a11y-letter-wide  { letter-spacing: 0.05em !important; }
html.a11y-letter-wider { letter-spacing: 0.10em !important; }
html.a11y-line-wide  * { line-height: 1.7 !important; }
html.a11y-line-wider * { line-height: 2.0 !important; }
html.a11y-word-spacing * { word-spacing: 0.16em !important; }
html.a11y-bold-all * { font-weight: 600 !important; }
html.a11y-dyslexia-font * {
  font-family: "OpenDyslexic", "Atkinson Hyperlegible", "Comic Sans MS",
               "Verdana", sans-serif !important;
}

/* Colors */
html.a11y-contrast  { filter: contrast(1.4); }
html.a11y-grayscale { filter: grayscale(1); }
html.a11y-invert    { filter: invert(1) hue-rotate(180deg); }
html.a11y-invert img, html.a11y-invert video {
  filter: invert(1) hue-rotate(180deg);
}
html.a11y-cb-protanopia   { filter: url('#a11y-cb-protanopia'); }
html.a11y-cb-deuteranopia { filter: url('#a11y-cb-deuteranopia'); }
html.a11y-cb-tritanopia   { filter: url('#a11y-cb-tritanopia'); }

/* Links & elements */
html.a11y-underline-links a { text-decoration: underline !important; }
html.a11y-highlight-links a {
  outline: 2px solid #1e73be !important; outline-offset: 2px;
  background: rgba(30,115,190,0.12) !important;
}
html.a11y-highlight-headings :is(h1,h2,h3,h4,h5,h6) {
  outline: 2px dashed #1e73be !important; outline-offset: 4px;
  background: rgba(30,115,190,0.08) !important;
}
html.a11y-big-cursor, html.a11y-big-cursor * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M4 4 L4 32 L12 24 L18 36 L22 34 L16 22 L28 22 Z' fill='%231e73be' stroke='%23000' stroke-width='1.5'/></svg>") 4 4, auto !important;
}
html.a11y-big-targets :is(a,button,input,select,textarea) {
  min-height: 44px !important; min-width: 44px !important; padding: 12px !important;
}
html.a11y-visible-focus :focus, html.a11y-visible-focus :focus-visible {
  outline: 3px solid #1e73be !important; outline-offset: 2px !important;
  box-shadow: 0 0 0 6px rgba(30,115,190,0.3) !important;
}

/* Motion & media */
html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
html.a11y-pause-animations *, html.a11y-pause-animations *::before, html.a11y-pause-animations *::after {
  animation-play-state: paused !important;
}
html.a11y-hide-images img, html.a11y-hide-images video, html.a11y-hide-images svg,
html.a11y-hide-images [style*="background-image"] {
  visibility: hidden !important;
}

/* Reading aids */
#a11y-reading-guide {
  position: fixed; left: 0; right: 0; height: 2px;
  background: #1e73be; box-shadow: 0 0 8px rgba(30,115,190,0.6);
  pointer-events: none; z-index: 9989; top: 50%;
}
#a11y-reading-mask {
  position: fixed; inset: 0; pointer-events: none; z-index: 9988;
  --ay: 50%;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.75) 0,
    rgba(0,0,0,0.75) calc(var(--ay) - 60px),
    transparent       calc(var(--ay) - 30px),
    transparent       calc(var(--ay) + 30px),
    rgba(0,0,0,0.75) calc(var(--ay) + 60px),
    rgba(0,0,0,0.75) 100%);
}
html.a11y-tts-active * { cursor: help; }