/*
Theme Name: ICCLR
Theme URI: https://icclr.nl
Author: Cleverstone
Description: Custom theme voor het Islamitisch Cultureel Centrum Leidsche Rijn — gebouwd naar het ICCLR Website Redesign v3 (Claude Design). Server-rendered, flat design, licht/donker thema, gebedstijden via Mawaqit, ACF Free voor pagina-velden.
Version: 1.46.0
Requires PHP: 8.0
Text Domain: icclr
*/

/* ============================================================
   1. Design tokens (uit het ICCLR design system + v3-overrides)
   ============================================================ */
:root{
  /* Green scale */
  --green-950:#092220;--green-900:#0B2E2B;--green-800:#104039;--green-700:#14524B;--green-600:#1A6B61;--green-500:#248579;--green-200:#BFDCD7;--green-100:#E3EFED;--green-50:#EEF4F3;
  --gold-600:#A8822C;--gold-500:#C49A3C;--gold-200:#EAD9AC;--gold-100:#F4EAD3;--gold-50:#FBF6E9;
  --orange-700:#B85A12;--orange-600:#E9701E;--orange-500:#F0842F;--orange-200:#FBD8B8;--orange-100:#FCE7D3;--orange-50:#FEF4EB;
  --ink:#1A1C1B;--gray-700:#444B49;--gray-500:#6B7370;--gray-400:#9AA29F;--gray-200:#D8DEDC;--gray-100:#EEF1F0;--gray-50:#FAFBFA;--white:#FFFFFF;

  /* Semantiek — v3 gebruikt oranje als brand op de site */
  --brand-primary:#E9701E;--brand-primary-hover:#C96014;--brand-primary-active:#A94F12;--brand-accent:var(--gold-500);
  --text-heading:var(--green-900);--text-body:var(--ink);--text-muted:var(--gray-500);--text-on-brand:#fff;
  --text-link:#BC5310;--text-link-hover:#A94F12;
  --surface-page:#FFFFFF;--surface-alt:#F4F4F2;--surface-card:#FFFFFF;--surface-brand:var(--green-900);--surface-accent-tint:var(--gold-50);
  --border-default:#E4E4E1;--border-strong:var(--gray-400);--focus-ring:#E9701E;

  --status-success:#2E7D4F;--status-success-bg:#E7F2EB;--status-error:#B3362B;--status-error-bg:#F9E9E7;

  /* Typografie — Arabische tekens vallen via unicode-range automatisch
     naar het Arabische font, Latijnse blijven bij Inter. */
  --font-sans:"Inter","Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-arabic:"Noto Kufi Arabic","Geeza Pro","Segoe UI","Tahoma",sans-serif;
  --leading-body:1.65;--tracking-heading:-0.01em;--tracking-caps:0.08em;

  /* Ruimte / vormen */
  --radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-pill:999px;
  /* Flat design: geen schaduwen — vlakken worden gescheiden door kleur en 1px randen. */
  --dur-fast:120ms;--dur-med:220ms;--ease-out:cubic-bezier(.25,.6,.35,1);
  --space-section:clamp(32px,4vw,48px);
  --surface-brand-tint:#FEF4EB;
}

/* Donker thema — overgenomen uit het v3-design, gekeyd op <html data-theme> */
html[data-theme="donker"]{
  color-scheme:dark;
  --surface-page:#0A201E;--surface-alt:#0D2A27;--surface-card:#11332F;--surface-brand:#061715;
  --text-heading:#F1F7F6;--text-body:#D9E5E3;--text-muted:#93A8A4;
  --text-link:#F2A56B;--text-link-hover:#F8C69B;
  --border-default:rgba(255,255,255,.14);--border-strong:rgba(255,255,255,.32);
  --brand-primary:#E9701E;--brand-primary-hover:#C96014;--brand-primary-active:#A94F12;
  --focus-ring:#F2A56B;--surface-accent-tint:#241D0C;--surface-brand-tint:#2A1A0E;
}

/* ============================================================
   2. Basis
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:16px;line-height:var(--leading-body);transition:background-color .22s ease,color .22s ease}
img{max-width:100%;height:auto}
a{color:var(--text-link)}
a:hover{color:var(--text-link-hover)}
h1,h2,h3,h4{color:var(--text-heading);letter-spacing:var(--tracking-heading)}
/* Sierwoorden in Kufi. Let op: níét op [dir="rtl"] selecteren — dat raakt
   <html dir="rtl"> en zet dan de complete Arabische site in het display-font. */
.arabic{font-family:var(--font-arabic)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.wrap{max-width:1240px;margin:0 auto;padding:10px 20px 20px}
main.wrap{display:flex;flex-direction:column;gap:16px}

/* Secties / tegels */
.tile{background:var(--surface-alt);border-radius:20px;padding:28px;transition:background-color .22s ease}
/* Paginakop: geen kader, titel en intro direct op de pagina; kruimelpad erboven. */
.tile--hero{border-radius:10px;padding:clamp(28px,4vw,44px)}
.page-head .page-intro{font-size:17px}
.card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:20px;padding:28px;transition:background-color .22s ease}
.card--sm{border-radius:12px;padding:24px;border:1px solid var(--border-default)}
.grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.span-4{grid-column:span 4;min-width:0}
.span-5{grid-column:span 5;min-width:0}
.span-7{grid-column:span 7;min-width:0}
.auto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px}

/* ============================================================
   3. Knoppen & links
   ============================================================ */
