/*
 * Accessibility CSS overrides.
 *
 * Targets recurring contrast and focus-visibility issues surfaced by the
 * `.a11y/` scanner. Each rule documents what it fixes and the WCAG SC.
 *
 * Loaded after the compiled theme CSS via wp_enqueue_style with high
 * priority so it cascades over Sage's dist/main.css and plugin styles.
 */

/*
 * Screen-reader-only utility (footer search label, etc.).
 *
 * Visually hidden via clip, but kept in the a11y tree — so WAVE/axe still check
 * its contrast. Without explicit colors the text inherits whatever it lands on
 * (e.g. the footer "Search the site" label = black on the navy footer, 1.65:1)
 * and fails. Set an explicit passing pair (white on black, 21:1): never seen
 * (the box is clipped to 1px), but read as compliant wherever .sr-only is used.
 */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    color: #fff !important;
    background-color: #000 !important;
}

/*
 * Input placeholder contrast (WCAG 1.4.3 Contrast Minimum).
 * Default browser placeholder color is ~#a9a9a9 / ~3:1 vs white.
 * Push to a #595959 (~7:1 vs white) so screen-readable but still visually
 * "placeholder-like".
 */
input::placeholder,
textarea::placeholder {
    color: #595959 !important;
    opacity: 1; /* Firefox lowers opacity by default */
}

/*
 * Gutenberg file-download button (`.wp-block-file__button`): editor-set
 * dark gray background with blue text (~3.0:1, fails 4.5:1). Force white
 * text — yields ~13:1 against the dark bg.
 */
.wp-block-file__button,
a.wp-block-file__button.wp-element-button {
    color: #ffffff !important;
}

/*
 * Button-state variants of brand teals — Lochinvar (#2C8C84) and Astral
 * (#2e8c9d) both fail 4.5:1 with white at the button's 15px / 500-weight
 * type (Lochinvar = 3.7:1, Astral = 3.6:1). Bump to darker shades that
 * keep the brand family but pass WCAG 1.4.3:
 *   - `#1E635D` darker-Lochinvar  → ~6.6:1 vs white
 *   - `#1F6675` darker-Astral     → ~5.7:1 vs white
 * Scoped to button-box / WP block-button contexts so the original tints
 * are preserved everywhere else they're used (icons, accents, etc.).
 */
.setion-accordion-grid .wrapper-boxs .wrapper .button-box a {
    background-color: #1E635D !important;
}

.section-three-column .wrapper .content-box .button-box a,
.section-tabs.with-box .outer-content .wrapper-boxs .wrapper .content-box .button-box a,
.section-tabs.with-box .card-body .wrapper-boxs .wrapper .content-box .button-box a,
.wp-block-button__link[style*="background-color:#2e8c9d"],
.wp-block-button__link[style*="background-color: #2e8c9d"],
.wp-block-button__link[style*="background-color:#2E8C9D"] {
    background-color: #1F6675 !important;
}

/*
 * Footer search box — restored to the original "subtle" look (transparent
 * box matching the dark `$blue13` wrapper) but with WCAG-compliant text
 * colors and a high-contrast focus indicator. The box visually blends
 * with the footer; the icon-only submit button (white SVG) and the focus
 * ring keep the control identifiable.
 */
.search-footer input[type="search"],
.search-footer input[type="text"] {
    background: transparent;
    border: 0;
    outline: 0;
    padding: 8px 16px;
    width: calc(100% - 40px);
    color: #ffffff;                /* typed text: ~14.9:1 vs #1b2b39 */
}
.search-footer input::placeholder {
    color: #cccccc !important;     /* placeholder: ~9.3:1 vs #1b2b39 */
    opacity: 1;
}
.search-footer input:focus-visible {
    outline: 2px solid #FFCF4B !important;  /* yellow ring on dark bg */
    outline-offset: 0 !important;
    border-radius: 2px;
}
.search-footer button:focus-visible {
    outline: 2px solid #FFCF4B !important;
    outline-offset: 0 !important;
}

/*
 * WP block buttons and UAG post-block CTAs — recurring contrast failures
 * across the home + post carousel sections. Force a high-contrast pair on
 * non-customized buttons; theme-customized variants still cascade.
 */
.wp-block-button__link:not([style*="color"]):not([style*="background"]),
.uagb-post__cta .wp-block-button__link:not([style*="color"]):not([style*="background"]) {
    background-color: #003a70; /* WDC navy */
    color: #ffffff;
}

.wp-block-button__link:not([style*="color"]):not([style*="background"]):hover,
.uagb-post__cta .wp-block-button__link:not([style*="color"]):not([style*="background"]):hover {
    background-color: #002854;
    color: #ffffff;
}

