/**
 * Frontend stylesheet for the VerharenWeb plugin.
 *
 * FONTS: no longer defined here. core/font-manager.php emits @font-face for the
 * SELECTED font only, using the full absolute plugin URL (VERHAREN_ASSETS_URL)
 * — LiteSpeed-safe AND folder-name-agnostic. This CSS just consumes var(--vp-font).
 *
 * ICONS: the mask-image URLs below are ROOT-RELATIVE absolute paths
 * (/wp-content/plugins/VerharenWeb/assets/…) on purpose. Relative paths
 * (../../assets/…) break the moment LiteSpeed inlines this CSS via UCSS or serves
 * a combined file from /wp-content/litespeed/ (they resolve against the combined
 * file, not this stylesheet) — the cause of past intermittent 404s. Absolute
 * paths resolve against the domain root everywhere. The core plugin folder must
 * be named "VerharenWeb" on all sites; if you rename it, update these paths.
 */


/** -------------- GENERAL STYLING BLOCKS ----------------- */


/* Color variables — overridden by wp_add_inline_style from plugin settings.
   Dit zijn alleen noodwaarden voor het geval de plugin nog niets heeft
   ingespoten (eerste installatie, of een cachefout). De accentkleur stond hier
   op oranje, waardoor een site zonder ingestelde kleuren oranje accenten kreeg
   die nergens op sloegen. Hij valt nu terug op de merkkleur: dan is de site in
   het ergste geval eenkleurig in plaats van bont. */
:root {
    --vp-brand-color: #ff0000;
    --vp-accent-color: var(--vp-brand-color);
    --vp-brand-gradient: var(--vp-brand-color);
}

/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html,
.page-wrapper {
    height: 100%;
    margin: 0!important;
    font-size: 14px;
    font-family: var(--vp-font, 'Inter', Arial, Helvetica, sans-serif)!important;
    font-weight: 500;
    color: #666;
}

img {
    width: 100%;
    height: auto;
}

a {
    text-decoration: none;
}

ul {
    box-sizing: border-box;
    list-style: none !important;
}

/* Lazy-loading elements */
.vp-divi-lazy-load {
    background-color: white;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.vp-divi-lazy-load.lazy-loaded {
    opacity: 1;
    background-color: transparent;
}

/* Show lazy elements immediately in Elementor / Divi visual editors */
.elementor-editor-active .vp-divi-lazy-load,
.et-fb-preview .vp-divi-lazy-load {
    opacity: 1;
}

.vp-category-image.lazy-loaded:before {
    opacity: 0;
    background-color: transparent;
}

.hidden {
    opacity: 0;
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
    pointer-events: none;
}

.visible {
    opacity: 1;
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
}

.content-spacer {
    padding: 1.25em 0;
    height: 1px;
}

/* Scheidingslijnen. Er zijn er twee soorten en ze horen NIET dezelfde kleur te
   hebben:
     - onder een titel  → merkkleur (rood). Dat is .heading-underline; die hoort
       bij de kop en mag opvallen.
     - tussen twee blokken → grijs. Een rode streep tussen losse blokken leest
       als een accent terwijl het alleen scheiding is, en met meerdere op één
       pagina wordt het onrustig.
   Het grijs is #e4e4e4, hetzelfde grijs als de blokken zelf gebruiken (en als
   .application-form .content-divider hieronder al hanteerde). Zet
   --vp-divider-color om ze site-breed anders te maken. */
/* De ruimte tussen twee blokken. Divi zet die als sectieruimte: 6em boven en
   6em onder, en 1em is in een Divi-sectie 14px — dus 84px, en 168px tussen twee
   blokken. Op de tablet 5em (70px) en op de telefoon 4em (56px).

   Twee blokken kunnen dat niet: de berichtenlijst en de reviews tekenen niets
   als er geen berichten of beoordelingen zijn. Hun sectie staat daarom op nul
   ruimte — anders bleef er een leeg gat van 168px staan — en hangt de ruimte
   aan het blok zelf, dat er alleen is als er iets te tonen valt. Zo klopt het
   in beide gevallen (DV, 23-09-2026). */
/* Hoe breed de site maximaal wordt: de kopbalk, de voet, de banner, de
   vlakken en de inhoudskolommen stoppen hier allemaal op.

   1320px sinds 23-09-2026 (was 1200). Elke container staat óók op width: 90%,
   dus er blijft altijd 5% marge aan weerskanten en niets raakt ooit de rand van
   het venster. Die 90% bepaalt de breedte tot een venster van 1467px; pas
   daarboven bijt dit maximum. Opgemeten per schermbreedte:

     venster   1200      1320      1400
     1366      1229      1229      1229     (90% wint, geen verschil)
     1440      1200      1296      1296
     1512      1200      1320      1361
     1920      1200      1320      1400

   Boven de 1320 gaat het dus alleen nog om schermen vanaf 1512, en daar kost
   het vooral zijmarge. 1280–1320 is ook wat de gangbare frameworks aanhouden
   (Tailwind 1280, Bootstrap 1320). */
:root {
    --vp-site-max: 1320px;
}

:root {
    --vp-blokruimte: 84px;
}

@media (max-width: 980px) {
    :root { --vp-blokruimte: 70px; }
}

@media (max-width: 767px) {
    :root { --vp-blokruimte: 56px; }
}

.et_pb_section .vp-blog-list,
.et_pb_section .vp-reviews {
    margin-block: var(--vp-blokruimte, 84px);
}

:root {
    --vp-divider-color: #e4e4e4;
    /* Hoe lang het accentstreepje onder een kop is. Het liep van 100 tot 657
       pixels: elke Divi-module had zijn eigen max_width (200, 250, 300, 352…)
       en .heading-underline was net zo breed als de tekst erboven — een kop van
       vijf woorden kreeg dus een streep van een halve pagina. Nu één maat voor
       alle drie de sites, hier in te stellen (DV, 23-09-2026).

       Het is een máximum, geen vaste breedte: een korte kop ("D Verharen",
       100px) houdt zijn eigen breedte en krijgt geen streep die breder is dan
       de tekst. */
    --vp-streepje: 120px;
    /* Op een kaart (vacature- en blogoverzicht) staat de kop in een smalle kolom
       en oogt 120px mager; daar mag het streepje iets ruimer. */
    --vp-streepje-kaart: 170px;
    /* De voet sluit af met hetzelfde streepje, maar kleiner: daar scheidt het
       twee regels van elkaar en hoort het niet mee te lezen. */
    --vp-streepje-voet: 60px;
}

.content-divider {
    border-top: 4px solid var(--vp-divider-color);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    border-radius: 2px;
    max-width: var(--vp-site-max, 1320px);
}

.content-divider-two {
    border-top: 4px solid var(--vp-divider-color);
    margin: 2em auto;
    max-width: var(--vp-site-max, 1320px);
    border-radius: 2px;
}

.js-vacancies-vp-container .content-divider {
    margin-top: 1em;
    margin-bottom: 1em;
    border-color: white;
}

.vp-related-posts .content-divider {
    margin-bottom: 4em;
    margin-left: auto;
    margin-right: auto;
    border-top: 4px solid var(--vp-divider-color);
}

.application-form .content-divider  {
    border-top: 4px solid #e4e4e4;
}

/* Op de contactpagina blijft de lijn tussen het bedrijfsblok en de
   openingstijden ook op een telefoon staan.

   Onder 650px verbergt de stylesheet elke .content-divider (twee regels: één
   voor 500–649px en één voor daaronder). Meestal is dat terecht — die lijnen
   scheiden kolommen die op een telefoon toch al onder elkaar komen te staan, en
   dan is de lijn dubbelop. Hier niet: het bedrijfsblok en de openingstijden
   staan óók op een breed scherm onder elkaar met die lijn ertussen, dus op een
   telefoon liepen de twee blokken zonder scheiding in elkaar over
   (DV, 23-09-2026).

   Alleen deze ene lijn, niet die tussen twee bedrijfsblokken: die staat een
   niveau dieper, in .contact-info-blocks. Twee klassen diep, dus dit wint van
   de regels die hem verbergen, waar die ook staan. Geldt op alle drie de sites
   tegelijk; de opbouw van de contactpagina is er hetzelfde. */
@media (max-width: 649px) {
    .contact-info-container > .content-divider {
        display: block;
    }
}

.custom-inline-bullet {
    font-size: 120%;
    color: var(--vp-brand-color);
    line-height: 0;
}

.custom-inline-bullet-big {
    font-size: 160%;
    color: var(--vp-brand-color);
    line-height: 0;
    position: relative;
    top: 2px;
    padding-right: 3px;
}

.custom-inline-dash {
    font-size: 140%;
    color: var(--vp-dark-color, #333);
    line-height: 0;
    top: 1px;
    position: relative;
}

.transition-animation {
    -webkit-transition: all 0.7s cubic-bezier(0, 1.11, 1, 0.84);
    transition: all 0.7s cubic-bezier(0, 1.11, 1, 0.84);
}

.transition-animation:hover {
    -webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

/** -------------- STYLING OF THE WEBSITE HEADER AND MENU ----------------- */

.vp-header {
    background-color: #fff;
    position: relative;
    width: 100%;
    z-index: 1001;
    box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.25); 
}

.vp-header > .vp-container {
    padding: 1em 0;
    background-color: white;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 4px 18px -4px rgba(0, 0, 0, 0.4);
    max-width: none;
    position: relative;
}

.vp-header .vp-inner-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 90%;
    max-width: var(--vp-site-max, 1320px);
    margin: auto;
}

.vp-logo-area, .vp-logo-area-scroll {
    flex-shrink: 1;
    height: 40px;
    margin-left: 0;
}

.vp-logo-area a {
    display: inline;
    line-height: 0;
}

.vp-logo-area img {
    max-width: 300px;
    height: 100%;
    object-fit: contain;
    object-position: left;
}

/* Override logo size for scroll header */
.vp-logo-area-scroll img {
    max-width: 250px;
    height: 100%;
    object-fit: contain;
    object-position: left;
}

/* Secondary Header with Unique Selling Points */
#vp-secondary-header {
    /* Dezelfde kleur als de knoppen: de merkkleur, vlak. Hier stond een verloop
       van merk- naar accentkleur met een zwarte sluier van 25% eroverheen (voor
       het contrast van de witte tekst). Die combinatie maakte de balk donkerder
       dan élke ingestelde kleur, waardoor hij naast de knoppen op een derde
       kleur leek te staan (DV, 15-09-2026). Nu is het letterlijk de kleur van
       .btn-primary, en het contrast wordt niet meer met een sluier geregeld maar
       met de tekstkleur: --vp-brand-contrast is zwart of wit, per site berekend
       uit de merkkleur (zie vp_contrast_color() in core/function.php).

       Op een vacaturepagina met bedrijfskleuren zet bedrijfskleuren.php hier
       --vp-usp-bg neer: de donkerste van de twee kleuren van de opdrachtgever.
       Zonder die variabele blijft het gewoon de merkkleur (DV, 23-09-2026). */
    background: var(--vp-usp-bg, var(--vp-brand-color, #a31b00));
    box-shadow: 0 0px 18px 0px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 998;
}

/* Staat er niets op de balk, dan draagt hij hetzelfde verloop als het streepje
   in de meeloopkop (#vp-secondary-header-scroll): van de lichtste naar de
   donkerste huisstijlkleur, en op een vacaturepagina met bedrijfsgegevens de
   twee kleuren van die opdrachtgever (DV, 23-09-2026).

   Mét USP's blijft hij één kleur. Dat is dezelfde afweging als op 15-09: tekst
   op een verloop leest onrustig, en --vp-brand-contrast rekent zwart of wit uit
   voor één kleur, niet voor twee. */
#vp-secondary-header:not(:has(.vp-usp)) {
    background: var(--vp-brand-gradient, var(--vp-usp-bg, var(--vp-brand-color, #a31b00)));
}

.vp-secondary-container {
    display: flex;
    flex-wrap: nowrap;
    max-width: var(--vp-site-max, 1320px);
    width: 90%;
    height: 40px;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    gap: 48px;
}

.vp-usp {
    /* Wit op een donkere merkkleur, bijna-zwart op een lichte. De schaduw die
       hier stond was het vangnet onder de oude sluier; op een vlakke kleur met
       een berekende tekstkleur voegt hij niets toe en op donkere tekst werkt hij
       tegen. */
    color: var(--vp-usp-fg, var(--vp-brand-contrast, #fff));
    /* Size to content and let the container center them, so 1 or 2 USPs sit in
       the middle instead of stretching across the bar. Shrinks if needed. */
    flex: 0 1 auto;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    font-family: var(--vp-font, 'Inter', Helvetica, Arial, Lucida, sans-serif);
    letter-spacing: 0.5px;
    line-height: 0.8em;
}

.vp-usp i {
    margin-right: 5px;
    font-weight: 900;
    font-size: 18px;
    vertical-align: middle;
}

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

.vp-inline-usp span.vp-divi-sub-text {
    line-height: 1em !important;
}

/* De tekst naast het vinkje. 1em hield een regel strak tegen de volgende aan
   zodra hij afbrak; 1.25 leest als één zin, terwijl de ruimte tussen twee
   pluspunten van de modulemarge blijft komen (DV, 20-09-2026). */
.vp-divi-services-inline-checks span.vp-divi-text-big,
.et_pb_text_inner > p:has(> i.icon-divi-usp-list-services) span,
.et_pb_text_inner:has(> i.icon-divi-usp-list-services) span {
    line-height: 1.25em !important;
}

.review-stars {
    display: flex;
    justify-content: center;
    font-size: 1.5em;
    gap: 0.25em;
    color: var(--vp-brand-color);
    margin-bottom: 0.5em;
}

/* Scroll Header Styles */
#vp-scroll-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 9999;
    opacity: 0;
    transition: transform 0.3s ease-in-out;
    transform: translateY(-100%);
}

#vp-scroll-header.vp-visible {
    top: 0;
    opacity: 1;
    transform: translateY(0);
}

#vp-scroll-header > .vp-container {
    padding: 0.75em 0;
    background-color: white;
    width: 100%;
    max-width: none;
    box-shadow: none;
}

#vp-scroll-header .vp-inner-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 90%;
    max-width: var(--vp-site-max, 1320px);
    margin: 0 auto;
}

/* Secondary Header in Scroll Header */
#vp-secondary-header-scroll {
    background: var(--vp-brand-gradient);
    height: 4px;
    box-shadow: 0 0px 14px 4px rgba(0, 0, 0, 0.5);
}

/* Main Menu Styles */
.vp-main-menu {
    flex-grow: 1;
    text-align: right;
    z-index: 1000;
}

.vp-main-menu .vp-nav {
    display: flex;
    list-style: none;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.vp-main-menu .vp-nav > li {
    margin-left: 1em;
    position: relative;
    cursor: pointer;
}

.vp-main-menu .vp-nav li a {
    text-decoration: none;
    font-weight: 900;
    font-family: var(--vp-font, 'Inter', Helvetica, Arial, Lucida, sans-serif);
    letter-spacing: 0.5px;
    color: var(--vp-dark-color, #333);
    font-size: 16px;
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 1em;
    padding-right: 1em;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 2em;
    white-space: nowrap;
    cursor: pointer;
    height: 40px;
}

.vp-main-menu .vp-nav li.menu-werkgevers>a,
.vp-main-menu .vp-nav li.menu-diensten>a {
    position: relative;
    z-index: 2;
}

/* General styling for the icons */
.vp-main-menu .vp-nav li a::before {
    display: inline-block;
    width: 20px;
    height: 20px;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    content: "";
    vertical-align: middle;
    align-self: center;
    margin-right: 8px;
}

/* Specific styling for the 'menu-werkgevers' item with ::after */
.vp-main-menu .vp-nav li.menu-werkgevers>a::after,
.vp-main-menu .vp-nav li.menu-diensten>a::after {
    display: inline-block;
    width: 16px;
    height: 16px;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    content: "";
    vertical-align: middle;
    -webkit-mask-image: url('/wp-content/plugins/VerharenWeb/assets/icons/caret-down.svg');
    mask-image: url('/wp-content/plugins/VerharenWeb/assets/icons/caret-down.svg');
    background-color: var(--vp-dark-color, #333);
    pointer-events: none;
    margin-left: 8px;
}

/* Specific icons for each menu item using ::before */
.vp-main-menu .vp-nav li.menu-over-ons a::before {
    -webkit-mask-image: url('/wp-content/plugins/VerharenWeb/assets/icons/circle-info.svg');
    mask-image: url('/wp-content/plugins/VerharenWeb/assets/icons/circle-info.svg');
    background-color: var(--vp-brand-color);
}

.vp-main-menu .vp-nav li.menu-vacatures a::before {
    -webkit-mask-image: url('/wp-content/plugins/VerharenWeb/assets/icons/hammer.svg');
    mask-image: url('/wp-content/plugins/VerharenWeb/assets/icons/hammer.svg');
    background-color: var(--vp-brand-color);
    margin-top: 2px;
}

.vp-main-menu .vp-nav li.menu-werkgevers a::before,
.vp-main-menu .vp-nav li.menu-diensten a::before {
    -webkit-mask-image: url('/wp-content/plugins/VerharenWeb/assets/icons/user-tie.svg');
    mask-image: url('/wp-content/plugins/VerharenWeb/assets/icons/user-tie.svg');
    background-color: var(--vp-brand-color);
}

/* VvE-services menu (vve-care.nl): the dropdown parent + one icon per service. */
.vp-main-menu .vp-nav li.menu-diensten a::before {
    -webkit-mask-image: url('/wp-content/plugins/VerharenWeb/assets/icons/list-check.svg');
    mask-image: url('/wp-content/plugins/VerharenWeb/assets/icons/list-check.svg');
    background-color: var(--vp-brand-color);
}
.vp-main-menu ul.vp-nav li.menu-administratie a::before {
    -webkit-mask-image: url('/wp-content/plugins/VerharenWeb/assets/icons/file-lines.svg');
    mask-image: url('/wp-content/plugins/VerharenWeb/assets/icons/file-lines.svg');
    background-color: var(--vp-brand-color);
}
.vp-main-menu ul.vp-nav li.menu-beheer-bestuur a::before {
    -webkit-mask-image: url('/wp-content/plugins/VerharenWeb/assets/icons/handshake-simple.svg');
    mask-image: url('/wp-content/plugins/VerharenWeb/assets/icons/handshake-simple.svg');
    background-color: var(--vp-brand-color);
}
.vp-main-menu ul.vp-nav li.menu-onderhoud a::before {
    -webkit-mask-image: url('/wp-content/plugins/VerharenWeb/assets/icons/toolbox.svg');
    mask-image: url('/wp-content/plugins/VerharenWeb/assets/icons/toolbox.svg');
    background-color: var(--vp-brand-color);
}
.vp-main-menu ul.vp-nav li.menu-huismeester a::before {
    -webkit-mask-image: url('/wp-content/plugins/VerharenWeb/assets/icons/user-check.svg');
    mask-image: url('/wp-content/plugins/VerharenWeb/assets/icons/user-check.svg');
    background-color: var(--vp-brand-color);
}

.vp-main-menu .vp-nav li.menu-contact a::before {
    -webkit-mask-image: url('/wp-content/plugins/VerharenWeb/assets/icons/phone.svg');
    mask-image: url('/wp-content/plugins/VerharenWeb/assets/icons/phone.svg');
    background-color: var(--vp-brand-color);
}

.vp-main-menu ul.vp-nav li.menu-vacaturemarketing a::before {
    -webkit-mask-image: url('/wp-content/plugins/VerharenWeb/assets/icons/cloud-arrow-up.svg');
    mask-image: url('/wp-content/plugins/VerharenWeb/assets/icons/cloud-arrow-up.svg');
    background-color: var(--vp-brand-color);
    margin-top: 4px;
}

.vp-main-menu ul.vp-nav li.menu-werving-selectie a::before {
    -webkit-mask-image: url('/wp-content/plugins/VerharenWeb/assets/icons/magnifying-glass.svg');
    mask-image: url('/wp-content/plugins/VerharenWeb/assets/icons/magnifying-glass.svg');
    background-color: var(--vp-brand-color);
}

/* Hover and Active Styles */
/*
 * Ritme: LICHTGRIJS in rust (#f1f1f1) → DONKERDER GRIJS bij hover (#e4e4e4).
 *
 * Twee alternatieven zijn geprobeerd en werken niet:
 *   - Wit bij hover: de bovenste menubalk staat op een witte header, dus een
 *     witte hover is daar onzichtbaar.
 *   - Wit in rust met grijs bij hover: zodra het uitklapmenu over een witte
 *     pagina valt, verdwijnen de witte items in het matglazen paneel.
 * Twee grijstinten werken wel, ongeacht wat er achter het menu ligt.
 */
.vp-main-menu .vp-nav li a:hover {
    background-color: #e4e4e4;
    cursor: pointer;
    color: var(--vp-dark-color, black);
}

.vp-main-menu .vp-nav li.current-menu-item > a,
.vp-main-menu .vp-nav li.current-menu-ancestor > a {
    background-color: #e4e4e4;
    position: relative;
    color: var(--vp-dark-color, black);
    cursor: pointer;
}

/* Dropdown Menu */
.vp-main-menu .vp-nav li ul {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border-radius: 2em;
    list-style: none;
    padding: 1em;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
    transition: max-height 0.3s ease, opacity 0.3s ease;
    z-index: 1;
}

.vp-main-menu .vp-nav li:hover > ul {
    max-height: 500px;
    opacity: 1;
    cursor: pointer;
}

.vp-main-menu .vp-nav li ul li {
    margin-bottom: 0.5em;
    cursor: pointer;
}

.vp-main-menu .vp-nav li ul li:last-child {
    margin-bottom: 0;
}

.vp-main-menu .vp-nav li ul li a {
    cursor: pointer;
    margin-left: 0;
}

/* Matglazen uitklapmenu. Enige wijziging ten opzichte van het origineel: de
   dekkende witte vulling wordt doorschijnend wit met een blur. Alle overige
   eigenschappen — border-radius, padding, en de schaduw 0 0 1em rgba(0,0,0,.5)
   uit de regel hierboven — blijven ongemoeid.

   Twee voorzorgen:
     - Alleen vanaf 768px. Daaronder is het menu een uitklappaneel dat zijn
       eigen behandeling krijgt.
     - Alleen wanneer de browser backdrop-filter ondersteunt; zonder die steun
       zou doorschijnend wit zonder blur de menuteksten onleesbaar maken over
       de pagina-inhoud heen. */
@media (min-width: 768px) {
    @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
        .vp-main-menu .vp-nav li ul {
            background: rgba(255, 255, 255, 0.8);
            -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
        }
    }
}

/* Hamburger Menu Icon */
.vp-mobile-menu-toggle {
    display: none;
    border: none;
    cursor: pointer;
    width: auto;
    height: auto;
    align-items: center;
    justify-content: center;
}

.vp-mobile-menu-toggle .vp-hamburger-icon,
.vp-mobile-menu-toggle .vp-hamburger-icon::before,
.vp-mobile-menu-toggle .vp-hamburger-icon::after {
    display: block;
    width: 25px;
    height: 4px;
    background-color: var(--vp-dark-color, #333);
    border-radius: 2em;
    position: relative;
    /* Same timing as the ledenportaal, so the mark behaves identically on the
       websites and in the portal. */
    transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease, background-color 0.2s ease;
}

.vp-mobile-menu-toggle .vp-hamburger-icon::before,
.vp-mobile-menu-toggle .vp-hamburger-icon::after {
    content: '';
    position: absolute;
    left: 0;
}

.vp-mobile-menu-toggle .vp-hamburger-icon::before {
    top: -8px;
}

.vp-mobile-menu-toggle .vp-hamburger-icon::after {
    top: 8px;
}

/* Open: the two outer bars slide to the middle and cross, the middle one fades
   out — the hamburger becomes the close button instead of sitting next to one.
   Driven by aria-expanded on the button (set in vp-script.js), not by a separate
   class, so the state the animation follows is the same one screen readers read. */
.vp-mobile-menu-toggle[aria-expanded="true"] .vp-hamburger-icon {
    background-color: transparent;
}

.vp-mobile-menu-toggle[aria-expanded="true"] .vp-hamburger-icon::before {
    top: 0;
    transform: rotate(45deg);
}

.vp-mobile-menu-toggle[aria-expanded="true"] .vp-hamburger-icon::after {
    top: 0;
    transform: rotate(-45deg);
}

/* Someone who asked their OS for less motion gets the state change without the
   sweep — the cross still appears, it just does not travel there. */
@media (prefers-reduced-motion: reduce) {

    .vp-mobile-menu-toggle .vp-hamburger-icon,
    .vp-mobile-menu-toggle .vp-hamburger-icon::before,
    .vp-mobile-menu-toggle .vp-hamburger-icon::after {
        transition: none;
    }
}

/* Change hamburger icon color on hover */
.vp-mobile-menu-toggle:hover .vp-hamburger-icon,
.vp-mobile-menu-toggle:hover .vp-hamburger-icon::before,
.vp-mobile-menu-toggle:hover .vp-hamburger-icon::after {
    background-color: var(--vp-dark-color, black);
}

/* ...but not the middle bar while the menu is open: it is deliberately invisible,
   and the hover rule above would otherwise paint it back in mid-cross. */
.vp-mobile-menu-toggle[aria-expanded="true"]:hover .vp-hamburger-icon {
    background-color: transparent;
}

/* Additional Styles */
.vp-main-menu .vp-nav li a .vp-menu-text {
    display: inline-block;
    text-decoration: none;
}

.vp-main-menu .vp-nav li.menu-contact {
    position: relative;
    z-index: 0;
}

/* Z-Index Adjustments */
#vp-main-header {
    z-index: 9999;
}

#vp-scroll-header {
    z-index: 1002;
}

.vp-main-menu {
    z-index: 1000;
}

.error404 #page-container header#main-header {
    display: none;
}

/* Media Queries for custom headers */

@media (max-width: 767px) {

    /* USP Animations */
    .vp-secondary-container {
        flex-direction: column;
        padding: 0.15em 0 0 0;
    }

    .vp-usp {
        position: absolute;
        width: 100%;
        opacity: 0;
    }
	
	@keyframes vp-fadeInOutUSP1 {
        0% { opacity: 0; }
        2.78% { opacity: 1; }
        30.56% { opacity: 1; }
        33.33% { opacity: 0; }
        100% { opacity: 0; }
    }

    @keyframes vp-fadeInOutUSP2 {
        0% { opacity: 0; }
        33.33% { opacity: 0; }
        36.11% { opacity: 1; }
        63.89% { opacity: 1; }
        66.67% { opacity: 0; }
        100% { opacity: 0; }
    }

    @keyframes vp-fadeInOutUSP3 {
        0% { opacity: 0; }
        66.67% { opacity: 0; }
        69.44% { opacity: 1; }
        97.22% { opacity: 1; }
        100% { opacity: 0; }
    }

    .vp-usp:nth-child(1) {
        animation: vp-fadeInOutUSP1 12s infinite;
    }

    .vp-usp:nth-child(2) {
        animation: vp-fadeInOutUSP2 12s infinite;
    }

    .vp-usp:nth-child(3) {
        animation: vp-fadeInOutUSP3 12s infinite;
    }

    /* The 3-phase rotation above assumes exactly 3 USPs. With fewer configured
       USPs those phases leave dead gaps, so override by count (these selectors
       are more specific / come later, so they win). */

    /* Exactly ONE USP → show it statically, centered, no rotation. */
    .vp-usp:only-child {
        position: relative;
        opacity: 1;
        animation: none;
    }

    /* Exactly TWO USPs → a 2-phase rotation with no empty slot. */
    .vp-usp:first-child:nth-last-child(2) {
        animation: vp-fadeInOutUSP2of2a 8s infinite;
    }
    .vp-usp:first-child:nth-last-child(2) ~ .vp-usp {
        animation: vp-fadeInOutUSP2of2b 8s infinite;
    }

    @keyframes vp-fadeInOutUSP2of2a {
        0% { opacity: 0; }
        5% { opacity: 1; }
        45% { opacity: 1; }
        50% { opacity: 0; }
        100% { opacity: 0; }
    }

    @keyframes vp-fadeInOutUSP2of2b {
        0% { opacity: 0; }
        50% { opacity: 0; }
        55% { opacity: 1; }
        95% { opacity: 1; }
        100% { opacity: 0; }
    }

    .vp-header .vp-inner-container {
        flex-direction: row;
        align-items: center;
    }

    /* Mobile Styles */
    .vp-main-menu {
        position: absolute;
        top: 100%;
        right: 5%;
        background-color: #fff;
        z-index: 1000;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        transition: max-height 0.5s ease-out, opacity 0.5s ease;;
    }

    .vp-main-menu.vp-open {
        max-height: 500px;
        visibility: visible!important;
        display: block!important;
        transition: max-height 0.25s ease-in;
        border-radius: 2em;
        padding: 1em;
        opacity: 1;
        box-shadow: 0 0.5em 1em 5px rgba(0, 0, 0, 0.25);
    }

    /* Matglazen uitklappaneel op mobiel. Zelfde principe als het uitklapmenu
       op desktop: alleen de dekkende witte vulling wordt doorschijnend wit met
       een blur. De schaduw 0 0.5em 1em 5px rgba(0,0,0,.25) op .vp-open, de
       border-radius en de padding blijven precies zoals ze waren.

       De menu-items zelf zijn dekkend wit (zie de regel voor .vp-nav li a
       verderop): die moeten leesbaar blijven, ongeacht wat eronder ligt, en
       het contrast tussen dekkende knop en doorschijnend paneel is precies
       wat de twee uit elkaar houdt. */
    @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
        .vp-main-menu {
            background-color: rgba(255, 255, 255, 0.7);
            -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
        }
    }

    .vp-main-menu .vp-nav {
        flex-direction: column;
        align-items: center;
    }

    /* Remove transitions on submenus to prevent delay */
    .vp-main-menu .vp-nav li ul {
        transition: none !important;
    }

    /* Ensure submenus hide immediately when main menu is closed */
    .vp-main-menu:not(.vp-open) .vp-nav li ul {
        display: none !important;
        opacity: 0 !important;
        max-height: 0 !important;
    }

    .vp-main-menu .vp-nav > li {
        width: 100%;
        position: relative;
        margin: 0;
    }

    .vp-main-menu .vp-nav > li:not(:first-child) {
        margin-top: 1em;
    }

    .vp-main-menu .vp-nav li.menu-werkgevers,
    .vp-main-menu .vp-nav li.menu-diensten {
        margin-top: 1em;
        position: relative;
    }

    .vp-main-menu .vp-nav li.current-menu-ancestor > a {
        background-color: #e4e4e4;
        color: var(--vp-dark-color, #333);
    }
    .vp-main-menu .vp-nav li.current-menu-ancestor > a .vp-menu-text {
        text-decoration: none;
    }

    /* Submenu Always Open on Mobile */
    .vp-main-menu .vp-nav li.menu-werkgevers ul,
    .vp-main-menu .vp-nav li.menu-diensten ul {
        display: block;
        opacity: 1;
        visibility: visible;
        background: none;
        box-shadow: none;
        padding: 0;
        max-height: none;
        border-radius: 0;
        transition: none;
        position: relative;
        top: 0;
        margin: 0 0.5em;
        z-index: 1;
    }

    .vp-main-menu .vp-nav li.menu-werkgevers ul li,
    .vp-main-menu .vp-nav li.menu-diensten ul li {
        transition: none;
        margin-top: 0.5em;
    }

    .vp-main-menu .vp-nav li.menu-werkgevers ul li:first-child,
    .vp-main-menu .vp-nav li.menu-diensten ul li:first-child {
        margin-top: 0.5em;
    }

    .vp-main-menu .vp-nav > li.menu-contact {
        margin-top: 1em;
    }

    .vp-main-menu .vp-nav li.menu-werkgevers ul li:last-child,
    .vp-main-menu .vp-nav li.menu-diensten ul li:last-child {
        margin-bottom: 0;
    }

    .vp-main-menu .vp-nav li a {
        justify-content: center;
        width: 100%;
        text-align: center;
        padding: 0.5em 1em;
        /* Dekkend wit op het matglazen paneel: #f1f1f1 lag te dicht tegen de
           witte menubox aan, waardoor knop en box in elkaar overliepen. Het
           lichte schaduwtje tilt ze los. Hover en de actieve pagina houden de
           gedeelde #e4e4e4 uit de desktopregels (hogere specificiteit), dus
           het grijs is op elke schermbreedte hetzelfde. */
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .vp-main-menu .vp-nav li.menu-werkgevers ul li a,
    .vp-main-menu .vp-nav li.menu-diensten ul li a {
        text-align: center;
    }

    .vp-mobile-menu-toggle {
        display: flex;
        position: absolute;
        right: calc(5% - 1.5em);
        background-color: white;
        border-radius: 50%;
        padding: 2em 1.3em;
        margin: 0 0.2em 0 0;
    }

    .vp-mobile-menu-toggle:hover,
    .vp-mobile-menu-toggle:active,
    .vp-mobile-menu-toggle:focus {
        /* Zelfde hovergrijs als de menu-items en de desktopnavigatie. */
        background-color: #e4e4e4;
    }

    .vp-mobile-menu-toggle .vp-hamburger-icon {
        background-color: var(--vp-dark-color, #333);
    }
}


@media (max-width: 980px) and (min-width: 768px) {

    /* Tablet Styles */
    .vp-header .vp-inner-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .vp-main-menu {
        margin-top: 0.5em;
    }

    #vp-main-menu-scroll {
        margin-top: 0.25em;
    }

    .vp-main-menu .vp-nav {
        justify-content: center;
    }

    .vp-main-menu .vp-nav > li:first-child {
        margin-left: 0 !important;
    }

    .vp-logo-area {
        margin: auto;
    }

    .vp-logo-area-scroll {
        margin: auto;
        height: 30px;
    }

    #vp-scroll-header > .vp-container {
        padding: 0.5em 0;
    }

    .vp-usp {
        font-size: 14px;
    }
}

@media (min-width: 768px) {

    /* USP Visibility on Larger Screens */
    .vp-usp {
        display: block;
        opacity: 1;
        animation: none;
        position: static;
        align-content: center;
        padding-top: 0.1em;
    }
}

/** -------------- STYLING OF THE COOKIE NOTICE AND VERIFICATION BANNER ----------------- */

.cookie-banner-container,
.vacancy-verification-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #fff;
    padding: 2em 0;
    /* Opaque fallback for browsers without backdrop-filter; the blurred,
       translucent variant is set in the @supports block below. */
    background-color: #15171a;
    box-shadow: 0 0.25em 1.5em rgba(0, 0, 0, 0.55);
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
}

