/**
Theme Name: Bouwdagen Langenboom
Template:  wuxnl-theme
Author: Wux
Author URI: https://wux.nl/
*/

@import url('https://fonts.googleapis.com/css2?family=Finger+Paint&family=Glegoo:wght@400;700&display=swap');
:root {
    --fs: 1.8rem;
    --lh: 1.6;
    
    /* Custom beziers */
    --cb--smooth: cubic-bezier(.58,.22,.2,.96);

    /* Color variables */
    --clr-primary: #E7D1AF;
    --clr-primary-80: #F3E1C6;
    --clr-primary-20: #cce2e7;
    --clr-primary-rgb: 231, 209, 175;
    --clr-primary-80-rgb: 243, 225, 198;

    --clr-secondary: #F38E28;
    --clr-secondary-110: #ed9842;
    --clr-secondary-80: #F3B28E;

    --clr-heading: #25272E;
    --clr-text: #6D5032;

    --clr-dark: #60442700;
    --clr-dark-rgb: 96, 68, 39;

    --clr-light: #f2f2f2;

    --clr-border: #D8C4A8; 
    --clr-border-light: rgba(109, 80, 50, 0.2);
    
    --clr-danger: #e2401c;
    --clr-info: #3d9cd2;
    --clr-success: #1CB435;

    --clr-background: var(--clr-primary);

    /* Font variables */
    --font-primary: 'Glegoo', sans-serif;
    --font-secondary: 'Finger Paint', sans-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: 1560px;

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

    --br: .8rem;

}

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

body { font-family: var(--font-primary); background-color: var(--clr-background);}
.wpb-image { --br: 1.2rem; }

/*** ---------- Typography ---------- ***/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: var(--font-secondary); text-transform: uppercase; font-weight: 400; color: var(--clr-text); }
h1, .h1 { --fs: clamp(3.2rem, 5vw, 8rem); --lh: 1; }
h2, .h2 { --fs: clamp(2.8rem, 4vw, 5.2rem); --lh: 1; }
h3, .h3 { --fs: clamp(2rem, 3vw, 2.4rem); --lh: 1; }
h4, .h4 { --fs: 1.8rem; --lh: 2rem; }

p { color: var(--clr-text); }

.wpb-title { font-weight: 900;}

/*** ---------- Buttons ---------- ***/
.btn, .gform_button, .gform_next_button, .gform_previous_button, .button { --br: .8rem; gap: 1.6rem; text-transform: uppercase; --fs: 1.8rem; font-weight: 700; --p: 1.6rem 2rem; }