/*
 * Carousel date items (.event-false.date-item .day/.date/.information):
 * "false" event days were rendered in light gray failing contrast. Bump to
 * mid-gray on white (~5:1).
 */
.event-false.date-item .day,
.event-false.date-item .date,
.event-false.date-item .information {
    color: #595959;
}

/*
 * The Events Calendar — legacy (v1) single-event template contrast fix.
 *
 * The plugin renders event content inside `#tribe-events-pg-template` with
 * default text colors that fall below 4.5:1 against the parent theme's
 * white background. The broken nested-HTML structure was previously
 * masking these issues from the a11y scanner; cleaning it up exposed them
 * all (~7,500 G18.Fail + G145.Fail violations across 510 event pages).
 *
 * This block scopes overrides to `#tribe-events-pg-template` so they only
 * affect TEC-rendered content, not the theme's own text. `!important` is
 * used because the legacy TEC stylesheet declares these colors with high
 * specificity.
 */
/*
 * Solid white background — the parent `<body>` has #113552 navy via the
 * theme's global rule. Without an explicit bg on the tribe wrapper, dark
 * text renders on dark body = 1:1 contrast. White bg here lets the dark
 * text below pass 4.5:1.
 */
#tribe-events-pg-template {
    background-color: #ffffff !important;
    padding: 16px;
}

#tribe-events-pg-template,
#tribe-events-pg-template p,
#tribe-events-pg-template li,
#tribe-events-pg-template sup,
#tribe-events-pg-template strong,
#tribe-events-pg-template em,
#tribe-events-pg-template span:not([class*="tribe-events-meta-label"]),
#tribe-events-pg-template div {
    color: #1a1a1a !important;
}

/* Headings on single-event pages — dark navy for visual hierarchy */
#tribe-events-pg-template h1,
#tribe-events-pg-template h2,
#tribe-events-pg-template h3,
#tribe-events-pg-template h4,
#tribe-events-pg-template h5,
#tribe-events-pg-template h6,
#tribe-events-pg-template .tribe-events-single-event-title,
#tribe-events-pg-template .tribe-events-single-section-title {
    color: #0e2c45 !important;
}

/* Meta labels (date / time / categories / tags / URL labels) — dark gray */
#tribe-events-pg-template .tribe-events-meta-label,
#tribe-events-pg-template .tribe-events-start-date-label,
#tribe-events-pg-template .tribe-events-start-time-label,
#tribe-events-pg-template .tribe-events-event-categories-label,
#tribe-events-pg-template .tribe-events-event-url-label,
#tribe-events-pg-template .tribe-event-tags-label,
#tribe-events-pg-template .tribe-event-tags {
    color: #333333 !important;
}

/* Date/time values and abbreviations */
#tribe-events-pg-template .tribe-event-date-start,
#tribe-events-pg-template .tribe-event-date-end,
#tribe-events-pg-template .tribe-event-time,
#tribe-events-pg-template .tribe-events-abbr,
#tribe-events-pg-template abbr,
#tribe-events-pg-template .tribe-events-schedule {
    color: #1a1a1a !important;
    text-decoration: none;
    border-bottom: 0;
}

/* Links inside event content — dark navy, underlined for hover and visited */
#tribe-events-pg-template a,
#tribe-events-pg-template a:visited,
#tribe-events-pg-template .tribe-events-back > a,
#tribe-events-pg-template .tribe-events-sub-nav a,
#tribe-events-pg-template .tribe-events-event-meta a {
    color: #003a70 !important;
    text-decoration: underline;
}

#tribe-events-pg-template a:hover,
#tribe-events-pg-template a:focus {
    color: #002854 !important;
    text-decoration: underline;
}

/* Notices (e.g. "This event has passed.") */
#tribe-events-pg-template .tribe-events-notices,
#tribe-events-pg-template .tribe-events-notices ul,
#tribe-events-pg-template .tribe-events-notices li {
    color: #1a1a1a !important;
}

/*
 * Event downloadable-card links — the `.date-title` wrapper has
 * `background-color: #3779bc` (theme `$blue11`) and was originally styled
 * with `color: white` (~4.6:1, passes AA). The blanket dark-text override
 * above was making this text near-black on blue (fails). Restore white
 * inside .date-title.
 */
#tribe-events-pg-template .item-event a,
#tribe-events-pg-template .item-event a:visited,
#tribe-events-pg-template .item-event .date-title,
#tribe-events-pg-template .item-event .date-title .text,
#tribe-events-pg-template .item-event .date-title > * {
    color: #ffffff !important;
    text-decoration: none !important;
}

