/*
 * main.css — ontwerptokens, typografie, header en footer.
 *
 * Wordt na reset.css op elke pagina ingeladen. Alles wat op élke pagina staat
 * hoort hier: de variabelen, de fonts, de header en de footer. Alles wat maar
 * op één soort pagina staat hoort in het CSS-bestand van die template.
 *
 * Klassenamen zijn camelCase (baserules regel 2).
 */

/* ==================================================================
 * Fonts
 *
 * Geomanist, lokaal geserveerd uit inc/fonts/. Geen Google Fonts en geen CDN:
 * geen extra DNS-lookup en geen bezoekersgegevens naar een derde partij.
 *
 * De gewichtsindeling is die van de bestaande site: book staat op 600, niet
 * op 400. woff2 eerst, woff alleen als vangnet.
 * ================================================================== */

@font-face {
    font-family: "Geomanist";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src:
        url("../fonts/geomanist-light.woff2") format("woff2"),
        url("../fonts/geomanist-light.woff") format("woff");
}

@font-face {
    font-family: "Geomanist";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        url("../fonts/geomanist-regular.woff2") format("woff2"),
        url("../fonts/geomanist-regular.woff") format("woff");
}

@font-face {
    font-family: "Geomanist";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src:
        url("../fonts/geomanist-medium.woff2") format("woff2"),
        url("../fonts/geomanist-medium.woff") format("woff");
}

@font-face {
    font-family: "Geomanist";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src:
        url("../fonts/geomanist-book.woff2") format("woff2"),
        url("../fonts/geomanist-book.woff") format("woff");
}

/* ==================================================================
 * Tokens
 * ================================================================== */

:root {
    /* --- Kleuren -------------------------------------------------- */
    --kleurBlauw: #237eb3;
    --kleurBlauwMidden: #306a98;
    --kleurBlauwDonker: #215073;
    --kleurBlauwDiep: #003764;
    --kleurOranje: #f58b00;
    --kleurOranjeDonker: #d97b00;
    --kleurGroen: #08b815;
    --kleurTekst: #0f184a;
    --kleurTekstZacht: #7a8896;
    --kleurWit: #fff;
    --kleurVlak: #eef5f9;
    --kleurVlakKoel: #ecf1f6;
    --kleurLijn: #dadbe3;
    --kleurLijnZacht: #eaeaea;

    /* --- Typografie ----------------------------------------------
     * Basis is 15px, net als op de bestaande site. In rem uitgedrukt zodat de
     * browserinstelling van de bezoeker blijft werken.
     * ------------------------------------------------------------- */
    --fontBasis: "Geomanist", system-ui, -apple-system, "Segoe UI", roboto, sans-serif;
    --tekstXs: 0.8125rem;
    --tekstSm: 0.875rem;
    --tekstBasis: 0.9375rem;
    --tekstMd: 1.0625rem;
    --tekstLg: 1.25rem;
    --tekstH3: 1.5rem;
    --tekstH2: 1.75rem;
    --tekstH1: 2.75rem;

    /* --- Ritme ---------------------------------------------------- */
    --ruimteXs: 0.25rem;
    --ruimteSm: 0.5rem;
    --ruimteMd: 1rem;
    --ruimteLg: 1.5rem;
    --ruimteXl: 2.5rem;
    --ruimte2xl: 4rem;

    /* --- Maten ---------------------------------------------------- */
    /*
     * 1220px met 20px padding aan weerszijden geeft een inhoudsbreedte van
     * 1180px. Dat is precies de containerbreedte van de bestaande site
     * (.elementor-section-boxed > .elementor-container: max-width 1180px, met
     * 20px sectiepadding erbuiten). Op elke vensterbreedte komt de linkerrand
     * van de inhoud daarmee op dezelfde plek te liggen als daar.
     */
    --breedteMax: 1220px;
    --randMd: 6px;
    --randLg: 12px;
    --randRond: 999px;

    /* --- Schaduwen ------------------------------------------------ */
    --schaduwZacht: 0 1px 3px rgb(15 24 74 / 8%);
    --schaduwMd: 0 4px 16px rgb(15 24 74 / 10%);
    --schaduwLg: 0 8px 32px rgb(15 24 74 / 16%);

    /* --- Beweging ------------------------------------------------- */
    --duurSnel: 120ms;
    --duurMd: 220ms;
    --versnelling: cubic-bezier(0.33, 1, 0.68, 1);

    /* --- Header --------------------------------------------------
     * Wordt door inc/js/main.js bijgewerkt naar de werkelijke hoogte, zodat
     * html { scroll-padding-top } en de mobiele menu-hoogte altijd kloppen.
     * ------------------------------------------------------------- */
    --headerHoogte: 148px;
}

