/* Shai accessibility widget — extracted from stars.css (source of truth)
   for SITE-WIDE use. Regenerate when stars.css a11y rules change. */
:root { --nav-h: 64px; }

/* Accessibility widget — small, right side, cool */
.a11y-btn {
  position: fixed;
  top: calc(var(--nav-h) + 106px);
  right: 12px;
  z-index: 45;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.3) 0%, transparent 50%),
    linear-gradient(135deg, #2563EB 0%, #1E40AF 60%, #1E3A8A 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 6px 20px rgba(30,64,175,.4),
    0 0 0 2px rgba(255,255,255,.95),
    inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform var(--t-med), box-shadow var(--t-med);
}

.a11y-btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}

.a11y-btn:hover {
  transform: scale(1.1);
  box-shadow:
    0 10px 26px rgba(30,64,175,.55),
    0 0 0 2px rgba(255,255,255,.95),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* Focus-visible rings (a11y) */
.bf-login-chip:focus-visible,
.bf-chip:focus-visible,
.bf-row-edit:focus-visible,
.bf-cfm-edit-btn:focus-visible,
.bf-book-for-other:focus-visible,
.bf-cancel-other:focus-visible {
  outline: 2px solid var(--accent-gold, #F5C518);
  outline-offset: 2px;
}

@media (max-width: 780px) {
.a11y-btn {
    top: calc(var(--nav-h) + 62px);
    inset-inline-end: 12px;
    width: 30px;
    height: 30px;
  }
.a11y-btn svg { width: 14px; height: 14px; }
}

/* ════════════════════════════════════════════════════════════════
   Accessibility widget — תקנה 35 / WCAG 2.0 AA / תקן ישראלי 5568
   Floating ♿ toggle + side-panel with persistent settings.
   ════════════════════════════════════════════════════════════════ */

/* Side panel */
.a11y-panel {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  justify-content: flex-end;
}

.a11y-panel[hidden] { display: none; }

.a11y-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  animation: a11yBackdropIn .2s ease;
}

.a11y-panel-inner {
  position: relative;
  width: min(360px, 100%);
  height: 100%;
  background: white;
  overflow-y: auto;
  padding: 22px 22px 30px;
  box-shadow: -8px 0 30px rgba(0, 0, 0, .18);
  animation: a11yPanelIn .25s cubic-bezier(.16,1,.3,1);
  z-index: 1;
}

@keyframes a11yBackdropIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes a11yPanelIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }

.a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(12, 74, 110, .12);
}

.a11y-panel-header h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary, #0C4A6E);
  margin: 0;
}

.a11y-panel-close {
  width: 44px;
  height: 44px;
  background: rgba(12, 74, 110, .08);
  border: none;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 600;
  color: var(--primary, #0C4A6E);
  cursor: pointer;
  line-height: 1;
}

.a11y-panel-close:hover { background: rgba(12, 74, 110, .18); }

.a11y-panel-close:focus-visible {
  outline: 3px solid var(--accent-gold, #F5C518);
  outline-offset: 2px;
}

.a11y-section { margin-bottom: 20px; }

.a11y-section h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted, #64748B);
  margin: 0 0 10px;
  letter-spacing: .03em;
  text-transform: none;
}

/* Font size +/- row */
.a11y-control-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(12, 74, 110, .04);
  border-radius: 999px;
  padding: 4px;
}

