/*
 * Accessibility: the toolbar (inc/a11y.php + assets/js/a11y.js), the statement page and every mode the toolbar switches on.
 *
 *  1. Tokens        the few --a11y-* tokens that main.css does not have
 *  2. Toolbar       the button and its panel (built from main.css's .button and tokens)
 *  3. Statement     [mpes_accessibility_statement]
 *  4. Focus         focus is never hidden under the sticky header, the toolbar or the add-to-cart bar
 *  5. Text size     data-a11y-fs
 *  6. Contrast      data-a11y-contrast = dark | yellow | gray
 *  7. Adjustments   data-a11y-links | -font | -spacing | -motion | -cursor
 *
 * Modes are data attributes on <html> (set by the script in <head> before the first paint). A mode never restyles a component:
 * it re-points the design tokens of main.css, then fixes the few places main.css colours directly (white backgrounds, white text).
 * Like the reduced-motion rule in main.css, the spacing and motion modes use !important on purpose: they must beat every component.
 */

/* ================= 1. TOKENS ================= */
:root {
  --a11y-on-accent: #fff;        /* text on a filled green surface (black in the dark modes) */
  --a11y-bottom: var(--sp-4);    /* distance of the toolbar from the bottom edge */
  --a11y-card-min: 7.5rem;       /* narrowest product card; grows with the text size, so fewer cards share a row */
  --a11y-font: system-ui, "Segoe UI", Arial, "Noto Sans Hebrew", sans-serif;
}

/* ================= 2. TOOLBAR ================= */

/* fixed on the physical right edge (the floating cart button owns the left one), so "start" below is the right side */
.a11y { position: fixed; right: var(--sp-4); bottom: var(--a11y-bottom); z-index: 60; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: var(--sp-2); }
@media (max-width: 780px) { .single-product .a11y { --a11y-bottom: 5.5rem; } }   /* above the sticky add-to-cart bar */

.a11y .a11y__toggle.button { min-height: var(--control-h-lg); margin: 0; padding-inline: 1.1rem; box-shadow: var(--shadow); }

.a11y__panel {
  width: min(22rem, 100vw - 2 * var(--sp-4)); padding: var(--sp-4); overflow-y: auto; overscroll-behavior: contain;
  max-height: calc(100vh - var(--a11y-bottom) - var(--control-h-lg) - var(--sp-2) - var(--sp-4));
  max-height: calc(100dvh - var(--a11y-bottom) - var(--control-h-lg) - var(--sp-2) - var(--sp-4));
  background: var(--c-card); color: var(--c-text); border: 2px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.a11y__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.a11y__title { margin: 0; color: var(--c-title); font-size: 1.25rem; }
.a11y .a11y__close.button { --btn-bg: var(--c-tint); --btn-ink: var(--c-text); min-height: var(--control-h); margin: 0; padding-inline: var(--sp-3); }
.a11y__close .icon { width: 20px; height: 20px; }

.a11y__group { min-width: 0; margin: 0 0 var(--sp-4); padding: 0; border: 0; }
.a11y__group legend { margin-bottom: var(--sp-2); padding: 0; color: var(--c-title); font-weight: 800; }
.a11y__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(2.75rem, 1fr)); gap: var(--sp-1); }
.a11y__opts--wide { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--sp-2); }
.a11y__opts--tog { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--sp-2); }

/* single choice (text size, colours): native radios, drawn as pills. The real input covers the pill, so the whole pill is the target */
.a11y-opt { position: relative; display: block; }
.a11y .a11y-opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.a11y-opt span {
  display: grid; place-items: center; min-height: var(--control-h); padding: 0 var(--sp-1); border: 2px solid var(--c-title); border-radius: var(--radius-pill);
  background: var(--c-card); color: var(--c-title); font-size: 0.9rem; font-weight: 700; line-height: 1.2; text-align: center;
}
.a11y-opt input:hover + span { background: var(--c-tint); }
.a11y-opt input:checked + span { background: var(--c-title); color: var(--a11y-on-accent); }
.a11y-opt input:focus-visible + span { outline: 3px solid var(--c-title); outline-offset: 2px; }

