/* =========================================================
   SmileAge — Global micro-interactions layer
   -----------------------------------------------------------
   Loaded LAST on every template, after every other stylesheet,
   so equal-specificity selectors here win the cascade against
   rules already in style.css / css/*.css without needing
   !important. That lets this one file do two things safely:

     1. Fill real hover/press gaps found in a full-site audit
        (buttons, cards and icons that had zero or partial
        feedback).
     2. Layer a small, consistent addition (mostly `scale()`) on
        top of hover effects that already exist and work well,
        WITHOUT re-declaring — and risking drifting from — their
        original color/shadow values. Where an existing rule's
        `transition` list is extended here, the original
        properties are restated alongside the new one so nothing
        already animating loses its transition.

   This file deliberately does NOT re-style the many components
   that are already polished (.sa-btn-sponsor, .sa-res-card,
   .pillar-item, .resource-item, .mot-team-card, the header nav
   underline, footer social icons, the [data-anim]/[data-count-to]
   scroll system in scroll-animate.css …) — duplicating those would
   only risk fighting hand-tuned values for no visual gain. (An
   earlier version of this note also listed .sa-cmp-card, .sa-prog-
   card and .sa-ev-card here — a full-site audit found they DO need
   an entry after all, just for the cascade conflict below, not a
   restyle; see section 3.)

   Effects: 200–400ms, ease-out (or the site's own bezier already
   in use). Transform / opacity / box-shadow / filter / color only
   — never a layout property — so nothing here can shift layout or
   affect responsiveness. Card/tile lift is reserved for elements
   that are actually clickable; purely informational tiles get a
   softer shadow-only cue instead of an implied action that isn't
   there. Every effect is disabled under prefers-reduced-motion.
   ========================================================= */

