/*
Theme Name: Wouter Makelaardij
Theme URI: https://www.woutermakelaardij.nl
Author: Goes & Roos
Author URI: https://www.goesenroos.nl
Description: Maatwerkthema voor Wouter Makelaardij, gebouwd op de Goes & Roos plugin. Pagina's bouw je met de blok-editor en de patronen in de categorie "Wouter Makelaardij".
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: wouter
*/

/* ==========================================================================
   INHOUD
   --------------------------------------------------------------------------
    1. Variabelen ........ kleuren, letters, maten (pas hier aan = overal aan)
    2. Basis ............. tekst, koppen, links
    3. Knoppen ........... knopblok, omlijnd, tekstlink met pijl
    4. Header ............ logo, menu, transparant boven de video
    5. Blokstijlen ....... wat je in de editor kiest bij "Stijlen"
    6. Pagina-opbouw ..... ruimte tussen secties, kolommen op mobiel
    7. Videohero ......... blok "Videohero"
    8. Secties ........... per patroon (intro, diensten, cijfers, banner, ...)
    9. Aanbod ............ woningkaarten, slider en filters (plugin)
   10. Woningpagina ...... detailpagina van een woning (plugin)
   11. Formulieren ....... WPForms
   12. Footer ............ footer en copyright
   13. Animatie .......... infaden, minder beweging

   Kleuren en lettergroottes voor de editor staan ook in theme.json.
   ========================================================================== */


/* ==========================================================================
   1. Variabelen
   ========================================================================== */
:root {
	/* Huisstijl: blauw en crème van het visitekaartje en het gifje */
	--wm-blauw: #62c4d7;
	--wm-blauw-donker: #1b7489;   /* blauw voor tekst: goed leesbaar op wit */
	--wm-blauw-licht: #e6f5f8;
	--wm-creme: #f7ecca;
	--wm-creme-licht: #fbf5e8;
	--wm-papier: #fffcf6;          /* achtergrond van de site: warm wit */
	--wm-inkt: #31393c;            /* koppen en tekst */
	--wm-grijs: #6a665e;           /* warm grijs */
	--wm-lichtgrijs: #f4ede1;      /* zand (heette eerst lichtgrijs) */
	--wm-lijn: #e7dcc8;


	/* Ronde hoeken */
	--wm-rond: 20px;
	--wm-rond-klein: 12px;

	/* Lettertype: Jost lijkt op de letters van het logo */
	--wm-font: "Jost", "Futura", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Lettergroottes */
	--fs-klein: .9rem;
	--fs-label: .8rem;            /* kapitalen: bovenkop, menu */
	--fs-tekst: 1.125rem;
	--fs-intro: clamp(1.2rem, 1.6vw, 1.35rem);
	--fs-h1: clamp(2.4rem, 5vw, 4rem);
	--fs-h2: clamp(1.9rem, 3.4vw, 2.75rem);
	--fs-h3: clamp(1.3rem, 1.8vw, 1.5rem);
	--fs-hero: clamp(2.3rem, 3.7vw, 3.35rem);
	--fs-getal: clamp(1.75rem, 2.4vw, 2.2rem);

	/* Maten */
	--wm-sectie: clamp(4rem, 9vw, 7.5rem);   /* ruimte boven en onder een sectie */
	--wm-breed: 1240px;
	--wm-header-h: 88px;
	--wm-schaduw: 0 24px 46px -28px rgba(92, 66, 30, .38);
	--wm-overgang: .3s ease;
}


/* ==========================================================================
   2. Basis
   ========================================================================== */
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--wm-header-h) + 16px);
}

body {
	font-family: var(--wm-font);
	font-size: var(--fs-tekst);
	font-weight: 400;
	line-height: 1.7;
	color: var(--wm-inkt);
	background: var(--wm-papier);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: var(--wm-blauw-donker);
	text-underline-offset: .2em;
	text-decoration-thickness: 1px;
	transition: color var(--wm-overgang);
}

a:hover,
a:focus { color: var(--wm-inkt); }

:focus-visible {
	outline: 2px solid var(--wm-blauw-donker);
	outline-offset: 3px;
}

::selection {
	background: var(--wm-blauw);
	color: var(--wm-inkt);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--wm-font);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -.01em;
	color: var(--wm-inkt);
	margin-bottom: .6em;
	text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
h4 { font-size: 1.15rem; }

p { text-wrap: pretty; }

strong, b { font-weight: 600; }

.container {
	max-width: calc(var(--wm-breed) + 2.5rem);
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.skip-link:focus {
	clip: auto;
	width: auto;
	height: auto;
	z-index: 2000;
	top: .5rem;
	left: .5rem;
	padding: .75rem 1.25rem;
	background: #fff;
}


/* ==========================================================================
   3. Knoppen
   ========================================================================== */

/* Standaardknop (blauw, pil) – kleuren staan in theme.json */
.wp-element-button,
.wp-block-button__link,
.wm-knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	border-radius: 999px;
	font-family: var(--wm-font);
	font-weight: 500;
	letter-spacing: .01em;
	text-decoration: none;
	transition: background-color var(--wm-overgang), color var(--wm-overgang), border-color var(--wm-overgang), transform var(--wm-overgang);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background-color: var(--wm-inkt) !important;
	color: #fff !important;
	transform: translateY(-2px);
}

/* Omlijnd (stijl "Licht") */
.wp-block-button.is-style-licht .wp-block-button__link {
	background: transparent;
	color: var(--wm-inkt);
	box-shadow: inset 0 0 0 1.5px var(--wm-inkt);
}

/* Tekstlink met pijl (stijl "Tekstlink met pijl") */
.wp-block-button.is-style-pijl .wp-block-button__link {
	padding: .2rem 0;
	background: none;
	border-radius: 0;
	color: var(--wm-inkt);
	font-weight: 500;
	box-shadow: inset 0 -2px 0 var(--wm-blauw);
}

.wp-block-button.is-style-pijl .wp-block-button__link::after {
	content: "→";
	transition: transform var(--wm-overgang);
}

.wp-block-button.is-style-pijl .wp-block-button__link:hover {
	background: none !important;
	color: var(--wm-blauw-donker) !important;
	transform: none;
}

.wp-block-button.is-style-pijl .wp-block-button__link:hover::after { transform: translateX(4px); }

/* Knoppen en menu-items naar een pagina die (nog) niet online staat:
   zichtbaar, maar niet klikbaar (zie functions.php, onderdeel 6) */
a.wm-inactief,
.wm-inactief > a {
	cursor: pointer;
}

/* Knoppen in de videohero */
.wm-knop {
	padding: .95rem 1.9rem;
	font-size: 1rem;
}

.wm-knop--blauw {
	background: var(--wm-blauw);
	color: var(--wm-inkt);
}

.wm-knop--licht {
	color: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8);
}

.wm-knop:hover,
.wm-knop:focus {
	background: #fff;
	color: var(--wm-inkt);
	transform: translateY(-2px);
}


/* ==========================================================================
   4. Header (navigatie van de plugin)
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1030;
	background: var(--wm-papier);
	transition: background-color var(--wm-overgang), box-shadow var(--wm-overgang);
}

.admin-bar .site-header { top: 32px; }

@media (max-width: 782px) {
	.admin-bar .site-header { top: 0; }
}

.site-header.is-scrolled { box-shadow: 0 10px 30px -20px rgba(47, 62, 70, .4); }

.site-header .navbar {
	min-height: var(--wm-header-h);
	padding: .75rem 0;
	transition: min-height var(--wm-overgang);
}

.site-header.is-scrolled .navbar { min-height: 72px; }

/* Logo */
.site-header .navbar-brand { padding: 0; margin-right: 2rem; }

.site-header .navbar-brand img {
	height: 62px;
	width: auto !important;
	max-width: none !important;
	transition: height var(--wm-overgang), filter var(--wm-overgang);
}

/* Bovenaan de pagina groot en goed leesbaar, bij scrollen compact */
@media (min-width: 992px) {
	:root { --wm-header-h: 120px; }
	.site-header .navbar-brand img { height: 86px; }
}

