/* ---------------------------------------------------------------------------
 * main.css — ontwerptokens, basistypografie, header en footer (baserules 6)
 *
 * Wordt op elke pagina ingeladen, direct na reset.css en fonts.css. Alles wat
 * hier staat komt op élke pagina voor: de tokens, de tekstbasis, de header en
 * de footer. Wat bij één template hoort staat in inc/css/<template>.css
 * (baserules 8) — voeg dat hier niet toe, hoe klein het ook is.
 *
 * Klassenamen in camelCase (baserules 2).
 * --------------------------------------------------------------------------- */

:root {
    /* Kleuren. Overgenomen van boxspringgekte.nl: de groene accentkleur en het
       antracietgrijs van de tekst. */
    --kleurAccent:        #23a892;
    --kleurAccentLicht:   #4bb28f;
    --kleurAccentDonker:  #1b8574;
    --kleurTekst:         #414141;
    --kleurTekstSterk:    #212121;
    --kleurTekstZacht:    #6b6b6b;
    --kleurWit:           #ffffff;
    --kleurRand:          #e4e6e5;
    --kleurVlak:          #f6f7f7;
    --kleurVlakDonker:    #313131;
    --kleurKorting:       #cf2e2e;

    /* Typografie. Urbanist voor koppen, Work Sans voor lopende tekst; beide
       lokaal (baserules 10, zie fonts.css). De fallback-stack is met opzet een
       systeemfont: valt het webfont uit, dan schuift de tekst niet. */
    --fontKop:  'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --fontTekst: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    /* Traploze maten: klein op mobiel, groot op desktop, zonder breakpoint. */
    --maatBasis:   1rem;
    --maatKlein:   .875rem;
    --maatMini:    .75rem;
    --maatH1:      clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem);
    --maatH2:      clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
    --maatH3:      clamp(1.25rem, 1.1rem + .7vw, 1.5rem);
    --maatH4:      clamp(1.0625rem, 1rem + .3vw, 1.1875rem);

    /* Ruimte in een vaste reeks, zodat marges optellen tot iets herkenbaars. */
    --ruimte1: .25rem;
    --ruimte2: .5rem;
    --ruimte3: .75rem;
    --ruimte4: 1rem;
    --ruimte5: 1.5rem;
    --ruimte6: 2rem;
    --ruimte7: 3rem;
    --ruimte8: 4rem;
    --ruimte9: 6rem;

    /* Layout */
    --breedteMax:    1280px;
    --breedteTekst:  68ch;
    --randRadius:    8px;
    --randRadiusKlein: 4px;

    --schaduwZacht: 0 1px 3px rgb(0 0 0 / .06), 0 1px 2px rgb(0 0 0 / .04);
    --schaduwKaart: 0 4px 16px rgb(0 0 0 / .08);
    --schaduwHoog:  0 12px 32px rgb(0 0 0 / .12);

    --overgang: 180ms cubic-bezier(.4, 0, .2, 1);

    /* Hoogte van de vaste header; de skip-link en anker-offsets rekenen ermee. */
    --hoogteHeader: 72px;
}

/* --------------------------------------------------------------------------
 * Basis
 * -------------------------------------------------------------------------- */

body {
    font-family: var(--fontTekst);
    font-size: var(--maatBasis);
    font-weight: 400;
    line-height: 1.65;
    color: var(--kleurTekst);
    background: var(--kleurWit);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fontKop);
    color: var(--kleurTekstSterk);
    line-height: 1.2;
    text-wrap: balance;
}

h1 { font-size: var(--maatH1); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: var(--maatH2); font-weight: 800; letter-spacing: -.01em; }
h3 { font-size: var(--maatH3); font-weight: 600; }
h4 { font-size: var(--maatH4); font-weight: 600; }
h5, h6 { font-size: var(--maatBasis); font-weight: 600; }

