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

:root {
    /* Font variables */
    --fs            : 1.4rem;
    --lh            : 1.6;
    --fs-h1         : clamp(4rem, 6vw, 12rem);
    --fs-h2         : clamp(2.8rem, 4vw, 5.6rem); /* OUD -> clamp(2.8rem, 4vw, 4.4rem) */
    --fs-h2-v2      : clamp(2.2rem, 3.8vw, 5.6rem); 
    --fs-h3         : clamp(2.2rem, 3vw, 3.2rem);
        
    /* Color variables */
    --clr-primary       : #C36316;
    --clr-primary-rgb   : 199, 99, 22;
    --clr-primary-20    : rgba(var(--clr-primary-rgb), 0.2);


    --clr-secondary     : #384926;
    --clr-secondary-rgb  : 56, 73, 38;

    --clr-heading       : #1E150F;
    --clr-text          : #1E150F;
    --clr-text-rgb      : 30, 21, 15;

    --clr-dark          : #1E150F;
    --clr-dark-rgb      : 30, 21, 15;

    --clr-light         : #F9F3EE;

    --clr-border        : rgba(30, 21, 15, 0.15); 

    --clr-danger        : #e2401c;
    --clr-info          : #3d9cd2;
    --clr-success       : #6A824F;

    /* Font variables */
    --font-primary      : 'BricolageGrotesque', sans-serif;
    --font-accent       : 'IBMPlexSerif', serif;

    /* Container 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 : 1420px;
    --container-width--xxxxl: 1476px;

    /* Trransition variables */
    --ts-duration            : var(--ts-35);
    --ts-function            : cubic-bezier(.58,.22,.2,.96);
}

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

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

*:is([class*="wpb-wst"],[class*="wpb-wsb"]){ --p-y-small: 2.4rem; --p-y-medium: 3.2rem; --p-y-large: 4.8rem;
    /* -- Top -- */
    &.wpb-wst--small { --pt: var(--p-y-small); }
    &.wpb-wst--medium { --pt: var(--p-y-medium); }
    &.wpb-wst--large { --pt: var(--p-y-large); }

    /* -- Bottom -- */
    &.wpb-wsb--small { --pb: var(--p-y-small); }
    &.wpb-wsb--medium { --pb: var(--p-y-medium); }
    &.wpb-wsb--large { --pb: var(--p-y-large); }
}

@media (min-width: 992px) {
    *:is([class*="wpb-wst"],[class*="wpb-wsb"]){ --p-y-xsmall: 4rem; --p-y-small: 6.4rem; --p-y-medium: 9rem; --p-y-large: 12rem; }
}


/*** ---------- Background colors ---------- ***/
[class*="wpb-bg-clr--"] { --block-bg: transparent; background-color: var(--block-bg); 
    &.wpb-bg-clr--transparent { --block-bg: transparent; }
    &.wpb-bg-clr--white { --block-bg: #fff; }
    &.wpb-bg-clr--grey { --block-bg: #f2f2f2; }
    &.wpb-bg-clr--light { --block-bg: var(--clr-light); }
    &.wpb-bg-clr--primary { --block-bg: var(--clr-primary); }
    &.wpb-bg-clr--secondary { --block-bg: var(--clr-secondary); }
}

.by-wux { display: flex; align-items: center;  text-decoration: none; 
    span { font-size: 1.4rem; line-height: 1; }
    img { width: 4.7rem; height: 1.3rem; filter: invert(1) sepia(1) saturate(5) hue-rotate(180deg); }
}

/*** ---------- Reviews ---------- ***/
.wpb-reviews { display: inline-grid; grid-template-columns: 1.8rem 1fr 1.2rem; text-decoration: none; align-items: center; gap: 1rem; font-size: 1.2rem;
    .wpb-reviews__icon { width: 1.4rem; height: 1.4rem;}
    i { transform: rotate(-45deg);  }
 }

 @media(min-width: 992px) {
    .wpb-reviews .wpb-reviews__icon { width: 1.8rem; height: 1.8rem; }
 }

 /*** ---------- USPs ---------- ***/
.wpb-usps { display: grid; row-gap: 2.4rem; }

.wpb-usp { display: grid; grid-template-columns: 1.6rem 1fr; gap: 1.2rem;
    .wpb-usp__icon > i { color: var(--clr-success); }
    .wpb-usp__text { font-weight: 600; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.2; }
    .wpb-usp__inner { display: grid; row-gap: .4rem;
        .wpb-usp__title { font-size: clamp(2rem, 3vw, 2.4rem); font-weight: 600; line-height: 1.1;}
        .wpb-usp__subtitle { opacity: .5; font-size: 1.4rem; max-width: 28.2rem; }
    }
}


/*** ---------- Style elements ---------- ***/
.wpb-style-elements { --w: 20rem; --h: 19rem; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1020; 
    .wpb-style-element { position: absolute; filter: blur(2px); z-index: 5; width: var(--w); height: var(--h); max-width: 100%; background-repeat: no-repeat; min-width: var(--w); min-height: var(--h); background-size: contain; background-image: var(--src);
        &.wpb-style-element--small { --w: 8.6rem; --h: 4.5rem; }
        &.wpb-style-element--large { --w: 20rem; --h: 19rem; }
    }

    .wpb-style-element--leaves-top-left { --src: url('/app/themes/wux-theme/assets/img/branch-01-left-bottom.png'); top: -20rem; left: 0; background-position: left;
        &.wpb-style-element--small { --src: url('/app/themes/wux-theme/assets/img/branch-02-right-top.png'); transform: scalex(-1); background-position: right; }
    }
    .wpb-style-element--leaves-top-right { --src: url('/app/themes/wux-theme/assets/img/branch-01-right-bottom.png'); top: -20rem; right: 0; background-position: right; display: none;
        &.wpb-style-element--small { --src: url('/app/themes/wux-theme/assets/img/branch-02-right-top.png'); }
    }
    .wpb-style-element--leaves-bottom-left { --src: url('/app/themes/wux-theme/assets/img/branch-02-left-top.png'); bottom: 10rem; left: 0; background-position: left;
        &.wpb-style-element--large { --src: url('/app/themes/wux-theme/assets/img/branch-01-left-bottom.png'); }
    }
    .wpb-style-element--leaves-bottom-right { --src: url('/app/themes/wux-theme/assets/img/branch-02-right-top.png'); bottom: 10rem; right: 0; background-position: right; display: none; 
        &.wpb-style-element--large { --src: url('/app/themes/wux-theme/assets/img/branch-01-left-bottom.png'); transform: scalex(-1); background-position: left; }
    }
}

@media(min-width: 992px) {
    .wpb-style-elements {
        .wpb-style-element {
            &.wpb-style-element--small { --w: 14.6rem; --h: 8.5rem; }
        }

        .wpb-style-element--leaves-top-left,
        .wpb-style-element--leaves-top-right,
        .wpb-style-element--leaves-bottom-right { display: inline-block; }

    }
}

@media(min-width: 1400px) {
   .wpb-style-elements {
        .wpb-style-element {
            &.wpb-style-element--small { --w: 19.6rem; --h: 11.5rem; }
            &.wpb-style-element--large { --w: 20rem; --h: 35rem; }
        }
    }
}

@media(min-width: 1921px) {
    .wpb-style-elements {
        .wpb-style-element {
            &.wpb-style-element--small { --w: 32rem; --h: 20rem; }
            &.wpb-style-element--large { --w: 34rem; --h: 35rem; }
        }
    }
}