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

@import url('https://fonts.googleapis.com/css2?family=Finger+Paint&family=Fustat:wght@200..800');
@import url('https://use.typekit.net/gth3cok.css');

:root {
    --fs: 1.6rem;
    --lh: 1.6;

    --br: 1.2rem;
    --br-sm: 0.8rem;
    --br-lg: 1.6rem;
    
    /* Custom beziers */
    --cb--smooth: cubic-bezier(.58,.22,.2,.96);

    /* Color variables */
    --clr-primary: #5FB3F3;
    --clr-primary-110: #165b90;
    --clr-primary-120: #49789B;
    --clr-primary-20: #cce2e7;
    --clr-primary-10: #e6f1f3;

    --clr-primary-rgb: 31, 125, 194;
    
    --clr-secondary: #e6fae9;

    --clr-dark: #333D42;
    --clr-dark-80: #303D52;
    --clr-dark-50: #8a9799;
    --clr-dark-110: #1e2a3d;
    --clr-dark-rgb: 21, 47, 51;

    --clr-light: #FFF9F2;
    --clr-light-rgb: 255, 249, 242;

    --clr-border: rgb(222, 226, 230); 

    --clr-heading: var(--clr-dark);
    --clr-text: var(--clr-dark);
    
    --clr-background: #FFFEFC;
    --clr-background-rgb: 255, 254, 252;

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

    /* Font variables */
    --font-primary: "DM Sans";
    --font-secondary: "Fraunces";
    --font-heading: "Fraunces";


    /* 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: 1320px;
    --container-width--full: 100vw;

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

}

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

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

/*** ---------- Typography ---------- ***/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--clr-dark); font-family: var(--font-heading);}
h1, .h1 { --fs: clamp(3.2rem, 5vw, 8.6rem); --lh: 1; --mt: 2rem;}
h2, .h2 { --fs: clamp(2.8rem, 4vw, 4.4rem); --lh: 1; }
h3, .h3 { --fs: clamp(2rem, 3vw, 2.4rem); --lh: 1; }
h4, .h4 { --fs: 1.8rem; --lh: 2rem; }

p:has(em):has(+ h1) { font-size: clamp(2.4rem, 4vw, 2.8rem);  }

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

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

.wpb-wsb--none { --pb: 0; }
.wpb-wsb--small { --pb: 1.8rem; }
.wpb-wsb--medium { --pb: 2.5rem; }
.wpb-wsb--large { --pb: 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; }
}

/*** ---------- Background colors ---------- ***/
.wpb-bg-clr--primary { background-color: var(--clr-primary); }
.wpb-bg-clr--secondary { background-color: var(--clr-secondary); }
.wpb-bg-clr--white-transparent {background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255, 0));} 

/*** ---------- Buttons ---------- ***/


/*** ---------- Header ---------- ***/
.wpb-header { --gc: 1; --gap: 3.2rem; padding: 12rem 0; position: relative !important; overflow: hidden;}

.wpb-header.wpb-header--home { padding: 4rem 0; height: 80dvh; position: relative; overflow: hidden; background-color: #fff !important;}
.wpb-header.wpb-header--home .container { display: flex ; height: 100%; align-items: flex-start; justify-content: flex-end; flex-direction: column; gap: 2rem; z-index: 20;}
.wpb-header.wpb-header--home h1 {font-family: var(--font-primary); font-weight: 700; color: var(--clr-primary-120) !important;}
.wpb-header.wpb-header--home h1 strong { font-family: var(--font-secondary) !important; color: var(--clr-primary); font-style: italic;}
.wpb-header.wpb-header--home:after {content: '';position: absolute;top: 1rem;left: 1rem;right: 1rem;bottom: 1rem;width: 100%;height: 100%;z-index: 2;background: linear-gradient(15deg, rgba(255, 255, 255, 0.4) 0%, rgba(21, 47, 51, 0) 60%);}
.wpb-header.wpb-header--home figure.is-background-image {position: absolute; top: 1rem; right: 1rem; bottom: 0; left: 1rem; border-radius: 1rem; overflow: hidden;}
.wpb-header.wpb-header--home .wpb-location {position: relative; color: var(--clr-dark);}
.wpb-header.wpb-header--home .wpb-location .location { display: flex; align-items: center; column-gap: 1.2rem;  }
.wpb-header.wpb-header--home .wpb-location .location a {text-decoration: none; color: var(--clr-dark); transition: color var(--ts-25) ease;}
.wpb-header.wpb-header--home .wpb-location .location a:hover {text-decoration: none; color: var(--clr-primary);}
.wpb-header.wpb-header--home .wpb-location .gallery-progress-bar{ position: absolute; bottom: -1rem; left: 0; width: 100%; height: .2rem; background-color: var(--clr-primary-20); backdrop-filter: blur(10px); border-radius: 2rem; overflow: hidden;} 
.wpb-header.wpb-header--home .wpb-location .gallery-progress-bar .gallery-progress-bar__loader { position: absolute; left: 0; top: 0; bottom: 0; right: 0; background-color: var(--clr-dark); width: 0%; }

.wpb-header.wpb-header--home .image--gallery {z-index: 1;}
.wpb-header.wpb-header--home figure:has(img + img){ background-color: rgb(var(--clr-primary), 1); }
.wpb-header.wpb-header--home figure img {position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--ts-100) ease;}
.wpb-header.wpb-header--home figure img.active{ transform: scale(1.3); animation: 12s header-zoom ease; opacity: 1; }

