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

:root {
    /* Font variables */
    --fs            : 1.6rem;
    --lh            : 1.6;
    --fs-h1: clamp(3.6rem, 5vw, 7.2rem);
    --fs-h2: clamp(3.0rem, 4vw, 5.4rem);
    --fs-h3: clamp(2.4rem, 3vw, 3.8rem);

    --fs-xs         : 1.2rem;
    --fs-sm         : 1.4rem;
    --fs-md         : 1.6rem;
    --fs-lg         : 1.8rem;
    --fs-xl         : 2rem;
    --fs-xxl        : 2.4rem;

    /* Color variables */
    --clr-primary-dark      : #002B3C;
    --clr-primary           : #008C9B;
    --clr-primary-light     : #A1D6D6;
    
    --clr-primary-dark-rgb  : 0, 43, 60;
    --clr-primary-rgb       : 0, 140, 155;
    --clr-primary-light-rgb : 161, 214, 214;

    --clr-secondary     : #FF914C;
    --clr-secondary-dark: #E07B39;

    --clr-heading       : var(--clr-primary-dark);
    --clr-text          : var(--clr-primary-dark);

    --clr-dark          : var(--clr-primary-dark);

    --clr-light         : #FAF3EE;
    --clr-white         : #FFF;
    --clr-black         : #000;

    --clr-border        : #E7E1DD; 
    --clr-border-light  : 161, 214, 214, 0.2; 

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

    --clr-gradient: linear-gradient(0deg, var(--clr-primary) 0%, var(--clr-primary-light) 100%);

    /* Font variables */
    --font-base    : 'Cairo Variable', sans-serif;
    --font-accent  : 'Gabarito Variable', sans-serif;

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

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

    /* Border radius variables */
    --br: .4rem;
    --br-sm: .8rem; 
    --br-md: 1rem; 
    --br-lg: 1.2rem; 
    --br-xl: 2.4rem; 

    /* blur */
    --blur: blur(4rem);
    --blur-lg: blur(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-small: 6.4rem; --p-y-medium: 9rem; --p-y-large: 11rem; }
}


/*** ---------- Background colors ---------- ***/
[class*="wpb-bg-clr--"] { --block-bg: transparent; background-color: var(--block-bg); position: relative; overflow: hidden;
    &.wpb-bg-clr--primary { --block-bg: var(--clr-primary); }
    &.wpb-bg-clr--dark { --block-bg: var(--clr-dark); }
    &.wpb-bg-clr--dark-gradient { --block-bg: var(--clr-dark); 
        &::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1800 / 913; background-image: url('/app/themes/wux-theme/assets/img/bg/dark-bg.svg'); background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none;}
    }
    &.wpb-bg-clr--white { --block-bg: var(--clr-white); }
}

/* .by-wux { display: flex; align-items: center; gap: .4rem; text-decoration: none; 
    span { line-height: 1; opacity: .75; }
    img { width: 4.7rem; height: 1.6rem; transition: filter var(--ts-duration) var(--ts-function); }

} */

.by-wux { display: flex; align-items: center; gap: .4rem; text-decoration: none; 
    span { line-height: 1; opacity: .75; }
    .wux-logo { content: ''; display: block; width: 4.7rem; height: 1.6rem; background-color: #fff; mask-image: url('/app/themes/wux-theme/assets/img/logo_wux.svg'); mask-size: contain; mask-repeat: no-repeat; transition: background-color var(--ts-duration) var(--ts-function); }

    &:hover .wux-logo {
        background-color: var(--clr-primary-light);
    }
}