/* ==========================================================================
   Accessibility Overrides — WAVE / WCAG 2.1 AA compliance
   ========================================================================== */

/* ---- Skip-to-content link ---- */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 10000;
    padding: 0.75rem 1.5rem;
    background: #1b2a4e;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.skip-to-content:focus {
    position: fixed;
    left: 10px;
    top: 10px;
    width: auto;
    height: auto;
    overflow: visible;
    outline: 3px solid #574fec;
    outline-offset: 2px;
    border-radius: 4px;
    z-index: 10000;
}

/* ---- Screen-reader only ---- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Focus-visible outlines for all interactive elements ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.navbar-toggler:focus-visible,
.btn:focus-visible {
    outline: 3px solid #574fec;
    outline-offset: 2px;
}

/* Remove the suppression of outlines that harms keyboard users */
*:focus {
    outline-width: 2px;
}
[tabindex="-1"]:focus:not(:focus-visible) {
    outline: 0 !important;
}

/* ---- Contrast fixes (WCAG AA: 4.5:1 for normal text, 3:1 for large) ---- */

/* .text-muted  #869ab8 on white = ~3.5:1 → upgrade to #5a6f8f ≈ 4.6:1 */
.text-muted {
    color: #5a6f8f !important;
}

/* .text-gray-500  #abbcd5 on white = ~2.3:1 → upgrade to #637a97 ≈ 4.5:1 */
.text-gray-500 {
    color: #637a97 !important;
}

/* .text-gray-600  #869ab8 on white = ~3.5:1 → same fix as muted */
.text-gray-600 {
    color: #5a6f8f !important;
}

/* caption color  #869ab8 on white → upgrade */
caption {
    color: #5a6f8f;
}

/* .text-warning  #fad776 on white = ~1.7:1 — not useful for text on white;
   on dark backgrounds it's fine. Override only for light backgrounds: */
.bg-white .text-warning,
.bg-light .text-warning {
    color: #946d00 !important;
}

/* Footer .text-gray-500 on dark bg (#1b2a4e) — #abbcd5 ≈ 5.9:1 is OK,
   but our override above makes it #637a97 ≈ 2.5:1 on dark. Restore for dark bg: */
.bg-gray-900 .text-gray-500,
footer .text-gray-500 {
    color: #abbcd5 !important;
}

/* Ensure form placeholder contrast meets 4.5:1 */
::placeholder {
    color: #5a6f8f;
    opacity: 1;
}

/* ---- Link distinguishability ---- */
/* Links inside body text should be underlined (already set in theme.css),
   but nav links typically are not—ensure they have distinguishing hover */
.nav-link {
    text-decoration: none;
}
.nav-link:hover,
.nav-link:focus {
    text-decoration: underline;
}

/* ---- Ensure embla carousel buttons are visible on focus ---- */
.embla__button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}
