/* רק סתימות – accessibility v17 (phase 1): loaded last.
   Preference hooks are attributes on <html>, set by accessibility-v17.js before first paint:
   data-a11y-text="125|150|200" (absent = 100%), data-a11y-contrast="high",
   data-a11y-links="underline", data-a11y-motion="reduce" (panel toggle or OS setting).
   Without JavaScript none of these apply and no launcher or dialog exists. */

/* ---------- Text size ---------- */
/* All text sizes in the linked styles are in rem, so the root size scales them; percentages keep
   the visitor's own browser default as the base. */
html { --a11y-scale: 1; }
html[data-a11y-text="125"] { font-size: 125%; --a11y-scale: 1.25; }
html[data-a11y-text="150"] { font-size: 150%; --a11y-scale: 1.5; }
html[data-a11y-text="200"] { font-size: 200%; --a11y-scale: 2; }
/* The hero heading is sized from its container width; scale that part too. Long lines wrap. */
html[data-a11y-text] .hero .hero-copy h1 { font-size: clamp(1.5rem, calc(9cqi * var(--a11y-scale)), 4.5rem); }
html[data-a11y-text] .hero .hero-copy h1 span { overflow-wrap: anywhere; }

/* Larger text: the header row may wrap, and the nav folds into the menu button at every width. */
html[data-a11y-text] .site-header { height: auto; min-height: var(--hh); }
html[data-a11y-text] .header-in {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 12px; height: auto; min-height: var(--hh); padding-block: 8px;
}
html[data-a11y-text] .brand { margin-inline-end: auto; }
html.js[data-a11y-text] .menu-btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px;
  background: var(--cyan-l); color: var(--ink); cursor: pointer;
}
html.js[data-a11y-text] .menu-btn svg { width: 22px; height: 22px; }
html.js[data-a11y-text] .nav {
  display: none;
  position: absolute; top: 100%; inset-inline: 0;
  padding: 8px 20px 18px;
  border-top: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 18px 30px -18px rgba(35, 67, 88, .35);
}
html.js[data-a11y-text] .nav.is-open { display: block; }
html.js[data-a11y-text] .nav ul { flex-direction: column; gap: 2px; }
html.js[data-a11y-text] .nav a { min-height: 48px; padding: 0 12px; border-radius: 12px; font-size: 1.0625rem; }
/* On short screens (landscape phones) a tall sticky header would hide too much of the page. */
@media (max-height: 560px) {
  html[data-a11y-text] .site-header { position: relative; }
}

/* Open menu never runs past the viewport; it scrolls instead. --a11y-header-box is measured by JS. */
@media (max-width: 899px) {
  .js .nav {
    max-height: calc(100vh - var(--a11y-header-box, var(--hh)) - 12px);
    max-height: calc(100dvh - var(--a11y-header-box, var(--hh)) - 12px);
    overflow-y: auto; overscroll-behavior: contain;
  }
}
html.js[data-a11y-text] .nav {
  max-height: calc(100vh - var(--a11y-header-box, var(--hh)) - 12px);
  max-height: calc(100dvh - var(--a11y-header-box, var(--hh)) - 12px);
  overflow-y: auto; overscroll-behavior: contain;
}

/* ---------- Underlined links ---------- */
html[data-a11y-links="underline"] a:not(.brand):not(.card):not(.home-guide),
html[data-a11y-links="underline"] .card h3,
html[data-a11y-links="underline"] .card-cta,
html[data-a11y-links="underline"] .home-guide-title {
  text-decoration-line: underline !important;
  text-decoration-color: currentColor !important;
  text-decoration-thickness: max(1px, .08em) !important;
  text-underline-offset: .2em !important;
}

/* ---------- Reduced motion (panel toggle or OS) ---------- */
html[data-a11y-motion="reduce"] { scroll-behavior: auto !important; }
html[data-a11y-motion="reduce"] *,
html[data-a11y-motion="reduce"] *::before,
html[data-a11y-motion="reduce"] *::after {
  transition-duration: .01ms !important;
  transition-delay: 0s !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}
html[data-a11y-motion="reduce"] .btn:hover,
html[data-a11y-motion="reduce"] .card:hover,
html[data-a11y-motion="reduce"] .card:hover .card-cta svg { transform: none; }
html[data-a11y-motion="reduce"] .slide,
html[data-a11y-motion="reduce"] .hero-dot span { transition: none; }

/* ---------- High contrast ---------- */
/* Brand hues stay; text goes darker and purple surfaces deepen so white text on them reaches
   ~9:1. Black on cyan is ~7.1:1 and on pink ~7.1:1. Images are never filtered or inverted. */
