/* ============================================================================
   Karns Foods accessibility layer (a11y.css) — added 2026-08-05
   Loaded site-wide from inc/topscripts.php, AFTER custom.css so the
   overrides below win ties. Program + evidence: _a11y/ in the repo,
   dashboard in /rewards/manage/ (Accessibility section).

   Contrast inks are computed against the worst-case light ground the site
   uses (#f5f5f5 panels), so every value passes WCAG 1.4.3 AA (4.5:1):
     brand red text  #c8102e  (replaces #eb2845, 4.26:1 fail)
     muted grey text #6a6f75  (replaces #999,    2.84:1 fail)
     body link blue  #2a6496  (replaces #337ab7 on panels, 4.17:1 fail)
     success green   #367c39  (replaces #5cb85c behind white, 2.48:1 fail)
   ========================================================================= */

/* ---- 1.4.3 Contrast: red text ink (headings, .red, ad fine print) ------- */
h1, h3, h5 {
    color: #c8102e;
}
.red {
    color: #c8102e;
}

/* ---- 1.4.3 Contrast: muted grey ink ------------------------------------- */
.grey {
    color: #6a6f75;
}
.text-muted {
    color: #6c6c6c;
}

/* ---- 1.4.3 Contrast: body links (worst case: #f5f5f5 wells/panels) ------ */
a {
    color: #2a6496;
}
a:hover, a:focus {
    color: #1d4568;
}

/* ---- 1.4.3 Contrast: Bootstrap green + red grounds behind white text ---- */
.btn-success,
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-success:active:hover, .btn-success:active:focus {
    background-color: #367c39;
    border-color: #2e6a31;
}
.label-success {
    background-color: #367c39;
}
.btn-danger,
.btn-danger:hover, .btn-danger:focus, .btn-danger:active,
.btn-danger:active:hover, .btn-danger:active:focus {
    background-color: #c8102e;
    border-color: #a80d26;
}
.label-danger {
    background-color: #c8102e;
}
.search-box {
    background-color: #c8102e;
}
.nav>li>a:focus,
.nav>li>a:hover,
.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover {
    background-color: #c8102e;
}

/* ---- 1.4.1 Use of Color: prose links carry a standing underline --------- */
/* Scoped to text blocks inside main only — nav, menus, buttons unaffected. */
main p a:not(.btn),
main li a:not(.btn),
main td a:not(.btn),
main dd a:not(.btn),
main small a:not(.btn),
.copyright a {
    text-decoration: underline;
}

/* ---- 2.5.8 Target Size: small standalone text links --------------------- */
main a[data-toggle="modal"]:not(.btn),
main small a:not(.btn) {
    display: inline-block;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* ---- 2.4.1 Skip link: visible while focused ----------------------------- */
.skipto:focus, .skipto:active {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 20px;
    clip: auto;
    overflow: visible;
    background: #1a3e72;
    color: #fff;
    font-weight: bold;
    text-decoration: underline;
}

/* ---- 2.4.7 Focus Visible: double ring readable on light, dark, red ------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid transparent; /* keeps a rect in forced-colors mode */
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1a3e72;
    border-radius: 2px;
}

/* ---- 2.3.3 / 2.2.2 Reduced motion --------------------------------------- */
@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;
    }
    /* Bootstrap 3 carousels: show one steady slide (JS also pauses cycling
       in inc/bottomscripts.php). */
    .carousel-inner .item {
        transition: none !important;
    }
}

/* ---- 2.2.2 Pause control on auto-advancing carousels -------------------- */
.karns-carousel-pause {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 20;
    background: #fff;
    color: #1f1f1f;
    border: 1px solid #6a6f75;
    opacity: .9;
}
.karns-carousel-pause:hover, .karns-carousel-pause:focus {
    opacity: 1;
}

/* ---- Leftover pass (post-fix proof scan 2026-08-05) --------------------- */
/* Slideshow title buttons were #999 on white (2.84:1); the id selector
   in custom.css outranks a bare class, so match its specificity */
#karns-homepage-carousel .carousel-titles a.btn,
.carousel-titles .btn {
    color: #6a6f75;
}
/* Bootstrap 3 puts #777 on <small> inside headings (4.47:1, just short) */
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small,
.h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small {
    color: #6c6c6c;
}
/* Our own pause toggles must meet the 24px target size */
.karns-carousel-pause {
    min-height: 24px;
    min-width: 44px;
    padding: 3px 10px;
}
/* List links in prose (e.g. plain-text page lists) get target-size room */
main li a:not(.btn) {
    display: inline-block;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* Price-circle inks inherit #eb2845 from the price group rule */
.circle-item-price,
.item-list-price,
.item-frame-price,
.shopping-list-price {
    color: #c8102e;
}
/* Red section grounds: brand red passes AA behind white text (5.88:1) */
.red-bkg {
    background-color: #c8102e;
}
/* Accent yellow lightened so it clears 4.5:1 on the red ground */
.yellow {
    color: #ffee58;
}

/* Mobile pass (390px): header quick links render red-on-white on phones */
.large-icon-btns a {
    color: #c8102e;
}
/* Rewards footer links: 24px target size */
footer a:not(.btn) {
    display: inline-block;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* Map embeds: show the focus ring on the iframe while keyboard focus is
   inside it (found by the scripted keyboard walk) */
iframe:focus {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1a3e72;
}