/*!
 * KOOS — basis stylesheet
*/

:root {

    /*
     * Merkkleuren — officiële KOOS-huisstijl.
     */
    --koos-blauw-rgb:        0, 151, 220;    /* #0097DC */
    --koos-oranje-rgb:       239, 125, 26;   /* #EF7D1A */
    --koos-groen-rgb:        151, 188, 75;   /* #97BC4B */
    --koos-roze-rgb:         213, 122, 171;  /* #D57AAB */

    --koos-blauw:            rgb(var(--koos-blauw-rgb));
    --koos-oranje:           rgb(var(--koos-oranje-rgb));
    --koos-groen:            rgb(var(--koos-groen-rgb));
    --koos-roze:             rgb(var(--koos-roze-rgb));

    --koos-blauw-tint:       #7AC3ED;   /* inputranden, footerkoppen */
    --koos-blauw-radio:      #0997DC;   /* radio-ring zoekbox */
    --koos-navy:             #3C64B1;   /* chevrons */
    --koos-sky:              #79CEEF;   /* mascotte-accent */
    --koos-groen-2:          #91C04F;
    --koos-groen-mint:       #C9DDA4;   /* mascotte-accent */
    --koos-oranje-tint:      #F8BA85;
    --koos-groen-tint:       #C9D8A0;
    --koos-roze-tint:        #E6B9D4;

    --koos-blauw-donker:     #0080BB;
    --koos-oranje-donker:    #CB6A16;
    --koos-groen-donker:     #80A040;

    /*
     * Deze vier waren dekkende kleuren (#E0F3FB en familie). In de prototypes
     * is elk lichtvlak doorschijnend, en een dekkende variant leest merkbaar
     * harder en blauwer. Ze wijzen nu naar de tints hierboven, zodat ook de
     * blokken die deze namen nog gebruiken -- de banden van kaarten en
     * afbeelding+tekst, de tarieventabel, de locatiekaarten, het tekstblok en
     * de zijkaart op een vacature -- vanzelf goedkomen.
     */
    --koos-blauw-licht:      var(--koos-tint-blauw);
    --koos-groen-licht:      var(--koos-tint-groen);
    --koos-roze-licht:       var(--koos-tint-roze);
    /* Het ontwerp kent geen oranje tint; deze blijft zoals hij was. */
    --koos-oranje-licht:     #FDEFE4;

    --koos-wit:              #FFFFFF;
    --koos-zwart:            #1D1D1B;
    --koos-tekst:            #707070;
    --koos-tekst-zacht:      #707070;
    --koos-placeholder:      #707070;   /* placeholdertekst in alle velden */
    --koos-ink:              #42454A;   /* mascottelijnen */
    --koos-lijn:             #E2E5E6;   /* kaartrand */
    --koos-grijs-licht:      #F7F7F5;
    --koos-invulveld:        #F4F5F4;   /* vulling zoekveld */
    --koos-mist:             #F3F6FB;   /* topbalk */

    /*
     * Sectietinten uit het design system. De alpha's zijn exact zoals in
     * KOOS.fig; niet afronden, anders verschuift de bandkleur zichtbaar.
     */
    --koos-tint-blauw:        rgba(122, 195, 237, 0.149);
    --koos-tint-groen:        rgba(201, 216, 160, 0.2);
    --koos-tint-groen-licht:  rgba(201, 216, 160, 0.149);
    --koos-tint-groen-sterk:  rgba(201, 216, 160, 0.4);
    --koos-tint-roze:         rgba(230, 185, 212, 0.2);
    /* Gemeten in Ervaringen.dc.html: KOOS-roze op 14,9%, niet roze-zacht. */
    --koos-tint-roze-sterk:   rgba(213, 122, 171, 0.149);

    --koos-kleur-tekst:      var(--koos-tekst);
    --koos-kleur-link:       var(--koos-blauw);
    --koos-kleur-link-hover: var(--koos-blauw-donker);
    --koos-kleur-kop:        var(--koos-groen);

    /*
     * Het ontwerp gebruikt overal Montserrat Alternates. Mulish komt alleen
     * in de zoekbalk voor. De oude aliassen 'Montserrat-Bold' en
     * 'Montserrat-Semi-Bold' in style.css wijzen naar losse TTF-bestanden;
     * hier sturen we in plaats daarvan op font-weight, zodat de browser de
     * juiste snede uit dezelfde familie pakt.
     */
    --koos-font-kop:  'Montserrat Alternates', Helvetica, Arial, sans-serif;
    --koos-font-semi: 'Montserrat Alternates', Helvetica, Arial, sans-serif;
    --koos-font-body: 'Montserrat Alternates', Helvetica, Arial, sans-serif;
    --koos-font-zoek: 'Mulish', 'Montserrat Alternates', Helvetica, Arial, sans-serif;
    /* Montserrat (niet Alternates) -- de briefing gebruikt hem alleen voor tags. */
    --koos-font-tag:  'Montserrat Tag', 'Montserrat Alternates', Helvetica, Arial, sans-serif;

    --koos-font-size-body: 15px;
    --koos-lineheight-body: 1.4667;   /* 15/22 */
    --koos-lineheight-kop: 1.2222;    /* 36/44 */
    --koos-letterspacing: 0.01em;


    /*
     * Het design system kent maar drie radii: 30 voor kaarten, knoppen,
     * inputs, panelen en grote foto's, 20 voor tegelfoto's en de zoekbalk,
     * en 2 voor de avatar. De oude namen blijven staan zodat de bestaande
     * regels blijven werken.
     */
    --koos-radius-kaart:  30px;
    --koos-radius-tegel:  20px;
    --koos-radius-avatar: 2px;

    --koos-radius-klein:  var(--koos-radius-kaart);
    --koos-radius:        var(--koos-radius-kaart);
    --koos-radius-groot:  var(--koos-radius-kaart);
    --koos-radius-pil:    var(--koos-radius-kaart);
    --koos-radius-locaties: var(--koos-radius-kaart);

    /*
     * Het ontwerp gebruikt nergens schaduw. De tokens blijven bestaan zodat
     * de regels die ze gebruiken niet stukgaan.
     */
    --koos-schaduw-kaart: none;
    --koos-schaduw-hoog:  none;

    /* --- Ritme --- */
    /*
     * Gemeten over de prototypes: de sectiepadding is vrijwel altijd 100,
     * met 80 en 40 als kleinere stappen. 60 kwam er nergens in voor.
     */
    /*
     * Hoogte van de balk die blijft plakken. Alles wat zelf ook sticky is
     * rekent hiermee, anders schuift het eronder weg.
     */
    /*
     * De hele header plakt, dus dit is de topbalk (40) plus de blauwe balk
     * (88). Alles wat onder de header door zou schuiven rekent hiermee:
     * scroll-padding voor ankerlinks, het uitklappaneel en de meescrollende
     * kaarten bij nieuws en vacatures.
     *
     * koos-header.js overschrijft dit met de werkelijk gemeten hoogte; deze
     * waarde is wat er staat zolang dat nog niet gebeurd is.
     */
    --koos-header-hoogte: 128px;

    --koos-sectie-ruimte:    100px;
    --koos-sectie-ruimte-m:  80px;
    --koos-sectie-ruimte-s:  40px;
    --koos-gap:              24px;
 	/*
	 * 1200 met 20px padding = een contentkolom van 1160 die op een canvas
	 * van 1440 op x=140 begint. Precies zoals de prototypes het doen.
	 */
	--koos-siteinner: 1200px;
	--koos-siteinner-padding: 20px;

    /* --- Overgangen --- */
    --koos-transitie: 0.25s ease;

    /*
     * Alleen de duur. Nodig waar een vertraging apart opgegeven moet worden,
     * zoals bij visibility: daar mag geen easing-woord tussen staan.
     */
    --koos-transitie-duur: 0.25s;
}


/* ==================================================================
   2. Basis
   ================================================================== */

body {
    color: var(--koos-kleur-tekst);
    font-family: var(--koos-font-body);
    font-size: var(--koos-font-size-body);
    line-height: var(--koos-lineheight-body);
    letter-spacing: var(--koos-letterspacing);
    background-color: var(--koos-wit);
}

::selection {
    background-color: var(--koos-blauw);
    color: var(--koos-wit);
}

/* Zichtbare focus voor toetsenbordgebruikers. */
:focus-visible {
    outline: 2px solid var(--koos-blauw);
    outline-offset: 2px;
    border-radius: 2px;
}


