/* ---------- Base / reset-ish ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* ---------- Tokens ---------- */
:root{
  --bg-color:#fff;
  --text-color:#111;

  --accent-color:#f698ba;
  --accent-color-hover:#f47fa8;

  --surface-color:#f9fdc8; /* pale yellow bands */
  --border-color:#d0d5dd;

  --radius-lg:1rem; --radius-md:.5rem; --radius-sm:.25rem;

  /* One grid for everything so edges align */
  --max-width:68rem;   /* tune 64–72rem to match the old site’s feel */
  --gutter: clamp(1rem, 3vw, 2rem);

  /* Fonts */
  --font-hero:"Work Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --font-brand:"Work Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --font-nav:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --font-ui:"Work Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --font-donate:"Poppins",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;

  --line-height:1.5;
  --transition-fast:.15s;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}

html{font-size:100%;-webkit-text-size-adjust:100%;font-synthesis:none;}
body{margin:0;background:var(--bg-color);color:var(--text-color);font-family:var(--font-body);line-height:var(--line-height);text-rendering:optimizeLegibility;}

/* ---------- Global spacing rhythm ---------- */
.section{padding-block: clamp(2.75rem, 4.25vw, 4.5rem);}
.page-wrap{max-width:var(--max-width);width:100%;margin:0 auto;padding-inline: var(--gutter);}
.section--alt{background:var(--surface-color);border-block:1px solid var(--border-color);}
.section--alt:last-of-type { padding-bottom: 3rem; }

/* ---------- Links: no underline; active/hover = pink + bold ---------- */
a{color:inherit;text-decoration:none;font-weight:inherit;}
a:hover, a:focus-visible{color:var(--accent-color);font-weight:600;text-decoration:none;}

/* ---------- A11y focus ---------- */
:focus-visible{outline:3px solid var(--accent-color);outline-offset:2px;}
.skip-link{position:absolute;top:-40px;left:0;background:var(--accent-color);color:#fff;padding:.5rem 1rem;border-radius:var(--radius-sm);z-index:1000;text-decoration:none;}
.skip-link:focus{top:.5rem;left:.5rem;}

/* ---------- Header / nav ---------- */
.site-header{position:absolute;inset-inline:0;top:0;background:transparent;z-index:1000;color:#fff;}
.site-header-inner{display:flex;align-items:center;justify-content:space-between;min-height:4rem;gap:1rem;padding-block:.85rem;}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;font-family:var(--font-brand);font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.6);}
.brand-logo{width:2.25rem;height:2.25rem;display:block;border-radius:50%;}
.brand-line1{font-family:var(--font-brand);font-weight:600;white-space:nowrap;}
.brand-line2{font-size:.8rem;color:rgba(255,255,255,.85);}

/* Desktop nav aligned right; airy gaps; active = pink + bold */
.nav-links{display:none;align-items:center;gap: clamp(1.25rem, 3vw, 2rem);}
.nav-links a{color:#fff;font-family:var(--font-nav);font-weight:400;font-size:.98rem;text-shadow:0 2px 4px rgba(0,0,0,.6);padding:.35rem 0;}
.nav-links a[aria-current="page"]{color:var(--accent-color);font-weight:600;}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--accent-color);font-weight:600;}
.nav-links .button{padding:.55rem 1rem;border-radius:9999px;}
.nav-toggle-btn{background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.4);border-radius:var(--radius-sm);padding:.5rem .6rem;color:#fff;}
@media (min-width:48rem){.nav-links{display:flex}.nav-toggle-btn{display:none}}
.mobile-nav-drawer{display:none;flex-direction:column;background:#fff;border-top:1px solid var(--border-color);}
.mobile-nav-drawer a{padding:1rem;border-bottom:1px solid var(--border-color);color:var(--text-color);}
.mobile-nav-drawer .button--mobile-cta{margin:.75rem 1rem;display:block;text-align:center;border-radius:9999px;}

/* ---------- Hero ---------- */
.hero--with-image{
  background-image:
    linear-gradient(to bottom right, rgba(84,50,237,.95) 0%, rgba(66,20,219,.75) 100%),
    url("../images/lavendar.jpg");
  background-size:cover;background-position:center center;color:#fff;
  padding-top: clamp(5.25rem, 8vw, 7rem); /* room for header */
  padding-bottom: clamp(3rem, 5vw, 4rem);
}

.hero-inner{
  /* same container as header so edges match */
  display:grid;grid-template-columns:1fr;gap: clamp(1.25rem, 3vw, 3rem);
  justify-items:center;align-items:center;text-align:center;
}
@media (min-width:62rem){
  .hero-inner{
    grid-template-columns: minmax(0,1fr) minmax(22rem, 28rem);
    text-align:left;justify-items:start;
  }
}

.hero-text{max-width:46rem;}
.hero-text h1{
  font-family:var(--font-hero);font-weight:600;font-size:clamp(2.75rem,5vw + .5rem,5rem);
  line-height:1.06;letter-spacing:-.008em;margin:0 0 1rem;text-shadow:0 2px 4px rgba(0,0,0,.6);
}
.hero-text p{
  font-family:var(--font-body);font-weight:400;color:#e2e8f0;
  margin:0 0 1.85rem;max-width:48ch;font-size:1.05rem;line-height:1.65;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;}
@media (min-width:62rem){.hero-actions{justify-content:flex-start}}

/* Right edge of image aligns with right edge of nav via justify-self:end */
.hero-media{width:100%;max-width:28rem;justify-self:end;
  border-radius:var(--radius-lg);background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);box-shadow:0 10px 20px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.5);
}
.hero-media img{display:block;width:100%;height:auto;border-radius:var(--radius-lg);}



