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


:root {
    --fs: 2rem;
    --lh: 1.2;
    
    /* Custom beziers */
    --cb--smooth: cubic-bezier(.58,.22,.2,.96);

    /* Color variables */
    --clr-primary: #67164A;
    --clr-primary-20: #67164Ac9;
    --clr-primary-rgb: 103,22,74;
    
    --clr-secondary: #AF7F4F;
    --clr-secondary-20: #af7f4fc9;
    --clr-secondary-110: #764522;
    --clr-secondary-rgb: 175,127,79;

    --clr-gray: #9CABB0;
    --clr-gray-20: #9cabb0c9;
    --clr-gray-rgb: 156,171,176;

    --clr-light: #CCAF9F;
    --clr-light-20: #ccaf9fc9;
    --clr-light-rgb: 204,175,159;

    --clr-heading: var(--clr-secondary);
    --clr-text: #000;

    --clr-dark: #242730;
    --clr-dark-20: #242730c9;
    --clr-dark-rgb: 36,39,48;

    --clr-border: rgb(222, 226, 230); 
    
    --clr-danger: #e2401c;
    --clr-info: #3d9cd2;
    --clr-success: #1CB435;

    /* Font variables */
    --font-primary: 'address-sans-pro', sans-serif;
    --font-secondary: 'NotoSerif', serif;

    /* Container max-width 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: 1530px;

    --ts-duration: var(--ts-25);
    --ts-function: var(--cb--smooth);

}


body { font-family: var(--font-primary); }

/*** ---------- Typography ---------- ***/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { hyphens: auto; font-family: var(--font-primary);  font-weight: 400; color: var(--clr-heading); }
h1, .h1 { --fs: 4rem; --lh: 1; }
h2, .h2 { --fs: 4rem; --lh: 1; }
h3, .h3 { --fs: clamp(2rem, 3vw, 2.4rem); --lh: 1; }
h4, .h4 { --fs: 1.8rem; --lh: 2rem; }

.wpb-text :is(h1, h2, h3) + p > em, .wpb-text > .wpb-label { font-family: var(--font-special); font-size: 4rem; line-height: 1; }
.wpb-text > .wpb-label { font-size: clamp(6rem, 5vw, 8rem); }
.wpb-text p {line-height: 2.5rem;}

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

.wpb-wst--none { --pt: 0; }
.wpb-wst--small { --pt: 4.8rem; }
.wpb-wst--medium { --pt: 2.5rem; }
.wpb-wst--large { --pt: 4rem; }

.wpb-wsb--none { --pb: 0; }
.wpb-wsb--small { --pb: 4.8rem; }
.wpb-wsb--medium { --pb: 2.5rem; }
.wpb-wsb--large { --pb: 4rem; }

.wpb-ws--none { --p: 0; }
.wpb-ws--small { --p: 4.8rem; }
.wpb-ws--medium { --p: 2.5rem; }
.wpb-ws--large { --p: 4rem; }

@media (min-width: 992px) {
    .wpb-wst--small { --pt: 6.4rem; }
    .wpb-wst--medium { --pt: 8rem; }
    .wpb-wst--large { --pt: 11rem; }
    
    .wpb-wsb--small { --pb: 6.4rem; }
    .wpb-wsb--medium { --pb: 8rem; }
    .wpb-wsb--large { --pb: 11rem; }

    .wpb-ws--small { --p: 6.4rem; }
    .wpb-ws--medium { --p: 8rem; }
    .wpb-ws--large { --p: 11rem; }
}

/*** ---------- Background colors ---------- ***/
.wpb-bg-clr--primary { background-color: var(--clr-primary); }
.wpb-bg-clr--secondary { background-color: var(--clr-secondary); }
.wpb-bg-clr--light { background-color: var(--clr-light); }
.wpb-bg-clr--gray { background-color: var(--clr-gray); }
.wpb-bg-clr--red { background-color: var(--clr-red); }
.wpb-bg-clr--dark { background-color: var(--clr-dark); }
.wpb-bg-clr--secondary-110 { background-color: var(--clr-secondary-110); }

:is(.wpb-bg-clr--red, .wpb-bg-clr--dark, .wpb-bg-clr--secondary, .wpb-bg-clr--primary, .wpb-bg-clr--light, .wpb-bg-clr--secondary-110) *:not(.btn, i) { color: #FFF; }

/*** ---------- Inner colors ---------- ***/
.wpb-inner-clr--primary { background-color: var(--clr-primary); }
.wpb-inner-clr--secondary { background-color: var(--clr-secondary); }
.wpb-inner-clr--light { background-color: var(--clr-light); }
.wpb-inner-clr--gray { background-color: var(--clr-gray); }
.wpb-inner-clr--red { background-color: var(--clr-red); }

:is(.wpb-inner-clr--gray, .wpb-inner-clr--secondary, .wpb-inner-clr--red, .wpb-inner-clr--primary, .wpb-inner-clr--light) *:not(.btn) { color: #FFF; }

/*** ---------- Buttons ---------- ***/
.btn, .gform_button, .gform_next_button, .gform_previous_button, .button { --fs: 1.8rem; --lh: 1; --p: 0 2.4rem; --br: 1rem; font-weight: 500; min-height: 4.1rem; text-transform: uppercase; }

.btn.btn--primary, .button { --active-box-shadow: none; --clr: rgb(255,255,255); --bg-clr: var(--clr-primary); --border: 1px solid transparent; --hover-bg-clr: var(--clr-primary-20); }
.btn.btn--secondary { --clr: #FFF; --bg-clr: var(--clr-secondary); --border: 1px solid transparent; --hover-clr: #FFFF; --hover-bg-clr: var(--clr-secondary-20); }
.btn.btn--outline { --clr: var(--clr-primary); --border: 1px solid var(--clr-primary); --hover-bg-clr: var(--clr-primary); --hover-border: 1px solid var(--clr-primary); }
.btn.btn--dark { --bg-clr: var(--clr-dark); --clr: #FFF; --hover-bg-clr: var(--clr-dark-20);  }

/*** ---------- Header ---------- ***/
.wpb-header.wpb-header--home {
    .wpb-header__inner { position: relative; display: grid; gap: 2.4rem; max-height: 86rem;
        .wpb-image img { height: 29rem; width: 100%; object-fit: cover; }
        .wpb-style-element { position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%;  z-index: 1; max-width: 14.6rem; display: none;   }
    }

    .wpb-header__mobile { padding: 4.8rem 0; 
        strong { font-size: 2.4rem; text-transform: uppercase; line-height: 1; }
        p { --mt: 0; }
    }

    .wpb-header__footer .container { clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
        .wpb-usps__header { margin-bottom: 3.2rem; }
        .wpb-usps { padding: 2.4rem 0 8rem 0;
            .usp { display: grid; gap: 1rem; text-align: center; position: relative;
                .usp__title { font-size: 5rem; }
                p { font-size: 2rem; }
            }
        }
    }
}

@media(max-width: 767.98px) {
    .wpb-header.wpb-header--home .wpb-header__inner .wpb-image--1 { display: none; }

    .wpb-header--home .wpb-header__footer .wpb-usps {
        .wpb-usps__inner { border-top: 1px solid var(--clr-border); padding-top: 1.4rem; margin-top: 1.4rem; }
    }
}


@media(min-width: 768px) {
    .wpb-header.wpb-header--home .wpb-header__inner { 
        & .wpb-image img { height: 40rem; }
        & .wpb-style-element {  max-width: 24.6rem; top: 40%; display: block;}
        & .wpb-style-element--2 { margin-top: 9rem; margin-left: 15rem; max-width: 20rem;}
    }

    .wpb-header--home .wpb-header__footer { margin-top: -5rem;
        .wpb-usps { padding: 6.4rem 0 13rem 0; 
            .usp:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 60%; width: 1px; background-color: var(--clr-border, #e0e0e0); }
        }
    }
}


@media(min-width: 992px) {
    .wpb-header.wpb-header--home .wpb-header__inner { 
        & .wpb-image img { height: 60rem; }
    }

 .wpb-header.wpb-header--home .wpb-header__footer {
        .wpb-usps { padding: 6.4rem 2rem 13rem 2rem !important;  }
    }

}

@media(min-width: 1400px) {
    .wpb-header.wpb-header--home .wpb-header__inner { 
        & .wpb-image img { height: 86rem; }
        & .wpb-style-element { max-width: 33.2rem;}
        & .wpb-style-element--2 { max-width: 25rem; margin-left: 20rem; margin-top: 13rem; }
    }

     .wpb-header.wpb-header--home .wpb-header__footer {
        .wpb-usps { padding: 8.4rem 20rem 15rem 20rem !important;  }
    }
}


/*** ---------- Made by ---------- ***/
.made-by { display: flex; gap: .3rem;}
.made-by a:not(:last-child)::after { content: '-'; text-decoration: none;}
.made-by a { color: inherit; font-size: 2rem; transition: all 250ms ease; }
.made-by a:hover { text-decoration: none; }

/*** ---------- Legend ---------- ***/
.wpb-legends { display: grid; gap: 2rem; height: 100%; grid-template-columns: repeat(auto-fit, minmax(var(--mw, 30rem), 1fr));
    & .legend-item { display: flex; align-items: center; gap: 2rem; height: fit-content; 
        & .legend__color { flex-shrink: 0; width: 2rem; height: 2rem; display: inline-block; border: 2px solid #FFF; background-color: var(--bg-clr, #000);}
        & .legend__title { font-size: 2.2rem; }
        & .legend__subtitle { font-size: 1.6rem;  }
    }
}

@media(min-width: 1200px) {
    .wpb-legends { --mw: 40rem; }
}

@media(min-width: 1400px) {
    .wpb-legends { gap: 1.5rem; --mw: 50rem;
        & .legend-item { gap: 2.8rem; }
    }
}