/* Accessibility foundation: global WCAG-first defaults for typography, focus, contrast, and user preferences. */
:root {
    --a11y-bg: #ffffff;
    --a11y-text: #111111;
    --a11y-muted: #2a2a2a;
    --a11y-link: #003a8c;
    --a11y-link-visited: #5a1f74;
    --a11y-focus: #005fcc;
    --a11y-focus-offset: 0.1875rem;
    --a11y-border: #1f1f1f;
}

html {
    font-size: 100%;
}

body {
    background-color: var(--a11y-bg);
    color: var(--a11y-text);
    font-size: 1.125rem;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

main p,
main li,
main dd,
main dt,
main span,
main label {
    max-width: 70ch;
}

/* The 70ch readability cap above pins a block element to the left of its
   container, so text-align:center only centres the text inside that narrow box
   (which itself sits at the left). Inside an explicitly centred region
   (e.g. the home-page welcome copy) also centre the block itself so the capped
   paragraph lines up under the full-width heading. */
.text-center p,
.text-center dl,
.text-center dd,
.text-center dt,
.text-center li {
    margin-left: auto;
    margin-right: auto;
}

a {
    color: var(--a11y-link);
    text-decoration-thickness: 0.125rem;
}

a:visited {
    color: var(--a11y-link-visited);
}

a:hover {
    color: #002f70;
}

/* Accessibility: custom visible focus ring for keyboard users. */
:focus-visible {
    outline: 0.1875rem solid var(--a11y-focus);
    outline-offset: var(--a11y-focus-offset);
    border-radius: 0.125rem;
}

.skip-link {
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: #000000;
    color: #ffffff;
    z-index: 9999;
    transform: translateY(-220%);
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
}

.contrast-toggle {
    display: inline-flex;
    gap: 0.375rem;
}

.contrast-toggle .btn {
    text-decoration: none;
    border-width: 0.125rem;
    min-width: 4rem;
}

.contrast-toggle .btn[aria-pressed="true"] {
    font-weight: 700;
}

.htmx-indicator {
    display: none;
    margin-top: 1rem;
    font-weight: 700;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-block;
}

table {
    border-collapse: collapse;
}

th,
td {
    border: 0.0625rem solid #3a3a3a;
    padding: 0.5rem;
}

body[data-contrast="high"] {
    --a11y-bg: #000000;
    --a11y-text: #ffffff;
    --a11y-muted: #ffffff;
    --a11y-link: #ffff00;
    --a11y-link-visited: #ffd37a;
    --a11y-focus: #00ffff;
    --a11y-border: #ffffff;
    background-color: #000000;
    color: #ffffff;
}

body[data-contrast="high"] .navbar-light,
body[data-contrast="high"] .bg-white,
body[data-contrast="high"] .footer,
body[data-contrast="high"] .table,
body[data-contrast="high"] .card {
    background-color: #000000 !important;
    color: #ffffff !important;
}

body[data-contrast="high"] .nav-link,
body[data-contrast="high"] .text-dark,
body[data-contrast="high"] .navbar-brand,
body[data-contrast="high"] p,
body[data-contrast="high"] li,
body[data-contrast="high"] td,
body[data-contrast="high"] th,
body[data-contrast="high"] label,
body[data-contrast="high"] span,
body[data-contrast="high"] h1,
body[data-contrast="high"] h2,
body[data-contrast="high"] h3,
body[data-contrast="high"] h4 {
    color: #ffffff !important;
}

body[data-contrast="high"] a,
body[data-contrast="high"] a:visited {
    color: #ffff00 !important;
}

body[data-contrast="high"] input,
body[data-contrast="high"] select,
body[data-contrast="high"] textarea,
body[data-contrast="high"] .form-control,
body[data-contrast="high"] .btn,
body[data-contrast="high"] table,
body[data-contrast="high"] th,
body[data-contrast="high"] td {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

body[data-contrast="high"] .btn-primary,
body[data-contrast="high"] .btn-outline-secondary {
    background-color: #000000 !important;
    color: #ffff00 !important;
    border-color: #ffff00 !important;
}

body[data-contrast="high"] .btn:hover,
body[data-contrast="high"] .btn:focus {
    background-color: #1a1a1a !important;
}

@media (max-width: 767.98px) {
    .contrast-toggle {
        margin-left: 0;
        margin-right: 0.5rem;
    }

    .contrast-toggle .btn {
        padding: 0.2rem 0.35rem;
        font-size: 0.8rem;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --a11y-bg: #101316;
        --a11y-text: #f5f7fa;
        --a11y-muted: #d8dde5;
        --a11y-link: #88b8ff;
        --a11y-link-visited: #c8a4f0;
        --a11y-focus: #9dcbff;
        --a11y-border: #e8edf4;
    }

    body {
        background-color: var(--a11y-bg);
        color: var(--a11y-text);
    }

    .navbar-light,
    .bg-white,
    .footer {
        background-color: #172029 !important;
        color: var(--a11y-text) !important;
    }

    .text-dark,
    .nav-link {
        color: var(--a11y-text) !important;
    }

    .btn-primary {
        background-color: #0b4da2;
        border-color: #7cb8ff;
        color: #ffffff;
    }
}

@media (forced-colors: active) {
    /* Accessibility: allow OS high-contrast colors and keep controls visible. */
    * {
        forced-color-adjust: auto;
    }

    .skip-link {
        border: 0.0625rem solid CanvasText;
    }

    :focus-visible {
        outline-color: Highlight;
    }
}

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