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

@font-face {
    font-family: "Danone";
    src: url('/app/themes/wuxnl-theme/assets/fonts/DanoneOne-Bold.ttf') format('truetype'),
         url('/app/themes/wuxnl-theme/assets/fonts/DanoneOne-Bold.oft') format('opentype'),
         url('/app/themes/wuxnl-theme/assets/fonts/DanoneOne-Bold.woff') format('woff'),
         url('/app/themes/wuxnl-theme/assets/fonts/DanoneOne-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Danone";
    src: url('/app/themes/wuxnl-theme/assets/fonts/DanoneOne-Regular.ttf') format('truetype'),
         url('/app/themes/wuxnl-theme/assets/fonts/DanoneOne-Regular.oft') format('opentype'),
         url('/app/themes/wuxnl-theme/assets/fonts/DanoneOne-Regular.woff') format('woff'),
         url('/app/themes/wuxnl-theme/assets/fonts/DanoneOne-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Danone";
    src: url('/app/themes/wuxnl-theme/assets/fonts/DanoneOne-Light.ttf') format('truetype'),
         url('/app/themes/wuxnl-theme/assets/fonts/DanoneOne-Light.oft') format('opentype'),
         url('/app/themes/wuxnl-theme/assets/fonts/DanoneOne-Light.woff') format('woff'),
         url('/app/themes/wuxnl-theme/assets/fonts/DanoneOne-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

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

    /* Color variables */
    --clr-primary: #1E5EAA;
    --clr-primary-rgb: 0, 112, 135;
    
    --clr-secondary: #26ACE0;

    --clr-heading: #223A6E;
    --clr-text: #223A6E;

    --clr-dark: #223A6E;

    --clr-light: #f2f2f2;

    --clr-border: var(--clr-secondary); 
    
    --clr-danger: #e2401c;
    --clr-info: #3d9cd2;
    --clr-success: #1CB435;

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

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

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

/*
@media (min-width: 800px) {
    body { 
        background: url('/app/themes/wuxnl-theme/assets/img/240246_NUTRICIA_Oktoberfest_Website_mobiel_banner_800x488px_DIGI_72dpi.png') no-repeat top/100%;
    }
}

@media (min-width: 1300px) {
    body { 
        background: url('/app/themes/wuxnl-theme/assets/img/240246_NUTRICIA_Oktoberfest_Website_banner_1300x490px_DIGI_72dpi.png') no-repeat top/100%;
    }
}

@media (min-width: 1620px) {
    body { 
        background: url('/app/themes/wuxnl-theme/assets/img/240246_NUTRICIA_Oktoberfest_Website_banner_1920x490px_DIGI_72dpi.png') no-repeat top/100%;
    }
}

@media (min-width: 1920px) {
    body { 
        background: url('/app/themes/wuxnl-theme/assets/img/240246_NUTRICIA_Oktoberfest_Website_banner_2000x490px_DIGI_72dpi.png') no-repeat top/100%;
    }
} */

.wpb-pagewrapper { overflow: clip; }
.wpb-pagewrapper .container { display: flex; flex-direction: column; flex-grow: 1; }
.wpb-pagewrapper .container .inner { display: flex; flex-direction: column; row-gap: 4.8rem; position: relative; background-color: var(--clr-primary); flex-grow: 1; height: 100%; z-index: 1; padding: 0 1.8rem 1.8rem 1.8rem; }
.wpb-pagewrapper .container .inner::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 100vw; z-index: -1; --mask: url('/app/themes/wuxnl-theme/assets/img/Nutricia-bg-shape.svg'); --mask-size: 4rem; background-color: rgba(0,173,255,.1); -webkit-mask-image: var(--mask); mask-image: var(--mask); -webkit-mask-size: var(--mask-size); mask-size: var(--mask-size); -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-position: top left; mask-position: top left; }

@media (max-width: 575.98px) {
    .wpb-pagewrapper .container { padding-right: 0; padding-left: 3.6rem; }
}
@media (min-width: 992px) {
    .wpb-pagewrapper .container .inner::after { --mask-size: 6.4rem; }
}



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

.text-normal { text-transform: none!important; }

.wpb-text { margin-bottom: 3.2rem; }
.wpb-title { display: inline-flex; justify-content: center; align-items: center; font-size: 2.4rem; font-family: var(--font-secondary); font-weight: 400; min-height: 5.6rem; position: relative; width: 100%; max-width: 30rem; background-color: var(--clr-secondary); color: #fff; }
.wpb-title span { margin-bottom: .15em; }
.wpb-title span::before { content: ''; display: block; position: absolute; left: 0; width: 100%; top: 50%; transform: translateY(-50%); height: 4rem; border-top: 2px solid #fff; border-bottom: 2px solid #fff; }
.wpb-title::before, .wpb-title::after { content: ''; position: absolute; top: 0; width: 0; height: 0; border-style: solid; z-index: 1; pointer-events: none; }
.wpb-title::before { left: 0; border-width: 28px 0 28px 20px; border-color: transparent transparent transparent #fff; }
.wpb-title::after { right: 0; border-width: 28px 20px 28px 0; border-color: transparent #fff transparent transparent; }

/*** ---------- Buttons ---------- ***/
.btn, .gform_button, .gform_next_button, .gform_previous_button, .button { --fs: 1.6rem; --lh: 1; --p: 0 4rem; --border: none; font-family: var(--font-secondary); font-size: 2.4rem; font-weight: 400; min-height: 5.6rem; position: relative; width: 100%; max-width: 30rem; text-transform: lowercase; }

.btn span { margin-bottom: .25em; }
.btn span::before { content: ''; display: block; position: absolute; left: 0; width: 100%; top: 50%; transform: translateY(-50%); height: 4rem; border-top: 2px solid #fff; border-bottom: 2px solid #fff; }
.btn::before, .btn::after { content: ''; position: absolute; top: 0; width: 0; height: 0; border-style: solid; z-index: 1; pointer-events: none; }
.btn::before { left: 0; border-width: 28px 0 28px 20px; border-color: transparent transparent transparent #fff; }
.btn::after { right: 0; border-width: 28px 20px 28px 0; border-color: transparent #fff transparent transparent; }

.btn.btn--primary, .button { --clr: rgb(255,255,255); --bg-clr: var(--clr-primary); }
.btn.btn--primary .wpb-icon { --clr: rgb(255,255,255); }

.btn.btn--secondary { --clr: #fff; --bg-clr: var(--clr-secondary); --hover-clr: #fff; --hover-bg-clr: var(--clr-primary); }
.btn.btn--secondary .wpb-icon { --clr: var(--clr-primary); }


.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); }



/*** ---------- Forms ---------- ***/
form label, form .label { text-transform: uppercase; font-weight: 700; cursor: pointer; }
form label small, form .label small { font-size: .75em!important; }


/*** ---------- Nutricia  ---------- ***/
.nutricia-header { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; row-gap: 3.2rem; }
.nutricia-header .wpb-text { order: 1; margin-left: -2rem; }
.nutricia-header h1 { text-transform: uppercase; color: #fff; position: relative; } 
.nutricia-header h1 mark { --offset-top: 10%; --offset-bottom: 5%; color: #fff; padding: 0 1rem; background: linear-gradient(0deg, transparent var(--offset-bottom), var(--clr-dark) var(--offset-bottom), var(--clr-dark) calc(100% - var(--offset-top)), transparent calc(100% - var(--offset-top))); margin-left: -1rem; }  
.nutricia-header h1 span { display: none; width: 100%; }
.nutricia-header h1 em,
.nutricia-header h1::before, .nutricia-header h1::after { content: ''; width: 2rem; height: 2rem; display: inline-block; -webkit-mask-image: var(--mask); mask-image: var(--mask); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.nutricia-header h1::before { --mask: url('/app/themes/wuxnl-theme/assets/img/tekst-elm-1.svg'); background-color: var(--clr-dark); position: absolute; right: calc(100% + .25rem); top: 0; } 
.nutricia-header h1::after { --mask: url('/app/themes/wuxnl-theme/assets/img/tekst-elm-2.svg'); background-color: #fff; margin-bottom: 1rem; } 
.nutricia-header h1 em { --mask: url('/app/themes/wuxnl-theme/assets/img/tekst-elm-3.svg'); background-color: #fff; margin-bottom: 1rem; width: 1.4rem;}  

.nutricia-form { background-color: #fff; width: 100%; max-width: 100rem; margin-inline: auto; position: relative; z-index: 1; }
.nutricia-form .nutricia-form__body { background-color: #fff; padding: 2rem; z-index: 1; }
.nutricia-form form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.4rem; }
.nutricia-form form > * { grid-column: span 12; }
.nutricia-form .wpb-alert { margin-bottom: 2rem; }
.nutricia-form .form-group { transition: height var(--ts-35) var(--global-transition-function); overflow: clip; }
.nutricia-form .form-group--radios .form-group__body { display: flex; align-items: center; flex-wrap: wrap; column-gap: 1.4rem; }
.nutricia-form .form-group--radios label { display: inline-flex!important; column-gap: 1rem; align-items: center; width: auto; }
.nutricia-form .form-group--radios-outline { margin-bottom: 2rem; }
.nutricia-form .form-group--radios-outline .form-group__body { flex-direction: column; border: 1px solid var(--clr-border); padding: .8rem 1.2rem; border-radius: .8rem; }
.nutricia-form .form-group--radios-outline label { width: 100%; margin: 0!important; padding: .5rem 0; }
.nutricia-form .form-group--radios-outline label input { width: 1.1em; height: 1.1em; min-width: 1.1em; }
.nutricia-form .form-group--submit { text-align: right; margin-top: 2rem; }  

.nutricia-form .music-notes { width: 15rem; height: 30rem; position: absolute; background: var(--src) no-repeat center / contain; z-index: -1;}
.nutricia-form .music-notes--1 { --src: url('/app/themes/wuxnl-theme/assets/img/Muzieknoten-1.svg'); top: -4.8rem; right: calc(100% - 3.2rem); }
.nutricia-form .music-notes--2 { --src: url('/app/themes/wuxnl-theme/assets/img/Muzieknoten-2.svg'); top: 18rem; left: 100%; }
.nutricia-form .music-notes--3 { --src: url('/app/themes/wuxnl-theme/assets/img/Muzieknoten-3.svg'); top: 50rem; right: 100%;  }
.nutricia-form .music-notes--4 { --src: url('/app/themes/wuxnl-theme/assets/img/Muzieknoten-4.svg'); }

@media (max-width: 767.98px) {
    .nutricia-header figure { margin-inline: -3.6rem; margin-top: -2rem; }
}

@media(min-width: 768px) {
    .nutricia-header { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nutricia-header .wpb-text { order: -1; }
    .nutricia-header figure { width: calc(100% + 4.8rem); margin-left: -4.8rem; }
    .nutricia-header h1 span { display: block; }
    .nutricia-form .nutricia-form__body { padding: 3.2rem 6.4rem; }
}

@media(min-width: 992px) {
    .nutricia-header .wpb-text { margin-left: -2.2rem; }
    .nutricia-header h1 em, .nutricia-header h1::before, .nutricia-header h1::after { width: 3.2rem; height: 3.2rem; }
    .nutricia-header h1 em { width: 2rem; }
    .nutricia-header h1 mark { --offset-top: 15%; --offset-bottom: 7%; }
    .nutricia-form .nutricia-form__body { padding: 4.8rem 9.6rem; }
    .nutricia-form .form-group--8 { grid-column: span 8; }
    .nutricia-form .form-group--6 { grid-column: span 6; }
    .nutricia-form .form-group--4 { grid-column: span 4; }

}

@media(min-width: 1400px) {
    .nutricia-form .music-notes--1 { top: -12.4rem; }
    .nutricia-header h1 em, .nutricia-header h1::after { margin-bottom: 2.8rem; }
}