/* the .a11y .x.button selectors are one class stronger than ".woocommerce button.button", which would otherwise remove these borders and paddings on shop pages */
/* on / off (links, font, spacing, motion, cursor): the .button component; "on" is a filled pill with a tick, so it is not told by colour alone */
.a11y .a11y__tog.button {
  --btn-bg: var(--c-card); --btn-ink: var(--c-title);
  justify-content: space-between; min-height: var(--control-h); margin: 0; padding: 0.4rem 0.9rem; border: 2px solid var(--c-title); font-size: 0.95rem; text-align: start;
}
.a11y .a11y__tog.button[aria-pressed="false"]:is(:hover, :focus-visible) { background: var(--c-tint); color: var(--btn-ink); }
.a11y .a11y__tog.button[aria-pressed="true"] { --btn-bg: var(--c-title); --btn-ink: var(--a11y-on-accent); }
.a11y__tog .icon { width: 20px; height: 20px; visibility: hidden; }
.a11y__tog[aria-pressed="true"] .icon { visibility: visible; }
.a11y__tog[aria-disabled="true"] { cursor: default; }

.a11y .a11y__reset.button { width: 100%; margin: 0; }
.a11y__link { display: flex; align-items: center; justify-content: center; min-height: var(--control-h); margin-top: var(--sp-2); font-weight: 700; }
.a11y__note { margin: var(--sp-2) 0 0; color: var(--c-muted); font-size: 0.85rem; text-align: center; }
.a11y__group .a11y__note { text-align: start; }
.a11y__status { min-height: 1.5em; margin: var(--sp-2) 0 0; color: var(--c-title); font-size: 0.9rem; font-weight: 700; text-align: center; }
@media (max-width: 360px) { .a11y__panel { padding: var(--sp-3); } }
@media print { .a11y { display: none; } }

/* ================= 3. STATEMENT ================= */
.a11y-statement { max-width: 46rem; margin-inline: auto; padding: var(--sp-5); background: var(--c-card); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.a11y-statement h2 { margin: var(--sp-5) 0 var(--sp-2); color: var(--c-title); font-size: 1.3rem; }
.a11y-statement__updated { margin-top: 0; color: var(--c-muted); font-weight: 600; }
.a11y-statement ul { padding-inline-start: 1.25rem; }
.a11y-statement li { margin-block: var(--sp-1); }
.a11y-statement .a11y-statement__contact { padding: 0; list-style: none; }
.a11y-statement__admin { margin-top: var(--sp-4); }

/* ================= 4. FOCUS ================= */
/* keyboard focus scrolls the element clear of the sticky header (top) and of the toolbar and add-to-cart bar (bottom) */
html { scroll-padding-top: calc(var(--header-h) + var(--sp-4)); scroll-padding-bottom: 6rem; }

/* ================= 5. TEXT SIZE ================= */
/* main.css sizes type in rem, so the root size scales it. Bigger text needs more room: fewer cards per row, long names shown whole */
html[data-a11y-fs="125"] { font-size: 125%; }
html[data-a11y-fs="150"] { font-size: 150%; --a11y-card-min: 8.5rem; }
html[data-a11y-fs="175"] { font-size: 175%; --a11y-card-min: 9.5rem; }
html[data-a11y-fs="200"] { font-size: 200%; --a11y-card-min: 10rem; }

html[data-a11y-fs] ul.products { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--a11y-card-min)), 1fr)); }
html:is([data-a11y-fs], [data-a11y-spacing]) :is(.woocommerce-loop-product__title, .mpes-review-name) { display: block; min-height: 0; overflow: visible; }
html[data-a11y-fs] ul.products li.product .mpes-qty-wrap { height: auto; min-height: var(--control-h); }
html[data-a11y-fs] .site-cart-count { height: auto; min-height: 1.5em; font-size: min(0.8rem, 16px); }
html[data-a11y-fs] .cat-strip__item { min-width: 5.5rem; }
html[data-a11y-fs] .container { width: min(100% - 32px, var(--container)); }   /* the side gutters keep their normal size, the room goes to the text */

