/* ==========================================================================
   components.css: pieces every option shares (header, menu, van finder,
   gallery, donate form, testimonials, impact numbers, footer, donate pill).

   They are coloured ONLY through the theme variables below. Each option
   stylesheet sets these once on its <body> class, e.g.

     .theme-stories { --page-bg: #121212; --page-fg: #E4E4E4; ... }

   so a developer can restyle all shared parts by editing ~15 values.
   ========================================================================== */

/* Default theme values (light). Options override them. */
body {
  --page-bg: var(--paper);
  --page-fg: var(--text);
  --heading: var(--ink);
  --muted-fg: var(--muted);
  --surface: var(--white);
  --surface-line: var(--line);
  --link: var(--orange-ink);
  --btn-bg: var(--orange);
  --btn-fg: var(--charcoal);
  --chip-on-bg: var(--charcoal);
  --chip-on-fg: var(--white);
  --chip-off-bg: var(--white);
  --chip-off-fg: var(--charcoal);
  --chip-line: #CFC7BB;
  --header-bg: var(--charcoal);
  --header-fg: var(--white);
  --frame-radius: var(--radius-m);
  background: var(--page-bg);
  color: var(--page-fg);
}
.display { color: var(--heading); }
main a:not(.btn) { color: var(--link); font-weight: 700; }

/* === Buttons ============================================================ */
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn--primary:hover { filter: brightness(1.05); }

/* === Chips (filters, days) ================================================ */
.chip {
  flex-shrink: 0; min-height: 44px; padding: 0 18px;
  border-radius: var(--pill); border: 1.5px solid var(--chip-line);
  background: var(--chip-off-bg); color: var(--chip-off-fg);
  font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out), transform var(--t-press) var(--ease-out);
}
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] { background: var(--chip-on-bg); color: var(--chip-on-fg); border-color: var(--chip-on-bg); }

/* === Site header ========================================================== */
.site-header {
  position: sticky; top: var(--demo-bar); z-index: 50;
  background: var(--header-bg); color: var(--header-fg);
}
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.site-logo img { height: 40px; width: auto; }
.site-nav { display: none; }
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--pill);
  border: 1.5px solid currentColor; background: transparent; color: inherit; cursor: pointer;
}
@media (min-width: 1100px) {
  .site-header__bar { min-height: 72px; }
  .site-nav { display: flex; align-items: center; gap: 24px; white-space: nowrap; }
  .site-nav a:not(.btn) { color: var(--header-fg); text-decoration: none; font-weight: 500; font-size: 16px; padding: 6px 0; border-bottom: 2px solid transparent; }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--orange); }
  .site-nav .btn { min-height: 44px; font-size: 15px; padding: 0 20px; }
  .site-header .menu-btn { display: none; }
}

/* === Mobile menu panel (opens from the top, below the demo bar) ========== */
.menu-panel {
  position: fixed; inset: var(--demo-bar) 0 0 0; z-index: 60;
  display: flex; flex-direction: column; overflow-y: auto;
  background: var(--header-bg); color: var(--header-fg);
}
.menu-panel[hidden] { display: none; }
.menu-panel__top { display: flex; align-items: center; justify-content: space-between; min-height: 64px; border-bottom: 3px solid var(--orange); }
.menu-panel__top img { height: 40px; width: auto; }
.menu-panel__links { display: flex; flex-direction: column; padding-top: 8px; }
.menu-panel__links a {
  display: block; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.14);
  font-family: var(--font-display); font-weight: 500; font-size: 30px; letter-spacing: -0.02em;
  color: inherit; text-decoration: none;
}
.menu-panel__links a[aria-current="page"] { color: var(--orange); }
.menu-panel__cta { display: grid; gap: 12px; padding-top: 20px; padding-bottom: 32px; }
.menu-panel__cta a:not(.btn) { color: inherit; opacity: .8; }
/* Motion: panel slides down from the header it belongs to; links follow. */
@media (prefers-reduced-motion: no-preference) {
  .menu-panel.is-open { animation: menu-in var(--t-ui) var(--ease-drawer); }
  .menu-panel.is-open .menu-panel__links a { animation: link-in 360ms var(--ease-out) both; animation-delay: calc(60ms + var(--i) * 30ms); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-12px); } }
@keyframes link-in { from { opacity: 0; transform: translateY(8px); } }

/* === Impact numbers ========================================================= */
.proof__item { display: flex; flex-direction: column; gap: 4px; }
.proof__num { font-family: var(--font-display); font-weight: 600; font-size: clamp(46px, 12vw, 72px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--heading); }
.proof__label { font-weight: 700; font-size: 19px; color: var(--heading); margin-top: 6px; }
.proof__src { font-size: 13px; color: var(--muted-fg); }

