/* ============== 1) TOKENS ============== */
:root{
  /* Brand */
  --primary:#33334B;  /* navy */
  --accent:#E1BB53;   /* sun gold */

  /* Light blues */
  --blue-50:#F4F7FB; --blue-100:#E9F1FA; --blue-200:#D6E4F6; --blue-300:#C2D6F2;

  /* Neutrals */
  --bg:#FAFAF8; --surface:#fff; --text:#2A2E35;
  --text-2:#4D5560; --text-3:#6B7280; --border:#E6E6E6; --muted:var(--blue-100);

  /* On-color */
  --on-primary:#fff; --on-dark:#fff;

  /* Accent tints (for glows) */
  --accent-35:rgba(225,187,83,.35);
  --accent-25:rgba(225,187,83,.25);
  --accent-08:rgba(225,187,83,.08);
  --accent-05:rgba(225,187,83,.05);

  /* Effects / shape / layout */
  --shadow:0 10px 30px rgba(14,18,26,.08);
  --radius:14px; --focus:0 0 0 3px rgba(51,51,75,.25);
  --container-max:1100px;

  /* Spacing */
  --space-1:8px; --space-2:12px; --space-3:16px; --space-4:18px;
  --space-5:24px; --space-6:28px; --space-7:32px; --space-8:40px;

  /* Buttons */
  --btn-h:44px; --btn-px:18px; --btn-radius:999px;

  /* Misc */
  --surface-72:rgba(255,255,255,.72);
}

/* ============== 2) BASE ============== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); background:var(--bg);
  font-family:"Source Sans 3",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
}
a{color:inherit}
a:focus,button:focus{outline:none; box-shadow:var(--focus); border-radius:8px}
img{max-width:100%; height:auto}
.skip-link{position:absolute; left:-999px}
.skip-link:focus{left:var(--space-3); top:var(--space-3); background:var(--surface); padding:var(--space-2) var(--space-3); border-radius:6px}
.container{width:min(var(--container-max),92%); margin:0 auto}

/* ============== 3) HEADER / NAV ============== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--surface-72); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:var(--space-2) 0}
.brand{font-family:Inter,system-ui,sans-serif; font-weight:700; letter-spacing:.08em; text-decoration:none; color:var(--text)}
.nav ul{display:flex; gap:var(--space-3); align-items:center; margin:0; padding:0; list-style:none}
.nav a{text-decoration:none; color:var(--text); padding:var(--space-2) var(--space-3); border-radius:8px}
.nav a:hover{background:var(--muted)}
.nav-toggle{display:none; font-size:20px; background:transparent; border:none; cursor:pointer}

/* Header Donate legibility */
.site-header .btn-primary{
  background:var(--primary); color:var(--on-primary);
  font-weight:800; letter-spacing:.02em;
  box-shadow:0 0 0 2px rgba(255,255,255,.75), var(--shadow);
}
.site-header .btn-primary:hover{filter:brightness(1.06)}
.site-header .btn-primary:focus{
  box-shadow:0 0 0 3px rgba(255,255,255,.9), 0 0 0 6px rgba(51,51,75,.35);
}

/* ============== 4) BUTTONS ============== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--btn-h); padding:0 var(--btn-px);
  border-radius:var(--btn-radius); font-weight:600; text-decoration:none; line-height:1; white-space:nowrap;
}
.btn-primary{background:var(--primary); color:var(--on-primary); border:2px solid transparent; box-shadow:var(--shadow); font-weight:700}
.btn-primary:hover{filter:brightness(1.06)}
.btn-secondary{background:transparent; border:2px solid var(--primary); color:var(--primary)}
.btn-secondary:hover{background:var(--primary); color:var(--on-primary)}
.btn-ghost{border:1px solid var(--muted); color:var(--text); background:transparent}

/* compact hero chips */
.hero .cta-row .btn.btn-secondary{ --btn-h:34px; --btn-px:12px; border-width:1.5px; font-weight:600; opacity:.95 }
.hero .cta-row .btn.btn-secondary:hover{opacity:1}