.site-header.is-scrolled .navbar-brand img { height: 42px; }

/* Menu */
.site-header .navbar-nav {
	align-items: center;
	gap: .15rem;
	margin-left: auto;
}

.site-header .nav-link {
	position: relative;
	font-size: .98rem;
	font-weight: 500;
	color: var(--wm-inkt);
	padding: .5rem .85rem !important;
	white-space: nowrap;
}

/* Blauw streepje onder het actieve menu-item (zoals in de Instagram-preview) */
.site-header .nav-link::after {
	content: "";
	position: absolute;
	left: .85rem;
	bottom: .2rem;
	width: 24px;
	height: 2px;
	background: var(--wm-blauw);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--wm-overgang);
}

.site-header .nav-link:hover,
.site-header .current-menu-item > .nav-link,
.site-header .current-menu-ancestor > .nav-link { color: var(--wm-blauw-donker); }

.site-header .nav-link:hover::after,
.site-header .current-menu-item > .nav-link::after,
.site-header .current-menu-ancestor > .nav-link::after { transform: scaleX(1); }

/* Bootstrap-pijltje bij submenu's */
.site-header .nav-link.dropdown-toggle::after {
	position: static;
	display: inline-block;
	width: auto;
	height: auto;
	background: none;
	transform: none;
	margin-left: .35em;
	vertical-align: .2em;
}

.site-header .dropdown-menu {
	border: 0;
	border-radius: 0;
	border-top: 3px solid var(--wm-blauw);
	box-shadow: var(--wm-schaduw);
	padding: .5rem 0;
}

.site-header .dropdown-item {
	padding: .5rem 1.25rem;
	color: var(--wm-inkt);
}

.site-header .dropdown-item:hover { background: var(--wm-blauw-licht); }

/* Menu-item als knop: CSS-klasse "menu-knop" in Weergave > Menu's */
.site-header .nav-link.menu-knop {
	margin-left: .75rem;
	padding: .7rem 1.4rem !important;
	border-radius: 999px;
	background: var(--wm-blauw);
	color: var(--wm-inkt) !important;
}

.site-header .nav-link.menu-knop::after { display: none; }
.site-header .nav-link.menu-knop:hover { background: var(--wm-inkt); color: #fff !important; }

/* Hamburger */
.site-header .navbar-toggler {
	width: 44px;
	height: 44px;
	padding: 10px 8px !important;
	box-shadow: none !important;
}

.site-header .navbar-toggler-line {
	display: block;
	width: 28px;
	height: 2px;
	background: var(--wm-inkt);
	transition: transform var(--wm-overgang), opacity var(--wm-overgang), background-color var(--wm-overgang);
}

.site-header .navbar-toggler:not(.collapsed) .navbar-toggler-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header .navbar-toggler:not(.collapsed) .navbar-toggler-line:nth-child(2) { opacity: 0; }
.site-header .navbar-toggler:not(.collapsed) .navbar-toggler-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Uitklapmenu (tot 1200px) */
@media (max-width: 1199.98px) {
	.site-header .navbar-collapse {
		margin-top: .75rem;
		padding: .5rem 0 1.25rem;
		border-top: 1px solid var(--wm-lijn);
		max-height: calc(100vh - 90px);
		overflow-y: auto;
	}

	.site-header .navbar-nav { align-items: stretch; }

	.site-header .nav-link {
		padding: .75rem 0 !important;
		border-bottom: 1px solid var(--wm-lijn);
		font-size: 1.1rem;
	}

	.site-header .nav-link::after { display: none; }

	.site-header .nav-link.menu-knop {
		margin: 1rem 0 0;
		justify-content: center;
		text-align: center;
		border: 0;
	}
}

/* --- Pagina met videohero (body-klasse "wm-heeft-hero") ------------------ */
/* Header in dezelfde crème als de hero, zodat ze één geheel vormen */
.wm-heeft-hero .site-header:not(.is-scrolled):not(.is-menu-open) { background: var(--wm-creme-licht); }


/* ==========================================================================
   5. Blokstijlen (blok selecteren > Stijlen)
   ========================================================================== */

/* Bovenkop: klein, kapitalen, ruim gespatieerd – zoals op het visitekaartje */
.is-style-bovenkop {
	font-size: var(--fs-label) !important;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .24em;
	line-height: 1.5;
	color: var(--wm-blauw-donker);
	margin-bottom: 1rem !important;
}

.has-blauw-background-color .is-style-bovenkop { color: var(--wm-inkt); }

/* Intro: grotere tekst */
.is-style-intro {
	font-size: var(--fs-intro) !important;
	line-height: 1.6;
}

/* Kop met een dun blauw lijntje eronder */
.is-style-lijn::after {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	margin-top: .7em;
	background: var(--wm-blauw);
}

.is-style-lijn.has-text-align-center::after { margin-left: auto; margin-right: auto; }

/* Ondertitel: kleine grijze regel onder een kop */
.wm-ondertitel {
	font-size: var(--fs-klein) !important;
	color: var(--wm-grijs);
	line-height: 1.5;
	margin-top: -.6rem !important;
}

/* Tegel: zoals de vakjes in de Instagram-preview */
.is-style-tegel {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 1rem 1rem 1.75rem;
	background: #fff;
	border-radius: var(--wm-rond);
	transition: transform var(--wm-overgang), box-shadow var(--wm-overgang);
}

.is-style-tegel .wp-block-image img { border-radius: var(--wm-rond-klein); }

.is-style-tegel:hover {
	transform: translateY(-4px);
	box-shadow: var(--wm-schaduw);
}


.is-style-tegel > * { margin-left: .75rem !important; margin-right: .75rem !important; }
.is-style-tegel > .wp-block-image { margin: 0 0 1.5rem !important; }
.is-style-tegel h3 { margin-bottom: .35rem; }

.is-style-tegel .wm-ondertitel {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.is-style-tegel .wm-ondertitel + p { margin-top: 1.25rem; }

.is-style-tegel .wm-ondertitel::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin-top: 1rem;
	background: var(--wm-blauw);
}

.is-style-tegel p { font-size: 1.02rem; }
.is-style-tegel .wp-block-buttons { margin-top: auto !important; padding-top: .5rem; }

/* Kaart: wit met schaduw */
.is-style-kaart {
	background: #fff;
	padding: clamp(1.75rem, 3vw, 2.75rem);
	border-radius: var(--wm-rond);
	box-shadow: var(--wm-schaduw);
	height: 100%;
}

/* Met lijntekening van Haarlem: de voorkant van het visitekaartje als behang.
   De tekening wordt herhaald op ware grootte, zodat de lijnen scherp blijven. */
.is-style-tekening,
.wm-cta {
	background: #64c3d8 url("assets/img/illustratie-haarlem.jpg") center / auto 520px repeat;
}

/* Gewone foto's krijgen zachte hoeken */
.entry-content .wp-block-image:not(.is-style-boog):not(.is-style-cirkel):not(.wm-banner__tekening):not(.wm-haarlem__animatie) img { border-radius: var(--wm-rond-klein); }

/* Afbeelding met boog (bovenkant rond, zoals een Haarlemse deur) */
.wp-block-image.is-style-boog img {
	position: relative;
	border-radius: 999px 999px var(--wm-rond-klein) var(--wm-rond-klein);
}

/* In de intro, paginakoppen en het Haarlem-blok: de boog met de lijntekening
   erachter, iets verschoven – net als bij de video in de hero */
.wm-intro .wp-block-image.is-style-boog,
.wm-paginakop .wp-block-image.is-style-boog,
.wm-woning-contact .wp-block-image.is-style-boog,
.wm-haarlem .wp-block-image.is-style-boog {
	position: relative;
	margin-right: 1.25rem;
	margin-bottom: 1.25rem;
}

.wm-intro .wp-block-image.is-style-boog::before,
.wm-paginakop .wp-block-image.is-style-boog::before,
.wm-woning-contact .wp-block-image.is-style-boog::before,
.wm-haarlem .wp-block-image.is-style-boog::before {
	content: "";
	position: absolute;
	inset: 0;
	transform: translate(1.25rem, 1.25rem);
	border-radius: 999px 999px var(--wm-rond) var(--wm-rond);
	background: #64c3d8 url("assets/img/illustratie-haarlem.jpg") center / auto 420px repeat;
}

/* Bij het Haarlem-blok staat het gifje (al blauw) op zichzelf, zonder tweede boog */
.wm-haarlem .wp-block-image.is-style-boog::before { display: none; }

.wp-block-image.is-style-cirkel img {
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
}

.wp-block-image { margin-bottom: 0; }
.wp-block-image img { display: block; width: 100%; height: auto; }
.wm-foto-links img { object-position: 22% center; }

/* Lijst met vinkjes */
.is-style-vinkjes {
	list-style: none;
	padding-left: 0;
}

.is-style-vinkjes li {
	position: relative;
	padding: .55rem 0 .55rem 2.25rem;
	border-bottom: 1px solid var(--wm-lijn);
}

.is-style-vinkjes li:last-child { border-bottom: 0; }

.is-style-vinkjes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .9rem;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	background: var(--wm-blauw) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f3e46' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* Genummerde stappen */
.is-style-stappen {
	list-style: none;
	padding-left: 0;
	counter-reset: stap;
}

.is-style-stappen li {
	position: relative;
	counter-increment: stap;
	padding: .55rem 0 1.1rem 3.25rem;
	min-height: 2.5rem;
}

.is-style-stappen li::before {
	content: counter(stap);
	position: absolute;
	left: 0;
	top: .25rem;
	width: 2.2rem;
	height: 2.2rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1.5px solid var(--wm-blauw);
	color: var(--wm-blauw-donker);
	font-weight: 600;
	font-size: .95rem;
	background: #fff;
}

/* verticale lijn tussen de nummers */
.is-style-stappen li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 1.1rem;
	top: 2.6rem;
	bottom: .2rem;
	width: 1.5px;
	background: var(--wm-blauw);
	opacity: .5;
}

