/*
 * ================================================================
 * VOKK LIGHT / MEDIUM CONTRAST CONTRACT
 * ================================================================
 *
 * Alleen:
 * - Light  = pb-mode-medium + pb-mode-light-page
 * - Medium = pb-mode-medium zonder light-page
 *
 * NOOIT dark.
 *
 * Geen hero.
 * Geen mobile.
 * Geen layoutwijzigingen.
 * Geen typographywijzigingen.
 * ================================================================
 */

@media screen and (min-width: 969px) {


/* ================================================================
 * SEMANTISCHE TOKENS
 * ================================================================ */

body.pb-mode-light-page {
    --pb-lm-heading:
        var(--pb-text);

    --pb-lm-text:
        var(--pb-text);

    --pb-lm-muted:
        var(--pb-muted);

    --pb-lm-link:
        var(--pb-primary);

    --pb-lm-line:
        var(--pb-light-border);

    --pb-lm-icon-bg:
        color-mix(
            in srgb,
            var(--pb-primary) 8%,
            white
        );

    --pb-lm-icon:
        var(--pb-primary);
}


body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark) {
    --pb-lm-heading:
        var(--pb-text);

    --pb-lm-text:
        var(--pb-text);

    --pb-lm-muted:
        var(--pb-muted);

    --pb-lm-link:
        var(--pb-primary);

    --pb-lm-line:
        var(--pb-border);

    --pb-lm-icon-bg:
        color-mix(
            in srgb,
            var(--pb-primary) 10%,
            white
        );

    --pb-lm-icon:
        var(--pb-primary);
}


/* ================================================================
 * 1. HOMEPAGE BENEFITS
 *
 * Hiermee lossen we precies het witte-op-licht probleem op.
 * ================================================================ */

body.pb-mode-light-page
.pb-vokk-benefit h3,

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
.pb-vokk-benefit h3 {
    color:
        var(--pb-lm-heading) !important;
}


body.pb-mode-light-page
.pb-vokk-benefit p,

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
.pb-vokk-benefit p {
    color:
        var(--pb-lm-muted) !important;

    opacity:
        1 !important;
}


body.pb-mode-light-page
.pb-vokk-benefit-icon,

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
.pb-vokk-benefit-icon {
    color:
        var(--pb-lm-icon) !important;

    background:
        var(--pb-lm-icon-bg) !important;

    border-color:
        color-mix(
            in srgb,
            var(--pb-primary) 22%,
            transparent
        ) !important;
}


body.pb-mode-light-page
.pb-vokk-benefit-icon svg,

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
.pb-vokk-benefit-icon svg {
    color:
        var(--pb-lm-icon) !important;

    stroke:
        currentColor !important;

    opacity:
        1 !important;
}


/* ================================================================
 * 2. BENEFITS B/C
 *
 * Variant C bevat hardcoded wit.
 * Layoutpacks kunnen die surface licht maken.
 * Daarom tekst hier expliciet koppelen aan mode.
 * ================================================================ */

body.pb-mode-light-page
:is(
    .pb-benefits-variant-b,
    .pb-benefits-variant-c
)
.pb-vokk-benefit
:is(
    h2,h3,h4
),

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
:is(
    .pb-benefits-variant-b,
    .pb-benefits-variant-c
)
.pb-vokk-benefit
:is(
    h2,h3,h4
) {
    color:
        var(--pb-lm-heading) !important;
}


body.pb-mode-light-page
:is(
    .pb-benefits-variant-b,
    .pb-benefits-variant-c
)
.pb-vokk-benefit p,

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
:is(
    .pb-benefits-variant-b,
    .pb-benefits-variant-c
)
.pb-vokk-benefit p {
    color:
        var(--pb-lm-muted) !important;

    opacity:
        1 !important;
}


body.pb-mode-light-page
:is(
    .pb-benefits-variant-b,
    .pb-benefits-variant-c
)
.pb-vokk-benefit::before,

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
:is(
    .pb-benefits-variant-b,
    .pb-benefits-variant-c
)
.pb-vokk-benefit::before {
    color:
        var(--pb-lm-link) !important;
}