a {
    color: var(--kleurAccent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    transition: color var(--overgang);
}

a:hover {
    color: var(--kleurAccentDonker);
}

strong, b { font-weight: 600; }

/* Anker-doelen schuiven onder de vaste header uit. */
:target {
    scroll-margin-top: calc(var(--hoogteHeader) + var(--ruimte5));
}

/* --------------------------------------------------------------------------
 * Layout-hulpklassen
 * -------------------------------------------------------------------------- */

.omhulsel {
    width: 100%;
    max-width: var(--breedteMax);
    margin-inline: auto;
    padding-inline: var(--ruimte4);
}

@media (min-width: 48rem) {
    .omhulsel { padding-inline: var(--ruimte5); }
}

.siteHoofd {
    display: block;
    min-height: 40vh;
}

/* --------------------------------------------------------------------------
 * Knoppen
 * -------------------------------------------------------------------------- */

.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ruimte2);
    padding: var(--ruimte3) var(--ruimte5);
    font-family: var(--fontKop);
    font-size: var(--maatBasis);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border-radius: var(--randRadius);
    transition: background-color var(--overgang), color var(--overgang), border-color var(--overgang), transform var(--overgang);
}

.knopPrimair {
    background: var(--kleurAccent);
    color: var(--kleurWit);
}

.knopPrimair:hover {
    background: var(--kleurAccentDonker);
    color: var(--kleurWit);
}

.knopSecundair {
    background: transparent;
    color: var(--kleurTekstSterk);
    border: 1px solid var(--kleurRand);
}

.knopSecundair:hover {
    background: var(--kleurVlak);
    color: var(--kleurTekstSterk);
    border-color: var(--kleurTekstZacht);
}

/* --------------------------------------------------------------------------
 * Header
 * -------------------------------------------------------------------------- */

.siteHeader {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--kleurWit);
    border-bottom: 1px solid var(--kleurRand);
}

/* Balk met de verkoopargumenten boven de header. Op mobiel rouleert hij niet:
   de mu-plugin domZichtbaarheid laat daar alleen het eerste punt renderen, dus
   er staat geen verborgen HTML in de bron (baserules 16). */
.uspBalk {
    background: var(--kleurVlakDonker);
    color: var(--kleurWit);
    font-size: var(--maatMini);
}

.uspBalkLijst {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ruimte3) var(--ruimte6);
    padding-block: var(--ruimte2);
}

.uspBalkItem {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte2);
}

.uspBalkItem svg {
    width: 1em;
    height: 1em;
    flex: none;
    fill: var(--kleurAccentLicht);
}

.headerBalk {
    display: flex;
    align-items: center;
    gap: var(--ruimte4);
    min-height: var(--hoogteHeader);
}

.headerLogo {
    flex: none;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.headerLogo img {
    width: auto;
    max-height: 44px;
}

/* Woordmerk als er nog geen logo in de mediabibliotheek staat. */
.headerLogoTekst {
    font-family: var(--fontKop);
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--kleurTekstSterk);
}

.headerLogoTekst span {
    color: var(--kleurAccent);
}

.headerZoeken {
    flex: 1 1 auto;
    max-width: 30rem;
}

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

.headerActie {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte2);
    padding: var(--ruimte2) var(--ruimte3);
    color: var(--kleurTekstSterk);
    font-size: var(--maatKlein);
    text-decoration: none;
    border-radius: var(--randRadius);
    transition: background-color var(--overgang);
}

.headerActie:hover {
    background: var(--kleurVlak);
    color: var(--kleurTekstSterk);
}

.headerActie svg {
    width: 1.375rem;
    height: 1.375rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
 * Zoekformulier
 * -------------------------------------------------------------------------- */

.zoekForm {
    display: flex;
    align-items: center;
    background: var(--kleurVlak);
    border: 1px solid var(--kleurRand);
    border-radius: var(--randRadius);
    overflow: hidden;
}

.zoekForm:focus-within {
    border-color: var(--kleurAccent);
    background: var(--kleurWit);
}

.zoekVeld {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--ruimte3) var(--ruimte4);
    background: transparent;
    border: 0;
    font-size: var(--maatKlein);
}

.zoekVeld:focus-visible {
    outline: 0;
}

.zoekKnop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--ruimte4);
    align-self: stretch;
    color: var(--kleurTekstZacht);
    transition: color var(--overgang);
}

.zoekKnop:hover {
    color: var(--kleurAccent);
}

.zoekKnop svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

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

.navPrimair {
    border-top: 1px solid var(--kleurRand);
}

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

.navPrimairItem {
    position: relative;
}

