/*
  ============================================================================
  LAHAT PRO — accessibility widget stylesheet (ת״י 5568 / WCAG 2.0 AA)
  ============================================================================
  Loaded by frontend/public/landing.html, frontend/public/legal/*.html and
  frontend/index.html (the SPA shell). See widget.js for why it lives under
  /landing/a11y/ rather than /a11y/.

  Two halves:
    1. THE CLASS CONTRACT — what each `html.a11y-*` class does to the page.
       widget.js only ever adds and removes these classes; every visual effect
       is here, so the script never has to read or rewrite page styles.
    2. THE WIDGET ITSELF — the launcher button and its panel.

  The widget has to survive its own tools: a toolbar you cannot read once you
  turn on "ניגודיות הפוכה" is worse than no toolbar. Each mode therefore has a
  matching rule restoring the widget, at the end of section 1.
  ============================================================================
*/

/* ==========================================================================
   1. THE CLASS CONTRACT
   ========================================================================== */

/* ── Text size ─────────────────────────────────────────────────────────────
   `zoom`, not `font-size` on :root.

   The plan specified a root font-size scale, which is the tidier mechanism —
   but it only moves type declared in rem/em. The SPA and legal.css qualify;
   landing.html does not. Its ~800 lines of inline CSS are px-based
   (`font-size: 17px`, `clamp(34px, 5.2vw, 60px)`), so a root font-size would
   leave the most-visited public page visually unchanged while the button
   reported success. `zoom` moves px, rem and clamp() alike across all three
   surfaces with one declaration and no coupling to any page's class names.
   It is applied to the root element so `position: fixed` keeps resolving
   against the viewport.

   Stepped, not continuous, and floored at 90%: shrinking is a comfort tool,
   not a zoom-out. Browser zoom remains the 1.4.4 "resize to 200%" answer;
   this is an in-page convenience on top of it. */
html.a11y-font--1 { zoom: 0.9; }
html.a11y-font-1  { zoom: 1.1; }
html.a11y-font-2  { zoom: 1.25; }
html.a11y-font-3  { zoom: 1.4; }
html.a11y-font-4  { zoom: 1.6; }

/* ── גווני אפור — grayscale ───────────────────────────────────────────────
   Filters go on the ROOT element, never on `body`. A filter makes its element
   a containing block for fixed-position descendants; on `body` that silently
   re-anchors every sticky header, bottom sheet and modal in the SPA — the
   same containing-block trap that already forces GlobalHeader's menu to stay
   portaled. On the root element the containing block is the initial one
   either way, so nothing moves. */
html.a11y-grayscale { filter: grayscale(1); }

/* ── ניגודיות הפוכה — inverted contrast ───────────────────────────────────
   Photos and the 3D viewer are re-inverted so they stay recognisable. The
   canvas rule has a real cost: a WebGL context under a CSS filter is
   recomposited every frame. Measure the configurator on a phone before
   treating this mode as free. */
