/* ============================================================
   Donate page only. Loaded after style.css; builds on its tokens.
   ============================================================ */

/* ---------- two-column frame: persuasion left, form pinned right ---------- */

.give-head { padding-top: clamp(118px, 15vh, 160px); }

.give-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
  grid-template-areas: "intro form" "story form";
  column-gap: clamp(36px, 5vw, 76px);
  align-items: start;
}
.give-intro { grid-area: intro; min-width: 0; }
.give-story { grid-area: story; min-width: 0; }
.give-form  { grid-area: form; min-width: 0; align-self: stretch; }

.give-intro .support { max-width: 40ch; margin-top: 2rem; }

/* the form stays on screen while the left column scrolls. Givebutter grows the
   frame at each checkout step, so the pinned box is capped to the viewport and
   scrolls inside itself instead of being cut off */
.give-sticky {
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.give-sticky iframe { display: block; width: 100%; border: none; border-radius: 12px; }

#give-now, .give-block, .give-acc > details { scroll-margin-top: 104px; }

/* ---------- trust strip (directly beneath the form) ---------- */

.trust { margin-top: .9rem; }
.trust-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .68rem;
  font-weight: 500;
  opacity: .7;
}
.trust-secure svg { width: 13px; height: 13px; flex: none; }
.trust-row {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 14px;
  align-items: center;
  margin-top: .7rem;
}
.trust-row .trust-seal { width: 68px; margin: 0; }
.trust-row p { font-size: .84rem; line-height: 1.45; opacity: .7; }
.trust .trust-contact { margin-top: .7rem; font-size: .88rem; }

/* ---------- persuasion blocks ---------- */

.give-block { margin-top: clamp(56px, 9vh, 96px); }
.give-block > .kicker { margin-bottom: clamp(1.1rem, 2.4vh, 1.8rem); }

/* elder clip */
.give-clip video { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--forest); }

/* while Givebutter loads, the form's spot shows a quiet placeholder instead of an empty gap */
.gb-wrap { position: relative; min-height: 530px; border-radius: 12px; background: var(--cream-deep); animation: gbPulse 1.1s ease-in-out infinite alternate; }
.gb-wrap.loaded { min-height: 0; background: transparent; animation: none; }
@keyframes gbPulse { from { opacity: 1; } to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .gb-wrap { animation: none; } }

/* three statistics */
.facts { list-style: none; border-top: 1px solid var(--line); }
.facts li { padding: 22px 0; border-bottom: 1px solid var(--line); font-size: 1.08rem; line-height: 1.6; }
.facts strong { font-weight: 500; }

/* impact ladder, as a dark card inside the column */
.give-card { border-radius: 16px; padding: clamp(24px, 3.4vw, 40px); }
.give-card > .kicker { margin-bottom: .4rem; }
.give-card .tier { padding: 22px 0; }
.give-card .tier .amt { font-size: clamp(1.35rem, 2.1vw, 1.8rem); }
.give-card .tier p { font-size: 1rem; }
@media (min-width: 861px) {
  .give-card .tier { grid-template-columns: 11.5rem minmax(0, 1fr); gap: 20px; }
}

/* ---------- accordions (FAQ + Ways to Give) ---------- */

.give-acc { border-top: 1px solid var(--line); }
.give-acc > details { border-bottom: 1px solid var(--line); }
.give-acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.4;
}
.give-acc summary::-webkit-details-marker { display: none; }
/* open/close mark sits on the right */
.give-acc summary::after {
  content: '';
  flex: none;
  width: 14px; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  opacity: .7;
  transition: transform .25s ease;
}
.give-acc details[open] > summary::after {
  background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat;
}
.give-acc summary:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 4px; }
.acc-body { padding: 2px 0 28px; max-width: 64ch; }
.acc-body h3 { font-weight: 400; font-size: 1.3rem; line-height: 1.3; margin-bottom: .9rem; }
.acc-body p { font-size: 1.02rem; opacity: .9; }
.acc-body p + p, .acc-body p + dl, .acc-body dl + p, .acc-body p + ol, .acc-body ol + p { margin-top: 1em; }
.acc-body a { text-underline-offset: 4px; }
.acc-body ol { list-style: none; }
.acc-body ol li { font-size: 1.02rem; opacity: .9; }
.acc-body ol li + li { margin-top: .7em; }
.acc-body ol strong { font-weight: 500; }
.acc-body .cap {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  font-weight: 500;
  opacity: .65;
  margin-bottom: .8rem;
}
.acc-body blockquote { margin-top: 1em; padding-left: 18px; border-left: 2px solid var(--gold-deep); font-size: 1.02rem; opacity: .9; }
/* the paragraph after the quoted bequest language gets a full extra line of air so it reads as its own thought */
.acc-body blockquote + p { margin-top: 2.2em; }

/* label / value rows for Zelle and bank details */
.detail-rows { border-top: 1px solid var(--line); }
.detail-rows > div {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.detail-rows dt { text-transform: uppercase; letter-spacing: .16em; font-size: .7rem; font-weight: 500; opacity: .6; }
.detail-rows dd { font-size: 1.04rem; overflow-wrap: anywhere; }

/* bridge block above the vehicles, always visible */
.bridge h3 { font-weight: 300; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2; margin-bottom: 1rem; }
.bridge p { max-width: 62ch; }
.bridge p + p { margin-top: 1em; }
.bridge a { text-underline-offset: 4px; }
.bridge + .give-acc { margin-top: clamp(28px, 5vh, 44px); }

.give-disclaimer { margin-top: 28px; font-size: .88rem; line-height: 1.6; opacity: .65; max-width: 70ch; }

/* ---------- phone Give bar ---------- */

.give-bar { display: none; }

@media (max-width: 960px) {
  .give-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "story"; }
  .give-form { margin-top: 1.5rem; }
  .give-sticky { position: static; max-height: none; overflow: visible; max-width: 601px; margin: 0 auto; }

  .give-bar {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    padding: 10px clamp(22px, 5vw, 64px) calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--cream);
    border-top: 1px solid var(--line);
    transform: translateY(110%);
    transition: transform .25s ease;
  }
  .give-bar.show { transform: none; }
  .give-bar .btn { display: block; text-align: center; padding: 14px 20px; }
  /* room so the bar never covers the last line of the footer */
  body.has-give-bar footer { padding-bottom: 96px; }
}

@media (max-width: 860px) {
  .give-head { padding-top: 106px; }
  .give-intro .support { margin-top: 1.2rem; }
  .give-block { margin-top: 52px; }
  .give-acc summary { font-size: 1.05rem; padding: 18px 0; }
  .detail-rows > div { grid-template-columns: 1fr; gap: 2px; }
}