/* a11y-il (2026-11-02): the accessibility menu (site/a11y.js) and the choices it puts on <html>. Shared by the site, the
   landing pages and the portal (portal/src/main.jsx imports this file). Logical properties only: in Hebrew the button
   sits bottom-left, in English bottom-right (the inline end), and the panel mirrors. Every rule of the menu itself is
   scoped to .hla so a page's own button or link styles never reach it. */

/* ---------- The menu ---------- */
/* Room under the page's last content, so the fixed button never sits on top of the last line (the footer) once a
   reader has scrolled to the end. a11y.js puts hla-on on <html> when it adds the menu. */
html.hla-on body { padding-block-end: 76px; }
.hla {
  /* No box of its own (a page whose <body> is a flex row, like /lp/, is not changed): only the fixed button and panel. */
  display: contents;
  font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #111827;
  text-align: start;
  letter-spacing: normal;
  word-spacing: normal;
}
.hla *, .hla *::before, .hla *::after { box-sizing: border-box; }
.hla [hidden] { display: none !important; }

.hla-btn {
  position: fixed;
  inset-block-end: 16px;
  inset-inline-end: 16px;
  z-index: 9000;
  inline-size: 52px;
  block-size: 52px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #1d3fb8;
  color: #fff;
  box-shadow: 0 2px 10px rgba(11, 17, 41, 0.35);
  cursor: pointer;
  font: inherit;
}
.hla-btn:hover { background: #16318f; }
.hla-btn:focus-visible { outline: 3px solid #0b1129; outline-offset: 3px; box-shadow: 0 0 0 6px #fff; }
/* Something is switched on: a small dot says so (the menu also says it in words). */
.hla-btn--on::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 2px;
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: #ff6b47;
  border: 2px solid #fff;
}
.hla-icon { display: block; flex: none; }

.hla-panel {
  position: fixed;
  inset-block-end: 80px;
  inset-inline-end: 16px;
  z-index: 9001;
  inline-size: min(340px, calc(100vw - 32px));
  max-block-size: calc(100vh - 96px);
  max-block-size: calc(100dvh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 14px 16px 16px;
  background: #fff;
  color: #111827;
  border: 1px solid #c7cbd6;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(11, 17, 41, 0.28);
}
.hla-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.hla-title { margin: 0; padding: 0; font-size: 19px; font-weight: 700; line-height: 1.3; color: #0b1129; letter-spacing: normal; text-transform: none; }
.hla-title:focus { outline: none; }

.hla button {
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  min-block-size: 44px;
  margin: 0;
  cursor: pointer;
}
.hla-panel button:focus-visible, .hla-panel a:focus-visible { outline: 3px solid #1d3fb8; outline-offset: 2px; }
.hla-x {
  inline-size: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #374151;
}
.hla-x:hover { background: #f1f3f8; }

.hla-size { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #dfe2ea; border-radius: 12px; background: #f8f9fc; }
.hla-size-label { display: block; margin: 0 0 6px; font-weight: 600; color: #111827; }
.hla-size-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hla-step {
  position: relative;
  inline-size: 56px;
  padding: 0 6px;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  border: 1px solid #9aa1b2;
  border-radius: 10px;
  background: #fff;
  color: #0b1129;
  font-weight: 700;
  font-size: 15px;
  line-height: 42px;
}
.hla-step--plus { font-size: 20px; }
.hla-step:hover:not(:disabled) { border-color: #1d3fb8; color: #1d3fb8; }
.hla-step:disabled { cursor: default; color: #6b7280; border-color: #d1d5db; background: #f3f4f6; }
.hla-step-face { display: inline-flex; align-items: baseline; gap: 1px; }
.hla-step-sign { font-size: 16px; }
/* Read by screen readers, not shown. */
.hla-sr { position: absolute !important; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.hla-now { flex: 1; text-align: center; font-variant-numeric: tabular-nums; color: #111827; }

.hla-toggles { display: grid; gap: 6px; margin: 0 0 10px; }
.hla-toggle {
  inline-size: 100%;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #c7cbd6;
  border-radius: 12px;
  background: #fff;
  color: #111827;
  text-align: start;
  line-height: 1.3;
}
.hla-toggle:hover { border-color: #1d3fb8; }
.hla-toggle[aria-pressed="true"] { border-color: #1d3fb8; background: #eef2ff; box-shadow: inset 0 0 0 1px #1d3fb8; }
.hla-toggle-label { flex: 1; }
/* The on/off switch: the knob moves (not only the colour) and "on" also shows a tick. */
.hla-switch {
  position: relative;
  flex: none;
  inline-size: 40px;
  block-size: 24px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid #6b7280;
}
.hla-switch::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  left: 2px;
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  background: #6b7280;
}
.hla-toggle[aria-pressed="true"] .hla-switch { background: #1d3fb8; border-color: #1d3fb8; }
.hla-toggle[aria-pressed="true"] .hla-switch::after { left: 18px; background: #fff; }
/* Physical sides here: the knob starts at the reading start (right in Hebrew) and moves to the end when on. */
.hla[dir="rtl"] .hla-switch::after { left: auto; right: 2px; }
.hla[dir="rtl"] .hla-toggle[aria-pressed="true"] .hla-switch::after { left: auto; right: 18px; }
.hla[dir="rtl"] .hla-toggle[aria-pressed="true"] .hla-switch::before { left: auto; right: 13px; }
.hla-toggle[aria-pressed="true"] .hla-switch::before {
  content: "";
  position: absolute;
  inset-block-start: 5px;
  left: 7px;
  inline-size: 5px;
  block-size: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.hla-reset {
  inline-size: 100%;
  padding: 0 12px;
  border: 1px solid #9aa1b2;
  border-radius: 12px;
  background: #f8f9fc;
  color: #0b1129;
  font-weight: 600;
}
.hla-reset:hover { border-color: #1d3fb8; color: #1d3fb8; }
.hla-status { margin: 6px 0 0; min-block-size: 0; font-size: 14px; color: #374151; }
.hla-status:empty { display: none; }
.hla-linkbox { display: grid; gap: 2px; margin: 10px 0 0; padding: 10px 0 0; border-block-start: 1px solid #e5e7eb; }
.hla-link {
  display: flex;
  align-items: center;
  min-block-size: 44px;
  color: #1d3fb8;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
.hla-link:hover { color: #16318f; }
.hla-note { margin: 6px 0 0; font-size: 13px; color: #4b5563; }

@media (forced-colors: active) {
  .hla-btn, .hla-panel, .hla-toggle, .hla-step, .hla-reset { border: 2px solid ButtonText; }
  .hla-toggle[aria-pressed="true"] { outline: 3px solid Highlight; }
}
@media print { .hla { display: none; } }

/* ---------- The choices (classes on <html>) ---------- */

/* Larger text: the page is drawn larger like the browser's own zoom (the pages size text in px, so a root font-size
   would miss most of it); it reflows, it never needs scrolling sideways (portal/e2e/a11y-scan.mjs checks each step at
   375 and 1280 px). The menu itself is not zoomed, so it stays where it is. --hla-zoom lets a page fix what is sized
   to the window (the portal's sticky side menu, theme/shell.css). */
/* --hla-zoom is set by a11y.js: 1.15 / 1.3 / 1.5, never more than the window allows at 320 px of layout (a phone gets
   smaller steps, so nothing needs scrolling sideways: WCAG 1.4.10). These are the values without the script's say. */
html.hla-t1 { --hla-zoom: 1.15; }
html.hla-t2 { --hla-zoom: 1.3; }
html.hla-t3 { --hla-zoom: 1.5; }
html.hla-t1 body > :not(.hla), html.hla-t2 body > :not(.hla), html.hla-t3 body > :not(.hla) { zoom: var(--hla-zoom); }

/* High contrast: white text on black, links yellow, every box outlined. Pictures and videos keep their colours. */
html.hla-contrast, html.hla-contrast body { background: #000 !important; color: #fff !important; }
html.hla-contrast body *:not(svg):not(svg *):not(img):not(video):not(canvas):not(picture) {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  border-color: #fff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html.hla-contrast body *::before, html.hla-contrast body *::after { text-shadow: none !important; box-shadow: none !important; background-image: none !important; }
/* Text drawn with a gradient (background-clip: text, a transparent fill) is plain text again. */
html.hla-contrast body * { -webkit-text-fill-color: currentColor !important; }
html.hla-contrast body a[href], html.hla-contrast body a[href] * { color: #ffe14d !important; }
html.hla-contrast button, html.hla-contrast input, html.hla-contrast select, html.hla-contrast textarea,
html.hla-contrast [role="button"], html.hla-contrast .btn { border: 2px solid #fff !important; }
html.hla-contrast ::placeholder { color: #d1d5db !important; opacity: 1 !important; }
html.hla-contrast :focus-visible { outline: 3px solid #ffe14d !important; outline-offset: 2px !important; }
html.hla-contrast .hla-switch::after { background: #fff !important; }
html.hla-contrast .hla-toggle[aria-pressed="true"] .hla-switch { background: #ffe14d !important; border-color: #ffe14d !important; }
html.hla-contrast .hla-toggle[aria-pressed="true"] .hla-switch::after { background: #000 !important; }
html.hla-contrast .hla-btn { background: #000 !important; border: 3px solid #ffe14d !important; color: #ffe14d !important; }

/* Highlight links: every link underlined, on a yellow ground with dark text, and outlined. */
html.hla-links body a[href] {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  background-color: #fff3a3 !important;
  background-image: none !important;
  color: #111 !important;
  outline: 2px solid #111 !important;
  outline-offset: 1px !important;
}
html.hla-links body a[href] * { color: #111 !important; background-color: transparent !important; }
html.hla-links body a[href]:focus-visible { outline: 3px solid #1d3fb8 !important; outline-offset: 2px !important; }

/* Readable font: a plain sans-serif with the Hebrew letters, a little more space between letters and words. */
html.hla-font body, html.hla-font body *:not(svg):not(svg *) {
  font-family: Arial, "Arial Hebrew", "Noto Sans Hebrew", "Helvetica Neue", Helvetica, sans-serif !important;
  letter-spacing: 0.01em !important;
  word-spacing: 0.06em !important;
}

/* Stop animations: nothing moves by itself (motion.js and flow.js stop their own canvases and videos on the same
   choice, class motion-off). The end state of each animation is kept (an element that fades in is simply there). */
html.hla-still *, html.hla-still *::before, html.hla-still *::after {
  animation-duration: 0.001s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}