/* ---------- Accessibility menu (our own, no outside plugin; Bar 2026-10-18) ----------
   js/a11y.js builds the round button and its panel; a small script at the top of every page puts the saved
   choices on <html> before the page draws: .a11y-contrast, .a11y-font, .a11y-links, .a11y-still, data-a11y-text. */

.a11y-fab {
  position: fixed; z-index: 46;
  /* (Bar 2026-10-18) on the left, in line with the WhatsApp button: in its place until it shows, then right above it */
  inset-block-end: calc(28px + env(safe-area-inset-bottom, 0px)); left: calc(28px + env(safe-area-inset-left, 0px));
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: var(--ink); color: var(--white); border: 2px solid var(--white);
  box-shadow: 0 10px 26px -10px rgb(20 20 20 / .55);
  transition: translate .4s var(--ease), transform .12s var(--ease), background-color .25s var(--ease);
}
body:has(.wa-float.is-visible) .a11y-fab { translate: 0 -66px; }
.a11y-fab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.a11y-fab svg circle { fill: currentColor; stroke: none; }
.a11y-fab:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .a11y-fab:hover { background: var(--red-deep); } }
.a11y-fab:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.menu-open .a11y-fab, .menu-open .a11y-panel { visibility: hidden; }

.a11y-panel {
  position: fixed; z-index: 47;
  inset-block-end: calc(28px + 48px + 12px + env(safe-area-inset-bottom, 0px)); left: calc(22px + env(safe-area-inset-left, 0px));
  width: min(22rem, calc(100vw - 32px)); max-height: calc(100svh - 190px); overflow: auto; overscroll-behavior: contain;
  background: var(--white); color: var(--ink); border-radius: 22px; padding: 1.1rem 1.1rem 1rem;
  box-shadow: 0 24px 60px -20px rgb(20 20 20 / .45), 0 0 0 1px rgb(20 20 20 / .08);
  font-family: 'Heebo', 'Arial Hebrew', Arial, sans-serif; font-size: 1rem; line-height: 1.4; text-align: start;
}
body:has(.wa-float.is-visible) .a11y-panel { translate: 0 -66px; }
.a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: .8rem; }
.a11y-head h2 { margin: 0; font: 800 1.3rem/1.1 'Heebo', 'Arial Hebrew', Arial, sans-serif; }
.a11y-close { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--soft); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; flex: none; }
.a11y-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.a11y-opt {
  width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .55rem .9rem; border: 1.5px solid var(--line); border-radius: 14px; background: var(--white); color: var(--ink);
  font: 600 1rem/1.25 'Heebo', 'Arial Hebrew', Arial, sans-serif; text-align: start; cursor: pointer;
}
/* the switch shows on or off; the button itself says it with aria-pressed */
.a11y-opt .sw { flex: none; width: 42px; height: 24px; border-radius: 999px; background: #C9C9CE; position: relative; transition: background-color .2s; }
.a11y-opt .sw::after { content: ""; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); transition: transform .2s var(--ease); }
.a11y-opt[aria-pressed="true"] { border-color: var(--ink); }
.a11y-opt[aria-pressed="true"] .sw { background: var(--red-deep); }
.a11y-opt[aria-pressed="true"] .sw::after { transform: translateX(-18px); }
.a11y-size { border: 1.5px solid var(--line); border-radius: 14px; padding: .55rem .9rem .7rem; }
.a11y-size p { margin: 0 0 .45rem; font-weight: 600; }
.a11y-size div { display: flex; gap: .4rem; }
.a11y-size button {
  flex: 1; min-height: 44px; padding: .3rem .4rem; white-space: nowrap; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--white); color: var(--ink);
  font: 600 .95rem/1 'Heebo', 'Arial Hebrew', Arial, sans-serif; cursor: pointer;
}
.a11y-size button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.a11y-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-block-start: .9rem; }
.a11y-reset { min-height: 44px; padding: .4rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font: 600 .95rem/1 'Heebo', 'Arial Hebrew', Arial, sans-serif; cursor: pointer; }
.a11y-foot a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; padding-block: .6rem; }
.a11y-note { margin: .7rem 0 0; color: var(--muted); font-size: .88rem; }
.a11y-panel :focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .a11y-opt:hover, .a11y-size button:not([aria-pressed="true"]):hover { background: var(--soft); } }

