/* KWP site-wide styles (Sticker Pop).
   Shared by every page: design tokens, base elements, buttons, header and footer.
   Page-only styles stay in that page's <style> block. See context/KWP Sticker Pop - Design Guide.md. */

:root{
  --cream:#FFF8EC;
  --ink:#1F2A24;
  --ink-soft:#4B5A50;
  --leaf:#1FB36B;
  --leaf-deep:#0E8A52;
  --sky:#2BA7E0;
  --grape:#7C5CFF;
  --sun:#FFC32B;
  --coral:#FF6B57;
  --pink:#FF8FB8;
  --yt:#FF0033;
  --font-display:"Fredoka", system-ui, sans-serif;
  --font-body:"Nunito", system-ui, sans-serif;
  --ring: 0 0 0 4px var(--ink);
  --pop: 0 8px 0 rgba(31,42,36,.16);
}

/* base */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--font-body);color:var(--ink);
  background:var(--cream);line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px;}
h1,h2,h3{margin:0;line-height:1.02;font-family:var(--font-display);font-weight:700;}
section{padding:62px 0;position:relative;}
section[id]{scroll-margin-top:90px;}   /* keep anchored sections clear of the sticky header */

/* eyebrow pill */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);
  font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--leaf-deep);background:#fff;border:3px solid var(--ink);
  padding:5px 14px;border-radius:999px;box-shadow:var(--pop);
}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:18px;
  border:3px solid var(--ink);border-radius:999px;padding:12px 22px;
  background:#fff;color:var(--ink);box-shadow:var(--pop);white-space:nowrap;
  transition:transform .12s, box-shadow .12s;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 11px 0 rgba(31,42,36,.18);}
.btn:active{transform:translateY(2px);box-shadow:0 4px 0 rgba(31,42,36,.16);}
.btn:focus-visible{outline:4px solid var(--sun);outline-offset:4px;}
.btn-yt{background:var(--yt);color:#fff;}
.btn-sun{background:var(--sun);}
.btn-leaf{background:var(--leaf);color:#fff;}
.btn-grape{background:var(--grape);color:#fff;}
.yt-ico{width:24px;height:18px;background:#fff;border-radius:6px;display:grid;place-items:center;}
.yt-ico svg{width:12px;height:12px;}

/* header (markup comes from js/layout.js) */
#site-header{min-height:85px;}   /* reserve space so the page doesn't jump while the header loads */
header.nav{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:3px solid var(--ink);}
header.nav .wrap{max-width:1500px;}
.nav-inner{display:flex;align-items:center;gap:28px;min-height:82px;}
.brand{display:flex;align-items:center;gap:11px;}
.brand-logo{height:62px;width:220px;object-fit:contain;display:block;}
nav.links{margin-left:auto;display:flex;gap:16px;align-items:center;}
nav.links a{font-family:var(--font-display);font-weight:500;font-size:17px;padding:9px 6px;border-radius:999px;white-space:nowrap;transition:background .14s,color .14s;}
nav.links a:hover{background:var(--sun);}
.nav-actions{display:flex;align-items:center;gap:14px;flex:none;}
.nav-actions .btn{font-size:17px;padding:10px 18px;}
.nav-actions .btn[aria-current="page"]{background:#fff;}

/* footer (markup comes from js/layout.js) */
footer.site-footer{background:var(--leaf-deep);color:#EAFBF2;border-top:4px solid var(--ink);margin-top:26px;padding:56px 0 30px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;}
.foot-grid h4{font-family:var(--font-display);font-weight:600;font-size:20px;margin:0 0 12px;color:#fff;}
.foot-grid a{display:block;color:#BFEAD3;font-weight:700;padding:4px 0;}
.foot-grid a:hover{color:#fff;}
.foot-brand b{font-family:var(--font-display);font-weight:700;font-size:24px;color:#fff;}
.foot-brand p{color:#A7DDC1;max-width:34ch;font-weight:700;}
.social{display:flex;gap:10px;margin-top:14px;}
.social a{width:44px;height:44px;border-radius:14px;border:3px solid rgba(255,255,255,.45);display:grid;place-items:center;}
.social a:hover{background:rgba(255,255,255,.14);}
.social svg{width:20px;height:20px;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.2);margin-top:30px;padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:14px;color:#8FCBAC;font-weight:700;}

@media(max-width:900px){
  .foot-grid{grid-template-columns:1fr;}
  nav.links{display:none;}
  .nav-inner{gap:14px;}
  .nav-actions{margin-left:auto;gap:10px;}
  .nav-actions .btn{font-size:15px;padding:9px 13px;}
}
@media(max-width:700px){
  .brand{flex:none;}
  .brand-logo{width:170px;height:58px;}
  .nav-donate{display:none;}   /* Donate stays in the page and footer */
}
@media(max-width:480px){
  .wrap{padding:0 22px;}
  .nav-inner{gap:12px;}
  .brand-logo{width:140px;height:54px;}
  .nav-actions .btn-yt .label{display:none;}   /* Subscribe becomes icon-only */
  .nav-actions .btn-yt{padding:9px 11px;}
}
@media(max-width:360px){
  .wrap{padding:0 16px;}
  .brand-logo{width:112px;height:46px;}
  .nav-actions .btn{font-size:14px;padding:8px 11px;}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none !important;}
}