/*
Theme Name: Commissaris Base
Theme URI: https://www.fysiotherapieinmeppel.nl/
Author: Thomas Jacobs
Description: Gedeeld block theme voor Fysiotherapie de Commissaris en Milon de Commissaris. Eén layout, per site een eigen palet via theme.json.
Version: 1.4.16
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: commissaris-base
*/

:root {

    --commissaris-primary-diep: var(--wp--preset--color--primary-diep);
    --commissaris-primary-zacht: color-mix(in srgb, var(--wp--preset--color--primary) 10%, #fff);
    --commissaris-tekst-zacht: color-mix(in srgb, var(--wp--preset--color--contrast) 68%, #fff);
    --commissaris-lijn: color-mix(in srgb, var(--wp--preset--color--contrast) 14%, #fff);
    --commissaris-radius: 14px;
    --commissaris-radius-klein: 8px;
    --commissaris-header-hoogte: 0px;
    --commissaris-topbalk: 4.75rem;

    --commissaris-ring: url("assets/img/ring.svg");
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--commissaris-header-hoogte) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

:where(a, button, input, select, textarea, summary, .wp-block-button__link):focus-visible {
    outline: 3px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
    border-radius: 3px;
}

.commissaris-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: .75rem 1.25rem;
    background: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
    font-weight: 700;
    text-decoration: none;
}

.commissaris-skip:focus {
    left: 1rem;
    top: 1rem;
}

p.has-large-font-size {
    line-height: 1.45;
}

p.has-x-large-font-size,
p.has-xx-large-font-size,
p.has-display-font-size {
    line-height: 1.2;
}

.commissaris-eyebrow {
    margin-block-end: var(--wp--preset--spacing--20);
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.commissaris-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.commissaris-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(96deg,
            var(--wp--preset--color--contrast) 0%,
            var(--wp--preset--color--contrast) 36%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 62%, transparent) 62%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 38%, transparent) 100%),
        linear-gradient(180deg,
            transparent 0%,
            transparent 42%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 82%, transparent) 78%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 88%, transparent) 100%),
        var(--commissaris-hero-beeld, none);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center, center, center right;
    pointer-events: none;
}

@media (min-width: 782px) {
    .commissaris-hero::before {
        background-image:
            linear-gradient(96deg,
                var(--wp--preset--color--contrast) 0%,
                var(--wp--preset--color--contrast) 36%,
                color-mix(in srgb, var(--wp--preset--color--contrast) 62%, transparent) 62%,
                color-mix(in srgb, var(--wp--preset--color--contrast) 38%, transparent) 100%),
            linear-gradient(180deg,
                transparent 0%,
                transparent 42%,
                color-mix(in srgb, var(--wp--preset--color--contrast) 82%, transparent) 78%,
                color-mix(in srgb, var(--wp--preset--color--contrast) 88%, transparent) 100%),
            var(--commissaris-hero-beeld-groot, var(--commissaris-hero-beeld, none));
    }
}

.commissaris-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 44%;
    right: -11vw;
    width: clamp(22rem, 40vw, 40rem);
    aspect-ratio: 1;
    transform: translateY(-50%);
    background: var(--wp--preset--color--primary);
    -webkit-mask: var(--commissaris-ring) no-repeat center / contain;
    mask: var(--commissaris-ring) no-repeat center / contain;
    opacity: var(--commissaris-hero-ring, 1);
    pointer-events: none;
}

.commissaris-hero__inhoud > * {
    max-width: 34rem;
}

@media (min-width: 1100px) {
    .commissaris-hero__inhoud > * {
        max-width: 38rem;
    }
}

/* De milontitel is langer dan die van fysio en mag verder doorlopen. */
.merk-milon .commissaris-hero__inhoud > h1 {
    max-width: 44rem;
}

@media (min-width: 1100px) {
    .merk-milon .commissaris-hero__inhoud > h1 {
        max-width: 48rem;
    }
}

.commissaris-hero__lead {
    color: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent);
}

@media (max-width: 781px) {

    .commissaris-hero::after {
        top: auto;
        bottom: -18%;
        right: -34%;
        width: 22rem;
        transform: none;

        opacity: calc(var(--commissaris-hero-ring, 1) * .16);
    }

    .commissaris-hero::before {
        background-image:
            linear-gradient(180deg,
                var(--wp--preset--color--contrast) 0%,
                color-mix(in srgb, var(--wp--preset--color--contrast) 90%, transparent) 55%,
                color-mix(in srgb, var(--wp--preset--color--contrast) 66%, transparent) 100%),
            var(--commissaris-hero-beeld, none);
        background-position: center, center right;
    }
}

.commissaris-citaat__tekst {
    max-width: 22ch;
    margin-block: 0;
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.commissaris-citaat__tekst::before {
    content: "\201E";
}

.commissaris-citaat__tekst::after {
    content: "\201D";
}

.commissaris-citaat__naam {
    color: color-mix(in srgb, var(--wp--custom--op-primary) 78%, transparent);
}

.commissaris-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/*
 * De ring stond met right: -6vw half buiten het blok, en werd door de
 * overflow van het blok doormidden gesneden. Wat je overhield was een halve
 * ring die niet als vorm te herkennen was maar als een fout. Hij staat nu
 * helemaal binnen het blok, met de bladmarge als afstand tot de rand.
 */
.commissaris-cta::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    right: var(--wp--style--root--padding-right, 1.5rem);

    /*
     * De maat volgt de ruimte die naast de tekst overblijft. De tekst is
     * hoogstens 34rem breed; met 40rem eraf houdt de ring op elke breedte
     * dezelfde afstand tot het laatste woord, in plaats van er bij een
     * kleiner venster overheen te schuiven.
     */
    height: min(78%, calc(100vw - 40rem));
    width: auto;
    aspect-ratio: 1;
    transform: translateY(-50%) scaleX(-1);
    background: var(--wp--preset--color--primary);
    -webkit-mask: var(--commissaris-ring) no-repeat center / contain;
    mask: var(--commissaris-ring) no-repeat center / contain;
    pointer-events: none;
}

.commissaris-cta__inhoud > * {
    max-width: 34rem;
}

/* Op een smal scherm loopt de ring achter de tekst langs; daar mag hij wel
   over de rand, want hij dient er alleen nog als achtergrond. */
@media (max-width: 781px) {
    .commissaris-cta::after {
        right: -30%;

        /* Hier weer op de hoogte van het blok: naast de tekst is geen ruimte
           meer, dus de berekening hierboven zou een stipje overhouden. */
        height: 86%;
        opacity: .3;
    }
}

.commissaris-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--wp--preset--color--base);
    border-bottom: 1px solid transparent;
    transition: box-shadow .18s ease, border-color .18s ease;
}

.commissaris-header.is-vastgezet {
    border-bottom-color: var(--commissaris-lijn);
    box-shadow: 0 2px 14px rgba(20, 24, 28, .07);
}

.commissaris-topbar {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--custom--op-primary);
}

.commissaris-topbar > .wp-block-group > .alignwide,
.commissaris-topbar .wp-block-group.alignwide {
    align-items: stretch;

    min-height: var(--commissaris-topbalk);
}

.commissaris-topbar__info {
    align-self: center;
    color: var(--wp--custom--op-primary);
}

.commissaris-topbar a {
    color: inherit;
    text-decoration: none;
}

.commissaris-topbar a:hover {
    text-decoration: underline;
}

@media (max-width: 700px) {
    :root {
        --commissaris-topbalk: 4.25rem;
    }

    .commissaris-topbar__info {
        display: none;
    }
}

.wp-block-navigation__responsive-container-open {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;

    margin-inline: -0.5rem;
    padding: 0.5rem;
    color: var(--wp--preset--color--contrast);
    font-family: var(--wp--preset--font-family--heading);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;

    user-select: none;
}

.commissaris-menuknop__streepjes {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 22px;
    height: 15px;
}

.commissaris-menuknop__streepjes span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background-color: currentColor;
}

.commissaris-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    text-decoration: none;
}

.commissaris-logo img {
    display: block;
    height: var(--commissaris-logo-hoogte, 46px);
    width: auto;
}

.commissaris-logo__naam {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--wp--preset--color--contrast);
}

@media (max-width: 781px) {
    .commissaris-logo img {
        height: calc(var(--commissaris-logo-hoogte, 46px) * .8);
    }
}

.commissaris-header .wp-block-group.is-layout-flex {
    align-items: center;
}

.commissaris-header .wp-block-navigation__container {
    row-gap: .25rem;
}

.commissaris-header .wp-block-navigation .wp-block-navigation-item__content {
    padding-block: .35rem;
}

@media (max-width: 781px) {
    .commissaris-header .commissaris-navgroep {
        width: 100%;
        flex-direction: row-reverse;
        justify-content: space-between;
    }
}

.wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation__container > .current_page_item > .wp-block-navigation-item__content,
.wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content,
.wp-block-navigation__container > .current-menu-parent > .wp-block-navigation-item__content,
.wp-block-navigation__container > .current_page_ancestor > .wp-block-navigation-item__content,
.wp-block-navigation__container > .current_page_parent > .wp-block-navigation-item__content {
    color: var(--commissaris-primary-diep);
    text-decoration: none;
    box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--primary);
}

.wp-block-navigation__submenu-container > .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation__submenu-container > .current_page_item > .wp-block-navigation-item__content {
    box-shadow: none;
    background: var(--commissaris-primary-zacht);
    color: var(--commissaris-primary-diep);
    font-weight: 700;
    text-decoration: none;
}

.commissaris-merktabs {
    display: inline-flex;
    align-items: flex-start;
    align-self: stretch;
    gap: .3rem;
}

.commissaris-merktab {
    display: inline-flex;
    align-items: center;

    padding: .45rem .8rem .95rem;
    border: 0;
    border-radius: 0 0 var(--commissaris-radius-klein) var(--commissaris-radius-klein);
    background: color-mix(in srgb, var(--wp--preset--color--base) 74%, transparent);
    text-decoration: none;
    transition: background-color .15s ease;
}

