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

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

    --clr-danger: #dc2222;
    --clr-info: #3d9cd2;
    --clr-success: #1ac036;

    /* Font variables */
    --font-primary: 'Poppins', sans-serif;
    --font-heading: 'Clash Display', sans-serif;
    --font-special: 'Lacquer', system-ui;

    /* Container max-width variables */
    --container-width: 100%;
    --container-width--sm: 680px;
    --container-width--md: 840px;
    --container-width--lg: 1020px;
    --container-width--xl: 1180px;
    --container-width--xxl: 1360px;
    --container-width--xxxl: 1560px;


    --pattern: url('/app/themes/wuxnl-theme/assets/img/lef-bg-pattern.svg');
    --pattern-light: url('/app/themes/wuxnl-theme/assets/img/lef-bg-pattern--light.svg');
    --check-svg: url('/app/themes/wuxnl-theme/assets/icons/default/LF-check.svg');

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

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

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

/*** ---------- Typography ---------- ***/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--clr-heading); font-family: var(--font-heading); }
h1, .h1 { --fs: clamp(3rem, 5vw, 6.4rem); --lh: 1.2; }
h2, .h2 { --fs: clamp(2.6rem, 4vw, 4.8rem); --lh: 1.2; }
h3, .h3 { --fs: clamp(2.2rem, 3vw, 2.8rem); --lh: 1.4; }
h4, .h4 { --fs: clamp(2rem, 2vw, 2.4rem); --lh: 1.2; }

.wpb-text p:has(+ :is(h1, h2, h3)) em{ font-style: normal; line-height: 1; color: var(--clr-heading); }
.wpb-text p:has(em) + :is(h1, h2, h3) { --mt: .5em; }
/* .wpb-text p:has(strong:only-child){ font-size: clamp(1.8rem, 2vw, 2.4rem); opacity: 1; }
.wpb-text p:has(strong:only-child) strong{ font-weight: 400; } */

.wpb-text.txt-style--large p:not(:has(em):has(+ :is(h1, h2, h3))){ font-size: clamp(1.8rem, 2vw, 2.4rem); }

:is(.wpb-bg-clr--transparent, .wpb-bg-clr--light, .wpb-bg-clr--light-transparent) .wpb-text p:has(+ :is(h1, h2, h3)) em{ opacity: .7; }

/*** ---------- Lists ---------- ***/
.wpb-text ul{ --mt: 2rem; list-style: none; padding-left: 0; }
.wpb-text ul li{ position: relative; padding-left: 2em; }
.wpb-text ul li > strong{ color: var(--clr-heading); }
.wpb-text ul li + li{ margin-top: 1rem; }
.wpb-text ul li::before { font-family: 'Font Awesome 6 Pro'; font-weight: 900; content: "\f061"; color: var(--clr-primary); position: absolute; left: 0; top: 0; }

.wpb-text.lst-style--benefits ul li::before { content: "\f00c"; }

@media (min-width: 768px) {
.wpb-text ul{ --mt: 4rem;}
}

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

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

@media (min-width: 992px) {
    .wpb-wst--small { --pt: 10.5rem; }
    .wpb-wst--medium { --pt: 12rem; }
    .wpb-wst--large { --pt: 16rem; }
    
    .wpb-wsb--small { --pb: 10.5rem; }
    .wpb-wsb--medium { --pb: 12rem; }
    .wpb-wsb--large { --pb: 16rem; }
    
    .content-section.wpb-wst--small { --pt: 2.4rem; }
    .content-section.wpb-wst--medium { --pt: 4rem; }
    .content-section.wpb-wst--large { --pt: 5.6rem; }
    
    .content-section.wpb-wsb--small { --pb: 2.4rem; }
    .content-section.wpb-wsb--medium { --pb: 4rem; }
    .content-section.wpb-wsb--large { --pb: 5.6rem; }
}


/*** ---------- Background colors ---------- ***/
.wpb-bg-clr--primary { background-color: var(--clr-primary); }
.wpb-bg-clr--light { background-color: var(--clr-light); }
.wpb-bg-clr--light-transparent { background: linear-gradient(to bottom, var(--clr-light), var(--clr-light) 50%, transparent 50%); }
.wpb-bg-clr--bottom-gradient { --pos: 30%; background: linear-gradient(to top, var(--clr-light), transparent var(--pos)); }

.wpb-bg-clr--bottom-gradient:is(.wpb-block--pakketten){ --pos: 100%; }

