.has-global-padding>.uagb-is-root-container.alignfull {
    margin-right: 0 !important;
    margin-left: 0 !important;
}
/*.header-nav-div,
img{
	cursor: default;
	user-select: none;
}*/
.gform_required_legend {
    display: none;
}

.job-omschrijving{
	display: flex;
	flex-direction: column;
	gap: 20px;
	background-color: #8080801a !important;
    border: unset !important;
    font-weight: 200 !important;
	padding: 8px;
}

.job-omschrijving:empty{
	display: none !important;
}
.job-omschrijving *{
	color: black !important;
	font-size: 16px !important;
	text-transform: none;
}
.job-omschrijving p{
	margin-bottom: 5px;
	margin-top: 5px;
}
.job-omschrijving details > div{
	margin-top: 10px;
}

/* SALONS */
.salons.loop .wp-block-post-template{
	display: grid;
    grid-template-rows: repeat(12, 1fr);
    grid-auto-flow: column;
}
.salons.loop .wp-block-post-template li{
	margin-top: 0;
}
.salons.loop a:focus,
.salons.loop a:focus-visible,
.salons.loop a:hover{
	text-decoration: underline 1px;
}
.salon-search-container {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 100%;
	max-width: 381px;
}
#salon-search-input {
    width: 371px;
    padding: 12px 0;
    font-size: 16px;
    border: unset;
    border-bottom: 1px solid var(--wp--preset--color--black);
    border-radius: 0;
    transition: border-color 0.2s;
	outline: unset;
}
#salon-search-input:focus {
	border-color: #333;
}
#salon-search-reset {
	position: absolute;
	right: 12px;
	background: none;
	border: none;
	font-size: 16px;
	cursor: pointer;
	color: #999;
	padding: 0;
	line-height: 1;
}
#salon-search-reset:hover {
	color: #333;
}
.wp-block-post.salon-hidden {
	display: none !important;
}

.single-salon .inhoud h1,
.single-salon .inhoud h2,
.single-salon .inhoud h3,
.single-salon .inhoud h4,
.single-salon .inhoud h1 *,
.single-salon .inhoud h2 *,
.single-salon .inhoud h3 *,
.single-salon .inhoud h4 *{
	font-size: 18px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 1.2px;
}

.single-salon .modal-salon-container,
.single-salon .modal-salon-container p{
	height:100%;
}

/* FAQ's */
.uagb-faq-questions{
	justify-content: flex-end !important;
}
.uagb-question{
	width: fit-content !important;
}


/* PILL */
.wp-block-post-terms.is-style-swt-post-terms-pill a{
	color: black !important;
}

/* FILOSOFIE GHRID */
.filosofie-grid .card-header p{
	line-height: 1.6;
	min-height: calc(1.6em * 2);   /* fallback */
	min-height: 2lh;
}


/* FORMS */
form *{
	font-size: 16px !important;
	font-family: 'acumin-variable', sans-serif !important;
	line-height: normal;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}
form *:focus-visible{
	outline: unset !important;
	border: unset !important;
}
form textarea:focus-visible,
form input:not([type='submit']):focus-visible{
	background-color: #8080801a !important;	
}
form .gform_drop_area,
form textarea,
form input:not([type='submit']){
	background-color: unset !important;
	border-radius: 0 !important;
	border: unset !important;
	font-weight: 300 !important;
}
form input:not([type='submit']){
	border-bottom: 1px solid #5E5E5E !important;
}
form .gform_fileupload_rules{
	display: none !important;
}
form select,
form .gform_drop_area,
form textarea{
	background-color: #8080801a !important;
    border: unset !important;
	font-weight: 200 !important;
}

/* Gravity Forms — AJAX/reload spinner klein houden.
   Dekt alle varianten: klassieke <img>, SVG, én de nieuwere orbital .gform-loader.
   Form-wrapper-prefix geeft extra specificiteit boven de parent-theme/GF CSS. */
img.gform_ajax_spinner,
svg.gform_ajax_spinner,
.gform_ajax_spinner,
.gform_wrapper img.gform_ajax_spinner,
.gform_wrapper svg.gform_ajax_spinner,
.gform_wrapper .gform_ajax_spinner{
	width: 24px !important;
	height: 24px !important;
	max-width: 24px !important;
	max-height: 24px !important;
	margin-left: 10px !important;
	vertical-align: middle;
}

/* Orbital/gravity-theme loader = lege <span class="gform-loader">, getekend als
   CSS-ring via border. Naast width/height óók de border-width verkleinen, anders
   wordt het een gevulde 'bol' i.p.v. een dunne cirkel. */
.gform_wrapper .gform-loader,
.gform-loader{
	width: 24px !important;
	height: 24px !important;
	border-width: 3px !important;
}

form label,
form *::placeholder,
form p, 
form h2,
form h3{
	color: #5E5E5E !important;
	font-weight: 300 !important;
}



/* RANDOM GALLERY — 5 kolommen flexbox, hover laat de gehoverde image 33% groeien
   en de 4 anderen evenredig krimpen. Items zijn bottom-aligned zodat de gehoverde
   image enkel bovenaan uitbreidt. Container heeft een vaste aspect-ratio die de
   hover-hoogte reserveert → geen layout-shift bij hover. Mobiel wordt 2×2. */
.random-gallery {
	display: flex;
	flex-wrap: nowrap;
	gap: 25px;
	align-items: flex-end;
	/* Reserveer hoogte voor hover-state: (W-100px) × 0.267 × 1.33 ≈ W × 0.355
	   → aspect-ratio ≈ 1/0.355 ≈ 2.82. Op rust ontstaat er lege ruimte bovenaan,
	   die bij hover gevuld wordt door de omhoog-groeiende image. */
	aspect-ratio: 2.82 / 1;
}

