/*
Theme Name:   Kadence Child - Charging Ahead for Children
Theme URI:    https://www.chargingaheadforchildren.org
Description:  Child theme for Charging Ahead for Children (Kadence parent theme)
Author:       Charging Ahead for Children
Template:     kadence
Version:      2.0.0
Text Domain:  cafc-kadence-child
*/

/* =======================================================
   DESIGN TOKENS
   ======================================================= */
:root{
    /* Brand color — matched to CAFC logo */
    --cafc-navy:        #0f2a5e;
    --cafc-navy-700:     #16357a;
    --cafc-blue:         #1f5fc4;
    --cafc-blue-100:     #eaf1fd;
    --cafc-gold:          #ffc72c;
    --cafc-gold-600:     #e6a800;
    --cafc-orange:       #f4832c;
    --cafc-orange-600:  #dd6a12;

    /* Neutrals (cool, matches blue brand) */
    --cafc-ink:           #14213d;
    --cafc-body:          #33415c;
    --cafc-muted:        #5b6b8c;
    --cafc-line:          #e2e8f5;
    --cafc-surface:      #f6f8fd;
    --cafc-white:        #ffffff;

    /* Spacing scale */
    --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px;  --sp-7: 48px; --sp-8: 64px;
    --sp-9: 96px; --sp-10: 128px;

    /* Type scale */
    --fs-caption: 0.8125rem;  /* 13px */
    --fs-small:   0.875rem;   /* 14px */
    --fs-body:    1.0625rem;  /* 17px */
    --fs-sub:     1.25rem;    /* 20px */
    --fs-h3:      1.5rem;     /* 24px */
    --fs-h2:      clamp(1.75rem, 3.5vw, 2.375rem); /* 28-38px */
    --fs-h1:      clamp(2.25rem, 5vw, 3.5rem);

    /* Radius */
    --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;

    /* Shadow */
    --shadow-1: 0 2px 8px rgba(15, 42, 94, 0.08);
    --shadow-2: 0 8px 24px rgba(15, 42, 94, 0.12);
    --shadow-3: 0 16px 40px rgba(15, 42, 94, 0.18);
}

/* =======================================================
   HEADER OVERRIDE — tighten Kadence's default main-header row
   padding so the header isn't taller than the logo/nav need.
   ======================================================= */
.site-header .main-header-container,
.site-header .site-header-row-container-inner {
    padding-top: var(--sp-3) !important;
    padding-bottom: var(--sp-3) !important;
}
/* Kadence's "content-vertical-padding-show" body class applies padding: 2rem
   to .entry-content-wrap, creating a dead gap above/below the page content —
   this site's sections already handle their own spacing via .cafc-hero/.cafc-section,
   so that extra padding just pushes the hero down below the header for no reason. */
.entry-content-wrap {
    padding: 0 !important;
}
/* FOUND IT (confirmed via live page source): Kadence enqueues assets/css/global.min.css
   AFTER this child stylesheet, so its .content-area{margin-top:5rem;margin-bottom:5rem}
   rule always wins on source order, no matter how many !important overrides are added here
   at matching specificity. Fix: raise specificity with the body tag so this wins regardless
   of load order. */
body .content-area,
html body .content-area {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* Safety net: remove any residual margin/border/box-shadow on the header and
   the elements directly wrapping page content, in case a thin gap persists
   from a source other than .entry-content-wrap's padding. */
.site-header,
#masthead,
#inner-wrap,
#primary,
.content-area,
#main,
.site-main,
.content-wrap,
article.entry {
    margin: 0 !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
.cafc-hero:first-child,
.entry-content > .cafc-hero:first-of-type {
    margin-top: 0 !important;
}

/* =======================================================
   BASE
   ======================================================= */
body {
    color: var(--cafc-body);
    font-size: var(--fs-body);
    line-height: 1.65;
}
h1, h2, h3, h4 {
    color: var(--cafc-navy);
    line-height: 1.2;
    font-weight: 800;
}
a { color: var(--cafc-blue); }
a:focus-visible, button:focus-visible, .cafc-btn:focus-visible {
    outline: 3px solid var(--cafc-gold);
    outline-offset: 2px;
}

.cafc-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--sp-5);
}

/* =======================================================
   BUTTONS
   ======================================================= */
