/*
 * Responsive verbeteringen BOES Branding.
 * Doel: bedienbaar op telefoon en tablet, zonder het ontwerp te veranderen.
 * Alles staat hier en niet in het thema, zodat een thema-update het niet overschrijft.
 */

/* ---------------------------------------------------------------
 * 1. Tikdoelen minimaal 44 pixels (richtlijn van Apple en WCAG 2.5.8)
 * --------------------------------------------------------------- */

/*
 * Hamburgerknop was 24x24. Een vaste maat van 44 duwde de knop onder het logo,
 * dus het icoon blijft precies waar het staat en alleen het onzichtbare
 * tikvlak eromheen wordt 44x44.
 */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
    position: relative;
}

.wp-block-navigation__responsive-container-open::after,
.wp-block-navigation__responsive-container-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/* Knoppen zoals "Plan adviesgesprek" waren 39 tot 42 pixels hoog. */
.wp-block-greyd-buttons a.button,
.wp-block-button__link,
.wp-element-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Menu-items in kop en voet waren 29 pixels hoog, en "blog" was maar 36 breed. */
.wp-block-navigation-item__content {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Titels van blogkaarten waren 36 pixels hoog. */
.wp-block-post-title a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Paginanummers onder een blogoverzicht waren 19x19 en 11x19. */
.pgn_number,
.pgn_previous,
.pgn_next {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/*
 * Social-iconen zijn 28 tot 42 pixels. Het icoon zelf blijft precies zoals het is,
 * alleen het onzichtbare tikvlak eromheen wordt 44x44. Zo verandert de vormgeving niet.
 */
.wp-social-link .wp-block-social-link-anchor {
    position: relative;
}

.wp-social-link .wp-block-social-link-anchor::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/* De iconen staan dicht op elkaar, dus wat extra ruimte voorkomt misklikken. */
@media (max-width: 1023px) {
    ul.wp-block-social-links {
        gap: 12px;
    }
}

/* ---------------------------------------------------------------
 * 2. Tablet: het menu viel over twee regels
 *
 * Het menu is ongeveer 1140 pixels breed en de header maar 768, dus op een
 * tablet past het nooit naast het logo. Daarom gebruikt de tablet nu hetzelfde
 * hamburgermenu als de telefoon. Dit zijn dezelfde regels die WordPress zelf
 * onder 600 pixels toepast, alleen tot 1023 pixels doorgetrokken.
 * --------------------------------------------------------------- */
/* Het thema zet hier zelf een display op, vandaar important: dit is een aan-uitschakelaar. */
@media (min-width: 600px) and (max-width: 1023px) {
    .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }

    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open {
        display: flex !important;
        flex-direction: column;
        overflow: auto;
    }

    /* Het thema geeft de menuregels alleen onder 600 pixels deze ruimte. */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        padding: 15px 45px;
    }
}

/* ---------------------------------------------------------------
 * 3. Tabellen op mobiel: woorden werden middenin afgebroken
 *
 * De begrippenlijst in de algemene voorwaarden heeft drie kolommen:
 * begrip, dubbele punt, uitleg. Op een smal scherm knepen die zo dicht dat
 * woorden braken. Onder de 782 pixels staan begrip en uitleg nu onder elkaar
 * en verdwijnt de dubbele punt, die daar niets meer toevoegt.
 * De selector nth-child(2):nth-last-child(2) raakt alleen de middelste cel
 * van een rij met precies drie kolommen.
 * --------------------------------------------------------------- */
@media (max-width: 781px) {
    .wp-block-table table,
    .wp-block-table tbody,
    .wp-block-table tr,
    .wp-block-table td {
        display: block;
        width: auto;
    }

    .wp-block-table td:nth-child(2):nth-last-child(2) {
        display: none;
    }

    .wp-block-table tr {
        padding: 0.75rem 0;
    }

    .wp-block-table td:first-child {
        font-weight: 700;
    }

    .wp-block-table td,
    .wp-block-table th {
        word-break: normal;
        overflow-wrap: break-word;
        hyphens: none;
    }
}

