/* ============================================================================
   donate.css — the contribute page
   ============================================================================
   Page-only rules for donate.html. Everything the homepage already solves —
   header, footer, mobile action bar, buttons, chips, contact list, focus ring
   and every colour token — comes from campaign.css and is not repeated here.

   ── WHY THIS PAGE HAS NO FORM ──────────────────────────────────────────────
   The artboard designs this page as a working payment form: pick an amount,
   type a phone number, press "Contribute securely", see "Check your phone —
   an M-PESA request has been sent". There is no payment backend, no gateway
   and no campaign payment account anyone has given us, so none of that can
   happen. A form that
   collects a phone number and then announces a payment prompt that was never
   sent is a lie about money, and this is a real campaign asking real people
   for real shillings.

   So the layout, the sections and the wording survive; the transaction does
   not. Every figure the form would have carried is stated as information
   instead, and the page needs no JavaScript at all.

   ── COLOURS ────────────────────────────────────────────────────────────────
   No new CAMPAIGN colour is defined below — every green, gold and red comes
   from a campaign.css token, so re-skinning the site re-skins this page. Two
   raw values do remain, because campaign.css has no token for either and this
   file may not add one to it:

     • plain #FFF, for card grounds that must be brighter than --panel. This is
       the same literal campaign.css itself uses for text on dark grounds.
     • one rgba() shadow under .mpesa-card: rgba(16, 51, 30, .08), which is
       --brand-deep's own RGB at 8% opacity — a shadow, not a surface colour.

   If a --card and a --shadow token are ever added to campaign.css, both should
   be replaced here. (The header comment used to claim there were no raw values
   at all, which was simply untrue.)

   Two deliberate departures from the artboard's palette are marked in place,
   both for text contrast.
   ========================================================================= */

/* -------------------------------------------------------- contact strip -- */
/* The artboard puts this strip above a static header. This site's header is
   position:fixed, and a second fixed bar would eat a third of a 360px screen,
   so the strip sits below the header spacer and scrolls away. Nothing is lost:
   the same phone number and email are repeated in the page body. */
.don-topbar {
  background: var(--brand-deep);
  color: var(--on-brand-3);
  font-size: 13px;
  letter-spacing: .02em;
}
.don-topbar-inner {
  display: flex; gap: 8px 16px; flex-wrap: wrap;
  justify-content: space-between; align-items: center;
  padding-top: 9px; padding-bottom: 9px;
}
.don-topbar-contact { font-family: var(--mono); }
.don-topbar-note { color: var(--on-brand-1); }
/* The strip is a dark bar carrying a phone number and an email address, which
   is exactly what a real office contact line looks like. Both are placeholders,
   so the badge says so before the number is read — the caveat used to be in the
   page body, several screens down, and in an HTML comment nobody can see. */
.don-topbar-flag {
  display: inline-block;
  margin-right: 9px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent-bright);
  color: var(--brand-deep);
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}

/* ---------------------------------------------------------------- hero -- */
.don-hero {
  background: linear-gradient(160deg, var(--brand), var(--brand-deep));
  color: #FFF;
  text-align: center;
}
.don-hero-inner {
  max-width: 820px;
  padding-top: clamp(48px, 7vw, 84px);
  padding-bottom: clamp(48px, 7vw, 84px);
}
.don-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.08;
  text-wrap: pretty;
}
.don-hero-sub {
  margin: 0 auto;
  max-width: 52ch;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.6;
  color: var(--on-brand-2);
}

/* ---------------------------------------------------------- two columns -- */
.donate-grid { display: grid; gap: clamp(28px, 4vw, 56px); }
/* min-width:0 stops a long mono paybill number from forcing the whole grid
   wider than the phone it is being read on */