/* ---------- 0. Accessibility: respect reduced motion ----------
   Several existing hover transforms (e.g. the site-wide .btn:hover
   lift in style.css) don't check this preference yet; scroll-
   animate.css already does for the reveal/counter system. This
   closes the gap everywhere else by making transitions/animations
   instant rather than stripping transform values outright, so any
   static (non-animating) transform used for layout/positioning
   elsewhere is left completely untouched. */
   .footer-newsletter-form p {
    margin-bottom: 0px !important;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   1. Buttons
   ========================================================= */

/* .btn already has a polished lift+shadow hover/press pair in
   style.css (translateY(-3px) on hover, translateY(-1px) on
   :active, each with its own themed box-shadow already animating).
   We only ADD the "scale" cue the brief calls out — restating the
   translateY keeps the existing lift; box-shadow is left alone
   entirely since it isn't redeclared here. */
.btn:hover,
.btn:focus-visible,
.pf-btn:hover,
.pf-btn:focus-visible {
    transform: translateY(-3px) scale(1.03);
}

.btn:active,
.pf-btn:active {
    transform: translateY(-1px) scale(0.98);
    transition-duration: 0.12s;
}

/* Buttons / pill-links found with color-only (or no) hover
   feedback — add a matching lift + smooth transition without
   touching the colors each one already defines. */
.sa-gi-hero-ghost-btn,
.sa-inv-hero-ghost-btn,
.sa-inv-viewall,
.sa-inv-gov-tab,
.sa-csr-btn-outline,
.sa-csr-add-row-btn,
.sa-evd-btn-view-details,
.sa-ev-view-btn,
.sa-ev-tab,
.sa-evd-program-chip,
.sa-cmp-filter-chip,
.sa-prog-filter-chip,
.sa-imp-hero-btn-outline,
.sa-imp-prog-cta,
.sa-imp-event-cta,
.sa-imp-chip-opt,
.sa-imp-tab,
.sa-imp-gen-dl,
.sa-ra-source-link,
.sa-ra-author-linkedin,
.publication-button,
.pillar-button,
.resource-button,
.team-btn-linkedin,
.team-btn-knowmore {
    transition: color 0.22s ease-out, background-color 0.22s ease-out,
                border-color 0.22s ease-out, box-shadow 0.25s ease-out,
                transform 0.25s ease-out;
}

.sa-gi-hero-ghost-btn:hover,
.sa-inv-hero-ghost-btn:hover,
.sa-inv-viewall:hover,
.sa-inv-gov-tab:hover,
.sa-csr-btn-outline:hover,
.sa-csr-add-row-btn:hover,
.sa-evd-btn-view-details:hover,
.sa-ev-view-btn:hover,
.sa-ev-tab:hover,
.sa-evd-program-chip:hover,
.sa-cmp-filter-chip:hover,
.sa-prog-filter-chip:hover,
.sa-imp-hero-btn-outline:hover,
.sa-imp-prog-cta:hover,
.sa-imp-event-cta:hover,
.sa-imp-chip-opt:hover,
.sa-imp-tab:hover,
.sa-imp-gen-dl:hover,
.sa-ra-source-link:hover,
.sa-ra-author-linkedin:hover,
.publication-button:hover,
.pillar-button:hover,
.resource-button:hover,
.team-btn-linkedin:hover,
.team-btn-knowmore:hover {
    transform: translateY(-2px);
}

/* Plain text links with no transition at all today — smooth the
   color change already defined elsewhere; no lift (an inline text
   link nudging up on hover reads as a bug, not a feature). */
.sa-csr-back-link,
.sa-legal-card a,
.sa-ra-read-more,
.sa-vi-card-app-link {
    transition: color 0.2s ease-out;
}

/* Circular icon buttons (share / close / toggle) — gentle scale
   only, matching the site's existing icon-button idiom instead of
   a lift, since these sit on a circular hit target. */
.sa-cd-share-btn,
.sa-modal-close,
.sa-login-toggle-pass,
.sa-login-social-btn,
.sa-don-copy-btn,
.video-info-modal-close,
.sa-gi-touch-socials a {
    transition: color 0.2s ease-out, background-color 0.2s ease-out,
                border-color 0.2s ease-out, box-shadow 0.2s ease-out,
                transform 0.2s ease-out;
}

.sa-cd-share-btn:hover,
.sa-modal-close:hover,
.sa-login-toggle-pass:hover,
.sa-login-social-btn:hover,
.sa-don-copy-btn:hover,
.video-info-modal-close:hover,
.sa-gi-touch-socials a:hover {
    transform: scale(1.08);
}

.sa-cd-share-btn:active,
.sa-modal-close:active,
.sa-login-social-btn:active,
.sa-don-copy-btn:active,
.sa-gi-touch-socials a:active {
    transform: scale(0.95);
}

/* Named-gap fixes: these already change color/background on hover,
   but that specific property was missing from the transition list,
   so it used to snap instead of ease in. Restating the existing
   properties alongside it keeps everything animating together. */
.sa-ev-share-btn {
    transition: color 0.2s ease-out, border-color 0.2s ease-out,
                background-color 0.2s ease-out;
}

.sa-imp-progroup-head {
    transition: background-color 0.2s ease-out;
}

/* Parity fix: campaign-detail's donation-amount pill should feel
   like the near-identical, already-animated one in the sponsor
   modal (css/programs.css .sa-amount-pill). */
.sa-cd-amount-pill {
    transition: border-color 0.2s ease-out, background-color 0.2s ease-out,
                color 0.2s ease-out, transform 0.2s ease-out;
}
.sa-cd-amount-pill:hover {
    transform: translateY(-2px);
}

/* =========================================================
   2. Cards & tiles
   ========================================================= */

/* Genuinely clickable cards/rows that currently give zero hover
   feedback at all. */
.sa-inv-evidence-card,
.publication-item,
.sa-ra-card,
.sa-cd-program-link,
.sa-gallery-item {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out,
                border-color 0.3s ease-out, background-color 0.3s ease-out;
}

.sa-inv-evidence-card:hover,
.publication-item:hover,
.sa-ra-card:hover,
.sa-cd-program-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 1rem 2.25rem rgba(22, 33, 62, 0.12);
}

.sa-gallery-item:hover {
    box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.18);
}

/* .team-card itself isn't the click target (its "Know More" /
   LinkedIn buttons are) — a soft lift is still a reasonable cursor
   cue without overstating it like a full CTA card. */
.team-card {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
.team-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 1rem 2.25rem rgba(22, 33, 62, 0.1);
}

/* Static / informational tiles: no click target, so no lift — just
   a soft shadow deepen so the page still feels responsive to the
   cursor without implying an action that isn't there. */
.sa-imp-stat-tile,
.sa-imp-card,
.sa-imp-sdg-card,
.sa-inv-trustee-card,
.sa-inv-card,
.sa-don-qr-card,
.sa-gi-voice-card {
    transition: box-shadow 0.3s ease-out;
}