html.a11y-contrast-invert { filter: invert(1) hue-rotate(180deg); background: #fff; }
html.a11y-contrast-invert img,
html.a11y-contrast-invert video,
html.a11y-contrast-invert canvas,
html.a11y-contrast-invert picture,
html.a11y-contrast-invert [style*='background-image'] {
  filter: invert(1) hue-rotate(180deg);
}

/* ── ניגודיות גבוהה — high contrast ───────────────────────────────────────
   Black ground, white text, yellow links: the combination low-vision users
   ask for by name. The `*` is deliberate — this mode has to beat every inline
   and utility background in the SPA. The widget's own rules below are
   class-based and therefore more specific, so they win without a :not(). */
html.a11y-contrast-high,
html.a11y-contrast-high body {
  background: #000 !important;
  color: #fff !important;
}
html.a11y-contrast-high body * {
  background-color: transparent !important;
  background-image: none !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html.a11y-contrast-high body a,
html.a11y-contrast-high body a * {
  color: #ffff00 !important;
}
html.a11y-contrast-high body button,
html.a11y-contrast-high body input,
html.a11y-contrast-high body select,
html.a11y-contrast-high body textarea,
html.a11y-contrast-high body [role='button'] {
  border: 1px solid #fff !important;
}
/* Images keep their own pixels; only the ground behind them is forced. */
html.a11y-contrast-high body img,
html.a11y-contrast-high body video,
html.a11y-contrast-high body canvas {
  background: #000 !important;
}

/* ── רקע בהיר — light background ──────────────────────────────────────────
   For readers who find the cream ground and the graphite `.dark` sections
   low-contrast. White ground, near-black text, and decorative background
   images dropped so text never has to land on a photo. */
html.a11y-bg-light,
html.a11y-bg-light body {
  background: #fff !important;
  color: #1a1a1a !important;
}
html.a11y-bg-light body * {
  background-color: transparent !important;
  background-image: none !important;
  color: #1a1a1a !important;
  text-shadow: none !important;
}
html.a11y-bg-light body a,
html.a11y-bg-light body a * {
  color: #0b3d91 !important;
}
html.a11y-bg-light body button,
html.a11y-bg-light body input,
html.a11y-bg-light body select,
html.a11y-bg-light body textarea,
html.a11y-bg-light body [role='button'] {
  border: 1px solid #1a1a1a !important;
}

/* ── הדגשת קישורים — emphasise links ──────────────────────────────────────
   Underline plus an outline, so the cue survives grayscale and high contrast
   — colour is never the only signal (1.4.1). */
html.a11y-links a:not(.lahat-a11y__statement) {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  outline: 1px dashed currentColor;
  outline-offset: 2px;
}

/* ── פונט קריא — readable font ────────────────────────────────────────────
   Arial ahead of Heebo: a plainer, wider-spaced face. The 800-weight headings
   the brand uses everywhere drop to 700 — heavy Hebrew display weights close
   the counters and cost legibility exactly where this tool is meant to help.
   The widget is excluded so its own labels stay in the brand face. */
html.a11y-readable-font { --font-sans: Arial, 'Heebo', system-ui, sans-serif; }
html.a11y-readable-font body,
html.a11y-readable-font body *:not(.lahat-a11y):not(.lahat-a11y *) {
  font-family: Arial, 'Heebo', system-ui, sans-serif !important;
  letter-spacing: 0.02em !important;
}
html.a11y-readable-font body h1,
html.a11y-readable-font body h2,
html.a11y-readable-font body h3 {
  font-weight: 700 !important;
  letter-spacing: normal !important;
}

/* ── Keeping the widget readable under its own modes ──────────────────────
   invert: a root filter cannot be cancelled from inside it, so the widget
   applies the same transform a second time — two inversions land back on the
   original colours. grayscale needs no rule: the widget is graphite on white,
   already neutral. */
html.a11y-contrast-invert .lahat-a11y {
  filter: invert(1) hue-rotate(180deg);
}

/* The `body *` sweeps in the two ground modes reach the <span> and <svg>
   INSIDE each tool button, not just the button — so restoring the button
   alone leaves a pressed tool as a solid block with an invisible label. Hand
   the children back to inheritance; two classes beat the one in `body *`. */
html.a11y-contrast-high .lahat-a11y *,
html.a11y-bg-light .lahat-a11y * {
  color: inherit !important;
  background-color: transparent !important;
  border-color: inherit !important;
}

html.a11y-contrast-high .lahat-a11y__panel,
html.a11y-contrast-high .lahat-a11y__launcher,
html.a11y-contrast-high .lahat-a11y__tool,
html.a11y-contrast-high .lahat-a11y__close,
html.a11y-contrast-high .lahat-a11y__statement {
  background: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}
html.a11y-contrast-high .lahat-a11y__tool[aria-pressed='true'] {
  background: #ffff00 !important;
  color: #000 !important;
}
html.a11y-bg-light .lahat-a11y__panel,
html.a11y-bg-light .lahat-a11y__launcher,
html.a11y-bg-light .lahat-a11y__tool,
html.a11y-bg-light .lahat-a11y__close,
html.a11y-bg-light .lahat-a11y__statement {
  background: #fff !important;
  color: #1a1a1a !important;
  border-color: #1a1a1a !important;
}
html.a11y-bg-light .lahat-a11y__tool[aria-pressed='true'] {
  background: #1a1a1a !important;
  color: #fff !important;
}

/* ==========================================================================
   1b. SKIP LINK
   ==========================================================================
   Not part of the widget, but it lives here because this is the one
   stylesheet all three surfaces load — the landing page, the six legal pages
   and the SPA — and a second copy in index.css would only drift.

   WCAG 2.4.1 (Bypass Blocks). Positioned off-screen rather than
   `display: none`, which would remove it from the tab order and defeat the
   whole point: it has to be reachable by Tab to be useful. */

.skip-link {
  position: absolute;
  inset-inline-start: 0.5rem;
  top: -100px;
  z-index: 2147482000;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  background: #2d2c2c;
  color: #cedf97;
  font-family: 'Heebo', system-ui, 'Segoe UI', Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: top 120ms ease-out;
}

.skip-link:focus {
  top: 0.5rem;
}

.skip-link:focus-visible {
  outline: 3px solid #f48c45;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}

@media print {
  .skip-link {
    display: none !important;
  }
}

/* ==========================================================================
   2. THE WIDGET
   ========================================================================== */

.lahat-a11y {
  --a11y-graphite: #2d2c2c;
  --a11y-cream: #f7f2ec;
  --a11y-lime: #cedf97;
  --a11y-orange: #f48c45;
  --a11y-line: rgba(45, 44, 44, 0.16);
  --a11y-white: #fff;

  position: fixed;
  /* Always the left edge, which is where Israeli sites put this toolbar.
     `inset-inline-end` resolves against this element's OWN direction, and
     `direction: rtl` below is set unconditionally — so the side does not
     follow the host page. That is deliberate: the panel is Hebrew whatever
     locale the app is in, and it should stay where Israeli users look for
     it. Change the `direction` line and this moves with it. */
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  /* Above the SPA's z-50 / z-[60] layers. It still loses to an open native
     <dialog>: showModal() puts that dialog in the browser's top layer and
     makes the rest of the document inert, which no z-index outranks. Accepted
     rather than worked around — settings already applied stay applied, so the
     only cost is finishing the modal before changing them. */
  z-index: 2147483000;
  font-family: 'Heebo', system-ui, 'Segoe UI', Arial, sans-serif;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 8px;
  /* The panel is Hebrew whatever direction the host page is in. */
  direction: rtl;
}

/* ── Rail ──────────────────────────────────────────────────────────────
   Holds the launcher and the WhatsApp tab as one stack, so the panel still
   sits beside the pair rather than between them. */
.lahat-a11y__rail {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Launcher ──────────────────────────────────────────────────────────── */

.lahat-a11y__launcher {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  color: var(--a11y-cream);
  background: var(--a11y-graphite);
  border: 1px solid var(--a11y-graphite);
  border-start-start-radius: 10px;
  border-end-start-radius: 10px;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  transition: background 0.15s, color 0.15s;
}

.lahat-a11y__launcher:hover {
  background: #1e1d1d;
  color: var(--a11y-lime);
}

.lahat-a11y__launcher svg {
  width: 26px;
  height: 26px;
  display: block;
  fill: currentColor;
}

/* ── WhatsApp ──────────────────────────────────────────────────────────
   Same tab shape as the launcher so the two read as one rail, in WhatsApp's
   own green because that is what people scan the edge of a page for. */
.lahat-a11y__wa {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #25d366;
  border: 1px solid #1da851;
  border-start-start-radius: 10px;
  border-end-start-radius: 10px;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  transition: background 0.15s;
}

.lahat-a11y__wa:hover { background: #1da851; }

.lahat-a11y__wa svg {
  width: 26px;
  height: 26px;
  display: block;
  fill: currentColor;
}

/* Never remove an outline without a visible replacement — 2.4.7. */
.lahat-a11y__launcher:focus-visible,
.lahat-a11y__wa:focus-visible,
.lahat-a11y__tool:focus-visible,
.lahat-a11y__statement:focus-visible,
.lahat-a11y__close:focus-visible {
  outline: 3px solid var(--a11y-orange);
  outline-offset: 2px;
}

/* ── Panel ─────────────────────────────────────────────────────────────── */

.lahat-a11y__panel {
  width: 272px;
  max-height: min(78vh, 620px);
  overflow-y: auto;
  padding: 16px;
  background: var(--a11y-white);
  color: var(--a11y-graphite);
  border: 1px solid var(--a11y-line);
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22);
}

.lahat-a11y__panel[hidden] { display: none; }

.lahat-a11y__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.lahat-a11y__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--a11y-graphite);
}

.lahat-a11y__close {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--a11y-graphite);
  background: transparent;
  border: 1px solid var(--a11y-line);
  border-radius: 6px;
}

.lahat-a11y__close:hover { background: var(--a11y-cream); }

.lahat-a11y__tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.lahat-a11y__tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 76px;
  padding: 10px 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  color: var(--a11y-graphite);
  background: var(--a11y-white);
  border: 1px solid var(--a11y-line);
  border-radius: 9px;
  transition: background 0.15s, border-color 0.15s;
}

