/* components.css — reusable pieces: buttons, kickers, cards, stats, photos.
   ONE job: what things LOOK like, independent of where they sit (layout.css).
   Every value traced from the design prototype. */

/* ---- accessibility helpers ------------------------------------------------ */
/* jump-to-content link for keyboard users: invisible until focused */
.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--cream);
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  z-index: 100;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---- buttons -------------------------------------------------------------- */
/* .btn = shared shape; modifier classes choose the color story */
.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  padding: 15px 32px;
  border-radius: 999px;                     /* full pill */
  border: none;
  cursor: pointer;
  text-align: center;
}

.btn--solid {                               /* primary: green */
  background: var(--green);
  color: var(--cream);
  box-shadow: 0 4px 14px rgba(47, 93, 62, 0.3);
}
.btn--solid:hover { background: #274F34; }

.btn--outline {                             /* secondary: green outline */
  color: var(--green);
  padding: 13px 24px;                       /* 2px smaller: the border adds it back */
  border: 2px solid var(--green);
  background: transparent;
}
.btn--outline:hover { background: rgba(47, 93, 62, 0.07); }

.btn--gold {                                /* the nav "Donate" pill */
  background: var(--gold);
  color: #FFFFFF;
  font-size: 14px;
  padding: 10px 22px;
  box-shadow: 0 2px 8px rgba(201, 138, 43, 0.35);
}
.btn--gold:hover { background: #B67B22; }

.btn--small { font-size: 15px; padding: 12px 26px; }

/* ---- kicker: small gold uppercase line above headings --------------------- */
.kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---- content cards -------------------------------------------------------- */
.card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.icon-chip {                                /* small glyph badge on cards */
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--tan);
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--green);
  font-family: var(--font-display);
  font-weight: 800;
}

.card h3 { font-weight: 700; font-size: 21px; color: var(--ink); }

.card p { font-size: 15px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

/* lighter card variant used for the "ways to help" grid: tighter, green title */
.card--way { padding: 30px; gap: 10px; }
.card--way h3 { font-size: 19px; color: var(--green); }
.card--way p  { font-size: 14.5px; }

.card-link {                                /* "Donate →" footer link of a card */
  margin-top: auto;                         /* pins to card bottom, equal heights */
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  color: var(--green);
}
.card-link:hover { text-decoration: underline; }

/* ---- stat: big number + caption (dark band) ------------------------------- */
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat-number { font-family: var(--font-display); font-weight: 800; font-size: 44px; }
.stat-label  { font-size: 14px; color: var(--sage); letter-spacing: 0.04em; }

/* ---- donation tiers listed beside the donation card ----------------------- */
.tier-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 20px;
}
.tier-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--green);
  flex-shrink: 0;
}
.tier-desc { font-size: 14.5px; color: var(--muted); }

/* ---- the donation card ----------------------------------------------------- */
.donate-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 12px 40px rgba(35, 40, 31, 0.08);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.donate-card h2 { font-weight: 700; font-size: 22px; color: var(--ink); }

/* one-time / monthly switch — two buttons inside a tan pill */
.toggle-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: var(--tan);
  border-radius: 999px;
  padding: 5px;
}
.toggle-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  padding: 11px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
/* aria-pressed carries the selected state: one attribute drives both the
   visual style AND what a screen reader announces — no separate class needed */
.toggle-btn[aria-pressed="true"] { background: #FFFFFF; color: var(--ink); }

/* preset amount buttons */
.amount-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.amount-btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  padding: 15px 6px;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: #FFFFFF;
  color: var(--ink);
  cursor: pointer;
}
.amount-btn:hover { border-color: var(--green); }
.amount-btn[aria-pressed="true"] {
  border-color: var(--green);
  background: var(--green);
  color: var(--cream);
}

/* custom amount field with a leading € sign */
.custom-amount {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #D8D3C4;
  border-radius: 12px;
  padding: 10px 14px;
  flex: 1;
  background: var(--cream);
}
.custom-amount input {
  font-family: var(--font-body);
  font-size: 15px;
  border: none;
  background: transparent;
  width: 100%;
  color: var(--ink);
}
.custom-amount input:focus { outline: none; }

