/* ═══════════════════════════════════════════════════════════════════
   ኤላም — the pledge board (give.html)

   Reuses the landing page's .lp shell the way the legal pages do, with
   one readable column. The page speaks one language at a time — Amharic
   by default, English behind the toggle in the bar — so every piece of
   copy exists twice and html[data-lang] chooses. The visual weight sits
   on the vow itself: the amount, the time plan, one dark button. The
   progress bar is the only accent-filled surface — one number the whole
   congregation shares.
   ═══════════════════════════════════════════════════════════════════ */

html[data-lang="am"] [data-i18n="en"] { display: none !important; }
html[data-lang="en"] [data-i18n="am"] { display: none !important; }

/* The ground is vellum, not flat paint: a warm glow high behind the
   archangel and a whisper of grain. Both layers are alpha only — every
   color underneath is still the tokens'. The grain is an inline SVG
   noise tile, so nothing external loads and the CSP stays closed. */
body.lp {
  background-color: var(--app);
  background-image:
    radial-gradient(1100px 520px at 50% -120px, var(--accent-bg), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: no-repeat, repeat;
}

.give__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 20px;
}

/* The toggle is the door for anyone who does not read Amharic — it stays
   big, labelled in its own language, and never hides behind an icon. */
.give__lang {
  display: flex;
  flex: none;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--card);
  padding: 3px;
}

.give__lang-btn {
  min-height: 38px;
  min-width: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: 700 14px/1 var(--ui);
  color: var(--ink-3);
  cursor: pointer;
}
.give__lang-btn.et { font-family: var(--et); font-size: 13px; }
.give__lang-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--card);
}

.give {
  max-width: 720px;
  padding-block: clamp(20px, 4vw, 44px) 64px;
  display: grid;
  gap: clamp(24px, 4vw, 36px);
}

/* ── hero ── */

/* An editorial opening: hairline, kicker, then the headline set flush
   left — a magazine front, not a poster. Under it, the icon of the
   archangel — above the father's words on a phone, beside them on a
   desk. Shown whole, never cropped: the painter's credit is part of it. */
.give__hero {
  border-top: 1px solid var(--line-2);
  padding-top: 18px;
}

.give__kicker {
  margin: 0 0 10px;
  color: var(--accent-2);
  font-weight: 700;
}
.give__kicker [lang="en"] {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12.5px;
}
.give__kicker .et { font-size: 13.5px; }
.give__days { color: var(--ink-3); font-weight: 600; }

.give__hero-row { display: flex; flex-direction: column; gap: 20px; }

.give__icon {
  margin: 0 auto;
  width: min(56vw, 240px);
}
.give__icon img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-2);
}

/* On a wide screen the icon is sized by the screen's height, not its
   width, so the bar, the title, the archangel and his words all land in
   the first view together instead of pushing the form below the fold. */
@media (min-width: 640px) {
  .give__hero-row { flex-direction: row; align-items: flex-start; gap: 28px; }
  .give__hero-main { flex: 1; min-width: 0; }
  .give__icon { flex: none; width: auto; margin: 0; }
  .give__icon img { width: auto; height: min(46vh, 470px); max-width: 100%; }
}

.give__quote {
  margin: 0 0 18px;
  padding-left: 16px;
  border-left: 3px solid var(--accent);
  font-size: var(--t-lg);
  line-height: 1.9;
  color: var(--ink-2);
}
.give__quote[lang="en"] { font-style: italic; line-height: 1.6; }

/* The title scales with the viewport and balances its own line breaks —
   every line comes out near-equal instead of stranding one word at the
   bottom. The vow phrase is glued (.give__nobr) so it can shrink a size
   but never split. Browsers without text-wrap:balance simply wrap. */
.give__hero h1 {
  font-size: clamp(25px, 4.6vw, 37px);
  line-height: 1.6;
  font-weight: 700;
  margin: 0 0 18px;
  text-wrap: balance;
}
.give__hero h1[lang="en"] { line-height: 1.25; letter-spacing: -.01em; }
.give__nobr { white-space: nowrap; }

.give__sub {
  font-size: var(--t-lg);
  line-height: 1.9;
  color: var(--ink-2);
  margin: 0;
}
.give__sub[lang="en"] { line-height: 1.65; max-width: 58ch; }
.give__sub b { color: var(--ink); }

/* ── progress ── */

.give__progress { padding: clamp(20px, 4vw, 28px); }

.give__progress h2,
.give__form-wrap h2,
.give__done h2 {
  font: 700 18px/1.5 var(--ui);
  margin: 0 0 12px;
}

