/**
 * Woningaanbod styling. Scoped under .advkey-aanbod / .advkey-single so the
 * theme is never touched. Colors follow the adventus.nl look: teal/green
 * status badges, red action buttons, dark navy text.
 */

.advkey-aanbod,
.advkey-single {
	--advkey-green: #157a67;
	--advkey-teal: #16a596;
	--advkey-red: #d5493f; /* site button red (footer variant #b93f3c) */
	--advkey-red-dark: #b93f3c;
	--advkey-ink: #223047;
	--advkey-muted: #6b7688;
	--advkey-line: #e4e8ee;
	--advkey-bg: #ffffff;
	color: var(--advkey-ink);
}

/* Cap the shortcode's width so a full-width builder section still renders
   ~3 generous columns, like the old plugin, instead of 5 narrow ones. */
.advkey-aanbod {
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 1rem;
}

/* -- filter bar ---------------------------------------------------------- */

.advkey-filters {
	margin: 0 0 2rem;
}

.advkey-filters__row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	align-items: flex-end;
	margin-bottom: 1.25rem;
}

.advkey-filters__field label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.4rem;
}

.advkey-filters__pair {
	display: flex;
	gap: 0.5rem;
}

.advkey-filters input[type="number"],
.advkey-filters select {
	border: 1px solid var(--advkey-line);
	border-radius: 4px;
	padding: 0.6rem 0.75rem;
	min-width: 7rem;
	background: var(--advkey-bg);
	color: var(--advkey-ink);
	font: inherit;
}

/* Element selectors included so theme link styles never win on color. */
.advkey-btn,
a.advkey-btn,
a.advkey-btn:visited {
	display: inline-block;
	border: 0;
	border-radius: 4px;
	padding: 0.7rem 2.5rem;
	font: inherit;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	color: #fff;
	transition: background-color 0.15s ease;
}