/* Citaat (patroon "Beoordelingen – drie citaten") */
.wm-citaat {
	height: 100%;
	margin: 0;
	padding: 2.25rem 2rem 2rem;
	border: 0;
	border-radius: var(--wm-rond);
	background: #fff;
	box-shadow: var(--wm-schaduw);
	font-size: 1.1rem;
}

.wm-citaat::before {
	content: "“";
	display: block;
	font-size: 4rem;
	line-height: .6;
	color: var(--wm-blauw);
	margin-bottom: .75rem;
}

.wm-citaat cite {
	display: block;
	margin-top: 1.25rem;
	font-style: normal;
	font-size: var(--fs-label);
	text-transform: uppercase;
	letter-spacing: .2em;
	color: var(--wm-blauw-donker);
}


/* ==========================================================================
   6. Pagina-opbouw
   ========================================================================== */
.site-main { overflow-x: clip; }

/* Elke sectie over de volle breedte krijgt dezelfde ruimte boven en onder */
.entry-content > .wp-block-group.alignfull {
	padding-top: var(--wm-sectie);
	padding-bottom: var(--wm-sectie);
	margin-top: 0;
	margin-bottom: 0;
}

/* Twee witte secties na elkaar: niet dubbel zoveel ruimte */
.entry-content > .wp-block-group.alignfull:not(.has-background):not(.wm-cta) + .wp-block-group.alignfull:not(.has-background):not(.wm-cta):not(.wm-cijfers) { padding-top: 0; }

.entry-content > .alignfull + .alignfull,
.entry-content > .wm-hero + * { margin-top: 0; }

.entry-content > :last-child { margin-bottom: 0; }

/* Kolommen: ruime tussenafstand */
.wp-block-columns.alignwide { gap: clamp(2rem, 5vw, 5rem); }

@media (max-width: 781px) {
	.wp-block-columns { gap: 2.5rem; }
}

/* Berichten en archieven (index.php) */
.wm-archief { padding-top: var(--wm-sectie); padding-bottom: var(--wm-sectie); }

.wm-bericht {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.wm-bericht img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 1rem; }
.wm-bericht h2 { font-size: var(--fs-h3); }


/* ==========================================================================
   7. Videohero (blok "Videohero")
   ========================================================================== */
.wm-hero {
	position: relative;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding: clamp(2rem, 4vw, 3.5rem) 1.25rem clamp(5rem, 9vw, 7.5rem);
	background: var(--wm-creme-licht);
	overflow: hidden;
}

.wm-hero__raster {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(2.5rem, 5vw, 5rem);
	max-width: var(--wm-breed);
	margin: 0 auto;
}

/* --- Tekst ------------------------------------------------------------------ */
.wm-hero__bovenkop {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin-bottom: 1.5rem;
	font-size: var(--fs-label);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .24em;
	color: var(--wm-blauw-donker);
}

.wm-hero__bovenkop::before {
	content: "";
	width: 32px;
	height: 2px;
	background: var(--wm-blauw);
}

.wm-hero__titel {
	font-size: var(--fs-hero);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -.02em;
	margin-bottom: 1.5rem;
}

/* Het accent in de titel: in het blauw van de huisstijl */
.wm-hero__titel em {
	font-style: normal;
	color: var(--wm-blauw-donker);
}

.wm-hero__tekst {
	max-width: 34rem;
	font-size: var(--fs-intro);
	line-height: 1.6;
	color: var(--wm-grijs);
	margin-bottom: 2rem;
}

.wm-hero__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.wm-hero .wm-knop--licht {
	color: var(--wm-inkt);
	box-shadow: inset 0 0 0 1.5px var(--wm-inkt);
}

.wm-hero .wm-knop:hover,
.wm-hero .wm-knop:focus {
	background: var(--wm-inkt);
	color: #fff;
	box-shadow: none;
}

/* --- Video in een boog, met de lijntekening erachter -------------------- */
.wm-hero__beeld {
	position: relative;
	/* loopt rechts door tot vlak bij de schermrand, de tekst blijft in lijn met het logo */
	--wm-uitloop: max(0px, (100vw - var(--wm-breed)) / 2 - 2.5rem);
	width: calc(100% + var(--wm-uitloop));
	max-width: 760px;
	margin-right: calc(var(--wm-uitloop) * -1 + 1.5rem);
	justify-self: start;
}

/* De boog met de tekening van het visitekaartje, iets verschoven */
.wm-hero__beeld::before {
	content: "";
	position: absolute;
	inset: 0;
	transform: translate(1.5rem, 1.5rem);
	border-radius: 999px 999px var(--wm-rond) var(--wm-rond);
	background: #64c3d8 url("assets/img/illustratie-haarlem.jpg") center / auto 460px repeat;
}

.wm-hero__boog {
	position: relative;
	aspect-ratio: 6 / 7;
	overflow: hidden;
	border-radius: 999px 999px var(--wm-rond) var(--wm-rond);
	background: var(--wm-lijn);
	box-shadow: var(--wm-schaduw);
	/* afgeronde hoeken ook rond de video (Safari) */
	isolation: isolate;
}

.wm-hero__poster,
.wm-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.wm-hero__poster {
	object-fit: cover;
	transition: opacity 1.2s ease;
}

/* 16:9-video bijgesneden tot de boog: zo hoog als de boog, midden uitgelijnd */
.wm-hero__video iframe {
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	width: auto;
	aspect-ratio: 16 / 9;
	transform: translateX(-50%);
	border: 0;
	pointer-events: none;
}

/* Foto blijft zichtbaar tot de video echt speelt */
.wm-hero.is-spelend .wm-hero__poster { opacity: 0; }

/* --- Draaiend stempel ------------------------------------------------------ */
.wm-hero__stempel {
	position: absolute;
	left: -3.5rem;
	bottom: 2.5rem;
	z-index: 3;
	width: clamp(120px, 12vw, 158px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wm-papier);
	color: var(--wm-blauw-donker);
	box-shadow: 0 14px 30px -18px rgba(92, 66, 30, .6);
}

.wm-hero__stempel-tekst {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: currentColor;
	font-family: var(--wm-font);
	font-size: 15.5px;
	font-weight: 500;
	letter-spacing: 1px;
}

