/* ROOT */
:root,
.elementor-kit-12 {
    --blue: var(--e-global-color-primary);
    --green: var(--e-global-color-secondary);
    --greendark: var(--e-global-color-287ff8f);
    --red: var(--e-global-color-acc3adf);
    --black: var(--e-global-color-text);
    --pink: var(--e-global-color-accent);
    --creme: var(--e-global-color-7fd6678);
    --cremedark: var(--e-global-color-1d05ac6);
    --cremegrey: var(--e-global-color-670864a);
    --cremegreylight: var(--e-global-color-c5dc345);
    --greydark2: var(--e-global-color-e389dd0);
    --greydark: var(--e-global-color-930fc35);
    --greylight: var(--e-global-color-18ab974);
    --white: var(--e-global-color-a75795c);
    --transparent: var(--e-global-color-6fcbf1a);
	--cubix: cubic-bezier(.8,0,.4,1);
    --cubixslow: cubic-bezier(.55,0,0,1);
}

/* Brro Booking — map plugin tokens to NME / Elementor (matches vars in brro-booking frontend.css :root only) */
:root,
.elementor-kit-12 {
    --brro-booking-color-primary: var(--greendark);
    --brro-booking-color-primary-hover: var(--greydark2);
    --brro-booking-color-danger: var(--red);
    --brro-booking-color-muted: var(--cremegreylight);
    --brro-booking-color-text: var(--black);
    --brro-booking-color-on-primary: var(--white);
    --brro-booking-color-surface: var(--transparent);
    --brro-booking-color-msg-success: var(--green);
    --brro-booking-color-msg-error: var(--red);
    --brro-booking-qty-bg: var(--black);
    --brro-booking-qty-fg: var(--white);
    --brro-booking-qty-hover: var(--greylight);
    --brro-booking-color-field-error: var(--red);
}

@media (max-width:767px) {
	.e-con {
		--def:clamp(300px, calc(24.57vw + 231.55px), 420px);/*320px @ 360 : 420px @ 767*/
		--small:clamp(290px, calc(19.66vw + 209.24px), 360px); /*280px @ 360 : 360px @ 767*/
		--wide:clamp(300px, calc(63.88vw + 90.02px), 580px); /*320px @ 360 : 580px @ 767*/
	}
}
/* WP ADMIN BAR */
/* Hide all */
body:not(.webadmin) #wpadminbar li {
    display: none !important;
}
/* Admin top menu */
body:not(.webadmin) #wpadminbar li#wp-admin-bar-site-name,
body:not(.webadmin) #wpadminbar li#wp-admin-bar-my-account,
body:not(.webadmin) #wpadminbar li#wp-admin-bar-logout {
    display: inherit !important;
}
/*********/
/*************************************************************************************************************************************/
/*********/
/* HTML,BODY */
body {
    overflow-x: hidden !important;
}

/* clears the ‘X’ from search input Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    filter: grayscale(100%) invert(1) brightness(200%);
}
/* Hide content if it has no data, from ACF shortcode function brro_data */
[brro_data="no-content"] {
	display:none!important;
}

/* Hide elements bases on class or screensize */
.only {
	display:none;
}
.only.single-post {
	display: initial;
}
@media (min-width:1180px) {
    .only.desk {
        display:initial;
    }
    .only.mob:not(.desk),
    .only.tab:not(.desk) {
        display:none;
    }
}
@media (min-width:768px) and (max-width:1179px) {
    .only.tab {
        display:initial;
    }
    .only.mob:not(.tab),
    .only.desk:not(.tab) {
        display:none;
    }
}
@media (max-width:767px) {
    .only.mob {
        display:initial;
    }
    .only.desk:not(.mob),
    .only.tab:not(.mob) {
        display:none;
    }
}