.advkey-btn--primary,
a.advkey-btn--primary {
	background: var(--advkey-red, #e04a4a);
	color: #fff;
}

.advkey-btn--primary:hover,
a.advkey-btn--primary:hover {
	background: var(--advkey-red-dark, #c93b3b);
	color: #fff;
	text-decoration: none;
}

.advkey-btn--secondary,
a.advkey-btn--secondary {
	background: var(--advkey-red, #e04a4a);
	color: #fff;
	opacity: 0.85;
}

.advkey-btn--secondary:hover,
a.advkey-btn--secondary:hover {
	opacity: 1;
	color: #fff;
	text-decoration: none;
}

/* -- grid ---------------------------------------------------------------- */

.advkey-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: 2.5rem 2rem;
}

.advkey-grid--list {
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.advkey-empty {
	padding: 2rem 0;
	color: var(--advkey-muted);
}

/* -- card (mirrors the old plugin's .item markup pixel for pixel) --------- */

.advkey-card {
	position: relative; /* anchor for the full-card overlay link */
}

.advkey-card__media,
.advkey-row__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: #eef1f5;
}

.advkey-card__media img,
.advkey-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.advkey-card__noimage {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #eef1f5, #eef1f5 12px, #e6eaef 12px, #e6eaef 24px);
}

/* Old .sale_label: solid #3D8C75, 5x15 padding, white 14px/600, square. */
.advkey-badge {
	position: absolute;
	top: 1.1rem;
	left: 0;
	z-index: 1;
	background: #38826c; /* wit erop: 4,6:1 (AA) — visueel vlak naast het oude #3d8c75 */
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	padding: 5px 15px;
	letter-spacing: 0.01em;
}

/* Old .item-features-icons: 14px, icons 15px high, "|" separators. */
.advkey-card__features {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	padding-top: 15px;
}

.advkey-card__feature {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.advkey-card__feature img {
	height: 15px;
	width: auto;
	max-width: 20px;
	display: inline-block;
}

.advkey-card__feature sup {
	font-size: 0.65em;
	line-height: 0;
}

.advkey-card__sep {
	color: var(--advkey-ink);
	opacity: 0.55;
}

/* Whole card clicks through to the woning, like the old .overlay. */
.advkey-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	text-indent: -9999px;
	overflow: hidden;
}

.advkey-row__body .advkey-badge {
	position: static;
	display: inline-block;
	border-radius: 3px;
}

/* Old plugin: every status label is the same #3D8C75 — no per-status colors. */

/* Old .item-address: 24px/600. .item-locality: 16px #3d8c75. .item-title
   (price): 28px/600 with the arrow icon. */
.advkey-card__title {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	margin: 12px 0 0;
	color: var(--advkey-ink);
}

.advkey-card__city {
	font-size: 16px;
	color: #2e6f5c; /* 5,4:1 op cream (AA) */
	margin: 2px 0 0;
}

/* Old .item-title: dark ink, only the arrow icon is red. */
.advkey-card__price {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 28px;
	font-weight: 600;
	color: var(--advkey-ink);
	margin: 0;
	padding-top: 15px;
}

.advkey-card__arrow {
	height: 15px;
	width: auto;
	min-width: 22px;
	display: inline-block;
}

/* Old text/specs colors also apply in list view. */
.advkey-card__specs {
	color: var(--advkey-muted);
	font-size: 0.9rem;
	margin: 0 0 0.35rem;
}

/* -- list view ----------------------------------------------------------- */

.advkey-row .advkey-card__title a,
.advkey-row .advkey-card__price a {
	color: inherit;
	text-decoration: none;
}

.advkey-row {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 1.25rem;
	align-items: start;
	border: 1px solid var(--advkey-line);
	border-radius: 6px;
	padding: 1rem;
}

@media (max-width: 640px) {
	.advkey-row {
		grid-template-columns: 1fr;
	}
}

/* -- detail page --------------------------------------------------------- */

.advkey-single__inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 1.25rem;
}

/* Full-width band using the site's own hero gradient (taken verbatim from the
   old woning pages). The theme's transparent header overlays the top of the
   page, so the large top padding puts the title well below the menu — same
   trick the old plugin used. The extra bottom padding is what the photo pulls
   up into. */
.advkey-single__hero {
	background: linear-gradient(180deg, #1b312a 45%, #3d8c75 100%);
	color: #fff;
	/* The live theme header (topbar + logo/menu row) overlays ~330px of the
	   page; the old plugin's title starts around 460px down. */
	padding: clamp(24rem, 40vh, 29rem) 0 10.5rem;
}

.advkey-single__title {
	margin: 0 0 0.5rem;
	color: #fff;
	font-size: clamp(2.6rem, 5.5vw, 4.2rem);
	line-height: 1.05;
	text-wrap: balance;
}

.advkey-single__city {
	color: rgba(255, 255, 255, 0.75);
	margin: 0 0 1.25rem;
	font-size: 1.05rem;
}

.advkey-single__price {
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	font-weight: 600;
	color: #fff;
	margin: 0;
}

@media (max-width: 782px) {
	.advkey-single__hero {
		padding: 13rem 0 8rem;
	}
}

/* Photo block pulls up into the hero's bottom padding, like the old page. */
.advkey-gallery {
	position: relative;
	margin-top: -8.5rem;
}

.advkey-gallery__main {
	position: relative;
	display: block;
}

.advkey-gallery__main .advkey-badge {
	top: 0;
	left: 0;
	font-size: 1rem;
	padding: 0.7rem 1.5rem;
}

.advkey-gallery__main img {
	width: 100%;
	max-height: 620px;
	object-fit: cover;
	display: block;
}

.advkey-gallery__strip {
	display: flex;
	gap: 0.6rem;
	overflow-x: auto;
	padding: 0.6rem 0;
	scroll-snap-type: x mandatory;
}

/* flex: none — without it 45 thumbnails shrink into unusable slivers. */
.advkey-gallery__strip a {
	flex: 0 0 auto;
	scroll-snap-align: start;
	border: 2px solid transparent;
}

.advkey-gallery__strip a.is-active {
	border-color: #3d8c75;
}

/* Slider arrows (inserted by JS) over the main photo. Sizes and colors carry
   !important: the theme styles bare <button> elements (big red blocks) and
   must never win here. */
button.advkey-gallery__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px !important;
	height: 42px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(253, 253, 250, 0.92) !important;
	color: #1b312a !important;
	line-height: 0;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(15, 35, 29, 0.25);
	transition: background-color 0.15s ease;
	padding: 0 !important;
	margin: 0;
}

button.advkey-gallery__arrow:hover {
	background: #ffffff !important;
}

button.advkey-gallery__arrow svg {
	display: block;
}

.advkey-gallery__arrow--prev {
	left: 1rem;
}

.advkey-gallery__arrow--next {
	right: 1rem;
}

.advkey-gallery__strip img {
	height: 96px;
	width: 140px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

/* Kenmerken card left, beschrijving right — the old page's layout. */
.advkey-single__columns {
	display: grid;
	grid-template-columns: minmax(300px, 5fr) 8fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	margin-top: 3.5rem;
	align-items: start;
}

@media (max-width: 800px) {
	.advkey-single__columns {
		grid-template-columns: 1fr;
	}
}

/* Cream panel, no table chrome: label muted, value beside it, air between rows. */
.advkey-single__specs {
	background: #f2efdf;
	padding: 2.25rem 2rem 2.5rem;
}

.advkey-single__specs h2 {
	margin: 0 0 1.5rem;
	font-size: 1.45rem;
}

.advkey-single__specs dl {
	display: grid;
	grid-template-columns: minmax(9rem, auto) 1fr;
	column-gap: 1.5rem;
	row-gap: 0.95rem;
	margin: 0;
}

.advkey-single__specs dt {
	color: #6d6c60; /* 4,6:1 op het cream-paneel (AA) */
	font-weight: 700;
	font-size: 0.95rem;
}

.advkey-single__specs dd {
	margin: 0;
}

/* Beschrijving: comfortable measure, teal subheads like the old page. */
.advkey-single__description {
	max-width: 70ch;
}

.advkey-single__description h2 {
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	margin: 0 0 1.25rem;
}

.advkey-single__description p,
.advkey-single__description li {
	line-height: 1.75;
	margin: 0 0 1.1rem;
}

.advkey-single__description h3,
.advkey-single__description h4 {
	color: #2e6f5c;
	margin: 1.75rem 0 0.5rem;
	font-size: 1.25rem;
}

.advkey-single__cta {
	margin-top: 1.25rem;
	width: 100%;
	box-sizing: border-box;
	display: block;
}

/* -- map ------------------------------------------------------------------ */

.advkey-single__map {
	margin-top: 2.5rem;
}

#advkey-map {
	width: 100%;
	height: 380px;
	background: #e8ebe7;
}

/* -- bezichtigings-band --------------------------------------------------- */

.advkey-single__visit {
	background: linear-gradient(135deg, var(--advkey-green, #157a67), #1c8a74);
	color: #fff;
	margin-top: 0;
	padding: 3.5rem 0;
}

.advkey-single__visit-title {
	color: #fff;
	margin: 0 0 0.75rem;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	text-wrap: balance;
}

.advkey-single__visit p {
	max-width: 44ch;
	color: rgba(255, 255, 255, 0.9);
	margin: 0 0 1.5rem;
}

.advkey-single__visit-inner {
	padding-top: 0;
	padding-bottom: 0;
}

/* -- floating contact bar ------------------------------------------------- */

/* Dark-green pill with a white logo tile and two glass buttons, like the old
   site's widget. Colors carry !important: this floats over arbitrary theme
   sections whose link styles must never win here. */
.advkey-floatbar {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 9999;
	display: flex;
	align-items: stretch;
	gap: 0.6rem;
	background: #1e5045;
	border-radius: 16px;
	padding: 0.6rem;
	box-shadow: 0 10px 32px rgba(15, 35, 29, 0.4);
}

.advkey-floatbar__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	background: #fdfdfa;
	border-radius: 10px;
}

.advkey-floatbar__btn,
a.advkey-floatbar__btn,
a.advkey-floatbar__btn:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(255, 255, 255, 0.12) !important;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 10px;
	color: #fff !important;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1;
	padding: 0.85rem 1.1rem;
	text-decoration: none !important;
	white-space: nowrap;
}

.advkey-floatbar__btn svg {
	flex: 0 0 auto;
}

.advkey-floatbar__btn:hover,
a.advkey-floatbar__btn:hover {
	background: rgba(255, 255, 255, 0.24) !important;
	color: #fff !important;
}

@media (max-width: 560px) {
	.advkey-floatbar {
		left: 1rem;
		right: 1rem;
		justify-content: center;
		flex-wrap: wrap;
	}
	.advkey-floatbar__logo {
		display: none;
	}
}

/* -- v0.6.0: filterbalk 2.0, resultaat + chips, verkocht-sectie, focus ----- */

/* Focus visible everywhere the plugin renders interactive elements. */
.advkey-aanbod a:focus-visible,
.advkey-aanbod button:focus-visible,
.advkey-aanbod select:focus-visible,
.advkey-aanbod input:focus-visible,
.advkey-aanbod summary:focus-visible,
.advkey-single a:focus-visible,
.advkey-single button:focus-visible,
.advkey-gallery:focus-visible {
	outline: 3px solid #2e6f5c;
	outline-offset: 2px;
}

.advkey-card__overlay:focus-visible {
	outline: 3px solid #2e6f5c;
	outline-offset: -3px;
}

/* Two-line addresses keep price rows aligned across the grid. */
.advkey-grid .advkey-card__title {
	min-height: 2.5em;
}

.advkey-grid--sold .advkey-card__title,
.advkey-grid--related .advkey-card__title {
	min-height: 0;
}

/* "Meer filters" fold. */
.advkey-filters__more {
	margin: -0.25rem 0 1.25rem;
}

.advkey-filters__more summary {
	cursor: pointer;
	font-weight: 700;
	color: #2e6f5c;
	width: fit-content;
}

.advkey-filters__more-hint {
	font-weight: 400;
	color: var(--advkey-muted);
	font-size: 0.9rem;
}

.advkey-filters__more[open] summary {
	margin-bottom: 1rem;
}

.advkey-filters__row--actions {
	align-items: center;
}

.advkey-filters__field--inline {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.advkey-filters__field--inline label {
	margin-bottom: 0;
	font-weight: 600;
	color: var(--advkey-muted);
}

/* Reset is a way out, not an action: text link instead of a red button. */
.advkey-filters__reset,
a.advkey-filters__reset {
	color: #2e6f5c;
	font-weight: 600;
	text-decoration: underline;
	margin-right: auto;
}

/* Result count + removable filter chips. */
.advkey-results {
	margin: 0 0 1.25rem;
}

.advkey-results__count {
	font-size: 1.3rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: var(--advkey-ink);
}

.advkey-chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	align-items: center;
}

.advkey-chip,
a.advkey-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	background: #e6efe9;
	border: 1px solid #c4d8cd;
	color: #24594a;
	border-radius: 999px;
	padding: 0.2rem 0.8rem;
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
}

