/* ==========================================================================
   Ittihad Islami — Design System
   Tokens, primitives, and reusable components shared by every page.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,500&family=Inter:wght@400;500;600;700;800&family=Noto+Sans+Arabic:wght@400;500;600;700&family=Amiri:wght@400;700&display=swap');

:root {
  /* --- Color: light (default) --- */
  --ink: #1b1b1a;
  --ink-soft: #4a4a47;
  --ink-mute: #7a7871;
  --paper: #faf8f4;
  --paper-raised: #ffffff;
  --paper-sunken: #f1ede4;
  --line: #e6e1d6;
  --line-soft: #efebe1;

  --green: #35603f;
  --green-strong: #234630;
  --green-soft: #e7efe6;
  --green-tint: #f2f7f1;

  --sand: #b68a4e;
  --sand-soft: #f6ece0;

  --gold-accent: #b68a4e; /* used sparingly: badges, dividers — never large fills */
  --gold-accent-light: #e4c07a; /* gold-on-dark text (green cards, kiosk scherm) — --gold-accent itself is too dark on green */

  --danger: #b3432f;
  --danger-soft: #fbeae6;
  --info: #2f6f8f;

  --shadow-sm: 0 1px 2px rgba(27, 27, 26, 0.06), 0 1px 1px rgba(27, 27, 26, 0.04);
  --shadow-md: 0 8px 24px rgba(27, 27, 26, 0.08), 0 2px 6px rgba(27, 27, 26, 0.05);
  --shadow-lg: 0 20px 48px rgba(27, 27, 26, 0.14), 0 6px 16px rgba(27, 27, 26, 0.08);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Newsreader', 'Inter', serif;
  --font-ar: 'Noto Sans Arabic', 'Inter', sans-serif;

  --container: 1200px;
  --header-h: 72px;
  --bottom-nav-h: 64px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --ink: #f2f0ea;
  --ink-soft: #cfccc2;
  --ink-mute: #96938a;
  --paper: #14140f;
  --paper-raised: #1c1c16;
  --paper-sunken: #101007;
  --line: #2c2b21;
  --line-soft: #232219;

  --green: #6fae7c;
  --green-strong: #8fc79a;
  --green-soft: #1a2b1e;
  --green-tint: #172219;

  --sand: #d3ab6d;
  --sand-soft: #2b2214;

  --danger: #e4735c;
  --danger-soft: #2e1913;
  --info: #6bb6d6;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f2f0ea;
    --ink-soft: #cfccc2;
    --ink-mute: #96938a;
    --paper: #14140f;
    --paper-raised: #1c1c16;
    --paper-sunken: #101007;
    --line: #2c2b21;
    --line-soft: #232219;

    --green: #6fae7c;
    --green-strong: #8fc79a;
    --green-soft: #1a2b1e;
    --green-tint: #172219;

    --sand: #d3ab6d;
    --sand-soft: #2b2214;

    --danger: #e4735c;
    --danger-soft: #2e1913;
    --info: #6bb6d6;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}

/* --- Reset & base --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html[data-text-size="large"] { font-size: 18.5px; }
[data-textsize-toggle][aria-pressed="true"] { background: var(--green); color: #fff; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
html[dir="rtl"] body { font-family: var(--font-ar), var(--font-ui); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Utility classes below (.stack/.row/.cluster/.spread/.grid/.alert/etc.) set
   display explicitly, which otherwise beats the UA stylesheet's [hidden]
   rule at equal specificity — this guarantees hidden always wins. */
[hidden] { display: none !important; }

/* --- Typography --- */
.display-1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.25rem, 4.5vw, 3.75rem); line-height: 1.08; letter-spacing: -0.01em; }
.display-2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; letter-spacing: -0.01em; }
.display-3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.25; }
.eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--green); }
.lede { font-size: 1.125rem; color: var(--ink-soft); line-height: 1.6; }
.muted { color: var(--ink-mute); }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }

/* --- Layout --- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }
.site-header .container { max-width: 1680px; }
.section { padding-block: var(--space-8); }
.section-tight { padding-block: var(--space-6); }
.grid { display: grid; gap: var(--space-5); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

@media (min-width: 640px)  { .grid-sm-2 { grid-template-columns: repeat(2, 1fr); } }

/* Brede formulieren: op een breed scherm lopen gewone invoervelden in twee
   kolommen i.p.v. één lange, smalle kolom. Alles wat geen los .field is
   (knoppen, meldingen, tabbladen, secties met eigen grid) blijft over de
   volle breedte, net als velden met een tekstvak, editor, bestand, vinkjes of
   radio's — die hebben ruimte nodig. Handmatig breed te maken met .field-full.
   max-width !important: veel formulieren hadden een vaste, smalle breedte. */
.form-wide { max-width: none !important; }
@media (min-width: 820px) {
  .form-wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; align-items: start; }
  .form-wide > * { grid-column: 1 / -1; }
  .form-wide > .field { grid-column: auto; }
  .form-wide > .btn:not(.btn-block) { justify-self: start; }
  .form-wide > .field.field-full,
  .form-wide > .field:has(input[name="title"]),
  .form-wide > .field:has(textarea),
  .form-wide > .field:has(.ql-container),
  .form-wide > .field:has(input[type="file"]),
  .form-wide > .field:has(input[type="checkbox"]),
  .form-wide > .field:has(input[type="radio"]),
  .form-wide > .field:has(.cluster),
  .form-wide > .field:has(.grid) { grid-column: 1 / -1; }
}
@media (min-width: 860px)  { .grid-md-3 { grid-template-columns: repeat(3, 1fr); } .grid-md-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .grid-lg-4 { grid-template-columns: repeat(4, 1fr); } .grid-lg-3 { grid-template-columns: repeat(3, 1fr); } }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 0.8rem 1.35rem; border-radius: var(--radius-full);
  font-weight: 600; font-size: 0.95rem; border: 1px solid transparent;
  cursor: pointer; transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), color .2s var(--ease);
  white-space: nowrap; min-height: 48px;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--green); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--green-strong); box-shadow: var(--shadow-md); }
.btn-secondary { background: var(--paper-raised); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--green); color: var(--green); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--paper-sunken); }
.btn-donate { background: var(--sand); color: #2a1c0a; box-shadow: var(--shadow-sm); }
.btn-donate:hover { filter: brightness(1.06); box-shadow: var(--shadow-md); }
.btn-sm { padding: 0.55rem 1rem; font-size: 0.85rem; min-height: 38px; }
.btn-lg { padding: 1rem 1.75rem; font-size: 1.05rem; min-height: 56px; }
.btn-block { width: 100%; }
.btn-icon { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: var(--radius-full); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Cards --- */
.card {
  background: var(--paper-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease), border-color .25s var(--ease);
}
a.card:hover, .card.hoverable:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--line); }
.card-body { padding: var(--space-5); }
.card-media { aspect-ratio: 16/10; background: var(--paper-sunken); position: relative; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }

/* --- Badges --- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.3rem 0.7rem; border-radius: var(--radius-full);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
  background: var(--green-soft); color: var(--green-strong);
}
.badge-sand { background: var(--sand-soft); color: #7a531f; }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-outline { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); }

/* Icoon-badge voor sectiekoppen in lange formulieren (bv. inschrijven.html)
   — zelfde opzet als de dashboard-kaarten in Beheer (icoon in een groen
   accentvlak i.p.v. kale tekst), voor dezelfde professionele, consistente
   uitstraling op de publieke site. */
.section-heading { display: flex; align-items: center; gap: 12px; }
.section-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex: none; background: var(--green-soft); color: var(--green-strong); }
.section-icon svg { width: 20px; height: 20px; }

