/* ═══════════════════════════════════════════════════════════════
   orj-core · Sectiebasis — gedeeld door élke paginamodule
   Nieuw in v2.16.0 (B-069). Hiervoor stond dit in home.css; de
   over-ons-module heeft dezelfde regels nodig en CLAUDE.md verbiedt
   een kopie per module ("je kopieert geen per-module variant naar een
   andere pagina"). Eén bron, dus: vlakken, container, gecentreerde
   kop met streep, tekstlink, microcopy, het accentwoord met de
   ORJ-streep (§14) en de strip die over de herorand hangt.
   Regels: ORJ-CTA-SYSTEM.md §10 (schaal), §11 (vlakken/blokken),
   §12 (breakpoints 1120 · 960 · 640), §14 (beweging).
   Laadorde: orj-cta-system.css → orj-secties.css → <module>.css.
   Pro-omgeving: kritieke eigenschappen op !important (foutpatroon
   uit v1.0.2 — overerving en gelijke specificiteit zijn onbetrouwbaar).
   ═══════════════════════════════════════════════════════════════ */

.orj-home, .orj-over, .orj-sec, .orj-sec * { box-sizing: border-box; }
.orj-sec, .orj-sec * { font-family: var(--orj-font) !important; }
.orj-sec { position: relative; overflow: hidden; }
.orj-sec p { margin: 0; }

/* Uitbreken uit een omhulsel. Staat de shortcode in een Cornerstone- of
   thema-container, dan spannen de vlakken toch de volle breedte: elke
   sectie wordt 100vw breed en gecentreerd op de container. De body krijgt
   overflow-x: clip zodat een scrollbalk geen horizontale scroll oplevert. */
