/*
Theme Name: Zuidbureau
Theme URI: https://zuidbureau.org
Author: Zuidbureau
Description: Luxevastgoed in Antwerpen-Zuid, verhuur en verkoop.
Version: 1.2.0
Text Domain: zuidbureau
*/

:root {
	--zdb-forest: #1e3a2f;
	--zdb-copper: #b87333;
	--zdb-paper: #f3efe6;
	--zdb-ink: #1a1814;
	--zdb-display: "Instrument Serif", serif;
	--zdb-text: "Albert Sans", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--zdb-text);
	color: var(--zdb-ink);
	background: var(--zdb-paper);
	line-height: 1.65;
	text-align: left;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--zdb-display); margin: 0 0 0.35em; line-height: 1.12; font-weight: 400; }
h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h2 { font-size: clamp(1.25rem, 2.2vw, 1.85rem); }
a { color: var(--zdb-copper); }
p { margin: 0 0 0.9em; }
address { font-style: normal; }

.zdb-btn, .zdb-ghost {
	display: inline-block;
	padding: 8px 16px 8px 14px;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	font-family: var(--zdb-text);
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	border-radius: 0;
	box-shadow: none;
}
.zdb-btn {
	background: var(--zdb-copper);
	color: #fff;
	clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
}
.zdb-ghost {
	background: transparent;
	color: var(--zdb-forest);
	box-shadow: inset 0 0 0 1px var(--zdb-forest);
}
.zdb-kicker {
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--zdb-copper);
	margin: 0 0 8px;
}
.zdb-tag {
	display: inline-block;
	background: var(--zdb-copper);
	color: #fff;
	font-family: var(--zdb-text);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	padding: 5px 14px 5px 10px;
	clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
}

