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

    --br-sm         : .6rem;
    --br            : .8rem;
    --br-lg         : 1rem;
    --br-xl         : 4.8rem;
        
    /* Color variables */
    --clr-primary       : #3C9AE6;
    --clr-primary-20    : #cce2f7;
    --clr-primary-rgb   : 60, 154, 230;

    --clr-blue          : #0D3D6D;
    --clr-blue-900      : #25507C;
    --clr-blue-800      : #3D648A;
    --clr-blue-700      : #567799;
    --clr-blue-700-rgb  : 86, 119, 153;
    --clr-blue-600      : #6E8BA7;
    --clr-blue-500      : #869EB6;
    --clr-blue-300      : #C4E1F7;
    --clr-blue-200      : #CFD8E2;
    --clr-blue-100      : #EBF5FA;
    --clr-blue-rgb      : 13, 61, 109;

    --clr-porcelain     : #DDEEF7;
    --clr-porcelain-800 : #E4F1F9;
    --clr-porcelain-700 : #E7F3F9;
    --clr-porcelain-400 : #F1F8FC;
    --clr-porcelain-300 : #F5FAFD;

    --clr-orange        : #E87722;

    --clr-heading       : var(--clr-blue);
    --clr-text          : var(--clr-blue);
    --clr-dark          : #062C53;

    --clr-light         : var(--clr-porcelain-400);

    --clr-border        : rgb(222, 226, 230); 

    --clr-danger        : #e2401c;
    --clr-info          : #3d9cd2;
    --clr-success       : #1CB435;

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

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

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

}

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

html { scroll-padding-top: 8rem; }

/*** ---------- 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: 4rem; }
.wpb-wst--large { --pt: 6.4rem; }

.wpb-wsb--none { --pb: 0; }
.wpb-wsb--small { --pb: 3.2rem; }
.wpb-wsb--medium { --pb: 4rem; }
.wpb-wsb--large { --pb: 6.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; }
}

/*** ---------- Background colors ---------- ***/
.wpb-bg-clr--transparent { background-color: transparent; }
.wpb-bg-clr--light { background-color: var(--clr-light); }
.wpb-bg-clr--dark { background-color: var(--clr-dark); }
.wpb-bg-clr--white { background-color: #fff; }
.wpb-bg-clr--grey { background-color: #f2f2f2; }
.wpb-bg-clr--primary { background-color: var(--clr-primary); }
.wpb-bg-clr--secondary { background-color: var(--clr-blue); }
.wpb-bg-clr--porcelain { background-color: var(--clr-porcelain); }

.gradient {--gradient: linear-gradient(90deg, #4698CB 0%, #3ACFBD 100%;); }
.gradient--lung-health {--gradient: linear-gradient(270deg, #4698CB 0%, #3ACFBD 100%); }
.gradient--maternal-health {--gradient: linear-gradient(90deg, #4698CB 0%, #666BAB 100%); }
.gradient--eye-health {--gradient: linear-gradient(90deg, #4698CB 0%, #D3AB48 100%); }


/*** ---------- Background assets ---------- ***/
.wpb-block__assets { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; overflow: hidden; 
    .wpb-asset.wpb-asset--left  {--w:  60rem; left: 0; transform: translateX(-58%); 
        &.wpb-asset--circle-half { top: 0;}
        &.wpb-asset--circle-half-top { bottom: 0;}
    }
    .wpb-asset.wpb-asset--right {--w: 60rem; right: 0; transform: translateX(58%); 
        &.wpb-asset--circle-half { top: 0;}
        &.wpb-asset--circle-half-top { bottom: 0;}
    }

    @media (min-width: 768px) {
        .wpb-asset.wpb-asset--left  {--w: 83rem;}
        .wpb-asset.wpb-asset--right {--w: 83rem;}
    }
    @media (min-width: 992px) {
        .wpb-asset.wpb-asset--left  {--w: 110rem;}
        .wpb-asset.wpb-asset--right {--w: 110rem;}
    }
}


.wpb-asset { position: absolute; --src: ; --asset-clr: var(--clr-porcelain); --w: 20rem; --ratio: 100%; display: inline-flex; background: transparent; 
    &::before { content: ''; display: block; padding-top: var(--ratio); width: var(--w); min-width: var(--w); }
    &::after { content:''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -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; background: var(--asset-clr); transition: background var(--ts-duration) var(--ts-function); mask-composite: intersect; -webkit-mask-composite: source-in; }

    /* Variations */
    &.wpb-asset--circle-outline-half { --w: 120rem; --src: url('/app/themes/wuxnl-theme/assets/img/circle_outline_half.svg'); }
    &.wpb-asset--circle-outline-half-top { --w: 120rem; --src: url('/app/themes/wuxnl-theme/assets/img/circle_outline_half_top.svg'); }
    &.wpb-asset--circle-outline { --w: 120rem; --src: url('/app/themes/wuxnl-theme/assets/img/circle_outline.svg');
        &.wpb-asset--circle-outline--gradient { --src: linear-gradient(to bottom, transparent 20%, black 50%, transparent 80%), url('/app/themes/wuxnl-theme/assets/img/circle_outline.svg'); }
    }

    &.wpb-asset--circle-half { --w: 93rem; --ratio: 51.5%; --src: url('/app/themes/wuxnl-theme/assets/img/circle_half.svg'); }
    &.wpb-asset--circle-half-top { --w: 93rem; --ratio: 51.5%; --src: url('/app/themes/wuxnl-theme/assets/img/circle_half_top.svg'); 
        &.wpb-asset--fade { --src: linear-gradient(to bottom, black 60%, transparent 100%), url('/app/themes/wuxnl-theme/assets/img/circle_half_top.svg'); }
        &.bg-clr--gradient-lung-health, &.bg-clr--gradient-maternal-health, &.bg-clr--gradient-eye-health { --src: linear-gradient(to bottom, black 50%, transparent 90%), url('/app/themes/wuxnl-theme/assets/img/circle_half_top.svg'); }
    }

    &.bg-clr--gradient-1 { --asset-clr: linear-gradient(270deg, #4698CB -2.28%, #3ACFBD 61.85%); }
    &.bg-clr--gradient-2 { --asset-clr: linear-gradient(90deg, #4698CB -2.28%, #3ACFBD 61.85%); }

    &.bg-clr--gradient-lung-health {--asset-clr: linear-gradient(270deg, #4698CB 0%, #3ACFBD 100%); }
    &.bg-clr--gradient-maternal-health {--asset-clr: linear-gradient(90deg, #4698CB 0%, #666BAB 100%); }
    &.bg-clr--gradient-eye-health {--asset-clr: linear-gradient(90deg, #4698CB 0%, #D3AB48 100%); }
}