/* Tighten vertical rhythm between adjacent sections */
.section--flush-bottom { padding-bottom: 0.75rem; } /* was 2rem */
.section--flush-top    { padding-top:    0.75rem; } /* was 2rem */

@media (min-width: 48rem){
  .section--flush-bottom { padding-bottom: 1rem; }
  .section--flush-top    { padding-top:    1rem; }
}

/* Prevent stray top/bottom margins from re-introducing space */
.section--flush-top .content-block > :first-child { margin-top: 0; }
.section--flush-bottom .content-block > :last-child { margin-bottom: 0; }




/* ---------- Buttons ---------- */
.button,.button:link,.button:visited{
  display:inline-block;background:var(--accent-color);color:#fff;font-family:var(--font-ui);font-weight:700;
  text-decoration:none;font-size:.98rem;line-height:1.2;padding:.9rem 1.4rem;border-radius:9999px;border:2px solid var(--accent-color);
  transition:background-color var(--transition-fast) ease,border-color var(--transition-fast) ease,color var(--transition-fast) ease,transform var(--transition-fast) ease;
}
.button:hover,.button:focus-visible{background:var(--accent-color-hover);border-color:var(--accent-color-hover);transform:translateY(-1px);}
.button--outline{background:transparent;color:var(--accent-color);border-color:var(--accent-color);}
.button--outline:hover,.button--outline:focus-visible{background:var(--accent-color-hover);border-color:var(--accent-color-hover);color:#fff;}
/* Donate buttons = Poppins 500 uppercase */
.button--donate{font-family:var(--font-donate);font-weight:500;text-transform:uppercase;letter-spacing:.02em;}

/* ---------- Journey section ---------- */
.journey{max-width:var(--max-width);margin-inline:auto;}
.journey__title{font-family:var(--font-hero);font-weight:600;color:#2b8d24;font-size:1.35rem;margin:0 0 .75rem;}
.journey__lede{font-family:var(--font-body);font-weight:400;margin:0 0 1rem;color:#444;line-height:1.65;}
.journey__social{margin-top:1rem;display:flex;align-items:center;gap:.75rem;}
.label-caps{font-family:var(--font-body);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;color:#444;}
/* Newsletter band eyebrow label on dark bg */
.newsletter-band .label-caps{
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.social-dot{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:9999px;background:#1877f2;color:#fff;font-weight:700;}

/* ---------- Updates / cards ---------- */
.section--updates{padding-block: clamp(2.25rem, 4vw, 4rem);}
.updates__header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom: clamp(1.1rem, 2.5vw, 1.8rem);}
.updates__title{font-family:var(--font-hero);font-weight:600;color:#2b8d24;font-size:1.35rem;margin:0;}
.link-small{font-family:var(--font-donate);font-weight:500;}

.post-grid{display:grid;grid-template-columns:1fr;gap: clamp(1.25rem, 3vw, 1.75rem);}
@media (min-width:48rem){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.post-card{border:1px solid var(--border-color);border-radius:var(--radius-lg);padding: clamp(1rem, 2vw, 1.25rem);background:#fff;display:grid;gap:.75rem;}
.post-card__img{width:100%;height:auto;border-radius:var(--radius-md);background:#f2f2f2;}
.post-card__title{font-family:var(--font-hero);font-weight:600;color:#2b8d24;font-size:1.05rem;margin:.25rem 0;}
.post-card__excerpt{font-family:var(--font-body);font-weight:400;color:#444;margin:0 0 .5rem;}

/* ---------- Newsletter band ---------- */
.newsletter-band{
  background-image:
    linear-gradient(to bottom right, rgba(84,50,237,.95) 0%, rgba(66,20,219,.75) 100%),
    url("../images/lavendar.jpg");
  background-size:cover;background-position:center center;color:#fff;
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
}
.newsletter-inner{max-width:var(--max-width);margin-inline:auto;display:grid;gap: clamp(1rem, 3vw, 2rem);grid-template-columns:1fr;}
@media (min-width:62rem){.newsletter-inner{grid-template-columns:1fr 1fr;align-items:center;}}
.newsletter-left .newsletter-title{font-family:var(--font-hero);font-weight:600;font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem);margin:.5rem 0 1rem;}
.newsletter-panel{background:#f7a8bd;color:#1a1a1a;border-radius:var(--radius-lg);padding: clamp(1rem, 2.5vw, 1.5rem);}
.newsletter-panel__title{font-family:var(--font-hero);font-weight:600;margin:0 0 .5rem;}
.newsletter-panel__lede{font-family:var(--font-body);font-weight:400;margin:0 0 1rem;}
.newsletter-form{display:grid;grid-template-columns:1fr auto;gap:.5rem;}
.newsletter-form input{width:100%;padding:.85rem 1rem;border-radius:9999px;border:1px solid #d4d4d4;font-family:var(--font-body);font-size:.95rem;}
.newsletter-form button{border-radius:9999px;}


    .news-grid{
      display:grid; gap:1.25rem;
      grid-template-columns: 1fr;
    }
    @media (min-width: 56rem){
      .news-grid{ grid-template-columns: 1fr 1fr; }
    }
    .news-card{
      display:flex; gap:1rem; align-items:flex-start;
      background:#fff; border:1px solid var(--border-color);
      border-radius:16px; padding:1rem;
      text-decoration:none; color:inherit;
      transition: box-shadow var(--transition-fast) ease, border-color var(--transition-fast) ease;
    }
    .news-card:hover,.news-card:focus-visible{
      border-color: var(--accent-color);
      box-shadow: 0 8px 24px rgba(0,0,0,.08);
      outline: none;
    }
    .news-thumb{
      width:110px; height:110px; border-radius:12px; object-fit:cover; flex:0 0 auto;
      background:#f2f2f2;
    }
    .news-meta{
      font-size:.9rem; color:#6b7280; margin:.15rem 0 .5rem 0;
    }
    .news-title{
      font-family:"Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      font-weight:600; font-size:1.15rem; line-height:1.3; margin:0 0 .35rem 0;
      color:var(--text-color);
    }
    .news-excerpt{
      font-size:.98rem; color:#374151; margin:.25rem 0 0 0;
    }
    .news-actions{ margin-top:.75rem; display:flex; gap:.5rem; flex-wrap:wrap; }
    .pill{
      display:inline-block; padding:.35rem .6rem; font-size:.78rem; font-weight:600;
      border-radius:9999px; background:var(--surface-color); border:1px solid var(--border-color); color:#3f3f46;
    }



/* ---------- Footer ---------- */
.site-footer{
  background-image:
    linear-gradient(to bottom right, rgba(84,50,237,.95) 0%, rgba(66,20,219,.75) 100%),
    url("../images/lavendar.jpg");
  background-size:cover;background-position:center center;color:#fff;margin-top:0;padding-block: clamp(2rem, 4vw, 2.75rem);
}
.site-footer-inner{max-width:var(--max-width);margin:0 auto;padding-inline:var(--gutter);display:grid;gap:1.75rem;}
@media (min-width:48rem){.site-footer-inner{grid-template-columns:repeat(3,minmax(0,1fr));}}
.footer-col h3{margin:0 0 .75rem;font-family:var(--font-hero);font-weight:600;}
.footer-col p,.footer-col a{margin:0 0 .5rem;color:#e5ecf6;font-size:.94rem;text-decoration:none;text-shadow:0 1px 2px rgba(0,0,0,.6);}
.footer-legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.25);padding-top:1rem;font-size:.85rem;color:#e0e7ff;}
.footer-legal a{color:#e0e7ff;text-decoration:none;}