/*
  Donate page: payment methods and the Stripe giving panel.

  ---------------------------------------------------------------------
  GHANA FLAG TREATMENT (CEO direction)
  ---------------------------------------------------------------------
  Ghanaian payment methods carry the national colours as their background.
  The official flag values are used, not approximations:

      red   #CE1126     gold  #FCD116     green #006B3F     star #000000

  The card body is the flag's GREEN, with the full tricolour and the black
  star banded across the top. Green is the right field of the three because
  it is the only one that carries light text at an accessible ratio.
  Measured in the browser, not estimated:

      #FFFFFF on #006B3F  =  6.61:1   headings, values       (AA, AAA large)
      #1A1A1A on #FCD116  = 11.83:1   the GHANA chip         (AAA)
      #FFE066 on #006B3F  =  5.07:1   small mono labels      (AA)

  That last one is the compromise worth explaining. True flag gold #FCD116
  on the green measures 4.49:1 — it FAILS AA for normal text by a hair, and
  the labels are 11px. So the authentic gold is kept everywhere it is not
  small text (the tricolour band, the region chip's background, hover
  borders), and the labels use a lighter tint of the same hue. It still
  reads unmistakably as the flag's gold; it just clears the threshold.

  Putting body copy on the red (≈4.1:1 for white) or on the gold (≈1.4:1
  for white) would have failed outright, which is why the tricolour is a
  band across the top rather than the text's own backdrop.
*/

:root{
  --gh-red:#CE1126;
  --gh-gold:#FCD116;
  --gh-green:#006B3F;
  --gh-green-deep:#005632;
  --gh-star:#000000;
  /* Legible tint of the flag gold, for small text on the green only. */
  --gh-gold-text:#FFE066;
}

.m-pay{padding-block:var(--section-y);}

/* Fixed column counts rather than auto-fit. auto-fit with minmax(280px)
   produced four columns at desktop, which left the fifth method orphaned
   on a row by itself; three columns gives a clean 3 + 2. Cards stretch to
   match their row (the default align-items), so a row never comes out
   ragged the way it did with align-items:start. */
.m-pay-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--s-5);
}
@media (max-width:1100px){ .m-pay-grid{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:640px){  .m-pay-grid{grid-template-columns:minmax(0,1fr);} }

.m-pay-card{
  position:relative;
  /* Each card is its own query container, so the detail rows can switch
     between stacked and two-column based on the width THIS card actually
     got — not on the viewport, which tells you nothing about a card inside
     a three-column grid. */
  container-type:inline-size;
  height:100%;
  display:flex;flex-direction:column;gap:var(--s-4);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--card-radius);
  padding:var(--s-6);
  overflow:hidden;
  transition:border-color var(--dur-mid) var(--ease-out),
             box-shadow var(--dur-mid) var(--ease-out),
             transform var(--dur-mid) var(--ease-out);
}
.m-pay-card:hover{
  border-color:var(--accent-line);box-shadow:var(--shadow-sm);transform:translateY(-4px);
}

.m-pay-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
}
.m-pay-index{
  font-family:var(--font-mono);font-size:var(--t-mono);font-weight:500;
  letter-spacing:.12em;color:var(--ink-faint);font-variant-numeric:tabular-nums;
}
.m-pay-region{
  font-family:var(--font-mono);font-size:var(--t-mono);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-2-deep);background:var(--accent-2-light);
  padding:4px var(--s-3);border-radius:999px;
}

.m-pay-card h3{margin:0;font-size:var(--t-h4);}

/* Detail rows as a definition list: label left, value right, hairline
   between. Account numbers get tabular figures so they are readable and
   checkable digit by digit. */
/* Stacked is the NARROW-card layout. Side by side in a ~300px card left
   the value about 140px wide, which broke "Idaho Central Credit Union"
   across four lines and split a 13-digit account number mid-number — a
   donor copying bank details has to be able to read them unbroken. Once a
   card is wide enough (the container query below) the two-column form
   comes back, because it is far more compact and scannable. */