.navPrimairLink {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte2);
    padding: var(--ruimte3) var(--ruimte4);
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 600;
    color: var(--kleurTekstSterk);
    text-decoration: none;
    border-radius: var(--randRadius);
    transition: color var(--overgang), background-color var(--overgang);
}

.navPrimairLink:hover,
.navPrimairItem[aria-current] > .navPrimairLink,
.navPrimairItem.isHuidig > .navPrimairLink {
    color: var(--kleurAccent);
    background: var(--kleurVlak);
}

.navPrimairPijl {
    width: .625rem;
    height: .625rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--overgang);
}

.navPrimairItem:hover > .navPrimairLink .navPrimairPijl,
.navPrimairItem:focus-within > .navPrimairLink .navPrimairPijl {
    transform: rotate(180deg);
}

/* Submenu. Op hover én op focus-within, zodat het met het toetsenbord
   bereikbaar is. */
.navSub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: 15rem;
    padding: var(--ruimte2);
    background: var(--kleurWit);
    border: 1px solid var(--kleurRand);
    border-radius: var(--randRadius);
    box-shadow: var(--schaduwHoog);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.375rem);
    transition: opacity var(--overgang), transform var(--overgang), visibility var(--overgang);
}

.navPrimairItem:hover > .navSub,
.navPrimairItem:focus-within > .navSub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.navSubLink {
    display: block;
    padding: var(--ruimte2) var(--ruimte3);
    font-size: var(--maatKlein);
    color: var(--kleurTekst);
    text-decoration: none;
    border-radius: var(--randRadiusKlein);
    transition: background-color var(--overgang), color var(--overgang);
}

.navSubLink:hover {
    background: var(--kleurVlak);
    color: var(--kleurAccent);
}

/* --------------------------------------------------------------------------
 * Mobiele navigatie
 *
 * De knop en het paneel staan alleen in de HTML als de bezoeker op een
 * mobiel toestel zit; de mu-plugin domZichtbaarheid regelt dat (baserules 16).
 * De CSS hieronder gaat er dus van uit dat wat er staat ook bedoeld is.
 * -------------------------------------------------------------------------- */

.navSchakelaar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--kleurTekstSterk);
    border-radius: var(--randRadius);
}

.navSchakelaar svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.navSchakelaar[aria-expanded="true"] {
    background: var(--kleurVlak);
}

.navMobiel {
    border-top: 1px solid var(--kleurRand);
}

/* Dicht via het hidden-attribuut, niet via display:none in CSS: dan klopt de
   toegankelijkheidsboom met wat er te zien is. */
.navMobielLijst {
    padding-block: var(--ruimte2);
}

.navMobielLink {
    display: block;
    padding: var(--ruimte3) var(--ruimte4);
    font-family: var(--fontKop);
    font-size: var(--maatBasis);
    font-weight: 600;
    color: var(--kleurTekstSterk);
    text-decoration: none;
    border-bottom: 1px solid var(--kleurRand);
}

.navMobielLink:hover {
    color: var(--kleurAccent);
}

.navMobielSub .navMobielLink {
    padding-left: var(--ruimte6);
    font-weight: 400;
    font-family: var(--fontTekst);
    font-size: var(--maatKlein);
    color: var(--kleurTekst);
}

/* --------------------------------------------------------------------------
 * Kruimelpad
 * -------------------------------------------------------------------------- */

.kruimels {
    padding-block: var(--ruimte4);
    font-size: var(--maatMini);
    color: var(--kleurTekstZacht);
}

.kruimels ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ruimte2);
}

.kruimels li::after {
    content: '/';
    margin-left: var(--ruimte2);
    color: var(--kleurRand);
}

.kruimels li:last-child::after {
    content: none;
}

.kruimels a {
    color: var(--kleurTekstZacht);
    text-decoration: none;
}

.kruimels a:hover {
    color: var(--kleurAccent);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
 * Footer
 * -------------------------------------------------------------------------- */

.siteFooter {
    margin-top: var(--ruimte9);
    background: var(--kleurVlakDonker);
    color: #d3d5d4;
    font-size: var(--maatKlein);
}

.footerBoven {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ruimte6);
    padding-block: var(--ruimte7);
}

@media (min-width: 40rem) {
    .footerBoven { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
    .footerBoven { grid-template-columns: 1.4fr repeat(3, 1fr); }
}

.footerIntro p {
    margin-top: var(--ruimte3);
    max-width: 34ch;
}

.footerIntroLogo {
    font-family: var(--fontKop);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--kleurWit);
}