/* the opening card: the big words may not run out of the card */
html[data-a11y-fs] .hero { padding: clamp(var(--sp-2), 4vw, 3rem); }
html[data-a11y-fs] .hero__rest { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
html[data-a11y-fs] .hero-card__text bdi { white-space: normal; }
html[data-a11y-fs] .hero :is(.hero__title, .hero-card__big, .hero-card__text) { overflow-wrap: anywhere; }
html:is([data-a11y-fs="175"], [data-a11y-fs="200"]) .hero__title { font-size: clamp(2.25rem, 9vw, 6rem); }
html:is([data-a11y-fs="175"], [data-a11y-fs="200"]) .hero-card__big { font-size: clamp(2rem, 7vw, 4rem); }
html:is([data-a11y-fs="175"], [data-a11y-fs="200"]) .hero-card--lead { padding-inline: var(--sp-3); }

/* two-column screens become one column sooner */
@media (max-width: 1099px) {
  html[data-a11y-fs] .hero__body { grid-template-columns: minmax(0, 1fr); }
  html[data-a11y-fs] .single-product div.product { grid-template-columns: minmax(0, 1fr); }
  html[data-a11y-fs] form.checkout { grid-template-columns: minmax(0, 1fr); }
  html[data-a11y-fs] form.checkout :is(#customer_details, #order_review_heading, #order_review) { grid-column: 1; grid-row: auto; }
  html[data-a11y-fs] .woocommerce-account .woocommerce { grid-template-columns: minmax(0, 1fr); }
  html[data-a11y-fs] .site-footer__inner { grid-template-columns: minmax(0, 1fr); }
}

/* ================= 6. CONTRAST ================= */

/* gray: colours drop out, nothing else changes (a filter on the root element does not move fixed elements) */
html[data-a11y-contrast="gray"] { filter: grayscale(1); }

/* dark and yellow-on-black: each sets its palette, everything below is shared */
html[data-a11y-contrast="dark"]   { --a11y-bg: #0d0d0d; --a11y-surface: #1c1c1c; --a11y-ink: #fff;    --a11y-accent: #9be7a0; --a11y-line: #9a9a9a; --a11y-danger: #ff9a92; }
html[data-a11y-contrast="yellow"] { --a11y-bg: #000;    --a11y-surface: #000;    --a11y-ink: #ffe600; --a11y-accent: #ffe600; --a11y-line: #ffe600; --a11y-danger: #ff9a92; }

html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) {
  color-scheme: dark;                                   /* native fields, drop-downs and scrollbars follow */
  --a11y-on-accent: #000;
  --btn-ink: var(--a11y-on-accent);                     /* text on every .button */
  --c-bg: var(--a11y-bg); --c-card: var(--a11y-surface); --c-text: var(--a11y-ink);
  --c-primary: var(--a11y-accent); --c-accent: var(--a11y-accent); --c-title: var(--a11y-accent); --c-btn: var(--a11y-accent);
  --c-notice: var(--a11y-accent); --c-honey: var(--a11y-accent);
  --c-line: var(--a11y-line); --c-field: var(--a11y-line); --c-muted: var(--a11y-ink); --c-price: var(--a11y-ink); --c-danger: var(--a11y-danger);
  --c-tint: color-mix(in srgb, var(--a11y-accent) 22%, var(--a11y-surface));
  --c-ring: color-mix(in srgb, var(--a11y-accent) 45%, transparent);
  --shadow-sm: 0 0 0 1px var(--a11y-line); --shadow: 0 0 0 1px var(--a11y-line);   /* soft shadows become a thin outline */
  --tag-neutral-bg: var(--a11y-surface); --tag-neutral-ink: var(--a11y-ink);
  --tag-info-bg: var(--a11y-surface);    --tag-info-ink: var(--a11y-ink);
  --tag-warn-bg: var(--a11y-surface);    --tag-warn-ink: var(--a11y-ink);
  --tag-ok-bg: var(--a11y-surface);      --tag-ok-ink: var(--a11y-ink);
  --tag-bad-bg: var(--a11y-surface);     --tag-bad-ink: var(--a11y-ink);
}

/* white backgrounds that main.css writes directly */
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) :is(
  .site-header, .site-footer, form.product-search, .skip-link:focus, .order-tracker__dot, ul.products li.product .mpes-qty-wrap .mpes-reg-qty,
  .woocommerce nav.woocommerce-pagination ul li :is(a, span), .navigation .nav-links :is(a, span).page-numbers,
  input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], select, textarea
) { background: var(--c-card); }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) .site-header { box-shadow: 0 2px 0 var(--c-line); }

/* white text on green: black on the light accent */
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) :is(
  .announce, .woocommerce-store-notice, p.demo_store, .woocommerce-store-notice a, .site-cart-count, .product-search__btn,
  .back-btn, .back-btn:is(:hover, :focus-visible), .woocommerce-message a.button, .woocommerce-info a.button, .woocommerce-MyAccount-navigation :is(.is-active a, a:hover),
  .woocommerce nav.woocommerce-pagination ul li span.current, .navigation .nav-links span.current, .auth-tabs button.is-active,
  .order-tracker li.is-done .order-tracker__dot, ul.products li.product .mpes-qty-wrap .mpes-btn
) { color: var(--a11y-on-accent); }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) .onsale { --tag-ink: var(--a11y-on-accent); }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) ul.products li.product.product-in-cart::after { --tag-ink: var(--a11y-on-accent); }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) :is(.order-badge, ul.products li.product .bulk-discount-promo) { border: 2px solid currentColor; }

