/* Accessibility widget — תקן ישראלי 5568 / WCAG 2.0 AA
   Themeable: override the --a11y-* variables per site. RTL by default.
   Pairs with a11y.js. See README.md. */

:root {
  --a11y-accent: #C9A84C;
  --a11y-bg: #14140f;
  --a11y-fg: #f6f3ea;
  --a11y-btn-size: 52px;
  --a11y-radius: 14px;
  --a11y-z: 9990;
  /* Where the launcher sits. Raise --a11y-block-end to stack it above the site's
     own floating buttons (WhatsApp/Waze) instead of landing on top of them. */
  --a11y-inline-start: 18px;
  --a11y-block-end: 18px;
}

/* ---- launcher ---------------------------------------------------------- */
.a11y-btn {
  position: fixed;
  inset-inline-start: var(--a11y-inline-start);   /* start = right in RTL, left in LTR */
  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: #1a1a1a;
  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 #fff; outline-offset: 3px; }
.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(74vh, 560px);
  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;
  display: none;
}
.a11y-panel[data-open="true"] { display: block; }

.a11y-panel h2 {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--a11y-accent);
}
.a11y-close {
  position: absolute;
  inset-inline-end: 10px;
  inset-block-start: 10px;
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  background: rgb(255 255 255 / .1);
  color: var(--a11y-fg);
  font-size: 18px; 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 / .14);
  border-radius: 10px;
  background: transparent;
  color: var(--a11y-fg);
  font: inherit;
  font-size: .95rem;
  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(201 168 76 / .16);
}
.a11y-opt .a11y-ico { flex: 0 0 20px; text-align: center; }

.a11y-reset {
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  border: 0; border-radius: 10px;
  background: var(--a11y-accent);
  color: #1a1a1a;
  font: inherit; font-weight: 700;
  cursor: pointer;
}
.a11y-statement {
  display: block;
  margin-top: 10px;
  color: var(--a11y-fg);
  font-size: .85rem;
  text-align: center;
  opacity: .85;
}

/* ---- 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-invert body { filter: invert(1) hue-rotate(180deg); }
html.a11y-invert body img,
html.a11y-invert body video { filter: invert(1) hue-rotate(180deg); }

html.a11y-contrast body,
html.a11y-contrast body * {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
  text-shadow: none !important;
}
html.a11y-contrast body a,
html.a11y-contrast body a * { color: #ff0 !important; }
html.a11y-contrast body img,
html.a11y-contrast body video { filter: contrast(1.15); }
/* keep the widget itself usable while high contrast is on */
html.a11y-contrast .a11y-btn { background: #ff0 !important; color: #000 !important; }

html.a11y-links body a {
  text-decoration: underline !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. The kits animate on scroll, so also freeze scroll-driven work
   (a11y.js sets --p to a settled value and unobserves). */
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; }

html.a11y-bigcursor,
html.a11y-bigcursor * {
  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='M6 2l20 13-9 1.5 5 9.5-3.5 2-5-9.5L8 25z' fill='%23fff' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 4 2, auto !important;
}

/* Always-visible focus ring while the keyboard is in use */
html.a11y-focus :focus {
  outline: 3px solid #ff0 !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  .a11y-btn { transition: none; }
}

@media print { .a11y-btn, .a11y-panel { display: none !important; } }

/* ---- site override: א.ש מתכות ------------------------------------------
   This site already has two 58px FABs (Waze + phone) stacked at the physical
   left, and a "גלול לפתוח את השער" scroll cue across the bottom-right corner.
   Put the launcher as the third item in that same left stack: it clears the
   cue and keeps every floating control in one place. */
:root { --a11y-btn-size: 58px; }
.a11y-btn   { inset-inline-start: auto; left: 18px; bottom: 154px; }
.a11y-panel { inset-inline-start: auto; left: 18px; bottom: 224px; }