/*
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: 1.4rem;
    --lh: 1.6;
    
    /* Custom beziers */
    --cb--smooth: cubic-bezier(.58,.22,.2,.96);

    /* Color variables */
    --clr-primary: #95c11f;
    --clr-primary-rgb: 149, 193, 31;
    
    --clr-secondary: #344c2f;
    --clr-secondary-80: #4b6346;
    --clr-secondary-60: #6d8169;
    --clr-secondary-40: #849c7f;
    --clr-secondary-rgb: 52, 76, 47;

    /* --clr-foundation: #76826a; */

    --clr-heading: #344c2f;
    --clr-text: #344c2f;

    --clr-dark: #000000;
    --clr-dark-rgb: 0, 0, 0;
    --clr-moss: #f5f6f0;
    --clr-light: #ffffff;
    
    --clr-orange: #c66f2f;
    --clr-purple: #b888a8;
    --clr-blue: #2d718c;
    
    --clr-border: rgba(227, 230, 226, 1); 
    
    --clr-danger: #e2401c;
    --clr-info: #3d9cd2;
    --clr-success: #1CB435;

    /* Font variables */
    --font-heading: "quatro", sans-serif;
    --font-primary: "europa", sans-serif;

    /* Container max-width variables */
    --container-width: 100%;
    --container-width--sm: 540px;
    --container-width--md: 780px;
    --container-width--lg: 960px;
    --container-width--xl: 1140px;
    --container-width--2xl: 1320px;
    --container-width--3xl: 1440px;
    --container-width--4xl: 1560px;

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

    --glob-rotation: -17deg;
}

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

body { font-family: var(--font-primary); scroll-padding-top: 5rem;}
/*** ---------- Typography ---------- ***/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: var(--font-heading); }
h1, .h1 { --fs: clamp(3.2rem, 5vw, 6.4rem); --lh: 1; }
h2, .h2 { --fs: clamp(3.2rem, 4vw, 6.4rem); --lh: 1; }
h3, .h3 { --fs: clamp(2.8rem, 3vw, 3.6rem); --lh: 1; }
h4, .h4 { --fs: 1.8rem; --lh: 2rem; }

:is(h1, h2, h3):has(strong){ font-weight: 400; }
:is(h1, h2, h3):has(strong) strong{ font-weight: 600; color: var(--clr-primary); }

.wpb-text.wpb-text--big-bold p strong{ font-family: var(--font-heading); font-size: clamp(2rem, 2vw, 2.8rem); font-weight: 600; }

.wpb-text .wpb-text__footer{ border-top: 1px solid var(--clr-border); padding-top: 1.8rem; display: flex; align-items: center; gap: 4.8rem; row-gap: 2.4rem; flex-wrap: wrap; }
.wpb-text .wpb-text__footer .contact-link{ margin: 0; flex-direction: column; }

/*** ---------- 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: 1.8rem; }
.wpb-wst--medium { --pt: 2.4rem; }
.wpb-wst--large { --pt: 4rem; }

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

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

/*** ---------- Background colors ---------- ***/
.wpb-bg-clr--primary { --wpb-bg-clr: var(--clr-primary); }
.wpb-bg-clr--secondary { --wpb-bg-clr: var(--clr-secondary); }
.wpb-bg-clr--secondary-40 { --wpb-bg-clr: var(--clr-secondary-40); }