/* ---------- Bigger text: two steps ---------- */
html[data-a11y-text="1"] { font-size: 112.5%; }
html[data-a11y-text="2"] { font-size: 125%; }

/* ---------- Readable font: the narrow Karantina headlines and the handwriting switch to plain Heebo.
   font-size-adjust keeps the wider letters about as wide as before, so lines do not overflow ---------- */
html.a11y-font :is(.hero-title-main, .hero-question, .h2, .h3, .intro-big, .since, .facts dt,
  .elements h3, .age-body h3, .schedule-q, .tile h3, .edu-name, .edu-format strong,
  .footer-word, .footer-motto, .brand-name, .mobile-menu a:not(.btn), .modal-title,
  .why-lead, .method-close, .story-lead, .tag, .values li, .letter-org,
  .ran-name, .ran-method-name, .ran-kicker, .school-badge,
  .act-lead, .edu-plan-h, .edu-plan-big, .place-name, .follow-name, .method-name) {
  font-family: 'Heebo', 'Arial Hebrew', Arial, sans-serif !important; font-weight: 800 !important; letter-spacing: 0;
  font-size-adjust: .35;
}
html.a11y-font :is(.ran-method-name, .edu-name, .method-name) { font-size-adjust: .42; }

/* ---------- Underlined links ---------- */
html.a11y-links a:not(.btn):not(.wa-float):not(.skip-link) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: .18em; }
html.a11y-links a.btn { text-decoration: underline !important; text-underline-offset: .18em; }

/* ---------- Stop animations (the page scripts also treat this as reduced motion, see the top-of-page script) ---------- */
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* ---------- High contrast ---------- */
html.a11y-contrast { --muted: #3D3D42; --line: #8E8E94; }
/* the red name in the opening headline: white letters on a red band (4.8:1 at every screen size) */
html.a11y-contrast .hero:not(.hero-about) .hx-line + .hx-line {
  color: var(--white); background: var(--red); width: fit-content;
  padding: .02em .16em .08em; margin-block-start: .12em; border-radius: .08em; text-shadow: none;
}
/* the header over the opening photo gets a dark band behind its white links */
html.a11y-contrast body:not(.menu-open):has(.hero:not(.hero-about)) .site-header:not(.is-scrolled) { background: rgb(18 13 15 / .82); }
html.a11y-contrast .js-motion .story-body .wd { color: var(--ink); }
html.a11y-contrast .js-age .ages-list .age:not(.is-active) .age-body :is(h3, p) { color: var(--muted); }
html.a11y-contrast :is(.footer-area, .footer-h, .footer-bottom) { color: var(--white); }
html.a11y-contrast .footer-legal a { text-decoration-color: currentColor; }
html.a11y-contrast :focus-visible { outline: 3px solid var(--ink) !important; outline-offset: 3px; box-shadow: 0 0 0 6px var(--white) !important; }

/* bigger text: the current page link on the light header uses the deeper red (4.5:1 needs it once the text grows),
   and the social cards on phones keep the big names inside the screen */
html[data-a11y-text] body:not(:has(.hero:not(.hero-about))) .main-nav a[aria-current="page"],
html[data-a11y-text] .site-header.is-scrolled .main-nav a[aria-current="page"] { color: var(--red-deep); }
@media (max-width: 699px) {
  html[data-a11y-text] .follow-card { min-width: 0; grid-template-columns: auto minmax(0, 1fr); padding-inline: 1rem 2.8rem; }
  html[data-a11y-text] .follow-handle { overflow-wrap: anywhere; min-width: 0; }
  html[data-a11y-text] .follow-arrow { inset-inline-end: .9rem; }
  html[data-a11y-text] :root .follow-name, html[data-a11y-text] .follow-name { font-size: min(2.3rem, 10.5vw); }
}

/* short screens (phones held sideways, browser zoom 175-200%: Bar 2026-10-19): the panel opens beside the button
   and may use the whole height, instead of a sliver above it */
@media (max-height: 600px) {
  .a11y-panel, body:has(.wa-float.is-visible) .a11y-panel {
    translate: none; inset-block-end: calc(12px + env(safe-area-inset-bottom, 0px));
    left: calc(28px + 48px + 12px + env(safe-area-inset-left, 0px));
    width: min(22rem, calc(100vw - 104px)); max-height: calc(100svh - 24px); z-index: 60; /* above the header */
  }
}