/*
  css/site.css: styles shared by every page (tokens, nav, footer, buttons,
  common sections). Page-specific rules live in each page's <style> block.
*/

/* font-face (local Runda faces appear on multiple pages) */
@font-face { font-family:'Runda'; src:url('../fonts/Runda-Regular.woff2') format('woff2'), url('../fonts/Runda-Regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Runda'; src:url('../fonts/Runda-Bold.woff2') format('woff2'), url('../fonts/Runda-Bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; }

/* Core reset + base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* Shared design tokens (conservative common set) */
:root {
  --green: #2E6B1F;
  --green-dk: #1f4d15;
  --green-lt: #EDF4E8;

  --tan: #C09A6B;
  --tan-text: #87653A; /* tan for text on light backgrounds (4.6:1 or better) */
  --tan-lt: #F5EFE4;
  --brown: #7B4A1E;

  --bg: #FAFAF6;
  --text: #1C1C18;
  --mid: #5A5A52;
  --light: #696960; /* was #9A9A90 (2.7:1); now 4.8:1 or better on every light background */
  --border: #E4DFDA;

  /* define both stacks to avoid forcing immediate HTML changes */
  --runda: 'Runda','Nunito',sans-serif;
  --serif: 'Lora', Georgia, serif;
  --sans: 'Plus Jakarta Sans', sans-serif;

  --max: 1160px;
  --pad: 48px;
}

/* Base typography/layout */
body {
  font-family: var(--runda, var(--sans));
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.frame { max-width: calc(var(--max) + var(--pad)*2); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: 68px 0; }

/* Fall campaign strip above the nav, added by site.js on every page except
   the campaign page, until Dec 31, 2026. It is one 38px line at every width
   (shorter wording on phones) and #site-nav reserves that space, so pages
   don't jump when it appears. After Dec 31 remove this block and set
   #site-nav back to 89px (P22). */
.campaign-strip { background: var(--tan-lt); border-bottom: 1px solid #e8ddd0; }
.campaign-strip a { display: block; height: 38px; max-width: calc(var(--max) + var(--pad) * 2); margin: 0 auto; padding: 9px var(--pad); overflow: hidden; color: var(--brown); font-size: 0.85rem; line-height: 20px; text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.campaign-strip strong { color: var(--green-dk); }
.campaign-strip .cs-short { display: none; }
.campaign-strip .cs-cta { margin-left: 6px; color: var(--green); font-weight: 700; }
.campaign-strip a:hover .cs-cta { text-decoration: underline; }
@media (max-width: 760px) {
  .campaign-strip a { font-size: 0.8rem; }
  .campaign-strip .cs-long { display: none; }
  .campaign-strip .cs-short { display: inline; }
}

/* Cloudflare Turnstile widget (forms and shop checkout). */
.cf-turnstile { margin: 4px 0 16px; }

/* Page banner (the volunteer.html style): a framed photo with rounded corners,
   darkened on the left, and the text on a frosted card. Shared by every
   page with a banner except the homepage, Heartwood Market and Impact.
   Each page sets its photo in its own <style>:
     .banner-bg { background-image: url("images/...jpg"); } */
.banner-wrap { max-width: calc(var(--max) + var(--pad) * 2); margin: 0 auto; padding: 28px var(--pad) 0; }
.banner { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 420px; border-radius: 12px; background: #1e3c10; }
.banner-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.banner-shade { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 60%, transparent 100%); }
.banner-content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; width: 100%; padding: 40px 52px; }
.banner-card { max-width: 540px; padding: 24px 28px; border-radius: 12px; background: rgba(255,255,255,0.12); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.banner-eyebrow { margin-bottom: 10px; color: rgba(255,255,255,0.7); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.banner-title { margin-bottom: 10px; color: white; font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
.banner-title em { color: #C8E890; font-style: italic; }
.banner-text { max-width: 440px; color: rgba(255,255,255,0.85); font-size: 0.92rem; line-height: 1.7; }
.banner-text strong { color: white; }
.banner-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
/* Optional column of figures to the right of the card (donate.html). */
.banner-aside { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.banner-stat { min-width: 170px; padding: 12px 16px; border-radius: 10px; background: rgba(0,0,0,0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: rgba(255,255,255,0.85); font-size: 0.75rem; line-height: 1.35; }
.banner-stat strong { display: block; color: white; font-family: var(--serif); font-size: 1.35rem; }
/* Every banner is the same height at each size: the min-heights fit the tallest card
   (Positive Youth Development, then Foundations). Recheck them after a banner copy change. */
@media (max-width: 980px) {
  .banner { min-height: 400px; }
  .banner-content { padding: 32px; }
}
@media (max-width: 760px) {
  .banner-content { flex-direction: column; align-items: stretch; gap: 14px; }
  .banner-aside { flex-direction: row; gap: 8px; }
  .banner-stat { min-width: 0; flex: 1 1 0; padding: 8px 10px; font-size: 0.7rem; }
  .banner-stat strong { font-size: 1.1rem; }
}
@media (max-width: 560px) {
  .banner { min-height: 490px; }
  .banner-content { padding: 20px; }
  .banner-card { padding: 20px; }
  .banner-shade { background: rgba(0,0,0,0.45); }
}

/* Stat row: a big number with a short label (About partners, program pages). */
.stat-row { display: flex; flex-wrap: wrap; gap: 20px 48px; margin-top: 28px; }
.stat-num { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; color: var(--green); line-height: 1.1; }
.stat-note { max-width: 760px; }
.stat-row + .stat-note { margin-top: 28px; }
.stat-label { font-size: 0.84rem; color: var(--mid); line-height: 1.45; margin-top: 4px; max-width: 190px; }
.section + .section { border-top: 1px solid #ECEAE5; }
.label { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tan-text); display: block; margin-bottom: 10px; }

/* Headings / text */
h1.title, h2.title { font-family: var(--serif); font-size: clamp(1.7rem, 2.3vw, 2.35rem); font-weight: 700; color: var(--text); line-height: 1.18; letter-spacing: -0.01em; margin-bottom: 12px; }
h2.title em, h1 em { font-style: italic; color: var(--green); }

h3.sub { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--text); line-height: 1.25; margin-bottom: 8px; }

.lead { font-size: 0.96rem; color: var(--mid); line-height: 1.82; font-weight: 400; }
p.body { font-size: 0.95rem; color: var(--mid); line-height: 1.88; margin-bottom: 16px; }
p.body:last-child { margin-bottom: 0; }
p.body a { color: var(--green); }

/* Navigation (shared structure and behavior) */
/* site.js replaces this placeholder; reserving the nav's height stops the page jumping. */
#site-nav { height: 128px; } /* 89px nav + 39px campaign strip; back to 89px after Dec 31 */
nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: white;
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: calc(var(--max) + var(--pad) * 2);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-inner > a:first-child {
  flex-shrink: 0;
}

.nav-logo {
  height: 68px;
  width: auto;
  max-width: none;
  display: block;
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-links > li {
  position: relative;
}

.nav-links > li > a,
.nav-drop-trigger {
  font-family: var(--runda);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--mid);
  padding: 8px 13px;
  border: none;
  border-radius: 5px;
  background: transparent;
  transition: all 0.15s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.nav-links > li > a:hover,
.nav-links > li > a.active,
.nav-drop-trigger:hover,
.nav-drop-trigger.active {
  background: var(--green-lt);
  color: var(--green);
}

.has-drop:hover > .dropdown,
.has-drop:focus-within > .dropdown,
.dropdown.open {
  display: block;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  min-width: 220px;
  padding: 6px;
  z-index: 300;
}

.dropdown a {
  display: block;
  padding: 8px 14px;
  font-family: var(--runda);
  font-size: 0.88rem;
  color: var(--mid);
  border-radius: 5px;
  transition: all 0.15s;
}

.dropdown a:hover,
.dropdown a:focus {
  background: var(--green-lt);
  color: var(--green);
}

.nav-caret {
  font-size: 0.6rem;
  opacity: 0.45;
  transition: transform 0.2s;
}

[aria-expanded="true"] > .nav-caret {
  transform: rotate(180deg);
}

.nav-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* Buttons (shared set) */
.btn { display:inline-flex; align-items:center; gap:5px; font-family:var(--sans); font-weight:600; border-radius:5px; border:none; cursor:pointer; transition:all 0.15s; text-decoration:none; }
.btn-sm { font-size:0.92rem; padding:9px 20px; }
.btn-md { font-size:0.96rem; padding:11px 22px; }
.btn-lg { font-size:0.98rem; padding:12px 26px; }
.btn-green { background:var(--green); color:white; }
.btn-green:hover { background:var(--green-dk); }
.btn-ghost { background:transparent; color:var(--mid); border:1px solid var(--border); }
.btn-ghost:hover { border-color:var(--green); color:var(--green); }
.btn-tan { background:var(--brown); color:white; }
.btn-tan:hover { background:#5e3814; }
.btn-white { background:white; color:var(--green); }
.btn-white:hover { background:#f0ede8; }
.btn-outline-w:hover { background:rgba(255,255,255,0.1); border-color:white; }
.btn-outline-w { background:transparent; color:white; border:1.5px solid rgba(255,255,255,0.42); }

/* Footer (shared) */
footer { background: #1C1C18; padding: 48px 0 28px; }
.footer-inner { max-width: calc(var(--max) + var(--pad)*2); margin: 0 auto; padding: 0 var(--pad); }
.footer-top { display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: 48px; margin-bottom: 40px; }
.footer-logo-wrap { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; margin-bottom: 14px; }
.footer-logo { width: 100%; height: 100%; object-fit: cover; display: block; }
.footer-mission { font-family: var(--runda); font-size: 0.85rem; color: rgba(255,255,255,0.55); line-height: 1.7; margin-bottom: 8px; }
.footer-contact { font-family: var(--runda); font-size: 0.88rem; line-height: 1.7; color: rgba(255,255,255,0.6); margin-bottom: 18px; }
.footer-contact a { color: rgba(255,255,255,0.75); }
.footer-contact a:hover { color: white; }
.footer-vision { font-family: var(--serif); font-size: 0.88rem; font-style: italic; color: rgba(255,255,255,0.55); margin-bottom: 18px; border-left: 2px solid var(--tan); padding-left: 12px; line-height: 1.55; }
.footer-socials { display: flex; gap: 8px; }
.fsoc { width: 32px; height: 32px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.35); transition: all 0.15s; text-decoration: none; }
.fsoc svg { width: 15px; height: 15px; fill: currentColor; }
.fsoc:hover { background: var(--green); border-color: var(--green); color: white; }
.fcol-h { font-family: var(--runda); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.55); margin-bottom: 14px; }
.fcol-links { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.fcol-links a { font-size: 0.85rem; color: rgba(255,255,255,0.6); transition: color 0.15s; }
.fcol-links a:hover { color: white; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-copy { font-size: 0.74rem; color: rgba(255,255,255,0.55); }

/* Shared component patterns */

/* Hamburger / mobile nav (shared) */
.ham {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.ham span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--mid);
  border-radius: 2px;
  transition: all 0.2s;
}

.ham.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.ham.open span:nth-child(2) {
  opacity: 0;
}

.ham.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  top: 88px;
  background: white;
  z-index: 150;
  padding: 20px var(--pad) 28px;
  flex-direction: column;
  overflow-y: auto;
}

.mobile-nav.open {
  display: flex;
}

.mobile-nav a,
.mobile-submenu-toggle {
  font-family: var(--runda);
  font-size: 1rem;
  font-weight: 600;
  color: var(--mid);
}

.mobile-nav > a {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.mobile-nav a:hover,
.mobile-nav a:focus,
.mobile-submenu-toggle:hover,
.mobile-submenu-toggle:focus {
  color: var(--green);
}

.mobile-nav .mob-section {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--light);
  padding: 16px 0 6px;
}

.mobile-menu-group {
  border-bottom: 1px solid var(--border);
}

.mobile-submenu-toggle {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 14px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu-parent-button {
  width: 100%;
  justify-content: space-between;
  padding: 14px 0;
}

.mobile-submenu {
  display: none;
  flex-direction: column;
  padding: 0 0 8px 16px;
}

.mobile-submenu.open {
  display: flex;
}

.mobile-submenu a {
  padding: 10px 0;
  font-size: 0.9rem;
  font-weight: 500;
}

/* About section navigation */
.about-subnav {
  position: sticky;
  top: 88px;
  z-index: 100;
  background: white;
  border-bottom: 1px solid var(--border);
}

.about-subnav-inner {
  display: flex;
  max-width: calc(var(--max) + var(--pad) * 2);
  margin: 0 auto;
  padding: 0 var(--pad);
  overflow-x: auto;
}

.about-subnav a {
  padding: 14px 18px;
  border-bottom: 2px solid transparent;
  color: var(--mid);
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.15s;
}

.about-subnav a:hover,
.about-subnav a.active {
  color: var(--green);
  border-bottom-color: var(--green);
}

@media (max-width: 1100px) {
  :root { --pad: 24px; }
  .nav-links { display: none; }
  .ham { display: flex; }
  .footer-top {
    grid-template-columns: minmax(0, 1.35fr) minmax(140px, 0.65fr);
    column-gap: 32px;
    row-gap: 26px;
    align-items: start;
  }
  .footer-top > :first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .footer-top > :nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  .footer-top > :nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }
}
/* Narrow phones (iPhone SE/mini, most Androids): the full-size logo plus
   Donate and the menu button don't fit in 360-375 px. */
@media (max-width: 420px) {
  .nav-inner { gap: 12px; }
  .nav-logo { height: 52px; }
  .nav-right .btn-sm { padding: 8px 14px; }
}
/* Active dropdown section */

.nav-drop-trigger.active {
  color: var(--green);
}
/* Skip link (injected by site.js): hidden until it receives keyboard focus. */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; background: var(--green); color: white; font-weight: 700; border-radius: 0 0 6px 6px; text-decoration: none; transition: top 0.15s; }
.skip-link:focus { top: 0; outline: 3px solid var(--tan); outline-offset: 2px; }
main:focus { outline: none; }

/* Slideshow pause/play button added by diAutoplay (js/site.js). In the
   photo slideshows it sits with the dots; in the home hero it uses the
   arrow button style. */
.slide-pause { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 4px; background: rgba(0,0,0,0.45); color: white; font-size: 0.7rem; line-height: 1; cursor: pointer; }
.slide-pause:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.slide-pause.hero-arr { width: 34px; height: 34px; border-radius: 5px; font-size: 0.8rem; }

/* Horizontal scrollers (page sub-navs, wide tables): js/site.js adds
   .can-scroll-left / .can-scroll-right while there's more to see, and the
   edge fades so it's clear the row scrolls. */
.about-subnav-inner, .subnav-inner, .table-scroll { scrollbar-width: none; }
.about-subnav-inner::-webkit-scrollbar, .subnav-inner::-webkit-scrollbar, .table-scroll::-webkit-scrollbar { display: none; }
.can-scroll-right { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
.can-scroll-left { -webkit-mask-image: linear-gradient(to right, transparent, #000 18%); mask-image: linear-gradient(to right, transparent, #000 18%); }
.can-scroll-left.can-scroll-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); }
.scroll-hint { display: none; margin: 0 0 8px; color: var(--light); font-size: 0.78rem; text-align: right; }
@media (max-width: 720px) { .scroll-hint { display: block; } }