/* WWHO v16 — program title contrast, FAQ section polish, About overflow/hero/badge fixes */

/* 1) Program-filtered project listing: keep the program title readable on navy. */
.route-campaigns-program .v3-listing-hero h1,
.route-campaigns-index .v3-listing-hero h1,
.route-appeals-program .v3-listing-hero h1,
.route-appeals-index .v3-listing-hero h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}
.route-campaigns-program .v3-listing-hero p,
.route-campaigns-index .v3-listing-hero p,
.route-appeals-program .v3-listing-hero p,
.route-appeals-index .v3-listing-hero p {
    color: rgba(255,255,255,.82) !important;
}

/* 2) FAQ: turn each category into a clean card with a distinct heading row. */
.route-faqs-index .faq-category {
    margin: 22px 0 28px !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 1px solid #dbe7f4 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 32px rgba(13,47,98,.055) !important;
}
.route-faqs-index .faq-category-title {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    background: #f4f9fe !important;
    border: 0 !important;
    border-bottom: 1px solid #dbe7f4 !important;
    color: #0d2f62 !important;
    -webkit-text-fill-color: #0d2f62 !important;
    font-size: clamp(1.15rem, 2vw, 1.45rem) !important;
    line-height: 1.25 !important;
}
.route-faqs-index .faq-category-title i {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    background: #e4f5ff !important;
    color: #149bd7 !important;
    font-size: 1.15rem !important;
}
.route-faqs-index .faq-category .accordion {
    padding: 0 18px 8px !important;
}
.route-faqs-index .faq-category .accordion-item {
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #e3ebf4 !important;
    border-radius: 0 !important;
    background: #fff !important;
}
.route-faqs-index .faq-category .accordion-item:last-child {
    border-bottom: 0 !important;
}
.route-faqs-index .faq-category .accordion-button {
    padding: 19px 4px !important;
    font-size: 1rem !important;
}

/* 3) About: eliminate horizontal overflow and make the hero truly edge-to-edge. */
.route-about-show,
.route-about-show .ap {
    overflow-x: clip !important;
    max-width: 100% !important;
}
.route-about-show .ap-hero {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.route-about-show .ap-hero-bg {
    inset: 0 !important;
}
.route-about-show .ap-intro-grid,
.route-about-show .ap-intro-text,
.route-about-show .ap-image-wrap {
    min-width: 0 !important;
}
.route-about-show .ap-image-wrap {
    overflow: visible !important;
}

/* 4) About image badge: compact white identity tag instead of the heavy blue block. */
.route-about-show .ap-image-badge {
    inset-inline-start: 18px !important;
    bottom: 18px !important;
    max-width: calc(100% - 36px) !important;
    padding: 12px 16px !important;
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 5px !important;
    background: rgba(255,255,255,.96) !important;
    color: #0d2f62 !important;
    border: 0 !important;
    border-inline-start: 4px solid #1264c7 !important;
    border-radius: 8px !important;
    box-shadow: 0 14px 34px rgba(8,34,70,.16) !important;
    backdrop-filter: blur(8px) !important;
}
.route-about-show .ap-image-badge strong,
.route-about-show .ap-image-badge span {
    display: inline !important;
    margin: 0 !important;
    color: #0d2f62 !important;
    -webkit-text-fill-color: #0d2f62 !important;
    line-height: 1.2 !important;
}
.route-about-show .ap-image-badge strong {
    font-size: 1rem !important;
    font-weight: 800 !important;
}
.route-about-show .ap-image-badge span {
    font-size: .9rem !important;
    font-weight: 700 !important;
    opacity: .78 !important;
}

@media (max-width: 767.98px) {
    .route-faqs-index .faq-category-title {
        padding: 14px 15px !important;
    }
    .route-faqs-index .faq-category .accordion {
        padding-inline: 14px !important;
    }
    .route-about-show .ap-image-badge {
        inset-inline-start: 12px !important;
        bottom: 12px !important;
        max-width: calc(100% - 24px) !important;
        padding: 10px 13px !important;
    }
}

/* V17 — About page hero: exactly 70% of the visible viewport height. */
.route-about-show .ap-hero {
    height: 70vh !important;
    height: 70svh !important;
    height: 70dvh !important;
    min-height: 0 !important;
    max-height: 70dvh !important;
}
.route-about-show .ap-hero-bg,
.route-about-show .ap-hero-overlay {
    height: 100% !important;
}

@media (max-width: 767.98px) {
    .route-about-show .ap-hero {
        height: 70vh !important;
        height: 70svh !important;
        height: 70dvh !important;
        min-height: 0 !important;
        max-height: 70dvh !important;
    }
    .route-about-show .ap-hero-content {
        padding-bottom: clamp(28px, 7vh, 52px) !important;
    }
}

/* V37 — About hero content alignment: keep copy away from viewport edge. */
.route-about-show .ap-hero-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.route-about-show .ap-hero-content > .container {
    width: min(1180px, calc(100% - 96px)) !important;
    max-width: 1180px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
}

.route-about-show .ap-hero-content h1 {
    max-width: 680px !important;
}

@media (max-width: 991.98px) {
    .route-about-show .ap-hero-content > .container {
        width: calc(100% - 48px) !important;
    }
}

@media (max-width: 575.98px) {
    .route-about-show .ap-hero-content > .container {
        width: calc(100% - 32px) !important;
    }
}