.btn{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 20px;height:40px;border-radius:var(--radius-md);border:none;background:var(--brand-primary);color:#fff;font-family:var(--font-sans);font-weight:600;font-size:15px;text-decoration:none;transition:background-color var(--dur-fast) ease}
.btn:hover{background:var(--brand-primary-hover);color:#fff}
.btn:active{background:var(--brand-primary-active)}
.btn--secondary{background:transparent;border:1px solid var(--border-strong);color:var(--text-heading)}
.btn--secondary:hover{background:var(--surface-alt);color:var(--text-heading)}
.btn--sm{height:34px;padding:0 14px;font-size:14px}
.btn--lg{height:auto;padding:13px 24px;border-radius:10px;font-size:16px}
.btn--white{background:#fff;color:#A94F12}
.btn--white:hover{background:#FFF3E9;color:#A94F12}
.btn--green{background:var(--green-700);color:#fff}
.btn--green:hover{background:var(--green-900);color:#fff}
.btn--outline-light{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff}
.btn--outline-light:hover{background:rgba(255,255,255,.08);color:#fff}
.btn--white-green{background:#fff;color:var(--green-900)}
.btn--white-green:hover{background:var(--green-50);color:var(--green-900)}

.link-arrow{font-size:14px;font-weight:600;text-decoration:none}
.link-arrow:hover{text-decoration:underline}
.icon-btn{cursor:pointer;width:40px;height:40px;border-radius:var(--radius-pill);border:1px solid var(--border-default);background:transparent;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;transition:background-color var(--dur-fast) ease}
.icon-btn:hover{background:var(--surface-alt);color:var(--text-heading)}

/* ============================================================
   4. Header + navigatie
   ============================================================ */
.site-header{position:sticky;top:0;z-index:50;background:var(--surface-page);transition:background-color .22s ease}
/* Drie kolommen met gelijke zijkolommen: zo staat de navigatie exact in het midden. */
.site-header__inner{max-width:1240px;margin:0 auto;padding:14px 20px 10px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.site-header__logo{cursor:pointer;display:flex;align-items:center;text-decoration:none}
.site-header__logo img{height:46px;display:block;width:auto}
img.logo--dark{display:none}
html[data-theme="donker"] img.logo--light{display:none}
html[data-theme="donker"] img.logo--dark{display:block}

.main-nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding:5px;border-radius:var(--radius-pill);background:var(--surface-alt);transition:background-color .22s ease}
.main-nav ul{display:contents;list-style:none;margin:0;padding:0}
.main-nav li{position:relative}
.main-nav .menu-item-has-children>a{display:inline-flex;align-items:center;gap:6px}
.main-nav .menu-item-has-children>a::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7}
.main-nav .sub-menu{position:absolute;top:100%;inset-inline-start:0;margin-top:6px;min-width:230px;padding:8px;border-radius:14px;background:var(--surface-card);border:1px solid var(--border-default);display:none;flex-direction:column;gap:2px;z-index:60}
.main-nav .sub-menu::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px}
.main-nav li:hover>.sub-menu,.main-nav li:focus-within>.sub-menu,.main-nav li.is-open>.sub-menu{display:flex}
.main-nav .sub-menu li{display:block}
.main-nav .sub-menu a{display:block;padding:9px 12px;border-radius:10px;font-size:14px;white-space:nowrap}
.main-nav .sub-menu a:hover,.main-nav .sub-menu .current-menu-item>a{background:var(--surface-alt);color:var(--text-heading)}
.main-nav a{padding:8px 12px;border-radius:var(--radius-pill);font-size:14px;text-decoration:none;font-weight:500;color:var(--text-muted);background:transparent;transition:color .15s ease,background-color .15s ease}
.main-nav a:hover{color:var(--text-heading)}
.main-nav .current-menu-item>a,.main-nav .current_page_item>a{font-weight:600;color:var(--text-heading);background:var(--surface-card)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.header-actions{display:flex;align-items:center;gap:14px;justify-self:end}

/* Volgend gebed: label gedempt, naam en tijd in kopkleur. Geen kader. */
.header-prayer{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--text-heading);white-space:nowrap}
.header-prayer:hover{color:var(--text-link)}
.header-prayer__val{font-size:15px;font-weight:600}
.header-prayer__time{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}

.mobile-nav-btn{display:none;width:44px;height:44px;margin-inline-start:-12px;border:0;border-radius:12px;background:transparent;color:var(--text-heading);align-items:center;justify-content:center;cursor:pointer}
.mobile-nav-btn svg{width:22px;height:22px}
@media (hover:hover){.mobile-nav-btn:hover{background:var(--surface-alt)}}

.mobile-nav{display:none;flex-direction:column;padding:6px 14px 44px;border-top:1px solid var(--border-default)}
/* Open: schermvullend paneel onder de header, zelf scrollbaar; de pagina eronder staat stil. */
.mobile-nav.is-open{display:flex;position:fixed;left:0;right:0;bottom:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--surface-page);z-index:49}
body.nav-open{overflow:hidden}
/* Eén niveau per regel: hoofdpagina's als knoppen, een '#'-ouder (Meedoen) als
   kopje, en de onderliggende pagina's ingesprongen achter een streep — zodat je
   ziet wat een groep is en wat een link. */
.mobile-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.mobile-nav li{display:block}
.mobile-nav a{display:block;cursor:pointer;padding:13px 14px;border-radius:12px;font-size:17px;text-decoration:none;font-weight:600;color:var(--text-heading)}
.mobile-nav a:active{background:var(--surface-alt)}
/* Groepen zijn inklapbaar: de link zelf gaat naar de pagina, het chevron-knopje
   ernaast vouwt de subpagina's uit. app.js bouwt die rij op. */
.mobile-nav__row{display:flex;align-items:center;gap:4px}
.mobile-nav__row>a{flex:1 1 auto;min-width:0}
.mobile-nav__toggle{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;
  border-radius:12px;background:none;color:var(--text-muted);cursor:pointer}
.mobile-nav__toggle svg{width:20px;height:20px;transition:transform var(--dur-med) var(--ease-out)}
.mobile-nav .is-open>.mobile-nav__row .mobile-nav__toggle{color:var(--text-heading)}
.mobile-nav .is-open>.mobile-nav__row .mobile-nav__toggle svg{transform:rotate(180deg)}
.mobile-nav .heeft-sub>.sub-menu{display:none}
.mobile-nav .heeft-sub.is-open>.sub-menu{display:flex}
.mobile-nav .sub-menu{margin:2px 0 10px;padding-inline-start:12px;border-inline-start:2px solid var(--border-default)}
.mobile-nav .sub-menu a{padding:11px 12px;font-size:15.5px;font-weight:500;color:var(--text-body)}
.mobile-nav .current-menu-item>a,.mobile-nav .current_page_item>a{color:var(--brand-primary);background:var(--surface-alt)}

/* Kruimelpad onder de header, boven de pagina-tegel. */
.breadcrumbs{max-width:1240px;margin:0 auto;padding:6px 24px 0}
.breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--text-muted)}
.breadcrumbs li{display:flex;align-items:center;gap:6px}
.breadcrumbs li+li::before{content:"›";color:var(--border-strong);font-size:14px}
html[dir="rtl"] .breadcrumbs li+li::before{content:"‹"}
.breadcrumbs a{color:var(--text-muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--text-heading)}
.breadcrumbs [aria-current]{color:var(--text-heading);font-weight:500}

/* ============================================================
   5. Home / hero
   ============================================================ */
.hero{background:var(--surface-alt);border-radius:20px;overflow:hidden;position:relative;transition:background-color .22s ease}
.hero__grid{padding:clamp(36px,5vw,64px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:44px;align-items:center;position:relative}
.hero h1{margin:0 0 20px;font-size:clamp(38px,5vw,60px);font-weight:700;line-height:1.08;letter-spacing:-0.02em;color:var(--text-heading);text-wrap:pretty}
.hero h1 .accent{color:var(--brand-primary)}
.hero__intro{margin:0 0 30px;max-width:48ch;font-size:17px;line-height:1.65;color:var(--text-muted)}
.hero__actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.hero__link{font-size:15px}

/* Hero met foto: het beeld vult de kaart, een donkergroene loper eroverheen
   houdt de tekst leesbaar (zelfde principe als de hero van cleverstone.nl).
   Bewust één egale verloop-laag in plaats van links-donker: werkt ook in het
   Arabisch (rtl) en op mobiel, waar de tekst onder elkaar staat. */
.hero--foto{background:var(--green-950);min-height:clamp(420px,46vw,600px);display:grid;grid-template-columns:minmax(0,1fr)}
.hero--foto .hero__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;z-index:0;filter:saturate(1.06) contrast(1.04)}
/* Twee lagen: een diagonale loper die links (achter de tekst) donker is en
   rechts de foto vrijlaat, plus een lichte verticale laag voor de header
   bovenaan en de overgang onderaan. Zo blijft het beeld helder in plaats van
   overal even grauw. */
.hero--foto::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(6,23,21,.90) 0%,rgba(6,23,21,.74) 30%,rgba(6,23,21,.34) 62%,rgba(6,23,21,.16) 100%),
    linear-gradient(180deg,rgba(6,23,21,.38) 0%,rgba(6,23,21,0) 32%,rgba(6,23,21,0) 62%,rgba(6,23,21,.34) 100%)}
html[dir="rtl"] .hero--foto::after{
  background:
    linear-gradient(260deg,rgba(6,23,21,.90) 0%,rgba(6,23,21,.74) 30%,rgba(6,23,21,.34) 62%,rgba(6,23,21,.16) 100%),
    linear-gradient(180deg,rgba(6,23,21,.38) 0%,rgba(6,23,21,0) 32%,rgba(6,23,21,0) 62%,rgba(6,23,21,.34) 100%)}
/* Onderrand: alleen in het donkere thema lost de foto op in de paginakleur.
   In het lichte thema zag die overgang naar wit er wazig uit; daar eindigt de
   foto met een strakke rand tegen de witte sectie. */
html[data-theme="donker"] .hero--foto::before{content:"";position:absolute;inset-inline:0;bottom:-1px;z-index:2;pointer-events:none;
  height:clamp(56px,6.5vh,96px);
  background:linear-gradient(180deg,transparent 0%,var(--surface-page) 100%);
  /* Zachtere (uitdempende) versie waar color-mix bestaat: geen zichtbare naad
     waar het verloop begint. */
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--surface-page) 0%,transparent) 0%,
    color-mix(in srgb,var(--surface-page) 5%,transparent) 46%,
    color-mix(in srgb,var(--surface-page) 24%,transparent) 71%,
    color-mix(in srgb,var(--surface-page) 66%,transparent) 89%,
    var(--surface-page) 100%)}
