/* ============================================
   Give Online (/donate) — SBF-9
   ============================================
   Loaded after css/forms.css, whose segmented control, consent box, character counter and
   message box this form uses as the application form does. The card, bank and wallet fields
   themselves live in Stripe's iframes, styled through the Appearance API in js/donate-form.js
   (Inter, the input radius, the Cardinal focus ring), so nothing here reaches inside them. */
.give-online h3 { margin-bottom: 8px; }
.give-lede { color: var(--gray-600); margin-bottom: 12px; }
.give-tribute-pointer { color: var(--gray-600); margin-bottom: 28px; font-size: 0.95rem; }
/* The hero's jump to the form: on a phone Give Online starts well over a screen down. */
#hero-give { margin-top: 20px; }
/* .btn sets display, which beats the browser's own [hidden] rule: without this the button showed
   while online giving was off. */
#hero-give[hidden] { display: none; }
/* The hero is a 5:1 strip (style.css), and this one holds a heading, a sentence or two and the
   Give online button. Above a phone everything scales with the width, so with the strip, capped at
   the site's desktop sizes; it overflowed the strip at every width from 601px to 1024px. */
@media (min-width: 601px) {
  .hero--page .hero-content { padding: 1.2vw 4vw; }
  .hero--page h1 { font-size: min(4vw, 2.75rem); line-height: 1.15; margin-bottom: 0.5vw; }
  .hero--page .hero-lede { font-size: min(1.7vw, 1.2rem); line-height: 1.3; max-width: 64vw; margin: 0 auto; }
  #hero-give { margin-top: min(1vw, 16px); padding: min(0.6vw, 12px) min(2.4vw, 32px); font-size: min(1.6vw, 1rem); }
}
/* On a phone the last sentence goes (.hero-lede--wide in
   style.css; owner, 2026-10-23: "when the size gets tight, you can remove the last sentence"). */
@media (max-width: 600px) {
  /* In vw, as the strip is, so what fits at 390px (18 / 10 / 11px there) fits at any phone width. */
  .hero--page .hero-content { padding-top: 0.77vw; padding-bottom: 0.77vw; }
  .hero--page h1 { font-size: 4.6vw; margin-bottom: 0.5vw; }
  .hero--page .hero-lede { font-size: 2.56vw; line-height: 1.2; }
  #hero-give { margin-top: 0.77vw; padding: 0.5vw 3.6vw; font-size: 2.82vw; }
}
.give-fieldset { border: 0; padding: 0; margin: 28px 0 24px; min-width: 0; }
.give-fieldset legend { padding: 0; }
.give-online [hidden] { display: none !important; }

/* The amounts are the segmented control the apply form uses, laid out as a 3 × 2 grid so six
   choices fit a phone without shrinking the type. */