.sa-imp-stat-tile:hover,
.sa-imp-card:hover,
.sa-imp-sdg-card:hover,
.sa-inv-trustee-card:hover,
.sa-inv-card:hover,
.sa-don-qr-card:hover,
.sa-gi-voice-card:hover {
    box-shadow: 0 0.75rem 1.75rem rgba(22, 33, 62, 0.1);
}

/* Image zoom-on-hover — added only where the audit confirmed the
   image already sits inside an `overflow: hidden` wrapper, so the
   zoomed image can never spill past the card's rounded corner. */
.sa-cd-related-card img {
    transition: transform 0.4s ease-out;
}
.sa-cd-related-card:hover img {
    transform: scale(1.05);
}

.sa-ev-gallery-thumb img {
    transition: transform 0.4s ease-out;
}
.sa-ev-gallery-thumb:hover img {
    transform: scale(1.06);
}

.team-card-avatar img {
    transition: transform 0.4s ease-out;
}
.team-card:hover .team-card-avatar img {
    transform: scale(1.06);
}

/* Icon badges that sit inside an interactive parent but had no
   hover reaction of their own. */
.sa-prog-card-icon,
.sa-cd-program-link-icon,
.sa-modal-checkbox-icon {
    transition: transform 0.25s ease-out;
}
.sa-prog-card:hover .sa-prog-card-icon {
    transform: scale(1.08) rotate(-3deg);
}
.sa-cd-program-link:hover .sa-cd-program-link-icon {
    transform: scale(1.08);
}
.sa-modal-checkbox:hover .sa-modal-checkbox-icon {
    transform: scale(1.08);
}

/* .resource-tab-card's border-color swap on hover/active wasn't in
   its own transition list, so it used to snap. Restate the box-
   shadow/transform pair that's already there so nothing already
   animating loses its transition, and add border-color. */
.resource-tab-card {
    transition: box-shadow 0.3s ease-out, transform 0.3s ease-out,
                border-color 0.3s ease-out;
}

/* =========================================================
   3. Conflict fixes (animation audit)
   ========================================================= */

/* .theory-card (home page "Theory of Change" row) used to carry its own
   @keyframes entrance animation in style.css AND the shared
   [data-anim="zoom"] scroll-reveal — the CSS Animation always won
   regardless of scroll position, silently defeating the scroll-reveal.
   That legacy animation has been removed from style.css so [data-anim]
   now owns the entrance cleanly. One side effect: [data-anim]'s own
   `transition` (opacity/transform, css/scroll-animate.css) and
   .theory-card's original `transition` (transform/box-shadow/border-
   color, style.css) are equal specificity — since scroll-animate.css
   loads after style.css, its transition value was silently winning
   outright and dropping box-shadow/border-color from the animated
   list, so the hover lift's shadow/border used to snap instead of
   ease. Restating the full combined list here (this file loads last)
   fixes that without changing any color/shadow/timing value. */
.theory-card {
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s ease-out, border-color 0.3s ease-out;
}

/* .pf-row (home page "Fund a Program" cards) has the identical conflict:
   it carries [data-anim="left"/"right"] on the same element as its own
   hover lift (transform: translateY(var(--card-lift)) from --card-
   transition in style.css). Equal specificity + scroll-animate.css
   loading after style.css means [data-anim].sa-anim-in's `transform:
   translateX(0)` was silently winning once revealed, cancelling the
   lift outright rather than just snapping its easing — so these cards
   never got the pop/glow every other card on the site has. Restating
   the combined transition list (as above) plus the hover transform/
   box-shadow here (loaded last) restores it. border-color is left out
   on purpose: .pf-row-green/-orange already set it correctly in
   style.css and re-declaring it here would just re-race and undo that
   per-variant tint. */
.pf-row {
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s ease-out, border-color 0.3s ease-out;
}
.pf-row:hover {
    transform: translateY(var(--card-lift));
    box-shadow: var(--card-shadow-hover);
}

/* .event-item (home page "Show Up, Get Involved" events list) — same
   [data-anim="right"] vs hover-transform conflict again, this time on
   the event-list rows. Restating .event-item's own original hover
   values (not the shared --card-lift system; this component already
   had its own lift/shadow pair before [data-anim] existed) so they
   keep winning once revealed. */
.event-item {
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s ease;
}
.event-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 1.5rem 3rem rgba(16, 24, 40, 0.12);
}

