/* ===========================================================
   Accessibility — נגישות
   Toolbar widget + user-toggled body classes + a11y basics.
   RTL. No dependencies.
   =========================================================== */

/* ---- skip link (keyboard users jump to main content) ---- */
.skip-link {
  position: absolute; inset-inline-start: 8px; top: -48px;
  background: var(--accent-dark); color: #fff; padding: 10px 16px;
  border-radius: 8px; z-index: 200; transition: top .15s ease;
}
.skip-link:focus { top: 8px; text-decoration: none; }

/* ---- visible focus for keyboard navigation ---- */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

/* ---- the floating "נגישות" trigger button ---- */
.a11y-toggle {
  position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: #1a5fb4; color: #fff; border: 0; cursor: pointer;
  display: grid; place-items: center; font-size: 1.7rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.a11y-toggle:hover { background: #14488c; }

/* ---- the panel ---- */
.a11y-panel {
  position: fixed; inset-block-end: 90px; inset-inline-end: 22px; z-index: 91;
  width: 300px; max-width: calc(100vw - 32px);
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
  padding: 16px; display: none;
}
.a11y-panel[aria-hidden="false"] { display: block; }
.a11y-panel h2 { font-size: 1.05rem; margin: 0 0 12px; }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y-btn {
  font-family: inherit; font-size: .9rem; text-align: center;
  padding: 12px 8px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); cursor: pointer;
}
.a11y-btn:hover { border-color: #1a5fb4; }
.a11y-btn[aria-pressed="true"] { background: #1a5fb4; color: #fff; border-color: #1a5fb4; }
.a11y-reset {
  margin-top: 10px; width: 100%; padding: 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-soft); cursor: pointer; font-family: inherit;
}
.a11y-statement-link { display: block; margin-top: 10px; text-align: center; font-size: .9rem; }

/* =========================================================
   User-toggled body classes (persisted in localStorage)
   ========================================================= */

/* font scaling */
body.a11y-font-1 { font-size: 18px; }
body.a11y-font-2 { font-size: 20px; }
body.a11y-font-3 { font-size: 23px; }
body.a11y-font-1 h1, body.a11y-font-2 h1, body.a11y-font-3 h1 { line-height: 1.2; }

/* high contrast */
body.a11y-contrast {
  --bg: #000; --bg-soft: #0a0a0a; --ink: #fff; --ink-soft: #ffe; --line: #fff;
  --accent: #ffd400; --accent-dark: #ffd400;
  background: #000; color: #fff;
}
body.a11y-contrast .site-header { background: #000; border-bottom-color: #fff; }
body.a11y-contrast .card, body.a11y-contrast .a11y-panel { background: #000; border-color: #fff; }
body.a11y-contrast .hero { background: #000; }
body.a11y-contrast a { color: #ffd400; }
body.a11y-contrast .btn--primary { background: #ffd400; color: #000; }

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

/* readable font (drop the display font for a plain sans) */
body.a11y-readable, body.a11y-readable * {
  font-family: Arial, "Helvetica Neue", sans-serif !important;
  letter-spacing: .02em; word-spacing: .08em; line-height: 1.8 !important;
}

/* pause animations / motion */
body.a11y-nomotion *, body.a11y-nomotion {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}

/* big cursor */
body.a11y-cursor, body.a11y-cursor * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M6 2l30 18-14 3 8 16-6 3-8-16-10 8z" fill="black" stroke="white" stroke-width="2"/></svg>') 4 2, auto !important;
}

@media (max-width: 760px) {
  .a11y-toggle { inset-block-end: 16px; inset-inline-end: 16px; width: 52px; height: 52px; }
  .a11y-panel  { inset-block-end: 78px; inset-inline-end: 16px; }
}