/*
 * Maximize-modal trigger — refactored from <img class="max-img"> to
 * <button class="max-img"><img></button> for keyboard accessibility.
 * The button needs UA-style reset so the sibling `.maximize` orange
 * CSS triangle shows through and the white SVG icon sits on top of it.
 * Contrast: white #fff icon on #eb5e00 = ~3.4:1 — passes WCAG 1.4.11
 * Non-Text Contrast (AA, ≥3:1).
 */
button.max-img {
    padding: 0;
    border: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    color: inherit;
    font: inherit;
    line-height: 0;
    cursor: pointer;
    /* width/height/position from .max-img selector still apply */
}
button.max-img > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
button.max-img:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    border-radius: 2px;
}

/*
 * Bio card trigger — native <button> that wraps the card. Reset the UA
 * styles so it visually matches the surrounding card layout. Keyboard
 * focus, role=button, Space/Enter activation, and screen-reader semantics
 * all come for free from the native element. The previous `.wrapper-img-bio`
 * styles still apply because we kept the class.
 */
.bio-card-button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/*
 * The card's inner structure was converted from <div>s to <span>s because
 * HTML doesn't allow block-level elements inside <button>. The existing
 * theme CSS sets fixed heights (.image) and absolute positioning
 * (.overlay, .item-overlay) which assume display:block. Restore that.
 */
.bio-card-button .image,
.bio-card-button .item-overlay,
.bio-card-button .wrapper-bio,
.bio-card-button .people-name,
.bio-card-button .desc-jobs {
    display: block;
}
.bio-card-button:focus-visible {
    outline: 3px solid #003a70;
    outline-offset: 2px;
}

/*
 * Bio name heading — semantic upgrade from <h6>/<h4> to <h2>. Sized to
 * match the previous visual weight inside the bio dialog.
 */
.modal-footer-post .name-with-detail .bio-name {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: #333;
    margin: 0 0 0.5rem;
}

/*
 * Primary nav dropdown background — change from Astral (#2e8c9d / $green1)
 * to Lochinvar (#2C8C84). Sage compiles the SCSS variable to dist/main.css
 * which we can't rebuild from here; this rule overrides at runtime with
 * matching specificity.
 */
.nav-primary .sub-menu,
.primary-menu .sub-menu {
    background-color: #2C8C84;
}

/*
 * Primary nav keyboard accessibility — WCAG 2.4.7 Focus Visible (AA) and
 * 2.1.1 Keyboard (A). The nav sits on a #0e2c45 navy background, so the
 * default site focus outline (#003a70, also navy) disappears. Force a
 * bright high-contrast outline on primary-nav links specifically.
 */
.nav-primary a:focus-visible,
.primary-menu a:focus-visible {
    outline: 3px solid #FFCF4B !important;
    outline-offset: 2px !important;
    border-radius: 2px;
}

/*
 * Open dropdown when the parent link is expanded (keyboard activation
 * sets aria-expanded="true"; we already get mouse :hover from the
 * compiled theme CSS).
 */
.nav-primary .menu-item-has-children > a[aria-expanded="true"] + .sub-menu,
.primary-menu .menu-item-has-children > a[aria-expanded="true"] + .sub-menu {
    visibility: visible;
    opacity: 1;
}

/*
 * Hero contrast treatment — applied to:
 *   - Homepage carousel slides (`.slick-carousel.home .item`)
 *   - Inner-page hero banner (`.bg-image.bg-general-banner`) used by
 *     template-about, template-stories, template-wioa, template-news,
 *     template-resource*, template-custom, template-employer,
 *     template-faq, template-resource-hub, content-heroimage block,
 *     and the section-general-banner / section-banner-howitworks partials.
 *   - Default page/post header (`.default-header-image`) used by the
 *     shared section-default-header partial (single posts/pages, search,
 *     404, archives).
 *
 * White heading text sits over an editor-uploaded photo. It must meet
 * WCAG 1.4.3 AND be verifiable by automated checkers (WAVE / axe /
 * Lighthouse). Those tools cannot read a background image or composite a
 * semi-transparent ::before overlay, so a plain rgba scrim — visually
 * fine — still reports a (false) contrast failure.
 *
 * So instead: the element carries an OPAQUE #0e2c45 background-color — the
 * value the checkers actually read (#fff on #0e2c45 ≈ 14:1) — and the photo
 * is painted by the ::before at 25% opacity on top of it. The result,
 * 0.25*photo + 0.75*navy, is visually identical to the old "photo + 75%
 * navy scrim", but now a real, readable solid color sits in the heading's
 * ancestor chain.
 *
 * REQUIRES the template to pass the image via the `--hero-img` custom
 * property, NOT `background-image` (so no image sits on the element the
 * checkers inspect). Adding a new hero/banner? Set
 * style="--hero-img: url(...)" on the .item / .bg-general-banner element —
 * using background-image instead will lose the scrim and fail contrast.
 * The ::before inherits the element's (responsive) background-size and
 * -position, so per-breakpoint cropping is preserved automatically.
 */
