/* ============================================================
   KEYSAR — Accessibility widget (תקנות נגישות / ת"י 5568 AA)
   Self-contained. Loaded on every page alongside a11y.js.
   Floating button sits bottom-RIGHT (WhatsApp float is bottom-left).
   ============================================================ */

:root {
  --a11y-gold: #d4af37;
  --a11y-gold-light: #f4d77a;
  --a11y-black: #0a0a0a;
  --a11y-panel-bg: #141414;
}

/* ---- Floating toggle button ---- */
.a11y-toggle {
  position: fixed;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  right: max(1.25rem, env(safe-area-inset-right, 1.25rem));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--a11y-gold-light);
  background: linear-gradient(135deg, #b8941f 0%, #f4d77a 50%, #b8941f 100%);
  color: var(--a11y-black);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9998;
  box-shadow: 0 4px 24px rgba(212, 175, 55, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.a11y-toggle:hover { transform: scale(1.08); }
.a11y-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.a11y-toggle svg { width: 30px; height: 30px; display: block; }

/* ---- Panel ---- */
.a11y-panel {
  position: fixed;
  bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  right: max(1.25rem, env(safe-area-inset-right, 1.25rem));
  width: 300px;
  max-width: calc(100vw - 2rem);
  max-height: 75vh;
  overflow-y: auto;
  background: var(--a11y-panel-bg);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  padding: 1rem;
  z-index: 9999;
  color: #e8e2d0;
  font-family: "Heebo", "Cairo", Arial, sans-serif;
}
.a11y-panel[hidden] { display: none; }

.a11y-panel h2 {
  font-size: 1rem;
  margin: 0 0 0.75rem;
  color: var(--a11y-gold-light);
  text-align: center;
  font-weight: 700;
}

.a11y-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.a11y-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.4rem;
  background: #1c1c1c;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 10px;
  color: #e8e2d0;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  line-height: 1.25;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.a11y-btn .a11y-ico { font-size: 1.2rem; line-height: 1; }
.a11y-btn:hover { background: #262626; border-color: var(--a11y-gold); }
.a11y-btn:focus-visible { outline: 2px solid var(--a11y-gold-light); outline-offset: 2px; }
.a11y-btn[aria-pressed="true"] {
  background: var(--a11y-gold);
  color: var(--a11y-black);
  border-color: var(--a11y-gold-light);
  font-weight: 700;
}

.a11y-fontrow { grid-column: 1 / -1; display: flex; gap: 0.5rem; align-items: stretch; }
.a11y-fontrow .a11y-btn { flex: 1; flex-direction: row; justify-content: center; gap: 0.4rem; }

.a11y-reset { grid-column: 1 / -1; }
.a11y-statement-link {
  grid-column: 1 / -1;
  display: block;
  text-align: center;
  margin-top: 0.25rem;
  padding: 0.5rem;
  color: var(--a11y-gold-light);
  text-decoration: underline;
  font-size: 0.8rem;
}
.a11y-statement-link:focus-visible { outline: 2px solid var(--a11y-gold-light); outline-offset: 2px; }

/* ============================================================
   Body state classes (applied by a11y.js)
   ============================================================ */

/* Grayscale — filter on the whole document; widget turns gray too (still usable) */
html.a11y-grayscale { filter: grayscale(100%); }

/* High contrast — scoped to content containers so the widget stays readable */
body.a11y-contrast #main,
body.a11y-contrast .site-header,
body.a11y-contrast .footer,
body.a11y-contrast .a11y-doc { background: #000 !important; }
body.a11y-contrast #main *,
body.a11y-contrast .site-header *,
body.a11y-contrast .footer *,
body.a11y-contrast .a11y-doc * {
  color: #fff !important;
  background-color: transparent !important;
  border-color: #fff !important;
}
body.a11y-contrast a { color: #ffff00 !important; text-decoration: underline !important; }
body.a11y-contrast .btn { outline: 2px solid #ffff00 !important; }
body.a11y-contrast img { filter: grayscale(20%) contrast(1.1); }

/* Highlight links */
body.a11y-links a {
  text-decoration: underline !important;
  outline: 2px dashed currentColor;
  outline-offset: 2px;
}

/* Readable font — force a simple high-legibility font everywhere */
body.a11y-readable,
body.a11y-readable * {
  font-family: Arial, "Heebo", "Cairo", sans-serif !important;
  letter-spacing: 0.02em !important;
  line-height: 1.7 !important;
}

/* Stop animations */
body.a11y-nomotion *,
body.a11y-nomotion *::before,
body.a11y-nomotion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !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='M8 4 L8 38 L16 30 L22 44 L28 41 L22 28 L34 28 Z' fill='black' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 4 4, auto !important;
}

/* Footer accessibility-statement link */
.footer-a11y { margin-top: 0.5rem; }
.footer-a11y a {
  color: var(--gold-light, #f4d77a);
  text-decoration: underline;
  font-size: 0.85rem;
}
.footer-a11y a:focus-visible { outline: 2px solid var(--gold-light, #f4d77a); outline-offset: 2px; }

/* Mobile tweaks */
@media (max-width: 480px) {
  .a11y-toggle { width: 50px; height: 50px; }
  .a11y-toggle svg { width: 26px; height: 26px; }
  .a11y-panel { width: calc(100vw - 2rem); }
}