/*
 * VDT maatwerk
 * Exclusive-label, Exclusive-filter, aangekochte woningen en de carousel.
 * Huisstijl: #114459 donkerblauw, #f58020 oranje, #cca970 goud (de
 * Exclusive-kleur, zoals gebruikt op de knoppen van de Exclusive-pagina).
 */

:root {
	--vdt-blauw: #114459;
	--vdt-blauw-licht: #145c7a;
	--vdt-oranje: #f58020;
	--vdt-goud: #cca970;
	/*
	 * Diepere tint voor goud als tekstkleur op wit (filterregel): het lichte
	 * goud haalt daar maar 2,2:1. Het label zelf blijft licht goud.
	 */
	--vdt-goud-diep: #966d2e;
	--vdt-lijn: #e3e8ea;
}

/* ---------------------------------------------------------------------------
 * Menu: geen krimpende tekst bij het laden
 *
 * Elementor zet `transition: .4s` op de menulinks, dus op alle eigenschappen.
 * Komt de header-CSS later binnen dan de algemene typografie (23px), dan
 * animeert de menutekst zichtbaar naar 12px. Alleen kleuren mogen overvloeien.
 * ------------------------------------------------------------------------ */
header .elementor-nav-menu--main .elementor-nav-menu a {
	transition-property: color, background-color, border-color, opacity;
}

/* ---------------------------------------------------------------------------
 * Exclusive-label op het woningkaartje
 * ------------------------------------------------------------------------ */
.grid-house-item__label {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-block;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/*
 * Het goud van de Exclusive-pagina met witte letters (feedback 9 sep: "goud
 * mag hetzelfde blijven"). Wit op dit goud is licht van contrast, dus een
 * zachte schaduw onder de letters houdt ze leesbaar op elke foto.
 */
.grid-house-item__label.label--exclusive {
	background: var(--vdt-goud);
	color: #fff;
	text-shadow: 0 1px 1px rgba(17, 68, 89, .45);
}

/* ---------------------------------------------------------------------------
 * De blokken moeten naadloos tussen de Elementor-secties passen
 *
 * De waarden hieronder zijn niet geschat maar gemeten aan het bestaande blok
 * "Een greep uit ons aanbod" op de homepagina: kop 23px/700 Poppins in
 * #666671, container maximaal 1350px, knop #f58020 met 8px 32px en vierkante
 * hoeken. Het basisthema geeft hier andere waarden, vandaar deze overrides.
 * ------------------------------------------------------------------------ */
.section-aangekocht,
.section-exclusive {
	background: #fff;
}

.section-aangekocht > .container,
.section-exclusive > .container {
	max-width: 1350px;
	padding-left: 8px;
	padding-right: 8px;
}

.section-aangekocht .section__title,
.section-exclusive .section__title {
	font-family: "Poppins", sans-serif;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.3em;
	color: #666671;
}

.section-aangekocht .section__intro,
.section-exclusive .section__intro {
	margin: 6px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: #707070;
}

/* Een echte knop, gelijk aan de Elementor-knoppen op de rest van de site. */
.section-aangekocht .section__title-bar .btn,
.section-exclusive .section__title-bar .btn {
	display: inline-block;
	flex: 0 0 auto;
	padding: 8px 32px;
	border: 0;
	border-radius: 0;
	background: var(--vdt-oranje);
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	text-decoration: none;
	transition: background-color .2s ease;
}

.section-aangekocht .section__title-bar .btn:hover,
.section-exclusive .section__title-bar .btn:hover {
	background: #df6400;
	color: #fff;
}

.section-aangekocht .section__title-bar,
.section-exclusive .section__title-bar {
	gap: 24px;
	margin-bottom: 25px;
}

@media (max-width: 767.98px) {
	/* Het basisthema verbergt deze knop op mobiel; hier hoort hij te blijven. */
	.section-aangekocht .section__title-bar .btn,
	.section-exclusive .section__title-bar .btn {
		display: inline-block;
	}

	.section-aangekocht .section__title-bar,
	.section-exclusive .section__title-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
}

/* Het statuslabel van de plugin staat rechtsonder, deze linksboven: geen overlap. */
.grid-house-item--exclusive .grid-house-item__image {
	position: relative;
}

/* ---------------------------------------------------------------------------
 * Exclusive-filter
 *
 * Stond eerst als afgeronde witte pil rechts onder de balk. Dat viel op als
 * los onderdeel: de rest van de balk is vierkant, wit en links uitgelijnd,
 * en de pil lijnde nergens mee uit. Nu is het een gewone regel binnen het
 * formulier, links uitgelijnd met het eerste zoekveld, zonder eigen kader.
 * Het goud zit alleen nog in het woord en het vinkje.
 * ------------------------------------------------------------------------ */
.vdt-exclusive-rij {
	display: flex;
	justify-content: flex-start;
	margin-top: 10px;
}

.vdt-exclusive-toggle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.2;
	color: var(--vdt-blauw);
}