.hero--foto .hero__grid{z-index:3;align-content:center;padding-block:clamp(44px,6vw,72px)}
.hero--foto h1{color:#fff}
.hero--foto h1 .accent{color:var(--orange-500)}
.hero--foto .hero__intro{color:rgba(255,255,255,.88)}
.hero--foto .hero__link{color:#fff}
.hero--foto .prayer-card{border-color:transparent;box-shadow:0 24px 60px rgba(4,18,16,.34),0 2px 8px rgba(4,18,16,.18)}

/* Schermbrede hero: het beeld loopt tot de schermranden door en de header staat
   er transparant overheen. `overflow-x:clip` op <html> vangt de breedte van de
   schuifbalk op (clip i.p.v. hidden, zodat de plakkende header blijft werken). */
html{overflow-x:clip}
main.home{padding-top:0}
.hero--full{border-radius:0;margin-inline:calc(50% - 50vw);min-height:max(min(76svh,640px),420px)}
.hero--full .hero__grid{width:100%;min-width:0;max-width:1240px;margin-inline:auto;
  padding:clamp(104px,10vw,140px) 20px clamp(104px,14vh,190px)}

/* Header boven de hero — wit logo, doorzichtige menupil. */
.site-header--over{position:fixed;inset-inline:0;top:0}
.site-header--over.is-top{background:transparent}
.site-header--over.is-top img.logo--light{display:none}
.site-header--over.is-top img.logo--dark{display:block}
.site-header--over.is-top .main-nav{background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.site-header--over.is-top .main-nav>ul>li>a{color:rgba(255,255,255,.86)}
.site-header--over.is-top .main-nav>ul>li>a:hover{color:#fff;background:rgba(255,255,255,.16)}
.site-header--over.is-top .main-nav>ul>li:is(.current-menu-item,.current_page_item)>a{color:#fff;background:rgba(255,255,255,.26)}
.site-header--over.is-top .lang-btn{color:rgba(255,255,255,.92)}
.site-header--over.is-top .lang-btn:hover{color:#fff;background:rgba(255,255,255,.18)}
.site-header--over.is-top .header-prayer{color:#fff}
.site-header--over.is-top .mobile-nav-btn{color:#fff}
@media (hover:hover){.site-header--over.is-top .mobile-nav-btn:hover{background:rgba(255,255,255,.14)}}
.site-header--over.is-top .main-nav .sub-menu a{color:var(--text-muted)}
.site-header--over.is-top .main-nav .sub-menu a:hover,
.site-header--over.is-top .main-nav .sub-menu .current-menu-item>a{color:var(--text-heading);background:var(--surface-alt)}

/* Home-secties: één afstand tussen secties, één koptekstmaat. */
main.home{gap:clamp(40px,5vw,64px);padding-bottom:var(--space-section)}
.home-section h2{margin:0;font-size:26px;font-weight:700;color:var(--text-heading);letter-spacing:var(--tracking-heading)}
.home-section h3{margin:0 0 12px;font-size:20px;font-weight:700;color:var(--text-heading)}
.home-section__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.home-nu{padding:0 12px}
.home-nu__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.home-nu__grid:has(.khatib-card){grid-template-columns:1fr 1fr 300px;gap:16px}
/* Elke kolom is een eigen vlak, zodat het blok afgebakend oogt. */
.home-nu__kolom{padding:clamp(20px,2.2vw,26px);display:flex;flex-direction:column}
.home-nu__kolom>h3{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--border-default);
  font-size:15px;font-weight:700;letter-spacing:var(--tracking-heading);color:var(--text-heading)}
.home-nu .khatib-card{padding:clamp(20px,2.2vw,26px)}
/* Zelfde kop als de andere twee kolommen, zodat de drie vlakken één rij vormen. */
.home-nu .khatib-card__kop{width:100%;margin:0 0 12px;padding-bottom:12px;
  border-bottom:1px solid var(--border-default);font-size:15px;font-weight:700;
  letter-spacing:var(--tracking-heading);color:var(--text-heading)}
.home-nu .khatib-card__datum{margin:0 0 14px}
.home-onderwijs{display:grid;grid-template-columns:minmax(240px,5fr) 7fr;gap:40px;align-items:center;padding:clamp(28px,4vw,48px)}
.home-onderwijs p{margin:10px 0 24px;max-width:40ch;font-size:16px;line-height:1.65;color:var(--text-muted)}
.home-onderwijs__actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.home-onderwijs__cats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.home-diensten{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.dienst{border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:8px;border:1px solid transparent;transition:background-color .22s ease,border-color .22s ease}
.dienst h3{margin:0}
.dienst p{margin:0 0 12px;font-size:15px;line-height:1.6;color:var(--text-muted)}
.dienst__links{margin-top:auto;display:flex;gap:20px;flex-wrap:wrap;align-items:baseline}
.dienst--uitvaart{background:var(--green-700);color:#fff}
.dienst--uitvaart h3{color:#fff}
.dienst--uitvaart p{color:rgba(255,255,255,.8)}
.dienst--uitvaart a{color:#fff}
.dienst__tel{font-size:17px;font-weight:700;text-decoration:none}
.dienst--bekeren{background:var(--surface-brand-tint)}
.dienst--portaal{background:var(--surface-card);border-color:var(--border-default)}
/* Donker: de drie tegels blijven in één groenfamilie — het warme accent zit in de
   rand en de link, niet in een bruin vlak dat uit de pagina springt. */
html[data-theme="donker"] .dienst--uitvaart{background:#14453E}
html[data-theme="donker"] .dienst--bekeren{background:var(--surface-card);border-color:rgba(242,165,107,.38)}

.page-title{margin:0 0 14px;font-size:clamp(32px,3.8vw,46px);font-weight:700;color:var(--text-heading);letter-spacing:var(--tracking-heading)}
.page-intro{margin:0;max-width:90ch;line-height:1.65;color:var(--text-muted)}

/* Onderwijs-kaartjes op home */
.programma-mini{cursor:pointer;text-decoration:none;background:var(--surface-card);border:1px solid var(--border-default);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:8px;transition:border-color .15s ease,background-color .22s ease}
.programma-mini:hover{border-color:var(--brand-primary)}
.programma-kaart{transition:border-color .15s ease,background-color .22s ease}
.programma-kaart:hover{border-color:var(--brand-primary)}
.programma-kaart h3{color:var(--text-heading)}
.programma-kaart h3 a:hover{color:var(--text-link)}
.programma-kaart__acties{margin-top:auto;display:flex;gap:16px;flex-wrap:wrap;padding-top:4px}
.programma-kaart__acties a:last-child{color:var(--text-heading)}
.programma-kaart__acties a:last-child:hover{color:var(--text-link)}
[id="arabisch"],[id="koran"],[id="islam"],[id="vaardigheden"]{scroll-margin-top:90px}
.programma-mini .ar{font-family:var(--font-arabic);font-size:30px;color:var(--brand-primary);line-height:1.4}
.programma-mini strong{font-size:17px;color:var(--text-heading)}
.programma-mini span.sub{font-size:13.5px;color:var(--text-muted);line-height:1.5}

/* Agenda datumblokken */
.date-block{width:50px;height:50px;flex:none;border-radius:12px;background:var(--surface-alt);display:flex;flex-direction:column;align-items:center;justify-content:center}
.date-block strong{font-size:17px;font-weight:700;color:var(--text-heading);line-height:1}
.date-block span{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.date-block--brand{width:72px;height:72px;border-radius:16px;background:var(--brand-primary)}
.date-block--brand strong{font-size:26px;color:#fff}
.date-block--brand span{font-size:12px;color:#fff;letter-spacing:.05em}

/* Mededelingen */
.mededeling-item{position:relative;display:flex;flex-direction:column;gap:2px;padding:10px 12px;
  margin-inline:-12px;border-radius:14px;transition:background-color var(--dur-fast) ease}
.mededeling-item:has(a):hover{background:var(--surface-alt)}
.mededeling-item time{font-size:12.5px;color:var(--text-muted);order:2}
.mededeling-item a{font-size:15px;font-weight:600;line-height:1.35;color:var(--text-heading);text-decoration:none}
.mededeling-item a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.mededeling-item a:hover{color:var(--text-link)}
.mededeling-item .title{font-size:15px;font-weight:600;line-height:1.35;color:var(--text-heading)}

/* ============================================================
   6. Gebedstijden
   ============================================================ */
.prayer-card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:18px;padding:24px 24px 20px;width:100%;max-width:400px;justify-self:end;transition:background-color .22s ease}
.prayer-card__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.prayer-card__head h2{margin:0;font-size:17px;font-weight:600;color:var(--text-heading)}
.prayer-card__head time{font-size:13px;color:var(--text-muted)}
.prayer-rows{display:flex;flex-direction:column;gap:2px}
.prayer-row{display:flex;align-items:baseline;gap:10px;padding:7px 10px;border-radius:var(--radius-md);background:transparent}
.prayer-row .name{font-size:15px;font-weight:500;color:var(--text-body)}
.prayer-row .tag{display:none;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-link)}
.prayer-row .time{margin-inline-start:auto;font-size:15px;font-variant-numeric:tabular-nums;font-weight:500;color:var(--text-body)}
.prayer-row.is-shurooq .name,.prayer-row.is-shurooq .time{color:var(--text-muted)}
.prayer-row.is-next{background:var(--surface-alt)}
.prayer-row.is-next .name,.prayer-row.is-next .time{font-weight:700;color:var(--text-heading)}
.prayer-row.is-next .tag{display:inline}
.prayer-card__foot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:12px;flex-wrap:wrap}
.prayer-card__jumua{font-size:13px;color:var(--text-muted)}

/* Khatib van het vrijdaggebed */
.khatib-card{text-align:center;padding:24px 22px 22px;display:flex;flex-direction:column;align-items:center}
.khatib-card__kop{margin:0;font-size:14px;font-weight:600;color:var(--text-heading)}
.khatib-card__datum{font-size:13px;color:var(--text-muted);margin:2px 0 16px}
.khatib-card__foto{width:84px;height:84px;border-radius:50%;object-fit:cover;margin-bottom:16px}
.khatib-card__foto--initialen{display:flex;align-items:center;justify-content:center;background:var(--surface-alt);color:var(--text-link);font-size:23px;font-weight:700;letter-spacing:.02em}
.khatib-card h3{margin:0;font-size:20px;font-weight:700;color:var(--text-heading);text-wrap:balance}
.khatib-card__onderwerp{margin:8px 0 0;font-size:14.5px;line-height:1.5;color:var(--text-muted)}
.khatib-card__tijd{margin-top:18px;width:100%;background:var(--surface-brand);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.khatib-card__tijd span{font-size:12.5px;color:rgba(255,255,255,.75)}
.khatib-card__tijd strong{font-size:26px;line-height:1.1;color:var(--orange-200);font-variant-numeric:tabular-nums}
html[data-theme="donker"] .khatib-card__tijd{background:var(--surface-alt)}
.gebeds-khatib{max-width:360px;margin-bottom:20px}
.gebeds-khatib:empty{display:none}

.next-prayer-banner{display:inline-flex;align-items:center;gap:12px;padding:12px 18px;border-radius:12px;background:var(--surface-card);border:1px solid var(--border-default)}
.next-prayer-banner .label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-link)}
.next-prayer-banner .val{font-size:18px;font-weight:700;color:var(--text-heading);font-variant-numeric:tabular-nums}

.prayer-table-scroll{overflow-x:auto;border-radius:14px}
.prayer-table{min-width:720px;width:100%;border-collapse:collapse;background:var(--surface-card);border-radius:14px;overflow:hidden}
.prayer-table th,.prayer-table td{padding:12px 16px;text-align:start;font-size:14.5px;border-bottom:1px solid var(--border-default)}
.prayer-table th{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
.prayer-table td{font-variant-numeric:tabular-nums;color:var(--text-body)}
.prayer-table td:first-child{font-weight:600;color:var(--text-heading);white-space:nowrap}
.prayer-table tr.is-today td{background:var(--surface-alt);font-weight:700;color:var(--text-heading)}
.prayer-table tr:last-child td{border-bottom:none}

/* ============================================================
   7. Formulieren
   ============================================================ */
.field{display:flex;flex-direction:column;gap:6px}
.field>label{font-size:13.5px;font-weight:600;color:var(--text-heading)}
.input,.select,.textarea{width:100%;padding:10px 12px;border-radius:var(--radius-md);border:1px solid var(--border-default);background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:15px;transition:border-color var(--dur-fast) ease}
.input:focus,.select:focus,.textarea:focus{border-color:var(--focus-ring);outline:2px solid var(--focus-ring);outline-offset:1px}
.textarea{resize:vertical}
.form-msg{display:none;padding:12px 16px;border-radius:var(--radius-md);font-size:14.5px;font-weight:500}
.form-msg.is-success{display:block;background:var(--status-success-bg);color:var(--status-success)}
.form-msg.is-error{display:block;background:var(--status-error-bg);color:var(--status-error)}
.hp-field{position:absolute;inset-inline-start:-9999px;opacity:0;height:0;overflow:hidden}

/* Badges */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:600;background:var(--surface-alt);color:var(--text-heading);border:1px solid var(--border-default)}
.badge--gold{background:var(--surface-accent-tint);color:var(--gold-600);border:none}
.badge--green{background:var(--green-50);color:var(--green-700);border:none}
html[data-theme="donker"] .badge--green{background:rgba(255,255,255,.08);color:#9fd0c8}

/* Bestuur */
.bestuur-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:24px}
.bestuur-lid{text-align:center}
.bestuur-lid .avatar{width:96px;height:96px;border-radius:50%;background:var(--surface-alt);color:var(--text-link);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:24px;font-weight:700}
.bestuur-lid .naam{font-weight:600;font-size:15px;color:var(--text-heading)}
.bestuur-lid .rol{font-size:13px;color:var(--text-muted);margin-top:4px;line-height:1.5}

/* Uitvaart stappen */
.step-circle{width:36px;height:36px;border-radius:50%;background:var(--green-700);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;margin-bottom:14px}

/* Foto-placeholder */
.img-slot{border-radius:20px;overflow:hidden;position:relative;min-height:300px;background:var(--green-100)}
html[data-theme="donker"] .img-slot{background:var(--surface-card)}
.img-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.img-slot .placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--green-700);font-size:14px;font-weight:500;text-align:center;padding:20px}
html[data-theme="donker"] .img-slot .placeholder{color:var(--text-muted)}

/* ============================================================
   7a. Vrije pagina-inhoud (page.php, Gutenberg)
   ============================================================ */
.pagina-inhoud{font-size:15.5px;line-height:1.7;max-width:100%}
.pagina-inhoud h2{font-size:24px;font-weight:700;margin:1.6em 0 .5em}
.pagina-inhoud h3{font-size:19px;font-weight:700;margin:1.4em 0 .4em}
.pagina-inhoud h2:first-child,.pagina-inhoud h3:first-child,.pagina-inhoud p:first-child{margin-top:0}
.pagina-inhoud ul,.pagina-inhoud ol{padding-inline-start:1.4em}
.pagina-inhoud li{margin-bottom:.35em}
.pagina-inhoud blockquote{margin:1.2em 0;padding:14px 20px;border-inline-start:3px solid var(--brand-primary);background:var(--surface-alt);border-radius:0 var(--radius-lg) var(--radius-lg) 0}
.pagina-inhoud table{border-collapse:collapse;width:100%;font-size:14.5px}
.pagina-inhoud th,.pagina-inhoud td{padding:10px 14px;border:1px solid var(--border-default);text-align:start}
.pagina-inhoud th{background:var(--surface-alt);font-weight:600;color:var(--text-heading)}
.pagina-inhoud img{border-radius:var(--radius-lg)}
.pagina-inhoud .wp-block-button__link{display:inline-flex;padding:11px 20px;border-radius:var(--radius-md);background:var(--brand-primary);color:#fff;font-weight:600;font-size:15px;text-decoration:none}
.pagina-inhoud .wp-block-button__link:hover{background:var(--brand-primary-hover);color:#fff}
.pagina-inhoud hr{border:none;border-top:1px solid var(--border-default);margin:2em 0}
.pagina-inhoud .fluentform{max-width:760px}

/* Formulierpagina: kop met intro, links uitleg op leesbreedte, rechts het formulier. */
.form-page{display:flex;flex-direction:column;gap:24px}
.form-page__hero .page-intro{margin:0;font-size:17px;max-width:90ch}
.form-page__jump{margin-top:20px}
.form-page__jump{display:none;height:auto;padding:10px 18px;font-size:14.5px}
.form-page__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start;padding:20px 12px 0}
.form-page__grid--only-form{grid-template-columns:minmax(0,720px);justify-content:center}
/* Uitlegtekst boven het formulier (vet-alleen alinea's uit oude imports
   lezen als tussenkop). */
.form-page__uitleg{font-size:16px}
.form-page__uitleg p>strong:only-child{display:block;font-size:19px;color:var(--text-heading);
  margin-top:1.4em;line-height:1.3}
.form-page__uitleg ul{padding-inline-start:1.2em}
.form-page__uitleg li{margin-bottom:.55em}
.form-page__form{padding:28px;scroll-margin-top:90px}
.form-page__form h2{margin:0 0 6px;font-size:22px;font-weight:700;color:var(--text-heading)}
.form-page__sub{margin:0 0 20px;font-size:14.5px;line-height:1.6;color:var(--text-muted)}
.form-page__form .fluentform{max-width:none}
.form-page__form .fluentform .ff-el-group{margin-bottom:14px}
.form-page__form .ff-btn-submit{width:100%}
@media (max-width:860px){
  .form-page__grid{grid-template-columns:1fr;gap:24px}
  .text-page__grid{grid-template-columns:1fr;gap:24px;padding:0 4px}
  .text-page__text{max-width:none}
  .zijkaart{position:static}
  .form-page__jump{display:inline-flex}
}

/* Tekstpagina met zijkolom-kaart: tekst links op leesbreedte, kaart rechts (scrolt mee). */
.text-page{display:flex;flex-direction:column;gap:16px}
.text-page__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:48px;align-items:start;padding:20px 12px 0}
.text-page__text{font-size:16px}
.text-page__text>*:first-child{margin-top:0}
.zijkaart{position:sticky;top:88px;padding:26px 28px}
.zijkaart h2{margin:0 0 8px;font-size:20px;font-weight:700;color:var(--text-heading)}
.zijkaart p{margin:0 0 18px;font-size:15px;line-height:1.6;color:var(--text-muted)}

/* Onderwerpenkaart (blokpatroon): links naar subpagina's in twee kolommen. */
.pagina-inhoud .onderwerpenkaart{background:var(--surface-card);border:1px solid var(--border-default);border-radius:16px;padding:22px 26px;margin:1.2em 0 1.6em}
.pagina-inhoud .onderwerpenkaart h3{margin:0 0 10px;font-size:17px}
.pagina-inhoud .onderwerpenkaart ul{list-style:none;margin:0;padding:0;columns:2;column-gap:32px}
.pagina-inhoud .onderwerpenkaart li{break-inside:avoid;margin:0}
.pagina-inhoud .onderwerpenkaart a{display:flex;gap:8px;align-items:baseline;padding:6px 0;font-weight:500;text-decoration:none}
.pagina-inhoud .onderwerpenkaart a::before{content:"›";color:var(--brand-primary)}
.pagina-inhoud .onderwerpenkaart a:hover{text-decoration:underline}

/* Veelgestelde vragen (details-blok): rustige uitklaplijst. */
.pagina-inhoud details{border-top:1px solid var(--border-default);padding:4px 0}
.pagina-inhoud details:last-of-type{border-bottom:1px solid var(--border-default)}
.pagina-inhoud summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;font-weight:600;color:var(--text-heading)}
.pagina-inhoud summary::-webkit-details-marker{display:none}
.pagina-inhoud summary::after{content:"";flex:none;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--dur-fast) ease;margin-inline-end:6px}
.pagina-inhoud details[open]>summary::after{transform:rotate(-135deg)}
.pagina-inhoud details>*:not(summary){margin:0 0 16px;max-width:64ch}

/* "Stel je vraag": vast slotblok onder inhoudspagina's. */
.vraag-blok{background:var(--surface-alt);border-radius:20px;padding:clamp(28px,4vw,40px);margin-top:8px;transition:background-color .22s ease}
.vraag-blok h2{margin:0 0 14px;font-size:24px;font-weight:700;color:var(--text-heading)}
.vraag-blok ul{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15.5px}
.vraag-blok li{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.vraag-blok li::before{content:"✓";color:var(--brand-primary);font-weight:700}
.vraag-blok strong{color:var(--text-heading)}
.vraag-blok a{font-weight:600;text-decoration:none}
.vraag-blok a:hover{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
/* Links in lopende tekst: dunne streep op afstand in plaats van de standaard dikke. */
.pagina-inhoud a:not(.btn):not(.wp-block-button__link),.cursus-slot__tekst a:not(.btn){
  text-decoration-thickness:1px;text-underline-offset:.2em;
  text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
.pagina-inhoud a:not(.btn):hover,.cursus-slot__tekst a:not(.btn):hover{text-decoration-color:currentColor}

/* Band boven de footer: twee keuzekaarten. */
.steun-band{max-width:1240px;margin:var(--space-section) auto 0;padding:0 20px}
.steun-band__inner{background:var(--surface-brand);color:#fff;border-radius:20px;padding:clamp(28px,4vw,40px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.steun-band h2{margin:0 0 4px;font-size:24px;font-weight:700;color:#fff}
.steun-band p{margin:0;font-size:14.5px;color:rgba(255,255,255,.75)}
.steun-band__keuzes{display:flex;gap:12px;flex-wrap:wrap}
.keuze{display:inline-flex;align-items:center;gap:14px;padding:16px 22px;min-width:220px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;text-decoration:none;transition:background-color var(--dur-fast) ease}
.keuze:hover{background:rgba(255,255,255,.16);color:#fff}
.keuze svg{flex:none;color:var(--orange-200)}
.keuze span{display:flex;flex-direction:column;gap:2px}
.keuze strong{font-size:15.5px}
.keuze small{font-size:13px;color:rgba(255,255,255,.7)}
html[data-theme="donker"] .steun-band__inner{background:var(--surface-card);border:1px solid var(--border-default)}

/* Gesloten inschrijving / vol evenement */
.gesloten-paneel{padding:28px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.gesloten-paneel h2{margin:0;font-size:22px;font-weight:700;color:var(--text-heading)}
.gesloten-paneel p{margin:0 0 8px;font-size:15px;line-height:1.6;color:var(--text-muted);max-width:52ch}
.badge--klein{font-size:11px;padding:1px 8px;vertical-align:middle;margin-inline-start:6px}
/* Agenda: elke activiteit is één uitgelijnde rij (datum, tekst, actie). */
.agenda-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;flex:1}
.agenda-rij{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:4px 14px;padding:10px 12px;margin-inline:-12px;border-radius:14px;
  transition:background-color var(--dur-fast) ease}
.agenda-rij--open:hover{background:var(--surface-alt)}
.agenda-rij--open .link-arrow::after{content:"";position:absolute;inset:0;border-radius:inherit}
.agenda-rij__tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.agenda-rij__titel{font-size:15px;font-weight:600;line-height:1.35;color:var(--text-heading)}
.agenda-rij__meta{font-size:13px;line-height:1.45;color:var(--text-muted)}
.agenda-rij__actie{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  text-align:end;white-space:nowrap}
.agenda-rij__actie .link-arrow{display:inline-flex;align-items:center;gap:5px;font-size:14px;text-decoration:none}
.agenda-rij__actie .link-arrow span{transition:transform var(--dur-med) var(--ease-out)}
.agenda-rij--open:hover .link-arrow span{transform:translateX(3px)}
html[dir="rtl"] .agenda-rij--open:hover .link-arrow span{transform:translateX(-3px)}
.agenda-rij__actie small{font-size:12.5px;color:var(--text-muted)}
.agenda-rij--leeg{display:block;font-size:14.5px;color:var(--text-muted)}

/* ============================================================
   7b. Fluent Forms in de huisstijl (flat, tokens, RTL-proof)
   ============================================================ */
.fluentform .ff-el-group{margin-bottom:16px}
.fluentform .ff-el-input--label label{font-size:13.5px;font-weight:600;color:var(--text-heading)}
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after{color:var(--brand-primary)}
.fluentform .ff-el-form-control{width:100%;padding:12px 14px;border-radius:var(--radius-md);border:1px solid var(--border-default);background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:15px;box-shadow:none;height:auto;line-height:1.5}
.fluentform .ff-el-form-control:focus{border-color:var(--focus-ring);outline:2px solid var(--focus-ring);outline-offset:1px;box-shadow:none}
.fluentform textarea.ff-el-form-control{resize:vertical}
/* Keuzelijsten: eigen pijltje dat verder van de rand staat (browserpijl staat
   tegen de rand geplakt). */
.fluentform select.ff-el-form-control,.select{appearance:none;-webkit-appearance:none;
  padding-inline-end:46px;background-repeat:no-repeat;background-size:18px;
  background-position:right 18px center;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7370' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
html[dir="rtl"] .fluentform select.ff-el-form-control,html[dir="rtl"] .select{background-position:left 18px center}
html[data-theme="donker"] .fluentform select.ff-el-form-control,html[data-theme="donker"] .select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A8A4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.fluentform .ff-el-form-check-label{font-size:15px;color:var(--text-body);cursor:pointer}
/* Keuzerondjes en vinkjes: zelfde linkerlijn als de invoervelden en wat lucht
   ertussen, zodat alles onder elkaar uitlijnt. */
.fluentform .ff-el-form-check{margin:0 0 8px;padding:0 2px;display:flex;align-items:center;gap:9px}
.fluentform .ff-el-form-check:last-child{margin-bottom:0}
.fluentform .ff-el-form-check .ff-el-form-check-label{display:flex;align-items:center;gap:9px;margin:0}
.fluentform .ff-el-form-check input[type=radio],
.fluentform .ff-el-form-check input[type=checkbox]{width:17px;height:17px;margin:0;flex:0 0 auto}
.fluentform .ff-el-input--content{margin-top:6px}
.fluentform .ff-el-form-check input[type=radio],
.fluentform .ff-el-form-check input[type=checkbox]{accent-color:var(--brand-primary)}
.fluentform .ff-btn-submit{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0 24px;height:44px;border-radius:var(--radius-md);border:none;background:var(--brand-primary)!important;color:#fff!important;font-family:var(--font-sans);font-weight:600;font-size:15.5px;transition:background-color var(--dur-fast) ease;box-shadow:none}
.fluentform .ff-btn-submit:hover{background:var(--brand-primary-hover)!important}
.fluentform .ff-el-section-break{border-bottom:1px solid var(--border-default);margin:8px 0 20px;padding-bottom:8px}
.fluentform .ff-el-section-title{font-size:18px;font-weight:700;color:var(--text-heading);margin:0}
.fluentform .error,.fluentform .ff-el-is-error .ff-el-form-control{border-color:var(--status-error)}
.fluentform .error-text,.fluentform .text-danger{color:var(--status-error);font-size:13.5px}
.fluentform .ff-message-success{background:var(--status-success-bg);color:var(--status-success);border:none;border-radius:var(--radius-lg);padding:18px 22px;font-size:15px;box-shadow:none}
.fluentform .ff-el-progress,.fluentform .ff-upload-preview{border-radius:var(--radius-md)}
html[data-theme="donker"] .fluentform .ff-el-form-control{background-color:var(--surface-card)}
html[dir="rtl"] .fluentform .ff-el-input--label label{letter-spacing:normal}

/* ============================================================
   8. Footer
   ============================================================ */
.site-footer{margin-top:20px;background:var(--surface-page);transition:background-color .22s ease}
.site-footer__inner{max-width:1240px;margin:0 auto;padding:0 20px}
/* De drie linkkolommen krijgen alleen de breedte die ze nodig hebben en staan
   dicht bij elkaar; het merkblok absorbeert de rest, zodat adres en IBANs
   niet meer over twee regels breken. */
.footer-grid{padding:44px 0 32px;display:grid;grid-template-columns:minmax(0,1fr) repeat(3,max-content);gap:40px 52px}
.footer-brand{display:flex;flex-direction:column;gap:12px}
.footer-brand__naam{font-size:17px;font-weight:700;line-height:1.3;color:var(--text-heading);max-width:18ch}
.footer-brand .adres{font-size:14px;line-height:1.8;color:var(--text-body)}
.footer-brand .zakelijk{font-size:12.5px;line-height:1.7;color:var(--text-muted)}
.footer-col{display:flex;flex-direction:column;gap:8px}
.footer-col strong{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}
.footer-col a{color:var(--text-body);text-decoration:none;font-size:14px}
.footer-col a:hover{color:var(--text-link)}
.theme-toggle{display:inline-flex;align-items:center;gap:7px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.theme-toggle:hover{color:var(--text-heading)}
.theme-toggle__light{display:none}
html[data-theme="donker"] .theme-toggle__dark{display:none}
html[data-theme="donker"] .theme-toggle__light{display:inline}
.footer-bottom{border-top:1px solid var(--border-default);padding:16px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--text-muted)}

/* ============================================================
   9. Portaal
   ============================================================ */
.login-wrap{background:var(--surface-alt);border-radius:20px;padding:clamp(40px,6vw,80px) 20px;display:flex;justify-content:center;transition:background-color .22s ease}
.login-card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:20px;padding:36px 32px;width:100%;max-width:400px;display:flex;flex-direction:column;gap:16px}
.login-card img{height:44px;width:max-content}
.login-card h1{margin:0 0 6px;font-size:24px;font-weight:700;color:var(--text-heading)}
.login-card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--text-muted)}
.login-card .btn{width:100%;height:auto;padding:12px 20px;font-size:15.5px}
.portal-rij{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px;border:1px solid var(--border-default);border-radius:14px}
.portal-betaling{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border-default)}

/* ============================================================
   10. Arabisch / rechts-naar-links
   ============================================================ */
/* De lay-out spiegelt vanzelf mee: alles staat in flex/grid met logische
   eigenschappen. Hier alleen wat typografisch anders moet in het Arabisch. */

/* Koppen in Kufi (merkstijl); lopende tekst blijft Noto Sans Arabic. */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] .hero h1,
html[dir="rtl"] .page-title{font-family:var(--font-arabic);font-weight:700}

/* Arabisch schrift verbindt: letterspatiëring trekt de letters uit elkaar. */
html[dir="rtl"] :is(h1,h2,h3,h4,.badge,.footer-col strong,.prayer-row .tag,
  .prayer-table th,.date-block span,.next-prayer-banner .label){letter-spacing:normal}

/* Iets meer regelafstand: Arabisch heeft hoge en lage uithalen. */
html[dir="rtl"] body,
html[dir="rtl"] p,
html[dir="rtl"] .page-intro{line-height:1.85}

/* Cijferreeksen (telefoon, IBAN, tijden) blijven links-naar-rechts staan,
   anders draait de bidi-afhandeling de groepen om: 030 210 24 77. */
.ltr{direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .prayer-row .time,
html[dir="rtl"] .prayer-table td:not(:first-child),
html[dir="rtl"] .next-prayer-banner .val{direction:ltr;unicode-bidi:isolate}

/* Het logo is een vaste lockup en spiegelt niet mee. */
html[dir="rtl"] .site-header__logo img,
html[dir="rtl"] .footer-brand img{transform:none}

/* Taalknop: Arabisch label iets groter zodat het optisch klopt naast NL. */
.lang-btn{display:inline-flex;align-items:center;height:40px;padding:0 10px;border-radius:var(--radius-pill);font-size:13.5px;font-weight:600;text-decoration:none;color:var(--text-muted);transition:color var(--dur-fast) ease,background-color var(--dur-fast) ease}
.lang-btn:hover{color:var(--text-heading);background:var(--surface-alt)}
/* Mijn ICCLR in de kop: alleen het icoon, zonder rand. Ingelogd: een oranje stip. */
.header-knoppen{display:flex;align-items:center;gap:2px}
.account-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:var(--radius-pill);color:var(--text-muted);text-decoration:none;
  transition:color var(--dur-fast) ease,background-color var(--dur-fast) ease}
.account-btn:hover{color:var(--text-heading);background:var(--surface-alt)}
.account-btn.is-ingelogd{color:var(--text-heading)}
.account-btn.is-ingelogd::after{content:"";position:absolute;top:8px;inset-inline-end:8px;width:8px;height:8px;border-radius:50%;
  background:var(--brand-primary);border:2px solid var(--surface-page)}
.site-header--over.is-top .account-btn{color:rgba(255,255,255,.92)}
.site-header--over.is-top .account-btn:hover{color:#fff;background:rgba(255,255,255,.18)}
.site-header--over.is-top .account-btn.is-ingelogd::after{border-color:transparent}
.lang-btn[lang="ar"]{font-family:var(--font-arabic);font-size:15px}

/* ============================================================
   11. Responsive — breakpoints exact uit het v3-design
   ============================================================ */
@media (max-width:860px){
  .grid-12{display:flex;flex-direction:column}
  .steun-band__inner{grid-template-columns:1fr}
  .keuze{width:100%}
  .pagina-inhoud .onderwerpenkaart ul{columns:1}
  .home-nu__grid,.home-nu__grid:has(.khatib-card),.home-onderwijs,.home-diensten{grid-template-columns:1fr;gap:32px}
  .khatib-card{max-width:420px;width:100%}
  .home-onderwijs{gap:24px}
  .home-onderwijs__cats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .home-diensten{gap:12px}
  .home-nu{padding:0 4px}
}
@media (max-width:1180px){
  .hero--full .hero__grid{padding-top:clamp(132px,30vw,164px)}
  .main-nav{display:none}
  .mobile-nav-btn{display:inline-flex}
  .site-header__inner{grid-template-columns:minmax(40px,1fr) auto minmax(40px,1fr);gap:12px}
  .site-header__logo{justify-self:center}
  .header-actions{display:contents}
  .header-knoppen{grid-area:1/3;justify-self:end;gap:0;margin-inline-end:-6px}
  .lang-btn{height:44px;padding:0 6px;justify-content:center}
  .account-btn{width:40px;height:44px}
  .header-prayer{grid-column:1/-1;justify-self:center;gap:6px}
  .header-prayer__val{font-size:14px}
}
@media (max-width:1180px){
  /* Geen losse kaartjes meer: één blok adresgegevens met daaronder de
     linklijsten naast elkaar in twee kolommen. */
  .footer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px;padding:28px 0 24px;align-items:start}
  /* Volgorde in de opmaak: merk, Meedoen, Informatie, Volg ons. */
  .footer-col:nth-child(2){grid-column:1;grid-row:2}
  .footer-col:nth-child(3){grid-column:2;grid-row:2/span 2}
  .footer-col:nth-child(4){grid-column:1;grid-row:3}
  .footer-brand,.footer-col{background:none;border-radius:0;padding:0}
  .footer-brand{grid-column:1/-1;align-items:flex-start;text-align:start;
    padding-bottom:24px;border-bottom:1px solid var(--border-default)}
  .footer-col a{font-size:14.5px}
  .footer-bottom{flex-direction:column;align-items:flex-start;text-align:start;gap:10px;justify-content:flex-start}
  .prayer-card{justify-self:stretch;max-width:none}
}

/* ============================================================
   12. Paginaovergangen
   ============================================================ */
/* Cross-document View Transitions: de browser vervaagt zelf tussen twee
   paginaladingen, zonder JS en met behoud van de terugknop. */
@view-transition{navigation:auto}

/* De oude pagina blijft staan en de nieuwe vervaagt eroverheen. Bij de standaard
   kruisvervaging (oud uit + nieuw in) zakt de dekking van gedeelde delen — header,
   footer — halverwege naar ~75%, waardoor ze zichtbaar dippen terwijl ze niet eens
   veranderen. Alleen de nieuwe laag animeren houdt die delen exact stil. */
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:icclr-pagina-in var(--dur-med) var(--ease-out) both}

@keyframes icclr-pagina-in{from{opacity:0}to{opacity:1}}

/* Terugval voor browsers zonder cross-document transitions (klasse uit header.php):
   dan animeert alleen de binnenkomst van de inhoud. */
html.geen-paginaovergang main.wrap{animation:icclr-pagina-in var(--dur-med) var(--ease-out) both}

@media (prefers-reduced-motion:reduce){
  ::view-transition-new(root){animation:none}
  html.geen-paginaovergang main.wrap{animation:none}
}

/* ============================================================
   13. Cursusaanbod
   ============================================================ */
/* Paginakop met beeld: de foto vult de tegel, een donkere loper houdt de
   tekst leesbaar. Zelfde principe als de hero op de homepage. */
.page-head--foto{position:relative;isolation:isolate;overflow:hidden;background:var(--green-950);
  padding-block:clamp(44px,6vw,72px)}
.page-head--foto .page-head__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 55%;z-index:0}
.page-head--foto::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,rgba(6,23,21,.92) 0%,rgba(6,23,21,.74) 46%,rgba(6,23,21,.42) 100%)}
.page-head--foto>*{position:relative;z-index:2}
.page-head--foto .page-title{color:#fff}
.page-head--foto .page-intro{color:rgba(255,255,255,.88);max-width:62ch}
.page-head--foto .cursus-motto{color:rgba(255,255,255,.7)}

.cursus-motto{margin:18px 0 0;font-size:12.5px;font-weight:600;letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--text-muted)}

/* Filter: alles, alleen broeders of alleen zusters. */
.cursus-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 2px}
.cursus-filter__label{font-size:11.5px;font-weight:700;letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--text-muted);margin-inline-end:6px}
.cursus-filter__knop{padding:8px 16px;border-radius:var(--radius-pill);border:1px solid var(--border-default);
  background:transparent;color:var(--text-muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  transition:color var(--dur-fast) ease,background-color var(--dur-fast) ease,border-color var(--dur-fast) ease}
.cursus-filter__knop:hover{color:var(--text-heading);border-color:var(--border-strong)}
.cursus-filter__knop.is-actief{background:var(--surface-brand);border-color:var(--surface-brand);color:#fff}
html[data-theme="donker"] .cursus-filter__knop.is-actief{background:var(--brand-primary);border-color:var(--brand-primary)}

.cursus-blokken{display:flex;flex-direction:column;gap:var(--space-section)}
.cursus-blok{display:flex;flex-direction:column;gap:10px}

/* Kop van een periode. */
.cursus-blok__kop{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:6px 24px;padding:0 2px}
.cursus-blok__titel{display:flex;flex-direction:column;gap:3px}
.cursus-blok__label{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}
.cursus-blok__nu{font-style:normal;padding:3px 9px;border-radius:var(--radius-pill);
  background:var(--surface-brand-tint);color:var(--text-link);font-size:11px;letter-spacing:.04em}
.cursus-blok__kop h2{margin:0;font-size:clamp(20px,2.2vw,24px);font-weight:700;
  letter-spacing:var(--tracking-heading);color:var(--text-heading)}
.cursus-blok__status{margin:0;font-size:14px;color:var(--text-muted)}
.cursus-blok__status.is-open{color:var(--text-link);font-weight:600}
.cursus-blok__quote{margin:0;padding:0 2px;font-size:14.5px;font-style:italic;color:var(--text-muted)}

/* De kaart met twee kolommen. De rijen dragen hun eigen ruimte, zodat het
   oplichtende vlak netjes binnen de kaart valt. */
.cursus-blok__kaart{background:var(--surface-card);border:1px solid var(--border-default);border-radius:20px;
  padding:clamp(14px,1.6vw,20px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,28px)}
.cursus-blok--nu .cursus-blok__kaart{border-color:var(--brand-primary)}
.cursus-blok--voorbij{opacity:.6;transition:opacity var(--dur-med) ease}
.cursus-blok--voorbij:hover{opacity:1}
.cursus-kolom+.cursus-kolom{padding-inline-start:clamp(14px,1.8vw,28px);
  border-inline-start:1px solid var(--border-default)}
.cursus-kolom__kop{margin:0 0 4px;padding:6px 16px;font-size:11.5px;font-weight:700;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}
.cursus-kolom__leeg{margin:0;padding:6px 16px;font-size:14.5px;color:var(--text-muted)}
.cursus-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}

/* Eén cursus: geen streepjes, maar een vlak dat oplicht — even hoog, gelijk
   uitgelijnd en met dezelfde padding als de kolomkop erboven. */
.cursus-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:8px 20px;padding:13px 16px;border-radius:14px;transition:background-color var(--dur-fast) ease}
.cursus-item--open:hover{background:var(--surface-alt)}
/* De hele rij is de knop; de link zelf blijft het aanklikbare element. */
.cursus-item--open .link-arrow::after{content:"";position:absolute;inset:0;border-radius:inherit}
.cursus-item__tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.cursus-item__titel{font-size:15.5px;line-height:1.4;color:var(--text-body)}
.cursus-item__sub{font-size:13px;line-height:1.5;color:var(--text-muted)}
.cursus-item__actie{display:flex;align-items:center;gap:12px;flex:0 0 auto;justify-self:end}
.cursus-item__actie .link-arrow{display:inline-flex;align-items:center;gap:5px;font-size:14px;white-space:nowrap;
  text-decoration:none}
.cursus-item__actie .link-arrow:hover{text-decoration:none}
.cursus-item__actie .link-arrow span{transition:transform var(--dur-med) var(--ease-out)}
.cursus-item--open:hover .link-arrow span{transform:translateX(3px)}
html[dir="rtl"] .cursus-item--open:hover .link-arrow span{transform:translateX(-3px)}
.cursus-item__actie small,.cursus-item__status{font-size:13px;color:var(--text-muted);white-space:nowrap}

/* Filter toont één kolom: dan geen deellijn en één kolombreedte. */
.cursus-blokken[data-filter="broeders"] .cursus-kolom[data-wie="zusters"],
.cursus-blokken[data-filter="zusters"] .cursus-kolom[data-wie="broeders"]{display:none}
.cursus-blokken[data-filter="broeders"] .cursus-blok__kaart,
.cursus-blokken[data-filter="zusters"] .cursus-blok__kaart{grid-template-columns:minmax(0,820px)}
.cursus-blokken[data-filter="broeders"] .cursus-kolom+.cursus-kolom,
.cursus-blokken[data-filter="zusters"] .cursus-kolom+.cursus-kolom{padding-inline-start:0;border-inline-start:0}

/* Praktische informatie met beeld ernaast. */
.cursus-slot{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,3vw,44px);
  align-items:stretch;background:var(--surface-card);border:1px solid var(--border-default);
  border-radius:20px;padding:clamp(24px,3vw,40px)}
.cursus-slot__tekst>*:first-child{margin-top:0}
.cursus-slot__beeld{border-radius:16px;overflow:hidden;min-height:240px}
.cursus-slot__beeld img{width:100%;height:100%;object-fit:cover;display:block}

/* Blokken schuiven rustig in beeld (alleen met JS, niet bij 'minder beweging'). */
.js-anim .cursus-blok{opacity:0;transform:translateY(14px)}
.js-anim .cursus-blok.is-zichtbaar{opacity:1;transform:none;
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}

@media (max-width:900px){
  .cursus-blok__kaart{grid-template-columns:1fr;gap:6px}
  .cursus-kolom+.cursus-kolom{padding-inline-start:0;padding-top:14px;margin-top:8px;
    border-inline-start:0;border-top:1px solid var(--border-default)}
  .cursus-slot{grid-template-columns:1fr}
  .cursus-slot__beeld{min-height:200px;order:-1}
}

/* "Je schrijft je in voor …" boven het formulier. */
.inschrijf-context{display:flex;flex-direction:column;gap:3px;margin:0 0 20px;padding:16px 18px;
  border-radius:var(--radius-lg);background:var(--surface-alt);border:1px solid var(--border-default)}
.inschrijf-context__kop{font-size:11.5px;font-weight:700;letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--text-muted)}
.inschrijf-context__titel{font-size:17px;font-weight:700;line-height:1.3;color:var(--text-heading)}
.inschrijf-context__meta{font-size:13.5px;line-height:1.5;color:var(--text-muted)}

/* Melding dat eerder ingevulde gegevens zijn overgenomen. */
.form-onthouden{margin:0 0 18px;font-size:13px;line-height:1.55;color:var(--text-muted)}
.form-onthouden__wissen{padding:0;border:0;background:none;font:inherit;font-weight:600;
  color:var(--text-link);text-decoration:none;cursor:pointer}
.form-onthouden__wissen:hover{color:var(--text-link-hover)}

/* Afstandscontrole bij lid worden. */
.afstand-melding{margin:-6px 0 16px;padding:12px 14px;border-radius:var(--radius-lg);font-size:14px;
  line-height:1.55;border:1px solid var(--border-default);background:var(--surface-alt);color:var(--text-body)}
.afstand-melding--bezig{color:var(--text-muted)}
.afstand-melding--ok{border-color:var(--status-success);background:var(--status-success-bg);color:var(--status-success)}
.afstand-melding--nee{border-color:var(--status-error);background:var(--status-error-bg);color:var(--status-error)}
.afstand-melding--onbekend{border-color:var(--gold-500);color:var(--text-body)}
.afstand-melding a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:.2em;
  text-decoration-thickness:1px}
