/* donate.html styles — externalized July 15/16, 2026 from an inline <style>
   block, as part of a pre-launch CSP hardening pass (see _headers). Beyond
   the straight move, this file adds several small classes that replace
   inline style="" attributes that used to live directly on elements in
   donate.html (.visually-hidden, .donate-lead-note, .amount-label,
   .amount-error-note, .prov-readonly, .legal-note, and border:none folded
   into .confirmations), plus .is-visible so the amount-error message's
   show/hide (previously JS setting el.style.display) can run through
   classList instead — CSP's style-src also blocks inline styles set by
   JavaScript, not just ones written in HTML, so that toggle had to move too.
   This page handles real donations, so every one of these was checked
   against the live behavior before/after rather than assumed. */
:root {
  /* Theme locked July 9, 2026 — "Super, Natural North Van" (see theme-preview.html) */
  --evergreen: #17362b;
  --pine: #2f5d4a;
  --glacier: #2c7f94;
  --glacier-dark: #1f6376;
  --lake: #24586e;
  --pale-pine: #9fc7bd;
  --ice: #eceee6;
  --snow: #f8f6f1;
  --white: #ffffff;
  --ink: #2b3a36;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Newsreader', Georgia, serif;
  --font-ui: 'Public Sans', 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--snow);
  line-height: 1.6;
  text-wrap: pretty;
}
.sans { font-family: var(--font-ui); }

/* --- Header (site-wide nav placeholder) --- */
header {
  background: var(--evergreen);
  color: var(--white);
  padding: 1rem 2rem;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: .75rem;
}
.wordmark { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .5px; color: inherit; text-decoration: none; }
.wordmark span { color: var(--pale-pine); }
nav a {
  color: var(--ice); text-decoration: none; margin-left: 1.25rem;
  font-family: var(--font-ui); font-size: .95rem;
}
nav a.active { color: var(--white); border-bottom: 2px solid var(--glacier); padding-bottom: 2px; }

/* Mobile hamburger menu (added July 13, 2026) */
.nav-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  width: 34px; height: 30px; padding: 0;
  flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ice); border-radius: 2px; }
@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  nav { display: none; width: 100%; flex-direction: column; gap: .15rem; margin-top: .25rem; }
  nav.open { display: flex; }
  nav a { margin-left: 0; padding: .65rem 0; }
}

main { max-width: 1060px; margin: 0 auto; padding: 3rem 1.5rem 4rem; }

h1 { font-family: var(--font-display); color: var(--evergreen); font-size: 2.4rem; font-weight: 500; margin-bottom: .75rem; }
.intro { font-size: 1.12rem; max-width: 44rem; margin-bottom: 2.5rem; }
.intro a { color: var(--glacier); }

/* --- The pledge card: the visual centrepiece of the page --- */
.pledge {
  background: var(--evergreen);
  color: var(--ice);
  border-left: 6px solid var(--glacier);
  border-radius: 6px;
  padding: 2rem 2.25rem;
  margin-bottom: 3rem;
  max-width: 52rem;
}
.pledge h2 {
  color: var(--pale-pine);
  font-size: 1.05rem; letter-spacing: 1.5px; text-transform: uppercase;
  font-family: var(--font-ui);
  margin-bottom: .75rem;
}
.pledge p { font-size: 1.15rem; }
.pledge strong { color: var(--white); }

/* --- Two columns: rules | form --- */
.columns { display: flex; gap: 3rem; align-items: flex-start; flex-wrap: wrap; }
.rules { flex: 1 1 300px; }
.rules h2, .form-wrap h2 {
  font-family: var(--font-display); color: var(--pine); font-size: 1.3rem;
  font-weight: 500; margin-bottom: 1rem;
}
.rules ul { list-style: none; }
.rules li {
  padding: .65rem 0 .65rem 1.6rem;
  border-bottom: 1px solid var(--ice);
  position: relative;
}
.rules li::before {
  content: "·"; position: absolute; left: 0; color: var(--glacier);
}

