/* OZK typografische schaal — koppen en broodtekst.
   APART BESTAND met een hoge library-weight, en dat is essentieel: de
   Bootswatch-yeti-CDN (cdnjs .../bootswatch/5.2.0/yeti/bootstrap.min.css,
   aangezet via Barrio) laadt NA de thema-aggregaten en zet zelf
   `.h2, h2 { font-size: 2rem }` plus `h1-h6 { font-weight: 300 }`. In
   custom.css werden deze regels daardoor stil overschreven (gemeten met
   CSS.getMatchedStylesForNode: h2 bleef 32px). `!important` is hier geen
   optie, want dat zou ook de bewuste 18px van `.kader h3` overrulen — die
   kaarten zijn te smal voor 22px. Zie de valkuil-memory over de yeti-CDN.
*/
/* Vóór deze sectie hadden de koppen vier gewichten (300/400/500/600) en lag
   h4 (24px) BOVEN h3 (22px); daardoor was er geen zichtbare hiërarchie tussen
   paginatitel, sectiekop en subkop. Eén regel lost dat op:

       GROOT = LICHT   (>= 26px, gewicht 300)  paginatitel, sectiekoppen
       KLEIN = HALFVET (<= 22px, gewicht 600)  subkoppen, kleine koppen

   Font blijft Open Sans: de lichte 32px-kop van de CTA was expliciet de
   gewenste toon (besluit Richard). Rambla — het merkfont, self-hosted 400/700
   in ozk_intranet/css/rambla.css — blijft daarom beperkt tot afgebakende zones
   met eigen achtergrond: de footer, de intranet-dashboards en de kaarttitels
   van de vier kamptype-blokjes op de frontpage.

   NIET meegenomen in de h3-regel: `.kader h3`. Die staat hierboven bewust op
   18px omdat de kaarten van blocks_aanbod smal zijn en 22px+ daar over de
   kaartrand loopt; `.kader h3` (0,1,1) is specifieker dan `h3` (0,0,1) en
   blijft dus staan. De paginatitel zit in ozk-d7-parity-extra.css, want dat
   bestand laadt ná dit bestand en zet die titel al. */

/* Sectiekop — was 32px met 300 in de body en 400 in de zijbalk. */
h2 {
    font-size   : 28px;
    font-weight : 300;
    line-height : 1.25;
    color       : #343a40;
}

/* Subkop — eerste "kleine" kop, dus halfvet. */
h3 {
    font-size   : 22px;
    font-weight : 600;
    line-height : 1.3;
    color       : #343a40;
}

/* Kleine kop — was 24px/300 en daarmee groter dan h3. */
h4,
.feature-box-info h4 {
    font-size   : 18px;
    font-weight : 600;
    line-height : 1.35;
    color       : #343a40;
}

/* Kop-in-tekst: veel "koppen" in views-rewrites en node-bodies zijn een
   <strong> aan het begin van een alinea (17,1px/700) en dus VETTER dan de
   echte h2 erboven. Op broodtekstmaat met hetzelfde 600 als de kleine koppen
   klopt de hiërarchie weer. Dit is een vangnet: zulke teksten horen echte
   h3/h4 te zijn, dat is redactiewerk in de views en node-bodies. */
p > strong:first-child {
    font-size   : 16px;
    font-weight : 600;
}

/* Lead — grijs zoals op D7, zodat de intro van de broodtekst scheidt zonder
   een extra maat te introduceren. */
p.lead {
    font-size   : 20px;
    font-weight : 300;
    line-height : 1.6;
    color       : #6c757d;
}

/* Een lead-paragraaf die het laatste element in zijn kolom is, staat op
   margin-bottom 0 -- terecht, want op desktop staat er niets onder. Op mobiel
   vallen de kolommen onder elkaar en kwam de knoppenkolom er strak tegenaan:
   op de homepage raakten de descenders van "diepgang!" de groene knop. */
@media (max-width: 767.98px) {
    .row > [class*="col-"] > p.lead:last-child {
        margin-bottom: 1rem;
    }
}