.commissaris-merktab img {
    display: block;
    height: var(--commissaris-logo-hoogte, 34px);
    width: auto;
}

.commissaris-merktab__naam {
    font-family: var(--wp--preset--font-family--heading);
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--contrast);
}

.commissaris-merktab.is-actief {
    background: var(--wp--preset--color--base);
}

.commissaris-merktab:not(.is-actief) img,
.commissaris-merktab:not(.is-actief) .commissaris-merktab__naam {
    opacity: .86;
}

.commissaris-merktab:not(.is-actief):hover,
.commissaris-merktab:not(.is-actief):focus-visible {
    background: var(--wp--preset--color--base);
}

.commissaris-merktab:not(.is-actief):hover img,
.commissaris-merktab:not(.is-actief):focus-visible img {
    opacity: 1;
}

.commissaris-merktab.is-uit {
    cursor: default;
}

@media (max-width: 600px) {
    .commissaris-merktab {
        padding-inline: .55rem;
    }

    .commissaris-merktabs {
        gap: .2rem;
    }
}

.brand-switch {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    padding: .5rem .8rem .45rem;
    border: 1px solid var(--commissaris-lijn);
    border-radius: var(--commissaris-radius-klein);
    background: var(--wp--preset--color--base-2);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s ease, background-color .15s ease;
}

.brand-switch:hover,
.brand-switch:focus-visible {
    border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 32%, transparent);
    background: var(--wp--preset--color--base);
    text-decoration: none;
}

.brand-switch img {
    display: block;
    height: var(--commissaris-logo-hoogte, 34px);
    width: auto;
}

.brand-switch__naam {
    font-family: var(--wp--preset--font-family--heading);
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--contrast);
}

.brand-switch__label {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-family: var(--wp--preset--font-family--heading);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--commissaris-tekst-zacht);
}

.brand-switch__label::after {
    content: "\2192";
    transition: transform .15s ease;
}

.brand-switch:hover .brand-switch__label::after {
    transform: translateX(2px);
}

@media (max-width: 600px) {
    .brand-switch__label {
        display: none;
    }

    .brand-switch {
        padding: .4rem .6rem;
    }
}

.is-style-kaart {
    background: var(--wp--preset--color--base);
    border: 1px solid var(--commissaris-lijn);
    border-radius: var(--commissaris-radius);
    padding: var(--wp--preset--spacing--40);
    box-shadow: var(--wp--preset--shadow--zacht);
}

.is-style-kaart > :first-child {
    margin-block-start: 0;
}

.is-style-kaart > :last-child {
    margin-block-end: 0;
}

.is-style-omlijnd {
    border: 2px solid var(--commissaris-lijn);
    border-radius: var(--commissaris-radius);
    padding: var(--wp--preset--spacing--40);
}

.is-style-accent {
    background: var(--commissaris-primary-zacht);
    border-inline-start: 4px solid var(--wp--preset--color--primary);
    border-radius: var(--commissaris-radius-klein);
    padding: var(--wp--preset--spacing--40);
}

ul.is-style-vinkjes {
    list-style: none;
    padding-left: 0;
}

ul.is-style-vinkjes li {
    position: relative;
    padding-left: 1.9rem;
    margin-block-end: .55rem;
}

ul.is-style-vinkjes li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45em;
    width: 1.05rem;
    height: .55rem;
    border-left: 2.5px solid var(--commissaris-primary-diep);
    border-bottom: 2.5px solid var(--commissaris-primary-diep);
    transform: rotate(-45deg);
}

.wp-block-image.is-style-recht img {
    border-radius: 0;
}

.wp-site-blocks > footer {
    margin-block-start: 0;
}

.commissaris-footer.has-contrast-background-color {
    background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 62%, #000);
    border-top: 3px solid var(--wp--preset--color--primary);
}

.commissaris-sectiekop > * {
    max-width: 34rem;
}

.commissaris-keurmerken {
    margin-block-start: var(--wp--preset--spacing--50);
}

.commissaris-sociaal {
    margin-block-start: var(--wp--preset--spacing--40);

    margin-inline-start: -8px;
}

.commissaris-sociaal .wp-block-social-link {
    transition: transform 0.15s ease;
}

.wp-block-social-links.commissaris-sociaal.is-style-logos-only .wp-block-social-link a {
    padding: 8px;
    transition: color 0.15s ease;
}

.commissaris-sociaal .wp-block-social-link:hover,
.commissaris-sociaal .wp-block-social-link:focus-within {
    transform: translateY(-2px);
}

.commissaris-sociaal .wp-block-social-link:hover a,
.commissaris-sociaal .wp-block-social-link:focus-within a {
    color: var(--wp--preset--color--primary);
}

.commissaris-footer .commissaris-logo {
    margin-block-end: var(--wp--preset--spacing--30);
}

.commissaris-keurmerken__lijst {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.commissaris-keurmerken__plaat {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 72px;
    padding: 0.65rem 1rem;
    background-color: var(--wp--preset--color--base);
    border-radius: var(--commissaris-radius-klein);
}

.commissaris-keurmerken__plaat img {
    display: block;
    width: auto;
    height: 34px;
}

.commissaris-keurmerken__vierkant img {
    height: 50px;
}

.commissaris-linklijst__alles {
    display: inline-block;
    margin-block-start: 0.35rem;
    font-weight: 600;
}

.commissaris-linklijst__alles::after {
    content: " \2192";
}

.commissaris-onderregel span {
    opacity: 0.45;
    padding-inline: 0.35rem;
}

.commissaris-linklijst {
    list-style: none;
    padding-left: 0;
}

.commissaris-linklijst a {
    text-decoration: none;
}

.commissaris-linklijst a:hover {
    text-decoration: underline;
}

.wp-block-table {
    overflow-x: auto;
}

.wp-block-table table {
    border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
    border: 0;
    border-bottom: 1px solid var(--commissaris-lijn);
    padding: .7rem .9rem;
}

.wp-block-table th {
    font-family: var(--wp--preset--font-family--heading);
    text-align: left;
}

.has-contrast-background-color:not(.has-text-color),
.has-contrast-background-color .wp-block-heading {
    color: var(--wp--preset--color--base);
}

.has-primary-background-color,
.has-primary-background-color .wp-block-heading {
    color: var(--wp--custom--op-primary);
}

.has-contrast-background-color a:not(.wp-block-button__link),
.has-primary-background-color a:not(.wp-block-button__link) {
    color: inherit;
}

.wp-block-query-pagination {
    margin-block-start: var(--wp--preset--spacing--50);
    gap: .75rem;
}

.wp-block-query-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--commissaris-radius-klein);
    text-decoration: none;
}

.wp-block-query-pagination .page-numbers.current {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
}

.wp-block-post-featured-image img {
    object-fit: cover;
}

.wp-block-post-template.is-layout-grid > li {
    display: flex;
}

.wp-block-post-template.is-layout-grid > li > * {
    flex: 1;
}

.wp-block-heading.has-display-font-size,
h1.wp-block-post-title {
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.wp-block-heading.has-xx-large-font-size {
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.wp-block-heading.has-x-large-font-size {
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.klacht__raster {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;
    margin-top: var(--wp--preset--spacing--50);
}

.klacht__groot,
.klacht__middel {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: var(--wp--preset--spacing--40);
    border-radius: var(--commissaris-radius);
    text-decoration: none;
    transition: transform .15s ease;
}

.klacht__groot {
    grid-row: span 2;
    justify-content: flex-end;
    min-height: 22rem;
    background: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
}

.klacht__groot--foto {
    background-color: var(--wp--preset--color--contrast);
    background-image:
        linear-gradient(
            to bottom,
            color-mix(in srgb, var(--wp--preset--color--contrast) 50%, transparent) 0%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 56%, transparent) 30%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent) 62%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 78%, transparent) 100%
        ),
        var(--klacht-foto);
    background-size: cover;
    background-position: center;
}

.klacht__groot--foto .klacht__tekst {
    opacity: 0.92;
}

a.klacht__middel--foto {
    background-color: var(--wp--preset--color--contrast);
    background-image:
        linear-gradient(
            to bottom,
            color-mix(in srgb, var(--wp--preset--color--contrast) 52%, transparent) 0%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 60%, transparent) 28%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 72%, transparent) 58%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 78%, transparent) 100%
        ),
        var(--klacht-foto);
    background-size: cover;
    background-position: center;
    color: var(--wp--preset--color--base);
    justify-content: flex-end;
}

a.klacht__middel--foto .klacht__tekst {
    opacity: 0.92;
}

.klacht__middel {
    background: var(--wp--preset--color--base-2);
    color: var(--wp--preset--color--contrast);
}

.klacht__groot:hover,
.klacht__middel:hover {
    transform: translateY(-3px);
}

.klacht__label {
    font-family: var(--wp--preset--font-family--heading);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--wp--preset--color--primary);
}

.klacht__titel {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.klacht__groot .klacht__titel {
    font-size: 2.25rem;
    letter-spacing: -0.03em;
}

.klacht__tekst {
    font-size: var(--wp--preset--font-size--medium);
    opacity: .82;
}

.klacht__meer {
    margin-top: .4rem;
    font-weight: 700;
    color: var(--wp--preset--color--primary);
}

.klacht__rest {
    grid-column: 2 / 4;
    padding-top: .5rem;
}

.klacht__rest--los {
    grid-column: auto;
    padding-top: 0;
}

.vervolg {
    display: grid;
    grid-template-columns: 20rem 1fr;
    gap: var(--wp--preset--spacing--50);
    align-items: start;
}

.vervolg__label {
    margin: 0 0 .5rem;
    font-family: var(--wp--preset--font-family--heading);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--wp--preset--color--primary);
}

.vervolg__titel {
    margin: 0;
    font-size: var(--wp--preset--font-size--x-large);
}

.vervolg__alles {
    display: inline-block;
    margin-top: var(--wp--preset--spacing--30);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    color: var(--wp--preset--color--primary);
    text-decoration: none;
}