.wm-hero__stempel-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 42%;
	transform: translate(-50%, -50%);
	color: var(--wm-blauw);
}


/* --- Vertrouwensregel onder de hero ----------------------------------------- */
.wm-hero__vertrouwen {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 2rem;
	max-width: var(--wm-breed);
	margin: clamp(2.5rem, 5vw, 4rem) auto 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-klein);
	color: var(--wm-grijs);
}

.wm-hero__vertrouwen li {
	position: relative;
	padding-left: 1.5rem;
}

.wm-hero__vertrouwen li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .35em;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--wm-blauw) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2331393c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat;
}

.wm-hero__editor-label {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 4;
	padding: .3rem .8rem;
	border-radius: 999px;
	background: var(--wm-blauw);
	color: var(--wm-inkt);
	font-size: .8rem;
}

@media (max-width: 991.98px) {
	.wm-hero__raster { grid-template-columns: 1fr; }
	.wm-hero__beeld { justify-self: center; width: 100%; max-width: 560px; margin: 1rem 1.5rem 0 0; }
	.wm-hero__stempel { left: -1rem; bottom: 1.5rem; }
}

/* Desktop en laptop: de hero vult precies het scherm onder de header,
   en de boog met video wordt zo groot als er hoogte is, zodat hij altijd
   helemaal in beeld staat (ook op lage laptopschermen) */
@media (min-width: 992px) and (orientation: landscape) {
	.wm-hero {
		--wm-scherm: calc(100vh - var(--wm-header-h) - var(--wm-adminbar, 0px));
		min-height: var(--wm-scherm);
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-top: 1.25rem;
		padding-bottom: 1.5rem;
	}

	@supports (height: 100svh) {
		.wm-hero { --wm-scherm: calc(100svh - var(--wm-header-h) - var(--wm-adminbar, 0px)); }
	}

	.admin-bar .wm-hero { --wm-adminbar: 32px; }

	.wm-hero__raster { width: 100%; }

	/* boog 6:7, plus ruimte voor padding, verschoven tekening en vertrouwensregel */
	.wm-hero__beeld { max-width: min(760px, (var(--wm-scherm) - 8rem) * 6 / 7); }

	.wm-hero__vertrouwen { width: 100%; margin-top: 1.5rem; }
}

@media (max-width: 575.98px) {
	.wm-hero__knoppen .wm-knop { flex: 1 1 100%; }
	.wm-hero__beeld { max-width: 88%; }
	.wm-hero__vertrouwen { flex-direction: column; }
}


/* ==========================================================================
   8. Secties (per patroon in de categorie "Wouter Makelaardij")
   ========================================================================== */

/* --- Intro ---------------------------------------------------------------- */
.wm-intro .wp-block-image { max-width: 480px; margin-left: auto; }

/* --- Diensten: vier tegels ---------------------------------------------- */
.wm-diensten > .has-text-align-center:not(.wp-block-heading):not(.is-style-bovenkop) { max-width: 40rem; margin-left: auto; margin-right: auto; }

.wm-tegels {
	margin-top: var(--wp--preset--spacing--50) !important;
	gap: 1.25rem !important;
}

@media (min-width: 782px) and (max-width: 1100px) {
	.wm-tegels { flex-wrap: wrap !important; }
	.wm-tegels > .wp-block-column { flex-basis: calc(50% - .625rem) !important; }
}

/* Staande portretfoto in een liggende tegel: uitsnede hoger, zodat het hoofd in beeld blijft */
.wm-tegels img[src*="/wouter.jpg"] { object-position: 50% 12%; }

/* --- Cijfers ---------------------------------------------------------------- */
.wm-cijfers {
	padding-top: clamp(2.5rem, 5vw, 4rem) !important;
	padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
	margin-bottom: calc(var(--wm-sectie) * .5) !important;
}

/* Vier feiten op een rij, gescheiden door dunne lijnen */
.wm-cijfers .wp-block-columns {
	gap: 0 !important;
	padding: 2rem 0;
	border-top: 1px solid var(--wm-lijn);
	border-bottom: 1px solid var(--wm-lijn);
}

.wm-cijfers .wp-block-column {
	text-align: center;
	padding: .25rem 1.25rem;
}

@media (min-width: 782px) {
	.wm-cijfers .wp-block-column + .wp-block-column { border-left: 1px solid var(--wm-lijn); }
}

.wm-getal {
	font-size: var(--fs-getal);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--wm-blauw-donker);
	margin-bottom: .35rem !important;
}

.wm-getal-tekst {
	font-size: var(--fs-klein);
	color: var(--wm-grijs);
	max-width: 15rem;
	margin: 0 auto !important;
}

/* --- Banner: waardebepaling ------------------------------------------- */
.wm-banner { padding-top: 0 !important; }
.has-background + .wm-banner { padding-top: var(--wm-sectie) !important; }

.wm-banner__vlak {
	position: relative;
	padding: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4.5rem);
	border-radius: var(--wm-rond);
	overflow: hidden;
}

.wm-banner__vlak h2 { margin-bottom: .75rem; }

/* De tekening als kaartje met een crème rand */
.wm-banner__tekening img {
	max-height: 360px;
	width: auto;
	margin: 0 auto;
	border: 10px solid var(--wm-creme);
	border-radius: var(--wm-rond-klein);
	box-shadow: 0 22px 40px -20px rgba(31, 57, 66, .55);
}

@media (max-width: 781px) {
	.wm-banner__tekening { display: none; }
}

/* --- Aanbod op de homepage ---------------------------------------------- */
.wm-aanbod__kop { margin-bottom: 2.5rem !important; }

/* --- Tekst met twee foto's (collage) --------------------------------------- */
.wm-collage {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	align-items: start;
}

.wm-collage > .wp-block-image { margin: 0 !important; }
.wm-collage > .wp-block-image:nth-child(2) { margin: 4.5rem 0 0 -2.5rem !important; position: relative; z-index: 1; }
.wm-collage > .wp-block-image:nth-child(2) img { box-shadow: 0 0 0 8px var(--wm-papier), var(--wm-schaduw); }

/* --- Team ----------------------------------------------------------------- */
.wm-portretten { gap: 1.25rem !important; }

.wm-portretten .wp-block-image { margin-bottom: 1.1rem; }
.wm-portretten h3 { margin-bottom: .5rem; font-size: 1.2rem; }
.wm-portretten .wm-ondertitel { margin-top: 0 !important; }

@media (min-width: 600px) {
	.wm-portretten { flex-wrap: nowrap !important; }
	.wm-portretten > .wp-block-column:nth-child(2) { margin-top: 4rem; }
}

/* --- Haarlem met bewegend logo ---------------------------------------- */
.wm-haarlem__animatie { max-width: 440px; margin: 0 auto; }

/* --- Beoordelingen -------------------------------------------------------- */
/* 9,7 als rond stempel */
.wm-score {
	display: grid;
	place-items: center;
	width: clamp(10rem, 16vw, 12.5rem);
	aspect-ratio: 1;
	margin: 1rem 0 1.25rem !important;
	border-radius: 50%;
	border: 2px solid var(--wm-blauw);
	background: var(--wm-blauw-licht);
	font-size: clamp(3.5rem, 6vw, 4.75rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--wm-blauw-donker);
}

.wm-score-tekst {
	max-width: 16rem;
	color: var(--wm-grijs);
	font-size: var(--fs-klein);
}

.wm-reviews__punten { margin-top: 2.5rem !important; gap: 1.5rem !important; }

.wm-reviews__punten > .wp-block-column {
	padding-top: 1.25rem;
	border-top: 1px solid var(--wm-lijn);
}

.wm-reviews__punten h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.wm-reviews__punten p { font-size: 1rem; color: var(--wm-grijs); }

/* --- Afsluiter (CTA): zoals het visitekaartje ------------------------------
   Achtergrond = de voorkant (lijntekening, zie "is-style-tekening" in 5),
   het crème kaartje erop = de achterkant, met het logo-teken bovenaan. */
