/* ══════════════════════════════════════════════════════════════════
   Informatiepagina: lange tekstpagina's met inhoudsopgave
   ══════════════════════════════════════════════════════════════════ */

/* ── Kop ───────────────────────────────────────────────────────── */
.infoHero{padding:56px 0 32px}
.infoCrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;margin-bottom:26px;color:var(--font-color)}
.infoCrumbs a:hover{color:var(--color-indigo)}
.infoHero h1{font-size:40px;line-height:1.15;margin:0;max-width:820px}
.infoIntro{max-width:760px;margin-top:18px;font-size:18px;line-height:1.7;color:var(--font-color)}
.infoDatum{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:7px 14px;border-radius:var(--radius-pill);background:var(--background-alt-1);border:1px solid var(--border-color-2);font-size:13.5px;font-weight:600;color:var(--font-color)}
.infoDatum svg{flex:none;color:var(--color-indigo)}
.infoDatum time{color:var(--font-color-dark);font-weight:700}

/* ── Indeling ──────────────────────────────────────────────────── */
.infoInhoud{padding-bottom:80px}
.infoLayout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.infoMain{min-width:0}

/* Samenvattend kader boven de tekst: wie alleen de strekking wil, is hier klaar. */
.infoKern{padding:24px 28px;border-radius:var(--radius-card);background:var(--background-alt-1);border-left:3px solid var(--color-indigo);margin-bottom:36px;max-width:760px}
.infoKern h2{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--font-color-dark);margin:0 0 14px}
.infoKern ul{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.infoKern li{position:relative;padding-left:22px;font-size:15px;line-height:1.6;color:var(--font-color-dark)}
.infoKern li::before{content:'';position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--color-indigo)}

/* ── Lopende tekst ─────────────────────────────────────────────── */
/* De kopjes zijn genummerd: op een voorwaardenpagina verwijs je naar
   "artikel 4" en dan moet die vier ook zichtbaar zijn. */
.infoBody{max-width:760px;font-size:16.5px;line-height:1.8;color:var(--font-color);counter-reset:infoKop}
.infoBody h2{position:relative;counter-increment:infoKop;font-size:24px;line-height:1.3;color:var(--font-color-dark);margin:48px 0 16px;padding-top:26px;border-top:1px solid var(--border-color-2);scroll-margin-top:96px}
.infoBody h2::before{content:counter(infoKop,decimal-leading-zero);display:block;margin-bottom:8px;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--color-indigo);font-variant-numeric:tabular-nums}
.infoBody h2:first-child{margin-top:0;padding-top:0;border-top:0}
.infoBody h3{font-size:18px;line-height:1.4;color:var(--font-color-dark);margin:30px 0 10px}
.infoBody p{margin:0 0 18px}
.infoBody p:last-child{margin-bottom:0}
/* .infoBody draagt ook .entry-content, dat in style.css list-style terugzet;
   hier expliciet uit, anders staat de native bullet naast het eigen bolletje. */
.infoBody ul,.infoBody ol{margin:0 0 20px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.infoBody ul li{position:relative;padding-left:24px}
.infoBody ul li::before{content:'';position:absolute;left:4px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--color-indigo);opacity:.55}
.infoBody ol{counter-reset:info}
.infoBody ol li{position:relative;padding-left:34px;counter-increment:info}
.infoBody ol li::before{content:counter(info);position:absolute;left:0;top:1px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--background-alt-1);border:1px solid var(--border-color-1);font-size:12px;font-weight:700;color:var(--font-color-dark)}
.infoBody strong{color:var(--font-color-dark);font-weight:700}
.infoBody a{color:var(--color-indigo);text-decoration:underline}
.infoBody table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px}
.infoBody th,.infoBody td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border-color-1)}
.infoBody th{font-weight:700;color:var(--font-color-dark);background:var(--background-alt-1)}

/* Losse alinea met een accentrand: voor de zin die je niet mag missen. */
.infoBody blockquote{margin:0 0 24px;padding:20px 24px;border-radius:var(--radius-card);background:var(--background-alt-1);border-left:3px solid var(--color-indigo)}
.infoBody blockquote p{font-size:15.5px;line-height:1.75;color:var(--font-color-dark)}

/* ── Zijkolom ──────────────────────────────────────────────────── */
.infoZij{position:sticky;top:98px;display:flex;flex-direction:column;gap:18px}
.infoZijBlok{padding:24px 26px;border-radius:var(--radius-card);border:1px solid var(--border-color-1);background:#fff;box-shadow:var(--shadow-card)}
.infoZijBlok h2{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--font-color-dark);margin:0 0 14px}

.infoToc ol{counter-reset:infotoc;list-style:none;margin:0;display:flex;flex-direction:column;gap:10px}
.infoToc li{counter-increment:infotoc;position:relative;padding-left:28px;line-height:1.45}
.infoToc li::before{content:counter(infotoc,decimal-leading-zero);position:absolute;left:0;top:2px;font-size:12px;font-weight:700;color:var(--color-indigo);font-variant-numeric:tabular-nums}
.infoToc a{font-size:14.5px;font-weight:600;color:var(--font-color-dark);transition:var(--transition)}
.infoToc a:hover{color:var(--color-indigo)}

.infoZijLinks{display:flex;flex-direction:column;gap:10px;margin:0;list-style:none}
.infoZijLinks a{font-size:14.5px;font-weight:600;color:var(--font-color-dark);transition:var(--transition)}
.infoZijLinks a:hover{color:var(--color-indigo)}

/* ── Responsief ────────────────────────────────────────────────── */
@media (max-width:1040px){
    /* Gestapeld gaat de inhoudsopgave boven de tekst staan: onderaan een
       pagina van tweeduizend woorden heeft niemand er nog iets aan. */
    .infoLayout{grid-template-columns:1fr;gap:32px}
    .infoZij{position:static;order:-1;flex-direction:row;flex-wrap:wrap}
    .infoZijBlok{flex:1 1 280px}
    .infoToc ol{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 24px}
}
@media (max-width:768px){
    .infoHero{padding:44px 0 28px}
    .infoHero h1{font-size:30px}
    .infoIntro{font-size:16.5px}
    .infoBody{font-size:16px}
    .infoBody h2{font-size:21px;margin:38px 0 14px}
}
@media (max-width:600px){
    .infoZij{flex-direction:column}
    .infoKern,.infoZijBlok{padding:20px}
    .infoToc ol{grid-template-columns:1fr}
}