/*
 * What the visitor's accessibility choices do to the page. The panel (`themeAssets/src/accessibility/`) sets one attribute per choice on
 * <html> (`core/pure/accessibility/state.ts`); this file reads them and nothing else. It never targets the panel: that lives in a shadow
 * root, and `#crf-a11y` is excluded wherever a rule would reach every element.
 *
 * Text size scales the root font size, so it reaches whatever the theme sizes in rem/em.
 */

@font-face {
    font-family: 'Crf Readable';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/ecommerce/accessibility/fonts/assistant-hebrew-400-normal.woff2') format('woff2');
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
    font-family: 'Crf Readable';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/ecommerce/accessibility/fonts/assistant-hebrew-700-normal.woff2') format('woff2');
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
    font-family: 'Crf Readable';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/ecommerce/accessibility/fonts/assistant-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Crf Readable';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/ecommerce/accessibility/fonts/assistant-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Crf Dyslexia';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/ecommerce/accessibility/fonts/opendyslexic-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Crf Dyslexia';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/ecommerce/accessibility/fonts/opendyslexic-latin-700-normal.woff2') format('woff2');
}

/* ---- text size */

html[data-crf-text-size='1'] { font-size: 110%; }
html[data-crf-text-size='2'] { font-size: 125%; }
html[data-crf-text-size='3'] { font-size: 150%; }
html[data-crf-text-size='4'] { font-size: 175%; }
html[data-crf-text-size='5'] { font-size: 200%; }

/* A name or description cut to a few lines by the theme is shown whole once the visitor asked for larger text: the cut would otherwise hide most of it. */
html[data-crf-text-size] :not(#crf-a11y) {
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
}

/* A price range kept on one line by the theme may wrap at the dash when the card is narrower than the larger text. */
html[data-crf-text-size] .product-card__price-range {
    white-space: normal;
}

/* A large heading word wider than a narrow column breaks inside it instead of widening the page. */
html[data-crf-text-size] :where(h1, h2, h3, h4, h5, h6) {
    overflow-wrap: anywhere;
}

/* ---- spacing (WCAG 1.4.12 text-spacing values are the last step) */