/* 14px, gelijk aan het uitklapmenu en de reviewkaarten, zodat alle
   doorschijnende lagen op de site dezelfde diepte hebben. 0.72 houdt de
   tekst ook op mobiel (meerdere regels hoog) goed leesbaar. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .cookie-banner-container,
    .vacancy-verification-container {
        background-color: rgba(21, 23, 26, 0.72);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }
}

.cookie-banner-container {
    z-index: 9999;
}

.vacancy-verification-container {
    z-index: 9998;
}

.cookie-banner,
.vacancy-verification {
    display: flex; 
    align-items: center;
    justify-content: space-between;
    max-width: var(--vp-site-max, 1320px);
    margin: auto;
    width: 90%;
}

.cookie-banner .cookie-message,
.verification-message {
    flex: 1 1 auto; 
    margin-right: 1em;
    margin-bottom: -0.25em;
    margin-top: -0.25em;
    font-weight: 700;
    max-width: 750px;
}

.cookie-banner .sub-btn,
.vacancy-verification .sub-btn {
    width: auto;
    gap: 0.5em;
    display: inline-flex;
    align-items: baseline;
}

/* "Meer informatie" op de zwarte cookiebanner.
   De accentkleur (#a31b00) waar .sub-btn-text standaard op staat, haalt op
   zwart een contrastverhouding van 2,71 — ruim onder de 4,5 die nodig is om
   leesbaar te heten. Tekst en icoontje staan nu allebei op wit (21); bij hover
   kleuren ze samen naar de merkkleur.
   De !important is nodig omdat de basisregel voor .sub-btn-text er ook een
   heeft — zonder wint die, ook al is deze selector specifieker. */
.cookie-banner .sub-btn-text,
.vacancy-verification .sub-btn-text,
.vp-footer-read-more .sub-btn-text {
    font-style: normal;
    color: #fff !important;
}

.cookie-banner .sub-btn .svg-icon,
.vacancy-verification .sub-btn .svg-icon,
.vp-footer-read-more .svg-icon {
    /* Wit, gelijk aan de tekst ernaast — icoon en tekst horen als één knop te
       lezen. Bij hover kleuren ze samen naar de merkkleur. */
    color: #fff !important;
    fill: currentColor;
    transition: color 0.25s ease;
}

.cookie-banner .sub-btn:hover .sub-btn-text,
.cookie-banner .sub-btn:focus-visible .sub-btn-text,
.cookie-banner .sub-btn:hover .svg-icon,
.cookie-banner .sub-btn:focus-visible .svg-icon,
.vacancy-verification .sub-btn:hover .sub-btn-text,
.vacancy-verification .sub-btn:focus-visible .sub-btn-text,
.vacancy-verification .sub-btn:hover .svg-icon,
.vacancy-verification .sub-btn:focus-visible .svg-icon,
.vp-footer-read-more:hover .sub-btn-text,
.vp-footer-read-more:focus-visible .sub-btn-text,
.vp-footer-read-more:hover .svg-icon,
.vp-footer-read-more:focus-visible .svg-icon {
    /* De lichte van de twee huisstijlkleuren — dezelfde die de knoppen in rust
       dragen. De merkkleur is op deze donkere vlakken de donkere variant: op de
       navy voet van VvE-Care haalde het donkergroen 2,0:1 en verdween de tekst
       zodra je erover ging. De lichte variant haalt 4,2:1 (DV, 22-09-2026). */
    color: var(--vp-btn-rest, var(--vp-brand-color)) !important;
}

.cookie-banner .cookie-buttons,
.vacancy-verification .verify-buttons {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    column-gap: 1em;
    row-gap: 0.5em;
}

.cookie-buttons .vp-btn {
    min-width: 150px;
    max-width: 300px;
    flex: 1 0 150px;
}

.verify-buttons .btn-secondary {
    min-width: 130px;
    max-width: 300px;
    flex: 1 0 130px;
}

.verify-buttons .btn-primary {
    min-width: 180px;
    max-width: 300px;
    flex: 1 0 180px;
}

button.vp-verify-upload {
    background-color: green;
    color: white;
    fill: white;
}

button.vp-verify-upload:hover,
button.vp-verify-upload:focus,
button.vp-verify-upload:active {
    background-color: darkgreen;
}

