/* ==========================================================================
   a11y.css - WCAG 2.1 AA colour / focus / motion fixes for the public landing pages
   Everything is scoped to .a11y (the wrapper div in index.php / index_es.php).
   To switch it all off: remove class="a11y" from that wrapper. No other page is affected.
   Colours: every text colour below is >= 4.5:1 on white and on the light-gray (#f8f9fa) sections.
   ========================================================================== */

/* skip link: invisible until a keyboard user tabs onto it */
.a11y .skip-link:focus {
    position: fixed; top: 8px; left: 8px; z-index: 2000;
    width: auto; height: auto; clip: auto; overflow: visible;
    padding: .6rem 1.1rem; background: #fff; color: #0056b3; font-weight: 700;
    border-radius: .35rem; box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
/* <main> only receives focus from the skip link, no outline needed there */
.a11y main:focus { outline: 0; }

/* text colours (Bootstrap's defaults are 3.0 - 4.4:1) */
.a11y .text-info    { color: #0e6674 !important; }   /* was #17a2b8, 3.0:1 -> 5.9:1 on the #f0f1f4 gray sections */
.a11y .text-primary { color: #0056b3 !important; }   /* was #007bff, 4.0:1 -> 7.0:1 */
.a11y .text-success { color: #1e7e34 !important; }   /* was #28a745, 3.1:1 -> 5.1:1 */
.a11y .text-muted   { color: #5a6268 !important; }   /* was #6c757d, 4.45:1 on #f8f9fa -> 6.0:1 */

/* links / outline buttons */
.a11y .btn-read-more, .a11y .no-bg { color: #0056b3; }
.a11y .btn-outline-primary { color: #0056b3; border-color: #0056b3; }
.a11y .btn-outline-primary:hover, .a11y .btn-outline-primary:focus {
    background-color: #0056b3; border-color: #0056b3; color: #fff;
}

/* theme paragraphs inside the feature blurbs (main.min.css sets #8c8c8c = 3.4:1 on white) */
.a11y .blurb p { color: #595959; }                                         /* 7.0:1 on white, 6.2:1 on #f0f1f4 */

/* plain links (theme sets #287dfe = 3.8:1 on white). :where() keeps specificity at zero, so every
   class-based link colour in the theme / home.css (white links on dark areas, etc.) still wins. */
.a11y :where(a:not(.btn)) { color: #0056b3; }

/* list-group rows (theme text is #8c8c8c, 3.4:1) */
.a11y .list-group-item { color: #595959; }

/* theme button: white text on #287dfe is 3.8:1, so use a slightly deeper brand blue */
.a11y .btn-theme { background: #1560d4; border-color: #1560d4; }           /* white text 5.7:1 */
.a11y .btn-theme:hover, .a11y .btn-theme:focus { background: #0b4fb0; border-color: #0b4fb0; }

/* hero photo: the white text sits on the photo + dark overlay. At 70% the worst case (a white photo) is still 5.7:1 */
.a11y .bg-overlay[data-overlay='5']::before { opacity: .7; }

/* solid colour UNDER the photo, so white text never sits on a white page if the image is slow, blocked or switched off
   (also what WAVE and other checkers read, since they cannot see into a photo) */
.a11y .a11y-dark { background-color: #242424; }

/* call-to-action band: white text/button on the gradient (left end was #287dfe = 3.8:1) */
.a11y .gradient-primary { background-color: #1560d4; background-image: linear-gradient(to right, #1560d4, #6a28e8); }   /* white >= 5.7:1 along the whole band */

/* white-on-colour surfaces */
.a11y .bg-primary { background-color: #0056b3 !important; }              /* white text 4.0:1 -> 7.0:1 */
.a11y .list-group-item.active { background-color: #0056b3; border-color: #0056b3; color: #fff; }
.a11y .badge-success { background-color: #1e7e34; color: #fff; }          /* white text 3.1:1 -> 5.1:1 */

/* keyboard focus: dark ring + white halo, so it shows on light AND dark sections */
.a11y a:focus-visible, .a11y button:focus-visible, .a11y .btn:focus-visible, .a11y [tabindex]:focus-visible {
    outline: 3px solid #0056b3; outline-offset: 2px; box-shadow: 0 0 0 6px #fff;
}

/* people who ask their OS for less motion get none */
@media (prefers-reduced-motion: reduce) {
    .a11y *, .a11y *::before, .a11y *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
    .a11y .parallax-img { background-attachment: scroll !important; }
}