/* ============== 5) HERO ============== */
.hero{position:relative; isolation:isolate}
.hero:before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(90% 70% at 15% 10%, var(--accent-25) 0%, var(--accent-08) 30%, transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
.sun{
  position:absolute; width:520px; height:520px; right:-160px; top:-120px; z-index:-1;
  background:radial-gradient(circle, var(--accent-35), var(--accent-05) 60%, transparent 70%);
  filter:blur(2px);
}
.hero-inner{padding:72px 0 56px}
.hero h1{font-family:Inter,system-ui,sans-serif; font-size:clamp(2.2rem,4.5vw,3.4rem); line-height:1.1; margin:0 0 var(--space-2)}
.hero p{font-size:clamp(1.05rem,1.6vw,1.2rem); max-width:60ch; margin:0 0 var(--space-3)}
.cta-row{display:flex; gap:var(--space-2); flex-wrap:wrap}

/* ============== 6) SECTIONS / GRID / CARDS ============== */
.section{padding:56px 0}
.section.alt{background:var(--surface)}
.section-head{text-align:left; margin-bottom:var(--space-3)}
.section-head h2{
  font-family:Inter,system-ui,sans-serif; font-size:clamp(1.6rem,3vw,2rem);
  margin:0 0 6px; padding-bottom:6px;
  background:linear-gradient(90deg, var(--accent), transparent);
  background-size:140px 3px; background-repeat:no-repeat; background-position:left bottom;
}
.section-head p{margin:0; color:var(--text-2)}

.grid{display:grid; gap:var(--space-3)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-4); box-shadow:var(--shadow)}
.card h3{margin:8px 0 8px; font-size:1.1rem}
.card p{margin:0}
.icon{font-size:28px}

.program{min-height:190px; display:flex; flex-direction:column; justify-content:space-between}
.text-link{color:var(--primary); text-decoration:none; font-weight:600}
.text-link:hover{text-decoration:underline}

/* Two-column */
.two-col{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--space-5); align-items:center}
.two-col[id]{scroll-margin-top:96px} /* anchors not hidden by sticky header */
.fact-list{margin:10px 0 16px; padding-left:18px}

/* Spotlight cards (shared) */
.spotlight-card{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  background:var(--blue-100); /* safe fallback */
}
/* Option A: background div (used on About) */
.spotlight-photo{position:absolute; inset:0; background-size:cover; background-position:center}
/* Option B: real <img> (used on Projects) */
.spot-img{width:100%; height:100%; object-fit:cover; display:block}

/* CTA panel (dark) */
.cta-panel{
  background:linear-gradient(180deg, var(--primary), #252537);
  color:var(--on-dark); border-radius:18px; padding:var(--space-6); box-shadow:var(--shadow);
}
.cta-panel h2{margin-top:0}
.cta-panel .btn-primary{background:var(--surface); color:var(--primary); border:2px solid transparent}
.cta-panel .btn-secondary{border-color:var(--on-dark); color:var(--on-dark); font-weight:700}
.cta-panel .btn-secondary:hover{background:var(--on-dark); color:var(--primary)}

/* ============== 7) FOOTER ============== */
.site-footer{border-top:1px solid var(--border); background:var(--surface)}
.footer-inner{padding:var(--space-5) 0; display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--space-3)}
.site-footer nav a{margin-right:var(--space-3); color:var(--text-2); text-decoration:none}
.site-footer nav a:hover{text-decoration:underline}
.small{font-size:.9rem; color:var(--text-3)}

/* ============== 8) RESPONSIVE ============== */
@media (max-width:960px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
}
@media (max-width:720px){
  .grid-3,.grid-4{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .nav{
    position:absolute; right:0; top:60px; background:var(--surface);
    border:1px solid var(--border); border-radius:10px; padding:var(--space-2); display:none;
  }
  .nav.open{display:block}
  .nav ul{flex-direction:column; align-items:stretch}
  .header-inner{position:relative}
}

/* ============== 9) PAGE-SPECIFIC ============== */
/* Projects */
.page-projects .program-wrap{display:grid; gap:var(--space-7)}
@media (min-width:960px){ .page-projects .program-wrap{gap:var(--space-8)} }
.page-projects .two-col{gap:var(--space-6)}

/* About (moves inlined styles out of the page) */
.page-about .spotlight-photo.about{
  background:
    radial-gradient(600px 400px at 80% 20%, var(--accent-08), transparent 60%),
    linear-gradient(0deg, rgba(51,51,75,.06), rgba(51,51,75,.06)),
    url("/images/about-spotlight.jpg") center/cover no-repeat;
  background-position:40% 50%;
}
.page-about .spotlight-photo.partners{
  background:
    linear-gradient(0deg, rgba(51,51,75,.04), rgba(51,51,75,.04)),
    url("/images/partners-team.jpg") center/cover no-repeat;
  background-position:50% 45%;
}

/* Donate */
.page-donate .donate-hero .sun{display:none}
.page-donate .donate-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3)}
.page-donate .donate-tiles .card h3{margin:6px 0}
.page-donate .donate-tiles .card p{color:var(--text-2)}
@media(max-width:900px){ .page-donate .donate-tiles{grid-template-columns:1fr} }

/* Contact */
.page-contact .contact-hero .sun{display:none}
.page-contact form.card input,
.page-contact form.card textarea,
.page-contact form.card select{width:100%}