/* Accessibility widget, ported from ~/repos/site-building/generator/a11y.mjs to Bookie's tokens.
* Serves תקנות שוויון זכויות לאנשים עם מוגבלות (התאמות נגישות לשירות) and ת"י 5568 (WCAG 2.1 AA).
*
* Two deliberate departures from the fleet source, both of them scars:
*
* 1. NO `filter:` on , or any ancestor of a fixed element. A filter turns that
* element into the containing block for its position:fixed descendants, so the sticky booking
* bar on /new/slots and this widget's own button stop being pinned to the viewport and scroll
* away with the page. High contrast and grayscale are therefore palette overrides, not
* filters. Only keeps a filter, and an image has no descendants to lose.
* 2. NO `letter-spacing` in the readable-font mode. Hebrew has no tracking convention and any
* value destroys the letter rhythm. The readable mode changes the family and nothing else.
*
* Text size is a root font-size percentage, never `zoom`. `zoom` on throws fixed elements
* offscreen, which is the same trap in a different coat.
*/
/* ---------------------------------------------------------------- dark, a CHOICE not an OS flag */
html.a11y-dark{
--ink:#eef2f7; --muted:#9aa5b4; --line:#2a313c; --bg:#0f1319; --card:#161b23;
--brand:#589bff; --brand-ink:#06121f;
--ok:#3ecf7a; --warn:#e0a83a; --bad:#ff8b7a;
--tint:rgba(88,155,255,.14); --tint-line:rgba(88,155,255,.34);
--bad-tint:rgba(255,139,122,.14); --bad-line:rgba(255,139,122,.42);
--shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35);
color-scheme:dark;
}
/* The wordmark is dark navy on transparent. On a dark bar it disappears, so it is painted white.
The real fix is a light lockup asset; this is the honest interim. */
html.a11y-dark .bar .brand img,
html.a11y-contrast .bar .brand img{filter:brightness(0) invert(1)}
/* ---------------------------------------------------------------- high contrast */
html.a11y-contrast{
--ink:#fff; --muted:#fff; --line:#fff; --bg:#000; --card:#000;
--brand:#ffe14d; --brand-ink:#000; --ok:#fff; --warn:#fff; --bad:#fff;
--tint:#000; --tint-line:#fff; --bad-tint:#000; --bad-line:#fff; --shadow:none;
color-scheme:dark;
}
html.a11y-contrast body,
html.a11y-contrast .card,
html.a11y-contrast .bar,
html.a11y-contrast .notice,
html.a11y-contrast .btn,
html.a11y-contrast input,
html.a11y-contrast textarea{background:#000 !important; color:#fff !important;
border-color:#fff !important; box-shadow:none !important}
html.a11y-contrast a{color:#ffe14d !important}
html.a11y-contrast .btn.primary,
html.a11y-contrast .btn.wa{background:#ffe14d !important; color:#000 !important}
html.a11y-contrast .dot{background:#fff !important; outline:2px solid #fff}
/* The widget is the one control a person in this mode must be able to find again. */
html.a11y-contrast .a11y-btn{background:#000; color:#ffe14d; border-color:#fff}
html.a11y-gray .a11y-btn{background:#3d4450}
html.a11y-contrast img:not(.a11y-keep){filter:grayscale(1) contrast(1.15)}
/* ---------------------------------------------------------------- grayscale, as a palette */
html.a11y-gray{
--brand:#3d4450; --brand-ink:#fff; --ok:#3f3f3f; --warn:#5c5c5c; --bad:#2b2b2b;
--tint:rgba(60,66,74,.10); --tint-line:rgba(60,66,74,.28);
--bad-tint:rgba(43,43,43,.09); --bad-line:rgba(43,43,43,.34);
}
html.a11y-gray .btn.wa{background:#5a5a5a !important; color:#fff !important}
html.a11y-gray img{filter:grayscale(1)}
/* ---------------------------------------------------------------- the rest */
html.a11y-links a{text-decoration:underline !important; outline:2px solid currentColor;
outline-offset:2px}
html.a11y-readable, html.a11y-readable *{
font-family:'Arial Hebrew',Arial,'Helvetica Neue',sans-serif !important}
html.a11y-cursor, html.a11y-cursor *{cursor:url('data:image/svg+xml;utf8,') 4 2, auto !important}
/* ---------------------------------------------------------------- the widget itself */
.a11y-btn{position:fixed; bottom:16px; inset-inline-end:16px; z-index:62;
width:56px; height:56px; border-radius:50%; border:2px solid var(--card);
background:#1f4fa8; color:#fff; display:flex; align-items:center; justify-content:center;
box-shadow:0 4px 16px rgba(0,0,0,.32); cursor:pointer}
.a11y-btn svg{width:28px; height:28px}
.a11y-panel{position:fixed; bottom:84px; inset-inline-end:16px; z-index:62; width:270px;
max-width:calc(100vw - 32px); background:var(--card); color:var(--ink);
border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.28);
padding:14px; display:none}
.a11y-panel[data-open="1"]{display:block}
.a11y-panel h2{font-size:1.125rem; margin:0 0 10px}
.a11y-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.a11y-grid button{font:inherit; font-size:.9375rem; min-height:48px; padding:8px 6px;
border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink);
cursor:pointer; text-align:center}
/* Pressed is a glyph as well as a fill: in high contrast every background is black and a
colour-only pressed state is invisible. */
.a11y-grid button[aria-pressed="true"]{background:var(--brand); color:var(--brand-ink);
border-color:var(--brand); font-weight:700}
.a11y-grid button[aria-pressed="true"]::before{content:"\2713\00a0"}
.a11y-panel .a11y-reset{grid-column:1 / -1}
.a11y-panel a.a11y-statement{display:block; margin-top:10px; font-size:.9375rem;
color:var(--brand); text-align:center}
/* The two screens with a fixed bottom bar get the button lifted above it, so the widget never
lands on top of "קבעי עכשיו". A reserved lane, not a z-index race. */
body.has-sticky .a11y-btn{bottom:96px}
body.has-sticky .a11y-panel{bottom:164px}
@media print{.a11y-btn,.a11y-panel{display:none !important}}