html[data-a11y-contrast="high"] {
  --ink: #0b1a24;
  --muted: #1f3445;
  --navy: #000;
  --purple: #4a3b8c;
  --line: #6b7f8c;
}
html[data-a11y-contrast="high"] :focus-visible { outline-width: 4px; }
html[data-a11y-contrast="high"] .site-header { box-shadow: 0 2px 0 var(--ink); }
html[data-a11y-contrast="high"] .btn-pink,
html[data-a11y-contrast="high"] .btn-light { box-shadow: inset 0 0 0 2px #000; }
html[data-a11y-contrast="high"] .btn-pink:hover,
html[data-a11y-contrast="high"] .home-contact .btn-pink:hover { box-shadow: inset 0 0 0 2px #fff; }
html[data-a11y-contrast="high"] .kicker,
html[data-a11y-contrast="high"] .hero .hero-copy .eyebrow { box-shadow: inset 0 0 0 1px currentColor; }
html[data-a11y-contrast="high"] .card { border: 2px solid var(--ink); box-shadow: none; }
html[data-a11y-contrast="high"] .card:hover { border-color: var(--purple); }
html[data-a11y-contrast="high"] .toilet-label,
html[data-a11y-contrast="high"] .home-step-num,
html[data-a11y-contrast="high"] .home-guide-icon,
html[data-a11y-contrast="high"] .icon { box-shadow: inset 0 0 0 2px #000; }
html[data-a11y-contrast="high"] .home-steps li:nth-child(3) .home-step-num { box-shadow: none; }
html[data-a11y-contrast="high"] .hero-ctrl { box-shadow: inset 0 0 0 2px #000; }
html[data-a11y-contrast="high"] .home-guide-list > li { border-color: var(--ink); }
html[data-a11y-contrast="high"] .home-guide-arrow { box-shadow: inset 0 0 0 2px var(--purple); }
html[data-a11y-contrast="high"] .home-contact-info,
html[data-a11y-contrast="high"] .home-contact-info > div { border-color: rgba(255, 255, 255, .85); }
html[data-a11y-contrast="high"] .reviews-v14 .gr-card { border: 2px solid var(--ink); box-shadow: none; }
html[data-a11y-contrast="high"] .reviews-v14 .gr-date,
html[data-a11y-contrast="high"] .reviews-v14 .gr-foot { color: var(--muted); }
html[data-a11y-contrast="high"] .reviews-v14 .gr-link { border: 2px solid var(--purple); }
html[data-a11y-contrast="high"] .reviews-v14 .gr-stars-glyphs { -webkit-text-stroke-color: #000; }
html[data-a11y-contrast="high"] .reviews-v14 .gr-avatar--1 { background: #174ea6; }
html[data-a11y-contrast="high"] .reviews-v14 .gr-avatar--3 { background: #0b6b49; }
html[data-a11y-contrast="high"] .home-faq-icon { box-shadow: inset 0 0 0 2px var(--purple); }

/* ---------- Launcher ---------- */
/* Bottom-left (inline end in RTL), clear of the safe area. DOM position is right after the skip
   link, so it is reached early by keyboard. */
.a11y-launch {
  position: fixed; z-index: 60;
  bottom: max(12px, env(safe-area-inset-bottom));
  inset-inline-end: max(12px, env(safe-area-inset-left));
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding-block: 4px; padding-inline: 4px 16px;
  border: 2px solid var(--purple); border-radius: 999px;
  background: #fff; color: var(--purple);
  font: inherit; font-size: .9375rem; font-weight: 700; line-height: 1.2;
  box-shadow: 0 10px 24px -12px rgba(13, 45, 61, .55);
  cursor: pointer;
}
.a11y-launch:hover { background: var(--purple-l); }
.a11y-launch:focus-visible {
  outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 999px;
  box-shadow: 0 0 0 9px #fff;
}
.a11y-launch-icon {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--purple); color: #fff;
}
.a11y-launch-icon svg, .a11y-footer-btn svg { width: 24px; height: 24px; }
/* Room below the footer for the launcher, and keep keyboard-focused controls clear of it. */
html.a11y-ready { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
html.a11y-ready body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

.a11y-footer-open { margin: 0; }
.a11y-footer-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--purple);
  font: inherit; font-size: 1rem; font-weight: 700;
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.a11y-footer-btn svg { width: 20px; height: 20px; flex: none; }
.a11y-footer-btn:hover { background: var(--purple-l); }

/* ---------- Dialog ---------- */
/* The dialog itself scrolls; its header is sticky, so the close button is never cut off
   (320px wide, 200% text, short landscape). */
.a11y-dialog {
  width: min(100% - 24px, 27rem);
  max-width: none;
  max-height: calc(100% - 24px);
  max-height: calc(100dvh - 24px);
  margin: auto; padding: 0;
  border: 2px solid var(--purple); border-radius: 22px;
  background: #fff; color: var(--ink);
  box-shadow: 0 24px 60px -20px rgba(13, 45, 61, .55);
  overflow: auto; overscroll-behavior: contain;
}
.a11y-dialog::backdrop { background: rgba(13, 45, 61, .5); }
.a11y-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 12px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.a11y-head h2 {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  color: var(--navy); font-size: 1.25rem; font-weight: 800; line-height: 1.3;
}
.a11y-head h2::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pink);
}
.a11y-close {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--purple-l); color: var(--purple); cursor: pointer;
}
.a11y-close:hover { background: var(--cyan-l); }
.a11y-close:focus-visible { border-radius: 50%; }
.a11y-close svg { width: 22px; height: 22px; }

.a11y-body { display: grid; gap: 16px; padding: 16px 18px 20px; }
.a11y-intro { color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.a11y-section { display: grid; gap: 8px; }

.a11y-size {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; padding: 10px 12px; border-radius: 14px; background: var(--cyan-l);
}
.a11y-size-label { font-weight: 700; }
.a11y-stepper { display: flex; align-items: center; gap: 8px; }
.a11y-step {
  display: grid; place-items: center;
  min-width: 44px; min-height: 44px; padding: 0;
  border: 2px solid var(--purple); border-radius: 50%;
  background: #fff; color: var(--purple);
  font: inherit; font-size: 1.5rem; font-weight: 700; line-height: 1; cursor: pointer;
}
.a11y-step:hover { background: var(--purple-l); }
.a11y-step:focus-visible { border-radius: 50%; }
.a11y-step[aria-disabled="true"] { border-color: #8a9aa5; color: #5b6b76; background: #fff; cursor: not-allowed; }
.a11y-step svg { width: 20px; height: 20px; }
.a11y-size-value { min-width: 4.5ch; color: var(--navy); font-size: 1.125rem; font-weight: 800; text-align: center; }

.a11y-toggle {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 14px;
  font-weight: 700; line-height: 1.4; cursor: pointer;
}
.a11y-toggle:hover { border-color: var(--purple); background: var(--purple-l); }
.a11y-toggle input {
  flex: none; width: 1.375rem; height: 1.375rem; margin: 0;
  accent-color: var(--purple); cursor: pointer;
}
.a11y-note { color: var(--muted); font-size: .9375rem; line-height: 1.5; }

.a11y-reset {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; padding: 8px 20px;
  border: 2px solid var(--purple); border-radius: 999px;
  background: #fff; color: var(--purple);
  font: inherit; font-weight: 700; line-height: 1.3; cursor: pointer;
}
.a11y-reset:hover { background: var(--purple-l); }
.a11y-reset:focus-visible { border-radius: 999px; }
.a11y-reset svg { width: 18px; height: 18px; flex: none; }

.a11y-help { padding-top: 14px; border-top: 1px solid var(--line); }
.a11y-help h3 { color: var(--navy); font-size: 1.0625rem; font-weight: 800; line-height: 1.35; }
.a11y-help p { margin-top: 4px; color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.a11y-help ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.a11y-help a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--purple); font-weight: 700;
  text-decoration: underline; text-underline-offset: 4px;
}

.a11y-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

html[data-a11y-contrast="high"] .a11y-dialog,
html[data-a11y-contrast="high"] .a11y-launch { border-color: #000; }
html[data-a11y-contrast="high"] .a11y-toggle { border: 2px solid var(--ink); }

@media (forced-colors: active) {
  .a11y-launch-icon { border: 1px solid CanvasText; }
  .a11y-step[aria-disabled="true"] { color: GrayText; border-color: GrayText; }
}
@media print {
  .a11y-launch, .a11y-footer-open { display: none; }
  html.a11y-ready body { padding-bottom: 0; }
}

/* Codex QA: prevent long Hebrew headings and review links escaping at 200% / 320px. */
html[data-a11y-text] .reviews-v14 .gr-head-links { flex: 0 1 auto; min-width: 0; max-width: 100%; }
html[data-a11y-text] .reviews-v14 .gr-link { max-width: 100%; overflow-wrap: anywhere; }
html[data-a11y-text] .home-guides-head > div { min-width: 0; max-width: 100%; }
html[data-a11y-text] .home-h2 { overflow-wrap: anywhere; }
.a11y-dialog { scroll-padding-block: var(--a11y-panel-head, 5rem) 16px; }
.a11y-help a { gap: .25em; flex-wrap: wrap; }

/* Enlarged text: stack contact labels/values so phone and hours remain inside medium-width columns. */
html[data-a11y-text] .home-contact-info > div { grid-template-columns: minmax(0, 1fr); }

/* Keyboard focus must not wait for smooth scrolling to catch up with repeated Tab presses. */
html.a11y-keyboard { scroll-behavior: auto !important; }