/* Two-row header: brand+phone then left hairline nav */
.zdb-sheet { background: var(--zdb-forest); }
.zdb-top {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 18px;
	padding: 0 5vw;
	height: 48px;
	background: var(--zdb-forest);
	color: #fff;
	border-bottom: 1px solid rgba(184,115,51,0.45);
}
.zdb-mark {
	font-family: var(--zdb-display);
	font-size: 1.35rem;
	color: #fff;
	text-decoration: none;
}
.zdb-ref {
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #c9b89a;
	justify-self: start;
}
.zdb-tel { color: #e6d3b8; text-decoration: none; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.zdb-nav {
	background: #163028;
	padding: 0 5vw;
	height: 34px;
	display: flex;
	align-items: center;
	border-top: 1px solid #2a4a3c;
}
.zdb-nav ul { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0 22px; list-style: none; margin: 0; padding: 0; }
.zdb-nav a {
	color: #d8d0c4;
	text-decoration: none;
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-bottom: 1px solid transparent;
	padding: 8px 0;
}
.zdb-nav .current-menu-item a { color: var(--zdb-copper); border-bottom-color: var(--zdb-copper); }
.zdb-open {
	display: none;
	background: none;
	color: #fff;
	border: 1px solid var(--zdb-copper);
	padding: 4px 8px;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

/* Right technical drawer */
.zdb-drawer {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(82vw, 300px);
	background: var(--zdb-ink);
	color: #efe8dc;
	padding: 22px 22px 36px;
	z-index: 50;
	overflow: auto;
	border-left: 1px solid var(--zdb-copper);
}
.zdb-drawer.is-open { display: block; }
.zdb-drawer a { color: #efe8dc; display: block; text-decoration: none; font-size: 0.95rem; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid #333; }
.zdb-drawer button {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--zdb-copper);
	color: var(--zdb-copper);
	padding: 0 0 4px;
	margin: 0 0 20px;
	cursor: pointer;
	font-family: var(--zdb-text);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.zdb-wrap {
	padding: 40px 5vw 64px;
	max-width: none;
	width: 100%;
	text-align: left;
	border-top: 1px solid #ddd4c4;
}
.zdb-form {
	max-width: 46rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 22px;
	padding: 22px 0 0 18px;
	border-left: 3px solid var(--zdb-copper);
}
.zdb-form label { display: block; margin: 0; font-size: 0.86rem; }
.zdb-form label:has(textarea),
.zdb-form label:has([type="checkbox"]),
.zdb-form button { grid-column: 1 / -1; }
.zdb-form input, .zdb-form textarea, .zdb-form select {
	width: 100%;
	padding: 8px 8px;
	border: 1px solid #cfc4b0;
	background: #fff;
	font-family: inherit;
	border-radius: 0;
}
.zdb-form input[type="checkbox"] { width: auto; }
.zdb-note { background: #e4efe6; padding: 12px 14px; border-left: 3px solid var(--zdb-forest); }
.zdb-note-bad { background: #f3ddd4; border-left-color: var(--zdb-copper); }

.zdb-ticks {
	height: 14px;
	background:
		linear-gradient(var(--zdb-forest), var(--zdb-forest)) 0 6px / 100% 1px no-repeat,
		repeating-linear-gradient(90deg, var(--zdb-copper) 0 6px, transparent 6px 48px);
	background-color: var(--zdb-paper);
}

/* Hero C: no classic hero — horizontal listing plates */
.zdb-rollen {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 0;
	border-bottom: 1px solid var(--zdb-forest);
}
.zdb-plaat {
	flex: 0 0 min(78vw, 520px);
	min-height: 62vh;
	padding: 24px;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	scroll-snap-align: start;
	position: relative;
	border-right: 1px solid rgba(255,255,255,0.2);
}
.zdb-plaat .zdb-tag { position: absolute; top: 18px; left: 18px; }
.zdb-l-a { background: #222 url("images/listing-a.jpg") 40% 35%/cover; }
.zdb-l-b { background: #222 url("images/listing-b.jpg") 55% 40%/cover; }
.zdb-kaartplaat {
	background: var(--zdb-forest);
	color: #efe8dc;
}
.zdb-kaartplaat iframe { width: 100%; height: 180px; border: 1px solid var(--zdb-copper); margin: 0 0 14px; }

.zdb-hero-copy { padding: 40px 5vw 36px; background: #fff; border-top: 1px solid #ddd4c4; }
.zdb-hero-copy h1 { max-width: 22ch; }
.zdb-kaart { padding: 36px 5vw; background: var(--zdb-forest); color: #efe8dc; }
.zdb-wijk { display: flex; flex-wrap: wrap; gap: 0; margin: 16px 0; border: 1px solid var(--zdb-copper); }
.zdb-wijk button {
	padding: 10px 16px;
	border: 0;
	border-right: 1px solid var(--zdb-copper);
	background: transparent;
	color: #fff;
	cursor: pointer;
	font-family: var(--zdb-text);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.zdb-wijk button.is-on { background: var(--zdb-copper); }
.zdb-wijk-out { background: transparent; padding: 16px 0 0; border-top: 1px solid rgba(184,115,51,0.4); }

.zdb-stappen {
	padding: 36px 5vw;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border-top: 1px solid #ddd4c4;
}
.zdb-stappen article {
	display: grid;
	grid-template-columns: 64px 160px 1fr;
	gap: 16px;
	align-items: baseline;
	background: transparent;
	padding: 14px 0;
	border-bottom: 1px solid #ddd4c4;
	border-top: 0;
}
.zdb-stappen span { font-family: var(--zdb-text); font-size: 0.78rem; letter-spacing: 0.14em; color: var(--zdb-copper); }

.zdb-dossiers { padding: 36px 5vw; background: #fff; }
.zdb-dos {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 18px;
	align-items: center;
	padding: 16px 0;
	border-bottom: 1px solid #ddd4c4;
}
.zdb-dos strong, .zdb-dos .zdb-tag { font-family: var(--zdb-text); font-size: 0.85rem; }
.zdb-faq { padding: 36px 5vw 64px; }
.zdb-faq details { border-bottom: 1px solid #ddd4c4; padding: 10px 0; }

.zdb-foto-office { min-height: 36vh; background: #333 url("images/office.jpg") 30% 40%/cover; border-top: 1px solid var(--zdb-forest); }
.zdb-foto-keys { min-height: 32vh; background: #333 url("images/keys.jpg") 50% 40%/cover; }
.zdb-foto-street { min-height: 28vh; background: #333 url("images/street.jpg") 60% 45%/cover; }
.zdb-foto-hero { min-height: 36vh; background: #333 url("images/hero.jpg") 40% 30%/cover; }

.zdb-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 0; border-top: 1px solid #ddd4c4; }
.zdb-split-copy { padding: 40px 5vw; }
.zdb-split .zdb-foto-office, .zdb-split .zdb-foto-keys { min-height: 100%; }

/* Masonry property plates */
.zdb-panden {
	column-count: 2;
	column-gap: 18px;
	padding: 24px 5vw 48px;
}
.zdb-pand {
	break-inside: avoid;
	display: block;
	margin: 0 0 18px;
	padding: 0;
	background: #fff;
	border: 1px solid #cfc4b0;
	position: relative;
}
.zdb-pand figure { margin: 0; min-height: 200px; background: #333 center/cover; }
.zdb-p-c figure { background-image: url("images/listing-c.jpg"); background-position: 40% 30%; min-height: 260px; }
.zdb-p-d figure { background-image: url("images/listing-d.jpg"); background-position: 50% 40%; min-height: 180px; }
.zdb-p-h figure { background-image: url("images/hero.jpg"); background-position: 45% 25%; min-height: 220px; }
.zdb-pand div { padding: 16px 16px 20px; }
.zdb-pand strong {
	position: absolute;
	top: 12px;
	left: 12px;
	font-family: var(--zdb-text);
	font-size: 0.82rem;
	background: var(--zdb-copper);
	color: #fff;
	padding: 5px 14px 5px 10px;
	clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
}

.zdb-tijd { border-left: 1px solid var(--zdb-copper); margin: 0; padding: 0 0 0 22px; }
.zdb-tijd article { position: relative; padding: 0 0 28px; }
.zdb-tijd article::before {
	content: "";
	position: absolute;
	left: -26px;
	top: 6px;
	width: 7px;
	height: 7px;
	background: var(--zdb-copper);
}

/* Footer: left-aligned dossier + wide map strip */
.zdb-voet {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 32px;
	padding: 32px 5vw 20px;
	background: var(--zdb-ink);
	color: #d8d0c4;
	border-top: 1px solid var(--zdb-copper);
	text-align: left;
}
.zdb-voet a { color: var(--zdb-copper); }
.zdb-kaartstrook { background: var(--zdb-ink); padding: 0 5vw 28px; }
.zdb-kaartstrook iframe { width: 100%; height: 160px; border: 1px solid #333; display: block; }
.zdb-voet address { grid-column: 1 / -1; font-size: 0.88rem; }

.zdb-koek {
	position: fixed;
	bottom: 16px;
	left: 16px;
	width: min(340px, calc(100vw - 32px));
	background: #fff;
	border: 1px solid var(--zdb-forest);
	border-left: 4px solid var(--zdb-copper);
	padding: 14px 16px;
	display: none;
	z-index: 60;
}
.zdb-koek.is-open { display: block; }

@media (max-width: 900px) {
	.zdb-nav { display: none; }
	.zdb-open { display: block; }
	.zdb-top { grid-template-columns: 1fr auto auto; height: auto; padding: 10px 5vw; }
	.zdb-ref { display: none; }
	.zdb-plaat { flex-basis: 86vw; min-height: 52vh; }
	.zdb-stappen article, .zdb-voet, .zdb-dos, .zdb-form, .zdb-split { display: block; }
	.zdb-panden { column-count: 1; }
}