.footerIntroLogo span {
    color: var(--kleurAccentLicht);
}

.footerKolomTitel {
    margin-bottom: var(--ruimte3);
    font-family: var(--fontKop);
    font-size: var(--maatBasis);
    font-weight: 600;
    color: var(--kleurWit);
}

.footerKolomLijst li + li {
    margin-top: var(--ruimte2);
}

.footerKolomLijst a {
    color: #d3d5d4;
    text-decoration: none;
}

.footerKolomLijst a:hover {
    color: var(--kleurWit);
    text-decoration: underline;
}

.footerOnder {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ruimte3);
    padding-block: var(--ruimte4);
    border-top: 1px solid rgb(255 255 255 / .12);
    font-size: var(--maatMini);
    color: #a9acab;
}

.footerOnder a {
    color: #a9acab;
}

/* --------------------------------------------------------------------------
 * Paginering — komt op meerdere overzichten voor, dus hier en niet per template
 * -------------------------------------------------------------------------- */

.paginering {
    margin-top: var(--ruimte7);
}

.paginering .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ruimte2);
}

.paginering .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding-inline: var(--ruimte2);
    font-size: var(--maatKlein);
    font-weight: 600;
    color: var(--kleurTekstSterk);
    text-decoration: none;
    border: 1px solid var(--kleurRand);
    border-radius: var(--randRadius);
    transition: background-color var(--overgang), border-color var(--overgang), color var(--overgang);
}

.paginering .page-numbers:hover {
    border-color: var(--kleurAccent);
    color: var(--kleurAccent);
}

.paginering .page-numbers.current {
    background: var(--kleurAccent);
    border-color: var(--kleurAccent);
    color: var(--kleurWit);
}

/* --------------------------------------------------------------------------
 * Nog wat header- en footeronderdelen
 * -------------------------------------------------------------------------- */

.headerActieTelefoon {
    font-weight: 600;
}

.navMobielItem {
    position: relative;
}

/* De knop naast een mobiel menu-item dat een submenu heeft. Absoluut
   gepositioneerd zodat de link zelf de volle regel houdt en het aantikken van
   het item niet per ongeluk het submenu opent. */
.navMobielSubKnop {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    color: var(--kleurTekstZacht);
}

.navMobielSubKnop svg {
    width: .75rem;
    height: .75rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--overgang);
}

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

.navMobielZoeken {
    padding-block: var(--ruimte4);
}

.footerContact {
    margin-top: var(--ruimte4);
}

.footerContact li + li {
    margin-top: var(--ruimte1);
}

.footerContact a {
    color: var(--kleurWit);
    text-decoration: none;
}

.footerContact a:hover {
    text-decoration: underline;
}

.widgetTitel {
    margin-bottom: var(--ruimte3);
    font-size: var(--maatH4);
}

/* --------------------------------------------------------------------------
 * Het call-to-action-blok
 *
 * Staat hier en niet in een template-CSS omdat bg_cta() op de homepage, op
 * pagina's én onder berichten kan staan. Eén keer hier is minder CSS dan drie
 * keer hetzelfde in home.css, page.css en single.css — dat is wat baserules 8
 * met 'zo optimaal en klein mogelijk' bedoelt.
 * -------------------------------------------------------------------------- */

.paginaCta {
    padding-bottom: var(--ruimte8);
}

.paginaCtaBinnen {
    padding: var(--ruimte7) var(--ruimte5);
    background: var(--kleurAccent);
    border-radius: var(--randRadius);
    text-align: center;
    color: var(--kleurWit);
}

.paginaCtaTitel {
    color: var(--kleurWit);
}

.paginaCtaTekst {
    max-width: 48ch;
    margin: var(--ruimte3) auto 0;
}

.paginaCtaActie {
    margin-top: var(--ruimte5);
}

/* Witte knop op het groene vlak: de primaire knop zou hier onzichtbaar zijn. */
.paginaCtaActie .knop {
    background: var(--kleurWit);
    color: var(--kleurAccentDonker);
}

.paginaCtaActie .knop:hover {
    background: var(--kleurVlak);
    color: var(--kleurAccentDonker);
}