.vervolg__alles::after {
    content: " \2192";
}

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

.vervolg__inhoud {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
}

.vervolg__tegels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vervolg__tegels a {
    display: flex;
    align-items: flex-end;
    height: 100%;
    min-height: 11rem;
    box-sizing: border-box;
    padding: 0.9rem;
    border-radius: var(--commissaris-radius);
    background-color: var(--wp--preset--color--contrast);
    background-image:
        linear-gradient(
            to bottom,
            color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent) 0%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent) 30%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 66%, transparent) 60%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 74%, transparent) 100%
        ),
        var(--vervolg-foto);
    background-size: cover;
    background-position: center;
    color: var(--wp--preset--color--base);
    text-decoration: none;
    transition: transform 0.15s ease;
}

.vervolg__tegels a:hover,
.vervolg__tegels a:focus-visible {
    transform: translateY(-3px);
}

.vervolg__tegels span {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

@media (max-width: 600px) {
    .vervolg__tegels {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .vervolg__tegels li:first-child {
        grid-column: 1 / -1;
    }
}

.vervolg__lijst {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vervolg__lijst a {
    display: inline-block;
    padding: .55rem 1rem;
    border: 1px solid var(--commissaris-lijn);
    border-radius: var(--commissaris-radius-klein);
    background: var(--wp--preset--color--base);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.vervolg__lijst a:hover,
.vervolg__lijst a:focus-visible {
    border-color: var(--wp--preset--color--primary);
    background: var(--commissaris-primary-zacht);
    color: var(--commissaris-primary-diep);
}

@media (max-width: 782px) {
    .vervolg {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--40);
    }
}

.klacht__restkop {
    margin: 0 0 .5rem;
    font-family: var(--wp--preset--font-family--heading);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--commissaris-tekst-zacht);
}

.klacht__rest ul {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.klacht__rest a {
    display: inline-block;
    padding: .3rem .7rem;
    border: 1px solid var(--commissaris-lijn);
    border-radius: var(--commissaris-radius-klein);
    font-size: .95rem;
    color: inherit;
    text-decoration: none;
}

.klacht__rest a:hover {
    border-color: var(--wp--preset--color--primary);
    color: var(--commissaris-primary-diep);
}

@media (max-width: 900px) {
    .klacht__raster {
        grid-template-columns: 1fr 1fr;
    }
    .klacht__groot {
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: 16rem;
    }
    .klacht__rest {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .klacht__raster {
        grid-template-columns: 1fr;
    }
}

.klacht-kop--beeld {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--wp--preset--spacing--50);
}

.klacht-kop__label {
    margin: 0 0 0.6rem;
    font-family: var(--wp--preset--font-family--heading);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--wp--preset--color--primary);
}

.klacht-kop__titel {
    margin: 0;

    max-width: 24ch;
    font-size: var(--wp--preset--font-size--xx-large);
}

.klacht-kop__intro {
    margin: var(--wp--preset--spacing--30) 0 0;
    max-width: 34rem;
    color: var(--commissaris-tekst-zacht);
}

.klacht-kop__beeld img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    max-height: 21rem;
    object-fit: cover;
    border-radius: var(--commissaris-radius);
}

@media (max-width: 782px) {
    .klacht-kop--beeld {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--40);
    }

    .klacht-kop__beeld img {
        aspect-ratio: 16 / 9;
    }
}

.klacht-kop--zwevend {
    position: relative;
}

.klacht-kop--zwevend .klacht-kop__beeld {
    position: absolute;
    top: 0;
    right: 0;
    width: min(420px, 34%);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--commissaris-radius);
    box-shadow: 0 18px 44px rgba(10, 12, 14, .18);
}

.klacht-kop--zwevend .klacht-kop__beeld img {
    display: block;
    width: 100%;
    height: 100%;

    aspect-ratio: 1 / 1;
    max-height: none;
    object-fit: cover;
}

.klacht-kop__datum {
    margin: var(--wp--preset--spacing--20) 0 0;
    font-size: var(--wp--preset--font-size--small);
    color: var(--commissaris-tekst-zacht);
}

main:has(.klacht-kop--zwevend) .klacht-inhoud .klacht-zij {
    margin-top: 260px;
}

@media (max-width: 900px) {
    .klacht-kop--zwevend .klacht-kop__beeld {
        position: static;
        width: 100%;
        margin-top: var(--wp--preset--spacing--40);
    }

    main:has(.klacht-kop--zwevend) .klacht-inhoud .klacht-zij {
        margin-top: 0;
    }
}

.klacht-inhoud {
    display: grid;
    grid-template-columns: minmax(0, var(--wp--style--global--content-size)) minmax(0, 1fr);
    gap: var(--wp--preset--spacing--50);
    align-items: start;
}

/* Zonder zijkolom hoeft er ook geen kolom voor vrijgehouden te worden. */
.klacht-inhoud:not(:has(.klacht-zij)) {
    grid-template-columns: minmax(0, 1fr);
}

.klacht-zij {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--30);

    position: sticky;
    top: calc(var(--commissaris-header-hoogte, 0px) + 1.5rem);
}

.klacht-zij__kaart {
    padding: var(--wp--preset--spacing--40);
    border-radius: var(--commissaris-radius);
    background: var(--wp--preset--color--base-2);
}

.klacht-zij__label {
    margin: 0 0 var(--wp--preset--spacing--30);
    font-family: var(--wp--preset--font-family--heading);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--wp--preset--color--primary);
}

.klacht-zij__persoon {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.klacht-zij__beeld {
    flex: none;
    width: 4.5rem;
    height: 4.5rem;
    overflow: hidden;
    border-radius: 999px;
}

.klacht-zij__beeld img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
}

.klacht-zij__naam {
    display: block;
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.klacht-zij__functie {
    display: block;
    margin-top: .15rem;
    font-size: var(--wp--preset--font-size--small);
    color: var(--commissaris-tekst-zacht);
}

.klacht-zij__link {
    display: inline-block;
    margin-top: var(--wp--preset--spacing--30);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    color: var(--wp--preset--color--primary);
    text-decoration: none;
}

.klacht-zij__link::after {
    content: " \2192";
}

.klacht-zij__link + .klacht-zij__persoon {
    margin-top: var(--wp--preset--spacing--40);
}

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

.klacht-zij__titel {
    margin: 0;
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.klacht-zij__tekst {
    margin: .5rem 0 var(--wp--preset--spacing--30);
    font-size: var(--wp--preset--font-size--small);
    color: var(--commissaris-tekst-zacht);
}

.klacht-zij__knop {
    display: block;
    padding: .7rem 1.2rem;
    border-radius: var(--commissaris-radius-klein);
    background: var(--wp--preset--color--primary);
    color: var(--wp--custom--op-primary);
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.klacht-zij__knop:hover,
.klacht-zij__knop:focus-visible {
    background: var(--commissaris-primary-diep);
}

.klacht-zij__pand {
    display: block;
    width: 100%;
    height: auto;
    margin-block: 0 var(--wp--preset--spacing--30);
    border-radius: var(--commissaris-radius-klein);
}

.klacht-zij__uren {
    margin: 0;
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.6;
}

.klacht-zij__uren div {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
}

.klacht-zij__uren dt {
    color: var(--commissaris-tekst-zacht);
}

.klacht-zij__uren dd {
    margin: 0;
    font-weight: 700;
    white-space: nowrap;
}

.klacht-zij__bereik {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem 1.1rem;
    margin: .75rem 0 0;
    font-size: var(--wp--preset--font-size--small);
    color: var(--commissaris-tekst-zacht);
}

.klacht-zij__bereik a,
.commissaris-menu-bereik a,
.openingstijden__whatsapp a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.klacht-zij__bereik a:hover,
.klacht-zij__bereik a:focus-visible,
.commissaris-menu-bereik a:hover,
.commissaris-menu-bereik a:focus-visible {
    color: var(--wp--preset--color--contrast);
}

.klacht-zij__bereik svg,
.commissaris-menu-bereik svg,
.openingstijden__whatsapp svg {
    flex: none;
    font-size: 1.05em;
}

@media (max-width: 900px) {
    .klacht-inhoud {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--50);
    }

    .klacht-zij {
        position: static;
    }
}

.actiebalk {
    background: var(--wp--preset--color--primary);
    color: var(--wp--custom--op-primary);
}

.actiebalk__link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .2rem .7rem;
    max-width: var(--wp--style--global--wide-size);
    margin-inline: auto;
    padding: .7rem var(--wp--preset--spacing--30);
    color: inherit;
    font-size: var(--wp--preset--font-size--small);
    text-align: center;
    text-decoration: none;
}

.actiebalk__merk {
    font-family: var(--wp--preset--font-family--heading);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.actiebalk__tekst {
    font-weight: 600;
}

.actiebalk__link::after {
    content: "\2192";
    font-weight: 700;
}

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

@media (max-width: 600px) {
    .actiebalk__bedrag {
        display: none;
    }
}

.tarieven__kop {
    max-width: 44rem;
}

.tarieven__label {
    margin: 0 0 .5rem;
    font-family: var(--wp--preset--font-family--heading);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.tarieven__titel {
    margin: 0;
    font-size: var(--wp--preset--font-size--xx-large);
}

.tarieven__uitleg {
    max-width: 34rem;
    margin: .8rem 0 0;
    font-size: var(--wp--preset--font-size--medium);
    color: var(--commissaris-tekst-zacht);
}

.tarieven__kaarten {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: var(--wp--preset--spacing--50);
}

.tarieven__kaart {
    padding: var(--wp--preset--spacing--40);
    border-radius: var(--commissaris-radius);
    background: var(--wp--preset--color--base-2);
}

.tarieven__wanneer {
    margin: 0;
    font-family: var(--wp--preset--font-family--heading);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--commissaris-tekst-zacht);
}

.tarieven__prijs {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin: .4rem 0 var(--wp--preset--spacing--30);
    font-family: var(--wp--preset--font-family--heading);
    font-size: clamp(2.6rem, 6vw, 3.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
}

.tarieven__prijs span {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.35;
    color: var(--commissaris-tekst-zacht);
}

.tarieven__prijs del {
    text-decoration-thickness: 2px;
    opacity: .75;
}

.tarieven__punten {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--wp--preset--font-size--small);
}

.tarieven__punten li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: .5rem;
}

.tarieven__punten li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45em;
    width: .7rem;
    height: .38rem;
    border-left: 2px solid var(--wp--preset--color--primary-diep);
    border-bottom: 2px solid var(--wp--preset--color--primary-diep);
    transform: rotate(-45deg);
}