/* the opening card: the green canopy becomes a plain framed card, the pickup ticket the one filled surface */
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) .hero { background: var(--c-card); color: var(--c-text); border: 2px solid var(--c-line); }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) .hero__leaves { display: none; }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) .hero__title { color: var(--c-title); text-shadow: none; }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) .hero__sub { color: var(--c-text); text-shadow: none; }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) .hero-card { background: var(--c-bg); border: 2px solid var(--c-line); box-shadow: none; }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) .hero-card__icon { background: var(--c-tint); }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) .hero-card__big { text-shadow: none; }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) .hero-card--lead {
  border: 0; background: var(--c-btn); color: var(--a11y-on-accent); -webkit-mask: none; mask: none; filter: none;
}
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) .hero-card--lead :is(.hero-card__title, .hero-card__icon) { color: var(--a11y-on-accent); }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) .hero-card--lead::after { border-color: color-mix(in srgb, var(--a11y-on-accent) 40%, transparent); }

/* small things */
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) .banners__dot { background: transparent; box-shadow: inset 0 0 0 2px var(--c-text); }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) .banners__dot.is-active { background: var(--c-text); }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) :is(.entry-content, .woocommerce-message, .woocommerce-info, .woocommerce-error, .site-footer, .woocommerce-breadcrumb, .term-description, .a11y-statement) a:not(.button) { text-decoration: underline; }
/* artwork made for a light page (logo, category pictures, products) keeps a light plate */
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) :is(.site-logo__img, .cat-icon, ul.products li.product img, .woocommerce-product-gallery img, .labels-in-product img, .site-footer__logos img) { background: #fff; border-radius: var(--radius-xs); }
@media (max-width: 780px) {
  html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) .single-product form.cart:not(:has(.bulk-discount-details)) { background: var(--c-card); box-shadow: 0 -2px 0 var(--c-line); }
}

/* plugins that print their own white and !important colours (their classes are also listed in main.css, section 5) */
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) ul.products li.product .bulk-discount-details { background: var(--c-card) !important; }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) :is(.mpes-modal-confirm-btn, .auth-card .ur-submit-button, .auth-card .user-registration-Button.button, .auth-card button[type="submit"]) { color: var(--a11y-on-accent) !important; }
html:is([data-a11y-contrast="dark"], [data-a11y-contrast="yellow"]) .mpes-modal-box { background: var(--c-card); color: var(--c-text); }

/* ================= 7. ADJUSTMENTS ================= */

/* highlight links */
html[data-a11y-links] a:not(.button) { text-decoration: underline; text-decoration-thickness: 0.12em; text-underline-offset: 0.2em; font-weight: 700; }

/* readable font: one plain system sans (no Suez One headlines), no italics */
html[data-a11y-font] { --font-body: var(--a11y-font); --font-display: var(--a11y-font); }
html[data-a11y-font] * { font-style: normal; }
html[data-a11y-font] :is(.page-title, .woocommerce-products-header__title, .home-products__title, .hero__title, .hero-card__big) { font-weight: 800; }

/* text spacing: the four values of WCAG 1.4.12 */
html[data-a11y-spacing] * { line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; }
html[data-a11y-spacing] p { margin-block-end: 2em !important; }

/* stop animations: nothing moves or fades (the banner carousel is paused by assets/js/a11y.js) */
html[data-a11y-motion="off"] { scroll-behavior: auto; }
html[data-a11y-motion="off"] *, html[data-a11y-motion="off"] *::before, html[data-a11y-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* large cursor: a 48px arrow, and a hand over anything that can be pressed */
html[data-a11y-cursor] {
  --a11y-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M7 4v32l8-7 6 13 6-2.6-5.6-12.4H32z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 7 4, auto;
  --a11y-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M17 8C17 5 19 3 21 3s4 2 4 5V20h3q3 0 3 3q3-1 5 2q3 0 3 4v7q0 7-7 7H22q-5 0-8-5L9 30q-1-3 2-4q3-1 6 3z' fill='%23fff' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 21 3, pointer;
  cursor: var(--a11y-arrow);
}
html[data-a11y-cursor] :is(a, button, summary, label, select, [role="button"], .button, input:is([type="submit"], [type="button"], [type="checkbox"], [type="radio"])) { cursor: var(--a11y-hand); }