/* WCAG 2.1 AA platform-wide remediation
   Loaded after platform.css — rules here intentionally override Tailwind defaults. */

/* ─── 1.4.4  Minimum text size ───────────────────────────────────────────────
   Body text must be ≥16px (1rem) so users can read without assistive zoom.
   Scoped to main content so chrome/nav text at 14px is unaffected. */
#main-content,
[role="main"] {
    font-size: 1rem;
}
#main-content p,
[role="main"] p,
#main-content li,
[role="main"] li,
#main-content td,
[role="main"] td,
#main-content dd,
[role="main"] dd {
    font-size: max(1rem, 1em);
}

/* ─── 2.4.7 / 1.4.11  Focus indicators ───────────────────────────────────────
   Already in app.onRequestStart.cfm inline <style> for early paint.
   Repeated here with higher specificity to win against Bootstrap nav resets. */
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.dropdown-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ─── 1.4.1  Inline link underlines ──────────────────────────────────────────
   Underline body-copy links so color alone doesn't convey meaning.
   Anchored to landmarks we control — nav/button links are exempt. */
#main-content a:not([class]),
[role="main"] a:not([class]) {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ─── 1.4.1 / 2.4.4  Link hover state ───────────────────────────────────────
   Links must have a visible hover state beyond cursor change.
   Reinforces underline and shifts opacity as a lightweight, theme-neutral signal. */
#main-content a:hover,
[role="main"] a:hover {
    text-decoration: underline;
    opacity: 0.75;
}

/* ─── 2.5.5  Minimum interactive target size ─────────────────────────────────
   Buttons and icon-only links must be at least 24×24px touchable area. */
button,
[type="button"],
[type="submit"],
[type="reset"] {
    min-height: 24px;
    min-width: 24px;
}

a.icon-link,
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
}

/* ─── 1.4.12  Text spacing tolerance ─────────────────────────────────────────
   Prevent fixed-height prose containers from clipping text when user applies
   custom text-spacing styles (line-height 1.5×, letter-spacing 0.12em, etc.) */
#main-content,
[role="main"] {
    min-height: 0;
    overflow: visible;
}

/* ─── 2.2.2  Carousel pause/play control ─────────────────────────────────────
   Sits as the last <li> inside .carousel-indicators so it flows inline with
   the slide dots — grouping all carousel controls in one place (W3C pattern). */
.carousel-indicators {
    align-items: center;
}
.carousel-indicators .carousel-pause-li {
    background: none;
    border: none;
    height: auto;
    margin-left: 12px;
    opacity: 1;
    text-indent: 0;
    width: auto;
}
.carousel-pause-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    display: block;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9));
    line-height: 0;
    opacity: 0.9;
    padding: 0;
}
.carousel-pause-btn svg {
    height: 28px;
    width: 28px;
}
.carousel-pause-btn:hover {
    opacity: 1;
}
.carousel-pause-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.carousel-pause-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ─── 2.3.3  Reduced motion (AAA, cheap) ─────────────────────────────────────
   Pause auto-playing carousels for users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .carousel,
    .slick-slider,
    [data-ride="carousel"] {
        animation: none !important;
        transition: none !important;
    }

    .carousel-item {
        transition: none !important;
    }
}