/* ==================================================================
   3. Typografie
   ================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--koos-font-kop);
    font-weight: 700;
    line-height: var(--koos-lineheight-kop);
    letter-spacing: var(--koos-letterspacing);
    color: var(--koos-kleur-kop);
    margin-top: 0;
}

/*
 * Typografische schaal uit de briefing. Desktopwaarden zijn de bovengrens;
 * de ondergrens is het mobiele formaat dat in de briefing staat onder
 * "Responsive" (hero 44/50 wordt 32/38, sectiekop 36/44 wordt 28/34).
 */
h1 { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.1364; }  /* 44/50 */
h2 { font-size: clamp(28px, 2.8vw, 36px); line-height: 1.2222; }  /* 36/44 */
h3 { font-size: 22px; line-height: 1.0909; }                      /* paneelkop 22/24 */
h4 { font-size: 18px; line-height: 1; }                           /* kaarttitel 18/18 */
h5 { font-size: 16px; line-height: 1.5; }
h6 { font-size: 15px; line-height: 1.4667; }

/*
 * In het ontwerp wisselt de kopkleur per sectie: groen, blauw of oranje.
 * Zet een van deze klassen op de kop, of op een sectie om alle koppen
 * daarbinnen mee te laten kleuren.
 */
.kop-groen  > * > h1, .kop-groen  > * > h2, .kop-groen  h1, .kop-groen  h2 { color: var(--koos-groen); }
.kop-blauw  > * > h1, .kop-blauw  > * > h2, .kop-blauw  h1, .kop-blauw  h2 { color: var(--koos-blauw); }
.kop-oranje > * > h1, .kop-oranje > * > h2, .kop-oranje h1, .kop-oranje h2 { color: var(--koos-oranje); }
.kop-roze   > * > h1, .kop-roze   > * > h2, .kop-roze   h1, .kop-roze   h2 { color: var(--koos-roze); }
.kop-wit    > * > h1, .kop-wit    > * > h2, .kop-wit    h1, .kop-wit    h2 { color: var(--koos-wit); }

/*
 * De h3-koppen van kaarten blijven blauw, ook binnen een gekleurde sectie —
 * anders kleuren alle kaarttitels mee met de sectiekop.
 */
.kop-groen h3, .kop-blauw h3, .kop-oranje h3, .kop-roze h3 { color: var(--koos-blauw); }
.kop-wit h3 { color: var(--koos-wit); }

/* Kleine bovenkop boven een titel, zoals "Kinderopvang KOOS" in de hero. */
.koos-bovenkop {
    color: var(--koos-blauw);
    font-family: var(--koos-font-kop);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: var(--koos-letterspacing);
    line-height: 1.4;
    margin-bottom: 10px;
    display: block;
}

/*
 * In de prototypes staat de bovenkop in blauw boven een groene, oranje of
 * roze titel: twee kleuren die elkaar afzetten. Staat de titel zelf op blauw,
 * dan vielen ze samen en las het als een kop van twee regels. Dan wisselt de
 * bovenkop naar groen, zodat er nergens blauw op blauw staat.
 *
 * Deze regel staat bewust boven de .bg-blauw/.bg-groen-regels verderop: op
 * een vol kleurvlak erven bovenkop en titel allebei wit, en dat moet winnen.
 */
.kop-blauw .koos-bovenkop {
    color: var(--koos-groen);
}

/* Lead 16/24 uit de typografische schaal. */
.koos-lead {
    font-size: 16px;
    line-height: 1.5;
}

/* Bestaande themaklassen op de nieuwe tokens zetten. */
.coloraccent { color: var(--koos-oranje); }
.colorwit    { color: var(--koos-wit); }


/* ==================================================================
   4. Links
   ================================================================== */

a {
    color: var(--koos-kleur-link);
    transition: color var(--koos-transitie);
}

/*
 * :where() houdt dit op het gewicht van één klasse. Als gewone a:focus woog
 * het zwaarder dan de knopkleuren (.koos-knop--oranje enz.): een knop waar je
 * net op had geklikt, of waar je via "terug" weer op uitkwam, hield de focus
 * en kreeg dan blauwe tekst, alsof hij "bezocht" was.
 */
:where(a):hover,
:where(a):focus {
    color: var(--koos-kleur-link-hover);
}

/*
 * Tekstlink met pijl, zoals onder de kaarten in "Opvang bij KOOS".
 * Gebruik: <a class="koos-link-pijl" href="#">Lees verder</a>
 */
.koos-link-pijl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    position: relative;
}

.koos-link-pijl::after {
    content: "→";
    transition: transform var(--koos-transitie);
}

.koos-link-pijl:hover::after {
    transform: translateX(4px);
}

/*
 * Variant zonder pijl: een gewone tekstlink met dezelfde opmaak. Staat hier
 * en niet in de blok-CSS, want blok-CSS wordt inline meegestuurd boven dit
 * bestand en zou bij gelijke specificiteit verliezen van de regel hierboven.
 */
.koos-link-pijl--zonder-pijl::after,
.koos-link-pijl--zonder-pijl:hover::after {
    content: none;
}

/*
 * Alleen de pijl, zonder zichtbare tekst. De linktekst blijft in de opmaak
 * staan als screen-reader-text, anders is het een link zonder naam.
 *
 * Staat hier en niet in de blok-CSS: meerdere blocks gebruiken hem, en die
 * bestanden laden alleen als dat ene block op de pagina staat.
 */
.koos-link-pijl--alleen-pijl {
    font-size: 30px;
    line-height: 1;
}

/*
 * De lijst stond strak tegen de alinea erboven. In de prototypes zit er
 * dezelfde lucht tussen als tussen twee alinea's.
 */
.koos-vinklijst {
    margin: 24px 0;
    padding: 0;
    list-style: none;
}

/* Sluit de lijst een kolom of kaart af, dan hoeft de marge eronder niet. */
.koos-vinklijst:last-child {
    margin-bottom: 0;
}

/* Staat de lijst bovenaan een kolom of kaart, dan hoeft die marge niet. */
.koos-vinklijst:first-child {
    margin-top: 0;
}

.koos-vinklijst__item {
    position: relative;
    padding-left: 34px;
    margin-bottom: 14px;
    /* CheckList: tekst 15/22. */
    font-size: 15px;
    line-height: 22px;
}

.koos-vinklijst__item:last-child {
    margin-bottom: 0;
}

.koos-vinklijst__item::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 2px;
    width: 22px;
    height: 22px;
    border: 1px solid var(--koos-blauw);
    border-radius: var(--koos-radius-pil);
    color: var(--koos-blauw);
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}



/* ==================================================================
   5. Knoppen
   ================================================================== */

/*
 * Basisvorm. De bestaande .buttonbox > a uit button.css levert al
 * grotendeels deze vorm; hier worden vooral maat en kleur bijgesteld.
 */
.koos-knop,
.buttonbox > a,
.buttonbox > button {
    font-family: var(--koos-font-kop);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: var(--koos-letterspacing);
    line-height: 1;
    border-radius: var(--koos-radius-kaart);
    height: 46px;              /* md; sm = 40, lg = 48 */
    padding: 0 24px;
    border: 1.5px solid transparent;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--koos-transitie),
                border-color var(--koos-transitie),
                color var(--koos-transitie);
}

/* --- Varianten --- */

.koos-knop--oranje,
.oranjebg {
    background-color: var(--koos-oranje);
    border-color: var(--koos-oranje) !important;
    color: var(--koos-wit);
}

.koos-knop--oranje:hover,
.oranjebg:hover {
    background-color: var(--koos-oranje-donker);
    border-color: var(--koos-oranje-donker) !important;
    color: var(--koos-wit);
}

.koos-knop--groen {
    background-color: var(--koos-groen);
    border-color: var(--koos-groen) !important;
    color: var(--koos-wit);
}

.koos-knop--groen:hover {
    background-color: var(--koos-groen-donker);
    border-color: var(--koos-groen-donker) !important;
    color: var(--koos-wit);
}

/*
 * Roze knop. De huisstijl geeft geen donkere roze variant, dus voor hover
 * gebruiken we dezelfde kleur met een lichte verdonkering.
 */
.koos-knop--roze {
    background-color: var(--koos-roze);
    border-color: var(--koos-roze) !important;
    color: var(--koos-wit);
}

.koos-knop--roze:hover {
    background-color: rgba(var(--koos-roze-rgb), 0.85);
    border-color: rgba(var(--koos-roze-rgb), 0.85) !important;
    color: var(--koos-wit);
}

.koos-knop--blauw {
    background-color: var(--koos-blauw);
    border-color: var(--koos-blauw) !important;
    color: var(--koos-wit);
}

.koos-knop--blauw:hover {
    background-color: var(--koos-blauw-donker);
    border-color: var(--koos-blauw-donker) !important;
    color: var(--koos-wit);
}

/* Outline: witte vulling, gekleurde rand — zoals "Over Kinderopvang KOOS". */
.koos-knop--outline,
.witbg {
    background-color: var(--koos-wit);
    border-color: var(--koos-blauw) !important;
    color: var(--koos-blauw);
}