.tarieven__actie {
    margin-top: 1rem;
    padding: var(--wp--preset--spacing--50);
    border-radius: var(--commissaris-radius);
    background-color: var(--wp--preset--color--contrast);
    background-image:
        linear-gradient(
            to right,
            color-mix(in srgb, var(--wp--preset--color--contrast) 74%, transparent) 0%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 66%, transparent) 50%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 42%, transparent) 78%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent) 100%
        ),
        var(--tarieven-foto);
    background-size: cover;
    background-position: center;
    color: var(--wp--preset--color--base);
}

.tarieven__actiekop {
    margin: 0;
    font-family: var(--wp--preset--font-family--heading);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.tarieven__actietekst {
    margin: .6rem 0 0;
    max-width: 40rem;
    opacity: .88;
}

.tarieven__knop {
    display: inline-block;
    margin-top: var(--wp--preset--spacing--40);
    padding: .8rem 1.6rem;
    border-radius: var(--commissaris-radius-klein);
    background: var(--wp--preset--color--primary);
    color: var(--wp--custom--op-primary);
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 700;
    text-decoration: none;
}

.tarieven__knop:hover,
.tarieven__knop:focus-visible {
    background: var(--commissaris-primary-diep);
    color: var(--wp--preset--color--base);
}

@media (max-width: 782px) {
    .tarieven__kaarten {
        grid-template-columns: 1fr;
    }
}

.mailpoet-pagina {
    min-height: 24rem;
}

.mailpoet-pagina .mailpoet_captcha {
    display: block;
    margin-bottom: var(--wp--preset--spacing--30);
    border-radius: var(--commissaris-radius-klein);
}

.mailpoet-pagina .mailpoet_paragraph {
    margin-bottom: .8rem;
}

.mailpoet-pagina .mailpoet_text,
.mailpoet-pagina input[type="text"] {
    box-sizing: border-box;
    max-width: 20rem;
    width: 100%;
    padding: .8rem 1rem;
    border: 1px solid var(--commissaris-lijn);
    border-radius: var(--commissaris-radius-klein);
    font-family: inherit;
    font-size: var(--wp--preset--font-size--medium);
}

.mailpoet-pagina .mailpoet_submit {
    padding: .8rem 1.6rem;
    border: 2px solid var(--wp--preset--color--primary);
    border-radius: var(--commissaris-radius-klein);
    background: var(--wp--preset--color--primary);
    color: var(--wp--custom--op-primary);
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
    cursor: pointer;
}

.mailpoet-pagina .mailpoet_submit:hover,
.mailpoet-pagina .mailpoet_submit:focus-visible {
    border-color: var(--commissaris-primary-diep);
    background: var(--commissaris-primary-diep);
}

.nieuwsbrief {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--wp--preset--spacing--50);
    align-items: center;
}

.nieuwsbrief__label {
    margin: 0 0 .5rem;
    font-family: var(--wp--preset--font-family--heading);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--commissaris-primary-diep);
}

.nieuwsbrief__titel {
    margin: 0;
    font-size: var(--wp--preset--font-size--x-large);
    max-width: 26rem;
}

.nieuwsbrief__uitleg {
    margin: .7rem 0 0;
    max-width: 30rem;
    color: var(--commissaris-tekst-zacht);
}

.nieuwsbrief__formulier .mailpoet_form_popup_overlay {
    display: none;
}

.nieuwsbrief__formulier .mailpoet_form {
    padding: 0;
}

.nieuwsbrief__formulier .mailpoet_paragraph {
    width: 100%;
    margin-bottom: .6rem;
}

.nieuwsbrief__formulier .mailpoet_text_label {
    display: none;
}

.nieuwsbrief__formulier #mailpoet_form_1 .mailpoet_text,
.nieuwsbrief__formulier #mailpoet_form_1 .mailpoet_textarea,
.nieuwsbrief__formulier input[type="email"],
.nieuwsbrief__formulier input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    padding: .8rem 1rem;
    border: 1px solid var(--commissaris-lijn);
    border-radius: var(--commissaris-radius-klein);
    background: var(--wp--preset--color--base);
    font-family: inherit;
    font-size: var(--wp--preset--font-size--medium);
    color: var(--wp--preset--color--contrast);
}

.nieuwsbrief__formulier input:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
    border-color: var(--wp--preset--color--primary);
}

.nieuwsbrief__formulier .mailpoet_submit {
    width: 100%;
    padding: .8rem 1.6rem;
    border: 2px solid var(--wp--preset--color--primary);
    border-radius: var(--commissaris-radius-klein);
    background: var(--wp--preset--color--primary);
    color: var(--wp--custom--op-primary);
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
    cursor: pointer;
}

.nieuwsbrief__formulier .mailpoet_submit:hover,
.nieuwsbrief__formulier .mailpoet_submit:focus-visible {
    border-color: var(--commissaris-primary-diep);
    background: var(--commissaris-primary-diep);
}

.nieuwsbrief__formulier .mailpoet_validate_success,
.nieuwsbrief__formulier .mailpoet_validate_error {
    margin-top: .6rem;
    font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 782px) {
    .nieuwsbrief {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--40);
    }
}

.team-kop__zin {
    margin: 0;
    color: var(--commissaris-tekst-zacht);
}

.team-raster {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wp--preset--spacing--40);
    margin: 0;
    padding: 0;
    list-style: none;
}

.team-raster a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.team-lid__beeld {
    display: block;
    aspect-ratio: 4 / 5;

    max-height: 22rem;
    border-radius: var(--commissaris-radius);
    background: var(--wp--preset--color--base-2);
    overflow: hidden;
}

.team-lid__beeld img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.team-raster a:hover .team-lid__beeld img,
.team-raster a:focus-visible .team-lid__beeld img {
    transform: scale(1.03);
}

.team-lid__naam {
    display: block;
    margin-top: var(--wp--preset--spacing--30);
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.team-raster a:hover .team-lid__naam,
.team-raster a:focus-visible .team-lid__naam {
    color: var(--wp--preset--color--primary);
}

.team-lid__functie {
    display: block;
    margin-top: 0.2rem;
    font-size: var(--wp--preset--font-size--small);
    color: var(--commissaris-tekst-zacht);
}

.teamlid {
    display: grid;
    grid-template-columns: 20rem minmax(0, var(--wp--style--global--content-size));
    gap: var(--wp--preset--spacing--50);
    align-items: start;
}

.teamlid__beeld img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--commissaris-radius);
}

.teamlid__functie {
    margin: 0 0 var(--wp--preset--spacing--40);
    font-size: var(--wp--preset--font-size--large);
    line-height: 1.45;
}

.teamlid .klacht__restkop {
    margin-bottom: 0.5rem;
}

.teamlid .klacht-zij__link {
    margin-top: var(--wp--preset--spacing--40);
}

.teamlid-inhoud .wp-block-post-content {
    max-width: var(--wp--style--global--content-size);
    margin-top: var(--wp--preset--spacing--50);
}

@media (max-width: 900px) {
    .team-raster {
        grid-template-columns: repeat(3, 1fr);
    }

    .teamlid {
        grid-template-columns: 1fr;
    }

    .teamlid__beeld {
        max-width: 18rem;
    }
}

@media (max-width: 600px) {
    .team-raster {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        --commissaris-verschijn-afstand: 40px;
        --commissaris-verschijn-duur: 0.6s;
    }

    main {
        overflow-x: clip;
    }

    .commissaris-verschijnt {
        opacity: 0;
        transform: translateX(calc(var(--commissaris-verschijn-afstand) * -1));
    }

    .commissaris-verschijnt.is-zichtbaar {
        opacity: 1;
        transform: none;
        transition:
            opacity var(--commissaris-verschijn-duur) cubic-bezier(0.22, 0.61, 0.36, 1),
            transform var(--commissaris-verschijn-duur) cubic-bezier(0.22, 0.61, 0.36, 1);
        transition-delay: var(--commissaris-verschijn-wacht, 0ms);
    }
}

.specialisaties__kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.specialisaties__kop h2 {
    margin: 0;

    font-size: var(--wp--preset--font-size--xx-large);
}

.specialisaties__alles {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    color: var(--commissaris-primary-diep);
    text-decoration: none;
    white-space: nowrap;
}

.specialisaties__alles::after {
    content: " \2192";
}

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

.specialisaties__rij {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: var(--wp--preset--spacing--50) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--commissaris-lijn);
}

.specialisaties__rij li + li {
    border-left: 1px solid var(--commissaris-lijn);
}

.specialisaties__rij li:nth-child(n + 5) {
    border-top: 1px solid var(--commissaris-lijn);
}

.specialisaties__rij li:nth-child(4n + 1) {
    border-left: 0;
}

.specialisaties__rij a {
    display: flex;
    flex-direction: column;

    box-sizing: border-box;
    height: 100%;
    padding: var(--wp--preset--spacing--40);
    color: inherit;
    text-decoration: none;
}

.specialisaties__icoon {
    width: 2.6rem;
    height: 2.6rem;
    color: var(--wp--preset--color--primary);
}

