/*
Theme Name: Afrobass Foundation
Theme URI: https://afrobassfoundation.org
Author: Afrobass Foundation
Author URI: https://afrobassfoundation.org
Description: A custom WordPress theme for the Afrobass Foundation, a registered Canadian charity founded in 2024 and based in Toronto, with a mission to build schools, water wells, and opportunity across Africa and Canada. Includes mission/goals, planned initiatives, donations, team, news, events, and contact features.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: afrobass-foundation
Tags: charity, non-profit, foundation, donation, responsive
*/

/* ============================================================
   DESIGN TOKENS
   Aesthetic: warm, grounded, editorial. Earthy ochre + deep
   forest green with a cream base — evokes growth, roots, and
   community. Distinctive serif display paired with clean sans body.
   ============================================================ */
:root{
  --c-cream:#f7f1e3;
  --c-cream-dk:#efe6d0;
  --c-ink:#1c1a17;
  --c-forest:#1f4034;
  --c-forest-dk:#152b23;
  --c-ochre:#d98324;
  --c-ochre-dk:#b56a14;
  --c-clay:#a6443a;
  --c-sand:#e0c9a6;
  --c-muted:#6b6256;
  --c-line:#d8cbb0;

  --font-display:"Fraunces","Georgia",serif;
  --font-body:"Hanken Grotesk","Helvetica Neue",sans-serif;

  --maxw:1200px;
  --gut:clamp(1.2rem,4vw,3rem);
  --radius:14px;
  --shadow:0 18px 40px -22px rgba(28,26,23,.45);
  --trans:.4s cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--c-cream);
  color:var(--c-ink);
  line-height:1.6;
  font-size:1.05rem;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-forest);text-decoration:none;transition:color var(--trans)}
a:hover{color:var(--c-ochre)}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.08;color:var(--c-forest-dk);letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,6vw,4.8rem)}
h2{font-size:clamp(2rem,4vw,3.2rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.7rem)}
p{margin-bottom:1rem}