.koos-knop--outline:hover,
.witbg:hover {
    background-color: var(--koos-blauw);
    color: var(--koos-wit);
}

.koos-knop--outline-wit {
    background-color: transparent;
    border-color: var(--koos-wit) !important;
    color: var(--koos-wit);
}

.koos-knop--outline-wit:hover {
    background-color: var(--koos-wit);
    color: var(--koos-blauw);
}

/*
 * Blauwe rand op een echt doorzichtige achtergrond.
 *
 * De variant hierboven ("wit") vult met lichtblauw: dat valt alleen weg op een
 * lichtblauw vlak en wordt elders een zichtbare pil. En "outline-wit" is wit op
 * wit zodra de achtergrond licht is. Deze houdt de blauwe rand en laat de
 * achtergrond er altijd doorheen, welke sectiekleur er ook onder ligt.
 */
.koos-knop--outline-transparant {
    background-color: transparent;
    border-color: var(--koos-blauw) !important;
    color: var(--koos-blauw);
}

.koos-knop--outline-transparant:hover {
    background-color: var(--koos-blauw);
    color: var(--koos-wit);
}

/* Randkleur-modifiers uit het bestaande thema. */
.orangeborder { border-color: var(--koos-oranje) !important; color: var(--koos-oranje); }
.blueborder   { border-color: var(--koos-blauw)  !important; color: var(--koos-blauw); }
.witborder    { border-color: var(--koos-wit)    !important; }

.orangeborder:hover { background-color: var(--koos-oranje); color: var(--koos-wit); }
.blueborder:hover   { background-color: var(--koos-blauw);  color: var(--koos-wit); }

.koos-knop--klein { height: 40px; padding: 0 24px; }   /* sm */
.koos-knop--groot { height: 48px; padding: 0 24px; }   /* lg */
.koos-knop--breed { width: 100%; }


/* --- Icoon in een knop --- */

/*
 * Het icoon komt uit koos_render_icoon() en staat op currentColor, dus het
 * kleurt mee met de tekst van de knop -- ook bij hover, waar die kleur
 * verandert. Een <img> zou dat niet doen.
 *
 * Deze regels staan na de maatvarianten (klein, groot, breed), want die
 * zetten de padding opnieuw en hebben dezelfde specificiteit.
 */
.koos-knop--met-icoon {
    gap: 8px;
    /* Iets minder zijruimte, zodat het icoon de knop niet breder maakt. */
    padding-left: 20px;
    padding-right: 20px;
}

.koos-knop__icoon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

/* De pijl staat achter de tekst en mag iets kleiner. */
.koos-knop__icoon--pijl {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
}

/*
 * Dezelfde iconen voor losse links (footer, contactkaart), als CSS-masker op
 * een ::before. De vormen zijn exact die uit koos_render_icoon() in
 * inc/block-helpers.php; pas ze daar en hier samen aan. Als masker nemen ze
 * via background-color: currentColor de kleur van de link over.
 */
:root {
    --koos-icoon-telefoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h3L11 7 9 8.5a12 12 0 0 0 5.5 5.5L16 12l4 1.5v3a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 3.5 5.2 2 2 0 0 1 5.5 3Z'/%3E%3C/svg%3E");
    --koos-icoon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6 8.5-6'/%3E%3C/svg%3E");
}



/* ==================================================================
   6. Secties en achtergronden
   ================================================================== */

.koos-sectie {
    padding-top: var(--koos-sectie-ruimte);
    padding-bottom: var(--koos-sectie-ruimte);
}

.koos-sectie--compact {
    padding-top: var(--koos-sectie-ruimte-m);
    padding-bottom: var(--koos-sectie-ruimte-m);
}
.koos-ruimte-boven-geen   { padding-top: 0; }
.koos-ruimte-boven-klein  { padding-top: var(--koos-sectie-ruimte-s); }
.koos-ruimte-boven-middel { padding-top: var(--koos-sectie-ruimte-m); }
.koos-ruimte-boven-groot  { padding-top: var(--koos-sectie-ruimte); }

.koos-ruimte-onder-geen   { padding-bottom: 0; }
.koos-ruimte-onder-klein  { padding-bottom: var(--koos-sectie-ruimte-s); }
.koos-ruimte-onder-middel { padding-bottom: var(--koos-sectie-ruimte-m); }
.koos-ruimte-onder-groot  { padding-bottom: var(--koos-sectie-ruimte); }
/* Achtergrondvlakken die het ontwerp afwisselt. */
/*
 * De sectiebanden gebruiken de tints uit het design system, niet de oude
 * dekkende *-licht-kleuren. In de prototypes is een band een doorschijnend
 * vlak (bijvoorbeeld rgba(122,195,237,.149)); met #E0F3FB werd dat een
 * zichtbaar blauwer, harder vlak.
 */
.bg-wit        { background-color: var(--koos-wit); }
.bg-blauw-licht { background-color: var(--koos-tint-blauw); }
.bg-groen-licht { background-color: var(--koos-tint-groen); }
.bg-roze-licht  { background-color: var(--koos-tint-roze); }
.bg-grijs-licht { background-color: var(--koos-mist); }

/* ==================================================================
   Ruimte tussen twee secties
   ------------------------------------------------------------------
   Elke sectie heeft 100px boven en onder. Tussen twee secties staat
   daardoor 200px. Zolang de achtergrond wisselt valt dat niet op -- de
   kleurgrens doet het scheiden. Liggen twee secties op dezelfde kleur,
   dan loopt die 200px als een leeg vlak door en valt het gat veel te
   groot uit.

   De prototypes doen het net zo: daar staat de bovenmarge van zo'n
   vervolgsectie op 0 en levert alleen de sectie erboven de ruimte.

   Heeft de redactie zelf een ruimte gekozen, dan blijft die staan.
   ================================================================== */

.koos-blok.bg-wit + .koos-blok.bg-wit:not(.koos-ruimte-boven-geen):not(.koos-ruimte-boven-klein):not(.koos-ruimte-boven-middel):not(.koos-ruimte-boven-groot),
.koos-blok.bg-blauw-licht + .koos-blok.bg-blauw-licht:not(.koos-ruimte-boven-geen):not(.koos-ruimte-boven-klein):not(.koos-ruimte-boven-middel):not(.koos-ruimte-boven-groot),
.koos-blok.bg-groen-licht + .koos-blok.bg-groen-licht:not(.koos-ruimte-boven-geen):not(.koos-ruimte-boven-klein):not(.koos-ruimte-boven-middel):not(.koos-ruimte-boven-groot),
.koos-blok.bg-roze-licht + .koos-blok.bg-roze-licht:not(.koos-ruimte-boven-geen):not(.koos-ruimte-boven-klein):not(.koos-ruimte-boven-middel):not(.koos-ruimte-boven-groot),
.koos-blok.bg-grijs-licht + .koos-blok.bg-grijs-licht:not(.koos-ruimte-boven-geen):not(.koos-ruimte-boven-klein):not(.koos-ruimte-boven-middel):not(.koos-ruimte-boven-groot),
.koos-blok.bg-blauw + .koos-blok.bg-blauw:not(.koos-ruimte-boven-geen):not(.koos-ruimte-boven-klein):not(.koos-ruimte-boven-middel):not(.koos-ruimte-boven-groot),
.koos-blok.bg-groen + .koos-blok.bg-groen:not(.koos-ruimte-boven-geen):not(.koos-ruimte-boven-klein):not(.koos-ruimte-boven-middel):not(.koos-ruimte-boven-groot) {
    padding-top: 0;
}

/*
 * Dezelfde regel, maar dan op de klasse die koos_volgt_zelfde_kleur() in
 * inc/block-helpers.php meegeeft. De broer-selector hierboven loopt namelijk
 * op twee dingen vast:
 *
 *  - een sticker of mascotte tussen twee secties verbreekt de broerrelatie
 *    en dan staat de 200px er alsnog;
 *  - hij vergelijkt klassen, dus bg-geen naast bg-wit telt als een
 *    kleurwissel terwijl je hetzelfde witte vlak ziet.
 *
 * De blokken van de locatie-, plaats-, nieuws- en vacaturesjablonen komen
 * niet langs die functie, want die bouwen hun secties in PHP. Vandaar dat
 * de selector hierboven blijft staan.
 */
.koos-blok--zelfde-kleur.koos-sectie:not(.koos-ruimte-boven-geen):not(.koos-ruimte-boven-klein):not(.koos-ruimte-boven-middel):not(.koos-ruimte-boven-groot) {
    padding-top: 0;
}

