/* ~/assets/css/a11y-controls.css  - load AFTER style.css, dbim-theme.css and shell.css */

/* ---- Toolbar (sits in the blue .dbim-user-controls strip) ---- */
.a11y-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.a11y-group { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; }
.a11y-group .a11y-label { color: #fff; font-size: 13px; margin-right: 2px; }
.a11y-controls button {
    background: none; color: #fff; font: inherit; font-size: 13px; line-height: 1.6;
    border: 1px solid rgba(255,255,255,.6); border-radius: 4px; padding: 1px 9px; cursor: pointer;
}
.a11y-controls button:hover { background: rgba(255,255,255,.18); }
.a11y-controls button[aria-pressed="true"] { background: #fff; color: var(--dbim-key, #162F6A); font-weight: 600; }
.a11y-controls button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.a11y-controls button:disabled { opacity: .45; cursor: not-allowed; }
.a11y-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid currentColor; vertical-align: -1px; margin-right: 4px; }
.a11y-swatch.yellow { background: #ffeb00; }
.a11y-swatch.pink   { background: #ff41ff; }
.a11y-swatch.normal { background: #fff; }

/* ---- Text size: five steps. CSS zoom scales px- and rem-based text alike ---- */
html.a11y-fs-0 body { zoom: .9; }
html.a11y-fs-2 body { zoom: 1.15; }
html.a11y-fs-3 body { zoom: 1.3; }
html.a11y-fs-4 body { zoom: 1.5; }
@supports not (zoom: 1) {
    html.a11y-fs-0 { font-size: 90%; }
    html.a11y-fs-2 { font-size: 115%; }
    html.a11y-fs-3 { font-size: 130%; }
    html.a11y-fs-4 { font-size: 150%; }
}

/* ---- Contrast themes (images and SVG keep their own colours) ---- */
html.a11y-c-yellow body,
html.a11y-c-yellow body *:not(img):not(svg):not(video):not(canvas) {
    background-color: #000 !important; color: #ffeb00 !important; border-color: #ffeb00 !important;
    box-shadow: none !important; text-shadow: none !important;
}
html.a11y-c-pink body,
html.a11y-c-pink body *:not(img):not(svg):not(video):not(canvas) {
    background-color: #000 !important; color: #ff41ff !important; border-color: #ff41ff !important;
    box-shadow: none !important; text-shadow: none !important;
}
html.a11y-c-yellow body a, html.a11y-c-pink body a { text-decoration: underline !important; }
html.a11y-c-yellow body img, html.a11y-c-pink body img { background: #fff; }
/* pressed button must stay readable: invert it */
html.a11y-c-yellow .a11y-controls button[aria-pressed="true"] { background-color: #ffeb00 !important; color: #000 !important; }
html.a11y-c-pink   .a11y-controls button[aria-pressed="true"] { background-color: #ff41ff !important; color: #000 !important; }
html.a11y-c-yellow .a11y-swatch.normal, html.a11y-c-pink .a11y-swatch.normal { background: #fff !important; }
html.a11y-c-yellow .a11y-swatch.yellow { background: #ffeb00 !important; }
html.a11y-c-pink   .a11y-swatch.pink   { background: #ff41ff !important; }