/* ==================================================================
 * Basis
 * ================================================================== */

body {
    background-color: var(--kleurWit);
    color: var(--kleurTekst);
    font-family: var(--fontBasis);
    font-size: var(--tekstBasis);
    font-weight: 400;
    line-height: 1.6;
}

/* ==================================================================
 * Bouwstenen die header, footer en elke template delen
 * ================================================================== */

/*
 * De enige plek die de horizontale marge van de site bepaalt. Secties zetten
 * zelf geen padding-inline: dan zou het bij elkaar opgeteld worden en zou de
 * inhoud per sectie kunnen verschuiven.
 */
.omhulsel {
    width: 100%;
    max-width: var(--breedteMax);
    margin-inline: auto;
    padding-inline: 20px;
}

.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ruimteSm);
    padding: 0.6875rem 1.375rem;
    border: 1px solid transparent;
    border-radius: var(--randMd);
    background-color: var(--kleurOranje);
    color: var(--kleurWit);
    font-size: var(--tekstBasis);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition:
        background-color var(--duurSnel) ease,
        border-color var(--duurSnel) ease,
        color var(--duurSnel) ease;
}

.knop:hover,
.knop:focus-visible {
    background-color: var(--kleurOranjeDonker);
}

.knopBlauw {
    background-color: var(--kleurBlauw);
}

.knopBlauw:hover,
.knopBlauw:focus-visible {
    background-color: var(--kleurBlauwDonker);
}

.knopOmlijnd {
    border-color: var(--kleurBlauw);
    background-color: transparent;
    color: var(--kleurBlauw);
}

.knopOmlijnd:hover,
.knopOmlijnd:focus-visible {
    background-color: var(--kleurBlauw);
    color: var(--kleurWit);
}

/* ==================================================================
 * Header
 *
 * Drie lagen: topBar (telefoon en USP's), headerMain (logo, zoeken,
 * winkelwagen) en hoofdNav (de categorienavigatie).
 *
 * Wat op mobiel niet hoort te staan, staat er ook niet: de mu-plugin
 * samit-apparaat rendert de mobiele of de desktopvariant, nooit beide
 * (baserules regel 16). Deze stylesheet hoeft dus niets weg te display: none'en.
 * ================================================================== */

.siteHeader {
    position: sticky;
    z-index: 100;
    top: 0;
    background-color: var(--kleurWit);
    box-shadow: 0 3px 6px rgb(178 178 178 / 16%);
}

/* --- Bovenbalk ---------------------------------------------------
 *
 * Witte balk met donkere tekst, 13px/16px, 7px padding boven en onder. De
 * hoogte van 48px komt uit de foto: 34 + 2x7.
 *
 * De inhoud staat links uitgelijnd met een tussenruimte van 50px — de USP's
 * worden dus niet naar rechts geduwd, ze staan direct naast het telefoonnummer.
 * ------------------------------------------------------------------ */

.topBarBuiten {
    width: 100%;
    padding-inline: 20px;
    background-color: var(--kleurWit);
}

.topBar {
    display: flex;
    max-width: 1180px;
    align-items: center;
    column-gap: 50px;
    margin-inline: auto;
    padding-block: 7px;
    color: var(--kleurTekst);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.2308;
}

.topBarVragen {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: 17px;
}

.topBarFoto {
    width: 34px;
    height: 34px;
    flex: none;
}

/*
 * Het groene bolletje rechtsonder op de foto. Een pseudo-element en geen tweede
 * afbeelding: het is een statusindicator van dertien pixels, daar hoort geen
 * HTTP-verzoek bij.
 */
.topBarVragen::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 27px;
    width: 13px;
    height: 13px;
    border: 1.5px solid var(--kleurWit);
    border-radius: var(--randRond);
    background-color: var(--kleurGroen);
    box-shadow: 0 1px 2px rgb(0 0 0 / 16%);
}