/* ==================================================================
   Stapeling: tekst altijd boven de versiering
   ------------------------------------------------------------------
   De sticker en de mascotte staan bewust half over de naad tussen twee
   blokken. Ze mogen daarbij nooit over tekst vallen. Daarom liggen ze
   boven de gekleurde banden, maar onder de inhoud van elk blok.

   De inner van de sticker en de mascotte zelf worden uitgezonderd,
   anders tillen die zichzelf weer naar voren.
   ================================================================== */

/*
 * De volgorde van voor naar achter:
 *   2  tekst  -- koppen, alinea's, lijsten, knoppen en de tekstkant van een
 *                blok; die mag nooit bedekt worden;
 *   1  sticker en mascotte -- die liggen juist wel over de foto's heen;
 *   0  foto's en gekleurde banden.
 *
 * Let op: de tekstlaag krijgt z-index op de tekstelementen zelf en niet op de
 * hele .siteinner. Een z-index op die wrapper maakt er een stapelcontext van
 * en dan komt alles erin -- ook de foto's -- boven de sticker uit.
 */
.koos-blok :is(
    h1, h2, h3, h4, p, ul, ol, blockquote,
    .koos-knoppen, .koos-knop, .koos-bovenkop, .koos-lead,
    .koos-media-tekst__inhoud, .koos-kaart__body, .koos-intro__inhoud,
    .koos-opvangsoorten__kop, .koos-kaarten__intro, .koos-tekst__inhoud,
    .koos-faq__lijst, .koos-faq__kaart, .koos-locaties__kolommen,
    .koos-ervaringen__vlak, .koos-tarieven__tabel, .koos-citaat
) {
    position: relative;
    z-index: 2;
}

.koos-sticker,
.koos-mascotte {
    z-index: 1;
}

/* Versiering vangt geen klikken af. */
.koos-sticker {
    pointer-events: none;
}

/*
 * Doorzichtig vlak. Nodig als een paneel op een band ligt die al een tint
 * heeft: twee keer dezelfde halfdoorzichtige kleur over elkaar geeft een
 * donkerder rechthoek in plaats van een rustig vlak.
 */
.bg-geen { background-color: transparent; }

/* Sterkere varianten uit het design system, voor panelen. */
.bg-groen-sterk { background-color: var(--koos-tint-groen-sterk); }
.bg-roze-sterk  { background-color: var(--koos-tint-roze-sterk); }

.bg-blauw { background-color: var(--koos-blauw); color: var(--koos-wit); }
.bg-groen { background-color: var(--koos-groen); color: var(--koos-wit); }

.bg-blauw h1, .bg-blauw h2, .bg-blauw h3,
.bg-groen h1, .bg-groen h2, .bg-groen h3 {
    color: var(--koos-wit);
}

/*
 * Tekstblokken zetten zelf het huisstijlgrijs, waardoor het wit van het
 * kleurvlak niet doorwerkte. Op een vol vlak erven ze weer van de sectie.
 */
.bg-blauw .koos-media-tekst__tekst,
.bg-groen .koos-media-tekst__tekst,
.bg-blauw .koos-bovenkop,
.bg-groen .koos-bovenkop,
.bg-blauw .koos-vinklijst__item,
.bg-groen .koos-vinklijst__item,
.bg-blauw .koos-kaart__tekst,
.bg-groen .koos-kaart__tekst,
.bg-blauw .koos-link-pijl,
.bg-groen .koos-link-pijl {
    color: inherit;
}

/* Het vinkje in het rondje kleurt mee. */
.bg-blauw .koos-vinklijst__item::before,
.bg-groen .koos-vinklijst__item::before {
    border-color: currentColor;
    color: inherit;
}

/* Bestaande themaklassen. */
.bgwit   { background-color: var(--koos-wit); }
.bggrijs { background-color: var(--koos-grijs-licht); }

/*
 * Gestippelde scheidingslijn, zoals boven "Worden wie je bent".
 */
.koos-stippellijn {
    border: 0;
    border-top: 3px dashed var(--koos-blauw);
    margin: 0;
}


/* ==================================================================
   7. Afbeeldingen
   ================================================================== */

.koos-afbeelding-rond {
    border-radius: var(--koos-radius);
    overflow: hidden;
    display: block;
}

/*
 * Hier stond alleen width/height 100%. Zonder object-fit rekt de browser de
 * foto naar de vorm van het kader: een liggende foto in een staand vlak werd
 * uitgetrokken en zag er opgeblazen uit. Met cover blijft de verhouding
 * kloppen en wordt er hooguit iets van de randen afgesneden.
 */
.koos-afbeelding-rond img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Hero-beeld met afgeronde onderhoeken. */
.koos-hero-beeld {
    border-bottom-left-radius: var(--koos-radius-groot);
    border-bottom-right-radius: var(--koos-radius-groot);
    overflow: hidden;
}


/* ==================================================================
   8. Kaarten
   ================================================================== */

.koos-kaart {
    background-color: var(--koos-wit);
    /*
     * Rand erbij: op een witte sectie viel de witte kaart weg tegen de
     * achtergrond, want de schaduw alleen is daar te subtiel voor.
     */
    border: 1px solid var(--koos-lijn);
    border-radius: var(--koos-radius-locaties);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color var(--koos-transitie);
}

/*
 * De kaart zelf beweegt niet meer: geen optillen en geen schaduw, conform
 * "Geen scale en geen bounce" uit de briefing. Alleen de foto binnen het
 * kader zoomt licht in; het kader houdt dankzij overflow: hidden precies
 * dezelfde maat.
 */
.koos-kaart:hover {
    box-shadow: none;
    transform: none;
}

.koos-kaart__media {
    position: relative;
    /*
     * Vaste breedte erbij: zonder die regel rekent Safari de breedte uit de
     * verhouding en de (minimale) hoogte, in plaats van de kaart te vullen.
     * Dan werd het kader breder dan de kolom en schoven foto's over elkaar.
     */
    width: 100%;
    aspect-ratio: 5 / 3;
    overflow: hidden;
    /* Safari knipt anders de inzoomende foto niet netjes af in de ronde hoeken. */
    isolation: isolate;
}