@media (max-width: 767px) {
    /* column, not column-reverse: the buttons used to sit ABOVE the sentence
       explaining what is being consented to. */
    .cookie-banner,
    .vacancy-verification {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-banner .cookie-message,
    .verification-message {
        margin-top: 0;
        margin-bottom: 1em;
        margin-right: 0;
        text-align: center;
        flex-direction: row;
        flex-wrap: wrap-reverse;
    }

    .cookie-banner .sub-btn,
    .vacancy-verification .sub-btn {
        justify-content: center;
        margin-inline: auto;
    }

    .cookie-banner .cookie-buttons,
    .vacancy-verification .verify-buttons {
        place-items: center;
        justify-content: center;
        width: 100%;
        margin: auto;
        flex-direction: row;
        flex-wrap: wrap-reverse;
    }
}

/** -------------- STYLING OF THE CUSTOM FOOTER ----------------- */


.vp-footer {
    width: 100%;
    background-color: var(--vp-dark-color, black);
    color: white;
}

.vp-footer-container {
    max-width: var(--vp-site-max, 1320px);
    width: 90%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    row-gap: 4em;
    column-gap: 1em;
    /* Onderin minder lucht dan bovenin: het streepje met de twee
       copyrightregels hoort bij de voet en stond er los van (DV, 22-09-2026). */
    padding: 6em 0 3.5em;
}

.vp-footer-column {
    flex: 1;
}

/* Language Switcher (footer) */
/* ── Taalkeuze in de header ────────────────────────────────────────────────
   Desktop: uiterst rechts in de balk, op dezelfde regel als het logo. De nav
   ervoor lijnt zijn links al rechts uit, dus de switcher sluit daar gewoon op
   aan zonder de bestaande space-between te verstoren.
   Mobiel: de nav is dan een uitklappaneel buiten de flow en de hamburger staat
   absoluut rechts, dus de switcher krijgt rechts ruimte gereserveerd om er
   links van te blijven staan.                                              */
.vp-header-language-switcher {
    display: flex;
    align-items: center;
    margin-left: 0.75em;
    flex-shrink: 0;
}

.vp-header-language-switcher .vp-language-switcher {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}

.vp-header-language-switcher .vp-lang-item {
    display: inline-block;
}

.vp-header-language-switcher .vp-lang-link {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    color: #666;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    border-radius: 2em;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Zelfde hover-ritme als de menuknoppen ernaast. */
.vp-header-language-switcher .vp-lang-link:hover {
    background-color: #e4e4e4;
    color: var(--vp-dark-color, #333);
}

.vp-header-language-switcher .vp-lang-link.vp-lang-active {
    background-color: #e4e4e4;
    color: var(--vp-dark-color, #333);
}

.vp-header-language-switcher .vp-lang-flag {
    margin-right: 4px;
}

@media (max-width: 767px) {
    /* Ruimte vrijhouden voor de absoluut gepositioneerde hamburgerknop, zodat
       de taalkeuze er links van blijft in plaats van eronder te verdwijnen. */
    .vp-header-language-switcher {
        margin-left: auto;
        margin-right: 3.6em;
    }

    /* Op mobiel alleen de vlaggen: de taalnamen erbij maken de balk te vol. */
    .vp-header-language-switcher .vp-lang-label {
        display: none;
    }

    .vp-header-language-switcher .vp-lang-flag {
        margin-right: 0;
    }

    .vp-header-language-switcher .vp-lang-link {
        padding: 4px 6px;
    }
}

/* De taalkiezer hoort bij de voet, niet als eigen balk erdoorheen: een eigen
   donkere achtergrond viel op zwart weg maar tekende op de navy voeten van
   VvE-Care en DionysosDigital een streep dwars door het blok (DV, 22-09-2026). */
.vp-footer-language-switcher {
    background-color: transparent;
    text-align: center;
    padding: 10px 20px;
}

.vp-footer-language-switcher .vp-language-switcher {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

.vp-footer-language-switcher .vp-lang-item {
    display: inline-block;
}

.vp-footer-language-switcher .vp-lang-link {
    display: inline-block;
    padding: 4px 12px;
    color: #ccc;
    text-decoration: none;
    font-size: 13px;
    border-radius: 4px;
    transition: color 0.2s, background-color 0.2s;
}

.vp-footer-language-switcher .vp-lang-link:hover {
    color: #fff;
    background-color: rgba(255,255,255,0.1);
}

.vp-footer-language-switcher .vp-lang-link.vp-lang-active {
    color: #fff;
    background-color: var(--vp-brand-color, #ff0000);
}

.vp-footer-language-switcher .vp-lang-flag {
    margin-right: 4px;
}

.vp-footer-bottom {
    text-align: center;
    /* Alleen lucht, geen lijn: de voet is van boven tot onder één donker vlak.
       Bovenin niets, want het streepje zelf opent dit blok. */
    padding: 0 0 1.4em;
    background-color: var(--vp-dark-color, black);
    color: #999;
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.02em;
    margin-top: 0;
}

.vp-footer-bottom p {
    margin: 0;
}

/* Het streepje waarmee de voet afsluit. Hetzelfde als tussen de stappen in het
   werkwijzeblok: 4px hoog, afgerond, lichtgrijs — hier smal en gecentreerd,
   zodat het als scheiding leest en niet als rand. Het staat bovenaan het blok:
   eronder de copyrightregel van de site én die van de maker (DV, 22-09-2026). */
.vp-footer-credit-divider {
    width: 60%;
    max-width: var(--vp-streepje-voet, 60px);
    height: 4px;
    margin: 0 auto 0.9em;
    border-radius: 3px;
    background-color: #f1f1f1;
    opacity: 0.25;
}

.vp-footer-credit {
    /* Een haartje onder de copyrightregel van de site: twee regels, niet één blok. */
    margin: 0.35em 0 0;
    font-style: normal;
}

.vp-footer-credit a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.25s ease;
}

.vp-footer-credit a:hover,
.vp-footer-credit a:focus-visible {
    color: #fff;
}

/* Column 1 Styles */
.vp-footer-logo {
    line-height: 0;
    overflow: hidden;
}

.vp-footer-logo img {
    max-width: 450px;
    width: 100%;
    height: 100%;
    object-position: top;
    object-fit: contain;
}

.vp-footer-slogan {
    /* Van 0.25em naar 0.5em: de slogan plakte tegen het logo erboven
       (DV, 20-09-2026). */
    margin-top: 0.5em;
    margin-bottom: 0.75em;
    font-weight: 900;
}

.vp-footer-column-first ul li::before {
    content: "•";
    font-size: 200%;
    /* Op de donkere footer, dus de lichte huisstijlkleur als die er is: met een
       donkere merkkleur (navy) viel dit bolletje weg tegen de ondergrond.
       Niet ingesteld = merkkleur, precies zoals het was. */
    color: var(--vp-light-color, var(--vp-brand-color));
    margin-top: -2px;
    position: absolute;
}

.vp-footer-column-first li span {
    padding-left: 1.25em;
    color: #999;
    font-style: italic;
    font-weight: 700;
}

.vp-footer-social-icons {
    margin-top: 1em;
    display: flex;
    gap: 1em;
}

.vp-footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* De lichte van de twee huisstijlkleuren, op alle drie de sites. Hier stond
       --vp-light-color, een losse instelling die op VacaturePoster op het
       donkerrood stond: de rondjes waren daar donkerder dan overal elders
       (DV, 24-09-2026). --vp-brand-light wordt in core/function.php uit de twee
       ingestelde kleuren gekozen en is dus altijd de lichte. */
    background-color: var(--vp-brand-light, var(--vp-brand-color));
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.vp-footer-social-icon:hover {
    /* Stond op een vaste donkerrode waarde, waardoor de hover op een site met
       een andere merkkleur alsnog rood werd. --vp-brand-color-dark wordt in
       PHP uit de ingestelde merkkleur berekend (core/function.php). Staat er een
       lichte huisstijlkleur, dan volgt de hover díe — anders sprong het rondje
       van lichtblauw naar donker navy in plaats van een tint dieper. */
    background-color: var(--vp-brand-dark, var(--vp-brand-color-dark, var(--vp-brand-color)));
}

.vp-footer-social-icon svg {
    width: 26px;
    height: 26px;
    fill: white;
}

/* Column 2 Styles */
.vp-footer-column-second {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vp-footer-heading {
    color: white;
    margin-top: -3px;
    margin-bottom: 0.75em;
    padding-bottom: 0;
}

.vp-footer-links {
    list-style: none;
    padding: 0;
    margin-top: -5px;
    margin-bottom: -5px;
}

.vp-footer-links-spacer {
    margin-bottom: 0.75em;
}

.vp-footer-links li {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
    font-style: italic;
    line-height: 1.7em!important;
}

.vp-footer-link-icon {
    margin-right: 0.5em;
    display: inline-flex;
    align-items: center;
}

.vp-footer-link-icon svg {
    width: 16px;
    height: 16px;
    /* Pijltje vóór elke footerlink — staat eveneens op de donkere footer. */
    fill: var(--vp-light-color, var(--vp-brand-color));
}

.sub-btn-text-footer {
    /* Onderstreping die pas bij hover wit wordt. 'black' verborg hem alleen op
       een zwarte footer; op de navy footer van VvE-Care stond onder elke link
       een zwarte balk. Doorzichtig werkt op elke donkere footerkleur. */
    text-decoration: underline 2px solid transparent;
    font-style: italic;
    color: white;
    line-height: 1.7em !important;
}

/* De cookievoorkeuren-regel is een <button> (hij opent de balk, hij linkt niet).
   Zonder deze reset zou hij als knop opvallen tussen de footerlinks. */
button.sub-btn-text-footer {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    font-style: italic;
    text-align: left;
    cursor: pointer;
}

.sub-btn-text-footer:hover,
.sub-btn-text-footer:focus,
.sub-btn-text-footer:active {
    text-decoration: underline 2px solid white;
}

/* Column 3 Styles */
.vp-footer-column-third {
    text-align: right;
}

.vp-footer-image {
    height: 100px;
    overflow: hidden;
    border-radius: 2em;
}

/* Bijsnijden (cover) hoort bij een foto, maar in dit vak staat op alle drie de
   sites een logo: op vacatureposter.nl las het bedrijfsblok daardoor
   "ACATUREPOS" en op dionysosdigital viel "DIGITAL" eraf. Inpassen dus, en het
   vak mag meebewegen met de verhouding van wat erin staat in plaats van vast
   op 100px te staan. */
.vp-footer-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.vp-footer h4 {
    color: white;
}

.vp-footer-company-info {
    margin-top: 1.25em;
    margin-bottom: -3px;
    color: #999;
    font-weight: 700;
    line-height: 1.6em !important;
}

.vp-footer-read-more {
    color: var(--vp-brand-color);
    font-weight: 900;
    /* Wit, net als de tekst en het icoontje erboven. Zwart viel weg op de
       zwarte voet van VacaturePoster, maar stond als donkere streep onder
       "Meer informatie" op de navy voeten (DV, 22-09-2026). */
    text-decoration: underline 2px solid #fff;
    display: inline-flex;
    align-items: baseline;
    gap: 0.5em;
    margin-left: 0.25em;
    letter-spacing: 0.5px;
}

.vp-footer-read-more:hover {
    text-decoration: underline 2px solid var(--vp-btn-rest, var(--vp-brand-color));
}


@media (max-width: 1100px) {
    .vp-footer-container {
        column-gap: 0em;
    }
}

@media (max-width: 980px) {
    .vp-footer-container {
        column-gap: 5em;
        row-gap: 5em;
        padding: 5em 0 3em;
    }
    .vp-footer-column {
        flex: 0;
    }
    .vp-footer-column-first {
        width: 100%;
        flex: auto;
        text-align: center;
    }
    .vp-footer-column-second {
        flex: 0;
        align-items: flex-start;
        min-width: max-content;
        align-self: flex-start;
    }
    .vp-footer-column-third {
        flex: 1;
        text-align: right;
        max-width: 500px;
        margin-left: auto;
    }
    .vp-footer-social-icons {
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .vp-footer-container {
        column-gap: 4em;
        row-gap: 4em;
        padding: 4em 0 2.5em;
    }
    
    .vp-footer-image {
        height: 120px;
    }
}

@media (max-width: 499px) {
    .vp-footer-container {
        flex-direction: column;
        align-items: center;
    }

    .vp-footer-column {
        flex: 0;
    }
    .vp-footer-column-first {
        flex: 0;
        width: 100%;
        flex: auto;
        text-align: center;
    }
    .vp-footer-column-second {
        flex: 0;
        align-items: center;
        align-self: center;
    }
    .vp-footer-column-third {
        flex: 0;
        text-align: center;
    }
    .vp-footer-image {
        max-width: 300px;
        margin-inline: auto;
    }
}

/** -------------- GENERAL STYLING FOR FULL PHP PAGE  ----------------- */

.page-wrapper {
    background-color: white;
}

/* De breedte waarop de pagina stopt: dezelfde maat als .vp-inner-container in
   de kop, .vp-footer-container in de voet en de breedste Divi-rijen. Staat hier
   als variabele omdat de twee bannersystemen (.vp-banner op de statische
   pagina's, .page-header-wrapper op de vacature-, blog-, zoek-, 404- en
   archiefpagina's) hem allebei aanhouden — één plek om te wijzigen. */
:root {
    --vp-banner-max: var(--vp-site-max, 1320px);
}

/* Er is nog een derde soort banner: een met de hand in Divi gebouwde kopsectie,
   van vóór [vp_page_banner]. Die staat nog op zeven pagina's — op vve-care
   /contact/, /ledenportaal/, /privacyverklaring/ en /algemene-voorwaarden/, op
   vacatureposter /vacature-overzicht/, /privacyverklaring/ en
   /algemene-voorwaarden/ — en moet dezelfde maat en ronding krijgen, anders
   springt de lijn van de site daar alsnog.

   De selector is met opzet smal: de éérste sectie van de pagina-inhoud, mét
   achtergrond, mét een H1 erin. Nagelopen over de hele sitemap van alle drie
   de sites: hij raakt precies die zeven en geen enkele pagina die al een
   [vp_page_banner] of een .page-header-wrapper heeft. Een Divi-sectie draagt
   zijn foto als background-image, dus de ronding snijdt hem rechtstreeks mee —
   overflow: hidden is hier niet nodig.

   Dit blijft een greep in inhoud die de plugin niet zelf uitschrijft. Zodra
   die zeven pagina's op [vp_page_banner] over zijn, kan deze regel weg. */
.entry-content .et_builder_inner_content > .et_pb_section:first-child.et_pb_with_background:has(h1) {
    max-width: var(--vp-banner-max, 1200px);
    margin-inline: auto;
    border-radius: 0 0 2em 2em;
}

/* Elk ánder blok dat van rand tot rand liep — de merkbanden, de fotosecties en
   de getinte vlakken achter de werkwijze — stopt nu op diezelfde breedte, maar
   met alle vier de hoeken rond: het is geen kop, het is een blok midden in de
   pagina. Zonder dit liep de lijn van de site halverwege elke pagina dood.

   Welke secties dat zijn, bepaalt core/volle-vlakken.php: elke Divi-sectie met
   een zichtbare achtergrond krijgt `vp-vlak`, behalve de eerste van de pagina
   (dat is de banner hierboven). In CSS is dat niet te zien — een witte sectie
   draagt dezelfde klassen als een gekleurde.

   De inhoud eronder wordt vanzelf smaller: een rij staat op 90% van de sectie,
   dus binnen een vlak van 1200px is dat 1080px. Dat is precies de marge die een
   kaart nodig heeft; zonder die inspringing zou de tekst tegen de ronde hoek
   aan lopen.

   overflow: hidden houdt het maskervlak van de werkwijze-sectie binnen de
   ronding. Een achtergrondfoto wordt door border-radius zelf al meegesneden. */
.vp-vlak {
    max-width: var(--vp-banner-max, 1200px);
    margin-inline: auto;
    border-radius: 2em;
    overflow: hidden;
}

/* Twee vlakken die tegen elkaar aan staan — op DD /tarieven/ de getinte
   werkwijze met daar direct onder de merkband — horen één doorlopende kaart te
   zijn, niet twee met een wit kiertje ertussen. Alleen de buitenste hoeken
   blijven rond; waar ze elkaar raken is de rand recht. */
.vp-vlak:has(+ .vp-vlak) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.vp-vlak + .vp-vlak {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}


/* Een vlak in de huisstijl: het lichte vlak achter "Herken je dit?" en "Wat je
   krijgt" op de dienstenpagina's. Dezelfde tint als achter het contactformulier
   — 7% merkkleur op wit — en daarmee ook dezelfde uitzondering: bij een rode
   merkkleur wordt dat roze, dus geeft vp_form_tint_color() op VacaturePoster
   neutraal grijs terug. Eén plek, drie sites, vanzelf goed.

   De klasse telt in core/volle-vlakken.php mee als zichtbare achtergrond, net
   als vp-merkband: de kleur komt hier uit de stylesheet en niet uit Divi, dus
   in de sectie-instellingen is er niets te zien. */
.vp-tintvlak,
/* Twee klassen diep en met !important, want Divi schrijft de sectiekleur uit de
   pagina-instelling óók met !important weg. Op de gegenereerde pagina's staat
   die kleur bewust leeg en won de tint vanzelf; op de handgebouwde pagina's van
   VacaturePoster staat er #FFFFFF in en bleef het vlak wit. De witte kaarten
   erop ("Herken je dit?", "Wat je krijgt", de vragenblokken) vielen daardoor
   weg tegen de pagina — wit op wit (DV, 24-09-2026). */
.et_pb_section.vp-tintvlak {
    background-color: var(--vp-form-tint, #f1f1f1) !important;
}

/* De kaarten erop zijn wit, anders staat tint op tint en vallen ze weg — de
   kaart en het vlak schelen dan nog geen procent. Divi zet de kleur van een
   kolom met !important neer, vandaar hier ook.

   Alleen de kaarten: tussen de twee staat een lege kolom die de tussenruimte
   maakt, en die rekt met make_equal mee tot de volle hoogte. Wit gaf daar een
   streep dwars door het vlak. .zoom-animation zit alleen op een kaart. */
.vp-tintvlak .divi-services-widget > .et_pb_column.zoom-animation {
    background-color: #ffffff !important;
}

/* ── Veelgestelde vragen ──────────────────────────────────────────────────
   Het vragenblok was het enige kaarttype op de site zonder pictogram en zonder
   vlak eromheen: drie vlakke grijze kaarten midden op wit. Nu spreekt het
   dezelfde taal als de rest — een getint vlak (vp-tintvlak hierboven, en
   daarmee ook de ronde hoeken van .vp-vlak), witte kaarten erop met dezelfde
   zoom bij hover als de dienstenkaarten, en een vraagteken in een schijf.

   De kaartkleur zelf staat in Divi en niet hier: een kolomkleur schrijft Divi
   met !important weg, en dat gevecht is bij .vp-tintvlak al een keer verloren
   (DV, 23-09-2026). */
.et_pb_column.vp-faq-kaart {
    box-shadow: 0 0.6em 1.4em -0.9em rgba(0, 0, 0, 0.35);
}

/* De schijf met het vraagteken: dezelfde vorm als .icon-divi-usp-row, maar
   andersom ingekleurd. Die staat op een donkere foto en is daarom wit met een
   merkkleurig pictogram; deze staat op een witte kaart, dus is de schijf
   gevuld en het vraagteken wit.

   De vulling is --vp-btn-rest en niet de merkkleur zelf: dat is per site al
   "de huisstijlkleur die witte tekst kan dragen". Op VacaturePoster en VvE-Care
   is dat de lichtste van de twee, op DionysosDigital wisselt die variabele
   vanzelf naar het navy omdat het lichtblauw op wit onder 3:1 blijft. Met de
   merkkleur zou het vraagteken op één van de drie sites onleesbaar staan.

   Eerst stond de schijf in de merktint met een gekleurd vraagteken erin —
   dezelfde kleur als het vlak eronder. Dat viel op de kaart praktisch weg
   (DV, 23-09-2026). Maten uit .icon-divi-usp-row, een slag kleiner: dit staat
   in een kaart en niet in een rij van vier. De padding bepaalt hoe groot het
   vraagteken wordt, want svg staat op height: 100% van de contentbox. */
/* Blijft er op de laatste rij één vraag over (vier vragen worden 3 + 1), dan
   stond die kaart over de volle breedte: naast drie kaarten erboven leest dat
   als een balk in plaats van als de vierde kaart. Hij krijgt de breedte van één
   kaart en gaat in het midden staan. Onder 981px staan de kaarten toch al onder
   elkaar (DV, 24-09-2026). */
@media (min-width: 981px) {
    .vp-faq .et_pb_row > .et_pb_column.vp-faq-kaart:only-child {
        width: 31.333% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }
}

i.vp-faq-icoon {
    color: #fff;
    background: var(--vp-btn-rest, var(--vp-brand-color, #333));
    width: 2.5em;
    height: 2.5em;
    padding: 0.55em;
    font-size: 1.25em;
    border-radius: 50%;
    align-items: center;
    place-content: center;
}

/* ── Wat ik eerder bouwde ─────────────────────────────────────────────────
   De twee kaarten op de homepage van DionysosDigital gaan over vve-care.nl en
   vacatureposter.nl. Ze dragen daarom de huisstijl van díé sites en niet die
   van DionysosDigital: het logo op de plek van de naam, en de merkkleuren als
   variabelen op de kolom zelf. Die kleuren staan in de pagina-inhoud
   (tools/dionysosdigital-site.py) en niet hier, want dit bestand gaat ook naar
   vve-care.nl en vacatureposter.nl — daar heeft een regel met andermans
   kleuren niets te zoeken.

   Vinkjes (--vp-brand-light), knop (--vp-btn-rest) en de rand hieronder lezen
   die variabelen al, dus hier is alleen de vorm nodig (DV, 23-09-2026). */
.et_pb_column.vp-werk {
    position: relative;
    /* Zodat de schermafbeelding hieronder binnen de ronde hoeken blijft. */
    overflow: hidden;
}

/* De inhoud van de kaart hoort boven de schermafbeelding te staan. Divi zet
   zijn modules al op position: relative; de z-index maakt de volgorde hard. */
.vp-werk > * {
    position: relative;
    z-index: 1;
}

/* Heel licht de site zelf achter de kaart: de bovenkant van de homepage, zodat
   je de kopbalk, de gekleurde balk eronder en de banner herkent zonder dat er
   iets te lézen valt. Dat laatste is de bedoeling — het is textuur, geen
   tweede inhoud. De sterkte staat in --vp-werk-doorzicht, dus die is later in
   één plek bij te stellen.

   `auto 150%` met de bovenkant vast: de afbeelding is anderhalf keer zo hoog
   als de kaart, dus je ziet de bovenste tweederde. De cookiemelding onderaan de
   schermafbeelding valt daarmee buiten beeld (DV, 23-09-2026). */
.vp-werk::after {
    content: "";
    position: absolute;
    /* Ietsje buiten de kaart, want de vervaging hieronder zuigt aan de randen
       doorzichtigheid naar binnen; overflow: hidden snijdt het overschot weg. */
    inset: -10px;
    z-index: 0;
    background-image: var(--vp-werk-beeld, none);
    background-size: auto 150%;
    background-position: top center;
    background-repeat: no-repeat;
    /* Vervaagd, en dat is de bedoeling: zonder vervaging las je de koptekst van
       die site dwars door de kaarttekst heen. Nu blijven alleen de vlakken over
       — de kopbalk, de gekleurde balk eronder, de banner met een knop erin. */
    filter: blur(2px);
    opacity: var(--vp-werk-doorzicht, 0.05);
    pointer-events: none;
}

/* Een randje in het kleurverloop van die site langs de bovenkant van de kaart,
   zoals elk van de drie sites een gekleurde balk onder zijn kopbalk heeft. Het
   is het eerste dat je ziet, en het zegt in één oogopslag om welke huisstijl
   het gaat. De bovenhoeken volgen de ronding van de kaart. */
.vp-werk::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: var(--vp-werk-rand, var(--vp-brand-color, #333));
    border-radius: 2em 2em 0 0;
    pointer-events: none;
    z-index: 2;
}

/* Het logo staat op de plek van de kop — de <h2> blijft eromheen staan, met de
   naam als alt-tekst, zodat de koppenstructuur van de pagina klopt.

   Begrensd op hoogte én breedte: de twee logo's hebben een andere verhouding
   (768×108 tegen 500×91) en zouden bij alleen een breedte optisch niet even
   groot staan. */
/* Het logo op een wit plaatje. Dat is niet alleen netter — het is nodig: het
   logo van VacaturePoster heeft geen doorzichtige achtergrond, dus op een
   getint vlak stond er een wit blok omheen dat eruitzag als een fout. Nu staan
   beide logo's op de ondergrond waarvoor ze gemaakt zijn, en leest het als een
   bewuste vorm. */
.vp-werk__logo {
    width: fit-content;
    margin: 0 0 1.15em;
    padding: 0.55em 0.9em;
    background: #fff;
    border-radius: 0.9em;
    box-shadow: 0 0.4em 1em -0.8em rgba(0, 0, 0, 0.4);
}

.vp-werk__logo img {
    display: block;
    width: auto;
    height: auto;
    max-height: 42px;
    max-width: min(250px, 100%);
}

/* De kopafbeelding van de vacature-, blog-, zoek-, 404- en archiefpagina's.
   Zelfde maat en zelfde ronding als .vp-banner op de statische pagina's: hij
   stopt op 1200px — de breedte van .vp-inner-container in de kop en
   .vp-footer-container in de voet — en de onderhoeken zijn 2em rond, net als
   elk ander blok op de site. Boven blijft hij recht, want daar sluit hij aan
   op de kopbalk (DV, 23-09-2026).

   De ronding staat op de foto én op de gradient erover, niet op de wikkel
   zelf: die heeft geen overflow: hidden, en die hier aanzetten zou een lange
   kop kunnen afsnijden — .page-header-title staat er absoluut in. */
.page-header-wrapper {
    position: relative;
    width: 100%;
    max-width: var(--vp-banner-max, 1200px);
    margin-inline: auto;
    text-align: center;
    margin-bottom: 2em;
}

.page-header-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dezelfde regel als bij .vp-banner: de hoek staat altijd op de donkere van
       de twee huisstijlkleuren. Deze kopafbeelding (vacature-, blog-, zoek-,
       404- en archiefpagina's) hield hier de merkkleur aan, en dat is alleen op
       VacaturePoster de donkere — op VvE-Care en DionysosDigital kreeg de hoek
       dus de lichte, terwijl de statische pagina's ernaast wél de donkere
       hadden (DV, 23-09-2026). */
    background: radial-gradient(ellipse at top left, var(--vp-brand-dark, var(--vp-brand-color)) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.7) 100%);
    border-radius: 0 0 2em 2em;
    pointer-events: none;
    z-index: 5;
}

.page-header-image {
    width: 100%;
    height: 15.7em;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 2em 2em;
    overflow: hidden;
}

.blurred-banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: blur(5px);
    transform: translateY(0px);
    z-index: 1;
}

.page-header-image-archive {
    height: 150px;
}

.page-header-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 10;
    width: 100%;
    max-width: var(--vp-site-max, 1320px);
    text-align: center;
    padding-top: 0.45em;
    padding-bottom: 0.55em;
    /* Dezelfde kantlijn als de rest van de pagina. Dit blok liep van rand tot
       rand, waardoor de kop op een telefoon op 12px van de zijkant stond
       terwijl de tekst eronder op 20px begint (DV, 20-09-2026). 5% is de marge
       die de rijen op de site ook aanhouden (90% breed op tablet en telefoon),
       dus de kop schuift per schermbreedte mee. */
    padding-left: 5%;
    padding-right: 5%;
    padding-left: 3%;
    padding-right: 3%;
}

.heading-underline {
    padding-bottom: 0.35em;
    max-width: fit-content;
}

.heading-underline::after {
    content: "";
    height: 4px;
    width: 100%;
    /* Tot 23-09-2026 liep de streep exact zo ver als de tekst erboven. Dat
       leest als onderstreping in plaats van als accent, en het ging mis zodra
       de kop afbrak: `max-width: fit-content` op de kop is dan niet meer de
       tekstbreedte maar de volle kolom. Opgemeten op de blogkaart van
       vve-care.nl: op een breed scherm 657px (één regel, precies de tekst), in
       een kaart van 430px twee regels van 330 en 322 — met een streep van 342,
       dus breder dan beide regels. Nu staat er in beide gevallen hetzelfde
       streepje. */
    max-width: var(--vp-streepje, 120px);
    margin-top: 0.35em;
    /* Stond op de accentkleur (oranje) terwijl .heading-underline-relative
       hieronder de merkkleur gebruikt — twee onderstrepingen die niet met
       elkaar overeenkwamen. Beide volgen nu de merkkleur, net als de
       scheidingslijnen. */
    background: var(--vp-brand-color);
    border-radius: 1em;
    display: block;
}

.vp-profile-widget-wrapper.heading-underline::after {
    margin-top: 0.4em;
}

/* De koppen op de kaarten van het vacature- en blogoverzicht. */
.heading-underline.vp-divi-header-small::after {
    max-width: var(--vp-streepje-kaart, 170px);
}

/* Zolang het streepje even breed was als de kop, viel het vanzelf goed: de kop
   is `max-width: fit-content` en die drie staan met `margin: auto` gecentreerd,
   dus de streep stond onder de tekst. Met een maximum erop is de streep smaller
   dan de doos en zou hij tegen de linkerrand blijven staan — onder een
   gecentreerde kop, dus scheef. Alleen deze drie koppen centreren zichzelf; de
   rest staat links en houdt zijn streepje links. */
.vp-team__heading::after,
.vp-reviews__heading::after,
.edit-application-form-block h2.heading-underline::after {
    margin-inline: auto;
}

.heading-underline-relative::after {
    content: "";
    position: relative;
    bottom: -4px;
    height: 4px;
    width: 100%;
    max-width: var(--vp-streepje, 120px);
    background: var(--vp-brand-color);
    border-radius: 1em;
    display: block;
}

/* De streepjes van Divi. Elke module had zijn eigen max_width — op de met de
   hand gebouwde werkgeverspagina's van VacaturePoster staan er van 132 tot
   500px door elkaar — en die staan in de pagina-inhoud, niet in dit bestand.
   Hier gaan ze alle drie de sites tegelijk op dezelfde maat.

   De selector is bewust niet `.et_pb_divider` alleen: in het werkwijzeblok
   staan tussen de stappen óók dividers (788px breed), en die horen juist wél
   door te lopen. Het verschil zit in wat eraan voorafgaat — een kopmodule bij
   een accentstreepje, een tekstmodule bij een stapscheiding. Nagemeten op
   vacatureposter.nl, vve-care.nl en dionysosdigital.eu: dat onderscheid klopt
   op alle drie, op gegenereerde én handgebouwde pagina's.

   Twee klassen diep plus !important, want Divi schrijft per module
   `.et_pb_divider_7 { max-width: 300px !important }` en die stylesheet komt na
   deze. */
.vp-divi-header-big + .et_pb_divider,
.vp-divi-header-small + .et_pb_divider {
    max-width: var(--vp-streepje, 120px) !important;
}

/** -------------- GENERAL STYLING FOR INLINE PHP SHORTCODE / PAGE  ----------------- */

.content-wrapper, .content-wrapper-branches, .company-archive-description-widget {
    margin-bottom: 4em;
}

.content-wrapper {
    display: flex;
    justify-content: space-between;
    column-gap: 2.5em;
    row-gap: 2.5em;
    padding: 0;
    margin: 0 auto 4em auto;
    max-width: var(--vp-site-max, 1320px);
    width: 90%;
    line-height: 1.4em;
}

.content-wrapper-contact-page {
    display: flex;
    justify-content: center;
    column-gap: 2em;
    row-gap: 4em;
    padding: 0;
    margin: 0 auto 4em auto;
    max-width: var(--vp-site-max, 1320px);
    width: 90%;
}

.content-wrapper-password-input {
    justify-content: center;
    margin-top: 6em;
}

.no-vacancies-found-wrapper {
    flex-direction: column;
    margin-top: 2em;
}

.no-vacancies-found-categories {
    width: 100%;
}

.delete-user-files-wrapper {
    justify-content: center;
}

.delete-files-form-wrapper form p {
    margin-bottom: -3px;
    margin-top: 1em;
}

.delete-files-form-wrapper .form-buttons {
    gap: 0.5em;
    display: flex;
    flex-direction: column;
    margin-top: 1em;
}

.content-wrapper h2, .page-wrapper h2 {
    position: relative;
    display: inline-block;
}

.content-wrapper p, .privacyverklaring-content p, .algemene-voorwaarden-content p {
    padding-bottom: 0!important;
}

.privacyverklaring-content ul, .algemene-voorwaarden-content ul {
    padding: 0 !important;
    line-height: 1.4!important;
}

.content-wrapper ul li {
    display: block;
    margin-bottom: 0;
    position: relative;
    margin-left: 0em;
}

.privacyverklaring-content ul li, .algemene-voorwaarden-content ul li {
    line-height: 1.4;
    margin-left: 0.6em;
    display: block;
    margin-bottom: 0;
    position: relative;
}

.content-wrapper ul li::before {
    content: "•";
    position: absolute;
    font-size: 200%;
    color: var(--vp-brand-color);
    margin-top: -2px;
    margin-left: -0.7em;
}

.privacyverklaring-content ul li::before,
.algemene-voorwaarden-content ul li::before {
    content: "•";
    position: absolute;
    font-size: 200%;
    color: var(--vp-brand-color);
    margin-top: -6px;
    line-height: 1em;
    margin-left: -0.6em;
}

.vp-post-content ul li:before {
    content: "•";
    position: absolute;
    left: 0;
    font-size: 200%;
    color: var(--vp-brand-color);
    margin-top: -2px;
}

/* In de opdrachtgeverswidget de tweede kleur, zodat het blok van de
   opdrachtgever zich onderscheidt van de vacaturetekst eromheen
   (DV, 22-09-2026). */
.vp-company-widget ul li:before {
    color: var(--vp-accent-color);
}

.content-wrapper::marker, .vp-footer-column::marker, .privacyverklaring-content::marker {
    font-size: 150%;
}

.content-wrapper-branches {
    max-width: var(--vp-site-max, 1320px);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.content-wrapper-archive-page {
    column-gap: 2em;
    row-gap: 2em;
}

/** -------------- GENERAL STYLING FOR BUTTONS  ----------------- */

/* De hoogte is een ondergrens, geen keurslijf. Met `height:40px` en
   `line-height:1em` werd een knoptekst die niet op één regel past
   platgedrukt, en de knop trok icoon en tekst naar de buitenranden
   (DV, 15-09-2026: "Sollicitatie versturen" en "Later solliciteren"). Nu groeit
   de knop mee, houdt de tekst leesruimte, en blijven icoon en tekst als één
   groep in het midden staan — zie ook .icon-text hieronder. */
.vp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 250px;
    padding: 0.45em 1em;
    border-radius: 2em;
    border: none;
    font-weight: 900;
    font-size: 16px;
    min-height: 40px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    text-align: center;
}

/* Knoppen staan op de lichtste van merk- en accentkleur (--vp-btn-rest, uit
   vp_merk_kleur_variabelen()) en worden bij hover de donkerste (--vp-btn-hover):
   dat leest als indrukken. Op VacaturePoster is dat merk in rust en accent bij
   hover, zoals het altijd was; op VvE-Care en DionysosDigital andersom, omdat
   daar de merkkleur de donkere is (DV, 17-09-2026). Zonder de variabelen
   (gelijke kleuren) blijft het de merkkleur. */
.btn-primary {
    background-color: var(--vp-btn-rest, var(--vp-brand-color));
    color: white;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.2);
}

.btn-secondary {
    background-color: white;
    /* Accentkleur als tékst op wit: --vp-accent-strong valt terug op de
       merkkleur wanneer de accentkleur daar te licht voor is (zie
       vp_accent_strong() in core/function.php). */
    color: var(--vp-accent-strong, var(--vp-accent-color));
    fill: var(--vp-accent-strong, var(--vp-accent-color));
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.2);
}

.btn-tertiary {
    background-color: #f1f1f1;
    color: #666;
}

.btn-black {
    background-color: var(--vp-dark-color, black);
    color: white;
    box-shadow: 0 0 9px white;
}

/* ── Contactkleuren ────────────────────────────────────────────────────────
 * De herkenbare kleuren van WhatsApp, bellen, e-mail en LinkedIn. Deze horen
 * BEWUST niet bij de merk-/accentkleur uit de instellingen: mensen herkennen
 * WhatsApp aan dat groen, en dat werkt alleen als het overal hetzelfde is.
 *
 * Ze staan hier één keer als variabele, zodat de contactknoppen op de
 * contactpagina, de recruiterknoppen op de vacaturepagina en de zwevende
 * contactknop gegarandeerd dezelfde kleur hebben. Alle óverige knoppen
 * (call-to-action) volgen wél de merk-/accentkleur uit de instellingen.
 * ------------------------------------------------------------------------ */
:root {
    --vp-color-phone: 52, 199, 89;
    --vp-color-email: 0, 122, 255;
    --vp-color-whatsapp: 37, 211, 102;
    --vp-color-linkedin: 10, 102, 194;
}

.btn-phone {
    color: rgb(var(--vp-color-phone));
    background-color: rgba(var(--vp-color-phone), 0.2);
}

.btn-email {
    color: rgb(var(--vp-color-email));
    background-color: rgba(var(--vp-color-email), 0.2);
}

.btn-whatsapp {
    color: rgb(var(--vp-color-whatsapp));
    background-color: rgba(var(--vp-color-whatsapp), 0.2);
}

.btn-linkedin {
    color: rgb(var(--vp-color-linkedin));
    background-color: rgba(var(--vp-color-linkedin), 0.2);
}

.btn-phone:hover {
    color: white;
    background-color: rgb(var(--vp-color-phone));
}

.btn-email:hover {
    color: white;
    background-color: rgb(var(--vp-color-email));
}

.btn-whatsapp:hover {
    color: white;
    background-color: rgb(var(--vp-color-whatsapp));
}

.btn-linkedin:hover {
    color: white;
    background-color: rgb(var(--vp-color-linkedin));
}


.btn-primary:hover,
.btn-primary:focus {
    /* De donkerste van de twee huisstijlkleuren; witte tekst blijft daarop
       leesbaar. De terugval is de oude regel (accent met contrastondergrens). */
    background-color: var(--vp-btn-hover, var(--vp-accent-strong, var(--vp-accent-color)));
    box-shadow: 0em 0em 9px 1px rgba(0, 0, 0, 0);
}

/* Een witte knop wordt bij hover een tint grijzer, en op VvE-Care en
   DionysosDigital is dat grijs licht gekleurd — hetzelfde recept als het vlak
   achter een formulier, alleen een stap donkerder (12% in plaats van 7%). Zie
   vp_form_tint_color() in core/function.php, inclusief de uitzondering die dat
   grijs neutraal houdt bij een rode merkkleur.

   Het stond hier vast op #f1f1f1: op wit nauwelijks te zien, en op de drie
   sites precies hetzelfde terwijl elke andere hoverkleur wél de huisstijl
   volgt (DV, 23-09-2026). */
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--vp-btn-white-hover, #e7e7e7);
    box-shadow: 0em 0em 9px 1px rgba(0, 0, 0, 0);
}

.btn-tertiary:hover,
.btn-tertiary:focus {
    background-color: #e4e4e4;
    color: var(--vp-brand-color);
}

.btn-black:hover,
.btn-black:focus {
    /* Op een site met een te licht accent (DD) is de merkkleur op de donkere
       knop onzichtbaar; daar wordt de tekst het lichte accent. */
    color: var(--vp-btn-black-hover, var(--vp-brand-color));
    box-shadow: 0em 0em 9px 1px rgba(0, 0, 0, 0);
}

/* Het icoon stond op de merkkleur terwijl .sub-btn-text daarnaast de
   accentkleur forceert — binnen één knop dus twee verschillende rollen. Beide
   volgen nu dezelfde regel als .btn-primary: accentkleur in rust, merkkleur bij
   hover. */
.sub-btn {
    color: var(--vp-accent-strong, var(--vp-accent-color));
    display: flex;
    align-items: center;
    width: 100%;
    border: none;
    font-weight: 900;
    font-size: 14px;
    cursor: pointer;
    line-height: 1.2;
    background: none;
    letter-spacing: 0.5px;
}

.sub-btn-inline {
    color: var(--vp-accent-color);
    display: inline-flex;
    align-items: center;
    border: none;
    font-weight: 900;
    cursor: pointer;
    background: none;
}

.form-container .sub-btn i {
    padding-right: 8px;
    font-size: 130%;
    position: absolute;
}

.business-block-container .sub-btn i {
    padding-left: 4px;
}

.phone_contact_switcher, .email_contact_switcher {
    margin-bottom: 0.75em;
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
}

.sub-btn-text, .sub-btn-text-icon {
    text-decoration: underline 2px solid rgba(0, 0, 0, 0);
    font-style: inherit;
    /* Always the secondary (accent) company color, regardless of context. */
    color: var(--vp-accent-strong, var(--vp-accent-color)) !important;
}

.sub-btn-text-icon {
    padding-left: 1.75em;
}

.sub-btn:hover,
.sub-btn:focus,
.sub-btn-inline:hover,
.sub-btn-inline:focus {
    color: var(--vp-brand-color);
}

.sub-btn:hover .sub-btn-text-icon,
.sub-btn:hover .sub-btn-text,
.sub-btn:focus .sub-btn-text-icon,
.sub-btn:focus .sub-btn-text,
.sub-btn:active .sub-btn-text-icon,
.sub-btn:active .sub-btn-text {
    text-decoration-color: var(--vp-brand-color) !important;
    text-decoration: underline 2px solid var(--vp-brand-color);
}

.sub-btn-inline:hover .sub-btn-text,
.sub-btn-inline:focus .sub-btn-text,
.sub-btn-inline:active .sub-btn-text {
    text-decoration-color: var(--vp-brand-color) !important;
    text-decoration: underline 2px solid var(--vp-brand-color);
}

.btn-primary-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.application-form .btn-primary {
    margin-top: 0.25em;
    margin-bottom: 0;
}

.vp-divi-header-btn-container {
    text-align: center;
}

.vp-divi-header-btn-container .vp-btn {
    margin: auto;
}

.contact-form-wrapper .btn-primary {
    margin-top: 1em;
    display: flex;
}

.company-archive-widget-text .btn-form-submit, .password-input-wrapper .btn-primary {
    margin-top: 1em;
}

#vp-filter-form .btn-secondary, .application-form .btn-secondary, .archive-page-results .btn-secondary, .contact-form-wrapper .btn-secondary {
    margin-top: 0.5em;
    display: flex;
}

.application-form .btn-secondary {
    /* Volle breedte, maar met de inhoud in het midden. Met `display: block`
       stond "Later solliciteren" tegen de bovenrand: de knop is door zijn
       min-height van 40px hoger dan de tekstregel, en een blok legt die regel
       bovenaan neer (gemeten op de telefoon: 7px boven, 12px onder,
       DV 20-09-2026). */
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-fixed-buttons {
    position: fixed;
    bottom: 2em;
    z-index: 999;
}

.btn-fixed-buttons .btn-primary {
    margin-bottom: 0.75em;
}

.vp-divi-jobboard-button {
    height: 40px!important;
    border-radius: 2em;
    overflow: hidden;
    box-shadow: 0 0 0.5em -1px #999;
    /* De Divi-modules zetten hier `cursor: default` omdat hun <a> een lege
       span van 0x0 omsluit en dus niets doet. In [vp_logo_strip] is een logo
       mét link een echte <a> die het hele vlak vult, dus zetten we de
       aanwijzer per element: pointer op de <a>, default op de <span>. */
    cursor: default;
}

.vp-divi-jobboard-button:hover {
    box-shadow: 0 0 0.5em 0px var(--vp-brand-color);
}

/* Beide vlakken beginnen op top:0 — de bovenkant van de solliciteerknop — en
   lopen door tot voorbij de onderkant van het scherm. Ze komen dus nooit boven
   de knop uit. Het masker laat ze naar boven toe uitfaden, waardoor de tekst
   die langs de knoppen doorloopt oplost in plaats van tegen een zichtbare rand
   te botsen. Voorheen stak ::after 1em boven de knop uit met filter:blur(6px):
   dat vervaagde het witte vlak zelf, niet de inhoud erachter, en juist die
   zachte-maar-zichtbare bovenrand was het probleem. */
.btn-fixed-buttons::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    bottom: -2.5em;
    background-color: white;
    z-index: -1;
}

.btn-fixed-buttons::after {
    content: "";
    position: absolute;
    top: 0;
    left: -5%;
    width: 110%;
    bottom: -2.5em;
    background-color: white;
    z-index: -2;
}

/* De uitfade zelf. Staat bewust buiten de @supports hieronder: ook zonder
   backdrop-filter (dekkend wit) wil je geen harde rand bovenaan. */
.btn-fixed-buttons::before,
.btn-fixed-buttons::after {
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 45%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to top, #000 0%, #000 45%, rgba(0, 0, 0, 0) 100%);
}

/* De vaste solliciteerknop op mobiel legt twee witte vlakken achter zich om de
   pagina-inhoud eronder weg te vagen. Waar de browser het kan, vervagen we de
   inhoud zelf in plaats van hem af te dekken: de laag wordt doorschijnend en
   krijgt een backdrop-blur, waardoor je nog ziet dát er tekst doorloopt.
   Maat, positie en de wit-op-wit uitstraling blijven identiek — alleen de
   dekking gaat omlaag. Zonder ondersteuning blijft het vlak gewoon dekkend. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .btn-fixed-buttons::before {
        background-color: rgba(255, 255, 255, 0.72);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }

    .btn-fixed-buttons::after {
        background-color: rgba(255, 255, 255, 0.55);
    }
}

.btn-fixed {
    display: flex;
    align-items: center;
}

.btn-fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
}

.btn-fixed-background-fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.btn-fixed-buttons::before,
.btn-fixed-buttons::after {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.btn-fixed-buttons.btn-fade-out::before,
.btn-fixed-buttons.btn-fade-out::after {
    opacity: 0;
    pointer-events: none;
}

a#shareButton {
    margin-top: 0.75em;
    display: flex;
    align-items: center;
    color: var(--vp-brand-color);
    max-width: 200px;
    justify-content: flex-start;
}

#companyPageButton, #viewOnGoogleMapsButton {
    margin-top: 0.75em;
    margin-right: 0.5em;
    display: inline-flex;
    align-items: center;
    color: var(--vp-brand-color);
    max-width: 200px;
    justify-content: flex-start;
}

.contact-sub-btn {
    margin-top: 0.75em;
    display: flex;
    align-items: center;
    color: var(--vp-brand-color);
    max-width: 200px;
    justify-content: flex-start;
}

.share-button-text, .company-widget-button-text, .contact-widget-button-text {
    font-weight: 900;
    text-decoration: underline;
    font-style: italic;
    text-decoration-thickness: 2px;
}

.privacy-statement {
    color: var(--vp-brand-color);
    text-shadow: none;
    font-weight: 900;
    font-style: italic;
    text-decoration: underline;
    text-decoration-color: #f1f1f1;
}

.share-button-text, .company-widget-button-text, .contact-widget-button-text{
    text-decoration-color: white;
}

.privacy-statement:hover, .share-button-text:hover, .company-widget-button-text:hover, .contact-widget-button-text:hover {
    text-decoration: underline;
    text-decoration-color: var(--vp-brand-color);
    text-decoration-thickness: 2px;
}

/* Verwijzingen naar de privacyverklaring en de algemene voorwaarden kleuren bij
   hover naar de tweede huisstijlkleur — op een bedrijfspagina de tweede
   bedrijfskleur. Ze horen bij de kleine lettertjes, niet bij de knoppen; een
   tweede kleur maakt dat verschil zichtbaar zonder ze te laten wegvallen
   (DV, 22-09-2026). --vp-accent-strong is dezelfde kleur, donker genoeg om op
   wit te lezen. */
.privacy-statement:hover,
.privacy-statement:focus-visible,
.cookie-banner .cookie-message a:hover,
.cookie-banner .cookie-message a:focus-visible {
    color: var(--vp-accent-strong, var(--vp-accent-color));
    text-decoration-color: var(--vp-accent-strong, var(--vp-accent-color));
}

/* Twee knoppen die bewust de hoofdkleur houden, ook al zijn het witte knoppen:
   "Bewerken" op een vergrendelde vacature en "Weigeren" in de cookiebalk. Dat
   zijn geen acties van de opdrachtgever maar van de site zelf (DV, 22-09-2026). */
.vp-verify-edit,
.cookie-banner .functional-only {
    color: var(--vp-brand-color);
    fill: var(--vp-brand-color);
}

/** -------------- GENERAL STYLING FOR DETAIL AND BUTTON ICONS ----------------- */

.svg-icon {
    width: auto;
    height: 1em;
    fill: currentColor;
    display: inline-flex;
    vertical-align: middle;
    justify-content: center;
    align-self: center;
}

svg {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: visible !important;
}

.svg-icon-move-to-left svg {
    margin-left: -7px;
}

.vp-spin {
    display: inline-block;
    animation: vp-spin-animation 1s linear infinite;
}

@keyframes vp-spin-animation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.vp-icon-text, .icon-text, .btn-block-icon-text {
    display: inline-flex;
    align-items: center;
    text-align: center;
    /* justify-self doet niets in een flexrij; justify-content wél. Zonder deze
       regel werden icoon en tekst bij een afbrekende knoptekst naar de
       buitenranden geduwd in plaats van samen gecentreerd. */
    justify-content: center;
}

.loading-spinner {
    display: flex;
    align-items: center;
}

.content-wrapper .vp-icon-text {
    position: relative;
    justify-content: center;
}

#shareButton .vp-icon-text {
    justify-content: left;
    margin-bottom: -0.25em;
}

.vp-company-widget .vp-icon-text {
    justify-content: left;
    margin-bottom: -0.25em;
    margin-top: -0.25em;
}

.vp-post-content-detail .vp-icon-text i, .vp-result-detail .vp-icon-text i {
    color: var(--vp-brand-color);
}

i.icon-divi-usp-list {
    color: var(--vp-brand-color);
    width: 1em;
    font-size: 150%;
    margin-left: 0em;
    margin-right: 0.5em;
}

/* Staat zo'n pictogram in een knop, dan volgt het de kleur van die knop. Deze
   iconen staan vast op de merkkleur, terwijl de tekst van een witte knop de
   accentkleur draagt (--vp-accent-strong): op VacaturePoster gaf dat een licht
   rood icoon naast donkerrode tekst in dezelfde knop (DV, 20-09-2026). Met
   `inherit` kleuren ze samen, ook bij hover en op een gekleurde knop waar de
   tekst wit is. */
.vp-btn i.icon-divi-usp-list,
.vp-btn i.icon-divi-usp-list-inline,
.vp-btn i.icon-divi-usp-list-services {
    color: inherit;
}

i.icon-divi-usp-list-inline {
    color: var(--vp-brand-color);
    width: 1em;
    font-size: 150%;
    margin-left: 0em;
    margin-right: 0.3em;
    margin-top: -0.1em;
}

i.icon-divi-usp-list-services {
    /* Vinkje in de lichtste van de twee huisstijlkleuren, kruisje in de
       donkerste (DV, 23-09-2026). Op VacaturePoster is de merkkleur zelf de
       lichtste, dus daar verandert het vinkje niet; op VvE-Care en
       DionysosDigital wordt het de accentkleur. Welk pictogram er staat, weet
       CSS van de klasse die vp_load_svg_icon() op de tekening zet. */
    color: var(--vp-brand-light, var(--vp-brand-color));
    width: 1em;
    font-size: 160%;
    margin-right: 0.3em;
    /* Niet meekrimpen in de flexregel hieronder. */
    flex: 0 0 auto;
}

i.icon-divi-usp-list-services:has(.vp-icon-circle-xmark),
i.icon-divi-usp-list-services:has(.vp-icon-xmark) {
    color: var(--vp-brand-dark, var(--vp-brand-color));
}

/* De pluspuntregels met een vinkje (de dienstenkaarten met "Bekijk tarieven").
   Pictogram en tekst stonden als losse woorden achter elkaar, dus een regel die
   afbrak begon weer helemaal links — onder het vinkje (DV, 20-09-2026). Als
   flexregel staat de tekst als één blok naast het vinkje: de tweede regel
   begint onder de eerste, en het vinkje blijft bovenaan staan.

   :has() omdat lang niet al deze tekstmodules de class
   vp-divi-services-inline-checks dragen: op VacaturePoster staan er met de hand
   gebouwde tussen, en daar zit het pictogram soms rechtstreeks in de module in
   plaats van in een alinea. Een browser zonder :has() houdt de oude weergave. */
.et_pb_text_inner > p:has(> i.icon-divi-usp-list-services),
.et_pb_text_inner:has(> i.icon-divi-usp-list-services) {
    display: flex;
    align-items: flex-start;
}

/* En het hart van het pictogram op het hart van de eerste tekstregel.
   .svg-icon zet align-self: center, en dat hangt het pictogram aan het midden
   van de hele tekst: bij één regel 2,8px te laag, en zodra een regel afbrak
   zakte het naar het midden van het blok in plaats van naast de eerste regel
   te blijven staan (DV, 23-09-2026).

   flex-start zet het bij de eerste regel; de verschuiving haalt het
   hoogteverschil eruit. Het pictogram is 1em hoog op 160%, een tekstregel is
   1.25em van de tekst — in de em van het pictogram dus 1.25/1.6. Het verschil
   gedeeld door twee. Met transform en niet met een marge, zodat de regelhoogte
   precies blijft zoals hij was. */
.et_pb_text_inner > p:has(> i.icon-divi-usp-list-services) > i.icon-divi-usp-list-services,
.et_pb_text_inner:has(> i.icon-divi-usp-list-services) > i.icon-divi-usp-list-services {
    align-self: flex-start;
    transform: translateY(calc((1.25em / 1.6 - 1em) / 2));
}

/* ── Ruimte onder een kop met streepje ─────────────────────────────────────
 * Kop, gekleurd streepje, content: die drie horen overal dezelfde afstanden te
 * hebben. Het streepje brengt zijn eigen 0,75em mee, en staat er een introtekst
 * onder, dan levert de rij de ruimte naar het blok erna. Staat die introtekst
 * er níét, dan is die rijmarge nergens voor nodig en wordt hij een zichtbare
 * witte balk tussen het streepje en de content.
 *
 * Opgemeten (DV, 23-09-2026): op vacatureposter.nl staat zo'n rij overal op 0.
 * Op DionysosDigital was het 35px ("Waarom niet een bureau...") en op VvE-Care
 * 35px ("Waarom een klein beheerkantoor?") en 21px ("Veelgestelde vragen").
 * Deze regel raakt alleen rijen die ná het streepje niets meer tonen — met
 * introtekst blijft de marge staan, net als op vacatureposter.
 * ------------------------------------------------------------------------ */
.et_pb_row:has(> .et_pb_column > .et_pb_divider:last-child) {
    margin-bottom: 0 !important;
}

/* ── De knop onderaan de kaart met vinkjes ─────────────────────────────────
 * "Bekijk", "Bekijk tarieven", "Bekijk de site": elke kaart in
 * .divi-services-widget sluit met dezelfde knop. Drie dingen lagen niet vast
 * (DV, 23-09-2026), met vacatureposter.nl als voorbeeld:
 *
 * 1. De knop hing achter het laatste vinkje aan. Twee kaarten naast elkaar
 *    zijn wel even hoog (make_equal), maar met drie vinkjes links en vijf
 *    rechts stonden de knoppen op verschillende hoogte. De kaart is nu een
 *    flexkolom en de knopmodule pakt de ruimte die overblijft, dus de knop
 *    staat altijd op de onderrand — hoeveel vinkjes erboven ook staan.
 * 2. Op de telefoon trok `margin: auto` (de regel bij max-width 499px verderop)
 *    de knop naar het midden, terwijl kop, vinkjes en knop op de desktop links
 *    staan. Nu overal links.
 * 3. Het pijltje staat áchter de tekst, maar kreeg van .btn-primary een marge
 *    aan de verkeerde kant en plakte daardoor tegen het woord aan.
 *
 * :has() om dezelfde reden als bij de vinkjesregels hierboven: op
 * VacaturePoster staan handgebouwde kaarten zonder de klassen van de
 * generator. Een browser zonder :has() houdt de oude weergave.
 * ------------------------------------------------------------------------ */
.divi-services-widget .et_pb_column:has(> .et_pb_code .vp-btn) {
    display: flex !important;
    flex-direction: column;
}

.divi-services-widget .et_pb_column > .et_pb_code:last-child:has(.vp-btn) {
    /* `auto` duwt de knop naar beneden en eet daarbij de eigen bovenmarge op.
       De padding zet die ruimte terug, zodat de knop ook in de langste kaart
       niet tegen het laatste vinkje aan komt te staan. */
    margin-top: auto !important;
    padding-top: 1em;
}

.divi-services-widget .et_pb_column .vp-btn {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.divi-services-widget .vp-btn i.svg-icon {
    margin-left: 8px;
    margin-right: 0;
}

i.icon-divi-work-procedure {
    color: var(--vp-brand-color);
    font-size: 180%;
    margin-right: 0.5em;
}

i.icon-divi-usp-row {
    /* Omgekeerd sinds 17-09-2026 (DV): de rij staat op een donkere foto, en
       een merkkleurige schijf met wit icoon viel daar tegen weg. Nu een witte
       schijf met het icoon in de merkkleur — op alle drie de sites. */
    color: var(--vp-brand-color);
    width: 2.5em;
    padding: 0.5em;
    border-radius: 50%;
    background: white;
    align-items: center;
    height: 2.5em;
    font-size: 2em;
    box-shadow: 0 0 0.5em 0.25em rgb(0, 0, 0, 0.1);
    margin: auto;
    place-content: center;
}

.vp-result-wrapper i {
    margin-right: 6px;
    vertical-align: middle;
    font-size: 16px;
}

.vp-post-content-detail i {
    margin-right: 6px;
    vertical-align: middle;
    font-size: 18px;
}

.btn-primary i,
.btn-secondary i {
    margin-right: 8px;
    vertical-align: middle;
    font-size: 22px;
    justify-content: center;
}

#shareButton .vp-icon-text i, #companyPageButton .vp-icon-text i, #viewOnGoogleMapsButton .vp-icon-text i {
    margin-left: 6px;
    vertical-align: middle;
    font-size: 18px;
}

.contact-sub-btn .vp-icon-text i {
    margin-right: 6px;
    vertical-align: middle;
    font-size: 18px;
}

/* De (optionele) linkknop in het bedrijfsblok op de contactpagina staat links
   uitgelijnd met de adresregels erboven. Telefoon, e-mail en KvK zitten niet
   meer in deze knopvorm — zie .contact-details hieronder. */
.contact-info a.contact-sub-btn {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.35em;
    width: auto;
}

/* De losse linkknop in dit blok blijft rustig grijs en licht pas bij hover op
   in de merkkleur — het blok heeft met het contactpaneel en de offerteknop al
   genoeg nadruk. Alleen binnen .contact-info, zodat dezelfde knopklassen elders
   (footer, recruiterwidget) onaangeroerd blijven. */
.contact-info a.contact-sub-btn,
.contact-info a.contact-sub-btn .sub-btn-text,
.contact-info a.contact-sub-btn .contact-widget-button-text {
    color: #666;
    transition: color 0.3s ease;
}

/* GEEN background-color hier. De iconen in dit blok zijn inline SVG's, geen
   mask-iconen zoals in het hoofdmenu: bij een <svg> tekent background-color een
   vlak áchter het icoon in plaats van het icoon zelf te kleuren. Met dezelfde
   kleur op beide werd het een dichte grijze vierkant en leek het icoon weg.
   De SVG volgt de tekstkleur al vanzelf via fill: currentColor, dus de kleur
   op de link hierboven regelt het icoon mee. */

.contact-info a.contact-sub-btn:hover,
.contact-info a.contact-sub-btn:focus,
.contact-info a.contact-sub-btn:hover .sub-btn-text,
.contact-info a.contact-sub-btn:focus .sub-btn-text,
.contact-info a.contact-sub-btn:hover .contact-widget-button-text,
.contact-info a.contact-sub-btn:focus .contact-widget-button-text {
    color: var(--vp-brand-color);
}



/* Verticale opbouw van het bedrijfsblok, in drie groepen:
     bedrijfsnaam → adres          strak op elkaar, dat hoort bij elkaar
     adres → contactpaneel         een duidelijke tussenruimte
     contactpaneel → knop          dezelfde tussenruimte, zodat het paneel met
                                   telefoon, e-mail en KvK boven én onder even
                                   veel lucht heeft en als één geheel leest
   Gemeten uitgangspunt: de afstanden liepen door elkaar (11px onder de naam,
   7px boven de contactregels, 8px onder KvK). */
.contact-info-lines > h2 {
    margin-bottom: 0.15em;
}

/* De adresregels sluiten hun kolom af; de ruimte naar de knoppen eronder komt
   van de row-gap van .contact-info-wrapper. */
.contact-info-lines > ul {
    margin-top: 0.15em;
    margin-bottom: 0;
}

.contact-info a.contact-sub-btn + a.contact-sub-btn {
    margin-top: 0.15em;
}


/* Beide iconen in een vast vierkant van 18px. Ze zijn van huis uit niet even
   breed — het telefoontje rendert 18px, de envelop 14px — waardoor de tekst
   ernaast op verschillende hoogtes begon (43px tegen 39px). Met een vaste doos
   en de SVG die hem vult, staan naam en tekst altijd op één lijn. */
.contact-info a.contact-sub-btn .svg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

.contact-info a.contact-sub-btn .svg-icon svg {
    width: 100%;
    height: 100%;
}

/* ── Bellen en mailen ──────────────────────────────────────────────────────
   Ze stonden als losse grijze tekstregels met een grijs icoontje ervoor. Naast
   de rode adresopsomming en de rode koppen van dit blok viel juist het enige
   aanklikbare deel weg. Nu staan ze onder de foto over de volle breedte, met
   per regel een gevuld rondje: zelfde vormtaal als de knoppen en de kaarten
   elders op de site (ronde hoeken, merkkleur, wit pictogram).
   Alle kleuren komen uit de huisstijlvariabelen, dus elke site krijgt zijn eigen
   kleur — rood op VacaturePoster, groen op VvE-Care, blauw op DionysosDigital —
   met de oude waarden als terugval als een site een kleur niet heeft ingevuld.
   Het KvK-nummer hoorde hier niet: dat is een gegeven en geen actie, en staat
   sinds 23-09-2026 als opsommingsregel onder het land. */
.contact-details {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    margin: 0.25em 0 0;
    padding: 0;
    /* Geen kader en geen getint vlak: dat lijntje had geen enkel ander blok op
       de site, en binnen de witte contactkaart trok het de aandacht naar de
       doos in plaats van naar de gegevens (DV, 20-09-2026). De regels dragen
       hun eigen vormtaal: het ronde pictogram in de merkkleur, en tekst in
       dezelfde stijl als de subknoppen eronder. */
    background: none;
    border: none;
}

.contact-details .contact-detail {
    display: flex;
    align-items: center;
    gap: 0.7em;
    margin: 0;
    padding: 0.18em 0;
    color: var(--vp-dark-color, #333);
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
    word-break: break-word;
}

/* Het rondje: vaste doos, zodat het telefoontje (18px breed) en de envelop
   (14px breed) dezelfde ruimte krijgen en de tekst ernaast op één lijn begint. */
.contact-details .contact-detail-icon {
    flex: 0 0 2.05em;
    width: 2.05em;
    height: 2.05em;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vp-brand-color, #a31b00);
    color: #fff;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.contact-details .contact-detail-icon .svg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.95em;
    height: 0.95em;
    margin: 0;
    font-size: inherit;
}

/* De inline SVG's volgen currentColor, dus het wit hierboven kleurt het icoon. */
.contact-details .contact-detail-icon .svg-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.contact-details a.contact-detail:hover .contact-detail-text,
.contact-details a.contact-detail:focus-visible .contact-detail-text {
    color: var(--vp-brand-color, #a31b00);
}

.contact-details a.contact-detail:hover .contact-detail-icon,
.contact-details a.contact-detail:focus-visible .contact-detail-icon {
    background: var(--vp-brand-color-dark, #7d1500);
    transform: scale(1.06);
}

.contact-details .contact-detail-text {
    transition: color 0.3s ease;
}

/* Telefoon en e-mail zijn links en zien er hier uit als de subknoppen elders
   in dit blok: vet, cursief, rustig grijs en pas bij hover in de merkkleur. Zo
   leest de contactkaart als één geheel met het formulier ernaast
   (DV, 20-09-2026). */
.contact-details a.contact-detail {
    color: #666;
    font-weight: 900;
}

/* De streep staat er in rust wel, maar doorzichtig: pas bij hover kleurt hij
   mee. Dezelfde opzet als de subknoppen in de voet (.sub-btn-text-footer), en
   omdat de ruimte al gereserveerd is verspringt de regel niet als je erover
   gaat (DV, 23-09-2026). */
.contact-details a.contact-detail .contact-detail-text {
    font-style: italic;
    text-decoration: underline 2px solid transparent;
    transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

.contact-details a.contact-detail:hover .contact-detail-text,
.contact-details a.contact-detail:focus-visible .contact-detail-text {
    text-decoration-color: currentColor;
}

/* "KVK" vóór het nummer, in de opsomming onder het land. */
.contact-info .contact-detail-label {
    display: inline-block;
    margin-right: 0.25em;
    /* 0.82em rendered at 11.5px on phones — below the 12px floor for text
       people still have to read. */
    font-size: max(0.82em, 12px);
    font-weight: 700;
    /* Dezelfde spatiëring en kleur als de andere bovenkopjes (factuurstijl):
       accentkleur in plaats van gedempt grijs, 0.08em in plaats van 0.04em. */
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vp-accent-strong, var(--vp-accent-color, var(--vp-brand-color, rgba(var(--vp-dark-rgb, 51, 51, 51), 0.62))));
    font-style: normal;
}

.btn-tertiary i,
.btn-black i {
    margin-left: 8px;
    font-size: 18px;
}


/** -------------- GENERAL FORM STYLING  ----------------- */

.vp-company-widget, .vp-profile-widget-container {
    width: 100%;
    max-width: calc(0.9* 767px);
    padding: 4px;
    border-radius: 2em;
    background: white;
    overflow: hidden;
    box-shadow: 0 0 1em -4px #999;
}

.vp-company-widget-inner-container, .vp-profile-widget-inner-container {
    padding: 1.5em;
    background: white;
    overflow: hidden;
    border-radius: 2em;
}

.form-container {
    width: 100%;
    max-width: calc(0.9 * 767px);
    /* De rand had dezelfde kleur als het vlak en telt alleen mee in de maat.
       Doorzichtig, dan volgt hij de tint hieronder vanzelf. */
    border: 4px solid transparent;
    padding: 1.5em;
    border-radius: 2em;
    /* Kaartvlak in een lichte tint van de merkkleur (7% op wit) in plaats van
       neutraal grijs: het zachte, licht gekleurde vlak van de factuurkaarten.
       Groen (VvE-Care) en navy (DionysosDigital) krijgen zo elk hun eigen tint.
       Een rode merkkleur niet: 7% rood op wit is roze, en dat leest als een
       waarschuwing in plaats van als huisstijl — VacaturePoster houdt daarom
       het neutrale grijs (DV, 20-09-2026). Welke van de twee het wordt, rekent
       de plugin uit in --vp-form-tint (vp_form_tint_color()); de grijze regel
       eronder is de terugval als die variabele er niet is. */
    background-color: #f1f1f1;
    background-color: var(--vp-form-tint, color-mix(in srgb, var(--vp-brand-color, #333) 7%, white));
}

.form-container-vp-filter {
    width: 100%;
    max-width: calc(0.9* 767px);
    border-radius: calc(2em + 4px);
    box-shadow: none;
    padding: 4px;
    background: #f1f1f1;
}

.form-container-vp-filter h2 {
    margin-top: -5px;
    padding-bottom: 0.65em;
    border: none;
    position: relative;
    display: inline-block;
    color: var(--vp-dark-color, #333);
}

.form-container-vp-filter .form-group label {
    font-weight: 700;
    display: flex;
    margin-bottom: 3px;
    color: #666;
}

#vp-filter-form {
    padding: 1.5em;
    border-radius: 2em;
    background: #f1f1f1;
}

.form-container h2 {
    margin-top: -5px;
    padding-bottom: 0.75em;
    border: none;
    position: relative;
    display: inline-block;
    color: var(--vp-dark-color, #333);
}

.form-container h3 {
    margin-top: -5px;
    padding-bottom: 0.75em;
    border: none;
    position: relative;
    display: inline-block;
    color: var(--vp-dark-color, #333);
}

.contact-info h2 {
    margin-top: -3px;
    border: none;
    position: relative;
    display: block;
    color: var(--vp-dark-color, #333);
    padding-bottom: 0.25em;
}

.contact-info h3 {
    padding-bottom: 0em;
    border: none;
    display: block;
    /* Bovenkopje in factuurstijl onder de bedrijfsnaam: klein, kapitalen,
       gespatieerd, in de tekstveilige accentkleur. De naam erboven blijft zo
       de enige zware regel van het blok. !important is nodig: h3 en
       .vp-divi-sub-text zetten maat, spatiëring en gewicht met !important
       (specificiteit .contact-info h3 wint, ook in de media queries).
       13px × 1.5 = 19.5px, gelijk aan 16px × 1.2, dus het adres eronder
       verschuift niet. */
    font-size: 13px !important;
    line-height: 1.5em !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    color: var(--vp-accent-strong, var(--vp-accent-color, var(--vp-brand-color, var(--vp-dark-color, #333))));
    font-weight: 700 !important;
}

.form-container h4 {
    padding-bottom: 1em;
}

.form-container p {
    margin-bottom: 1em;
}

.form-container strong {
    color: var(--vp-brand-color);
    font-weight: bold;
    font-size: 120%;
    line-height: 1;
}

.form-group {
    margin-bottom: 0.75em;
}

.form-group p {
    margin-bottom: 0.5em;
    line-height: 1.4em;
}

.form-group label, .form-group legend {
    font-weight: 700;
    display: flex;
    /* Label als 'inkt' boven het witte veld, zoals de sleutels op de factuur;
       2px extra lucht spiegelt de ruime binnenmaat van de factuurkaarten. */
    margin-bottom: 5px;
    color: var(--vp-dark-color, #333);
}

.form-group b {
    margin-top: 0.5em;
    display: inline-block;
    color: var(--vp-brand-color);
    font-size: 80%;
    line-height: 1.4;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="file"],
.form-group input[type="password"] {
    width: 100%;
    padding: 0.5em 1.5em;
    border-radius: 2em;
    background-color: white;
    line-height: 1.8;
    min-height: 40px;
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
    border: none;
    font-size: 13px;
    font-weight: 300;
}

input#file-cv {
    margin-bottom: 5px;
    padding: 1em 1.5em;
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
}

input#file-upload {
    padding: 1em 1.5em;
}

.form-group select {
    padding: 0.5em 1.5em;
    border: none;
    border-radius: 2em;
    background-color: white;
    min-height: 40px;
    font-size: 13px;
    font-weight: 300;
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none; 
    text-indent: 0.01px;
    text-overflow: '';
    min-width: 150px;
}

.form-group textarea {
    width: 100%;
    padding: 1em 1.5em;
    border: none;
    border-radius: 2em 2em 0 2em;
    background-color: white;
    resize: vertical;
    height: 140px;
    line-height: 1.4;
    margin-bottom: -5px;
    font-weight: 300;
}

.form-checkbox, .form-container p {
    font-style: italic;
}

/* Separate the privacy line from the checkbox label above it. */
.privacy-info {
    display: block;
    margin-top: 10px;
}

/* Bolletje en tekst als twee flexitems, verticaal op elkaar gecentreerd. Het
   bolletje stond `position:absolute` links boven, dus bij een label van twee of
   drie regels bleef het op de eerste regel staan terwijl de tekst eronderuit
   zakte (DV, 15-09-2026: "de tekst staat iets naar onderen als de regel gebroken
   wordt"). Nu draagt de flexbox de uitlijning en klopt het bij elk aantal
   regels. De ruimte tussen bolletje en tekst is dezelfde als voorheen: 20px
   bolletje + 0.75em tussenruimte ≈ de 2em marge die de tekst had. */
.form-checkbox label,
.form-group.form-checkbox label {
    display: flex;
    align-items: center;
    gap: 0.75em;
    cursor: pointer;
    width: 100%;
    margin-top: 2px;
}

.form-checkbox label input[type="checkbox"],
.form-checkbox label input[type="radio"] {
    appearance: none;
    min-width: 20px;
    min-height: 20px;
    border: none;
    border-radius: 50%; 
    cursor: pointer;
    outline: none;
    margin: 0;
    vertical-align: middle;
    background-color: white;
    transition: background-color 0.3s;
    /* Meedoen in de flexrij in plaats van eruit zweven. `relative` blijft nodig:
       het stipje in het midden (::before) hangt hieraan. */
    position: relative;
    flex: 0 0 20px;
}

.form-checkbox label input[type="checkbox"]:hover,
.form-checkbox label input[type="radio"]:hover {
    /* Was rgba(255,0,0,0.3) — een vaste rode zweem, ongeacht de merkkleur. */
    background-color: rgba(var(--vp-brand-rgb, 255, 0, 0), 0.3);
}

.form-checkbox label input[type="checkbox"]:checked,
.form-checkbox label input[type="radio"]:checked {
    background-color: var(--vp-brand-color);
}

.form-checkbox label input[type="checkbox"]:checked::before,
.form-checkbox label input[type="radio"]:checked::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    background-color: #f1f1f1;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.radio_page-url_block, .radio_file-upload_block, .radio_vp-form-text_block {
    margin-bottom: 1.5em;
    width: 100%;
}


.form-checkbox label .text-container {
    line-height: 1.4;
    font-weight: 400;
    /* De inspringing komt nu van de flex-gap; een eigen marge zou er bovenop
       komen. */
    margin-left: 0;
    display: block;
}

#second-email-section .form-group {
    margin-bottom: 0em;
}

#second-email-section input {
    max-width: 350px;
}

button#formApplyLaterButton {
    text-align: center;
}

.vp-searchform-homepage #vp-searchform,
.vp-banner__action--search #vp-searchform {
    display: flex;
    margin-bottom: 0em;
    justify-content: center;
}

.js-vacancies-vp-container #vp-searchform {
    display: flex;
    justify-content: left;
}

.js-vacancies-vp-container .btn-secondary {
    margin-top: 0.5em;
}

.content-wrapper-edit-application {
    justify-content: center;
}

.edit-application-form-block {
    justify-items: center;
    margin: auto;
}

.edit-application-form-block h2 {
    /* display:block so max-width:fit-content + auto margins actually centre the
       heading — .heading-underline renders it inline-block, which ignores auto
       margins and pins it to the left. */
    display: block;
    text-align: center;
    margin-top: -5px;
    margin-left: auto;
    margin-right: auto;
}

p.edit-application-text {
    text-align: center;
    margin-bottom: 1em;
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
}

.open-application-form {
    margin: auto;
}

.open-application-form form {
    margin-top: -3px;
}

.open-application-form .btn-primary {
    margin-top: 0.25em;
}

.vp-searchform-homepage #vp-searchform .btn-primary,
.vp-banner__action--search #vp-searchform .btn-primary {
    width: fit-content;
    padding: 0 1em;
    box-shadow: 0em 0em 0.5em rgba(0, 0, 0, 0.5);
}

.js-vacancies-vp-container #vp-searchform .btn-primary {
    width: fit-content;
    padding: 0 1em;
}

.vp-searchform-homepage #vp-searchform .form-group,
.vp-banner__action--search #vp-searchform .form-group {
    border-radius: 2em;
    margin-bottom: 0em;
    flex: 1;
    box-shadow: 0em 0em 0.5em rgba(0, 0, 0, 0.5);
}

/* Zoekbalk in de paginabanner: balk en knop naast elkaar.
   -------------------------------------------------------------------------
   Deze regels stonden onder .vp-searchform-homepage, een wrapper die de oude
   opmaak van de homepage meegaf. De banner is inmiddels een shortcode
   ([vp_page_banner]) die die klasse niet meer zet, waardoor het formulier
   terugviel op display:block en de knop onder de balk belandde.

   Waar de oude opmaak op 500px hard omklapte, breekt dit af zodra het
   invoerveld zelf te smal wordt: flex-wrap met een basis van 240px betekent
   dat balk en knop op één regel blijven zolang de balk 240px kan halen, en
   anders naar twee regels vallen. Dat is de breedte waarop een zoekterm nog
   leesbaar in het veld past. */
.vp-banner__action--search #vp-searchform {
    flex-wrap: wrap;
    gap: 0.75em;
}

.vp-banner__action--search #vp-searchform .form-group {
    flex: 1 1 240px;
}

.vp-banner__action--search #vp-searchform .btn-primary {
    flex: 0 0 auto;
}

.js-vacancies-vp-container #vp-searchform .form-group {
    border-radius: 2em;
    margin-bottom: 0em;
    flex: 1;
    border: 2px solid #e4e4e4;
}

#vp-searchform .form-group input[type="text"] {
    height: 100%;
}

.filtered-count {
    padding: 0.5em 0em 0.5em 0.75em;
    border-radius: 2em;
    font-weight: 700;
    /* De tweede huisstijlkleur; op een bedrijfspagina is dat de tweede
       bedrijfskleur. --vp-accent-strong is dezelfde kleur, donker genoeg om op
       wit te lezen (DV, 22-09-2026). */
    color: var(--vp-accent-strong, var(--vp-accent-color, #666));
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    border: 2px solid white;
    background: none;
    display: flex;
    align-items: center;
    gap: 0.25em;
}

/* Het aantal gevonden vacatures is een mededeling, geen keuze. Met het witte
   kader eromheen en vette tekst leek het op een invulveld of een knop in het
   zoekblok (DV, 20-09-2026): kader eraf, normale tekstdikte, en links uitgelijnd
   met de labels erboven. Alleen in het vacaturefilter; de zoekkaart van de
   andere sites houdt haar eigen opmaak. */
#vp-filter-form .filtered-count {
    padding: 0;
    border: none;
    border-radius: 0;
    font-weight: 500;
    margin-top: 1.1em;
    margin-bottom: 1.1em;
}

/* Zoeken en "Alle vacatures" naast elkaar, tot ze echt niet meer passen. De
   knoppen zijn van huis uit 100% breed met een maximum van 250px; hier bepaalt
   hun eigen tekst de breedte en verdeelt de flexregel de ruimte die overblijft
   (DV, 20-09-2026). */
#vp-filter-form {
    /* Het zoekblok staat op de vacaturepagina's in een smalle kolom van een
       kwart en op de telefoon over de volle breedte. De knoppen moeten zich
       dus naar die kolom voegen, niet naar het scherm: vandaar een container
       in plaats van een media query. */
    container-type: inline-size;
}

#vp-filter-form .vp-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

#vp-filter-form .vp-filter-actions .vp-btn {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    margin-top: 0;
    justify-content: center;
    white-space: nowrap;
}

