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

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

    /* Color variables */
    --clr-primary: #431965;
    --clr-primary-20: #E2CEF3;
    --clr-primary-rgb: rgb(67, 25, 101);
    
    --clr-secondary: #007E75;
    --clr-secondary-20: #B9DFDA;

    --clr-heading: var(--clr-primary);
    --clr-text: rgba(86,104,103,1);

    --clr-dark: var(--clr-primary);

    --clr-light: #E3EFEE;
    --clr-white: #FFF;

    --clr-border: rgb(222, 226, 230); 
    
    --clr-danger: #e2401c;
    --clr-info: #3d9cd2;
    --clr-success: #1CB435;

    /* Font variables */
    --font-primary: 'Inria Sans', sans-serif;
    --font-secondary: 'Caveat', cursive;

    /* Container max-width variables */
    --container-width: 100%;
    --container-width--sm: 720px;
    --container-width--md: 720px;
    --container-width--lg: 960px;
    --container-width--xl: 1140px;
    --container-width--xxl: 1360px;
    --container-width--xxxl: 1360px;

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

}

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

body { font-family: var(--font-primary); font-weight: 300; letter-spacing: 0;}

/*** ---------- Typography ---------- ***/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { }
h1, .h1 { --fs: clamp(3.6rem, 5vw, 4rem); --lh: 1; }
h2, .h2 { --fs: clamp(2.4rem, 4vw, 2.8rem); --lh: 1; }
h3, .h3 { --fs: clamp(1.6rem, 3vw, 1.8rem); --lh: 1; }
h4, .h4 { --fs: 1.6rem; --lh: 2rem; }

/*** ---------- 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: 3.2rem; }
.wpb-wst--medium { --pt: 4.8rem; }
.wpb-wst--large { --pt: 6.2rem; }

.wpb-wsb--none { --pb: 0; }
.wpb-wsb--small { --pb: 3.2rem; }
.wpb-wsb--medium { --pb: 4.8rem; }
.wpb-wsb--large { --pb: 6.2rem; }

@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; }
}

/*** ---------- Background colors ---------- ***/
.wpb-bg-clr--transparent        { background-color: transparent; }
.wpb-bg-clr--primary            { background-color: var(--clr-primary); }
.wpb-bg-clr--secondary          { background-color: var(--clr-secondary); }
.wpb-bg-clr--transparent-light  { background: linear-gradient(to bottom, transparent 80%, var(--clr-light) 20%); }
.wpb-bg-clr--transparent-dark   { background: linear-gradient(to bottom, transparent 80%, var(--clr-primary) 20%); }
.wpb-bg-clr--light              { background-color: var(--clr-light); }
.wpb-bg-clr--dark               { background-color: var(--clr-dark); }

.wpb-ctr-bg-clr--primary        { background-color: var(--clr-primary); }
.wpb-ctr-bg-clr--secondary      { background-color: var(--clr-secondary); }
.wpb-ctr-bg-clr--light          { background-color: var(--clr-light); }
.wpb-ctr-bg-clr--white          { background-color: #fff; }


/*** ---------- Text colors ---------- ***/
.wpb-clr--white *:not(.btn, .btn *)     { color: #fff }
.wpb-clr--primary *:not(.btn, .btn *)   { color: var(--clr-primary); }
.wpb-clr--secondary *:not(.btn, .btn *) { color: var(--clr-secondary); }


/*** ---------- Buttons ---------- ***/
.btn, .gform_button, .gform_next_button, .gform_previous_button, .button { --fs: 1.6rem; --lh: 1; --p: 0 2rem; --br: 1rem; font-weight: 600; }

.btn.btn--primary { --clr: var(--clr-white); --bg-clr: var(--clr-primary); --border: 1px solid transparent; }

.btn.btn--secondary, .button { --clr: var(--clr-white); --bg-clr: var(--clr-secondary); --border: 1px solid transparent; --hover-clr: var(--clr-secondary); --hover-bg-clr: var(--clr-secondary-20); }
.btn.btn--secondary-light, .button { --clr: var(--clr-white); --bg-clr: var(--clr-secondary-20); --border: 1px solid transparent; --hover-clr: var(--clr-white); --hover-bg-clr: var(--clr-secondary); }

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

.btn.btn--white {--clr: var(--clr-primary); --bg-clr: var(--clr-white); --border: 1px solid var(--clr-white); --hover-border: 1px solid var(--clr-white); --hover-clr: var(--clr-white); --hover-bg-clr: transparent; }
.wpb-ctr-bg-clr--primary .btn.btn--white {--clr: var(--clr-primary) !important;}
.wpb-ctr-bg-clr--secondary .btn.btn--white {--clr: var(--clr-secondary)!important;}


/*** ---------- Assets ---------- ***/
.wpb-bg-asset {position: absolute; bottom: -30%; z-index: 0;}
.wpb-bg-asset.left { margin-left: -15%;}
.wpb-bg-asset.right { margin-right: -15%;}


/*** ---------- USPS ---------- ***/
.wpb-usp-list {padding-left: 0 !important;}
.wpb-usp-list .usp-item {list-style: none; display: flex; align-items: center; column-gap: 1rem; font-weight: 500; }
.wpb-usp-list .usp-item .usp-icon {--size: 2rem; width: var(--size); height: var(--size); }

/*** ---------- Header ---------- ***/
.wpb-header {  }

.wpb-header.wpb-header--home {}
.wpb-header.wpb-header--home .wpb-bg-image { }
.wpb-header.wpb-header--home .wpb-bg-image img { position: relative; border-radius: 0; border-top-left-radius: var(--br-lg); border-top-right-radius: var(--br-lg); }

.wpb-header.wpb-header--home .wpb-text > * + *:not(.btn .blockquote) {margin-top: 1.2rem;}
.wpb-header.wpb-header--home .wpb-text em {font-weight: 300; text-transform: uppercase;font-style: normal; font-size: 2rem; letter-spacing: 1.1;} 

@media (max-width: 991.98px) {
    .wpb-header.wpb-header--home {padding-top: 0;}
    .wpb-header.wpb-header--home .wpb-text {order: 1;}
    .wpb-header.wpb-header--home .wpb-bg-image {order: 0; margin-left: -25%; margin-right: -25%; /* width: calc(100% + 50%); */ aspect-ratio: 21 / 9; overflow: hidden; }
    .wpb-header.wpb-header--home .container .row {gap: 0;}
}
@media (min-width: 992px) {
    .wpb-header.wpb-header--home .wpb-bg-image { min-height: 60rem; }
    .wpb-header.wpb-header--home .wpb-bg-image img { position: absolute; top: 0; max-width: 110rem; width: 100%; height: 100%; object-fit: cover; }
}



/*** ---------- Landingspagina's ---------- ***/
.lpt-places {
    columns: 200px 2;
    column-gap: 3rem;
}
.lpt-places li {list-style: none; padding: 0;}
.lpt-places li a {color: var(--clr-primary);text-decoration: underline; transition: color 250ms ease;} 
.lpt-places li a:hover {color: var(--clr-primary-20);}

.wpb-card--shortcode .wpb-card__body {padding: 0; }


/*** ---------- Footer ---------- ***/
.wpb-footer {  }
.wpb-footer.wpb-footer--primary {  }

.by-wux { display: flex; align-items: center; gap: .4rem; text-decoration: none; opacity: .75; }
.by-wux span { font-size: 1.1rem; line-height: 1; }
.by-wux img { width: 4.7rem; height: 1.6rem; }