/* ============================================================
   DONATE PAGE — Givebutter-backed donation flow
   Inherits global vars + utilities from styles.css
   ============================================================ */

.donate-hero{
  background:var(--ink); color:var(--cream);
  padding:160px 0 96px;
  position:relative; overflow:hidden;
}
.donate-hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 600px at 78% 20%, rgba(179,92,58,.10), transparent 60%),
    radial-gradient(700px 500px at 10% 90%, rgba(217,183,138,.05), transparent 70%);
  pointer-events:none;
}
.donate-hero .wrap{ position:relative; z-index:1; }
.donate-hero .hero-photo{ position:absolute; inset:0; z-index:0; }
.donate-hero .hero-photo img{
  width:100%; height:100%; object-fit:cover; object-position:42% 55%; display:block;
  filter: sepia(0.4) saturate(0.6) contrast(1.03) brightness(0.58) hue-rotate(-6deg);
}
.donate-hero .hero-photo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.8) 44%, rgba(0,0,0,.55) 100%),
    linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,0) 58%);
}
.donate-hero .eyebrow{ color:var(--sand); }
.donate-hero .eyebrow .dot{ background:var(--accent); }
.donate-hero h1{
  margin-top:18px; color:var(--cream);
  font-family:var(--display); font-weight:300;
  font-size:clamp(36px, 4.4vw, 64px);
  line-height:1.04; letter-spacing:-.015em;
  max-width:880px;
  text-wrap:balance;
}
.donate-hero h1 em{ color:var(--accent-2); font-style:italic; font-weight:400; }
.donate-hero .lede{
  margin-top:18px; max-width:620px;
  color:rgba(244,238,221,.78);
  font-size:23px; line-height:1.5;
}
.donate-hero .meta{
  margin-top:36px; font-weight:700;
  display:flex; gap:32px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--sand); opacity:.85;
}
.donate-hero .meta .accent{ color:var(--accent); }

/* ============================================================
   FORM SECTION
   ============================================================ */
.donate-flow{
  background:var(--cream); color:var(--ink);
  padding:80px 0 120px;
}
.donate-flow .inner{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.35fr 1fr; gap:64px;
  align-items:start;
}
.donate-flow .sidehead{
  font-family:var(--mono); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--sage); margin-bottom:12px;
}
.donate-flow .sidehead .num{ color:var(--accent); margin-right:8px; }

/* === Card wrapper === */
.dcard{
  background:#fff; border:1px solid var(--rule);
  padding:36px 36px 32px;
  display:flex; flex-direction:column; gap:22px;
  margin-bottom:24px;
}
.dcard h2{
  font-family:var(--display); font-weight:400; font-size:28px;
  line-height:1.2; margin:0; letter-spacing:-.01em;
  text-wrap:balance;
}
.dcard h2 em{ color:var(--accent); font-style:italic; }

/* === Amount tiers === */
.amounts{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;
}
.amounts .amt{
  appearance:none; -webkit-appearance:none;
  background:#fff; border:1px solid var(--rule);
  padding:18px 12px; cursor:pointer; text-align:center;
  display:flex; flex-direction:column; gap:6px; align-items:center;
  transition:all .15s ease;
}
.amounts .amt:hover{ border-color:var(--ink); }
.amounts .amt.selected{
  border-color:var(--accent); background:rgba(179,92,58,.06);
}
.amounts .amt .v{
  font-family:var(--display); font-weight:300; font-size:28px;
  color:var(--ink); line-height:1; letter-spacing:-.01em;
}
.amounts .amt.selected .v{ color:var(--accent); }
.amounts .amt .l{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--sage); line-height:1.2;
}

.custom-amount{
  display:flex; align-items:center;
  border:1px solid var(--rule); padding:0 16px;
  background:#fff;
}
.custom-amount .currency{
  font-family:var(--display); font-size:24px; color:var(--sage);
  padding-right:6px;
}
.custom-amount input{
  flex:1; border:none; outline:none; background:transparent;
  font-family:var(--display); font-weight:300; font-size:32px;
  padding:14px 0; color:var(--ink);
  letter-spacing:-.01em;
}
.custom-amount .unit{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--sage);
}

/* === Frequency toggle === */
.frequency{
  display:flex; border:1px solid var(--rule); background:#fff;
}
.frequency button{
  flex:1; padding:14px 12px; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink);
  background:transparent; border:none;
  border-right:1px solid var(--rule);
  transition:all .15s ease;
}
.frequency button:last-child{ border-right:none; }
.frequency button.active{
  background:var(--ink); color:var(--cream);
}