.koos-kaart__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.koos-kaart:hover .koos-kaart__media img {
    transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {

    .koos-kaart:hover .koos-kaart__media img {
        transform: none;
    }
}

.koos-kaart__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

/*
 * ContentCard op de maten uit het prototype: foto 228 hoog, body-padding 32,
 * en de tekstlink 14px Bold in het groen (was 15px regular in de body-kleur).
 */
.koos-kaart__media {
    min-height: 228px;
}

.koos-kaart__body {
    padding: 32px;
}

.koos-kaart__link,
.koos-kaart__vlaklink {
    font-family: var(--koos-font-kop);
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: var(--koos-groen);
}

.koos-kaart__titel {
    font-family: var(--koos-font-kop);
    font-weight: 700;
    font-size: 18px;
    line-height: 1;            /* ContentCard: 18/18 */
    color: var(--koos-blauw);
    margin: 0;
}

.koos-kaart__tekst {
    font-size: 15px;
    color: var(--koos-tekst-zacht);
    margin: 0;
}

/*
 * De hele kaart is klikbaar: het vlak over de kaart zit op de link als
 * ::before met inset: 0. Dat vlak rekent met de dichtstbijzijnde ouder die
 * zelf gepositioneerd is. De stapelregel hierboven gaf .koos-kaart__body
 * position: relative, waardoor het vlak alleen nog de tekstkolom besloeg en
 * de foto niet meer meedeed. Binnen een klikbare kaart staat de body daarom
 * weer op static en tilt de kaart zichzelf als geheel op.
 */
.koos-kaart--klikbaar {
    position: relative;
    z-index: 2;
}

/*
 * Twee klassen in de selector: de stapelregel hierboven heeft binnen :is()
 * een klasse staan, en daarmee telt dat hele selectordeel als klasse. Met
 * alleen .koos-kaart--klikbaar zou deze regel het verliezen.
 */
.koos-kaart.koos-kaart--klikbaar .koos-kaart__body,
.koos-kaart.koos-kaart--klikbaar :is(h1, h2, h3, h4, p, ul, ol) {
    /*
     * Ook de tekst zelf blijft static: anders komt een alinea boven het
     * klikvlak uit en doet een klik op die tekst niets. Het vlak is
     * doorzichtig, dus de tekst blijft gewoon zichtbaar. De kaart als geheel
     * staat al op z-index 2, dus de tekst zit nog steeds boven de sticker.
     */
    position: static;
    z-index: auto;
}

.koos-kaart--klikbaar .koos-kaart__vlaklink {
    position: static;
}

.koos-kaart--klikbaar .koos-kaart__vlaklink::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.koos-kaart--klikbaar a:not(.koos-kaart__vlaklink):not([aria-hidden="true"]),
.koos-kaart--klikbaar button {
    position: relative;
    z-index: 2;
}
/* Link onderaan de kaart, altijd op de bodem uitgelijnd. */
.koos-kaart__link {
    margin-top: auto;
    padding-top: 6px;
}

/*
 * Variant met een gekleurde bovenrand — het ontwerp gebruikt dit als
 * subtiel onderscheid tussen kaartsoorten.
 */
.koos-kaart--rand-oranje { border-top: 4px solid var(--koos-oranje); }
.koos-kaart--rand-groen  { border-top: 4px solid var(--koos-groen); }
.koos-kaart--rand-blauw  { border-top: 4px solid var(--koos-blauw); }

/*
 * Citaatkaart uit "Ervaringen van ouders".
 *
 * De kaarten staan naast elkaar in een flexrij en zijn daardoor even hoog,
 * maar de quotes zijn dat niet. De naam met de foto volgde de quote, dus bij
 * een korte quote stond het rijtje halverwege de kaart en bij een lange
 * onderaan. Als kolom met de quote op flex: 1 zakt de auteur altijd naar de
 * onderkant, waardoor alle foto's en namen op dezelfde hoogte staan.
 */
.koos-citaat {
    display: flex;
    flex-direction: column;
    background-color: var(--koos-wit);
    border-radius: var(--koos-radius);
    padding: 24px;
    font-size: 15px;
    color: var(--koos-tekst-zacht);
}

.koos-citaat__tekst {
    flex: 1 1 auto;
}

.koos-citaat__auteur {
    display: flex;
    align-items: center;
    gap: 12px;
    /* auto duwt naar beneden; de 18px blijft de kleinste tussenruimte. */
    margin-top: auto;
    padding-top: 18px;
}

.koos-citaat__naam {
    font-family: var(--koos-font-semi);
    color: var(--koos-blauw);
    font-size: 14px;
    line-height: 1.3;
    display: block;
}

.koos-citaat__bron {
    font-size: 13px;
    color: var(--koos-tekst-zacht);
}


/* ==================================================================
   9. Labels en badges
   ================================================================== */

/* Klein pilvormig label op een kaartafbeelding, zoals "veilig!". */
.koos-label {
    position: absolute;
    right: 12px;
    bottom: 12px;
    background-color: var(--koos-oranje);
    color: var(--koos-wit);
    font-family: var(--koos-font-semi);
    font-size: 12px;
    line-height: 1;
    padding: 10px 14px;
    border-radius: var(--koos-radius-pil);
}

/*
 * Oranje is ook de basiskleur hierboven, maar staat hier expliciet zodat
 * alle drie de keuzes uit het ACF-veld een eigen regel hebben — anders
 * breekt oranje zodra iemand de basiskleur wijzigt.
 */
.koos-label--oranje { background-color: var(--koos-oranje); }
.koos-label--groen  { background-color: var(--koos-groen); }
.koos-label--blauw  { background-color: var(--koos-blauw); }

/*
 * Zolang er nog geen foto is gekozen blijft er een rustig vlak staan in plaats
 * van een ingezakte container, zodat de verhoudingen kloppen.
 */
.koos-media-leeg {
    aspect-ratio: 4 / 3;
    background-color: var(--koos-grijs-licht);
    border: 1px dashed var(--koos-lijn);
}


/*
 * Ronde stoere badge ("groeien met al je talent"). Licht geroteerd,
 * zoals in het ontwerp.
 */
.koos-badge-rond {
    width: 207px;
    height: 207px;
    border-radius: 50%;
    background-color: var(--koos-oranje);
    color: var(--koos-wit);
    font-family: var(--koos-font-kop);
    font-weight: 700;
    /*
     * Stond op !important. Daardoor sloegen de media queries hieronder en de
     * maatvarianten van het stickerblok niet aan: op een smal scherm bleef de
     * tekst 31px in een cirkel van 124px en liep hij ver buiten de rand.
     * De inline style op dit element zet alleen de positievariabelen, dus
     * !important is hier niet nodig.
     */
    font-size: 31px;
    line-height: 1.15;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px;
    transform: rotate(-8deg);
}

.koos-badge-rond--groen { background-color: var(--koos-groen); }
.koos-badge-rond--blauw { background-color: var(--koos-blauw); }
.koos-badge-rond--roze  { background-color: var(--koos-roze); }

/*
 * Plaatsing van de ronde badge over een hoek heen. Het element eromheen moet
 * position: relative hebben; welk element dat is verschilt per blok -- bij
 * afbeelding+tekst is het de foto, bij opvangsoorten de sectie zelf.
 *
 * 75px is de helft van de badge, dus hij hangt er precies half overheen.
 */
.koos-badge-hoek {
    position: absolute;
    z-index: 2;
}

.koos-badge-hoek--linksboven  { top: -75px;    left: -75px; }
.koos-badge-hoek--rechtsboven { top: -75px;    right: -75px; }
.koos-badge-hoek--linksonder  { bottom: -75px; left: -75px; }
.koos-badge-hoek--rechtsonder { bottom: -75px; right: -75px; }

@media (max-width: 900px) {

    /* Anders valt de badge half buiten beeld. */
    .koos-badge-hoek {
        width: 110px;
        height: 110px;
        font-size: 15px;
        padding: 12px;
    }

    .koos-badge-hoek--linksboven,
    .koos-badge-hoek--linksonder  { left: -20px; right: auto; }

    .koos-badge-hoek--rechtsboven,
    .koos-badge-hoek--rechtsonder { right: -20px; left: auto; }

    .koos-badge-hoek--linksboven,
    .koos-badge-hoek--rechtsboven { top: -30px; }

    .koos-badge-hoek--linksonder,
    .koos-badge-hoek--rechtsonder { bottom: -30px; }
}

/* Categorie-aanduiding boven een nieuwstitel. */
.koos-tag {
    font-size: 13px;
    color: var(--koos-tekst-zacht);
}


/* ==================================================================
   10. Header
   ================================================================== */


.koos-kruimelpad-balk.bg-blauw .koos-kruimelpad,
.koos-kruimelpad-balk.bg-groen .koos-kruimelpad,
.koos-kruimelpad-balk.bg-blauw .koos-kruimelpad a,
.koos-kruimelpad-balk.bg-groen .koos-kruimelpad a {
    color: var(--koos-wit);
}
.koos-kruimelpad {
    font-size: 13px;
    color: var(--koos-tekst-zacht);
    padding: 14px 0;
}

.koos-kruimelpad a {
    color: var(--koos-tekst-zacht);
    text-decoration: none;
}

.koos-kruimelpad a:hover {
    color: var(--koos-blauw);
}


/* ==================================================================
   11. Locatiezoeker in de hero
   ================================================================== */

.koos-zoeker {
    background-color: var(--koos-wit);
    border-radius: var(--koos-radius);
    box-shadow: var(--koos-schaduw-hoog);
    padding: 20px;
    max-width: 520px;
    /*
     * De zoeker staat op verschillende plekken: in een halve kolom naast een
     * foto, als kaart op een foto, of over de volle breedte. De schermbreedte
     * zegt dus weinig over hoeveel ruimte veld en knop hebben. Daarom reageert
     * hij op zijn eigen breedte (@container koos-zoeker hieronder en in
     * blocks/koos-hero-zoeker/koos-hero-zoeker.css).
     */
    container: koos-zoeker / inline-size;
}

.koos-zoeker__label {
    font-family: var(--koos-font-semi);
    font-weight: 700;
    font-size: 14px;
    color: var(--koos-tekst);
    display: block;
    margin-bottom: 12px;
}

.koos-zoeker__opties {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: 16px;
}

.koos-zoeker__optie {
    display: inline-flex;
    /* Expliciet, zodat een globale label-regel dit niet kan omgooien. */
    flex-direction: row;
    align-items: center;
    width: auto;
    margin-bottom: 0;
    gap: 7px;
    font-family: var(--koos-font-body);
    font-size: 14px;
    font-weight: normal;
    color: var(--koos-tekst);
    cursor: pointer;
}

/* Het rondje zelf blijft KOOS-blauw; alleen de tekst ernaast is grijs. */
.koos-zoeker__optie input[type="radio"] {
    accent-color: var(--koos-blauw);
}

.koos-zoeker__rij {
    display: flex;
    gap: 10px;
}

.koos-zoeker__rij input[type="text"],
.koos-zoeker__rij input[type="search"] {
    flex: 1;
    min-width: 0;
}

/*
 * Veld en knop onder elkaar zodra ze niet meer comfortabel naast elkaar
 * passen: de knop is zo'n 175px, en het veld moet nog een plaatsnaam kunnen
 * tonen. 440px is de binnenbreedte van de zoeker, zonder zijn padding.
 */
@container koos-zoeker (max-width: 440px) {

    .koos-zoeker__rij {
        flex-direction: column;
        gap: 8px;
    }
}

/* Formuliervelden in KOOS-stijl. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
select,
textarea {
    border: 1px solid var(--koos-lijn);
    border-radius: var(--koos-radius-klein);
    padding: 12px 14px;
    font-family: var(--koos-font-body);
    font-size: 15px;
    color: var(--koos-tekst);
    background-color: var(--koos-wit);
    transition: border-color var(--koos-transitie);
}

/*
 * Alleen de randkleur veranderen is een te zwakke focusindicatie. De ring
 * blijft dus staan bij toetsenbordnavigatie; bij een muisklik in een veld
 * valt hij weg (:focus zonder :focus-visible).
 */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
    border-color: var(--koos-blauw);
}