.specialisaties__titel {
    margin-block: var(--wp--preset--spacing--30) .3rem;
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.specialisaties__tekst {
    font-size: var(--wp--preset--font-size--small);
    color: var(--commissaris-tekst-zacht);
}

.specialisaties__rij a:hover,
.specialisaties__rij a:focus-visible {
    background: var(--wp--preset--color--base);
}

.specialisaties__rij a:hover .specialisaties__titel,
.specialisaties__rij a:focus-visible .specialisaties__titel {
    color: var(--wp--preset--color--primary);
}

@media (max-width: 900px) {
    .specialisaties__rij {
        grid-template-columns: 1fr 1fr;
    }

    .specialisaties__rij li + li,
    .specialisaties__rij li:nth-child(4n + 1) {
        border-left: 0;
    }

    .specialisaties__rij li:nth-child(2n) {
        border-left: 1px solid var(--commissaris-lijn);
    }

    .specialisaties__rij li:nth-child(n + 3) {
        border-top: 1px solid var(--commissaris-lijn);
    }
}

@media (max-width: 560px) {
    .specialisaties__rij {
        grid-template-columns: 1fr;
    }

    .specialisaties__rij li:nth-child(2n) {
        border-left: 0;
    }

    .specialisaties__rij li + li {
        border-top: 1px solid var(--commissaris-lijn);
    }
}

.openingstijden {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: stretch;
    column-gap: var(--wp--preset--spacing--60);
}

.openingstijden__beeld img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--commissaris-radius);
}

.openingstijden__kop {
    margin: 0;
    font-size: var(--wp--preset--font-size--x-large);
}

.openingstijden__uren {
    margin: var(--wp--preset--spacing--40) 0 0;
    max-width: 26rem;
}

.openingstijden__uren div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.6rem;
    border-bottom: 1px solid var(--commissaris-lijn);
}

.openingstijden__uren dt {
    font-weight: 600;
}

.openingstijden__uren dd {
    margin: 0;
    color: var(--commissaris-tekst-zacht);
    font-variant-numeric: tabular-nums;
}

.openingstijden__bereiken {
    margin-top: var(--wp--preset--spacing--50);
}

.openingstijden__label {
    margin: 0;
    font-family: var(--wp--preset--font-family--heading);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--commissaris-primary-diep);
}

.openingstijden__uitleg {
    margin: .6rem 0 0;
    max-width: 30rem;
    color: var(--commissaris-tekst-zacht);
}

.openingstijden__telefoon {
    margin: var(--wp--preset--spacing--30) 0 0;
    font-family: var(--wp--preset--font-family--heading);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.openingstijden__telefoon a {
    color: inherit;
    text-decoration: none;
}

.openingstijden__telefoon a:hover,
.openingstijden__telefoon a:focus-visible {
    color: var(--wp--preset--color--primary);
}

.openingstijden__whatsapp {
    margin: .5rem 0 0;
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
    color: var(--wp--preset--color--contrast);
}

.openingstijden__whatsapp a:hover,
.openingstijden__whatsapp a:focus-visible {
    color: var(--wp--preset--color--primary);
}

.openingstijden__adres {
    margin: .35rem 0 0;
    font-size: var(--wp--preset--font-size--small);
    color: var(--commissaris-tekst-zacht);
}

.openingstijden__knop {
    display: inline-block;
    margin-top: var(--wp--preset--spacing--40);
    padding: .7rem 1.4rem;
    border: 2px solid currentColor;
    border-radius: var(--commissaris-radius-klein);
    background: transparent;
    color: var(--wp--preset--color--contrast);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    text-decoration: none;
}

.openingstijden__knop:hover,
.openingstijden__knop:focus-visible {
    background: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
}

@media (max-width: 900px) {
    .openingstijden {
        grid-template-columns: 1fr;
        row-gap: var(--wp--preset--spacing--50);
    }

    .openingstijden__beeld img {
        height: 16rem;
    }
}

.ervaring__raster {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 1rem;
    margin-top: var(--wp--preset--spacing--50);
}

.ervaring__meting {
    display: flex;
    flex-direction: column;
    padding: var(--wp--preset--spacing--40);
    border-radius: var(--commissaris-radius);
}

.ervaring__meting--quali {
    grid-column: 1;
    grid-row: 1;
    background: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
}

.ervaring__meting--google {
    grid-column: 1;
    grid-row: 2;
    background: var(--wp--preset--color--base-2);
}

.ervaring__label {
    margin: 0;
    font-family: var(--wp--preset--font-family--heading);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--commissaris-primary-diep);
}

.ervaring__cijfer {
    margin: .6rem 0 0;
    font-family: var(--wp--preset--font-family--heading);
    font-size: clamp(3.5rem, 7vw, 5rem);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -0.04em;
}

.ervaring__uitleg {
    margin: .6rem 0 var(--wp--preset--spacing--30);
    font-size: var(--wp--preset--font-size--medium);
    opacity: .85;
}

.ervaring__uitleg--donker {
    color: var(--commissaris-tekst-zacht);
    opacity: 1;
}

.ervaring__link {
    margin-top: auto;
    font-weight: 700;
    color: var(--commissaris-primary-diep);
    text-decoration: none;
}

.ervaring__link::after {
    content: " \2192";
}

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

.ervaring__google {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: var(--wp--preset--spacing--30);
}

.ervaring__google-g {
    width: 2.1rem;
    height: 2.1rem;
    flex: none;
}

.ervaring__cijfer--klein {
    margin: 0;
    font-size: 2.6rem;
}

.ervaring__sterren {
    width: 5.6rem;
    height: 1.08rem;
    flex: none;
}

.ervaring__citaat {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: var(--wp--preset--spacing--40);
    border-radius: var(--commissaris-radius);
    background: var(--wp--preset--color--base-2);
}

.ervaring__citaat--breed {
    grid-column: 2 / -1;
}

.ervaring__citaat p {
    margin: 0;
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.01em;
}

.ervaring__citaat p::before {
    content: "\201E";
}

.ervaring__citaat p::after {
    content: "\201D";
}

.ervaring__citaat footer {
    margin-top: auto;
    padding-top: var(--wp--preset--spacing--30);
    font-size: var(--wp--preset--font-size--small);
}

.ervaring__naam {
    display: block;
    font-weight: 700;
}

.ervaring__bron {
    display: block;
    color: var(--commissaris-tekst-zacht);
}

@media (max-width: 900px) {
    .ervaring__raster {
        grid-template-columns: 1fr 1fr;
    }

    .ervaring__meting--quali {
        grid-column: 1;
        grid-row: 1;
    }

    .ervaring__meting--google {
        grid-column: 2;
        grid-row: 1;
    }

    .ervaring__citaat--breed {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .ervaring__raster {
        grid-template-columns: 1fr;
    }

    /*
     * De plaatsing hierboven wijst deze twee naar kolom 2, en die regel geldt
     * hier nog steeds. In een raster van een kolom maakt de browser er dan
     * zelf een tweede bij, waardoor het geheel breder werd dan het scherm en
     * de tekst in kolommen van een paar woorden overbleef.
     */
    .ervaring__meting--quali,
    .ervaring__meting--google {
        grid-column: auto;
        grid-row: auto;
    }
}

.commissaris-nieuws__groot .wp-block-post-title {
    margin-block: .5rem 0;
}

.commissaris-nieuws__groot .wp-block-post-featured-image img {
    width: 100%;
    object-fit: cover;
}

.commissaris-nieuws__klein .wp-block-post-template {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
}

.commissaris-nieuws__klein .wp-block-post-template > li + li {
    padding-top: var(--wp--preset--spacing--40);
    border-top: 1px solid var(--commissaris-lijn);
}

.commissaris-nieuws__klein .wp-block-post-title {
    margin-block: .35rem .4rem;
}

.commissaris-nieuws .wp-block-post-date {
    color: var(--commissaris-tekst-zacht);
}

.commissaris-nieuws .wp-block-post-title a {
    color: inherit;
    text-decoration: none;
}

.commissaris-nieuws .wp-block-post-title a:hover {
    color: var(--commissaris-primary-diep);
}

.commissaris-nieuws .wp-block-post-excerpt {
    color: var(--commissaris-tekst-zacht);
}

.commissaris-feiten {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: var(--wp--preset--spacing--60) 0 0;
    padding: var(--wp--preset--spacing--40) 0 0;
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 22%, transparent);
    list-style: none;
}

.commissaris-feiten li {
    padding-inline: var(--wp--preset--spacing--40);
}

.commissaris-feiten li:first-child {
    padding-inline-start: 0;
}

.commissaris-feiten li + li {
    border-inline-start: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 16%, transparent);
}

.commissaris-feit__kop {
    display: block;
    margin-block-end: .25rem;
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--base);
}

.commissaris-feit__uitleg {
    display: block;
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.45;
    color: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
}

@media (max-width: 900px) {
    .commissaris-feiten {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--wp--preset--spacing--40) 0;
    }

    .commissaris-feiten li:nth-child(odd) {
        padding-inline-start: 0;
        border-inline-start: 0;
    }
}

@media (max-width: 560px) {
    .commissaris-feiten {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--30);
    }

    .commissaris-feiten li {
        padding-inline: 0;
        border-inline-start: 0;
    }
}

header.commissaris-header + * {
    margin-block-start: 0;
}

.commissaris-header .wp-block-navigation {
    font-size: 1.0625rem;
    font-weight: 500;
}

.commissaris-header .wp-block-navigation .wp-block-navigation-item__content {
    padding-block: .35rem;
}

.commissaris-header .wp-block-button.has-small-font-size .wp-block-button__link {
    font-size: 1rem;
    padding-inline: 1.5rem;
}

.commissaris-header .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
.commissaris-header .wp-block-navigation__container > .current_page_item > .wp-block-navigation-item__content,
.commissaris-header .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content,
.commissaris-header .wp-block-navigation__container > .current-menu-parent > .wp-block-navigation-item__content,
.commissaris-header .wp-block-navigation__container > .current_page_ancestor > .wp-block-navigation-item__content,
.commissaris-header .wp-block-navigation__container > .current_page_parent > .wp-block-navigation-item__content {
    font-weight: 700;
}

.commissaris-navgroep > .wp-block-navigation {
    flex: 0 1 auto;
    min-width: 0;
}

.commissaris-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
    justify-content: flex-start;
    gap: clamp(1.4rem, 2.5vw, 2.5rem);
}