.advkey-chip span {
	opacity: 0.6;
	font-weight: 700;
}

.advkey-chip:hover,
a.advkey-chip:hover {
	background: #d8e7de;
	color: #1b312a;
}

.advkey-chips__clear,
a.advkey-chips__clear {
	color: #2e6f5c;
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: underline;
}

/* "Recent verkocht" — proof, visually stepped back from the buyable grid. */
.advkey-sold {
	margin-top: 3.5rem;
}

.advkey-sold__head {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}

.advkey-sold__head h2 {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0;
	color: var(--advkey-ink);
	white-space: nowrap;
}

.advkey-sold__head::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--advkey-line);
}

.advkey-grid--sold {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: 2rem 1.5rem;
}

.advkey-card--sold .advkey-card__media img {
	filter: grayscale(0.55) brightness(1.04);
}

.advkey-card--sold .advkey-card__title {
	font-size: 20px;
}

.advkey-card--sold .advkey-card__price--sold {
	font-size: 17px;
	color: var(--advkey-muted);
	padding-top: 8px;
}

.advkey-sold__more {
	margin: 1.25rem 0 0;
}

.advkey-sold__more a {
	color: #2e6f5c;
	font-weight: 700;
	text-decoration: underline;
}

/* -- v0.6.0: galerij-teller, +N-tegel, terug-link, vergelijkbaar, floatbar - */

