/*
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;
    --fs-h1         : clamp(3.2rem, 5vw, 6rem);
    --fs-h2         : clamp(2.8rem, 4vw, 4rem);
    --fs-h3         : clamp(2rem, 2.4vw, 3.2rem);
        
    /* Color variables */
    --clr-primary       : #b4cf35;
    --clr-primary-rgb   : 180, 207, 53;

    --clr-heading       : #4d4836;
    --clr-text          : #4d4836;

    --clr-dark          : #4d4836;
    --clr-dark-rgb      : 77, 72, 54;
    --clr-light         : #f0f4eb;

    --clr-border        : rgba(59, 56, 43, 0.15); 

    --clr-danger        : #B63D3D;
    --clr-danger-light  : #ffaeae;
    --clr-info          : #3d9cd2;
    --clr-success       : #1CB435;

    /* Font variables */
    --font-primary      : 'halyard-display', sans-serif;
    --font-secondary    : "Inter", sans-serif;

    /* Container variables */
    --container-width       : 100%;
    --container-width--sm   : 540px;
    --container-width--md   : 740px;
    --container-width--lg   : 980px;
    --container-width--xl   : 1140px;
    --container-width--xxl  : 1300px;
    --container-width--xxxl : 1480px;

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

@media (min-width: 768px) {
    :root {
        --fs: 1.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: 4rem; --p-y-medium: 6rem; --p-y-large: 9rem; 
        &.content-section{ --p-y-small: 1.6rem; --p-y-medium: 2.8rem; --p-y-large: 4.8rem; }
    }
}


/*** ---------- Background colors ---------- ***/
[class*="wpb-bg-clr--"] { --block-bg: transparent; background-color: var(--block-bg); 
    &.wpb-bg-clr--transparent   { --block-bg: transparent; }
    &.wpb-bg-clr--dark          { --block-bg: var(--clr-dark); --clr-contrast: #FFFF; }
    &.wpb-bg-clr--light         { --block-bg: var(--clr-light); }
    &.wpb-bg-clr--white         { --block-bg: #FFFF; }
}

/*** ---------- Headers ---------- ***/
.wpb-header.wpb-header--home{ --max-height: clamp(40rem, 45vw, 65rem); display: flex; align-items: end; min-height: min(65dvh, var(--max-height)); 
    .wpb-card{ max-width: 60rem; }
    .is-background-image img{ object-position: right; }
    &.has-background-image::after{ background: transparent; }
}
.wpb-header.wpb-header--subpage{ 
    h1{ --mt: .8rem; font-family: var(--font-secondary); }
    .wpb-text{ max-width: 82rem; }
}

@media (max-width: 991.98px){
    .wpb-header.wpb-header--home { --pt: 0px; --pb: 0px; flex-direction: column;
        .wpb-card{ --br: 0;  
            .wpb-card__body{ padding-left: 0; padding-right: 0; }
        }
        .is-background-image{ position: relative; order: -1; padding-bottom: min(50%, 20rem); width: 100%;
            img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; object-fit: cover; }
        }
    }
}

/*** ---------- WUX ---------- ***/
.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; }
}