/*! BALIZOL accessibility toolbar v1.0.0 - a11y.css
 * Self-contained, no @import, no external URLs. Two parts:
 *   1. the toolbar itself (.a11y-root)
 *   2. the effects a visitor can switch on, driven by data-a11y-* attributes that a11y.js sets on <html>
 * The toolbar helps visitors; legal compliance comes from the page code itself (see README.md).
 */

/* ================================================================== */
/* 1. Toolbar                                                          */
/* ================================================================== */

/* Colour tokens. The first block is the normal theme, the second one the high-contrast theme.
   a11y.test.mjs reads both blocks and checks the contrast ratios. */
.a11y-root {
  --a11y-bg: #ffffff;
  --a11y-fg: #10272e;
  --a11y-muted: #44565c;
  --a11y-soft: #eef3f4;
  --a11y-line: #5b6f76;
  --a11y-brand: #0b3b4d;
  --a11y-brand-fg: #ffffff;
  --a11y-accent: #ffc428;
  --a11y-link: #0a5a85;
  --a11y-focus: #0b3b4d;
  --a11y-halo: #ffffff;
  --a11y-x: 16px;
  --a11y-y: 16px;
  --a11y-z: 2147483000;
}
html[data-a11y-contrast] .a11y-root {
  --a11y-bg: #000000;
  --a11y-fg: #ffffff;
  --a11y-muted: #ffffff;
  --a11y-soft: #000000;
  --a11y-line: #ffffff;
  --a11y-brand: #ffff00;
  --a11y-brand-fg: #000000;
  --a11y-accent: #000000;
  --a11y-link: #ffff00;
  --a11y-focus: #ffff00;
  --a11y-halo: #000000;
}

/* Isolation: the toolbar must not inherit the host page's text styles or pick up its element rules. */
.a11y-root {
  all: initial;
  display: block;
  position: fixed;
  z-index: var(--a11y-z);
  bottom: max(var(--a11y-y), env(safe-area-inset-bottom));
  left: max(var(--a11y-x), env(safe-area-inset-left));
  font-family: Arial, "Segoe UI", "Noto Sans Hebrew", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--a11y-fg);
  direction: rtl;
  text-align: right;
  -webkit-text-size-adjust: 100%;
}
.a11y-root[data-pos="right"] {
  left: auto;
  right: max(var(--a11y-x), env(safe-area-inset-right));
}
/* SVG is excluded on purpose: `all: revert` would also reset d, cx, cy, r (CSS properties in Chrome),
   and the icon would collapse to nothing. */
.a11y-root :not(svg, svg *),
.a11y-root :not(svg, svg *)::before,
.a11y-root :not(svg, svg *)::after {
  all: revert;
  box-sizing: border-box;
}
.a11y-root[hidden],
.a11y-root [hidden] { display: none !important; }

.a11y-root .a11y-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Floating button */
.a11y-root .a11y-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 3px solid var(--a11y-halo);
  border-radius: 50%;
  background: var(--a11y-brand);
  color: var(--a11y-accent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  cursor: pointer;
}
.a11y-root .a11y-fab svg { display: block; fill: currentColor; }
.a11y-root .a11y-fab[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--a11y-line), 0 2px 10px rgba(0, 0, 0, .45); }

/* Panel (opens above the button) */
.a11y-root .a11y-panel {
  position: absolute;
  bottom: calc(3.5rem + .75rem);
  left: 0;
  display: block;
  width: min(22rem, calc(100vw - 2 * var(--a11y-x)));
  max-height: calc(100vh - 6.5rem);
  max-height: calc(100dvh - 6.5rem);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1rem;
  background: var(--a11y-bg);
  color: var(--a11y-fg);
  border: 2px solid var(--a11y-line);
  border-radius: 1rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}
.a11y-root[data-pos="right"] .a11y-panel { left: auto; right: 0; }