/* ================================================================
 * 3. PROCESS / ZO WERKEN WIJ
 * ================================================================ */

body.pb-mode-light-page
.pb-vokk-process-item h3,

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
.pb-vokk-process-item h3 {
    color:
        var(--pb-lm-heading) !important;
}


body.pb-mode-light-page
.pb-vokk-process-item p,

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
.pb-vokk-process-item p {
    color:
        var(--pb-lm-muted) !important;

    opacity:
        1 !important;
}


body.pb-mode-light-page
.pb-vokk-process-number,

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
.pb-vokk-process-number {
    color:
        var(--pb-lm-link) !important;

    opacity:
        1 !important;
}


body.pb-mode-light-page
.pb-vokk-process-icon,

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
.pb-vokk-process-icon {
    color:
        var(--pb-lm-icon) !important;

    background:
        var(--pb-lm-icon-bg) !important;

    border-color:
        color-mix(
            in srgb,
            var(--pb-primary) 22%,
            transparent
        ) !important;
}


body.pb-mode-light-page
.pb-vokk-process-icon svg,

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
.pb-vokk-process-icon svg {
    stroke:
        currentColor !important;

    color:
        var(--pb-lm-icon) !important;

    opacity:
        1 !important;
}


/* ================================================================
 * 4. TRUST
 * ================================================================ */

body.pb-mode-light-page
.pb-vokk-trust-box,

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
.pb-vokk-trust-box {
    color:
        var(--pb-lm-text) !important;
}


body.pb-mode-light-page
.pb-vokk-trust-item strong,

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
.pb-vokk-trust-item strong {
    color:
        var(--pb-lm-heading) !important;
}


body.pb-mode-light-page
.pb-vokk-trust-item
:is(
    span,small,p
),

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
.pb-vokk-trust-item
:is(
    span,small,p
) {
    color:
        var(--pb-lm-muted) !important;

    opacity:
        1 !important;
}


body.pb-mode-light-page
.pb-vokk-trust-label,

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
.pb-vokk-trust-label {
    color:
        var(--pb-lm-link) !important;
}


/* ================================================================
 * 5. ALGEMENE CONTENTPAGINA'S
 * ================================================================ */

body.pb-mode-light-page
:is(
    .vokk-services-page,
    .vokk-about-page,
    .vokk-projects-page,
    .vokk-reviews-page,
    .vokk-contact-page,
    .vokk-detail-page
)
:is(
    h1,h2,h3,h4,h5,h6
),

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
:is(
    .vokk-services-page,
    .vokk-about-page,
    .vokk-projects-page,
    .vokk-reviews-page,
    .vokk-contact-page,
    .vokk-detail-page
)
:is(
    h1,h2,h3,h4,h5,h6
) {
    color:
        var(--pb-lm-heading) !important;
}


body.pb-mode-light-page
:is(
    .vokk-services-page,
    .vokk-about-page,
    .vokk-projects-page,
    .vokk-reviews-page,
    .vokk-contact-page,
    .vokk-detail-page
)
p,

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
:is(
    .vokk-services-page,
    .vokk-about-page,
    .vokk-projects-page,
    .vokk-reviews-page,
    .vokk-contact-page,
    .vokk-detail-page
)
p {
    color:
        var(--pb-lm-muted) !important;

    opacity:
        1 !important;
}


/* ================================================================
 * 6. KLEINE TITELS / LABELS
 * ================================================================ */

body.pb-mode-light-page
:is(
    .vokk-services-small-title,
    .vokk-about-small-title,
    .vokk-projects-small-title,
    .vokk-reviews-small-title,
    .vokk-contact-small-title,
    .vokk-detail-small-title,
    .pb-vokk-eyebrow,
    .pb-vokk-trust-label
),

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
:is(
    .vokk-services-small-title,
    .vokk-about-small-title,
    .vokk-projects-small-title,
    .vokk-reviews-small-title,
    .vokk-contact-small-title,
    .vokk-detail-small-title,
    .pb-vokk-eyebrow,
    .pb-vokk-trust-label
) {
    color:
        var(--pb-lm-link) !important;

    opacity:
        1 !important;
}


