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

:root {

    /* Font variables */
    --font-primary          : 'Sora', sans-serif;

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

    /* 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;

    /* Color variables */
    --clr-primary           : #1C4465;
    --clr-secondary         : #08A871;
    --clr-dark              : #0A1C2C;
    --clr-light             : #EFEBDD;
    --clr-border            : rgb(224, 224, 224, .6);

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

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

    /* Radius variables */
    --radius-10             : 1rem;
    --radius-20             : 1.2rem;
    --radius-30             : 1.6rem;
    --radius-50             : 2rem;
    --radius-100            : 2.8rem;
    --radius-full           : 999rem;

    /* Spacing variables */
    --spacing-4             : .4rem;
    --spacing-6             : .6rem;
    --spacing-8             : .8rem;
    --spacing-12            : 1.2rem;
    --spacing-16            : 1.6rem;
    --spacing-20            : 2rem;
    --spacing-24            : 2.4rem;
    --spacing-32            : 3.2rem;
    --spacing-36            : 3.6rem;
    --spacing-40            : 4rem;
    --spacing-44            : 4.4rem;
    --spacing-48            : 4.8rem;

    /* Typography variables */
    --text-xs               : 1.2rem;
    --text-sm               : 1.4rem;
    --text-md               : 1.4rem;
    --text-lg               : 1.6rem;
    --text-xl               : 1.8rem;
    --display-xs            : 2rem;
    --display-sm            : 2.2rem;
    --display-md            : clamp(3rem, 3.8vw, 5.4rem);
    --display-lg            : clamp(3.2rem, 4vw, 6.4rem);

    --body-fs                : var(--text-sm);
    --body-lh                : 1.7;

    @media (min-width: 992px) {
        /* Radius variables */
        --radius-10         : 1.2rem;
        --radius-20         : 1.6rem;
        --radius-30         : 2rem;
        --radius-50         : 2.8rem;
        --radius-100        : 3.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: 4rem;
    /* -- 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: 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--white { --block-bg: #fff; }
    &.wpb-bg-clr--grey { --block-bg: #f2f2f2; }
    &.wpb-bg-clr--dark { --block-bg: var(--clr-dark); }
    &.wpb-bg-clr--primary { --block-bg: var(--clr-primary); }
    &.wpb-bg-clr--secondary { --block-bg: var(--clr-secondary); }

    &.text-light { --clr-contrast: #FFFF; --clr-contrast-text: rgb(255, 255, 255, .8); }
}

.by-wux { display: flex; align-items: center; gap: .4rem; text-decoration: none; opacity: 1; transition: opacity var(--ts-duration) ease;
    span { font-size: 1.1rem; line-height: 1; }
    img { width: 4.7rem; height: 1.6rem; }
    &:hover { opacity: .7; }
}


.wpb-hero--landing { min-height: clamp(16rem, 32vw, 50rem); display: grid; place-items: center; background: linear-gradient(to bottom, #1C4465, #0A1C2C);
    .wpb-hero__logo { max-width: clamp(20rem, 36vw, 54rem); margin: auto; }
    &::before { content: ""; --src: url('/app/themes/wux-theme/assets/img/verman-logo-outline.svg'); position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: var(--src) no-repeat center/contain; z-index: -1; }
}

.wpb-block--contact {  
    .container { display: grid; gap: 3.2rem; }

    .wpb-block__form { padding: clamp(2rem, 2.4vw, 4.8rem); background-color: #FFF; border-radius: 2.4rem; }
    
    @media (min-width: 768px) {
        .container { grid-template-columns: 32rem 1fr; gap: 5rem; }
    }
    @media (min-width: 992px) {
        .container { grid-template-columns: 44rem 1fr; gap: 8rem; }
    }
    @media (min-width: 1200px) {
        .container { grid-template-columns: 54rem 1fr; gap: 10rem; }
    }
}


/* Contact links */
.contact-links { --mt: clamp(2.4rem, 3.2vw, 4.8rem); display: flex; flex-direction: column; gap: clamp(1.6rem, 2vw, 2.4rem); }

.contact-link { display: flex; flex-direction: column; text-decoration: none; transition: opacity var(--ts-duration) ease;
    strong { display: flex; font-size: clamp(1.8rem, 2vw, 2.4rem); line-height: 1.2; }
    span { font-size: clamp(1.5rem, 1.6vw, 1.8rem); }

    &:hover { opacity: .67; }
}