/*
 * Citizen web accessibility baseline (WCAG 2.1 AA).
 *
 * Loaded last in App.razor - after the tenant stylesheet (Bootstrap), the Telerik theme and
 * design-system.css - so these rules win over third-party focus and validation styles without
 * per-component overrides. Hand-authored, no SASS source.
 */

:root {
    /* Two-tone focus ring: the outer ring is visible on light surfaces, the inner one on dark
       surfaces (dark buttons, flash messages, the header), so it keeps 3:1 everywhere (1.4.11). */
    --a11y-focus-ring-outer: var(--c-color-12, #004831);
    --a11y-focus-ring-inner: #ffffff;
    --a11y-danger-text: #d40000;
}

[data-bs-theme=dark] {
    --a11y-focus-ring-inner: #111111;
    --a11y-danger-text: #ff6b6b;
}

/* ---------------------------------------------------------------------------------------------
 * 2.4.7 Focus Visible - one indicator for everything reachable by keyboard.
 * :focus-visible keeps mouse clicks on buttons and links ring-free.
 * ------------------------------------------------------------------------------------------- */

:focus-visible {
    outline: 3px solid var(--a11y-focus-ring-outer) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px var(--a11y-focus-ring-inner) !important;
}

.skip-link:focus-visible {
    outline-color: #ffcc00 !important;
}

/* Headings and the main landmark receive focus programmatically (navigation, skip link) - they are
   not controls, a ring around them would only look like a selection. */
main[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* A tile whose name link is stretched over it (Bootstrap .stretched-link) shows the ring around the whole
   tile, not just around the name text. */
.tile:has(.stretched-link:focus-visible) {
    outline: 3px solid var(--a11y-focus-ring-outer);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--a11y-focus-ring-inner);
}

/* Only where :has() works does the tile carry the ring - otherwise the link must keep its own. */
@supports selector(:has(*)) {
    .tile .stretched-link:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }
}

/* Bootstrap's translucent glow (rgba 0.25, about 1.4:1) is replaced by the ring above. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.accordion-button:focus {
    box-shadow: none;
}

/* Telerik inputs focus an inner element clipped by its wrapper - draw the ring on the wrapper. */
.k-input-inner:focus,
.k-input-inner:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.k-input.k-focus,
.k-input:focus-within,
.k-picker.k-focus,
.k-picker:focus-within {
    outline: 3px solid var(--a11y-focus-ring-outer) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px var(--a11y-focus-ring-inner) !important;
}

/* ---------------------------------------------------------------------------------------------
 * 1.4.3 Contrast - validation messages (Telerik default #f31700 = 4.26:1, Bootstrap #dc3545 on
 * the tinted form blocks = 4.33:1) are small text and need 4.5:1.
 * ------------------------------------------------------------------------------------------- */

.validation-message,
.k-form-error,
.k-validation-message {
    color: var(--a11y-danger-text) !important;
}