.a11y-root .a11y-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .25rem;
}
.a11y-root .a11y-title { font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.a11y-root .a11y-note { margin: 0 0 .75rem; font-size: .9rem; color: var(--a11y-muted); }
.a11y-root .a11y-sect { display: block; margin: 0 0 .9rem; }
.a11y-root .a11y-lbl { margin: 0 0 .4rem; font-size: .95rem; font-weight: 700; }

.a11y-root .a11y-sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.a11y-root .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (max-width: 22rem) {
  .a11y-root .a11y-grid { grid-template-columns: 1fr; }
}

/* Every option: a real <button aria-pressed>. The pressed state is shown by colour AND a check mark AND bold. */
.a11y-root .a11y-btn,
.a11y-root .a11y-reset,
.a11y-root .a11y-close {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 2.75rem;
  padding: .4rem .6rem;
  border: 2px solid var(--a11y-line);
  border-radius: .6rem;
  background: var(--a11y-soft);
  color: var(--a11y-fg);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
}
.a11y-root .a11y-btn:hover,
.a11y-root .a11y-reset:hover,
.a11y-root .a11y-close:hover { border-color: var(--a11y-fg); }
.a11y-root .a11y-btn-text { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.a11y-root .a11y-sub { font-size: .78rem; font-weight: 400; }

.a11y-root .a11y-btn[aria-pressed="true"] {
  background: var(--a11y-brand);
  color: var(--a11y-brand-fg);
  border-color: var(--a11y-brand);
  font-weight: 700;
}
.a11y-root .a11y-btn[aria-pressed="true"]::before {
  content: "";
  flex: none;
  width: .35em;
  height: .7em;
  border: solid currentColor;
  border-width: 0 .17em .17em 0;
  transform: rotate(45deg) translateY(-.12em);
}

.a11y-root .a11y-close { min-height: 2.5rem; padding: .25rem .8rem; font-size: .95rem; }
.a11y-root .a11y-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; }
.a11y-root .a11y-reset { background: var(--a11y-bg); }
.a11y-root .a11y-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--a11y-link);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* Focus: dark ring on a light halo, visible on any background. */
.a11y-root :focus-visible {
  outline: 3px solid var(--a11y-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--a11y-halo);
}
.a11y-root .a11y-fab:focus-visible { outline-offset: 3px; box-shadow: 0 0 0 3px var(--a11y-halo); }

/* Windows High Contrast / forced colours: let the system palette win, keep the pressed state visible. */
@media (forced-colors: active) {
  .a11y-root .a11y-fab { background: ButtonFace; color: ButtonText; border: 2px solid ButtonText; }
  .a11y-root .a11y-panel { background: Canvas; color: CanvasText; border: 2px solid CanvasText; }
  .a11y-root .a11y-btn,
  .a11y-root .a11y-reset,
  .a11y-root .a11y-close { background: ButtonFace; color: ButtonText; border: 2px solid ButtonText; }
  .a11y-root .a11y-btn[aria-pressed="true"] { background: Highlight; color: HighlightText; border-color: HighlightText; }
  .a11y-root .a11y-link { color: LinkText; }
  .a11y-root :focus-visible { outline: 3px solid Highlight; }
}

@media print { .a11y-root { display: none !important; } }

/* ================================================================== */
/* 2. Effects on the page                                              */
/*    Everything excludes the toolbar itself and media (images, svg,   */
/*    video, canvas, iframes), so e.g. a QR code stays scannable.      */
/* ================================================================== */

/* --- Text size 115 / 130 / 150 % ------------------------------------
   Preferred: CSS zoom on the page content (works for px-based pages too).
   Fallback for engines without zoom: scale the root font size (rem/em based pages only). */