.vdt-exclusive-toggle input {
	margin: 0;
	width: 16px;
	height: 16px;
	border-radius: 0;
	accent-color: var(--vdt-goud-diep);
}

/* Het woord Exclusive in dezelfde stijl als het label op het woningkaartje. */
.vdt-exclusive-toggle__merk {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vdt-goud-diep);
}

.vdt-exclusive-toggle__tekst {
	white-space: nowrap;
}

/* Aangevinkt: alleen de tekst zwaarder, geen kader eromheen. */
.vdt-exclusive-filter-active .vdt-exclusive-toggle__tekst,
.vdt-exclusive-toggle:has( input:checked ) .vdt-exclusive-toggle__tekst {
	font-weight: 600;
}

@media (max-width: 767.98px) {
	.vdt-exclusive-toggle__tekst {
		white-space: normal;
	}
}

/* ---------------------------------------------------------------------------
 * Aangekochte woningen
 * ------------------------------------------------------------------------ */
/* Fix: het statuslabel stond bovenop de prijspil, waardoor de prijs op elke
   verkochte woning onleesbaar was. Nu staat het label rechtsonder in de foto,
   naast de m2-regel die linksonder staat. */
.grid-house-item__status {
	top: auto;
	bottom: 10px;
	right: 6px;
}

.grid-house-item__status.status--aangekocht {
	background: var(--vdt-blauw);
	color: #fff;
}

.grid-house-item--aangekocht {
	cursor: default;
}

.section__intro {
	margin: 8px 0 0;
	max-width: 62ch;
	color: #45454d;
}

.vdt-empty-notice {
	margin: 20px 0;
	padding: 14px 18px;
	border: 1px dashed var(--vdt-oranje);
	border-radius: 8px;
	background: #fff8f2;
	color: #45454d;
	font-size: 14px;
}

/* ---------------------------------------------------------------------------
 * Carousel
 * ------------------------------------------------------------------------ */
.vdt-carousel {
	position: relative;
}

.vdt-carousel__track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.vdt-carousel__item {
	/* Vier per beeld op desktop, gelijk aan grid-houses--large. */
	flex: 0 0 calc((100% - 72px) / 4);
	scroll-snap-align: start;
}

.vdt-carousel button.vdt-carousel__nav {
	position: absolute;
	top: 38%;
	width: 44px;
	height: 44px;
	border: 1px solid var(--vdt-lijn);
	border-radius: 50%;
	padding: 0;
	background: #fff;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(17, 68, 89, .12);
	transition: opacity .15s ease, border-color .15s ease;
}

.vdt-carousel button.vdt-carousel__nav:hover {
	border-color: var(--vdt-blauw);
}

.vdt-carousel button.vdt-carousel__nav[hidden] {
	display: none;
}

.vdt-carousel button.vdt-carousel__nav--prev {
	left: -22px;
}

.vdt-carousel button.vdt-carousel__nav--next {
	right: -22px;
}

.vdt-carousel button.vdt-carousel__nav::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 auto;
	border-top: 2px solid var(--vdt-blauw);
	border-right: 2px solid var(--vdt-blauw);
}

.vdt-carousel button.vdt-carousel__nav--prev::before {
	transform: rotate(-135deg);
	margin-left: 19px;
}

.vdt-carousel button.vdt-carousel__nav--next::before {
	transform: rotate(45deg);
	margin-left: 14px;
}

@media (max-width: 1199px) {
	.vdt-carousel__item {
		flex-basis: calc((100% - 48px) / 3);
	}
}

@media (max-width: 991px) {
	.vdt-carousel__item {
		flex-basis: calc((100% - 24px) / 2);
	}

	.vdt-carousel button.vdt-carousel__nav {
		display: none;
	}
}

@media (max-width: 575px) {
	.vdt-carousel__item {
		flex-basis: 82%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vdt-carousel__track {
		scroll-behavior: auto;
	}
}