/*
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
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');


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

    --clr-primary: rgba(151, 191, 14, 1);
    --clr-primary-rgb: 151, 191, 14;
    
    --clr-heading: rgba(32, 50, 44, 1);
    --clr-text: rgba(32, 50, 44, 1);

    --clr-dark: rgba(32, 50, 44, 1);
    --clr-dark-80: rgba(31, 48, 42, 1);
    --clr-dark-80-rgb: 31, 48, 42;

    --clr-light: rgba(239, 240, 240, 1);
    --clr-light-50: rgba(246, 246, 246, 1);

    --clr-body: rgba(250, 250, 250, 1);

    --clr-border: rgba(198, 201, 200, 0.4); 
    
    --clr-danger: #e2401c;
    --clr-info: #3d9cd2;
    --clr-success: #1CB435;

    /* Font variables */
    --font-heading: "Catamaran", sans-serif;
    --font-primary: "Poppins", sans-serif;

    /* Container max-width variables */
    --container-width: 100%;
    --container-width--sm: 600px;
    --container-width--md: 780px;
    --container-width--lg: 1020px;
    --container-width--xl: 1200px;
    --container-width--xxl: 1360px;
    --container-width--xxxl: 1540px;

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

    --blur: blur(10px);

    --bg-asset: url('/app/themes/wuxnl-theme/assets/img/sunprofs-bg-asset.svg');
    --bg-asset--header: url('/app/themes/wuxnl-theme/assets/img/sunprofs-bg-asset--header.svg');
    --bg-asset--header-border: url('/app/themes/wuxnl-theme/assets/img/sunprofs-bg-asset--header-border.svg');
    --image-mask: url('/app/themes/wuxnl-theme/assets/img/image-mask.svg');
    --image-mask-border: url('/app/themes/wuxnl-theme/assets/img/image-mask-border.svg');
    --speech-addon: url('/app/themes/wuxnl-theme/assets/img/speech-addon.svg');
}

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

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

/*** ---------- Typography ---------- ***/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { --fw: 800; font-family: var(--font-heading); font-weight: var(--fw); }
h1, .h1 { --fs: clamp(3.2rem, 6vw, 7.2rem); --lh: 1.2; }
h2, .h2 { --fs: clamp(2.8rem, 5vw, 6rem); --lh: 1.2; text-wrap: pretty; }
h3, .h3 { --fs: clamp(2rem, 3vw, 2.4rem); --lh: 1; --fw: 600; }
h4, .h4 { --fs: 1.8rem; --lh: 2rem; }

:is(h1, .h1, h2, .h2, h3, .h3) :is(strong, strong *){ color: var(--clr-primary); }