/* Icon-badge voor kaarten (bv. de "Eén platform"-tegels op de homepage) —
   los van .badge hierboven (dat is een tekst-pil), dit is een cirkel met
   een eigen SVG-icoon erin (vaste kleur in het bestand zelf, want
   currentColor/CSS-variabelen werken niet door een <img>-grens heen). */
.pillar-icon { width: 52px; height: 52px; border-radius: var(--radius-full); background: var(--green-soft); padding: 12px; box-sizing: border-box; }
.pillar-icon.sand { background: var(--sand-soft); }

/* --- Forms --- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.875rem; font-weight: 600; color: var(--ink-soft); }
.field .hint { font-size: 0.8rem; color: var(--ink-mute); }
.field .error { font-size: 0.8rem; color: var(--danger); }
/* Verschijnt pas na een mislukte inzendpoging op een leeg verplicht veld
   (zie js/main.js) — niet standaard al bij het laden van de pagina. */
.field label .required-flag { color: var(--danger); font-weight: 700; }
.field label.req::after { content: " *"; color: var(--danger); font-weight: 700; }
/* :not(checkbox):not(radio):not(file) — anders erven die ook de tekstveld-
   opmaak (min-height: 48px, width: 100%, padding, rand) en worden ze
   reusachtige volle-breedte blokken i.p.v. een klein knopje. Elk krijgt
   hieronder zijn eigen, met de tekstgrootte meeschalende formaat. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea {
  font: inherit; color: var(--ink); background: var(--paper-raised);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem; min-height: 48px; width: 100%;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--green); box-shadow: 0 0 0 4px var(--green-soft); outline: none;
}
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger); }
input[type="checkbox"], input[type="radio"] { width: 1.1em; height: 1.1em; min-height: auto; flex: none; accent-color: var(--green); cursor: pointer; }
/* De "Bestand kiezen"-knop op dezelfde maat als de kleine knoppen elders
   (.btn-secondary.btn-sm) i.p.v. het kale, te-groot ogende standaard-input. */
input[type="file"] { font: inherit; font-size: 0.85rem; color: var(--ink-soft); border: none; padding: 0; min-height: auto; width: auto; background: transparent; }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; font-size: 0.85rem; color: var(--ink);
  padding: 0.55rem 1rem; margin-right: 12px;
  border-radius: var(--radius-full); border: 1px solid var(--line); background: var(--paper-raised);
  cursor: pointer; transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
input[type="file"]::file-selector-button:hover { border-color: var(--green); color: var(--green); }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; }
.checkbox-row input { width: 20px; height: 20px; min-height: 20px; flex: none; margin-top: 2px; }

/* --- Alerts --- */
.alert { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--paper-sunken); }
.alert-info { background: color-mix(in srgb, var(--info) 10%, var(--paper-raised)); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.alert-danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); }
.alert-success { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 30%, transparent); color: var(--green-strong); }

/* --- Modal --- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(20, 18, 14, 0.5);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 200; backdrop-filter: blur(2px);
}
.modal-backdrop[hidden] { display: none; }
@media (min-width: 720px) { .modal-backdrop { align-items: center; padding: var(--space-5); } }
.modal {
  background: var(--paper-raised); width: 100%; max-width: 560px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg);
  animation: modal-up 0.25s var(--ease);
}
@media (min-width: 720px) { .modal { border-radius: var(--radius-lg); } }
@keyframes modal-up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5); border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; background: var(--paper-raised); }
.modal-body { padding: var(--space-5); }

/* --- Skip link --- */
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper);
  padding: 12px 20px; border-radius: 0 0 10px 0; z-index: 999;
}
.skip-link:focus { left: 0; }

/* --- Header / Nav --- */
.site-header {
  position: sticky; top: 0; z-index: 100; min-height: var(--header-h);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .container { min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--ink); white-space: nowrap; flex: none; }
.brand .mark { width: 34px; height: 34px; flex: none; }
.brand small { display: block; font-family: var(--font-ui); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
/* Full logo (tower + wordmark + Arabic name) used in the header — replaces
   the icon+text pair; the image already carries the wordmark/subtitle, so
   no separate text markup is needed alongside it. */
.brand .site-logo { height: 44px; width: auto; flex: none; }
/* Het logo-bestand heeft zelf een witte achtergrond gebakken; in donkere
   modus geven we het daarom bewust een lichte kaart mee (padding + ronding)
   i.p.v. dat het als een toevallig wit blok op het donkere vlak staat. */
:root[data-theme="dark"] .site-logo { background: #fff; padding: 4px 8px; border-radius: var(--radius-sm); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-logo { background: #fff; padding: 4px 8px; border-radius: var(--radius-sm); }
}
.header-actions { flex-wrap: nowrap; }
@media (max-width: 460px) {
  .brand { font-size: 1.02rem; gap: 8px; }
  .brand .mark { width: 28px; height: 28px; }
  .brand .site-logo { height: 36px; }
  .brand small { font-size: 0.56rem; }
  .header-actions { gap: 4px; }
  .account-label { display: none; }
  a.btn.account-btn { width: 44px; padding: 0; }
}

.main-nav { display: none; }
/* Was 1480px — met 10 gelijkwaardige items paste de balk pas op een heel
   brede monitor, dus de meeste laptopbezoekers zagen alleen het
   hamburgermenu. Nu nog maar 5 vaste items + één "Meer"-uitklapper, dus
   ruim voldoende aan een normale laptopbreedte. */
@media (min-width: 1120px) {
  .main-nav { display: flex; align-items: center; gap: var(--space-1); }
  .main-nav a, .main-nav-trigger {
    padding: 0.55rem 0.65rem; border-radius: var(--radius-full); font-size: 0.88rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
  }
  .main-nav a:hover, .main-nav a[aria-current="page"] { background: var(--green-soft); color: var(--green-strong); }
}
.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.nav-toggle { display: inline-flex; }
@media (min-width: 1120px) { .nav-toggle { display: none; } }

/* --- "Meer"-uitklapper in de hoofdnavigatie (bundelt Community, Nieuws,
   Media, Vrijwilligers, Overlijdensberichten, Over ons en Contact) --- */
.main-nav-item { position: relative; }
.main-nav-trigger {
  display: inline-flex; align-items: center; gap: 4px; background: none; border: none; font: inherit; cursor: pointer;
}
.main-nav-trigger svg { transition: transform 0.2s var(--ease); }
.main-nav-item.open .main-nav-trigger svg { transform: rotate(180deg); }
.main-nav-trigger:hover, .main-nav-item.open .main-nav-trigger, .main-nav-trigger.has-active { background: var(--green-soft); color: var(--green-strong); }
.nav-dropdown {
  position: absolute; top: 100%; inset-inline-start: 0; margin-top: 6px; padding: 6px;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  min-width: 210px; display: none; flex-direction: column; z-index: 200;
}
.main-nav-item.open .nav-dropdown { display: flex; }
.nav-dropdown a { display: block; padding: 0.55rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.nav-dropdown a:hover, .nav-dropdown a[aria-current="page"] { background: var(--green-soft); color: var(--green-strong); }

.mobile-panel {
  position: fixed; inset: 0; z-index: 150; background: var(--paper);
  transform: translateX(100%); transition: transform 0.3s var(--ease);
  overflow-y: auto;
}
.mobile-panel.open { transform: translateX(0); }
.mobile-panel .container { padding-block: var(--space-5); }
.mobile-panel a { display: block; padding: var(--space-4) 0; font-size: 1.15rem; font-weight: 600; border-bottom: 1px solid var(--line-soft); }

/* --- Bottom nav (mobile) --- */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 120;
  height: var(--bottom-nav-h);
  background: color-mix(in srgb, var(--paper-raised) 96%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-soft);
  display: flex; padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 1120px) { .bottom-nav { display: none; } }
.bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 0.68rem; font-weight: 600; color: var(--ink-mute);
}
.bottom-nav a svg { width: 22px; height: 22px; }
.bottom-nav a[aria-current="page"] { color: var(--green); }
body { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0)); }
@media (min-width: 1120px) { body { padding-bottom: 0; } }

