/*
Theme Name: Wux Theme
Author: Wux
Author URI: https://wux.nl/
Description: Wux is het custom wordpress thema van Wux - Internetbureau
Version: 1.6.0
Requires PHP: 8.3.0
Text Domain: wuxnl-theme
*/

/* @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap'); */


:root {
    --fs: 1.4rem;
    --lh: 1.6;
    
    /* Custom beziers */
    --cb--smooth: cubic-bezier(.58,.22,.2,.96);

    /* Color variables */
    --clr-primary: #02A941;
    --clr-primary-130: #008031;
    --clr-primary-110: #009F3C;
    --clr-primary-20: rgb(2, 169, 65, .2);
    --clr-primary-rgb: 2, 169, 65;
    
    --clr-secondary: #000744;
    --clr-secondary-50: #010844;
    
    --clr-heading: #000000;
    --clr-text: #212121;
    
    --clr-dark: #212121;
    --clr-dark-50: rgb(33, 33, 33, .5);
    
    --clr-light: #ffff;
    --clr-light-50: rgb(255, 255, 255, .5);
    
    --clr-grey: #FAFAFA;
    --clr-grey-120: #F5F5F5;
    --clr-grey-130: #E7E6E6;
    --clr-grey-140: #D5D5D5;
    
    --clr-border: #E3E3E3; 
    
    --clr-danger: #e2401c;
    --clr-info: #3d9cd2;
    --clr-success: #1CB435;
    --clr-rating: #FFC343;

    /* Gradient BG's */
    --gradient-primary: linear-gradient(90deg, #009F3C 0%, #17A24B 30%, #00A940 100%);

    /* Font variables */
    --font-primary: 'Poppins', sans-serif;

    /* Container max-width variables */
    --container-width: 100%;
    --container-width--sm: 580px;
    --container-width--md: 760px;
    --container-width--lg: 920px;
    --container-width--xl: 1120px;
    --container-width--xxl: 1320px;
    --container-width--xxxl: 1520px;

    --global-transition-duration: var(--ts-25);
    --global-transition-function: var(--cb--smooth);
}

@media (min-width: 768px) {
    :root {
        --fs: 1.6rem;
    }
}

body { font-family: var(--font-primary); }

/*** ---------- Typography ---------- ***/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--clr-heading); font-weight: 600; }
h1, .h1 { --fs: clamp(2.8rem, 5vw, 5.6rem); --lh: 1.2; }
h2, .h2 { --fs: clamp(2.4rem, 4vw, 4rem); --lh: 1.2; }
h3, .h3 { --fs: clamp(2rem, 3vw, 2.4rem); --lh: 1.2; }
h4, .h4 { --fs: 1.8rem; --lh: 2rem; }

.content-section :is(h2, .h2) { --fs: clamp(2rem, 3vw, 2.4rem); }


/*** ---------- Text styling ---------- ***/
.wpb-text :is(p, li, ul){ color: var(--clr-text); }
.wpb-text p:has(+ :is(h1, h2, h3)) em{ --fs: clamp(1.4rem, 3vw, 1.8rem); --font-clr: var(--clr-primary); font-size: var(--fs); line-height: 1; color: var(--font-clr); font-weight: 300; font-style: normal; }
.wpb-text p:has(+ :is(h1, h2, h3)) em::before{
    --clr: var(--font-clr); --size: calc(var(--fs) - .3rem); content: ''; --src: url('/app/themes/wuxnl-theme/assets/icons/fa/solid/bolt.svg'); display: block; -webkit-mask-image: var(--src); mask-image: var(--src); -webkit-mask-size: contain; margin-right: 1rem;
    mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; display: inline-block; width: var(--size); height: var(--size); min-width: var(--size); min-height: var(--size); background-color: var(--clr);
}
.wpb-text p:has(em) + :is(h1, h2, h3) { margin-top: 1rem !important; }
.wpb-text p a{ color: var(--clr-primary); transition: color var(--ts-25) ease; }
.wpb-text p a:hover{ color: var(--clr-primary-130); }

