/* ============================================================================
   CLB · DONATE PAGE  (in-house giving — Rocksteady Consulting)
   Loaded ONLY on the /donate page (conditional enqueue in inc/assets.php).
   Two parts:
     1. PAGE BODY — hero / why / give / trust, in the teal+Verdana 125 system,
        reusing the site-wide clb-rebuild.css helpers (.home-section__inner,
        .clb-eyebrow, .btn-clb, .clb-vh).
     2. DONATE MODAL — the proven Stripe Payment Element modal, ported verbatim
        from the live /125years stylesheet (clb-125years.css), scoped to
        .clb125-soon so it never leaks into the rest of the page. The tokens it
        relies on are defined locally below (we do NOT load the 70KB 125 page CSS,
        which carries a global reset that would fight the header/footer).
   Accessibility: every interactive control has a visible :focus-visible outline
   (the 125 stylesheet relied on a global rule we are intentionally not loading).
   ========================================================================== */

/* ───────────────────────── PAGE BODY ───────────────────────── */

/* HERO — teal band, the emotional ask */
.donate-hero {
  background: var(--clb-teal, #063e3e);
  color: var(--clb-cream, #f8f6ee);
  padding: clamp(56px, 9vw, 104px) 24px clamp(52px, 8vw, 92px);
  text-align: center;
}
.donate-hero__inner { max-width: 820px; margin: 0 auto; }
.donate-hero__title {
  font-size: clamp(34px, 6vw, 60px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 18px 0 0;
  color: var(--clb-cream, #f8f6ee);
}
.donate-hero__lead {
  font-size: clamp(17px, 2.1vw, 20px);
  line-height: 1.6;
  margin: 20px auto 0;
  max-width: 660px;
  color: rgba(248, 246, 238, 0.86);
}
.donate-hero__cta { margin-top: 32px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* WHY — the stakes, grounded in the prospectus */
.donate-why { background: var(--clb-cream, #f8f6ee); color: var(--clb-ink, #0d1321); padding: clamp(56px, 8vw, 92px) 24px; }
.donate-why__lead {
  font-size: clamp(20px, 2.6vw, 27px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 760px;
  margin: 18px 0 0;
  color: var(--clb-teal, #063e3e);
  text-wrap: pretty;
}
.donate-why__note { font-size: 17px; line-height: 1.6; max-width: 720px; margin: 16px 0 0; color: var(--fg-2, #3a4151); }
.donate-why__grid {
  list-style: none; margin: 44px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.donate-why__grid li {
  border-top: 3px solid var(--clb-beam, #fee065);
  padding: 18px 6px 0;
}
.donate-why__num {
  display: block;
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--clb-teal, #063e3e);
}
.donate-why__label { display: block; margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--fg-2, #3a4151); }

/* GIVE — the inline amount picker, on a contrasting band so it pops */
.donate-give { background: #ffffff; padding: clamp(56px, 8vw, 96px) 24px; }
.donate-give__inner { text-align: center; }
.donate-give__lead { font-size: 18px; line-height: 1.6; max-width: 620px; margin: 14px auto 0; color: var(--fg-2, #3a4151); }

/* two-column layout: impact panel (left) + amount picker (right) */
.donate-give__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
  max-width: 1040px;
  margin: 40px auto 0;
  text-align: left;
}
.donate-give__grid .donate-widget { margin: 0; max-width: none; }

/* IMPACT PANEL — warm, qualitative "what your gift does", beam-accented */
.donate-impact { position: relative; align-self: center; }
.donate-impact__accent {
  display: block;
  width: 56px;
  height: 5px;
  border-radius: 999px;
  background: var(--clb-beam, #fee065);
  margin-bottom: 20px;
}
.donate-impact__title {
  font-size: clamp(23px, 3vw, 31px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--clb-teal, #063e3e);
  margin: 12px 0 0;
  text-wrap: pretty;
}
.donate-impact__mission {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-2, #3a4151);
  margin: 14px 0 0;
  max-width: 48ch;
}
.donate-impact__list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 20px;
}
.donate-impact__list li {
  padding-left: 18px;
  border-left: 3px solid var(--clb-beam, #fee065);
}
.donate-impact__item-title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--clb-ink, #0d1321);
}
.donate-impact__item-desc {
  display: block;
  margin-top: 5px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-2, #3a4151);
  max-width: 46ch;
}

.donate-widget {
  max-width: 560px;
  margin: 36px auto 0;
  background: var(--clb-cream, #f8f6ee);
  border: 1px solid var(--clb-cream-80, #e6e2d3);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 38px);
  box-shadow: 0 24px 60px rgba(6, 62, 62, 0.10), 0 8px 16px rgba(13, 19, 33, 0.05);
  text-align: left;
}

/* frequency toggle */
.donate-widget .freq-row {
  display: flex;
  gap: 6px;
  background: #ffffff;
  border: 1px solid var(--clb-cream-80, #e6e2d3);
  border-radius: 12px;
  padding: 5px;
  margin-bottom: 18px;
}
.donate-widget .freq-btn {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--fg-2, #3a4151);
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.donate-widget .freq-btn:hover { color: var(--clb-teal, #063e3e); }
.donate-widget .freq-btn.active { background: var(--clb-teal, #063e3e); color: var(--clb-cream, #f8f6ee); }

/* amount grid */
.donate-widget .donate__amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.donate-widget .amt-btn {
  border: 1.5px solid var(--clb-cream-80, #e6e2d3);
  background: #ffffff;
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  color: var(--clb-ink, #0d1321);
  padding: 18px 6px;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 80ms ease;
}
.donate-widget .amt-btn:hover { border-color: var(--clb-teal, #063e3e); }
.donate-widget .amt-btn:active { transform: scale(0.98); }
.donate-widget .amt-btn.active {
  background: var(--clb-beam, #fee065);
  border-color: var(--clb-beam, #fee065);
  color: var(--clb-teal, #063e3e);
}

/* custom amount */
.donate-widget .donate__custom-wrap { display: none; position: relative; margin-bottom: 16px; }
.donate-widget .donate__custom-wrap.show { display: block; }
.donate-widget .donate__custom-wrap::before {
  content: "$";
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-size: 17px; font-weight: 700; color: var(--fg-3, #6b7280); pointer-events: none;
}
.donate-widget .donate__custom-input {
  width: 100%;
  padding: 15px 16px 15px 32px;
  border: 1.5px solid var(--clb-cream-80, #e6e2d3);
  border-radius: 12px;
  font-family: inherit;
  font-size: 17px;
  color: var(--clb-ink, #0d1321);
  background: #ffffff;
  box-sizing: border-box;
}
.donate-widget .donate__custom-input:focus {
  outline: none;
  border-color: var(--clb-teal, #063e3e);
  box-shadow: 0 0 0 3px rgba(6, 62, 62, 0.14);
}

/* submit (full width; visual styling from .btn-clb--beam in clb-rebuild.css) */
.donate-widget .donate__submit { width: 100%; display: block; padding: 16px; font-size: 18px; margin-top: 4px; }
.donate-widget .donate__legal {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: #565d6b; /* 5.4:1 on cream — AA (fg-3 #6b7280 was 4.46) */
  text-align: center;
}

/* TRUST / OTHER WAYS — reassurance + mail-in + monthly */
.donate-trust { background: var(--clb-cream, #f8f6ee); color: var(--clb-ink, #0d1321); padding: clamp(52px, 7vw, 84px) 24px; }
.donate-trust__grid {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.donate-trust__card {
  background: #ffffff;
  border: 1px solid var(--clb-cream-80, #e6e2d3);
  border-radius: 14px;
  padding: 26px 24px;
}
.donate-trust__card h3 { font-size: 19px; font-weight: 700; margin: 0 0 8px; color: var(--clb-teal, #063e3e); }
.donate-trust__card p { font-size: 15px; line-height: 1.6; margin: 0; color: var(--fg-2, #3a4151); }
.donate-trust__card a { color: var(--clb-teal, #063e3e); font-weight: 700; }
.donate-trust__legal {
  margin: 30px auto 0;
  max-width: 760px;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: #565d6b; /* 5.4:1 on cream — AA */
}

@media (max-width: 860px) {
  .donate-give__grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    gap: 36px;
  }
  .donate-impact__mission,
  .donate-impact__item-desc { max-width: none; }
}

@media (max-width: 760px) {
  .donate-why__grid { grid-template-columns: repeat(2, 1fr); }
  .donate-trust__grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   DONATE MODAL  (ported verbatim from clb-125years.css, scoped .clb125-soon)
   ===================================================================== */

/* tokens the ported rules depend on — defined locally, never global */
.clb125-soon {
  --clb-teal: #063e3e;
  --clb-ink: #0d1321;
  --clb-beam: #fee065;
  --clb-cream: #f8f6ee;
  --font-sans: "Verdana Pro", Verdana, Geneva, "DejaVu Sans", sans-serif;
  --font-primary: "Verdana Pro", Verdana, Geneva, "DejaVu Sans", sans-serif;
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-pill: 999px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

.clb125-soon .clb-donate-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  justify-content: center;
  overflow-y: auto;
  padding: 24px;
  background: rgba(13, 19, 33, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.clb125-soon .clb-donate-overlay.is-open { display: flex; }

.clb125-soon .clb-donate-modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: auto;
  background: var(--clb-ink);
  color: var(--clb-cream);
  border: 1px solid rgba(254, 224, 101, 0.14);
  border-radius: var(--r-lg);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55);
  font-family: var(--font-primary);
  scrollbar-width: none;
}
.clb125-soon .clb-donate-modal::-webkit-scrollbar { display: none; }
.clb125-soon .clb-donate-modal:focus { outline: none; }

.clb125-soon .clb-donate-close {
  position: absolute;
  top: 18px; right: 18px;
  z-index: 4;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-md);
  background: rgba(248, 246, 238, 0.10);
  color: rgba(248, 246, 238, 0.85);
  cursor: pointer;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.clb125-soon .clb-donate-close:hover {
  background: rgba(248, 246, 238, 0.18);
  color: var(--clb-cream);
}

.clb125-soon .clb-donate-canvas-wrap {
  position: relative;
  height: 200px;
  background:
    radial-gradient(ellipse at 80% 30%, rgba(254, 224, 101, 0.10) 0%, transparent 55%),
    var(--clb-ink);
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.clb125-soon .clb-donate-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.clb125-soon .clb-donate-canvas-badge {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  padding: 11px 22px;
  border: 1px solid rgba(254, 224, 101, 0.45);
  border-radius: var(--r-pill);
  background: rgba(13, 19, 33, 0.55);
}
.clb125-soon .clb-donate-canvas-badge span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clb-beam);
}

.clb125-soon .clb-donate-steps {
  display: flex;
  gap: 9px;
  justify-content: center;
  padding: 22px 0 6px;
}
.clb125-soon .clb-donate-step-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(248, 246, 238, 0.22);
  transition: background 220ms var(--ease-out), width 220ms var(--ease-out);
}
.clb125-soon .clb-donate-step-dot.is-active { background: var(--clb-beam); }

.clb125-soon .clb-donate-track { display: block; }
.clb125-soon .clb-donate-panel {
  padding: 26px 44px 44px;
  animation: clb-donate-fade 360ms var(--ease-out);
}
.clb125-soon .clb-donate-panel[aria-hidden="true"] { display: none; }
@keyframes clb-donate-fade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.clb125-soon .clb-donate-heading {
  font-family: var(--font-sans);
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  color: var(--clb-cream);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.clb125-soon .clb-donate-sub {
  font-size: 16px;
  color: rgba(248, 246, 238, 0.62);
  line-height: 1.5;
  margin-bottom: 24px;
}

.clb125-soon .clb-donate-freq {
  display: flex;
  width: 100%;
  background: rgba(248, 246, 238, 0.05);
  border: 1px solid rgba(248, 246, 238, 0.12);
  border-radius: var(--r-md);
  padding: 5px;
  margin-bottom: 22px;
}
.clb125-soon .clb-donate-freq button {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: rgba(248, 246, 238, 0.6);
  padding: 12px 20px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.clb125-soon .clb-donate-freq button:hover { color: var(--clb-cream); }
.clb125-soon .clb-donate-freq button.is-active,
.clb125-soon .clb-donate-freq button[aria-pressed="true"] {
  background: rgba(254, 224, 101, 0.10);
  color: var(--clb-beam);
}

.clb125-soon .clb-donate-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 26px;
}
.clb125-soon .clb-donate-amount-btn {
  border: 1.5px solid rgba(248, 246, 238, 0.14);
  background: rgba(248, 246, 238, 0.04);
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  color: var(--clb-cream);
  padding: 18px 6px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out), color 150ms var(--ease-out);
}
.clb125-soon .clb-donate-amount-btn:hover {
  border-color: rgba(254, 224, 101, 0.45);
  background: rgba(254, 224, 101, 0.06);
}
.clb125-soon .clb-donate-amount-btn.is-active,
.clb125-soon .clb-donate-amount-btn[aria-pressed="true"] {
  background: var(--clb-beam);
  border-color: var(--clb-beam);
  color: var(--clb-ink);
}

.clb125-soon .clb-donate-custom { margin-bottom: 28px; }
.clb125-soon .clb-donate-custom-label,
.clb125-soon .clb-donate-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clb-beam);
  margin-bottom: 9px;
}
.clb125-soon .clb-donate-custom-wrap { position: relative; }
.clb125-soon .clb-donate-custom-wrap::before {
  content: "$";
  position: absolute;
  left: 18px; top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  font-weight: 700;
  color: rgba(248, 246, 238, 0.45);
  pointer-events: none;
  z-index: 1;
}
.clb125-soon .clb-donate-custom-input,
.clb125-soon .clb-donate-input {
  width: 100%;
  padding: 16px 18px;
  border: 1.5px solid rgba(248, 246, 238, 0.16);
  border-radius: var(--r-md);
  font-family: var(--font-primary);
  font-size: 17px;
  color: var(--clb-cream);
  background: rgba(248, 246, 238, 0.04);
  box-sizing: border-box;
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.clb125-soon .clb-donate-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f8f6ee' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}
.clb125-soon .clb-donate-select option { color: #0d1321; background: #fff; }
.clb125-soon .clb-donate-custom-input { padding-left: 36px; }
.clb125-soon .clb-donate-custom-input::placeholder,
.clb125-soon .clb-donate-input::placeholder { color: rgba(248, 246, 238, 0.4); }
.clb125-soon .clb-donate-custom-input:focus,
.clb125-soon .clb-donate-input:focus {
  outline: none;
  border-color: var(--clb-beam);
  box-shadow: 0 0 0 3px rgba(254, 224, 101, 0.22);
}

.clb125-soon .clb-donate-continue,
.clb125-soon .clb-donate-submit {
  width: 100%;
  padding: 18px;
  border: 2px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.clb125-soon .clb-donate-continue { background: var(--clb-beam); color: var(--clb-teal); }
.clb125-soon .clb-donate-continue:hover { background: #f5d54b; box-shadow: 0 0 26px rgba(254, 224, 101, 0.32); }
.clb125-soon .clb-donate-submit {
  background: var(--clb-beam);
  border-color: var(--clb-beam);
  color: var(--clb-teal);
}
.clb125-soon .clb-donate-submit[aria-busy="true"],
.clb125-soon .clb-donate-submit:disabled { opacity: 0.65; cursor: not-allowed; }
.clb125-soon .clb-donate-submit-note {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(248, 246, 238, 0.55);
  margin-top: 16px;
  text-align: center;
}
.clb125-soon .clb-donate-submit-note a { color: var(--clb-beam); }

.clb125-soon .clb-donate-p2-header { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.clb125-soon .clb-donate-back {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(248, 246, 238, 0.16);
  border-radius: var(--r-md);
  background: rgba(248, 246, 238, 0.04);
  color: var(--clb-cream);
  cursor: pointer;
  transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out);
}
.clb125-soon .clb-donate-back:hover { border-color: rgba(254, 224, 101, 0.45); background: rgba(254, 224, 101, 0.06); }
.clb125-soon .clb-donate-amount-pill {
  font-size: 16px;
  font-weight: 700;
  color: var(--clb-beam);
  background: rgba(254, 224, 101, 0.10);
  border: 1px solid rgba(254, 224, 101, 0.32);
  border-radius: var(--r-pill);
  padding: 9px 20px;
}
.clb125-soon .clb-donate-field { margin-bottom: 20px; }
.clb125-soon .clb-donate-divider { border: 0; height: 1px; background: rgba(248, 246, 238, 0.12); margin: 24px 0; }
.clb125-soon .clb-donate-ded-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 400;
  color: var(--clb-cream);
  cursor: pointer;
}
.clb125-soon .clb-donate-ded-toggle input { width: 22px; height: 22px; accent-color: var(--clb-beam); cursor: pointer; }
.clb125-soon .clb-donate-ded-fields { margin-top: 20px; }
.clb125-soon .clb-donate-ded-fields[aria-hidden="true"] { display: none; }

/* Stripe Payment Element + error region */
.clb125-soon #clb-payment-element { margin-top: 4px; }
.clb125-soon .clb-donate-error {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: rgba(255, 138, 122, 0.12);
  border: 1px solid rgba(255, 138, 122, 0.4);
  color: #ffb3a8;
  font-size: 14px;
  line-height: 1.5;
}
.clb125-soon .clb-donate-success { text-align: left; }
.clb125-soon .clb-donate-success .clb-donate-heading { margin-top: 8px; }

/* ── Visible focus (WCAG 2.4.7) — the 125 stylesheet's global rule is not loaded here ── */
.clb125-soon .clb-donate-close:focus-visible,
.clb125-soon .clb-donate-back:focus-visible,
.clb125-soon .clb-donate-freq button:focus-visible,
.clb125-soon .clb-donate-amount-btn:focus-visible,
.clb125-soon .clb-donate-continue:focus-visible,
.clb125-soon .clb-donate-submit:focus-visible,
.clb125-soon .clb-donate-custom-input:focus-visible,
.clb125-soon .clb-donate-input:focus-visible,
.clb125-soon .clb-donate-ded-toggle input:focus-visible,
.donate-widget .freq-btn:focus-visible,
.donate-widget .amt-btn:focus-visible,
.donate-widget .donate__custom-input:focus-visible {
  outline: 3px solid var(--clb-beam, #fee065);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .clb125-soon .clb-donate-panel { padding: 22px 24px 32px; }
  .clb125-soon .clb-donate-amounts { grid-template-columns: repeat(2, 1fr); }
  .clb125-soon .clb-donate-canvas-wrap { height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .clb125-soon .clb-donate-panel { animation: none; }
  .clb125-soon .clb-donate-canvas { display: none; }
}