.topBarTelefoon {
    color: #2c3642;
    text-decoration: underline;
}

.topBarTelefoon:hover,
.topBarTelefoon:focus-visible {
    color: var(--kleurBlauw);
}

.uspLijst {
    display: flex;
    align-items: center;
    column-gap: 49.6px;
}

.usp {
    display: flex;
    align-items: center;
}

.uspIcoon {
    width: 10px;
    height: 7px;
    flex: none;
    margin-right: 10px;
    margin-bottom: 2px;
}

/* --- Middenbalk: logo, zoeken, winkelwagen ----------------------- */

.headerMain {
    background-color: var(--kleurBlauw);
    color: var(--kleurWit);
}

.headerMainInner {
    /*
     * Vaste hoogte van 77px en een tussenruimte van 47px, beide uit de bestaande
     * site. justify-content: flex-end met margin-right: auto op het logo: alles
     * staat rechts, het logo links.
     */
    display: flex;
    height: 77px;
    align-items: center;
    justify-content: flex-end;
    column-gap: 47px;
}

.siteLogo {
    flex: none;
    margin-right: auto;
    line-height: 0;
}

.siteLogo img,
.siteLogo svg {
    width: auto;
    height: 30px;
}

.headerZoeken {
    flex: 0 1 338px;
}

/*
 * Een pil zonder zichtbare knop, zoals op de bestaande site: daar staat
 * `display: none` op de submitknop en zoek je met Enter.
 *
 * De knop blijft hier wél in de HTML staan, alleen visueel verborgen (zie
 * .zoekKnop hieronder). Dat scheelt niets in beeld en houdt het formulier
 * bruikbaar voor wie met een schermlezer of alleen een toetsenbord werkt: die
 * krijgt een echte verzendknop in plaats van te moeten gokken op Enter.
 */
.zoekFormulier {
    display: flex;
    overflow: hidden;
    border-radius: var(--randRond);
    background-color: var(--kleurWit);
}

.zoekVeld {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 26px;
    border: 0;
    background-color: transparent;
    color: var(--kleurTekst);
    font-size: 0.8125rem;
    line-height: 1.2308;
}

.zoekVeld::placeholder {
    color: var(--kleurTekstZacht);
}

.zoekVeld:focus-visible {
    outline: 2px solid var(--kleurOranje);
    outline-offset: -2px;
}

/*
 * Visueel verborgen, maar wel bereikbaar. Krijgt hij focus, dan komt hij in
 * beeld — anders zou een toetsenbordgebruiker de focus zien verdwijnen.
 */
.zoekKnop {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
}

.zoekKnop:focus-visible {
    position: static;
    display: flex;
    width: auto;
    height: auto;
    align-items: center;
    padding-inline: 0.875rem;
    clip-path: none;
    background-color: var(--kleurOranje);
    color: var(--kleurWit);
}

.zoekKnop svg {
    width: 17px;
    height: 17px;
}

.headerActies {
    display: flex;
    align-items: center;
    gap: var(--ruimteLg);
    margin-left: auto;
}

.headerLink {
    color: inherit;
    font-size: var(--tekstSm);
    text-decoration: none;
    white-space: nowrap;
}

.headerLink:hover,
.headerLink:focus-visible {
    text-decoration: underline;
}

.winkelwagenKnop {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--ruimteSm);
    padding: 0;
    border: 0;
    color: inherit;
    font-size: var(--tekstSm);
    font-weight: 500;
    white-space: nowrap;
}

.winkelwagenIcoon {
    width: 24px;
    height: 24px;
}

.winkelwagenAantal {
    position: absolute;
    top: -6px;
    left: 14px;
    display: grid;
    min-width: 18px;
    height: 18px;
    place-items: center;
    padding-inline: 4px;
    border-radius: var(--randRond);
    background-color: var(--kleurOranje);
    color: var(--kleurWit);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
}

/* --- Mobiele menuknop -------------------------------------------- */

.menuKnop {
    display: flex;
    flex: none;
    align-items: center;
    padding: var(--ruimteXs);
    border: 0;
    color: inherit;
}