/* Mobiel één stap kleiner, zelfde verhoudingen. De kleine koppen blijven
   staan; die zijn al compact en moeten leesbaar blijven. */
@media (max-width: 767.98px) {
    h2                       { font-size: 23px; }
    h3                       { font-size: 20px; }
    h4, .feature-box-info h4 { font-size: 17px; }
    p.lead                   { font-size: 18px; }
}

/* De slogan op de homepage ("Iedereen een onvergetelijk zomerkamp!") is sinds
   28-08-2026 de h1 van die pagina: de paginatitel is uit de layout gehaald en
   zonder h1 mist een pagina zijn onderwerp voor zoekmachines en schermlezers.
   Alleen het niveau verandert, niet het beeld -- als h1 sprong hij van 28px
   naar 40px (mobiel 23 naar 27,4). Hier terug naar de maat die hij als h2 had. */
h1.word-rotator-title {
    font-size  : 28px;
    line-height: 1.25;
}

@media (max-width: 767.98px) {
    h1.word-rotator-title { font-size: 23px; }
}

/* Regelverdeling in koppen — voorkomt het losse woord op de laatste regel.

   Gemeten op 18-08-2026 over alle 709 openbare pagina's: bij tientallen
   koppen liep regel 1 tot 94-99% vol en bleef er één kort woord onderaan
   hangen ("Kampbrief Kinderkamp week" + "1"). `balance` verdeelt de regels
   gelijkmatig in plaats van elke regel maximaal te vullen; diezelfde kop
   werd daarmee 36%/67% in plaats van 99%/4%.

   Belangrijk: het aantal regels verandert NIET, alleen de verdeling — in de
   meting kreeg geen enkele kop er een regel bij. Koppen die écht te lang
   zijn moeten dus nog steeds ingekort worden; dit haalt alleen de scherpste
   randjes eraf.

   `th` staat er bewust bij: de kolomkoppen van de routetabellen komen uit de
   CiviCRM-eventtitels ("Kinderkamp week 1 - 2026") en zijn dus niet vanaf de
   website in te korten. In een kolom van 159px breekt zo'n kop hoe dan ook;
   gebalanceerd oogt dat een stuk rustiger.

   Browsers beperken `balance` tot een handvol regels (Chrome: 6) — ruim
   voldoende voor koppen. Oudere browsers negeren de regel zonder gevolgen. */
h1, h2, h3, h4, th {
    text-wrap: balance;
}

/* Ingesloten video's schaalbaar houden — vangnet.

   De embeds in de bloginhoud zijn los rechtgezet (width:100% + aspect-ratio),
   maar een YouTube-embed komt standaard met width="560" uit de plakcode. Op
   een telefoon van 390px duwde dat de pagina 182px breder dan het scherm,
   waardoor de hele pagina horizontaal ging schuiven — gemeten op 26
   blogpagina's. Deze regel vangt embeds af die later alsnog met de vaste
   plakcode worden toegevoegd, of die uit een view of blok komen. */
iframe[src*="youtube"],
iframe[src*="youtu.be"],
iframe[src*="vimeo"] {
    width         : 100%;
    max-width     : 100%;
    aspect-ratio  : 16 / 9;
    height        : auto;
}

/* Lange bestandsnamen van bijlagen braken de pagina ook open: een PDF-link
   met een lange naam zonder spaties werd 564px breed. */
.file a {
    overflow-wrap : anywhere;
}

/* Externe links met een kale URL als linktekst.

   De Extlink-module wikkelt externe links in <span class="extlink-nobreak">
   om te voorkomen dat het "externe link"-icoontje losraakt van de tekst. Staat
   er een kale URL in de linktekst (http://www.steunpuntkindervakanties.nl/),
   dan kan die nergens afbreken en duwt hij de hele pagina open: gemeten 379px
   voorbij de schermrand op een telefoon van 390px.

   Afbreken weegt hier zwaarder dan het bij elkaar houden van het icoontje. */