/* === Designation === */
.designation select{
  width:100%; appearance:none; -webkit-appearance:none;
  background:#fff; border:1px solid var(--rule);
  padding:14px 16px; padding-right:40px;
  font-family:var(--sans); font-size:15px; color:var(--ink);
  outline:none; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                   linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

/* === Donor info fields === */
.fieldgrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.fieldgrid.full{ grid-template-columns:1fr; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--sage);
}
.field input,
.field textarea{
  font-family:var(--sans); font-size:15px;
  background:transparent; color:var(--ink);
  border:none; border-bottom:1px solid var(--rule);
  padding:10px 0; outline:none; border-radius:0;
  transition:border-color .15s ease;
}
.field textarea{
  resize:vertical; min-height:90px;
  border:1px solid var(--rule); padding:12px 14px;
}
.field input:focus,
.field textarea:focus{ border-bottom-color:var(--accent); }
.field textarea:focus{ border-color:var(--accent); }

.check-row{
  display:flex; gap:12px; align-items:flex-start;
  font-family:var(--sans); font-size:13.5px; line-height:1.5;
  color:var(--ink);
}
.check-row input[type="checkbox"]{
  margin-top:3px; accent-color:var(--accent);
  width:16px; height:16px;
}

/* === Square card placeholder (Web Payments SDK mounts here) === */
#sq-card{
  border:1px solid var(--rule); background:#fff;
  padding:18px 16px; min-height:64px;
  display:flex; align-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--sage);
}
#sq-card:not(.loaded)::before{
  content:"Card field loads when Square is connected";
}
.sq-row{
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px;
}
.sq-row .field input{
  border:1px solid var(--rule); padding:16px;
  font-family:var(--sans); font-size:15px;
}

.payment-logos{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--sage);
  padding-top:8px;
}
.payment-logos .pl-chip{
  padding:4px 10px; border:1px solid var(--rule);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink); background:#fff;
}

/* === Submit === */
.dsubmit{
  display:flex; flex-direction:column; gap:14px;
  margin-top:8px;
}
.dsubmit button{
  width:100%; padding:20px 24px; cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:.24em;
  text-transform:uppercase;
  background:var(--accent); color:var(--cream);
  border:1px solid var(--accent);
  transition:background .15s ease;
}
.dsubmit button:hover{ background:var(--terracotta-2); border-color:var(--terracotta-2); }
.dsubmit .summary{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:14px 0; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--sage);
}
.dsubmit .summary .total{
  font-family:var(--display); font-weight:300; font-size:32px;
  color:var(--ink); letter-spacing:-.01em;
}
.dsubmit .summary .total .term{
  font-family:var(--mono); font-size:11px; color:var(--sage);
  letter-spacing:.22em; margin-left:6px;
}

.fine-print{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--sage); line-height:1.7;
  text-align:center; margin-top:6px;
}

/* ============================================================
   SIDEBAR — trust & impact
   ============================================================ */
.donate-side{
  position:sticky; top:96px;
  display:flex; flex-direction:column; gap:18px;
}
.trust-card{
  border:1px solid var(--rule); background:#fff;
  padding:28px 28px 24px;
  display:flex; flex-direction:column; gap:14px;
}
.trust-card .lab{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--accent);
}
.trust-card h3{
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:22px; line-height:1.2; color:var(--ink);
  margin:0; letter-spacing:-.005em;
}
.trust-card p{
  font-family:var(--sans); font-size:14px; line-height:1.6;
  color:var(--ink); margin:0;
}
.trust-card .stat-row{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  padding-top:14px; border-top:1px solid var(--rule);
}
.trust-card .stat-row .stat{ display:flex; flex-direction:column; gap:4px; }
.trust-card .stat-row .stat .n{
  font-family:var(--display); font-weight:300; font-size:36px;
  color:var(--accent); line-height:1; letter-spacing:-.015em;
}
.trust-card .stat-row .stat .l{
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--sage); line-height:1.4;
}
.trust-card ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:10px;
}
.trust-card li{
  font-family:var(--sans); font-size:13.5px; line-height:1.5;
  color:var(--ink); padding-left:18px; position:relative;
}
.trust-card li::before{
  content:"\25C6"; position:absolute; left:0; top:2px;
  color:var(--accent); font-size:9px;
}

/* ============================================================
   THANK YOU panel (post-submit, hidden by default)
   ============================================================ */
.thanks-panel{ display:none; }
.thanks-panel.show{
  display:flex; flex-direction:column; gap:18px;
  padding:48px 36px; background:#fff;
  border:1px solid var(--accent);
}
.thanks-panel h2{
  font-family:var(--display); font-weight:400; font-size:32px;
  line-height:1.15; color:var(--ink); margin:0; letter-spacing:-.01em;
}
.thanks-panel h2 em{ color:var(--accent); font-style:italic; }
.thanks-panel .lab{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--accent);
}
.thanks-panel p{
  font-family:var(--sans); font-size:15px; line-height:1.6; color:var(--ink); margin:0;
}

/* ============================================================
   GIVEBUTTER DONATION COLUMN
   ============================================================ */