.impact-box {
  background: var(--tan);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--body-strong);
}

/* ---- price card: the cream panel inside the flagship band ----------------- */
.price-card {
  background: var(--cream);
  border-radius: 20px;
  padding: 36px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.price-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 52px;
  color: var(--green);
}
.price-note { font-size: 15px; line-height: 1.5; color: var(--muted); }

/* ---- numbered card: circled number beside title + body -------------------- */
.numbered-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
.num-circle {
  flex-shrink: 0;                           /* never squashed by long text */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--tan);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  color: var(--green);
}
.numbered-card h3 { font-weight: 700; font-size: 20px; color: var(--ink); }
.numbered-card p  { font-size: 15px; line-height: 1.65; color: var(--muted); text-wrap: pretty; }

/* ---- promise card: light text on deep green ------------------------------- */
.promise-card {
  background: var(--green-deep);
  color: var(--banner-text);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.promise-card h2 {
  font-weight: 700;
  font-size: 20px;
  color: var(--cream);
}
.promise-card p { font-size: 15px; line-height: 1.65; color: var(--sage); text-wrap: pretty; }

/* ---- contact details list -------------------------------------------------- */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--body-strong);
}
.contact-details a { color: var(--green); text-decoration: none; }
.contact-details a:hover { text-decoration: underline; }

/* the design shows the org email as a monospace chip, explicitly marked as a
   placeholder until the owner supplies a real inbox */
.mono-chip {
  font-family: ui-monospace, monospace;
  background: var(--tan);
  padding: 2px 8px;
  border-radius: 6px;
}
.placeholder-note { font-size: 12px; color: #A6A89C; }

/* ---- form fields ----------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* one rule covers inputs and the textarea so they can't drift apart visually */
.field {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 14px 16px;
  border: 1px solid #D8D3C4;
  border-radius: 12px;
  background: var(--cream);
  color: var(--ink);
  width: 100%;
}
.field::placeholder { color: #A6A89C; }
textarea.field { min-height: 132px; resize: vertical; }

/* feedback box under the form — mirrors the design's success-message styling */
.form-note {
  background: #EAF3EC;
  border: 1px solid var(--green);
  color: var(--green);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  padding: 14px 18px;
  border-radius: 12px;
}

@media (max-width: 880px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ---- small composition helpers (were style="" attributes) ----------------- */
.btn-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.btn--block { width: 100%; }
.btn--on-gold { flex-shrink: 0; background: #FFFFFF; color: #8A5E1C; }
.form .btn { align-self: flex-start; font-size: 15px; padding: 13px 34px; }
.price-card .btn { margin-top: 10px; }
.numbered-body { display: flex; flex-direction: column; gap: 8px; }

/* donate card: custom-amount row + tier list + fine print */
.custom-row { display: flex; align-items: center; gap: 10px; }
.custom-label { font-size: 14px; color: var(--muted); flex-shrink: 0; }
.custom-currency { font-weight: 700; color: var(--green); }
.tier-list { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.fineprint { font-size: 13px; line-height: 1.6; color: #A6A89C; }
.fineprint a { color: var(--green); }

/* footer pieces (identical across all five pages) */
.brand-mark--footer { width: 34px; height: 34px; font-size: 15px; background: var(--cream); color: var(--green); }
.footer-col--brand { gap: 14px; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--cream); }
.footer-tagline { font-size: 14px; line-height: 1.65; max-width: 40ch; text-wrap: pretty; }
.footer-line { font-size: 14px; line-height: 1.6; }
.footer-socials { display: flex; gap: 14px; margin-top: 6px; font-size: 13px; }
.footer-socials a { color: var(--sage-dim); }

/* ---- photos & placeholders ------------------------------------------------ */
.photo { object-fit: cover; border-radius: 24px; display: block; }

/* empty image slot, styled like the prototype's "drop a photo" placeholders —
   used wherever the owner still needs to supply a real photo */
.img-slot {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--tan) 0%, var(--tan-deep) 100%);
  border-radius: 24px;
  color: var(--sage-dim);
  font-family: ui-monospace, monospace;
  font-size: 13px;
  text-align: center;
  padding: 16px;
}