/* Standaard basis = 1/5 van de beschikbare breedte (rekening houdend met 4 gaps).
   Bij < 5 items blijven kolommen 1/5 wijd → de "5-koloms" structuur blijft intact. */
.random-gallery .gallery-item {
	flex: 0 0 calc((100% - 100px) / 5);
	aspect-ratio: 3/4;
	min-width: 0;
	overflow: hidden;
	transition: flex-basis 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Hover: gehoverde = 1.33 × standaard breedte = 26.6% van beschikbare ruimte,
   de 4 anderen delen 73.4% → elk 18.35%. Ratio 26.6/18.35 = 1.33 → gehoverde
   is 33% breder. Met aspect-ratio 3/4 → ook 33% hoger. Totaal 100%. */
.random-gallery .gallery-item:hover {
	flex-basis: calc((100% - 100px) * 0.266);
}
.random-gallery:has(.gallery-item:hover) .gallery-item:not(:hover) {
	flex-basis: calc((100% - 100px) * 0.1835);
}

.random-gallery video,
.random-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Parallax-wrapper vult de gallery-item volledig; aspect-ratio komt van de parent.
   aspect-ratio: auto overruled een eventuele globale .parallax-wrapper-regel. */
.random-gallery .parallax-wrapper {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	overflow: hidden;
	position: relative;
}

.random-gallery .parallax-img {
	width: 100%;
	height: 140%;
	object-fit: cover;
	will-change: transform;
	transform: translateY(0px);
}

/* Mobile: 2×2 grid, 5e item verbergen, geen transities, aspect-ratio reset */
@media (max-width: 767px) {
	.random-gallery {
		display: grid;
		grid-template-columns: 1fr 1fr;
		aspect-ratio: auto;
	}
	.random-gallery .gallery-item,
	.random-gallery .gallery-item:hover,
	.random-gallery:has(.gallery-item:hover) .gallery-item:not(:hover) {
		flex: initial;
		transition: none;
	}
	.random-gallery .gallery-item:nth-child(5) {
		display: none;
	}
}



/* carousel gallery */
.full-height .spectra-image-gallery__layout--carousel{
	margin-bottom: 0 !important;
	height: 100% !important; 
}
.full-height .uagb-slick-carousel,
.full-height .uagb-slick-carousel .slick-list,
.full-height .uagb-slick-carousel .slick-list *{
	height: 100% !important;
}
.full-height .uagb-slick-carousel img{
	object-fit: cover !important;
}

/* CUSTOM JOB LOOP */
.job-shop-loop{
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.job-shop-loop .functie-titel{
	font-weight: 500;
}

.job-item.job-modal-trigger{
	cursor: pointer;
}
.job-item .intro{
	display: grid;
	grid-template-columns: 24px 2fr 1fr;
    column-gap: 40px;
	row-gap: 20px;
}
.job-item  .intro.job-content-inhoud{
	grid-column: span 2;
}

.job-item .intro > p{
	margin: 0;
	margin-bottom: 5px;
	font-size: 18px;
	font-style: normal;
	font-weight: 300;
	line-height: normal;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.job-item .job-content{
	display: none;
    grid-column: span 3;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 40px;
    background: var(--wp--preset--color--primary);
}
/* .job-item:hover .job-content{
	display: grid;
} */
.job-item h2{
	font-size: 18px;
	font-weight: 300;
}
.job-content-inhoud{
	grid-column: span 2;
}
.job-item:has(.job-content) > .intro{
	cursor: pointer;
}

.job-item .shop{
	color: var(--wp--preset--color--secondary);
}
.job-item .toggler{
	position: relative;
}
.job-item .toggler::after{
    position: absolute;
    content: '+';
    font-size: 24px;
    font-weight: 300;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 24px;
    width: 24px;
}
.job-item.active .toggler::after,
.job-item:hover .toggler::after{
	content: '-';
}

details.job-detail summary {
	list-style: none;
	position: relative;
	cursor: pointer;
	padding-left: 34px;
}

details.job-detail .inhoud-kolom-rechts,
details.job-detail .inhoud-kolom-links {
	padding-left: 34px;
}
details.job-detail summary::-webkit-details-marker {
	display: none;
}
details.job-detail summary::before {
	position: absolute;
	content: '+';
	font-size: 24px;
	font-weight: 300;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 24px;
	width: 24px;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
details.job-detail[open] summary::before {
	content: '-';
}



/* SINGLE SALON */


/* PAGINATED GALLERY */
.lazy-gallery { 
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 25px; 
}
.lazy-gallery img {
    width: 100%;
    object-fit: cover;
    height: auto;
    aspect-ratio: 3/4;
}

.load-more-gallery { 
	margin-top: 40px; 
	padding: 10px 20px; 
	cursor: pointer; 
	background-color: #0073aa; 
	color: #fff; 
	border: none; 
	border-radius: 4px; 
}
.gallery-item{
	display: flex;
}
.hidden { 
	display: none; 
}


@media screen and (max-width: 976px){
	.lazy-gallery {
		grid-template-columns: 1fr 1fr;
	}

	.salons.loop .wp-block-post-template{
		display: flex;
		flex-direction: column;
	}
	.job-content-inhoud {
    	grid-column: 1;
	}
	.job-item .job-content {
		grid-template-columns: 1fr;
		gap: 30px;
		padding: 20px;		
	}
	.job-shop-loop{
		gap: 30px;
	}
	.job-item  .intro{
		row-gap: 0;
    	column-gap: 10px;
	}
	.job-item  .intro .job{
		grid-column: span 2;
	}
	.job-item  .intro .shop{
		grid-column: span 3;
    	text-align: left;
	}
}