/*
 * Accessibility toolbar.
 *
 * The site this one replaces runs the Pojo accessibility plugin, and
 * /הצהרת-נגישות — which we carried across word for word — promises exactly what
 * that toolbar does: three font sizes, greyscale, contrast, a readable font,
 * underlined links, and stopping movement. Publishing the statement without
 * the tools would describe a site that does not exist, and in Israel that
 * statement is a legal declaration rather than a courtesy.
 *
 * Hand-written rather than Tailwind utilities, and kept out of site.css on
 * purpose: that file is a verbatim copy of the reference's stylesheet, and this
 * belongs to neither the reference nor Tailwind. Loaded by components/head.html
 * on every page.
 *
 * WHY THE FILTERS SIT ON body's CHILDREN AND NOT ON html. A filtered element
 * becomes the containing block for everything fixed inside it — so greyscale on
 * <html> would leave this toolbar scrolling away with the page, and a visitor
 * who turned greyscale on at the bottom of a long article could not find the
 * control to turn it off. Filtering each child of <body> except the toolbar
 * looks identical and keeps the toolbar where it is.
 */

/* --------------------------------------------------------------- toolbar -- */

/* `left` and not `inset-inline-start`: the logical property flips on the Hebrew
   pages, which put the toolbar in the bottom-right corner — on top of the
   WhatsApp button, which is deliberately physical-right in both languages. Both
   controls keep their own corner whatever the text direction. */
/* Below the modal layer, which the support dialog and the mobile menu both
   claim at z-50. Above it — the first value tried — the toolbar stayed
   clickable on top of the dialog's overlay, so the modal was not modal. */
.a11y {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 41;
  font-size: 16px;
  line-height: 1.4;
}

/* 36px on a phone, 44px from the tablet up. It floats over
   the content, and on a narrow screen there is less of it to spare; on a wide
   one the smaller circle just looked lost next to the WhatsApp button.
   It was 3.5rem originally, shrunk by taking it out of the padding first:
   the icon went 1.75rem -> 1.5rem, the ring around it 14px -> 10px.

   On the sizes, since the numbers get quoted: WCAG 2.5.5 Target Size asks for
   44x44, but that is level AAA. The AA criterion is 2.5.8 in WCAG 2.2, and it
   asks for 24x24 — which 36px clears with room. Israel's IS 5568 follows
   WCAG 2.0 AA, which has no target-size criterion at all. So 36px breaks
   nothing; 44px is simply the comfortable size rather than the merely
   sufficient one.

   Worth knowing that this grows the target where a mouse is and keeps it small
   where fingers are, which is the opposite of what the criterion is about. It
   is a deliberate visual choice on a target that already passes AA. If the
   phone size ever needs to grow without the circle growing, a ::before with
   `inset: -4px` adds the touch area invisibly. */
.a11y-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 9999px;
  background: #0f6f8c;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.25);
  transition: transform 0.15s ease;
}

.a11y-toggle:hover { transform: scale(1.05); }
.a11y-toggle svg { width: 1.5rem; height: 1.5rem; }

.a11y-panel {
  position: absolute;
  bottom: 3rem;
  left: 0;
  width: 15rem;
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid #d4d4d8;
  border-radius: 0.75rem;
  background: #fff;
  color: #18181b;
  box-shadow: 0 20px 40px -12px rgb(0 0 0 / 0.3);
}

.a11y-title {
  margin: 0.25rem 0.5rem 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.a11y-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.9375rem;
  text-align: start;
  cursor: pointer;
}

.a11y-item:hover { background: #f4f4f5; }
.a11y-item[aria-pressed="true"] { background: #0f6f8c; color: #fff; }
.a11y-item:focus-visible,
.a11y-toggle:focus-visible { outline: 2px solid #0f6f8c; outline-offset: 2px; }

.a11y-reset { margin-top: 0.25rem; border-top: 1px solid #e4e4e7; border-radius: 0; }

/* 768px is Tailwind's `md`, the line the rest of the site treats as "not a
   phone". The panel offset moves with the button so the gap under it stays
   12px at either size.

   LAST in the file on purpose. A media query carries no extra specificity, so
   these lose to any later rule for the same selector — written above the base
   `.a11y-panel`, the desktop offset was simply overwritten by it and the panel
   sat 8px too low with nothing to show for it. */
@media (min-width: 768px) {
  .a11y-toggle {
    width: 2.75rem;
    height: 2.75rem;
  }

  .a11y-panel {
    bottom: 3.5rem;
  }
}

/* ---------------------------------------------------------- what it does -- */

/* Three font sizes, as the statement promises — "א, א, א". Everything on this
   site is sized in rem, so the root carries all of it. */
html.a11y-font-1 { font-size: 112.5%; }
html.a11y-font-2 { font-size: 125%; }
html.a11y-font-3 { font-size: 137.5%; }

html.a11y-grayscale body > *:not(.a11y) { filter: grayscale(100%); }
html.a11y-negative body > *:not(.a11y) { filter: invert(100%) hue-rotate(180deg); }
html.a11y-grayscale.a11y-negative body > *:not(.a11y) {
  filter: grayscale(100%) invert(100%);
}

/* High contrast: black ground, white text, and a visible edge on anything that
   had one. Images are left alone — inverting a screenshot of the product helps
   nobody. */
html.a11y-contrast body,
html.a11y-contrast body > *:not(.a11y) { background: #000 !important; }

html.a11y-contrast body *:not(.a11y):not(.a11y *):not(svg):not(path) {
  background-color: transparent !important;
  color: #fff !important;
  border-color: #fff !important;
}

/* Yellow links on black, the convention every high-contrast mode uses — and
   deliberately the same shape of selector as the rule above, so source order
   decides between them. Written shorter, it lost on specificity and the links
   came out white like everything else. */
html.a11y-contrast body a:not(.a11y):not(.a11y *):not(svg):not(path) {
  color: #ffff00 !important;
}

/* Light background: the mirror of the above, for people who need less glare
   rather than more contrast. */
html.a11y-light body,
html.a11y-light body > *:not(.a11y) { background: #fff !important; }

html.a11y-light body *:not(.a11y):not(.a11y *):not(svg):not(path) {
  background-color: transparent !important;
  color: #000 !important;
}

html.a11y-links body a:not(.a11y *) { text-decoration: underline !important; }

html.a11y-readable body *:not(.a11y):not(.a11y *) {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
  letter-spacing: normal !important;
}

/* "הפסקת הבהובים" — the one item the statement promises that the current site's
   toolbar does not actually offer. This site has far more movement than that
   one, so it earns a control of its own. */
html.a11y-still *,
html.a11y-still *::before,
html.a11y-still *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

html.a11y-still video { display: none; }

@media print {
  .a11y { display: none; }
}