.donate-main  { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
.donate-aside { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

@media (min-width: 880px) {
  .donate-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
  /* 94px clears the fixed header, which the artboard's static header did not
     have to allow for */
  .donate-aside { position: sticky; top: 94px; }
}

.don-h2 { font-size: 24px; margin-bottom: 16px; }
.don-note { font-size: 13px; line-height: 1.55; color: var(--ink-3); }

/* ------------------------------------------------- "you cannot pay yet" -- */
/* The donate red is the site's one "money" colour, so it marks the one thing
   on this page a reader must not miss. */
.don-notice {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--action);
  border-radius: 12px;
  padding: 22px 24px;
}
.don-notice h2 { font-size: 21px; margin-bottom: 10px; }
.don-notice p { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.don-notice p + p { margin-top: 12px; }
.don-notice-sw { color: var(--ink-3); font-style: italic; }

/* ------------------------------------------------------ amount pills ---- */
/* The artboard's amount pills are the homepage .chip at a larger size on a
   white ground, so only the differences are written here. They are static
   text, not buttons: there is nothing to submit them to. */
.chip-amt {
  background: #FFF;
  border: 2px solid var(--line-2);
  font-size: 15px;
  padding: 12px 18px;
}
/* The four amounts are the artboard's sample figures, not campaign policy. The
   sentence above them says so, but a pill reading "KES 5,000" is quotable on
   its own, so each one carries the word too. */
.chip-sample {
  margin-left: 6px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3);
}

/* --------------------------------------------------------- channel cards -- */
.don-methods {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin: 0; padding: 0; list-style: none;
}
.don-method {
  background: #FFF;
  border: 2px solid var(--line-2);
  border-radius: 12px;
  padding: 18px 16px;
}
/* The artboard highlights one channel — Mobile Money — the way it highlighted
   the selected radio. That highlight is GONE: nobody has decided which channel
   the campaign will use, and a green-ringed card states a decision that has not
   been taken. Do not restore .don-method-first without that decision. */
.don-method-name {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 15px; color: var(--ink);
}
.don-method-dot {
  width: 22px; height: 22px; flex: 0 0 22px;
  border-radius: 5px; background: var(--line-2);
}
.don-method-status { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }

/* --------------------------------------------------------------- legal -- */
.don-legal {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 10px;
  padding: 18px 20px;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
}
.don-legal p + p { margin-top: 10px; }

/* ------------------------------------------------------- closing block -- */
.don-closed { border-top: 1px solid var(--line-3); padding-top: 26px; }
.don-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 22px; }

/* ----------------------------------------------------------- M-PESA card -- */
.mpesa-card {
  background: #FFF;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(16, 51, 30, .08);
}
.mpesa-head {
  background: linear-gradient(160deg, var(--brand), var(--brand-dark));
  color: #FFF; padding: 24px;
}
.mpesa-title { font-family: var(--serif); font-size: 22px; font-weight: 700; }
.mpesa-body { padding: 24px; display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.mpesa-figs { flex: 1 1 150px; }
/* The artboard sets these small labels in gold. Gold at 12px on white is a
   2.4:1 contrast — unreadable for a lot of people. The gold stays where the
   artboard put it on dark grounds; here the label takes the campaign green,
   which is the same brand cue and passes AA comfortably. */
.mpesa-label {
  margin-bottom: 2px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-dark); font-weight: 700;
}
.mpesa-number {
  margin-bottom: 14px;
  font-family: var(--mono); font-size: 26px; font-weight: 700;
  letter-spacing: .04em; color: var(--brand-dark);
}
.mpesa-account { font-family: var(--mono); font-size: 16px; color: var(--ink-2); }
.mpesa-qr {
  flex: 0 0 104px; width: 104px; height: 104px; border-radius: 10px;
  background: repeating-linear-gradient(45deg, var(--line) 0 6px, var(--panel) 6px 12px);
  display: grid; place-items: center; text-align: center;
  font-family: var(--mono); font-size: 10px; line-height: 1.3; color: var(--ink-3);
}
.mpesa-note { padding: 0 24px 22px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }

/* --------------------------------------------------------- impact panel -- */
/* REMOVED, with the markup it styled. .don-panel / .impact-list dressed a
   five-line "Your impact" list — KES 500 buys voter education for 50 residents,
   KES 25,000 buys a ward office for a week, and so on. Those costings came from
   the artboard and no one has budgeted them. The rules are deleted rather than
   left behind, so nobody rebuilds the panel just because the styling is sitting
   here ready. If the campaign ever publishes real costed figures, write it
   again from those. */