/*!
 * Madaf Accessibility — סרגל נגישות (IS 5568 / WCAG 2.0 AA)
 * Styles are loaded as a real stylesheet (no inline injection) for caching + CSP.
 * Accent color is themable via --a11y-accent (set inline by the plugin).
 */

:root { --a11y-accent: #0057B7; }

/* ── Skip link ─────────────────────────────────────────────────────── */
#a11y-skip-link {
  position: absolute; top: -100px; right: 0;
  background: var(--a11y-accent, #0057B7); color: #fff;
  padding: 12px 20px; font-size: 16px; font-weight: 700;
  text-decoration: none; z-index: 9999999;
  border-radius: 0 0 0 10px; transition: top .2s;
}
#a11y-skip-link:focus { top: 0; }

/* ── Floating button ───────────────────────────────────────────────── */
#a11y-btn {
  position: fixed; z-index: 999997;
  bottom: 30px;
  width: 58px; height: 58px;
  background: var(--a11y-accent, #0057B7); color: #fff;
  border: 3px solid #fff; border-radius: 50%;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(0,0,0,.32);
  transition: transform .2s, background .2s, box-shadow .2s;
  outline: none;
}
#a11y-widget-root.a11y-pos-left  #a11y-btn { left: 30px; }
#a11y-widget-root.a11y-pos-right #a11y-btn { right: 30px; }
#a11y-btn:hover { filter: brightness(.9); transform: scale(1.08); }
#a11y-btn:focus-visible { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--a11y-accent, #0057B7); }
#a11y-btn svg { width: 28px; height: 28px; pointer-events: none; }
#a11y-btn[aria-expanded=true] { filter: brightness(.9); }

/* ── Panel ─────────────────────────────────────────────────────────── */
#a11y-panel {
  position: fixed; z-index: 999996;
  bottom: 104px;
  width: 318px; max-height: calc(100vh - 130px);
  background: #fff; border-radius: 16px;
  box-shadow: 0 12px 50px rgba(0,0,0,.22);
  display: flex; flex-direction: column; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Rubik, Arial, sans-serif;
  font-size: 15px; direction: rtl; color: #2d3a47;
  opacity: 0; transform: translateY(14px) scale(.97); pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
#a11y-widget-root.a11y-pos-left  #a11y-panel { left: 14px; }
#a11y-widget-root.a11y-pos-right #a11y-panel { right: 14px; }
#a11y-panel.a11y-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }

/* Panel header */
#a11y-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--a11y-accent, #0057B7); color: #fff;
}
#a11y-panel-header h2 {
  all: unset; font-size: 16px; font-weight: 700; color: #fff;
  font-family: inherit; display: flex; align-items: center; gap: 8px;
}
#a11y-close-btn {
  background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.45);
  color: #fff; border-radius: 7px; width: 30px; height: 30px;
  cursor: pointer; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; flex-shrink: 0;
}
#a11y-close-btn:hover, #a11y-close-btn:focus { background: rgba(255,255,255,.35); }
#a11y-close-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Panel body */
#a11y-panel-body { overflow-y: auto; padding: 12px; flex: 1; }
#a11y-panel-body::-webkit-scrollbar { width: 5px; }
#a11y-panel-body::-webkit-scrollbar-thumb { background: #cdd7e0; border-radius: 3px; }