.menuKnop svg {
    width: 26px;
    height: 26px;
}

/* --- Hoofdnavigatie ---------------------------------------------- */

.hoofdNav {
    background-color: var(--kleurWit);
    border-bottom: 1px solid var(--kleurLijn);
}

.navLijst {
    display: flex;
    align-items: stretch;
    gap: var(--ruimteXs);
}

.navItem {
    position: relative;
}

.navLink {
    display: flex;
    align-items: center;
    gap: var(--ruimteXs);
    padding: 0.875rem var(--ruimteMd);
    color: var(--kleurTekst);
    font-size: var(--tekstSm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--duurSnel) ease;
}

.navLink:hover,
.navLink:focus-visible,
.navItem[data-open="true"] > .navLink {
    color: var(--kleurBlauw);
}

.navItemActief > .navLink {
    color: var(--kleurBlauw);
    box-shadow: inset 0 -3px 0 var(--kleurOranje);
}

.navPijl {
    width: 10px;
    height: 10px;
    transition: transform var(--duurMd) var(--versnelling);
}

.navItem[data-open="true"] .navPijl {
    transform: rotate(180deg);
}

/*
 * Submenu. Zichtbaarheid loopt via visibility en opacity in plaats van via
 * display, want display is niet animeerbaar en Motion moet het kunnen
 * overnemen. Voor een schermlezer is visibility: hidden even onzichtbaar als
 * display: none, dus er lekt niets weg.
 */
.subNav {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    visibility: hidden;
    min-width: 250px;
    padding: var(--ruimteSm) 0;
    border: 1px solid var(--kleurLijn);
    border-radius: 0 0 var(--randMd) var(--randMd);
    background-color: var(--kleurWit);
    box-shadow: var(--schaduwMd);
    opacity: 0;
    transform: translateY(-6px);
    transition:
        opacity var(--duurMd) var(--versnelling),
        transform var(--duurMd) var(--versnelling),
        visibility var(--duurMd) step-end;
}

/*
 * data-open wordt door main.js gezet. :hover en :focus-within staan er
 * naast als vangnet: zonder JS klapt het menu nog steeds open, en met
 * toetsenbord werkt het ook als main.js niet geladen is.
 */
.navItem[data-open="true"] > .subNav,
.navItem:hover > .subNav,
.navItem:focus-within > .subNav {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-timing-function: var(--versnelling), var(--versnelling), step-start;
}

.subNavLink {
    display: block;
    padding: 0.5rem var(--ruimteMd);
    color: var(--kleurTekst);
    font-size: var(--tekstSm);
    text-decoration: none;
    transition:
        background-color var(--duurSnel) ease,
        color var(--duurSnel) ease;
}

.subNavLink:hover,
.subNavLink:focus-visible {
    background-color: var(--kleurVlak);
    color: var(--kleurBlauw);
}

/* ==================================================================
 * Mobiel menu
 *
 * Alleen aanwezig in de mobiele uitvoer. Een <dialog> in plaats van een eigen
 * overlay: de browser regelt dan zelf de focusval, Escape en de backdrop, en
 * dat is minder code én beter toegankelijk.
 * ================================================================== */

.mobielMenu {
    width: min(88vw, 340px);
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0 auto 0 0;
    background-color: var(--kleurWit);
    color: var(--kleurTekst);
}

.mobielMenu::backdrop {
    background-color: rgb(15 24 74 / 55%);
}

.mobielMenuKop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ruimteMd);
    background-color: var(--kleurBlauw);
    color: var(--kleurWit);
}

.mobielMenuTitel {
    font-size: var(--tekstMd);
    font-weight: 500;
}

.mobielMenuSluit {
    display: flex;
    padding: var(--ruimteXs);
    border: 0;
    color: inherit;
}

.mobielMenuSluit svg {
    width: 22px;
    height: 22px;
}

.mobielNavItem {
    border-bottom: 1px solid var(--kleurLijnZacht);
}

.mobielNavRij {
    display: flex;
    align-items: stretch;
}

.mobielNavLink {
    flex: 1 1 auto;
    padding: 0.875rem var(--ruimteMd);
    color: inherit;
    font-size: var(--tekstBasis);
    font-weight: 500;
    text-decoration: none;
}