li ul { margin-top: 1.5rem; }

.wpb-text ul{ padding-left: 2rem; }

:is(.wpb-text, .card-text).list-as-icons ul{ list-style: none; padding-left: 0; }
:is(.wpb-text, .card-text).list-as-icons ul li{ position: relative; padding-left: 3.8rem; }
:is(.wpb-text, .card-text).list-as-icons ul li + li{ margin-top: 1.5rem; }
:is(.wpb-text, .card-text).list-as-icons ul li:has(em) em{ font-style: normal; }
:is(.wpb-text, .card-text).list-as-icons ul li::before{ 
    --size: 2.5rem; --bg-clr: var(--clr-grey-120); content: ''; position: absolute; left: 0; top: 0; width: var(--size); height: var(--size); background-color: var(--bg-clr); border-radius: 50%; 
    border: 1px solid var(--clr-border); background-image: url('/app/themes/wuxnl-theme/assets/icons/check-icon--green.svg'); background-position: center; background-size: 50%; background-repeat: no-repeat;
}
:is(.wpb-text, .card-text).list-as-icons ul li:has(em)::before{ background-image: url('/app/themes/wuxnl-theme/assets/icons/xmark-icon--red.svg'); background-position: center; background-size: 50%; background-repeat: no-repeat; }
:is( .wpb-bg-clr--primary, .wpb-bg-clr--secondary ) .wpb-text.list-as-icons ul li::before{ --bg-clr: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.4); background-image: url('/app/themes/wuxnl-theme/assets/icons/check-icon--white.svg'); }
:is( .wpb-bg-clr--primary, .wpb-bg-clr--secondary ) .wpb-text.list-as-icons ul li:has(em)::before{ --bg-clr: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.4); background-image: url('/app/themes/wuxnl-theme/assets/icons/xmark-icon--white.svg'); }

.wpb-text ol{ padding-left: 0; list-style: none; counter-reset: list-counter; }
.wpb-text ol li{ position: relative; padding-left: 3.8rem; counter-increment: list-counter; }
.wpb-text ol li + li{ margin-top: 1.5rem; }
.wpb-text ol li::before { 
    --size: 2.5rem; --bg-clr: var(--clr-grey-120); content: counter(list-counter); position: absolute; left: 0; top: 0; width: var(--size); height: var(--size); background-color: var(--bg-clr); 
    border-radius: 50%; border: 1px solid var(--clr-border); color: var(--clr-primary); font-size: 1.2rem; font-weight: bold; display: flex; align-items: center; justify-content: center;
}