/* === Van finder ============================================================== */
.van__kicker { font-size: 22px; margin-bottom: 4px; }
.van .h2 { max-width: 18ch; }
.van__days { margin-bottom: 18px; }
.van__card { display: grid; gap: 4px; max-width: 560px; padding: 20px; border-radius: var(--radius-l); }
.van__day { font-size: 14px; opacity: .8; }
.van__place { font-size: 30px; }
.van__note { font-size: 14px; margin-top: 14px; opacity: .85; }
@media (prefers-reduced-motion: no-preference) {
  .van__card.is-swap { animation: swap 280ms var(--ease-out); }
}
@keyframes swap { from { opacity: .4; transform: translateY(6px); } }

/* === Gallery ================================================================= */
.gallery__chips { margin-bottom: 14px; }
.gallery__desc { max-width: 62ch; color: var(--muted-fg); margin-bottom: 20px; }
.gallery__count { font-weight: 700; white-space: nowrap; color: var(--heading); }
.gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
.gallery__item[hidden] { display: none; }
.gallery__img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--frame-radius); background: #3A3633; }
.gallery__item figcaption { display: flex; flex-direction: column; line-height: 1.35; margin-top: 8px; }
.gallery__item figcaption strong { font-size: 15px; color: var(--heading); }
.gallery__item figcaption span { font-size: 13px; color: var(--muted-fg); }
@media (min-width: 768px) { .gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; } }

/* === Donate form ============================================================== */
.donate { display: flex; flex-direction: column; gap: 14px; }
.donate__freq { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--surface-line); }
.donate__freq button { min-height: 44px; border: 0; border-radius: var(--pill); background: transparent; color: var(--heading); font-weight: 700; font-size: 15px; cursor: pointer; transition: background-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out); }
.donate__freq button[aria-pressed="true"] { background: var(--chip-on-bg); color: var(--chip-on-fg); }
.donate__amounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.donate__amounts button {
  min-height: 56px; border-radius: 16px; border: 1.5px solid var(--chip-line);
  background: var(--chip-off-bg); color: var(--chip-off-fg); font-weight: 700; font-size: 18px; cursor: pointer;
  transition: background-color var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out), transform var(--t-press) var(--ease-out);
}
.donate__amounts button:active { transform: scale(0.97); }
.donate__amounts button[aria-pressed="true"] { background: var(--orange); color: var(--charcoal); border-color: var(--orange); }
.donate__label { font-weight: 600; font-size: 15px; color: var(--heading); }
.donate__input { min-height: 52px; border-radius: 14px; border: 1.5px solid var(--chip-line); background: var(--surface); color: var(--heading); padding: 0 16px; }
.donate__submit { min-height: 56px; font-size: 18px; }
.donate__note { font-size: 13px; color: var(--muted-fg); }
@media (min-width: 768px) { .donate__amounts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* === Testimonial cards ========================================================= */
.voice { display: flex; flex-direction: column; gap: 12px; min-height: 220px; padding: 22px; border-radius: var(--radius-m); border: 1px dashed var(--chip-line); }
.voice__kind { font-size: 14px; font-weight: 700; color: var(--link); }
.voice blockquote { flex-grow: 1; }
.voice figcaption { font-size: 14px; color: var(--muted-fg); }

/* === Footer ===================================================================== */
.site-footer { background: var(--charcoal); color: #B5B5B5; font-size: 16px; padding-bottom: 104px; }
.site-footer a { color: #DADADA; }
.site-footer__grid { display: grid; gap: 32px; padding-top: 48px; }
.site-footer__brand img { height: 104px; width: auto; margin-bottom: 14px; }
.site-footer__title { font: 700 16px/1.4 var(--font-body); color: #FFFFFF; margin: 0 0 8px; }
.site-footer__title + p, .site-footer p + p { margin-top: 8px; }
.site-footer ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 6px; }
.site-footer strong { color: #E4E4E4; font-weight: 600; }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 36px; padding-top: 18px; border-top: 1px solid #2E2E2E; font-size: 13px; color: #8A8A8A; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer { padding-bottom: 48px; } }
@media (min-width: 1100px) { .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }

/* === Floating donate pill (phones only) ========================================== */
.donate-pill {
  position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 6px 6px 20px; border-radius: var(--pill);
  background: var(--orange); color: var(--charcoal); text-decoration: none; font-weight: 700; font-size: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform var(--t-ui) var(--ease-out), opacity var(--t-ui) var(--ease-out);
}
.donate-pill__btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: var(--pill); background: var(--charcoal); color: #FFFFFF; }
.donate-pill.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
@media (min-width: 1100px) { .donate-pill { display: none; } }

/* Swipe rows: snap cards to the page margin, not the screen edge */
.proof__rail, .inits__rail, .voices__rail, .ol-strip, .wl-rail, .chips { scroll-padding-inline: var(--gutter); }