.cafc-btn,
.wp-block-button__link {
    background: var(--cafc-orange);
    color: var(--cafc-white) !important;
    border-radius: var(--r-pill);
    padding: 1em 2.25em;
    font-weight: 800;
    font-size: var(--fs-body);
    text-decoration: none;
    display: inline-block;
    box-shadow: var(--shadow-1);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.cafc-btn:hover,
.wp-block-button__link:hover {
    background: var(--cafc-orange-600);
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    color: var(--cafc-white) !important;
}
.cafc-btn-gold {
    background: var(--cafc-gold);
    color: var(--cafc-navy) !important;
}
.cafc-btn-gold:hover {
    background: var(--cafc-gold-600);
    color: var(--cafc-navy) !important;
}
.cafc-btn-outline {
    background: transparent;
    border: 2px solid var(--cafc-white);
    color: var(--cafc-white) !important;
    box-shadow: none;
}
.cafc-btn-outline:hover {
    background: var(--cafc-white);
    color: var(--cafc-navy) !important;
}
.cafc-btn-lg {
    padding: 1.15em 2.75em;
    font-size: 1.15rem;
}
.cafc-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    justify-content: center;
    margin-top: var(--sp-6);
}

/* =======================================================
   HERO
   ======================================================= */
.cafc-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: radial-gradient(120% 140% at 20% 10%, var(--cafc-blue) 0%, var(--cafc-navy) 55%, var(--cafc-navy) 100%);
    color: var(--cafc-white);
    padding: var(--sp-9) var(--sp-5) var(--sp-8);
    text-align: center;
    overflow: hidden;
}
.cafc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 15%, rgba(255,199,44,0.25) 0%, transparent 45%),
        radial-gradient(circle at 8% 85%, rgba(244,131,44,0.18) 0%, transparent 40%);
    pointer-events: none;
}
.cafc-hero-inner {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
}
.cafc-hero-logo {
    max-width: 320px;
    width: 100%;
    height: auto;
    margin: 0 auto var(--sp-5);
    display: block;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.25));
}
.cafc-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.35);
    color: var(--cafc-gold);
    border-radius: var(--r-pill);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-caption);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--sp-5);
}
.cafc-hero h1 {
    color: var(--cafc-white);
    font-size: var(--fs-h1);
    margin: 0 0 var(--sp-3);
}
.cafc-hero-tagline {
    color: var(--cafc-gold);
    font-weight: 700;
    font-size: var(--fs-sub);
    font-style: italic;
    margin: 0 0 var(--sp-4);
}
.cafc-hero-tagline-img {
    max-width: 380px;
    width: 100%;
    height: auto;
    margin: 0 auto var(--sp-4);
    display: block;
}
.cafc-hero-lede {
    font-size: 1.2rem;
    max-width: 620px;
    margin: 0 auto;
    opacity: 0.95;
}

/* Smaller page-header variant (About / Contact / Donate / Get Involved) */
.cafc-hero-sm {
    padding: var(--sp-8) var(--sp-5) var(--sp-7);
}
.cafc-hero-sm h1 { font-size: clamp(2rem, 4vw, 2.75rem); }

/* Photo hero variant — layer a real photo behind the existing gradient once available.
   Usage: add class "cafc-hero-photo" to .cafc-hero and set --hero-photo via inline style,
   e.g. style="--hero-photo:url('/wp-content/uploads/hero-kids-soccer.jpg')" */
.cafc-hero-photo {
    padding-top: var(--sp-7);
    padding-bottom: var(--sp-7);
    background:
        linear-gradient(180deg, rgba(15,42,94,0.55) 0%, rgba(15,42,94,0.80) 55%, rgba(15,42,94,0.92) 100%),
        radial-gradient(circle at 85% 15%, rgba(255,199,44,0.30) 0%, transparent 45%),
        var(--hero-photo, none) center/cover no-repeat;
}

/* =======================================================
   IMAGE SLOTS (photo-ready placeholders)
   ======================================================= */
/* Generic responsive image frame used inside cards/sections.
   Drop a real <img> inside .cafc-img-frame once photography is available;
   until then .cafc-img-placeholder renders a labeled placeholder block
   in the same footprint so layout doesn't shift when photos are added. */
.cafc-img-frame {
    position: relative;
    width: 100%;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    background: var(--cafc-blue-100);
}
.cafc-img-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cafc-img-frame--wide   { aspect-ratio: 16 / 9; }
.cafc-img-frame--square { aspect-ratio: 1 / 1; }
.cafc-img-frame--tall   { aspect-ratio: 3 / 4; }