.commissaris-header .wp-block-navigation .wp-block-navigation-item__content {
    letter-spacing: .005em;
}

.commissaris-topbar__info {
    letter-spacing: .015em;
}

.commissaris-topbar__info a {
    font-weight: 700;
    letter-spacing: .02em;
}

.wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-search__button,
.wp-block-file__button,
input[type="submit"],
button:not(.wp-block-navigation__responsive-container-open):not(.wp-block-navigation__responsive-container-close) {
    border-radius: var(--commissaris-radius-klein);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
    background-color: var(--wp--preset--color--base);
    border-color: var(--wp--preset--color--base) !important;
    color: var(--wp--preset--color--contrast) !important;
}

@media (min-width: 782px) {
    .commissaris-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: 13.5rem;

        grid-auto-rows: 2.4rem;
        gap: 0;
        padding: 1rem;
        border: 1px solid var(--commissaris-lijn);
        border-radius: var(--commissaris-radius-klein);
        background: var(--wp--preset--color--base);
        box-shadow: 0 16px 38px rgba(20, 24, 28, .14);
    }

    .commissaris-header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
    .commissaris-header .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container,
    .commissaris-header .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
        width: max-content;
        min-width: 0;
        max-width: calc(100vw - 3rem);
    }

    .commissaris-header .wp-block-navigation .has-child:has(> .wp-block-navigation__submenu-container > li:nth-child(9))
        > .wp-block-navigation__submenu-container {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: 13.5rem;
        grid-template-rows: repeat(6, 2.4rem);
    }

    .commissaris-header .wp-block-navigation .has-child:has(> .wp-block-navigation__submenu-container > li:nth-child(13))
        > .wp-block-navigation__submenu-container {
        grid-template-rows: repeat(5, 2.4rem);
    }

    .commissaris-header .wp-block-navigation .has-child:has(> .wp-block-navigation__submenu-container > li:nth-child(9))
        > .wp-block-navigation__submenu-container > li:nth-child(n+7) {
        border-inline-start: 1px solid var(--commissaris-lijn);
        padding-inline-start: 1rem;
        margin-inline-start: .5rem;
    }

    .commissaris-header .wp-block-navigation .has-child:has(> .wp-block-navigation__submenu-container > li:nth-child(13))
        > .wp-block-navigation__submenu-container > li:nth-child(n+7) {
        border-inline-start: 0;
        padding-inline-start: 0;
        margin-inline-start: 0;
    }

    .commissaris-header .wp-block-navigation .has-child:has(> .wp-block-navigation__submenu-container > li:nth-child(13))
        > .wp-block-navigation__submenu-container > li:nth-child(n+6) {
        border-inline-start: 1px solid var(--commissaris-lijn);
        padding-inline-start: 1rem;
        margin-inline-start: .5rem;
    }

    .commissaris-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > li > .wp-block-navigation-item__content {
        display: flex;
        align-items: center;

        box-sizing: border-box;
        height: 100%;
        padding: 0 .6rem;
        border-radius: 6px;
        line-height: 1.25;
        white-space: nowrap;
    }

    .commissaris-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > li > .wp-block-navigation-item__content:hover {
        background: var(--wp--preset--color--base-2);
        color: var(--commissaris-primary-diep);
    }
}

.commissaris-hero > .commissaris-hero__video {
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;

    max-width: none;
    margin-inline: 0 !important;
    object-fit: cover;

    filter: brightness(.46) saturate(.85);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .commissaris-hero__video {
        display: none;
    }
}

@media (max-width: 781px) {
    .commissaris-hero__video {
        display: none;
    }
}

@media (min-width: 782px) {
    .commissaris-hero:has(> .commissaris-hero__video)::before {
        right: 34%;
        background-image: linear-gradient(96deg,
            var(--wp--preset--color--contrast) 0%,
            var(--wp--preset--color--contrast) 52%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent) 82%,
            transparent 100%);
    }
}

.milon-stappen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--40);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.milon-stappen li {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding-top: var(--wp--preset--spacing--30);
    border-top: 2px solid var(--wp--preset--color--primary);
}

.milon-stap__nr {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--commissaris-primary-diep);
}

.milon-stap__kop {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.milon-stap__tekst {
    font-size: var(--wp--preset--font-size--medium);
    color: var(--commissaris-tekst-zacht);
}

@media (max-width: 900px) {
    .milon-stappen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .milon-stappen {
        grid-template-columns: 1fr;
    }
}

.milon-raster {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 1rem;
    margin-top: var(--wp--preset--spacing--50);
}

.milon-raster__groot,
.milon-raster__klein {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: var(--wp--preset--spacing--40);
    border-radius: var(--commissaris-radius);
    background: var(--wp--preset--color--base);
}

.milon-raster__groot {
    grid-row: span 2;
    justify-content: flex-end;
    background: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
}

.milon-raster__groot--foto {
    background-color: var(--wp--preset--color--contrast);
    background-image:
        linear-gradient(
            to bottom,
            color-mix(in srgb, var(--wp--preset--color--contrast) 22%, transparent) 0%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 52%, transparent) 26%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 84%, transparent) 52%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 95%, transparent) 100%
        ),
        var(--milon-foto);
    background-size: cover;
    background-position: center;
}

.milon-raster__groot--foto .milon-raster__tekst {
    opacity: 0.92;
}

.milon-raster__label {
    font-family: var(--wp--preset--font-family--heading);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--wp--preset--color--primary);
}

.milon-raster__titel {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.milon-raster__groot .milon-raster__titel {
    font-size: 2rem;
    letter-spacing: -0.03em;
}

.milon-raster__tekst {
    font-size: var(--wp--preset--font-size--medium);
    opacity: .84;
}

@media (max-width: 900px) {
    .milon-raster {
        grid-template-columns: 1fr 1fr;
    }
    .milon-raster__groot {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

@media (max-width: 560px) {
    .milon-raster {
        grid-template-columns: 1fr;
    }
}

.milon-inschrijven__punten {
    margin: var(--wp--preset--spacing--40) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--wp--preset--font-size--medium);
}

.milon-inschrijven__punten li {
    position: relative;
    padding-inline-start: 1.6rem;
    margin-block-end: .5rem;
    color: color-mix(in srgb, var(--wp--preset--color--base) 84%, transparent);
}

.milon-inschrijven__punten li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5em;
    width: 1rem;
    height: .5rem;
    border-left: 2.5px solid var(--wp--preset--color--primary);
    border-bottom: 2.5px solid var(--wp--preset--color--primary);
    transform: rotate(-45deg);
}

.milon-inschrijven__kaart {
    padding: 1.6rem;
    border-radius: var(--commissaris-radius);
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
    box-shadow: 0 18px 44px rgba(10, 12, 14, .28);
}

.milon-inschrijven__kaart > p,
.milon-inschrijven__kaart > div,
.milon-inschrijven__kaart .fluentform {
    margin-block: 0;
}

.milon-inschrijven__kaart .frm-fluent-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.milon-inschrijven__kaart .frm-fluent-form > * {
    grid-column: 1 / -1;
    margin: 0;
}

.milon-inschrijven__kaart .frm-fluent-form > .milon-form__half {
    grid-column: auto;
}

.milon-inschrijven__kaart .ff-el-group {
    margin-bottom: 0;
}

.milon-inschrijven__kaart .ff-el-input--label {
    padding: 0;
    margin: 0;
}

.milon-inschrijven__kaart .ff-el-input--label label {
    display: block;
    font-family: var(--wp--preset--font-family--heading);
    font-size: .9rem;
    font-weight: 700;
    color: inherit;
}

.milon-inschrijven__kaart .ff-el-form-control {
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin-block-start: .35rem;
    padding: .55rem .7rem;
    border: 1px solid var(--commissaris-lijn);
    border-radius: var(--commissaris-radius-klein);
    background: var(--wp--preset--color--base-2);
    font-family: inherit;
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 400;
    line-height: 1.4;
    color: var(--wp--preset--color--contrast);
    box-shadow: none;
}

.milon-inschrijven__kaart textarea.ff-el-form-control {
    min-height: 5.5rem;
    resize: vertical;
}

.milon-inschrijven__kaart .ff-el-form-control:focus {
    border-color: var(--wp--preset--color--primary);
    outline: 2px solid color-mix(in srgb, var(--wp--preset--color--primary) 40%, transparent);
    outline-offset: 1px;
    box-shadow: none;
}

.milon-inschrijven__kaart .ff-el-tc,
.milon-inschrijven__kaart .ff-el-form-check {
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.5;
    color: var(--commissaris-tekst-zacht);
}

.milon-inschrijven__kaart .ff-el-tc p {
    margin: 0;
    display: inline;
}

.milon-inschrijven__kaart .ff-el-tc a {
    color: var(--commissaris-primary-diep);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.milon-inschrijven__kaart .ff-el-tc a:hover,
.milon-inschrijven__kaart .ff-el-tc a:focus-visible {
    color: var(--wp--preset--color--contrast);
}

.milon-inschrijven__kaart .ff-el-form-check-input {
    margin-inline-end: .5rem;
    accent-color: var(--wp--preset--color--primary);
}

/* Ruimte tussen het laatste veld (of het toestemmingsvinkje) en de knop. */
.fluentform .ff_submit_btn_wrapper {
    margin-top: var(--wp--preset--spacing--40);
}

/*
 * De verzendknop van Fluent Forms, met de knopstijl van het formulier op
 * 'no style'. Zelfde maat en kleuren als de themaknop uit theme.json.
 */
.fluentform .ff-btn-submit.ff_btn_no_style {
    display: inline-block;
    padding: .8rem 1.6rem;
    border: 2px solid var(--wp--preset--color--primary);
    border-radius: var(--commissaris-radius-klein);
    background: var(--wp--preset--color--primary);
    color: var(--wp--custom--op-primary);
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.fluentform .ff-btn-submit.ff_btn_no_style:hover,
.fluentform .ff-btn-submit.ff_btn_no_style:focus-visible,
.fluentform .ff-btn-submit.ff_btn_no_style:active {
    border-color: var(--commissaris-primary-diep);
    background: var(--commissaris-primary-diep);
    color: var(--wp--preset--color--base);
}

.fluentform .ff-btn-submit.ff_btn_no_style:focus-visible {
    outline: 2px solid var(--commissaris-primary-diep);
    outline-offset: 3px;
}

.fluentform .ff-btn-submit.ff_btn_no_style[disabled] {
    opacity: .6;
    cursor: default;
}

.milon-inschrijven__kaart .ff-btn-submit {
    display: inline-block;
    padding: .8rem 1.4rem;
    border: 0;
    border-radius: var(--commissaris-radius-klein);
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--contrast);
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
    cursor: pointer;
}

.milon-inschrijven__kaart .ff-btn-submit:hover {
    filter: brightness(1.08);
}

.milon-inschrijven__kaart .ff-el-is-error .text-danger,
.milon-inschrijven__kaart .ff-errors-in-stack {
    margin-block-start: .3rem;
    font-size: var(--wp--preset--font-size--small);
    color: #ffb4a8;
}

.milon-inschrijven__kaart .ff-el-is-error .ff-el-form-control {
    border-color: #ffb4a8;
}

.milon-inschrijven__kaart .ff-message-success {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: var(--wp--preset--font-size--medium);
    color: inherit;
}

@media (max-width: 600px) {
    .milon-form__rij {
        grid-template-columns: 1fr;
    }
}

.milon-beeld {
    margin-block: 0 var(--wp--preset--spacing--50);
}

.milon-beeld img {
    display: block;
    width: 100%;

    aspect-ratio: 21 / 8;
    object-fit: cover;
    object-position: center 42%;
}

.milon-raster__beeld {
    padding: 0;
    overflow: hidden;
}

.milon-raster__beeld img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.milon-raster__beeld .milon-raster__titel,
.milon-raster__beeld .milon-raster__tekst {
    padding-inline: var(--wp--preset--spacing--40);
}

.milon-raster__beeld .milon-raster__titel {
    margin-block-start: var(--wp--preset--spacing--30);
}

.milon-raster__beeld .milon-raster__tekst {
    padding-block-end: var(--wp--preset--spacing--40);
}

.milon-raster__beeld--onder {
    display: flex;
    flex-direction: column;
}

.milon-raster__beeld--onder .milon-raster__titel {
    margin-block-start: var(--wp--preset--spacing--40);
}

.milon-raster__beeld--onder .milon-raster__tekst {

    padding-block-end: var(--wp--preset--spacing--30);
}

.milon-raster__beeld--onder img {
    margin-block-start: auto;
}

.milon-inschrijven {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.milon-inschrijven::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:

        linear-gradient(100deg,
            color-mix(in srgb, var(--wp--preset--color--contrast) 74%, transparent) 0%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent) 40%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 42%, transparent) 62%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 16%, transparent) 100%),
        var(--commissaris-inschrijven-beeld, none);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center, center right;
    pointer-events: none;
}