.a11y-control-btn {
  flex: 0 0 64px;
  height: 48px;
  background: white;
  border: 1px solid rgba(12, 74, 110, .14);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  color: var(--primary, #0C4A6E);
  cursor: pointer;
  font-family: inherit;
}

.a11y-control-btn:hover {
  background: rgba(245, 197, 24, .14);
  border-color: var(--accent-gold, #F5C518);
}

.a11y-control-btn:focus-visible {
  outline: 3px solid var(--accent-gold, #F5C518);
  outline-offset: 2px;
}

.a11y-value {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--primary, #0C4A6E);
  font-feature-settings: 'tnum';
}

/* Toggle rows (contrast / links / reduce-motion / big cursor) */
.a11y-toggle-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: white;
  border: 1.5px solid rgba(12, 74, 110, .12);
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  text-align: right;
  font-family: inherit;
  font-size: 15px;
  color: var(--text, #0F172A);
  transition: background .15s ease, border-color .15s ease;
  min-height: 48px;
}

.a11y-toggle-row:hover {
  background: rgba(245, 197, 24, .08);
  border-color: rgba(245, 197, 24, .45);
}

.a11y-toggle-row:focus-visible {
  outline: 3px solid var(--accent-gold, #F5C518);
  outline-offset: 2px;
}

.a11y-toggle-row[aria-pressed="true"] {
  background: rgba(245, 197, 24, .15);
  border-color: var(--accent-gold, #F5C518);
}

.a11y-toggle-icon { font-size: 20px; flex: 0 0 24px; text-align: center; }

.a11y-toggle-label { flex: 1; font-weight: 600; }

.a11y-toggle-state {
  font-size: 13px;
  color: var(--text-muted, #64748B);
  font-weight: 700;
}

.a11y-toggle-row .a11y-toggle-state::before { content: 'כבוי'; }

.a11y-toggle-row[aria-pressed="true"] .a11y-toggle-state::before { content: 'פעיל ✓'; }

.a11y-toggle-row[aria-pressed="true"] .a11y-toggle-state {
  color: var(--accent, #F59E0B);
}

/* Reset button */
.a11y-reset-btn {
  width: 100%;
  padding: 12px 18px;
  background: rgba(220, 38, 38, .08);
  border: 1px solid rgba(220, 38, 38, .25);
  border-radius: 12px;
  color: rgb(185, 28, 28);
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
}

.a11y-reset-btn:hover { background: rgba(220, 38, 38, .14); }

.a11y-reset-btn:focus-visible {
  outline: 3px solid var(--accent-gold, #F5C518);
  outline-offset: 2px;
}

/* Footer */
.a11y-panel-footer {
  border-top: 1px solid rgba(12, 74, 110, .12);
  padding-top: 16px;
  font-size: 13px;
  color: var(--text-muted, #64748B);
  line-height: 1.6;
}

.a11y-panel-footer-title {
  font-weight: 800;
  color: var(--primary, #0C4A6E);
  margin: 0 0 4px;
}

.a11y-panel-footer p { margin: 3px 0; }

.a11y-panel-footer a { color: var(--primary, #0C4A6E); font-weight: 700; }

.a11y-statement-link { display: inline-block; margin-top: 8px; }

/* ─── Body classes that change global behavior ─────────────────── */

/* Font scaling — `zoom` scales every element including absolute-px
   font-sizes (the codebase mostly uses px, so a `font-size: 110%` on
   <html> didn't propagate). zoom is non-standard but widely supported
   across Chrome/Edge/Safari/Firefox 126+ and triggers a real layout
   reflow, which is exactly what we want for an accessibility scale. */
html.a11y-font-110 { zoom: 1.10; }

html.a11y-font-125 { zoom: 1.25; }

html.a11y-font-140 { zoom: 1.40; }

html.a11y-font-160 { zoom: 1.60; }

/* High contrast — yellow on black, force-overrides everything */
body.a11y-contrast {
  background: #000 !important;
  color: #FFEE00 !important;
}

body.a11y-contrast :not(.a11y-panel):not(.a11y-panel *) {
  background-color: #000 !important;
  color: #FFEE00 !important;
  border-color: #FFEE00 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body.a11y-contrast a:not(.a11y-panel a),
body.a11y-contrast button:not(.a11y-panel button) {
  text-decoration: underline !important;
}

body.a11y-contrast img:not(.a11y-panel img),
body.a11y-contrast video {
  filter: grayscale(1) contrast(1.4);
}

/* Highlighted links — bold + underline + outline */
body.a11y-highlight-links a:not(.a11y-panel a) {
  text-decoration: underline !important;
  font-weight: 800 !important;
  outline: 2px solid var(--accent-gold, #F5C518) !important;
  outline-offset: 2px !important;
  background: rgba(245, 197, 24, .12) !important;
}

/* Reduce motion — stops animations and transitions globally */
body.a11y-reduce-motion *,
body.a11y-reduce-motion *::before,
body.a11y-reduce-motion *::after {
  animation-duration: .001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001s !important;
  scroll-behavior: auto !important;
}

/* Big cursor — uses an inline SVG to avoid extra HTTP request */
body.a11y-big-cursor,
body.a11y-big-cursor :not(input):not(textarea) {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><polygon points="2,2 2,42 13,32 23,46 30,42 20,28 35,28" fill="black" stroke="white" stroke-width="2.5" stroke-linejoin="round"/></svg>') 0 0, auto !important;
}

/* Readable font — stronger weight + tighter letter-spacing for dyslexia */
body.a11y-readable-font,
body.a11y-readable-font * {
  font-family: 'Heebo', 'Open Sans', Arial, sans-serif !important;
  letter-spacing: 0.04em !important;
  word-spacing: 0.12em !important;
  line-height: 1.7 !important;
}

/* ─── Accessibility widget — round 2 improvements ─────────────── */

/* Close button — now with "סגור" label, clearer affordance */
.a11y-panel-close {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto;
  min-width: 64px;
  height: 44px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  background: rgba(12, 74, 110, .08);
  font-size: 14px;
  font-weight: 700;
}

.a11y-close-x {
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

.a11y-close-text {
  font-size: 14px;
}

/* Hint at top — explains instant-apply */
.a11y-panel-hint {
  font-size: 13px;
  color: var(--text-muted, #64748B);
  background: rgba(12, 74, 110, .04);
  padding: 10px 14px;
  border-radius: 10px;
  margin: 0 0 18px;
  line-height: 1.55;
}

.a11y-toggle-row.a11y-desktop-only small {
  display: block;
  font-size: 11px;
  color: var(--text-muted, #64748B);
  font-weight: 500;
}

/* Color invert — flips all colors for low-vision users who prefer
   dark mode but with full color information preserved.              */
html.a11y-invert {
  filter: invert(1) hue-rotate(180deg);
  background: white;
}

html.a11y-invert img,
html.a11y-invert video,
html.a11y-invert iframe {
  filter: invert(1) hue-rotate(180deg);
}

/* Grayscale — strips color, helpful for color-blind users */
html.a11y-grayscale {
  filter: grayscale(1);
}

/* Combo: invert + grayscale */
html.a11y-invert.a11y-grayscale {
  filter: invert(1) hue-rotate(180deg) grayscale(1);
}

/* Highlight headings — adds outline to all h1-h4 so they stand out.
   Useful for screen-reader users who navigate by headings.          */
body.a11y-highlight-headings h1,
body.a11y-highlight-headings h2,
body.a11y-highlight-headings h3,
body.a11y-highlight-headings h4 {
  outline: 2px dashed var(--accent-gold, #F5C518) !important;
  outline-offset: 4px !important;
  background: rgba(245, 197, 24, .05) !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
}

/* Reduce motion — strengthen: also stop the slow zoom on hero banner
   and the gentle float on the logo, which were not covered before.   */
body.a11y-reduce-motion .banner-bg,
body.a11y-reduce-motion .banner-logo,
body.a11y-reduce-motion .float-wa,
body.a11y-reduce-motion .shabbat-badge,
body.a11y-reduce-motion .shabbat-badge::after {
  animation: none !important;
  transform: none !important;
}

/* Readable font — strengthen so the change is actually noticeable.
   Previous values (0.04em letter-spacing) were almost invisible.    */
body.a11y-readable-font,
body.a11y-readable-font * {
  font-family: 'Heebo', 'Open Sans', Arial, sans-serif !important;
  letter-spacing: 0.06em !important;
  word-spacing: 0.16em !important;
  line-height: 1.85 !important;
  font-weight: 600 !important;
}

/* But keep sub-elements at lighter weight where it matters */
body.a11y-readable-font small,
body.a11y-readable-font .a11y-toggle-state {
  font-weight: 500 !important;
}

/* Toggle button focus + hover — reinforce visibility */
.a11y-btn:focus-visible {
  outline: 3px solid var(--accent-gold, #F5C518);
  outline-offset: 3px;
}

.a11y-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(12, 74, 110, .35);
}