/* D7-parity aanvulling — verbatim geport uit Porto_sub/css/custom_sub.css
 * (D7-live). Alleen selectors die nog NIET in custom.css / ozk-porto-port.css
 * zaten; bron-regelnummers per blok. Apart bestand conform afspraak
 * "bario_sub-CSS voorzichtig: nieuwe styling als apart bestand". */

/* custom_sub.css:1263 + 1313 + 1473 — oranje wachtlijst-knopjes in
   aanmeld-/deelnametabellen (div-, td- en hoofdlettervariant). */
/* Witte tekst op oranje #cc4d00: 4,54:1 (palet C, 4 aug 2026). Dit stond tot
   die dag op zwarte tekst omdat het oranje toen #EE6902 was — wit haalde daar
   3,15:1 en zwart 6,66:1. Nu het oranje een stap donkerder is, kan de hele site
   op één tekstkleur: wit. Zelfde regel in de mail-CSS
   (nl.onvergetelijk.cssinliner/custom_civicrm_email.css) en op de kleurclasses.
   Zie huisstijl-kleuren-contrast-besluit; oranje heeft géén brondocument (het
   staat niet in de ontwerpersmail van 2015), vandaar dat juist deze baan mocht
   schuiven. De horizontale ruimte volgt de badges in de sectie [VOOR OUDERS]. */
div.wachtlijst,
td.wachtlijst,
div.Wachtlijst {
    background-color: #cc4d00;
    color: white;
    padding: 3px 10px;
}

/* custom_sub.css:1786 — knop-container in kampkaarten. */
.boxbig {
    padding: 3px 3px 3px 3px !important;
    font-size: 14px !important;
}

/* custom_sub.css:1176 — donkere kolom-cel (views-veld "zeven") in de
   beschikbaarheid-kaarten. */
.views-field.zeven {
    background-color: #676767 !important;
    color: #EFEFEF;
    white-space: nowrap;
}

/* custom_sub.css:1617 — utility: lichte knopachtergrond (aanmeld-knop kaart). */
.whitesmoke {
    background: whitesmoke !important;
    color: black !important;
}

/* custom_sub.css:1638/1828 (laatste definitie wint in D7; hier samengevoegd
   tot het effectieve resultaat) — utility: lichte rand. */
.border {
    border: 1px solid lightgrey !important;
}

/* Paginatitel-veldblok (layout_library kolom 1). Zelfde font en marge als de
   blokkoppen "Menu"/"Submenu" (kale Bootstrap-h2's in de zijkolommen), en
   overschrijft de Rambla/uppercase-look uit ozk-porto-port.css:227 (dit bestand
   laadt later). De titel is een <span>, dus display:block voor werkende marges.

   27-07-2026: de GROOTTE is niet langer gelijk aan die van de zijbalk-koppen.
   In de typografische schaal (custom.css, sectie OZK TYPOGRAFISCHE SCHAAL) is de
   paginatitel het hoogste niveau en staan sectiekoppen (h2) er één stap onder:
   36px vs 28px, beide licht (300). Met de oude waarden (fluid ~32px, gewicht
   500) was de titel even groot als elke h2 en dus niet als paginatitel te
   herkennen. Gewicht 300 hoort bij de regel "groot = licht"; 500 kwam nergens
   anders voor. */
.block-field-blocknodepagetitle .field--name-title {
    display: block;
    font-family: inherit;
    font-size: 28px;
    text-transform: none;
    font-weight: 300;
    line-height: 1.2;
    /* Zelfde afstand tot de content als de zijbalk-koppen (15px, §3.2). */
    margin: 0 0 15px;
}
@media (min-width: 992px) {
    .block-field-blocknodepagetitle .field--name-title {
        font-size: 32px;
    }
}
/* Titelblok niet ook nog de algemene blok-tussenruimte geven — anders begint
   de content in kolom 1 lager dan de menu's naast de kop in kolom 2/3. */
.layout-builder__layout [class*="col-"] > .block-field-blocknodepagetitle {
    margin-bottom: 0;
}

/* ... en de titel zelf begint dan nóg te laag, doordat boven de letters de
   regelruimte van de font-box staat (Richard 23-09-2026). Gelijke blok-tops
   zijn dus niet genoeg: het oog vergelijkt de bovenkant van de INKT met de
   bovenrand van het paarse vlak ernaast, en die lag 8px lager bij de 40px-titel
   van de kamppagina's en 7px bij de 36px-titel elders. Beide keren 0,2em, dus
   één em-waarde volstaat en hij schaalt mee met de titelgrootte op mobiel.

   Gemeten op de screenshot (eerste rij donkere pixels in kolom 1 tegen de
   eerste rij paarse pixels in kolom 2), niet berekend: getBoundingClientRect
   geeft de regelbox en niet de inkt, en canvas-fontmetrics kloppen hier niet
   omdat de line-height (1,2) kleiner is dan ascent+descent van Open Sans — de
   half-leading is dan negatief. `text-box-trim: trim-start` met
   `text-box-edge: cap` is de nettere route zodra Firefox meedoet, maar die legt
   de CAP-lijn op de rand, waardoor de ascenders van l/k/h er 3px bovenuit
   steken. */
.layout-builder__layout [class*="col-"] h1 {
    margin-top: -0.2em;
}
@media (min-width: 1200px) {
    .block-field-blocknodepagetitle .field--name-title {
        font-size: 36px;
    }
}

/* Witruimte tussen de blokken binnen layout-kolommen (layout_library /
   Layout Builder-pagina's): elk blok/views-container ademruimte eronder. */
.layout-builder__layout [class*="col-"] > * {
    margin-bottom: 1.75rem;
}
.layout-builder__layout [class*="col-"] > *:last-child {
    margin-bottom: 0;
}
/* ... maar blokken die niets renderen krijgen géén tussenruimte. Twee bronnen
   van zulke lege blokken in kolom 1: (a) het core-blok page_title_block, dat
   binnen Layout Builder structureel leeg blijft — alleen BlockPageVariant
   roept setTitle() aan en die stap draait niet voor inline LB-componenten;
   (b) de nog niet gemigreerde D7-blokken, die eveneens een lege .content
   afdrukken; (c) sinds 23-09-2026 ook het body-veldblok van de vijf
   kamp-overzichtspagina's (nid 1716-1720): die hebben een body-rij met een
   lege waarde, en op zo'n rij drukt Drupal wél een (leeg) .field__item af.
   Zonder deze uitzondering stapelen die onzichtbare blokken 1,75rem op boven
   de eerste zichtbare kop, waardoor de kamptitel in kolom 1 ~28px lager begint
   dan de koppen "Kampen"/"Menu" in kolom 2/3.

   De toets kijkt daarom niet of er een kind ís, maar of dat kind zelf inhoud
   heeft (`*:not(:empty)`) — een lege .field__item telt als niets. Vervangende
   elementen (img, iframe, video …) zijn per definitie :empty maar renderen
   wel, dus die staan apart in de lijst; anders zou een blok met alleen een
   afbeelding zijn tussenruimte verliezen. Zodra zo'n blok gevuld wordt, komt
   de marge er vanzelf weer onder. */
.layout-builder__layout [class*="col-"] > .block:not(:has(
    .content > *:not(:empty),
    .content > img, .content > svg, .content > iframe, .content > video,
    .content > canvas, .content > embed, .content > object,
    .content > input, .content > hr
)) {
    margin-bottom: 0;
}

/* Aanmeld-/beschikbaarheidstabellen compacter, zoals D7 (Bootstrap 3-maat
   i.p.v. de ruimere D11-tabelcellen). */
.view-beschikbaarheid-zomerkampen .views-view-table th,
.view-beschikbaarheid-zomerkampen .views-view-table td {
    padding: 6px 10px;
    vertical-align: middle;
}

/* Header: witte balk zoals D7 (colors.css zet #navbar-main op blauw #1d84c3;
   dat kleurenschema past niet bij de D7-look met wit + logo + grijs menu). */
#navbar-main {
    background-color: #ffffff !important;
}

/* Splide-autoplay-pauzeknop (a11y-knop, unstyled = los leeg vierkantje onder
   de slideshow). D7 had geen zichtbare knop; autoplay pauzeert al op hover. */
.splide__toggle {
    display: none !important;
}

/* Logo op D7-maat: het bronbestand is 600px breed en rendert anders
   full-size; D7 toonde 'm ± 250-280px. */
#navbar-main .navbar-brand img {
    max-width: 280px;
    height: auto;
}
/* Breakpoint-mismatch opgelost: de superfish-opzet werkt met 992px
   (mobiel menu <992, desktopmenu >=992), maar de navbar-template staat op
   expand-xl waardoor Bootstrap de collapse pas vanaf 1200px opent — tussen
   992 en 1199px bestond er daardoor géén menu. Open de collapse hier al
   vanaf 992px (gedrag van expand-lg) en verberg de hamburger dan. */