.advkey-single__back {
	margin: 0 0 1.5rem;
}

.advkey-single__back a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	font-weight: 600;
}

.advkey-single__back a:hover {
	color: #fff;
	text-decoration: underline;
}

.advkey-gallery__counter {
	position: absolute;
	right: 0.9rem;
	bottom: 0.9rem;
	z-index: 2;
	background: rgba(20, 35, 29, 0.75);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	font-variant-numeric: tabular-nums;
}

.advkey-gallery__moretile,
a.advkey-gallery__moretile {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 96px;
	border-radius: 4px;
	background: #22392f;
	color: #fff;
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
	scroll-snap-align: start;
}

.advkey-gallery__moretile:hover {
	background: #2e5443;
	color: #fff;
}

.advkey-gallery__hiddenlink {
	display: none;
}

.advkey-single__related {
	margin-top: 3rem;
	padding: 0;
}

.advkey-single__related-title {
	font-size: 1.5rem;
	margin: 0 0 1.25rem;
}

.advkey-grid--related {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: 2rem 1.5rem;
}

/* Mobile floatbar: one compact row that never buries the kenmerken. */
@media (max-width: 560px) {
	.advkey-single {
		padding-bottom: 5.5rem;
	}
	.advkey-floatbar {
		flex-wrap: nowrap;
		justify-content: stretch;
	}
	.advkey-floatbar__btn,
	a.advkey-floatbar__btn {
		flex: 1;
		justify-content: center;
		padding: 0.7rem 0.6rem;
		font-size: 0.9rem;
	}
}