/* ---------------------------------------------------------------
 * 4. Kleine dingen die op elk scherm helpen
 * --------------------------------------------------------------- */

/* Beeld mag nooit breder worden dan zijn kolom. */
img,
video {
    max-width: 100%;
    height: auto;
}

/* De link "Naar de inhoud" was onvindbaar. Nu zichtbaar zodra je tabt. */
.skip-link.screen-reader-text:focus {
    width: auto;
    height: auto;
    padding: 12px 20px;
    clip: auto;
    clip-path: none;
    z-index: 100000;
}

/* ---------------------------------------------------------------
 * 5. Blokken die hun mobiele of tussenliggende waarden missen
 *
 * Sectie 3 loste de kloof tussen Greyd's eigen mobielgrens (575.98px)
 * en WordPress' eigen kolomstapel-grens (782px) al op voor tabellen.
 * Dezelfde kloof veroorzaakt hier tekst en secties die over de rand
 * van hun telefoon- of tabletscherm heen lopen: het blok is al
 * gestapeld, maar houdt zijn bureaubladmarges aan.
 * --------------------------------------------------------------- */

/* --- R1: voettekst "Algemene voorwaarden" -----------------------
 * De laatste regel van de voet (Website & Designs / Fotografie /
 * Algemene voorwaarden) staat vast naast elkaar (flexWrap: nowrap)
 * en past niet op een telefoon. Geldt voor alle pagina's, want dit
 * is een gedeeld sjabloononderdeel (wp_template_part id 8).
 * --------------------------------------------------------------- */
@media (max-width: 599.98px) {
    footer .wp-block-group.aligncenter.has-foreground-background-color {
        flex-wrap: wrap;
    }
}

/* --- R2: Calendly-widget breekt uit zijn padding -----------------
 * Aangepast t.o.v. het voorstel: een negatieve margin gebaseerd op
 * de padding-variabele loste dit niet op. In de browser bleek de
 * echte oorzaak dat Calendly's eigen script inline
 * "min-width:320px" op de widget zet (gelijk aan de viewport op het
 * moment van laden), wat de beschikbare 256px van de cover altijd
 * verslaat, ongeacht margin. Geverifieerd met een style-override in
 * Playwright: alleen min-width en width resetten maakt de widget
 * scrollWidth-neutraal.
 * --------------------------------------------------------------- */