/* Site-wide sweep: every class below has the identical [data-anim]-on-
itself conflict as the three above, found by auditing every `data-anim`
usage in every template against every `:hover{transform:...}` card rule
in style.css and the page-specific css/*.css files. Each block restates
only that class's own already-tuned transition list and hover values —
nothing is redesigned or unified to a single universal lift, so every
card keeps the exact look it already had; it just reliably reaches
.sa-anim-in elements now instead of losing the cascade tie. border-color
is included only where the class doesn't rely on a higher-specificity
per-variant rule elsewhere (checked individually — .sa-gi-way-card's
per-color hover shadows/borders stay in get-involved.css since those
selectors already outrank this one on specificity alone). */

.sa-prog-card {
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s ease, border-color 0.3s ease;
}
.sa-prog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sa-shadow-hover);
    border-color: rgba(47, 168, 120, 0.28);
}

.sa-cmp-card {
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s ease;
}
.sa-cmp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1.5rem 3rem rgba(22, 33, 62, 0.12);
}

.sa-ev-card {
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s ease;
}
.sa-ev-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sa-shadow-hover);
}

.sa-cd-related-card {
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s ease;
}
.sa-cd-related-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 1rem 2.5rem rgba(22, 33, 62, 0.1);
}

.abt-story-pillar {
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s ease-out;
}
.abt-story-pillar:hover {
    transform: translateY(-6px);
    box-shadow: 0 1.5rem 2.75rem rgba(16, 24, 40, 0.1);
}

.abt-mv-panel {
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s ease-out;
}
.abt-mv-panel:hover {
    transform: translateY(-6px);
    box-shadow: 0 2rem 3.75rem rgba(16, 24, 40, 0.14);
}

.sa-imp-prog-card,
.sa-imp-event-card {
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s ease;
}
.sa-imp-prog-card:hover,
.sa-imp-event-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 1.25rem 2.5rem rgba(22, 33, 62, 0.1);
}

.sa-imp-campaign-card {
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s ease;
}
.sa-imp-campaign-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 1rem 2.25rem rgba(22, 33, 62, 0.1);
}

.sa-imp-geo-card {
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s ease, border-color 0.2s ease;
}
.sa-imp-geo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(22, 33, 62, 0.08);
    border-color: var(--green, #2fa878);
}

.sa-imp-research-card {
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s ease;
}
.sa-imp-research-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(22, 33, 62, 0.08);
}

.sa-gi-way-card {
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s ease, border-color 0.25s ease;
}
.sa-gi-way-card:hover {
    transform: translateY(-6px);
}

.sa-inv-sponsor-row {
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s ease;
}
.sa-inv-sponsor-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 1rem 2.5rem rgba(22, 33, 62, 0.08);
}

.program-card {
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s ease-out, border-color 0.3s ease-out,
                background-color 0.3s ease-out;
}

/* style.css already has the full .program-card:hover treatment (this
   same background/shadow flip, plus the icon/title/text/link color
   remap needed to stay readable on it) correctly scoped to real hover
   with @media (hover: hover) and (pointer: fine). This duplicate,
   added here for the site-wide card-hover pass below, was missing that
   guard — so on a touch tap it fired on its own, flipping the card to
   a dark background while the icon/title/text/link stayed in their
   light-mode colors (nothing here remaps them), landing on low-contrast
   text with no way to undo it since touch has no mouse-leave. Matching
   the same guard here, instead of just deleting the duplicate, is what
   makes it a no-op rather than a maintenance trap the next time
   style.css's version changes and this one is forgotten again. */
@media (hover: hover) and (pointer: fine) {
    .program-card:hover {
        transform: translateY(var(--card-lift));
        box-shadow: 0 1.75rem 3.25rem rgba(22, 54, 42, 0.32);
        border-color: var(--green-dark);
        background-color: var(--green-dark);
    }
}

/* =========================================================
   4. Footer newsletter subscribe form
   ========================================================= */

/* The email field + Subscribe button in .footer-newsletter (shared
   across every page's footer) are rendered by the Mailchimp for WP
   plugin shortcode ([mc4wp_form id="2908"]) — its markup is configured
   in wp-admin, not static HTML in this theme, so it can't be
   restructured here. style.css already has a `.footer-newsletter-input`
   rule (confirming the field carries that class), but no matching
   button class exists — the button was likely left with no custom
   styling at all, which is the most likely cause of the reported
   misalignment. Targeting .mc4wp-form-fields (the plugin's own
   automatic wrapper — present regardless of how the field content was
   authored) plus element-type selectors for the input/button makes
   this resilient to the exact field markup rather than depending on
   a class that may or may not be there. */