/* -- Elementor-proof image sizing ------------------------------------------ */
/* The live aanbod page is built with Elementor, whose `.elementor img
   { height: auto }` out-specifies our class selectors and blew the 128px
   arrow PNG up to natural size. Every image with a designed size carries
   !important so no builder reset can inflate it. */
.advkey-card__arrow,
.advkey-aanbod .advkey-card__arrow,
.advkey-single .advkey-card__arrow {
	height: 15px !important;
	width: auto !important;
	min-width: 22px;
	max-width: 30px;
}

.advkey-card__feature img,
.advkey-aanbod .advkey-card__feature img,
.advkey-single .advkey-card__feature img {
	height: 15px !important;
	width: auto !important;
	max-width: 20px;
}

.advkey-card__media img,
.advkey-row__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

.advkey-gallery__strip img {
	height: 96px !important;
	width: 140px !important;
	object-fit: cover;
}

/* -- v0.7.0: veelgestelde vragen ------------------------------------------ */

.advkey-single__faq {
	margin-top: 3rem;
	max-width: 70ch;
}

.advkey-single__faq h2 {
	font-size: 1.5rem;
	margin: 0 0 1rem;
}

.advkey-faq__item {
	border-bottom: 1px solid var(--advkey-line);
	padding: 0.85rem 0;
}

.advkey-faq__item summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--advkey-ink);
}

.advkey-faq__item[open] summary {
	color: #2e6f5c;
}

.advkey-faq__item p {
	margin: 0.6rem 0 0;
	line-height: 1.7;
}