input[type="text"]:focus:not(:focus-visible),
input[type="email"]:focus:not(:focus-visible),
input[type="tel"]:focus:not(:focus-visible),
input[type="search"]:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none;
}

input[type="radio"],
input[type="checkbox"] {
    accent-color: var(--koos-blauw);
    width: 17px;
    height: 17px;
}


/* ==================================================================
   12. Slider
   ================================================================== */

.koos-slider-knop {
    width: 44px;
    height: 44px;
    /*
     * Nul, want de knopregels uit het oorspronkelijke thema geven elke button
     * 14px/18px padding. Met border-box bleef er dan 6px binnenruimte over en
     * werd het pijltje platgedrukt.
     */
    border: none!important;
    color: var(--koos-blauw);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/*
 * Het pijltje in de knop. De streek is currentColor, dus de kleurwissel bij
 * hover en de doorzichtigheid van een uitgezette knop volgen vanzelf.
 */
.koos-slider-knop__pijl {
    display: block;
    /* Niet laten krimpen: het is een vaste vorm, geen rekbare inhoud. */
    flex: 0 0 auto;
    width: 11px;
    height: 21px;
}

/*
 * Voortgangsbalk onder de nieuwsslider: één segment per groep kaarten, zodat
 * de balk precies overeenkomt met wat er te scrollen valt. Het zijn knoppen,
 * dus je kunt er ook mee springen.
 */
.koos-slider-stappen {
    display: flex;
    gap: 6px;
}

.koos-slider-stap {
    flex: 1 1 0;
    padding: 10px 0;
    border: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.koos-slider-stap__streep {
    display: block;
    height: 4px;
    border-radius: var(--koos-radius-pil);
    background-color: var(--koos-lijn);
    transition: background-color 0.2s ease;
}

.koos-slider-stap.is-actief .koos-slider-stap__streep {
    background-color: var(--koos-blauw);
}

.koos-slider-stap:hover .koos-slider-stap__streep {
    background-color: var(--koos-blauw-licht);
}

.koos-slider-stap.is-actief:hover .koos-slider-stap__streep {
    background-color: var(--koos-blauw);
}


/* ==================================================================
   13. Footer
   ================================================================== */

/*
 * De footer heeft een eigen stylesheet: css/koos-footer.css.
 * Hier stonden regels voor de oude .site-footer-opbouw; die stuurden na
 * de herbouw niets meer aan.
 */


/* ==================================================================
   14. Hulpklassen
   ================================================================== */

.koos-tekst-midden { text-align: center; }
.koos-tekst-links  { text-align: left; }

.koos-stapel {
    display: flex;
    flex-direction: column;
    gap: var(--koos-gap);
}

.koos-rij {
    display: flex;
    flex-wrap: wrap;
    gap: var(--koos-gap);
    align-items: center;
}

.koos-mt-0  { margin-top: 0; }
.koos-mt-8  { margin-top: 8px; }
.koos-mt-16 { margin-top: 16px; }
.koos-mt-24 { margin-top: 24px; }
.koos-mt-40 { margin-top: 40px; }


.koos-404 {
    text-align: center;
}

.koos-404__inhoud {
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

.koos-404__tekst {
    margin-bottom: 28px;
}

.koos-404__knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}


.koos-zoekpagina__titel {
    margin-bottom: 20px;
}

.koos-zoekpagina__titel span {
    color: var(--koos-blauw);
}

.koos-zoekpagina__form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

.koos-zoekpagina__invoer {
    flex: 1 1 260px;
    max-width: 420px;
    border: 1px solid var(--koos-lijn);
    border-radius: 999px;
    padding: 10px 18px;
    font-family: inherit;
    font-size: 16px;
    color: var(--koos-tekst);
    background-color: var(--koos-wit);
}

.koos-zoekpagina__aantal {
    color: var(--koos-tekst-zacht);
    margin-bottom: 20px;
}

.koos-zoekpagina__lijst {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    gap: 20px;
}

.koos-zoekpagina__item {
    border-bottom: 1px solid var(--koos-lijn);
    padding-bottom: 20px;
}

.koos-zoekpagina__item:last-child {
    border-bottom: 0;
}

.koos-zoekpagina__item-titel {
    font-size: 20px;
    margin: 0 0 8px;
}

.koos-zoekpagina__item-titel a {
    color: var(--koos-blauw);
    text-decoration: none;
}

.koos-zoekpagina__item-titel a:hover {
    text-decoration: underline;
}

.koos-zoekpagina__item-tekst {
    margin: 0 0 10px;
}
/* ==================================================================
   15. Responsive
   ================================================================== */

@media (max-width: 1024px) {

    :root {
        --koos-sectie-ruimte: 70px;
        --koos-sectie-ruimte-m: 48px;
        --koos-sectie-ruimte-s: 28px;
    }

    .koos-badge-rond {
        width: 120px;
        height: 120px;
        font-size: 16px;
    }
}

@media (max-width: 768px) {

    :root {
        --koos-sectie-ruimte: 52px;
        --koos-sectie-ruimte-m: 36px;
        --koos-sectie-ruimte-s: 20px;
        --koos-gap: 16px;
    }


    .koos-zoeker {
        max-width: 100%;
        padding: 18px;
    }

    .site-footer {
        padding-top: 48px;
    }

    .koos-kaart__body {
        padding: 16px;
    }
}

@media (max-width: 480px) {

    .buttonbox > a,
    .buttonbox > button,
    .koos-knop {
        width: 100%;
    }
}


/* ==================================================================
   16. Toegankelijkheid
   ================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .koos-kaart:hover {
        transform: none;
    }

    .koos-kaart:hover .koos-kaart__media img {
        transform: none;
    }
}


/* ==================================================================
   Kruimelpad en de hero eronder
   ------------------------------------------------------------------
   In de prototypes staat het kruimelpad binnen de getinte band van de
   hero, met 12px lucht onder de header. Het thema zet het in een eigen
   balk met dezelfde tint; die leest als een band zolang de ruimte
   klopt. Daarom hier 12 boven en een kleinere kop op de hero.
   ================================================================== */

.koos-kruimelpad-balk {
    padding-top: 12px;
    padding-bottom: 0;
}

/*
 * Vangnet voor een nieuw blok dat nog geen ruimte gekregen heeft.
 *
 * Het eerste blok van een pagina is de hero, en die begint in de prototypes
 * niet op 100px: het kruimelpad zit daar in de sectie zelf en het raster
 * eronder staat op margin-top: 56px. Met 100px begint een pagina te laag, en
 * bij een blok met gecentreerde kolommen (media-tekst) zakt de kop daar nog
 * eens 68px onder -- vandaar dat het juist daar opviel.
 *
 * Bij alle bestaande items staat "Ruimte boven" nu op "klein"; dit is de
 * waarde die een blok krijgt zolang de redactie zelf nog niets gekozen heeft.
 * Vandaar dezelfde maat als "klein", zodat het veld en het beeld hetzelfde
 * zeggen.
 *
 * De klasse komt uit koos_is_eerste_blok() in inc/block-helpers.php; met een
 * selector was het eerste blok niet te pakken, omdat de kruimelpadbalk in
 * .site staat en de blocks in .entry-content binnen <main>.
 */
.koos-blok--eerste.koos-sectie:not(.koos-ruimte-boven-geen):not(.koos-ruimte-boven-klein):not(.koos-ruimte-boven-middel):not(.koos-ruimte-boven-groot) {
    padding-top: var(--koos-sectie-ruimte-s);
}


/* ==================================================================
   Gravity Forms in de KOOS-huisstijl
   ------------------------------------------------------------------
   De briefing beschrijft het formulier onder Contact: label boven het
   veld (11/Medium blauw), veld 42 hoog met radius 30 en een rand van
   1px in #7AC3ED. Gravity Forms leverde zijn eigen maten (47 hoog,
   radius 8, grijze rand) en liet het uploadveld als kale
   browserknop staan. Deze regels gelden voor alle formulieren.
   ================================================================== */

.gform_wrapper.gravity-theme.gravity-theme {
    --gf-ctrl-radius: var(--koos-radius-kaart);
    --gf-ctrl-border-color: var(--koos-blauw-tint);
    --gf-ctrl-border-color-focus: var(--koos-blauw);
    --gf-ctrl-size-md: 42px;
    --gf-ctrl-size-lg: 42px;
    --gf-color-primary: var(--koos-blauw);
    --gf-local-color: var(--koos-tekst);
    --gf-field-gap-y: 16px;
    --gf-field-gap-x: 17px;
}

.gform_wrapper.gravity-theme.gravity-theme .gfield_label {
    font-family: var(--koos-font-body);
    font-weight: 500;
    font-size: 11px;
    line-height: 18px;
    color: var(--koos-blauw);
    margin-bottom: 6px;
}

.gform_wrapper.gravity-theme .gfield_required {
    color: var(--koos-blauw);
    font-weight: 500;
}

.gform_wrapper.gravity-theme.gravity-theme input[type="text"],
.gform_wrapper.gravity-theme.gravity-theme input[type="email"],
.gform_wrapper.gravity-theme.gravity-theme input[type="tel"],
.gform_wrapper.gravity-theme.gravity-theme input[type="number"],
.gform_wrapper.gravity-theme.gravity-theme input[type="url"],
.gform_wrapper.gravity-theme.gravity-theme select {
    height: 42px;
    padding: 0 18px;
    border: 1px solid var(--koos-blauw-tint);
    border-radius: var(--koos-radius-kaart);
    font-family: var(--koos-font-body);
    font-size: 15px;
    color: var(--koos-tekst);
    background-color: var(--koos-wit);
}

.gform_wrapper.gravity-theme.gravity-theme textarea {
    min-height: 200px;
    padding: 14px 18px;
    border: 1px solid var(--koos-blauw-tint);
    border-radius: var(--koos-radius-kaart);
    font-family: var(--koos-font-body);
    font-size: 15px;
    color: var(--koos-tekst);
}

.gform_wrapper.gravity-theme ::placeholder {
    color: var(--koos-placeholder);
}

/*
 * Het Orbital-thema van Gravity Forms kleurt placeholders via zijn eigen
 * variabele, niet via de regel hierboven. Ook die dus op de KOOS-kleur.
 */
.gform_wrapper.gform-theme {
    --gf-ctrl-placeholder-color: var(--koos-placeholder);
}

/* --- Bestand uploaden --- */

/*
 * Het uploadveld stond als kale browserknop links in een te hoog vak:
 * de knop viel niet samen met de rand eromheen en lijnde niet uit met de
 * velden erboven. Nu is het veld even hoog als de andere, met de
 * bladerknop als kleine outline-knop erin.
 */
.gform_wrapper.gravity-theme.gravity-theme input[type="file"] {
    display: flex;
    align-items: center;
    width: 100%;
    height: 42px;
    padding: 0 8px 0 18px;
    border: 1px solid var(--koos-blauw-tint);
    border-radius: var(--koos-radius-kaart);
    background-color: var(--koos-wit);
    font-family: var(--koos-font-body);
    font-size: 15px;
    color: var(--koos-tekst);
    cursor: pointer;
    overflow: hidden;
}

.gform_wrapper.gravity-theme input[type="file"]::file-selector-button {
    flex: 0 0 auto;
    order: 2;
    margin-left: auto;
    height: 30px;
    padding: 0 18px;
    border: 1.5px solid var(--koos-blauw);
    border-radius: var(--koos-radius-kaart);
    background-color: transparent;
    font-family: var(--koos-font-kop);
    font-weight: 700;
    font-size: 13px;
    color: var(--koos-blauw);
    cursor: pointer;
    transition: background-color var(--koos-transitie);
}

.gform_wrapper.gravity-theme input[type="file"]::file-selector-button:hover {
    background-color: var(--koos-tint-blauw);
}

.gform_wrapper.gravity-theme input[type="file"]:focus-visible {
    outline: 2px solid var(--koos-blauw);
    outline-offset: 2px;
}

/* De regel met toegestane bestandstypen eronder. */
.gform_wrapper.gravity-theme .gform_fileupload_rules {
    margin-top: 8px;
    font-size: 12px;
    line-height: 18px;
    color: var(--koos-tekst);
}

/* --- Verzendknop --- */

.gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.gform_wrapper.gravity-theme .gform_button {
    height: 48px;
    padding: 0 24px;
    border: 1.5px solid transparent;
    border-radius: var(--koos-radius-kaart);
    font-family: var(--koos-font-kop);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: var(--koos-letterspacing);
    cursor: pointer;
}

/* --- Validatie --- */

.gform_wrapper.gravity-theme .gfield_validation_message,
.gform_wrapper.gravity-theme .validation_message {
    font-size: 13px;
    line-height: 18px;
    border-radius: var(--koos-radius-tegel);
}


/*
 * Gravity Forms zet de veldhoogte via zijn eigen inline stylesheet, die na de
 * thema-CSS komt. Deze regel staat als laatste en houdt de velden op de 42px
 * uit de briefing.
 */
body .gform_wrapper.gravity-theme .gform_fields input[type="text"],
body .gform_wrapper.gravity-theme .gform_fields input[type="email"],
body .gform_wrapper.gravity-theme .gform_fields input[type="tel"],
body .gform_wrapper.gravity-theme .gform_fields input[type="number"],
body .gform_wrapper.gravity-theme .gform_fields input[type="url"],
body .gform_wrapper.gravity-theme .gform_fields input[type="file"],
body .gform_wrapper.gravity-theme .gform_fields select {
    height: 42px;
}


/* ==================================================================
   Aanmeldformulieren van Opvanguren in de KOOS-huisstijl
   ------------------------------------------------------------------
   Op Gastouder worden en Inschrijven gastouderopvang zet een script van
   koos.opvanguren.nl een formulier in de pagina (#pb-form). Het brengt
   eigen opmaak mee: vette zwarte labels, vaste breedtes van 120/300px en
   kale browservelden. Deze regels geven het dezelfde velden, labels en
   knop als de Gravity Forms hierboven.

   Hun stylesheet wordt na de onze in de pagina gezet en gebruikt #pb-form
   als selector; "body #pb-form" weegt net zwaarder.
   ================================================================== */

body #pb-form {
    font-family: var(--koos-font-body);
    font-size: 15px;
    color: var(--koos-tekst);
}

/* Velden naast elkaar zolang ze passen, anders onder elkaar. */
body #pb-form form div.pb-field-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 17px;
    margin: 0 0 16px;
}