/* Section card */
.a11y-section { margin-bottom: 10px; background: #f4f7fb; border-radius: 11px; padding: 10px 12px; }
.a11y-section-title { font-size: 11px; font-weight: 700; color: #5a6779; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }

/* Button group (font size / contrast) */
.a11y-btn-group { display: flex; gap: 5px; flex-wrap: wrap; }
.a11y-opt-btn {
  flex: 1; min-width: 60px; padding: 7px 4px;
  background: #fff; border: 2px solid #d2dae4; border-radius: 9px;
  cursor: pointer; font-size: 12px; font-family: inherit; color: #2d3a47;
  text-align: center; transition: border-color .15s, background .15s, color .15s;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  line-height: 1.3;
}
.a11y-opt-btn:hover { border-color: var(--a11y-accent, #0057B7); background: #edf3ff; }
.a11y-opt-btn:focus-visible { outline: 3px solid var(--a11y-accent, #0057B7); outline-offset: 2px; }
.a11y-opt-btn.a11y-active { background: var(--a11y-accent, #0057B7); border-color: var(--a11y-accent, #0057B7); color: #fff; font-weight: 600; }
.a11y-btn-icon { font-size: 17px; }
.a11y-btn-lbl { font-size: 11px; }

/* Toggle rows */
.a11y-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid #e5ecf3; cursor: pointer;
}
.a11y-toggle-row:last-child { border-bottom: none; padding-bottom: 0; }
.a11y-toggle-label {
  font-size: 13.5px; color: #2d3a47;
  display: flex; align-items: center; gap: 8px;
  user-select: none;
}
.a11y-t-icon { font-size: 16px; width: 22px; text-align: center; }

/* Toggle switch */
.a11y-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.a11y-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.a11y-track {
  position: absolute; inset: 0; background: #bcc8d4; border-radius: 11px;
  cursor: pointer; transition: background .2s;
}
.a11y-track::after {
  content: ""; position: absolute; top: 3px; right: 3px;
  width: 16px; height: 16px; background: #fff; border-radius: 50%;
  transition: right .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.a11y-switch input:checked + .a11y-track { background: var(--a11y-accent, #0057B7); }
.a11y-switch input:checked + .a11y-track::after { right: calc(100% - 19px); }
.a11y-switch input:focus-visible + .a11y-track { box-shadow: 0 0 0 3px rgba(0,87,183,.5); }

/* Footer */
#a11y-panel-footer {
  padding: 10px 12px 12px; border-top: 1px solid #e5ecf3;
  display: flex; gap: 8px;
}
.a11y-foot-btn {
  flex: 1; padding: 9px 6px; border-radius: 9px;
  border: 2px solid #d2dae4; background: #fff;
  cursor: pointer; font-size: 13px; font-family: inherit; color: #2d3a47;
  transition: border-color .15s, background .15s; text-align: center;
  text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 5px;
}
.a11y-foot-btn:hover { border-color: var(--a11y-accent, #0057B7); background: #edf3ff; color: var(--a11y-accent, #0057B7); }
.a11y-foot-btn:focus-visible { outline: 3px solid var(--a11y-accent, #0057B7); outline-offset: 2px; }
#a11y-reset-btn { border-color: #d44; color: #d44; }
#a11y-reset-btn:hover { background: #fff0f0; border-color: #c33; color: #c33; }

/* ── Reading Guide ─────────────────────────────────────────────────── */
#a11y-reading-guide {
  position: fixed; left: 0; right: 0; height: 34px;
  background: rgba(0,87,183,.11);
  border-top: 2px solid rgba(0,87,183,.38);
  border-bottom: 2px solid rgba(0,87,183,.38);
  pointer-events: none; z-index: 999994; display: none;
}

/* ── Applied feature classes ───────────────────────────────────────── */

/* Font size — applied on <html> so rem units scale everywhere */
html.a11y-f1 { font-size: 115% !important; }
html.a11y-f2 { font-size: 130% !important; }
html.a11y-f3 { font-size: 150% !important; }

/* High contrast — exclude widget root */
body.a11y-high *:not(#a11y-widget-root):not(#a11y-widget-root *) {
  background-color: #000 !important; color: #ff0 !important; border-color: #ff0 !important;
}
body.a11y-high a:not(#a11y-widget-root a):not(#a11y-widget-root *) { color: #0ff !important; }
body.a11y-high button:not(#a11y-widget-root *),
body.a11y-high input:not(#a11y-widget-root *),
body.a11y-high select:not(#a11y-widget-root *),
body.a11y-high textarea:not(#a11y-widget-root *) {
  background: #000 !important; color: #ff0 !important; border: 2px solid #ff0 !important;
}
body.a11y-high img:not(#a11y-widget-root *) { filter: contrast(1.3) brightness(1.1) !important; }

/* Dark contrast */
body.a11y-dark *:not(#a11y-widget-root):not(#a11y-widget-root *) {
  background-color: #12121e !important; color: #ddd !important; border-color: #444 !important;
}
body.a11y-dark a:not(#a11y-widget-root a):not(#a11y-widget-root *) { color: #6eb5ff !important; }
body.a11y-dark img:not(#a11y-widget-root *) { filter: brightness(.82) !important; }

/* Grayscale */
body.a11y-gray > *:not(#a11y-widget-root) { filter: grayscale(100%); }

/* Stop animations */
body.a11y-no-anim *:not(#a11y-widget-root *),
body.a11y-no-anim *:not(#a11y-widget-root *)::before,
body.a11y-no-anim *:not(#a11y-widget-root *)::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}

/* Dyslexia-friendly reading — no external font (privacy/GDPR-safe).
   Tahoma/Verdana are humanist, widely installed and considered more legible;
   the spacing changes carry most of the readability benefit for Hebrew. */
body.a11y-dyslexia *:not(#a11y-widget-root *) {
  font-family: Tahoma, Verdana, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: .03em !important; word-spacing: .08em !important; line-height: 1.75 !important;
}

/* Highlight links */
body.a11y-links a:not(#a11y-widget-root *) {
  outline: 2px solid var(--a11y-accent, #0057B7) !important; text-decoration: underline !important;
  background: rgba(0,87,183,.09) !important; padding: 1px 3px !important; border-radius: 3px !important;
}

/* Highlight headings */
body.a11y-heads h1:not(#a11y-widget-root *), body.a11y-heads h2:not(#a11y-widget-root *),
body.a11y-heads h3:not(#a11y-widget-root *), body.a11y-heads h4:not(#a11y-widget-root *),
body.a11y-heads h5:not(#a11y-widget-root *), body.a11y-heads h6:not(#a11y-widget-root *) {
  outline: 3px solid #e05500 !important; outline-offset: 3px !important;
  background: rgba(224,85,0,.07) !important;
}

/* Big cursor */
body.a11y-cursor, body.a11y-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 d='M6 4L6 42L18 30L24 46L32 43L26 29L40 29Z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 6 4, auto !important;
}

/* Letter spacing */
body.a11y-lspacing p:not(#a11y-widget-root *),
body.a11y-lspacing li:not(#a11y-widget-root *),
body.a11y-lspacing span:not(#a11y-widget-root *),
body.a11y-lspacing div:not(#a11y-widget-root *) {
  letter-spacing: .12em !important; word-spacing: .16em !important;
}

/* Line height */
body.a11y-lheight p:not(#a11y-widget-root *),
body.a11y-lheight li:not(#a11y-widget-root *),
body.a11y-lheight div:not(#a11y-widget-root *) {
  line-height: 1.9 !important;
}

/* Enhanced focus */
body.a11y-focus *:not(#a11y-widget-root *):focus,
body.a11y-focus *:not(#a11y-widget-root *):focus-visible {
  outline: 4px solid #e05500 !important; outline-offset: 3px !important;
  box-shadow: 0 0 0 7px rgba(224,85,0,.25) !important;
}

/* Respect users who asked the OS to reduce motion — kill the widget's own
   transitions (the toggles above still work; they just apply instantly). */
@media (prefers-reduced-motion: reduce) {
  #a11y-skip-link, #a11y-btn, #a11y-panel,
  #a11y-close-btn, .a11y-opt-btn, .a11y-foot-btn,
  .a11y-track, .a11y-track::after {
    transition: none !important;
  }
}

/* Responsive */
@media (max-width: 400px) {
  #a11y-panel { width: calc(100vw - 20px); bottom: 88px; }
  #a11y-widget-root.a11y-pos-left  #a11y-panel { left: 10px; }
  #a11y-widget-root.a11y-pos-right #a11y-panel { right: 10px; }
  #a11y-widget-root.a11y-pos-left  #a11y-btn { left: 16px; bottom: 18px; }
  #a11y-widget-root.a11y-pos-right #a11y-btn { right: 16px; bottom: 18px; }
}