/* Effects the accessibility assistant switches on: one class on <html> per
   choice (static/js/a11y.js). The assistant itself is always left alone. */

/* Bigger text: the page is scaled like browser zoom, so the px-sized layout
   grows in step instead of overflowing. */
html.a11y-zoom body > :not(.zn-a11y) { zoom: var(--a11y-zoom, 1); }

/* Readable font (Atkinson Hyperlegible, made for low vision readers). */
html.a11y-font body :not(.zn-a11y, .zn-a11y *, i, [class*="fa-"], code, pre) {
    font-family: 'Atkinson Hyperlegible', Verdana, Tahoma, sans-serif !important;
}
html.a11y-line body :is(p, li, dd, dt, td, th, blockquote, label, figcaption, span, a, h1, h2, h3, h4, h5, h6):not(.zn-a11y *) { line-height: 1.9 !important; }
html.a11y-letter body :not(.zn-a11y, .zn-a11y *) { letter-spacing: 0.12em !important; word-spacing: 0.16em !important; }
html.a11y-left body :not(.zn-a11y, .zn-a11y *) { text-align: left !important; }

html.a11y-links body a:not(.zn-a11y *) {
    text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px;
    outline: 2px solid #ffd400 !important; outline-offset: 2px;
}
html.a11y-headings body :is(h1, h2, h3, h4, h5, h6):not(.zn-a11y *) { outline: 2px dashed var(--primary) !important; outline-offset: 4px; }

/* Contrast: dark (white on black) and light (black on white) repaint every
   element; high contrast and the saturation choices are filters that can
   be combined. */
html.a11y-contrast-dark body, html.a11y-contrast-dark body :not(.zn-a11y, .zn-a11y *, i, svg, path, use) {
    background-color: #000 !important; color: #fff !important; border-color: #fff !important;
}
html.a11y-contrast-dark body a:not(.zn-a11y *), html.a11y-contrast-dark body a:not(.zn-a11y *) * { color: #ffe14d !important; }
html.a11y-contrast-light body, html.a11y-contrast-light body :not(.zn-a11y, .zn-a11y *, i, svg, path, use) {
    background-color: #fff !important; color: #000 !important; border-color: #000 !important;
}
html.a11y-contrast-light body a:not(.zn-a11y *), html.a11y-contrast-light body a:not(.zn-a11y *) * { color: #0b3d91 !important; }
html.a11y-contrast-high { --a11y-c: contrast(1.5); }
html.a11y-sat-mono { --a11y-s: grayscale(1); }
html.a11y-sat-low { --a11y-s: saturate(0.5); }
html.a11y-sat-high { --a11y-s: saturate(2); }
html:is(.a11y-contrast-high, .a11y-sat-mono, .a11y-sat-low, .a11y-sat-high) body > :not(.zn-a11y) {
    filter: var(--a11y-c, contrast(1)) var(--a11y-s, saturate(1));
}

/* Big cursor: a large black arrow with a white edge. */
html.a11y-cursor, html.a11y-cursor * {
    cursor: 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='M6 3l34 22-15 3 9 16-7 3-9-16-12 10z' fill='%23000' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}
html.a11y-cursor .zn-cursor { display: none !important; }

/* Strong outline on whatever has keyboard focus. */
html.a11y-focus body :focus {
    outline: 4px solid #ffd400 !important; outline-offset: 3px !important; box-shadow: 0 0 0 8px #000 !important;
}

/* Stop animations: no motion, no sliding, reveals shown at once. */
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after {
    animation-duration: 0s !important; animation-iteration-count: 1 !important;
    transition: none !important; scroll-behavior: auto !important;
}
html.a11y-still .zn-reveal { opacity: 1 !important; transform: none !important; }
html.a11y-still .zn-cursor { display: none !important; }

/* Hide images: photos and background photos go, their space stays. */
html.a11y-noimg body :is(img, picture, video):not(.zn-a11y *) { visibility: hidden !important; }
html.a11y-noimg body [style*="background-image"] { background-image: none !important; }