@media (max-width: 900px) {

    .milon-inschrijven::before {
        background-image:
            linear-gradient(180deg,
                color-mix(in srgb, var(--wp--preset--color--contrast) 82%, transparent) 0%,
                color-mix(in srgb, var(--wp--preset--color--contrast) 74%, transparent) 46%,
                color-mix(in srgb, var(--wp--preset--color--contrast) 58%, transparent) 100%),
            var(--commissaris-inschrijven-beeld, none);
    }
}

@media (max-width: 900px) {
    .milon-beeld img {
        aspect-ratio: 16 / 9;
    }
}

.commissaris-header .wp-block-navigation__container > li > .is-in-beeld.is-in-beeld {
    color: var(--commissaris-primary-diep);
    font-weight: 700;
    text-decoration: none;
    box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--primary);
}

.commissaris-header .heeft-onderdeel-in-beeld > li > .wp-block-navigation-item__content:not(.is-in-beeld) {
    color: inherit;
    font-weight: 500;
    box-shadow: none;
}

@media (prefers-reduced-motion: no-preference) {
    .commissaris-header .wp-block-navigation__container > li > a {
        transition: color .15s ease, box-shadow .15s ease;
    }
}

/*
 * Afbeeldingen die los in de tekst staan, zonder blokwikkel van de editor.
 * Uit de oude site komen kale <img>-tags mee met hun oorspronkelijke breedte
 * in het width-attribuut; een van 1360px stak zo ver buiten de tekstkolom van
 * 760px. De blokstijlen dekken alleen .wp-block-image, dus die kale tags
 * blijven daar buiten.
 */
.wp-block-post-content img {
    max-width: 100%;
    height: auto;
}

.wp-block-post-content iframe[src*="youtube.com"],
.wp-block-post-content iframe[src*="youtube-nocookie.com"],
.wp-block-post-content iframe[src*="vimeo.com"] {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}

.artikel-gerelateerd {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wp--preset--spacing--40);
    list-style: none;
    margin: 0;
    padding: 0;
}

.artikel-gerelateerd a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.artikel-gerelateerd__beeld {
    display: block;
    aspect-ratio: 4 / 3;
    margin-bottom: var(--wp--preset--spacing--20);
    border-radius: var(--commissaris-radius);
    overflow: hidden;
}

.artikel-gerelateerd__beeld img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artikel-gerelateerd__titel {
    display: block;
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

.artikel-gerelateerd a:hover .artikel-gerelateerd__titel,
.artikel-gerelateerd a:focus-visible .artikel-gerelateerd__titel {
    color: var(--wp--preset--color--primary);
}

@media (max-width: 782px) {
    .artikel-gerelateerd {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--50);
    }
}

/*
 * Het overzicht van onderliggende pagina's op /klachten/, /specialisaties/ en
 * /praktijkinformatie/. Met foto's tegels, zonder foto's eenvoudige kaarten.
 */
.kinderen__titel {
    margin: 0 0 var(--wp--preset--spacing--40);
    font-size: var(--wp--preset--font-size--x-large);
}

.kinderen__lijst {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kinderen__lijst a {
    display: flex;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    padding: 1rem 1.1rem;
    border-radius: var(--commissaris-radius);
    background-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.kinderen__lijst a:hover,
.kinderen__lijst a:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
}

.kinderen__lijst span {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.kinderen__lijst--tegels a {
    align-items: flex-end;
    min-height: 10rem;
    padding: 0.9rem;
    background-color: var(--wp--preset--color--contrast);
    background-image:
        linear-gradient(
            to bottom,
            color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent) 0%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent) 30%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 66%, transparent) 60%,
            color-mix(in srgb, var(--wp--preset--color--contrast) 74%, transparent) 100%
        ),
        var(--kinderen-foto);
    background-size: cover;
    background-position: center;
    color: var(--wp--preset--color--base);
}

@media (max-width: 600px) {
    /*
     * minmax(0, 1fr) en niet 1fr: een kolom van 1fr wordt nooit smaller dan
     * zijn inhoud, dus een lange titel als 'Knie of heup prothese - OrthoXpert'
     * trok zijn kolom breder en liet de andere als een smalle strook over.
     * Met een ondergrens van nul blijven de twee kolommen even breed en breekt
     * de titel netjes af.
     */
    .kinderen__lijst {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/*
 * Een overzichtspagina heeft geen eigen tekst en geen uitgelichte afbeelding.
 * De twee blokken daarvoor blijven dan als lege stroken staan, samen zo'n
 * 200px, tussen de titel en het overzicht. Ze verdwijnen als er niets in zit.
 */
.pagina-beeld:not(:has(*)),
.klacht-inhoud:not(:has(.klacht-zij)):not(:has(.wp-block-post-content > *)) {
    display: none;
}

/*
 * Kaarten van de onderliggende pagina's, onder de tekst van een pagina die
 * zelf iets te zeggen heeft (/samenwerkingen/). Het logo komt uit de tekst
 * van de onderliggende pagina.
 */
.kinderkaarten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem;
    margin: var(--wp--preset--spacing--50) 0 0;
    padding: 0;
    list-style: none;
}

.kinderkaart {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    height: 100%;
    box-sizing: border-box;
    padding: 1rem;
    border-radius: var(--commissaris-radius);
    background: var(--wp--preset--color--base-2);
    color: var(--wp--preset--color--contrast);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.kinderkaart:hover,
.kinderkaart:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
}

.kinderkaart__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5.5rem;
    padding: .75rem;
    border-radius: calc(var(--commissaris-radius) - 4px);
    background: var(--wp--preset--color--base);
}

.kinderkaart__logo img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.kinderkaart__naam {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.kinderkaart__naam::after {
    content: " \2192";
}

.kinderkaart__intro {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.5;
    color: var(--commissaris-tekst-zacht);
}

/* De zwevende WhatsApp-knop rechtsonder, alleen op fysio (inc/whatsapp.php). */
.commissaris-whatsapp {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
    transition: transform .15s ease;
}

.commissaris-whatsapp svg {
    fill: currentColor;
}

.commissaris-whatsapp:hover {
    transform: scale(1.06);
    color: #fff;
}

.commissaris-whatsapp:focus-visible {
    outline: 4px solid rgba(37, 211, 102, .35);
    outline-offset: 0;
}

@media print {
    .commissaris-whatsapp {
        display: none;
    }
}

/*
 * Het resultaatblok op de milonvoorpagina: één groot cijfer, als kaart in
 * het merkblauw met donkere tekst.
 */
.milon-kracht {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--wp--preset--spacing--50);
    box-sizing: border-box;
    padding: var(--wp--preset--spacing--60);
    border-radius: var(--commissaris-radius);
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--contrast);
}

.milon-kracht__cijferblok {
    display: flex;
    flex-direction: column;
    padding-right: var(--wp--preset--spacing--50);
    border-right: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
}