/*** ---------- Person ---------- ***/
.wpb-person{ display: flex; gap: 1.6rem; text-decoration: none; }
.wpb-person .wpb-person__image{ --size: 5rem; --br: .5rem; display: flex; }
.wpb-person .wpb-person__image .wpb-person__image-inner{ width: var(--size); min-width: var(--size); max-width: var(--size); height: var(--size); min-height: var(--size); max-height: var(--size); transform: rotate(var(--glob-rotation)); border-radius: var(--br); position: relative; left: .5rem; overflow: hidden; }
.wpb-person .wpb-person__image .wpb-person__image-inner img{ --offset: calc((var(--size) * 1.25) - var(--size)); --rev-offset: calc(-1 * var(--offset) / 2); position: relative; top: var(--rev-offset); left: var(--rev-offset); width: calc(var(--size) + var(--offset)); height: calc(var(--size) + var(--offset)); object-fit: cover; transform: rotate(calc(-1 * var(--glob-rotation))); }
.wpb-person .wpb-person__image .wpb-person__image-label{ --bg-clr: var(--clr-purple); --clr: #fff; background-color: var(--bg-clr); color: var(--clr); font-size: 1.4rem; font-weight: 700; padding: .1em .75em; height: fit-content; border-radius: var(--br); border-bottom-left-radius: 0; margin-top: -1.75rem; margin-left: -1.25rem; z-index: 1; }
.wpb-person .wpb-person__text{ line-height: 1.3; }
.wpb-person .wpb-person__text strong{ font-size: clamp(1.5rem, 1.5vw, 1.8rem); }
.wpb-person .wpb-person__text p{ font-size: clamp(1.4rem, 1.25vw, 1.5rem); color: var(--clr-secondary-60); }
.wpb-person .wpb-person__text .btn{ margin-top: 1.6rem; }

.wpb-person .wpb-person__image:has(:not(.wpb-person__image-label)) { --size: 4.2rem; padding-right: 1.5rem; }

.wpb-person:is(a) { transition: 200ms ease; }
.wpb-person:is(a):hover { opacity: .9; }

/*** ---------- Header ---------- ***/
.wpb-header.wpb-header--home { --gc: 1; --gap: 3.2rem; }
.wpb-header.wpb-header--home h1 { --fs: clamp(4rem, 6vw, 10rem); }

.wpb-header.wpb-header--home .wpb-text.header-text p{ --mt: 0; font-size: clamp(1.8rem, 2vw, 3.2rem); color: rgb(var(--clr-secondary-rgb), .65); }

.wpb-header.wpb-header--home .wpb-section__body {position: relative; overflow-x: clip;}

.wpb-header.wpb-header--home .wpb-section__cta {--h: 30rem; position: relative; height: var(--h);}
.wpb-header.wpb-header--home .wpb-section__cta::before {content: ''; width: 110%; height: 40rem; display: block; z-index: -1; position: absolute; bottom: 3rem; left: -5%; right: 0; border-radius: 2rem; background: var(--clr-secondary-60); transform: rotate(var(--glob-rotation)); }
.wpb-header.wpb-header--home .wpb-section__cta .container { padding: 0 3.6rem; height: 100%; display: flex ; align-items: center;}
.wpb-header.wpb-header--home .wpb-section__cta .wpb-text { font-size: 1.5rem; line-height: 1.6; color: #fff; margin-top: -2rem; }

@media (min-width: 480px) {
    .wpb-header.wpb-header--home .wpb-section__cta {--h: 25rem;}
    .wpb-header.wpb-header--home .wpb-section__cta .container { padding: 0 3.6rem;}
}
@media (min-width: 768px) {
    .wpb-header.wpb-header--home .wpb-section__cta {position: absolute; top: 0; left: 10vw; z-index: 2;  max-width: 55rem; width: 60vw; }
    .wpb-header.wpb-header--home .wpb-section__body {position: relative; overflow: hidden;}
    .wpb-header.wpb-header--home .wpb-section__cta .wpb-text { font-size: 1.8rem;}
}

.wpb-header.wpb-header--subpage .container--full .wpb-text{ max-width: 80rem; }
.wpb-header.wpb-header--subpage .wpb-text p{ font-family: var(--font-heading); font-size: clamp(1.6rem, 2vw, 2.4rem); line-height: 1.4; }
.wpb-header.wpb-header--subpage i:has(+ h1){ --w: 10rem; --h: 10rem; --clr: var(--page-clr); }
.wpb-header.wpb-header--subpage i + h1{ --mt: 3.2rem; }

.wpb-header.wpb-header--subpage.has-background-image{ min-height: 70dvh; display: flex; flex-direction: column; justify-content: end; }
.wpb-header.wpb-header--subpage.has-background-image i:has(+ h1){ --clr: #fff; }

.wpb-header--archive .wpb-text h1{ --fs: clamp(4rem, 6vw, 10rem); --lh: 1.2; }
.wpb-header--archive .wpb-text p{ --mt: 2.4rem; font-size: clamp(2rem, 2vw, 3.2rem); color: rgb(var(--clr-secondary-rgb), .65); }

.wpb-header--project .wpb-header__toolbar{ justify-content: center; padding-bottom: 0; }
.wpb-header--project .wpb-text > *:not(.wpb-person){ text-align: center; }
.wpb-header--project .wpb-text h1{ word-break: break-word; hyphens: auto; }
.wpb-header--project .wpb-text h1 + p{ --mt: .8em; font-family: var(--font-heading); font-size: clamp(2rem, 2vw, 3.2rem); color: var(--clr-primary); }
.wpb-header--project .wpb-person{ --mt: 7.2rem; justify-content: center; }
.wpb-header--project .wpb-person .wpb-person__image .wpb-person__image-label{ --bg-clr: var(--clr-primary); }

.wpb-header--single-team { --gap: 3.2rem; }
.wpb-header--single-team .container{ display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--gap); }
.wpb-header--single-team .person-quote{ font-family: var(--font-heading); font-size: clamp(2rem, 2vw, 2.8rem); font-weight: 700; color: var(--clr-secondary-60); }
.wpb-header--single-team .wpb-image img{ max-height: 40rem; object-fit: cover; object-position: top; }

@media (min-width: 768px) {
    .wpb-header--single-team { --gap: 6.4rem; }
    .wpb-header--single-team .container{ grid-template-columns: 1fr 35rem; align-items: center; }
}
@media (min-width: 992px) {
    .wpb-header.wpb-header--home { --gc: 2; --gap: 0; }
    .wpb-header.wpb-header--home .wpb-text.wpb-text--right{ padding-left: 6.4rem; }
    .wpb-header--single-team .wpb-image img{ max-height: 50rem; }
}
@media (min-width: 1200px) {
    .wpb-header--single-team .container{ grid-template-columns: 1fr 50rem; }
}
@media (min-width: 1400px) {
    .wpb-header.wpb-header--home .wpb-text.wpb-text--right{ padding-left: 13.2rem; max-width: 64rem; }
    .wpb-header--single-team .wpb-image img{ max-height: 60rem; }
}


/*** ---------- Read more ---------- ***/
.wpb-bg-clr--transparent .read-more-content   { --gradient-clr: #fff; }
.wpb-bg-clr--white .read-more-content         { --gradient-clr: #fff; }
.wpb-bg-clr--grey .read-more-content          { --gradient-clr: var(--clr-border); }
.wpb-bg-clr--light .read-more-content         { --gradient-clr: var(--clr-moss); }

.read-more-content{ --max-height: 20rem; max-height: var(--max-height); position: relative; overflow: hidden; transition: max-height var(--ts-40) ease;
    &:has(h1, h2, h3){ --max-height: 48rem; }
    &::before{ content: ''; position: absolute; left: 0; bottom: -2rem; right: 0; height: 8rem; background: linear-gradient(to top, var(--gradient-clr) 0%, transparent 100%); opacity: 1; pointer-events: none; transition: opacity var(--ts-40) ease; }
    & + .btn.btn--read-more{ position: relative; z-index: 5; padding: 0rem; margin: 0; }
    &:has( + .btn.btn--read-more input[type="checkbox"]:checked){ max-height: var(--element-height, 100%); 
        &::before{ opacity: 0; }
    }
}
.btn.btn--read-more{ --fs: 1.2rem; --mh: 2rem;
    & input[type="checkbox"]{ display: none; }
    & .btn__less{ display: none; }
    & > i{ transition: transform var(--ts-25) ease; }

    &:has(input[type="checkbox"]:checked){
        & .btn__less{ display: block; }
        & .btn__more{ display: none; }
        & > i{ transform: rotate(180deg); }
    }
}

@media (min-width: 992px){
    .btn.btn--read-more{ --fs: 1.4rem; }
}


/*** ---------- Single: Projects ---------- ***/
body.single-projects :is(.wpb-block, .wpb-related--posts) h2{ --fs: clamp(2.2rem, 4vw, 4rem); }
body.single-projects :is(.wpb-block, .wpb-related--posts) h3{ --fs: clamp(2rem, 3vw, 2.4rem); }

/* .wpb-lightbox-gallery{ --img-min-w: 17rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--img-min-w), 1fr)); gap: 1.2rem; } */
.wpb-lightbox-gallery {--img-min-w: 17rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 1.2rem;}
.wpb-lightbox-gallery .wpb-lightbox-gallery__item{ --br: .6rem; flex-basis: calc(50% - 0.6rem); border-radius: var(--br); overflow: hidden; text-decoration: none; }
.wpb-lightbox-gallery .wpb-lightbox-gallery__item img{ width: 100%; height: 100%; object-fit: cover; transition: transform var(--ts-duration) ease; }
.wpb-lightbox-gallery .wpb-lightbox-gallery__item:has(i){ display: flex; justify-content: center; align-items: center; text-align: center; flex-direction: column; font-size: 1.8rem; font-weight: 600; padding: 2rem; border: 1px solid var(--clr-border); line-height: 1.2; transition: border var(--ts-duration) ease; }
.wpb-lightbox-gallery .wpb-lightbox-gallery__item:has(i) i{ display: block; font-size: 4rem; color: var(--clr-primary); margin-bottom: 1rem; }
.wpb-lightbox-gallery .wpb-lightbox-gallery__item:has(i):hover{ border-color: rgb(var(--clr-secondary-rgb), .4); }
.wpb-lightbox-gallery .wpb-lightbox-gallery__item:hover img{ transform: scale(1.1); }

.wpb-text + .wpb-lightbox-gallery{ margin-top: 4rem; }

/* 
.wpb-lightbox-gallery.wpb-lightbox-gallery--small{ --img-min-w: 17rem !important; }
.wpb-lightbox-gallery.wpb-lightbox-gallery--small .wpb-lightbox-gallery__item:has(i) { font-size: 1.5rem; }
.wpb-lightbox-gallery.wpb-lightbox-gallery--small .wpb-lightbox-gallery__item:has(i) i{ font-size: 2.8rem; } 
*/

.wpb-block--project-info .container{ z-index: 2; display: flex; flex-direction: column; gap: 2.4rem; }
.wpb-block--project-info .container .wpb-card{ max-width: 46rem; }

.wpb-block--bottom-text .wpb-text{ margin-bottom: 4.8rem; }

@media (min-width: 992px) {
    .wpb-block--project-info .container{ flex-direction: row; justify-content: space-between; }
    .wpb-block--project-info .container .wpb-card--project-info{ width: 44.4rem; }  
    .wpb-block--project-info .container .wpb-card--related-project{ width: 30.4rem; height: fit-content; }

    .wpb-lightbox-gallery .wpb-lightbox-gallery__item{ --br: .6rem; flex-basis: calc(25% - 0.9rem); }
}
/* @media (min-width: 1400px) {
    .wpb-lightbox-gallery{ --img-min-w: 28rem; }
}
@media (min-width: 1600px) {
    .wpb-lightbox-gallery{ --img-min-w: 34rem; }
} */

/*** ---------- Single: News ---------- ***/
body.single-news h1{ --fs: clamp(2.6rem, 5vw, 5.6rem); }
body.single-news h1.is_foundation{ color: var(--clr-foundation); }
body.single-news .wpb-content h2{ --fs: clamp(2.2rem, 4vw, 4rem); }
body.single-news .wpb-content h3{ --fs: clamp(1.8rem, 3vw, 2.8rem); }


/*** ---------- Single: Team ---------- ***/
body.single-team h1{ --fs: clamp(3.2rem, 5vw, 7.2rem); }
body.single-team h2{ --fs: clamp(2.2rem, 4vw, 4rem); }
body.single-team h1 + p{ --mt: 1rem; }
body.single-team .person-quote{ --mt: 3.2rem; }
body.single-team .wpb-related--posts{ --gap: 1.2rem; --gc: 2;  }

@media (min-width: 768px) {
    body.single-team .wpb-related--posts { --gc: 4;  }
}
@media (min-width: 1200px) {
    body.single-team .wpb-related--posts { --gap: 2.4rem; }
}

/*** ---------- Template: Pijlers ---------- ***/
body[class*="template-pijlers"] .wpb-block :is(h1, h2, h3):has(strong) strong{ color: inherit; }

body[class*="template-pijlers"] .wpb-header .wpb-text{ text-align: center; }
body[class*="template-pijlers"] .wpb-header .wpb-text .btn{ --mt: 4rem; min-height: 5.3rem; --hover-bg-clr: var(--page-clr); }
body[class*="template-pijlers"] .wpb-header .wpb-text .btn i{ font-size: 1.4rem; }

body[class*="template-pijlers"] .wpb-card.wpb-card--blurb .wpb-card__header h3{ color: var(--page-clr); }
body[class*="template-pijlers"] .wpb-card.wpb-card--blurb .wpb-card__header h3 i{ --clr: var(--page-clr) !important; }
body[class*="template-pijlers"] .wpb-person .wpb-person__image .wpb-person__image-label{ --bg-clr: var(--page-clr); }

body[class*="template-pijlers"] .wpb-block--news .wpb-section__header .wpb-text--side .btn{ --bg-clr: var(--page-clr); --hover-bg-clr: var(--clr-secondary); }

/*** ---------- Template: Contact ---------- ***/
body[class*="template-contact"] h2{ --fs: clamp(2rem, 2vw, 2.8rem); }
body[class*="template-contact"] .wpb-header + .wpb-block--text .container{ display: grid; gap: 2.4rem; }

@media (min-width: 992px) {
    body[class*="template-contact"] .wpb-header + .wpb-block--text .container{ grid-template-columns: 1fr 39rem; gap: 4.8rem; }
}

/*** ---------- Taxonomy: Project soort ---------- ***/
body[class*='tax-project_types'] .wpb-header .wpb-text{ text-align: center; }

.wpb-projects-archive__content .inner{ --gc: 1; display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 2.4rem; }

body[class*='tax-project_types'] .wpb-card--cta{ display: grid; height: 100%; }
body[class*='tax-project_types'] .wpb-card--cta .wpb-card__header{ height: fit-content; }
body[class*='tax-project_types'] .wpb-card--cta .wpb-card__body{ justify-content: space-between; align-items: end !important; }
body[class*='tax-project_types'] .wpb-person .wpb-person__text strong{ font-family: var(--font-heading); }

@media (min-width: 992px) {
    .wpb-projects-archive__content .inner{ --gc: 2;  gap: 4rem; }
}

/*** ---------- Footer ---------- ***/
.wpb-footer {  }
.wpb-footer.wpb-footer--primary {  }

.by-wux { display: flex; align-items: center; gap: .8rem; text-decoration: none; opacity: 1; color: var(--clr-secondary-60); transition: opacity var(--ts-duration) ease; }
.by-wux span { font-size: 1.1rem; line-height: 1; }
.by-wux img { height: 1.6rem; width: auto; }
.by-wux:hover{ opacity: .75; }