.give-col{ display:flex; flex-direction:column; align-self:stretch; }
.partner-card{ margin-top:auto; margin-bottom:0; }
.give-intro{
  font-family:var(--sans); font-size:15px; line-height:1.65;
  color:var(--ink); margin:0;
}

/* Embed wrapper — Givebutter mounts its button/iframe inside <givebutter-widget> */
.gb-embed{
  position:relative;
}
.gb-embed givebutter-widget{ display:block; width:100%; }

/* Button widget: the real Givebutter button mounts on the live domain.
   Until then (and in the editor preview) this styled fallback button shows
   and links straight to the Givebutter page so the CTA always works. */
.gb-fallback-btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:20px 24px; cursor:pointer; text-decoration:none;
  font-family:var(--mono); font-size:12px; letter-spacing:.24em;
  text-transform:uppercase;
  background:var(--accent); color:var(--cream);
  border:1px solid var(--accent);
  transition:background .15s ease, border-color .15s ease;
}
.gb-fallback-btn:hover{ background:var(--terracotta-2); border-color:var(--terracotta-2); }

.book-laura-btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:18px 24px; margin-top:12px; cursor:pointer; text-decoration:none;
  font-family:var(--mono); font-size:12px; letter-spacing:.24em;
  text-transform:uppercase;
  background:var(--accent); color:var(--cream);
  border:1px solid var(--accent);
  transition:background .15s ease, color .15s ease;
}
.book-laura-btn:hover{ background:#fff; color:var(--accent); }

/* Assurance strip under the form */
.gb-assurance{
  display:flex; flex-wrap:wrap; gap:18px 26px;
  padding-top:18px; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--sage);
}
.gb-assurance .accent{ color:var(--accent); }

/* Giving tiers reference card */
.give-tiers .tier-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column;
}
.give-tiers .tier-list li{
  display:flex; align-items:baseline; gap:18px;
  padding:14px 0; border-top:1px solid var(--rule);
}
.give-tiers .tier-list li:first-child{ border-top:none; }
.give-tiers .tier-list .t-amt{
  font-family:var(--display); font-weight:300; font-size:24px;
  color:var(--ink); letter-spacing:-.01em; line-height:1;
  flex:0 0 116px;
}
.give-tiers .tier-list .t-lead .t-amt{ color:var(--accent); }
.give-tiers .tier-list .t-name{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--sage); line-height:1.5;
}
.give-tiers .tier-foot{
  font-family:var(--sans); font-size:14px; line-height:1.6;
  color:var(--ink); margin:0; padding-top:4px;
}
.give-tiers .tier-foot a{
  color:var(--accent); border-bottom:1px solid rgba(179,92,58,.32);
}

@media (max-width:980px){
  .donate-flow .inner{ grid-template-columns:1fr; gap:36px; }
  .donate-side{ position:static; }
}

/* ============================================================
   CANDID SILVER SEAL (donate trust column)
   ============================================================ */
.seal-card{ align-items:flex-start; }
.candid-seal{
  display:flex; align-items:center; gap:18px; text-decoration:none;
}
.candid-seal-img{
  width:120px; height:auto; display:block; flex:0 0 auto;
}
/* Fallback medallion shown only if the seal image fails to load */
.candid-seal-badge{ display:none; }
.candid-seal.seal-fallback .candid-seal-badge{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:104px; height:104px; border-radius:50%; flex:0 0 auto; text-align:center;
  background:radial-gradient(circle at 36% 30%, #edeef0, #bcbfc6 68%, #9ba1a9);
  border:3px solid #d2d5db; color:#383b41;
}
.candid-seal-badge .csb-l{
  font-family:var(--display); font-weight:500; font-size:23px; line-height:1;
  letter-spacing:.01em;
}
.candid-seal-badge .csb-s{
  font-family:var(--mono); font-size:7.5px; letter-spacing:.16em;
  text-transform:uppercase; margin-top:4px;
}
.seal-card p{
  font-family:var(--sans); font-size:14px; line-height:1.6; color:var(--ink); margin:0;
}
.seal-link{
  color:var(--accent); border-bottom:1px solid rgba(179,92,58,.32);
  white-space:nowrap;
}
@media (max-width:680px){
  .dcard{ padding:28px 22px; }
  .amounts{ grid-template-columns:repeat(2, 1fr); }
  .fieldgrid{ grid-template-columns:1fr; }
  .sq-row{ grid-template-columns:1fr; }
  .donate-hero{ padding:104px 0 64px; }
  .donate-hero .meta{ justify-content:center; text-align:center; }
  .donate-hero .lede{ font-size:18px; }
  .give-tiers .tier-list li{ flex-direction:column; gap:4px; }
  .give-tiers .tier-list .t-amt{ flex:none; font-size:21px; }
  .gb-fallback{ padding:32px 20px; }
}