body #pb-form div.pb-field-group::after,
body #pb-form .pb-spacer {
    display: none;
}

body #pb-form div.pb-field-group > span {
    float: none;
    flex: 1 1 240px;
    margin: 0;
}

/* Voorletters, tussenvoegsel, huisnummer en postcode: smaller. */
body #pb-form div.pb-field-group > span:has(> .short-text) {
    flex: 0 1 160px;
}

/*
 * Een groep met een los label en een veld of keuzes eronder: gewoon onder
 * elkaar, anders komt de rij-afstand van de flexbox tussen label en veld.
 */
body #pb-form form div.pb-field-group:has(> label) {
    display: block;
}

body #pb-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 11px;
    line-height: 18px;
    color: var(--koos-blauw);
}

body #pb-form input[type="text"],
body #pb-form input.text,
body #pb-form input.short-text,
body #pb-form input.date {
    width: 100%;
    height: 42px;
    padding: 0 18px;
    border: 1px solid var(--koos-blauw-tint);
    border-radius: var(--koos-radius-kaart);
    background-color: var(--koos-wit);
    font-family: var(--koos-font-body);
    font-size: 15px;
    color: var(--koos-tekst);
    box-sizing: border-box;
}

body #pb-form textarea {
    width: 100%;
    min-height: 160px;
    padding: 14px 18px;
    border: 1px solid var(--koos-blauw-tint);
    border-radius: var(--koos-radius-tegel);
    background-color: var(--koos-wit);
    font-family: var(--koos-font-body);
    font-size: 15px;
    color: var(--koos-tekst);
    box-sizing: border-box;
}

body #pb-form :is(input, textarea):focus {
    border-color: var(--koos-blauw);
    outline: none;
}

body #pb-form ::placeholder {
    color: var(--koos-placeholder);
}

/* --- Keuzerondjes en vinkvakjes --- */

/*
 * Rondje en label staan los naast elkaar in de groep, gescheiden door een
 * <br>. De <br> valt weg, zodat de keuzes op een regel staan.
 */
