/*
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.6rem;
    --lh            : 1.4;
        
    /* Color variables */
    --clr-primary       : #F38E00;
    --clr-primary-110   : #db8000;
    --clr-primary-rgb   : 243, 142, 0;

    --clr-secondary     : #e6fae9;

    --clr-tertiary      : #00EAFF;
    --clr-tertiary-rgb  : 0, 234, 255;

    --clr-heading       : #211F1C;
    --clr-text          : #211F1C;
    --clr-text-rgb      : 33, 31, 28;

    --clr-dark          : #211F1C;
    --clr-dark-rgb      : 33, 31, 28;

    --clr-light         : #F2F0EA;
    --clr-light-rgb     : 242, 240, 234;

    --clr-border        : #ACA9A5; 

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

    --gradient-primary  : var(--clr-dark) linear-gradient(var(--gradient-deg, 115deg), var(--clr-dark) 35%, rgba(var(--clr-tertiary-rgb), 0.3) 100%);

    /* Font variables */
    --font-primary      : 'elza', sans-serif;
    --font-fa           : 'Font Awesome 6 Pro';

    /* 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 : 1420px;
    --container-width--xxxxl : 1556px;

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

    /* Dots */
    --dot-mask: url(/app/themes/wuxnl-theme/assets/img/dot_pattern.svg);
    --dot-fade: linear-gradient(to bottom, rgba(0, 0, 0, 1) 20rem, rgba(0, 0, 0, 0));

    --nav-height: 12rem;
}

body { background: var(--clr-light); }

@media (min-width: 768px) {
    :root {
        --fs: 1.6rem;
    }
}

/*** ---------- Whitespace ---------- ***/
[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: 3.2rem; }
.wpb-wst--medium { --pt: 5.4rem; }
.wpb-wst--large { --pt: 7.2rem; }

.wpb-wsb--none { --pb: 0; }
.wpb-wsb--small { --pb: 3.2rem; }
.wpb-wsb--medium { --pb: 5.4rem; }
.wpb-wsb--large { --pb: 7.2rem; }

@media (min-width: 992px) {
    .wpb-wst--small { --pt: 12rem; }
    .wpb-wst--medium { --pt: 16rem; }
    .wpb-wst--large { --pt: 20rem; }
    
    .wpb-wsb--small { --pb: 12rem; }
    .wpb-wsb--medium { --pb: 16rem; }
    .wpb-wsb--large { --pb: 20rem; }
}

/*** ---------- Background colors ---------- ***/
[class*="wpb-bg-clr--"] { --clr-contrast: var(--clr-text); 
    .wpb-text :is(h1, h2, h3, h4, p, li, a):not(.btn) { color: var(--clr-contrast); }
}

