/* =========================================
   ADA Remediation — Header & Footer
   WCAG 2.1 AA Compliance
   ========================================= */

/* ---- 1. Skip to Main Content (WCAG 2.4.1) ---- */
#main-content {
    scroll-margin-top: 100px;
}

.skip-to-content {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 9999;
}

.skip-to-content:focus {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    padding: 10px 20px;
    background: #005fcc;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    font-size: 1rem;
    z-index: 9999;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* ---- 2. Visible Focus Indicators (WCAG 2.4.7 / 2.4.11) ---- */
/* Scoped below; app.css provides global :focus-visible where needed */

/* Nav links on dark background — use white outline for contrast */
header .main-nagivation__dropdown > ul > li > a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Desktop: submenu-only triggers (no page URL) — native button matches top-level <a> nav styling */
header .main-nagivation__dropdown > ul > li > button.nav-item__submenu-trigger {
    display: inline-block;
    padding: 5px 17px;
    margin: 0;
    text-decoration: none;
    color: #4d4d4d;
    font-weight: 700;
    font-size: 1.1em;
    font-family: inherit;
    line-height: inherit;
    transition: 0.3s;
    background: transparent;
    border: none;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    header .main-nagivation__dropdown > ul > li > button.nav-item__submenu-trigger {
        transition: none;
    }
}

@media only screen and (max-width: 1600px) {
    header .main-nagivation__dropdown > ul > li > button.nav-item__submenu-trigger {
        font-size: 1em;
    }
}

header .main-nagivation__dropdown > ul > li > button.nav-item__submenu-trigger:hover {
    color: #a3b039;
}

header .main-nagivation__dropdown > ul > li > button.nav-item__submenu-trigger:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Mobile: submenu-only top row matches sibling <a> strip */
header .main-nagivation__nav-mobile > li > button.nav-item__submenu-trigger {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 15px;
    margin: 0;
    display: block;
    background: #a3b039;
    border: none;
    border-bottom: 1px solid #fff;
    color: #fff;
    text-decoration: none;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

header .main-nagivation__nav-mobile > li > button.nav-item__submenu-trigger:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

header .main-nagivation__dropdown ul.sub-menu li a:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    background: #888b6e;
}

header .icon-button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

header .btn--mobile-menu:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

header .btn--donate:focus-visible,
header .btn--donate-mobile:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

/* Mobile nav links */
header .main-nagivation__nav-mobile > li > a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

header .main-nagivation__nav-mobile > li .sub-menu li a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Greenbar button links */
header .main-nagivation__greenbar a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Footer links */
footer a:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

footer .footer__copyright--content a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Modal close button */
.modal--signup .close:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

/* ---- 3. Desktop Dropdown: Keyboard Access via :focus-within (WCAG 2.1.1 / 1.4.13) ---- */
/* Show submenu when any element inside the nav item has keyboard focus */
header .main-nagivation__dropdown > ul > li:focus-within ul.sub-menu {
    display: block;
}

/* WCAG 1.4.13 — Hoverable: keep submenu visible while pointer is over it */
header .main-nagivation__dropdown > ul > li ul.sub-menu:hover {
    display: block;
}

/* ---- 4. Link Visual Distinction from Body Text (WCAG 1.4.1) — bold, no underline ---- */

/* Footer copyright — inline links */
footer .footer__copyright--content a {
    text-decoration: none !important;
    font-weight: 700;
}

/* Desktop dropdown sub-menu links on hover/focus */
header .main-nagivation__dropdown ul.sub-menu li a:hover,
header .main-nagivation__dropdown ul.sub-menu li a:focus {
    text-decoration: none;
    font-weight: 700;
}

/* Desktop nav top-level links on hover/focus */
header .main-nagivation__dropdown > ul > li > a:hover,
header .main-nagivation__dropdown > ul > li > a:focus {
    text-decoration: none;
    font-weight: 700;
}

/* Mobile nav links on hover/focus */
header .main-nagivation__nav-mobile > li > a:hover,
header .main-nagivation__nav-mobile > li > a:focus {
    text-decoration: none;
    font-weight: 700;
}

header .main-nagivation__nav-mobile > li .sub-menu li a:hover,
header .main-nagivation__nav-mobile > li .sub-menu li a:focus {
    text-decoration: none;
    font-weight: 700;
}

/* Footer navigation column links on hover/focus */
footer .footer__item a:hover,
footer .footer__item a:focus {
    text-decoration: none;
    font-weight: 700;
}

footer .footer-details__social li a:hover,
footer .footer-details__social li a:focus {
    text-decoration: none;
    font-weight: 700;
}

/* Bootstrap reboot: default anchor hover uses underline — use bold instead (scoped away from .btn CTAs) */
a:hover,
a:focus {
    text-decoration: none;
}

a:not(.btn):not([class*="btn--"]):hover,
a:not(.btn):not([class*="btn--"]):focus {
    font-weight: 700;
}

/*
 * Grey CMS callout bar (#eee): promoted h2 for outline must not inherit
 * .subpage__page--dynamic h2 { 3.2em, uppercase, ::after accent } from app.css
 * (legacy rule assumed all h2 in this column were “section” titles; callout was h5).
 */
.subpage__page--dynamic h2[style*="rgb(238, 238, 238)"],
.subpage__page--dynamic h2[style*="rgb(238,238,238)"] {
    text-transform: none;
    font-size: 26px;
    font-weight: normal;
    line-height: normal;
    margin: 0;
    position: static;
}

/*
 * Career / volunteer position detail: CMS used h4 under template h2 for subsection titles
 * (.subpage__page--dynamic h4 in app.css). Semantic h3 must not pick up mega .subpage__page--dynamic h3 rules.
 */
.subpage__page--career-single .subpage__page--dynamic h3.career-cms-subheading {
    text-transform: uppercase;
    font-weight: 900;
    font-size: 2.5em;
    color: #a3b039;
    position: static;
    margin: 0;
    text-align: inherit;
}

.subpage__page--career-single .subpage__page--dynamic h3.career-cms-subheading::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

.subpage__page--dynamic h2[style*="rgb(238, 238, 238)"]::after,
.subpage__page--dynamic h2[style*="rgb(238,238,238)"]::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

/* CMS body links: always visually distinct from surrounding text */
.subpage__page--dynamic a:not(.btn):not([class*="btn--"]) {
    text-decoration: underline !important;
    font-weight: 700;
}

/* Link contrast guardrail for CMS/public content areas:
   avoid Bootstrap default #007bff on #4d4d4d surrounding text (fails 1.4.1 test combos). */
.content-default a:not(.btn):not([class*="btn--"]):not(.with-link),
.subpage__page a:not(.btn):not([class*="btn--"]):not(.with-link) {
    /* color: #0056b3 !important; */
    /* text-decoration: underline !important; */
    font-weight: 700 !important;
}

/* Who We Are sidebar: semantic h2 matches legacy .sidebar h4 look (app.css) */
.sidebar article > h2 {
    font-size: 2em;
    margin-bottom: 30px;
}

@media only screen and (max-width: 480px) {
    .sidebar article > h2 {
        margin-bottom: 10px;
    }
}

.sidebar article > h2:after {
    display: block;
    content: "";
    width: 190px;
    height: 9px;
    background: #a3b039;
    margin: 15px 0;
}

/* Footer column titles: semantic h3 matches legacy footer .footer__column h4 (app.css); plain text, not links */
footer .footer__column h3 {
    font-size: 1.4em;
    font-weight: 900;
    color: #a3b039;
    margin-bottom: 20px;
    display: block;
}

@media only screen and (max-width: 600px) {
    footer .footer__column h3 {
        font-size: 1em;
        margin-bottom: 5px;
    }
}

/*
 * Font Awesome 5 Brands — app.css includes :before glyph rules for .fab but not the brands @font-face.
 * Footer (and any .fab) needs "Font Awesome 5 Brands" for Facebook / Twitter / LinkedIn / Instagram marks.
 * License: https://fontawesome.com/license/free (Icons: CC BY 4.0)
 */
@font-face {
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../webfonts/fa-brands-400.eot");
    src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"),
        url("../webfonts/fa-brands-400.woff2") format("woff2"),
        url("../webfonts/fa-brands-400.woff") format("woff"),
        url("../webfonts/fa-brands-400.ttf") format("truetype"),
        url("../webfonts/fa-brands-400.svg#fontawesome") format("svg");
}

.fab {
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
}

/* Footer left: less vertical gap between logo, social icons, and badge row (app.css logo margin-bottom: 40px) */
footer.footer .footer-details__logo {
    margin-bottom: 0 !important;
}

@media only screen and (max-width: 1190px) {
    footer.footer .footer-details__logo {
        margin-bottom: 0 !important;
    }

    footer.footer .footer-details__social {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }
}

/* Footer social: replace sprite sheet + off-screen text with visible brand icons */
footer.footer .footer-details__social ul li {
    background: none !important;
    text-indent: 0 !important;
    overflow: visible !important;
    margin-bottom: 8px !important;
}

footer.footer .footer-details__social ul li a {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

footer.footer .footer-details__social ul li a .fab {
    font-size: 1.75rem;
    line-height: 1;
    color: #5d6513;
}

@media only screen and (max-width: 1024px) {
    footer.footer .footer-details__social ul li a .fab {
        font-size: 1.35rem;
    }
}

/* Director / leader cards — correct heading order; mirror app.css rules for former h4 (app.scss unchanged) */

/* Grid (e.g. Board index): h3 name under sidebar h2 — match .director-list__content a h4 */
.director-list__content a h3 {
    color: #4d4d4d;
    margin: 14px 0px;
    font-weight: 900;
    font-size: 1.4em;
    transition: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
    .director-list__content a h3 {
        transition: none;
    }
}

@media only screen and (max-width: 800px) {
    .director-list__content a h3 {
        text-align: center;
        font-size: 1.7em !important;
    }
}

.director-list__content a:hover h3 {
    color: #a3b039;
}

@media only screen and (max-width: 768px) {
    .director-list__content a h3 {
        font-size: 1.2em !important;
    }
}

/* Profile single: h2 name after page h1 — match .director-list__single .director-list__content a h4 */
.director-list__single .director-list__content > h2,
.director-list__single .director-list__content a h2 {
    font-size: 2.5em;
    text-transform: capitalize;
    color: #5d6513;
    margin: 0;
}

.director-list__content a:hover h2 {
    color: #5d6513;
}

/* Prev/next strip: section label was h4 — now h3 after profile h2 — match .board-next-post__item h4 / __middle h4 */
.board-next-post__item h3 {
    margin: 0;
    display: block;
    position: relative;
    top: 10px;
}

.board-next-post__middle h3 {
    color: #fff;
    font-size: 1.3em;
}

/* Contact offices accordion: semantic h3 matches legacy .accordion__label h5 visuals */
.accordion__label h3 {
    display: block;
    text-decoration: none;
    position: relative;
    /* Match legacy h5 sizing so nested button em sizing stays identical */
    font-size: 1.25rem;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 0;
}

.accordion__label h3 i {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    color: #fff;
    margin: auto;
    height: 15px;
    font-size: 1.4em;
    right: 20px;
}

/* Thumbnail cards: semantic h3 matches legacy h4 visuals (How We Help / Who We Are cards) */
.thumbnail-hover__overlay--content h3 {
    font-weight: 900;
}
.thumbnail-hover__overlay--content h2 {
    font-weight: 900;
}

.thumbnail-hover__overlay h3 {
    font-size: 1.2em;
    margin-bottom: 20px;
}
.thumbnail-hover__overlay h2 {
    font-size: 1.2em;
    margin-bottom: 20px;
}

.thumbnail-hover__front h3 {
    font-size: 1.4em;
}
.thumbnail-hover__front h2 {
    font-size: 1.4em;
}

.thumbnail-hover__front--content h3 {
    position: relative;
    top: -15px;
    min-height: 78px;
}
.thumbnail-hover__front--content h2 {
    position: relative;
    top: -15px;
    min-height: 78px;
}

.subpage__page--about .thumbnail-hover__front--content h3 {
    height: 40px;
    text-transform: uppercase;
    min-height: inherit;
    line-height: 24px;
}

@media only screen and (max-width: 768px) {
    .thumbnail-hover__front--content h2,
    .thumbnail-hover__front--content h3,
    .thumbnail-hover__icon {
        opacity: 0;
        visibility: visible;
    }
}

@media (max-width: 1024px) {
    .thumbnail-hover__front--content h2,
    .thumbnail-hover__front--content h3 {
        font-size: 18px !important;
    }

    .thumbnail-hover__front h2,
    .thumbnail-hover__front h3 {
        font-size: 18px !important;
    }
}

/* Home hero slides: overlay on photo (CMS text stays readable) */
#home-banner .banner__item::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000;
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
}

#home-banner .banner__item .banner__content {
    z-index: 2;
}