.wpb-header.wpb-header--home .clouds {position: absolute; bottom: -1rem; left: -50%; width: 100%; height: auto; z-index: 10;}
.wpb-header.wpb-header--home .clouds img { position: absolute; bottom: 0; width: auto; height: 40dvh;}

.wpb-header--single { --h: fit-content; height: var(--h); border-radius: 0 0 2rem 2rem; overflow: hidden;}
.wpb-header--single .container--header .wpb-text {z-index: 2; position: relative;}

.wpb-header--subpage { height: 60vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }

@media (min-width: 992px) {
    .wpb-header.wpb-header--home { --gc: 2; height: calc(100dvh - 1rem); padding: 1rem; }
    .wpb-header.wpb-header--home .container {flex-direction: row; align-items: flex-end; justify-content: space-between; }

    .wpb-header.wpb-header--home .clouds {bottom: -16rem;left: -20rem;height: 100%;}
    .wpb-header.wpb-header--home .clouds img {width: 110dvw; height: auto;}

    .wpb-header--single .container--header { --h: 40rem; }
    .wpb-header--single {--mx: 1.8rem; margin-left: var(--mx); margin-right: var(--mx); }
}

@media (min-width: 1200px) {
    .wpb-header--single .container--header { --h: 60rem; }
}

@keyframes loading-bar {
    0%{ left: 100%; width: 100%; } 
    5%{ left: 0; width: 0%; }
    95%{ left: 0; width: 100%; }
    100%{ left: 100%; }
}