.lahat-a11y__tool:hover {
  background: var(--a11y-cream);
  border-color: var(--a11y-graphite);
}

/* The pressed state carries a filled ground and a border, not just a hue, so
   the toggle still reads once גווני אפור is on. */
.lahat-a11y__tool[aria-pressed='true'] {
  background: var(--a11y-graphite);
  border-color: var(--a11y-graphite);
  color: var(--a11y-lime);
}

.lahat-a11y__tool svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: currentColor;
}

.lahat-a11y__tool--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  min-height: 44px;
}

.lahat-a11y__size {
  grid-column: 1 / -1;
  margin-top: 2px;
  font-size: 12px;
  text-align: center;
  /* Was rgba(45,44,44,0.62) — #7d7c7c on white, 4.16:1, just under the 4.5:1
     that 1.4.3 asks of body text. An ironic place to fail it. */
  color: #6f6b68;
}

.lahat-a11y__statement {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--a11y-line);
  font-size: 12px;
  text-align: center;
  color: var(--a11y-graphite);
}

/* ── Motion ────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .lahat-a11y__panel { animation: lahat-a11y-in 0.14s ease-out; }
  @keyframes lahat-a11y-in {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ── Small screens ─────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .lahat-a11y {
    inset-inline: 0;
    top: auto;
    bottom: 0;
    transform: none;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 0;
  }
  .lahat-a11y__rail {
    flex-direction: row;
    gap: 8px;
    margin: 0 8px 8px;
  }
  .lahat-a11y__launcher,
  .lahat-a11y__wa {
    border-radius: 10px;
  }
  .lahat-a11y__panel {
    width: 100%;
    max-height: 70vh;
    border-radius: 14px 14px 0 0;
    border-width: 1px 0 0;
  }
}

/* ── App shell — top-anchored, opposite edge, on mobile ────────────────────
   The SPA has its own sticky `GlobalHeader` (h-12 compact / h-14 elsewhere)
   and, on mobile, a bottom sheet / wizard action bar of its own — so the
   generic bottom-anchored small-screen layout above lands the rail right on
   top of those controls. `lahat-a11y--app` (set by widget.js only when a
   `#root` element exists, i.e. only in the SPA) re-anchors it under the
   header instead; landing.html and the legal pages have neither a header nor
   a bottom sheet, so their bottom placement is untouched. 64px clears the
   taller header (56px) plus a small gap.

   Edge also flips, start instead of end (physical left, given the RTL
   `direction` above) — the 3D viewer's own floating controls
   (ViewerPanel.tsx's door/dimensions toggle rail) are `absolute … right-3`,
   unconditionally the opposite physical edge, so anchoring this rail there
   too stacked it directly on top of them. The header's hamburger + language
   switcher live on that same left edge (`GlobalHeader`'s mobile layout ends
   with them, last = physical left in RTL), so this reads as sitting with the
   page's own nav controls rather than the design ones. Everything else
   mirrors the desktop rule set (rail shape, panel size); flush-edge corners
   swap square/round to match the new side. The compound selector's higher
   specificity overrides the ≤560px rule above regardless of source order, so
   this applies through the whole ≤767px range — the SPA's own mobile
   breakpoint — without being clobbered at the narrow end. */