.give-amounts { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--control-edge); border-radius: var(--radius-input); overflow: hidden; background: var(--gray-100); }
.give-amounts .segment-opt { padding: 14px 8px; font-size: 1.05rem; font-variant-numeric: tabular-nums; border-right: 2px solid var(--gray-200); border-bottom: 2px solid var(--gray-200); }
.give-amounts .segment-opt:nth-child(3n) { border-right: 0; }
.give-amounts .segment-opt:nth-child(n+4) { border-bottom: 0; }
@media (min-width: 640px) {
  .give-amounts { grid-template-columns: repeat(6, 1fr); }
  .give-amounts .segment-opt { border-bottom: 0; }
  .give-amounts .segment-opt:nth-child(3n) { border-right: 2px solid var(--gray-200); }
  .give-amounts .segment-opt:last-child { border-right: 0; }
}
.give-amount-note { margin-top: 8px; }
.give-other { margin-top: 16px; }
.give-money { position: relative; max-width: 220px; }
.give-money-sign { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--gray-600); font-weight: 600; pointer-events: none; }
.give-money .form-input { padding-left: 32px; font-variant-numeric: tabular-nums; }
.give-online .form-input.is-invalid { border-color: #c62828; }

.give-tribute-toggle { margin-bottom: 20px; }
.give-tribute { border-left: 3px solid var(--cardinal); padding: 4px 0 4px 20px; margin: 0 0 24px; }
.give-tribute .form-group { margin-bottom: 20px; }
.give-tribute-note { font-size: 0.88rem; color: var(--gray-600); margin: 0; }

.give-divider { border-top: 1px solid var(--gray-200); margin: 8px 0 28px; }

/* ── How would you like to give? ── */
.give-fieldset--method { margin-top: 0; }
.give-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
/* As many columns as there are tiles: Card and Bank account alone fill the row on a desktop with no
   wallet, instead of leaving half of it empty; with both wallets, four across. */
@media (min-width: 640px) { .give-methods { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
/* The unselected tile's edge is --control-edge, 3.26:1 on white (WCAG 1.4.11): at --gray-200 the
   Card and Bank tiles read as faint ghosts beside the selected one on a phone. */
.give-method { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 14px 12px; border: 2px solid var(--control-edge); border-radius: var(--radius-input); background: var(--white); cursor: pointer; transition: border-color .15s, background .15s; min-width: 0; }
.give-method input { position: absolute; opacity: 0; width: 0; height: 0; }
.give-method:hover:not(.is-selected) { border-color: var(--gray-600); background: var(--gray-100); }
.give-method.is-selected { border-color: var(--cardinal); background: #fbf4f6; box-shadow: 0 0 0 1px var(--cardinal) inset; }
.give-method:focus-within { outline: 2px solid var(--cardinal); outline-offset: 2px; }
.give-method-icon { height: 26px; display: flex; align-items: center; color: var(--gray-700); margin-bottom: 6px; }
.give-method.is-selected .give-method-icon { color: var(--cardinal); }
.give-method-icon--g { font: 700 1.3rem/1 var(--font-body); background: linear-gradient(90deg,#4285F4 0 25%,#EA4335 25% 50%,#FBBC05 50% 75%,#34A853 75%); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.give-method-name { font-weight: 600; color: var(--black); font-size: 0.95rem; }
.give-method-sub { font-size: 0.8rem; color: var(--gray-500); }

/* ── Stripe's elements ── */
.pe { margin: 4px 0 24px; }
.pe-mount { min-height: 48px; }
.pe-hint { font-size: 0.85rem; color: var(--gray-600); margin: 10px 0 0; }
/* A wallet button mounts once and stays mounted: moving or display:none-ing Stripe's iframe
   reloads it. The one not on show sits off-stage instead, still able to report that it is ready. */
#pe-wallet:not(.is-on) { margin: 0; }
.pe-offstage { position: absolute !important; left: -10000px; top: auto; width: 320px; height: 1px; overflow: hidden; }
.give-mandate { font-size: 0.82rem; color: var(--gray-600); margin: 16px 0 0; padding: 12px 14px; background: var(--gray-100); border-radius: var(--radius-input); line-height: 1.5; }

.give-turnstile { margin: 0 0 16px; }
.give-turnstile-stuck { margin: 0 0 16px; }
.give-checking { margin: 0 0 12px; }
.give-turnstile-stuck p { margin: 0 0 10px; }
.give-decline { margin: 0 0 20px; }
.give-submit { width: 100%; margin-top: 8px; }
.give-submit[disabled] { opacity: 0.75; cursor: progress; transform: none; }
.give-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: give-spin 0.7s linear infinite; vertical-align: -3px; }
@keyframes give-spin { to { transform: rotate(360deg); } }
.give-fine { font-size: 0.82rem; color: var(--gray-500); margin: 16px 0 0; line-height: 1.5; }

.give-thanks { text-align: center; padding: 8px 0; }
.give-thanks:focus { outline: none; }
.give-thanks-mark { width: 56px; height: 56px; border-radius: 50%; background: var(--cardinal); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.give-thanks h3 { font-size: 1.6rem; }
.give-thanks p { max-width: 460px; margin: 0 auto 12px; }
.give-thanks-receipt { font-size: 0.9rem; color: var(--gray-600); }
.give-again { margin-top: 8px; }

/* Other ways to give (check, wire, stock): one card that donate-form.js closes while Give Online
   is showing. The summary names all three methods, so nothing is hidden by name. */
.other-ways { background: var(--white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); margin: 32px 0 24px; }
.other-ways > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 20px 24px; min-height: 56px; border-radius: var(--radius-card); }
.other-ways > summary::-webkit-details-marker { display: none; }
.other-ways > summary:hover { background: var(--gray-100); }
.other-ways > summary:focus-visible { outline: 2px solid var(--cardinal); outline-offset: 2px; }
.other-ways[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.other-ways-text { flex: 1; min-width: 0; }
/* One step below Give Online's h3 at every width: the secondary card's title must never outrank
   the primary card's (the h3 is clamp(1.2rem, 2.5vw, 1.5rem)). */
.other-ways-title { display: block; font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--black); }
.other-ways-list { display: block; margin-top: 2px; font-size: 0.92rem; color: var(--gray-600); }
.other-ways-list .nw { white-space: nowrap; }
.other-ways-toggle { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 0.88rem; font-weight: 600; color: var(--cardinal); }
.other-ways-toggle svg { transition: transform .2s ease; }
.other-ways[open] .other-ways-toggle svg { transform: rotate(180deg); }
.other-ways .when-open, .other-ways[open] .when-closed { display: none; }
.other-ways[open] .when-open { display: inline; }
.other-ways-body { padding: 4px 24px 24px; }
.other-way { padding: 20px 0; border-top: 1px solid var(--gray-200); overflow-wrap: anywhere; }
.other-way h4 { font-family: var(--font-heading); font-size: 1.1rem; margin: 0 0 8px; color: var(--black); }
.other-way p { margin: 0 0 8px; }
.other-way p:last-child { margin-bottom: 0; }
.other-way-address { font-weight: 600; line-height: 1.6; }
.other-way-note { background: #fff3e0; border: 1px solid #ffe0b2; border-radius: var(--radius-input); padding: 12px 16px; margin-top: 12px; }
.other-way-note p { margin: 0; font-weight: 500; color: #bf4500; }
@media (max-width: 480px) {
  .other-ways > summary { padding: 18px 20px; }
  .other-ways-body { padding: 0 20px 20px; }
}
@media (prefers-reduced-motion: reduce) { .other-ways-toggle svg { transition: none; } }

@media (max-width: 480px) {
  .give-online { padding: 24px 20px; }
}