/*********/
/*************************************************************************************************************************************/
/*********/
/* ELEMENTOR EDITOR */
/* Captcha inline */
.elementor-field-type-recaptcha_v3.recaptcha_v3-inline {
    height: 5px;
    margin-bottom: 0px !important;
    opacity: 0;
    visibility: hidden;
}
/* HTML show if has script */
.elementor-editor-active .elementor-widget-html:not(.hidejs) script {
    display: block;
    max-height: 30px;
    border: 4px solid red;
    overflow: hidden;
    font-size: 10px;
    line-height: 12px;
}
/* Highlight spacer */
.elementor-editor-active .elementor-spacer {
    background: grey;
    opacity: 0.2;
}
/* Highlight empty widget */
.elementor-editor-active .elementor-element.elementor-widget-empty .elementor-widget-empty-icon {
    border: 4px solid red;
}
/*********/
/*************************************************************************************************************************************/
/*********/
/* HEADER */
/* Headerup */
header.brro-sticky,
header.brro-sticky .elementor-widget {
    -webkit-transition: transform 400ms var(--cubix)!important;
    transition: transform 400ms var(--cubix)!important;
}
header.brro-sticky {
	position:fixed;
}
header.brro-headerup {
    transform: translateY(-200px);
}
header.brro-sticky-effects {
	-webkit-transition: transform 400ms var(--cubix), background 400ms ease 100ms!important;
    transition: transform 400ms var(--cubix), box-shadow 400ms var(--cubix), background 400ms ease 100ms!important;
    background: var(--creme);
}
/* Nav menu */
body.booking-type-private li.booking-type-private a,
body.booking-type-public li.booking-type-public a,
body.brro-account li.login a,
body.brro-account li.account a,
a.current-page-open {
	color:var(--blue)!important;
	text-decoration:none!important;
}

@media (min-width:768px) {
    .home:not(.show-logo) header #logo {
	    opacity:0;
    }
}
header #logo {
	transition:opacity 150ms ease!important;
}
header #logo:after {
    position: absolute;
    content:"";
    top:50%;
    left:50%;
    height: clamp(39px, 3.33vw, 53px) /*48px @ 1440*/;
    width: clamp(39px, 3.33vw, 53px) /*48px @ 1440*/;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    box-shadow: 0 0 19px rgba(0,0,0,0.4)!important;
    z-index: -1;
}
header #logo img {
    transform: rotate(15deg);
    transition: transform 600ms var(--cubix);
}
header #logo:hover img {
    transform: rotate(345deg)
}
header #logo {
    margin-right: auto;
}
header #search a {
    padding:clamp(13px, 1.11vw, 18px) /*16px @ 1440*/;
    transform: translateY(clamp(4px, 0.35vw, 6px) /*5px @ 1440*/);
}
header #search.close a.elementor-icon:after {
    content: "";
    width: 28px;
    height: 28px;
    background-image: url(https://natuurtalenthaarlem.nl/wp-content/uploads/2025/01/nme-haarlem-close.svg);
    display: block;
    background-repeat: no-repeat;
}
header #search.close a.elementor-icon svg {
    display: none;
}
.guest li.account,
.logged-in li.login {
    display:none!important;
}
/* Mobile nav popper */
#navburger .elementor-shortcode {
	line-height:0;
}

/*
 * 
 * Media Queries */

/* Desktop */
@media (min-width:1180px) {
	.elementor-hidden-desktop {
		display:none!important;
	}
} 
/* Tablet onwards */
@media (min-width:768px) {
} 
/* Tablet only */
@media (min-width:768px) and (max-width:1179px) {
	.elementor-hidden-tablet {
		display:none!important;
	}
} 
/* Mobile */
@media (max-width:767px) {
	.elementor-hidden-mobile {
		display:none!important;
	}
}

/*********/
/*************************************************************************************************************************************/
/*********/
/* FOOTER */
footer {
    z-index:3;
    position: relative;
}
footer .acties a:not(.current-page-open),
footer .mail-insta span {
    text-decoration:underline!important;
}
/* back to top btn*/
#to-top.not-to-top {
    z-index: -1;
    pointer-events: none;
    opacity: 0;
}
#to-top {
    transition: opacity 600ms ease;
}
#to-top.not-to-top {
    z-index: -1;
    pointer-events: none;
    opacity: 0;
}
#to-top:hover {
	transform:translateY(-4px);
}
#to-top {
    transition: all 600ms ease;
	position:fixed;
	right:clamp(18px, 1.53vw, 24px) /*22px @ 1440*/;
	bottom:clamp(18px, 1.53vw, 24px) /*22px @ 1440*/;
	z-index:9999;
}
#to-top {
		width:clamp(33px, 2.78vw, 44px) /*40px @ 1440*/;
		height:clamp(18px, 1.53vw, 24px) /*22px @ 1440*/;
}