@supports (zoom: 1) {
  html[data-a11y-fs="115"] body > :not([data-a11y-root]) { zoom: 1.15; }
  html[data-a11y-fs="130"] body > :not([data-a11y-root]) { zoom: 1.3; }
  html[data-a11y-fs="150"] body > :not([data-a11y-root]) { zoom: 1.5; }
  /* Reflow safety net: scaled fixed-width media must not push the page wider than the screen
     (that would also move the fixed toolbar out of view on phones). Pages should set max-width:100% themselves. */
  html[data-a11y-fs] body > :not([data-a11y-root]) { overflow-wrap: anywhere; }
  html[data-a11y-fs] body :is(img, video, canvas):not([data-a11y-root] *) { max-width: 100%; height: auto; }
  html[data-a11y-fs] body :is(svg, iframe, embed, object):not([data-a11y-root] *) { max-width: 100%; }
}
@supports not (zoom: 1) {
  html[data-a11y-fs="115"] { font-size: 115%; }
  html[data-a11y-fs="130"] { font-size: 130%; }
  html[data-a11y-fs="150"] { font-size: 150%; }
}

/* --- High contrast --------------------------------------------------- */
html[data-a11y-contrast] { color-scheme: dark; background: #000 !important; }
html[data-a11y-contrast] body { background: #000 !important; color: #fff !important; }
html[data-a11y-contrast] body :not(svg, svg *, img, picture, video, canvas, iframe, [data-a11y-root], [data-a11y-root] *) {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-a11y-contrast] body a:not([data-a11y-root] a) {
  color: #ff0 !important;
  text-decoration: underline !important;
}
html[data-a11y-contrast] body :is(button, input, select, textarea, summary):not([data-a11y-root] *) {
  border: 2px solid #fff !important;
}
html[data-a11y-contrast] body :focus-visible:not([data-a11y-root] *) {
  outline: 3px solid #ff0 !important;
  outline-offset: 2px !important;
}

/* --- Grayscale (on <html>, so position:fixed keeps working) ------------ */
html[data-a11y-gray] { filter: grayscale(1); }

/* --- Underline + highlight links -------------------------------------- */
html[data-a11y-links] body a:not([data-a11y-root] a) {
  text-decoration: underline !important;
  text-decoration-thickness: .12em !important;
  text-underline-offset: .2em !important;
  background-color: #ffee58 !important;
  color: #000 !important;
  border-radius: .15em;
  box-shadow: 0 0 0 .14em #ffee58 !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --- Readable font ------------------------------------------------------ */
html[data-a11y-font] body :not(svg, svg *, [data-a11y-root], [data-a11y-root] *) {
  font-family: Arial, "Segoe UI", "Noto Sans Hebrew", "Helvetica Neue", Helvetica, sans-serif !important;
  font-style: normal !important;
  line-height: 1.7 !important;
  letter-spacing: .02em !important;
  word-spacing: .08em !important;
}

/* --- Pause animations (the visitor's choice, or the device's reduced-motion setting) ---------
   a11y.js writes data-a11y-motion="off" (paused) or "on" (visitor allows motion) on <html>.
   The media query covers the moment before the script has run. */
html[data-a11y-motion="off"],
html[data-a11y-motion="off"] *,
html[data-a11y-motion="off"] *::before,
html[data-a11y-motion="off"] *::after {
  animation-duration: .001ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-a11y-motion]),
  html:not([data-a11y-motion]) *,
  html:not([data-a11y-motion]) *::before,
  html:not([data-a11y-motion]) *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* --- Large cursor (48px arrow, 48px hand; SVG data URIs, allowed by img-src data:) ---------- */
html[data-a11y-cursor],
html[data-a11y-cursor] :not(input, textarea, select) {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'%3E%3Cpath d='M4 2v24l6.5-6 4.5 10 4-1.8-4.4-9.8H24z' fill='black' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}
html[data-a11y-cursor] :is(a[href], button, summary, label, [role="button"], [role="link"], input[type="checkbox"], input[type="radio"], input[type="submit"], select) {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'%3E%3Cpath d='M12 3.5a2 2 0 0 1 4 0V13l7.2 1.8a3 3 0 0 1 2.3 3.2l-.7 8.2a3 3 0 0 1-3 2.8H14a3 3 0 0 1-2.4-1.2L6 20.6a2 2 0 0 1 3.2-2.4l2.8 3z' fill='white' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 14 3, pointer !important;
}