/* Krap wordt het in deze volgorde opgelost, zodat de knoppen op de telefoon
   naast elkaar blijven staan: eerst kleiner lettertype en minder binnenruimte,
   dan het lijstje van "Alle vacatures" eraf, en pas als het dan nog niet past
   wikkelen ze onder elkaar. Het vergrootglas bij "Zoeken" blijft altijd staan:
   dat is het pictogram dat de knop leesbaar maakt (DV, 22-09-2026).

   Op een desktop staat dit blok in een smalle kolom van een kwart; daar mogen
   ze onder elkaar. Op de telefoon vult het formulier de breedte en passen ze
   tot ongeveer een schermbreedte van 320px naast elkaar. */
@container (max-width: 300px) {
    #vp-filter-form .vp-filter-actions .vp-btn {
        font-size: 15px;
        padding-left: 0.85em;
        padding-right: 0.85em;
    }

    #vp-filter-form .vp-filter-actions .btn-secondary .svg-icon {
        display: none;
    }
}

.vp-ajax-form__response-output {
    margin-top: 0.5em;
    display: none;
}

/* Het gelukt-vlak is na een verzending het enige dat er nog staat, dus mag het
   opvallen: lichtgroen vlak met een groen kader eromheen in plaats van een
   kleurvlak zonder rand (DV, 15-09-2026). Ruimer van binnen, want het staat nu
   op zichzelf en niet meer als regeltje onder een knop. */
.apply-success {
    color: #1b7f3b;
    font-weight: bold;
    padding: 0.9em 1.25em;
    background-color: #e9f9ec;
    border: 2px solid #8ed4a2;
    border-radius: 1.25em;
    margin-top: 0.5em;
    font-size: 15px;
    min-height: 40px;
    line-height: 1.5em;
    align-content: center;
}

/* Wat na een geslaagde verzending niet meer hoeft. Het merkje wordt in
   vp-script.js gezet (displayMessage) en bij het heropenen van de pop-up weer
   weggehaald, zodat je een tweede keer kunt versturen. */
.vp-verborgen-na-verzenden {
    display: none !important;
}

/* Fout- en gelukt-meldingen zijn statuskleuren, geen huisstijl: groen betekent
   gelukt en rood betekent mislukt, ook op een site met een blauwe merkkleur.
   De tekst stond hier op de merkkleur terwijl de achtergrond vast roze was —
   op een niet-rode site gaf dat blauwe tekst op een roze vlak. Beide zijn nu
   dezelfde vaste rode statuskleur, net als .apply-success groen is. */
.apply-error {
    color: #b3261e;
    font-weight: bold;
    padding: 0.5em 1em;
    background-color: #ffe6e6;
    border-radius: 2em;
    margin-top: 0.5em;
    font-size: 14px;
    min-height: 40px;
    line-height: 1.4em;
    align-content: center;
}

.form-buttons .apply-error, .form-buttons .apply-success {
    margin-top: 0em!important;
}

.no-vacancies-found-widget {
    width: 100%;
}

.no-vacancies-found-searchform {
    margin: auto;
    width: 100%;
    max-width: calc(0.9* 767px);
}

.no-vacancies-found-redirect {
    text-align: center;
    max-width: calc(0.9 * 767px);
    margin: auto;
}

.no-vacancies-found-redirect .vp-btn {
    margin: auto;
}

.no-vacancies-found h4 {
    margin-top: -4px;
}

/** -------------- STYLING FOR BUSINESS PAGE AND FORM  ----------------- */

.business-page-container {
    display: flex;
    justify-content: space-between;
    gap: 3em;
    align-items: stretch;
    padding: 1.5em 5%;
}

.business-block-container {
    width: 33.33%;
    display: flex;
    flex-direction: column;
}

/* Twee tot vier kaarten naast elkaar.
   -------------------------------------------------------------------------
   De 33,33% hierboven gaat uit van precies drie kaarten. Dat ging bij vier nog
   net goed omdat flexbox ze samendrukt, maar bij twee niet: die bleven dan op
   360px staan en werden door `space-between` naar de buitenranden geduwd, met
   een gat ertussen.

   [vp_packages] zet het werkelijke aantal als `--vp-kaarten` op de rij, en
   hieronder wordt de breedte daaruit gerekend: de volle breedte min de
   tussenruimtes, gedeeld door het aantal. Bij drie kaarten komt daar exact
   dezelfde 332px uit die er nu al staat, dus de bestaande pagina's veranderen
   niet. Zonder die variabele valt alles terug op drie.

   Twee breekpunten, omdat de tussenruimte verspringt: 2em tot 980px, 3em
   daarboven. Onder de 768px gelden de mobiele regels verderop — daar staan de
   kaarten onder elkaar en in een swipe-rij, en die maten moeten deze berekening
   niet overschrijven. */
@media (min-width: 768px) {
    .business-block-container {
        width: calc((100% - (var(--vp-kaarten, 3) - 1) * 2em) / var(--vp-kaarten, 3));
    }
}

@media (min-width: 981px) {
    .business-block-container {
        width: calc((100% - (var(--vp-kaarten, 3) - 1) * 3em) / var(--vp-kaarten, 3));
    }
}

.business-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: none;
    border-radius: 2em;
    text-align: center;
    background-color: white;
    overflow: hidden;
    box-shadow: 0 0 1em -4px #999;
}

/* Kaartkop en prijs kleiner dan de paginakoppen. Met vier kaarten naast elkaar
   (DionysosDigital: "Op projectbasis", "Vanaf € 950,-") braken kop en prijs op
   28/34px over twee regels (DV, 17-09-2026). De hogere specificiteit wint van
   de !important-maten van .vp-divi-header-big/-extra-large op elke breedte. */
.business-block h3.vp-divi-header-big {
    font-size: 22px !important;
    line-height: 1.15em !important;
}

.business-block .vp-divi-header-extra-large {
    font-size: 26px !important;
    line-height: 1.15em !important;
}

