/* Gather + Give — ported from Squarespace 7.1
   Palette and type taken from the original site tweak settings. */

:root {
  /* Tonal scale off the original Squarespace accent hue (162deg). The base
     --sage is the brand mid-tone and is unchanged; the steps either side let
     fills, text and hovers sit at different depths instead of all landing on
     the same flat mid-green.

     Contrast note: white on --sage is only 4.34:1, which is below AA for
     normal-size text. Solid fills carrying white text therefore use --sage-700
     (7.36:1) or --sage-900 (12.2:1), and sage text on a light ground uses
     --sage-700 (6.74:1 on --sage-050). */
  --sage-050: #f1f6f5;
  --sage-100: #e0ebe8;
  --sage-200: #c2d6d0;
  --sage-300: #99b8af;
  --sage: #5f8076;
  --sage-700: #3d5c53;
  --sage-900: #223a33;
  --sage-dark: #4d6a61;
  --charcoal: #454342;
  --ink: #1c1b1a;
  --light: #f2f2f2;
  --white: #ffffff;
  --max: 1200px;
  --gutter: clamp(20px, 6vw, 64px);
  --section-y: clamp(56px, 9vw, 112px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .nav-link, .btn {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}

h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.2; font-weight: 600; }
h1 { font-size: clamp(34px, 6vw, 62px); letter-spacing: 0.04em; }
h2 { font-size: clamp(26px, 3.6vw, 38px); letter-spacing: 0.06em; }
h3 { font-size: clamp(19px, 2.2vw, 24px); }
h4 { font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--sage-700); }

img { max-width: 100%; display: block; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }
/* Causes + FAQ share this width: at full bleed it makes each of the three
   columns ~10% wider than the standard --max wrap. */
.wrap--wide { max-width: 1300px; }

.section { padding: var(--section-y) 0; }
/* Sage-tinted off-white rather than neutral grey, so the light bands read as
   part of the same family as the accent. */
.section--light { background: var(--sage-050); }
.section--sage {
  background: linear-gradient(158deg, var(--sage-700) 0%, var(--sage-900) 100%);
  color: var(--white);
}
.section--sage a { color: var(--white); }

.eyebrow {
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-700);
  margin-bottom: 14px;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--sage-100);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 84px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.logo { margin-right: auto; }
.logo img { height: 44px; width: auto; }
.logo__text {
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--charcoal);
  text-decoration: none;
}

.nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); }

.nav-link {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: none;
  white-space: nowrap;
}
.nav-link:hover { color: var(--sage-700); }

.social { display: flex; gap: 14px; }
.social a { color: var(--charcoal); line-height: 0; }
.social a:hover { color: var(--sage-700); }
.social svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  position: relative;
  /* Also used on <button> now, which otherwise inherits UA font and chrome. */
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding: 15px 30px;
  /* --sage-700, not --sage: the label is 13px, and white on the mid-tone is
     below AA at that size. */
  background: var(--sage-700);
  color: var(--white);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--sage-700);
  transition: background-color 0.2s ease, border-color 0.2s ease,
              transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover,
.btn:focus-visible {
  background: var(--sage-900);
  border-color: var(--sage-900);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -8px rgba(34, 58, 51, 0.55);
}
.btn:active { transform: translateY(0); box-shadow: 0 2px 6px -3px rgba(34, 58, 51, 0.5); }
.btn:focus-visible { outline: 2px solid var(--sage-200); outline-offset: 3px; }

.btn--sm { padding: 11px 22px; font-size: 12px; }
.btn--ghost { background: transparent; color: var(--white); border-color: var(--white); }
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--white);
  color: var(--sage-900);
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color 0.2s ease, border-color 0.2s ease; }
  .btn:hover, .btn:focus-visible, .btn:active { transform: none; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: clamp(420px, 68vh, 620px);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--white);
  background: var(--charcoal);
  overflow: hidden;
}
.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(28, 27, 26, 0.42);
}
.hero__inner { position: relative; z-index: 1; padding: 60px var(--gutter); }
.hero h1 { text-transform: uppercase; }
.hero h3 { font-weight: 400; margin-bottom: 28px; }

/* ---------- galleries ---------- */

.grid { display: grid; gap: 14px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }


/* ---------- partners ---------- */

.partners { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.partner { display: flex; flex-direction: column; }
.partner p { font-size: 15px; }

/* The share line sits at the bottom of the card. margin-top:auto makes the
   three lines align with each other even though the descriptions above them
   are different lengths (grid stretches the cards to equal height). */
.partner .partner__share {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 14px;
  border-top: 1px solid var(--sage-200);
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  /* Not --sage: that is below AA on a light ground. --sage-700 is 6.74:1. */
  color: var(--sage-700);
}
.partner .partner__share strong { font-weight: 600; font-size: 18px; }

/* ---------- totals ---------- */

/* Blocks stacked inside a single section (Who We Are / photos / How It Works,
   and Partner Causes / FAQs) - the section supplies the outer padding, these
   supply the rhythm between the blocks inside it. */
.block + .block,
.faq-block { margin-top: clamp(44px, 6vw, 76px); }
.faq-block .acc { margin-top: 32px; }

/* minmax(0, 1fr), not 1fr: the "LOCAL EDUCATION" label is wider than its
   track and would blow the column out, making the three cells unequal. The
   share bars are percentages of their own cell, so unequal cells would stop
   them being comparable to each other. */
.totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 36px; text-align: center; }
.totals .amount {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(26px, 3.4vw, 40px);
  display: block;
  /* Fixed-width digits: without this the figures jitter while counting. */
  font-variant-numeric: tabular-nums;
}
.totals .label { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }

/* The rule under each figure is as wide as that cause's share of the total, so
   it doubles as a bar chart of the 50/40/10 split. */
.totals .share-bar {
  display: block;
  width: calc(var(--share) * 1%);
  height: 2px;
  margin: 16px auto 12px;
  background: rgba(255, 255, 255, 0.45);
  transform-origin: center;
}
/* .is-armed is added by script, so with JS off the bars render at full width. */
.totals.is-armed .share-bar { transform: scaleX(0); }
.totals.is-live .share-bar {
  transform: scaleX(1);
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .totals .share-bar { transform: none !important; transition: none !important; }
}

/* ---------- accordion / faq ---------- */

.acc { border-top: 1px solid rgba(69, 67, 66, 0.18); }
.acc details { border-bottom: 1px solid rgba(69, 67, 66, 0.18); }

/* On the home page the FAQs run as three columns, one question each, on the
   same grid as the partner cards above so the two rows of columns line up.
   Scoped to .faq-block - the Event Info accordion stays stacked. */
.faq-block .acc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
  border-top: 0;
}
.faq-block .acc details {
  border-top: 1px solid var(--sage-200);
  border-bottom: 1px solid var(--sage-200);
  align-self: start;
}

/* The FAQs sit on the sage band, so the accordion has to invert: light
   hairlines, light marker, and an eyebrow that reads on a dark ground. */
.section--sage .acc details {
  border-top-color: rgba(255, 255, 255, 0.28);
  border-bottom-color: rgba(255, 255, 255, 0.28);
}
.section--sage .acc summary::after { color: rgba(255, 255, 255, 0.75); }

.faq-eyebrow {
  display: block;
  margin-bottom: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.faq-q { display: block; }
.acc summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 40px 20px 0;
  position: relative;
  font-family: "Montserrat", sans-serif;
  font-size: 17px;
}
.faq-block .acc summary { font-size: 16px; line-height: 1.35; }
/* The marker lines up with the question, not the middle of the whole block. */
.faq-block .acc summary::after { top: auto; bottom: 22px; transform: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--sage-700);
}
.acc details[open] summary::after { content: "\2013"; }
.acc .acc__body { padding: 0 0 22px; }
.acc .acc__body p { font-size: 16px; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--charcoal);
  color: var(--white);
  padding: 56px 0;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; }
.site-footer .spacer { margin-left: auto; }

/* ---------- side drawer ---------- */

/* A <dialog> reset into a right-hand slide-over. The browser gives us focus
   containment, Escape and an inert background; this only handles looks. */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  width: min(480px, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
  border: 0;
  background: var(--white);
  color: var(--ink);
  box-shadow: -20px 0 60px -30px rgba(28, 27, 26, 0.5);
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer[open] { display: flex; flex-direction: column; }
.drawer.is-open { transform: translateX(0); }
.drawer::backdrop { background: rgba(28, 27, 26, 0.45); }

.drawer__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px clamp(18px, 4vw, 28px);
  border-bottom: 1px solid var(--sage-100);
}
.drawer__title {
  flex: 1;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-700);
}
.drawer__close {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--sage-200);
  background: transparent;
  color: var(--charcoal);
  font-family: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease;
}
.drawer__close:hover,
.drawer__close:focus-visible {
  background: var(--sage-700);
  border-color: var(--sage-700);
  color: var(--white);
}

.drawer__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(18px, 4vw, 28px);
}
.drawer__body givebutter-widget { display: block; }
.drawer__fallback { font-size: 15px; }
.drawer__loading {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-700);
}

/* Stop the page behind the panel from scrolling. */
html.drawer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .drawer { transition: none; }
}

/* ---------- utility ---------- */

.center { text-align: center; }
.stack > * + * { margin-top: 22px; }
.note {
  border-left: 3px solid var(--sage-700);
  padding: 4px 0 4px 16px;
  font-size: 15px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 100;
  background: var(--white);
  padding: 10px 16px;
}

@media (max-width: 900px) {
  .partners, .totals, .faq-block .acc { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  /* The header is one row of logo + label + icons + button; at 375px it only
     fits if each piece is tightened, and the label must not wrap. */
  .site-header__inner { min-height: 70px; gap: 10px; }
  .logo img { height: 30px; }
  .nav { gap: 10px; }
  .nav-link { font-size: 11px; letter-spacing: 0.06em; }
  .social { gap: 10px; }
  .social svg { width: 16px; height: 16px; }
  .btn--sm { padding: 10px 13px; font-size: 11px; letter-spacing: 0.1em; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}