#page-top {
	width:100%;
	position:absolute;
	height:1px;
	margin-bottom:-1px;
	top:-1px;
}


/*********/
/*************************************************************************************************************************************/
/*********/
/* SECTIONS/CONTAINERS */

/* Title and intro section */
body:not(.page) .extra-image {
    display: none;
}
/* ACF repeater rows */
.brro-acf-repeater-row:not(:last-of-type):after {
    content:"_";
    display: block;
    margin:clamp(26px, 2.22vw, 36px) /*32px @ 1440*/ 0;
}

/*********/
/*************************************************************************************************************************************/
/*********/
/* Loops */
/*************************************************
****************** AANBOD LOOP *******************
*************************************************/
.term-public .type-bg,
.booking-type-public .type-bg,
.brro_booking_tax_toegang-public .type-bg {
    background-color: var(--pink);
}
.term-private .type-bg,
.booking-type-private .type-bg,
.brro_booking_tax_toegang-private .type-bg {
    background-color: var(--green);
}
#meeraanbod .type-bg:not(.soort) {
    background-color: var(--creme);
}


.aanbod-tegel .featured {
    overflow: hidden!important;
}
.aanbod-tegel .featured img {
    transition: transform 400ms var(--cubix);
}
.aanbod-tegel:hover .featured img,
.aanbod-tegel:focus .featured img{
    transform:scale(1.1);
}
.aanbod-tegel:hover h2,
.aanbod-tegel:focus h2 {
    text-decoration: underline!important;
    text-underline-offset: 3px!important;
    text-decoration-thickness: 2px!important;
}

/*********/
/*************************************************************************************************************************************/
/*********/
/* BUTTONS */
.brro-button:hover,
.account-button[disabled]{
	background-color: var(--e-global-color-930fc35)!important;
	opacity:1!important;
}
.brro-button {
    background-color: var(--e-global-color-primary);
    font-family: var(--e-global-typography-f6f2aab-font-family), Sans-serif;
    font-size: var(--e-global-typography-f6f2aab-font-size);
    font-weight: var(--e-global-typography-f6f2aab-font-weight);
    text-transform: var(--e-global-typography-f6f2aab-text-transform);
    font-style: var(--e-global-typography-f6f2aab-font-style);
    text-decoration: var(--e-global-typography-f6f2aab-text-decoration);
    line-height: var(--e-global-typography-f6f2aab-line-height);
    color: var(--e-global-color-a75795c)!important;
    border-style: solid;
    border-width: 0px 0px 0px 0px;
    border-radius: clamp(33px, 2.78vw, 44px) /*40px @ 1440*/ clamp(33px, 2.78vw, 44px) /*40px @ 1440*/ clamp(33px, 2.78vw, 44px) /*40px @ 1440*/ clamp(33px, 2.78vw, 44px) /*40px @ 1440*/;
    padding: clamp(10px, 0.83vw, 13px) /*12px @ 1440*/ clamp(26px, 2.22vw, 36px) /*32px @ 1440*/ clamp(13px, 1.11vw, 18px) /*16px @ 1440*/ clamp(26px, 2.22vw, 36px) /*32px @ 1440*/;
}
.brro-button.sm {
    font-size: var(--e-global-typography-71d2814-font-size)!important;
    font-weight: var(--e-global-typography-71d2814-font-weight)!important;
    text-transform: var(--e-global-typography-71d2814-text-transform)!important;
    font-style: var(--e-global-typography-71d2814-font-style)!important;
    text-decoration: var(--e-global-typography-71d2814-text-decoration)!important;
    line-height: var(--e-global-typography-71d2814-line-height)!important;
    padding: clamp(5px, 0.42vw, 7px) /*6px @ 1440*/ clamp(23px, 1.94vw, 31px) /*28px @ 1440*/ clamp(8px, 0.69vw, 11px) /*10px @ 1440*/ clamp(23px, 1.94vw, 31px) /*28px @ 1440*/!important;
}