.btn i { font-size: 1.6rem; }
.btn.btn--primary { --bg-clr: var(--clr-primary); --hover-bg-clr: var(--clr-secondary); --active-bg-clr: var(--clr-secondary); --clr: var(--clr-text); }
.btn.btn--secondary { --bg-clr: var(--clr-secondary); --hover-bg-clr: var(--clr-secondary-110); --active-bg-clr: var(--clr-secondary-110); --clr: #FFF;  }
.btn.btn--white { --clr: var(--clr-text); --bg-clr: #FFF; --hover-bg-clr: var(--clr-secondary); --active-bg-clr: var(--clr-secondary); --hover-clr: #FFF; }
.btn.btn--outline { --bg-clr: transparent; --hover-bg-clr: var(--clr-secondary); --active-bg-clr: var(--clr-secondary); --clr: var(--clr-text); --hover-clr: #FFF; --border: 1px solid var(--clr-text); }
.btn.btn--outline.active { --bg-clr: var(--clr-secondary); --clr: #FFF; --hover-bg-clr: var(--clr-secondary-110); --active-bg-clr: var(--clr-secondary-110); --border: none; --hover-clr: #FFF; }

/*** ---------- 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.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; }
}

/*** ---------- Icons ---------- ***/
.wpb-icon.wpb-icon--logo-border { --src: url(/app/themes/bouwdagen-langenboom/assets/img/mask-logo.svg); --clr: var(--clr-primary); }

/*** ---------- Background colors ---------- ***/
.wpb-bg-clr--transparant {background-color: transparant;}
.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-primary-80);}
.wpb-bg-clr--dark {background-color: var(--clr-dark);}

/*** ---------- Navigation ---------- ***/
.wpb-navigation { --nav-bg-clr: var(--clr-primary-80); }
.wpb-navigation .menu-item:hover .menu-link { color: var(--clr-secondary); }
.wpb-navigation .wpb-icon.wpb-icon--intersect { --clr: var(--clr-primary-80); }
.wpb-navigation .menu-item .menu-link { font-weight: 700; font-size: 1.8rem; text-transform: uppercase; color: var(--clr-text); }
.wpb-navigation__collapse .menu-item.menu-item--current > .menu-link { color: var(--clr-text); }
.wpb-navigation .logo { margin-top: -5rem; z-index: 10; }
.wpb-navigation .logo .inner { width: 22rem; height: 17.6rem; display: grid; place-items: center;}
.wpb-navigation .logo .inner .wpb-icon { width: 100%; height: 100%; position: absolute; --w: 100%; --h: 100%;}
.wpb-navigation .logo img { max-width: 18rem; z-index: 1; }
.wpb-navigation .btn.btn--square { width: 4.2rem !important; height: 4.2rem !important; }
@media(max-width: 991.98px) {
    .wpb-navigation .container { margin: 1rem auto 1rem auto; --p: 0 1rem; }
}

@media(max-width: 1199.98px) {
    .wpb-navigation .container { margin: 1rem auto 1rem auto; --p: 0 1rem; }
}

@media(max-width: 1399.98px) {
    .wpb-navigation .btn-group .btn { width: 100%; }
    .wpb-navigation .wpb-navigation__collapse { background-color: var(--clr-primary-80); }
}

@media(max-width: 1499.98px) {
    .wpb-navigation .btn-group .btn { --fs: 1.6rem }
}

@media(min-width: 425px) {
    .wpb-navigation .logo img { z-index: 1; }
}

@media(min-width: 768px) {
        .wpb-navigation .logo img { max-width: 23rem;}

    .wpb-navigation .logo .inner { width: 32rem; }
}

@media(min-width: 1200px) {
    .wpb-navigation .logo .inner { width: 36rem; }
    .wpb-navigation .logo img { max-width: 31.3rem;  }
}

@media(min-width: 1400px) {
    .wpb-navigation__collapse .wpb-menu > .menu-item > .menu-link { padding-top: 5.4rem; }

    .wpb-navigation .logo { margin-top: -1rem;  }

    .wpb-navigation::after { content: ''; pointer-events: none; position: absolute; right: 0; bottom: -7rem; background-image: url(/app/themes/bouwdagen-langenboom/assets/img/nav_planks.svg); z-index: 10; width: 10.9rem; height: 8rem;  background-repeat: no-repeat;}
}

/*** ---------- Header home ---------- ***/
.wpb-header.wpb-header--home { position: relative; height: 50rem; }
[class*="is-background-"]::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; background: linear-gradient(0deg, rgba(var(--clr-dark-rgb), 1) 0%, rgba(var(--clr-dark-rgb), .25) 65%) !important; }
.wpb-header.wpb-header--home h1 + span { font-size: clamp(2.4rem, 5vw, 5.6rem); letter-spacing: -.3rem; --mt: 0; } 
.wpb-header.wpb-header--home .container { --p: 11rem 1rem 13rem 1rem; }
.wpb-header .container .btn-group { z-index: 11; position: relative; gap: 1.2rem;}
.wpb-header.wpb-header--home::before { content: ''; position: absolute; z-index: 10; width: 9.7rem; height: 22rem; bottom: -10%; left: 0; background-image: url('/app/themes/bouwdagen-langenboom/assets/img/header_planks_left.svg'); background-position: center; background-repeat: no-repeat; background-size: contain;  }
.wpb-header.wpb-header--home::after { content: ''; position: absolute; z-index: 10; width: 7rem; height: 25rem; bottom: -10%; right: 0; background-image: url('/app/themes/bouwdagen-langenboom/assets/img/header_planks_right.svg'); background-position: center; background-repeat: no-repeat; background-size: contain;  }

@media(max-width: 767.98px) {
    .wpb-header.wpb-header--home .container .btn-group { justify-content: center; }
}

@media(min-width: 768px) {
    .wpb-header .container .btn-group { gap: 2.4rem;}
    .wpb-header.wpb-header--home .container { --p: 20rem 1rem 13rem 1rem; }
    .wpb-header.wpb-header--home::before {  width: 14.7rem; height: 22rem; bottom: -10%; left: 0;   }
    .wpb-header.wpb-header--home::after { width: 12rem; height: 48.5rem; bottom: -30%; }

}

@media(min-width: 1400px) {
    .wpb-header.wpb-header--home { height: 80rem; }
    .wpb-header.wpb-header--home .container { --p: 25rem 1rem 22rem 1rem; }
}

@media(min-width: 1600px) {
    .wpb-header.wpb-header--home .container { --p: 25rem 1rem 13rem 1rem; }
}
.wpb-block--lineup .container .event-grid { position: relative; z-index: 11; }
.wpb-block--lineup .container .event-grid .wpb-block__column { background-color: var(--clr-primary-80); }
.wpb-block--lineup .container .event-grid .wpb-block__column .inner { gap: 2rem; }
.wpb-block--lineup .container .event-grid .wpb-block__column .inner .column--header .header { line-height: 1; font-size: clamp(2.4rem, 4vw, 4.4rem); font-weight: 400; font-family: var(--font-secondary); color: var(--clr-text); }
.wpb-block--lineup .container .event-grid .wpb-block__column .inner .column--header .event-date { font-size: 2rem; font-weight: 700; color: var(--clr-text);}
.wpb-block--lineup .container .event-grid .wpb-block__column .inner .column--body .lineup-item > * { font-weight: 700; text-transform: uppercase; }

/*** ---------- Block: Sponsoren ---------- ***/
.wpb-block--sponsoren .container .wpb-sponsors .sponsor img { filter: hue-rotate(45deg) sepia(100%) saturate(500%) brightness(var(--clr-primary)) contrast(100%) grayscale(0) invert(0) ; }
.wpb-block--sponsoren .container .wpb-sponsors .sponsor:is(a[href]):hover img { filter: unset !important; }

/*** ---------- Block: CTA ---------- ***/
.wpb-block--cta .wpb-text > p { --mt: 2.8rem; font-size: clamp(2.2rem, 4vw, 2.4rem); max-width: 81.5rem;}

/*** ---------- Block: Carousel ---------- ***/
.wpb-block--carousel .blaze-slider .blaze-nav-container { border-radius: 1.6rem; }
.wpb-block--carousel .blaze-slider .blaze-nav-container > button { --inner-clr: var(--clr-heading); --size: 5.5rem; --hover-bg-clr: var(--clr-secondary); }
.wpb-block--carousel .blaze-slider .blaze-nav-container > button i { font-size: 1.9rem; }
.wpb-block--carousel .blaze-slider.start .blaze-nav-container > .blaze-prev, .wpb-block--carousel .blaze-slider.end .blaze-nav-container > .blaze-next { cursor:not-allowed;  pointer-events: none; background-color: rgb(182, 182, 182); }
.wpb-block--carousel .wpb-image img { border-radius: 1.6rem; }

/*** ---------- Block: Media ---------- ***/
.wpb-block--media .wpb-ratio { border-radius: var(--br); overflow: clip;}

/*** ---------- Block: FAQ ---------- ***/
.wpb-accordion { --br: 0; }
.wpb-accordion__item .wpb-accordion__body { padding-left: 0; }
.wpb-accordion__item .wpb-accordion__button span { font-size: 1.8rem;}
.wpb-accordion__item .wpb-accordion__button { border-bottom: 1px solid var(--clr-text); padding-left: 0;}

/*** ---------- Block: CTA ---------- ***/
@media(min-width: 1200px) {
    .wpb-block--cta .container { padding: 8.3rem 15rem 8.3rem 15rem; }

    .wpb-block--cta .container::before { content: ''; pointer-events: none; width: 29rem; height: 37.2rem; position: absolute; left: -9rem; top: -6rem; background-image: url('/app/themes/bouwdagen-langenboom/assets/img/planks_cta_left.svg'); background-repeat: no-repeat; background-size: cover; z-index: 2; }
    .wpb-block--cta .container::after { content: '';  pointer-events: none; width: 26.7rem; height: 22rem; position: absolute; right: -6rem; top: -4rem; background-image: url('/app/themes/bouwdagen-langenboom/assets/img/planks_cta_top_right.svg'); background-repeat: no-repeat; background-size: cover; z-index: 2; }
}


/*** ---------- Social media ---------- ***/
.wpb-socials span {margin-bottom: 2rem; font-size: 1.4rem;}
.wpb-social-media a:hover { --hover-border: 1px solid var(--clr-secondary); --hover-box-shadow: 0; --hover-bg-clr: var(--clr-secondary); }

/*** ---------- By wux ---------- ***/
.by-wux { filter: none !important; }
.by-wux span { color: var(--clr-text); font-size: 1.4rem; font-weight: 500; opacity: .6; text-transform: uppercase; margin-bottom: 1rem;}
.by-wux img { width: 7.4rem; height: 2.3rem; }

/*** ---------- Cards ---------- ***/
.wpb-card.wpb-card--shortcode { background-color: var(--clr-primary-80); border-color: transparent; }

@media(max-width: 374.98px) {
    .wpb-card.wpb-card--shortcode .wpb-card__body + .woocommerce {overflow-x: scroll;  }
}

@media(min-width: 1200px) {
    .wpb-card.wpb-card--shortcode { --p: 5rem; }
}

/*** ---------- Wux bookings ---------- ***/
.wux-bookings--event-list { grid-template-columns: 1fr; gap: 1.2rem; }
.wux-bookings--event-list .js-date-wrapper { display: none !important; }
.wux-bookings--event-list :is(.events, .variations, .locations, .dates) h4 { font-weight: 600; }
.wux-bookings--event-list :is(.events, .variations, .locations, .dates) input:checked + label * { color: var(--clr-text) !important; }
.wux-bookings--event-list :is(.events, .variations, .locations, .dates) input + label { border-radius: .8rem; }
.wux-bookings--event-list :is(.events, .variations, .locations, .dates) label * { color: var(--clr-text) !important; }
.wux-bookings--event-list :is(.events, .variations, .locations, .dates) input + label::after { outline: 2px solid #FFF; outline-offset: -3px; }
.wux-bookings--event-list :is(.events, .variations, .locations, .dates) input:checked + label::after { outline: 2px solid var(--clr-primary); outline-offset: -3px; }
.wux-bookings--event-list .form-section h3 { margin-bottom: 1.2rem;}
.wux-bookings--event-list .wux-bookings--event__overview table td span { color: var(--clr-text); }
.wux-bookings--event-list select, .wux-bookings--event-list input { border-color: transparent;  min-height: var(--input-mh); border-radius: var(--input-br); background-color: var(--clr-primary); border-color: var(--clr-border); color: var(--clr-text); }
.wux-bookings--event-list select:focus-visible { outline: 1px solid var(--clr-secondary); }
.wux-bookings--event-list .field-row input:not([type="checkbox"]), .wux-bookings--event-list select { background-color: var(--clr-primary); min-height: 5.5rem }
.wux-bookings--event-list .form-section.count { width: fit-content; }
.wux-bookings--event-list .field-row .js-attendee-row-header { margin-top: 2rem; }
@media(min-width: 768px) {
 .wux-bookings--event-list .field-row .js-attendee-row-header { grid-column: span 3; }
}

@media(min-width: 1200px) {
    .wux-bookings--event-list .field-row { --gc: 3; }
    .wux-bookings--event-list :is(.events, .variations, .locations, .dates) { --gc: 4; }
}

/*** ---------- Gravityforms ---------- ***/
.gform_footer { flex-wrap: wrap; }
.gform_footer .form-footer-text { margin: auto 2rem !important; }
.gform_wrapper.gravity-theme h2:not(.gform_submission_error) { margin-bottom: 2rem !important; }
.gform_wrapper input[type=checkbox]:checked, .gform_wrapper input[type=radio]:checked { background-color: var(--clr-secondary) !important; }
.gform_validation_errors { margin-bottom: 2rem !important; }

@media(max-width: 1199.98px) {
    .gform_footer { flex-wrap: wrap; gap:2rem; }
    .gform_footer .form-footer-text { margin-left: 0 !important; text-align: start !important; }
}

/*** ---------- Woocommerce forms ---------- ***/
.woocommerce .order_comments { display: none !important; }
.woocommerce form .form-row label { line-height: 1.5 !important; }
.woocommerce #permission_pictures_field .woocommerce-input-wrapper, .woocommerce #permission_pictures_published_field .woocommerce-input-wrapper { display: grid; grid-template-columns: 2rem 1fr; align-items: center; row-gap: .5rem; column-gap: .3rem; }
.woocommerce #permission_pictures_field .woocommerce-input-wrapper label.radio, .woocommerce #permission_pictures_published_field label.radio { margin: 0 !important; }
.woocommerce #permission_pictures_field .woocommerce-input-wrapper label.radio .required, .woocommerce #permission_pictures_published_field label.radio .required { display: none !important; }
.woocommerce form .form-row .input-text, .woocommerce form .form-row select { border-color: var(--clr-border); background-color: var(--clr-primary);}
.select2-container .select2-selection--single { border-color: var(--clr-border); background-color: var(--clr-primary); }
.select2-container.select2-container--open .select2-dropdown--below { background-color: var(--clr-primary-80); }
.select2-container--default .select2-search--dropdown .select2-search__field { background-color: var(--clr-primary); }
.select2-container .select2-results__option[data-selected=true], .select2-container .select2-results__option.select2-results__option--highlighted { background-color: var(--clr-primary)!important; color: var(--clr-text)!important; }
.select2-container .select2-results__option { color: var(--clr-text); }
.woocommerce h3 { margin-bottom: 1rem; }
.woocommerce ul.order_details li:first-child { display: none; }
.cart-subtotal { display: none !important; }
.woocommerce table.shop_table { overflow-x: clip; }
.woocommerce .col-2:has(.woocommerce-additional-fields) { width: 100% !important;}


/*** ---------- Block: Text & media ---------- ***/
.wpb-block--text-media .wpb-image > img { max-height: 50rem; object-fit: cover; }

/*** ---------- Indeling vrijwilligers ---------- ***/
.wpb-block--volunteers .container .event-grid .wpb-block__column .inner .column--body .lineup-item { grid-template-columns: 1fr; }
.wpb-block--volunteers .container .event-grid .wpb-block__column .inner .column--body .lineup-item:has(.time) { grid-template-columns: 10rem 1fr; }
.wpb-block--volunteers .timeslot-title { width: 100%; text-align: start; margin-bottom: 1rem;}
.wpb-block--volunteers .lineup-item + .timeslot-title:not(:first-child) { margin-top: 4rem; padding-top: 4rem; border-top: 2px solid var(--clr-border); }
.wpb-block--volunteers .filter-buttons { margin: 2rem 1rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.lineup-item.hidden { display: none !important; visibility: hidden !important; }

@media(min-width: 992px) {
    .wpb-block--volunteers .container .event-grid .wpb-block__column .inner .column--body .lineup-item:has(.time) { grid-template-columns: 15rem 1fr; }

}

label[for="payment_method_mollie_wc_gateway_ideal"] { font-size: 2.4rem; font-weight: 700; }
.woocommerce #payment #place_order, .woocommerce-page #payment #place_order { float: left; }