/* Home hero: headline layer above overlay; transparent backgrounds via CSS (no inline on CMS HTML) */
#home-banner .banner__item h1,
#home-banner .banner__item .banner__title {
    position: relative;
    z-index: 2;
}

#home-banner .banner__item h1,
#home-banner .banner__item h1 span,
#home-banner .banner__item p,
#home-banner .banner__item .banner__title {
    background-color: transparent !important;
}

/* Subpage hero (Who We Help, etc.): black 70% overlay; app.css used gray rgba and omitted z-index */
section.banner.banner-subpage .banner__item.banner-subpage__item::before,
.banner-subpage__item::before {
    background: rgba(0, 0, 0, 0.7);
    background: rgb(0 0 0 / 70%);
    z-index: 1;
    pointer-events: none;
}

section.banner.banner-subpage .banner__item.banner-subpage__item .banner__content.banner-subpage__content,
.banner-subpage__item .banner__content.banner-subpage__content {
    position: relative;
    z-index: 2;
}

/* Hero / Get Involved: no opaque box behind text so slide overlay and photo read through */
/* Home slide h1 / span / p transparent backgrounds: see #home-banner rules above */
.homepage .get-involve .primary-heading h2,
.homepage .get-involve .primary-heading h2 span,
.homepage .get-involve .get-involve__content p {
    background-color: transparent !important;
}