.fluentform .ff-btn-submit.is-geblokkeerd{opacity:.55;cursor:not-allowed}

.mededeling-lijst{display:flex;flex-direction:column;gap:2px;flex:1}

/* Formulieren in stappen. */
.formstap[hidden]{display:none}
.formstap-voortgang{margin:0 0 22px}
.formstap-balk{height:4px;border-radius:999px;background:var(--surface-alt);overflow:hidden}
.formstap-balk span{display:block;height:100%;border-radius:999px;background:var(--brand-primary);
  width:0;transition:width var(--dur-med) var(--ease-out)}
.formstap-teller{margin:8px 0 0;font-size:12.5px;font-weight:600;letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--text-muted)}
.formstap .ff-el-section-break{margin-bottom:4px}
.formstap-nav{display:flex;align-items:center;gap:12px;margin-top:22px}
.formstap-nav .formstap-verder,
.formstap-nav .ff_submit_btn_wrapper{margin-inline-start:auto}
.formstap-nav .ff_submit_btn_wrapper{margin-bottom:0}
.formstap-nav .ff_submit_btn_wrapper[hidden]{display:none}
.formstap-nav .btn[hidden]{display:none}
.formstap-fout{margin-top:6px;font-size:13px;color:var(--status-error)}
.fluentform .ff-el-is-error .ff-el-form-control{border-color:var(--status-error)}