@media (max-width: 767px) {
  .lahat-a11y.lahat-a11y--app {
    top: 64px;
    bottom: auto;
    /* Physical, not logical: the base rule's `inset-inline-end` resolves
       against the widget's forced `direction: rtl` in a way that fought
       neutralizing from here with the logical property's own `-start`
       counterpart — setting the plain physical side after it is what
       actually sticks. */
    inset-inline-start: auto;
    inset-inline-end: auto;
    right: auto;
    left: 0;
    transform: none;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .lahat-a11y--app .lahat-a11y__rail {
    flex-direction: column;
    gap: 6px;
    margin: 0;
  }
  .lahat-a11y--app .lahat-a11y__launcher,
  .lahat-a11y--app .lahat-a11y__wa {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: 10px;
    border-end-end-radius: 10px;
  }
  .lahat-a11y--app .lahat-a11y__panel {
    width: 272px;
    max-height: min(78vh, 620px);
    border-radius: 12px;
    border-width: 1px;
  }
}

/* ── Docked in the app's top toolbar ──────────────────────────────────────
   `lahat-a11y--docked` is added by widget.js only while the SPA's
   `GlobalHeader` has handed the widget a slot (frontend/src/ui/
   A11yToolbarSlot.tsx). It has to neutralise the whole floating layout —
   fixed position, the edge anchoring and the ≤767px `--app` block above —
   which is why it sits last in this file: every selector here is two classes
   deep, exactly like the `--app` rules, so source order is what decides.

   `position: relative` rather than `static`: the panel below anchors to the
   rail, and the host header is itself `sticky` (a positioned element), so a
   static root would hand the panel the header's box instead. Fixed is out
   entirely — the header's `backdrop-blur` makes it the containing block for
   fixed descendants.

   The buttons drop their own chrome and borrow the header's: transparent on
   graphite, 32px like the hamburger beside them, white/80 → white on hover.
   WhatsApp gives up its green here — inside a toolbar the pair should read as
   two header controls, not as a widget stuck onto one. The contrast/bg-light
   overrides in section 1 still reach the launcher (they are `!important`), so
   the a11y modes keep working docked. */
.lahat-a11y.lahat-a11y--docked {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  inset-inline-start: auto;
  inset-inline-end: auto;
  transform: none;
  z-index: auto;
  flex-direction: row;
  align-items: center;
  gap: 0;
}

.lahat-a11y--docked .lahat-a11y__rail {
  flex-direction: row;
  gap: 4px;
  margin: 0;
}

.lahat-a11y--docked .lahat-a11y__launcher,
.lahat-a11y--docked .lahat-a11y__wa {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
}

.lahat-a11y--docked .lahat-a11y__launcher:hover,
.lahat-a11y--docked .lahat-a11y__wa:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.lahat-a11y--docked .lahat-a11y__launcher svg,
.lahat-a11y--docked .lahat-a11y__wa svg {
  width: 20px;
  height: 20px;
}

/* Drops out of the toolbar instead of sitting beside it. The open edge
   follows the HOST page's direction, not the widget's forced RTL: the slot
   sits left-of-centre in a Hebrew header and right-of-centre in an English
   one, so anchoring the panel on the side that lets it grow inwards is what
   keeps 272px on screen either way. Physical properties on purpose —
   logical ones here would resolve against the widget's own `direction: rtl`
   and always pick the same side. */
.lahat-a11y--docked .lahat-a11y__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  width: 272px;
  max-height: min(78vh, 620px);
  border-radius: 12px;
  border-width: 1px;
}

html[dir='rtl'] .lahat-a11y--docked .lahat-a11y__panel {
  right: auto;
  left: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .lahat-a11y--docked .lahat-a11y__panel { animation-name: lahat-a11y-drop; }
  @keyframes lahat-a11y-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ── Print ─────────────────────────────────────────────────────────────── */

@media print {
  .lahat-a11y { display: none !important; }
}