.give__track {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: var(--sunk);
  border: 1px solid var(--line);
  overflow: hidden;
}

/* A rung already passed stays visible as a quiet notch behind the fill. */
.give__tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--card);
  opacity: .85;
}

.give__fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent);
  transition: width .6s var(--ease);
}

.give__total {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-2);
}
.give__total b { color: var(--ink); }

/* ── form ── */

.give__form-wrap { padding: clamp(20px, 4vw, 32px); }

.give__field {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
}

.give__field legend,
.give__field label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 8px;
  padding: 0;
}
.give__field label i, .give__field legend i { font-style: normal; font-weight: 500; color: var(--ink-4); }

.give__presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.give__preset {
  min-height: 44px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--card);
  font: 700 15px/1 var(--ui);
  color: var(--ink);
  cursor: pointer;
}
.give__preset:hover { background: var(--hover); }
.give__preset.is-picked {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent-2);
}

.give__amount-label {
  font-weight: 500 !important;
  color: var(--ink-3) !important;
  font-size: 13.5px !important;
}

.give__amount {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--card);
  padding-inline: 14px;
}
.give__amount span { font: 700 17px/1 var(--ui); color: var(--ink-4); }
.give__amount input {
  flex: 1;
  min-height: 46px;
  border: 0;
  background: none;
  font: 700 17px/1 var(--ui);
  color: var(--ink);
  outline: none;
  min-width: 0;
}
.give__amount:focus-within { border-color: var(--ink-4); }

.give__options { display: grid; gap: 8px; }
@media (min-width: 560px) { .give__options--row { grid-template-columns: 1fr 1fr; } }

/* Written as .give__field .give__option so it outranks the block-level
   `.give__field label` rule above — a label that is an option card lays
   out as a row: the radio beside its words, never above them. */
.give__field .give__option {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--card);
  padding: 12px 14px;
  min-height: 44px;
  cursor: pointer;
  margin-bottom: 0;
}
.give__field .give__option:hover { background: var(--hover); }
.give__field .give__option.is-picked {
  border-color: var(--accent);
  background: var(--accent-bg);
}
.give__option input {
  accent-color: var(--accent);
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
}
.give__option-body b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.7; }

.give__other { margin-top: 12px; }
.give__other input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--card);
  font: 500 15px var(--ui);
  color: var(--ink);
  padding: 10px 14px;
  outline: none;
}
.give__other input:focus { border-color: var(--ink-4); }

.give__who { display: grid; gap: 16px; }
@media (min-width: 560px) { .give__who { grid-template-columns: 1fr 1fr; } }

.give__who input,
#contact-input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--card);
  font: 500 15px var(--ui);
  color: var(--ink);
  padding: 10px 14px;
  outline: none;
}
.give__who input:focus, #contact-input:focus { border-color: var(--ink-4); }
.give__field small { display: block; font-size: 12.5px; line-height: 1.7; color: var(--ink-4); margin-top: 6px; }

.give__error {
  min-height: 20px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--bad);
}

.give__submit { width: 100%; min-height: 48px; font-size: 15.5px; }

/* ── confirmation ── */

.give__done { padding: clamp(20px, 4vw, 32px); }

.give__done-summary {
  font-size: var(--t-lg);
  line-height: 1.8;
  color: var(--ink);
  margin: 0 0 14px;
}

.give__instructions {
  background: var(--rail);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-2);
}
.give__instructions p { margin: 0 0 8px; }
.give__instructions p:last-child { margin-bottom: 0; }
.give__instructions b { color: var(--ink); }

.give__qr { text-align: center; }
.give__qr img {
  width: min(260px, 80%);
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: var(--card);
}

.give__calendar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}
.give__calendar .btn { min-height: 44px; background: var(--card); }

.give__share { margin-top: 22px; }
.give__share h3 { font: 700 15.5px/1.6 var(--ui); margin: 0 0 4px; }
.give__share p { font-size: 14px; line-height: 1.8; color: var(--ink-3); margin: 0 0 12px; }
.give__share .btn { min-height: 44px; }
.give__share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.give__share-status {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--good-2);
}

/* ── the trust block ── */

.give__faq dl { margin: 0; display: grid; gap: 14px; }
.give__faq dt { font-size: 14px; font-weight: 700; line-height: 1.7; color: var(--ink); }
.give__faq dd { margin: 2px 0 0; font-size: 14px; line-height: 1.8; color: var(--ink-3); }

/* ── the prayer ── */

.give__prayer {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.give__prayer p {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-3);
}
.give__prayer p[lang="en"] { font-style: italic; line-height: 1.65; }