.wm-cta__kaart {
	position: relative;
	max-width: 760px !important;
	padding: clamp(4.5rem, 8vw, 5.5rem) clamp(1.5rem, 5vw, 4rem) clamp(2.5rem, 5vw, 3.5rem);
	border-radius: var(--wm-rond);
	box-shadow: 0 34px 70px -34px rgba(31, 57, 66, .55);
	text-align: center;
}

.wm-cta__kaart::before {
	content: "";
	position: absolute;
	top: clamp(1.5rem, 3vw, 2rem);
	left: 50%;
	width: 56px;
	height: 56px;
	transform: translateX(-50%);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' fill='none' stroke='%2362c4d7' stroke-width='18'%3E%3Ccircle cx='250' cy='250' r='235'/%3E%3Cpath d='M68 190l90 148 85-150 47 82M279 232v-14h41v98l10 22 88-148'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wm-cta__kaart h2 { margin-bottom: .75rem; }

/* --- Paginakop ---------------------------------------------------------------- */
.wm-paginakop { padding-top: clamp(3rem, 6vw, 5rem) !important; }
.wm-paginakop h1 { max-width: 16ch; }
.wm-paginakop .wp-block-image { max-width: 440px; margin-left: auto; }

/* --- Onderwerpen: kop links, tekst rechts ------------------------------- */
.wm-onderwerp {
	padding-top: 2.25rem;
	margin-top: 2.25rem !important;
	border-top: 1px solid var(--wm-lijn);
}

.wm-onderwerp:first-child { margin-top: 0 !important; padding-top: 0; border-top: 0; }
.wm-onderwerp h2 { font-size: var(--fs-h3); line-height: 1.25; }

@media (min-width: 782px) {
	.wm-onderwerp h2 { position: sticky; top: calc(var(--wm-header-h) + 1.5rem); }
}

/* --- Stappen: genummerde tegels ----------------------------------------- */
.wm-stappen__rij {
	counter-reset: stap;
	flex-wrap: wrap !important;
	gap: 1.25rem !important;
	margin-top: 2.5rem !important;
}

.wm-stap {
	counter-increment: stap;
	flex: 1 1 260px !important;
	padding: 1.75rem 1.5rem 1.5rem;
	border-radius: var(--wm-rond);
	background: var(--wm-lichtgrijs);
}

.wm-stap::before {
	content: counter(stap, decimal-leading-zero);
	display: block;
	margin-bottom: 1rem;
	font-size: 2rem;
	font-weight: 300;
	line-height: 1;
	color: var(--wm-blauw-donker);
}

.wm-stap h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.wm-stap p { font-size: 1rem; margin: 0; }

/* --- Persoon -------------------------------------------------------------- */
.wm-persoon .wp-block-image { max-width: 400px; }

/* --- Sfeerbeelden (drie vierkante foto's) -------------------------------- */
.wm-sfeer { gap: 1.25rem !important; }

/* --- Smalle paginakop (aanbod, zoekopdracht) ---------------------------- */
.wm-paginakop--smal { padding-bottom: clamp(2.5rem, 5vw, 4rem) !important; }
.wm-paginakop--smal > * { max-width: var(--wm-breed) !important; }
.wm-paginakop--smal .is-style-intro { max-width: 40rem; }

/* Aanbod en formulieren van de plugin op de volle contentbreedte */
.wm-formulier > * { max-width: var(--wm-breed) !important; }
.wm-aanbod-overzicht > * { max-width: 1560px !important; }
.wm-aanbod-overzicht .container { max-width: none; padding: 0; }

/* --- Contact -------------------------------------------------------------- */
.wm-contactkaart { padding: 1rem 1rem 2rem; border-radius: var(--wm-rond); }
.wm-contactkaart > * { margin-left: 1rem !important; margin-right: 1rem !important; }
.wm-contactkaart > .wp-block-image { margin: 0 0 1.5rem !important; }
.wm-contactkaart__links a { font-weight: 500; text-decoration: none; }
.wm-contactkaart .wm-ondertitel { margin-top: 0 !important; }


/* ==========================================================================
   9. Aanbod (Goes & Roos plugin)
   ========================================================================== */

/* --- Woningkaart ---------------------------------------------------------- */
.properties-special .row > [class*="col-"],
.properties .row > [class*="col-"] {
	display: flex;
	margin-bottom: 1.75rem;
}

.object {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: .75rem .75rem 0;
	border-radius: var(--wm-rond);
	background: var(--wm-lichtgrijs);
	transition: transform var(--wm-overgang), box-shadow var(--wm-overgang), background-color var(--wm-overgang);
}

/* Bij aanwijzen beweegt er niets: alleen de kaart wordt wit met een zachte schaduw */
.object:hover {
	background: #fff;
	box-shadow: var(--wm-schaduw);
}

.object .object-image {
	margin-bottom: 0 !important;
	overflow: hidden;
	border-radius: var(--wm-rond-klein);
	isolation: isolate;
}

/* Hele kaart klikbaar via de link op de foto */
.object .object-image > a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.object .object-image-img {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wm-lijn);
}

.object .object-image-img img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
}

/* Bij aanwijzen geen zoom of filter op de foto's: dat laat kaarten met ronde
   hoeken in sommige browsers een pixel verspringen. Alleen de knop kleurt mee. */

/* Statuslabel */
.object .object-status,
.object-detail-photo .object-status {
	top: 1.25rem;
	left: 1.25rem;
	z-index: 2;
	border-radius: 999px;
	background: var(--wm-blauw) !important;
	color: var(--wm-inkt) !important;
	font-weight: 500;
	font-size: var(--fs-label);
	text-transform: uppercase;
	letter-spacing: .14em;
	padding: .35rem .9rem !important;
}

.object-status-verkocht .object-status,
.object-status-verkocht-onder-voorbehoud .object-status {
	background: var(--wm-inkt) !important;
	color: #fff !important;
}

/* Gegevens */
.object .object-info {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.25rem .75rem 1.25rem;
}

.object .object-address { margin-bottom: .4rem !important; }

.object .object-address-line:first-child,
.object .object-address-line:first-child span {
	font-size: 1.3rem !important;
	font-weight: 600 !important;
	line-height: 1.2;
	color: var(--wm-inkt);
}

.object .object-place {
	display: inline-block;
	margin-top: .25rem;
	font-size: var(--fs-label);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .22em;
	color: var(--wm-blauw-donker);
}

.object .object-price {
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--wm-inkt);
	margin-bottom: .8rem !important;
}

.object .object-price-kind-of { display: none; }
.object .object-price-type { font-size: var(--fs-klein); font-weight: 400; color: var(--wm-grijs); }

/* Kenmerken als één regel: 120 m² · 6 kamers */
.object .object-features {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.25rem;
	padding-top: .8rem;
	margin-bottom: .5rem !important;
	border-top: 1px solid var(--wm-lijn);
	font-size: 1rem;
	color: var(--wm-grijs);
}

.object .object-feature { padding: 0 !important; margin: 0 !important; border: 0 !important; }
.object .object-feature .row { display: block; margin: 0; --bs-gutter-x: 0; }
.object .object-feature [class*="col-"] { width: auto; padding: 0; margin: 0; max-width: none; }

.object .object-feature [class*="col-"]:first-child,
.object .object-feature-title,
.object .object-feature-status { display: none; }

.object .object-view { margin-top: auto; margin-bottom: 0 !important; }

.object .object-view a {
	padding: .2rem 0 !important;
	font-weight: 500;
	color: var(--wm-inkt) !important;
	background: none !important;
	border: 0 !important;
	box-shadow: inset 0 -2px 0 var(--wm-blauw);
}

.object .object-view a::after { content: " →"; }

/* --- Slider op de homepage ("wm-aanbod-slider") ----------------------- */
.wm-aanbod-slider.wp-block-group { padding: 0 .75rem !important; overflow: hidden; }
.wm-aanbod-slider .properties-special { padding: 0; }
.wm-aanbod-slider .carousel { position: static; overflow: hidden; }
.wm-aanbod-slider .properties-special .row > [class*="col-"] { margin-bottom: 0; }

/* De carousel wordt door js/script.js een rij met scroll-snap */
.wm-rij {
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 5.5rem;
}

.wm-rij::-webkit-scrollbar { display: none; }

