/*
Theme Name: Wux Theme - Anna
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.8rem;
    --lh            : 1.6;
    --fs-h1         : clamp(3.2rem, 5vw, 4.8rem);
    --fs-h2         : clamp(2.8rem, 4vw, 3.6rem);
    --fs-h3         : clamp(2rem, 3vw, 2.4rem);
        
    /* Color variables */
    --clr-primary           : #D5C35F; /* mustard-gold */
    --clr-primary-rgb       : 213, 195, 95; 
    --clr-primary-light     : #EBE4DA; /* warm-linen */
    --clr-primary-dark      : #CA935B; /* warm-caramel */

    --clr-secondary         : #A4CCD7; /* soft-sky */
    --clr-secondary-muted   : #BBA3A7; /* dusty-rose */
    --clr-secondary-dark    : #707C73; /* forest-sage */

    --clr-accent            : #F0926C; /* coral-peach */
    --clr-accent-dark       : #D4686D; /* faded-crimson */
    --clr-accent-deep       : #61364B; /* deep-plum */


    --clr-heading       : var(--clr-accent-dark);
    --clr-text          : #000000;

    --clr-dark          : #152F33;
    --clr-light         : #f2f2f2;

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

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

    /* Font variables */
    --font-primary      : 'Inter', sans-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;

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

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

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


/*** ---------- 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--primary {--block-bg: var(--clr-primary);}
    &.wpb-bg-clr--primary-light {--block-bg: var(--clr-primary-light);}
    &.wpb-bg-clr--primary-dark {--block-bg: var(--clr-primary-dark);}
    &.wpb-bg-clr--secondary {--block-bg: var(--clr-secondary);}
    &.wpb-bg-clr--secondary-muted {--block-bg: var(--clr-secondary-muted);}
    &.wpb-bg-clr--secondary-dark {--block-bg: var(--clr-secondary-dark);}
    &.wpb-bg-clr--accent {--block-bg: var(--clr-accent);}
    &.wpb-bg-clr--accent-dark {--block-bg: var(--clr-accent-dark);}
    &.wpb-bg-clr--accent-deep {--block-bg: var(--clr-accent-deep);}
    &.wpb-bg-clr--light {--block-bg: var(--clr-light);}
    &.wpb-bg-clr--dark {--block-bg: var(--clr-dark);}
}

.by-wux { display: flex; align-items: center; gap: .4rem; text-decoration: none; opacity: .75; 
    span { font-size: 1.1rem; line-height: 1; }
    img { width: 4.7rem; height: 1.6rem; }
}