.wpb-header .wpb-text p:has(+ :is(h1, h2, h3)) em{ --font-clr: rgb(255, 255, 255, .8); }
:is(.wpb-bg-clr--primary:not(:has(.wpb-bg-clr--white)), .wpb-bg-clr--secondary:not(:has(.wpb-bg-clr--white))) .wpb-text p:has(+ :is(h1, h2, h3)) em{ --font-clr: #fff; }
:is(.wpb-bg-clr--primary:not(:has(.wpb-bg-clr--white)), .wpb-bg-clr--secondary:not(:has(.wpb-bg-clr--white))) .wpb-text { --clr-text: #fff; --clr-heading: #fff; }


/*** ---------- Whitespace ---------- ***/
[class*="wpb-wst"] { --pt: 0; padding-top: var(--pt); }
[class*="wpb-wsb"] { --pb: 0; padding-bottom: var(--pb); }

.wpb-wst--none { --pt: 0; }
.wpb-wst--small { --pt: 1.8rem; }
.wpb-wst--medium { --pt: 2.5rem; }
.wpb-wst--large { --pt: 4rem; }

.wpb-wsb--none { --pb: 0; }
.wpb-wsb--small { --pb: 1.8rem; }
.wpb-wsb--medium { --pb: 2.5rem; }
.wpb-wsb--large { --pb: 4rem; }

@media (min-width: 992px) {
    .wpb-wst--small { --pt: 6.4rem; }
    .wpb-wst--medium { --pt: 8rem; }
    .wpb-wst--large { --pt: 11rem; }
    
    .wpb-wsb--small { --pb: 6.4rem; }
    .wpb-wsb--medium { --pb: 8rem; }
    .wpb-wsb--large { --pb: 11rem; }
}

.content-section.wpb-wsb--small { --pb: 1.4rem; }

@media (min-width: 992px) {
    .content-section.wpb-wst--small { --pt: 3.2rem; }
    .content-section.wpb-wst--medium { --pt: 5.4rem; }
    .content-section.wpb-wst--large { --pt: 7.8rem; }
    
    .content-section.wpb-wsb--small { --pb: 3.2rem; }
    .content-section.wpb-wsb--medium { --pb: 5.4rem; }
    .content-section.wpb-wsb--large { --pb: 7.8rem; }
}


/*** ---------- Icons ---------- ***/
.wpb-icon-wrapper { width: 4.5rem; height: 4.5rem; border-radius: 50%; display: inline-grid; place-items: center; background-color: #fff; }
.wpb-icon-wrapper .wpb-icon { --clr: var(--clr-primary); }
.wpb-icon-wrapper--primary { background-color: var(--clr-primary); }
.wpb-icon-wrapper--primary .wpb-icon { --clr: #fff; }
.wpb-icon-wrapper--secondary { background-color: var(--clr-secondary); }  
.wpb-icon-wrapper--secondary .wpb-icon { --clr: #fff; }
.wpb-icon-wrapper--grey { background-color: var(--clr-grey); border: 1px solid var(--clr-border); }  
.wpb-icon-wrapper--grey .wpb-icon { --clr: var(--clr-primary); }


.wpb-icon-wrapper--small { width: 2.5rem; height: 2.5rem; min-width: 2.5rem; }
.wpb-icon-wrapper--small .wpb-icon { --w: 1.6rem; --h: 1.6rem; }

.wpb-icon-wrapper--medium { width: 3rem; height: 3rem; min-width: 3rem; }
.wpb-icon-wrapper--medium .wpb-icon { --w: 1.8rem; --h: 1.8rem; }

.wpb-icon-wrapper--large { width: 3.5rem; height: 3.5em; min-width: 3.5rem; }
.wpb-icon-wrapper--large .wpb-icon { --w: 2rem; --h: 2rem; }

.wpb-icon-wrapper--20 { width: 2rem; height: 2rem; min-width: 2rem; }
.wpb-icon-wrapper--20 .wpb-icon { --w: 1.2rem; --h: 1.2rem; }




/*** ---------- Background colors ---------- ***/
.wpb-bg-clr--primary { background-color: var(--clr-primary); }
.wpb-bg-clr--secondary { background-color: var(--clr-secondary); }



/*** ---------- Buttons ---------- ***/
.btn, .gform_button, .gform_next_button, .gform_previous_button, .button { --lh: 1; --p: 0 2.6rem; --br: 5rem; font-weight: 500; }

.btn.btn--primary, .button { --clr: rgb(255,255,255); --bg-clr: var(--clr-primary); --border: 1px solid transparent; --hover-bg-clr: var(--clr-primary-130); }
.btn.btn--primary .wpb-icon { --clr: rgb(255,255,255); }

.btn.btn--secondary { --clr: #fff; --bg-clr: var(--clr-secondary); --border: 1px solid transparent; --hover-clr: #fff; --hover-bg-clr: var(--clr-dark); }
.btn.btn--secondary .wpb-icon { --clr: var(--hover-clr); }

.btn.btn--outline { --clr: var(--clr-text); --border: 1px solid var(--clr-primary); --hover-bg-clr: var(--clr-primary); --hover-border: 1px solid var(--clr-primary); }

.btn.btn--underline { 
    --br: 0; --bg-clr: transparent; --clr: var(--clr-text); --hover-clr: var(--clr-primary); --border: 1px solid var(--clr-border); --hover-border: 1px solid var(--clr-primary); 
    justify-content: space-between; --p: 1rem 0; border: none; border-bottom: var(--border); font-size: 1.6rem; font-weight: 400;
}
.btn.btn--underline:hover{ border: none !important; border-bottom: var(--hover-border) !important; }
.btn.btn--underline .wpb-icon{ opacity: 1; }

.btn .wpb-icon{ opacity: .6; --w: 1.6rem; --h: 1.6rem; }

.wpb-bg-clr--secondary .btn.btn--secondary{ --bg-clr: #fff3; }
:is( .wpb-bg-clr--primary, .wpb-bg-clr--secondary ) .btn.btn--outline{ --border: 1px solid #fff; }
:is( .wpb-bg-clr--primary ) .btn.btn--outline{ --hover-bg-clr: var(--clr-secondary); }
:is( .wpb-header, .wpb-navigation ) .btn.btn--outline{ --border: 1px solid #fff; --clr: #fff; --hover-clr: var(--clr-primary); --hover-bg-clr: #fff; }

/*** ---------- Background assets ---------- ***/
section:not(.wpb-header):has( .wpb-section__bg-assets){ overflow: hidden; }
section:has( .wpb-section__bg-assets) .container{ z-index: 1; }
.wpb-section__bg-assets{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.wpb-section__bg-assets .wpb-section__bg-asset--left{ position: absolute; left: 0; bottom: 0;  }
.wpb-section__bg-assets .wpb-section__bg-asset--right{ position: absolute; right: 0; bottom: 0;  }
.wpb-section__bg-assets .wpb-section__bg-asset--left:is(.wpb-bg-asset--chargestation){ left: 10rem; }
.wpb-section__bg-assets .wpb-section__bg-asset--right:is(.wpb-bg-asset--chargestation){ right: 10rem; }
.wpb-section__bg-assets .wpb-section__bg-asset--right:is(.wpb-bg-asset--building){ transform: scaleX(-1); }

.wpb-section__bg-assets .wpb-bg-asset--building{ width: 40rem; height: 25rem; background: url("/app/themes/wuxnl-theme/assets/img/building--light.png"); background-size: contain; background-repeat: no-repeat; }
.wpb-section__bg-assets .wpb-bg-asset--chargestation{ width: 10rem; height: 40rem; background: url("/app/themes/wuxnl-theme/assets/img/slimladen-paal--outline.png"); background-size: contain; background-repeat: no-repeat; }

:is(.wpb-bg-clr--primary, .wpb-bg-clr--secondary) .wpb-section__bg-assets .wpb-bg-asset--chargestation{ opacity: .6; }

@media (width < 768px){
   .wpb-section__bg-assets .wpb-bg-asset--building + .wpb-bg-asset--building { display: none; }
}
@media (width < 992px){
   .wpb-section__bg-assets .wpb-bg-asset--chargestation { display: none; }
}

/*** ---------- Navigation ---------- ***/
.wpb-navigation { background: var(--gradient-primary); }
/* .wpb-navigation.wpb-navigation--primary { overflow: hidden; } */
.wpb-navigation__top { padding-top: 1.6rem; padding-bottom: 1.6rem; }

/*** ---------- Header ---------- ***/
.wpb-header { --bg-clr: var(--gradient-primary); --clr-text: #fff; --clr-heading: #fff; --gc: 1; --gap: 3.2rem; background: var(--bg-clr); }
.wpb-header .wpb-text >*:not(h1, h2, h3, h4, h5, h6, a){ color: var(--clr-text); }
.wpb-header .wpb-text p{ font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 300; }

.wpb-header .wpb-person{ gap: 1rem; }
.wpb-header .wpb-person .wpb-person__text span{ opacity: 1; font-weight: 200; }
.wpb-header .wpb-person figure.wpb-profile{ border: none; }

.wpb-header .btn.btn--link{ --clr: #fff; --hover-clr: rgba(255, 255, 255, 0.8); }

.wpb-header.wpb-header--home .container { display: grid; column-gap: var(--gap); row-gap: 2rem; grid-template-columns: 1fr; align-items: center; }
.wpb-header.wpb-header--home .wpb-text .btn-group{ margin-top: 2.8rem; }
.wpb-header.wpb-header--home .wpb-text .btn-group{ justify-content: center; }
.wpb-header.wpb-header--home .wpb-text{ --mt: .5em; }
.wpb-header.wpb-header--home .wpb-text p:has(+ :is(h1, h2, h3)) em{ justify-content: center; }

.wpb-header.wpb-header--home .container--blockcards{ margin-top: 6.4rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.wpb-header.wpb-header--home:has(.container--blockcards){ --blocks-offset: 40rem; margin-bottom: calc(var(--blocks-offset) - var(--pb)); }
.wpb-header.wpb-header--home:has(.container--blockcards) .container--blockcards{ margin-bottom: calc(var(--blocks-offset) * -1); }

.wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-stations { display: none; position: absolute; bottom: 0; gap: 1rem; }
.wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-stations img{ width: 7.5rem; }
.wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-stations:has(:nth-child(2)){ bottom: -2.6rem; }

.wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-logos{ display: none; position: absolute; top: 5rem; left: 4vw; bottom: 10rem; transform: scale(.75); z-index: 10; }
.wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-logos .wpb-logo-wrapper{ position: absolute; }
.wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-logos>:nth-child(1){ left: -2vw; }
.wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-logos>:nth-child(2){ left: 7vw; top: 10rem; }
.wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-logos>:nth-child(3){ left: 2vw; top: 25rem; }
.wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-logos>:nth-child(4){ left: 15vw; top: 22rem; }

.wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-logos:has(:nth-child(7)){ left: -1rem; top: 5rem; }
.wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-logos:has(:nth-child(7))>:nth-child(1){ left: 0; }
.wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-logos:has(:nth-child(7))>:nth-child(2){ left: 10vw; top: 9.5rem; }
.wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-logos:has(:nth-child(7))>:nth-child(3){ left: 2.5vw; top: 20rem; }
.wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-logos:has(:nth-child(7))>:nth-child(4){ left: 12.5vw; top: 25rem; }
.wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-logos:has(:nth-child(7))>:nth-child(5){ left: 1vw; top: 35rem; }
.wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-logos:has(:nth-child(7))>:nth-child(6){ left: 16vw; top: 40rem; }
.wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-logos:has(:nth-child(7))>:nth-child(7){ left: 7.5vw; top: 54rem; }


@media (min-width: 768px) and (max-width: 1200px) {
    .wpb-header.wpb-header--home:has( .wpb-bg-asset-logos) .container:first-of-type .wpb-text{ padding: 0 6rem; }
}

@media (min-width: 768px) {
    .wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-logos{ display: block; }
}
@media (min-width: 992px) {
    .wpb-header.wpb-header--home { --gc: 2; }
    .wpb-header.wpb-header--home .container--blockcards{ margin-top: 11rem; }
    .wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-stations { display: flex; right: 3rem; }
}
@media (min-width: 1200px) {
    .wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-stations { right: 10rem; }
}
@media (min-width: 1400px) {
    .wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-logos{ transform: scale(1) }
    .wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-logos:has(:nth-child(7)){ left: 2rem; top: 10rem; }
    .wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-stations img{ width: 10rem; }
}
@media (min-width: 1600px) {
    .wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-stations { right: 25rem; }
    .wpb-header.wpb-header--home .wpb-section__bg-assets .wpb-bg-asset-logos:has(:nth-child(7)){ left: 4rem; top: 15rem; }
}

.wpb-header.wpb-header--subpage .wpb-text{ --mt: .8rem; }
.wpb-header.wpb-header--subpage .wpb-text .wpb-postdate{ font-size: 1.6rem; font-weight: 300; opacity: .8; }
.wpb-header.wpb-header--subpage .wpb-info-bar{ display: flex; align-items: center; gap: 2rem; margin-top: 3rem; }
.wpb-header.wpb-header--subpage .wpb-info-bar figure.wpb-profile{ --size: 4.5rem; }

.wpb-header.wpb-header--subpage .container{ display: grid; gap: 4rem; }

@media (min-width: 992px) {
    .wpb-header.wpb-header--subpage .wpb-info-bar{ gap: 4rem; }
    .wpb-header.wpb-header--subpage .container{ grid-template-columns: 1fr 40rem; }
}
@media (min-width: 1200px) {
    .wpb-header.wpb-header--subpage .container{ grid-template-columns: 1fr 53rem; }
}

.wpb-header.wpb-header--archive { overflow: hidden; }
.wpb-header.wpb-header--archive .container--custom{ --wpb-width: 760px; }
.wpb-header.wpb-header--archive h1{ font-size: clamp(2.8rem, 5vw, 4.8rem); }
.wpb-header.wpb-header--archive .wpb-text{ --mt: .8rem; text-align: center; margin-bottom: 2.4rem; }
.wpb-header.wpb-header--subpage .wpb-section__bg-assets{ overflow: hidden; }


/*** ---------- Losse elementen ---------- ***/
figure.wpb-profile{ --size: 6rem; --border: 1px solid var(--clr-border); width: var(--size); height: var(--size); border-radius: 50%; overflow: hidden; border: var(--border); }

.wpb-person{ display: flex; align-items: center; gap: 1.8rem; }
.wpb-person .wpb-person__text{ display: grid; }
.wpb-person .wpb-person__text strong{ font-weight: 700; }
.wpb-person .wpb-person__text span{ color: var(--clr-text); opacity: .6; line-height: 1; }

.wpb-stars{ 
    height: 1.5rem; width: 9.6rem; --mask-image: url("/app/themes/wuxnl-theme/assets/icons/5-stars-review.svg"); display: block;
    -webkit-mask-image: var(--mask-image); mask-image: var(--mask-image); -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left; mask-position: left;
    background: linear-gradient(to right, var(--clr-rating), var(--clr-rating) var(--rating-percent), #0002 var(--rating-percent, 100%));
}

.btn-download-app{ transition: opacity var(--ts-25) ease; }
.btn-download-app img{ --max-w: 10rem; max-width: var(--max-w); }
.btn-download-app:hover{ opacity: .8; }

@media (min-width: 992px){ 
    .btn-download-app img{ --max-w: 15rem; }
}

.wpb-usp{ display: flex; align-items: center; gap: 1rem; }

.wpb-usp-outer{ --mt: 5rem; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.wpb-usp.wpb-usp--card{ --p: 1.5rem; padding: var(--p); border: 2px solid var(--clr-dark-50); border-radius: 1.5rem; flex-direction: column; align-items: start; }
.wpb-usp.wpb-usp--card i{ --w: 2.4rem; --h: 2.4rem; --clr: var(--clr-dark-50); }
.wpb-usp.wpb-usp--card span{ font-weight: 600; font-size: clamp(1.4rem, 2vw, 1.8rem); }

@media (min-width: 992px){ .wpb-usp.wpb-usp--card{ --p: 2.5rem; } }

:is(.wpb-bg-clr--primary:not(:has(.wpb-bg-clr--white)), .wpb-bg-clr--secondary:not(:has(.wpb-bg-clr--white))) .wpb-usp.wpb-usp--card{ border-color: var(--clr-light-50); color: #fff; }
:is(.wpb-bg-clr--primary:not(:has(.wpb-bg-clr--white)), .wpb-bg-clr--secondary:not(:has(.wpb-bg-clr--white))) .wpb-usp.wpb-usp--card i{ --clr: var(--clr-light-50); }

.wpb-inhoudsopgave{ position: sticky; top: 3.6rem; }
.wpb-inhoudsopgave h3{ margin-bottom: 2rem; font-weight: 300; font-size: 1.6rem; }
.wpb-inhoudsopgave .index a{ text-decoration: none; font-size: 1.8rem; font-weight: 600; color: var(--clr-primary); transition: color var(--ts-25) ease; }
.wpb-inhoudsopgave .index + .index{ margin-top: 2rem; }
.wpb-inhoudsopgave .index.active a{ color: var(--clr-secondary-50); }

@media (width < 992px){ 
    .wpb-inhoudsopgave{ --border: 1px solid var(--clr-border); padding-bottom: 3rem; border-bottom: var(--border); }
}

.wpb-icotext{ display: flex; align-items: center; gap: .8rem; }
.wpb-icotext span strong{ line-height: 1; }
.wpb-icotext span p{ font-size: 1.6rem !important; font-weight: 200; line-height: 1; }

.wpb-categories{ 
    --bg: var(--clr-grey); --border: 1px solid var(--clr-border); --p: 2rem; padding: var(--p); display: flex; justify-content: space-between; text-decoration: none;
    font-size: 1.8rem; font-weight: 600; align-items: center; background-color: var(--bg); border: var(--border); border-radius: .8rem; transition: background var(--ts-25) ease, border var(--ts-25) ease, color var(--ts-25) ease;
}
.wpb-categories span{ display: flex; gap: 1.5rem; align-items: center; }
.wpb-categories span i{ --clr: var(--clr-primary); }
.wpb-categories:hover{ background-color: var(--clr-primary-20); border-color: transparent;  }

@media (max-width: 576px) {
    section:has( .owl-carousel):has(.owl-nav:not(.disabled)) .wpb-text{ margin-bottom: 7rem; }
    section:has( .owl-carousel):has(.owl-nav:not(.disabled)) .wpb-section__header{ padding-bottom: 7rem; }
    .owl-carousel .owl-nav{ width: 100%; bottom: calc(100% + 2rem); }
    .owl-carousel .owl-dots{  left: 4rem; right: 4rem; justify-content: center; bottom: calc(100% + 2rem); }
}

.wpb-logo-wrapper{ --size: 5.5rem; width: var(--size); height: var(--size); border-radius: 1rem; border: 1px solid var(--clr-border); padding: 1rem; background: #fff; box-shadow: 1px 1px 20px #0004; }
.wpb-logo-wrapper img{ display: flex; width: 100%; height: auto; margin: auto; }

@media (min-width: 576px) {
    .wpb-logo-wrapper{ --size: 7rem; }
}
@media (min-width: 992px) {
    .wpb-logo-wrapper{ --size: 8.5rem; }
}
@media (min-width: 1400px) {
    .wpb-logo-wrapper{ --size: 10rem; border-radius: 1.5rem; }
}

.wpb-picture-stack{ --border-color: #fff; display: flex; }
.wpb-picture-stack .wpb-profile{ --size: 4.8rem; border: 2px solid var(--border-color); }
.wpb-picture-stack .wpb-profile:not(:first-child){ margin-left: -1.5rem; }
.wpb-picture-stack .wpb-profile img {width: 100%; height: 100%; object-fit: cover; }

.wpb-searchbar{ position: relative; }
.wpb-searchbar input{ --p: 0 2.2rem; --br: 5rem; }
.wpb-searchbar button{ 
    --bg: var(--clr-primary); --br: 5rem; position: absolute; right: 0; top: 0; bottom: 0; width: 5rem; background-color: var(--bg); border: none; border-top-right-radius: var(--br); 
    border-bottom-right-radius: var(--br); transition: background var(--ts-25) ease;
}
.wpb-searchbar button i{ --clr: #fff; }
.wpb-searchbar button:hover{ --bg: var(--clr-dark); cursor: pointer; }

.wpb-header .wpb-searchbar{ --mt: 2rem; }
.wpb-header .wpb-searchbar input{ min-height: 6rem !important; font-size: 1.6rem; }
.wpb-header .wpb-searchbar button{ --bg: var(--clr-dark); width: 6rem; }
.wpb-header .wpb-searchbar button i{ --w: 2rem; --h: 2rem; }
.wpb-header .wpb-searchbar button:hover{ --bg: var(--clr-primary-130); }


.wpb-talkcloud { 
    --p: 1.6rem 2rem; --br: 1.5rem; --bg-clr: var(--clr-primary); padding: var(--p); border-radius: var(--br); width: fit-content; max-width: 47rem; background-color: var(--bg-clr); 
    color: #fff; box-shadow: 0px 0px 20px #0002; position: absolute; top: -1rem; left: 1rem; right: 3rem; font-size: 1.4rem; z-index: 5;
}
.wpb-talkcloud::before{ 
    --src: url('/app/themes/wuxnl-theme/assets/img/talkcloud-asset.svg'); content: ''; position: absolute; top: calc(100% - .5rem); right: 3rem; width: 8rem; height: 2rem; --clr: var(--clr-primary); --w: 8rem; --h: 2rem; 
    -webkit-mask-image: var(--src); mask-image: var(--src); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; 
    mask-position: center; display: inline-block; width: var(--w); height: var(--h); min-width: var(--w); min-height: var(--h); background-color: var(--clr);
}
figure.wpb-image:has(.wpb-talkcloud){ position: relative; }
.wpb-talkcloud.wpb-talkcloud--align-bottom{ bottom: -1rem; right: 1rem; left: auto; top: auto; }
.wpb-talkcloud.wpb-talkcloud--align-bottom::before{ top: auto; right: auto; left: 1rem; bottom: calc(100% - .5rem); transform: scale(-1); }
.wpb-talkcloud.wpb-talkcloud--fontsize--large{ font-size: 1.8rem; }

@media (min-width: 992px){
    .wpb-talkcloud { top: -3rem; left: 3rem; }
    .wpb-talkcloud.wpb-talkcloud--align-bottom{ bottom: -3rem; right: 3rem; }
}


/*** ---------- Categories overview ---------- ***/
.wpb-categories-overview .container--categories{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }

@media (min-width: 992px){
    .wpb-categories{ --p: 3rem 2.5rem; }
    .wpb-categories-overview .container--categories{ column-gap: 3rem; }
}

/*** ---------- Single content ---------- ***/
.wpb-content__main .content-section{ scroll-margin-top: 3rem; }

.content-section:not(.content-section--video){ max-width: 73.5rem; }

.wpb-youtube-video{ border-radius: 1.5rem; overflow: hidden; border: 2px solid var(--clr-border); }
.wpb-youtube-video .youtube-play{ z-index: 5; }
.wpb-youtube-video .youtube-play .play-icon { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: background var(--ts-25) ease; }
.wpb-youtube-video .youtube-play .play-icon i{ --clr: #fff; --w: 4rem; --h: 4rem; transition: transform var(--ts-25) ease; }
.wpb-youtube-video .youtube-play img{ width: 100%; height: 100%; object-fit: cover; }
.wpb-youtube-video .youtube-play:hover .play-icon{ background-color: #0002; cursor: pointer; }
.wpb-youtube-video .youtube-play:hover .play-icon i{ transform: scale(1.2); }

/*** ---------- Footer ---------- ***/
.wpb-footer{ position: relative; overflow: hidden; }
.wpb-footer.wpb-footer--primary {  }

.by-wux { --br: .4rem; display: flex; position: absolute; right: 0; left: 0; bottom: 0; background-color: var(--clr-grey-140); border-top-left-radius: var(--br); border-top-right-radius: var(--br); padding: .4rem .8rem; margin: auto; width: fit-content; transition: background var(--global-transition-duration) var(--global-transition-function), box-shadow var(--global-transition-duration) var(--global-transition-function); }
.by-wux:hover { background-color: var(--clr-primary); box-shadow: 1px 1px 30px var(--clr-primary-20); }
.by-wux span { font-size: 1.1rem; }
.by-wux i { --clr: rgb(255,255,255, 1); --w: 4.7rem; --h: 1.5rem; display: inline-flex; }

@media (min-width: 768px){ 
    .by-wux { left: auto; right: -2rem; bottom: 25rem; transform: rotate(-90deg); }
}
@media (min-width: 1200px){ 
        .by-wux { bottom: 15rem; }
}


/*** ---------- API document text styling ---------- ***/
h1.api-document,
h2.api-document,
h3.api-document,
h4.api-document {margin-top: 1rem;}
p.api-document {margin-top: 0.6rem;}
ul.api-document {margin-left: 4rem;}