/* Aantal kaarten in beeld: 4 / 3 / 2 / 1 */
.wm-rij__item {
	flex: 0 0 25%;
	min-width: 0;
	padding: 0 .625rem;
	scroll-snap-align: start;
	display: flex;
}

@media (max-width: 1199.98px) { .wm-rij__item { flex-basis: 33.3333%; } }
@media (max-width: 991.98px)  { .wm-rij__item { flex-basis: 50%; } }
@media (max-width: 575.98px)  { .wm-rij__item { flex-basis: 85%; } }

.wm-aanbod-slider .past-alles .carousel-control-prev,
.wm-aanbod-slider .past-alles .carousel-control-next { display: none; }
.wm-aanbod-slider .past-alles .wm-rij { padding-bottom: 1rem; }

/* Ronde pijlen onder de rij, rechts op de contentlijn */
.wm-aanbod-slider .carousel-control-prev,
.wm-aanbod-slider .carousel-control-next {
	top: auto;
	bottom: 0;
	left: auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid var(--wm-blauw);
	opacity: 1;
	transition: background-color var(--wm-overgang);
}

.wm-aanbod-slider .carousel-control-next { right: max(1.25rem, calc((100vw - var(--wm-breed)) / 2)); }
.wm-aanbod-slider .carousel-control-prev { right: calc(max(1.25rem, calc((100vw - var(--wm-breed)) / 2)) + 64px); }

.wm-aanbod-slider .carousel-control-prev > *,
.wm-aanbod-slider .carousel-control-next > *,
.wm-aanbod-slider .carousel-control-prev::after,
.wm-aanbod-slider .carousel-control-next::after { display: none !important; }

.wm-aanbod-slider .carousel-control-prev::before,
.wm-aanbod-slider .carousel-control-next::before {
	content: "" !important;
	position: static !important;
	display: block !important;
	width: 11px !important;
	height: 11px !important;
	background: none !important;
	border: 0 !important;
	border-left: 2px solid var(--wm-inkt) !important;
	border-bottom: 2px solid var(--wm-inkt) !important;
	transform: translateX(2px) rotate(45deg);
}

.wm-aanbod-slider .carousel-control-next::before { transform: translateX(-2px) rotate(-135deg) !important; }

.wm-aanbod-slider .carousel-control-prev:hover,
.wm-aanbod-slider .carousel-control-next:hover { background: var(--wm-blauw); }

/* --- Aanbodpagina: titel, sortering en filters ---------------------------- */
.wm-aanbod-overzicht { padding-top: clamp(2rem, 4vw, 3rem) !important; }

/* Titel "Aanbod" met het aantal woningen als rond label */
.properties-title h1 {
	font-size: var(--fs-h3);
	margin-right: .6rem !important;
}

.properties-title .facetwp-counts {
	display: inline-grid;
	place-items: center;
	min-width: 1.9rem;
	height: 1.9rem;
	padding: 0 .5rem;
	border-radius: 999px;
	background: var(--wm-blauw) !important;
	color: var(--wm-inkt) !important;
	font-size: .9rem;
	font-weight: 500;
}

.properties-title .facetwp-counts * { background: none !important; color: inherit !important; }

/* Sorteren */
.properties-filter-extra-main {
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

.properties-filter-extra-main { display: flex !important; justify-content: flex-end; gap: .75rem; }

/* Sorteren zonder ingestelde opties (FacetWP > Instellingen > Sorteren): niet tonen */
.facetwp-sort:has(.facetwp-sort-select:empty) { display: none !important; }

.properties-filter-extra .facetwp-per-page-select,
.properties-filter-extra .facetwp-sort select {
	min-width: 13rem;
	min-height: 46px;
	padding: .5rem 2.5rem .5rem 1rem !important;
	border: 1px solid var(--wm-lijn) !important;
	border-radius: 999px !important;
	background-color: #fff !important;
	color: var(--wm-inkt) !important;
	font-family: var(--wm-font) !important;
	font-size: 1rem !important;
}

/* Filtervlak: zand met afgeronde hoeken, velden wit */
.properties-filter-default {
	background: var(--wm-lichtgrijs) !important;
	border-radius: var(--wm-rond) !important;
	padding: 1.25rem .5rem !important;
}

.properties-filter { border-radius: var(--wm-rond); }

.properties-filter-default .container { padding: 0 .75rem; }
.properties-filter-default .row > [class*="col-"] { margin-bottom: .75rem; }

.properties-filter .fs-label-wrap,
.properties-filter .facetwp-search,
.properties-filter input,
.properties-filter select,
.properties-filter-range-list {
	border: 0 !important;
	border-radius: var(--wm-rond-klein) !important;
	background-color: #fff !important;
	font-family: var(--wm-font) !important;
}

.properties-filter-title { font-size: .95rem; color: var(--wm-grijs); }

/* Opengeklapte keuzelijsten (prijs, type): zelfde vorm als de velden, met schaduw */
.properties-filter .properties-filter-range-list.open { border-radius: var(--wm-rond-klein) var(--wm-rond-klein) 0 0 !important; }

.properties-filter .properties-filter-range-list .facetwp-type-radio,
.properties-filter .fs-dropdown {
	border: 0 !important;
	border-radius: 0 0 var(--wm-rond-klein) var(--wm-rond-klein);
	box-shadow: 0 18px 30px -18px rgba(92, 66, 30, .45);
}

.properties-filter .facetwp-radio,
.properties-filter .fs-option { font-family: var(--wm-font); }

/* Meer filters: pilknop in plaats van een blok in kapitalen */
.properties-filter-more,
.properties-filter-more a,
.properties-filter-more-close,
.properties-filter-more-close a {
	border-radius: 999px !important;
	background: var(--wm-inkt) !important;
	color: #fff !important;
	text-transform: none !important;
	font-weight: 500;
	text-decoration: none !important;
}

.properties-filter-reset {
	background-color: var(--wm-blauw) !important;
	border-radius: 50%;
}

.properties-filter .fs-option.selected .fs-checkbox i,
.properties-filter .facetwp-radio.checked::before {
	background-color: var(--wm-blauw-donker) !important;
	border-color: var(--wm-blauw-donker) !important;
}

/* --- Aanbodpagina: per woning twee foto's + infovlak (plugin-layout 4) -----
   Zoals de vorige site: [foto] [foto] [gegevens], afgeronde hoeken. */
/* Gewone toestand en aanwijzen precies gelijk: er mag niets verspringen */
.properties-layout-4 .object,
.properties-layout-4 .object:hover {
	padding: 0;
	background: transparent;
	box-shadow: none;
	transform: none;
	margin-bottom: 0 !important;
}

/* Ruimte tussen de woningen zit op de kolom eromheen, niet op het blok */
.properties-layout-4 .row > .col-12:has(> .object) { margin-bottom: 1.75rem; }

.properties-layout-4 .object > .row { margin: 0; }
.properties-layout-4 .object > .row > [class*="col-"],
.properties-layout-4 .object > .row > [class*="col-"] > .row > [class*="col-"] { padding: 0; }
.properties-layout-4 .object .object-image { margin: 0 !important; border-radius: var(--wm-rond); }
.properties-layout-4 .object-image-small .object-image-img,
.properties-layout-4 .object-image-small img { border-radius: var(--wm-rond); }

.properties-layout-4 .object .object-image-img { aspect-ratio: 4 / 3; border-radius: var(--wm-rond); }

.properties-layout-4 .object img.img-cover {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
}

@media (min-width: 768px) {
	/* Rij: foto's (2 delen) en gegevens (1 deel) */
	.properties-layout-4 .object > .row {
		display: grid;
		grid-template-columns: 2.6fr 1fr;
		gap: 14px;
	}

	.properties-layout-4 .object > .row > [class*="col-"] { width: auto; }

	/* Hoofdfoto en eerste kleine foto naast elkaar, even hoog */
	.properties-layout-4 .object > .row > :first-child > .row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		margin: 0;
		height: clamp(320px, 31vw, 520px);
	}

	.properties-layout-4 .object > .row > :first-child > .row > [class*="col-"] { width: auto; height: 100%; }
	.properties-layout-4 .object > .row > :first-child > .row > [class*="col-"] > .row { height: 100%; margin: 0; }
	.properties-layout-4 .object > .row > :first-child > .row > [class*="col-"] > .row > :first-child { height: 100%; margin: 0 !important; }
	.properties-layout-4 .object > .row > :first-child > .row > [class*="col-"] > .row > :nth-child(n+2) { display: none; }

	.properties-layout-4 .object .object-image,
	.properties-layout-4 .object .object-image > a,
	.properties-layout-4 .object .object-image-img {
		height: 100%;
		aspect-ratio: auto;
		overflow: hidden;
	}
}