/* Home “Get Involved”: same overlay pattern on full-width background image */
.homepage .get-involve {
    position: relative;
}

.homepage .get-involve::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000;
    opacity: 0.3;
    z-index: 0;
    pointer-events: none;
}

.homepage .get-involve > .container {
    position: relative;
    z-index: 1;
}

/* Home "Get Involved" readability on background image */
.homepage .get-involve .primary-heading h2 span,
.homepage .get-involve .get-involve__content p {
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
}

/* Home "Get Involved" paragraph size */
.homepage .get-involve .get-involve__content > p {
    font-size: 18px !important;
}

/* Homepage Ways to Give strip (#donation): link text contrast on orange CTA background */
section#donation.donate-section .donate-section__left {
    color: #2e2e2e !important;
}

section#donation.donate-section .donate-section__left a {
    color: #2e2e2e !important;
}

section#donation.donate-section .donate-section__left a:hover,
section#donation.donate-section .donate-section__left a:focus,
section#donation.donate-section .donate-section__left a:focus-visible {
    color: #2e2e2e !important;
}

/* Volunteer / Ways to Give hub: phone & email links in .contact-details (overrides app.css #fcb84e) */
#main-content .career-section .contact-details a {
    color: #5d6513 !important;
}

#main-content .career-section .contact-details a:hover,
#main-content .career-section .contact-details a:focus,
#main-content .career-section .contact-details a:focus-visible {
    color: #5d6513 !important;
}