/* Mobiel: de container-wrapper in de navbar (desktop-uitlijning op de
   slideshow) mag het uitgeklapte menu niet insnoeren. Padding-0 op de hele
   container trok logo en hamburger echter tegen de schermranden (feedback
   Richard 13-07): padding terug naar de Bootstrap-containermaat zodat logo
   links en hamburger rechts gelijk uitlijnen; alleen de uitgeklapte collapse
   loopt via negatieve marge alsnog tot de randen. */
@media (max-width: 991.98px) {
    #navbar-main > .container {
        max-width: none;
        padding-left: 12px;
        padding-right: 12px;
    }
    #navbar-main .navbar-collapse {
        margin-left: -12px;
        margin-right: -12px;
    }
}

/* Wat lucht tussen slideshow/foto en de breadcrumb (feedback Richard 13-07;
   de featured-top-marges worden elders genuld). */
#block-bario-sub-breadcrumbs {
    margin-top: 10px;
}

/* Leeg renderende views-blokken (bv. de kk/bk/jk/tk-intro's van de ándere
   kamptypes op een kamppagina, of rol-gated blokken) zijn 0px hoog maar
   kregen wél de 1.75rem-blokafstand — op mobiel stapelde dat tot een groot
   gat boven de paginakop (feedback Richard 13-07). Geen zichtbare
   view-output (content/header/footer/empty/form) = geen blokafstand. */
.layout-builder__layout [class*="col-"] > .views-element-container:not(:has(.view-content, .view-header, .view-footer, .view-empty, form)) {
    margin-bottom: 0;
}

@media (min-width: 992px) {
    #navbar-main .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
    #navbar-main .navbar-toggler {
        display: none !important;
    }
    /* Het mobiele off-canvas-menublok zit in dezelfde collapse en hoort
       alleen <992px te bestaan — op desktop verbergen. */
    #block-bario-sub-mobielmenu-superfish {
        display: none !important;
    }
}

/* Meer witruimte tussen de layout-kolommen (1-2 en 2-3): ruimere gutter
   op de layout-row (Bootstrap-gutter-variabele). */
.layout.row.layout-builder__layout {
    --bs-gutter-x: 3rem;
}

/* ... maar die ruimere gutter geeft de rij negatieve marges van 24px links
   en rechts, en Bootstrap gaat ervan uit dat de omliggende container die 24px
   als padding teruggeeft. Zit een layout-sectie direct in een node
   (article.node, padding 0), dan gebeurt dat niet en wordt de rij breder dan
   het scherm: /ouders/uniek schoof 12px voorbij de rand op een telefoon.

   Alleen die specifieke rijen krijgen hun marges op 0. Eerst geprobeerd om
   de gutter zelf op mobiel te verkleinen, maar dat maakte overal de
   kaartkolommen 12px smaller (132px i.p.v. 144px op 360px), waardoor koppen
   als «De tofste leiding» op /betteld en /navigators over drie regels gingen
   vallen. Deze variant laat die kaarten met rust. */
@media (max-width: 767.98px) {
    article.node    > .layout.row.layout-builder__layout,
    .node__content  > .layout.row.layout-builder__layout {
        margin-left  : 0;
        margin-right : 0;
    }
}

/* (vervallen: container-neutralisatie botste met de layout-builder-
   gutter-fix in custom.css — die fix zet sinds 2026-07 padding-left op
   12px (was 0), waarmee de eerste kolom exact op de slideshow-lijn
   staat, op desktop én mobiel) */

/* Intranet-menuband (kampstaf/groepsleiding, highlighted-regio): op volle
   schermbreedte en zonder blauwe band — D7 toonde witte tabs op wit. */
.highlighted .block-superfish {
    background: transparent;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-left: calc(50vw - 50% + 10px);
    padding-right: calc(50vw - 50% + 10px);
}

/* Microdata-/weektabellen in de zijkolom (event_kenmerken microdata_*):
   Bootstrap-row-gutters neutraliseren én dezelfde "structurele verschuiving"
   (-15px, zie superfish-ozk.css §3.2) meegeven als de zijbalkmenu's en
   -koppen, zodat het grijs van de tabellen links gelijk loopt met het
   Submenu-grijs en de B van de kop erboven. */
[class*="block-views-blockevent-kenmerken-microdata"] .view-content.row {
    margin-left: -15px;
    margin-right: 0;
    width: calc(100% + 15px);
}
[class*="block-views-blockevent-kenmerken-microdata"] .view-content.row > .views-row {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}
[class*="block-views-blockevent-kenmerken-microdata"] .table {
    margin-bottom: 1rem;
    width: 100%;
}

/* Kampkaarten (kaderbox) naast elkaar: de views-wrappers (.views-row /
   .views-field / .field-content) doorzichtig maken zodat de .col.kaderbox-
   kolommen rechtstreeks in de Bootstrap-.row vallen (col-sm-6 = 2 naast
   elkaar, aanbod col-sm-3 = 4). D7 had geen tussen-wrappers. */
.view-display-id-block_perkamp .view-content.row > .views-row,
.view-display-id-block_perkamp .views-row > .views-field,
.view-display-id-block_perkamp .views-field > .field-content,
.view-display-id-blocks_aanbod .view-content.row > .views-row,
.view-display-id-blocks_aanbod .views-row > .views-field,
.view-display-id-blocks_aanbod .views-field > .field-content,
.view-display-id-blocks_kamptype .view-content.row > .views-row,
.view-display-id-blocks_kamptype .views-row > .views-field,
.view-display-id-blocks_kamptype .views-field > .field-content,
.view-display-id-blocks_kamptype_pre .view-content.row > .views-row,
.view-display-id-blocks_kamptype_pre .views-row > .views-field,
.view-display-id-blocks_kamptype_pre .views-field > .field-content {
    display: contents;
}

/* Porto theme-elements.css:4894-4915 — feature-box-basis (praktische
   kampinfo): klein gekleurd icoon-rondje links, tekst rechts. De kale
   .feature-box.secondary (views) gebruikt dit; de .large/.small-tegels
   houden hun eigen stijl in custom.css. */
.feature-box {
    clear: both;
}
.feature-box .feature-box-icon {
    background: #c13c61;
    border-radius: 35px;
    color: #FFF;
    display: inline-block;
    float: left;
    height: 35px;
    line-height: 35px;
    margin-right: 10px;
    position: relative;
    text-align: center;
    top: 5px;
    width: 35px;
}
.feature-box .feature-box-info {
    padding-left: 50px;
}
/* Material Symbols-ligature op icoon-rondje-maat (D7 gebruikte fa-iconen
   ~20px; ligature gecentreerd in het 35px-rondje). */
.feature-box .feature-box-icon.material-symbols-outlined {
    font-size: 20px;
    vertical-align: middle;
}
/* Ook de links in de kenmerken-blokjes zonder onderstreping (feedback Richard
   27-07), gelijk aan de CTA-kaartjes verderop in dit bestand: D7's Porto zette
   `a{text-decoration:none}`, Bootstrap 5 onderstreept juist standaard. Deze
   links staan midden in lopende tekst ("We hebben kleine groepjes met…"), dus
   de streep komt bij hover wél terug — daar is hij de duidelijkste hint dat
   het woord aanklikbaar is. */
.feature-box a {
    text-decoration: none;
}
.feature-box a:hover,
.feature-box a:focus {
    text-decoration: underline;
}

/* Porto theme-elements.css:4454-4491 — featured-box (let op de d: dit is de
   KAART-variant, niet de .feature-box hierboven). Wordt gebruikt door de
   CTA-stroken onderaan de landingspagina's: per kolom een kaartje met kop,
   een paar sublinks en een Meer info-knop. De OZK-content zet er ook
   .featured-box-secundary op, maar die klasse bestaat in Porto niet (typo);
   op D7 rendert dus ook de neutrale grijze bovenrand van .box-content. */
/* IN LIJN MET DE BLOKVORM (besluit Richard 4-8-2026).
   Deze kaarten kwamen verbatim uit Porto: 8px afgeronde hoeken, een verticale
   gradient, een lichte schaduw, drie randen in drie grijstinten en een neutrale
   grijze bovenrand van 4px. Dat is een andere vormtaal dan de rest van de site,
   die sinds 1 aug werkt met rechte hoeken, een gekleurde kopbalk en een licht
   paneel (ozk-blokken.css) — op één pagina stonden dus twee blok-idiomen.

   Nu volgt de kaart hetzelfde patroon als een blok in de smalle kolommen: de
   eigen titel wórdt de gekleurde balk en sluit de bovenkant af, de rest is een
   licht paneel. Kleur volgt betekenis: blauw #006E83 = informatie, net als de
   kopbalken elders. De sublinks en de knop blijven roze.

   15px zijpadding, gelijk aan ozk-blokken.css, zodat kopbalktekst en bodytekst op
   één linkerlijn uitkomen. Die padding zat op .box-content en is naar de losse
   kinderen verhuisd, want de kopbalk moet van rand tot rand lopen. */