/* Infovlak rechts */
.properties-layout-4 .object .object-info {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1.5rem, 3vw, 2.75rem);
	border-radius: var(--wm-rond);
	background: var(--wm-lichtgrijs);
}

@media (max-width: 767.98px) {
	.properties-layout-4 .object .object-info { margin-top: 12px; }
}

.properties-layout-4 .object .object-address-line:first-child,
.properties-layout-4 .object .object-address-line:first-child span { font-size: 1.3rem !important; }

.properties-layout-4 .object .object-price { font-size: 1.1rem; font-weight: 400; margin-bottom: 1rem !important; }
.properties-layout-4 .object .object-price-kind-of { display: inline; }

/* Kenmerken als witte labels met een icoontje */
.properties-layout-4 .object .object-features {
	gap: .5rem;
	padding: 0;
	border: 0;
	margin-bottom: 1.5rem !important;
	font-size: .92rem;
	color: var(--wm-inkt);
}

.properties-layout-4 .object .object-feature {
	padding: .35rem .75rem !important;
	border-radius: 8px;
	background: #fff;
}

.properties-layout-4 .object .object-feature-info {
	position: relative;
	padding-left: 1.4rem;
}

.properties-layout-4 .object .object-feature-info::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1rem;
	height: 1rem;
	transform: translateY(-50%);
	background: var(--wm-blauw-donker);
	-webkit-mask: var(--icoon) center / contain no-repeat;
	mask: var(--icoon) center / contain no-repeat;
}