.extlink-nobreak {
    white-space   : normal;
    overflow-wrap : anywhere;
}

/* Brede tabellen in de bloginhoud scrollen binnen hun eigen kader.

   De tabel op /ouders/vakantieregios zet een kolom per jaar en is daardoor
   inherent 470px breed; op een telefoon van 390px duwde dat de hele pagina
   104px open. `display:block` maakt van de tabel een scrollbaar blok — de
   kolommen blijven werken, alleen veeg je nu binnen de tabel in plaats van
   over de hele pagina. Beperkt tot de bodytekst, zodat de route- en
   schematabellen (die uit views komen) hun eigen opmaak houden. */
.field--name-body table {
    display   : block;
    overflow-x: auto;
    max-width : 100%;
}

/* Uitzondering: de vakantieregio-tabel (/ouders/vakantieregios).

   Die tabel is sinds 26-08-2026 compact genoeg om wél te passen (datums onder
   elkaar, korte regiolabels), en heeft een eigen scroll-wrapper .tabelscroll
   voor schermen die smaller zijn dan 390px. Met display:block van de regel
   hierboven houden de rijen hun eigen breedte terwijl de tabel 100% wordt —
   dat gaf een gat aan de rechterkant. Vandaar display:table terug.

   De kleuren staan hier en niet als inline style in de node-body: daar zijn ze
   bij de D7-migratie al een keer verdwenen, waarna de pagina drie identieke
   regio-rijen toonde. De informatie zit namelijk in de kleur — groen is
   vakantie in die regio, paars zijn onze eigen kampweken. */
.tabelscroll {
    overflow-x: auto;
}

.field--name-body table.vakantietabel,
.field--name-body table.kampgeldtabel,
.field--name-body table.criteriatabel,
.field--name-body table.infotabel,
.field--name-body table.stappentabel {
    display: table;
    width  : 100%;
}

/* Het thema lijnt cellen links uit; een geerfde text-align van de tabel
   verliest van die regel op de cel, dus hier op de cel zelf. */
.field--name-body table.vakantietabel td {
    text-align: center;
}

.field--name-body table.vakantietabel .vk-jaar {
    background-color: lightgrey;
}

.field--name-body table.vakantietabel .vk-vakantie {
    background-color: #439f35;
}

.field--name-body table.vakantietabel .vk-kamp {
    background-color: #663399;
    color           : #ffffff;
    font-weight     : 700;
}

/* Idem voor de kamptarieven-tabel (/kampgeld).

   Zelfde vertrekpunt als hierboven: met display:block bleef die tabel op zijn
   intrinsieke 534px staan in een kolom van 750px — links opgedrongen, gat
   rechts. En dezelfde afweging voor de opmaak: als class in het thema, niet
   als inline style in de node-body, want CKEditor5 stript die bij de
   eerstvolgende save.

   De periodekolom blijft links uitgelijnd (dat is lopende tekst); de bedragen
   staan gecentreerd onder hun kolomkop. */
.field--name-body table.kampgeldtabel td {
    text-align    : center;
    vertical-align: middle;
}

/* De eerste kolom draagt tekst (de aanmeldperiode), niet een getal — die
   blijft links, kop inbegrepen, anders staat de kolomkop gecentreerd boven
   links uitgelijnde regels. */
.field--name-body table.kampgeldtabel td:first-child {
    text-align: left;
}

/* Blauw en niet het paars van de vakantietabel: in dit thema staat #006E83
   voor informatie (custom.css kent er zelfs een class .ozkblauw voor), terwijl
   paars navigatie is en in de vakantietabel al "onze kampweken" betekent. */
.field--name-body table.kampgeldtabel .kg-kop,
.field--name-body table.criteriatabel .cr-kop,
.field--name-body table.infotabel .info-kop {
    background-color: #006E83;
    color           : #ffffff;
    font-weight     : 700;
}

