/*
Theme Name: Growing Green Leaders
Theme URI: https://growinggreenleaders.org
Author: Growing Green Leaders Coalition
Description: Custom theme for Growing Green Leaders, a six-month youth climate education and innovation challenge powered by Rotary, The Climate Initiative, and CAVU.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: growing-green-leaders
*/

/* ============================================================
   GROWING GREEN LEADERS — shared stylesheet
   Palette: field-guide botanical, not template cream/terracotta
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Public+Sans:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* color tokens */
  --ink:        #172A20;   /* near-black forest, primary text */
  --evergreen:  #1B4332;   /* deep primary green */
  --evergreen-2:#0F2B20;   /* darker for footer/hero panels */
  --leaf:       #4C9A6A;   /* fresh leaf green, links/accents */
  --leaf-light: #DCEBD9;   /* pale leaf tint for chips/cards */
  --gold:       #E2A93B;   /* sunlit gold — Earth Day / energy accent */
  --sky:        #2A6F97;   /* ocean blue — 7 Seas / RCAT tie-in */
  --paper:      #F3F5EC;   /* warm sage-white page background */
  --paper-deep: #E8ECDD;   /* card / section background */
  --line:       #CBD3BE;   /* hairline borders */
  --white:      #FFFFFF;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  --max: 1160px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--evergreen); text-decoration-thickness:1.5px; text-underline-offset:3px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--evergreen-2);
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
p{ margin:0 0 1em; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 28px; }
.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--leaf);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.eyebrow::before{ content:"●"; color:var(--gold); font-size:9px; }

/* ---------- header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(243,245,236,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; max-width:var(--max); margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:20px;
  color:var(--evergreen-2); text-decoration:none;
}
.brand-mark{
  width:30px; height:30px; flex:none;
}
.nav-links{ display:flex; gap:26px; align-items:center; list-style:none; margin:0; padding:0; }
.nav-links a{
  color:var(--ink); text-decoration:none; font-weight:600; font-size:14.5px;
  padding:6px 2px; border-bottom:2px solid transparent;
}
.nav-links a:hover, .nav-links a.active{ border-bottom-color:var(--gold); color:var(--evergreen-2); }
.nav-cta{
  background:var(--evergreen); color:var(--white) !important; padding:10px 18px !important;
  border-radius:100px; border-bottom:none !important;
}
.nav-cta:hover{ background:var(--evergreen-2); }
.nav-toggle{ display:none; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:15px;
  padding:13px 24px; border-radius:100px; border:2px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .15s ease, background .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--gold); color:var(--evergreen-2); }
.btn-primary:hover{ background:#eebb5c; }
.btn-outline{ background:transparent; border-color:var(--evergreen); color:var(--evergreen-2); }
.btn-outline:hover{ background:var(--evergreen); color:var(--white); }
.btn-light{ background:var(--white); color:var(--evergreen-2); }
.btn-light:hover{ background:var(--leaf-light); }
.btn-sm{ padding:9px 16px; font-size:13.5px; }

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--evergreen-2) 0%, var(--evergreen) 100%);
  color:var(--white);
  padding:88px 0 96px;
}
.hero .wrap{ position:relative; z-index:2; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.hero h1{
  color:var(--white); font-size:clamp(38px,5vw,60px); margin-bottom:.3em;
}
.hero h1 em{ color:var(--gold); font-style:italic; }
.hero-lede{ font-size:19px; max-width:52ch; color:#DDE8DF; }
.hero-actions{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:34px; margin-top:44px; flex-wrap:wrap; }
.hero-stats div{ min-width:110px; }
.hero-stat-num{ font-family:var(--font-display); font-size:32px; color:var(--gold); font-weight:600; }
.hero-stat-label{ font-family:var(--font-mono); font-size:12px; color:#B9CBBE; letter-spacing:.05em; text-transform:uppercase; }
.hero-art{
  border-radius:18px; overflow:hidden; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  padding:22px;
}
.hero-art svg{ width:100%; height:auto; display:block; }

/* botanical divider */
.stem-divider{ height:64px; }