.m-pay-rows{
  margin:0;display:flex;flex-direction:column;gap:var(--s-4);
  /* Pushes the card's foot down so every card in a row ends level. */
  margin-bottom:auto;
}
.m-pay-rows dt{
  font-family:var(--font-mono);font-size:var(--t-mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:2px;
}

/* 300px, not 340px: a container query measures the container's CONTENT
   box, and these cards carry 32px of padding each side. A 392px card is
   only 326px of queryable width, so a 340px threshold never matched and
   every card stayed stacked. */
@container (min-width: 300px){
  .m-pay-rows{
    display:grid;grid-template-columns:minmax(5.5rem, auto) minmax(0, 1fr);
    gap:var(--s-3) var(--s-4);align-items:baseline;
  }
  .m-pay-rows dt{margin-bottom:0;}
  .m-pay-rows dd{font-size:var(--t-sm);}
  .m-pay-rows .m-pay-note{grid-column:1 / -1;}
}
.m-pay-rows dd{
  margin:0;font-size:var(--t-body);color:var(--ink);line-height:1.4;
  font-variant-numeric:tabular-nums;
  /* "anywhere", not "break-word": an email address has no break
     opportunity, and in the two-column layout its value track is narrow
     enough that break-word let srefusa@help4selfreliance.org run past the
     card edge. Only "anywhere" counts toward the track's intrinsic minimum,
     so the column can actually shrink to fit. */
  overflow-wrap:anywhere;
}
/* Account and reference numbers read as data: mono, selectable as a unit. */
.m-pay-rows dd{font-family:var(--font-mono);letter-spacing:.01em;}
/* A line with no "Label:" is prose, not data — it keeps the body font and
   must out-rank the mono rule that styles account numbers above. */
.m-pay-rows .m-pay-note{
  margin:0;font-family:var(--font-body);font-size:var(--t-sm);
  letter-spacing:0;color:var(--ink-soft);line-height:1.6;
}

/* A method can carry a scannable code (Venmo / PayPal). It sits inside the
   card it belongs to rather than floating in a panel further up the page —
   which is what the parent theme did, and why its card's copy said "scan
   the QR code above" and pointed at nothing once the layout changed. */
.m-pay-qr{
  margin:0;display:flex;flex-direction:column;gap:var(--s-3);
  align-items:flex-start;
}
.m-pay-qr img{
  /* The bundled code is pre-cropped square, so `cover` crops nothing. It is
     here so a staff upload of any shape still fills the tile cleanly rather
     than letterboxing into white bars the way the uncropped 571x369
     original did. */
  width:100%;max-width:260px;aspect-ratio:1;object-fit:cover;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-md);
}
.m-pay-qr figcaption{
  font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- Ghana ---------- */
.m-pay-card.is-ghana{
  background:var(--gh-green);
  border-color:var(--gh-green-deep);
  /* Clears the tricolour band at the top. */
  padding-top:calc(var(--s-6) + 14px);
}
.m-pay-card.is-ghana:hover{
  border-color:var(--gh-gold);box-shadow:0 26px 50px -26px rgba(0,86,50,.6);
}

/* The flag: three equal bands with the black star centred on the gold. */
.m-pay-flag{
  position:absolute;top:0;left:0;right:0;height:14px;
  display:flex;flex-direction:column;
  pointer-events:none;
}
.m-pay-flag i{flex:1;display:block;position:relative;}
.m-pay-flag-red{background:var(--gh-red);}
.m-pay-flag-gold{background:var(--gh-gold);}
.m-pay-flag-green{background:var(--gh-green);}
.m-pay-flag-gold svg{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:9px;height:9px;
}

.m-pay-card.is-ghana h3{color:#FFFFFF;}
.m-pay-card.is-ghana .m-pay-index{color:rgba(255,255,255,.72);}
.m-pay-card.is-ghana .m-pay-region{
  background:var(--gh-gold);color:#1A1A1A;   /* 12.6:1 — the flag's own gold */
}
.m-pay-card.is-ghana .m-pay-rows dt{color:var(--gh-gold-text);}  /* 5.07:1 */
.m-pay-card.is-ghana .m-pay-rows dd{color:#FFFFFF;}          /* 6.69:1 */
.m-pay-card.is-ghana .m-pay-note{color:rgba(255,255,255,.88);}
.m-pay-card.is-ghana a{color:var(--gh-gold-text);text-decoration:underline;text-underline-offset:3px;}
.m-pay-card.is-ghana a:hover{color:#FFFFFF;}

@media (prefers-reduced-motion: reduce){
  .m-pay-card:hover{transform:none;}
}

/*
  ---------------------------------------------------------------------
  STRIPE GIVING PANEL
  ---------------------------------------------------------------------
*/
.m-give{padding-block:var(--section-y);background:var(--surface-2);}
.m-give-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);
  gap:clamp(var(--s-7), 5vw, var(--s-10));align-items:start;
}
.m-give-copy{display:flex;flex-direction:column;gap:var(--s-5);}
.m-give-copy h2{margin:0;}

.m-give-points{
  list-style:none;margin:var(--s-3) 0 0;padding:0;
  display:flex;flex-direction:column;gap:var(--s-4);
}
.m-give-points li{
  display:flex;align-items:baseline;gap:var(--s-4);
  padding-top:var(--s-4);border-top:1px solid var(--line);
}
.m-give-points strong{
  font-family:var(--font-display);font-size:var(--t-h3);font-weight:600;
  color:var(--accent);letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  flex:none;min-width:5ch;
}
.m-give-points span{color:var(--ink-soft);font-size:var(--t-sm);line-height:1.5;}

/* ---------- Panel ---------- */
.m-give-panel{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--card-radius);padding:clamp(var(--s-6), 3.5vw, var(--s-8));
  box-shadow:var(--shadow-sm);
  position:sticky;top:clamp(88px, 12vh, 120px);
}
@media (max-width:900px){ .m-give-panel{position:static;} }

.m-give-msg{
  margin:0 0 var(--s-5);padding:var(--s-4) var(--s-5);
  border-radius:var(--radius-sm);font-size:var(--t-sm);line-height:1.55;
}
.m-give-msg.is-ok{background:var(--accent-tint);color:var(--accent);border:1px solid var(--accent-line);}
.m-give-msg.is-err{background:#FDECEC;color:#9B1C1C;border:1px solid #F3C9C9;}
.m-give-msg.is-note{background:var(--accent-2-light);color:var(--accent-2-deep);border:1px solid var(--accent-2-light);}

/* The honeypot must be unreachable, not merely invisible: display:none
   alone is a pattern some bots check for, and a purely visual offset would
   still be focusable by keyboard. */
.m-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.m-give-amounts{border:0;padding:0;margin:0 0 var(--s-5);}
.m-give-amounts legend{
  font-family:var(--font-mono);font-size:var(--t-mono);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  padding:0;margin-bottom:var(--s-4);
}
.m-give-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);}
.m-give-chip{position:relative;display:block;cursor:pointer;}
.m-give-chip input{
  position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;
}
.m-give-chip span{
  display:flex;align-items:center;justify-content:center;
  padding:var(--s-4) var(--s-2);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);
  font-family:var(--font-mono);font-size:var(--t-body);font-weight:500;
  color:var(--ink);font-variant-numeric:tabular-nums;
  transition:border-color var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
