/*
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         : 8rem;
        
    /* Color variables */
    --clr-primary       : #3C9AE6;
    --clr-primary-20    : #cce2f7;
    --clr-primary-rgb   : 60, 154, 230;

    --clr-blue          : #0D3D6D;
    --clr-blue-700      : #567799;
    --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-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;
    }
}

/*** ---------- 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%); }