/* ================================================================
 * 7. BULLETS / CHECKS OP LICHTE SURFACES
 * ================================================================ */

body.pb-mode-light-page
:is(
    .vokk-service-points,
    .vokk-detail-benefits,
    .vokk-reviews-wordpress-list,
    .vokk-contact-reassurance
)
li,

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
:is(
    .vokk-service-points,
    .vokk-detail-benefits,
    .vokk-reviews-wordpress-list,
    .vokk-contact-reassurance
)
li {
    color:
        var(--pb-lm-text) !important;
}


body.pb-mode-light-page
:is(
    .vokk-service-points,
    .vokk-detail-benefits,
    .vokk-reviews-wordpress-list,
    .vokk-contact-reassurance
)
li::before,

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
:is(
    .vokk-service-points,
    .vokk-detail-benefits,
    .vokk-reviews-wordpress-list,
    .vokk-contact-reassurance
)
li::before {
    color:
        var(--pb-lm-link) !important;

    opacity:
        1 !important;
}


/* ================================================================
 * 8. CONTENT LINKS
 * ================================================================ */

body.pb-mode-light-page
:is(
    .vokk-services-page,
    .vokk-about-page,
    .vokk-projects-page,
    .vokk-reviews-page,
    .vokk-contact-page,
    .vokk-detail-page
)
a:not(
    .button,
    .btn,
    .wp-element-button
),

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
:is(
    .vokk-services-page,
    .vokk-about-page,
    .vokk-projects-page,
    .vokk-reviews-page,
    .vokk-contact-page,
    .vokk-detail-page
)
a:not(
    .button,
    .btn,
    .wp-element-button
) {
    color:
        var(--pb-lm-link) !important;
}


/* ================================================================
 * 9. FOTO-DIENSTENKAARTEN UITSLUITEN
 *
 * Deze moeten witte tekst op foto-overlay houden.
 * ================================================================ */

body.pb-mode-light-page
.pb-vokk-service-card
.pb-vokk-service-content
:is(
    h2,h3,h4,p
),

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
.pb-vokk-service-card
.pb-vokk-service-content
:is(
    h2,h3,h4,p
) {
    color:
        revert !important;
}


/*
 * Bestaande variantregels mogen hier weer bepalen:
 * foto-overlay = wit
 * editorial/list = eigen modekleur.
 */


/* ================================================================
 * 10. HERO EXPLICIET NIET AANRAKEN
 * ================================================================ */

body.pb-mode-light-page
:is(
    .pb-content-hero,
    .nuke-v10-master
)
*,

body.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark)
:is(
    .pb-content-hero,
    .nuke-v10-master
)
* {
    /* bewust leeg */
}

}

/* ================================================================
 * GEEN ENKELE pb-mode-dark SELECTOR IN DIT BESTAND
 * ================================================================ */

/* PB CURRENT LIGHT MEDIUM CONTRAST FINAL START */

/*
 * ============================================================
 * HUIDIGE UITSTRALING — MEDIUM + LIGHT
 *
 * Alleen contrast.
 * Geen typography.
 * Geen afmetingen.
 * Geen hero-layout.
 * Geen mobiele layout.
 * Dark wordt niet geraakt.
 * ============================================================
 */


/* ============================================================
 * CONTENT HERO'S
 * ============================================================ */

html body.pb-layout-pack-current.pb-mode-medium:not(.pb-template-front-page)
.pb-content-hero {
    color: #ffffff !important;
}


/*
 * Overlay bewust donkerder maken zodat tekst op iedere
 * hero-afbeelding leesbaar blijft.
 */
html body.pb-layout-pack-current.pb-mode-medium:not(.pb-template-front-page)
.pb-content-hero::before {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--pb-darker) 96%, transparent) 0%,
            color-mix(in srgb, var(--pb-darker) 88%, transparent) 42%,
            color-mix(in srgb, var(--pb-darker) 58%, transparent) 68%,
            color-mix(in srgb, var(--pb-darker) 16%, transparent) 100%
        ) !important;

    opacity: 1 !important;
}


