/* ===== Heat Justice Now – global styles ===== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@700;800&family=Inter:wght@400;600;700&display=swap');

:root{
  --forest:#235c2e;
  --leaf:#2f7d42;
  --heat1:#ff7a59;
  --heat2:#ff3b30;
  --sand:#faf6ee;
  --ink:#222;
  --muted:#6b6b6b;
  --radius:16px;
  --shadow:0 10px 26px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--sand);
  color:var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* ===== Header / Nav ===== */
.site-header{
  position:sticky; top:0; z-index:20;
  background:var(--forest); color:#fff; padding:18px 0;
  box-shadow:0 2px 0 rgba(0,0,0,.04);
}
.brand{
  display:flex; align-items:baseline; gap:10px; margin:0;
  font-family: Archivo, Inter, sans-serif; font-weight:800;
  font-size: clamp(22px, 3.4vw, 36px);
}
.brand small{font-weight:700; font-size:.6em; opacity:.9}
.main-nav{margin:8px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:22px}
.main-nav a{
  color:#fff; text-decoration:none; font-weight:700; padding-bottom:2px; border-bottom:2px solid transparent;
}
.main-nav a:hover,.main-nav a:focus{border-bottom-color:#fff}
.main-nav a.active{border-bottom-color:#fff}

/* ===== Hero ===== */
.hero{
  background: linear-gradient(90deg, var(--heat1), var(--heat2));
  color:#fff;
  padding: 56px 0 42px;
}
.eyebrow{
  text-transform:uppercase; letter-spacing:.08em; font-weight:700; opacity:.95; margin:0 0 6px;
}
.hero h1, .hero h2{
  font-family: Archivo, Inter, sans-serif; font-weight:800;
  margin:0 0 10px; line-height:1.15;
}
.hero h1{ font-size: clamp(28px, 5vw, 56px); }
.hero p.lede{ max-width:72ch; font-size:1.1rem; margin:.4rem 0 1rem }

/* Buttons */
.btn{
  display:inline-block; background:#fff; color:var(--forest);
  padding:12px 18px; border-radius: var(--radius); text-decoration:none; font-weight:700; box-shadow:var(--shadow);
}
.btn:hover{ filter:brightness(.95) }
.btn-green{ background:var(--forest); color:#fff }
.btn-outline{ background:transparent; color:#fff; border:2px solid #fff }

/* ===== Sections / Cards ===== */
.section{ padding: 42px 0 }
.section h2{
  font-family: Archivo, Inter, sans-serif; font-weight:800;
  font-size: clamp(22px, 3vw, 32px); margin:0 0 10px;
}
.section p.lead{ color:var(--muted); max-width:78ch }

.cards{
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top:18px;
}
.card{
  background:#fff; border-radius: var(--radius); padding:18px; box-shadow: var(--shadow);
}
.card h3{
  font-family: Archivo, Inter, sans-serif; font-weight:800; margin:0 0 6px; font-size:1.2rem;
}
.card p{ margin:.3rem 0 .6rem }
.text-link{ font-weight:700; color:var(--forest); text-decoration:none }
.text-link:hover{ text-decoration:underline }

/* Stat chips */
.stats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:14px; margin-top:14px }
.stat{ background:#fff; border-radius:12px; padding:16px; box-shadow:var(--shadow); text-align:center }
.stat .num{ font-family: Archivo, Inter, sans-serif; font-weight:800; font-size: clamp(22px, 3.4vw, 34px); color:var(--heat2) }
.stat .label{ color:var(--muted); font-weight:600 }

/* Callout */
.callout{
  background:#fff; border-left:6px solid var(--heat1); padding:18px; border-radius:12px; box-shadow:var(--shadow);
}

/* Footer */
.site-footer{ padding:24px 0; color:#fff; background:var(--forest); margin-top:40px }
.site-footer p{ margin:0; font-size:.95rem }

/* Utility */
.mt-s{margin-top:10px} .mt-m{margin-top:18px} .mt-l{margin-top:28px}