/* De periode blijft op een regel: op 320px brak "t/m 31 januari" anders in
   tweeen, wat de rij 64px hoog maakte tegen 41px nu. Het past ook daar --
   113px voor deze kolom plus drie bedragkolommen is samen 294px van de
   beschikbare 296px. Wordt een periodetekst ooit langer, dan vangt de
   wrapper .tabelscroll het op met zijwaarts schuiven. */
.field--name-body table.kampgeldtabel .kg-periode {
    background-color: lightgrey;
    white-space     : nowrap;
}

/* Een bedrag mag nooit over twee regels breken (€ op de ene, 210 op de
   volgende); op 390px is de kolom smal genoeg dat dat anders gebeurt. */
.field--name-body table.kampgeldtabel .kg-bedrag {
    font-weight: 700;
    white-space: nowrap;
}
/* Sinds 14-10-2026 komt de kampgeldtabel uit de view kamptarieven (tarieven uit
   CiviCRM) en staat ze buiten .field--name-body, dus golden de regels hierboven
   niet meer. Zelfde opmaak voor de view; de kopcellen zijn daar <th> in plaats
   van .kg-kop. Bootstrap's strepen en hover (table-striped/table-hover op de
   views-tabel) uit, die had de oude tabel niet. Verzoek Richard 14-10. */
.view-kamptarieven table.kampgeldtabel {
    display: table;
    width  : 100%;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg  : transparent;
}
.view-kamptarieven table.kampgeldtabel > :not(caption) > * > * {
    box-shadow: none;
}
.view-kamptarieven table.kampgeldtabel td,
.view-kamptarieven table.kampgeldtabel th {
    text-align    : center;
    vertical-align: middle;
}
.view-kamptarieven table.kampgeldtabel td:first-child,
.view-kamptarieven table.kampgeldtabel th:first-child {
    text-align: left;
}
.view-kamptarieven table.kampgeldtabel thead th {
    background-color: #006E83;
    color           : #ffffff;
    font-weight     : 700;
    text-transform  : none;   /* het thema zet th in hoofdletters; de oude tabel niet */
}
.view-kamptarieven table.kampgeldtabel .kg-periode {
    background-color: lightgrey;
    white-space     : nowrap;
}
.view-kamptarieven table.kampgeldtabel .kg-bedrag {
    font-weight: 700;
    white-space: nowrap;
}

/* En de leeftijdscriteria-tabel (/ouders/leeftijdscriteria en de criteria-
   pagina per kampsoort).

   Anders dan bij kampgeld staat hier in beide kolommen lopende tekst, dus
   niets gecentreerd. Per kamp een rij: de naam links, daarnaast het criterium
   met de toelichting eronder in dezelfde cel. In de oude opzet was dat twee
   rijen met een lege cel ervoor, wat als tabel niets betekende en bij een
   smal scherm uit elkaar viel. */
.field--name-body table.criteriatabel td {
    text-align: left;
}

.field--name-body table.criteriatabel .cr-kamp {
    background-color: lightgrey;
    white-space     : nowrap;
}

/* Label/waarde-tabellen in een bodytekst (adres- en routegegevens, zoals
   /topkamp/meetup).

   Zonder display:table hield elke rij zijn intrinsieke breedte: op 320px was
   dat 314px in een kolom van 296px, dus "Voorbereidingsdag Topkamp" en het
   adres liepen buiten beeld. Hier geen nowrap op de labelkolom — die labels
   zijn lange woorden, en juist het afbreken moet kunnen. */
.field--name-body table.infotabel {
    /* Zonder table-layout:fixed rekent de browser met de min-content-breedte
       van "Voorbereidingsdag" en "Groepsaccommodatie": de tabel werd dan 315px
       breed in een kolom van 296px, ook mét width:100%. overflow-wrap alleen
       helpt niet -- dat verandert de min-content-breedte niet. */
    table-layout: fixed;
}

.field--name-body table.infotabel td {
    text-align   : left;
    overflow-wrap: break-word;
}