.wpb-bg-clr--transparent { background-color: transparent; }
.wpb-bg-clr--gradient { --clr-contrast: #fff; background: var(--gradient-primary); 
    &::before { --mask: var(--dot-mask); --mask-clr: rgba(255,255,255,.2); pointer-events: none; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-mask-image: var(--mask); mask-image: var(--mask); -webkit-mask-size: 1.8rem; mask-size: 1.8rem; -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-position: left top; mask-position: left top; background: var(--mask-clr); }
    .swiper-buttons > .swiper-button-prev { --icon-clr: #FFF; 
        &:hover { --icon-clr: var(--clr-dark);
            i { background-color: #FFF; }
        }
    }

}
.wpb-bg-clr--dark { --clr-contrast: #fff; background-color: var(--clr-dark); }
.wpb-bg-clr--white { background-color: #fff; }
.wpb-bg-clr--grey { background-color: #f2f2f2; }
.wpb-bg-clr--primary { background-color: var(--clr-primary); }
.wpb-bg-clr--secondary { background-color: var(--clr-secondary); }


.by-wux { display: flex; align-items: center; gap: .4rem; text-decoration: none; 
    span { font-size: 1.4rem; line-height: 1; }
    img { width: 4rem; height: 1.6rem; }
}

/*** ---------- Footer ---------- ***/
.wpb-footer { margin-top: auto; background-color: #FFF; --inner-gap: 2rem;
    .wpb-footer__main { --pt: 6.4rem; --pb: 6.4rem; --gc: 2; padding-top: var(--pt); padding-bottom: var(--pb); 
        .container { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; flex-direction: column;}
    }
    .logo img { width: 17.5rem; height: auto; }
    .wpb-logo { max-width: 15.1rem; }
    .wpb-footer__menu ul { list-style: none; }
    .footer-menu__title { display: block; font-size: 1.8rem; font-weight: 500; }
    .menu-item { text-decoration: none; transition: 200ms ease; position: relative; --padding-x: 0rem; --padding-y: 0;
        &:not(.menu-item--contact-link):hover { text-decoration: underline; }
        &.menu-item--highlight::after { content: attr(data-vacancy-count); display: inline-flex; align-items: center; justify-content: center; min-width: 1.8rem; height: 1.8rem; padding: 0 .4rem; border-radius: 50%; background-color: var(--clr-primary); color: #fff; font-size: 1rem; font-weight: 600; line-height: 1; position: absolute; top: -.8rem; left: calc(100% + .2rem); }
    }
    address { font-style: normal; }
    .contact-links { display: grid; gap: .6rem; 
        a:hover { opacity: .8; } 
    }

    .wpb-footer__bottom { --p: 3.2rem;
        .inner { display: flex; flex-direction: column; justify-content: space-between; align-items: center; column-gap: 2rem; row-gap: 2rem; border-top: 1px solid #DFDFDF; padding: var(--p) 0; }
        .wpb-footer__sub-links { text-align: center;  display: flex; flex-wrap: wrap; column-gap: 2.4rem;
            * { display: flex; column-gap: 2rem; text-decoration: none; font-size: 1.4rem; 
                &:is(a):hover { text-decoration: underline;  }
            }
        }
    }

    .wpb-footer__right { gap: var(--inner-gap); display: grid; column-gap: var(--inner-gap); row-gap: 4rem;
        .wpb-social-media { margin-top: 1.6rem; }
        .wpb-logo { max-width: 6rem; }
        .wpb-footer__menu ul { display: grid; row-gap: 1.6rem;}
        .footer-address { margin-top: .6rem; margin-bottom: 1.8rem; }
        .contact-links .menu-item { display: flex; align-items: center; gap: .7rem;
            & > span { text-decoration: underline;  }
        }
    }
    .wpb-footer__left .wpb-footer__menu { display: grid; row-gap: 3.2rem; }
} 

@media (min-width: 768px) {
    .wpb-footer { --inner-gap: 6rem;
        .wpb-footer__main .container { flex-direction: row; }
        .wpb-footer__right { display: flex; flex-direction: row; flex-wrap: wrap;  }

        .wpb-footer__bottom .inner { flex-direction: row; }
    }    

}


@media(min-width: 992px) {
    .wpb-footer {
        .wpb-footer__main { --pt: 12rem; --pb: 9rem; }
        .wpb-footer__left .wpb-footer__menu { row-gap: 6.7rem; }
    }
}

@media(min-width: 1200px) {
    .wpb-footer .wpb-footer__right { --inner-gap: 9rem; }
}

/*** ---------- Social media ---------- ***/
.wpb-social-media {
    --clr: var(--clr-primary); 
    --bg-clr: var(--clr-primary-20); 
    --border: none; 
    --box-shadow: none; 
 
    display: grid; gap: 1rem;

    a { transition: 200ms ease; background-color: var(--bg-clr); border-radius: var(--br); text-decoration: none;  display: inline-flex; gap: .9rem; align-items: center; transition: background-color var(--ts-duration) ease-in-out;
        i { color: inherit; }
    
        &:hover, &:active, &:focus { opacity: .8; }
    }
}

/*** ---------- Person ---------- ***/
.wpb-person { display: flex; align-items: center; gap: 1.6rem;
    .wpb-person__inner { display: flex; flex-direction: column; }
    .wpb-person__name { font-size: 1.8rem; font-weight: 600; color: var(--clr-heading); }
    .wpb-person__position { font-size: 1.6rem; color: var(--clr-text); }
    .wpb-image { width: 4.4rem; height: 4.4rem; border-radius: 50%; overflow: hidden;}
}

/*** ---------- Background assets ---------- ***/
.wpb-asset { position: absolute; --src: ; --asset-clr: var(--clr-tertiary); --w: 20rem; --ratio: 100%; display: inline-flex; background: transparent; 
    &::before { content: ''; display: block; padding-top: var(--ratio); width: var(--w); min-width: var(--w); pointer-events: none; }
    &::after { content:''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-mask-image: var(--src); mask-image: var(--src); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; display: inline-block; pointer-events: none;
        background-color: var(--asset-clr); transition: background-color var(--ts-duration) var(--ts-function); }

    /* Variations */
    &.wpb-asset--ada-outline { --w: 127.5rem; --src: url('/app/themes/wuxnl-theme/assets/img/ada_icon_outline.svg'); }
    &.wpb-asset--ada-fill { --w: 127.5rem; --src: url('/app/themes/wuxnl-theme/assets/img/ada_icon_fill.svg'); }
    &.wpb-asset--dots { --asset-clr: rgba(0, 0, 0, 0.1); --w: 100%; --h: 36rem; --ratio: auto; --composite-mask: var(--dot-mask), linear-gradient(to bottom, transparent 0%,black 20%,black 80%,transparent 100%); position: absolute; left: 0; right: 0; bottom: var(--pb, 0);
        &::before{ height: var(--h); }
        &::after{ -webkit-mask-size: contain; mask-size: 1.8rem; -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-position: center; -webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-image: var(--composite-mask); mask-image: var(--composite-mask); }
    }
}

/*** ---------- text blob ---------- ***/
.text-blob { padding: 1.1rem 2.4rem; border-radius: 3rem 3rem 3rem 0; display: flex; flex-direction: column; font-size: 1.8rem; line-height: 1.2; font-weight: 500; box-shadow: 0 0 1.6rem 0 rgba(var(--clr-tertiary-rgb), .33) inset; backdrop-filter: blur(1.3rem); -webkit-backdrop-filter: blur(1.3rem); color: #fff; background-color: rgba(255, 255, 255, 0.1);
    .text-blob__line { --line-clr: #B5A895; position: absolute; bottom: 0; right: 100%; width: var(--line-width, 0);
        border-top: 1px solid var(--line-clr);

        &::before, &::after { top: -.3rem; content: ''; position: absolute; width: .7rem; height: .7rem; transform: rotate(45deg); transform-origin: top; background-color: var(--line-clr); z-index: 3; pointer-events: none; }
        &::before { left: -.2rem; }
        &::after { right: -.5rem; }
    }
    small { font-size: 1.4rem; font-weight: 400; }
}

/*** ---------- Text blob ---------- ***/
.text-blob { padding: 1.1rem 2.4rem; border-radius: 3rem 3rem 3rem 0; display: flex; flex-direction: column; font-size: 1.8rem; line-height: 1.2; font-weight: 500; box-shadow: 0 0 1.6rem 0 rgba(var(--clr-tertiary-rgb), .33) inset; backdrop-filter: blur(1.3rem); -webkit-backdrop-filter: blur(1.3rem); color: #fff; background-color: rgba(255, 255, 255, 0.1);
    .text-blob__line { --line-clr: #B5A895; position: absolute; bottom: 0; right: 100%; width: var(--line-width, 0);
        border-top: 1px solid var(--line-clr);

        &::before, &::after { top: -.3rem; content: ''; position: absolute; width: .7rem; height: .7rem; transform: rotate(45deg); transform-origin: top; background-color: var(--line-clr); z-index: 3; pointer-events: none; }
        &::before { left: -.2rem; }
        &::after { right: -.5rem; }
    }
    small { font-size: 1.4rem; font-weight: 400; }
}