.cafc-img-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--sp-2);
    color: var(--cafc-navy-700);
    background:
        repeating-linear-gradient(135deg, var(--cafc-blue-100) 0px, var(--cafc-blue-100) 12px, #dde8fb 12px, #dde8fb 24px);
    font-size: var(--fs-small);
    font-weight: 700;
    text-align: center;
    padding: var(--sp-4);
}
.cafc-img-placeholder .cafc-img-placeholder-icon {
    font-size: 1.75rem;
}

/* Photo gallery strip (Home / About) */
.cafc-gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-3);
    margin-top: var(--sp-6);
}
@media (max-width: 900px) {
    .cafc-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .cafc-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* =======================================================
   SECTIONS
   ======================================================= */
.cafc-section {
    padding: var(--sp-7) var(--sp-5);
    max-width: 1120px;
    margin: 0 auto;
}
.cafc-section-tight { padding: var(--sp-7) var(--sp-5); }
.cafc-section-alt { background: var(--cafc-surface); border-radius: 10px; }
.cafc-section-navy {
    background: linear-gradient(135deg, var(--cafc-navy) 0%, var(--cafc-blue) 100%);
    color: var(--cafc-white);
    border-radius: 10px;
}
.cafc-section-navy h2, .cafc-section-navy h3 { color: var(--cafc-white); }
.cafc-section-wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--sp-5); }
.cafc-center { text-align: center; }

.cafc-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    color: var(--cafc-orange);
    font-size: var(--fs-caption);
    margin: 0 0 var(--sp-2);
}
.cafc-section-navy .cafc-eyebrow { color: var(--cafc-gold); }

.cafc-lede {
    font-size: 1.15rem;
    max-width: 620px;
    color: var(--cafc-body);
}
.cafc-section-navy .cafc-lede { color: rgba(255,255,255,0.92); }
.cafc-center .cafc-lede {
    margin-left: auto;
    margin-right: auto;
    max-width: 480px;
    text-wrap: balance;
}
.cafc-lede-wide {
    text-align: left;
    max-width: 620px;
    text-wrap: pretty;
}

/* =======================================================
   VALUES / FEATURE GRID
   ======================================================= */
.cafc-values-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-5);
    margin-top: var(--sp-6);
}
.cafc-values-grid > * {
    flex: 1 1 260px;
    max-width: 300px;
}
@media (max-width: 560px) {
    .cafc-values-grid > * { max-width: none; flex-basis: 100%; }
}
.cafc-value-card {
    background: var(--cafc-white);
    border: 1px solid var(--cafc-line);
    border-top: 4px solid var(--cafc-blue);
    border-radius: var(--r-lg);
    padding: var(--sp-6) var(--sp-5);
    box-shadow: var(--shadow-1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cafc-value-card:nth-child(3n+2) { border-top-color: var(--cafc-gold); }
.cafc-value-card:nth-child(3n+3) { border-top-color: var(--cafc-orange); }
.cafc-value-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
}
.cafc-value-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--r-md);
    background: var(--cafc-blue-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: var(--sp-4);
}
.cafc-value-card h3 {
    font-size: var(--fs-h3);
    margin: 0 0 var(--sp-2);
}
.cafc-value-card p { margin: 0; color: var(--cafc-muted); }
/* Optional photo variant: add .cafc-value-card--photo and a .cafc-img-frame at the top
   of the card (in place of / alongside .cafc-value-icon) once photography is available. */
.cafc-value-card--photo .cafc-img-frame { margin: calc(var(--sp-6) * -1) calc(var(--sp-5) * -1) var(--sp-4); width: auto; border-radius: var(--r-lg) var(--r-lg) 0 0; }

/* =======================================================
   STATS STRIP / IMPACT CARD
   Contained, rounded card (matches .cafc-callout treatment) rather than a
   full-bleed rectangle, so it reads as consistent with the rest of the page.
   ======================================================= */
.cafc-impact-card {
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    padding: var(--sp-7) var(--sp-6);
}
.cafc-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-6);
    text-align: center;
    margin-top: var(--sp-6);
}
.cafc-stats > div {
    position: relative;
    padding: 0 var(--sp-2);
}
.cafc-stats > div:not(:first-child)::before {
    content: "";
    position: absolute;
    left: calc(var(--sp-6) / -2 - 1px);
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: rgba(255, 255, 255, 0.22);
}
@media (max-width: 640px) {
    .cafc-stats { grid-template-columns: repeat(2, 1fr); }
    .cafc-stats > div:not(:first-child)::before { display: none; }
}
.cafc-stat-number {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 900;
    color: var(--cafc-gold);
    display: block;
    line-height: 1.15;
    margin-bottom: var(--sp-2);
    white-space: nowrap;
}
.cafc-stat-label {
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.85;
}