/*** ---------- Footer ---------- ***/
.wpb-footer { background-color: var(--clr-dark-110); color: #fff; position: relative; z-index: 1; } 
.wpb-footer .logo { filter: contrast(0) brightness(2); }
.wpb-footer::after { background-color: rgba(255,255,255,.65); z-index: -1;  } 
.wpb-footer__main .logo img { width: 15rem; height: auto; }
.wpb-footer__main { --gc: 1; }
.wpb-footer__main .container { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); column-gap: 3.2rem; align-items: start; }
.wpb-footer-menus { --gc: 1; display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); column-gap: 2rem; }
.wpb-footer-menu input { display: none; }
.wpb-footer-menu ul { list-style: none; }
.wpb-footer-menu a:hover { text-decoration: underline; }
.wpb-footer-menu .wpb-footer-menu__title { font-family: var(--font-secondary); text-transform: uppercase; color: #fff; display: flex; align-items: center; justify-content: space-between; padding-bottom: 2rem; font-size: 2.4rem; text-decoration: none; text-decoration: none; }
.wpb-footer-menu .wpb-footer-menu__title i { font-size: 1.8rem; }
.wpb-footer-menu a { color: #fff; text-decoration: none; }
.wpb-footer-menu li + li a { padding-top: 1.2rem; display: block; }
.wpb-footer__bottom { font-size: 1.3rem; padding-block: 3.2rem; }
.wpb-footer__bottom a { font-size: 1.3rem; color: #fff; text-decoration: none; }
.wpb-footer__bottom .container { display: flex; flex-wrap: wrap; column-gap: 1.2rem; }
.wpb-footer__bottom .by-wux span { text-decoration: underline; }
.wpb-footer__bottom .by-wux img { width: 1.8rem; margin-left: .8rem; }
.wpb-footer__bottom .bottom-links a:hover { text-decoration: underline; }
@media (max-width: 767.98px) {
    .wpb-footer__main .wpb-card { margin-inline: -1.8rem; width: calc(100% + 3.6rem); }    
    .wpb-footer__bottom .bottom-links { row-gap: 1.2rem; display: flex; flex-direction: column; margin-inline: -1.8rem; width: calc(100% + 3.6rem); padding: 0 1.8rem 3.2rem 1.8rem; margin-bottom: 2.4rem; border-bottom: 1px solid rgba(255,255,255,.25); }
}

@media (max-width: 991.98px) {
    .wpb-footer-menu { border-bottom: 1px solid rgba(255,255,255,.25); } 
    .wpb-footer-menu .wpb-footer-menu__title { user-select: none; cursor: pointer; padding-top: 2rem; }
    .wpb-footer-menu .wpb-footer-menu__collapse { display: grid; grid-template-rows: 0fr; transition: 200ms ease-in-out; }
    .wpb-footer-menu .wpb-footer-menu__collapse > div { overflow: hidden; }
    .wpb-footer-menu .wpb-footer-menu__collapse ul { padding-bottom: 2rem; }
    .wpb-footer-menu input:checked + .wpb-footer-menu__title + .wpb-footer-menu__collapse { grid-template-rows: 1fr; }
    .wpb-footer-menu input:checked + .wpb-footer-menu__title i { transform: rotate(180deg); }
}

@media (min-width: 768px) {
    .wpb-footer__main { --gc: 2; }
    .wpb-footer__main .wpb-card { margin-top: -3.2rem; }
    .wpb-footer-menu a { font-size: 1.6rem; }

    .wpb-footer__bottom .copyright { order: -1; }
    .wpb-footer__bottom .bottom-links a::before { content: '|'; margin-right: 1.2rem; }
    .wpb-footer__bottom .bottom-links a + a { margin-left: 1.2rem; }
    .wpb-footer__bottom .by-wux { display: flex; align-items: center; gap: .2rem; text-decoration: none; margin-left: auto; }

}

@media (min-width: 992px) {
    .wpb-card.wpb-card--contact-info .logo { margin-bottom: 2.8rem; }
    
    .wpb-footer__main .logo img { width: 15rem; }
    .wpb-footer__main .container { grid-template-columns: minmax(0, 40rem) 1fr; }
    .wpb-footer-menus { --gc: 2; padding-block: 4.8rem; }  
    .wpb-footer-menu .wpb-footer-menu__title { font-size: 2.5rem; } 
    .wpb-footer-menu .wpb-footer-menu__title i{ display: none; }
    .wpb-footer__bottom { padding-top: 5.6rem; }  

}

@media (min-width: 1200px) {
    .wpb-footer-menus { --gc: 3; padding-top: 6.4rem; } 
}

@media (min-width: 1400px) {
    .wpb-footer__main .container { column-gap: 10rem; }
    .wpb-footer-menus { padding-top: 10rem; } 
}

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




/*** ---------- Archive: Blogs ---------- ***/
.wpb-archive--begrippenlijst .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.2rem; } 
.wpb-archive--begrippenlijst #wux-filter-results { --gc: 2; display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: .25rem 2rem; } 
.wpb-archive--begrippenlijst #wux-filter-results h3 { grid-column: span var(--gc); }  
.wpb-archive--begrippenlijst #wux-filter-results h3:not(:first-of-type) { border-top: 1px solid var(--clr-dark-30); padding-top: 2rem; }
.wpb-archive--begrippenlijst #wux-filter-results .post-item + h3 { margin-top: 2rem; }
.wpb-archive--begrippenlijst a { text-decoration: none; transition: color var(--ts-15) var(--cb--smooth); }
.wpb-archive--begrippenlijst a:hover { color: var(--clr-primary); }

.wpb-archive-buttons { display: flex; flex-wrap: wrap; margin-top: 1.6rem; margin-bottom: 4.8rem; background-color: #fff; padding: 2rem; border-radius: var(--br--sm); }
.wpb-archive-buttons a { min-height: 3.6rem; min-width: 3.6rem; display: grid; place-items: center; text-decoration: none; font-weight: 600; font-size: 1.8rem; transition: color var(--ts-15) var(--cb--smooth); }
.wpb-archive-buttons a:hover { color: var(--clr-primary); }

@media (min-width: 1200px) {
    .wpb-archive--begrippenlijst .container { grid-template-columns: minmax(0, 1fr) minmax(0, 49.2rem); }
    .wpb-archive-buttons{ position: sticky; top: 4rem; }
}


/*** ---------- Contact information ---------- ***/
.wpb-contact-information { display: flex; flex-direction: column; justify-content: center;}
.wpb-contact-information > a { display: flex; gap: .8rem; align-items: center; font-weight: 500; }
.wpb-contact-information .contact-link:hover .contact-link__text { color: var(--clr-sand); }
.wpb-contact-information > a .wpb-icon { --clr: var(--clr-primary); }
.wpb-contact-info .contact-link { font-size: 1.5rem; display: flex; align-items: center; column-gap: 1.2rem; }
.wpb-contact-info .contact-link + .contact-link { padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.25); }
.wpb-contact-info .contact-link:not(:last-child) { padding-bottom: 1.6rem; }
.wpb-contact-info .contact-link .contact-link__text small { display: block; width: 100%; font-size: 1.2rem; line-height: 1; color: #FFF;}


@media (min-width: 992px) {
    .wpb-contact-info .contact-link { font-size: 1.6rem; }  
}


/*** ---------- WUX search ---------- ***/
.wux-search-form { width: 50rem; margin: 0 auto; position: relative; }
.wux-search-form .form-group { display: flex; gap: 0.8rem; }

.wux-search-form .wux-search-results { position: relative;}
.wux-search-form .wux-search-results__group { background-color: #FFF; }
.wux-search-form input[type=search] {background-color: rgba(255,255,255,.25);}
.wux-search-form input[type=search]::placeholder { color: var(--clr-text) }
.wux-search-form .btn--outline {--border: 1px solid rgba(255,255,255,1);--bg-clr: rgba(255,255,255,.25);--clr: rgba(255,255,255,1);}




/*** -------------- Single -------------- ***/
.single {}


/*** ---------- Single article ---------- ***/
.wpb-content--article .wpb-related--posts {position: sticky; top: 1.6rem;}


/*** ---------- Single Location ---------- ***/
.single-locations {}
.single-locations .wpb-text p {margin-top: var(--mt);}
.single-locations .wpb-content__main{}
.single-locations .wpb-content__main--footer {margin-top: 2.4rem; border-top: 1px solid var(--clr-border); padding-top: 2.4rem; }



/*** -------------- Archive -------------- ***/
.wpb-archive {}


/*** ---------- Archive Location ---------- ***/
.wpb-archive--locations {}
.wpb-archive--locations .container {display: grid;grid-template-columns: repeat(4, 1fr);gap: 2.4rem;list-style: none;}

.wpb-archive--locations .container .country {position: relative; text-decoration: none; text-transform: capitalize;}
.wpb-archive--locations .container .country-item { display: block; position: relative; z-index: 1;}
.wpb-archive--locations .container .country .country-name {font-family: var(--font-secondary);font-size: 3.2rem;padding: 1.2rem; transition: all var(--ts-duration) var(--ts-function);}
.wpb-archive--locations .container .country .country-hover {width: 0.4rem; height: 0%; background: var(--clr); position: absolute; bottom: 0; left: -1rem; transition: all var(--ts-duration) var(--ts-function);}
.wpb-archive--locations .container .country:hover .country-name {color: var(--clr-primary-20);}
.wpb-archive--locations .container .country:hover .country-hover {height: 100%; background: var(--clr-primary-20);}

.wpb-archive--locations .container .location-image {position: absolute;object-fit: cover;transform: translateX(-50%) translateY(-50%);top: 50%;left: 50%;z-index: -10;opacity: 0;visibily: hidden;pointer-events: none;border-radius: var(--br);}