@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --forest-900:#16302A;
  --forest-700:#234B3D;
  --forest-500:#3C6E58;
  --clay-600:#B85333;
  --clay-700:#96421F;
  --paddy-100:#E9EEDD;
  --paper-50:#FBFAF4;
  --ink-900:#211E17;
  --ink-500:#6E6A5C;
  --brass-400:#C4922E;
  --line-100:#DEDFCB;
  --body-font:'Work Sans',system-ui,sans-serif;

  /* Back-compat aliases: some older markup/JS still refers to the previous
     token names. Point them at the new palette so nothing silently reverts. */
  --teal-900:var(--forest-900);
  --teal-700:var(--forest-700);
  --teal-500:var(--forest-500);
  --marigold-500:var(--clay-600);
  --marigold-600:var(--clay-700);
  --sand-50:var(--paddy-100);
  --sand-100:var(--line-100);
}

/* "Classic" theme preset — the original teal/marigold look, kept available
   and switchable any time from Settings → Appearance → Theme Preset. */
[data-theme="classic"]{
  --forest-900:#0F3634;
  --forest-700:#1F5F5B;
  --forest-500:#2E8A83;
  --clay-600:#E08E3E;
  --clay-700:#C97324;
  --paddy-100:#F6F4EC;
  --paper-50:#F6F4EC;
  --ink-900:#1C2321;
  --ink-500:#5B6663;
  --brass-400:#E08E3E;
  --line-100:#EDEADB;
  --body-font:'Inter',system-ui,sans-serif;
}