/* 42%: op 320px is dat 124px, genoeg voor een label van een woord of twee.
   Bij 38% (112px) brak een label van 17 tekens midden in het woord af. */
.field--name-body table.infotabel .info-label {
    background-color: lightgrey;
    width           : 42%;
}

/* Een bedrag in een infotabel leest als een bedrag: vet, en niet afbreken
   tussen het euroteken en het getal. */
.field--name-body table.infotabel .info-bedrag {
    font-weight: 700;
    white-space: nowrap;
}

/* Stappenlijst met voortgang (/leiding/voorheteerst en
   /leiding/belangstelling/aangevraagd).

   Drie kolommen: het stapnummer, een vakje dat de voortgang toont, en wat er
   in die stap gebeurt. De betekenis zat in inline styles op de afbeelding
   (zwarte rand = hier ben je, lichtgrijs = nog te gaan, grijze tekst = nog
   niet aan de beurt). Dat staat nu als class op de cel: CKEditor5 laat
   <td class> staan maar stript een style-attribuut op een <img> bij de
   eerstvolgende save, en dan is het onderscheid weg. */
.field--name-body table.stappentabel td {
    vertical-align: middle;
}

/* 4.5rem is precies genoeg voor "Stap 1" op een regel; elke pixel meer gaat
   af van de tekstkolom, en daar bepaalt een lang woord als
   "contactgegevens" of de regel nog past. */
.field--name-body table.stappentabel .stap-nr {
    background-color: lightgrey;
    white-space     : nowrap;
    font-weight     : 700;
    width           : 4.5rem;
}

.field--name-body table.stappentabel .stap-vink {
    width     : 2.75rem;
    text-align: center;
}

.field--name-body table.stappentabel .stap-vink img {
    width : 24px;
    height: 24px;
}

/* Nog te gaan: leeg vakje met een lichte rand, en de tekst getemperd. */
.field--name-body table.stappentabel .stap-open img {
    border: 2px solid lightgrey;
}

.field--name-body table.stappentabel .stap-open {
    color: #6c757d;
}

/* Hier ben je nu. */
.field--name-body table.stappentabel .stap-nu img {
    border: 2px solid #3c3c3b;
}

/* Lange samengestelde woorden in koppen mogen afbreken.

   "WereldKUBBioenschappen" in een blogtitel is één woord van 337px zonder
   natuurlijk afbreekpunt en duwde de pagina 31px voorbij de schermrand.
   `break-word` grijpt alleen in als het woord anders niet past. */
h1, h2, h3, h4,
.field--name-title {
    overflow-wrap : break-word;
}

/* En hetzelfde voor de bodytekst. Een blogtekst bevatte
   "ouders/opa's/oma's/tantes/buurvrouw/buurman/enz." — 48 tekens die de
   browser niet uit zichzelf afbreekt, want er staat geen spatie in. Samen met
   een kale YouTube-URL in dezelfde alinea duwde dat de pagina 49px voorbij de
   schermrand. `break-word` grijpt alleen in als een woord anders niet past. */
.field--name-body,
.node__content p {
    overflow-wrap : break-word;
}

/* Afbeeldingen in de inhoud schalen mee.

   Het sponsorlogo op /overons/sponsoren stond op zijn natuurlijke 362px met
   `max-width: none` en duwde de pagina 14px voorbij de rand op een scherm van
   360px. Dit is de gebruikelijke vangregel voor bodytekst-afbeeldingen; hij
   voorkomt hetzelfde bij elke afbeelding die later met een vaste maat wordt
   toegevoegd. */
.node__content img,
.field--name-body img {
    max-width : 100%;
    height    : auto;
}

/* Vlog-veld op blogs: de insluiting vult de kolom en houdt 16:9.
   Zie templates/field/field--field-vlog-url.html.twig. */
.ozk-vlog {
    margin : 1.5rem 0;
}
.ozk-vlog iframe {
    width        : 100%;
    max-width    : 100%;
    aspect-ratio : 16 / 9;
    height       : auto;
    border       : 0;
}