.container{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:clamp(3.5rem,8vw,7rem)}
.eyebrow{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.22em;font-size:.78rem;font-weight:700;color:var(--c-ochre-dk);margin-bottom:1rem;display:inline-block}
.lead{font-size:1.25rem;color:var(--c-muted);max-width:60ch}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-body);font-weight:700;font-size:.98rem;
  padding:.85rem 1.7rem;border-radius:999px;border:2px solid transparent;
  cursor:pointer;transition:transform var(--trans),background var(--trans),color var(--trans);
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--c-ochre);color:#fff}
.btn-primary:hover{background:var(--c-ochre-dk);color:#fff}
.btn-outline{border-color:var(--c-forest);color:var(--c-forest)}
.btn-outline:hover{background:var(--c-forest);color:var(--c-cream)}
.btn-ghost{color:var(--c-forest);padding-inline:0}

/* ============ HEADER ============ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(247,241,227,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--c-line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:1rem}
.site-brand{font-family:var(--font-display);font-weight:600;font-size:1.45rem;color:var(--c-forest-dk);display:flex;align-items:center;gap:.6rem}
.site-brand .mark{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--c-ochre),var(--c-clay));flex:none}
.main-nav ul{display:flex;gap:1.8rem;list-style:none;align-items:center}
.main-nav a{font-weight:600;font-size:.97rem;color:var(--c-ink)}
.main-nav a:hover{color:var(--c-ochre)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;font-size:1.6rem;color:var(--c-forest)}

/* ============ HERO ============ */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--c-forest) 0%,var(--c-forest-dk) 100%);
  color:var(--c-cream);padding-block:clamp(4rem,10vw,8rem);
}
.hero::after{
  content:"";position:absolute;right:-10%;top:-20%;width:50vw;height:50vw;
  background:radial-gradient(circle,rgba(217,131,36,.35),transparent 60%);
}
.hero .container{position:relative;z-index:2;max-width:920px}
.hero h1{color:var(--c-cream)}
.hero .eyebrow{color:var(--c-sand)}
.hero p{font-size:1.3rem;color:#e9e2d2;max-width:54ch;margin-block:1.5rem 2.2rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}

/* ============ STATS ============ */
.stats{background:var(--c-ochre);color:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;text-align:center}
.stat .num{font-family:var(--font-display);font-size:clamp(2.6rem,5vw,3.6rem);font-weight:600;line-height:1;color:#fff}
.stat .label{text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;font-weight:600;margin-top:.5rem;opacity:.9}

/* ============ CARDS / GRID ============ */
.grid{display:grid;gap:1.8rem}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);
  overflow:hidden;transition:transform var(--trans),box-shadow var(--trans);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card-body{padding:1.6rem}
.card .thumb{aspect-ratio:16/10;object-fit:cover;width:100%;background:var(--c-sand)}
.card h3{margin-bottom:.6rem}
.card .meta{font-size:.85rem;color:var(--c-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.4rem}

/* Program cards with accent bar */
.program-card{border-left:5px solid var(--c-ochre)}

/* Team */
.team-card{text-align:center;background:transparent;border:0}
.team-card .avatar{width:160px;height:160px;border-radius:50%;object-fit:cover;margin:0 auto 1rem;border:4px solid var(--c-sand)}
.team-card .role{color:var(--c-ochre-dk);font-weight:600;font-size:.9rem}

/* Section heads */
.section-head{max-width:62ch;margin-bottom:2.6rem}
.section-head.center{margin-inline:auto;text-align:center}

/* Donate CTA band */
.donate-band{background:linear-gradient(135deg,var(--c-clay),var(--c-ochre-dk));color:#fff;text-align:center;border-radius:var(--radius)}
.donate-band h2{color:#fff}
.donate-band p{color:#fbeede;max-width:50ch;margin-inline:auto}

/* Events list */
.event{display:flex;gap:1.4rem;padding:1.4rem;background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);margin-bottom:1rem;align-items:center}
.event .date{flex:none;width:78px;text-align:center;background:var(--c-forest);color:var(--c-cream);border-radius:10px;padding:.7rem .4rem}
.event .date .d{font-family:var(--font-display);font-size:1.8rem;line-height:1}
.event .date .m{text-transform:uppercase;font-size:.72rem;letter-spacing:.1em}

/* Footer */
.site-footer{background:var(--c-forest-dk);color:#cfc9ba;padding-block:3.5rem 2rem;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(2,1fr);gap:2.5rem;margin-bottom:2.5rem}
.site-footer h4{color:var(--c-cream);margin-bottom:1rem;font-size:1.05rem}
.site-footer a{color:#cfc9ba}
.site-footer a:hover{color:var(--c-ochre)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:1.5rem;font-size:.86rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}

/* Forms */
.form-row{margin-bottom:1.1rem}
label{display:block;font-weight:600;margin-bottom:.4rem;font-size:.92rem}
input,textarea,select{width:100%;padding:.8rem 1rem;border:1px solid var(--c-line);border-radius:10px;font-family:inherit;font-size:1rem;background:#fff}
input:focus,textarea:focus{outline:2px solid var(--c-ochre)}

/* Page content */
.entry-content{max-width:72ch}
.entry-content h2{margin-block:2rem 1rem}
.entry-content ul,.entry-content ol{margin:0 0 1rem 1.4rem}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* Responsive */
@media(max-width:820px){
  .main-nav{position:fixed;inset:64px 0 auto 0;background:var(--c-cream);border-bottom:1px solid var(--c-line);transform:translateY(-120%);transition:transform var(--trans);padding:1.2rem var(--gut)}
  .main-nav.open{transform:none}
  .main-nav ul{flex-direction:column;align-items:flex-start;gap:1.1rem}
  .nav-toggle{display:block}
  .footer-grid{grid-template-columns:1fr}
}