/* ---------- sections ---------- */
section{ padding:76px 0; }
.section-head{ max-width:660px; margin-bottom:44px; }
.section-head h2{ font-size:clamp(28px,3.4vw,40px); }
.section-head p{ font-size:17.5px; color:#3E5548; }
.bg-deep{ background:var(--paper-deep); }
.bg-forest{ background:var(--evergreen-2); color:#E7EEE8; }
.bg-forest h2, .bg-forest h3{ color:var(--white); }
.bg-forest p{ color:#C6D5CA; }

/* ---------- cards ---------- */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--white); border:1px solid var(--line); border-radius:16px;
  padding:28px; display:flex; flex-direction:column; gap:12px;
}
.card h3{ font-size:20px; margin-bottom:2px; }
.card p{ color:#43554A; font-size:15.5px; margin-bottom:4px; }
.card-link{ margin-top:auto; font-weight:700; font-size:14.5px; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.card-link::after{ content:"→"; transition:transform .15s; }
.card-link:hover::after{ transform:translateX(3px); }

.partner-card{ border-left:4px solid var(--leaf); }
.tag{
  display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; background:var(--leaf-light); color:var(--evergreen-2);
  padding:4px 10px; border-radius:100px; width:fit-content;
}

/* ---------- growth timeline (signature element) ---------- */
.timeline{ position:relative; max-width:760px; margin:0 auto; padding-left:40px; }
.timeline::before{
  content:""; position:absolute; left:11px; top:6px; bottom:6px; width:3px;
  background:linear-gradient(180deg, var(--gold), var(--leaf) 30%, var(--leaf) 100%);
  border-radius:3px;
}
.t-item{ position:relative; padding-bottom:40px; }
.t-item:last-child{ padding-bottom:0; }
.t-leaf{
  position:absolute; left:-40px; top:0; width:26px; height:26px;
  background:var(--paper); border:3px solid var(--leaf); border-radius:50% 4px 50% 50%;
  transform:rotate(-45deg);
}
.bg-forest .t-leaf{ background:var(--evergreen-2); }
.t-date{ font-family:var(--font-mono); font-size:12.5px; color:var(--gold); letter-spacing:.05em; text-transform:uppercase; margin-bottom:4px; }
.t-item h4{ font-size:19px; margin-bottom:6px; }
.t-item p{ margin:0; font-size:15.5px; }

/* ---------- divisions ---------- */
.division{
  background:var(--white); border-radius:18px; border:1px solid var(--line);
  padding:32px; display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start;
}
.division-num{ font-family:var(--font-display); font-size:44px; color:var(--leaf-light); -webkit-text-stroke:1.5px var(--leaf); color:transparent; font-weight:700; }

/* ---------- footer ---------- */
.site-footer{ background:var(--evergreen-2); color:#B9CBBE; padding:56px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom:40px; }
.site-footer h4{ color:var(--white); font-size:14px; font-family:var(--font-mono); letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; }
.site-footer a{ color:#B9CBBE; text-decoration:none; display:block; margin-bottom:9px; font-size:14.5px; }
.site-footer a:hover{ color:var(--gold); }
.footer-brand{ font-family:var(--font-display); color:var(--white); font-size:22px; margin-bottom:10px; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:13px; color:#87A091;
}

/* ---------- page hero (interior pages) ---------- */
.page-hero{
  background:var(--evergreen-2); color:var(--white); padding:56px 0 60px;
}
.page-hero .eyebrow{ color:var(--gold); }
.page-hero .eyebrow::before{ color:var(--leaf); }
.page-hero h1{ color:var(--white); font-size:clamp(32px,4.4vw,48px); }
.page-hero p{ color:#C6D5CA; max-width:60ch; font-size:17.5px; }
.breadcrumb{ font-family:var(--font-mono); font-size:12.5px; color:#8FA895; margin-bottom:18px; }
.breadcrumb a{ color:#B9CBBE; }

/* ---------- forms ---------- */
.form-shell{
  background:var(--white); border:1px solid var(--line); border-radius:20px; padding:40px;
}
fieldset{ border:none; padding:0; margin:0 0 36px; }
fieldset legend{
  font-family:var(--font-display); font-size:22px; color:var(--evergreen-2); padding:0 0 6px;
  border-bottom:2px solid var(--leaf-light); width:100%; margin-bottom:20px; font-weight:600;
}
.field-note{ font-size:14px; color:#5E7267; margin:-10px 0 20px; }
.form-row{ display:grid; gap:18px; margin-bottom:18px; }
.cols-2{ grid-template-columns:1fr 1fr; }
.cols-3{ grid-template-columns:1fr 1fr 1fr; }
label{ display:block; font-weight:700; font-size:14.5px; margin-bottom:6px; color:var(--evergreen-2); }
.req::after{ content:" *"; color:#C0392B; }
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],select,textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px;
  font-family:var(--font-body); font-size:15.5px; background:var(--paper); color:var(--ink);
}
textarea{ resize:vertical; min-height:100px; }
.checkbox-row{ display:flex; gap:10px; align-items:flex-start; margin-bottom:14px; }
.checkbox-row input{ margin-top:4px; flex:none; width:18px; height:18px; }
.checkbox-row label{ font-weight:500; font-size:14.5px; margin:0; color:var(--ink); }
.notice-box{
  background:var(--leaf-light); border:1px solid #BFDDC1; border-radius:12px;
  padding:18px 20px; font-size:14.5px; color:#22412D; margin-bottom:24px;
}
.notice-box strong{ color:var(--evergreen-2); }
.notice-box.gold{ background:#FBF0DA; border-color:#EFCE8E; color:#5A430E; }
.notice-box.gold strong{ color:#5A430E; }

/* ---------- bio / people ---------- */
.person{
  display:grid; grid-template-columns:180px 1fr; gap:28px; align-items:start;
  background:var(--white); border:1px solid var(--line); border-radius:18px; padding:30px;
  margin-bottom:26px;
}
.person-photo{
  width:180px; height:180px; border-radius:14px; background:var(--leaf-light);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:44px; color:var(--evergreen); font-weight:600;
  overflow:hidden;
}
.person h3{ font-size:24px; margin-bottom:2px; }
.person .role{ color:var(--leaf); font-weight:700; font-size:14.5px; margin-bottom:14px; }
.source-note{ font-family:var(--font-mono); font-size:12px; color:#5E7267; margin-top:14px; }

/* ---------- misc ---------- */
.center{ text-align:center; }
.mt-0{ margin-top:0; }
.callout-cta{
  background:linear-gradient(120deg, var(--evergreen) 0%, var(--evergreen-2) 100%);
  border-radius:24px; padding:56px; color:var(--white); text-align:center;
}
.callout-cta h2{ color:var(--white); }
.callout-cta p{ color:#C6D5CA; max-width:56ch; margin-left:auto; margin-right:auto; }

/* ---------- responsive ---------- */
@media (max-width: 880px){
  .hero-grid{ grid-template-columns:1fr; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .person{ grid-template-columns:1fr; }
  .person-photo{ width:96px; height:96px; font-size:28px; }
  .cols-2,.cols-3{ grid-template-columns:1fr; }
  .division{ grid-template-columns:1fr; }
  .nav-links{
    position:fixed; top:64px; left:0; right:0; bottom:0; background:var(--paper);
    flex-direction:column; padding:30px 28px; gap:6px; transform:translateX(100%);
    transition:transform .25s ease; overflow-y:auto;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ display:block; padding:14px 0; border-bottom:1px solid var(--line); font-size:17px; }
  .nav-toggle{
    display:block; background:none; border:none; cursor:pointer; padding:8px;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    content:""; display:block; width:22px; height:2px; background:var(--evergreen-2); position:relative; transition:.2s;
  }
  .nav-toggle span::before{ position:absolute; top:-7px; }
  .nav-toggle span::after{ position:absolute; top:7px; }
}
@media (max-width: 560px){
  .hero{ padding:64px 0 72px; }
  section{ padding:56px 0; }
  .form-shell, .callout-cta{ padding:26px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}

/* ---------- WordPress nav-menu integration ---------- */
.nav-links a.current-menu-item,
.nav-links a.current_page_item{ border-bottom-color:var(--gold); color:var(--evergreen-2); }
.nav-links a.current-menu-item.nav-cta{ background:var(--evergreen-2); }
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}