/* ==========================================================================
   THE UNITY CHURCH — GIVE PAGE
   Page-specific section styles only. Loads after foundation.css.
   This page's one committed, drenched moment IS the hero (wine gradient,
   no photo) — the rest of the page stays high-contrast and legible since
   it carries real financial details.
   ========================================================================== */

.give-page-hero {
  background: linear-gradient(135deg, var(--wine) 0%, var(--wine-deep) 100%);
  padding: clamp(6rem, 10vw, 9rem) clamp(1.25rem, 4vw, 3rem) var(--sp-section);
  text-align: center;
}
.give-page-hero-inner { max-width: 720px; margin: 0 auto; }
.give-page-hero h1 { color: var(--cream); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.015em; margin-bottom: var(--sp-4); }
.give-page-hero p { color: rgba(250, 246, 238, 0.88); font-size: var(--text-lg); margin-bottom: var(--sp-4); }
.give-page-verse { font-style: italic; color: var(--gold-soft) !important; font-size: var(--text-base) !important; margin-bottom: var(--sp-8) !important; }

/* -------------------------------------------------------------------------
   Bank transfer accounts
   ------------------------------------------------------------------------- */
.bank-transfer { padding: var(--sp-section) clamp(1.25rem, 4vw, 3rem); max-width: 1100px; margin: 0 auto; }
.bank-transfer-head { text-align: center; max-width: 56ch; margin: 0 auto var(--sp-12); }
.bank-transfer-head h2 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.015em; margin-bottom: var(--sp-3); }
.bank-transfer-head p { color: var(--ink-soft); }

.bank-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.bank-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.bank-card img { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
.bank-card-body { flex: 1; }
.bank-card-body span.bank-purpose {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: var(--sp-2);
}
.bank-card-body h3 { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--sp-2); }
.bank-card-body dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-3); font-size: var(--text-sm); margin-bottom: var(--sp-4); }
.bank-card-body dt { color: var(--ink-soft); }
.bank-card-body dd { margin: 0; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  padding: 0.5rem 1rem;
  font-size: var(--text-xs);
  font-weight: 700;
  transition: background-color 0.3s ease, color 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .copy-btn:hover { background: var(--ink); color: var(--cream); }
}
.copy-btn.is-copied { background: var(--ink); color: var(--cream); }

@media (max-width: 760px) {
  .bank-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Pay with card (Paystack)
   ------------------------------------------------------------------------- */
.pay-card { background: var(--cream-deep); padding: var(--sp-section) clamp(1.25rem, 4vw, 3rem); text-align: center; }
.pay-card-inner { max-width: 560px; margin: 0 auto; }
.pay-card h2 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.015em; margin-bottom: var(--sp-3); }
.pay-card p { color: var(--ink-soft); margin-bottom: var(--sp-8); }
.pay-card-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--r-pill);
  padding: 1rem 2rem;
  font-weight: 700;
  font-size: var(--text-sm);
  transition: transform 0.35s var(--ease-out-quint), background-color 0.3s ease;
}
.pay-card-btn img { height: 22px; width: auto; filter: brightness(0) invert(1); }
@media (hover: hover) and (pointer: fine) {
  .pay-card-btn:hover { background: var(--wine-deep); transform: translateY(-2px); }
}

/* -------------------------------------------------------------------------
   Paystack modal
   paystack_js.js (unchanged, real payment integration) toggles this modal's
   visibility via inline `style.display = "block"/"none"` rather than the
   `hidden` attribute foundation.css expects, and inline styles always win
   over the `[hidden]` rule. So its panel centers itself with absolute
   positioning instead of relying on `.modal`'s flex layout, which keeps it
   centered correctly whether the computed display ends up flex or block.
   ------------------------------------------------------------------------- */
.paystack-modal-logo { text-align: center; margin-bottom: var(--sp-4); }
.paystack-modal-logo img { height: 48px; width: auto; margin: 0 auto var(--sp-2); }
.paystack-modal-logo h3 { font-size: var(--text-base); }
#paystackModal .modal-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: 420px;
  width: calc(100% - 2 * var(--sp-6));
  text-align: center;
}
#paystackModal h4 { font-size: var(--text-lg); margin-bottom: var(--sp-4); }

/* -------------------------------------------------------------------------
   Toast
   ------------------------------------------------------------------------- */
.give-toast {
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-6);
  z-index: var(--z-toast);
  background: var(--ink);
  color: var(--cream);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 600;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out-quint), transform 0.4s var(--ease-out-quint);
}
.give-toast.show { opacity: 1; transform: translateY(0); }