.m-give-chip input:checked + span{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.m-give-chip input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px;}
.m-give-chip:hover input:not(:checked) + span{border-color:var(--accent);}

.m-give-custom{margin-top:var(--s-4);}
.m-give-custom label{
  display:block;font-family:var(--font-mono);font-size:var(--t-mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:var(--s-2);
}
.m-give-custom input{
  width:100%;padding:var(--s-4);border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);
  font-family:var(--font-body);font-size:var(--t-body);color:var(--ink);
}

.m-give-recurring{
  display:flex;align-items:center;gap:var(--s-3);
  margin-bottom:var(--s-5);padding:var(--s-4);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);cursor:pointer;font-size:var(--t-sm);
}
.m-give-recurring input{width:18px;height:18px;accent-color:var(--accent);flex:none;}

.m-give-fields{display:flex;flex-direction:column;gap:var(--s-4);margin-bottom:var(--s-5);}
.m-give-fields .field{display:flex;flex-direction:column;gap:var(--s-2);}
.m-give-fields label{
  font-family:var(--font-mono);font-size:var(--t-mono);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
}
.m-optional{text-transform:none;letter-spacing:0;color:var(--ink-faint);}
.m-give-fields input{
  padding:var(--s-4);border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);font-family:var(--font-body);
  font-size:var(--t-body);color:var(--ink);
}
.m-give-fields input:focus{
  border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-wash);
}

.m-give-submit[disabled]{opacity:.7;cursor:progress;}

.m-give-secure{
  display:flex;align-items:center;justify-content:center;gap:var(--s-2);
  margin:var(--s-4) 0 0;
  font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);
}
.m-give-secure svg{width:13px;height:13px;flex:none;}

@media (max-width:900px){
  .m-give-grid{grid-template-columns:1fr;}
}
@media (max-width:420px){
  .m-give-chips{grid-template-columns:repeat(2,1fr);}
}