@media (max-width: 419.98px) {
    .calendly-inline-widget {
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* --- R3: homepage-hero "Op reis naar je merk!" -------------------
 * Bevestigde oorzaak: .gs_YSDGTQ reset zijn marge (-200px boven)
 * al naar 0 onder Greyd's eigen 575.98px-grens. Tussen 576 en 700px
 * is de hero al gestapeld maar mist die reset nog. We spiegelen
 * hier gewoon de bestaande sm-waarde van het blok zelf.
 * Gescopet op body.home: dezelfde classnaam bestaat ook op
 * over-boes met andere waarden, zie R4.
 *
 * De margin-reset loste de verticale sprong op maar niet alles: met
 * de marge al op 0 bleven .gs_YSDGTQ, .gs_cu8oGB (intro-alinea),
 * .gs_QkYnrm (pillenrij) en .gs_qgKICt (de rij losse pillen daarin)
 * toch nog rechts uitsteken, altijd tot precies dezelfde 682px,
 * ongeacht de werkelijke viewport (600 of 640). In de browser
 * getest: dit is geen margin- of breedteprobleem maar een verkeerd
 * berekende cross-as-uitlijning van deze flex-kolom
 * (align-items:flex-end op de omringende .gs_i6opNY /
 * .gs_QkYnrm), die de kinderen positioneert alsof de kolom ~650px
 * breed is in plaats van de echte 536-576px. Bevestigd met
 * align-self:stretch alleen (juiste linkerrand, verkeerde breedte
 * van exact 650px) en width:100% alleen (juiste breedte, verkeerde
 * linkerrand): pas de combinatie van align-self:stretch, width:100%
 * en max-width:100% samen geeft op zowel 600 als 640px de juiste
 * rand aan beide kanten. De tekst blijft rechts uitgelijnd via zijn
 * eigen text-align:right, dus visueel verandert er niets.
 * --------------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 699.98px) {
    body.home .gs_YSDGTQ {
        margin: 0 !important;
    }

    body.home .gs_i6opNY {
        margin-right: 0 !important;
    }

    body.home .gs_YSDGTQ,
    body.home .gs_cu8oGB,
    body.home .gs_QkYnrm,
    body.home .gs_qgKICt {
        align-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* --- R4: over-boes-hero "Alles Over" ------------------------------
 * Andere blok-instantie dan R3 met dezelfde classnaam. Eigen
 * sm-reset (0/0/0/0) dekt alleen <575.98px, dus dezelfde kloof
 * moet hier apart dicht tot 1600px (desktop is bij 1728px al
 * bevestigd schoon). Body-klasse page-id-363 gecontroleerd via
 * "curl | grep body class" op de lokale site, klopt.
 * .gs_J1HVDq had daarnaast een vaste padding-left van 400px die
 * NOOIT een responsive waarde had, ook niet op mobiel: die moet
 * dus op elke smalle tot middelgrote breedte weg, niet alleen in
 * de 576-1600 kloof.
 * --------------------------------------------------------------- */
@media (max-width: 1599.98px) {
    body.page-id-363 .gs_J1HVDq {
        padding-left: 0 !important;
    }
}

@media (min-width: 576px) and (max-width: 1599.98px) {
    body.page-id-363 .gs_YSDGTQ {
        margin: 0 !important;
    }

    body.page-id-363 .gs_J1HVDq {
        margin-right: 0 !important;
    }
}

/* --- R5: blogoverzicht-kop "Lees hier onze Blogs" -----------------
 * Vaste marges (150px boven, -160px rechts, 275px links) zonder
 * ENIGE responsive waarde in de blok-attributen: dit is dus geen
 * spiegeling van een auteurswaarde maar een nieuwe reset. Werkt op
 * elke geteste breedte fout, op 1728px na.
 * Zelfde specificiteitsprobleem als bij R9/R3: een kale ".gs_Ksid2x"
 * heeft dezelfde specificiteit als Greyd's eigen inline regel, en
 * die staat later in de paginabron, dus won bij een kale
 * class-selector alsnog (margin-top/right/left bleven de originele
 * 150px/-160px/auto). Opgelost met scope op de blogpagina zelf
 * (body.page-id-361, gecontroleerd via de body-class op de lokale
 * site) voor hogere specificiteit.
 * --------------------------------------------------------------- */
@media (max-width: 1599.98px) {
    body.page-id-361 .gs_Ksid2x {
        margin: 0 !important;
    }
}

/* --- R6: portfolio-koptekst (beeld + titel) stapelt nooit ---------
 * Gedeeld patroonblok op alle portfolio-detailpagina's. De rij staat
 * vast op flexWrap: nowrap zonder responsive override. Geen media
 * query nodig: wrap grijpt vanzelf alleen in als het niet past, dus
 * dit is ook veilig op de drie pagina's waar de titel kort genoeg
 * is om nooit te breken (vrijwillige-energie, graceland-festival,
 * foda-silva).
 *
 * Op voedselboskabouters (langste titel, 20 tekens) bleek dit niet
 * genoeg: de tekstkolom (.gs_wvBOoT, max-width:50%) is zelf wel
 * correct 50% breed, maar de kop en intro-alinea erin negeren dat.
 * Zelfde patroon als R3/R9: kinderen van een flex-kolom zonder
 * align-self:stretch nemen hun eigen inhoudsbreedte in plaats van de
 * breedte van hun kolom, dus de kop bleef zijn ongebroken 382px
 * breed in een kolom van 160px. Bevestigd in de browser: pas met
 * align-self:stretch plus min-/max-width op zowel de kolom als zijn
 * kinderen volgt de kop de kolom en breekt de tekst netjes af.
 * --------------------------------------------------------------- */
.gs_KYTgIx {
    flex-wrap: wrap !important;
}

.gs_wvBOoT,
.gs_wvBOoT > * {
    min-width: 0 !important;
    max-width: 100% !important;
    align-self: stretch !important;
}

/* --- R7: pillar-academy videoblok met vaste maat ------------------
 * greyd/image-blok (een .mp4) met inline width:500px/height:770px
 * en geen responsive waarde. Geen <video>-tag, dus de bestaande
 * regel in sectie 4 (img, video { max-width:100% }) raakt dit niet.
 * Geen media query nodig, max-width:100% is vanzelf onschadelijk
 * zodra de kolom breder is dan 500px.
 * --------------------------------------------------------------- */
.gs_hkeDBo {
    max-width: 100% !important;
    height: auto !important;
}

/* --- R8: aanbod, "Halte"-secties met lege sm-breedte --------------
 * Elke Halte-sectie is een beeld- en een tekstkolom van elk 40%
 * breed. Beide kolommen hebben in de blok-attributen wel een
 * "responsive.sm.width", maar de waarde staat leeg: er wordt dus
 * geen regel gegenereerd en de 40% blijft altijd gelden. De rij zelf
 * kan al stapelen (flexWrap: wrap staat aan), dus 100% breedte op de
 * kolommen is genoeg. Halte 1 heeft langere tekst en breekt pas
 * later dan Halte 3 en 5, vandaar twee verschillende grenzen.
 * Gescopet op body.page-id-300 (alleen de aanbod-pagina, gecontroleerd
 * via de body-class op de lokale site).
 * --------------------------------------------------------------- */
@media (max-width: 639.98px) {
    body.page-id-300 div.wp-block-group.alignwide:nth-of-type(2) > div.wp-block-group.is-vertical {
        width: 100% !important;
    }
}

@media (max-width: 479.98px) {
    body.page-id-300 div.wp-block-group.alignwide:nth-of-type(4) > div.wp-block-group.is-vertical,
    body.page-id-300 div.wp-block-group.alignwide:nth-of-type(6) > div.wp-block-group.is-vertical {
        width: 100% !important;
    }
}

/* --- R9: home, "Waarom helpen wij alleen maatschappelijke merken?"
 * In het voorstel nog zonder diagnose, alsnog gevonden via
 * devtools-onderzoek (getComputedStyle plus alle matchende
 * CSS-regels van het element opgevraagd in Playwright). Greyd zet
 * zelf al een regel neer: ".gs_ALPxIw { min-width:100% !important }"
 * onder 1023.98px, bedoeld om de beeldkolom vol te laten lopen
 * zodra hij stapelt. Op 320 en 360px lost die 100% niet op tegen de
 * eigen ouder (256px breed op 320px) maar tegen een bredere
 * referentie: het element werd gemeten op 341.656px, breder dan de
 * viewport zelf, en dat te brede resultaat wordt vervolgens
 * gecentreerd, met overflow aan beide kanten tot gevolg. Vanaf 390px
 * valt dat toevallig weer binnen de viewport.
 * Extra complicatie, pas zichtbaar met dezelfde isMobile/touch-context
 * als de scanner gebruikt: dit mu-plugin-bestand laadt in de
 * paginabron VOOR Greyd's eigen inline <style>-blok. Bij gelijke
 * specificiteit en evenveel !important wint bij een gelijkspel de
 * regel die later in de bron staat, dus Greyd's ".gs_ALPxIw"
 * (specificiteit 0-1-0) versloeg een eerdere poging met dezelfde
 * specificiteit alsnog. Opgelost door de eigen regel zwaarder te
 * maken dan een kale class-selector, gecombineerd met scope op de
 * homepage (dezelfde class bestaat ook elders, zie R3/R4).
 * De beeldkolom bleek niet de enige: de tekstkolom ernaast (zelfde
 * ouder .gs_qo7K8e, klasse "is-vertical" maar zonder eigen gs_-naam)
 * overflowt om dezelfde reden, een flex-kolom-ouder die zijn kinderen
 * niet naar hun eigen breedte terugbrengt. Daarom richt de regel zich
 * op beide kolommen via de gedeelde ouder in plaats van alleen op
 * .gs_ALPxIw. Nadat de kolomwrapper zelf goed was, bleef de kop
 * ("Waarom helpen wij...") daarbinnen nog 22px te breed staan: die
 * h2 heeft standaard min-width:auto (content-based) en moest apart
 * hetzelfde min-width/max-width krijgen. Bevestigd in de browser met
 * de isMobile/touch/deviceScaleFactor-instellingen van scan.cjs op
 * 320, 360 en 390px: scrollWidth gelijk aan viewport.
 * --------------------------------------------------------------- */
@media (max-width: 389.98px) {
    body.home .gs_qo7K8e .is-vertical,
    body.home .gs_qo7K8e h2 {
        min-width: 0 !important;
        max-width: 100% !important;
        align-self: stretch !important;
    }
}

/* ---------------------------------------------------------------
 * 6. Kolommen die niet stapelden, en woorden die middenin braken
 *
 * WordPress zet kolommen onder elkaar onder 782 pixels, maar het thema
 * overschrijft dat. Daardoor stonden op 600 pixels drie kaarten naast elkaar
 * van 163 pixels breed, met tekstkolommen van 82 pixels. Geen enkel element
 * viel buiten beeld, dus de meting zag het niet, maar het was onleesbaar.
 *
 * Daarbij stond word-break op break-word, waardoor woorden middenin afbraken
 * ("consiste nt blijft", "Plan adviesgespre k"). Normaal breekt tekst op een
 * spatie; alleen een woord dat echt niet past mag nog breken.
 * --------------------------------------------------------------- */
@media (max-width: 781px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) {
        flex-wrap: wrap !important;
    }

    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

body,
p,
li,
h1, h2, h3, h4, h5, h6,
.wp-block-navigation-item__label {
    word-break: normal;
    overflow-wrap: break-word;
}

/* Knoppen breken alleen tussen woorden, nooit middenin een woord. */
.wp-block-greyd-buttons a.button,
.wp-block-button__link,
.wp-element-button {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

/* ---------------------------------------------------------------
 * 7. Type- en spacing-tokens: eenduidige maten per rol
 *
 * De typografie was al vloeiend (schaalt netjes mee met de viewport),
 * maar dezelfde HTML-tag leverde op verschillende pagina's een andere
 * maat op (h2 kwam voor op 30, 40, 50, 65 en 88px), en 11% van de
 * alinea's miste de Lato-font-family en viel terug op de systeemfont.
 * Deze sectie zet de meest gebruikte maten vast als tokens, gekoppeld
 * aan een rol-class in plaats van aan het koppenniveau, zodat de
 * tagstructuur vrij blijft voor SEO/toegankelijkheid. Zie
 * stijl-analyse.md voor de volledige meting.
 *
 * Bewust NIET aangepast, om de merkstijl niet plat te slaan:
 * - H3/Blushes (schriftlettertype voor kaartlabels en citaatnamen)
 *   blijft een bewuste derde letter naast kop en body, dat is geen
 *   inconsistentie maar een vast patroon met precies één rol.
 * - De drie knopvarianten (groen/blauw, roze/blauw, roze/wit) staan
 *   hier niet vast op één kleur: de roze/blauw-variant komt maar op
 *   2 pagina's voor en is een blok-instelling, geen CSS-regel om hier
 *   dwingend te herschrijven zonder de bewuste pagina's na te lopen.
 * - Containerbreedte (1344px vs edge-to-edge) en het verticaal ritme
 *   tussen secties raken bestaande, deels bewust overlappende
 *   secties (R3/R4/R5/R9 in sectie 5): hier alleen tokens klaarzetten
 *   voor nieuwe content, niet met !important over bestaande secties
 *   heen zetten.
 * --------------------------------------------------------------- */
:root {
    --boes-font-kop: "BOESbranding V3", cursive;
    --boes-font-body: "Lato", sans-serif;

    --boes-maat-hero: clamp(3.15rem, 2rem + 4vw, 5.5rem);   /* 88px @1440 */
    --boes-maat-h1: clamp(2.35rem, 1.6rem + 2.8vw, 4.06rem); /* 64.96px @1440 */
    --boes-maat-h2: clamp(1.9rem, 1.3rem + 2.2vw, 3.13rem);  /* 50.08px @1440 */
    --boes-maat-h3: clamp(1.55rem, 1.1rem + 1.6vw, 2.5rem);  /* 40px @1440 */
    --boes-maat-h4: clamp(1.2rem, 0.9rem + 1vw, 1.88rem);    /* 30.08px @1440 */
    --boes-maat-lead: clamp(1.05rem, 0.9rem + 0.5vw, 1.75rem); /* 28px @1440 */
    --boes-maat-body: clamp(0.95rem, 0.85rem + 0.35vw, 1.25rem); /* 20px @1440 */
    --boes-maat-klein: 1rem; /* 16px, niet fluid: voetnoten/copyright */

    --boes-ruimte-1: 1rem;    /* 16px */
    --boes-ruimte-2: 1.5rem;  /* 24px */
    --boes-ruimte-3: 2rem;    /* 32px */
    --boes-ruimte-4: 3rem;    /* 48px */
    --boes-ruimte-5: 5rem;    /* 80px */
    --boes-ruimte-6: 7.5rem;  /* 120px */

    --boes-container: 1344px;
}

/* Rol-classes: te gebruiken naast het koppenniveau, niet in plaats ervan.
 * Voorbeeld: <h2 class="boes-h1">...</h2> als een h2 er visueel als H1
 * uit moet zien, zonder de documentstructuur te breken. Nergens in
 * bestaande content toegepast: dit zijn klaargezette tokens voor
 * nieuwe of herziene blokken, geen ingreep in bestaande pagina's. */
.boes-hero { font-family: var(--boes-font-kop); font-size: var(--boes-maat-hero); }
.boes-h1 { font-family: var(--boes-font-kop); font-size: var(--boes-maat-h1); }
.boes-h2 { font-family: var(--boes-font-kop); font-size: var(--boes-maat-h2); }
.boes-h3 { font-family: var(--boes-font-kop); font-size: var(--boes-maat-h3); }
.boes-h4 { font-family: var(--boes-font-body); font-size: var(--boes-maat-h4); }
.boes-lead { font-family: var(--boes-font-body); font-size: var(--boes-maat-lead); }

/* Vangnet: alinea's zonder eigen font-family (11% van de metingen, o.a.
 * testimonial-tekst en een deel van de introtekst) vallen terug op de
 * systeemfont. Dit dwingt Lato af als er niets anders is opgegeven,
 * zonder bestaande, bewust andere alinea's (bijv. Blushes-citaten) te
 * raken: die zetten hun eigen font-family al expliciet, en winnen dus
 * gewoon op specificiteit/bron-volgorde van deze algemene regel. */
.entry-content p {
    font-family: var(--boes-font-body);
}

/* ---------------------------------------------------------------
 * 8. Kop en voet: audit 18-9, gemeten op 320 t/m 1440px
 *
 * Zie kop-voet-analyse.md voor de volledige meting. K1 en K3 hieronder
 * repareren twee eigen regressies (logo duwt de hamburger van zijn
 * regel af op smalle telefoons, en de kop breekt ongemerkt in twee
 * regels tussen 1024 en 1243px); de gaten in het concept-document
 * (190px resp. 1249.98px) waren nog een schatting, hier vervangen
 * door in de browser gemeten exacte omslagpunten (zie header-wrap-
 * probe.cjs / header-mobile-probe2.cjs in resp/). K4, V1 en V2 zijn
 * losse, al bevestigde bugs uit dezelfde audit.
 *
 * Bewust NIET overgenomen uit het concept-document:
 * - K2 (kophoogte "auto" i.p.v. vaste 110px op mobiel): de analyse
 *   noemt dit zelf al een aanname, niet een gemeten vaste waarde, en
 *   het is niet nodig om de twee gemelde bugs op te lossen (de kop
 *   blijft één regel met K1 alleen, ook op 320px). Het verandert wel
 *   de hoogte van het blauwe kopvlak op elke pagina, dus dat is een
 *   apart ontwerpgesprek, geen bugfix.
 * - Het voorstel om K1 door te trekken tot 599.98px met een vaste
 *   190px: gemeten (header-mobile-probe.cjs) dat de kop al vanaf
 *   384px vanzelf één regel is, dus alles boven 384px blijft hier
 *   bewust ongemoeid.
 * --------------------------------------------------------------- */

/* --- K1: logo dringt de hamburger van zijn regel af tot 384px -----
 * Logo groeit fluid mee (flexbox-shrink op de .wp-block-site-logo-
 * wrapper) tot een cap van 312px (Greyd-regel ".gs_0kqDO0 { max-
 * width:312px }"), en die cap wordt al op 360px bereikt: ruim voordat
 * er nog 24px vrij is voor de hamburger ernaast. Gemeten met
 * header-mobile-probe.cjs, bittewijs 375-390px: de kop breekt tot en
 * met 383px, is vanaf 384px vanzelf één regel (logo eindigt dan exact
 * waar de hamburger begint, geen ruimte over). Nodige logo-breedte is
 * dus telkens (viewport - 72px): 24px linkerpadding + 24px hamburger
 * + 24px rechterpadding. Dat is precies wat hieronder staat, dus het
 * logo krimpt nooit verder dan nodig en raakt 384px en breder niet:
 * daar is calc(100vw - 72px) al >= 312px, dus de bestaande Greyd-cap
 * blijft gewoon leidend.
 * Selector met twee klassen (niet een kale ".gs_0kqDO0") om de
 * !important-gelijkspel met Greyds eigen latere <style>-blok te
 * winnen op specificiteit, dezelfde aanpak als R9 in sectie 5.
 * --------------------------------------------------------------- */
@media (max-width: 383.98px) {
    .wp-block-site-logo.gs_0kqDO0 {
        max-width: calc(100vw - 72px) !important;
    }
}

/* --- K3: kop breekt ongemerkt in twee regels tussen 1024-1243px --
 * De hamburgergrens uit sectie 2 stopt bij 1023px, maar de volledige
 * desktopnav past pas vanaf 1244px naast het logo (gemeten met
 * header-wrap-probe.cjs, per-pixel bevestigd met header-wrap-
 * probe2.cjs: bij 1243px staat de navrij nog onder het logo, bij
 * 1244px niet meer). Dat liet een venster van 220px (1024-1243)
 * waarin de kop zonder hamburger tóch in twee regels viel. Hier
 * dezelfde regels als sectie 2, alleen doorgetrokken tot 1243.98px.
 * --------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1243.98px) {
    .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }

    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open {
        display: flex !important;
        flex-direction: column;
        overflow: auto;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        padding: 15px 45px;
    }
}

/* --- K4: binnenmarge van het opengeklapte menu werkt niet op tablet
 * Sectie 2 bedoelt hier al 15px/45px te geven, maar gemeten: 45px
 * links op 390px, 0px op 768px, terwijl beide onder dezelfde regel
 * (600-1023px) vallen. Het thema wint kennelijk de specificiteits-
 * strijd op dit deel van het bereik. Zelfde regel, zwaarder gemaakt
 * met de eigen containerklasse ervoor zodat hij altijd wint.
 * --------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 1023px) {
    .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation-item
        .wp-block-navigation-item__content {
        padding: 15px 45px !important;
    }
}

/* --- V1: juridische voetlinks vallen soms onder de 44px-norm ------
 * "CC-BY-NC-ND" en "Algemene voorwaarden" zijn platte links in een
 * paragraaf, geen navigatie-item, dus sectie 1 raakt ze niet. Gemeten
 * hoogte: 23px op 360, 390, 1280 en 1440px (52px op de breedtes
 * waar de tekst toevallig doorloopt naar een tweede regel). Zelfde
 * aanpak als sectie 1 voor de knoppen, hier gescopet op de
 * onderste voetbalk (dezelfde ouder-selector als R1 in sectie 5).
 * --------------------------------------------------------------- */
footer .wp-block-group.aligncenter.has-foreground-background-color a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* --- V2: rechterkolom van de voet hangt scheef op mobiel ---------
 * "Ga direct naar" en "Volg ons" zitten samen in een groep met
 * is-content-justification-right. Onder de WP-kolomgrens (782px)
 * stapelt de voet toch al, maar deze groep blijft naar rechts duwen:
 * op 390px begint de inhoud pas bij x=116 van de 390px breedte,
 * terwijl de linkerkolom (logo/contact) wel de volle breedte
 * gebruikt. Op smal scherm hoort deze groep links te beginnen, net
 * als de kolom ernaast.
 * --------------------------------------------------------------- */
@media (max-width: 781px) {
    footer .wp-block-group.is-content-justification-right {
        justify-content: flex-start !important;
    }
}

/* ---------------------------------------------------------------
 * 9. Menu past weer op laptops, en lucht om de hamburger
 *
 * Het menu had 1244 pixels nodig om naast het logo te passen, dus op een
 * laptop van 1024 tot 1243 pixels kreeg je een hamburger terwijl er ruimte
 * zat. Dat kwam door de binnenmarge van 28 pixels links en rechts per
 * menu-item, bij een letter van 28 pixels. In dat bereik iets krapper gezet,
 * zodat de zes items wel passen. Buiten dat bereik verandert er niets.
 * --------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1243.98px) {
    .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: flex !important;
    }

    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;
    }

    header .wp-block-navigation-item__content {
        padding-left: 12px;
        padding-right: 12px;
        font-size: 24px;
        white-space: nowrap;
    }
}

/*
 * De hamburger plakte op smalle schermen tegen het woord Branding aan.
 * Het thema zet hier zelf marge 0, vandaar de zwaardere selector.
 */
@media (max-width: 599.98px) {
    header nav .wp-block-navigation__responsive-container-open,
    header .wp-block-navigation__responsive-container-open {
        margin-left: 14px !important;
    }

    header .wp-block-site-logo img {
        max-width: calc(100vw - 96px);
    }
}

/* ---------------------------------------------------------------
 * 10. De voettekst liep niet in de pas
 *
 * Het kolommenblok in de voet had padding 48px 0px, dus geen ruimte links en
 * rechts. Daardoor plakten "Ga direct naar" en de menulinks tegen de rand,
 * terwijl de contactgegevens en de credits er wel 24 pixels van af bleven.
 * Nu houdt alles in de voet dezelfde marge aan als de rest van de site, en
 * staan de credits links uitgelijnd in plaats van gecentreerd.
 * --------------------------------------------------------------- */
@media (max-width: 781px) {
    footer.wp-block-template-part .wp-block-columns {
        padding-left: 24px;
        padding-right: 24px;
    }

    footer.wp-block-template-part .wp-block-group.aligncenter {
        justify-content: flex-start;
        padding-left: 24px;
        padding-right: 24px;
    }

    footer.wp-block-template-part .wp-block-group.aligncenter p {
        text-align: left;
    }

    /*
     * De contactgegevens stonden ingesprongen doordat het thema ze een eigen
     * linkermarge geeft die alleen voor de brede weergave bedoeld is.
     */
    footer.wp-block-template-part .wp-block-column > p,
    footer.wp-block-template-part .wp-block-column > div {
        margin-left: 0 !important;
        padding-left: 0 !important;
        max-width: 100%;
    }
}