.orj-sec { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
body.orj-home-pagina, body.orj-over-pagina, body.orj-artikel-pagina { overflow-x: clip; }   /* v2.35.1: artikelpagina's ontbraken — 100vw-secties gaven daar een horizontale scrollbalk bij klassieke scrollbalken */
/* Cornerstone/Pro-container rondom de secties neutraliseren (achtergrond,
   schaduw, padding) zonder de rest van de pagina te raken. */
.orj-home, .orj-over { display: block; }
.x-container:has(> .orj-home), .x-column:has(> .orj-home), .entry-content:has(> .orj-home), .x-text:has(> .orj-home),
.x-container:has(> .orj-over), .x-column:has(> .orj-over), .entry-content:has(> .orj-over), .x-text:has(> .orj-over) {
	max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important;
	background: transparent !important; box-shadow: none !important; border: 0 !important;
}

/* Resets tegen thema-typografie die door de secties heen lekt (bekend
   foutpatroon: overerving en gelijke specificiteit zijn hier onbetrouwbaar). */
.orj-sec h1, .orj-sec h2, .orj-sec h3 { text-transform: none !important; font-style: normal !important; }
.orj-sec a { color: inherit; text-decoration: none; }
.orj-sec a:hover { text-decoration: none; }
.orj-sec img { max-width: 100%; height: auto; border: 0; box-shadow: none; }
/* De strip is sinds B-104 een <ul>: die houdt zijn eigen padding (v2.31.1). */
.orj-sec ul:not(.orj-usp-kaart), .orj-sec ol { padding-left: 0; }
.orj-sec blockquote::before, .orj-sec blockquote::after { content: none !important; }

.orj-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Vlakken (§11a) */
.orj-sec--wit   { background: #fff; }
.orj-sec--zand  { background: var(--orj-zand); }
.orj-sec--paper { background: var(--orj-paper); }
.orj-sec--mint  { background: var(--orj-mint); }

/* Container 1200 + paginapadding */
.orj-wrap { position: relative; max-width: var(--orj-container, 1200px); margin: 0 auto; padding: 72px 24px; }
@media (max-width: 959px) { .orj-wrap { padding: 56px 24px; } }
@media (max-width: 639px) { .orj-wrap { padding: 48px 20px; } }

/* Gecentreerde kop met streep (§11) */
.orj-kopc { text-align: center; max-width: 760px; margin: 0 auto; }
.orj-kopc-titel { margin: 0 !important; font-size: clamp(26px, 12px + 1.6vw, 34px) !important; font-weight: 700 !important; letter-spacing: -.025em !important; line-height: 1.12 !important; color: var(--orj-ink) !important; }
.orj-kopc-sub { margin: 16px 0 0 !important; font-size: 18px; line-height: 1.55; color: var(--orj-muted); }
.orj-streep { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--orj-green); margin: 16px auto 0; }
.orj-streep--kort { width: 36px; height: 4px; margin: 0; flex-shrink: 0; }
@media (max-width: 639px) { .orj-kopc-sub { font-size: 16px; } }

/* Tekstlink met pijl (variant 4) */
.orj-tekstlink { display: inline-flex; align-items: center; gap: 5px; color: var(--orj-green-dark) !important; font-weight: 600 !important; font-size: 15px; text-decoration: none !important; }
.orj-tekstlink svg { transition: transform .2s ease; }
.orj-tekstlink:hover svg { transform: translateX(3px); }
/* Focusring: het systeembestand kent alleen .orj-textlink (Engelse
   spelling), dus deze klasse kreeg de groene ring niet (v2.11.0). */
.orj-tekstlink:focus-visible { outline: 2px solid var(--orj-green) !important; outline-offset: 2px; }
.orj-micro { font-size: 13.5px; color: var(--orj-muted); }

/* ORJ-streep onder het accentwoord ("gratis") — B-022. Drie standen, zie home.js:
   - zonder JS: zichtbaar via de basisregel — de streep ontbreekt nooit;
   - met JS (html.orj-js, in <head> gezet door orj-home.php): start op
     breedte 0 en tekent zichzelf na 2,5 s — vangnet als het startsein
     uitblijft (scriptfout, geblokkeerd bestand);
   - startsein (.orj-tekent): een ándere animatienaam = een verse start,
     op de tokens uit orj-cta-system.css (wacht · duur · curve, §14).
   transform in plaats van width/left: geen layout, geen CLS, één laag.
   Dit is de ENIGE beweging bij het laden van de homepage. */
.orj-accent { position: relative; display: inline-block; }
.orj-accent::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 6px; border-radius: 3px; background: var(--orj-green); transform-origin: 0 50%; }
@keyframes orj-streep-in     { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes orj-streep-tekent { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html.orj-js .orj-accent::after            { animation: orj-streep-in var(--orj-streep-duur, .4s) var(--orj-streep-curve, ease-out) 2.5s both; }
html.orj-js .orj-accent.orj-tekent::after { animation-name: orj-streep-tekent; animation-delay: var(--orj-streep-wacht, .6s); }
@media (prefers-reduced-motion: reduce) { .orj-accent::after { animation: none !important; transform: none !important; } }
.orj-nowrap { white-space: nowrap; }
.orj-nowrap-slot { white-space: nowrap; }   /* B-046: laatste 2–3 woorden blijven op élke breedte bijeen */
@media (max-width: 639px) { .orj-nowrap { white-space: normal; } }

/* ═══ 2 · USP-STRIP ═════════════════════════════════════════════ */
.orj-uspstrip .orj-wrap { padding: 0 24px; display: flow-root; }
/* display: flow-root — de wrapper wordt een eigen blokformatteringscontext,
   waardoor de negatieve marge van de kaart NIET door de wrapper en de sectie
   heen 'collapst' (bug v2.2.2: de hele witte sectie schoof 56 px omhoog en
   bedekte de hero; de kaart lag daardoor onder de hero i.p.v. erover). */
/* De kaart hangt 44 px boven de sectie uit (B-043, was 56); de sectie mag hem dus NIET
   clippen (bug v2.0–2.2: overflow:hidden op elke sectie sneed de kaart af).
   z-index op de sectie zodat de kaart óver de hero ligt. */
.orj-uspstrip { overflow: visible; z-index: 2; }
/* B-043 · B-051: 1215 × 88, half over de herobodem (−44), #f3f4f6 zonder
   rand, radius 8, vink → tekst 16. Vier items op één rij vragen — gerekend
   met de Inter-bestanden, mét 1,4 % marge — 1087 (tekst + vinken) + 3 × 20
   = 1147 binnen 1215 − 2 × 24 = 1167: dus 4 kolommen pas vanaf 1280 breed
   (was 1120, berekend op de kortere teksten van vóór B-044), 2 × 2 van 768
   tot 1279, één kolom eronder. Flex-wrap is het vangnet: past het toch niet,
   dan wrapt het laatste item in plaats van uit de kaart te lopen.
   B-066 (v2.15.1): schaduw gelaagd via het token (was één laag
   0 14px 34px rgba(17,24,39,.10) uit B-043) — zonder rand draagt de schaduw
   de kaartrand, dus de bovenrand op het zandvlak krijgt een eigen laag. */
.orj-usp-kaart {
	margin-top: -44px; position: relative; z-index: 2;
	background: #f3f4f6; border-radius: 8px; border: 0;
	box-shadow: var(--orj-schaduw-zwevend);
	padding: 28px 24px;
	display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 20px; row-gap: 14px;
}
.orj-usp { display: inline-flex; align-items: center; gap: 16px; font-size: 16px; font-weight: 600 !important; color: var(--orj-ink) !important; white-space: nowrap; }
.orj-usp-vink { width: 32px; height: 32px; border-radius: 50%; background: var(--orj-green); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
@media (max-width: 1279px) { .orj-usp-kaart { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; column-gap: 30px; padding: 28px 32px 28px 36px; } }
@media (max-width: 767px)  { .orj-usp-kaart { grid-template-columns: 1fr; } }
/* < 640 (B-045, referentie gemeten): kaart volle breedte binnen 32, −44,
   padding 24 / 36 / 46 / 36, items gestapeld op een regelritme van 32,
   tekst 14/600, vink 24 op de eerste regel, vink → tekst 16. */
@media (max-width: 639px) {
	.orj-uspstrip .orj-wrap { padding: 0 32px; }
	.orj-usp-kaart { margin-top: -44px; grid-template-columns: 1fr; padding: 24px 36px 46px; row-gap: 0; }
	.orj-usp { font-size: 14px; line-height: 32px; white-space: normal; align-items: flex-start; }
	.orj-usp-vink { width: 24px; height: 24px; margin-top: 4px; }
	.orj-usp-vink svg { width: 13px; height: 13px; }
}
/* B-104 (v2.28.0): een strip is een lijst (<ul>, schermlezers horen "lijst,
   3 items"); de kaartstijl blijft gelijk. Een strip met precies drie items
   (orj-usp-kaart--3: /over-ons/ en de juristpagina's) breekt anders dan de
   vier van de homepage: 960–1279 drie naast elkaar (tekst mag op twee
   regels, vink op de eerste), 640–959 één kolom, mobiel ongewijzigd.
   Gemeten: de 2 + 1 liet het derde item alleen staan en een lang feit liep
   rond 800 px uit de kaart. */
ul.orj-usp-kaart { list-style: none !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; }
ul.orj-usp-kaart > li { margin: 0 !important; padding: 0 !important; }
@media (min-width: 960px) and (max-width: 1279px) {
	.orj-usp-kaart--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; padding: 24px 32px; }
	.orj-usp-kaart--3 .orj-usp { white-space: normal; align-items: flex-start; line-height: 24px; }
	.orj-usp-kaart--3 .orj-usp-vink { margin-top: -4px; }
}
@media (min-width: 640px) and (max-width: 959px) {
	.orj-usp-kaart--3 { grid-template-columns: minmax(0, 1fr); }
}
/* B-105 (v2.28.0): kop met slotwoorden op smalle schermen. Onder 380 px
   past "Waarom onze hulp jou" niet meer en bleef "jou" alleen op de
   middelste regel staan; dan gaat het laatste kopwoord mee naar de
   slotregel ("Waarom onze hulp / jou niets kost"). Gemeten: 2 regels op
   393, 375 en 360; alleen op 320 nog 3. */
@media (max-width: 379px) { .orj-kop-staart { white-space: nowrap; } }