/* son.css — Special Olympics theme (tijdloze SON-huisstijl, fondsenwervend).
 * Wordt alleen geladen op SON-getheme'de pagina's (zie config/themes.php → extra_css).
 * De CSS-var-overrides (SO Red / SO Grey / biscuit / event-teal / medaille-accenten) komen via
 * inline <style> in render_head; hier staan de dingen die vars niet kunnen bereiken: hero-afbeelding,
 * logo clear-space chip, biscuit-vlakken, steun-slot, medaille-podium. Veel witruimte = bewust SO-stijl.
 * GEEN sponsor-/thermometer-module meer: de tenant is puur "gratis meespelen + doneren via de knop". */

/* Hero — vlam/medaille-foto met warme donkere leeskolom links (SO-rood blijft anker) */
.theme-son .hero-bg {
  background-image:
    linear-gradient(90deg, rgba(26,26,26,.84) 0%, rgba(26,26,26,.58) 38%, rgba(26,26,26,.12) 72%, rgba(26,26,26,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(26,26,26,.60) 100%),
    url('/assets/img/son/hero-voetbalflame-v4.jpg');
}
@media (max-width: 720px) {
  .theme-son .hero-bg {
    background-image:
      linear-gradient(180deg, rgba(26,26,26,.45) 0%, rgba(26,26,26,.60) 50%, rgba(26,26,26,.88) 100%),
      url('/assets/img/son/hero-voetbalflame-v4-mobile.jpg');
  }
}

/* Officieel SON-logo op een witte clear-space chip — leest op de donkere topbar zonder
 * het master-artwork te herkleuren (guardrail: nooit natekenen/herkleuren). */
.theme-son .topbar .brand {
  background: #fff;
  padding: 6px 12px;
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.theme-son .topbar .brand img { height: 40px; }
@media (max-width: 720px) {
  .theme-son .topbar .brand { padding: 5px 9px; }
  .theme-son .topbar .brand img { height: 32px; }
}

/* Steun-slot — uitnodigende biscuit-kaart met SO-rode doneerknop (i.p.v. donker reclame-slot).
 * De knop is een echte externe link (nieuw tabblad) naar SON's eigen kanaal — nooit betaling hier. */
.theme-son .steun-slot {
  background: var(--mute);
  color: var(--ink);
  border: 1px solid var(--line);
}
.steun-slot .steun-inner { display: grid; gap: 10px; justify-items: start; }
.steun-slot strong { font-size: 1.15rem; }
.steun-slot span { opacity: .85; max-width: 60ch; }
.steun-slot .steun-btn { margin-top: 4px; }

/* Prijzenblok — symbolische winnaarsprijs (Kees Konijn-knuffel, suggestie SON).
 * Biscuit-kaart met SO-rode trofee-badge; geen geldobject, puur een vrolijk extraatje. */
.son-prize {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--mute);
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.son-prize-kees {
  flex: 0 0 auto;
  width: 72px; height: auto;
  align-self: center;
}
@media (max-width: 600px) { .son-prize-kees { width: 88px; } }
.son-prize-body { display: grid; gap: 4px; min-width: 0; }
.son-prize-kicker {
  font-size: .78rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--orange);
}
.son-prize-title { font-size: 1.15rem; }
.son-prize-desc { margin: 0; opacity: .85; max-width: 70ch; }
@media (max-width: 600px) {
  .son-prize { flex-direction: column; gap: 10px; }
}

/* Medaille-accenten — spaarzaam: alleen de podiumplekken in de Top-5 ranglijst. */
.theme-son .rank li:nth-child(1) .pos { color: var(--gold); }
.theme-son .rank li:nth-child(2) .pos { color: var(--silver); }
.theme-son .rank li:nth-child(3) .pos { color: var(--bronze); }

/* Niet-monetaire referral-kaart op de voorspelpagina na inleveren (virale loop, geen geldbedragen) */
.steun-referral {
  background: var(--mute);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 16px;
}
.steun-you { margin: 0; font-size: 1.05rem; }
.steun-you strong { color: var(--orange); }

/* Persistente speelse steun-balk — op elke SON-pagina (boven de footer).
 * Doel #2: donatie altijd present. SO-rood met feest-accent (paars) → ludiek. */
.son-steun-banner {
  background: linear-gradient(100deg, var(--orange) 0%, #C8141B 62%, #A600DE 135%);
  color: #fff;
  margin-top: 40px;
}
.son-steun-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 16px 18px; flex-wrap: wrap;
}
.son-steun-msg { display: grid; gap: 2px; min-width: 0; }
.son-steun-msg strong { font-size: 1.1rem; }
.son-steun-msg span { opacity: .92; font-size: .95rem; max-width: 70ch; }
.son-steun-banner .son-steun-cta {
  background: #fff; color: var(--orange); font-weight: 800; white-space: nowrap;
  animation: son-pulse 2.2s ease-in-out infinite;
}
.son-steun-banner .son-steun-cta:hover { background: #fff; transform: translateY(-1px); }
@keyframes son-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
  50%      { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
}
@media (prefers-reduced-motion: reduce) { .son-steun-banner .son-steun-cta { animation: none; } }
@media (max-width: 600px) {
  .son-steun-inner { flex-direction: column; align-items: stretch; text-align: center; }
  .son-steun-banner .son-steun-cta { width: 100%; }
}

/* Footer */
.theme-son .son-foot-note { font-weight: 700; color: var(--orange); margin: 4px 0; }
.theme-son .powered-neutral { opacity: .8; }