/*** ---------- 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: 5rem; }

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

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

/*** ---------- Background colors ---------- ***/
.wpb-bg-clr--primary { 
    background-color: var(--clr-primary); 
    & :is(h1, .h1, h2, .h2, h3, .h3) :is(strong, strong *){ color: #FFFF; }
}
.wpb-bg-clr--dark { background-color: var(--clr-dark-80); }
.wpb-bg-clr--light { background-color: var(--clr-light); }
.wpb-bg-clr--light-50 { background-color: var(--clr-light-50); }

:is(.has-background-asset, .wpb-bg-clr--dark) .wpb-text *:not(.btn, .btn *, h1 strong, h3 strong, h3 strong) { color: #fff; }

/*** ---------- Header ---------- ***/
.wpb-header.wpb-header--home{ min-height: min(80vh, 60rem); display: grid; overflow: hidden; }
.wpb-header.wpb-header--home .wpb-text{ max-width: 67rem; text-wrap: balance; display: flex; flex-direction: column; height: 100%; }
.wpb-header.wpb-header--home .wpb-text .btn-group{ --mt: clamp(2.4rem, 3vw, 4rem) }
.wpb-header.wpb-header--home .wpb-text .wpb-person{ --mt: auto; padding-top: 2.4rem; }
.wpb-header.wpb-header--home .wpb-featured-button{ 
    --bg-clr: var(--clr-primary); --br: 2.6rem; display: flex; align-items: center; gap: 2rem; position: absolute; bottom: calc(-1 * var(--pb)); right: var(--inline-spacing); padding: 1.2rem 2.4rem; background-color: var(--bg-clr); font-weight: 600; cursor: pointer; 
    border-top-left-radius: var(--br); border-top-right-radius: var(--br); outline: 1px solid #FFFF; outline-offset: 2px; transition: outline-offset var(--ts-duration) ease, outline-color var(--ts-duration) ease, background var(--ts-duration) ease;
}
.wpb-header.wpb-header--home .wpb-featured-button i{ 
    --size: 3.2rem; display: flex; justify-content: center; align-items: center; width: var(--size); min-width: var(--size); height: var(--size); min-height: var(--size); background: linear-gradient(to bottom left, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.34)); 
    border: 1px solid var(--clr-border); border-radius: .8rem; transition: border var(--ts-duration) ease;
}
.wpb-header.wpb-header--home .wpb-featured-button:hover{ outline-offset: 4px; outline-color: #FFF8; background-color: #FFF; }
.wpb-header.wpb-header--home .wpb-featured-button:hover i{ border-color: rgb(var(--clr-dark-80-rgb), .2); }

@media (max-width: 992px){
    .wpb-header.wpb-header--home:has(.wpb-featured-button) .wpb-text .wpb-person{ padding-bottom: 4.8rem; }
}
@media (min-width: 768px){
    .wpb-header.wpb-header--home{ min-height: min(90vh, 80rem); } 
}
@media (min-width: 992px){
    .wpb-header.wpb-header--home{ min-height: min(100vh, 100rem); } 
    
    .wpb-header.wpb-header--home .wpb-featured-button{ padding: 2rem 4rem; }
    .wpb-header.wpb-header--home .wpb-featured-button i{ --size: 4rem; }
}

.wpb-header.wpb-header--subpage{ 
    & .wpb-text {
        h1{ --mt: 2.4rem; }
        .wpb-person .wpb-person__profile{ border: 1px solid rgba(198, 201, 200, 0.6);  }
    }
    & .is-background-image-wrapper{ --border-color: rgba(255, 255, 255, 0.4);
        & .is-background-image{ background-repeat: no-repeat; background-size: cover; width: 100%; max-height: 32rem; outline: 1px solid var(--border-color); outline-offset: .4rem; overflow: hidden;
            img{ width: 100%; height: 100%; object-fit: cover; }
        }
    }

    @media (min-width: 992px){
        & .container{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4.8rem; }
        & .is-background-image-wrapper{ --offset: .4rem;
            &::before{ content: ''; position: absolute; top: calc(-1 * var(--offset)); right: 0; bottom: 0; width: calc(50% - var(--inline-spacing) - var(--inline-spacing) + var(--offset)); height: calc(100% + var(--offset)); background-color: var(--border-color); --mask-value: var(--bg-asset--header-border) no-repeat top left/cover; -webkit-mask: var(--mask-value); mask: var(--mask-value); mask-size: cover; filter: drop-shadow(1.2rem 0 0 var(--border-color)) drop-shadow(-1.2rem 0 0 var(--border-color)) drop-shadow(0 1.2rem 0 var(--border-color)) drop-shadow(0 -1.2rem 0 var(--border-color)); }
            & .is-background-image{ position: absolute; top: 0; right: 0; bottom: 0; margin-left: var(--offset); width: calc(50% - var(--inline-spacing) - var(--inline-spacing)); height: 100%; max-height: 100%; outline: none; --mask-value: var(--bg-asset--header) no-repeat top left/cover; -webkit-mask: var(--mask-value); mask: var(--mask-value); mask-size: cover; z-index: 2; }
        }
    }
}

/*** ---------- Components ---------- ***/
.wpb-stars{ 
    --mask: url('/app/themes/wuxnl-theme/assets/img/5stars.svg'); --bg-clr: #dea300; width: 9.6rem; height: 1.8rem; background: linear-gradient(to right, var(--bg-clr), var(--bg-clr) var(--stars-percent), #0002 var(--stars-percent), #0002); 
    mask-image: var(--mask); -webkit-mask: var(--mask); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; 
}


.whatsapp-widget{ --offset: 1.6rem; --br: 1.8rem; --p: 1.2rem; position: fixed; right: var(--offset); bottom: 0; z-index: 9999; margin-left: var(--offset); text-decoration: none; width: fit-content; background-color: #FFFF; border-radius: var(--br) var(--br) 0 0; padding: var(--p); border-bottom: .8rem solid var(--clr-primary); display: flex; align-items: center; gap: 1.6rem; filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.25)); }
.whatsapp-widget .whatsapp-widget__image{ --br: 50%; --size: 4.4rem; position: relative; }
.whatsapp-widget .whatsapp-widget__image img{ width: var(--size); min-width: var(--size); height: var(--size); object-fit: cover; border-radius: var(--br); outline: 1px solid var(--clr-border); outline-offset: 2px; }
.whatsapp-widget .whatsapp-widget__icon{ --icon-size: 2.6rem; position: absolute; bottom: -.2rem; right: -.2rem; border-radius: var(--br); background-color: var(--clr-primary); color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; width: var(--icon-size); min-width: var(--icon-size); height: var(--icon-size); }
.whatsapp-widget .whatsapp-widget__text > *{ display: block; font-size: 1.6rem; line-height: 1.4; }
.whatsapp-widget .btn.btn--square{ --p: 0 1rem; margin-left: 2.4rem; min-height: 3rem; pointer-events: none; }
.whatsapp-widget:hover .btn.btn--square{ --bg-clr: var(--hover-bg-clr); --clr: var(--hover-clr); --border: var(--hover-border); }
.whatsapp-widget:hover .btn.btn--square i{ transform: rotate(-45deg); }

@media (max-width: 575.98px){
    .whatsapp-widget{ --p: 0; background-color: transparent; border: none; bottom: var(--offset); }
    .whatsapp-widget .whatsapp-widget__text, .whatsapp-widget .btn.btn--square{ display: none; }
    .whatsapp-widget .whatsapp-widget__image{ --size: 2.4rem; }
    .whatsapp-widget .whatsapp-widget__image img{ outline: none; position: absolute; top: -.8rem; right: -.8rem; z-index: 2; }
    .whatsapp-widget .whatsapp-widget__icon{ --icon-size: 4.8rem;  font-size: 2.8rem; position: relative; right: 0; bottom: 0; }
}

/*** ---------- Footer ---------- ***/
.by-wux { --icon-size: 1.6rem; display: flex; align-items: center; gap: .4rem; text-decoration: none;
    span { color: var(--main-color); font-size: 1.1rem; line-height: 1; opacity: .75; transition: color var(--ts-duration) ease, opacity var(--ts-duration) ease; }
    img { width: var(--icon-size); height: var(--icon-size); opacity: .75; transition: opacity var(--ts-duration) ease;  }
    &:hover{ span{ color: var(--clr-primary); } *{ opacity: 1; } }
}