.featured-box {
    background: whitesmoke;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    box-shadow: none;
    /* Verticale ruimte gelijk aan de horizontale (verzoek Richard 4-8-2026).
       Tussen twee kaarten náást elkaar zit de Bootstrap-gutter: `.row` zet
       `--bs-gutter-x: 1.5rem` en geeft elke kolom de helft als padding, dus 24px
       ertussen. Verticaal was het 2 × 10px marge = 20px, en dat verschil zag je
       zodra de kaarten in een 2×2 staan. De halve gutter als marge boven én onder
       maakt de tussenruimte precies gelijk — en blijft kloppen als de
       gutter-variabele ooit verandert. */
    margin: calc(var(--bs-gutter-x, 1.5rem) / 2) auto;
    /* Zonder deze twee groeit de kaart buiten zijn kolom zodra de tekst een woord
       bevat dat breder is dan de kolom. Een flex-item krijgt namelijk
       `min-width: auto`, en dat is de min-content-breedte = het langste woord; de
       kaart wordt dan net zo breed als dat woord. Gemeten 18-08-2026 op
       /leiding/voorheteerst bij 390px: het linkerkader werd 186px in een kolom van
       159px, dus 27px breder dan het kader ernaast — met de kolommen zelf keurig
       gelijk (183/183). `overflow-wrap` (erft door naar de tekst) laat het lange
       woord in plaats daarvan afbreken, zoals het op desktop vanzelf al past. */
    min-width: 0;
    overflow-wrap: break-word;
    min-height: 100px;
    position: relative;
    text-align: center;
    z-index: 1;
}
.featured-box .box-content {
    border-radius: 0;
    border-top: none;
    padding: 0 0 .8rem;
    position: relative;
}
/* De kaarttitel is de kopbalk. `.featured-box h3` verderop zet nog font-size en
   letter-spacing uit de Porto-erfenis; hier overschreven met dezelfde waarden als
   de blokkopbalk. Rambla mag: dit is chrome, geen inhoudelijke kop. */
.featured-box .box-content > h3 {
    background:     #006E83;
    color:          #ffffff;
    font-family:    Rambla, Arial, Helvetica, sans-serif;
    font-size:      1.05rem;
    font-weight:    400;
    letter-spacing: 0;
    line-height:    1.3;
    padding:        .55rem 15px;
    margin:         0 0 .6rem;
}
.featured-box .box-content > h3 a,
.featured-box .box-content > h3 a:hover,
.featured-box .box-content > h3 strong {
    color:       #ffffff;
    font-weight: 400;
}
/* Alles behalve de kopbalk krijgt de binnenruimte van het paneel. */
.featured-box .box-content > *:not(h3) {
    padding-left:  15px;
    padding-right: 15px;
}


/* MOBIEL: 2×2 IN PLAATS VAN EEN STAPEL VAN VIER (verzoek Richard 4-8-2026).
   De content zet `col-sm-6 col-md-3`, dus onder 576px vallen de vier kaarten
   onder elkaar — met elk een kopbalk, drie regels en een knop is dat een lange
   scroll voor iets dat als overzicht bedoeld is. Twee naast twee houdt het in
   beeld. De kolommen zijn al flex-items (zie de knoplijn-regels hierboven), dus
   hier alleen de breedte.

   Padding op mobiel van 15px naar 10px: bij ~177px kaartbreedte op een 390px
   scherm is elke pixel tekstruimte nodig, anders wrapt "Betrouwbare kampleiders"
   over drie regels. De kopbalk volgt diezelfde inspringing, zodat kop en tekst
   op één linkerlijn blijven. */
@media (max-width: 575.98px) {
    .featured-boxes > [class*="col-"] {
        flex:      0 0 50%;
        max-width: 50%;
    }
    /* Uitzondering: een rij van twee brede kaarten (col-md-6, alleen blok 19 op
       /leiding/belangstelling) draagt lopende tekst en een knop, geen korte
       term. Op 50% is dat 148px op een 320px scherm: "belangstellings-
       formulier" brak middenin en de knop stak buiten de kaart. Die twee horen
       onder elkaar -- de 2x2 hierboven is er voor de vier smalle kaarten. */
    .featured-boxes > [class*="col-md-6"] {
        flex:      0 0 100%;
        max-width: 100%;
    }
    .featured-box .box-content > h3 {
        font-size: .95rem;
        padding:   .5rem 10px;
    }
    .featured-box .box-content > *:not(h3) {
        padding-left:  4px;
        padding-right: 4px;
    }
    /* De donkere variant zet 1.75rem zijruimte met !important. Op een kaart van
       168px (twee naast elkaar op 360px) blijft daardoor 82px tekst over: dat is
       negen tekens per regel, en "kampwerk" -- precies 82px breed -- brak
       middenin. Met krappere zijruimte op mobiel is het 118px. */
    .featured-box.featured-box-secundary .box-content,
    .featured-box-secundary .box-content {
        padding: 1.25rem .5rem !important;
    }
    /* En breek een lang woord af met een koppelteken in plaats van er zomaar
       doorheen: de site staat op lang="nl", dus de browser weet waar
       "Leeftijdscrite-ria" mag splitsen. De overflow-wrap uit ozk-typografie
       blijft als vangnet voor woorden die de hyphenator niet kent. */
    .featured-box p,
    .featured-box li {
        hyphens        : auto;
        -webkit-hyphens: auto;
    }
    /* Tekst een maat kleiner. Bij twee kaarten naast elkaar op een 390px scherm
       blijft er ~157px tekstbreedte over, en op 16px wrapt dan bijna elke term
       ("Boeiend programma", "Betrouwbare kampleiders", "Beperkt aantal
       plaatsen"). Op 14,4px passen de meeste op één regel, wat de kaarten
       gelijkmatiger maakt. De knop mag ook kleiner: 20px is een maat voor een
       CTA over de volle breedte, niet voor een kaart van 177px. */
    .featured-box .box-content p {
        font-size:   .9rem;
        line-height: 1.4;
    }
    .featured-box .btn {
        font-size: 1rem;
        padding:   0.45rem 0.9rem;
    }
}

/* KNOPPEN VAN DE KAARTENRIJ OP ÉÉN LIJN (besluit Richard 4-8-2026).
   De vier CTA-kaarten op /kampen krijgen hun hoogte van hun inhoud: bij één
   kaart wrapt een sublink over twee regels ("Betrouwbare kampleiders"),
   waardoor die kaart 260px hoog werd tegen 235px voor de rest en zijn knop
   25px lager stond dan de andere drie (gemeten 4-8-2026).

   De rij is een Bootstrap `.row`, dus de kolommen zijn al even hoog; alleen de
   kaart erbinnen strekte niet mee. Deze keten geeft de knop-alinea
   `margin-top:auto`, zodat hij naar de onderrand zakt en alle vier op dezelfde
   lijn uitkomen — ongeacht hoeveel regels erboven staan. */
.featured-boxes > [class*="col-"] {
    display: flex;
}
.featured-boxes > [class*="col-"] > .featured-box {
    display:        flex;
    flex-direction: column;
    flex:           1 1 auto;
}
.featured-boxes > [class*="col-"] > .featured-box > .box-content {
    display:        flex;
    flex-direction: column;
    flex:           1 1 auto;
}
/* De laatste alinea in de kaart bevat de knop; die zakt naar beneden. Alleen
   wanneer hij ook echt een knop draagt — een kaart die op een gewone alinea
   eindigt hoort niet ineens onderaan uitgelijnd te worden. */
.featured-boxes > [class*="col-"] > .featured-box > .box-content > p:last-child:has(.btn) {
    margin-top:    auto;
    margin-bottom: 0;
}
.featured-box h3 {
    font-size: 1.3em;
    font-weight: 400;
    letter-spacing: -0.7px;
    margin: 5px 0;
}
/* Links binnen de CTA-kaartjes (de kop-link en de sublinkjes eronder) zonder
   onderstreping — D7 draaide op Porto, dat globaal `a{text-decoration:none}`
   zet; Bootstrap 5 onderstreept links juist standaard, waardoor zo'n kaartje
   uit vijf onderstreepte regels bestond (feedback Richard 27-07). De roze
   linkkleur (custom.css) blijft de affordance; op hover komt de streep terug. */
/* SUBLINKS IN PAARS, NIET ROZE (besluit Richard 4-8-2026).
   Een kaart bevat drie sublinks en een knop; in roze waren dat vier vlakken van
   de merkkleur onder een blauwe kopbalk, en dat las onrustig. Paars is sinds
   1 aug de navigatiekleur (zie huisstijl-kleursemantiek-banen) en dat is precies
   wat deze links zijn: doorverwijzingen, geen acties. Bijkomend is paars donkerder
   dan roze (L* 32,9 tegen 46,2), dus het leest rustiger op het lichte paneel —
   contrast op whitesmoke ruim 7:1. Roze blijft voor échte acties ("Meld je aan").
   De kopbalk-link blijft wit; die regel staat hierboven en heeft een hogere
   specificiteit. */
/* `:not(.btn)` is essentieel. Zonder die uitsluiting geldt deze regel ook voor de
   "Meer info"-knop, en met specificiteit (0,2,1) verslaat hij de knopkleurregel
   in ozk-knoppen.css (0,2,0) — ongeacht laadvolgorde. Het gevolg was paarse tekst
   op een paars vlak: een leeg blokje (feedback Richard 4-8-2026). */