.footer-newsletter .mc4wp-form-fields {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-newsletter  .footer-newsletter-form,
.footer-newsletter  .footer-newsletter-form p
{
    width: 100%;

}

.footer-newsletter .mc4wp-form-fields > * {
    margin: 0;
}

/* MC4WP's default form template wraps each field in its own <p> and
   prints a visible "Email Address" label above the input — neither is
   present in the intended design (the section heading already gives
   context, and the input carries a placeholder). A <p> wrapper is also
   what breaks the input's flex-sizing above, since flex-basis applies
   to the <p> itself rather than the input inside it, letting the field
   collapse to its natural width next to the button instead of sharing
   the row properly — this is the most likely cause of the reported
   misalignment. display:contents removes the <p> from the box model
   while keeping its child a real flex item; hiding the label is
   visual-only so screen readers still get it. */
.footer-newsletter .mc4wp-form-fields > p {
    display: contents;
}

.footer-newsletter .mc4wp-form-fields label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.footer-newsletter input[type="email"],
.footer-newsletter input[type="text"],
.footer-newsletter .footer-newsletter-input {
    box-sizing: border-box;
    flex: 1 1 220px;
    min-width: 0;
    width: 100%;
    height: 52px;
    padding: 0 1.1rem;
    border-radius: 0.6rem;
    font-size: 0.95rem;
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out,
                box-shadow 0.2s ease-out;
}

/* Accessible focus ring fallback — style.css's own .footer-newsletter-
   input:focus rule already provides one when that class is present;
   this covers the same field if it's ever unstyled/bare. */
.footer-newsletter input[type="email"]:focus,
.footer-newsletter input[type="text"]:focus {
    outline: none;
    border-color: var(--green-soft, #7fd6ae);
    box-shadow: 0 0 0 0.2rem rgba(127, 214, 174, 0.25);
}

.footer-newsletter input[type="submit"],
.footer-newsletter button[type="submit"],
.footer-newsletter .mc4wp-form-fields button {
    box-sizing: border-box;
    flex: 0 0 auto;
    height: 52px;
    padding: 0 1.75rem;
    border: none;
    border-radius: 0.6rem;
    background-color: var(--orange, #ee6518);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 0.5rem 1.25rem rgba(238, 101, 24, 0.3);
    transition: background-color 0.25s ease-out, transform 0.25s ease-out,
                box-shadow 0.25s ease-out;
}

.footer-newsletter input[type="submit"]:hover,
.footer-newsletter button[type="submit"]:hover,
.footer-newsletter .mc4wp-form-fields button:hover {
    background-color: var(--orange-hover, #ca5614);
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 0.65rem 1.5rem rgba(238, 101, 24, 0.4);
}

.footer-newsletter input[type="submit"]:active,
.footer-newsletter button[type="submit"]:active,
.footer-newsletter .mc4wp-form-fields button:active {
    transform: translateY(0) scale(0.98);
}

.footer-newsletter input[type="submit"]:focus-visible,
.footer-newsletter button[type="submit"]:focus-visible,
.footer-newsletter .mc4wp-form-fields button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Tablet and up: the form column is comfortably wide enough (Bootstrap
   only stacks .col-lg-5 to full width below 992px, still plenty of
   room for one row) to keep email + button side by side. Only true
   mobile widths stack them, full-width, per the brief. */
@media (max-width: 575.98px) {
    .footer-newsletter .mc4wp-form-fields,
    .footer-newsletter form {
        flex-direction: column;
        align-items: stretch;
    }

    .footer-newsletter input[type="email"],
    .footer-newsletter input[type="text"],
    .footer-newsletter .footer-newsletter-input,
    .footer-newsletter input[type="submit"],
    .footer-newsletter button[type="submit"],
    .footer-newsletter .mc4wp-form-fields button {
        width: 100%;
        flex: 1 1 auto;
    }
}

/* =========================================================
   5. Unified card/tile hover system
   -----------------------------------------------------------
   A full-site audit found every clickable card on the site doing
   SOME kind of hover (lift and/or shadow and/or border-color), but
   only one component (.program-card, homepage) did the fuller
   treatment: background flips to a solid themed color AND every
   text/icon child remaps to a light color so it stays readable. This
   section makes that the standard for every genuinely clickable
   card/tile site-wide — each keeping its OWN existing accent color
   (a green card still goes green, orange stays orange) rather than
   forcing one universal color, since the colors already carry meaning
   (program identity, event type, etc.).

   Two-tier system, matching what the site already mostly does and
   now makes deliberate:
     - CLICKABLE cards/tiles (wrapped in a link, or containing a CTA
       that IS the point of the card) -> lift + shadow + background-
       color flip + text/icon remap. This section.
     - INFORMATIONAL tiles (no link, nothing to click) -> shadow only,
       no lift, no color flip — a lift/flip on something you can't
       click implies an action that isn't there. See section 6b below.

   Where a card's color variant lives on a CHILD element rather than
   the card itself (e.g. .sa-cmp-card's color only exists on its
   `.sa-cmp-card-tag-green` child, not on `.sa-cmp-card` itself),
   `:has()` targets the parent by its child instead of requiring an
   HTML change to add a card-level modifier class.

   Dark-fill colors reuse each accent's existing "-dark"/"-hover"
   token (var(--green-dark), var(--orange-hover), etc.) with an
   explicit fallback hex so this still works if a page's stylesheet
   doesn't happen to declare that custom property. */

/* ---------- pf-row (homepage "Fund a Program" cards) ---------- */
.pf-row-green:hover {
    border-color: var(--green-dark, #16362a);
}
.pf-row-orange:hover {
    border-color: var(--orange-hover, #ca5614);
}

/* .pf-title's underline is a ::after pseudo-element with its own
   background-color (var(--navy-heading)) — text-color remaps never
   reach pseudo-elements, so this needed its own explicit override or
   it stays a near-invisible dark navy bar on the hover fill. */
.pf-row-green:hover .pf-title::after,
.pf-row-orange:hover .pf-title::after {
    background-color: rgba(255, 255, 255, 0.6);
}

/* ---------- mot-team-card (Meet the Team, JS-rendered) ----------
   Already exposes its accent as --mot-team-accent (set by
   .mot-team-green/.mot-team-orange) — reuse it instead of
   duplicating the green/orange split. */


/* ---------- sa-cd-related-card (Campaign Detail — related campaigns) ---------- */
.sa-cd-related-card:hover {
    background-color: var(--green-dark, #16362a);
}
.sa-cd-related-card:hover .sa-cd-related-card-body h3,
.sa-cd-related-card:hover .sa-cd-related-meta {
    color: #fff;
}
.sa-cd-related-card:hover .sa-cd-related-meta {
    color: rgba(255, 255, 255, 0.75);
}

/* ---------- sa-cd-program-link (Campaign Detail — "Supports: ...") ---------- */
.sa-cd-program-link:hover {
    background-color: var(--green-dark, #16362a);
}
.sa-cd-program-link:hover .sa-cd-program-link-text strong,
.sa-cd-program-link:hover .sa-cd-program-link-text span,
.sa-cd-program-link:hover > i {
    color: #fff;
}
.sa-cd-program-link:hover .sa-cd-program-link-icon {
    background-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* ---------- sa-cmp-card (Campaigns hub) — accent lives on a child tag ---------- */
.sa-cmp-card:has(.sa-cmp-card-tag-green):hover { background-color: var(--green-dark, #16362a); }
.sa-cmp-card:has(.sa-cmp-card-tag-purple):hover { background-color: var(--green-icon-bg, #245741); }
.sa-cmp-card:has(.sa-cmp-card-tag-orange):hover { background-color: var(--orange-hover, #ca5614); }
.sa-cmp-card:hover .sa-cmp-card-body h3,
.sa-cmp-card:hover .sa-cmp-card-body p,
.sa-cmp-card:hover .sa-cmp-card-meta strong,
.sa-cmp-card:hover .sa-cmp-card-meta span,
.sa-cmp-card:hover .sa-cmp-card-foot {
    color: #fff;
}
.sa-cmp-card:hover .sa-cmp-card-body p,
.sa-cmp-card:hover .sa-cmp-card-meta span {
    color: rgba(255, 255, 255, 0.78);
}
/* .sa-cmp-card-foot's own color:#fff (above) doesn't reach this icon
   — it keeps its explicit green, which reads fine on the green
   variant but clashes on the purple/orange ones. */
.sa-cmp-card:hover .sa-cmp-card-foot i {
    color: #fff;
}

/* ---------- sa-ev-card (Events archive / All Events) ---------- */


/* ---------- sa-imp-prog-card / sa-imp-event-card (Impact page) —
   accent lives on the child .sa-imp-stat-icon-* badge ---------- */
.sa-imp-prog-card:has(.sa-imp-stat-icon-green):hover,
.sa-imp-event-card:has(.sa-imp-stat-icon-green):hover { background-color: var(--green-dark, #16362a); }
.sa-imp-prog-card:has(.sa-imp-stat-icon-purple):hover,
.sa-imp-event-card:has(.sa-imp-stat-icon-purple):hover { background-color: var(--green-icon-bg, #245741); }
.sa-imp-prog-card:has(.sa-imp-stat-icon-orange):hover,
.sa-imp-event-card:has(.sa-imp-stat-icon-orange):hover { background-color: var(--orange-hover, #ca5614); }
.sa-imp-prog-card:has(.sa-imp-stat-icon-blue):hover,
.sa-imp-event-card:has(.sa-imp-stat-icon-blue):hover { background-color: var(--green-icon-bg, #245741); }
.sa-imp-prog-card:hover .sa-imp-prog-name,
.sa-imp-event-card:hover .sa-imp-event-name,
.sa-imp-prog-card:hover .sa-imp-prog-desc,
.sa-imp-prog-card:hover .sa-imp-prog-stats strong,
.sa-imp-prog-card:hover .sa-imp-prog-stats span,
.sa-imp-event-card:hover .sa-imp-event-meta {
    color: #fff;
}
.sa-imp-prog-card:hover .sa-imp-prog-desc,
.sa-imp-prog-card:hover .sa-imp-prog-stats span,
.sa-imp-event-card:hover .sa-imp-event-meta {
    color: rgba(255, 255, 255, 0.78);
}
.sa-imp-event-card:hover .sa-imp-event-meta i {
    color: #fff;
}

/* ---------- sa-imp-campaign-card (Impact page) — accent on the
   child progress-fill ---------- */
.sa-imp-campaign-card:has(.sa-imp-fill-green):hover { background-color: var(--green-dark, #16362a); }
.sa-imp-campaign-card:has(.sa-imp-fill-purple):hover { background-color: var(--green-icon-bg, #245741); }
.sa-imp-campaign-card:has(.sa-imp-fill-orange):hover { background-color: var(--orange-hover, #ca5614); }
.sa-imp-campaign-card:hover h4,
.sa-imp-campaign-card:hover .sa-imp-campaign-meta strong,
.sa-imp-campaign-card:hover .sa-imp-campaign-meta span {
    color: #fff;
}
.sa-imp-campaign-card:hover .sa-imp-campaign-meta span {
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- sa-imp-geo-card (Impact page — geo modal trigger) ---------- */
.sa-imp-geo-card:hover {
    background-color: var(--green-dark, #16362a);
}
.sa-imp-geo-card:hover .sa-imp-geo-name,
.sa-imp-geo-card:hover .sa-imp-geo-sub {
    color: #fff;
}
.sa-imp-geo-card:hover .sa-imp-geo-sub {
    color: rgba(255, 255, 255, 0.78);
}
.sa-imp-geo-card:hover .sa-imp-geo-icon {
    background-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* ---------- sa-imp-research-card (Impact page) — accent on the
   child type tag ---------- */
.sa-imp-research-card:has(.sa-imp-research-tag-research):hover { background-color: var(--green-dark, #16362a); }
.sa-imp-research-card:has(.sa-imp-research-tag-blog):hover { background-color: var(--green-icon-bg, #245741); }
.sa-imp-research-card:has(.sa-imp-research-tag-news):hover { background-color: var(--green-icon-bg, #245741); }
.sa-imp-research-card:has(.sa-imp-research-tag-article):hover { background-color: var(--orange-hover, #ca5614); }
.sa-imp-research-card:hover h3,
.sa-imp-research-card:hover p {
    color: #fff;
}
.sa-imp-research-card:hover p {
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- sa-inv-sponsor-row (Invest / Our Work — sponsorship rows) —
   accent on the child icon ---------- */
.sa-inv-sponsor-row:has(.sa-inv-sponsor-icon-green):hover { border-color: var(--green-dark, #16362a); }
.sa-inv-sponsor-row:has(.sa-inv-sponsor-icon-green-dark):hover { border-color: var(--green-dark, #16362a); }
.sa-inv-sponsor-row:has(.sa-inv-sponsor-icon-orange):hover { border-color: var(--orange-hover, #ca5614); }

/* ---------- sa-res-card (Research & Knowledge Hub) — accent on the
   child type tag ---------- */
.sa-res-card:not(:has(.sa-res-type-tag-blog)):hover { border-color: var(--green-dark, #16362a); }
/* Same nested-icon miss as .sa-prog-card-text above: this icon keeps
   its own explicit near-black color unless targeted directly — at
   35% opacity it would be nearly invisible on the dark hover fill. */
.sa-res-card:hover .sa-res-card-author i {
    color: rgba(255, 255, 255, 0.6);
}

/* =========================================================
   6b. Informational tiles — normalized to shadow-only
   -----------------------------------------------------------
   These have no link and nothing to click, so per the two-tier
   system above they should NOT get the lift/color-flip treatment
   (that implies an action that isn't there) — but several had
   accumulated a card-style lift (and in two cases a border-color
   change) anyway. Overriding their :hover down to shadow-only here,
   consistent with the tiles that were already correct
   (.sa-imp-stat-tile, .sa-imp-card, .sa-don-qr-card, etc.). */
.theory-card:hover,
.abt-story-pillar:hover,
.abt-mv-panel:hover,
.mot-partner-card:hover,
.sa-gi-hero-partner-card:hover,
.sa-inv-roadmap-card:hover,
.sa-inv-bento-tile:hover,
.sa-evd-volunteer-chip:hover {
    transform: none;
}
/* Only these two actually changed border-color on hover before —
   restated to their own base (non-hover) value so hovering no longer
   changes it at all, instead of the imprecise `border-color: inherit`
   (which would pull an unrelated color from the parent element). The
   other six in the group above never touched border-color, so they
   need no border fix here. */
.theory-card:hover { border-color: rgba(28, 27, 23, 0.08); }
.sa-gi-hero-partner-card:hover { border-color: rgba(255, 255, 255, 0.2); }
.theory-card:hover { box-shadow: 0 0.75rem 1.75rem rgba(22, 33, 62, 0.1); }
.abt-story-pillar:hover { box-shadow: 0 0.75rem 1.75rem rgba(16, 24, 40, 0.08); }
.abt-mv-panel:hover { box-shadow: 0 1rem 2rem rgba(16, 24, 40, 0.1); }
.mot-partner-card:hover { box-shadow: 0 0.75rem 1.75rem rgba(22, 33, 62, 0.1); }
.sa-gi-hero-partner-card:hover { box-shadow: 0 0.75rem 75rem rgba(22, 33, 62, 0.1); }
.sa-inv-roadmap-card:hover { box-shadow: 0 0.75rem 1.75rem rgba(22, 33, 62, 0.1); }
.sa-inv-bento-tile:hover { box-shadow: 0 0.75rem 1.75rem rgba(22, 33, 62, 0.1); }
.sa-evd-volunteer-chip:hover { box-shadow: 0 0.5rem 1.25rem rgba(22, 33, 62, 0.1); }

/* Static content panel (Abstract/Methodology/Key Findings on a
   research article), not a link — was getting a clickable-card lift
   by mistake. Same normalization as the informational tiles above. */
.sa-ra-card:hover {
    transform: none;
    box-shadow: 0 0.75rem 1.75rem rgba(22, 33, 62, 0.1);
}

/* =========================================================
   6c. Button lift/scale stragglers
   -----------------------------------------------------------
   .btn/.pf-btn already standardized on translateY(-3px) scale(1.03)
   (section 1, top of file). These CTA-style buttons had their own,
   different hover (lift-only, or a smaller/larger lift, or a
   filter:brightness darken instead of a scale) — bringing them in
   line so every real button behaves the same way. Their existing
   color/background hover (where they have one) is left alone; only
   the transform is added/changed. */
.sa-btn-sponsor,
.sa-res-btn-read,
.mv-btn,
.fnd-btn-outline,
.fnd-btn-primary,
.footer-social-icon {
    transition: color 0.2s ease-out, background-color 0.2s ease-out,
                border-color 0.2s ease-out, box-shadow 0.25s ease-out,
                transform 0.25s ease-out;
}
.sa-btn-sponsor:hover,
.sa-res-btn-read:hover,
.mv-btn:hover,
.fnd-btn-outline:hover,
.fnd-btn-primary:hover,
.footer-social-icon:hover {
    transform: translateY(-3px) scale(1.03);
}