/*
 * Alle hero-tekst bewust licht houden.
 */
html body.pb-layout-pack-current.pb-mode-medium:not(.pb-template-front-page)
.pb-content-hero :is(
    h1,
    h2,
    h3,
    p,
    .vokk-services-eyebrow,
    .vokk-about-eyebrow,
    .vokk-projects-eyebrow,
    .vokk-reviews-eyebrow,
    .vokk-contact-eyebrow,
    .vokk-detail-eyebrow
) {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
}


/*
 * Lopende tekst iets zachter dan de titel,
 * maar nog ruim voldoende contrast.
 */
html body.pb-layout-pack-current.pb-mode-medium:not(.pb-template-front-page)
.pb-content-hero p {
    color: rgba(255,255,255,.88) !important;
}


/* ============================================================
 * CONTENT CTA'S
 * ============================================================ */

/*
 * Donkere CTA-vlakken behouden donkere uitstraling,
 * maar hun tekst mag niet meer de Light/Medium tekstkleur erven.
 */

html body.pb-layout-pack-current.pb-mode-medium.pb-mode-light-page
:is(
    .vokk-services-cta-box,
    .vokk-about-cta-box,
    .vokk-projects-cta-box,
    .vokk-reviews-cta-box,
    .vokk-detail-cta-box
) {
    color: #ffffff !important;
}


html body.pb-layout-pack-current.pb-mode-medium.pb-mode-light-page
:is(
    .vokk-services-cta-box,
    .vokk-about-cta-box,
    .vokk-projects-cta-box,
    .vokk-reviews-cta-box,
    .vokk-detail-cta-box
)
:is(h2,h3,h4) {
    color: #ffffff !important;
    opacity: 1 !important;
}


html body.pb-layout-pack-current.pb-mode-medium.pb-mode-light-page
:is(
    .vokk-services-cta-box,
    .vokk-about-cta-box,
    .vokk-projects-cta-box,
    .vokk-reviews-cta-box,
    .vokk-detail-cta-box
)
p {
    color: rgba(255,255,255,.84) !important;
    opacity: 1 !important;
}


/*
 * CTA-knoppen:
 * accentachtergrond behouden, tekst wit.
 */
html body.pb-layout-pack-current.pb-mode-medium
:is(
    .vokk-services-cta-button,
    .vokk-about-cta-button,
    .vokk-projects-cta-button,
    .vokk-reviews-cta-button,
    .vokk-detail-cta-button
) {
    color: #ffffff !important;
}


/*
 * Links binnen donkere CTA's eveneens leesbaar.
 */
html body.pb-layout-pack-current.pb-mode-medium
:is(
    .vokk-services-cta-box,
    .vokk-about-cta-box,
    .vokk-projects-cta-box,
    .vokk-reviews-cta-box,
    .vokk-detail-cta-box
)
a {
    opacity: 1 !important;
}


/* PB CURRENT LIGHT MEDIUM CONTRAST FINAL END */

/* PB CURRENT CTA LIGHT MEDIUM CONTRAST START */

/*
 * Huidige uitstraling / Current
 * Medium + Light
 *
 * Alleen CTA-contrast.
 * Geen layout- of typografiewijzigingen.
 */

/* DIENSTEN */
html body.pb-layout-pack-current.pb-mode-medium.pb-template-page-diensten
.vokk-services-cta-box,

/* PROJECTEN */
html body.pb-layout-pack-current.pb-mode-medium.pb-template-page-projecten
.vokk-projects-cta-box,

/* OVER ONS */
html body.pb-layout-pack-current.pb-mode-medium.pb-template-page-over-ons
.vokk-about-cta-box,

/* WAARDERING */
html body.pb-layout-pack-current.pb-mode-medium.pb-template-page-waardering
.vokk-reviews-cta-box {
    color: #ffffff !important;
}


/* TITELS */
html body.pb-layout-pack-current.pb-mode-medium.pb-template-page-diensten
.vokk-services-cta-box :is(h2,h3,h4),