.business-block h3 {
    color: white;
    background: var(--vp-brand-gradient);
    padding: 0.75em 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.business-block h3 i {
    margin-right: 0.25em;
    font-size: 40px;
}

.business-block h4 {
    padding-left: 0.5em;
    padding-right: 0.5em;
    color: var(--vp-dark-color, black);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0.25em;
    padding-top: 1em;
    padding-bottom: 1em;
}

.pricing-buttons {
    margin: 0 auto 1.5em auto;
    padding: 0 1.5em;
    width: 100%;
}

.pricing-buttons .btn-primary {
    margin-top: 0.85em;
    margin-inline: auto;
}

.usp-wrapper {
    padding: 0 1.5em;
    flex-grow: 1;
    align-content: flex-start;
}

.pricing-text {
    padding: 0;
    margin-top: 1em;
}

.usp-info {
    display: flex;
    flex-direction: column;
}

.usp-item {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    text-align: left;
}

.usp-header {
    display: flex;
    align-items: center;
    justify-content: left;
}

.usp-header i {
    font-size: 22px;
    color: var(--vp-brand-color);
    margin-right: 0.4em;
}

.usp-header .times-circle {
    color: #999;
}

/* Vinkje of kruisje hoort bij de éérste regel van het kenmerk, niet bij het
   midden van het hele blokje. Met align-items: center zakte het pictogram naar
   beneden zodra de tekst over twee regels liep — op vacatureposter valt dat
   niet op omdat daar geen enkele regel afbreekt, op VvE-Care (10 regels) en
   DionysosDigital (15 regels) wel (DV, 23-09-2026).

   De -0.12em haalt het verschil weg tussen het 22px pictogram en de 16,8px
   regelhoogte, zodat het pictogram precies op het midden van de eerste regel
   staat. Opgemeten: zowel bij één regel als bij meer regels 0px afwijking.
   .svg-icon zet zelf align-self: center, vandaar dat die hier terug moet. */
.usp-header {
    align-items: flex-start;
}

.usp-header > .svg-icon {
    align-self: flex-start;
    /* Aan béíde kanten eraf, niet alleen bovenaan. Met alleen een negatieve
       bovenmarge bleef het pictogram 22px hoog meetellen: het kenmerk werd
       daardoor 19px in plaats van de 17px van zijn tekst, de tekst zat tegen de
       bovenkant en stond dus niet meer midden tussen de twee scheidingslijntjes
       (DV, 24-09-2026). Nu bepaalt de tekst de hoogte en hangt het pictogram
       gecentreerd op de eerste regel. */
    margin-block: -0.12em;
}

/* De voetnoot onderaan de kaart, tegen de knoppen aan. Kaarten in één rij zijn
   even hoog; met een verschillend aantal kenmerken zweefde die tekst daardoor
   op verschillende hoogtes. De scheidingslijn ervóór pakt de overgebleven
   ruimte, zodat lijn én tekst samen naar beneden zakken. */
.usp-wrapper {
    display: flex;
    flex-direction: column;
}

.usp-info {
    flex: 1;
}

.usp-info > .usp-divider:has(+ .pricing-text) {
    margin-top: auto;
}

.usp-text {
    font-weight: 700;
    font-style: italic;
    margin: 0;
    line-height: 1.2;
    color: var(--vp-dark-color, black);
    letter-spacing: 0.5px;
}

.usp-detail {
    font-size: 0.9em;
    color: #999;
    margin-left: 0;
    padding-top: 0.25em;
    line-height: 1.4;
    font-style: italic;
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
}

.usp-divider {
    width: 100%;
    height: 4px;
    /* Regelscheiding in een lichte tint van de merkkleur in plaats van een
       grijs dat op het witte kaartje bijna wegviel: de lichtgekleurde lijnen
       tussen de factuurregels. Zonder variabele: een neutraal lichtgrijs. */
    background-color: rgba(var(--vp-brand-rgb, 0, 0, 0), 0.1);
    border-radius: 2px;
}

/* Staat er een kruisje bij een kenmerk, dan is dat kenmerk grijs — en dan hoort
   de lijn eronder dat ook te zijn. Met de merkkleurige tint leek het alsof het
   kenmerk er wél bij zat (DV, 23-09-2026). Dezelfde lichtheid als de regel
   hierboven, alleen neutraal in plaats van gekleurd.

   De scheidingslijn staat vóór elk kenmerk, dus "de lijn onder dit kenmerk" is
   de divider die er als broer op volgt. */
.usp-item:has(.times-circle) + .usp-divider {
    background-color: rgba(var(--vp-dark-rgb, 0, 0, 0), 0.1);
}

.btn-more-info {
    justify-content: center;
    padding-top: 0.2em;
}

/* Vier kaarten naast elkaar passen alleen op een breed scherm. Daaronder werd
   elke kaart zo'n 170px breed en brak "Op projectbasis" in drie regels die
   buiten hun gekleurde kopje vielen. Tussen 650 en 1199px dus twee bij twee;
   daarboven blijven het er vier, daaronder nemen de regels hieronder het over
   (eerst onder elkaar, en onder 650px een veegrij). Alleen bij vier kaarten:
   twee of drie passen wel. */
@media (min-width: 651px) and (max-width: 1199px) {
    .business-page-container.vp-kaarten-4 {
        flex-wrap: wrap;
        justify-content: center;
    }

    .business-page-container.vp-kaarten-4 .business-block-container {
        width: calc((100% - 3em) / 2);
    }
}

@media (min-width: 651px) and (max-width: 980px) {
    .business-page-container.vp-kaarten-4 .business-block-container {
        width: calc((100% - 2em) / 2);
    }
}

/* Responsive adjustments */
@media (max-width: 980px) {
    .business-page-container {
        gap: 2em;
    }
}
@media (max-width: 767px) {
    .business-page-container {
        gap: 1em;
    }

    .business-block-container {
        width: 95%;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 650px) {
    .business-page-container {
        overflow-x: scroll;
        gap: 1.5em;
        scroll-snap-type: x mandatory;
        scroll-snap-stop: always;
        scroll-behavior: smooth;
    }

    .business-block-container {
        min-width: 80%;
        max-width: 150px;
        scroll-snap-align: center;
        flex: 0 0 auto;
    }

    .usp-header {
        justify-content: center;
    }

    .usp-info {
        align-items: center;
    }

    .usp-detail {
        text-align: center;
    }

    .usp-divider {
        margin-inline: auto;
        width: 85%;
    }

}

    .business-form-pop-up-background {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 99999;
            /* Stond op een lichte sluier (wit 25%), waardoor het formulier op een
               lichte pagina nauwelijks van de achtergrond te onderscheiden was.
               Nu donker, gelijk aan de cookiemelding en de verificatiebanner —
               dat is de gebruikelijke behandeling voor een modaal venster en het
               brengt de aandacht naar het formulier. */
            background-color: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
        }

        .business-form-pop-up {
            display: inline-block;
            margin: auto;
            max-width: 600px;
            width: 90%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            position: absolute;
            /* Zelfde lichte merktint als .form-container erin, anders blijft er
               een grijze rand rond het getinte formulier zichtbaar. Dekkend
               (color-mix, niet rgba): het venster staat op de donkere sluier.
               Grijze regel = terugval zonder color-mix(). */
            background-color: #f1f1f1;
            background-color: var(--vp-form-tint, color-mix(in srgb, var(--vp-brand-color, #333) 7%, white));
            border-radius: 2em;
            box-shadow: 0em 10px 4em 0px rgb(0 0 0 / 50%);
            max-height: 75%;
            overflow: scroll;
            margin-top: 2.5em;
        }

        .business-form-pop-up .btn-primary {
            margin: 0.75em auto auto 0;
        }

        .business-form-pop-up-exit {
            z-index: 10;
            top: 0;
            right: 0;
            padding: 0.75em 1em;
            cursor: pointer;
            /* Het kruisje en zijn gloed in dezelfde tint als het venster, zodat
               het bij scrollen over de inhoud heen blijft "zweven" zoals nu. */
            background: #f1f1f1;
            background: var(--vp-form-tint, color-mix(in srgb, var(--vp-brand-color, #333) 7%, white));
            float: right;
            border-radius: 2em;
            font-size: 26px;
            box-shadow: 0px 0px 6px 2px #f1f1f1;
            box-shadow: 0px 0px 6px 2px var(--vp-form-tint, color-mix(in srgb, var(--vp-brand-color, #333) 7%, white));
            position: absolute;
        }

        .quotation-block-text {
            margin-top: -0.75em;
            font-weight: 400;
        }

        .quotation-form-radio-block {
            display: inline-grid;
        }

/** -------------- STYLING FOR ARCHIVE / SEARCH PHP PAGE  ----------------- */

.company-archive-description-widget {
    max-width: 1100px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    padding-top: 0em;
}

.company-archive-widget-container {
    display: flex;
    gap: 2em;
    padding: 1.5em;
    border-radius: 2em;
    border: 4px solid #f1f1f1;
    background: #f1f1f1;
}

.company-archive-page-widget-image {
    min-width: 30%;
    object-fit: cover;
    border-radius: 2em;
    min-height: 100px;
    background-size: cover;
    background-position: center;
    border: none;
}

.company-archive-widget-text {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
}

.company-archive-widget-text h3 {
    margin-top: -0.25em;
}

.company-archive-widget-text p {
    margin-bottom: -0.25em;
}

.archive-page-results-company {
    width: 100%!important;
    max-width: 900px;
    display: flex;
    flex-direction: column;
}

.archive-page-results h2 {
    margin-bottom: 0.35em;
    margin-top: -0.25em;
}

.vp-result-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 2em;
    line-height: 1.4em;
    padding: 1.5em;
    border: 4px solid white;
    border-radius: 2em;
    background: white;
    text-decoration: none;
    color: #666;
    font-weight: 500;
    box-shadow: 0 0 1em -4px #999;
}

a:last-of-type .vp-result-wrapper {
    margin-bottom: 0!important; 
}

.vp-result-wrapper:hover {
    box-shadow: 0 0 0.5em 0px var(--vp-brand-color);
}

.vp-result-wrapper h3 {
    margin-top: -3px;
    width: fit-content;
    position: relative;
    display: inline-block;
    color: var(--vp-dark-color, #333);
}

.vp-result-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 1em;
}

.vp-result-image-wrapper {
    align-self: stretch;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 2em;
    overflow: hidden;
    margin-right: 1.5em;
    width: 30%;
}

.vp-result-title-location-date {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.vp-result-location {
    color: #666;
    padding-bottom: 0.2em;
}

.vp-result-date {
    margin-bottom: -3px;
}

.vp-result-main-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.vp-result-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;
    margin-bottom: 0.75em;
}

.vp-result-detail {
    padding: 0.25em 0.75em;
    border-radius: 2em;
    display: flex;
    font-weight: bold;
    background: #f1f1f1;
    align-items: center;
    color: var(--vp-dark-color, #333);
    font-size: 0.95em;
}

.vp-result-detail i {
    color: var(--vp-brand-color);
}

.vp-result-intro {
    font-style: italic;
    margin-bottom: -3px;
}

.vp-result-mobile-button {
    margin: 1em auto auto 0;
    max-width: 250px;
}

.read-more {
    font-weight: 900;
    color: var(--vp-brand-color);
    font-style: italic;
    text-decoration: underline;
    text-decoration-color: white;
    text-decoration-thickness: 2px;
    cursor: pointer;
}

.read-more:hover {
    text-decoration-color: var(--vp-brand-color);
}

.no-vacancies-found {
    margin-bottom: 0.75em;
}

.vp-pagination {
    margin-top: 1em;
    display: flex;
    gap: 0.5em;
}

.page-numbers {
    padding: 0.5em 1em;
    background: #f1f1f1;
    border-radius: 1em;
    line-height: 1em;
    color: var(--vp-brand-color);
    font-weight: 900;
}

.page-numbers.current {
    color: #666;
    background: #e4e4e4;
}

.three-images-container {
    display: flex;
    justify-content: space-between;
    gap: 2em;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.image-item {
    width: calc(33.33% - 1.33em);
    border-radius: 2em;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.image-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}


/** -------------- STYLING FOR VACANCY PAGE  ----------------- */

.vp-post-content-container {
    width: 100%;
}

.vp-post-content-container h2 {
    margin-top: -5px;
    color: var(--vp-dark-color, #333);
}

.vp-post-content-container ul {
    list-style-type: none;
    margin-left: 1.5em;
    padding-bottom: 0 !important;
}

.vp-sidebar-container ul {
    list-style-type: none;
    margin-bottom: -3px !important;
    margin-left: 1.5em;
    padding-bottom: 0 !important;
    color: var(--vp-dark-color, #333);
    font-weight: 500;
    line-height: 1.4em!important;
}

.vp-post-location {
    font-size: 20px;
    font-weight: bold;
    color: #666;
    padding-bottom: 3px;
    /* De bedrijfsnaam is met harde spaties aan elkaar geplakt (zie
       vp_build_company_location_html) zodat de regel achter het bolletje breekt
       en niet middenin de naam. Past die naam in zijn eentje niet op de regel,
       dan is dit de laatste uitweg: dan mag hij alsnog breken in plaats van
       buiten zijn kader te lopen. */
    overflow-wrap: break-word;
}

.vp-post-date {
    color: #666;
    margin-bottom: 1em;
}

.vp-post-content-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-bottom: 2.25em;
}

.vp-post-content-detail {
    padding: 0.4em 0.75em;
    border-radius: 2em;
    display: flex;
    font-weight: bold;
    background: #f1f1f1;
    align-items: center;
    color: var(--vp-dark-color, #333);
}

.vp-post-content-detail i {
    color: var(--vp-brand-color);
}

.vp-post-content-wrapper {
    display: flex;
    flex-direction: row;
    gap: 2em;
    width: 100%;
    align-items: stretch;
    box-sizing: border-box;
    flex-grow: 1;
}

.vp-post-content a {
    color: var(--vp-brand-color);
    text-shadow: none;
}

p.vp-post-content-intro {
    padding-top: 0!important;
    margin-top: -0.25em;
}

.vp-post-content-image-wrapper {
    display: flex;
    gap: 1.5em;
}

.vp-post-content-image {
    max-width: 45%;
    min-width: 45%;
    width: 100%;
    object-fit: cover;
    border-radius: 2em;
    min-height: 120px;
    background-size: cover; 
    background-position: center;
    overflow: hidden;
    position: relative;
}

.vp-post-content-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at top left, var(--vp-brand-color) -20%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 5;
}

.vp-post-content-image-text {
    flex: 1 1 auto;
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    /* Match the .vp-post-content p / ul rule so plain-text offer content (not
       wrapped in <p>/<ul>) renders at 16px instead of the .vp-post-content
       base of 14px. The <h3> and any child <p>/<ul> keep their own rules. */
    font-size: 16px;
    line-height: 1.6em;
    letter-spacing: 0px;
}

/* Wrapper for the "Wat ga je doen?" (omschrijving) and "Waar zijn we naar op
   zoek?" (gevraagd) blocks: guarantees their content renders at 16px even when
   the field holds plain text, matching every other content block. */
.vp-post-content-text {
    font-size: 16px;
    line-height: 1.6em;
    letter-spacing: 0px;
}

.vp-post-content-company-description {
    display: flex;
    gap: 1.5em;
    align-items: stretch; 
}

.vp-post-content-company-description-image {
    max-width: 40%;
    width: 100%;
    object-fit: cover;
    border-radius: 2em;
    border: none;
    min-height: 150px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    position: relative;
}

.vp-post-content-company-description-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at bottom right, var(--vp-brand-color) -20%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 5;
}

.vp-post-content-company-description-text {
    flex: 1 1;
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    /* Match the .vp-post-content p / ul text rule so company descriptions that
       are plain text (not wrapped in <p> or <ul>) render at the same size as
       the list/paragraph variants. The <h3> label and any child <p>/<ul> keep
       their own !important rules, so only bare text nodes are affected. */
    font-size: 16px;
    line-height: 1.6em;
    letter-spacing: 0px;
}

.vp-post-content-oneliner {
    font-style: italic;
    color: #666;
    padding: 0.5em 1.5em 1em 1.5em;
    border-radius: 2em;
    width: fit-content;
    max-width: 775px;
    /* De rand liep van lichte naar donkere merkkleur — hetzelfde verloop als de
       streep onder de scroll-header (#vp-secondary-header-scroll). Een rand kan
       zelf geen verloop dragen, dus staat het in de achtergrond: wit tot aan de
       binnenrand (padding-box) en het verloop daaronder door tot de buitenrand
       (border-box). Zo volgt het verloop ook de ronding van 2em; border-image
       doet dat niet.

       Staan er bedrijfskleuren op de pagina, dan zet
       VerharenATS/includes/bedrijfskleuren.php hier een border-color neer. Die
       dekt het verloop af, en de oneliner krijgt de tweede kleur van de
       opdrachtgever. Zonder bedrijfskleuren — een eigen wervings- of
       marketingcampagne, of een interne vacature, waar de sitenaam onder de
       vacature staat — is het dus het verloop van de site zelf
       (DV, 24-09-2026). */
    border: solid 4px transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        var(--vp-brand-gradient, var(--vp-brand-color, #e4e4e4)) border-box;
}

.vp-post-content-video-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0;
    border-radius: 2em;
    padding: 0;
    overflow: hidden;
    background-color: black;
}

.vp-post-content-video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
}

.vp-post-content-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0em;
}

.youtube-placeholder {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    cursor: pointer;
    background-color: #000;
    overflow: hidden;
}

.youtube-iframe {
    width: 100%;
    height: 100%;
}

.youtube-placeholder img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.youtube-placeholder .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex; 
    justify-content: center;
    align-items: center;
    width: 54px;
    height: 54px;
    z-index: 10;
    overflow: visible;
    box-shadow: 0 0 2em 0.25em black;
    border-radius: 2em;
}

.youtube-placeholder .play-button .svg-icon {
    width: 54px;
    height: 54px;
    color: var(--vp-brand-color); 
    fill: currentColor; 
}

.youtube-placeholder .play-button svg {
    fill: var(--vp-brand-color);
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease, color 0.3s ease;
}

.youtube-placeholder:hover .play-button svg {
    transform: scale(1.1);
}

path.ytp-large-play-button-bg {
    fill: var(--vp-brand-color) !important;
}

.youtube-placeholder .video-cookie-message {
    color: #fff;
    background-color: rgba(0, 0, 0, .6);
    padding: 0.75em 1em;
    text-align: center;
    border-radius: 2em;
    width: 90%;
    position: absolute;
    z-index: 99;
    text-shadow: 0 0 1em black;
    position-area: center;
    max-width: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    font-style: italic;
    font-weight: 600;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    margin-top: 0;
}

.youtube-placeholder .sub-btn {
    display: inline;
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.3s ease;
}

.video-cookie-message:hover .sub-btn-text,
.video-cookie-message:focus .sub-btn-text,
.video-cookie-message:active .sub-btn-text {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--vp-brand-color);
    transition: text-decoration-color 0.3s ease;
}

.vp-post-content-details-section {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    justify-content: flex-start;
}

/* Sidebar for company widget, application form and recruiter widget */
.vp-sidebar-container {
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 2em;
    margin-top: 0;
    margin-bottom: 0;
}

.vp-profile-widget-wrapper, .vp-company-widget-wrapper {
    width: 100%;
    max-width: calc(0.9* 767px);
    border-radius: 2em;
    row-gap: 1.25em;
    column-gap: 1em;
    display: flex;
    flex-flow: wrap;
    margin-bottom: 1em;
}

.vp-profile-widget-image {
    border-radius: 2em;
    flex: auto;
    min-height: 80px;
    max-width: 300px;
    width: 100px;
    align-self: stretch;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.widget-contact-buttons {
    gap: 0.5em;
    display: flex;
    width: 100%;
}

.widget-contact-buttons .vp-btn {
    max-width: 150px;
}

.widget-contact-buttons i {
    vertical-align: middle;
    font-size: 24px;
    justify-content: center;
}

.vp-company-widget-image {
    border-radius: 2em;
    flex: auto;
    min-height: 100px;
    max-width: 300px;
    width: 100px;
    align-self: stretch;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.vp-profile-widget-wrapper h4, .vp-company-widget-wrapper h4 {
    width: fit-content;
    /* De naam van een externe contactpersoon is vaak langer dan de
       gebruikersnaam van een eigen recruiter. Zonder deze twee regels kon een
       lange naam buiten de kaart vallen en door de overflow van de widget
       worden afgesneden (DV, 22-09-2026). */
    max-width: 100%;
    overflow-wrap: break-word;
    padding-bottom: 0.45em;
    margin: -3px 0 0 0;
    color: var(--vp-dark-color, #333);
    font-weight: bold;
}

.contact-info-wrapper h4 {
    margin: 0;
    color: var(--vp-dark-color, #333);
    padding-bottom: 5px;
    font-weight: bold;
}

.vp-company-widget li {
    font-size: 90%;
}

.vp-company-widget p {
    font-style: italic;
    line-height: 1.4!important;
    margin-top: -3px;
    color: #666;
}

.vp-company-widget .buttons {
    margin-top: 0.25em;
    display: flex;
    flex-direction: column;
}

.vp-profile-widget-wrapper p {
    font-style: italic;
    margin-bottom: -3px;
    line-height: 1.4!important;
    margin-top: 0px;
    color: #666;
}

/* Full-width related vacancies */
.vp-related-posts {
    width: 90%;
    text-align: left;
    max-width: 850px;
    margin-bottom: 4em;
    margin-left: auto;
    margin-right: auto;
}

.vp-sidebar-categories {
    width: 90%;
    margin-bottom: 4em;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--vp-site-max, 1320px);
}

.vp-related-posts h2 {
    color: var(--vp-dark-color, #333);
    margin-bottom: 0.5em;
    margin-top: -0.25em;
    padding-bottom: 0.25em;
}

/** -------------- CUSTOM STYLING FOR CONTACT PAGE  ----------------- */

.contact-page-title {
    text-align: center;
    margin-bottom: 0.7em;
}

.contact-info-container, .contact-info-blocks {
    gap: 2em;
    display: flex;
    flex-direction: column;
}

.contact-info ul {
    margin-top: 0.75em;
    margin-bottom: 0.5em;
    padding: 0 !important;
    margin-left: 1.4em;
}

/* .sub-btn-text staat sitebreed op de accentkleur en wint hier van de grijze
   kleur op de link eromheen. Binnen dit blok moet die knop juist rustig zijn en
   pas bij hover oplichten. */
.contact-info a.contact-sub-btn .sub-btn-text {
    color: #666 !important;
}

.contact-info a.contact-sub-btn:hover .sub-btn-text,
.contact-info a.contact-sub-btn:focus .sub-btn-text {
    color: var(--vp-brand-color) !important;
}

.content-info h4 {
    padding-bottom: 6px;
    font-weight: 700;
    border: none;
    line-height: 1.2em;
}

/* ── De bedrijfskaart naast het contactformulier ───────────────────────────
 * De kaart stapelt van boven naar beneden: slogan, dan de foto met daarnaast
 * naam en adres, dan bellen/mailen, dan de knop. Daarvóór stond de foto naast
 * de hele rechterkolom — naam, slogan, adres, telefoon, e-mail, KvK én de knop
 * — en werd hij een smalle, uitgerekte strook naast al die tekst. Naast vier
 * korte regels blijft hij een rechthoek (DV, 23-09-2026).
 * ------------------------------------------------------------------------ */
.contact-info-wrapper {
    text-align: left;
    display: flex;
    flex-direction: column;
    row-gap: 1.1em;
    margin-bottom: 0;
    max-width: 600px;
}

/* De slogan hoort bij de kaart als geheel en staat daarom bovenaan, over de
   volle breedte, en niet meer als tweede regel naast de foto. */
.contact-info-slogan {
    margin: 0;
    padding-bottom: 0;
}

.contact-info-head {
    display: flex;
    align-items: stretch;
    column-gap: 1.5em;
}

/* De hoogte van de rij komt van de tekst ernaast, niet van de foto. De foto
   ligt er absoluut in en vult wat er is: zonder dat bepaalde een staande foto
   (667x791) zelf de hoogte en rekte hij de adreskolom mee naar 213px terwijl
   de tekst maar 130px nodig had. De ondergrens vangt het omgekeerde af — een
   adres van één regel mag de foto niet tot een streepje persen. */
.contact-info-head > .contact-info-image {
    flex: 0 0 38%;
    min-width: 0;
    min-height: 8em;
    position: relative;
    overflow: hidden;
    place-content: normal;
}

.contact-info-head > .contact-info-image img {
    position: absolute;
    inset: 0;
}

.contact-info-head > .contact-info-lines {
    flex: 1 1 auto;
    min-width: 0;
}

.contact-info-image {
    border-radius: 2em;
    display: flex;
}

.contact-info-wrapper img {
    border-radius: 2em;
    border: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-width: 50px;
    align-self: center;
}

.contact-info-wrapper p {
    line-height: 1.6em !important;
}

.contact-info {
    width: 100%;
    max-width: calc(0.9* 767px);
    padding: 0;
    border-radius: 2em;
    background-color: white;
    border: none;
}

.opening-hours {
    display: flex;
    gap: 1em;
    margin-top: 0.25em;
}

.opening-hours-wrapper {
    display: block;
    align-self: flex-start;
    background: white;
    border-radius: 2em;
    border: none;
    margin-top: -5px;
    margin-bottom: -3px;
}

.opening-hours-wrapper h3 {
    font-weight: 700;
    font-size: 16px;
    padding-bottom: 0.75em;
}

.opening-hours-days, .opening-hours-times {
    display: flex;
    flex-direction: column; 
}

.opening-hours-times {
    /* Sleutel/waarde zoals op de factuur: de dag links grijs en normaal, de
       tijd rechts vet in de donkere tekstkleur. Niet meer cursief — de waarde
       is het antwoord, geen bijzin. */
    font-weight: 700;
    color: var(--vp-dark-color, #333);
}

.contact-employer-widget-list {
    padding: 0;
}


/** -------------- DYNAMIC STYLING FOR DIFFERENT PAGE WIDTH  ----------------- */
/* 
*
*
* Tablet page design (max-width: 767px)
*
*/
@media (max-width: 767px) {
    /* General styling */
    .page-header-image {
        height: 10.5em;
    }

    .page-header-image-archive {
        height: 7em;
    }

    .archive-page-filter {
        width: 100%;
        max-width: 500px;
    }
    
    .content-wrapper-archive-page-branche {
        flex-direction: column-reverse;
    }

    .checkbox-sub-text {
        font-size: 100%;
    }

    .vp-post-content-image {
        max-width: 38%;
        min-width: 38%;
        width: 100%;
    }

    .vp-post-content-company-description-image {
        max-width: 30%;
        width: 100%;
    }

    /* Button styling */
    .btn-fixed-buttons {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        padding-bottom: 1.5em;
    }

    .btn-fixed {
        width: calc(100% - 4em);
        max-width: 450px;
        justify-content: center;
    }

    /* Vacancy page styling */
    .vp-post-content,
    .vp-sidebar-container {
        width: 100%;
        margin-top: 0px;
    }

    .vp-post-location {
        font-size: 18px;
    }

    .vp-page-content-wrapper {
        flex-wrap: wrap;
    }

    .vp-company-widget li {
        font-size: 100%;
    }

    .vp-company-widget-wrapper {
        gap: 1.25em;
        margin-bottom: 1em;
    }

    .vp-profile-widget-wrapper {
        flex-wrap: nowrap;
        margin-bottom: 1em;
        flex: 1;
        gap: 1em;
    }
        
    .vp-profile-widget-image {
        flex: 0 0 auto;
        max-width: 100px;
        min-width: 35%;
        line-height: 0;
    }

    .three-images-container {
        flex-flow: wrap;
    }

    .image-item {
        flex-basis: calc(50% - 1em);
    }

    .image-item.item-3 {
        flex-basis: 100%;
    }

    .vp-result-wrapper {
        margin-bottom: 1em;
    }

    .vp-result-image-wrapper {
        margin-right: 1em;
    }

    .vp-post-content-detail {
        font-size: 0.95em;
        padding: 0.4em 0.8em;
    }

    .js-more-vacancies-vp {
        margin-top: 1em;
    }

    .application-form .content-divider {
        margin-top: 1.5em;
        margin-bottom: 1em;
        display: inline-block;
    }

    /* Contact page */
    .contact-info-container {
        gap: 2em;
    }

}

@media (max-width: 600px) {
    .content-wrapper {
        flex-wrap: wrap;
    }

    .company-archive-widget-container {
        flex-flow: wrap-reverse;
        gap: 1.5em;
    }

    .company-archive-widget-text {
        align-items: center;
        text-align: center;
    }

    .company-archive-page-widget-image {
        width: 100%;
        height: 100px;
    }
}

@media (min-width: 500px) and (max-width: 649px) {
    .content-wrapper-contact-page {
        flex-wrap: wrap-reverse;
    }

    .contact-form-wrapper {
        width: 90%;
    }

    .contact-info-container {
        row-gap: 4em;
        column-gap: 2em;
        display: flex;
    }

    .contact-info-blocks {
        display: flex;
        flex-direction: row;
    }

    .contact-info ul {
        display: flex;
        flex-direction: column;
        margin-right: 0.5em;
    }

    .content-divider {
        display: none;
    }

}

/* 
*
* Mobile page design (max-width: 499px)
*
*/
@media (max-width: 499px) {
    .page-header-image {
        height: 9.95em;
    }

    .page-header-image-archive {
        height: 6.5em;
    }
    
    /* Vacancy page styling */
    .vp-post-content-company-description {
        flex-wrap: wrap-reverse;
        gap: 2.25em;
    }

    .vp-post-content-company-description-image {
        width: 100%;
        max-width: none;
        max-height: 250px;
        min-height: 200px;
    }

    .vp-post-content-image-wrapper {
        flex-wrap: wrap;
        row-gap: 2.5em;
        column-gap: 1em;
    }

    .vp-post-content-image {
        width: 100%;
        min-width: 100%;
        max-height: 150px;
        min-height: 150px;
    }

    .vp-searchform-homepage #vp-searchform .form-group,
    .js-vacancies-vp-container #vp-searchform .form-group {
        margin-right: 0em;
        margin-bottom: 0.5em;
    }

    .vp-searchform-homepage #vp-searchform {
        flex-flow: wrap;
        max-width: 350px;
        margin: auto;
        flex-direction: column;
    }

    .js-vacancies-vp-container #vp-searchform {    
        flex-flow: wrap;
        flex-direction: column;
    }

    .js-vacancies-vp-container #vp-searchform .btn-primary, .js-vacancies-vp-container .btn-secondary {
        max-width: 250px;
        width: 100%;
    }

    .vp-searchform-homepage #vp-searchform .btn-primary {
        max-width: 250px;
        width: 100%;
        align-self: center;
    }

    .vp-divi-btn-container .vp-btn {
        margin: auto;
        max-width: 250px;
        text-align: center;
        display: flex;
        justify-content: center;        
    }

    .three-images-container {
        gap: 1em;
        flex-flow: wrap;
    }
    
    .image-item {
        width: 100%;
        aspect-ratio: 16 / 9;
        flex-basis: 100%;
    }

    .image-item.item-1, .image-item.item-2 {
        max-height: 160px;
    }

    .content-wrapper-contact-page {
        flex-direction: column-reverse;
    }

    .contact-info-head > .contact-info-image {
        flex: 1;
    }

    .opening-hours-wrapper {
        align-self: flex-start;
        text-align: left;
    }

    .content-divider {
        display: none;
    }
}

/* 
*
* Mobile page design (max-width: 350px)
*
*/
@media (max-width: 350px) {
    .vp-result-image-wrapper {
        display: none;
    }

    .vp-profile-widget-image {
        width: 100%;
    }

    .vp-post-content-image-wrapper {
        flex-wrap: wrap;
    }

    .vp-post-content-image {
        width: 100%;
        max-width: none;
        height: 200px;
    }

    .vp-profile-widget-wrapper {
        flex-wrap: wrap;
        flex: 1;
        gap: 1em;
    }
        
    .vp-profile-widget-image {
        flex: none;
        max-width: none;
        line-height: 0;
        height: 6em;
    }

    .divi-werkgevers-button-widget .vp-btn {
        margin-inline: auto;
    }

    /* Te smal om naast elkaar te staan: de foto erboven, over de volle breedte
       en op een vaste hoogte, zodat het een rechthoek blijft en niet een hoog
       staand vlak wordt (DV, 20-09-2026). */
    .contact-info-head {
        display: block;
    }

    .contact-info-head > .contact-info-image {
        max-width: none;
        width: 100%;
        height: 7.5em;
        margin: 0 0 1em;
    }

    .contact-info-head > .contact-info-lines {
        width: 100%;
    }

    .contact-info-image,
    .contact-info-wrapper img {
        max-height: 7.5em;
        overflow: hidden;
    }
}

/* 
*
* Mobile page design (large screens) (min-width: 500px)
*
*/
@media (min-width: 500px) {
    .vp-searchform-homepage #vp-searchform .form-group {    
        margin-right: 1em;
    }

    .js-vacancies-vp-container #vp-searchform .form-group {    
        margin-right: 1em;
    }

    .zoom-animation:hover {
        transform: scale(1.02);
    }

    /* De vier kaartrijen op de werkgeverspagina's krijgen dezelfde hover-zoom.
       Bewust dezelfde waarde als .zoom-animation hierboven in plaats van een
       tweede effect ernaast: het is één beweging op de hele site.

       De selector raakt precies deze acht kolommen — twee rijen van vier op
       /werkgevers/werving-selectie/ en twee op /werkgevers/vacaturemarketing/ —
       en nergens anders iets. Nagemeten over alle zeven pagina's: kwart-kolommen
       met een rand komen alleen daar voor. De logostrook bestaat uit
       zesde-kolommen en de reviewblokken uit derde-kolommen, dus die blijven
       ongemoeid. */
    .et_pb_column_1_4.et_pb_with_border:hover,
    .et_pb_column_1_4.vp-merkband:hover {
        transform: scale(1.02);
        transition: opacity 0.3s ease-in-out,
                    transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .vp-inline-usp:hover {
        transform: scale(1.02);
    }
}

/* 
*
* Tablet page design (min-width: 768px)
*
*/
@media (min-width: 768px) {
    /* General styling */
    .content-wrapper {
        column-gap: 2em;
        row-gap: 3em;
    }

    .content-wrapper-contact-page {
        column-gap: 2em;
        row-gap: 5em;
    }

    .page-header-image {
        height: 13.65em;
    }

    .page-header-image-archive {
        height: 8em;
    }

    .checkbox-sub-text {
        font-size: 90%;
    }

    /* Button styling */
    .btn-fixed-buttons {
        display: none;
    }

    .vp-result-mobile-button {
        display: none;
    }

    /* Archive and search page styling */
    .archive-page-filter {
        width: 27.5%;
    }

    .archive-page-results {
        width: 72.5%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Het blogoverzicht heeft geen zoekkaart meer naast zich (DV, 20-09-2026),
       dus de berichten krijgen de volle breedte in plaats van de 72,5% die
       voor de kolom naast het filter bedoeld is. */
    .archive-page-results-wide {
        width: 100%;
    }

    .archive-page-results-company {
        width: 90%!important;
    }

    /* De twee kolommen van de contactpagina zijn exact even breed, zodat de
       ruimte ertussen precies op het midden van de pagina valt. De
       informatiekolom stond op 35% en het formulier op 415px: dat viel op een
       breed scherm net naast elkaar (420 om 415, dus de tussenruimte 2,5px uit
       het midden) en liep op 768px ver uiteen (242 om 415). Nu delen ze
       dezelfde flexbasis en dezelfde bovengrens, dus ze zijn op elke breedte
       even breed (DV, 23-09-2026).

       min-width: 0 omdat een flexitem standaard niet onder zijn min-content
       krimpt: het info-blok hield 376px vast en drukte het formulier op 768px
       terug naar 301px, waarmee de tussenruimte alsnog 38px uit het midden
       schoof. */
    .contact-form-wrapper,
    .contact-info-container {
        max-width: 415px;
        flex: 1;
        min-width: 0;
    }

    /* Vacancy page styling */
    .vp-profile-widget-image,
    .vp-company-widget-image {
        width: 100%;
        line-height: 0;
        height: 100px;
    }

    .vp-searchform-homepage #vp-searchform .form-group {    
        margin-right: 1em;
    }

    .js-vacancies-vp-container #vp-searchform .form-group {    
        margin-right: 1em;
        max-width: 400px;
    }

    .content-wrapper,
    .content-wrapper-branches,
    .vp-related-posts,
    .vp-related-posts .content-divider,
    .company-archive-description-widget,
    .content-wrapper-contact-page {
        margin-bottom: 5em;
    }

    .vp-sidebar-categories {
        margin-bottom: 5em;
        margin-left: auto;
        margin-right: auto;
    }

    .vp-post-content-video-container {
        width: 90%;
    }

    .vp-btn {
        font-size: 15px;
    }
    
    .js-more-vacancies-vp {
        margin-top: 1.75em;
    }

    .application-form .content-divider {
        margin-top: 2em;
        margin-bottom: 1.5em;
        display: inline-block;
    }
}

/* 
*
* Desktop screens (min-width: 981px)
*
*/
@media (min-width: 981px) {
    .page-header-wrapper {
        margin-bottom: 3em;
    }

    .page-header-image {
        height: 15.7em;
    }

    .page-header-image-archive {
        height: 9em;
    }

    .content-wrapper,
    .content-wrapper-branches,
    .vp-related-posts,
    .vp-related-posts .content-divider,
    .company-archive-description-widget,
    .content-wrapper-contact-page {
        margin-bottom: 6em;
    }

    .vp-sidebar-categories {
        margin-bottom: 6em;
        margin-left: auto;
        margin-right: auto;
    }

    .content-wrapper-contact-page {
        column-gap: 6em;
        row-gap: 6em;
    }

    .content-wrapper {
        column-gap: 3em;
        row-gap: 3em;
    }

    .contact-info-container, .contact-info-blocks {
        gap: 3em;
        display: flex;
        flex-direction: column;
    }

    .contact-info-wrapper img {
        min-width: 180px;
    }

    .contact-info-head > .contact-info-image {
        flex: 0 0 40%;
        min-width: 0;
    }

}

/* ----- DIVI font sizes for whole website */

h1, h2, h3, h4, h5, h6 {
    color: var(--vp-dark-color, #333);
    padding-bottom: 0.4em;
    line-height: 1em;
    font-weight: 500;
    font-family: var(--vp-font, 'Inter', Arial, Helvetica, sans-serif) !important;
}

 /* Mobile (default) Styles */
h1, .vp-divi-page-header {
    font-size: 26px !important;
    line-height: 1.2em !important;
    letter-spacing: 0.5px !important; 
    padding-bottom: 0!important;
    font-weight: 900!important;
}

.vp-divi-header-extra-large {
    font-size: 25px !important;
    line-height: 1.2em !important;
    letter-spacing: 0.5px !important; 
    font-weight: 900!important;
}

.page-header-title h1 {
    font-size: 26px;
    margin: auto;
    color: #FFFFFF!important;
    text-align: center;
    text-shadow: 0em 0em 0.5em rgba(0, 0, 0, 0.75);
    font-weight: 700;
    padding-bottom: 0px;
}

h2, .vp-divi-header-big {
    font-size: 21px !important;
    line-height: 1.2em !important;
    letter-spacing: 0.5px !important; 
    font-weight: 900!important;
}

.vp-divi-header-medium {
    font-size: 18px !important;
    line-height: 1.2em !important;
    letter-spacing: 0.5px !important; 
    font-weight: 700!important;
}

h3, .vp-divi-header-small {
    font-size: 17px !important;
    line-height: 1.2em !important;
    letter-spacing: 0.5px !important;
    font-weight: 900!important;
}

h4, h5, .vp-divi-sub-text {
    font-size: 16px !important;
    line-height: 1.2em !important;
    letter-spacing: 0.5px !important;
    font-weight: 900!important;
}

.vp-divi-sub-text-two {
    font-size: 16px !important;
    line-height: 1.2em !important;
    letter-spacing: 0.5px !important;
    font-weight: 700!important;
}

.vp-post-content h3 {
    padding-bottom: 0px!important;
    color: var(--vp-dark-color, #333);
    margin-top: -0.25em;
    font-size: 17px !important;
    line-height: 1.4em !important;
    letter-spacing: 0.5px !important;
    font-weight: 700!important;
}

.vp-divi-text-big {
    font-size: 15px !important;
    line-height: 1.6em !important;
    letter-spacing: 0px !important;
}

.vp-post-content p, .vp-post-content ul {
    font-size: 16px !important;
    line-height: 1.6em !important;
    letter-spacing: 0px !important;
    padding-top: 0.25em;
    margin-bottom: -0.25em;
}

.vp-divi-text-small {
    font-size: 14px !important;
    line-height: 1.4em !important;
    letter-spacing: 0px !important;
}

/* In het vragenblok staat een heel antwoord in deze stijl, geen bijschrift van
   één regel. Met 1.4 stond dat strakker op elkaar dan alle andere lopende tekst
   op de site (1.6); in een kaart met ruime witruimte valt dat op. */
.vp-faq .vp-divi-text-small {
    line-height: 1.6em !important;
}

/* Breadcrumbs ([breadcrumbs] shortcode). Er was nog geen enkele styling voor,
   dus de shortcode kwam als kale alinea op de pagina.

   Het kruimelpad staat in de banner, direct onder de H1, op een donkere foto.
   Eén kleur voor het hele pad: lichtgrijs. Dat leest rustig weg onder de kop
   zonder ermee te concurreren, terwijl de merkkleur wegvalt tegen de rode
   gradient en donkergrijs in de foto verdwijnt. Links en de huidige pagina
   krijgen bewust dezelfde kleur — twee tinten in zo'n kort regeltje oogt
   onrustig; de onderstreping bij hover maakt duidelijk genoeg wat klikbaar is.

   De marges zijn krap gehouden omdat de banner er niet merkbaar hoger van mag
   worden: alleen een kleine kop-ruimte onder de titel, niets eronder. */
.vp-breadcrumbs {
    font-size: 13px;
    line-height: 1.3em;
    /* Een maatje dikker dan de omringende tekst: op de donkere bannerfoto
       verdween het pad anders in de achtergrond. */
    font-weight: 700;
    color: #d0d0d0;
    /* Volledig in kapitalen, net als de bovenkop eronder. Die twee regels horen
       als één kopje te lezen en dat lukt beter als ze dezelfde vorm hebben; de
       kleur is al gelijk (#d0d0d0).

       De letterafstand hoort er bij en is niet cosmetisch: kapitalen zonder
       extra spatiëring lopen tegen elkaar aan. 0.09em is exact de waarde van de
       bovenkop, dus de twee regels krijgen hetzelfde ritme.

       Wat bewust WEL verschilt: 13px tegen 14px en gewicht 700 tegen 800. Zo
       blijft het pad ondergeschikt aan de paginanaam eronder — gelijk van vorm,
       niet gelijk van rang. */
    text-transform: uppercase;
    letter-spacing: 0.09em;
    text-align: inherit;   /* volgt de centrering van de banner */
    /* Het pad staat bovenaan de banner, dus alleen ruimte eronder. Krap
       gehouden: het pad en de bovenkop eronder horen als één kopje te lezen,
       niet als twee losse regels.

       De padding hoort er expliciet bij. Dit is een <p>, en Divi geeft elke
       alinea `padding-bottom: 1em` — hier 13 pixels, bovenop de marge. Gemeten
       stond er 27 pixels tussen de twee tekstregels; met de padding eruit en
       een kleine marge blijft daar ongeveer 5 van over.

       Onderin wél een halve em: zonder die ruimte plakte het pad tegen de
       bovenkop of de titel eronder (DV, 22-09-2026). Met !important, want
       Divi's `p:not(.has-background):last-of-type { padding-bottom: 0 }` is
       specifieker dan een enkele klasse en won het anders. */
    padding: 0 0 0.5em !important;
    /* Staat het pad alleen (geen bovenkop eronder), dan is de negatieve marge
       hieronder niet nodig: die kneep de halve em weer dicht. */
    /* Van 0.15em via -0.1em naar -0.4em: gemeten stond er 10px tussen de
       onderkant van het pad en de kapitalen van de bovenkop, nu bijna 7 — de
       twee regels lezen daarmee als één kopje (DV, 20-09-2026). Negatief mag
       hier, want de ruimte die overblijft komt niet uit deze marge maar uit de
       regelhoogte van beide regels (1.3em en 1.2em) — die laat onder de
       kapitalen lucht staan die je optisch als een gat ziet. Aan de regelhoogte
       zelf zitten we niet: die bepaalt ook of het pad netjes afbreekt op een
       smal scherm. */
    margin: 0 0 -0.4em;
}

/* Zonder bovenkop eronder telt alleen de halve em die hierboven is gezet. */
.vp-banner__top > .vp-breadcrumbs:last-child {
    margin-bottom: 0;
}

/* Nooit een schaduw op het pad, ook niet geërfd. `text-shadow` is een
   erfelijke eigenschap, en de vacaturebanner zet er een op zijn omhulsel
   (.page-header-title). Zonder deze regel krijgt het kruimelpad daar alsnog
   diepte terwijl het op de andere banners plat is — precies het verschil dat
   we hier weghalen. */
.vp-breadcrumbs,
.vp-breadcrumbs a,
.vp-breadcrumbs > span {
    text-shadow: none;
}

/* De span omvat de hele reeks; flex houdt de pijltjes op dezelfde regel als de
   tekst en laat het pad netjes afbreken op smalle schermen. */
.vp-breadcrumbs > span {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: inherit;
    gap: 0.15em;
}

/* Het pijltje. Iets kleiner dan de tekst en met een vaste doos, zodat de
   kruimels op een gelijke onderlinge afstand staan. */
.vp-breadcrumbs__pijl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 0.75em;
    height: 0.75em;
    opacity: 0.75;
    /* Het pijltje stond een pixel te laag: de flexregel centreert het op de
       hele regelhoogte, en die loopt onder de kapitalen door (het pad staat in
       kapitalen, dus er is geen staartletter die de onderkant opvult). Deze
       lichte lift zet het midden van de pijl op het midden van de letters
       (DV, 20-09-2026). */
    transform: translateY(-0.1em);
}

.vp-breadcrumbs__pijl svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.vp-breadcrumbs a {
    color: #d0d0d0;
    /* De onderstreping zat eerder op text-decoration met een doorzichtige
       kleur. Bij hover sprong hij weg zodra de tekst opnieuw werd getekend, en
       op de flex-regel viel hij helemaal buiten de link. Een border op een
       inline-block hangt vast aan de doos zelf en blijft dus staan. */
    text-decoration: none;
    display: inline-block;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: border-color 0.25s ease, color 0.25s ease;
}

/* Muis eroverheen: alleen helderder worden, geen streepje. Het pad staat in
   een banner en een lijntje onder één kruimel leest daar als een fout
   (DV, 22-09-2026). */
.vp-breadcrumbs a:hover {
    color: #fff;
}

/* Toetsenbord: wél een streep. Kleur alleen is geen zichtbare focusindicatie —
   wie tabt moet kunnen zien waar hij staat. */
.vp-breadcrumbs a:focus-visible {
    color: #fff;
    border-bottom-color: #fff;
}

/* Het kruimelpad staat sinds 30-08-2026 bovenaan de banner en niet meer tussen
   de bovenkop en de H1. De regel die hier stond koppelde de onderruimte aan een
   voorafgaande bovenkop; die volgorde bestaat niet meer, dus de marge staat nu
   gewoon op .vp-breadcrumbs zelf. */


/* -------------------------------------------------------------------------
   Getallenteller — [vp_counter]
   -------------------------------------------------------------------------
   De maten komen 1-op-1 van de Divi-module die hij vervangt: 54px, gewicht
   800, kleur #333333, regelhoogte 1em. Op tablet en telefoon zakt het getal
   mee zodat drie tellers naast elkaar blijven passen.

   Het procentteken en andere toevoegingen staan op dezelfde regel als het
   getal en krijgen bewust geen eigen grootte: "78%" hoort als één getal te
   lezen, niet als een getal met een klein tekentje erachter. */
.vp-counter {
    display: flex;
    align-items: baseline;
    /* Geen tussenruimte: "78%" hoort als één geheel te lezen. */
    gap: 0;
    font-size: 38px;
    font-weight: 800;
    line-height: 1em;
    color: var(--vp-dark-color, #333333);
    /* Het getal verspringt tijdens het optellen van breedte omdat cijfers niet
       even breed zijn. Met tabelcijfers staat het stil. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.vp-counter--left   { justify-content: flex-start; }
.vp-counter--center { justify-content: center; }
.vp-counter--right  { justify-content: flex-end; }

@media (min-width: 500px) {
    .vp-counter { font-size: 44px; }
}

@media (min-width: 981px) {
    .vp-counter { font-size: 54px; }
}


/* -------------------------------------------------------------------------
   Divi: rijen met gelijke kolomhoogtes op telefoon en tablet
   -------------------------------------------------------------------------
   Zet je in Divi "kolomhoogtes gelijktrekken" aan, dan krijgt de rij de klasse
   `et_pb_equal_columns` en daarmee `display: flex`. Vanaf 980px zet Divi de
   kolommen op `width: 100%` zodat ze onder elkaar komen — maar de rij blijft
   een flexbox zonder `flex-wrap`, en flex-items krimpen dan gewoon mee. Vier
   kolommen van 100% werden zo vier kolommen van een kwart.

   Gemeten op /werkgevers/vacaturemarketing/ bij 375px: vier kaarten van 77px
   naast elkaar, met woorden die middenin afbreken ("versp illen").

   De ontbrekende schakel is `flex-wrap`. Met wrap erbij vallen kolommen die
   niet meer op een regel passen naar de volgende, precies zoals de zwevende
   opmaak van Divi op mobiel bedoelt: kwart-kolommen komen in 2x2 te staan,
   halve en hele kolommen onder elkaar.

   En dat lost meteen het tweede euvel op waar dit blok om begonnen was: binnen
   één regel rekt flexbox alle kolommen tot de hoogte van de langste, dus de
   onderranden van twee kaarten naast elkaar lopen weer gelijk. Met de zwevende
   opmaak van Divi kon dat niet — daar verschilden ze 19 tot 39 pixels. */
@media (max-width: 980px) {
    .et_pb_row.et_pb_equal_columns,
    .et_pb_row_inner.et_pb_equal_columns,
    .et_pb_section.et_pb_equal_columns > .et_pb_row {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }
}


/* -------------------------------------------------------------------------
   Getallenteller: optisch midden, niet rekenkundig midden
   -------------------------------------------------------------------------
   De kolom rondom een teller krijgt zijn padding hier vastgezet. Divi zegt aan
   beide kanten dezelfde waarde, maar rendert 21px boven tegen 18,9px onder, en
   dat verschilt per breekpunt — dus niet tegen die waarden aan duwen maar ze
   overschrijven. De `:has()` selecteert precies die kolommen: `vp-counter-module`
   staat als module_class op de Divi-tekstmodule om de teller heen.

   Boven en onder gelijk maken is alleen niet hetzelfde als er gelijk uitzien.
   Gemeten in het gerenderde font (canvas, actualBoundingBox) bij een getal van
   54px: binnen zijn eigen regel houdt het getal 6,7px leeg boven de cijfers,
   terwijl het bijschrift eronder nog maar 0,7px overhoudt — de staart van de
   "p" in "per maand" loopt tot vlak tegen de onderrand. Met gelijke padding
   staat er dus 6 pixels meer lucht boven het blok dan eronder, en zakt het
   optisch naar beneden.

   De helft van dat verschil gaat daarom van boven naar onder: 18/22 op
   telefoon, 27/33 vanaf tablet. Bij een kleiner getal schaalt de holte mee, dus
   de correctie ook. Dit is dezelfde reden waarom er elders in dit bestand
   oneven paddings van 5px staan. */
.et_pb_column:has(> .vp-counter-module) {
    padding-top: 18px !important;
    padding-bottom: 22px !important;
}

/* De omlijning van zo'n tellerblok. Die stond per kolom in de pagina-instelling
   vastgeschreven: op vacatureposter het ene blok wit en het andere in de
   merkkleur, en in de gegenereerde pagina's allebei wit. Wit is hard op een
   donkere foto, en per pagina ingesteld betekent dat je het op elke pagina
   opnieuw moet goed zetten.

   Nu één tint voor alle tellerblokken op alle drie de sites: hetzelfde recept
   als het vlak achter een formulier, maar dan 30% in plaats van 7% — donker
   genoeg om rustig te blijven. Bij een rode merkkleur houdt
   vp_form_tint_color() het neutraal grijs, dus het wordt nergens lichtroze.

   !important en twee klassen diep, omdat Divi de kleur uit de pagina zelf ook
   met !important wegschrijft (DV, 23-09-2026). */
.et_pb_column:has(> .vp-counter-module) {
    border-color: var(--vp-outline-tint, #c3c3c3) !important;
    /* Het eerste blok: grijs met een vleug merkkleur erdoor, zodat het bij de
       site hoort zonder de aandacht te pakken. Browsers zonder color-mix()
       houden de regel hierboven — grijs, en dat is een prima uitkomst. */
    border-color: color-mix(in srgb, var(--vp-brand-light, var(--vp-brand-color)) 30%, var(--vp-outline-tint, #c3c3c3)) !important;
}

/* Elk vólgend tellerblok in dezelfde rij krijgt de lichte merkkleur helemaal.
   Twee tellers naast elkaar lezen zo als een opbouw: de eerste noemt een
   aantal, de tweede het resultaat. Op vacatureposter stond dat verschil al in
   de pagina zelf; sinds die kleuren uit de stylesheet komen was het weg — het
   tweede blok werd net zo grijs als het eerste (DV, 24-09-2026). */
.et_pb_column:has(> .vp-counter-module) ~ .et_pb_column:has(> .vp-counter-module) {
    border-color: var(--vp-brand-light, var(--vp-brand-color)) !important;
}

/* Getal en bijschrift stonden met hun regelvakken tegen elkaar aan. Optisch
   scheelde dat maar 10px, te weinig om als twee losse waarden te lezen. */
.et_pb_column:has(> .vp-counter-module) > .vp-counter-module:not(:last-child) {
    margin-bottom: 4px !important;
}

/* Na het gelijktrekken van de padding bleef er 4 pixels boven de teller en 2
   onder het bijschrift over: eigen marges die Divi per module wegschrijft, met
   !important. Twee klassen diep in de selector is genoeg om daar overheen te
   gaan — nu bepaalt alleen de padding van de kolom nog de ruimte, en die is
   aan beide kanten gelijk. */
.et_pb_column:has(> .vp-counter-module) > .et_pb_module {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media (min-width: 768px) {
    .et_pb_column:has(> .vp-counter-module) {
        padding-top: 27px !important;
        padding-bottom: 33px !important;
    }

    .et_pb_column:has(> .vp-counter-module) > .vp-counter-module:not(:last-child) {
        margin-bottom: 6px !important;
    }
}

/* -------------------------------------------------------------------------
   Offerte-opties: regels die afbreken blijven gecentreerd
   -------------------------------------------------------------------------
   `.usp-header` is een flexbox met justify-content: center, maar met
   text-align: left. Zolang de tekst op één regel past valt dat niet op; breekt
   hij af, dan gaat de tweede regel links staan terwijl de eerste gecentreerd
   blijft. Gemeten op 375px: de kolom is 203 breed en drie van de items zijn
   207 tot 228 breed, dus die braken af.

   Het icoontje kreeg daarbij flex-shrink: 1 en werd dus óók nog samengedrukt.
   Met een vaste doos blijft het vinkje of kruisje op zijn maat. */
.usp-header {
    text-align: center;
}

.usp-header .svg-icon {
    flex: 0 0 auto;
}


/* -------------------------------------------------------------------------
   Onzichtbare kop
   -------------------------------------------------------------------------
   Voor pagina's die geen eigen H1 in de vormgeving hebben (het tag-archief,
   de bedankpagina). De kop hoort in de documentstructuur thuis, maar mag de
   bestaande opmaak niet veranderen — vandaar wegclippen in plaats van
   display:none of visibility:hidden: die twee halen hem ook bij schermlezers
   weg, en dan is het toevoegen zinloos.

   Krijgt hij focus via het toetsenbord, dan komt hij gewoon in beeld. */
.vp-visueel-verborgen {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.vp-visueel-verborgen:focus,
.vp-visueel-verborgen:focus-within {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Tablet Styles */
@media (min-width: 500px) {
    h1, .vp-divi-page-header {
        font-size: 32px !important;
    }

    .page-header-title h1 {
        font-size: 28px;
    }

    .vp-divi-header-extra-large {
        font-size: 26px !important;
    }

    h2, .vp-divi-header-big {
        font-size: 23px !important;
    }

    .vp-divi-header-medium {
    font-size: 21px !important;
}

    h3, .vp-divi-header-small {
        font-size: 19px !important;
    }

    h4, h5, .vp-divi-sub-text {
        font-size: 17px !important;
    }
}

/* Desktop Styles */
@media (min-width: 768px) {
    h1, .vp-divi-page-header {
        font-size: 48px !important;
    }

    .vp-divi-header-extra-large {
        font-size: 34px !important;
    }

    .page-header-title h1 {
        font-size: 40px;
    }

    h2, .vp-divi-header-big {
        font-size: 28px !important;
    }

    .vp-divi-header-medium {
    font-size: 23px !important;
}

    h3, .vp-divi-header-small {
        font-size: 21px !important;
    }

    h4, h5, .vp-divi-sub-text {
        font-size: 17px !important;
    }

    .vp-divi-sub-text-two {
        font-size: 17px !important;
    }

    .vp-divi-text-big {
    font-size: 16px !important;
    }

    .vp-divi-text-small {
        font-size: 15px !important;
    }
}


/** ============================================================================
 *  CONTENT CATEGORY / FEATURED WIDGET — shared 5-block image grid
 *  Used by the recruitment branch/company widgets ([vp_top_branches] /
 *  [vp_top_companies], VerharenATS) AND the services-site content widgets
 *  ([vp_featured_pages] / [vp_featured_blogs], core). Moved here from the module
 *  so every site can style it. Type-specific tints: -branches/-companies
 *  (recruitment), -pages/-blogs (services).
 *  ==========================================================================*/

.vp-top-categories {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

.vp-category-block {
    position: relative;
    /* Three across, two rows. It used to be five across with the sixth tile
       hidden (`:nth-child(6) { display: none }`), so desktop visitors silently
       lost one item. Six across showed them all but left ~157px per tile, and
       titles such as "Kleine VvE (tot 10 appartementen)" were cut off with "…"
       — even "Middelgrote VvE" lost its last letters. 3 × 2 shows all six and
       gives every title room for one line from tablet width up. */
    width: calc((100% - 3em) / 3);
    margin-right: 1.5em;
    margin-bottom: 1.5em;
    background: white;
}

.vp-category-block i {
    color: var(--vp-accent-strong, var(--vp-accent-color));
    vertical-align: middle;
    margin-left: 0.1em;
}

.vp-category-block a {
    text-decoration: none;
    color: inherit;
    border: none;
    border-radius: 2em;
    overflow: hidden;
    display: block;
    width: 100%;
    margin-bottom: 0;
}

.vp-category-block a:hover {
    box-shadow: 0 0 0.5em 0px var(--vp-brand-color);
}

.vp-category-image {
    position: relative;
    height: 6em;
    overflow: hidden;
}

.vp-category-image .branch-image,
.vp-category-image .company-image,
.vp-category-image .featured-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vp-category-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    pointer-events: none;
    transition: opacity 0.5s ease-in-out, background-color 0.3s ease-in-out;
    -webkit-transition: opacity 0.5s ease-in-out, background-color 0.3s ease-in-out;
    z-index: 1;
    opacity: 1;
}

/* Light tint (branches / pages)
   Blijft een lichte sluier — de tekst erop is donker en moet leesbaar blijven —
   maar met een vleugje merkkleur in de hoek, hetzelfde idioom als de banner.
   De witte laag houdt dezelfde dekking, dus het contrast met de tekst
   verandert niet. */
.category-image-branches::before,
.category-image-pages::before {
    background: radial-gradient(
                    ellipse at top left,
                    rgba(var(--vp-brand-rgb, 255, 255, 255), 0.16) 0%,
                    rgba(var(--vp-brand-rgb, 255, 255, 255), 0) 70%
                ),
                rgba(255, 255, 255, 0.65);
}

.vp-category-block:hover .category-image-branches::before,
.vp-category-block:hover .category-image-pages::before {
    background: radial-gradient(
                    ellipse at top left,
                    rgba(var(--vp-brand-rgb, 255, 255, 255), 0.16) 0%,
                    rgba(var(--vp-brand-rgb, 255, 255, 255), 0) 70%
                ),
                rgba(255, 255, 255, 0.9);
}

/* Dark tint (companies / blogs)
   Stond op puur zwart en had daarmee niets met de huisstijl te maken. Nu de
   diep getinte merkkleur (--vp-brand-shade-rgb, berekend in core/function.php)
   — dezelfde tint als de schaduwkant van de banner. Die is lichter dan zwart,
   dus de tegel wordt er niet donkerder van; hij krijgt alleen de
   kleurtemperatuur van het merk. Dekking en hover blijven gelijk. */
.category-image-companies::before,
.category-image-blogs::before {
    background: rgba(var(--vp-brand-shade-rgb, 0, 0, 0), 0.45);
}

.vp-category-block:hover .category-image-companies::before,
.vp-category-block:hover .category-image-blogs::before {
    background: rgba(var(--vp-brand-shade-rgb, 0, 0, 0), 0.70);
}

/* Center text in the image */
.vp-category-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
    width: 100%;
}

.vp-category-info h3 {
    /* Wrap instead of truncating: a long title reads as two balanced lines,
       and only text beyond that is clipped. It used to be one line with "…",
       which hid the end of most multi-word titles. */
    white-space: normal;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.15;
    max-width: 100%;
    /* De witte (of zwarte) gloed onder de titel valt binnen hetzelfde vak dat
       de regelbegrenzing hierboven afknipt. Zonder ruimte eromheen knipt de
       browser de gloed recht af en zie je een lichte rechthoek om de tekst
       staan (DV, 20-09-2026). De ruimte is 0.5em — ruimer dan de 0.35em waar
       de gloed op uitdooft — en wordt met een even grote negatieve marge weer
       weggenomen, zodat de titel even hoog blijft en op dezelfde plek staat. */
    padding: 0.5em 0.6em;
    /* Alleen verticaal terugnemen: een negatieve zijmarge zou de titel breder
       maken dan de tegel, en dan knipt de tegel een lange naam af. */
    margin: -0.5em 0;
}

.category-info-branches h3,
.category-info-pages h3 {
    text-shadow: 0em 0em 0.6em #FFFFFF;
    color: var(--vp-dark-color, black);
}

.category-info-companies h3,
.category-info-blogs h3 {
    text-shadow: 0em 0em 0.6em black;
    color: white;
}

.vp-category-info p {
    margin: 0;
    font-weight: 700;
    line-height: 1.1 !important;
    font-style: italic;
    padding-left: 0.25em;
    padding-right: 0.25em;
}

.category-info-branches p,
.category-info-pages p {
    text-shadow: 0em 0em 0.6em #FFFFFF;
    color: #666;
}

.category-info-companies p,
.category-info-blogs p {
    text-shadow: 0em 0em 0.6em black;
    color: #e4e4e4;
}

/* Responsive styles */
@media screen and (min-width: 768px) {
    .vp-category-block:nth-child(3n) {
        margin-right: 0;
    }
}

@media screen and (max-width: 980px) {
    .vp-category-block {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 767px) {
    .vp-category-block:nth-child(1), .vp-category-block:nth-child(2), .vp-category-block:nth-child(3) {
        margin-bottom: 1em;
    }
    .vp-category-block:nth-child(4), .vp-category-block:nth-child(5), .vp-category-block:nth-child(6) {
        margin-bottom: 0em;
    }
    .vp-category-block {
        width: calc((100% - 3em) / 3);
        margin-right: 1.5em;
    }
    .vp-category-block:nth-child(3n) {
        margin-right: 0;
    }
}

@media screen and (max-width: 499px) {
    .vp-category-block:nth-child(1), .vp-category-block:nth-child(2), .vp-category-block:nth-child(3), .vp-category-block:nth-child(4) {
        margin-bottom: 1em;
    }
    .vp-category-block:nth-child(5), .vp-category-block:nth-child(6) {
        margin-bottom: 0em;
    }
    .vp-category-block {
        width: calc(50% - 0.5em);
    }
    .vp-category-block:nth-child(odd) {
        margin-right: 1em;
    }
    .vp-category-block:nth-child(even) {
        margin-right: 0;
    }
    .vp-category-image {
        height: 5em;
    }
}

@media screen and (max-width: 350px) {
    .vp-category-block:nth-child(1), .vp-category-block:nth-child(2), .vp-category-block:nth-child(3), .vp-category-block:nth-child(4), .vp-category-block:nth-child(5) {
        margin-bottom: 0.5em;
    }
    .vp-category-block:nth-child(6) {
        margin-bottom: 0em;
    }
    .vp-category-block {
        width: 100%;
        margin-right: 0;
    }
    .vp-category-block:nth-child(5) {
        margin-left: 0;
    }
    .vp-category-block:nth-child(odd) {
        margin-right: 0em;
    }
    .vp-category-image {
        height: 4em;
    }
}

@media screen and (min-width: 981px) {
    .vp-category-block {
        margin-bottom: 0em;
    }
}

/* Row spacing for the 3 × 2 grid from tablet up: the two rules above (<=980px
   and >=981px) zero the bottom margin, written for a single row. The first
   row now needs its gap back; the last row keeps none. */
@media screen and (min-width: 768px) {
    .vp-category-block:nth-child(-n+3) {
        margin-bottom: 1.5em;
    }
}

/* Phones: tiles are ~160px wide, so allow a third line and give the tile the
   height for it (checked at 360-767px against the longest live title). Below
   351px the tiles are full width: two lines at most, and the 4em tile needs a
   little more height to hold them. */
@media screen and (max-width: 350px) {
    .vp-category-image {
        min-height: 5em;
    }
}

@media screen and (min-width: 351px) and (max-width: 767px) {
    .vp-category-info h3 {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
    /* 6em in plaats van 7.2em: de tegels waren daarmee een stuk hoger dan
       voorheen, terwijl ook een titel van drie regels plus "vacatures" er
       ruim in past (DV, 20-09-2026). */
    .vp-category-image {
        min-height: 6em;
    }
}

/* ---------------------------------------------------------------------------
 * iOS Safari zooms into a text field on focus whenever the field's font-size is
 * below 16px. This targets TOUCH devices only — via (hover:none)+(pointer:coarse)
 * — so the desktop layout is completely untouched, and pins the form inputs to
 * 16px there so tapping a field no longer zooms/pans the form. The rendered
 * label/spacing structure is unchanged; only the input's own text hits the 16px
 * threshold the browser needs.
 * ------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    textarea,
    select {
        font-size: 16px;
    }
}

/* -------------------------------------------------------------------------
 * ZWEVENDE CONTACTKNOP (WhatsApp / bellen) — core/contact-bar.php
 *
 * Bewust GEEN eigen knopstijl: de knoppen zijn gewone `.vp-btn`'s met de
 * bestaande kleurklassen (.btn-whatsapp / .btn-phone / .btn-primary /
 * .btn-black) en dezelfde `.vp-icon-text` + `.svg-icon` opbouw als de
 * contactknoppen in de recruiterwidget en de meescrollende solliciteerknop
 * (.btn-fixed-buttons) op de vacaturepagina. Vorm, radius (2em), letterdikte
 * (900), 16px tekst en de 0 0 9px schaduw komen dus rechtstreeks uit .vp-btn.
 * Hieronder staat alleen de POSITIONERING en het formaat.
 *
 * z-index 990: onder de cookiemelding (9999), de vacature-knoppenbalk (999) en
 * de sticky header (998), zodat de knop nooit over een melding heen valt.
 *
 * De klassen staan in de UCSS-allowlist in core/litespeed-integration.php —
 * zonder die vermelding strippen ze eruit, omdat de knop pas in de footer
 * wordt uitgeschreven.
 * ------------------------------------------------------------------------- */
.vp-contactbar {
    --vp-cb-size: 48px;
    --vp-cb-icon: 22px;
    --vp-cb-offset: 20px;

    position: fixed;
    z-index: 990;
    display: flex;
    gap: 0.75em;
    /* De wrapper vangt geen kliks af; alleen de knoppen zelf. */
    pointer-events: none;
    bottom: calc(var(--vp-cb-offset) + env(safe-area-inset-bottom, 0px));
}

.vp-contactbar .vp-btn {
    pointer-events: auto;
    height: var(--vp-cb-size);
    width: auto;
}

.vp-contactbar .vp-icon-text i {
    font-size: var(--vp-cb-icon);
    vertical-align: middle;
}

/* Icoon náást tekst: dezelfde 6px die de andere knoppen met tekst aanhouden. */
.vp-contactbar__btn--labelled .vp-icon-text i {
    margin-right: 6px;
}

/* Twee knoppen stapelen verticaal, met de EERSTE knop onderaan — het dichtst
   bij de duim. Vandaar column-reverse. */
.vp-contactbar--right {
    right: var(--vp-cb-offset);
    flex-direction: column-reverse;
    align-items: flex-end;
}

.vp-contactbar--left {
    left: var(--vp-cb-offset);
    flex-direction: column-reverse;
    align-items: flex-start;
}

/* Stijl: alleen icoon. Een vierkante .vp-btn wordt door zijn eigen
   border-radius: 2em vanzelf rond — geen aparte radius nodig. */
.vp-contactbar--round .vp-btn {
    width: var(--vp-cb-size);
    min-width: var(--vp-cb-size);
    max-width: var(--vp-cb-size);
    padding: 0;
}

/* Stijl: icoon + tekst */
.vp-contactbar--pill .vp-btn {
    max-width: none;
    padding: 0 1.15em;
}

/* Stijl: brede knop onderaan — exact de maatvoering van .btn-fixed, de
   meescrollende solliciteerknop op de vacaturepagina. */
.vp-contactbar--wide {
    left: 50%;
    right: auto;
    width: 100%;
    transform: translateX(-50%);
    flex-direction: column-reverse;
    align-items: center;
    gap: 0.75em;
}

.vp-contactbar--wide .vp-btn {
    width: calc(100% - 4em);
    max-width: 450px;
    padding: 0 1.15em;
    justify-content: center;
}

/* Kleurvarianten die nog niet als knopklasse bestonden. "Herkenbaar" gebruikt
   .btn-whatsapp / .btn-phone uit de template, maar vol ingekleurd in plaats van
   getint: de getinte variant (20% dekking) staat op de vacaturepagina op een
   witte widget — zwevend over willekeurige pagina-inhoud is doorschijnend
   onleesbaar. De hover volgt wél het template-idioom: schaduw vervaagt. */
.vp-contactbar--native .btn-whatsapp {
    background-color: rgb(var(--vp-color-whatsapp));
    color: #ffffff;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.2);
}

.vp-contactbar--native .btn-phone {
    background-color: rgb(var(--vp-color-phone));
    color: #ffffff;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.2);
}

.vp-contactbar--brand .vp-btn {
    background-color: var(--vp-brand-color);
    color: #ffffff;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.2);
}

.vp-contactbar--brand .vp-btn:hover,
.vp-contactbar--brand .vp-btn:focus {
    /* Witte tekst op deze vulling — zie .btn-primary:hover. */
    background-color: var(--vp-accent-strong, var(--vp-accent-color));
}

.vp-contactbar--custom .vp-btn {
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.2);
}

.vp-contactbar--native .vp-btn:hover,
.vp-contactbar--native .vp-btn:focus,
.vp-contactbar--brand .vp-btn:hover,
.vp-contactbar--brand .vp-btn:focus,
.vp-contactbar--custom .vp-btn:hover,
.vp-contactbar--custom .vp-btn:focus {
    box-shadow: 0em 0em 9px 1px rgba(0, 0, 0, 0);
}

/* Pas tonen na X pixels scrollen (data-scroll-after). Zonder JS blijft de knop
   verborgen — daarom zet contact-bar.php deze klasse alleen wanneer er ook
   daadwerkelijk een scriptje wordt meegestuurd. */
.vp-contactbar--deferred {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.vp-contactbar--deferred.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Aandachtspulse — een uitdijend randje in de knopkleur zelf. */
.vp-contactbar--pulse .vp-btn {
    position: relative;
}

.vp-contactbar--pulse .vp-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 0 0 currentColor;
    animation: vp-contactbar-pulse 2.4s ease-out infinite;
}

@keyframes vp-contactbar-pulse {
    0%   { box-shadow: 0 0 0 0 currentColor; opacity: 0.55; }
    70%  { box-shadow: 0 0 0 14px currentColor; opacity: 0; }
    100% { box-shadow: 0 0 0 0 currentColor; opacity: 0; }
}

/* Apparaatkeuze. 980 px is dezelfde grens die Divi en de rest van deze
   stylesheet aanhouden voor "mobiel/tablet". */
@media (min-width: 981px) {
    .vp-contactbar--mobile { display: none; }
}

@media (max-width: 980px) {
    .vp-contactbar--desktop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .vp-contactbar--pulse .vp-btn::after { animation: none; opacity: 0; }
}

@media print {
    .vp-contactbar { display: none; }
}

/* -------------------------------------------------------------------------
 * LOGOSTRIP — [vp_logo_strip] (core/logo-strip.php)
 *
 * Vervangt de losse Divi image-modules met klasse .vp-divi-jobboard-button.
 * Maatvoering is 1-op-1 overgenomen van die versie: pill van 40px hoog,
 * border-radius 2em, logo als background-image op 80%, gecentreerd, en de
 * grijze schaduw die bij hover de merkkleur aanneemt.
 *
 * Kolommen en tussenruimte volgen dezelfde breakpoints als de Divi-rij:
 *   < 500px    3 naast elkaar, 0.5em ruimte
 *   500-767px  3 naast elkaar, 1.25em ruimte
 *   768-980px  6 naast elkaar, 0.75em ruimte
 *   >= 981px   6 naast elkaar, 1.25em ruimte
 * Het aantal is instelbaar via de shortcode (--vp-logos / --vp-logos-sm).
 * ------------------------------------------------------------------------- */
.vp-logo-strip {
    --vp-logos: 6;
    --vp-logos-sm: 3;
    --vp-logo-gap: 0.5em;

    display: grid;
    grid-template-columns: repeat(var(--vp-logos-sm), 1fr);
    gap: 1em var(--vp-logo-gap);
    align-items: center;
    width: 100%;
    /* De introzin erboven eindigt op een dubbele punt en stond er met 0 pixels
       tegenaan geplakt, terwijl hetzelfde patroon verderop op de homepage —
       "Wij werven o.a. in deze vakgebieden:" gevolgd door de categorietegels —
       21 pixels lucht heeft. Dezelfde afstand, zodat de twee blokken hetzelfde
       lezen. Staat hier en niet in een eigen regel erboven, want deze
       margin-shorthand zou die anders weer op nul zetten. */
    margin: 21px auto 0;
}

/* En eronder dezelfde 21 pixels, zodat de strip precies tussen de twee
   tekstblokken in staat. Die ruimte kwam uit de rij eronder — op de homepage
   van vacatureposter 1.25em, oftewel 17,5px, dus 3,5px krapper dan erboven, en
   dat zie je (DV, 23-09-2026).

   Alleen als er ook echt een rij volgt. Staat de strip onderaan een sectie,
   zoals op DionysosDigital waar de merkband er direct achteraan komt, dan
   bepaalt die sectie de ruimte en blijft alles zoals het was. */
.et_pb_row:has(.vp-logo-strip) + .et_pb_row,
.et_pb_row:has(.vp-divi-jobboard-button) + .et_pb_row {
    margin-top: 21px !important;
}

.vp-logo-strip__item {
    display: block;
    width: 100%;
    height: 40px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 80%;
    /* Een <a> zonder tekst heeft anders geen hoogte. */
    box-sizing: border-box;
}

/* Een item zonder logo toont zijn eigen naam: dezelfde pill, tekst in plaats
   van een tekening. Zo kan een site een rij begrippen laten zien — op vve-care
   de onderdelen van het ledenportaal — zonder logo's van anderen te gebruiken,
   waar je toestemming voor nodig hebt (DV, 23-09-2026).

   Twee regels mogen: de pill is 40px hoog, dus twee regels van 14px passen er
   net in. Langer dan dat wordt afgekapt in plaats van dat de rij scheef gaat
   lopen. */
.vp-logo-strip__item--tekst {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.6em;
    font-family: var(--vp-font, 'Inter', Helvetica, Arial, Lucida, sans-serif);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    color: var(--vp-accent-strong, var(--vp-brand-color));
}

.vp-logo-strip__item--tekst > span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    /* Een lang woord als "Vergaderingen" past op een smal scherm niet op één
       regel. Liever afbreken met een streepje dan de laatste letters afkappen;
       de pagina staat op lang="nl", dus hyphens: auto breekt op de goede plek. */
    overflow-wrap: break-word;
    hyphens: auto;
}

a.vp-logo-strip__item {
    cursor: pointer;
}

span.vp-logo-strip__item {
    cursor: default;
}

.vp-logo-strip__item:focus-visible {
    outline: 3px solid var(--vp-brand-color);
    outline-offset: 3px;
}

@media (min-width: 500px) {
    .vp-logo-strip { --vp-logo-gap: 1.25em; }
}

@media (min-width: 768px) {
    .vp-logo-strip {
        --vp-logo-gap: 0.75em;
        grid-template-columns: repeat(var(--vp-logos), 1fr);
        row-gap: 0.75em;
    }
}

@media (min-width: 981px) {
    .vp-logo-strip { --vp-logo-gap: 1.25em; }
}

/* -------------------------------------------------------------------------
 * PAGINABANNER — [vp_page_banner] (core/page-banner.php)
 *
 * Vervangt de handgemaakte Divi-kopsectie. Alle waarden hieronder komen uit de
 * Divi-export van de bestaande pagina's, zodat de banner er identiek uitziet:
 *
 *   background_color_gradient_type            = elliptical
 *   background_color_gradient_direction_radial = top left
 *   background_color_gradient_stops            = #e02b20 0% | rgba(0,0,0,α) X% | rgba(0,0,0,β) 100%
 *   background_color_gradient_overlays_image   = on
 *   custom_padding  desktop 5.6em||6em · tablet 4.7em||5em · phone 3.7em||4em
 *
 * De dekking van de twee zwartstops, de positie van de middelste stop, de
 * achtergrondpositie, de hoogte en de tekstbreedte verschillen per pagina en
 * komen daarom als CSS-variabelen binnen.
 *
 * De H1 hergebruikt bewust `.vp-divi-page-header`: in Divi heeft die module
 * geen desktop-lettergrootte, die komt al uit deze stylesheet. Door dezelfde
 * klasse te gebruiken is de koptekst automatisch identiek.
 *
 * Divi's breakpoints zijn 980px (tablet) en 767px (telefoon).
 * ------------------------------------------------------------------------- */
.vp-banner {
    /* De H1 is het enige dat voor de hoogte meetelt (zie .vp-banner__inner);
       het kruimelpad, de bovenkop en de knop hangen in deze ruimte. Vandaar
       dat ze ruimer is dan de oude waarden, met de hoogte van de banner
       vrijwel gelijk aan wat hij was (DV, 22-09-2026).

       Boven en onder gelijk: zo staat de witte kop op élke pagina precies op
       de halve hoogte, met of zonder kruimelpad (DV, 23-09-2026). Zie
       vp_banner_height_map() in page-banner.php, dat deze waarden meestal
       overschrijft — daar staat ook waarom de eerdere 44/56-verdeling eruit
       is. */
    --vp-banner-pad: 9em;
    --vp-banner-pad-t: 7.6em;
    --vp-banner-pad-p: 6.4em;
    /* De maat die nú geldt. page-banner.php zet --vp-banner-pad* als inline
       stijl op de banner, en een inline waarde kan een media query niet
       overschrijven; deze schakelaar staat daarom in de stylesheet. Alles wat
       met de bannerruimte rekent, rekent hiermee. */
    --vp-banner-padnu: var(--vp-banner-pad);
    /* Hoe ver de knop onderin van de onderrand blijft: even veel als de
       bovenkop bovenin van de bovenrand. Die stond op 74px en de knop op 58,
       en dat verschil zag je (DV, 24-09-2026). Als deel van de bannerruimte,
       zodat het op een tablet en telefoon meeschaalt — daar is de hele banner
       korter en zou een vaste 74px de knop tegen de kop aan duwen. */
    --vp-banner-inset: calc(var(--vp-banner-padnu) * 0.59);
    --vp-banner-mid: 0.21;
    --vp-banner-mid-at: 60%;
    --vp-banner-end: 0.56;
    --vp-banner-pos: center 28%;
    --vp-banner-width: var(--vp-site-max, 1320px);

    position: relative;
    width: 100%;
    /* De banner liep als enige blok door tot de schermrand. Op een breed scherm
       werd de foto daardoor flink uitgerekt en stond hij los van de rest van de
       pagina, die op 1200px stopt — dezelfde maat als .vp-inner-container in de
       kop en .vp-footer-container in de voet. Nu houdt de banner die maat aan,
       met de onderhoeken afgerond op 2em zoals elk ander blok op de site. De
       bovenhoeken blijven recht: daar sluit de banner aan op de kopbalk
       (DV, 23-09-2026). overflow: hidden stond er al, dus de foto en de
       gradient worden door de ronding meegesneden. */
    max-width: var(--vp-banner-max, 1200px);
    margin-inline: auto;
    border-radius: 0 0 2em 2em;
    padding: var(--vp-banner-padnu) 0;
    /* Bewust GEEN effen achtergrondkleur: die lag als een dekkend vlak onder de
       foto en kwam tevoorschijn zodra de afbeelding nog niet geladen was of
       ontbrak. De Divi-sectie heeft hem ook niet (background_enable_color=off);
       de gradient zorgt voor de kleur. */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: var(--vp-banner-pos);
    overflow: hidden;
}

/* De foto zit in een eigen laag onder de gradient. Divi doet dit met twee
   background-images op één element; hier is het een aparte laag, omdat de
   blur-variant alleen de foto mag vervagen en niet de gradient of de tekst. */
/* De bannerfoto is een <img>, geen achtergrond, zodat WordPress er srcset op
   kan zetten en de browser het formaat kiest dat bij het scherm past.
   object-fit/object-position doen precies wat background-size/-position deden:
   de foto vult de banner, wordt niet vervormd, en dezelfde uitsnede blijft
   gelden — de --vp-banner-pos die per pagina instelbaar is. Visueel identiek. */
.vp-banner__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--vp-banner-pos);
    z-index: 0;
}

.vp-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* De hoeken (de schaduwkant) waren puur zwart en stonden daarmee los van de
       huisstijl. Ze gebruiken nu een diep getinte versie van de ingestelde
       merkkleur (--vp-brand-shade-rgb, berekend in core/function.php). Die tint
       is lichter dan zwart, dus de banner wordt er niet donkerder van — alleen
       warmer. De dekking per stop blijft per pagina instelbaar.

       De hoek zelf staat altijd op de donkere van de twee huisstijlkleuren en
       niet op de lichte: die laatste hoort bij de knoppen, waar hij de aandacht
       moet trekken. In een achtergrond deed datzelfde felle rood juist mee in
       de strijd om aandacht met de kop erboven. Hier stond --vp-accent-color,
       en dat is alleen op VacaturePoster de donkere; op VvE-Care en
       DionysosDigital kreeg de hoek daardoor juist de lichte kleur
       (DV, 23-09-2026). */
    background: radial-gradient(
        ellipse at top left,
        var(--vp-brand-dark, var(--vp-accent-color)) 0%,
        rgba(var(--vp-brand-shade-rgb, 0, 0, 0), var(--vp-banner-mid)) var(--vp-banner-mid-at),
        rgba(var(--vp-brand-shade-rgb, 0, 0, 0), var(--vp-banner-end)) 100%
    );
    z-index: 1;
}

/* Blur-variant: de vacature-zoekpagina toont dezelfde foto verderop nog een
   keer, en scherp naast scherp leest als een dubbeling. Zelfde blur-waarde als
   .blurred-banner op de bestaande vacaturebanner (5px).
   De lichte opschaling voorkomt de doorschijnende randen die een blur anders
   aan de buitenkant van het element geeft. */
.vp-banner--blur .vp-banner__bg {
    filter: blur(5px);
    transform: scale(1.04);
}

/* Alleen de H1 staat in de stroom. Het kruimelpad met de bovenkop hangt
   erboven, de knop eronder, allebei in de ruimte die de padding openlaat. Zo
   staat de witte kop altijd precies in het midden van de banner: een pagina
   met kruimelpad en een pagina zonder krijgen dezelfde kop op dezelfde hoogte,
   en een knop duwt hem niet omhoog (DV, 22-09-2026). */
.vp-banner__inner {
    position: relative;
    z-index: 2;
    /* Divi's rij is 80% breed vanaf 981px en 90% daaronder. */
    width: 80%;
    max-width: var(--vp-banner-width);
    margin: 0 auto;
    text-align: center;
}

.vp-banner__top {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
}

.vp-banner__action {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
}

/* Bovenkop: in Divi een tekstmodule met gewicht 800 in hoofdletters,
   marge -5px boven (module_class vp-divi-header-small, text_font "|800||on"). */
/* ── Bovenkop ──────────────────────────────────────────────────────────────
 * Stond op 21px gewicht 900 wit — precies de opmaak van de H1 eronder, waardoor
 * de twee om aandacht vochten en de boodschap niet uitsprong. Nu kleiner en
 * lichter, met drie varianten die de rangorde meteen duidelijk maken.
 * De klasse .vp-divi-header-small is er in de PHP afgehaald: die forceerde de
 * oude maat met !important.
 * -------------------------------------------------------------------------- */
.vp-banner__kicker {
    margin: 0 0 0.9em;
    text-align: center;
    line-height: 1.2;
}

.vp-banner__kicker span {
    display: inline-block;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    /* Dezelfde grijstint als het kruimelpad erboven (#d0d0d0), niet wit. Zo
       vormen kruimelpad en bovenkop samen één rustige groep en is de H1 het
       enige witte element in de banner — die springt er dan uit zonder dat hij
       groter hoeft. De streepjes ernaast blijven de merkkleur; dat is het
       kleuraccent dat de regel toch onderscheidt. */
    color: #d0d0d0;
}

/* Streepje links en rechts van de tekst. Dikte 4px en volledig ronde uiteinden
   — dezelfde maat en afronding als de grote horizontale lijnen
   (.content-divider en .heading-underline::after), zodat het één familie is.
   Kleur: de merkkleur uit de instellingen, net als die lijnen. */
.vp-banner__kicker span {
    display: inline-flex;
    align-items: center;
    /* Ruimte tussen streepje en tekst. Van 0.9em naar 1.4em: bij 14px gaat dat
       van 12,6 naar 19,6 pixels per zijde. De hele regel wordt daarmee 275px
       breed in een banner van 1024px, dus er is ruimte over — en het streepje
       (30,8px) blijft breder dan de afstand, waardoor het een lijn blijft en
       geen zwevend blokje wordt. In em, dus het schaalt mee met de tekst. */
    gap: 1.4em;
    /* Geen schaduw. Het kruimelpad erboven heeft er ook geen, en sinds die twee
       regels dezelfde kleur, kapitalen en letterafstand hebben, viel het op dat
       alleen deze diepte kreeg. De schaduw blijft waar hij nodig is: op de H1,
       die wit en groot over de foto valt. Deze regel is klein, grijs en staat
       in de rustige bovenhoek van de banner — daar leest hij zonder. */
    text-shadow: none;
}

/* De twee streepjes naast de bovenkop staan op de lichte van de twee
   huisstijlkleuren. Ze liggen op een donkere bannerfoto, en daar gaat de
   donkere variant in op. Op VacaturePoster was dat toevallig al goed (de
   merkkleur ís daar de lichte), op VvE-Care en DionysosDigital niet
   (DV, 23-09-2026). */
.vp-banner__kicker span::before,
.vp-banner__kicker span::after {
    content: "";
    width: 2.2em;
    height: 4px;
    border-radius: 1em;
    background: var(--vp-brand-light, var(--vp-brand-color));
}

@media (max-width: 767px) {
    .vp-banner__kicker span { font-size: 13px; }
    .vp-banner__kicker span::before,
    .vp-banner__kicker span::after { width: 1.4em; }
}

/* De streepjes hangen aan de bovenkop en stonden dus op het midden van alleen
   die ene regel. Staat er een kruimelpad boven ("Over ons > Werkgevers >"), dan
   klopt dat optisch niet: de twee regels vormen samen één blok, en de streepjes
   horen op het midden daarvan.

   Opgemeten op /werkgevers/vacaturemarketing/: het kruimelpad loopt van 192 tot
   211, de bovenkop van 213 tot 232. Samen dus 192-232, met het midden op 212,
   terwijl de streepjes op 222,5 zaten — 10,5 pixel te laag. Dat is de helft van
   de hoogte van het kruimelpad plus de tussenruimte, en bij een bovenkop van
   14px precies 0,75em, dus schaalt het mee over de breekpunten.

   Alleen waar dat kruimelpad er ook echt staat: op de homepage en de
   contactpagina is er geen, en daar moeten de streepjes blijven waar ze zijn. */
.vp-banner__top:has(> .vp-breadcrumbs) .vp-banner__kicker span::before,
.vp-banner__top:has(> .vp-breadcrumbs) .vp-banner__kicker span::after {
    transform: translateY(-0.75em);
}

/* Kaartblokken op de werkgeverspagina's: soepel meebewegen bij hover. De
   overgang staat hier en niet in het hover-blok, zodat hij ook geldt als de muis
   weer wegloopt. De opacity-overgang komt van .vp-divi-lazy-load (uitgesteld
   laden) en moet blijven staan — vandaar dat hij hier herhaald wordt in plaats
   van overschreven. De timing is die van .transition-animation, de curve die de
   rest van de site ook gebruikt. */
/* De tweede selector is voor dezelfde kaarten op VvE-Care en DionysosDigital.
   Daar komen ze uit cards4() in de generator, en die zet wél de ronde hoeken
   maar geen randkleur — dus geeft Divi de kolom geen .et_pb_with_border en
   pakte de regel hierboven ze niet. Wat ze allemaal delen is de merkband:
   .vp-merkband op een kwart-kolom is precies dit kaartje (DV, 23-09-2026). */
.et_pb_column_1_4.et_pb_with_border,
.et_pb_column_1_4.vp-merkband {
    transition: opacity 0.3s ease-in-out,
                transform 0.7s cubic-bezier(0, 1.11, 1, 0.84);
}

@media (prefers-reduced-motion: reduce) {
    .et_pb_column_1_4.et_pb_with_border,
    .et_pb_column_1_4.et_pb_with_border:hover,
    .et_pb_column_1_4.vp-merkband,
    .et_pb_column_1_4.vp-merkband:hover {
        transform: none;
        transition: opacity 0.3s ease-in-out;
    }
}

.vp-banner__title {
    /* custom_margin="0.15em|-0.5em|0.5em|-0.5em" uit de Divi-export: de titel
       steekt een halve em buiten de rij, waardoor lange koppen net iets later
       afbreken. Weglaten geeft een ander regelafbreekpunt. Geen bovenmarge:
       de bovenkop brengt zijn eigen ruimte eronder mee. */
    /* Geen boven- of ondermarge: de H1 is het enige dat de hoogte van
       .vp-banner__inner bepaalt, en een marge zou hem uit het midden duwen.
       De ruimte naar de knop eronder staat op .vp-banner__action. */
    margin: 0 -0.5em;
    color: #ffffff !important;
    text-align: center;
    /* Divi's header_text_shadow_style="preset3", opgemeten op de live pagina:
       24px blur bij 48px tekst = 0.5em, op 75% zwart. */
    text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.75);
}

/* De bannerkop volgde `h1, .vp-divi-page-header` en werd daarmee 48px op
   desktop, tegen 28px voor de kopjes in de content eronder. Dat verschil was te
   groot: de banner schreeuwde en de rest van de pagina viel weg. Nu een stap
   erboven in plaats van een sprong — 34px tegen 28px. Alleen de bannerkop
   verandert; andere H1's op de site (blogtitels bijvoorbeeld) blijven zoals ze
   waren. De !important is nodig omdat de basisregel er ook een heeft.

   De vacaturebanner (.page-header-title h1) staat hier sinds 30-08-2026 bij:
   die had een eigen schaal die op desktop naar 40px liep, waardoor een
   vacaturekop merkbaar groter was dan de kop op de homepage of contactpagina.
   Eén schaal voor beide bannertypes, op één plek. */
.vp-banner__title,
.page-header-title h1 {
    font-size: 26px !important;
}

@media (min-width: 500px) {
    .vp-banner__title,
    .page-header-title h1 {
        font-size: 30px !important;
    }
}

@media (min-width: 768px) {
    .vp-banner__title,
    .page-header-title h1 {
        font-size: 34px !important;
    }

    /* De kop mocht de volle breedte van de rij gebruiken (1152px, plus de
       negatieve zijmarges 1186px). De langste kop die we hebben is 946px breed,
       dus paste alles nog net op één regel en kwam er nooit een afbreekpunt —
       terwijl een kop over twee regels hier beter staat.

       21em is bij 34px 714 pixels. Opgemeten koppen: homepage 946, werkgevers
       924 en vacaturemarketing 819 breken daarmee naar twee regels; werving &
       selectie (611), Open sollicitatie (278) en Contact (137) blijven op één.
       De grens staat in em, dus hij schuift mee als de tekstgrootte verandert.

       `text-wrap: balance` verdeelt die twee regels gelijk over elkaar in
       plaats van een volle regel met een kort staartje eronder. Daarmee komt de
       regelafbreking uit de opmaak in plaats van uit een harde enter in de
       tekst, en blijft de kop kloppen als hij ooit herschreven wordt. */
    .vp-banner__title,
    .page-header-title h1 {
        max-width: 21em;
        margin-left: auto;
        margin-right: auto;
        text-wrap: balance;
    }
}

/* Zonder bovenkop staat de titel strak in het midden (homepage/contact). */
.vp-banner__inner > .vp-banner__title:first-child {
    margin-top: 0;
    margin-bottom: 0;
}

/* De knop hing onder de kop en hield dus afstand tot de kóp, niet tot de rand
   van de banner. Hoe hoog de knop was bepaalde daarmee hoeveel ruimte er onder
   hem overbleef: op vacatureposter 58px, terwijl de bovenkop bovenin 74px van
   de rand af stond. Nu staat de afstand tot de onderrand vast
   (--vp-banner-inset) en past de ruimte boven de knop zich aan; de banner
   krijgt daarvoor iets meer onderruimte, zie hieronder (DV, 24-09-2026). */
.vp-banner__action {
    top: auto;
    bottom: calc(var(--vp-banner-inset) - var(--vp-banner-padnu) - var(--vp-banner-extra, 0px));
}

/* Die extra onderruimte: genoeg om de knop op --vp-banner-inset van de rand te
   zetten én de 2em lucht tussen kop en knop te houden (ruimte onder = afstand
   tot de rand + hoogte knop + die 2em). Alleen banners mét een knop groeien;
   een banner zonder knop blijft precies zoals hij was. De kop staat daardoor
   een halve regel boven het rekenkundige midden — onzichtbaar op een banner van
   300px, en het alternatief was hem 30px langer maken. */
.vp-banner:has(.vp-banner__action) {
    --vp-banner-extra: 1.5em;
    padding-bottom: calc(var(--vp-banner-padnu) + var(--vp-banner-extra));
}

/* Staat er alleen een kop in de banner — geen kruimelpad, geen knop — dan is
   die ruimte er voor niets. Op een contactpagina staat er één woord in een
   banner van 265px hoog; dat leest als een gat vóór de pagina begint. Zulke
   banners gaan daarom naar 72% van hun maat. De contactpagina's van alle drie
   de sites vallen hieronder, en verder alles wat net zo kaal is — geen
   instelling per pagina nodig (DV, 24-09-2026). */
.vp-banner:not(:has(.vp-banner__action)):not(:has(.vp-banner__top)) {
    --vp-banner-padnu: calc(var(--vp-banner-pad) * 0.72);
}

@media (max-width: 980px) {
    .vp-banner:not(:has(.vp-banner__action)):not(:has(.vp-banner__top)) {
        --vp-banner-padnu: calc(var(--vp-banner-pad-t) * 0.72);
    }
}

@media (max-width: 767px) {
    .vp-banner:not(:has(.vp-banner__action)):not(:has(.vp-banner__top)) {
        --vp-banner-padnu: calc(var(--vp-banner-pad-p) * 0.72);
    }
}

/* Het zoekformulier op de homepage staat op max. 600px. */
.vp-banner__action--search {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Twee knoppen naast elkaar (werkgeverspagina), onder elkaar op mobiel. */
.vp-banner__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    justify-content: center;
    max-width: 650px;
    margin: 0 auto;
}

.vp-banner__buttons > * {
    flex: 1 1 260px;
    max-width: 320px;
}

@media (max-width: 980px) {
    .vp-banner { --vp-banner-padnu: var(--vp-banner-pad-t); }
    .vp-banner__inner { width: 90%; }
}

@media (max-width: 767px) {
    .vp-banner { --vp-banner-padnu: var(--vp-banner-pad-p); }

    /* De zoekbalk in de banner valt op een telefoon over twee regels, en dat
       hoort ook: het invoerveld heeft 240px nodig om leesbaar te blijven en de
       knop is 206px breed, dus samen passen ze pas vanaf ~460px. Die twee
       regels pasten niet meer in de onderruimte en de knop werd door
       overflow:hidden afgesneden — opgemeten op de homepage van vacatureposter
       bij 375px: 35px eraf. Hier dus extra ruimte onderin (DV, 24-09-2026). */
    .vp-banner:has(.vp-banner__action--search) { --vp-banner-extra: 6.5em; }

    /* Op een telefoon is die halve em die de kop buiten de rij steekt geen
       winst maar verlies: de kop stond op 7px van de schermrand terwijl de
       tekst eronder op 20px begint (DV, 20-09-2026). Op tablet en desktop is er
       ruimte zat en blijft de uitstek staan, zodat lange koppen daar op
       dezelfde plek afbreken als voorheen. */
    .vp-banner__title {
        margin-left: 0;
        margin-right: 0;
    }
}

/* -------------------------------------------------------------------------
 * BEOORDELINGEN — [vp_reviews] (core/reviews.php)
 *
 * Donkere sectie met matglazen kaarten. Sluit aan op de huidige reviewsectie,
 * die ook al een donkere foto met een rood-zwarte sluier gebruikt — alleen zijn
 * de kaarten nu doorschijnend in plaats van vlak wit, waardoor de foto erachter
 * blijft meedoen.
 *
 * Maatvoering (padding 1.5em, border-radius 2em) is die van de widgets op de
 * vacaturepagina, zodat het blok in dezelfde kaartfamilie zit.
 *
 * De sterren gebruiken de bestaande .review-stars (merkkleur, 1.5em); nieuw is
 * dat een niet-gevulde ster zichtbaar blijft in een gedempt wit.
 * ------------------------------------------------------------------------- */
.vp-reviews {
    --vp-reviews-cols: 3;
    position: relative;
    width: 100%;
    padding: 3em 1.5em;
    /* Dezelfde band als .vp-merkband, inclusief de sluier van --vp-band-donker;
       hieronder staat een eigen, donkerdere waarde voor de gekleurde sterren. */
    background:
        linear-gradient(rgba(0, 0, 0, var(--vp-band-donker, 0.18)),
                        rgba(0, 0, 0, var(--vp-band-donker, 0.18))),
        linear-gradient(120deg,
            var(--vp-dark-color, #1d2327) 0%,
            var(--vp-brand-color-dark, var(--vp-brand-color)) 55%,
            var(--vp-brand-color) 100%);
    overflow: hidden;
}

/* Geen foto meer achter het blok: dezelfde band als .vp-merkband (verloop in de
   huisstijlkleuren met bubbels, zie daar), zodat het per site vanzelf klopt. */
.vp-reviews__heading {
    position: relative;
    z-index: 2;
    margin: 0 auto 1.5em;
    color: #ffffff;
}

/* Flexbox in plaats van grid: bij een onvolledige laatste rij (4 reviews in
   3 kolommen) centreert de overgebleven kaart vanzelf, terwijl een grid hem
   links laat plakken. De breedte per kaart blijft gelijk aan wat het aantal
   kolommen zou geven. */
.vp-reviews__grid {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1.5em;
    max-width: var(--vp-site-max, 1320px);
    margin: 0 auto;
}

.vp-review {
    flex: 0 1 calc((100% - (var(--vp-reviews-cols) - 1) * 1.5em) / var(--vp-reviews-cols));
    min-width: 260px;
}

.vp-review {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0;
    padding: 1.5em;
    border-radius: 2em;
    color: #ffffff;
    /* Matglas: doorschijnend wit met een blur op wat erachter ligt. De
       achtergrondkleur blijft staan als een browser backdrop-filter niet doet,
       zodat de tekst altijd leesbaar is. */
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* Bewust klein gehouden: de foto is bijzaak, de beoordeling zelf is waar het
   om gaat. Groter dan dit trekt de aandacht weg van de tekst eronder. */
.vp-review__photo {
    width: 64px;
    height: 64px;
    border-radius: 20em;
    background: rgba(255, 255, 255, 0.15) center/cover no-repeat;
    margin-bottom: 0.75em;
    border: 2px solid rgba(255, 255, 255, 0.25);
}

/* Iets meer lucht onder de sterren dan de gedeelde .review-stars geeft (0.5em).
   De tekst eronder heeft zelf al halve regelruimte aan beide kanten, waardoor
   het gat naar de naam optisch groter oogt dan het gat naar de sterren. Met
   0.6em (12.6px bij 21px sterren) komen beide gaten op ~15.6px uit en zijn ze
   visueel gelijk. Bewust gescoped op .vp-review, zodat de sterren in de oude
   Divi-code-module niet meeverschuiven. */
.vp-review .review-stars {
    margin-bottom: 0.6em;
}

/* Niet-ingevulde ster blijft staan, gedempt: zo lees je "4 van de 5" en niet
   "4 van de 4". .review-stars zelf zet de merkkleur voor de gevulde sterren. */
.vp-review .review-stars .is-empty {
    color: rgba(255, 255, 255, 0.28);
}

/* De beoordeling is het zwaartepunt van de kaart: schuingedrukt, zodat het
   als citaat leest en losstaat van de naam eronder. */
.vp-review__text {
    flex: 1;
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: 300;
    font-style: italic;
    color: #ffffff;
}

.vp-review__person {
    display: flex;
    flex-direction: column;
    margin-top: 0.8em;
}

/* Naam en bedrijf juist rechtop — dat zet ze apart van het citaat erboven. */
.vp-review__name {
    font-weight: 900;
    font-style: normal;
}

.vp-review__subtitle {
    font-weight: 700;
    font-style: normal;
    opacity: 0.85;
}

@media (max-width: 980px) {
    .vp-reviews__grid { --vp-reviews-cols: min(var(--vp-reviews-cols), 2); }
    .vp-review { flex-basis: calc((100% - 1.5em) / 2); }
}

@media (max-width: 767px) {
    .vp-reviews { padding: 2em 1em; }
    .vp-review { flex-basis: 100%; max-width: 420px; }
    /* Onder elkaar mag de ruimte tússen twee beoordelingen niet hetzelfde zijn
       als de ruimte binnen één beoordeling — anders lijkt de foto van de
       volgende bij de naam van de vorige te horen. Naast elkaar (desktop) valt
       die verwarring niet op, want daar staat de scheiding links/rechts. */
    .vp-reviews__grid { gap: 3em; }
}

/* ── Beoordelingen in de oude Divi-opbouw ───────────────────────────────────
   De drie live sites hebben hun reviewsectie nog met Divi-modules: per
   beoordeling één derde-kolom met een ronde foto, de sterren, het citaat en
   daaronder naam + functie. Onder elkaar geeft Divi elke kolom dezelfde 30px
   onderruimte als de modules binnen die kolom hebben, en dan hoort een foto
   optisch bij de naam erboven in plaats van bij die eronder (DV, 15-09-2026).

   De kolom is niet aan een eigen klasse te herkennen — de enige betrouwbare
   ankerpunt is de sterrenrij die de plugin erin zet. Vandaar :has(). Een
   browser zonder :has() laat de huidige afstand staan; dat is geen defect,
   alleen geen verbetering. Tot 980px, want bij twee kolommen naast elkaar
   stapelt hij ook al.
   ------------------------------------------------------------------------- */
@media (max-width: 980px) {
    /* Met !important: de reviewrij staat op de drie sites in een rij met
       gelijke kolomhoogtes (.et_pb_equal_columns), en Divi zet de onderruimte
       van zulke kolommen met !important op 0. Gemeten op 20-09-2026 stonden de
       beoordelingen daardoor zonder enige tussenruimte onder elkaar. */
    .et_pb_row .et_pb_column:has(.review-stars) {
        margin-bottom: 3.5em !important;
    }

    /* De laatste heeft niets onder zich om van te scheiden; die extra ruimte
       maakt alleen het gat naar de volgende sectie groter. */
    .et_pb_row .et_pb_column:has(.review-stars):last-child {
        margin-bottom: 0 !important;
    }
}


/* -------------------------------------------------------------------------
 * BLOG — onderwerpen en de call-to-action (core/blog-categories.php)
 *
 * De lijst met onderwerpen staat in de rechterkolom van een bericht, op de
 * plek van het oude kaartje "Artikelinformatie". Klein en rustig: het is een
 * wegwijzer, geen inhoud. Het huidige onderwerp is vet, zodat de lezer ziet
 * waar hij is.
 *
 * De call-to-action onderaan is dezelfde kaart als elders op de site — witte
 * kaart, 2em rond, zachte schaduw — met de zwarte knop die ook onder de
 * vinkjeskaarten staat (DV, 23-09-2026).
 * ------------------------------------------------------------------------- */
.vp-blog-category-list {
    list-style: none;
    margin: 0.75em 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}

.vp-blog-category-list a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75em;
    color: #666;
    text-decoration: underline 2px solid transparent;
    transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

.vp-blog-category-list a:hover,
.vp-blog-category-list a:focus-visible {
    color: var(--vp-accent-strong, var(--vp-brand-color));
    text-decoration-color: currentColor;
}

.vp-blog-category-list .is-huidig > a {
    color: var(--vp-dark-color, #333);
    font-weight: 900;
}

/* Het aantal berichten: een rustig bolletje, niet een tweede kolom tekst. */
.vp-blog-category-count {
    flex: 0 0 auto;
    min-width: 1.6em;
    padding: 0 0.4em;
    border-radius: 1em;
    background: rgba(var(--vp-brand-rgb, 0, 0, 0), 0.1);
    color: var(--vp-dark-color, #333);
    font-size: max(0.8em, 11px);
    font-weight: 700;
    text-align: center;
}

/* De filterkaart naast het blogoverzicht: dezelfde kaartvorm als het
   vacaturefilter, met de onderwerpen eronder. */
.vp-blog-filter h4 {
    margin: 1.5em 0 0;
}

.vp-blog-filter form {
    margin-bottom: 0;
}

.vp-blog-filter .vp-btn {
    margin-top: 0.75em;
}

/* Geen gerelateerde berichten: zoekbalk plus de weg naar alle berichten. */
.vp-blog-leeg {
    width: 90%;
    max-width: 900px;
    margin: 0 auto 4em;
    text-align: center;
}

.vp-blog-leeg p {
    margin: 0 0 1.25em;
}

.vp-blog-zoekform {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75em;
    margin: 0 0 1.25em;
}

.vp-blog-zoekform .form-control {
    flex: 1 1 18em;
    min-width: 0;
    max-width: 26em;
}

.vp-blog-zoekform .vp-btn,
.vp-blog-leeg > .vp-btn {
    flex: 0 0 auto;
    margin: 0 auto;
}

.vp-blog-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5em;
    width: 90%;
    max-width: 900px;
    margin: 0 auto 4em;
    padding: 2em;
    border-radius: 2em;
    background: #ffffff;
    box-shadow: 0 0 1em -4px #999;
}

.vp-blog-cta-tekst {
    flex: 1 1 18em;
    min-width: 0;
}

.vp-blog-cta h2 {
    margin: 0 0 0.25em;
    padding-bottom: 0;
}

.vp-blog-cta p {
    margin: 0;
}

.vp-blog-cta .vp-btn {
    flex: 0 0 auto;
    margin: 0;
}

@media (max-width: 499px) {
    .vp-blog-cta {
        padding: 1.5em;
        text-align: center;
        justify-content: center;
    }
    .vp-blog-cta .vp-btn {
        margin: 0 auto;
    }
}

/* -------------------------------------------------------------------------
 * TEAM — [vp_team] (core/team.php)
 *
 * Schaalt mee met de teamgrootte: het aantal kolommen komt binnen als
 * --vp-team-cols en wordt in PHP al begrensd op het aantal personen, zodat
 * drie kolommen met twee mensen geen gat laten vallen. De contactknoppen
 * centreren zichzelf, dus één of vier knoppen zien er allebei goed uit.
 *
 * De knoppen houden hun eigen herkenbare kleuren via .btn-phone /
 * .btn-whatsapp / .btn-email / .btn-linkedin — dezelfde als het contactblok.
 * ------------------------------------------------------------------------- */
.vp-team {
    width: 100%;
    max-width: var(--vp-site-max, 1320px);
    margin: 0 auto;
}

.vp-team__heading {
    margin: 0 auto 1.5em;
}

/* Maten één-op-één opgemeten aan de oorspronkelijke Divi-kaarten op de
   contactpagina (DV, 17-09-2026), op 1400, 1000, 800, 600, 480 en 375 px:
     vanaf 1200px  vier kaarten naast elkaar, 2em ertussen (279px per kaart), foto 8em
     981 – 1199px  vier naast elkaar, 1em ertussen
     500 – 980px   twee naast elkaar, hoogstens 300px breed, 2em ertussen, foto 7em
     400 – 499px   twee naast elkaar, 1em ertussen
     tot 400px     onder elkaar, 300px breed
   Een kaart is altijd even breed als in een rij van vier, ook als er maar één,
   twee of drie personen zijn: de rij staat dan gecentreerd. */
.vp-team__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1em;
}

.vp-team__member {
    flex: 0 1 calc((100% - 3em) / 4);
    max-width: 300px;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5em;
    border-radius: 2em;
    box-shadow: 0 0 1em -4px #999;
}

/* Eén persoon: dan is een kaart van 279px zonde. Er staat niets naast, dus de
   breedte van een rij-van-vier levert alleen maar afbrekende regels op — op
   dionysosdigital.eu brak "Techniek én bedrijfsprocessen" over twee regels
   terwijl er 900px leeg naast stond (DV, 23-09-2026). Vanaf 380px breekt er
   niets meer; 480px geeft ruimte voor een pluspunt of functietitel van normale
   lengte en houdt het een kaart in plaats van een balk. De data-count zet
   core/team.php zelf op .vp-team. */
.vp-team[data-count="1"] .vp-team__member {
    flex-basis: 100%;
    max-width: 480px;
}

.vp-team__photo {
    flex: 0 0 auto;
    width: 8em;
    height: 8em;
    border-radius: 15em;
    background: #f1f1f1 center/cover no-repeat;
    margin-bottom: 1.25em;
}

.vp-team__member .vp-divi-header-small {
    margin-top: -3px;
    width: 100%;
}

.vp-team__name {
    margin: 0;
    font-weight: 900;
    color: var(--vp-dark-color, #333);
}

/* Functieregel: cursief, 700, #666 — de maat komt van .vp-divi-sub-text-two. */
.vp-team__function {
    margin: -0.25em 0 0;
    padding-top: 0.15em;
    font-style: italic;
    color: #666;
}

/* De pluspunten vullen de resthoogte, zodat de knoppen in elke kaart op
   dezelfde lijn staan, ook als iemand minder pluspunten heeft. */
.vp-team__bullets {
    flex: 1;
    width: 100%;
    margin: 0.75em 0 0.85em;
    font-weight: 500;
    color: #666;
}

/* Breekt een pluspunt over twee regels ("Sales Management"), dan hoorden die
   twee regels bij elkaar te staan. De 1.6 van .vp-divi-text-big zette ze even
   ver uit elkaar als twee losse pluspunten (DV, 20-09-2026): regelafstand
   krap, en de lucht tússen de pluspunten komt van de marge eronder. */
.vp-team__bullets p {
    padding-bottom: 0;
    line-height: 1.25;
}

.vp-team__bullets p + p {
    margin-top: 0.35em;
}

/* Knoppen verdelen de breedte van de kaart gelijk (vier stuks: ±54px elk).
   Minder knoppen blijven gecentreerd en worden niet breder dan 150px. */
.vp-team__buttons {
    flex-wrap: nowrap;
    justify-content: center;
}

.vp-team__btn {
    flex: 1 1 0;
    min-width: 0;
    /* Smallere zijkanten dan een gewone knop: deze knoppen dragen alleen een
       pictogram, en met 1em ernaast bleef er minder ruimte over dan het icoon
       breed is. */
    padding-left: 0.5em;
    padding-right: 0.5em;
}

/* Het pictogram stond op 24px uit .widget-contact-buttons i — bijna even hoog
   als de knop zelf (40px), en omdat de knop in de teamkaart maar ~50px breed
   is, drukte `max-width: 100%` op de svg het ook nog horizontaal plat: een
   uitgerekt telefoontje in een volle knop (DV, 20-09-2026). Op 18px past het
   ruim binnen de knop en houdt het zijn verhouding. */
.vp-team__btn .svg-icon {
    font-size: 18px;
}

@media (min-width: 1200px) {
    .vp-team__grid { gap: 2em; }
    .vp-team__member { flex-basis: calc((100% - 6em) / 4); }
}

@media (max-width: 980px) {
    .vp-team__grid { gap: 2em; }
    .vp-team__member { flex-basis: calc((100% - 2em) / 2); }
    .vp-team__photo { width: 7em; height: 7em; }
}

@media (max-width: 499px) {
    .vp-team__grid { gap: 1em; }
    .vp-team__member { flex-basis: calc((100% - 1em) / 2); }
}

@media (max-width: 399px) {
    .vp-team__member { flex-basis: 100%; }
}

/* Op de telefoon werd de functieregel (16px uit .vp-divi-sub-text-two) bijna
   even groot als de naam erboven (17px), terwijl het een bijschrift is en geen
   kop (DV, 20-09-2026). !important omdat de maat in .vp-divi-sub-text-two ook
   zo staat. */
@media (max-width: 767px) {
    .vp-team__function {
        font-size: 14px !important;
        line-height: 1.3em !important;
    }
}


/* ── Blogartikel ───────────────────────────────────────────────────────────
   De tekstblokken van een bericht gebruiken dezelfde basis als een vacature
   (.vp-post-content p/ul: 16px, 1.6em). Een vacature bestaat uit korte blokken
   met een eigen kop; een artikel is één lang stuk met tussenkoppen, lijsten en
   soms een citaat of afbeelding. Dit regelt alleen de witruimte en de elementen
   die een vacature niet kent, zodat beide pagina's als familie lezen. */
.vp-post-content-article > *:first-child { margin-top: 0 !important; }
.vp-post-content-article > *:last-child { margin-bottom: 0 !important; }

.vp-post-content-article p,
.vp-post-content-image-text p {
    margin-bottom: 0;
    padding-top: 0;
}
.vp-post-content-article p + p,
.vp-post-content-article ul + p,
.vp-post-content-article ol + p,
.vp-post-content-image-text p + p { margin-top: 0.9em; }

/* Tussenkoppen: h2 als hoofdstuk, h3 zoals de blok-kopjes op een vacature. */
.vp-post-content-article h2 {
    margin: 1.6em 0 0.35em;
    padding-bottom: 0 !important;
    font-size: 20px !important;
    line-height: 1.3em !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px;
    color: var(--vp-dark-color, #333);
}
.vp-post-content-article h3 { margin: 1.3em 0 0.2em; }
.vp-post-content-article h4 {
    margin: 1.1em 0 0.15em;
    font-size: 16px;
    font-weight: 700;
    color: var(--vp-dark-color, #333);
}

/* Lijsten: het bolletje in de merkkleur komt van .vp-post-content ul li:before. */
.vp-post-content-article ul,
.vp-post-content-article ol {
    margin: 0.6em 0 0.2em;
    padding: 0 0 0 1.4em !important;
    font-size: 16px !important;
    line-height: 1.6em !important;
    list-style-position: outside;
}
.vp-post-content-article ul { list-style: none; }
.vp-post-content-article ul li { padding-left: 0; margin-bottom: 0.3em; }
.vp-post-content-article ul li:before { left: -0.75em; margin-left: 0; }
.vp-post-content-article ol { list-style: decimal; }
.vp-post-content-article ol li { margin-bottom: 0.3em; padding-left: 0.2em; }
.vp-post-content-article ol li::marker { color: var(--vp-brand-color); font-weight: 700; }
.vp-post-content-article ol li:before { content: none; }

.vp-post-content-article strong { color: var(--vp-dark-color, #333); }

/* Citaat: zelfde kader als de oneliner op een vacature — en dus ook hetzelfde
   verloop, zie daar voor het waarom van de twee achtergronden. */
.vp-post-content-article blockquote {
    margin: 1.4em 0;
    padding: 0.75em 1.5em;
    border: solid 4px transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        var(--vp-brand-gradient, var(--vp-brand-color, #e4e4e4)) border-box;
    border-radius: 2em;
    font-style: italic;
    color: #666;
}
.vp-post-content-article blockquote p { margin: 0; }

/* Afbeeldingen in de tekst: afgerond zoals de foto's elders op de pagina. */
.vp-post-content-article img,
.vp-post-content-article figure {
    max-width: 100%;
    height: auto;
    border-radius: 2em;
}
.vp-post-content-article figure { margin: 1.4em 0; }
.vp-post-content-article figcaption {
    margin-top: 0.5em;
    font-size: 14px;
    font-style: italic;
    color: #666;
    text-align: center;
}

.vp-post-content-article table {
    width: 100%;
    margin: 1.2em 0;
    border-collapse: collapse;
    font-size: 15px;
}
.vp-post-content-article th,
.vp-post-content-article td {
    padding: 0.55em 0.75em;
    border-bottom: 1px solid #e4e4e4;
    text-align: left;
}
.vp-post-content-article th { color: var(--vp-dark-color, #333); border-bottom-width: 2px; }

.vp-post-content-article hr {
    margin: 1.6em 0;
    border: 0;
    border-top: 4px solid #f1f1f1;
    border-radius: 2px;
}

/* De foto halverwege het artikel: iets hoger dan op een vacature, want de tekst
   ernaast is hier vaak maar één alinea. */
.vp-post-content-image-wrapper--blog .vp-post-content-image { min-height: 180px; }

/* De foto zonder tekst ernaast (artikel zonder tussenkoppen): liggend, volle breedte. */
.vp-post-content-image-wrapper--los .vp-post-content-image {
    max-width: 100%;
    min-width: 100%;
    min-height: 220px;
}

/* De link onder de contactknoppen van de auteur. */
.vp-blog-author-link { margin-top: 0.85em; }

@media (max-width: 767px) {
    .vp-post-content-article h2 { font-size: 18px !important; }
}


/* ── Merkband ──────────────────────────────────────────────────────────────
   Donkere sectie in de kleuren van de site: dezelfde band als de kop van het
   beheeroverzicht (donker → merk → accent, met een lichte cirkel rechtsboven).
   Vervangt de "bubbels"-foto's die per site als achtergrond onder de USP-rijen
   en de donkere secties stonden: die waren een afbeelding, dus niet instelbaar.
   Gebruik: sectie- of rijklasse `vp-merkband` in Divi, achtergrondfoto weg. */
/* Hoe donker de band wordt: een zwarte sluier over het verloop, 0 is niets en
   1 is zwart. Het verloop eindigt op de merkkleur zelf en die is licht genoeg
   om de witte tekst erop te laten verbleken — vooral rechts, waar de band het
   lichtst is (DV, 23-09-2026). Eén getal voor alle banden op alle drie de
   sites; per site bijstellen kan met een regel extra CSS:
   :root { --vp-band-donker: 0.25; } */
:root {
    --vp-band-donker: 0.18;
}

.vp-merkband {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(rgba(0, 0, 0, var(--vp-band-donker, 0.18)),
                        rgba(0, 0, 0, var(--vp-band-donker, 0.18))),
        linear-gradient(120deg,
            var(--vp-dark-color, #1d2327) 0%,
            var(--vp-brand-color-dark, var(--vp-brand-color)) 55%,
            var(--vp-brand-color) 100%);
}
.vp-merkband::after,
.vp-reviews::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    z-index: 0;
}
/* Divi gebruikt ::after op rijen en secties als onzichtbare clearfix
   (visibility:hidden, 0 bij 0) en laadt zijn CSS ná de onze; hier moet de laag
   juist gezien worden, vandaar !important. */
.et_pb_row.vp-merkband::after,
.et_pb_section.vp-merkband::after,
.et_pb_column.vp-merkband::after {
    display: block !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    line-height: normal;
}
/* De bubbels: lichte cirkels en ringen in verschillende maten, zoals op de foto's
   die hier eerst stonden. Elke plek krijgt een eigen patroon — sectie, rij en de
   vier kaartjes elk hun eigen, en per sectie op de pagina wisselt het nog eens —
   zodat twee banden onder elkaar er niet hetzelfde uitzien. Vaste patronen en
   geen script: dan verspringt er niets na het laden. */
.et_pb_section.vp-merkband::after, .vp-reviews::after {
    background-image:
        radial-gradient(circle at 52% 104%, rgba(255,255,255,0.08) 0 7.5em, transparent calc(7.5em + 1px)),
        radial-gradient(circle at 19% 32%, rgba(255,255,255,0.05) 0 11.0em, transparent calc(11.0em + 1px)),
        radial-gradient(circle at 73% 32%, transparent 0 calc(3.9em - 2px), rgba(255,255,255,0.08) calc(3.9em - 1px) 3.9em, transparent calc(3.9em + 1px)),
        radial-gradient(circle at 6% -5%, rgba(255,255,255,0.05) 0 9.0em, transparent calc(9.0em + 1px)),
        radial-gradient(circle at 52% 25%, rgba(255,255,255,0.07) 0 9.2em, transparent calc(9.2em + 1px)),
        radial-gradient(circle at 3% 0%, transparent 0 calc(3.4em - 2px), rgba(255,255,255,0.12) calc(3.4em - 1px) 3.4em, transparent calc(3.4em + 1px)),
        radial-gradient(circle at 71% -8%, rgba(255,255,255,0.05) 0 10.8em, transparent calc(10.8em + 1px)),
        radial-gradient(circle at 70% 35%, rgba(255,255,255,0.07) 0 8.2em, transparent calc(8.2em + 1px)),
        radial-gradient(circle at 58% -14%, transparent 0 calc(9.6em - 2px), rgba(255,255,255,0.09) calc(9.6em - 1px) 9.6em, transparent calc(9.6em + 1px)),
        radial-gradient(circle at 30% 89%, rgba(255,255,255,0.08) 0 13.0em, transparent calc(13.0em + 1px)),
        radial-gradient(circle at 102% 6%, rgba(255,255,255,0.05) 0 10.1em, transparent calc(10.1em + 1px)),
        radial-gradient(circle at 24% 58%, transparent 0 calc(3.3em - 2px), rgba(255,255,255,0.10) calc(3.3em - 1px) 3.3em, transparent calc(3.3em + 1px));
}
.et_pb_section:nth-of-type(even).vp-merkband::after {
    background-image:
        radial-gradient(circle at 55% 53%, rgba(255,255,255,0.07) 0 9.6em, transparent calc(9.6em + 1px)),
        radial-gradient(circle at 13% 82%, rgba(255,255,255,0.05) 0 3.1em, transparent calc(3.1em + 1px)),
        radial-gradient(circle at 30% 102%, transparent 0 calc(9.9em - 2px), rgba(255,255,255,0.10) calc(9.9em - 1px) 9.9em, transparent calc(9.9em + 1px)),
        radial-gradient(circle at 66% -15%, rgba(255,255,255,0.03) 0 9.6em, transparent calc(9.6em + 1px)),
        radial-gradient(circle at 51% 79%, rgba(255,255,255,0.08) 0 4.6em, transparent calc(4.6em + 1px)),
        radial-gradient(circle at 2% 36%, transparent 0 calc(3.7em - 2px), rgba(255,255,255,0.10) calc(3.7em - 1px) 3.7em, transparent calc(3.7em + 1px)),
        radial-gradient(circle at 38% 88%, rgba(255,255,255,0.03) 0 11.0em, transparent calc(11.0em + 1px)),
        radial-gradient(circle at 2% 115%, rgba(255,255,255,0.08) 0 5.2em, transparent calc(5.2em + 1px)),
        radial-gradient(circle at 49% 98%, transparent 0 calc(4.1em - 2px), rgba(255,255,255,0.09) calc(4.1em - 1px) 4.1em, transparent calc(4.1em + 1px)),
        radial-gradient(circle at 12% 65%, rgba(255,255,255,0.06) 0 11.8em, transparent calc(11.8em + 1px)),
        radial-gradient(circle at 84% -2%, rgba(255,255,255,0.06) 0 8.6em, transparent calc(8.6em + 1px)),
        radial-gradient(circle at 5% 87%, transparent 0 calc(9.1em - 2px), rgba(255,255,255,0.10) calc(9.1em - 1px) 9.1em, transparent calc(9.1em + 1px));
}
.et_pb_section:nth-of-type(3n).vp-merkband::after {
    background-image:
        radial-gradient(circle at 28% 59%, rgba(255,255,255,0.07) 0 9.9em, transparent calc(9.9em + 1px)),
        radial-gradient(circle at 103% 32%, rgba(255,255,255,0.07) 0 9.5em, transparent calc(9.5em + 1px)),
        radial-gradient(circle at 23% 32%, transparent 0 calc(4.3em - 2px), rgba(255,255,255,0.10) calc(4.3em - 1px) 4.3em, transparent calc(4.3em + 1px)),
        radial-gradient(circle at 22% 60%, rgba(255,255,255,0.03) 0 3.3em, transparent calc(3.3em + 1px)),
        radial-gradient(circle at 82% -12%, rgba(255,255,255,0.08) 0 12.9em, transparent calc(12.9em + 1px)),
        radial-gradient(circle at 5% 52%, transparent 0 calc(11.3em - 2px), rgba(255,255,255,0.11) calc(11.3em - 1px) 11.3em, transparent calc(11.3em + 1px)),
        radial-gradient(circle at 12% 50%, rgba(255,255,255,0.04) 0 6.6em, transparent calc(6.6em + 1px)),
        radial-gradient(circle at 91% 94%, rgba(255,255,255,0.08) 0 9.7em, transparent calc(9.7em + 1px)),
        radial-gradient(circle at 76% 65%, transparent 0 calc(9.6em - 2px), rgba(255,255,255,0.08) calc(9.6em - 1px) 9.6em, transparent calc(9.6em + 1px)),
        radial-gradient(circle at 71% 52%, rgba(255,255,255,0.06) 0 9.9em, transparent calc(9.9em + 1px)),
        radial-gradient(circle at 90% 19%, rgba(255,255,255,0.07) 0 7.4em, transparent calc(7.4em + 1px)),
        radial-gradient(circle at 63% 30%, transparent 0 calc(5.9em - 2px), rgba(255,255,255,0.08) calc(5.9em - 1px) 5.9em, transparent calc(5.9em + 1px));
}
.et_pb_row.vp-merkband::after {
    background-image:
        radial-gradient(circle at 16% 92%, rgba(255,255,255,0.07) 0 4.6em, transparent calc(4.6em + 1px)),
        radial-gradient(circle at 56% 40%, rgba(255,255,255,0.05) 0 6.0em, transparent calc(6.0em + 1px)),
        radial-gradient(circle at 60% 31%, transparent 0 calc(3.8em - 2px), rgba(255,255,255,0.08) calc(3.8em - 1px) 3.8em, transparent calc(3.8em + 1px)),
        radial-gradient(circle at -5% -12%, rgba(255,255,255,0.06) 0 3.2em, transparent calc(3.2em + 1px)),
        radial-gradient(circle at 3% 22%, rgba(255,255,255,0.04) 0 5.1em, transparent calc(5.1em + 1px)),
        radial-gradient(circle at 24% -5%, transparent 0 calc(3.5em - 2px), rgba(255,255,255,0.12) calc(3.5em - 1px) 3.5em, transparent calc(3.5em + 1px)),
        radial-gradient(circle at 93% 89%, rgba(255,255,255,0.03) 0 4.3em, transparent calc(4.3em + 1px)),
        radial-gradient(circle at 37% 112%, rgba(255,255,255,0.07) 0 4.6em, transparent calc(4.6em + 1px)),
        radial-gradient(circle at 42% -10%, transparent 0 calc(2.2em - 2px), rgba(255,255,255,0.11) calc(2.2em - 1px) 2.2em, transparent calc(2.2em + 1px)),
        radial-gradient(circle at 10% -10%, rgba(255,255,255,0.06) 0 3.5em, transparent calc(3.5em + 1px));
}
.et_pb_section:nth-of-type(even) > .et_pb_row.vp-merkband::after {
    background-image:
        radial-gradient(circle at 12% 47%, rgba(255,255,255,0.08) 0 1.6em, transparent calc(1.6em + 1px)),
        radial-gradient(circle at 18% 15%, rgba(255,255,255,0.08) 0 4.8em, transparent calc(4.8em + 1px)),
        radial-gradient(circle at 96% 5%, transparent 0 calc(2.5em - 2px), rgba(255,255,255,0.12) calc(2.5em - 1px) 2.5em, transparent calc(2.5em + 1px)),
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.07) 0 5.7em, transparent calc(5.7em + 1px)),
        radial-gradient(circle at 50% -3%, rgba(255,255,255,0.03) 0 4.1em, transparent calc(4.1em + 1px)),
        radial-gradient(circle at 28% 64%, transparent 0 calc(3.4em - 2px), rgba(255,255,255,0.08) calc(3.4em - 1px) 3.4em, transparent calc(3.4em + 1px)),
        radial-gradient(circle at 9% 0%, rgba(255,255,255,0.07) 0 4.6em, transparent calc(4.6em + 1px)),
        radial-gradient(circle at 28% 32%, rgba(255,255,255,0.05) 0 5.8em, transparent calc(5.8em + 1px)),
        radial-gradient(circle at 94% 21%, transparent 0 calc(2.8em - 2px), rgba(255,255,255,0.08) calc(2.8em - 1px) 2.8em, transparent calc(2.8em + 1px)),
        radial-gradient(circle at 83% 32%, rgba(255,255,255,0.05) 0 3.4em, transparent calc(3.4em + 1px));
}
.et_pb_section:nth-of-type(3n) > .et_pb_row.vp-merkband::after {
    background-image:
        radial-gradient(circle at 94% 59%, rgba(255,255,255,0.03) 0 5.5em, transparent calc(5.5em + 1px)),
        radial-gradient(circle at 70% 63%, rgba(255,255,255,0.06) 0 3.4em, transparent calc(3.4em + 1px)),
        radial-gradient(circle at 11% 34%, transparent 0 calc(2.7em - 2px), rgba(255,255,255,0.07) calc(2.7em - 1px) 2.7em, transparent calc(2.7em + 1px)),
        radial-gradient(circle at 74% 101%, rgba(255,255,255,0.03) 0 5.6em, transparent calc(5.6em + 1px)),
        radial-gradient(circle at 85% 112%, rgba(255,255,255,0.06) 0 3.4em, transparent calc(3.4em + 1px)),
        radial-gradient(circle at 88% 95%, transparent 0 calc(3.1em - 2px), rgba(255,255,255,0.07) calc(3.1em - 1px) 3.1em, transparent calc(3.1em + 1px)),
        radial-gradient(circle at 95% -6%, rgba(255,255,255,0.07) 0 4.2em, transparent calc(4.2em + 1px)),
        radial-gradient(circle at 74% 40%, rgba(255,255,255,0.05) 0 5.9em, transparent calc(5.9em + 1px)),
        radial-gradient(circle at 92% 79%, transparent 0 calc(5.9em - 2px), rgba(255,255,255,0.08) calc(5.9em - 1px) 5.9em, transparent calc(5.9em + 1px)),
        radial-gradient(circle at 35% 6%, rgba(255,255,255,0.04) 0 5.2em, transparent calc(5.2em + 1px));
}
.et_pb_column.vp-merkband::after {
    background-image:
        radial-gradient(circle at -4% 105%, rgba(255,255,255,0.05) 0 1.6em, transparent calc(1.6em + 1px)),
        radial-gradient(circle at 82% -4%, rgba(255,255,255,0.03) 0 1.7em, transparent calc(1.7em + 1px)),
        radial-gradient(circle at 24% 20%, transparent 0 calc(1.7em - 2px), rgba(255,255,255,0.11) calc(1.7em - 1px) 1.7em, transparent calc(1.7em + 1px)),
        radial-gradient(circle at 79% 0%, rgba(255,255,255,0.06) 0 1.7em, transparent calc(1.7em + 1px)),
        radial-gradient(circle at 52% 90%, rgba(255,255,255,0.06) 0 1.9em, transparent calc(1.9em + 1px)),
        radial-gradient(circle at 10% -10%, transparent 0 calc(3.7em - 2px), rgba(255,255,255,0.12) calc(3.7em - 1px) 3.7em, transparent calc(3.7em + 1px)),
        radial-gradient(circle at 38% 35%, rgba(255,255,255,0.05) 0 1.9em, transparent calc(1.9em + 1px));
}
.et_pb_column.vp-merkband:nth-child(2)::after {
    background-image:
        radial-gradient(circle at 4% 39%, rgba(255,255,255,0.07) 0 1.7em, transparent calc(1.7em + 1px)),
        radial-gradient(circle at 25% 112%, rgba(255,255,255,0.03) 0 1.3em, transparent calc(1.3em + 1px)),
        radial-gradient(circle at 36% 115%, transparent 0 calc(2.3em - 2px), rgba(255,255,255,0.07) calc(2.3em - 1px) 2.3em, transparent calc(2.3em + 1px)),
        radial-gradient(circle at 83% 105%, rgba(255,255,255,0.03) 0 2.4em, transparent calc(2.4em + 1px)),
        radial-gradient(circle at 91% 17%, rgba(255,255,255,0.05) 0 2.9em, transparent calc(2.9em + 1px)),
        radial-gradient(circle at 93% 36%, transparent 0 calc(4.0em - 2px), rgba(255,255,255,0.12) calc(4.0em - 1px) 4.0em, transparent calc(4.0em + 1px)),
        radial-gradient(circle at 20% 99%, rgba(255,255,255,0.03) 0 1.5em, transparent calc(1.5em + 1px));
}
.et_pb_column.vp-merkband:nth-child(3)::after {
    background-image:
        radial-gradient(circle at 68% 27%, rgba(255,255,255,0.07) 0 3.3em, transparent calc(3.3em + 1px)),
        radial-gradient(circle at 30% 107%, rgba(255,255,255,0.08) 0 3.4em, transparent calc(3.4em + 1px)),
        radial-gradient(circle at 62% 32%, transparent 0 calc(4.4em - 2px), rgba(255,255,255,0.12) calc(4.4em - 1px) 4.4em, transparent calc(4.4em + 1px)),
        radial-gradient(circle at 59% 67%, rgba(255,255,255,0.06) 0 4.4em, transparent calc(4.4em + 1px)),
        radial-gradient(circle at 51% 57%, rgba(255,255,255,0.07) 0 4.3em, transparent calc(4.3em + 1px)),
        radial-gradient(circle at 33% 90%, transparent 0 calc(2.2em - 2px), rgba(255,255,255,0.09) calc(2.2em - 1px) 2.2em, transparent calc(2.2em + 1px)),
        radial-gradient(circle at 1% 94%, rgba(255,255,255,0.05) 0 3.9em, transparent calc(3.9em + 1px));
}
.et_pb_column.vp-merkband:nth-child(4)::after {
    background-image:
        radial-gradient(circle at 62% 76%, rgba(255,255,255,0.08) 0 3.1em, transparent calc(3.1em + 1px)),
        radial-gradient(circle at -2% 84%, rgba(255,255,255,0.08) 0 2.4em, transparent calc(2.4em + 1px)),
        radial-gradient(circle at 49% 63%, transparent 0 calc(2.3em - 2px), rgba(255,255,255,0.10) calc(2.3em - 1px) 2.3em, transparent calc(2.3em + 1px)),
        radial-gradient(circle at 100% 24%, rgba(255,255,255,0.05) 0 1.5em, transparent calc(1.5em + 1px)),
        radial-gradient(circle at -5% 24%, rgba(255,255,255,0.03) 0 3.7em, transparent calc(3.7em + 1px)),
        radial-gradient(circle at 2% 79%, transparent 0 calc(2.0em - 2px), rgba(255,255,255,0.10) calc(2.0em - 1px) 2.0em, transparent calc(2.0em + 1px)),
        radial-gradient(circle at 102% 0%, rgba(255,255,255,0.08) 0 3.8em, transparent calc(3.8em + 1px));
}
/* Dezelfde kaartjes in een volgende sectie: gespiegeld, dus weer anders. */
.et_pb_section:nth-of-type(even) .et_pb_column.vp-merkband::after { transform: scaleX(-1); }
.et_pb_section:nth-of-type(3n) .et_pb_column.vp-merkband::after { transform: scaleY(-1); }
.vp-merkband > .et_pb_row,
.vp-merkband > .et_pb_column,
.vp-merkband > .et_pb_module { position: relative; z-index: 1; }
/* Kolom als merkband (de vier kaartjes): de tekst blijft wit, ook op mobiel. */
.et_pb_column.vp-merkband { color: #fff; }
/* Rij als merkband (de USP-rij): afgerond, zoals de fotoversie was. */
.et_pb_row.vp-merkband { border-radius: 2em; }
/* Sterren staan in de merkkleur; op de band is dat rood op rood — dus wit. */
.vp-merkband .review-stars,
.vp-reviews .review-stars { color: #fff; }
.vp-merkband .review-stars svg,
.vp-reviews .review-stars svg { fill: currentColor; }

/* In de beoordelingensectie juist wél in de huisstijlkleur, en dan de lichte
   van de twee (dezelfde die de knoppen in rust dragen): dat hoort bij het
   ontwerp en sterren zijn nu eenmaal gekleurd (DV, 20-09-2026). Daarvoor moet
   de band eronder donkerder, anders is het rood op rood: dezelfde sluier als
   elders, alleen zwaarder gezet. De bubbels en de kleur blijven; het
   schaduwtje houdt de punten van de sterren leesbaar waar de band het lichtst
   is. */
.et_pb_section.vp-merkband:has(.review-stars),
.vp-reviews {
    --vp-band-donker: 0.5;
}

.et_pb_section.vp-merkband:has(.review-stars) .review-stars,
.vp-reviews .review-stars {
    color: var(--vp-btn-rest, var(--vp-brand-color));
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}
/** -------------- CONTACT CARD ----------------- */

/* A phone number that breaks across two lines is not a phone number any more.
   These two rules apply wherever the links appear, independent of the Divi
   classes the page happens to use. */
a[href^="tel:"] {
    white-space: nowrap;
}

a[href^="mailto:"] {
    word-break: normal;
    overflow-wrap: anywhere;
}

@media screen and (max-width: 767px) {
    /* Foto náást de gegevens, ook op de telefoon (DV, 20-09-2026). Sinds 18-09
       stond hij erboven omdat de gegevenskolom anders ~168px breed werd en
       "+31624986969" en "info@vacatureposter.nl" middenin afbraken. Nu krijgt
       die kolom alle resterende ruimte (min-width: 0 in plaats van de auto-
       minimumbreedte van een flexkolom) en staan de contactregels op deze
       breedtes compacter, met kleinere rondjes. Onder 350px past dat niet meer;
       daar gaat de foto erboven, met een vaste hoogte zodat hij rechthoekig
       blijft. */
    .contact-info-head {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        column-gap: 1em;
    }

    .contact-info-head > .contact-info-image {
        flex: 0 0 32%;
        max-width: 32%;
        min-width: 0;
        margin: 0;
        float: none;
    }

    .contact-info-head > .contact-info-lines {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }

    .contact-details .contact-detail {
        gap: 0.5em;
    }

    .contact-details .contact-detail-icon {
        flex-basis: 1.75em;
        width: 1.75em;
        height: 1.75em;
    }

    /* Een e-mailadres of telefoonnummer is één lang woord: liever binnen het
       woord afbreken dan buiten de kaart steken. */
    .contact-details .contact-detail-text {
        overflow-wrap: anywhere;
    }
}

/** -------------- RECAPTCHA BADGE ----------------- */

/* Google's badge is 256px wide and pinned to the right edge, so on a 375px
   phone it hung off-screen and landed on top of the cookie banner. Keep it
   inside the viewport and below the banner's stacking level. */
.grecaptcha-badge {
    z-index: 9990 !important;
}

@media screen and (max-width: 767px) {
    .grecaptcha-badge {
        right: 0 !important;
        /* Stond op 5.5em om de cookiebalk vrij te houden, maar die balk is op
           een telefoon zo'n 170px hoog — dat haalde het toch niet, en zodra de
           balk weg was zweefde het label midden over het formulier
           (DV, 20-09-2026). Nu tegen de onderrand: tijdens de cookiebalk valt
           het eronder weg (z-index hierboven), daarna staat het uit de weg. */
        bottom: 0 !important;
        transform: scale(0.85);
        transform-origin: bottom right;
    }
}


/** -------------- TAP TARGETS ----------------- */

/* Small text links that people tap on phones were 16-20px tall, under the
   24px minimum (WCAG 2.2, 2.5.8). The tap area grows without anything on the
   page moving: padding cancelled by an equal negative margin for the inline
   links, and an invisible positioned hit area for the two where that margin
   trick would still shift a line by a pixel or so. */
.cookie-banner .sub-btn,
.vp-footer-read-more {
    padding-block: 4px;
    margin-block: -4px;
}

.vp-breadcrumbs a,
#shareButton {
    position: relative;
}

.vp-breadcrumbs a::after,
#shareButton::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 24px;
    min-height: 100%;
    transform: translateY(-50%);
}

/** -------------- BLOG LIST AS A PAGE SECTION ----------------- */

/* Placed on a page as its own section (a Divi code module), the blog list's
   heading was the only section heading left-aligned and without the short
   bar underneath — "Nieuws en achtergrond" on the vve-care.nl homepage stood
   out against every heading around it. Match the section headings: centred,
   with the same 4px rounded bar in the divider colour. Inside an article the
   related-posts list keeps its left-aligned heading, as elsewhere on the site. */
.et_pb_code_inner > .vp-blog-list > h2.vp-divi-header-large {
    text-align: center;
}

.et_pb_code_inner > .vp-blog-list > h2.vp-divi-header-large::after {
    content: '';
    display: block;
    width: 35%;
    max-width: 250px;
    height: 4px;
    margin: 0.35em auto 0.75em;
    border-radius: 2em;
    background: var(--vp-accent-strong, var(--vp-accent-color, var(--vp-brand-color)));
}

/** -------------- NETWERKDECORATIE ----------------- */

/* Het logo heeft naast de kop van Dionysos een netwerktakje: lijnen die onder
   45 graden aftakken en eindigen in een stip. Diezelfde vormtaal ligt hier als
   decoratie over een sectie, een rij of een afbeelding heen — als mask-image,
   zodat de kleur uit de huisstijlvariabelen komt en het motief op alle drie de
   sites vanzelf klopt. Absolute paden, net als bij de iconen: LiteSpeed's UCSS
   verplaatst en combineert de stylesheet, en relatieve paden breken daar op.

   Bewust terughoudend: dit is achtergrondwerk. Op een donkere band mag het iets
   sterker (wit op donker verdwijnt sneller) dan op een licht vlak. */
.vp-netwerk,
.vp-netwerk-links,
.vp-netwerk-band {
    position: relative;
}

.vp-netwerk::before,
.vp-netwerk-links::before,
.vp-netwerk-band::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-color: var(--vp-brand-color, #223C74);
    opacity: 0.12;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Rechtsboven: het motief groeit vanuit de hoek de sectie in. De breedte
   schaalt mee met het scherm, met een bovengrens zodat het op een breed scherm
   decoratie blijft en geen patroon wordt. */
.vp-netwerk::before {
    -webkit-mask-image: url(/wp-content/plugins/VerharenWeb/assets/patronen/netwerk-hoek.svg);
    mask-image: url(/wp-content/plugins/VerharenWeb/assets/patronen/netwerk-hoek.svg);
    -webkit-mask-position: right top;
    mask-position: right top;
    -webkit-mask-size: clamp(200px, 26vw, 420px);
    mask-size: clamp(200px, 26vw, 420px);
    transform: scaleY(-1);
}

/* Linksonder, gespiegeld — voor een sectie die na een 'vp-netwerk' komt, zodat
   twee opeenvolgende blokken niet hetzelfde hoekje herhalen. */
.vp-netwerk-links::before {
    -webkit-mask-image: url(/wp-content/plugins/VerharenWeb/assets/patronen/netwerk-hoek.svg);
    mask-image: url(/wp-content/plugins/VerharenWeb/assets/patronen/netwerk-hoek.svg);
    -webkit-mask-position: right top;
    mask-position: right top;
    -webkit-mask-size: clamp(180px, 22vw, 360px);
    mask-size: clamp(180px, 22vw, 360px);
    transform: scaleX(-1);
}

/* Over de volle breedte, laag en rustig: voor een band tussen twee secties. */
.vp-netwerk-band::before {
    -webkit-mask-image: url(/wp-content/plugins/VerharenWeb/assets/patronen/netwerk-band.svg);
    mask-image: url(/wp-content/plugins/VerharenWeb/assets/patronen/netwerk-band.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
}

/* Op een donkere ondergrond is het motief wit. .vp-merkband en .vp-on-dark
   zetten zelf al witte tekst; het motief volgt diezelfde regel, ook als de
   klasse op een bovenliggende sectie staat. */
.vp-footer.vp-netwerk::before,
.vp-footer.vp-netwerk-links::before,
.vp-merkband.vp-netwerk::before,
.vp-merkband.vp-netwerk-links::before,
.vp-merkband.vp-netwerk-band::before,
.vp-on-dark.vp-netwerk::before,
.vp-on-dark.vp-netwerk-links::before,
.vp-on-dark.vp-netwerk-band::before,
.vp-merkband .vp-netwerk::before,
.vp-merkband .vp-netwerk-links::before,
.vp-on-dark .vp-netwerk::before,
.vp-on-dark .vp-netwerk-links::before {
    background-color: #ffffff;
    opacity: 0.16;
}

/* De inhoud moet boven de decoratie blijven. Divi's rij heeft geen eigen
   stapelcontext, dus die krijgt hij hier — en de footer net zo. */
.vp-footer.vp-netwerk-links > .vp-footer-container,
.vp-footer.vp-netwerk > .vp-footer-container,
.vp-netwerk > .et_pb_row,
.vp-netwerk-links > .et_pb_row,
.vp-netwerk-band > .et_pb_row,
.vp-netwerk > .et_pb_column,
.vp-netwerk-links > .et_pb_column,
.vp-netwerk-band > .et_pb_column {
    position: relative;
    z-index: 1;
}

/* De merkband heeft al een lichte cirkel als ::after; het netwerk komt daar
   als tweede laag overheen en moet dus achter de bubbels blijven. */
.vp-merkband.vp-netwerk::before,
.vp-merkband.vp-netwerk-links::before,
.vp-merkband.vp-netwerk-band::before {
    z-index: 0;
}

/* Klein hoekje over een afbeelding. Op de foto zelf zou het motief wegvallen,
   dus het staat in de hoek waar de foto het rustigst is en iets steviger aan. */
.vp-netwerk-foto {
    position: relative;
}

.vp-netwerk-foto::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: clamp(78px, 22%, 130px);
    aspect-ratio: 1;
    pointer-events: none;
    background-color: #ffffff;
    opacity: 0.55;
    -webkit-mask: url(/wp-content/plugins/VerharenWeb/assets/patronen/netwerk-klein.svg) right top/contain no-repeat;
    mask: url(/wp-content/plugins/VerharenWeb/assets/patronen/netwerk-klein.svg) right top/contain no-repeat;
}

/* Op een telefoon is er te weinig ruimte: het motief zou over de tekst vallen
   in plaats van eromheen. Alleen de band blijft, die ligt laag genoeg. */
@media (max-width: 767px) {
    .vp-netwerk::before,
    .vp-netwerk-links::before {
        -webkit-mask-size: 150px;
        mask-size: 150px;
        opacity: 0.08;
    }

    .vp-merkband.vp-netwerk::before,
    .vp-merkband.vp-netwerk-links::before,
    .vp-on-dark.vp-netwerk::before,
    .vp-on-dark.vp-netwerk-links::before {
        opacity: 0.12;
    }

    .vp-netwerk-foto::after {
        width: 70px;
    }
}

/* In de voet staat het motief linksonder, achter het logo — daar is de meeste
   rust. Kleiner dan op een sectie, want de voet is een strook en geen vlak. */
.vp-footer.vp-netwerk-links::before {
    -webkit-mask-position: left bottom;
    mask-position: left bottom;
    -webkit-mask-size: clamp(150px, 16vw, 270px);
    mask-size: clamp(150px, 16vw, 270px);
    transform: none;
    opacity: 0.075;
}


/** ============================================================================
 *  RONDE HOEKEN — pas vanaf de paginabreedte
 *  Staat bewust helemaal onderaan: de eigen regels van .vp-banner en
 *  .page-header-image staan verderop in dit bestand dan de vlakken, en bij
 *  gelijke specificiteit wint de laatste regel. Bij de vlakken stond dit blok
 *  eerst hogerop en bleef de banner daardoor rond (opgemeten op 1200px,
 *  24-09-2026).
 *  ========================================================================= */

/* Een ronde hoek hoort bij de witruimte ernaast. Zodra het venster smaller is
   dan de paginabreedte raakt zo'n blok beide schermranden, en dan is de ronding
   geen vorm meer maar een hap uit de rand: links en rechts van het blok komt de
   pagina-achtergrond door de bocht kijken. Onder --vp-site-max staan de hoeken
   daarom recht — bij de vlakken midden op de pagina én bij de kopbanners
   bovenaan, die alleen onderhoeken hebben (DV, 24-09-2026).

   De grens staat hier als getal en niet als variabele: een media query kan geen
   custom property lezen. Hij hoort gelijk te blijven aan --vp-site-max
   hierboven; test-afwerking-24-09.php bewaakt dat. Chrome en Firefox meten een media
   query zonder de schuifbalk, net als de 100% van het blok zelf, dus de twee
   klappen op precies dezelfde breedte om. */
@media (max-width: 1320px) {
    .vp-vlak,
    .vp-vlak:has(+ .vp-vlak),
    .vp-vlak + .vp-vlak,
    .vp-banner,
    .page-header-wrapper::after,
    .page-header-image,
    .entry-content .et_builder_inner_content > .et_pb_section:first-child.et_pb_with_background:has(h1) {
        border-radius: 0;
    }
}