.object .object-feature-woonoppervlakte { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 4l9 7M5.5 9.5V20h13V9.5'/%3E%3Cpath d='M9 20v-5h6v5'/%3E%3C/svg%3E"); }
.object .object-feature-totalekadestraleoppervlakte { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='4' y='4' width='16' height='16' rx='1'/%3E%3Cpath d='M4 10 10 4M4 16 16 4M8 20 20 8M14 20l6-6'/%3E%3C/svg%3E"); }
.object .object-feature-aantalkamers { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='4' y='4' width='16' height='16' rx='1'/%3E%3Cpath d='M12 4v7H4M12 15v5M16 11h4'/%3E%3C/svg%3E"); }

/* Knop "Bekijk object" als blauwe pil */
.properties-layout-4 .object .object-view { margin: 0 !important; }

.properties-layout-4 .object .object-view a {
	display: inline-flex !important;
	padding: .65rem 1.4rem !important;
	border-radius: 999px;
	background: var(--wm-blauw) !important;
	box-shadow: none;
	color: var(--wm-inkt) !important;
	transition: background-color var(--wm-overgang), color var(--wm-overgang);
}

.properties-layout-4 .object .object-view a::after { content: ""; }
.properties-layout-4 .object:hover .object-view a { background: var(--wm-inkt) !important; color: #fff !important; }

/* Zoekveld "Typ een plaats of adres" */
.properties-filter .facetwp-facet-zoeken { margin-bottom: 0 !important; }

.properties-filter .facetwp-facet-zoeken .fs-search {
	padding: 0 1rem !important;
	border: 0 !important;
	border-radius: var(--wm-rond-klein);
	background: #fff !important;
}

.properties-filter .facetwp-facet-zoeken .fs-search input {
	height: 58px;
	border: 0 !important;
	background: transparent !important;
	font-family: var(--wm-font) !important;
	font-size: 1rem;
}

.properties-filter .facetwp-search {
	width: 100%;
	min-height: 56px;
	padding: .75rem 1rem !important;
	border-radius: var(--wm-rond-klein) !important;
}

.properties-filter .facetwp-search-wrap,
.properties-filter .facetwp-input-wrap {
	display: block;
	width: 100%;
}

.properties-filter-default .row > [class*="col-"]:last-child { margin-bottom: 0; }

/* Ruimte (mobiel) tussen foto en gegevens */

@media (max-width: 767.98px) {
	.properties-layout-4 .object .object-image,
	.properties-layout-4 .object > .row > :first-child > .row > [class*="col-"] { margin-bottom: 0 !important; }
}
.properties-filter .facetwp-search-wrap .facetwp-icon { display: none; }

/* ==========================================================================
   10. Woningpagina (plugin, body-klasse "wm-woning")
   ========================================================================== */
.wm-woning .object-detail-adres h1,
.wm-woning .object-detail-adres h1 * {
	text-transform: none !important;
	color: var(--wm-inkt) !important;
}

.wm-woning .object-detail-adres .object-place {
	display: inline-block;
	margin-top: .5rem;
	font-size: var(--fs-label) !important;
	text-transform: uppercase;
	letter-spacing: .24em;
	color: var(--wm-blauw-donker) !important;
}

.wm-woning .object-detail-price { font-size: 1.4rem; font-weight: 500; }

.wm-woning .object-detail-information h2,
.wm-woning .object-detail-information h3 { color: var(--wm-inkt); }

/* Foto's bovenaan: breed (zoals het aanbod) en hoog */
.wm-woning { --foto-hoogte: clamp(440px, 40vw, 760px); }

/* Crème band achter header en bovenkant van de foto's, net als de hero op de homepage */
.wm-woning .site-header:not(.is-scrolled) { background: var(--wm-creme-licht); }

.wm-woning .site-main {
	background: linear-gradient(to bottom, var(--wm-creme-licht) 0, var(--wm-creme-licht) calc(var(--foto-hoogte) * .55 + 70px), var(--wm-papier) 0);
}

/* Geen rij met kleine knopjes (terug, foto's, brochure, ...) boven de foto's:
   de foto's beginnen direct onder de header */
.wm-woning .object-detail-extra { display: none !important; }
.wm-woning .object-detail-photos { padding-top: 1rem; }

/* Adres en prijs: zoals de koppen op de homepage */
.wm-woning .object-detail-header { padding-bottom: 1rem !important; }

.wm-woning .object-detail-adres h1 {
	font-size: var(--fs-h1) !important;
	line-height: 1.05;
	margin-bottom: .5rem;
}

.wm-woning .object-detail-adres .object-zipcode {
	margin-right: .5rem;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--wm-grijs);
}

.wm-woning .object-detail-price {
	margin-top: 1rem;
	font-size: var(--fs-intro) !important;
	font-weight: 400 !important;
	color: var(--wm-inkt);
}

.wm-woning .object-detail-price .object-price-kind-of { color: var(--wm-grijs); }

/* Kopjes (Omschrijving, Kenmerken, Media, Contact) met het blauwe lijntje */
.wm-woning .object-detail-title {
	font-size: var(--fs-h3) !important;
	margin-bottom: 1.5rem !important;
}

.wm-woning .object-detail-title::after {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	margin-top: .7em;
	background: var(--wm-blauw);
}

.wm-woning .object-detail-description { font-size: 1.05rem; line-height: 1.75; }

/* Vervaging onder ingeklapte tekst en kenmerken: naar het gebroken wit van de pagina */
.wm-woning .object-detail-features .object-detail-features-small::after,
.wm-woning .object-detail-information .object-detail-description-small::after {
	background: linear-gradient(to bottom, rgba(255, 252, 246, 0) 0, var(--wm-papier) 100%) !important;
	filter: none !important;
}

/* Persoonlijk blok onderaan (patroon "Woningpagina: persoonlijk contact") */
.wm-woning-extra { margin-top: var(--wm-sectie); }
.wm-woning-contact .wp-block-image { max-width: 420px; }

.wm-woning .object-detail-photos > .container { max-width: 1560px; }

.wm-woning .object-detail-photo-large img { height: var(--foto-hoogte) !important; }

.wm-woning .object-detail-photo-medium img,
.wm-woning .object-detail-photo-small img { height: calc((var(--foto-hoogte) - .5rem) / 2) !important; }

.wm-woning .object-detail-photo img {
	width: 100% !important;
	object-fit: cover;
	border-radius: var(--wm-rond-klein);
}

@media (max-width: 767.98px) {
	.wm-woning { --foto-hoogte: 300px; }
}

/* Knopjes (foto's, kaart, delen) en tabs in de huisstijl */
.wm-woning .object-detail-extra-li a,
.wm-woning .object-detail-extra-li > *,
.wm-woning .object-detail-navigation a,
.wm-woning .list-object-navigation a {
	border-radius: 999px !important;
	background: var(--wm-lichtgrijs) !important;
	color: var(--wm-inkt) !important;
}

.wm-woning .object-detail-photos img { border-radius: var(--wm-rond-klein); }

.wm-woning .object-detail-extra-li a:hover,
.wm-woning .object-detail-navigation a:hover {
	background: var(--wm-blauw) !important;
	color: var(--wm-inkt) !important;
}

.wm-woning .object-detail-description-more,
.wm-woning .object-detail-features-more,
.wm-woning .object-detail-photos-more {
	border: 0 !important;
	box-shadow: inset 0 -2px 0 var(--wm-blauw);
	padding: .3rem 0 !important;
	font-weight: 500;
	color: var(--wm-inkt) !important;
	background: none !important;
}

.wm-woning .object-detail-contact {
	border: 0 !important;
	border-radius: var(--wm-rond);
	background: var(--wm-creme) !important;
}

.wm-woning .object-detail-contact .btn,
.wm-woning .contact-info-appointment a,
.wm-woning .contact-info-appointment button {
	border-radius: 999px !important;
	background: var(--wm-blauw) !important;
	border-color: var(--wm-blauw) !important;
	color: var(--wm-inkt) !important;
	font-weight: 500;
}

.wm-woning .object-detail-contact .btn:hover,
.wm-woning .contact-info-appointment a:hover {
	background: var(--wm-inkt) !important;
	color: #fff !important;
}

.wm-woning .object-detail-related {
	background: var(--wm-lichtgrijs);
	padding: var(--wp--preset--spacing--50) 0;
	margin-top: var(--wp--preset--spacing--50);
}


/* ==========================================================================
   11. Formulieren (WPForms)
   ========================================================================== */
.wpforms-container .wpforms-field-label {
	font-weight: 500 !important;
	color: var(--wm-inkt) !important;
	font-size: 1rem !important;
}

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container select,
.wpforms-container textarea {
	font-family: var(--wm-font) !important;
	font-size: 1.05rem !important;
	border: 1px solid #cfd7d9 !important;
	border-radius: 0 !important;
	padding: .75rem 1rem !important;
	height: auto !important;
	background: #fff !important;
	box-shadow: none !important;
}

.wpforms-container .iti input[type="tel"] { padding-left: 56px !important; }

.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
	border-color: var(--wm-blauw-donker) !important;
	box-shadow: 0 0 0 3px rgba(98, 196, 215, .3) !important;
}

.wpforms-container button[type="submit"],
.wpforms-container .wpforms-submit {
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--wm-blauw) !important;
	color: var(--wm-inkt) !important;
	font-family: var(--wm-font) !important;
	font-weight: 500 !important;
	font-size: 1rem !important;
	padding: .9rem 1.9rem !important;
	height: auto !important;
}

.wpforms-container button[type="submit"]:hover { background: var(--wm-inkt) !important; color: #fff !important; }


/* ==========================================================================
   12. Footer
   ========================================================================== */

/* Voorkant van het visitekaartje als rand: lijntekening op blauw */
.wm-footer__tekening {
	height: 200px;
	background: #64c3d8 url("assets/img/tekening-strook.png") center bottom / auto 100% repeat-x;
	overflow: hidden;
}

/* De strook staat als achtergrond (over de volle breedte), het losse plaatje is niet nodig */
.wm-footer__tekening img { display: none; }

/* Eindigt de pagina al met de tekening (afsluiter), dan geen tweede strook */
.site-main:has(.entry-content > .wm-cta:last-child) + .site-footer .wm-footer__tekening { display: none; }

.wm-footer__tekening img {
	width: min(623px, 100%);
	height: auto;
}

/* Achterkant van het visitekaartje: crème met blauwe en donkere tekst */
.site-footer {
	background: var(--wm-creme);
	color: var(--wm-inkt);
	font-size: 1rem;
	padding-bottom: 1rem;
}

.site-footer a { color: var(--wm-inkt); text-decoration: none; }
.site-footer a:hover { color: var(--wm-blauw-donker); }
.site-footer address { font-style: normal; margin-bottom: .75rem; }

.wm-footer__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr .8fr 1fr;
	gap: 2.5rem;
	padding-top: clamp(3.5rem, 7vw, 5.5rem);
	padding-bottom: 3rem;
}

@media (max-width: 991.98px) { .wm-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .wm-footer__grid { grid-template-columns: 1fr; } }

.wm-footer__logo img { width: 220px; height: auto; }

.wm-footer__slogan {
	max-width: 17rem;
	margin: 1.25rem 0 1.5rem;
	font-size: 1.15rem;
	font-weight: 500;
	line-height: 1.4;
}

.wm-footer__funda {
	display: inline-flex;
	align-items: center;
	gap: .9rem;
	font-size: .85rem;
	line-height: 1.3;
}

.wm-footer__score {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	border: 2px solid var(--wm-blauw-donker);
	color: var(--wm-blauw-donker);
	font-size: 1.15rem;
	font-weight: 600;
}

.wm-footer__titel {
	margin-bottom: 1rem;
	font-size: var(--fs-label);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .24em;
	color: var(--wm-blauw-donker);
}

.wm-footer__lijst { list-style: none; padding: 0; margin: 0; }
.wm-footer__lijst li { margin-bottom: .35rem; }
.wm-footer__klein { font-size: .92rem; color: var(--wm-grijs); }

.wm-footer__social {
	display: flex;
	gap: .6rem;
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
}

.wm-footer__social a {
	position: relative;
	display: block;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--wm-blauw);
	transition: background-color var(--wm-overgang);
}

.wm-footer__social a:hover { background: var(--wm-inkt); }

.wm-footer__social svg {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	transform: translate(-50%, -50%);
}

.wm-footer__social svg path,
.wm-footer__social svg [class^="svg-"] { fill: var(--wm-inkt) !important; }
.wm-footer__social a:hover svg path { fill: #fff !important; }

/* Keurmerken in hun eigen kleuren */
.wm-footer__keurmerken { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }

.wm-footer__keurmerk svg,
.wm-footer__keurmerk img {
	height: 40px;
	width: auto;
	max-width: 110px;
	transition: transform var(--wm-overgang);
}

/* NVM met kroon is een staand logo */
.wm-footer__keurmerk--nvm-koninklijk svg,
.wm-footer__keurmerk--nvm-koninklijk img { height: 62px; }

.wm-footer__keurmerk a:hover svg,
.wm-footer__keurmerk a:hover img { transform: translateY(-2px); }

.wm-footer__registratie {
	padding-top: 1.25rem;
	border-top: 1px solid rgba(47, 62, 70, .12);
	font-size: .85rem;
	color: var(--wm-grijs);
}

/* Copyright-balk van de plugin */
.footer-copyright {
	background: var(--wm-creme);
	color: var(--wm-grijs);
	font-size: .85rem;
}

.footer-copyright a { color: var(--wm-grijs); }


/* ==========================================================================
   13. Animatie
   ========================================================================== */
.wm-infaden {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .8s ease, transform .8s ease;
}

.wm-infaden.is-zichtbaar {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.wm-hero__stempel-tekst { animation: none; }

	/* Het gifje staat stil: toon de eerste afbeelding (logo) */
	.wm-haarlem__animatie img { content: url("assets/img/illustratie-haarlem.jpg"); }
}