/* =======================================================
   CALLOUT / IMPACT BANNER
   ======================================================= */
.cafc-callout {
    background: linear-gradient(120deg, var(--cafc-gold) 0%, #ffd75e 100%);
    color: var(--cafc-navy);
    border-radius: var(--r-lg);
    padding: var(--sp-7) var(--sp-6);
    text-align: center;
    box-shadow: var(--shadow-2);
}
.cafc-callout h2, .cafc-callout h3 { color: var(--cafc-navy); }
.cafc-callout p {
    font-size: var(--fs-sub);
    font-weight: 700;
    max-width: 620px;
    margin: 0 auto;
}

/* =======================================================
   PATH / DUAL-AUDIENCE CARDS (Get Involved)
   ======================================================= */
.cafc-path-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-6);
    margin-top: var(--sp-6);
}
.cafc-path-card {
    background: var(--cafc-white);
    border: 1px solid var(--cafc-line);
    border-radius: var(--r-lg);
    padding: var(--sp-7) var(--sp-6);
    box-shadow: var(--shadow-1);
    text-align: left;
}
.cafc-path-card .cafc-eyebrow { margin-bottom: var(--sp-3); }
.cafc-path-card h3 { font-size: var(--fs-h2); margin: 0 0 var(--sp-3); }
.cafc-path-card p { color: var(--cafc-muted); margin: 0 0 var(--sp-5); }
.cafc-path-card .cafc-img-frame { margin-bottom: var(--sp-5); }
.cafc-path-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
}
.cafc-path-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }

/* =======================================================
   CONTACT / DONATE NOTES
   ======================================================= */
.cafc-ein-note {
    font-size: var(--fs-small);
    color: var(--cafc-muted);
    max-width: 560px;
    margin: var(--sp-5) auto 0;
}
.cafc-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: center;
    margin-top: var(--sp-5);
}
.cafc-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--cafc-blue-100);
    color: var(--cafc-navy-700);
    border-radius: var(--r-pill);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-small);
    font-weight: 700;
}

/* =======================================================
   SOCIAL ROW
   ======================================================= */
.cafc-social-row {
    display: flex;
    gap: var(--sp-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--sp-5);
}
.cafc-social-row a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    color: var(--cafc-white);
    text-decoration: none;
    font-weight: 700;
    border-radius: var(--r-pill);
    padding: var(--sp-3) var(--sp-5);
    transition: background 0.2s ease;
}
.cafc-social-row a:hover { background: rgba(255,255,255,0.22); }
.cafc-section:not(.cafc-section-navy) .cafc-social-row a,
.cafc-section-alt .cafc-social-row a {
    background: var(--cafc-white);
    border-color: var(--cafc-line);
    color: var(--cafc-navy-700);
    box-shadow: var(--shadow-1);
}
.cafc-section:not(.cafc-section-navy) .cafc-social-row a:hover,
.cafc-section-alt .cafc-social-row a:hover {
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}

/* =======================================================
   MOTION — subtle scroll-reveal + hero entrance
   Pairs with the tiny IntersectionObserver script enqueued in functions.php.
   Elements start hidden only once JS confirms it can animate them (see script),
   so content is never lost if JS fails to load.
   ======================================================= */
.cafc-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.cafc-reveal.cafc-in-view {
    opacity: 1;
    transform: translateY(0);
}
.cafc-reveal-stagger.cafc-in-view > * {
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.cafc-hero-inner {
    animation: cafc-hero-in 0.7s ease both;
}
@keyframes cafc-hero-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .cafc-reveal, .cafc-reveal.cafc-in-view {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .cafc-hero-inner { animation: none; }
    .cafc-value-card:hover, .cafc-path-card:hover, .wp-block-button__link:hover, .cafc-btn:hover {
        transform: none;
    }
}

/* =======================================================
   RESPONSIVE
   ======================================================= */
@media (max-width: 640px) {
    .cafc-hero { padding: var(--sp-8) var(--sp-4) var(--sp-7); }
    .cafc-section { padding: var(--sp-7) var(--sp-4); }
    .cafc-btn-row { flex-direction: column; align-items: stretch; }
    .cafc-btn-row .cafc-btn { text-align: center; }
    .cafc-path-card, .cafc-value-card { padding: var(--sp-5); }
}