.milon-kracht__cijfer {
    margin: 0;
    font-family: var(--wp--preset--font-family--heading);
    font-size: clamp(3.4rem, 7vw, 5.6rem);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.milon-kracht__label {
    margin: .9rem 0 0;
    font-family: var(--wp--preset--font-family--heading);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.milon-kracht__titel {
    margin: -.15em 0 0;
    max-width: 22ch;
    font-size: var(--wp--preset--font-size--xx-large);
}

.milon-kracht__tekst {
    margin: .8rem 0 0;
    max-width: 44rem;
}

.milon-kracht__noot {
    margin: 1rem 0 0;
    font-size: .78rem;
    color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent);
}

@media (max-width: 781px) {
    .milon-kracht {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--40);
        padding: var(--wp--preset--spacing--50);
    }

    .milon-kracht__cijferblok {
        padding-right: 0;
        padding-bottom: var(--wp--preset--spacing--40);
        border-right: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
    }
}

/* Spierkracht en leeftijd: uitleg links, de grafiek rechts. */
.milon-spierkracht {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--wp--preset--spacing--60);
    align-items: center;
}

.milon-spierkracht__titel {
    margin: 0 0 var(--wp--preset--spacing--30);
    font-size: var(--wp--preset--font-size--xx-large);
}

.milon-spierkracht__tekst p:not(.commissaris-eyebrow) {
    margin: 0 0 .8rem;
    color: var(--commissaris-tekst-zacht);
}

.milon-spierkracht__beeld {
    margin: 0;
}

.milon-spierkracht__beeld img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--commissaris-radius);
}

@media (max-width: 900px) {
    .milon-spierkracht {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--50);
    }
}

/* ==========================================================================
   De kop op een smal scherm

   De menuknop verhuist naar de bovenste balk, naast de merklogo's, waar toch
   al ruimte vrij was omdat adres en telefoonnummer daar wegvallen. De balk
   eronder had daarmee alleen nog de knop 'Afspraak maken' over, en die staat
   nu in de menu-overlay zelf. Zo scheelt de kop een hele balk hoogte.

   De knop kan niet uit de navigatie gehaald worden: hij hangt aan het blok en
   verliest zijn werking zodra hij daarbuiten komt te staan. Hij wordt daarom
   over de bovenste balk heen gelegd, met dezelfde hoogte zodat hij midden in
   die balk uitkomt.
   ========================================================================== */

/* De hoogte van de tweede balk staat hier en niet in het sjabloon, zodat een
   smal scherm hem op nul kan zetten. Een waarde in het blok zelf komt als
   inline stijl mee en wint dan van elke regel hier. */
.commissaris-hoofdbalk {
    padding-block: 0.9rem;
}

@media (max-width: 781px) {
    .commissaris-hoofdbalk {
        padding-block: 0;
    }

    /*
     * De menuknop hangt normaal aan de navigatie, want die staat op relatief.
     * Op deze breedte wordt de kop zelf het ankerpunt, zodat 'top: 0' de
     * bovenste balk is en niet de balk eronder.
     */
    .commissaris-hoofdbalk,
    .commissaris-navgroep > .wp-block-navigation {
        position: static;
    }

    /* De knop 'Afspraak maken' staat op deze breedte in de overlay. */
    .commissaris-navgroep > .wp-block-buttons {
        display: none;
    }

    .commissaris-header .commissaris-navgroep {
        min-height: 0;
    }

    .wp-block-navigation__responsive-container-open {
        position: absolute;
        top: 0;
        right: var(--wp--style--root--padding-right, 1.25rem);
        z-index: 2;

        height: var(--commissaris-topbalk);
        min-width: 2.75rem;
        justify-content: flex-end;
        margin-inline: 0;
        padding-inline: 0;

        color: var(--wp--custom--op-primary);
    }

    /* Naast de twee merklogo's is geen ruimte meer voor het woord erbij; de
       knop houdt zijn naam voor schermlezers via aria-label. */
    .commissaris-menuknop__woord {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .commissaris-merktab {
        padding-inline: .55rem;
    }

    .commissaris-merktab img {
        height: calc(var(--commissaris-logo-hoogte, 34px) * .85);
    }
}

/* De items met een submenu blijven dicht tot je op het pijltje klikt. Anders
   begint het menu met zestien klachten en vijftien specialisaties, en zie je
   van de rest niets meer.

   De uitklapknop van het navigatieblok zelf gaat uit beeld: die doet in de
   overlay niets, want de kern zet daar elk submenu open zolang de overlay
   open is. mobielmenu.js zet er een eigen knop naast. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
    display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    display: none;
}

.wp-block-navigation__responsive-container.is-menu-open
    .has-child.is-uitgeklapt
    > .wp-block-navigation__submenu-container {
    display: block;
    padding-bottom: .5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid var(--commissaris-lijn);
}

.wp-block-navigation__responsive-container.is-menu-open
    .has-child
    > .wp-block-navigation__submenu-container {
    grid-column: 1 / -1;
    padding-left: 1rem;
}

.commissaris-submenuknop {
    align-items: center;
    justify-content: center;

    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.commissaris-submenuknop svg {
    transition: transform .18s ease;
}

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

@media (prefers-reduced-motion: reduce) {
    .commissaris-submenuknop svg {
        transition: none;
    }
}

/* Het navigatieblok toont dezelfde inhoud op elke breedte; alleen op smal
   scherm zit die in een overlay. Deze twee toevoegingen horen daar en nergens
   anders, anders staan ze op desktop dubbel in de balk. */
.commissaris-menu-afspraak,
.commissaris-submenuknop {
    display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .commissaris-submenuknop {
    display: flex;
}

.wp-block-navigation__responsive-container.is-menu-open .commissaris-menu-afspraak {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .4rem;

    margin-top: var(--wp--preset--spacing--40);
    padding-top: var(--wp--preset--spacing--30);
    border-top: 1px solid var(--commissaris-lijn);
}

.wp-block-navigation__responsive-container.is-menu-open .commissaris-menu-afspraak .wp-block-button__link {
    display: block;
    text-align: center;
    font-size: 1rem;
}

.wp-block-navigation__responsive-container.is-menu-open .commissaris-menu-bereik {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem 1.1rem;
    margin: 0;
    font-size: var(--wp--preset--font-size--small);
    color: var(--commissaris-tekst-zacht);
    text-decoration: none;
}

/* De overlay zelf: de kern zet de inhoud op flex-start, waardoor de lijst
   niet breder wordt dan de langste tekst. Op een telefoon hoort hij over de
   volle breedte te staan, met knoppen die groot genoeg zijn om te raken. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    align-items: stretch;
    width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    width: 100%;
    gap: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li {
    width: 100%;
    border-bottom: 1px solid var(--commissaris-lijn);
}

.wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container
    > li
    > .wp-block-navigation-item__content {
    display: block;
    padding-block: .85rem;
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.15rem;
    font-weight: 700;
}

.wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    display: block;
    padding-block: .5rem;
    font-size: 1rem;
}

/* ==========================================================================
   Tarieventabel

   De tabel kwam uit Word: Calibri, kolombreedtes in punten, randen per cel en
   twee lege kolommen om het euroteken los te zetten. Dat is vervangen door
   een gewoon tabelblok, met de opmaak hier. Een prijslijst leest het
   prettigst als de bedragen recht onder elkaar staan, vandaar de cijfers op
   vaste breedte.
   ========================================================================== */

.wp-block-table.is-style-tarieven {
    margin-block: var(--wp--preset--spacing--40);
    overflow-x: auto;
}

.wp-block-table.is-style-tarieven table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
}

.wp-block-table.is-style-tarieven th,
.wp-block-table.is-style-tarieven td {
    padding: .75rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--commissaris-lijn);
    text-align: left;
    vertical-align: baseline;
}

.wp-block-table.is-style-tarieven thead th {
    border-bottom: 2px solid var(--wp--preset--color--primary);
    font-family: var(--wp--preset--font-family--heading);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--wp--preset--color--primary);
}

/* De bedragen rechts uitgelijnd en op vaste cijferbreedte, zodat de komma's
   onder elkaar vallen. */
.wp-block-table.is-style-tarieven tr > *:last-child {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.wp-block-table.is-style-tarieven tbody tr > *:last-child {
    font-weight: 700;
}

.wp-block-table.is-style-tarieven tbody tr:nth-child(odd) {
    background: color-mix(in srgb, var(--wp--preset--color--primary) 4%, transparent);
}

.wp-block-table.is-style-tarieven tbody tr:last-child td {
    border-bottom: 0;
}

@media (max-width: 600px) {
    .wp-block-table.is-style-tarieven th,
    .wp-block-table.is-style-tarieven td {
        padding: .65rem .5rem;
    }
}

/* De inklapbare delen van de voet; zie assets/js/voet.js. Op een breed scherm
   staan ze open en moet een summary er precies uitzien als de kop die er
   stond. */
.voet-inklap__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;

    margin: 0 0 .5rem;
    font-family: var(--wp--preset--font-family--heading);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    list-style: none;
}

.voet-inklap__kop::-webkit-details-marker {
    display: none;
}

@media (min-width: 782px) {
    .voet-inklap__kop {
        cursor: default;
        pointer-events: none;
    }
}

@media (max-width: 781px) {
    .commissaris-footer .wp-block-columns {
        gap: 0;
    }

    .voet-inklap {
        border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 22%, transparent);
    }

    .voet-inklap:last-of-type {
        border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 22%, transparent);
    }

    .voet-inklap__kop {
        margin: 0;
        padding-block: .9rem;
        cursor: pointer;
    }

    .voet-inklap__kop::after {
        content: "";
        width: .5rem;
        height: .5rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        transition: transform .18s ease;
    }

    .voet-inklap[open] > .voet-inklap__kop::after {
        transform: translateY(2px) rotate(225deg);
    }

    .voet-inklap > :not(summary) {
        margin-top: 0;
        padding-bottom: .75rem;
    }

    /* De regelhoogte van twee is voor een kolom naast andere kolommen; in een
       uitklap is dat alleen maar lengte. */
    .commissaris-footer .commissaris-linklijst {
        line-height: 1.7;
    }
}

@media (prefers-reduced-motion: reduce) {
    .voet-inklap__kop::after {
        transition: none;
    }
}