/*
 * De uitklapknop staat naast de link, niet eromheen: een categorie moet
 * aanklikbaar blijven zonder dat je hem eerst moet uitklappen.
 */
.mobielNavUitklap {
    display: flex;
    flex: none;
    width: 48px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-left: 1px solid var(--kleurLijnZacht);
    color: var(--kleurTekstZacht);
}

.mobielNavUitklap svg {
    width: 12px;
    height: 12px;
    transition: transform var(--duurMd) var(--versnelling);
}

.mobielNavUitklap[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Hoogte wordt door Motion geanimeerd; hidden houdt hem uit de tabvolgorde. */
.mobielSubNav {
    overflow: hidden;
    background-color: var(--kleurVlak);
}

.mobielSubNavLink {
    display: block;
    padding: 0.6875rem var(--ruimteMd) 0.6875rem var(--ruimteXl);
    color: inherit;
    font-size: var(--tekstSm);
    text-decoration: none;
}

.mobielSubNavLink:hover,
.mobielSubNavLink:focus-visible {
    color: var(--kleurBlauw);
}

/* ==================================================================
 * Footer
 * ================================================================== */

.siteFooter {
    margin-top: var(--ruimte2xl);
    background-color: var(--kleurBlauwDonker);
    color: var(--kleurWit);
}

.footerHoofd {
    display: grid;
    gap: var(--ruimteXl);
    padding-block: var(--ruimteXl);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.footerKolomTitel {
    margin-bottom: var(--ruimteMd);
    font-size: var(--tekstMd);
    font-weight: 600;
}

.footerLijst {
    display: grid;
    gap: 0.5rem;
}

.footerLink {
    color: rgb(255 255 255 / 82%);
    font-size: var(--tekstSm);
    text-decoration: none;
    transition: color var(--duurSnel) ease;
}

.footerLink:hover,
.footerLink:focus-visible {
    color: var(--kleurWit);
    text-decoration: underline;
}

.footerContactRij {
    display: flex;
    align-items: center;
    gap: var(--ruimteSm);
    font-size: var(--tekstSm);
}

.footerContactIcoon {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--kleurOranje);
}

.footerOnder {
    border-top: 1px solid rgb(255 255 255 / 15%);
}

.footerOnderInner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ruimteMd);
    padding-block: var(--ruimteMd);
    font-size: var(--tekstXs);
}

.footerOnderInner p {
    color: rgb(255 255 255 / 70%);
}

.betaalIconen {
    display: flex;
    align-items: center;
    gap: var(--ruimteSm);
}

.betaalIconen img {
    height: 22px;
    width: auto;
}

/* ==================================================================
 * Inhoudsgebied
 * ================================================================== */

.siteInhoud {
    display: block;
    padding-top: var(--ruimteXl);
}

/* ==================================================================
 * Losse elementen in de header en de footer
 * ================================================================== */

