/* =====================================================================
   בתאל רוקח – תפריט נגישות (js/a11y.js) + מצבי הנגישות של האתר
   ---------------------------------------------------------------------
   1. Generic helpers (.sr-only)
   2. The menu: skip link, corner trigger button, panel
   3. The modes. Each is a class on <html>, set by js/a11y.js. They override the
      design tokens from css/style.css (--cream, --cocoa, …) and a few generic
      element rules, so they work on every page: public, client area, admin, legal.
   Every token below has a fallback, so the menu also works on a page without style.css.
   ===================================================================== */

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

/* ---------- 2. Skip link to the menu (second skip link, after "דילוג לתוכן") ---------- */
.a11y-skip {
  position: absolute; inset-inline-start: 12px; top: -90px; z-index: 300;
  padding: 10px 18px; border-radius: 999px; text-decoration: none;
  background: var(--cocoa, #3E2C26); color: var(--cream, #FBF7F2);
  font-family: var(--font-body, "Assistant", "Segoe UI", Arial, sans-serif); font-weight: 600; font-size: 1rem; line-height: 1.4;
}
.a11y-skip:focus { top: 12px; outline: 3px solid var(--cream, #FBF7F2); outline-offset: -6px; }

/* ---------- Trigger: a round button in the bottom inline-start corner (bottom-right in RTL) ----------
   It used to be a tab at mid-height on the start edge, where it covered the first letters of
   every RTL line and the start of form fields. A corner button only ever sits over content
   that is passing by, and the page keeps focused fields clear of it (scroll-padding below).
   --a11y-bottom lifts it above a fixed bottom bar on the pages that have one (see the end of
   this block). The public WhatsApp button is bottom-LEFT, so the two never meet.
   Pages can dock the menu in their own navigation instead: any element with [data-a11y-open]
   opens the menu, and while one exists the floating button is hidden (admin).
   Layering: above the page's fixed bars (50), below the open mobile menu (55), the sticky
   header (60), lightboxes (120–130) and popups (200). The panel itself is above everything. */
.a11y-root { font-family: var(--font-body, "Assistant", "Segoe UI", Arial, sans-serif); }
.a11y-root *, .a11y-root *::before, .a11y-root *::after { box-sizing: border-box; }
.a11y-ico { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

:root {
  --a11y-gap: 20px;      /* distance from the viewport edges */
  --a11y-size: 52px;     /* trigger diameter */
  --a11y-safe-b: env(safe-area-inset-bottom, 0px);
}
/* Keyboard focus never ends up under the corner button or the bar below it (WCAG 2.4.11).
   html:root (0,1,1) so it also wins over a page's own html.xxx rule (style.css: html.site-home),
   whose value it includes: --a11y-bottom is that bar, and 28px also clears the 82px WhatsApp button. */
html:root { scroll-padding-bottom: calc(var(--a11y-bottom, 0px) + var(--a11y-size) + var(--a11y-gap) + 28px + var(--a11y-safe-b)); }
.a11y-trigger {
  position: fixed; z-index: 52; inset-inline-start: var(--a11y-gap);
  bottom: calc(var(--a11y-gap) + var(--a11y-bottom, 0px) + var(--a11y-safe-b));
  display: grid; place-items: center; width: var(--a11y-size); height: var(--a11y-size); margin: 0; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--cocoa, #3E2C26); color: var(--cream, #FBF7F2); cursor: pointer;
  box-shadow: 0 0 0 2px var(--paper, #FFFDFB), 0 12px 26px -12px rgba(31, 23, 20, .6);
  transition: transform .2s ease, bottom .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.a11y-trigger-ico { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.a11y-trigger:hover { transform: translateY(-2px); }
.a11y-trigger:focus { outline: none; }
.a11y-trigger:focus-visible { outline: 3px solid transparent; border-radius: 50%; box-shadow: 0 0 0 3px var(--paper, #FFFDFB), 0 0 0 6px var(--cocoa, #3E2C26); }
/* The page has its own opener in its navigation: no floating button */
:root:has([data-a11y-open]) .a11y-trigger { display: none; }
/* Docked by js/a11y.js into a [data-a11y-slot] of the page (admin: top bar on phones, sidebar footer on desktop) */
html.a11y-docked .a11y-trigger {
  position: static; z-index: auto; flex: none; justify-self: start; align-self: center;
  width: 44px; height: 44px; box-shadow: none; transform: none; transition: none;
}
html.a11y-docked .a11y-trigger-ico { width: 28px; height: 28px; }
@media (max-width: 767px) {
  :root { --a11y-gap: 14px; --a11y-size: 48px; }
  .a11y-trigger-ico { width: 30px; height: 30px; }
  /* Lift the button above the fixed bottom bars: public booking bar, client-gallery selection bar */
  :root:has(.mbar.show) { --a11y-bottom: var(--mbar-h, 72px); }
  /* The selection bar wraps to ~110px on narrow phones, taller than --gbar-h (84px):
     js/a11y.js measures it into --a11y-gbar-h, and the larger value wins */
  :root:has(body.has-gbar) { --a11y-bottom: max(84px, var(--a11y-gbar-h, 0px)); }   /* scroll-padding on <html> */
  body.has-gbar { --a11y-bottom: max(var(--gbar-h, 84px), var(--a11y-gbar-h, 0px)); }
}
@media (max-width: 959px) {
  /* Admin on phones/tablets: bottom tab bar (the trigger is normally docked in the top bar there;
     this keeps a floating one, or the panel opened from it, clear of the tab bar) */
  :root:has(.tabbar) { --a11y-bottom: var(--tabbar-h, 64px); }
}
/* Page-end inset: content that merely passes under the corner button can be scrolled out from
   under it, but the last footer line cannot (it is already at the end of the page). So the footer
   ends with the button's own height + gap + 16px of clear space, measured from the footer's bottom
   edge. On phones the fixed bars' height is already a body padding below the footer (style.css,
   portal.css), and --a11y-bottom lifts the button by that same height, so it stays clear there too.
   Not when the menu is docked in the page's own navigation (no floating button). */
html:not(.a11y-docked):not(:has([data-a11y-open])) :is(.site-footer, .portal-footer-inner) {
  padding-bottom: calc(var(--a11y-gap) + var(--a11y-size) + 16px + var(--a11y-safe-b));
}

/* ---------- Panel (non-modal dialog), anchored just above the trigger ---------- */
.a11y-panel {
  --a11y-panel-b: calc(var(--a11y-gap) + var(--a11y-bottom, 0px) + var(--a11y-safe-b) + var(--a11y-size) + 12px);
  position: fixed; z-index: 1000; inset-inline-start: var(--a11y-gap); bottom: var(--a11y-panel-b);
  display: flex; flex-direction: column;
  width: min(23.25rem, calc(100vw - 2 * var(--a11y-gap)));
  max-height: calc(100vh - var(--a11y-panel-b) - 12px); max-height: calc(100dvh - var(--a11y-panel-b) - 12px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper, #FFFDFB); color: var(--cocoa, #3E2C26);
  border: 1px solid var(--line-strong, #8C7B70); border-radius: 22px;
  box-shadow: 0 28px 70px -28px rgba(31, 23, 20, .6);
  font-size: 1rem; line-height: 1.5; text-align: start;
  transform-origin: bottom;
  animation: a11yIn .18s ease-out;
}
/* Opened from the page's own navigation (no floating button): sit in the corner itself */
:root:has([data-a11y-open]) .a11y-panel, html.a11y-docked .a11y-panel { --a11y-panel-b: calc(var(--a11y-gap) + var(--a11y-bottom, 0px) + var(--a11y-safe-b)); }
.a11y-panel[hidden] { display: none; }
.a11y-panel:focus { outline: none; }
.a11y-panel:focus-visible { outline: 2px solid var(--cocoa, #3E2C26); outline-offset: -4px; }
@keyframes a11yIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.a11y-head {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px 10px 12px; background: var(--paper, #FFFDFB); border-bottom: 1px solid var(--line, #E6D9CD);
}
.a11y-title { display: flex; align-items: center; gap: 10px; margin: 0; font-family: inherit; font-size: 1.2rem; font-weight: 700; line-height: 1.3; color: var(--cocoa, #3E2C26); letter-spacing: 0; }
.a11y-title .a11y-ico { width: 1.6rem; height: 1.6rem; }

/* :where() keeps this reset at element specificity (0,0,1): it must not beat the colours set on
   .a11y-trigger, .a11y-tile, .a11y-close … (it once turned the trigger icon --ink on --cocoa, ~1.2:1) */
:where(.a11y-root) button { font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; -webkit-tap-highlight-color: transparent; }
.a11y-close, .a11y-step {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: 0; padding: 0;
  border-radius: 50%; border: 1.5px solid var(--line-strong, #8C7B70); background: var(--paper, #FFFDFB); color: var(--cocoa, #3E2C26); cursor: pointer;
}
.a11y-close:hover, .a11y-step:hover { background: var(--blush-soft, #F6E6DF); }
.a11y-close .a11y-ico { width: 1.35rem; height: 1.35rem; }

.a11y-body { padding: 14px 16px 6px; }
.a11y-size { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; padding: 12px 14px; border: 1.5px solid var(--line-strong, #8C7B70); border-radius: 16px; }
.a11y-size-label { font-weight: 700; font-size: 1rem; }
.a11y-stepper { display: flex; align-items: center; gap: 6px; }
.a11y-step { font-size: 1.05rem; font-weight: 700; line-height: 1; }
.a11y-step[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.a11y-size-value { min-width: 5.6em; text-align: center; font-weight: 600; font-size: .95rem; }
.a11y-dots { grid-column: 1 / -1; display: flex; gap: 6px; }
.a11y-dots span { flex: 1; height: 5px; border-radius: 99px; background: var(--blush-soft, #F6E6DF); box-shadow: inset 0 0 0 1px var(--line-strong, #8C7B70); }
.a11y-dots span.on { background: var(--cocoa, #3E2C26); box-shadow: none; }

.a11y-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.a11y-grid li { margin: 0; padding: 0; }
.a11y-grid li::before, .a11y-grid li::marker { content: none; }
.a11y-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 100%; min-height: 84px; margin: 0; padding: 12px 8px 10px;
  border: 1.5px solid var(--line-strong, #8C7B70); border-radius: 16px;
  background: var(--paper, #FFFDFB); color: var(--cocoa, #3E2C26); cursor: pointer;
  font-size: .95rem; font-weight: 600; line-height: 1.25; text-align: center;
}
.a11y-tile:hover { background: var(--blush-soft, #F6E6DF); }
.a11y-tile .a11y-ico { width: 1.75rem; height: 1.75rem; }
.a11y-tile[aria-pressed="true"] { background: var(--cocoa, #3E2C26); border-color: var(--cocoa, #3E2C26); color: var(--cream, #FBF7F2); }
.a11y-check {
  position: absolute; top: 6px; inset-inline-end: 6px; display: none; width: 22px; height: 22px; padding: 3px;
  border-radius: 50%; background: var(--cream, #FBF7F2); color: var(--cocoa, #3E2C26);
  fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
.a11y-tile[aria-pressed="true"] .a11y-check { display: block; }

.a11y-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 16px 6px; }
.a11y-reset {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 8px 18px;
  border-radius: 999px; border: 1.5px solid var(--cocoa, #3E2C26); background: transparent; color: var(--cocoa, #3E2C26);
  font-weight: 600; cursor: pointer;
}
.a11y-reset:hover { background: var(--cocoa, #3E2C26); color: var(--cream, #FBF7F2); }
.a11y-reset .a11y-ico { width: 1.2rem; height: 1.2rem; }
.a11y-statement {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 4px;
  color: var(--cocoa, #3E2C26); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.a11y-statement .a11y-ico { width: 1.2rem; height: 1.2rem; }
.a11y-hint { margin: 0; padding: 4px 16px 14px; font-size: .9375rem; color: var(--muted, #76655C); }
.a11y-hint kbd { font-family: inherit; font-weight: 700; color: var(--cocoa, #3E2C26); white-space: nowrap; }

.a11y-root :focus { outline: none; }
.a11y-root :focus-visible { outline: 3px solid var(--cocoa, #3E2C26); outline-offset: 2px; }
.a11y-tile[aria-pressed="true"]:focus-visible { outline-offset: 3px; }

/* Phones and short (landscape) screens: the panel becomes a bottom sheet over everything,
   including the trigger and any bottom bar, that fits 320px and scrolls */
@media (max-width: 600px), (max-height: 560px) {
  .a11y-panel, :root:has([data-a11y-open]) .a11y-panel, html.a11y-docked .a11y-panel {
    top: auto; bottom: calc(8px + var(--a11y-safe-b)); inset-inline: 8px; width: auto; transform: none;
    max-height: calc(100vh - 16px - var(--a11y-safe-b)); max-height: calc(100dvh - 16px - var(--a11y-safe-b)); border-radius: 22px;
    animation-name: a11yUp;
  }
}
@media (max-width: 600px) {
  .a11y-body { padding: 12px 12px 4px; }
  .a11y-tile { min-height: 76px; font-size: .9375rem; }
  .a11y-foot { padding: 10px 12px 4px; }
  .a11y-hint { padding: 4px 12px 12px; }
}
@keyframes a11yUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { .a11y-panel { animation: none; } .a11y-trigger { transition: none; } .a11y-trigger:hover { transform: none; } }
@media print { .a11y-root, .a11y-skip { display: none !important; } }

/* Windows high-contrast (forced colours): keep every boundary and the pressed state visible */
@media (forced-colors: active) {
  .a11y-trigger, .a11y-tile, .a11y-close, .a11y-step, .a11y-reset, .a11y-panel { border: 2px solid ButtonText; }
  .a11y-tile[aria-pressed="true"] { border-width: 4px; border-color: Highlight; }
  .a11y-check { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .a11y-dots span.on { background: Highlight; }
}

/* =====================================================================
   3. MODES (classes on <html>)
   ===================================================================== */

/* ---------- Text size: 3 steps above normal. Everything on the site is in rem ---------- */
html.a11y-font-1 { font-size: 115%; }
html.a11y-font-2 { font-size: 130%; }
html.a11y-font-3 { font-size: 150%; }
/* The public header menu is one row: with bigger text, switch to the mobile menu sooner so nothing is clipped */
@media (max-width: 1280px) {
  html.a11y-font-1 .site-header .menu { display: none; }
  html.a11y-font-1 .site-header .menu-toggle { display: grid; }
}
@media (max-width: 1440px) {
  html.a11y-spacing .site-header .menu { display: none; }
  html.a11y-spacing .site-header .menu-toggle { display: grid; }
}
html.a11y-font-2 .site-header .menu, html.a11y-font-3 .site-header .menu { display: none; }
html.a11y-font-2 .site-header .menu-toggle, html.a11y-font-3 .site-header .menu-toggle { display: grid; }
html[class*="a11y-font-"] .site-header .nav { height: auto; min-height: var(--header-h, 78px); }

/* ---------- High contrast: redefine the tokens, force borders and underlines ---------- */
html.a11y-contrast {
  --cream: #FFFFFF; --paper: #FFFFFF; --sand: #FFFFFF;
  --blush: #FFFFFF; --blush-soft: #FFFFFF; --blush-deep: #000000; --blush-text: #000000;
  --sage: #000000; --sage-soft: #FFFFFF; --sage-deep: #000000; --sage-text: #000000;
  --cocoa: #000000; --ink: #000000; --muted: #000000;
  --line: #000000; --line-strong: #000000;
  --danger: #8A0000; --danger-soft: #FFFFFF; --success: #0A5A1E; --success-soft: #FFFFFF; --warning: #5F3D00; --warning-soft: #FFFFFF;
  --shadow: none; --shadow-soft: none;
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 5px #000000;
  background: #FFFFFF;
}
html.a11y-contrast body { background: #FFFFFF; color: #000000; }
html.a11y-contrast *, html.a11y-contrast *::before, html.a11y-contrast *::after { text-shadow: none !important; }
html.a11y-contrast ::selection { background: #000000; color: #FFFFFF; }
html.a11y-contrast a[href] { text-decoration-line: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: .18em; }
html.a11y-contrast :is(button, [role="button"], .btn, input, select, textarea) { border-width: 2px !important; border-style: solid !important; border-color: currentColor !important; }
html.a11y-contrast :is(input, select, textarea) { background-color: #FFFFFF !important; color: #000000 !important; }
html.a11y-contrast ::placeholder { color: #333333 !important; opacity: 1; }
/* Translucent headers become solid; decorative shapes disappear; photos stay untouched */
html.a11y-contrast :is(.site-header, .page-header, .site-header.scrolled) { background: #FFFFFF !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 2px 0 #000000 !important; }
html.a11y-contrast :is(.doodle, .hero-blob, .about-blob, .arch-outline, .ornament, [data-decorative]) { display: none !important; }
html.a11y-contrast .a11y-trigger { background: #000000; color: #FFFFFF; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #000000; }
html.a11y-contrast .a11y-trigger:focus-visible { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 7px #000000; }

/* ---------- Monochrome (filter on the root element keeps position:fixed working) ---------- */
html.a11y-mono { filter: grayscale(1); }

/* ---------- Highlight links: underline + a yellow marker on every text link, outline on buttons ---------- */
html.a11y-links a[href] { text-decoration-line: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: .2em !important; }
html.a11y-links a[href]:not(.btn):not(:has(img, picture)) {
  background-color: #FFF0A6 !important; color: #1A1206 !important; border-radius: 3px;
  box-shadow: 0 0 0 2px #FFF0A6; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html.a11y-links a[href]:not(.btn):not(:has(img, picture)) * { color: inherit !important; }
html.a11y-links :is(a.btn, button.btn, a[href]:has(img, picture)) { outline: 2px dashed #1A1206; outline-offset: 2px; box-shadow: 0 0 0 7px #FFF0A6; }

/* ---------- Readable font: one plain system sans for everything, no italics ---------- */
html.a11y-readable {
  --font-display: system-ui, -apple-system, "Segoe UI", Arial, "Noto Sans Hebrew", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Arial, "Noto Sans Hebrew", sans-serif;
  --font-latin: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-hand: system-ui, -apple-system, "Segoe UI", Arial, "Noto Sans Hebrew", sans-serif;
}
html.a11y-readable body, html.a11y-readable body *:not(svg):not(svg *) {
  font-family: system-ui, -apple-system, "Segoe UI", Arial, "Noto Sans Hebrew", sans-serif !important;
}
html.a11y-readable body *:not(em):not(i):not(svg):not(svg *) { font-style: normal !important; }

/* ---------- Text spacing (WCAG 1.4.12 values, slightly softened for Hebrew) ---------- */
html.a11y-spacing body, html.a11y-spacing body *:not(svg):not(svg *) {
  line-height: 1.9 !important; letter-spacing: .08em !important; word-spacing: .16em !important;
}
html.a11y-spacing body p:not(:last-child) { margin-block-end: 1.4em !important; }

/* ---------- Stop animations: the global kill switch (JS motion listens to 'a11y:motion') ---------- */
html.a11y-no-motion { scroll-behavior: auto !important; }
html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}

/* ---------- Big cursor (48px, black with a white outline: visible on any background) ---------- */
html.a11y-cursor, html.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 4v34l8.5-8 6 13.5 6.5-2.8-6-13.3H35z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, auto !important;
}
html.a11y-cursor :is(a[href], button, [role="button"], [role="tab"], [role="link"], label, summary, select, input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"]),
html.a11y-cursor :is(a[href], button, [role="button"], [role="tab"], [role="link"], label, summary) * {
  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='M17 28V6a3 3 0 0 1 6 0v11a3 3 0 0 1 6 0v3a3 3 0 0 1 6 0v2a3 3 0 0 1 6 0v10c0 7-5 12-12 12h-4c-4 0-7-2-9-5l-8.5-11.5a3 3 0 0 1 4.8-3.6L17 28z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 20 3, pointer !important;
}
html.a11y-cursor :is(textarea, [contenteditable="true"], input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="number"], input[type="url"]) {
  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='M16 6h16M16 42h16M24 6v36' fill='none' stroke='%23fff' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M16 6h16M16 42h16M24 6v36' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 24 24, text !important;
}

/* ---------- Strong focus outline: black ring inside a yellow halo (visible on light, dark and photos) ---------- */
html.a11y-focus *:focus-visible, html.a11y-focus :is(input, select, textarea):focus {
  outline: 3px solid #000000 !important; outline-offset: 2px !important;
  box-shadow: 0 0 0 8px #FFD43B !important;
}