html body.pb-layout-pack-current.pb-mode-medium.pb-template-page-projecten
.vokk-projects-cta-box :is(h2,h3,h4),

html body.pb-layout-pack-current.pb-mode-medium.pb-template-page-over-ons
.vokk-about-cta-box :is(h2,h3,h4),

html body.pb-layout-pack-current.pb-mode-medium.pb-template-page-waardering
.vokk-reviews-cta-box :is(h2,h3,h4) {
    color: #ffffff !important;
    opacity: 1 !important;
}


/* LOPENDE TEKST */
html body.pb-layout-pack-current.pb-mode-medium.pb-template-page-diensten
.vokk-services-cta-box p,

html body.pb-layout-pack-current.pb-mode-medium.pb-template-page-projecten
.vokk-projects-cta-box p,

html body.pb-layout-pack-current.pb-mode-medium.pb-template-page-over-ons
.vokk-about-cta-box p,

html body.pb-layout-pack-current.pb-mode-medium.pb-template-page-waardering
.vokk-reviews-cta-box p {
    color: rgba(255,255,255,.84) !important;
    opacity: 1 !important;
}


/* CTA KNOPPEN / LINKS */
html body.pb-layout-pack-current.pb-mode-medium.pb-template-page-diensten
.vokk-services-cta-box a,

html body.pb-layout-pack-current.pb-mode-medium.pb-template-page-projecten
.vokk-projects-cta-box a,

html body.pb-layout-pack-current.pb-mode-medium.pb-template-page-over-ons
.vokk-about-cta-box a,

html body.pb-layout-pack-current.pb-mode-medium.pb-template-page-waardering
.vokk-reviews-cta-box a {
    color: #ffffff !important;
    opacity: 1 !important;
}


/* expliciete knopclasses */
html body.pb-layout-pack-current.pb-mode-medium
:is(
    .vokk-services-cta-button,
    .vokk-projects-cta-button,
    .vokk-about-cta-button,
    .vokk-reviews-cta-button
) {
    color: #ffffff !important;
}


/*
 * Light gebruikt binnen dit theme technisch ook pb-mode-medium
 * in combinatie met pb-mode-light-page.
 * Daarom bovenstaande regels bewust NIET uitsluiten voor Light.
 */

/* PB CURRENT CTA LIGHT MEDIUM CONTRAST END */

/* PB CURRENT CTA BUTTON CONTRAST START */

/*
 * Huidige uitstraling / Current
 * Medium + Light
 *
 * Alleen CTA-knopcontrast.
 * Dark en andere layoutpakketten niet raken.
 */