:is(.wpb-bg-clr--primary, .--inner-light) *:not(.btn, .btn *){ color: #fff; }
:is(.wpb-bg-clr--primary, .--inner-light) .wpb-text p{ opacity: .7; }

/*** ---------- Header ---------- ***/
.wpb-header { z-index: 1; }
.wpb-header.wpb-header--home .wpb-text { text-align: center; }

.wpb-header:has(.wpb-header__main + .wpb-header__bottom){ --overlap: 7rem; }
.wpb-header .wpb-header__main{ --p: 12rem; position: relative; min-height: 50rem; padding: var(--p) 0; display: flex; flex-direction: column; justify-content: end; padding-bottom: calc(var(--p) + var(--overlap)); }
.wpb-header .wpb-header__bottom .container{ margin-top: calc(-1 * var(--overlap)); }
.wpb-header .wpb-header__bottom .inner{ --p: 2.4rem; padding: var(--p); padding-bottom: 8rem; position: relative; }
.wpb-header .wpb-header__bottom .inner .wpb-text p:has(strong:only-child) strong{ font-family: var(--font-heading); font-size: clamp(2rem, 3vw, 3.2rem); text-wrap: pretty; line-height: 1.2; font-weight: 600; }
.wpb-header .wpb-header__bottom .inner .wpb-text p:has(strong:only-child) strong em{ opacity: .6; }
.wpb-header .wpb-header__bottom .inner .wpb-meaning-label{ justify-content: center; position: absolute; left: var(--p); bottom: var(--p); right: var(--p); }

.wpb-header.wpb-header--secondary{ background-color: var(--clr-light); overflow: hidden; }
.wpb-header.wpb-header--secondary .wpb-header__main{ min-height: auto; }
.wpb-header.wpb-header--secondary::before{ content: ''; position: absolute; top: var(--p); right: 0; width: 30%; height: 50rem; object-fit: cover; background-image: var(--pattern); }
.wpb-header.wpb-header--secondary .wpb-text h1 + p{ --mt: .5em; font-size: clamp(1.8rem, 2vw, 2.4rem); }

.wpb-header.wpb-header--contact .container{ display: grid; gap: 4.8rem; }
.wpb-header.wpb-header--contact .inner{ display: flex; flex-direction: column; gap: 2.4rem; }
.wpb-header.wpb-header--contact .inner .wpb-icon-wrapper{ --bg-clr: #fff; }
.wpb-header.wpb-header--contact .wpb-contact-link .wpb-contact-link__text strong{ font-family: var(--font-heading); }

.wpb-header--archive .wpb-text{ text-align: center; }
.wpb-header--archive .wpb-breadcrumbs{ width: fit-content; margin: auto; }
.wpb-header--archive .wpb-search{ margin-top: 4rem; }

.wpb-meaning-label{ display: flex; gap: .3em; align-items: center; height: 2rem; }
.wpb-meaning-label span{ font-family: var(--font-heading); font-size: 3rem; font-weight: 600; opacity: .6; padding-top: .4em; display: block; }

@media (min-width: 576px) {
    .wpb-header .wpb-header__bottom .inner{ --p: 3.2rem; }
}
@media (min-width: 768px) {
    .wpb-header.wpb-header--contact .container{ grid-template-columns: 1fr 32.5rem; }
}
@media (min-width: 992px) {
    .wpb-header .wpb-header__main{ --p: 14rem; }
    .wpb-header .wpb-header__bottom .inner{ --p: 5.4rem 4.8rem; }
    .wpb-header .wpb-header__bottom .container{ --wpb-width: 860px; }
    .wpb-header .wpb-header__bottom .inner .wpb-meaning-label{ left: auto; bottom: 3rem; right: 3rem; }

    .wpb-header.wpb-header--contact .container{ grid-template-columns: 1fr 45rem; }
    .wpb-header.wpb-header--contact .inner{ gap: 4rem; }
}
@media (min-width: 1200px) {
    .wpb-header .wpb-header__bottom .inner{ --p: 8rem 6.4rem; }
    .wpb-header:has(.wpb-header__main + .wpb-header__bottom){ --overlap: 12rem; }
    .wpb-header.wpb-header--contact .container{ gap: 8rem; }
}
@media (min-width: 1400px) {
    .wpb-header .wpb-header__main{ --p: 17rem; }
    .wpb-header.wpb-header--contact .container{ grid-template-columns: 1fr 62rem; }
}
@media (min-width: 1600px) {
    .wpb-header.wpb-header--contact .container{ gap: 13.2rem; }
}

/*** ---------- Footer ---------- ***/
.wpb-footer {  }
.wpb-footer.wpb-footer--primary { z-index: 1; }

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













.plusminus {
	position: relative;
	width: 25px;
	height: 25px;
	cursor: pointer;
	
	&.active {
		&:before {
			transform: translatey(-50%) rotate(-90deg);
			opacity: 0;
		}
		&:after {
			transform: translatey(-50%) rotate(0);
		}
	}
	
	&:before , &:after {
		content: "";
		display: block;
		background-color: #333;
		position: absolute;		
		top: 50%; left: 0;
		transition: .35s;
		width: 100%;
		height: 3px;
	}
	
	&:before {		
		transform: translatey(-50%);
	}
	
	&:after {
		transform: translatey(-50%) rotate(90deg);
	}
	
}