.featured-box .box-content a:not(.btn) {
    color: #663399;
}
.featured-box .box-content a:not(.btn):hover,
.featured-box .box-content a:not(.btn):focus {
    color: #522980;
}

/* Uitzondering voor de donkerblauwe variant. De regel hierboven is gemaakt voor
   de lichte kaarten (paars op whitesmoke, ruim 7:1), maar featured-box-secundary
   staat op een donkerblauwe gradient: daar haalt #663399 maar 1,75:1, gemeten op
   de gerenderde pixels. Het roze van vóór 28-08 haalde er 2,87:1 -- ook te weinig,
   dit was dus al zo. Opgelicht paars #C4A5E8 geeft 6,94:1 en houdt de kleurtaal
   van de sublinks intact. Gelijke specificiteit als de regel hierboven, dus deze
   moet erná staan. */
.featured-box-secundary .box-content a:not(.btn) {
    color: #C4A5E8;
}

.featured-box-secundary .box-content a:not(.btn):hover,
.featured-box-secundary .box-content a:not(.btn):focus {
    color: #DCC9F2;
}
.featured-box a {
    text-decoration: none;
}
.featured-box a:hover,
.featured-box a:focus {
    text-decoration: underline;
}
/* Knoptekst in een kaartje nooit onderstrepen — de regel hierboven geldt voor
   tekstlinks, een knop heeft zijn affordance al door zijn vlak. */
.featured-box .btn:hover,
.featured-box .btn:focus {
    text-decoration: none;
}

/* De knopKLEUREN die hier stonden (.featured-box .btn-primary en
   .node__content .btn-primary, beide roze) zijn op 01-08-2026 verhuisd naar
   css/ozk-knoppen.css. Daar geldt .btn-primary site-breed, dus deze twee
   scopes zijn overbodig geworden. Datzelfde bestand bevat nu ook de
   knopmaatvoering en de knoppengroep .ozk-btn-group. */

/* Lege middenkolom in de 6-3-3-secties opvullen (feedback Richard 27-07:
   "veel ruimte tussen tekst en tabel"). De huisstijl-indeling is col-lg-6
   (content) + col-lg-3 (Menu/Submenu) + col-lg-3 (o.a. de Kampen-microdata-
   infobox). Op pagina's zonder submenu — /ouders/uniek, /overons/uniek/* —
   blijft die middelste kolom leeg en gaapt er ~318px wit tussen de tekst en
   de infobox rechts. Is de middenkolom leeg (geen element-kinderen, alleen
   whitespace, dus :empty werkt niet: `:not(:has(*))`), dan klapt hij in en
   groeit de contentkolom door tot 2/3 — de infobox blijft op zijn vertrouwde
   plek rechts. Pagina's mét submenu blijven onveranderd 6-3-3. */
.layout.row.layout-builder__layout > .col-lg-3:not(:has(*)) {
    display: none;
}
/* Het groeien gaat via flex-grow, NIET via een `:has(+ …)`-buurcheck: een
   `:has()` mag per spec niet in een andere `:has()` genest worden, dus
   `.col-lg-6:has(+ .col-lg-3:not(:has(*)))` matcht nergens (getest: kolom
   bleef 570px). flex-grow pakt alleen ruimte die daadwerkelijk vrijvalt —
   staat de middenkolom er wél, dan is de rij vol en verandert er niets. De
   max-width houdt de leesregel in toom; het restje wit valt rechts van de
   infobox i.p.v. middenin. Alleen vanaf 992px: onder die grens zijn de
   kolommen col-md-12 (100% breed) en zou de max-width ze juist tot 2/3
   klemmen — dat brak de mobiele/tablet-weergave. */
@media (min-width: 992px) {
    .layout.row.layout-builder__layout > .col-lg-6 {
        flex-grow: 1;
        max-width: 66.66666667%;
    }
    .layout.row.layout-builder__layout > .col-lg-3:last-child {
        margin-left: auto;
    }
}

/* Porto theme-elements.css:4425-4438 + OZK-skinkleur — het grote ronde
   icoon links naast de tekst op de losse "waarin zijn we uniek"-subpagina's
   (/overons/uniek/*, markup `<div class="icon-featured"><span
   class="material-symbols-outlined">…</span></div>`). bario_sub had geen
   .icon-featured, dus bleef er alleen een kaal grijs glyph van 24px over
   (feedback Richard 27-07: "het icoon is echt mini"). Gemeten op D7:
   110x110 roze cirkel, wit glyph, line-height gelijk aan de cirkel zodat het
   glyph optisch centreert. Het glyph zelf expliciet op 40px: Google's
   material-symbols-stylesheet zet `font-size:24px` op .material-symbols-
   outlined en dat wint van de erfelijke 40px van de cirkel. */