body #pb-form .optgroup {
    display: block;
    white-space: normal;
    line-height: 32px;
}

body #pb-form .optgroup br {
    display: none;
}

body #pb-form input[type="radio"],
body #pb-form input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0 8px 0 0;
    vertical-align: middle;
    accent-color: var(--koos-blauw);
}

/* Het label achter een keuze, en de akkoordregels met een vinkje erin. */
body #pb-form .optgroup label,
body #pb-form label:has(> input[type="checkbox"]) {
    display: inline;
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--koos-tekst);
}

body #pb-form .optgroup label {
    margin-right: 24px;
    white-space: nowrap;
}

/* --- Blokken per persoon ("Ouder 1", "Kind") --- */

body #pb-form form fieldset {
    margin: 0 0 24px;
    padding: 20px 24px 8px;
    border: 1px solid var(--koos-blauw-tint);
    border-radius: var(--koos-radius-tegel);
}

body #pb-form form legend {
    margin: 0;
    padding: 0 10px;
    font-family: var(--koos-font-kop);
    font-weight: 700;
    font-size: 18px;
    color: var(--koos-blauw);
}

body #pb-form .pb-children:not(:first-of-type) {
    border-top: 0;
}

body #pb-form a {
    color: var(--koos-kleur-link);
}

body #pb-form a:hover {
    color: var(--koos-kleur-link-hover);
}

body #pb-form .pb-add-child,
body #pb-form .pb-remove-child {
    display: inline-block;
    margin: 0 0 24px;
    font-family: var(--koos-font-kop);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
}

body #pb-form .pb-remove-child {
    color: var(--koos-oranje-donker);
}

/* --- Verzendknop, zoals .koos-knop--oranje --- */

body #pb-form input[type="submit"] {
    height: 48px;
    padding: 0 24px;
    border: 1.5px solid var(--koos-oranje);
    border-radius: var(--koos-radius-kaart);
    background-color: var(--koos-oranje);
    font-family: var(--koos-font-kop);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: var(--koos-letterspacing);
    color: var(--koos-wit);
    cursor: pointer;
    transition: background-color var(--koos-transitie), border-color var(--koos-transitie);
}

body #pb-form input[type="submit"]:hover {
    background-color: var(--koos-oranje-donker);
    border-color: var(--koos-oranje-donker);
}

body #pb-form .errors {
    flex: 0 0 100%;
    font-size: 13px;
    line-height: 18px;
    color: #C62828;
}

body #pb-form .error {
    border: 1px solid #C62828 !important;
}

/* Zoekpagina: filter op soort resultaat (Alles, Locaties, Pagina's, Vacatures). */
.koos-zoekpagina__soorten {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.koos-zoekpagina__soorten a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--koos-blauw-tint);
    border-radius: var(--koos-radius-pil);
    font-family: var(--koos-font-semi);
    font-size: 14px;
    color: var(--koos-blauw);
    text-decoration: none;
}

.koos-zoekpagina__soorten a span {
    opacity: 0.7;
}

.koos-zoekpagina__soorten a:hover {
    background-color: var(--koos-blauw-licht);
}

.koos-zoekpagina__soorten a.is-actief {
    background-color: var(--koos-blauw);
    border-color: var(--koos-blauw);
    color: var(--koos-wit);
}

.koos-zoekpagina__item .koos-bovenkop {
    display: block;
    margin-bottom: 4px;
}

.koos-zoekpagina__leeg + .koos-knoppen {
    margin: 20px 0 8px;
}

/* Paginanummers onder de zoekresultaten: dezelfde knoppen als bij de locaties. */
.search .navigation.pagination {
    margin-top: 8px;
}

.search .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.search .nav-links .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--koos-blauw-tint);
    border-radius: var(--koos-radius-pil);
    background-color: var(--koos-wit);
    color: var(--koos-blauw);
    font-family: var(--koos-font-kop);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background-color var(--koos-transitie), border-color var(--koos-transitie);
}

.search .nav-links a.page-numbers:hover,
.search .nav-links a.page-numbers:focus-visible {
    border-color: var(--koos-blauw);
    background-color: var(--koos-tint-blauw);
}

.search .nav-links .page-numbers.current {
    background-color: var(--koos-blauw);
    border-color: var(--koos-blauw);
    color: var(--koos-wit);
}

.search .nav-links .page-numbers.dots {
    border: 0;
    min-width: 0;
    padding: 0 4px;
}

/* ==================================================================
   Zoekschakelaar: plaats of adres / naam van de locatie
   (koos_zoekwijze_keuze() en js/koos-header.js)
   ================================================================== */

.koos-zoekwijze {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* Zelfde gewicht als "Vind een locatie in de buurt" (.koos-zoeker__label). */
.koos-zoekwijze__label {
    flex: 0 0 auto;
    padding: 0;
    font-family: var(--koos-font-semi);
    font-weight: 700;
    font-size: 14px;
    color: var(--koos-blauw);
}

/* Een pil met twee helften; het groene blok schuift onder de gekozen helft. */
.koos-zoekwijze__schakelaar {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    padding: 4px;
    border: 1px solid rgba(var(--koos-groen-rgb), 0.6);
    border-radius: var(--koos-radius-pil);
    background-color: var(--koos-wit);
    isolation: isolate;
}

.koos-zoekwijze__blok {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    z-index: -1;
    border-radius: var(--koos-radius-pil);
    background-color: var(--koos-groen);
    box-shadow: 0 3px 10px rgba(var(--koos-groen-rgb), 0.4);
}

/* Pas animeren als hij staat: anders schuift hij bij het laden van links in. */
.koos-zoekwijze.is-klaar .koos-zoekwijze__blok {
    transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), width 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.koos-zoekwijze__optie {
    position: relative;
    display: block;
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
}

.koos-zoekwijze__optie input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.koos-zoekwijze__optie span {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    border-radius: var(--koos-radius-pil);
    font-family: var(--koos-font-semi);
    font-size: 14px;
    /* Blauw en niet oranje: kleine oranje tekst op wit leest slecht. */
    color: var(--koos-blauw);
    white-space: nowrap;
    transition: color 0.25s ease;
}

.koos-zoekwijze__optie:hover span {
    color: var(--koos-groen-donker);
}

.koos-zoekwijze__optie input:checked + span {
    color: var(--koos-wit);
}

.koos-zoekwijze__optie input:focus-visible + span {
    outline: 2px solid var(--koos-blauw);
    outline-offset: 2px;
}

.koos-zoekwijze__veld[hidden] {
    display: none !important;
}

/* Het zoekveld dat erbij hoort schuift kort in beeld. */
.koos-zoekwijze__veld.is-binnen {
    animation: koos-zoekveld-in 0.35s ease-out;
}

@keyframes koos-zoekveld-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .koos-zoekwijze.is-klaar .koos-zoekwijze__blok,
    .koos-zoekwijze__optie span {
        transition: none;
    }

    .koos-zoekwijze__veld.is-binnen {
        animation: none;
    }
}

/* Smal scherm: de schakelaar over de volle breedte, twee gelijke helften. */
@media (max-width: 520px) {

    .koos-zoekwijze__schakelaar {
        display: flex;
        width: 100%;
    }

    .koos-zoekwijze__optie {
        flex: 1;
    }

    .koos-zoekwijze__optie span {
        justify-content: center;
        width: 100%;
        padding: 0 8px;
        font-size: 13px;
    }
}

/* ==================================================================
   Markering in lopende tekst
   ==================================================================

   Een korte regel die moet opvallen, zoals de openingstijden op de
   landingspagina: <p class="koos-tekst-markering">. Oranje vlak.
*/
p.koos-tekst-markering {
    display: inline-block;
    margin-bottom: 18px;
    padding: 10px 20px;
    border-radius: 999px;
    background-color: var(--koos-oranje);
    color: var(--koos-wit);
    font-family: var(--koos-font-kop);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
}


@media (max-width: 600px) {

    p.koos-tekst-markering {
        font-size: 16px;
        padding: 9px 16px;
    }
}

/*
 * iOS zoomt in op elk veld met een kleinere letter dan 16px.
 */
@media (max-width: 1199px) {

    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/*
 * Lange samenstellingen ("kinderopvangorganisaties") mogen niet uit een kaart
 * steken: afbreken waar het kan, en anders op een willekeurige plek.
 */
.koos-kaart__titel,
.koos-kaart h2,
.koos-kaart h3 {
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Lopende tekst alleen als het echt niet past, anders leest hij hakkelig. */
.koos-kaart__tekst {
    overflow-wrap: anywhere;
}

/* Onder 600px geen ronde stickers: daar schuiven ze over de tekst en de foto's. */
@media (max-width: 599px) {

    .koos-badge-rond {
        display: none !important;
    }
}