/*********/
/*************************************************************************************************************************************/
/*********/
/* TEXT STYLES */
/* Active navigation links

/* main post content */
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    margin: 0px!important;
    font-family: var(--e-global-typography-71d2814-font-family), Sans-serif!important;
    font-size: var(--e-global-typography-71d2814-font-size)!important;
    font-weight: var(--e-global-typography-71d2814-font-weight)!important;
    text-transform: var(--e-global-typography-71d2814-text-transform)!important;
    font-style: var(--e-global-typography-71d2814-font-style)!important;
    text-decoration: var(--e-global-typography-71d2814-text-decoration);
    line-height: var(--e-global-typography-71d2814-line-height)!important;
    letter-spacing: var(--e-global-typography-71d2814-letter-spacing)!important;
    word-spacing: var(--e-global-typography-71d2814-word-spacing)!important;
}
.post-content p:has(+ ul),
.post-content p:has(+ ol) {
    margin-bottom: 0px!important;
}
.post-content p:has(+ p),
.post-content p:has(+ h1),
.post-content p:has(+ h2),
.post-content p:has(+ h3),
.post-content p:has(+ h4),
.post-content p:has(+ h5),
.post-content p:has(+ h6),
.post-content ul:has(+ p),
.post-content ul:has(+ h1),
.post-content ul:has(+ h2),
.post-content ul:has(+ h3),
.post-content ul:has(+ h4),
.post-content ul:has(+ h5),
.post-content ul:has(+ h6),
.post-content ol:has(+ p),
.post-content ol:has(+ h1),
.post-content ol:has(+ h2),
.post-content ol:has(+ h3),
.post-content ol:has(+ h4),
.post-content ol:has(+ h5),
.post-content ol:has(+ h6) {
    margin-bottom: clamp(26px, 2.22vw, 36px) /*32px @ 1440*/!important;
}
.post-content > :last-child {
    margin-bottom: 0px!important;
}



/* active menu */
.booking-type-private li.booking-type-private a,
.booking-type-public li.booking-type-public a {
	color:var(--blue)!important;
}

.def-hover a:hover,
.def-hover button:hover,
a.a-def-hover:hover,
a.def-hover:hover .def-hover * {
    text-decoration: underline!important;
}

.def-hover:not(.def-color) a:hover,
.def-hover:not(.def-color) button:hover,
a.def-hover:not(.def-color):hover,
a.def-hover:not(.def-color):hover .def-hover *{
    color:var(--black)!important;
}

form label {
    padding:0px 0px clamp(4px, 0.34vw, 6px) clamp(8px, 0.69vw, 11px) /*10px @ 1440*/;
    cursor: pointer;
	position: relative;
}
input[type='checkbox'],
input[type='radio'] {
    width: clamp(26px, 2.22vw, 36px) /*32px @ 1440*/;
    height: 0px;
    border: none!important;
    /*position: relative;*/
    clip: rect(0, 0, 0, 0);
}

input[type='checkbox']:before,
input[type='radio']:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    /*transform: translateY(-82%);*/
    width: clamp(21px, 1.81vw, 29px);
    height: clamp(21px, 1.81vw, 29px);
    background: var(--greydark);
    border-radius: 50%;
    transition: background 200ms var(--cubix);
    cursor: pointer;
}

input[type='checkbox']:checked:before,
input[type='radio']:checked:before {
    background-color: var(--green);
}

input[type='checkbox'] + label,
input[type='radio'] + label {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    display: inline-block;
}

.form-row-30 {
    width:28%!important;
    float:right;
}
.form-row-70 {
    width: 68%!important;
    float:left;
}



/* Correction for Sofia Pro lineheight */
.s64 .elementor-heading-title{
    transform:translateY(clamp(-13px, -0.83vw, -10px) /*-12px @ 1440*/);
}
.s50 .elementor-heading-title,
.s60 .elementor-heading-title {
    transform:translateY(clamp(-9px, -0.56vw, -7px) /*-8px @ 1440*/);
}
.bold a, .bold span, .bold p, .bold nav {
    font-weight: 700!important;
}




/* Offscreen post title */
.offscreen,
.page-header {
	position: absolute!important;
    top:-200vh!important;
    width: 1px!important;
    height: 1px!important;
    padding: 0!important;
    margin: -1px!important;
    overflow: hidden!important;
    clip: rect(0, 0, 0, 0)!important;
    white-space: nowrap!important;
    border: 0!important;
    z-index:-1!important;
    transition: none!important;
}


