/* Accessibility widget — תקן ישראלי 5568 / WCAG 2.0 AA
   Themeable via --a11y-* variables (set in site.css). RTL by default. Pairs with a11y.js. */
:root {
  --a11y-accent: #B08D57;
  --a11y-bg: #2F382B;
  --a11y-fg: #F4EFE7;
  --a11y-btn-size: 52px;
  --a11y-radius: 14px;
  --a11y-z: 9990;
  --a11y-inline-start: 18px;
  --a11y-block-end: 18px;
}

/* ---- launcher ---- */
.a11y-btn {
  position: fixed;
  inset-inline-start: var(--a11y-inline-start); /* start = right in RTL */
  inset-block-end: var(--a11y-block-end);
  z-index: var(--a11y-z);
  width: var(--a11y-btn-size);
  height: var(--a11y-btn-size);
  border: 0;
  border-radius: 50%;
  background: var(--a11y-accent);
  color: #2F382B;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgb(0 0 0 / .3);
  transition: transform .18s ease, box-shadow .18s ease;
}
.a11y-btn:hover { transform: scale(1.07); box-shadow: 0 6px 22px rgb(0 0 0 / .38); }
.a11y-btn:focus-visible { outline: 3px solid #14130F; outline-offset: 3px; box-shadow: 0 0 0 3px #fff, 0 4px 16px rgb(0 0 0 / .3); }
.a11y-btn svg { width: 60%; height: 60%; fill: currentColor; }

/* ---- panel ---- */
.a11y-panel {
  position: fixed;
  inset-inline-start: var(--a11y-inline-start);
  inset-block-end: calc(var(--a11y-block-end) + var(--a11y-btn-size) + 12px);
  z-index: var(--a11y-z);
  width: min(310px, calc(100vw - 36px));
  max-height: min(76vh, 600px);
  overflow-y: auto;
  padding: 16px;
  border-radius: var(--a11y-radius);
  background: var(--a11y-bg);
  color: var(--a11y-fg);
  box-shadow: 0 10px 40px rgb(0 0 0 / .45);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  display: none;
}
.a11y-panel[data-open="true"] { display: block; }
.a11y-panel h2 { margin: 0 0 12px; font-size: 1.15rem; font-weight: 700; color: var(--a11y-accent); }
.a11y-close {
  position: absolute; inset-inline-end: 10px; inset-block-start: 10px;
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: rgb(255 255 255 / .12); color: var(--a11y-fg);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.a11y-close:focus-visible { outline: 2px solid var(--a11y-accent); outline-offset: 2px; }
.a11y-opt {
  width: 100%; display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px; padding: 10px 12px;
  border: 1px solid rgb(255 255 255 / .2); border-radius: 10px;
  background: transparent; color: var(--a11y-fg);
  font: inherit; font-size: 15px; text-align: start; cursor: pointer;
}
.a11y-opt:hover { background: rgb(255 255 255 / .07); }
.a11y-opt:focus-visible { outline: 2px solid var(--a11y-accent); outline-offset: 2px; }
.a11y-opt[aria-pressed="true"] { border-color: var(--a11y-accent); background: rgb(176 141 87 / .22); }
.a11y-opt[aria-pressed="true"]::after { content: "\2713"; margin-inline-start: auto; color: var(--a11y-accent); }
.a11y-opt .a11y-ico { flex: 0 0 28px; text-align: center; direction: ltr; font-weight: 700; }
.a11y-live { margin: 6px 0 0; min-height: 1.4em; font-size: 13px; color: var(--a11y-accent); }
.a11y-reset {
  width: 100%; margin-top: 6px; padding: 11px; border: 0; border-radius: 10px;
  background: var(--a11y-accent); color: #14130F; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.a11y-reset:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.a11y-statement { display: block; margin-top: 12px; color: var(--a11y-fg); font-size: 14px; text-align: center; }

/* ---- the adjustments themselves ---- */
/* Font scaling rides on html font-size so rem-based layouts scale together. */
html[data-a11y-font="1"] { font-size: 112.5%; }
html[data-a11y-font="2"] { font-size: 125%; }
html[data-a11y-font="3"] { font-size: 140%; }
html[data-a11y-font="-1"] { font-size: 90%; }

html.a11y-grayscale body { filter: grayscale(1); }

html.a11y-contrast body,
html.a11y-contrast body * {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  border-color: #fff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html.a11y-contrast body a,
html.a11y-contrast body a * { color: #ff0 !important; }
html.a11y-contrast body img { filter: contrast(1.15); }
html.a11y-contrast .burger span { background-color: #fff !important; }
html.a11y-contrast .ic { border: 2px solid #fff; }
html.a11y-contrast .sw__ph img, html.a11y-contrast .pn img { filter: none; }
html.a11y-contrast .hd { backdrop-filter: none; }
html.a11y-contrast .mnav-bd { background-color: rgb(0 0 0 / .8) !important; }
/* keep the widget itself usable while high contrast is on */
html.a11y-contrast .a11y-btn,
html.a11y-contrast .a11y-btn * { background-color: #ff0 !important; color: #000 !important; fill: #000; }
html.a11y-contrast .a11y-opt[aria-pressed="true"] { outline: 2px solid #ff0; }
html.a11y-contrast .a11y-reset, html.a11y-contrast .a11y-reset * { background-color: #ff0 !important; color: #000 !important; }

html.a11y-links body a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px;
  font-weight: 700 !important;
}

html.a11y-readable body,
html.a11y-readable body * {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
  letter-spacing: normal !important;
}

/* Stop motion: CSS animation/transition off; scroll scenes settle via html.flat (site.css). */
html.a11y-no-motion *,
html.a11y-no-motion *::before,
html.a11y-no-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html.a11y-no-motion video { display: none; }

/* Always-visible focus ring while the keyboard is in use */
html.a11y-focus :focus {
  outline: 3px solid #E0B400 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px #14130F !important;
}

@media (prefers-reduced-motion: reduce) { .a11y-btn { transition: none; } }
@media print { .a11y-btn, .a11y-panel { display: none !important; } }