*{box-sizing:border-box;}
body{background:var(--bg-color,var(--paper-50));font-family:var(--body-font);color:var(--ink-900);}
h1,h2,h3{font-family:'Fraunces',serif;color:var(--forest-900);}
p{line-height:1.7;}
a{color:var(--forest-700);text-decoration:none;}
::selection{background:var(--clay-600);color:#fff;}
:focus-visible{outline:2px solid var(--clay-600);outline-offset:2px;}
.bg-sand{background:var(--paddy-100);}

/* Buttons — admin-configurable tokens (--btn-bg/--btn-text/--btn-radius/
   --primary-color/--secondary-color) are set inline in site-header.php from
   Settings; defaults there should match this palette. */
.btn{font-weight:600;padding:.6rem 1.35rem;}
.btn-primary{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-text);border-radius:var(--btn-radius);}
.btn-primary:hover{filter:brightness(.9);background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-text);}
.btn-marigold{background:var(--secondary-color);border-color:var(--secondary-color);color:#fff;font-weight:600;border-radius:var(--btn-radius);}
.btn-marigold:hover{filter:brightness(.92);background:var(--secondary-color);border-color:var(--secondary-color);color:#fff;}
.btn-outline-primary{color:var(--primary-color);border-color:var(--primary-color);border-radius:var(--btn-radius);}
.btn-outline-primary:hover{background:var(--primary-color);border-color:var(--primary-color);}
.btn-outline-light{border-radius:var(--btn-radius);border-width:1.5px;}

/* Topbar + header */
.topbar{background:var(--forest-900);color:rgba(255,255,255,.85);font-size:.85rem;padding:.4rem 0;}
.topbar a{color:rgba(255,255,255,.85);}
.site-header{background:var(--paper-50);border-bottom:1px solid var(--line-100);position:sticky;top:0;z-index:1000;}
.brand-mark{color:var(--clay-600);font-size:1.4rem;}
.brand-name{font-family:'Fraunces',serif;font-weight:700;font-size:1.15rem;color:var(--forest-900);}
.brand-tagline{color:var(--ink-500);font-size:.72rem;}
.main-nav .nav-link{color:var(--ink-900);font-weight:500;padding:.5rem .9rem;}
.main-nav .nav-link:hover{color:var(--forest-700);}

/* Hero: full-bleed photo, caption sits on a solid panel overlapping the edge */
.hero-slider{position:relative;}
.hero-slider .carousel-item img{height:82vh;min-height:460px;object-fit:cover;}
.hero-slider .carousel-item:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(22,48,42,.55) 0%,rgba(22,48,42,.08) 55%);}
.hero-slider .carousel-caption{right:auto;bottom:3rem;left:0;top:auto;transform:none;text-align:left;max-width:none;padding:0 0 0 5%;}
.hero-slider .hero-panel{background:var(--paper-50);border-left:6px solid var(--clay-600);max-width:34rem;padding:1.75rem 2rem;box-shadow:0 18px 40px rgba(22,48,42,.28);}
.hero-slider .hero-panel h1{color:var(--forest-900);}
.hero-slider .hero-panel p{color:var(--ink-500);}
.hero-slider .hero-panel--on-dark{background:rgba(22,48,42,.72);backdrop-filter:blur(2px);border-left-color:var(--brass-400);}
.hero-slider .hero-panel--on-dark h1{color:#fff;}
.hero-slider .hero-panel--on-dark p{color:rgba(255,255,255,.82);}
.hero-slider .hero-panel--on-dark .btn-outline-primary{color:#fff;border-color:#fff;}
.hero-slider .hero-panel--on-dark .btn-outline-primary:hover{background:#fff;color:var(--forest-900);}
.hero-slider h1{font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:700;line-height:1.12;margin-bottom:.5rem;}
.hero-slider p{margin-bottom:1.1rem;}
.hero-slider .btn{margin-right:.5rem;}
@media (max-width: 767px){
  .hero-slider .carousel-caption{padding:0 4%;bottom:1.5rem;}
  .hero-slider .hero-panel{max-width:none;padding:1.25rem 1.35rem;border-left-width:4px;}
}

/* Section rhythm */
section{padding:4.5rem 0;}
.section-title{font-weight:700;font-size:clamp(1.6rem,2.6vw,2.2rem);text-align:center;color:var(--forest-900);}
.section-subtitle{color:var(--ink-500);text-align:center;max-width:560px;margin:.4rem auto 0;}

/* About */
.section-about{padding:5.5rem 0;background:linear-gradient(90deg,var(--paper-50) 0%,var(--paper-50) 62%,var(--paddy-100) 62%);overflow:hidden;}
.about-shell{position:relative;}
.about-shell:before{content:"";position:absolute;left:-6rem;bottom:-4.5rem;width:15rem;height:15rem;border-radius:50%;background:var(--paddy-100);opacity:.8;z-index:0;}
.about-shell .row{--bs-gutter-y:2.5rem;position:relative;z-index:1;}
.about-media{position:relative;max-width:34rem;padding:0 1.5rem 1.5rem 0;}
.about-media:before{content:"";position:absolute;inset:1.25rem 0 0 1.25rem;background:var(--forest-900);border-radius:.4rem;}
.about-photo-wrap{position:relative;overflow:hidden;border-radius:.4rem;box-shadow:0 22px 45px rgba(22,48,42,.2);}
.section-about img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .45s ease;}
.about-media:hover img{transform:scale(1.035);}
.about-media-note{position:absolute;right:-.35rem;bottom:0;display:flex;align-items:center;gap:.65rem;padding:.8rem 1rem;background:var(--paper-50);border-radius:.35rem;box-shadow:0 12px 28px rgba(22,48,42,.18);color:var(--forest-900);font-family:'Fraunces',serif;font-weight:600;font-size:.92rem;line-height:1.2;}
.about-media-note i{color:var(--clay-600);font-size:1.05rem;}
.about-copy{padding:1rem 0 1rem 1.25rem;}
.section-about h2{margin:0 0 1rem;font-size:clamp(2.1rem,3.4vw,3.1rem);line-height:1.08;}
.section-about p{max-width:33rem;margin:0 0 1.35rem;font-size:1.05rem;line-height:1.75;color:var(--ink-500);}
.about-focus{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.75rem;}
.about-focus span{border:1px solid var(--line-100);border-radius:.3rem;padding:.42rem .75rem;color:var(--forest-700);font-size:.82rem;font-weight:600;background:var(--paper-50);}
.about-cta{padding:.72rem 1.25rem;}
@media (max-width:991.98px){.section-about{padding:4rem 0;background:linear-gradient(180deg,var(--paper-50) 0%,var(--paper-50) 58%,var(--paddy-100) 58%);}.about-media{max-width:none;margin:0 auto;padding-right:1.2rem;}.about-copy{padding:0;max-width:34rem;}.section-about img{aspect-ratio:16/10;}}
@media (max-width:575.98px){.section-about{padding:3.5rem 0;}.about-media{padding-right:.8rem;padding-bottom:.8rem;}.about-media:before{inset:.8rem 0 0 .8rem;}.about-media-note{right:-.1rem;padding:.65rem .8rem;font-size:.8rem;}.section-about h2{font-size:2rem;}.section-about p{font-size:.98rem;}.about-focus{margin-bottom:1.35rem;}}

/* Mission cards */
.mission-card{background:var(--paper-50);border:1px solid var(--line-100);border-radius:.4rem;padding:1.6rem;height:100%;}
.mission-icon{font-size:1.8rem;color:var(--clay-600);display:block;margin-bottom:.6rem;}

/* Stats */
.section-stats{background:var(--forest-900);color:#fff;}
.section-stats .section-title{color:#fff;}
.stat-counter{font-family:'Fraunces',serif;font-size:2.4rem;font-weight:700;color:var(--brass-400);}
.stat-counter-label{color:rgba(255,255,255,.75);font-size:.9rem;}

/* Cards: programs / news / activities / stories / events */
.card-link{color:inherit;display:block;}
.program-card,.news-card,.activity-card,.story-card{background:var(--paper-50);border-radius:.4rem;overflow:hidden;border:1px solid var(--line-100);height:100%;transition:border-color .15s ease,transform .15s ease;}
.program-card:hover,.news-card:hover,.activity-card:hover,.story-card:hover{transform:translateY(-3px);border-color:var(--clay-600);}
.program-card img,.news-card img,.activity-card img,.story-card img{width:100%;height:190px;object-fit:cover;}
.badge-cat{background:var(--paddy-100);color:var(--forest-700);font-size:.72rem;padding:.2rem .55rem;border-radius:.3rem;}

.event-card{display:flex;gap:1rem;background:var(--paper-50);border:1px solid var(--line-100);border-radius:.4rem;padding:1rem;height:100%;color:inherit;}
.event-date{background:var(--forest-700);color:#fff;border-radius:.35rem;padding:.5rem .9rem;text-align:center;min-width:64px;}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;}
.gallery-grid img{width:100%;height:180px;object-fit:cover;border-radius:.35rem;}
@media (max-width:767px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}

/* Team */
.team-photo{width:130px;height:130px;object-fit:cover;border-radius:50%;border:3px solid var(--line-100);}

/* Testimonials */
.testimonial-card{max-width:640px;}
.testimonial-photo{width:70px;height:70px;border-radius:50%;object-fit:cover;margin-bottom:.8rem;}

/* Partners */
.partner-strip{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center;align-items:center;}
.partner-logo img{height:48px;filter:grayscale(1);opacity:.7;transition:opacity .15s;}
.partner-logo:hover img{opacity:1;filter:none;}

/* Working areas — a simple, information-dense list rather than a decorated
   card grid: each district is real ground this org actually covers. */
.area-list{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;}
.area-chip{display:flex;align-items:center;gap:.5rem;background:var(--paper-50);border:1px solid var(--line-100);border-radius:2rem;padding:.55rem 1.1rem .55rem .8rem;}
.area-chip i{color:var(--clay-600);}
.area-chip strong{font-weight:600;color:var(--forest-900);}
.area-chip span{color:var(--ink-500);font-size:.85rem;}

/* Inner page banner + rich content body (used by About, Programs, generic Pages) */
.page-banner{background:var(--forest-900);color:#fff;}
.page-banner h1{color:#fff;}
.content-body{line-height:1.75;}
.content-body img{max-width:100%;height:auto;border-radius:.4rem;}
.content-body h2,.content-body h3{margin-top:1.5rem;}

/* Footer */
.site-footer{background:var(--forest-900);}
.site-footer a{color:rgba(255,255,255,.75);}
.site-footer a:hover{color:#fff;}

/* Mobile main menu — full-height slide-in panel from the right */
.mobile-nav-panel{background:var(--forest-900);color:#fff;width:min(340px,86vw);}
.mobile-nav-panel .offcanvas-header{border-bottom:1px solid rgba(255,255,255,.12);padding:1rem 1.1rem;}
.mobile-nav-panel .offcanvas-header .brand-name{color:#fff;}
.mobile-nav-panel .offcanvas-header .brand-tagline{color:rgba(255,255,255,.65);}
.mobile-nav-panel .btn-close{filter:invert(1) grayscale(1) brightness(2);opacity:.85;}
.mobile-nav-panel .offcanvas-body{padding:.5rem 0;}
.mnav-row{display:flex;align-items:stretch;border-bottom:1px solid rgba(255,255,255,.08);}
.mnav-link{flex:1;display:flex;align-items:center;padding:.85rem 1.25rem;color:#fff;font-weight:600;text-decoration:none;}
.mnav-link:hover{color:var(--brass-400);}
.mnav-arrow{border:none;background:transparent;width:52px;display:flex;align-items:center;justify-content:center;color:#fff;}
.mnav-arrow .mnav-arrow-badge{width:26px;height:26px;border-radius:.3rem;background:var(--clay-600);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.75rem;transition:transform .2s;}
.mnav-arrow[aria-expanded="true"] .mnav-arrow-badge{transform:rotate(90deg);}
.mnav-submenu{background:rgba(0,0,0,.18);}
.mnav-submenu .mnav-link{padding:.65rem 1.25rem .65rem 2.1rem;font-weight:500;font-size:.92rem;}
.mnav-extra{padding:1rem 1.25rem;}
.mnav-extra .btn-marigold{display:block;width:100%;text-align:center;}

/* ------------------------------------------------------------------
   Effects: scroll-reveal, hero entrance, image hover-zoom
   ------------------------------------------------------------------ */
.reveal-init{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;}
.reveal-init.is-visible{opacity:1;transform:none;}

.hero-panel.hero-panel-in{animation:heroPanelIn .7s ease forwards;}
@keyframes heroPanelIn{ from{opacity:0;transform:translateY(18px);} to{opacity:1;transform:translateY(0);} }

@media (prefers-reduced-motion: reduce){
  .reveal-init{opacity:1 !important;transform:none !important;transition:none !important;}
  .hero-panel.hero-panel-in{animation:none !important;}
}

/* Image hover-zoom: cards already clip overflow, so scaling the image on
   hover reads as a clean zoom rather than spilling outside the card. */
.program-card,.news-card,.activity-card,.story-card{overflow:hidden;}
.program-card img,.news-card img,.activity-card img,.story-card img,.gallery-grid img{transition:transform .5s ease;}
.program-card:hover img,.news-card:hover img,.activity-card:hover img,.story-card:hover img,.gallery-grid a:hover img{transform:scale(1.08);}
.gallery-grid a{display:block;overflow:hidden;border-radius:.35rem;}
.gallery-grid img{border-radius:0;}