.slick-carousel.home .item,
.bg-image.bg-general-banner,
.default-header-image {
    position: relative;
    background-color: #0e2c45;
}
.slick-carousel.home .item::before,
.bg-image.bg-general-banner::before,
.default-header-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--hero-img);
    background-size: inherit;
    background-position: inherit;
    background-repeat: no-repeat;
    opacity: 0.25;
    pointer-events: none;
    z-index: 1;
}
.slick-carousel.home .item > *:not(.d-none),
.bg-image.bg-general-banner > *:not(.d-none),
.default-header-image > *:not(.d-none) {
    position: relative;
    z-index: 2;
}

/*
 * Footer search field contrast.
 *
 * The input has a transparent background and sits on .wrapper's #1b2b39.
 * White input text (~14:1) and the #ccc placeholder (~9:1) actually pass
 * against that — but WAVE/axe can't reliably resolve a transparent form
 * control's background and fall back to assuming white, reporting a false
 * contrast failure. Give the input its OWN opaque background (same #1b2b39
 * as the wrapper, so it looks identical) so the checker reads a real,
 * passing foreground/background pair.
 *
 * NOTE: the compiled theme rule `.search-footer input[type=text]` does not
 * match this `type="search"` field, so its #7c7979 text color never applies
 * (the field renders white instead — which is why it passes). Do NOT "fix"
 * that selector to include type=search: #7c7979 on #1b2b39 is only 3.35:1
 * and would fail AA.
 */
.search-footer .wrapper input {
    background-color: #1b2b39;
}

/*
 * Bio-card photo grids (.wrapper-img-bio) — council (.section-council) and
 * staff (.section-staff, including the filtered staff grid) — contrast.
 *
 * Each card layers white name/title text over a person photo (a real <img>)
 * with a `.overlay` band tinted rgb(14,44,69) @ 0.7. The text's ancestor chain
 * (.wrapper-bio / .item-overlay / .image / button) has no background-color, and
 * the tint is a semi-transparent *sibling* of the text — so WAVE/axe find no
 * opaque background, assume white, and report a false contrast failure. (The
 * text is really white on a navy-tinted photo: ~5.5:1 even over the lightest
 * possible photo region, so it passes AA.)
 *
 * Fix: give the card's .image an opaque #0e2c45 background-color. The photo is
 * an opaque <img> that fully covers .image, so this is invisible — but it sits
 * in the text's ancestor chain, so the checkers now read white-on-#0e2c45
 * (~14:1). No template change needed (.image carries no background-image, so
 * there's nothing for the checker to misread). Bonus: a member with a missing
 * photo degrades to a readable navy tile instead of white-on-white.
 *
 * Scoped to the shared .wrapper-img-bio component (not a section class) so it
 * covers every grid that reuses it — council, staff, filtered staff, and any
 * future one — without having to enumerate sections.
 */
.wrapper-img-bio .image {
    background-color: #0e2c45;
}

/*
 * Image-accordion keyboard accessibility.
 *
 * The tile's caption (containing the "LEARN MORE" link) is `opacity: 0`
 * by default and only revealed on `:hover` — Tab focus lands on an
 * invisible link with no visible focus indicator. Mirror the hover
 * behavior on `:focus-within` so keyboard users see the same reveal,
 * and give the link itself a bright outline that stands out against the
 * dark `#0e2c45` scrim. WCAG 2.1.1, 2.4.7, 1.4.11.
 */
.image-accordion .tab:focus-within img {
    opacity: 0.2;
}
.image-accordion .tab:focus-within .caption {
    opacity: 1;
    transition: all 1s ease;
}
.image-accordion .tab:focus-within .headline {
    display: none;
}
@media (min-width: 768px) {
    .image-accordion .tab:focus-within {
        width: 80%;
    }
}
.image-accordion .tab .caption a:focus-visible,
.image-accordion .tab a:focus-visible {
    outline: 3px solid #FFCF4B !important;
    outline-offset: 3px !important;
    border-radius: 2px;
}

/*
 * Visible focus outline — WCAG 2.4.7 Focus Visible (AA).
 * Re-establish a focus indicator since some theme rules `outline: none` on
 * interactive elements without providing an alternative.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #003a70 !important;
    outline-offset: 2px !important;
}