html body.pb-layout-pack-current.pb-mode-medium
:is(
    .vokk-services-cta-button,
    .vokk-projects-cta-button,
    .vokk-about-cta-button,
    .vokk-reviews-cta-button
) {
    background: var(--pb-primary) !important;
    background-image: none !important;

    color: var(--pb-text-inverse, #ffffff) !important;

    border-color: var(--pb-primary) !important;

    opacity: 1 !important;
    text-shadow: none !important;
}

html body.pb-layout-pack-current.pb-mode-medium
:is(
    .vokk-services-cta-button,
    .vokk-projects-cta-button,
    .vokk-about-cta-button,
    .vokk-reviews-cta-button
)
:is(span,strong) {
    color: inherit !important;
    opacity: 1 !important;
}

/* hover/focus ook leesbaar houden */
html body.pb-layout-pack-current.pb-mode-medium
:is(
    .vokk-services-cta-button,
    .vokk-projects-cta-button,
    .vokk-about-cta-button,
    .vokk-reviews-cta-button
):hover,

html body.pb-layout-pack-current.pb-mode-medium
:is(
    .vokk-services-cta-button,
    .vokk-projects-cta-button,
    .vokk-about-cta-button,
    .vokk-reviews-cta-button
):focus-visible {
    background: var(--pb-primary-dark, var(--pb-primary)) !important;
    color: #ffffff !important;
    border-color: var(--pb-primary-dark, var(--pb-primary)) !important;
}

/* PB CURRENT CTA BUTTON CONTRAST END */

/* PB CURRENT CTA BUTTON TEXT WHITE FINAL START */

html body.pb-layout-pack-current.pb-mode-medium
:is(
    .vokk-services-cta-button,
    .vokk-projects-cta-button,
    .vokk-about-cta-button,
    .vokk-reviews-cta-button
),
html body.pb-layout-pack-current.pb-mode-medium
:is(
    .vokk-services-cta-button,
    .vokk-projects-cta-button,
    .vokk-about-cta-button,
    .vokk-reviews-cta-button
) * {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* PB CURRENT CTA BUTTON TEXT WHITE FINAL END */

/* PB CURRENT CTA WHITE BUTTON FINAL START */

html body.pb-layout-pack-current.pb-mode-medium
:is(
    .vokk-services-cta-button,
    .vokk-projects-cta-button,
    .vokk-about-cta-button,
    .vokk-reviews-cta-button,
    .vokk-detail-cta-button
) {
    background: #ffffff !important;
    background-image: none !important;

    color: var(--pb-dark, #061426) !important;
    -webkit-text-fill-color: var(--pb-dark, #061426) !important;

    border: 1px solid rgba(15,23,42,.12) !important;

    opacity: 1 !important;
    text-shadow: none !important;
}

/* eventuele spans/pijltjes ook donker */
html body.pb-layout-pack-current.pb-mode-medium
:is(
    .vokk-services-cta-button,
    .vokk-projects-cta-button,
    .vokk-about-cta-button,
    .vokk-reviews-cta-button,
    .vokk-detail-cta-button
) * {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    opacity: 1 !important;
}

/* hover/focus = lichtgrijs */
html body.pb-layout-pack-current.pb-mode-medium
:is(
    .vokk-services-cta-button,
    .vokk-projects-cta-button,
    .vokk-about-cta-button,
    .vokk-reviews-cta-button,
    .vokk-detail-cta-button
):hover,

html body.pb-layout-pack-current.pb-mode-medium
:is(
    .vokk-services-cta-button,
    .vokk-projects-cta-button,
    .vokk-about-cta-button,
    .vokk-reviews-cta-button,
    .vokk-detail-cta-button
):focus-visible {
    background: #e9edf2 !important;
    background-image: none !important;

    color: var(--pb-dark, #061426) !important;
    -webkit-text-fill-color: var(--pb-dark, #061426) !important;

    border-color: rgba(15,23,42,.18) !important;
}

/* PB CURRENT CTA WHITE BUTTON FINAL END */

/* PB BUSINESS CONTACT HOURS CONTRAST FINAL START */

@media screen and (min-width: 969px) {

    html body.pb-layout-pack-business.pb-template-page-contact.pb-mode-medium:not(.pb-mode-dark)
    .vokk-contact-hours-row strong {
        color: #dce4ec !important;
        -webkit-text-fill-color: #dce4ec !important;
        opacity: 1 !important;
    }

}

/* PB BUSINESS CONTACT HOURS CONTRAST FINAL END */


/* ================================================================
 * PB DARK CTA TEXT CONTRACT - SITEWIDE
 *
 * Donkere CTA-componenten beheren hun eigen tekstcontrast.
 * Algemene Light/Medium contentkleuren mogen h2/p binnen deze
 * componenten niet donker maken.
 *
 * Alleen kleur/contrast. Geen layout of typografie.
 * ================================================================ */

html body
:is(
    .vokk-services-cta-box,
    .vokk-about-cta-box,
    .vokk-projects-cta-box,
    .vokk-reviews-cta-box,
    .vokk-detail-cta-box
)
:is(h1,h2,h3,h4,h5,h6) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}

html body
:is(
    .vokk-services-cta-box,
    .vokk-about-cta-box,
    .vokk-projects-cta-box,
    .vokk-reviews-cta-box,
    .vokk-detail-cta-box
)
p {
    color: rgba(255,255,255,.84) !important;
    -webkit-text-fill-color: rgba(255,255,255,.84) !important;
    opacity: 1 !important;
}