/* --- Form --- */
.form-wrap {
  flex: 1 1 420px;
  background: var(--white);
  border: 1px solid var(--ice);
  border-radius: 6px;
  padding: 2rem;
}
.donate-lead-note { margin: 0 0 1.25rem; }
.amounts { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.amounts button {
  font-family: var(--font-ui);
  font-size: 1rem; padding: .7rem 1.1rem;
  background: var(--ice); color: var(--evergreen);
  border: 2px solid transparent; border-radius: 4px; cursor: pointer;
}
.amounts button:hover { border-color: var(--glacier); }
.amounts button.selected { background: var(--glacier); color: var(--white); }
.amounts .max { flex-basis: 100%; }
.amounts .max small { display: block; font-size: .78rem; opacity: .85; }
.other { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.4rem; }
.other label { font-size: .95rem; }
.other input { width: 8.5rem; }

label { display: block; font-size: .9rem; margin-bottom: .25rem; color: var(--pine); font-family: var(--font-ui); }
.amount-label { margin-bottom: .5rem; }
input[type=text], input[type=email], input[type=number] {
  width: 100%; padding: .6rem .7rem; margin-bottom: 1rem;
  border: 1px solid #c9cfcd; border-radius: 4px; font-size: 1rem;
  font-family: inherit; background: var(--snow);
}
.prov-readonly { background: #e9e6df; color: #6b6f6d; }
.field-note { font-size: .8rem; color: var(--ink); opacity: .8; margin: -0.6rem 0 1rem; }
.legal-note { margin: 0 0 1rem; }
.row { display: flex; column-gap: 1rem; row-gap: 0; flex-wrap: wrap; } .row > div { flex: 1 1 140px; min-width: 0; }

/* RESTORED July 15/16, 2026: this fieldset used to carry an inline
   style="border:none" that silently overrode the border-top divider below
   (inline styles always win over stylesheet rules for the same property),
   so the divider never actually rendered on the live site even though the
   stylesheet asked for one. Caught during the CSS externalization pass;
   Mike agreed the divider is worth having (matches the same
   border-top-as-section-break pattern used elsewhere on the site, e.g.
   issues.html's .commitment), so it's reinstated here now that nothing is
   silently cancelling it out. */
.confirmations { margin: 1.25rem 0 1.5rem; border: none; border-top: 1px solid var(--ice); padding-top: 1.25rem; }
.confirmations legend { font-size: .9rem; color: var(--pine); margin-bottom: .6rem; font-family: var(--font-ui); }
.confirmations label {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .95rem; color: var(--ink); margin-bottom: .7rem;
  font-family: var(--font-body); cursor: pointer;
}
.confirmations input { margin-top: .3rem; }
.confirmations .define {
  display: block; font-size: .82rem; opacity: .75; margin-top: .15rem;
  font-family: var(--font-ui);
}

.donate-btn {
  width: 100%; padding: .95rem;
  background: var(--glacier); color: var(--white);
  font-family: var(--font-ui); font-size: 1.15rem;
  border: none; border-radius: 4px; cursor: pointer;
}
.donate-btn:hover { background: var(--glacier-dark); }
.stripe-note { font-size: .8rem; text-align: center; margin-top: .6rem; opacity: .75; }

.etransfer {
  margin-top: 2rem; padding: 1.25rem 1.5rem;
  background: var(--ice); border-radius: 6px; font-size: .97rem;
}
.etransfer strong { color: var(--evergreen); }

/* Honeypot wrapper: hidden from real donors via CSS, only a bot fills the
   field inside. Checked server-side in create-checkout-session.mjs. */
.visually-hidden { position: absolute; left: -9999px; }

.amount-error-note { display: none; color: #a03434; }
.amount-error-note.is-visible { display: block; }

footer {
  background: var(--evergreen); color: var(--ice);
  text-align: center; padding: 2rem 1.5rem; font-size: .9rem;
}
.auth-placeholder {
  display: inline-block; border: 2px dashed var(--glacier);
  padding: .75rem 1.25rem; border-radius: 4px; margin-bottom: .75rem;
  color: #f0d9b5;
}

/* Footer social links (added July 13, 2026) */
.social-links { margin-top: 1rem; display: flex; justify-content: center; gap: 1rem; }
.social-links a { color: var(--pale-pine); display: inline-flex; transition: color .15s; }
.social-links a:hover { color: var(--white); }
/* YouTube slot: hidden until the channel exists. Once live, remove this rule
   and set the real href on the .yt-slot link below. */
.social-links .yt-slot { display: none; }