/* Phone icon circle (glyph stays light for contrast on #5d6513) */
#main-content .career-section .contact-details i {
    background-color: #5d6513 !important;
    color: #fff !important;
}

/* Ways to Give page-next strip: enforce dark text/link color */
section.page-next-post,
section.page-next-post .page-next-post__item,
section.page-next-post .page-next-post__item a,
section.page-next-post .page-next-post__item .wtg-other-ways-heading,
section.page-next-post .page-next-post__item .hide--mobile {
    color: #2e2e2e !important;
}

/* Home blog slider: darken slide image overlay (app.css uses 0.4) */
.homepage ul.slider--blog__content::before,
.homepage .slider--blog__content::before {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* News & Events / Blog / Press: sidebar uses semantic h2; match legacy .sidebar h4 (app.css) */
.sidebar article > h2.sidebar-section-title {
    font-size: 2em;
    margin-bottom: 30px;
}

.sidebar article > h2.sidebar-section-title::after {
    display: block;
    content: "";
    width: 190px;
    height: 9px;
    background: #a3b039;
    margin: 15px 0;
}

@media only screen and (max-width: 480px) {
    .sidebar article > h2.sidebar-section-title {
        margin-bottom: 10px;
    }
}

/* Services nav custom accent color via CSS variable (set per-page in Blade) */
.services-navigation__color--custom a {
    color: var(--services-custom-accent, #f58c8e) !important;
}

.services-navigation__color--custom a:after {
    border-bottom: 1px dashed var(--services-custom-accent, #f58c8e) !important;
}

.services-navigation__color--custom a:hover,
.services-navigation__color--custom a:focus {
    background: var(--services-custom-accent, #f58c8e) !important;
    color: #fff !important;
}