/*
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(3rem, 4vw, 4.8rem);
    --fs-h2         : clamp(2.2rem, 3vw, 4rem);
    --fs-h3         : clamp(2rem, 3vw, 2.4rem);
        
    /* Color variables */
    --clr-primary       : #cbb75c;
    --clr-primary-rgb   : 203, 183, 92;

    --clr-heading       : #191817;
    --clr-text          : #191817;

    --clr-dark          : #191817;
    --clr-dark-rgb      : 25, 24, 23;
    --clr-dark-80       : #393736;
    --clr-light         : #f0efe9;
    --clr-green         : #27ae60;

    --clr-border        : rgba(46, 45, 44, 0.15); 

    --clr-danger        : #c72828;
    --clr-info          : #3d9cd2;
    --clr-success       : var(--clr-green);

    /* 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   : 1140px;
    --container-width--xxl  : 1320px;
    --container-width--xxxl : 1440px;

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

    /* Block vars */
    --block-br: 0px;
    --block-offset: 0px;

    /* Assets */
    --waveform: url('/app/themes/wuxnl-theme/assets/img/waveform.svg');
}
@media (min-width: 576px) {
    :root {
        --block-offset: clamp(1rem, 1.5vw, 2rem);
        --block-br: clamp(.8rem, 1.2vw, 1.6rem);
    }
}
@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: 6rem; --p-y-medium: 9rem; --p-y-large: 12rem; }
}


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

/*** ---------- Headers ---------- ***/
.wpb-header{ 
    .wpb-header__inner{ margin: var(--block-offset); border-radius: var(--block-br); overflow: hidden; }
}

.wpb-header.wpb-header--home{ --gtc: repeat(1, minmax(0, 1fr)); --gap: 4.8rem; --asset-width: 28rem; --thumb-size: 30rem; --text-width: 48rem; --header-padding: clamp(3.2rem, 10vw, 13rem);
    .container{ position: static; display: grid; grid-template-columns: var(--gtc); gap: var(--gap); }
    .wpb-text{ max-width: var(--text-width); padding-top: var(--header-padding); z-index: 2; }
    .wpb-media{ display: flex; justify-content: center; align-items: end;
        :is(img, video){ max-width: var(--asset-width); z-index: 2; }
    }
    .wpb-header__inner:has(.is-background-image){ --bg-gradient: linear-gradient(to top, var(--block-bg), transparent 20%); position: relative;
        .is-background-image{ position: absolute; top: 0; right: 0; left: 0; bottom: 0; height: var(--thumb-size);
            &::before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--bg-gradient); }
            img{ width: 100%; height: 100%; object-fit: cover; }
        }
        .wpb-text{ padding-top: calc(var(--thumb-size) - 12rem); }
    }
}
.wpb-header.wpb-header--subpage{ --block-offset: 0; --block-bg: linear-gradient(to bottom, var(--clr-light), transparent); background-color: transparent; background: var(--block-bg); }
.wpb-header.wpb-header--404{
    .wpb-text{ text-align: center;
        .btn-group{ justify-content: center; }
    }
}

@media (min-width: 768px){
    .wpb-header.wpb-header--home{ --gtc: 1fr var(--asset-width); --gap: 2.4rem;
        .wpb-text{ padding-block: var(--header-padding); }
        .wpb-media{ justify-content: start; padding-left: clamp(4rem, 7vw, 10rem);
            img{ transform: rotate(5deg) translateY(3rem); }
        }
        
    }
}
@media (min-width: 992px){
    .wpb-header.wpb-header--home{ --gtc: var(--text-width) 1fr; --asset-width: 34rem; --thumb-size: 100%;
        .wpb-media{  padding-left: clamp(4rem, 7vw, 10rem); }
        .wpb-header__inner:has(.is-background-image){ --bg-gradient: linear-gradient(to right, var(--block-bg) 40%, transparent 70%); 
            .is-background-image{ display: flex; justify-content: end;
                img{ width: auto; }
            }
            .wpb-text{ padding-top: var(--header-padding); padding-bottom: var(--header-padding); }
        }
    }
}
@media (min-width: 1200px){
    .wpb-header.wpb-header--home{ --asset-width: 40rem; }
}
@media (min-width: 1400px){
    .wpb-header.wpb-header--home{ --asset-width: 45rem; }
}
@media (min-width: 1600px){
    .wpb-header.wpb-header--home{ --asset-width: 48rem; }
}

/*** ---------- Wux ---------- ***/
.by-wux { --filter: invert(1); display: flex; align-items: center; gap: .4rem; text-decoration: none;
    span { font-size: 1.4rem; font-weight: 400; line-height: 1; }
    img { width: 4.7rem; height: 1.6rem; filter: var(--filter); -webkit-filter: var(--filter); -ms-filter: var(--filter); }
}