/* Formulierpagina: uitleg boven het formulier, formulier altijd gecentreerd. */
.form-page__uitleg{padding:clamp(24px,3vw,40px)}
.form-page__uitleg>*:first-child{margin-top:0}
.form-page__uitleg>*:last-child{margin-bottom:0}

/* Koranvers als citaat: Arabisch groot, vertaling eronder, bron klein. */
.ayah{margin:1.6em 0;padding:22px 24px;border-radius:var(--radius-lg);background:var(--surface-alt);
  border-inline-start:3px solid var(--brand-primary)}
.ayah p{margin:0}
.ayah__ar{font-family:var(--font-arabic);font-size:19px;line-height:2.1;color:var(--text-heading);
  direction:rtl;text-align:start}
.ayah__nl{margin-top:12px;font-size:15.5px;line-height:1.7;font-style:italic;color:var(--text-body)}
.ayah cite{display:block;margin-top:10px;font-size:13px;font-style:normal;color:var(--text-muted)}

/* Rollen naast elkaar in plaats van een opsomming met puntkomma's. */
.rollen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px;margin:1.2em 0 1.6em}
.rol{border:1px solid var(--border-default);border-radius:16px;padding:18px 20px;background:var(--surface-page)}
.rol h3{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--text-heading)}
.rol p{margin:0;font-size:14px;line-height:1.6;color:var(--text-muted)}
html[data-theme="donker"] .rol{background:var(--surface-alt)}

