/* Accessibility widget — shared, self-hosted. Loaded on every site.
   Modes follow wcag-accessibility-widget (skills-il): contrast, font scale,
   keyboard focus, readable font, heading/link markers, no motion.
   It is a comfort tool, not a compliance certificate — the markup must still conform. */

:root { --a11y-mark: #c00000; }

/* ---------- keyboard focus highlight ---------- */
html.a11y-keyboard *:focus,
html.a11y-keyboard *:focus-visible {
  outline: 3px solid var(--a11y-mark) !important;
  outline-offset: 3px !important;
}

/* ---------- no animations ---------- */
html.a11y-no-anim *, html.a11y-no-anim *::before, html.a11y-no-anim *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  transition-duration: 0.001ms !important; transition-delay: 0s !important;
}
html.a11y-no-anim { scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important; transition-delay: 0s !important;
  }
  html { scroll-behavior: auto !important; }
}

/* ---------- high contrast (recolour, never filter) ---------- */
html.a11y-contrast body,
html.a11y-contrast body *:not(img):not(video):not(picture):not(svg) {
  background-color: #000 !important;
  color: #fff !important;
}
html.a11y-contrast a { color: #ff0 !important; }
html.a11y-contrast input, html.a11y-contrast textarea,
html.a11y-contrast select, html.a11y-contrast button {
  border: 1px solid #fff !important;
}
html.a11y-contrast ::placeholder { color: #d9d9d9 !important; opacity: 1; }
html.a11y-contrast { --a11y-mark: #ff5252; background-color: #000 !important; }
html.a11y-contrast [role="switch"] > span[aria-hidden="true"] {
  background-color: #000 !important; box-shadow: 0 0 0 1px #fff !important;
}
html.a11y-contrast [role="switch"] > span[aria-hidden="true"] > span {
  background-color: #fff !important;
}
/* ON must be unmistakable in contrast mode: filled track, black thumb */
html.a11y-contrast [role="switch"][aria-checked="true"] > span[aria-hidden="true"] {
  background-color: #fff !important;
}
html.a11y-contrast [role="switch"][aria-checked="true"] > span[aria-hidden="true"] > span {
  background-color: #000 !important;
}

/* ---------- font size: scale the root so rem-based sizes follow ---------- */
html.a11y-font-lg { font-size: 115%; }
html.a11y-font-sm { font-size: 88%; }

/* ---------- readable font ---------- */
html.a11y-readable body *:not(i):not(svg):not(code):not(pre):not([class*="icon"]) {
  font-family: Arial, Helvetica, sans-serif !important;
  letter-spacing: 0.015em;
}

/* ---------- mark headings ---------- */
html.a11y-headings h1, html.a11y-headings h2,
html.a11y-headings h3, html.a11y-headings h4 {
  outline: 2px dashed var(--a11y-mark) !important;
  outline-offset: 6px;
}

/* ---------- mark links / buttons (not the widget's own controls) ---------- */
html.a11y-links a,
html.a11y-links button:not([role="switch"]):not(.a11y-btn) {
  outline: 2px solid #3b82f6 !important;
  text-decoration: underline !important;
}

/* ================= widget UI (all px: must not scale with the font mode) ===== */
.a11y-btn{
  position:fixed; bottom:16px; inset-inline-start:16px; z-index:9000;
  width:48px; height:48px; border-radius:50%; border:1px solid rgba(0,0,0,.14);
  background:#1c1c1c; color:#fff; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  font:400 12px/1 Arial, Helvetica, sans-serif; letter-spacing:.02em;
}
.a11y-btn:hover{ background:#000; }
.a11y-btn svg{ width:26px; height:26px; display:block; fill:currentColor; }

.a11y-panel{
  position:fixed; bottom:76px; inset-inline-start:16px; z-index:9000;
  width:320px; max-width:calc(100vw - 32px); max-height:calc(100vh - 110px);
  overflow-y:auto; overscroll-behavior:contain;
  background:#fff; color:#161616; border:1px solid rgba(0,0,0,.14);
  border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.24);
  padding:16px 16px 14px;
  font:400 14px/1.5 Arial, Helvetica, sans-serif; text-align:start;
}
.a11y-panel[hidden]{ display:none; }
.a11y-panel h2{
  margin:0 0 10px; font-size:15px; font-weight:700; letter-spacing:.01em;
  padding-inline-end:28px;
}
.a11y-close{
  position:absolute; top:10px; inset-inline-end:10px; width:26px; height:26px;
  border:1px solid rgba(0,0,0,.16); border-radius:6px; background:#fff; color:#161616;
  cursor:pointer; font:400 15px/1 Arial, Helvetica, sans-serif; padding:0;
}
.a11y-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; padding:7px 0; background:none; border:0; border-bottom:1px solid rgba(0,0,0,.08);
  font:400 15px/1.45 Arial, Helvetica, sans-serif; color:#161616; text-align:start; cursor:pointer;
}
.a11y-row:last-of-type{ border-bottom:0; }
.a11y-track{
  position:relative; width:44px; height:24px; border-radius:99px; flex:0 0 auto;
  background:#767676;
}
.a11y-row[aria-checked="true"] .a11y-track{ background:#1a4fbf; }
.a11y-thumb{
  position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.35); transition:transform .18s ease;
}
.a11y-row[aria-checked="true"] .a11y-thumb{ transform:translateX(20px); }

.a11y-fonts{ display:flex; gap:6px; align-items:center; padding:9px 0 3px; }
.a11y-fonts span{ font-size:15px; margin-inline-end:auto; }
.a11y-fbtn{
  min-width:34px; height:30px; padding:0 8px; border-radius:8px; cursor:pointer;
  border:1px solid rgba(0,0,0,.18); background:#fff; color:#161616;
  font:400 14px/1 Arial, Helvetica, sans-serif;
}
.a11y-fbtn[aria-pressed="true"]{ background:#161616; color:#fff; border-color:#161616; }
.a11y-reset{
  margin-top:10px; width:100%; height:34px; border-radius:8px; cursor:pointer;
  border:1px solid rgba(0,0,0,.18); background:#f4f2ee; color:#161616;
  font:400 14px/1 Arial, Helvetica, sans-serif;
}

/* contrast mode keeps the panel readable */
html.a11y-contrast .a11y-panel,
html.a11y-contrast .a11y-btn{ border-color:#fff !important; }
html.a11y-contrast .a11y-panel h2{ color:#fff !important; }

/* the interim "בהרצה / דמו" bar is fixed at the bottom with z-index 9999 —
   lift the widget above it so it stays clickable on demo pages */
html.devbar-on .a11y-btn, body:has(#devbar) .a11y-btn { bottom: 74px; }
html.devbar-on .a11y-panel, body:has(#devbar) .a11y-panel {
  bottom: 132px; max-height: calc(100vh - 170px);
}

/* corner already taken by a social bubble / FAB — mirror to the other side */
html.a11y-flip .a11y-btn{ inset-inline-start:auto; inset-inline-end:16px; }
html.a11y-flip .a11y-panel{ inset-inline-start:auto; inset-inline-end:16px; }

@media (max-width:420px){
  .a11y-panel{ width:calc(100vw - 32px); bottom:70px; }
  .a11y-btn{ width:44px; height:44px; }
}
@media print{ .a11y-btn, .a11y-panel{ display:none !important; } }