/*
Theme Name: Wux Theme - Lina
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            : clamp(2rem, 5vw, 2.6rem);
    --lh            : 1.8;
    --br            : 3rem;
    --fs-h1         : clamp(3.2rem, 5vw, 4.8rem);
    --fs-h2         : clamp(2.4rem, 4vw, 4.0rem);
    --fs-h3         : clamp(2rem, 3vw, 3.2rem);
        
    /* Color variables */
    --clr-primary           : #936F6E;
    --clr-primary-rgb       : 147, 111, 110; 
    --clr-primary-light     : #DEC9C8;
    --clr-primary-dark      : #736768;
    --clr-primary-muted     : #BEAB9D;

    --clr-secondary         : #DBDDCC;
    --clr-secondary-muted   : #7D897B;

    --clr-tertiary          : #5D6E83;
    --clr-tertiary-light    : #9EAFc5;

    --clr-accent           : #D5B642;


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

    --clr-dark          : #000000;
    --clr-grey          : #707070;
    --clr-light         : #FFFFFF;

    --clr-border        : rgb(0, 0, 0); 

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

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

    /* Container variables */
    --container-width       : 100%;
    --container-width--sm   : 540px;
    --container-width--md   : 720px;
    --container-width--lg   : 940px;
    --container-width--xl   : 1200px;
    --container-width--xxl  : 1400px;
    --container-width--xxxl : 1600px;
    --container-width--xxxxl : 1624px;

    /* Transition variables */
    --ts-duration            : var(--ts-35);
    --ts-function            : cubic-bezier(.58,.22,.2,.96);
    
    --p-y-small: 3rem;
    --p-y-medium: 4rem;
    --p-y-large: 7.5rem;
}


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

*:is([class*="wpb-wst"],[class*="wpb-wsb"]) {

    /* -- Top -- */
    &.wpb-wst--small  { --pt-base: var(--p-y-small); }
    &.wpb-wst--medium { --pt-base: var(--p-y-medium); }
    &.wpb-wst--large  { --pt-base: var(--p-y-large); }

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

    /* Defaults: gewoon de base-waarde */
    --pt: var(--pt-base);
    --pb: var(--pb-base);
}

@media (min-width: 992px) {
    :root{ --p-y-xsmall: 4rem; --p-y-small: 6rem; --p-y-medium: 8rem; --p-y-large: 15rem; }
}


/*** ---------- Background colors ---------- ***/
[class*="wpb-bg-clr--"] { --block-bg: transparent; position: relative;

    &.wpb-bg-clr--transparent { --block-bg: transparent; }
    
    &.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--primary-muted { --block-bg: var(--clr-primary-muted); }

    &.wpb-bg-clr--secondary { --block-bg: var(--clr-secondary); }
    &.wpb-bg-clr--secondary-muted { --block-bg: var(--clr-secondary-muted); }

    &.wpb-bg-clr--tertiary { --block-bg: var(--clr-tertiary); }
    &.wpb-bg-clr--tertiary-light { --block-bg: var(--clr-tertiary-light); }

    &.wpb-bg-clr--accent { --block-bg: var(--clr-accent); }

    &.wpb-bg-clr--light { --block-bg: var(--clr-light); }
    &.wpb-bg-clr--dark { --block-bg: var(--clr-dark); }

    &:not(.nav-clr) {
        &::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--block-bg); }
    }

    @media (max-width: 991.98px) {
        &.half-left::before {
            background: linear-gradient(to bottom, var(--block-bg) 75%, transparent 0);
        }
        &.half-right::before {
            background: linear-gradient(to top, var(--block-bg) 75%, transparent 0);
        }
    }
    @media (min-width: 992px) {
        &.half-left::before {
            background: linear-gradient(to right, var(--block-bg) 50%, transparent 0);
        }
        &.half-right::before {
            background: linear-gradient(to left, var(--block-bg) 50%, transparent 0);
        }
        &.full-left::before {
            background: linear-gradient(to right, var(--block-bg) calc(100% - var(--offset)), transparent 0);
        }
        &.full-right::before {
            background: linear-gradient(to left, var(--block-bg) calc(100% - var(--offset)), transparent 0);
        }
    }
}

.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; }
}