html[data-crf-line-height='1'] body :not(#crf-a11y) { line-height: 1.5 !important; }
html[data-crf-line-height='2'] body :not(#crf-a11y) { line-height: 1.8 !important; }
html[data-crf-letter-spacing='1'] body :not(#crf-a11y) { letter-spacing: 0.06em !important; }
html[data-crf-letter-spacing='2'] body :not(#crf-a11y) { letter-spacing: 0.12em !important; }
html[data-crf-word-spacing='1'] body :not(#crf-a11y) { word-spacing: 0.08em !important; }
html[data-crf-word-spacing='2'] body :not(#crf-a11y) { word-spacing: 0.16em !important; }

/* ---- font: icon fonts and glyph elements keep theirs */

html[data-crf-font='readable'] body :not(#crf-a11y, i, svg, svg *, [class*='icon' i], [class*='glyph' i]) {
    font-family: 'Crf Readable', Arial, 'Noto Sans Hebrew', sans-serif !important;
}

html[data-crf-font='dyslexia'] body :not(#crf-a11y, i, svg, svg *, [class*='icon' i], [class*='glyph' i]) {
    font-family: 'Crf Dyslexia', 'Crf Readable', Arial, sans-serif !important;
}

/* ---- links and headings */

html[data-crf-links='on'] a:not(#crf-a11y a) {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 0.2em !important;
    background-color: color-mix(in srgb, currentColor 12%, transparent) !important;
    outline: 2px solid currentColor !important;
    outline-offset: 2px !important;
}

html[data-crf-headings='on'] :is(h1, h2, h3, h4, h5, h6, [role='heading']) {
    outline: 3px dashed currentColor !important;
    outline-offset: 4px !important;
}

/* ---- cursor */

html[data-crf-cursor='on'],
html[data-crf-cursor='on'] body :not(#crf-a11y) {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 10-6 1.5 3.5 7-3 1.5-3.5-7L5 19z' fill='%23000' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}

html[data-crf-cursor='on'] :is(a, button, summary, label, select, [role='button'], [role='link'], input[type='checkbox'], input[type='radio'], input[type='submit']):not(#crf-a11y *) {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath d='M9 2.5a1.5 1.5 0 013 0V9l1.5-.5a1.5 1.5 0 011.9.9l.6-.1a1.5 1.5 0 011.7 1l.7-.1a1.5 1.5 0 011.6 1.5V16c0 3.3-2.2 6-5.5 6H12c-2 0-3.5-1-4.5-2.5L4 14.5a1.5 1.5 0 012.4-1.7L9 15z' fill='%23000' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 12 3, pointer !important;
}

/* ---- images */

/* Only pictures that nothing can be done with are hidden, and they stay in the accessibility tree (alt text is kept) but cannot be hit.
   A picture inside a link, button, label or summary is that control's name and hit area, so it stays; frames (payment pages, maps,
   embedded forms) and video players with controls are never hidden. */
html[data-crf-images='on'] :is(img, picture, canvas, video:not([controls])):not(:is(a, button, label, summary, [role='button'], [role='link'], [tabindex]) *):not([tabindex]) {
    opacity: 0 !important;
    pointer-events: none !important;
}
html[data-crf-images='on'] body :not(#crf-a11y) { background-image: none !important; }

/* ---- larger targets (WCAG 2.5.5 asks 44px; 2.5.8 AA asks 24px) */

html[data-crf-targets='on'] :is(button, [role='button'], summary, select, textarea, input:not([type='hidden'], [type='checkbox'], [type='radio'])):not(#crf-a11y *) {
    min-block-size: 44px;
    min-inline-size: 44px;
}

html[data-crf-targets='on'] :is(nav, header, footer, ul, ol, td, th) a:not(#crf-a11y a) {
    display: inline-block;
    min-block-size: 44px;
    padding-block: 0.7em;
}

html[data-crf-targets='on'] :is(input[type='checkbox'], input[type='radio']):not(#crf-a11y *) {
    inline-size: 1.6rem;
    block-size: 1.6rem;
}

/* ---- motion: the choice, and the system's own request */

html[data-crf-motion='on'] *,
html[data-crf-motion='on'] *::before,
html[data-crf-motion='on'] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    html *,
    html *::before,
    html *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- colour saturation: on the root, so a fixed header or drawer stays where the page put it */

html[data-crf-saturation='low'] { filter: saturate(0.45); }
html[data-crf-saturation='mono'] { filter: grayscale(1); }
html[data-crf-saturation='high'] { filter: saturate(2.2); }

/* ---- contrast: three palettes; text, links, controls, borders. The visitor's system colours (forced colors) take precedence over all of it */

@media (forced-colors: none) {
    html[data-crf-contrast] {
        --crf-bg: #ffffff;
        --crf-fg: #000000;
        --crf-link: #0000d0;
        --crf-visited: #5b0099;
        --crf-focus: #000000;
    }

    html[data-crf-contrast='dark'] {
        --crf-bg: #000000;
        --crf-fg: #ffffff;
        --crf-link: #66d9ff;
        --crf-visited: #e0a8ff;
        --crf-focus: #ffffff;
    }

    html[data-crf-contrast='yellow'] {
        --crf-bg: #000000;
        --crf-fg: #ffff00;
        --crf-link: #ffffff;
        --crf-visited: #ffe97a;
        --crf-focus: #ffff00;
    }

    html[data-crf-contrast],
    html[data-crf-contrast] body,
    html[data-crf-contrast] body :not(#crf-a11y, img, video, canvas, picture, svg, svg *) {
        background-color: var(--crf-bg) !important;
        color: var(--crf-fg) !important;
        border-color: var(--crf-fg) !important;
        box-shadow: none !important;
        text-shadow: none !important;
        background-image: none !important;
    }

    html[data-crf-contrast] body a:not(#crf-a11y a),
    html[data-crf-contrast] body a:not(#crf-a11y a) * {
        color: var(--crf-link) !important;
        text-decoration: underline !important;
    }

    html[data-crf-contrast] body a:visited:not(#crf-a11y a),
    html[data-crf-contrast] body a:visited:not(#crf-a11y a) * {
        color: var(--crf-visited) !important;
    }

    html[data-crf-contrast] body :is(button, [role='button'], input, select, textarea):not(#crf-a11y *) {
        border: 2px solid var(--crf-fg) !important;
    }

    html[data-crf-contrast] body :focus-visible:not(#crf-a11y *) {
        outline: 4px solid var(--crf-focus) !important;
        outline-offset: 2px !important;
    }

    html[data-crf-contrast] body svg:not(#crf-a11y svg) {
        color: var(--crf-fg);
    }

    html[data-crf-contrast] body ::placeholder {
        color: var(--crf-fg) !important;
        opacity: 0.8 !important;
    }
}

@media print {
    #crf-a11y { display: none !important; }
}