.icon-featured {
    display: inline-block;
    width: 110px;
    height: 110px;
    margin: 15px;
    border-radius: 50%;
    background-color: #c13c61;
    color: #FFF;
    font-size: 40px;
    line-height: 110px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.icon-featured .material-symbols-outlined {
    font-size: 40px;
    line-height: inherit;
    vertical-align: middle;
}
/* Zelfde BS3->BS5-breakpointval als bij de kampkaartjes: de geporte markup
   gebruikt col-md-* en dat begint in Bootstrap 5 al bij 768px, in Bootstrap 3
   (D7) pas bij 992px. Gemeten op 768px: D11 zette 4 boxen van 150px op een rij
   met 2 overlopende knoppen, D7 doet daar 2 per rij van 345px. Tussen 768 en
   991px dus 2 per rij; vanaf 992px klopt de kolomindeling weer met D7 (210px,
   geen overloop). Bewust 50% voor alle varianten in dit bereik — /leiding en
   /vrienden stapelen op D7 hier volledig, maar 2 per rij leest beter en levert
   evenmin overloop. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .featured-boxes > [class*="col-md-"] { flex: 0 0 auto; width: 50%; }
}
/* Op /kampen staat de strook niet in een volle-breedte sectie maar in de
   9-koloms hoofdkolom (col-lg-9). Vier boxen halen daar ook op een breed scherm
   maar 147-181px, waarvan 60px opgaat aan box-padding — de Meer info-knop van
   120px liep er dan uit (gemeten: 2 overlopende boxen op 992px en 1280px).
   Binnen die kolom dus altijd twee per rij. */
@media (min-width: 768px) {
    .col-lg-9 .featured-boxes > [class*="col-md-"] { flex: 0 0 auto; width: 50%; }
}

/* ======================================================================== */
/* T4 — STATUSKLASSEN-FAMILIES verbatim uit D7 Porto_sub/custom_sub.css     */
/* r889-1497: REF/VOG/privacy/intake/activity/werving/evaluatie/kolommen/   */
/* aantallen/jongens-meisjes/beschikbaarheid/criteria-oordeel/deelnamestatus*/
/* ======================================================================== */

/*=======================================================================
*** REF STATUS ACTIVITY VIEWS STYLING ETC STYLE SHEET***
========================================================================*/
/* D7 custom_sub.css r897 */
div.ontbreekt {
    background-color: #cc4d00;
    color: white;
    padding: 3px;
}
/* D7 custom_sub.css r902 */
div.onbekend {
    background-color: #006E83; /* BLAUW */
    color: white;
    padding: 3px;
}
/* D7 custom_sub.css r907 */
div.bekend {
    background-color: #28881e; /* GROEN */
    color: white;
    padding: 3px;
}
/* D7 custom_sub.css r912 */
div.vragen {
    background-color: #cc4d00; /* ORANJE */
    color: white;
    padding: 3px;
}
/* D7 custom_sub.css r917 */
div.afwachting {
    background-color: #cc4d00;	/* ORANJE */
    color: white;
    padding: 3px;
}
/* D7 custom_sub.css r922 */
div.gevraagd {
    background-color: #006E83;	/* GROEN */
    color: white;
    padding: 3px;
}

/*=======================================================================
*** VOG STATUS ACTIVITY VIEWS STYLING ETC STYLE SHEET***
========================================================================*/
/* D7 custom_sub.css r932 */
div.noggoed {
    background-color: #28881e;
    color: white;
    padding: 3px;
}
/* D7 custom_sub.css r937 */
div.klaarzetten {
    background-color: #006E83;
    color: white;
    padding: 3px;
}
/* D7 custom_sub.css r942 */
div.verzocht {
    background-color: #cc4d00;
    color: white;
    padding: 3px;
}
/* D7 custom_sub.css r947 */
div.herinnerd {
    background-color: #c13c61;
    color: white;
    padding: 3px;
}
/* D7 custom_sub.css r952 */
div.ingediend {
    background-color: #cc4d00;
    color: white;
    padding: 3px;
}
/* D7 custom_sub.css r957 */
div.ontvangen {
    background-color: #28881e;
    color: white;
    padding: 3px;
}

/*=======================================================================
*** INTAKE ACTIVITY STYLES ***
========================================================================*/
/* D7 custom_sub.css r967 */
div.VOG_aanvraag {
    background-color: #5c359f; /* purple */
    color: lightgrey;
    padding: 3px;
}
/* D7 custom_sub.css r972 */
div.VOG_ontvangst {
    background-color: skyblue; /* skyblue */
    color: black;
    padding: 3px;
}

/*=======================================================================
*** INTAKE STATUS STYLESPRIVACY JA / NEE ***
========================================================================*/
/* D7 custom_sub.css r982 */
.leeg {
    background-color: #cc4d00;
    color: white;
    padding: 3px;
}
/* D7 custom_sub.css r987 */
.nee {
    background-color: #c13c61;
    color: white;
    padding: 3px;
}
/* D7 custom_sub.css r992 */
.ja {
    background-color: #28881e;
    color: white;
    padding: 3px;
}

/*=======================================================================
*** INTAKE STATUS STYLES ***
========================================================================*/
/* D7 custom_sub.css r1002 */
.noggoed {
    background-color: #28881e;
    color: white;
    padding: 3px;
}
/* D7 custom_sub.css r1008 */
.nogleeg {
    background-color: #c13c61;
    color: white;
    padding: 3px;
}
/* D7 custom_sub.css r1014 */
.ongecheckt {
    background-color: #cc4d00;
    color: white;
    padding: 3px;
}
/* D7 custom_sub.css r1020 */
.bijgewerkt {
    background-color: #28881e;
    color: white;
    padding: 3px;
}

/*=======================================================================
*** INTAKE ACTIVITY STATUS STYLING ETC STYLE SHEET***
========================================================================*/
/* D7 custom_sub.css r1030 */
div.Ingepland {
    background-color: #737373;
    color: white;
    padding: 3px;
}
/* D7 custom_sub.css r1035 */
div.Afwachting {
    background-color: #006E83;
    color: white;
    padding: 3px;
}
/* D7 custom_sub.css r1040 */
div.Herinnerd {
    background-color: #cc4d00;
    color: white;
    padding: 3px;
    white-space: nowrap;
}
/* D7 custom_sub.css r1045 */
div.Onbereikbaar {
    background-color: #c13c61;
    color: white;
    padding: 3px;
    white-space: nowrap;
}
/* D7 custom_sub.css r1050 */
div.Verlopen {
    background-color: #3C3C3B;
    color: white;
    padding: 3px;
    white-space: nowrap;
}
/* D7 custom_sub.css r1055 */
div.Bounced {
    background-color: #3C3C3B;
    color: white;
    padding: 3px;
    white-space: nowrap;
}
/* D7 custom_sub.css r1060 */
div.Afgerond {
    background-color: #28881e;
    color: white;
    padding: 3px;
    white-space: nowrap;
}
/* D7 custom_sub.css r1065 */
div.Neutraal {
    background-color: #EFEFEF;
    color: black;
    padding: 3px;
    white-space: nowrap;
}
/* D7 custom_sub.css r1070 */
div.Skyblue {
    background-color: skyblue;
    color: black;
    padding: 3px;
    white-space: nowrap;
}

/*=======================================================================
*** STYLING WERVING MEE KOMEND JAAR ***
========================================================================*/
/* D7 custom_sub.css r1080 */
.zeker-wel-mee {
    background-color: #28881e;
    color: white;
    white-space: nowrap;
}
/* D7 custom_sub.css r1085 */
.waarschijnlijk-wel {
    background-color: #28881e;
    color: white;
    white-space: nowrap;
}
/* D7 custom_sub.css r1090 */
.ik-weet-het-nog-niet {
    background-color: #cc4d00;
    color: white;
    white-space: nowrap;
}
/* D7 custom_sub.css r1095 */
.waarschijnlijk-niet {
    background-color: #cc4d00;
    color: white;
    white-space: nowrap;
}
/* D7 custom_sub.css r1100 */
.zeker-niet-mee {
    background-color: #cc4d00;
    color: white;
    white-space: nowrap;
}

/*=======================================================================
*** STYLING SCORE EVALUATIE ***
========================================================================*/
/* D7 custom_sub.css r1110 */
.uitstekend {
    background-color: #28881e;
    color: white;
    white-space: nowrap;
}
/* D7 custom_sub.css r1115 */
.zeergoed {
    background-color: #28881e;
    color: white;
    white-space: nowrap;
}
/* D7 custom_sub.css r1120 */
.goed {
    background-color: #676767;
    color: #EFEFEF;
    white-space: nowrap;
}
/* D7 custom_sub.css r1125 */
.neutraal {
    background-color: #676767;
    color: #EFEFEF;
    white-space: nowrap;
}
/* D7 custom_sub.css r1130 */
.kanbeter {
    background-color: #cc4d00;
    color: white;
    white-space: nowrap;
}
/* D7 custom_sub.css r1135 */
.nietzogoed {
    background-color: #c13c61;
    color: white;
    white-space: nowrap;
}
/* D7 custom_sub.css r1140 */
.slecht {
    background-color: #c13c61;
    color: white;
    white-space: nowrap;
}
/* D7 custom_sub.css r1146 */
.views-field.een {
    background-color: #c13c61;
    color: white;
    white-space: nowrap;
}
/* D7 custom_sub.css r1151 */
.views-field.twee {
    background-color: #c13c61;
    color: white;
    white-space: nowrap;
}
/* D7 custom_sub.css r1156 */
.views-field.drie {
    background-color: #c13c61;
    color: white;
    white-space: nowrap;
}
/* D7 custom_sub.css r1161 */
.views-field.vier {
    background-color: #c13c61;
    color: white;
    white-space: nowrap;
}
/* D7 custom_sub.css r1166 */
.views-field.vijf {
    background-color: #c13c61;
    color: white;
    white-space: nowrap;
}
/* D7 custom_sub.css r1171 */
.views-field.zes {
    background-color: #cc4d00;
    color: white;
    white-space: nowrap;
}
/* D7 custom_sub.css r1181 */
.views-field.acht {
    background-color: #676767;
    color: #EFEFEF;
    white-space: nowrap;
}
/* D7 custom_sub.css r1186 */
.views-field.negen {
    background-color: #28881e;
    color: white;
    white-space: nowrap;
}
/* D7 custom_sub.css r1191 */
.views-field.tien {
    background-color: #28881e;
    color: white;
    white-space: nowrap;
}
/* D7 custom_sub.css r1196 */
.teweinig {
    background-color: #cc4d00;
    color: white;
    white-space: nowrap;
}
/* D7 custom_sub.css r1201 */
.teveel {
    background-color: #cc4d00;
    color: white;
    white-space: nowrap;
}
/* D7 custom_sub.css r1206 */
.preciesgoed {
    background-color: #28881e;
    color: white;
    white-space: nowrap;
}

/*=======================================================================
========================================================================*/

/* D7 custom_sub.css r1215 */
th.jongens {
    background-color: #006E83;
    color: white;
    padding: 2px;
}
/* D7 custom_sub.css r1220 */
th.meisjes {
    background-color: #c13c61;
    color: white;
    padding: 2px;
}
/* D7 custom_sub.css r1225 */
.jongens {
    background-color: #006E83;
    color: white;
}
/* D7 custom_sub.css r1229 */
.meisjes {
    background-color: #c13c61;
    color: white;
}

/*=======================================================================
*** BESCHIKBAARHHEID STATUS STYLES [VOOR OUDERS] ***
========================================================================*/
/* De horizontale ruimte in deze badges is 1 aug 2026 van 3px naar 10px gegaan
   (verzoek Richard): op de aanmeldpagina plakten 'helaas vol' en 'wachtlijst'
   tegen de rand van hun cel. Alleen links/rechts — de 3px boven/onder blijft,
   zodat de rijhoogte van de weektabel niet verandert (gemeten 28px). */
/* D7 custom_sub.css r1238 */
/* WAARSCHIJNLIJK DODE CODE (onderzocht 2 aug 2026). De class wordt gezet door
   views.view.beschikbaarheid_zomerkampen, veld plekken_jongens_658_1 — dat is
   het label getrimd op woordgrens, max 8 tekens. Het label is "nog niet open"
   (drie woorden), dus de class wordt `nog`, nooit `nognietopen`. Zelfde geldt
   voor div.voorbij en div.geannuleerd: "voorbij" is geen uitkomst van
   _event_derive_capacity() (nl.onvergetelijk.event/event.php:87-97), en
   "geannuleerd" is één woord van 11 tekens en trimt naar leeg.
   NIET verwijderd omdat het niet met zekerheid vast te stellen is zonder de
   optielabels van optiegroep 414 zelf te controleren — wél leesbaar gemaakt,
   zodat een onverwachte render geen witte tekst op wit oplevert. */
div.nognietopen {
    background-color: whitesmoke;
    color: #3C3C3B;
    padding: 3px 10px;
}
/* De class komt uit veld [plekken_*_1] = 1e woord van het label, afgekapt op 8
   tekens. "nog niet open" wordt daardoor class="nog", "nog plek" wordt
   class="nog plek". Vandaar :not(.plek) — anders kleurt "nog plek" ook blauw. */
div.nog:not(.plek) {
    background-color: #006E83;
    color: white;
    padding: 3px 10px;
}
/* D7 zet element_class 'nowrap' op deze velden; op D11 ontbreekt dat, waardoor
   "nog niet open" over twee regels afbrak. */
td.views-field-plekken-jongens-658,
td.views-field-plekken-meisjes-657 {
    white-space: nowrap;
}
/* D7 custom_sub.css r1243 */
div.nogplek {
    background-color: #28881e;
    color: white;
    padding: 3px 10px;
}
/* D7 custom_sub.css r1248 */
div.plek {
    background-color: #28881e;
    color: white;
    padding: 3px 10px;
}
/* D7 custom_sub.css r1253 */
div.beschikbaar {
    background-color: #28881e;
    color: white;
    padding: 3px 10px;
}
/* D7 custom_sub.css r1258 */
div.bijnavol {
    background-color: #28881e;
    color: white;
    padding: 3px 10px;
}
/* D7 custom_sub.css r1268 */
div.vol {
    background-color: #c13c61;
    color: white;
    padding: 3px 10px;
}
/* D7 custom_sub.css r1273 */
/* Tekst wit i.p.v. zwart: zwart op #3C3C3B is 1,3:1 — praktisch onleesbaar.
   Zie de notitie bij div.nognietopen hierboven over de renderkans. */
div.geannuleerd {
    background-color: #3C3C3B;
    color: white;
    padding: 3px 10px;
}
/* D7 custom_sub.css r1278 */
/* Tekst zwart i.p.v. wit: wit op lightgrey is 1,6:1. Zie idem. */
div.voorbij {
    background-color: lightgrey;
    color: black;
    padding: 3px 10px;
}

/*=======================================================================
*** BESCHIKBAARHHEID STATUS STYLES [VOOR OUDERS] ***
========================================================================*/
/* D7 custom_sub.css r1288 */
td.nog-niet-open {
    background-color: #6B6B6B;
    color: white;
    padding: 3px 10px;
}
/* D7 custom_sub.css r1293 */
td.nog-plek {
    background-color: #28881e;
    color: white;
    padding: 3px 10px;
}
/* D7 custom_sub.css r1298 */
td.plek {
    background-color: #28881e;
    color: white;
    padding: 3px 10px;
}
/* D7 custom_sub.css r1303 */
td.beschikbaar {
    background-color: #28881e;
    color: white;
    padding: 3px 10px;
}
/* D7 custom_sub.css r1308 */
td.bijna-vol {
    background-color: #46A748;
    color: white;
    padding: 3px 10px;
}
/* D7 custom_sub.css r1318 */
td.helaas-vol {
    background-color: #c13c61;
    color: white;
    padding: 3px 10px;
}
/* D7 custom_sub.css r1323 */
td.vol {
    background-color: #c13c61;
    color: white;
    padding: 3px 10px;
}
/* D7 custom_sub.css r1328 */
td.geannuleerd {
    background-color: dimgray;
    color: lightgrey;
    padding: 3px 10px;
}

/*=======================================================================
*** LEEFTIJD CRITERIA STYLES ***
========================================================================*/
/* D7 custom_sub.css r1338 */
.Prima {
    background-color: #28881e;
    color: white;
    white-space: nowrap;
    padding: 4px;
}
/* D7 custom_sub.css r1344 */
.prima {
    background-color: #28881e;
    color: white;
    white-space: nowrap;
    padding: 4px;
}
/* D7 custom_sub.css r1351 */
.Marge {
    background-color: #006E83;
    color: white;
    white-space: nowrap;
    padding: 4px;
}
/* D7 custom_sub.css r1357 */
.marge {
    background-color: #006E83;
    color: white;
    white-space: nowrap;
    padding: 4px;
}
/* D7 custom_sub.css r1364 */
.Afwijkend {
    background-color: #c13c61;
    color: white;
    white-space: nowrap;
    padding: 4px;
}
/* D7 custom_sub.css r1370 */
.afwijkend {
    background-color: #c13c61;
    color: white;
    white-space: nowrap;
    padding: 4px;
}

/*=======================================================================
*** LEEFTIJD CRITERIA STYLES *** [INDICATIE]
========================================================================*/
/* D7 custom_sub.css r1381 */
.noggeenindicatie {
    background-color: #c13c61;
    color: white;
    white-space: nowrap;
    padding: 4px;
}
/* D7 custom_sub.css r1387 */
.criteriaprima {
    background-color: #28881e;
    color: white;
    white-space: nowrap;
    padding: 4px;
}
/* D7 custom_sub.css r1393 */
.criteriawijktaf {
    background-color: #c13c61;
    color: white;
    white-space: nowrap;
    padding: 4px;
}
/* D7 custom_sub.css r1399 */
.binnenmarges {
    background-color: #006E83;
    color: white;
    white-space: nowrap;
    padding: 4px;
}
/* D7 custom_sub.css r1405 */
.leeftijdwijktaf {
    background-color: #cc4d00;
    color: white;
    white-space: nowrap;
    padding: 4px;
}
/* D7 custom_sub.css r1411 */
.schoolwijktaf {
    background-color: #cc4d00;
    color: white;
    white-space: nowrap;
    padding: 4px;
}

/*=======================================================================
*** LEEFTIJD CRITERIA STYLES *** [BEOORDELING]
========================================================================*/
/* D7 custom_sub.css r1422 */
.oordeelnietnodig {
    background-color: #006E83;
    color: white;
    white-space: nowrap;
    padding: 4px;
}
/* D7 custom_sub.css r1428 */
.oordeelnognodig {
    background-color: #cc4d00;
    color: white;
    white-space: nowrap;
    padding: 4px;
}
/* D7 custom_sub.css r1434 */
.oordeelbuitencriteria {
    background-color: #c13c61;
    color: white;
    white-space: nowrap;
    padding: 4px;
}
/* D7 custom_sub.css r1440 */
.oordeelprima {
    background-color: #28881e;
    color: white;
    white-space: nowrap;
    padding: 4px;
}
/* D7 custom_sub.css r1446 */
.leeftijdechttejong {
    background-color: #000000;
    color: white;
    white-space: nowrap;
    padding: 4px;
}
/* D7 custom_sub.css r1452 */
.leeftijdechtteoud {
    background-color: #000000;
    color: white;
    white-space: nowrap;
    padding: 4px;
}

/*=======================================================================
*** DEELNAMESTATUS ***
========================================================================*/
/* D7 custom_sub.css r1463 */
div.Geregistreerd{
    background-color: #28881e;
    color: white;
    padding: 3px;
}
/* D7 custom_sub.css r1468 */
div.Bevestigd{
    background-color: #28881e;
    color: white;
    padding: 3px;
}
/* D7 custom_sub.css r1478 */
div.Voorheen {
    background-color: #28881e;
    color: white;
    padding: 3px;
}
/* D7 custom_sub.css r1483 */
div.Criteriacheck {
    background-color: #cc4d00;
    color: white;
    padding: 3px;
}
/* D7 custom_sub.css r1488 */
div.Afwachting {
    background-color: #cc4d00;
    color: white;
    padding: 3px;
}
/* D7 custom_sub.css r1493 */
div.Geannuleerd {
    background-color: dimgray;
    color: lightgrey;
    padding: 3px;
}

/* ======================================================================== */
/* Kampkaarten: kader-look verbatim uit D7 custom_sub.css r1720-1750        */
/* ======================================================================== */
/* .kaderwrap/.kaderbox-layout is verhuisd naar css/ozk-kaarten.css (theme-groep,
   weight 101) — de enige eigenaar van de kaartlayout. De oude regels hier
   (-10px wrap-marge, padding alleen links + nth-child-compensatie) maakten de
   eerste kaart van elke rij 10px breder dan de rest; zie de kop van dat bestand. */
.kaderbox a {
    text-decoration: none;
    color        : inherit;
}
.kader {
    /* padding is hier weggehaald: de kaartlayout (padding/hoogte/breedte) is
       eigendom van css/ozk-kaarten.css (theme-groep, weight 101). */
    border       : solid 1px lightgrey;
    background-color: rgba(192, 192, 192, 0.1);
}
.kader a {
    text-decoration: none;
    color        : inherit;
}
.kader:hover {
    background-color: rgba(192, 192, 192, 0.25);
}
/* de hele kaart is op D11 één link (make_link) — geen onderstreping/blauw */
.views-field .field-content > a:has(.kader),
a .kader, a .kaderbox, .kaderbox h3, .kader h3 {
    text-decoration: none !important;
    color        : inherit;
}

/* == Intake-voortgangsbalken (intake_dash *_graph) ==
   Porto theme-elements.css r6588-6594 (.progress), r6629-6634 (.progress-bar),
   r6668-6682 (kleuren) + Bootstrap3-basis (float/height/line-height) die in
   D7 uit Porto's bootstrap kwam. Breedte komt op D11 uit inline style
   (width: N%) in de views-alter; D7 animeerde via Porto's
   data-appear-progress-animation-JS die hier niet bestaat. */
.progress {
	border-radius: 25px;
	height: 20px;
	background: #FAFAFA;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
	overflow: visible;
	margin-bottom: 15px;
}
.progress-bar {
	float: left;
	height: 100%;
	font-size: 12px;
	line-height: 20px;
	text-align: center;
	background-color: #CCC;
	box-shadow: none;
	position: relative;
	border-radius: 25px;
	transition: width .6s ease;
}
.progress-bar.progress-bar-success { --bs-progress-bar-bg: #47a447; background-color: #47a447; color: #FFF; }
.progress-bar.progress-bar-warning { --bs-progress-bar-bg: #ed9c28; background-color: #ed9c28; color: #FFF; }
.progress-bar.progress-bar-danger  { --bs-progress-bar-bg: #d2322d; background-color: #d2322d; color: #FFF; }

/* ======================================================================== */
/* ### FLIPPED-INFOBLOKKEN: geen kolomheader (block_bestuur, intra_leid,     */
/*     contributions:blk_declaraties_totaal sinds 14-10-2026)               */
/*     D7 toonde deze label:waarde-blokjes (INTRANET BESTUUR, AANMELDING     */
/*     2026) zonder grijze kop-rij. views_flipped_table zet de veldlabels    */
/*     als thead; hier onderdrukt op de betreffende displays.                */
/* ======================================================================== */
.view-civicrm-participant.view-display-id-block_bestuur thead,
.view-civicrm-participant.view-display-id-intra_leid thead,
.view-civicrm-participant.view-display-id-block_2 thead,
.view-contributions.view-display-id-blk_declaraties_totaal thead {
    display: none;
}

/* Zelfde infoblokken: de label-kolom (flipped_table zet labels als
   th scope="row") kreeg Barrio's site-brede donkere th-achtergrond
   (bootstrap_barrio/css/components/table.css: rgba(0,0,0,.51) + wit).
   Gewenst: gewoon leeg, zoals de rest van het blokje. */
.view-civicrm-participant.view-display-id-block_bestuur tbody th,
.view-civicrm-participant.view-display-id-intra_leid tbody th,
.view-civicrm-participant.view-display-id-intra_leid_kleur tbody th,
.view-civicrm-participant.view-display-id-intra_leid_letter tbody th,
.view-civicrm-participant.view-display-id-block_2 tbody th,
.view-contributions.view-display-id-blk_declaraties_totaal tbody th {
    background: transparent;
    color: inherit;
}

/* Zelfde infoblokken: flipped_table zet de <table> DIRECT in .view-content
   (Bootstrap .row, negatieve guttermarge -12px) zonder de .col-wrapper die
   gewone views-tabellen wel hebben (vgl. BETALINGEN DIT JAAR: .table-responsive
   .col compenseert daar de -12px). De infotabel stak daardoor 12px uit aan
   beide kanten t.o.v. de boxheader. Row-marge hier neutraliseren. */
.view-civicrm-participant.view-display-id-block_bestuur .view-content.row,
.view-civicrm-participant.view-display-id-intra_leid .view-content.row,
.view-civicrm-participant.view-display-id-intra_leid_kleur .view-content.row,
.view-civicrm-participant.view-display-id-intra_leid_letter .view-content.row,
.view-civicrm-participant.view-display-id-block_2 .view-content.row,
.view-contributions.view-display-id-blk_declaraties_totaal .view-content.row,
.view-event-kenmerken .view-content.row {
    margin-left:  0;
    margin-right: 0;
}

/* ======================================================================== */
/* ### ZOOMPAGINA'S (flipped table, klasse third-width)                      */
/*     D7 custom_sub.css:178: label 30%, waarde 70%. Op D11 zet             */
/*     views_flipped_table het label als th scope="row" in plaats van de    */
/*     eerste td, dus hier op de th. Automatische tabelopbouw zoals op D7:  */
/*     op mobiel groeit de labelkolom mee met een lang label (D7 ~42% op    */
/*     390px). De kopregels (KAMP CV, INTAKE, BIO...) dragen klasse         */
/*     "zeven" op cel en label en worden grijs via .views-field.zeven.      */
/* ======================================================================== */
table.third-width {
    width: 100%;  /* ook bij korte inhoud de volle breedte, zoals .table op D7 */
}
table.third-width > tbody > tr > th[scope="row"] {
    width: 30%;
}
table.third-width > tbody > tr > td {
    width: 70%;
    overflow-wrap: anywhere;  /* lange e-mailadressen; alleen de waardecel, zodat de labelkolom zijn breedte houdt */
}
/* Telefoonrij: de rewrite zet het nummer in div.left en het whatsapp-icoon
   in div.right met inline float, maar Drupal filtert style-attributen uit
   een views-rewrite. Hier de float terug, zodat het icoon rechts staat. */
table.third-width td > div.left {
    float: left;
}
table.third-width td > div.right {
    float: right;
}
/* flipped_table zet de <table> direct in .view-content.row (Bootstrap,
   gutter -12px); zonder deze regel steekt de tabel 12px buiten de
   boxheader uit. Zelfde oorzaak als bij de infoblokken hierboven.
   width: .view-content.row krijgt anders de breedte van zijn inhoud, en een
   zoom met korte waarden werd op mobiel maar half zo breed als de kop. */
.view-content.row:has(> table.third-width) {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}
/* Kopregels in zoomtabellen: .views-field.zeven zet white-space:nowrap (voor de
   beschikbaarheidskaarten); in een zoomtabel moet een lange kopwaarde gewoon
   afbreken, anders scrolt de pagina op mobiel horizontaal. */
table.third-width .views-field.zeven {
    white-space: normal;
}

/* Intakestatus (NAW/BIO/REF/VOG): de rewrite zet datum en "nodig"-waarde
   in .flex-parent > .flex-child. Datum links, nodig-waarde rechts op één
   regel; past het niet (smalle lijstkolom), dan wrapt het naar twee regels. */
.flex-parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 1em;
}

/* ======================================================================== */
/* ### EVENT-KENMERKEN / VACATURES TABELLEN (o.a. vacatures_perkamp)         */
/*     Barrio's bootstrap_barrio/css/components/table.css zet standaard een  */
/*     zware donkergrijze achtergrond (rgba(0,0,0,0.51) + wit) op alle <th>  */
/*     en grijze zebra-achtergrond op tr. In views_flipped_table zet dit elk */
/*     rij-label zwaar donkergrijs. Hier hersteld naar een lichte, frisse    */
/*     tabelweergave conform D7 (transparante rijen, subtiele randen).       */
/* ======================================================================== */
.view-event-kenmerken table {
    background-color: transparent;
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    margin-bottom: 1.5rem;
}

.view-event-kenmerken table tr,
.view-event-kenmerken table tr.odd,
.view-event-kenmerken table tr.even {
    background: transparent;
    border-bottom: 1px solid #e9ecef;
}

.view-event-kenmerken table tbody tr:hover {
    background-color: #f8f9fa;
}

.view-event-kenmerken table thead > tr {
    border-bottom: 2px solid #dee2e6;
}

.view-event-kenmerken table thead th {
    background: transparent;
    color: var(--bs-body-color, #212529);
    font-weight: 700;
    border: none;
    border-bottom: 2px solid #dee2e6;
    padding: 8px 12px;
    width: 50%;
}

.view-event-kenmerken table tbody th {
    background: transparent;
    color: var(--bs-body-color, #212529);
    font-weight: 600;
    border: none;
    border-bottom: 1px solid #e9ecef;
    padding: 8px 12px;
    width: 50%;
}

.view-event-kenmerken table tbody td {
    background: transparent;
    color: var(--bs-body-color, #212529);
    border: none;
    border-bottom: 1px solid #e9ecef;
    padding: 8px 12px;
    width: 50%;
}

/* ======================================================================== */
/* ### PIE-CHARTS COMPACTER (bestuur-dashboard): niet volle kolombreedte     */
/*     chart.js pie op width:100% + 300px hoog wordt in de brede             */
/*     bestuurskolom enorm; begrens de containerbreedte zoals D7.            */
/* ======================================================================== */
.view-aanmeldingen-charts.view-display-id-chart_d_geslacht canvas,
.view-aanmeldingen-charts.view-display-id-chart_d_eerst_vaker canvas,
.view-aanmeldingen-charts.view-display-id-chart_d_week12 canvas {
    max-width: 340px;
    margin: 0 auto;
}

/* ======================================================================== */
/* T4-aanvulling — button-/box-varianten verbatim uit D7                  */
/* Porto_sub/custom_sub.css r1523-1811                                      */
/* a.button.skyblue-varianten, social-loginkleuren, box-knoppenfamilie,     */
/* .spacer. .boxbig, a.button(.ongecheckt/.bijgewerkt), .grijs, .skyblue,   */
/* .whitesmoke en .indent zijn al eerder geport.                            */
/* ======================================================================== */

/* D7 custom_sub.css r1523-1525 */
.spacer {
    margin-top: 10px !important;
}

/* D7 custom_sub.css r1575-1580 */
a.button.skyblue:link {
    color: black !important;
    background-color: skyblue !important;
    border-color: skyblue !important;
}

/* D7 custom_sub.css r1581-1586 */
a.button.skyblue:visited {
    color: black !important;
    background-color: skyblue !important;
    border-color: skyblue !important;
}

/* D7 custom_sub.css r1587-1593 */
a.button.skyblue:hover {
    opacity: 0.8;
    color: black !important;
    background-color: skyblue !important;
    border-color: black !important;
}

/* D7 custom_sub.css r1594-1600 */
a.button.skyblue:active {
    color: black !important;
    background-color: skyblue !important;
    border-color: white !important;
}

/* D7 custom_sub.css r1602-1606 */
.googlered {
    background: #DB4437 !important;
    background-color: #DB4437 !important;
    color: white !important;
}

/* D7 custom_sub.css r1607-1611 */
.facebookblue {
    background: #3B5998 !important;
    background-color: #3B5998 !important;
    color: white !important;
}

/* D7 custom_sub.css r1689-1702 */
button.box {
    width: 100%;
    margin: 0 0 10px 0;
    padding: 20px 5px 20px 5px;
    font-family: Rambla, Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-align: center;
    outline: none;
    border: none;
    border-radius: 0;
}

/* D7 custom_sub.css r1704-1706 */
button.box.disabled {
    background: #EFEFEF;
}

/* D7 custom_sub.css r1750-1765 */
.box {
    width: 100%;
    padding: 20px 5px 20px 5px;
    font-family: Rambla, Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-align: center;
    outline: none;
    border: none;
    border-radius: 0;
}

/* D7 custom_sub.css r1771-1773 */
div.divbox.boxbtn {
    cursor: pointer !important;
}

/* D7 custom_sub.css r1774-1776 */
divbox.boxbtn {
    cursor: pointer !important;
}

/* D7 custom_sub.css r1778-1781 */
.boxmega {
    padding: 20px 10px 20px 10px !important;
    font-size: 21px !important;
}

/* D7 custom_sub.css r1782-1785 */
.boxhuge {
    padding: 12px 6px 12px 6px !important;
    font-size: 18px !important;
}

/* D7 custom_sub.css r1791-1794 */
.boxblock {
    display: block;
    width: 100%;
}

/* D7 custom_sub.css r1806-1808 */
button.box.forbidden {
    cursor: not-allowed !important;
}

/* D7 custom_sub.css r1809-1811 */
button.box.nopointer {
    cursor: default !important;
}

/* ===========================================================================
 * BLOG-TEASER (overal): teaser-kaarten onder elkaar (D7-stijl). Badge +
 * titel staan samen in ÉÉN flex-rij (.ozk-blog-teaser-title-row, opgebouwd
 * in bario_sub_preprocess_node()) in de <header>; headerfoto en bodytekst
 * volgen daaronder in .node__content — dus altijd badge+titel op 1 regel,
 * beeld/tekst pas erna. Bewust NIET scoped op `.view-blog`: dezelfde teaser
 * (view_mode=teaser) van de blog-view komt ook los voor op taxonomie-
 * termpagina's (bv. `/tags/kinderkamp`, core-view "taxonomy_term"), en moet
 * daar identiek ogen — vandaar scope op de node-classes zelf.
 * ========================================================================= */
.node--type-article.node--view-mode-teaser {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.15s ease;
}
.node--type-article.node--view-mode-teaser:hover {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}
/* Headerfoto + tekst onder de titelrij.
   LET OP: Drupal-core (via bootstrap_barrio/css/components/field.css) zet
   vanaf 560px breed `.node .field--type-image { float: left }` — daardoor
   krimpt deze div (floated + width:auto) mee met de intrinsieke breedte van
   de <img>, en komt de teaser-tekst er rechts naast in plaats van eronder.
   `float: none` hier is dus noodzakelijk, niet optioneel. */
.node--type-article.node--view-mode-teaser .field--name-field-image {
    float: none;
    width: 100%;
    margin: 0.75rem 0;
}
.node--type-article.node--view-mode-teaser .field--name-field-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}
.node--type-article.node--view-mode-teaser .node__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}
.node--type-article.node--view-mode-teaser .node__title a {
    text-decoration: none;
}
.node--type-article.node--view-mode-teaser .node__title a:hover {
    text-decoration: underline;
}
.node--type-article.node--view-mode-teaser .field--name-body {
    color: #444;
    margin: 0.75rem 0 0.5rem;
}

/* Titel + datum-badge in de teaser: samen op 1 regel, badge iets kleiner dan
   op de volledige blogpagina. Lange titels krijgen een ellipsis i.p.v. een
   tweede regel, zodat de rij altijd 1 regel blijft. */
.ozk-blog-teaser-title-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.ozk-blog-teaser-title-row .ozk-date-badge {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 5px;
}
.ozk-blog-teaser-title-row .ozk-date-badge__day {
    font-size: 0.95rem;
}
.ozk-blog-teaser-title-row .ozk-date-badge__month {
    font-size: 0.6rem;
}
.ozk-blog-teaser-title-row__text {
    min-width: 0;   /* nodig zodat text-overflow werkt in een flex-item */
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.node--type-article.node--view-mode-teaser .node__title a:hover .ozk-blog-teaser-title-row__text {
    color: #c13c61;
}

/* De vierkante datum-badge zelf (gedeeld door teaser + volledig blog). */
.ozk-date-badge {
    width: 52px;
    height: 52px;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    line-height: 1;
    text-align: center;
}
.ozk-date-badge__day {
    flex: 0 0 58%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #c13c61;
    font-size: 1.35rem;
    font-weight: 700;
}
.ozk-date-badge__month {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #c13c61;
    color: #ffffff;
    font-size: 0.78rem;
    text-transform: lowercase;
}
/* Op het VOLLEDIGE blog: badge links NAAST de paginatitel (in de page-title
   gezet door ozk_blogs_preprocess_page_title). Flex-rij zodat de badge links
   staat en de titel ernaast, ongeacht titellengte of breakpoint. */
.ozk-blog-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.ozk-blog-title-row .ozk-date-badge {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
}
.ozk-blog-title-row__text {
    min-width: 0;   /* lange titels mogen binnen de flex-rij wrappen */
}
/* De <h1> zit nu IN de flex-rij; zijn eigen ondermarge zou de auteursregel
   ervan losduwen. De ruimte onder het geheel zet de rij zelf. */
.ozk-blog-title-row__text > h1.title {
    margin-bottom: 0;
}
.ozk-blog-title-row {
    margin-bottom: 1rem;
}
.ozk-blog-title-row .ozk-date-badge__day {
    font-size: 1.55rem;
}

/* Regel onder de blogtitel: "Geplaatst door <voornaam> op <datum>". De badge
   links van de titel toont alleen dag en maand, dus zonder deze regel is het
   jaar van een blog nergens te zien. Rustig gezet: het is bijschrift, geen kop.
   Zie _ozk_blogs_auteursregel() in ozk_blogs.module. */
.ozk-blog-meta {
    /* Zit in .ozk-blog-title-row__text, direct onder de <h1>: geen eigen
       inspringing nodig, de flex-rij regelt de plek naast de badge. */
    margin      : 0.3rem 0 0;
    font-size   : 0.85rem;
    line-height : 1.3;
    color       : var(--ozk-grijs, #3c3c3b);
    opacity     : 0.85;
}

/* Sidebar-lijstjes ("Laatste blogs" / "Even bladeren"): datum-badge vóór elke
   regel, compacte variant. Badge links, titel-link ernaast, verticaal
   gecentreerd. */
.ozk-blog-sidebar-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ozk-blog-sidebar-row .ozk-date-badge {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 4px;
}
.ozk-blog-sidebar-row .ozk-date-badge__day {
    font-size: 0.82rem;
}
.ozk-blog-sidebar-row .ozk-date-badge__month {
    font-size: 0.5rem;
}

/* Blog-sidebarblokken (Meedoen-CTA, Laatste blogs, Even bladeren, Meer
   blogs): geen beige kaartje. bootstrap_barrio's kleurenschema geeft ELK
   blok in een `.sidebar`-regio standaard `.sidebar .block { background-
   color: #f6f6f2 }` (colors.css) — dat globaal weghalen raakt ook andere
   sidebars op de site, dus hier alleen voor onze 4 blog-blokken overruled. */
#block-ozkblog-cta,
#block-ozkblog-laatste,
#block-ozkblog-random,
#block-ozkblog-tags {
    background-color: transparent;
    border-color: transparent;
}

/* 2x2 grid voor de USP-kaartjes op partnerpagina's, ook op mobiel. */
.landing-usps-grid > .col-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
}

@media (max-width: 575.98px) {
    .landing-usps-grid .featured-box .box-content {
        padding: 12px 10px !important;
    }
    .landing-usps-grid .featured-box h4 {
        font-size: 0.88rem !important;
        margin-bottom: 4px !important;
        line-height: 1.25 !important;
    }
    .landing-usps-grid .featured-box h4 svg {
        width: 18px !important;
        height: 18px !important;
    }
    .landing-usps-grid .featured-box p {
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
    }
}

/* Declaraties dit jaar op /account (contributions:blk_declaraties_totaal): bedragen rechts
   uitgelijnd, verzoek Richard 14-10-2026. */
.view-contributions.view-display-id-blk_declaraties_totaal tbody td {
  text-align: right;
}