/* --- Hero --- */
.hero { position: relative; padding-block: var(--space-8) var(--space-7); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 50% at 85% -10%, var(--green-tint), transparent 70%),
    radial-gradient(40% 40% at 0% 100%, var(--sand-soft), transparent 70%);
}
.geo-motif { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url('../icons/pattern-star.svg'); background-repeat: repeat; }
.geo-motif-light { background-image: url('../icons/pattern-star-light.svg'); }

/* --- Prayer widget --- */
/* Sfeer-verloop op basis van het moment van de dag t.o.v. de bidtijden (zie
   getScenePeriod in js/prayer-times.js) — zelfde variabelen hergebruikt door
   scherm.html, zodat kiosk-scherm en dit kaartje visueel bij elkaar horen.
   Zonder data-scene (JS uitgeschakeld) valt dit terug op het gewone groen. */
[data-scene] { --scene-a: var(--green-strong); --scene-b: var(--green); --scene-c: var(--green-strong); }
[data-scene="night"]     { --scene-a:#0d1b13; --scene-b:#16301f; --scene-c:#0d1b13; }
[data-scene="fajr"]      { --scene-a:#16283a; --scene-b:#2d4a52; --scene-c:#3a3a38; }
[data-scene="morning"]   { --scene-a:#1f4029; --scene-b:#2f5a3d; --scene-c:#234630; }
[data-scene="midday"]    { --scene-a:#1f4029; --scene-b:#35603f; --scene-c:#1f4029; }
[data-scene="afternoon"] { --scene-a:#234630; --scene-b:#4a5535; --scene-c:#3a3220; }
[data-scene="maghrib"]   { --scene-a:#2a1f18; --scene-b:#6b3f28; --scene-c:#3a2015; }

.prayer-widget {
  background: linear-gradient(160deg, var(--scene-a), var(--scene-b) 55%, var(--scene-c));
  color: #fff; border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
  border: 1px solid rgba(182,138,78,.35);
}
.prayer-widget::after {
  content: ""; position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
  background-image: url('../icons/pattern-star-light.svg'); background-repeat: repeat;
}
.prayer-clock-row { display: grid; grid-template-columns: 1fr minmax(160px, 320px) 1fr; align-items: center; gap: var(--space-3); position: relative; }
@media (max-width: 560px) { .prayer-clock-row { grid-template-columns: 1fr; justify-items: center; gap: 10px; } }
.prayer-clock-side { text-align: center; }
.prayer-clock-side .n { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.8; }
.prayer-clock-side .t { font-size: clamp(1.1rem, 2.4vw, 1.5rem); font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 4px; }
.prayer-clock-card { background: rgba(255,255,255,0.12); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); text-align: center; position: relative; }
.prayer-clock-time { font-size: clamp(2rem, 6vw, 3rem); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.prayer-clock-time .sec { opacity: 0.55; }
.prayer-clock-date { font-size: 0.8rem; color: var(--gold-accent-light); margin-top: 6px; }
.prayer-countdown { text-align: center; font-size: clamp(1rem, 2.2vw, 1.2rem); font-weight: 700; margin-top: var(--space-5); position: relative; }
.prayer-countdown .ph { text-transform: uppercase; font-size: 0.62em; letter-spacing: 0.08em; opacity: 0.8; font-weight: 700; margin: 0 2px; }
.prayer-clock-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); margin-top: var(--space-5); position: relative; }
@media (max-width: 640px) { .prayer-clock-grid { grid-template-columns: repeat(3, 1fr); } }
.prayer-clock-pill {
  background: rgba(255,255,255,0.12); border-radius: var(--radius-md); padding: var(--space-3) var(--space-2);
  text-align: center; backdrop-filter: blur(4px); transition: box-shadow .3s ease;
}
.prayer-clock-pill.active {
  background: rgba(255,255,255,0.94); color: var(--green-strong);
  box-shadow: 0 0 0 2px var(--gold-accent), 0 0 0 6px rgba(182,138,78,.22);
  animation: prayer-pill-glow 3.2s ease-in-out infinite;
}
.prayer-clock-pill .n { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.8; }
.prayer-clock-pill.active .n { opacity: 1; }
.prayer-clock-pill .t { font-size: clamp(0.95rem, 2vw, 1.1rem); font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.prayer-clock-pill .o { font-size: 0.7rem; opacity: 0.75; margin-top: 2px; }
@keyframes prayer-pill-glow {
  0%, 100% { box-shadow: 0 0 0 2px var(--gold-accent), 0 0 0 6px rgba(182,138,78,.22); }
  50% { box-shadow: 0 0 0 2px var(--gold-accent), 0 0 0 10px rgba(182,138,78,.08); }
}
@media (prefers-reduced-motion: reduce) { .prayer-clock-pill.active { animation: none; } }

/* --- Utility --- */
.divider { height: 1px; background: var(--line-soft); border: 0; margin: var(--space-6) 0; }
.pill-tabs { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: 4px; -ms-overflow-style: none; scrollbar-width: none; }
.pill-tabs::-webkit-scrollbar { display: none; }
/* Randvervaging als hint dat de rij verder scrolt (zie js/main.js) — fade
   alleen aan de kant(en) waar nog meer te zien is. */
.pill-tabs.fade-start.fade-end { mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent); }
.pill-tabs.fade-start:not(.fade-end) { mask-image: linear-gradient(to right, transparent, black 28px); -webkit-mask-image: linear-gradient(to right, transparent, black 28px); }
.pill-tabs.fade-end:not(.fade-start) { mask-image: linear-gradient(to right, black calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent); }
.pill-tab { flex: none; padding: 0.55rem 1rem; border-radius: var(--radius-full); border: 1px solid var(--line); background: var(--paper-raised); font-weight: 600; font-size: 0.85rem; color: var(--ink-soft); cursor: pointer; }
.pill-tab[aria-selected="true"] { background: var(--green); border-color: var(--green); color: #fff; }
/* Klasrij in Mijn onderwijs (account.html) is een <details> met een eigen
   pijltje i.p.v. de native driehoek — die verdwijnt zodra de summary
   flex-opgemaakt is, waardoor zonder dit niet zichtbaar was dat de rij
   uitklapbaar is. */
.edu-row-summary { list-style: none; border-radius: var(--radius-md); margin: -6px -8px; padding: 6px 8px; transition: background .1s ease; }
.edu-row-summary::-webkit-details-marker { display: none; }
.edu-row-summary:hover { background: var(--paper-sunken); }
.edu-row-chevron { font-size: 0.8em; font-weight: 700; color: var(--green); white-space: nowrap; }
.edu-row-chevron span { display: inline-block; transition: transform .15s ease; }
details[open] > .edu-row-summary .edu-row-chevron span { transform: rotate(180deg); }
.skeleton { background: linear-gradient(90deg, var(--paper-sunken) 25%, var(--line-soft) 37%, var(--paper-sunken) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* "Bekijk op site"-links vanuit Beheer springen naar dit element en geven
   even een groene gloed, zodat direct duidelijk is welk item bedoeld werd. */
.jump-highlight { animation: jump-pulse 2s ease; border-radius: var(--radius-md); }
@keyframes jump-pulse { 0%, 100% { box-shadow: none; } 15%, 60% { box-shadow: 0 0 0 4px var(--green-soft), 0 0 0 6px var(--green); } }

/* --- Footer --- */
.site-footer { background: var(--ink); color: var(--paper); padding-block: var(--space-7) var(--space-6); margin-top: var(--space-8); }
.site-footer a { color: var(--paper); opacity: 0.8; }
.site-footer a:hover { opacity: 1; text-decoration: underline; }
.site-footer .foot-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 760px) { .site-footer .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.site-footer h4 { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-accent-light); margin-bottom: var(--space-3); }
/* De footer-achtergrond is bewust het omgekeerde van de paginakleur (var(--ink)),
   dus hij wisselt van donker naar licht mee met de thema-toggle. --gold-accent-light
   is afgestemd op donkere vlakken; in donkere modus is de footer juist licht, dus
   dan gebruiken we de donkerdere --gold-accent zodat het contrast blijft kloppen. */
:root[data-theme="dark"] .site-footer h4 { color: var(--gold-accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-footer h4 { color: var(--gold-accent); }
}
.site-footer .foot-links li { margin-bottom: 10px; }
/* var(--paper) i.p.v. een vast wit: die kleur wisselt altijd mee zodat hij
   blijft contrasteren met de footer-achtergrond (var(--ink)), die zelf ook
   omdraait tussen licht en donker thema (zie de toelichting bij .site-footer h4). */
.site-footer .footer-brand-divider { border: 0; border-top: 1px solid var(--paper); opacity: 0.35; margin: 2px 0 0; }

/* --- RTL adjustments --- */
html[dir="rtl"] .mobile-panel { transform: translateX(-100%); }
html[dir="rtl"] .mobile-panel.open { transform: translateX(0); }
html[dir="rtl"] .skip-link { left: auto; right: -999px; }
html[dir="rtl"] .skip-link:focus { left: auto; right: 0; }

/* --- Reveal-on-scroll --- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Vrijwilligers-campagnebanner (homepage): tekst, badge en QR-code vliegen
   ná elkaar van rechts naar links in — elk element gebruikt dezelfde
   keyframe-vorm maar met een eigen animation-delay, waardoor de onderlinge
   volgorde elke cyclus (8s) identiek blijft herhalen, met een rustpauze en
   een vloeiende in-/uitfade i.p.v. een abrupte "knipper" bij het herstarten
   van de lus. Volledig uitgeschakeld bij prefers-reduced-motion. */
@keyframes campaign-flyin {
  0% { transform: translateX(60px); opacity: 0; }
  10% { transform: translateX(0); opacity: 1; }
  85% { transform: translateX(0); opacity: 1; }
  95%, 100% { transform: translateX(60px); opacity: 0; }
}
.campaign-flyin-text, .campaign-flyin-badge, .campaign-flyin-qr {
  animation: campaign-flyin 8s var(--ease) infinite backwards;
}
.campaign-flyin-text { animation-delay: 0s; }
.campaign-flyin-badge { animation-delay: .9s; }
.campaign-flyin-qr { animation-delay: 1.8s; }
@media (prefers-reduced-motion: reduce) {
  .campaign-flyin-text, .campaign-flyin-badge, .campaign-flyin-qr { animation: none; opacity: 1; transform: none; }
}

/* Donatie-banner (homepage): een zachtjes kloppend hartje en een knop die
   af en toe kort oplicht — subtiele "levendigheid" i.p.v. een compleet
   statisch vlak, zonder de aandacht te stelen zoals de campagnebanner. */
.donate-heart-wrap {
  width: 72px; height: 72px; border-radius: var(--radius-full); background: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.donate-heart { width: 34px; height: 34px; animation: donate-heartbeat 2.6s ease-in-out infinite; }
@keyframes donate-heartbeat {
  0%, 45%, 100% { transform: scale(1); }
  15% { transform: scale(1.18); }
  30% { transform: scale(1.05); }
}
@keyframes donate-cta-glow {
  0%, 60%, 100% { box-shadow: var(--shadow-sm), 0 0 0 0 rgba(228,192,122,0); }
  75% { box-shadow: var(--shadow-sm), 0 0 0 10px rgba(228,192,122,.4); }
}
.donate-cta-glow { animation: donate-cta-glow 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .donate-heart, .donate-cta-glow { animation: none; }
}

/* --- Page header (inner pages) --- */
.page-head { padding-block: var(--space-7) var(--space-6); border-bottom: 1px solid var(--line-soft); background-image: url('../icons/pattern-star.svg'); background-repeat: repeat; }

/* --- Avatar --- */
.avatar { width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--green-soft); color: var(--green-strong); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }

/* --- Empty state --- */
/* --- Beheer: ingebouwde uitleg (zie js/admin-help.js) --- */
.admin-topbar { display: flex; gap: var(--space-3); align-items: flex-start; flex-wrap: wrap; margin-bottom: var(--space-5); }
.admin-topbar .global-search { margin-bottom: 0; flex: 1 1 320px; }
.help-dot {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 1.4em; height: 1.4em; margin-inline-start: 6px; padding: 0; border-radius: 50%;
  border: 1px solid var(--green); background: var(--green-soft); color: var(--green-strong);
  font: italic 700 0.78rem/1 var(--font-display); cursor: pointer; flex: none;
}
.help-dot:hover, .help-dot[aria-expanded="true"] { background: var(--green); color: #fff; }
.help-dot:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.help-dot-static { margin-inline-start: 0; margin-inline-end: 4px; cursor: inherit; }
.help-pop {
  position: fixed; z-index: 400; max-height: calc(100vh - 24px); overflow-y: auto;
  background: var(--paper-raised); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 14px 40px 14px 16px; font-size: 0.875rem; line-height: 1.55;
}
.help-pop p { margin: 0 0 8px; }
.help-pop p:last-child, .help-pop ul:last-child { margin-bottom: 0; }
.help-pop ul { margin: 0 0 8px; padding-inline-start: 18px; }
.help-pop li { margin-bottom: 4px; }
.help-pop-title { display: block; font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; margin-bottom: 8px; }
.help-pop-close { position: absolute; top: 8px; inset-inline-end: 8px; border: 0; background: none; color: var(--ink-mute); cursor: pointer; font-size: 0.95rem; padding: 4px 6px; border-radius: 6px; }
.help-pop-close:hover { background: var(--paper-sunken); color: var(--ink); }

/* --- Actueel: nieuws + activiteiten als doorlopende, klikbare kaartenreeks (voorpagina) --- */
.feed-track {
  display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: 6px 4px 20px; margin: 0 -4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.feed-track::-webkit-scrollbar { display: none; }
.feed-track:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: var(--radius-md); }
.feed-card {
  flex: 0 0 min(340px, 86%); scroll-snap-align: start; display: flex; flex-direction: column;
  color: inherit; text-decoration: none;
}
.feed-card-media { position: relative; aspect-ratio: 16 / 10; background: var(--green-strong); overflow: hidden; }
/* De afbeelding wordt nooit afgesneden (ook een vierkante badge of een staande flyer niet): de hele
   afbeelding staat er in, met een vervaagde kopie ervan als achtergrond zodat er geen lege balken zijn. */
.feed-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.feed-card-media .feed-img-bg { object-fit: cover; filter: blur(22px) saturate(1.1); transform: scale(1.2); opacity: .9; }
.feed-card-media .feed-img-fg { object-fit: contain; transition: transform .5s var(--ease); }
a.feed-card:hover .feed-card-media .feed-img-fg { transform: scale(1.04); }
.feed-card-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, var(--green-strong), var(--green));
  background-image: url('../icons/pattern-star-light.svg'), linear-gradient(145deg, var(--green-strong), var(--green));
  background-repeat: repeat, no-repeat; background-size: 120px, cover;
  font-size: 2.6rem; color: #fff;
}
.feed-card-media .badge { position: absolute; top: 12px; inset-inline-start: 12px; background: var(--paper-raised); box-shadow: var(--shadow-sm); }
.feed-card-media .badge-important { background: var(--sand-soft); color: #7a531f; }
.feed-card-body { display: flex; flex-direction: column; gap: 8px; padding: var(--space-4) var(--space-5) var(--space-5); flex: 1; }
.feed-card-title { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; line-height: 1.25; margin: 0; }
.feed-card-text {
  margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.feed-card-cta { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: .9rem; color: var(--green); }
.feed-card-wide { flex: 1 0 100%; }
.feed-dots { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
.feed-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: var(--line); cursor: pointer; transition: background .2s, width .2s; }
.feed-dots button[aria-current="true"] { background: var(--green); width: 24px; border-radius: 6px; }
[dir="rtl"] .feed-nav { transform: scaleX(-1); }
@media (max-width: 819px) { .feed-nav { display: none; } }

.empty-state { text-align: center; padding: var(--space-8) var(--space-4); color: var(--ink-mute); }

/* --- Rich text (admin-authored news body / event description) --- */
.rich-text { line-height: 1.65; }
.rich-text p { margin: 0 0 1em; }
.rich-text p:last-child { margin-bottom: 0; }
.rich-text a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.rich-text ul, .rich-text ol { margin: 0 0 1em; padding-inline-start: 1.4em; }
.rich-text li { margin-bottom: 0.3em; }
.rich-text h2, .rich-text h3 { margin: 1.2em 0 0.5em; }
.rich-text h2:first-child, .rich-text h3:first-child { margin-top: 0; }
.rich-text blockquote { margin: 0 0 1em; padding-inline-start: 1em; border-inline-start: 3px solid var(--line); color: var(--ink-soft); }

/* --- Onderwijs: aanbod-kaarten met foto en titel erover --- */
.program-card { display: flex; flex-direction: column; }
.program-media { position: relative; aspect-ratio: 4/5; background: var(--paper-raised); }
.program-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.program-media::after { content: ""; position: absolute; inset: 0 0 -1px 0; background: linear-gradient(to bottom, transparent var(--fade-from, 62%), var(--paper-raised) var(--fade-to, 94%)); }
.program-title { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: -30px; text-align: center; }
.program-title h3 { margin: 0; }
.program-mark { color: var(--green); line-height: 0; }
.program-rule { width: 64px; height: 2px; border-radius: 2px; background: var(--gold-accent); }

.cta-on-green p a { color: #fff; text-decoration: underline; }

/* --- Zwevende inschrijfknop (Onderwijs) --- */
.fab-enroll {
  position: fixed; z-index: 110; inset-inline-end: var(--space-4);
  bottom: calc(var(--bottom-nav-h) + 16px + env(safe-area-inset-bottom, 0));
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0.85rem 1.3rem; border-radius: var(--radius-full);
  background: var(--green); color: #fff; font-weight: 700; text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease), background .2s var(--ease);
}
.fab-enroll.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.fab-enroll:hover { background: var(--green-strong); color: #fff; }
.fab-enroll svg { flex: none; }
@media (min-width: 1120px) { .fab-enroll { bottom: 24px; inset-inline-end: 24px; } }
@media (prefers-reduced-motion: reduce) { .fab-enroll { transition: none; } }

/* --- Taalknoppen in de kop (brede schermen) --- */
.lang-switch { display: none; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line-soft); border-radius: var(--radius-full); }
.lang-switch button { border: 0; background: transparent; color: inherit; font: inherit; font-size: 0.75rem; font-weight: 700; padding: 0.3rem 0.55rem; border-radius: var(--radius-full); cursor: pointer; }
.lang-switch button:hover { background: var(--paper-sunken); }
.lang-switch button[aria-current="true"] { background: var(--green); color: #fff; }
@media (min-width: 1120px) { .lang-switch { display: inline-flex; } }

/* Dezelfde knop, vast op de pagina (bv. naast de badge bovenaan Vrijwilligers) */
.fab-enroll.is-inline { position: static; opacity: 1; transform: none; pointer-events: auto; flex: none; }

/* --- Doneren: doel, bedrag, betalen (js/donate-flow.js) --- */
.df-goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.df-goal { appearance: none; font: inherit; color: inherit; cursor: pointer; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--paper-raised); border: 2px solid var(--line-soft); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-4); transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.df-goal:hover { border-color: var(--green); box-shadow: var(--shadow-sm); }
.df-goal[aria-pressed="true"] { border-color: var(--green); background: var(--green-soft); box-shadow: var(--shadow-sm); }
.df-goal .program-mark { color: var(--green); }
.df-bar { width: 100%; height: 6px; border-radius: 6px; background: var(--paper-sunken); overflow: hidden; }
.df-bar > span { display: block; height: 100%; background: var(--gold-accent); }
.df-amounts { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.df-amount { appearance: none; font: inherit; font-size: 1.2rem; font-weight: 700; color: inherit; cursor: pointer; min-width: 120px; padding: 0.9rem 1.5rem; text-align: center;
  background: var(--paper-raised); border: 2px solid var(--line-soft); border-radius: var(--radius-lg); transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.df-amount:hover { border-color: var(--green); }
.df-amount[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.df-pay-grid { display: grid; gap: var(--space-5); }
@media (min-width: 860px) { .df-pay-grid { grid-template-columns: 1.5fr 1fr; align-items: start; } }

.df-chosen { display: flex; gap: 14px; align-items: center; padding: var(--space-3) var(--space-4); background: var(--green-soft); border-radius: var(--radius-md); }
.df-chosen .program-mark { color: var(--green); flex: none; }
.df-summary { display: flex; flex-wrap: wrap; gap: var(--space-6); padding: var(--space-3) var(--space-4); background: var(--green-soft); border-radius: var(--radius-md); }
.df-summary > div { display: flex; flex-direction: column; }
.df-summary strong { font-size: 1.1rem; }
.df-qr-card { padding: var(--space-4); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--paper-sunken); }

/* --- Adhan thuis: promoband op Gebedstijden en de pagina adhan-thuis.html --- */
.adhan-promo {
  position: relative; overflow: hidden; display: grid; gap: var(--space-6); align-items: center;
  background: linear-gradient(160deg, var(--green-strong), var(--green) 60%, #3d5a34);
  color: #fff; border-radius: var(--radius-lg); padding: var(--space-6);
  border: 1px solid rgba(182,138,78,.35); box-shadow: var(--shadow-lg);
}
.adhan-promo::after {
  content: ""; position: absolute; inset: 0; opacity: .45; pointer-events: none;
  background-image: url('../icons/pattern-star-light.svg'); background-repeat: repeat;
}
.adhan-promo > * { position: relative; z-index: 1; min-width: 0; }
@media (min-width: 860px) { .adhan-promo { grid-template-columns: 1.05fr 1fr; padding: var(--space-7); gap: var(--space-7); } }
.adhan-promo .eyebrow { color: var(--gold-accent-light); }
.adhan-promo h1, .adhan-promo h2 { color: #fff; text-wrap: balance; }
.adhan-promo p { color: rgba(255,255,255,.88); max-width: 60ch; }
.btn-light { background: #faf8f4; color: var(--green-strong); box-shadow: var(--shadow-sm); }
.btn-light:hover { background: #fff; box-shadow: var(--shadow-md); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.tv-frame { background: #0b0f0c; border-radius: 14px; padding: clamp(5px, 1.1vw, 10px); box-shadow: 0 18px 50px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.1); }
.tv-frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 6px; }
.tv-stand { width: 24%; height: 9px; margin: 0 auto; background: linear-gradient(#222a24, #0b0f0c); border-radius: 0 0 10px 10px; }
.phone-frame { width: min(100%, 230px); margin-inline: auto; background: #0b0f0c; border-radius: 34px; padding: 8px; box-shadow: 0 18px 50px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.1); }
.phone-frame img { display: block; width: 100%; height: auto; aspect-ratio: 375 / 812; border-radius: 27px; }
/* Warme variant (zand en goud) voor Gebedstijden en Adhan thuis: minder groen naast de groene gebedstijdenband */
.adhan-promo-warm {
  --warm-1: #f6ecd8; --warm-2: #ecdcbb; --warm-ink: #2b2417; --warm-soft: #4d4430; --warm-gold: #8a6428; --warm-line: rgba(138,100,40,.35);
  background: radial-gradient(120% 90% at 85% 10%, rgba(255,255,255,.55), transparent 55%), linear-gradient(160deg, var(--warm-1), var(--warm-2));
  color: var(--warm-ink); border-color: var(--warm-line);
}
.adhan-promo-warm::after { opacity: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23b68a4e' stroke-width='1' opacity='0.14'%3E%3Crect x='16' y='16' width='40' height='40'/%3E%3Crect x='16' y='16' width='40' height='40' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E"); }
.adhan-promo-warm .eyebrow { color: var(--warm-gold); }
.adhan-promo-warm h1, .adhan-promo-warm h2 { color: var(--warm-ink); }
.adhan-promo-warm p { color: var(--warm-soft); }
.adhan-promo-warm .btn-light { background: var(--green-strong); color: #fff; }
.adhan-promo-warm .btn-light:hover { background: var(--green); color: #fff; }
.adhan-promo-warm .btn-outline-light { background: transparent; color: var(--warm-ink); border-color: var(--warm-gold); }
.adhan-promo-warm .btn-outline-light:hover { background: rgba(138,100,40,.12); border-color: var(--warm-gold); }
.adhan-promo-warm .tv-frame { box-shadow: 0 22px 50px rgba(60,40,10,.35), 0 0 0 1px rgba(60,40,10,.25); }
:root[data-theme="dark"] .adhan-promo-warm { --warm-1: #2a2316; --warm-2: #1d1810; --warm-ink: #f4ecdc; --warm-soft: rgba(244,236,220,.82); --warm-gold: #e4c07a; --warm-line: rgba(228,192,122,.35); }
:root[data-theme="dark"] .adhan-promo-warm .btn-light { background: var(--gold-accent-light); color: #1d1810; }
:root[data-theme="dark"] .adhan-promo-warm .btn-light:hover { background: #f0d598; color: #1d1810; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .adhan-promo-warm { --warm-1: #2a2316; --warm-2: #1d1810; --warm-ink: #f4ecdc; --warm-soft: rgba(244,236,220,.82); --warm-gold: #e4c07a; --warm-line: rgba(228,192,122,.35); }
  :root:not([data-theme="light"]) .adhan-promo-warm .btn-light { background: var(--gold-accent-light); color: #1d1810; }
  :root:not([data-theme="light"]) .adhan-promo-warm .btn-light:hover { background: #f0d598; color: #1d1810; }
}
.adhome-figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.adhome-figure figcaption { text-align: center; font-size: .9rem; color: var(--ink-soft); }
.adhome-icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex: none; background: var(--green-soft); color: var(--green-strong); }
.adhome-icon svg { width: 24px; height: 24px; }
.adhome-step-n { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: var(--green); color: #fff; font-weight: 700; }
.adhome-link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-sunken); }
.adhome-link code { font-size: 1.05rem; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.adhome-qr { width: 148px; height: 148px; flex: none; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.adhome-faq { border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--paper-raised); padding: var(--space-3) var(--space-4); }
.adhome-faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.adhome-faq summary::-webkit-details-marker { display: none; }
.adhome-faq summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--green); flex: none; }
.adhome-faq[open] summary::after { content: "–"; }
.adhome-faq p { margin: var(--space-3) 0 0; color: var(--ink-soft); }
.adhome-gallery { display: grid; gap: var(--space-6); align-items: end; }
@media (min-width: 900px) { .adhome-gallery { grid-template-columns: 1fr 1fr 210px; } }

/* --- Commissie-aanmelding: flyer-pop-up (js/committee-flyer.js) en formulierpagina (commissie.html) --- */
.cflyer-backdrop {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(14,22,16,.7); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  overflow-y: auto; animation: cflyer-fade .25s ease-out;
}
.cflyer {
  position: relative; width: 100%; max-width: 470px; margin: auto; text-align: center; color: #fff;
  padding: 30px 28px 20px; border-radius: 28px; overflow: hidden;
  background: linear-gradient(165deg, #1c3d29 0%, #35603f 58%, #4b6034 100%);
  border: 1px solid rgba(228,192,122,.6);
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 0 7px rgba(14,22,16,.22), inset 0 0 0 8px rgba(228,192,122,.32);
  animation: cflyer-pop .4s cubic-bezier(.2,.9,.3,1.15);
}
.cflyer::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none; background-image: url('../icons/pattern-star-light.svg'); background-repeat: repeat; }
.cflyer > * { position: relative; }
.cflyer:focus { outline: none; }
.cflyer-x {
  position: absolute; top: 14px; inset-inline-end: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.22); color: #fff; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2;
}
.cflyer-x:hover { background: rgba(0,0,0,.4); }
.cflyer-logo { display: flex; justify-content: center; padding-inline: 20px; margin-bottom: 6px; }
@media (max-width: 420px) { .cflyer-logo { padding-top: 40px; } }
.cflyer-logo img { display: block; height: 96px; width: auto; max-width: 100%; padding: 10px 20px; background: #fff; border-radius: 16px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.cflyer-brand { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-accent-light); font-weight: 600; padding-inline: 44px; }
.cflyer-brand span { opacity: .6; padding-inline: .25em; }
.cflyer-title { font-family: var(--font-display, inherit); font-size: clamp(1.6rem, 6vw, 2.1rem); line-height: 1.15; margin: 20px 0 0; color: #fff; text-wrap: balance; }
.cflyer-title::after { content: ""; display: block; width: 64px; height: 2px; margin: 16px auto 0; background: linear-gradient(90deg, transparent, var(--gold-accent-light), transparent); }
.cflyer-text { margin: 14px 0 0; font-size: 1.04rem; line-height: 1.6; color: rgba(255,255,255,.92); text-wrap: pretty; }
.cflyer-when { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(228,192,122,.5); color: var(--gold-accent-light); font-weight: 700; }
.cflyer-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; padding: 15px 26px; min-height: 54px; border-radius: 999px;
  background: linear-gradient(180deg, #f1d28f, #d8a85a); color: #2a1c0a; font-weight: 700; font-size: 1.08rem; text-decoration: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .15s var(--ease), filter .2s var(--ease);
}
.cflyer-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.cflyer-btn:focus-visible, .cflyer-later:focus-visible, .cflyer-x:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.cflyer-later { display: block; margin: 12px auto 0; padding: 8px 12px; background: none; border: 0; color: rgba(255,255,255,.7); font-size: .85rem; text-decoration: underline; cursor: pointer; }
.cflyer-has-img { padding: 14px 14px 16px; }
.cflyer-imglink { display: block; margin-top: 30px; }
.cflyer-img { display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain; border-radius: 16px; }
@keyframes cflyer-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cflyer-pop { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cflyer-backdrop, .cflyer { animation: none; } }
.cm-period { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 8px 16px; border-radius: 999px; background: var(--green-soft); color: var(--green-strong); font-weight: 700; }
.cm-checks { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.cm-intro p { margin: 0; }
.cm-intro p + p { margin-top: var(--space-3); }

.cflyer-has-scene { padding-bottom: 0; }
.cflyer-scene { margin: 16px -28px 0; line-height: 0; }
.cflyer-scene img { display: block; width: 100%; height: 150px; object-fit: cover; object-position: center bottom; }
.cflyer-has-scene .cflyer-later { margin-bottom: 0; }
.cm-hero { align-items: end; }
.cm-hero .cm-text { align-self: center; }
.cm-hero .cm-art { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%); mask-image: linear-gradient(to right, transparent 0, #000 22%); margin-bottom: calc(-1 * var(--space-6)); margin-inline: calc(-1 * var(--space-6)); width: calc(100% + 2 * var(--space-6)); max-width: none; }
@media (min-width: 860px) { .cm-hero .cm-art { margin-bottom: calc(-1 * var(--space-7)); margin-inline: 0 calc(-1 * var(--space-7)); width: calc(100% + var(--space-7)); max-width: none; } }
.cm-hero.cm-hero-plain { grid-template-columns: 1fr; }
.adhan-promo .cm-period { background: rgba(255,255,255,.12); color: var(--gold-accent-light); border: 1px solid rgba(228,192,122,.5); }
.adhan-promo .cm-intro p { color: rgba(255,255,255,.9); }

/* Eigen flyer: de afbeelding in zijn geheel, zonder groene kaart, met een gekleurde knop eronder */
.cflyer.cflyer-has-img { max-width: none; width: auto; background: none; border: 0; box-shadow: none; padding: 0; overflow: visible; }
.cflyer-has-img::before { display: none; }
.cflyer-imgwrap { position: relative; display: flex; flex-direction: column; width: fit-content; max-width: 100%; margin: 0 auto; }
.cflyer-imgwrap .cflyer-imglink { display: block; margin-top: 0; line-height: 0; }
.cflyer-imgwrap .cflyer-img { width: auto; height: auto; max-width: min(92vw, 560px); max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); margin: 0 auto; border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.cflyer-imgwrap .cflyer-x { top: 10px; inset-inline-end: 10px; background: rgba(255,255,255,.94); color: #1b1b1a; border: 0; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.cflyer-imgwrap .cflyer-x:hover { background: #fff; }
.cflyer-btn-own { margin-top: 14px; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.cflyer-has-img .cflyer-later { color: #fff; opacity: .9; }

/* Aanmeldpagina in de stijl van een eigen flyer (commissie.html, zodra de commissie een eigen flyer heeft) */
.cm-flyer-theme { --cm-accent: #c94c6b; --cm-accent-ink: #ffffff; --cm-green: #1f4d34; --cm-cream: #fdf4ea; --cm-soft: #f8dfe4; color-scheme: light; position: relative; overflow-x: clip; background: linear-gradient(180deg, var(--cm-cream), #fbeee3 65%, var(--cm-cream)); }
.cm-flyer-theme .adhan-promo { background: transparent; color: var(--cm-green); border: 0; box-shadow: none; overflow: visible; grid-template-columns: 1fr; align-items: center; padding-block: var(--space-6); }
@media (min-width: 860px) { .cm-flyer-theme .adhan-promo { grid-template-columns: 1.25fr .75fr; gap: var(--space-7); } }
.cm-flyer-theme .adhan-promo::before { content: ""; position: absolute; left: -64px; top: -80px; width: 150px; height: 240px; background: url('../images/commissie/blad.svg') no-repeat center / contain; transform: rotate(-28deg) scaleX(-1); opacity: .9; pointer-events: none; }
.cm-flyer-theme .adhan-promo::after { content: ""; position: absolute; inset: auto; right: -44px; bottom: -64px; width: 140px; height: 224px; opacity: .9; background: url('../images/commissie/blad.svg') no-repeat center / contain; transform: rotate(-205deg); pointer-events: none; }
@media (max-width: 859px) {
  .cm-flyer-theme .adhan-promo { padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .cm-flyer-theme .adhan-promo::before { left: -52px; top: -64px; width: 112px; height: 180px; }
  .cm-flyer-theme .adhan-promo::after { right: -40px; bottom: -48px; width: 100px; height: 160px; }
}
.cm-flyer-theme .adhan-promo h1 { color: var(--cm-green); }
.cm-flyer-theme .adhan-promo p, .cm-flyer-theme .adhan-promo .cm-intro p { color: #3c3a35; }
.cm-flyer-theme .adhan-promo .eyebrow { align-self: flex-start; background: var(--cm-accent); color: var(--cm-accent-ink); padding: 6px 16px; border-radius: 8px; text-transform: capitalize; letter-spacing: .02em; font-size: .95rem; transform: rotate(-1.5deg); }
.cm-flyer-theme .adhan-promo .cm-period { background: var(--cm-accent); color: var(--cm-accent-ink); border: 0; box-shadow: 0 6px 16px color-mix(in srgb, var(--cm-accent) 30%, transparent); }
.cm-poster { display: none; }
.cm-flyer-theme .cm-poster { display: block; justify-self: center; width: min(78%, 320px); height: auto; border-radius: 14px; border: 6px solid #fff; background: #fff; box-shadow: 0 20px 46px rgba(31,77,52,.28); transform: rotate(2.2deg); }
@media (min-width: 860px) { .cm-flyer-theme .cm-poster { width: min(100%, 340px); } }
.cm-flyer-theme .cm-form, .cm-flyer-theme #cm-done { background: #fffaf5; border: 1px solid var(--cm-soft); border-radius: 22px; box-shadow: 0 10px 30px color-mix(in srgb, var(--cm-accent) 10%, transparent); color: #1b1b1a; }
.cm-flyer-theme #cm-done { background: var(--cm-soft); }
.cm-flyer-theme .cm-form .field label, .cm-flyer-theme .cm-form .checkbox-row span, .cm-flyer-theme #cm-done h2 { color: var(--cm-green); }
.cm-flyer-theme .cm-form .hint, .cm-flyer-theme .cm-form .text-sm { color: #6b625c; }
.cm-flyer-theme .cm-form input:not([type="checkbox"]), .cm-flyer-theme .cm-form textarea { background: #fff; color: #1b1b1a; border-color: #e6d6cb; }
.cm-flyer-theme .cm-form input:focus, .cm-flyer-theme .cm-form textarea:focus { outline: none; border-color: var(--cm-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cm-accent) 22%, transparent); }
.cm-flyer-theme .cm-form input[type="checkbox"] { accent-color: var(--cm-accent); }
.cm-flyer-theme .cm-form .required-flag, .cm-flyer-theme .cm-form label.req::after { color: var(--cm-accent); }
.cm-flyer-theme .cm-form a { color: var(--cm-accent); }
.cm-flyer-theme .cm-form button[type="submit"], .cm-flyer-theme #cm-done .btn-primary { background: var(--cm-accent); color: var(--cm-accent-ink); border-color: transparent; box-shadow: 0 8px 20px color-mix(in srgb, var(--cm-accent) 35%, transparent); }
.cm-flyer-theme .cm-form button[type="submit"]:hover, .cm-flyer-theme #cm-done .btn-primary:hover { filter: brightness(1.06); }
.cm-flyer-theme #cm-state .alert-info { background: #fff; border-color: var(--cm-soft); color: #1b1b1a; }
.cm-flyer-theme::after { content: ""; display: block; height: 90px; margin-top: var(--space-7); background: url('../images/commissie/golf.svg') bottom / 100% 100% no-repeat; }

/* Uitgelichte commissie-aanmelding boven "Nieuws en activiteiten" (index.html) */
#committee-feature { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.cm-feature { display: grid; gap: var(--space-5); align-items: center; padding: var(--space-5); border-radius: var(--radius-lg); text-decoration: none; box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.cm-feature-own { background: linear-gradient(160deg, #fdf4ea, #fbeadf); border: 1px solid #f3d3d9; color: #1f4d34; }
.cm-feature-green { background: linear-gradient(160deg, #1c3d29, #35603f 60%, #4b6034); border: 1px solid rgba(228,192,122,.5); color: #fff; }
@media (min-width: 720px) { .cm-feature { grid-template-columns: auto 1fr; gap: var(--space-7); padding: var(--space-6); } }
.cm-feature-img { display: block; justify-self: center; width: 100%; max-width: 440px; height: auto; border-radius: 14px; }
.cm-feature-poster { width: min(78%, 300px); border: 5px solid #fff; background: #fff; box-shadow: 0 16px 38px rgba(31,77,52,.25); transform: rotate(-1.6deg); }
.cm-feature-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.cm-feature-badge { display: inline-block; padding: 5px 14px; border-radius: 999px; font-size: .85rem; font-weight: 700; background: #c94c6b; color: #fff; }
.cm-feature-green .cm-feature-badge { background: rgba(255,255,255,.14); color: var(--gold-accent-light); border: 1px solid rgba(228,192,122,.5); }
.cm-feature-title { margin: 0; font-family: var(--font-display, inherit); font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.15; color: inherit; text-wrap: balance; }
.cm-feature-text { margin: 0; max-width: 56ch; font-size: 1.05rem; line-height: 1.6; color: inherit; opacity: .92; }
.cm-feature-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-2); padding: 14px 28px; min-height: 52px; border-radius: 999px; font-weight: 700; font-size: 1.05rem; background: linear-gradient(180deg, #f1d28f, #d8a85a); color: #2a1c0a; box-shadow: 0 8px 20px rgba(0,0,0,.2); transition: transform .15s var(--ease), filter .2s var(--ease); }
.cm-feature:hover .cm-feature-cta { transform: translateY(-1px); filter: brightness(1.05); }
.cm-feature:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.cm-checks-col { flex-direction: column; align-items: flex-start; gap: 10px; }

/* Aanmeldpagina: tijdens het laden niets tonen, zodat de stijl niet verspringt */
.cm-loading { min-height: 70vh; }
.cm-loading #cm-hero, .cm-loading .cm-form, .cm-loading #cm-state, .cm-loading #cm-done, .cm-loading #cm-preview-note { visibility: hidden; }

/* Over ons: foto met overlappende introductiekaart, waardenkaarten en de warme bezoekband */
.about-wrap { max-width: 1000px; }
.about-photo { margin: 0; position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--paper-sunken); }
.about-photo img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.about-photo figcaption { position: absolute; left: var(--space-4); top: var(--space-4); max-width: calc(100% - 2 * var(--space-4)); padding: 6px 14px; border-radius: 999px; font-size: .85rem; font-weight: 600; color: #fff; background: rgba(20,24,20,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.about-intro { position: relative; z-index: 1; margin: calc(-1 * var(--space-7)) var(--space-5) 0; padding: var(--space-6); background: var(--paper-raised); border: 1px solid var(--line-soft); border-top: 3px solid var(--gold-accent); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.about-intro .lede { margin: 0; }
.about-value { height: 100%; }
.about-value strong { font-size: 1.1rem; }
.about-value p { margin: 0; }
.about-visit { grid-template-columns: 1fr; }
@media (min-width: 860px) { .about-visit { grid-template-columns: 1.2fr 1fr; } }
.about-links { display: flex; flex-direction: column; }
.about-links a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; color: var(--warm-ink); font-weight: 600; font-size: 1.05rem; border-bottom: 1px solid var(--warm-line); text-decoration: none; }
.about-links a:first-child { border-top: 1px solid var(--warm-line); }
.about-links a:hover { color: var(--warm-gold); }
.about-links svg { width: 20px; height: 20px; flex: none; }
[dir="rtl"] .about-links svg { transform: scaleX(-1); }
@media (max-width: 640px) { .about-intro { margin: calc(-1 * var(--space-5)) var(--space-3) 0; padding: var(--space-5) var(--space-4); } }
@media (max-width: 640px) {
  .about-photo img { aspect-ratio: 4 / 3; object-position: 50% 60%; }
  .about-photo figcaption { left: var(--space-3); top: var(--space-3); padding: 4px 11px; font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .about-intro .lede { font-size: 1.05rem; }
}

/* Teksten uit Beheer > Pagina-teksten (opgemaakt): het eerste blok is de inleiding, een kop is een citaat in het groen */
.about-rich > p:first-child, .welcome-rich > p:first-child { font-size: 1.125rem; color: var(--ink-soft); line-height: 1.6; }
.welcome-rich { display: flex; flex-direction: column; gap: var(--space-5); }
.welcome-rich.rich-text > * { margin: 0; }
.welcome-rich.rich-text h2, .welcome-rich.rich-text h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.2; color: var(--green-strong); margin: var(--space-2) 0 0; }
.welcome-rich h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.welcome-rich h3 { font-size: 1.2rem; }
.welcome-rich.rich-text ul, .welcome-rich.rich-text ol { text-align: start; display: inline-block; align-self: center; }
.welcome-rich blockquote { border: 0; padding: 0; font-family: var(--font-display); font-size: 1.25rem; color: var(--green-strong); }
/* Opsommingen in opgemaakte tekst (nieuws, agenda, mededelingen, pagina-teksten) tonen hun bolletjes en nummers; de algemene reset haalde die weg */
.rich-text ul { list-style: disc; }
.rich-text ol { list-style: decimal; }
/* Uitlijning uit de opmaak-editor */
.rich-text .ql-align-left { text-align: left; }
.rich-text .ql-align-center { text-align: center; }
.rich-text .ql-align-right { text-align: right; }
.rich-text .ql-align-justify { text-align: justify; }
/* Welkomstblok: zonder uitlijning staat de tekst gecentreerd (zoals het blok altijd was) */
.welcome-rich.rich-text > :not([class*="ql-align"]) { text-align: center; }

/* Aanvraag collecte- of donatiebezoek (collecte.html): warme band met het logo, stappen en de kaart */
.cl-hero { grid-template-columns: 1fr; }
.cl-hero .lede { max-width: 62ch; }
.cl-wrap { max-width: 900px; }
.cl-steps { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.cl-steps li { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--paper-sunken); color: var(--ink-soft); font-weight: 600; font-size: .9rem; border: 1px solid var(--line-soft); }
.cl-steps .cl-n { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--paper-raised); color: var(--ink-soft); font-size: .8rem; border: 1px solid var(--line); }
.cl-steps li.active { background: var(--green-soft); color: var(--green-strong); border-color: var(--green); }
.cl-steps li.active .cl-n { background: var(--green); color: #fff; border-color: var(--green); }
.cl-steps li.done { color: var(--green-strong); }
.cl-steps li.done .cl-n { background: var(--gold-accent-light); color: #1d1810; border-color: var(--gold-accent); }
.cl-card { border-top: 3px solid var(--gold-accent); }
.cl-note { padding: var(--space-3) var(--space-4); border-inline-start: 4px solid var(--gold-accent); background: var(--paper-sunken); border-radius: var(--radius-sm); white-space: pre-line; }
#cl-code-input { font-size: 1.6rem; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.cl-form .field-full { grid-column: 1 / -1; }
.cl-files { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cl-files li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 4px 12px; border-radius: var(--radius-sm); background: var(--paper-sunken); font-size: .9rem; }
.cl-files li span { overflow-wrap: anywhere; }