/* login form */
h3.brro-account-title {
    color: var(--blue)!important;
}
a.brro-logout-button {
	font-family: var(--e-global-typography-accent-font-family), Sans-serif;
    font-size: var(--e-global-typography-accent-font-size);
    font-weight: var(--e-global-typography-accent-font-weight);
    text-transform: var(--e-global-typography-accent-text-transform);
    font-style: var(--e-global-typography-accent-font-style);
    text-decoration: underline;
    line-height: var(--e-global-typography-accent-line-height);
    color: var(--e-global-color-e389dd0);
}
a.brro-logout-button:hover {
	color: var(--black);
}

/* Single aanbod */

/* Timeblocks: title + date stack (was in brro-booking; NME template hook) */
body.timeblocks:not(.brro-booking-aanbod-bevestigen):not(.brro-booking-aanbod-reserveren) .aanbod-title {
    margin-bottom: 0px;
}

/* Thema icon */
@media (min-width:768px) and (max-width:1179px) {
    .brro-booking-aanbod-reserveren #aanbod-hero .e-con:not(.aanbod-rechts),
    .brro-booking-aanbod-bevestigen #aanbod-hero .e-con:not(.aanbod-rechts),
    .brro-booking-aanbod-reserveren #booking-options-checkout,
    .brro-booking-aanbod-bevestigen #booking-options-checkout {
        margin-left: clamp(136px, calc(9.49vw + 63.12px), 175px) /*136px @ 768 : 175px @ 1179*/;
        margin-right: 32px;
    }
}


#brro-thema-icon {
    height: clamp(266px, 22.57vw, 361px) /*325px @ 1440*/;
    object-fit: contain;
}

/* Image gallery */
.aanbod-gallery figure:nth-of-type(4n+3),
.aanbod-gallery figure:nth-of-type(4n+4) {
    display: block;
}
.aanbod-gallery figure:nth-of-type(4n+3) {
    margin-left: auto !important;
}
.aanbod-gallery figure:nth-of-type(4n+4) {
    margin-right: auto !important;
}
/* Breadcrumbs */
#breadcrumbs .brro-aanbod-breadcrumbs_item-active a {
    color:var(--blue);
}

/* Attributen en downloads */
.attributes .brro-tax-items-wrap,
#booking_download_icon_container {
    padding:clamp(5px, 0.42vw, 7px) /*6px @ 1440*/ clamp(13px, 1.11vw, 18px) /*16px @ 1440*/ clamp(7px, 0.63vw, 10px) /*9px @ 1440*/ clamp(13px, 1.11vw, 18px) /*16px @ 1440*/;
    border-radius: clamp(16px, 1.39vw, 22px) /*20px @ 1440*/;
    background-color: var(--cremegrey);
    min-width: clamp(84px, 7.08vw, 113px) /*102px @ 1440*/;
    max-width:clamp(207px, 17.57vw, 281px) /*253px @ 1440*/;
    display: inline-block;
    line-height: inherit;
    margin:0 12px 12px 0;
    vertical-align:top;
}
.e-loop-item .brro-tax-items-wrap {
    background-color: transparent;
}
#booking_download_icon_container {
    min-width:0px;
    margin: 0px 0px 0px 12px;
    line-height:0px;
}
.brro-booking-downloads-button {
    font-family: var(--e-global-typography-b0e48b4-font-family), Sans-serif;
    font-size: var(--e-global-typography-b0e48b4-font-size);
    font-weight: var(--e-global-typography-b0e48b4-font-weight);
    text-transform: var(--e-global-typography-b0e48b4-text-transform);
    font-style: var(--e-global-typography-b0e48b4-font-style);
    text-decoration: var(--e-global-typography-b0e48b4-text-decoration);
    line-height: var(--e-global-typography-b0e48b4-line-height);
    color: var(--e-global-color-text)!important;
}
#booking_download_icon_container svg {
    width: clamp(18px, 1.56vw, 25px) /*22.5px @ 1440*/;
    height:clamp(17px, 1.46vw, 23px) /*21px @ 1440*/;
}
.booking-type-public .brro-tax-items-wrap,
.booking-type-public #booking_download_icon_container {
    background-color:var(--pink);
}
.booking-type-private .brro-tax-items-wrap,
.booking-type-private #booking_download_icon_container {
    background-color:var(--green);
}

.brro-booking-aanbod-bevestigen #interessant,
.brro-booking-aanbod-reserveren #interessant {
    display:none!important;
}