/* ============================================================
   14. Doneren
   ============================================================ */
.doelen-blok{display:flex;flex-direction:column;gap:16px;padding:8px 12px 0}
.doelen-blok__kop h2{margin:0 0 6px;font-size:24px;font-weight:700}
.doelen-blok__kop p{margin:0;font-size:15px;line-height:1.6;color:var(--text-muted);max-width:66ch}
.doelen{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
/* Vijf doelen: drie op de eerste rij, twee bredere op de tweede. */
.doel{grid-column:span 2}
.doel:nth-child(4),.doel:nth-child(5){grid-column:span 3}
/* Elk doel is één kaart die het bijbehorende vakje in het formulier aanvinkt. */
.doel{display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding:20px 22px;border-radius:16px;
  background:var(--surface-card);border:1px solid var(--border-default);color:inherit;text-decoration:none;
  transition:border-color var(--dur-fast) ease,background-color var(--dur-fast) ease}
.doel:hover{border-color:var(--brand-primary);background:var(--surface-brand-tint);color:inherit}
.doel__icoon{width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-alt);color:var(--brand-primary)}
.doel:hover .doel__icoon{background:#fff}
html[data-theme="donker"] .doel:hover .doel__icoon{background:var(--surface-card)}
.doel__tekst{display:flex;flex-direction:column;gap:5px}
.doel__titel{font-size:16.5px;font-weight:700;line-height:1.3;color:var(--text-heading)}
.doel__uitleg{font-size:14px;line-height:1.6;color:var(--text-muted)}
.doel__voet{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:12px;border-top:1px solid var(--border-default)}
.doel__voet .badge{white-space:nowrap}
.doel__kies{font-size:14px;font-weight:600;color:var(--text-link);display:inline-flex;align-items:center;gap:6px}
.doel__kies::after{content:"›";transition:transform var(--dur-med) var(--ease-out)}
.doel:hover .doel__kies::after{transform:translateX(3px)}
html[dir="rtl"] .doel__kies::after{content:"‹"}
html[dir="rtl"] .doel:hover .doel__kies::after{transform:translateX(-3px)}
/* Gekozen doel: dezelfde kaart, maar duidelijk aangevinkt. */
.doel.is-gekozen{border-color:var(--brand-primary);background:var(--surface-brand-tint)}
.doel.is-gekozen .doel__icoon{background:var(--brand-primary);color:#fff}
.doel.is-gekozen .doel__kies{color:var(--status-success)}
.doel.is-gekozen .doel__kies::after{content:"✓";transform:none}
html[dir="rtl"] .doel.is-gekozen .doel__kies::after{content:"✓"}

/* Berekening boven het bedragveld: één regel per onderdeel, daaronder het
   totaal als er meer dan één onderdeel is. */
.berekening{margin:0 0 10px;border:1px solid var(--border-default);border-radius:var(--radius-lg);
  background:var(--surface-alt);overflow:hidden}
.berekening[hidden]{display:none}
.berekening__regel{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 14px;font-size:14px;line-height:1.5;color:var(--text-muted)}
.berekening__regel+.berekening__regel{border-top:1px solid var(--border-default)}
.berekening__regel strong{font-size:15px;font-weight:700;color:var(--text-heading);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.berekening__regel--totaal{color:var(--text-heading);font-weight:600}
.berekening__regel--totaal strong{font-size:17px}
.berekening__noot{margin:0 0 10px;font-size:13px;line-height:1.5;color:var(--text-muted)}
.berekening__noot[hidden]{display:none}
.berekening__opnieuw{cursor:pointer;border:none;background:none;padding:0;font:inherit;font-weight:600;
  color:var(--text-link);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.berekening__opnieuw:hover{color:var(--text-link-hover)}

/* Bedragknoppen boven het bedragveld. */
.bedrag-keuzes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.bedrag-keuzes[hidden]{display:none}
.bedrag-chip{cursor:pointer;padding:7px 15px;border-radius:var(--radius-pill);border:1px solid var(--border-default);
  background:transparent;color:var(--text-heading);font-family:var(--font-sans);font-size:14.5px;font-weight:600;
  font-variant-numeric:tabular-nums;transition:background-color var(--dur-fast) ease,border-color var(--dur-fast) ease}
.bedrag-chip:hover{border-color:var(--brand-primary);color:var(--text-link)}
.bedrag-chip.is-actief{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff}

/* Samenvatting vlak boven de verzendknop: waarvoor en hoeveel. */
.doneer-totaal{margin:18px 0 0;padding:16px 18px;border-radius:var(--radius-lg);
  background:var(--surface-alt);border:1px solid var(--border-default);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.doneer-totaal[hidden]{display:none}
.doneer-totaal__doel{font-size:14px;line-height:1.5;color:var(--text-muted);min-width:0}
.doneer-totaal__bedrag{font-size:20px;font-weight:700;color:var(--text-heading);font-variant-numeric:tabular-nums;
  white-space:nowrap}

/* Rekeningnummers. */
.overmaken{display:flex;flex-direction:column;gap:18px}
.overmaken__kop h2{margin:0 0 4px;font-size:22px;font-weight:700}
.overmaken__kop p{margin:0;font-size:15px;line-height:1.6;color:var(--text-muted)}
.iban-lijst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:12px}
.iban-rij{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;
  border-radius:14px;background:var(--surface-alt);border:1px solid var(--border-default)}
.iban-rij__tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.iban-rij__tekst strong{font-size:14px;font-weight:700;color:var(--text-heading)}
.iban-rij__nr{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-body);
  letter-spacing:.01em}
.iban-rij__tekst small{font-size:13px;line-height:1.5;color:var(--text-muted)}
.iban-rij .btn{flex:none}
.overmaken__anbi{margin:0;font-size:14.5px;line-height:1.6;color:var(--text-muted)}
.overmaken__anbi a{font-weight:600;text-decoration:underline;text-underline-offset:.2em;
  text-decoration-thickness:1px}

/* Slotblok: lid worden of vrijwilliger. */
.anders{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:clamp(24px,3.4vw,32px);border-radius:20px;background:var(--surface-brand);color:#fff}
.anders h2{margin:0 0 4px;font-size:22px;font-weight:700;color:#fff}
.anders p{margin:0;font-size:14.5px;color:rgba(255,255,255,.75)}
.anders__knoppen{display:flex;gap:10px;flex-wrap:wrap}
.anders .btn--secondary{border-color:rgba(255,255,255,.4);color:#fff}
.anders .btn--secondary:hover{background:rgba(255,255,255,.1);color:#fff}
html[data-theme="donker"] .anders{border:1px solid var(--border-default)}
@media (max-width:980px){
  .doelen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .doel,.doel:nth-child(4){grid-column:span 1}
  .doel:nth-child(5){grid-column:span 2}
}
@media (max-width:640px){
  .doelen-blok{padding:8px 4px 0}
  .doelen{grid-template-columns:minmax(0,1fr)}
  .doel:nth-child(5){grid-column:span 1}
  .iban-rij{align-items:flex-start;flex-direction:column;gap:12px}
  .iban-rij .btn{align-self:stretch}
}

/* ============================================================
   15. Mijn ICCLR (schermen bij de plugin ICCLR Portaal)
   ============================================================ */
.portaal-label{display:block;font-size:12px;font-weight:700;letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--text-link);margin-bottom:8px}
html[dir="rtl"] .portaal-label{letter-spacing:normal}

/* Niet ingelogd: links de uitleg, rechts de kaart met inloggen of aanmaken. */
.portaal-toegang{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(24px,5vw,72px);align-items:center;
  background:var(--surface-alt);border-radius:20px;padding:clamp(24px,5vw,64px);transition:background-color .22s ease}
.portaal-toegang__uitleg h1{margin:0 0 12px;font-size:clamp(28px,3.4vw,40px);font-weight:800;line-height:1.15}
.portaal-toegang__uitleg p{margin:0 0 20px;font-size:17px;line-height:1.65;max-width:46ch}
.portaal-punten{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15.5px}
.portaal-punten li{display:flex;gap:10px;align-items:baseline}
.portaal-punten li::before{content:"✓";color:var(--brand-primary);font-weight:700}

.portaal-kaart{padding:28px;display:flex;flex-direction:column;gap:18px}
.portaal-kaart__kop{margin:0;font-size:22px;font-weight:700}
.portaal-kaart__sub{margin:-10px 0 0;font-size:14.5px;line-height:1.6;color:var(--text-muted)}
.portaal-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:12px;background:var(--surface-alt)}
.portaal-tabs a{text-align:center;white-space:nowrap;padding:9px 8px;border-radius:9px;border:1px solid transparent;font-size:14.5px;font-weight:600;
  text-decoration:none;color:var(--text-muted);transition:color var(--dur-fast) ease,background-color var(--dur-fast) ease}
.portaal-tabs a:hover{color:var(--text-heading)}
.portaal-tabs a.is-actief{background:var(--surface-card);border-color:var(--border-default);color:var(--text-heading)}

.portaal-form{display:flex;flex-direction:column;gap:16px}
.portaal-form__rij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.portaal-form .input{padding:12px 14px}
.portaal-form .input[readonly]{color:var(--text-muted);background:var(--surface-alt)}
.portaal-kaart .portaal-form .btn{height:46px;font-size:15.5px}
.portaal-form__knop{align-self:flex-start;height:42px}
.portaal-form__voet{margin:0;font-size:14px;text-align:center}
.portaal-form__voet a,.portaal-hulp a,.portaal-tekst a,.portaal-akkoord a{font-weight:600;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.2em}
.portaal-hulp{font-size:13px;line-height:1.5;color:var(--text-muted)}
.portaal-optioneel{font-weight:400;color:var(--text-muted)}
.portaal-akkoord{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;cursor:pointer}
.portaal-akkoord input{width:17px;height:17px;margin:2px 0 0;flex:none;accent-color:var(--brand-primary)}
.portaal-kaart .form-msg,.portaal-blok .form-msg{margin:0}

/* Ingelogd */
.portaal-kop{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:clamp(24px,3.4vw,36px)}
.portaal-kop h1{margin:0;font-size:clamp(24px,3vw,32px);font-weight:800;line-height:1.2}
.portaal-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.portaal-kolom{display:flex;flex-direction:column;gap:16px;min-width:0}
.portaal-blok{padding:26px 28px;display:flex;flex-direction:column;gap:14px;min-width:0}
.portaal-blok h2{margin:0;font-size:19px;font-weight:700}
.portaal-blok__kop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.portaal-tekst{margin:0;font-size:14.5px;line-height:1.65;color:var(--text-muted)}
.portaal-tekst--let-op{padding:12px 14px;border-radius:var(--radius-lg);border:1px solid var(--gold-500);color:var(--text-body)}
.portaal-tekst--voet{padding-top:12px;border-top:1px solid var(--border-default)}
.portaal-lidnummer{margin:0;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 16px;
  border-radius:var(--radius-lg);background:var(--surface-alt);border:1px solid var(--border-default)}
.portaal-lidnummer span{font-size:13.5px;color:var(--text-muted)}
.portaal-lidnummer strong{font-size:19px;font-weight:700;color:var(--text-heading);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.portaal-uitklap>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;
  color:var(--text-link)}
.portaal-uitklap>summary::-webkit-details-marker{display:none}
.portaal-uitklap>summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform var(--dur-fast) ease}
.portaal-uitklap[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.portaal-uitklap[open]>summary{margin-bottom:14px}
.portaal-links{display:flex;flex-direction:column;gap:8px;font-size:14.5px}
.portaal-links a{font-weight:600;text-decoration:none}
.portaal-links a:hover{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
@media (max-width:860px){
  .portaal-toegang{grid-template-columns:minmax(0,1fr);padding:20px}
  /* Op een telefoon eerst het formulier, de uitleg eronder. */
  .portaal-toegang__uitleg{order:2;padding:4px 4px 8px}
  .portaal-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .portaal-form__rij{grid-template-columns:minmax(0,1fr)}
  .portaal-kaart,.portaal-blok{padding:22px 18px}
}

/* Mijn ICCLR: gezin, kinderen en inschrijvingen */
.portaal-smal{display:flex;flex-direction:column;gap:14px;width:100%;max-width:680px;margin:0 auto}
.portaal-terug{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;text-decoration:none;padding:4px 2px}
.portaal-terug::before{content:"‹";font-size:18px;line-height:1}
html[dir="rtl"] .portaal-terug::before{content:"›"}
.portaal-terug:hover{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.portaal-blok__titel{margin:0;font-size:24px;font-weight:800;line-height:1.2}
.portaal-blok .inschrijf-context{margin:0}
.portaal-gezin__acties{display:flex;gap:8px;flex-wrap:wrap}

.gezinslijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.gezinslid{padding:16px 18px;border-radius:14px;background:var(--surface-alt);border:1px solid var(--border-default);
  display:flex;flex-direction:column;gap:12px}
.gezinslid__kop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.gezinslid__kop strong{font-size:16px;color:var(--text-heading)}
.gezinslid__sub{display:block;font-size:13.5px;color:var(--text-muted)}
.gezinslid__leeg{margin:0;font-size:14px;color:var(--text-muted)}
.gezinslid__leeg a,.gezinslid__kop .link-arrow{font-weight:600}
.inschrijvingen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.inschrijving{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 14px;padding:12px 14px;
  border-radius:12px;background:var(--surface-card);border:1px solid var(--border-default)}
.inschrijving__tekst{display:flex;flex-direction:column;gap:1px;min-width:0}
.inschrijving__titel{font-size:15px;font-weight:600;color:var(--text-heading)}
.inschrijving__meta{font-size:13px;color:var(--text-muted)}
.inschrijving__uit{grid-column:1/-1}
.inschrijving__uit>summary{font-size:13.5px}
.inschrijving--oud .inschrijving__titel{color:var(--text-muted);font-weight:500}

/* Keuzes: een rij keuzerondjes, of een lijst van kaarten (wie wilt u inschrijven). */
.portaal-keuze{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;min-width:0}
.portaal-keuze legend{padding:0;margin:0 0 8px;font-size:13.5px;font-weight:600;color:var(--text-heading)}
.portaal-keuze label{display:inline-flex;align-items:center;gap:9px;font-size:15px;cursor:pointer}
.portaal-keuze input[type=radio]{width:17px;height:17px;margin:0;flex:none;accent-color:var(--brand-primary)}
.portaal-keuze--lijst{flex-direction:column;gap:8px}
.portaal-keuze--lijst label{display:flex;padding:12px 14px;border-radius:12px;border:1px solid var(--border-default);background:var(--surface-page);
  transition:border-color var(--dur-fast) ease}
html[data-theme="donker"] .portaal-keuze--lijst label{background:var(--surface-alt)}
.portaal-keuze--lijst label:hover{border-color:var(--brand-primary)}
.portaal-keuze--lijst label:has(input:checked){border-color:var(--brand-primary);background:var(--surface-brand-tint)}
.portaal-keuze--lijst label.is-uit{opacity:.6;cursor:default}
.portaal-keuze--lijst label.is-uit:hover{border-color:var(--border-default)}
.portaal-keuze--lijst label span{display:flex;flex-direction:column;gap:1px}
.portaal-keuze--lijst small{font-size:13px;color:var(--text-muted)}
.portaal-keuze__extra{align-self:flex-start;font-size:14px;font-weight:600;text-decoration:none;padding:4px 2px}
.portaal-keuze__extra:hover{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}

.programmakeuze{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.programmakeuze__rij{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:12px;
  border:1px solid var(--border-default);background:var(--surface-alt);color:inherit;text-decoration:none;
  transition:border-color var(--dur-fast) ease,background-color var(--dur-fast) ease}
a.programmakeuze__rij:hover{border-color:var(--brand-primary);background:var(--surface-brand-tint);color:inherit}
.programmakeuze__rij.is-gesloten{opacity:.7}
.programmakeuze__tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.programmakeuze__tekst strong{font-size:15.5px;color:var(--text-heading)}
.programmakeuze__tekst span{font-size:13.5px;color:var(--text-muted)}
.programmakeuze__kies{flex:none;font-size:14px;font-weight:600;color:var(--text-link)}
.programmakeuze__kies::after{content:" ›"}
html[dir="rtl"] .programmakeuze__kies::after{content:" ‹"}