.siteLogoTekst {
    color: var(--kleurWit);
    font-size: var(--tekstLg);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/*
 * De teller staat absoluut ten opzichte van het icoon, niet van de hele knop:
 * anders schuift hij mee met het woord "Winkelwagen" ernaast.
 */
.winkelwagenIcoonHouder {
    position: relative;
    display: block;
    line-height: 0;
}

.mobielMenuZoeken {
    padding: var(--ruimteMd);
    border-bottom: 1px solid var(--kleurLijnZacht);
}

/* Het zoekveld in het paneel staat op wit, dus het heeft een rand nodig. */
.mobielMenuZoeken .zoekFormulier {
    border: 1px solid var(--kleurLijn);
}

.mobielMenuVoet {
    padding: var(--ruimteMd);
}

.mobielMenuBellen {
    width: 100%;
}

.footerOver {
    margin-top: var(--ruimteSm);
    color: rgb(255 255 255 / 70%);
    font-size: var(--tekstSm);
}

/* ==================================================================
 * Melding van de apparaatweergave
 *
 * Verschijnt alleen als het venster tijdens het bezoek voorbij het breekpunt
 * gaat, dus als de gerenderde uitvoer niet meer bij het scherm past. Zie de
 * mu-plugin samit-apparaat.
 * ================================================================== */

.apparaatMelding {
    position: fixed;
    z-index: 500;
    right: var(--ruimteMd);
    bottom: var(--ruimteMd);
    left: var(--ruimteMd);
    display: flex;
    max-width: 460px;
    align-items: center;
    gap: var(--ruimteMd);
    margin-inline: auto;
    padding: 0.75rem var(--ruimteMd);
    border-radius: var(--randMd);
    background-color: var(--kleurTekst);
    box-shadow: var(--schaduwLg);
    color: var(--kleurWit);
    font-size: var(--tekstSm);
}

.apparaatMeldingKnop {
    flex: none;
    padding: 0.375rem 0.75rem;
    border: 0;
    border-radius: var(--randMd);
    background-color: var(--kleurOranje);
    color: var(--kleurWit);
    font-size: var(--tekstXs);
    font-weight: 500;
}

.apparaatMeldingSluit {
    flex: none;
    padding: 0 0.25rem;
    border: 0;
    color: rgb(255 255 255 / 70%);
    font-size: 1.125rem;
    line-height: 1;
}

.apparaatMeldingSluit:hover,
.apparaatMeldingSluit:focus-visible {
    color: var(--kleurWit);
}

/* ==================================================================
 * Toegankelijkheid en WordPress-uitvoer
 *
 * Deze klassen stonden eerst in style.css. Dat bestand wordt niet ingeladen
 * (baserules regel 4), waardoor .screenReaderText geen opmaak had en elke
 * verborgen linktekst zichtbaar in de pagina stond. Ze horen hier: het is
 * opmaak die op elke pagina nodig is.
 * ================================================================== */

.screenReaderText {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 * Skiplink: onzichtbaar tot hij focus krijgt, dan linksboven in beeld. Een
 * toetsenbordgebruiker moet de hele navigatie kunnen overslaan.
 */
.screenReaderText:focus {
    z-index: 100000;
    top: 0.5rem;
    left: 0.5rem;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.75rem 1.25rem;
    clip-path: none;
    border-radius: var(--randMd);
    background-color: var(--kleurWit);
    box-shadow: var(--schaduwMd);
    color: var(--kleurTekst);
    font-size: var(--tekstBasis);
    text-decoration: none;
}

/* Uitlijnklassen uit de klassieke editor en uit wp_get_attachment_image(). */
.alignleft {
    float: left;
    margin: 0 var(--ruimteLg) var(--ruimteMd) 0;
}

.alignright {
    float: right;
    margin: 0 0 var(--ruimteMd) var(--ruimteLg);
}

.aligncenter {
    display: block;
    margin-inline: auto;
}

.alignnone {
    margin: 0;
}

.wp-caption {
    max-width: 100%;
    margin-bottom: var(--ruimteLg);
}

.wp-caption img {
    display: block;
}

.wp-caption-text,
.galleryCaption {
    margin: var(--ruimteSm) 0 0;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstSm);
}

/* Klassen die WordPress op <body> of op een post zet. */
.stickyPost {
    border-left: 4px solid var(--kleurOranje);
}

.byPostAuthor {
    font-weight: 500;
}

/* ==================================================================
 * Responsief
 *
 * Alleen wat écht om layout gaat. Elementen die op een klein scherm niet
 * thuishoren zijn er niet: die worden server-side niet gerenderd.
 * ================================================================== */

@media (width <= 1080px) {
    :root {
        --tekstH1: 2.125rem;
        --tekstH2: 1.5rem;
    }

    .navLink {
        padding-inline: 0.6875rem;
    }
}

@media (width <= 860px) {
    :root {
        --headerHoogte: 110px;
        --ruimte2xl: 2.5rem;
        --ruimteXl: 1.75rem;
    }

    .headerMainInner {
        min-height: 60px;
        gap: var(--ruimteMd);
    }

    .siteLogo img,
    .siteLogo svg {
        height: 26px;
    }

    .footerHoofd {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footerOnderInner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (width <= 560px) {
    :root {
        --tekstH1: 1.75rem;
    }

    .footerHoofd {
        gap: var(--ruimteLg);
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==================================================================
 * Print
 * ================================================================== */

@media print {
    .siteHeader,
    .siteFooter,
    .mobielMenu {
        display: none;
    }

    body {
        color: #000;
        font-size: 11pt;
    }
}