/* MLS Renovatie: basisstijl naast Elementor.
   Kleuren en lettertypes komen uit de globale variabelen van Elementor (--ink, --navy, --display, ...),
   de opmaak van elk onderdeel uit de globale classes. Hier staat alleen wat Elementor niet zelf kan:
   de pagina zelf, regels voor kind-elementen, pseudo-elementen (bolletjes, vinkjes, iconen) en het rustig verschijnen. */

:root {
	--radius: 10px;
	--shadow: 0 1px 2px rgba(21,33,44,.06), 0 18px 40px -22px rgba(21,33,44,.35);
	--gutter: max(18px, env(safe-area-inset-left, 0px));
	--header-h: 72px;
	--display-stack: var(--display, "Newsreader"), Georgia, "Times New Roman", serif;
	--body-stack: var(--body, "Hanken Grotesk"), "Segoe UI", system-ui, -apple-system, sans-serif;
	--mono-stack: var(--mono, "IBM Plex Mono"), ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* pagina */
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; background: var(--porcelain, #f6f8f8); color: var(--ink, #15212c); font: 400 1.0625rem/1.65 var(--body-stack); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 4px; }
/* wint van de focusring uit Hello en Elementor; zonder border-radius, anders worden pilknoppen hoekig */
.elementor :is(a, button, summary, [tabindex]):focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
/* de overslaan-link staat buiten .elementor; de witte rand rond knoppen komt ook uit Hello */
.skip-link.screen-reader-text:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 4px; box-shadow: none; }
.elementor .menu-btn:focus-visible { box-shadow: none; }
/* Elementor geeft globale classes de hoverstijl ook bij :focus-visible; het origineel alleen bij :hover */
.elementor .btn-primary:focus-visible:not(:hover) { background-color: var(--navy); transform: none; }
.elementor .btn-accent:focus-visible:not(:hover) { background-color: var(--water); transform: none; }
.elementor .btn-light:focus-visible:not(:hover) { background-color: var(--white); }
.elementor .btn-wa:focus-visible:not(:hover) { background-color: var(--wa-green); }
.elementor .btn-ghost:focus-visible:not(:hover) { border-color: var(--line); }
/* Elementor zet html op soepel scrollen; het origineel springt direct (skiplinks, showroom overslaan) */
html:root { scroll-behavior: auto; }
.page-content, .site-main { max-width: none; margin: 0; padding: 0; }
/* binnenmarge zoals het origineel: met viewport-fit=cover nooit onder de notch (de class wrap heeft een vaste 18px) */
.elementor .wrap, .elementor .site-header-row { padding-inline-start: var(--gutter); padding-inline-end: max(18px, env(safe-area-inset-right, 0px)); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--porcelain); }

/* links in lopende tekst */
.elementor .e-paragraph-base a, .elementor .e-heading-base a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.elementor .e-paragraph-base a:hover { color: var(--navy); }

/* tekst in blokken */
.elementor .prose p { color: var(--muted); }
.elementor .prose .e-heading-base + p { margin-top: 4px; }
.elementor .card p { color: var(--muted); }
.elementor .card .eyebrow { margin-bottom: 4px; }
.elementor .step p:not(.step-n) { color: var(--muted); }
.elementor .crumbs a, .elementor .crumbs a:hover { color: var(--muted); }
/* lange woorden in een kop mogen afbreken in plaats van de grid op te rekken */
.elementor .page-head .wrap > *, .elementor .hero-copy > *, .elementor .prose > * { min-width: 0; }
.elementor :is(h1, h2, h3) { text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.elementor .em-accent em { font-style: italic; color: var(--navy); }
.elementor .promise-item:last-child { border-bottom: 1px solid var(--line); }
.elementor .promise-v strong { color: var(--ink); font-weight: 600; }
.elementor .cta-band .e-heading-base { color: #fff; }
.elementor .cta-band p { color: #c6d3dc; }
.elementor .cta-band a:not(.btn) { color: #fff; }
.elementor .review-cite a { display: inline-block; margin-top: 6px; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.elementor .style-cta .btn { width: fit-content; }
.elementor .photo-block + .photo-block { margin-top: clamp(36px, 5vw, 56px); }

/* wisselpunten van het origineel die Elementor niet kent (alleen tablet 900px en mobiel 700px):
   split, stappen, cta-band en promo klappen pas onder 861px om, de feitenlijst onder 561px, projectkaarten onder 601px */
@media (min-width: 860.02px) and (max-width: 900px) {
	.elementor .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.elementor .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.elementor .cta-band { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
	.elementor .promo-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
	.elementor .promo-visual { order: 0; transform: rotateX(0deg) rotateY(0deg) rotateZ(-1.2deg); }
	.elementor .promo-card .btn-lg { width: auto; }
}
@media (min-width: 561px) and (max-width: 700px) { .elementor .promise-item { grid-template-columns: 9.5rem 1fr; gap: 18px; } }
@media (min-width: 601px) and (max-width: 700px) { .elementor .project, .elementor .project-wide, .elementor .project-quarter { grid-column: span 6; } }

/* foto's */
.elementor .hero-photo .tag { position: absolute; left: 14px; bottom: 14px; }
.elementor .project .e-image-base { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.elementor .project:hover .e-image-base { transform: scale(1.03); }
.elementor .project .tag { position: absolute; left: 12px; top: 12px; }
.elementor .promo-visual .e-image-base { display: block; width: 100%; height: auto; }

/* labels, bolletjes en vinkjes */
.elementor .tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.elementor .facts-item::before { content: ""; position: absolute; left: 0; top: .35em; width: 10px; height: 10px; border-radius: 2px; background: var(--water); box-shadow: inset 0 0 0 1.5px var(--navy); }
.elementor .promo-item::before { content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.elementor .bullet-item::before { content: ""; position: absolute; left: .2em; top: .68em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* veelgestelde vragen (Elementor-accordeon) */
.elementor .faq-item > summary { cursor: pointer; list-style: none; padding: 16px 28px 16px 0; position: relative; }
.elementor .faq-item > summary::-webkit-details-marker { display: none; }
.elementor .faq-item > summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font: 400 1.5rem/1 var(--body-stack); color: var(--navy); }
.elementor .faq-item[open] > summary::after { content: "\2013"; }
.elementor .faq-item > .e-accordion-item-content-base { padding: 0; }

/* iconen in knoppen */
.elementor .icon-arrow::after,
.elementor .icon-wa::before,
.elementor .icon-plan::before { content: ""; flex: none; width: 1.15em; height: 1.15em; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.elementor .icon-arrow { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.elementor .icon-plan { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3 5h12v6h6v8H3zM3 11h6M9 5v4M14 19v-5'/%3E%3C/svg%3E"); }
/* knopvarianten één trede sterker: op de 404-, zoek- en archiefpagina's laadt Elementor per sjabloon een eigen
   global-classes-bestand (kop, voet, 404) dat .btn herhaalt en zo de varianten uit een eerder bestand overschrijft */
.elementor .btn.btn-primary { background-color: var(--navy); color: var(--white); }
.elementor .btn.btn-wa { background-color: var(--wa-green); color: #fff; }
.elementor .btn.btn-sm { padding: 10px 16px; font-size: .95rem; }
/* daarna de hoverstijl opnieuw, met dezelfde selectors als Elementor, zodat die blijft winnen */
.elementor .btn-primary:hover, .elementor .btn-primary:focus-visible { background-color: var(--navy-deep); color: var(--white); transform: translate3d(0, -1px, 0); }
.elementor .btn-wa:hover, .elementor .btn-wa:focus-visible { background-color: #17633e; color: #fff; }
.elementor .icon-wa { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.1 5.1 0 0 0 1.1 2.7 11.6 11.6 0 0 0 4.4 3.9c1.6.7 2.3.8 3.1.6a2.7 2.7 0 0 0 1.8-1.2 2.2 2.2 0 0 0 .2-1.3c-.1-.1-.2-.2-.5-.3Z'/%3E%3C/svg%3E"); }

/* kop en voet
   Theme Builder-onderdelen: kop (post 209), voet (post 210), 404 (post 211). De opmaak zit in de classes site-*,
   menu-btn en mobile-nav; hier alleen wat classes niet kunnen: plakken, het wisselpunt van 1260px, kind-selectors,
   aria-current en de iconen. */
.elementor-location-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; }
.admin-bar .elementor-location-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .elementor-location-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .elementor-location-header { top: 0; } }
.elementor .site-header { -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
.elementor .site-header .site-nav a[aria-current="page"] { color: var(--navy); box-shadow: inset 0 -2px 0 var(--navy); border-radius: 0; }
.elementor .site-header .site-nav a.site-nav-planner[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--navy); border-radius: 999px; }
/* de ronde knoppen zijn blokken (e-con): hun ::before krijgt van Elementor position:absolute voor de achtergrondlaag */
.elementor .site-icon-btn::before { position: static; width: 20px; height: 20px; }
.elementor .menu-btn::before { content: ""; position: static; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
/* de iconen en opsommingstekens zijn een (gemaskeerde) achtergrond: zonder deze regel laat de browser ze bij het printen weg */
@media print {
	.elementor .icon-arrow::after,
	.elementor .icon-wa::before,
	.elementor .icon-plan::before,
	.elementor .site-icon-btn::before,
	.elementor .menu-btn::before,
	.elementor .bullet-item::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	/* een knopicoon is een leeg blok (in het origineel een svg): zonder dit snijdt de printer het op een paginagrens door */
	.elementor .icon-arrow::after,
	.elementor .icon-wa::before,
	.elementor .icon-plan::before { break-inside: avoid; }
}
.elementor .menu-btn { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
/* taalknop: de shortcode [mls_lang] in het tool-vak MLS-TOOL:lang zet hier een <a class="lang-switch"> neer */
.elementor .site-header-cta .mls-tool,
.elementor .site-header-cta .mls-tool div { display: flex; align-items: center; min-width: auto; }
/* geen taalknop (bv. op de 404-pagina): het lege vak neemt geen plek in */
.elementor .site-header-cta .mls-tool:not(:has(a)) { display: none; }
.elementor .site-header .lang-switch { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font: 600 .85rem/1 var(--mono-stack); letter-spacing: .06em; text-decoration: none; }
.elementor .site-header .lang-switch:hover { border-color: var(--navy); color: var(--ink); }
.elementor .site-header .menu-btn,
.elementor .site-header .mobile-nav { display: none; }
@media (max-width: 1260px) {
	.elementor .site-header .site-nav { display: none; }
	.elementor .site-header .site-header-cta { margin-left: auto; }
	.elementor .site-header .site-header-cta .btn-primary { display: none; }
	.elementor .site-header .menu-btn { display: inline-grid; }
	.elementor .site-header .mobile-nav { display: block; }
}
@media (max-width: 430px) { .elementor .site-header .site-header-cta .site-icon-btn { display: none; } }
/* het mobiele menu blijft dicht tot mls.js het heeft overgenomen (zonder JavaScript staat het open) */
.js body:not(.elementor-editor-active) .elementor .site-header .mobile-nav:not([data-ready]) { display: none; }

/* overslaan-link van Hello Elementor (doel #content zet mls-site.php op de pagina-inhoud) */
.skip-link.screen-reader-text:focus { position: absolute; left: 12px; top: 8px; z-index: 100; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; overflow: visible; padding: 8px 12px; background: var(--white); color: var(--link); font: inherit; text-decoration: underline; }

.elementor .site-footer .e-paragraph-base a { color: #e7eef3; text-decoration: none; }
.elementor .site-footer .e-paragraph-base a:hover { color: #fff; text-decoration: underline; }
.elementor .site-footer .site-footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .elementor .site-footer .site-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .elementor .site-footer .site-footer-grid { grid-template-columns: 1fr; } }
.elementor .site-footer { padding-block-end: calc(40px + env(safe-area-inset-bottom, 0px)); }
/* zwevende WhatsApp-knop, alleen op mobiel */
.elementor .btn.site-wa-float { display: none; }
@media (max-width: 700px) { .elementor .btn.site-wa-float { display: inline-flex; position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; } }

/* secties verschijnen rustig zodra ze in beeld komen (niet in de editor) */
.js body:not(.elementor-editor-active) .reveal:not(.is-in) { opacity: .001; transform: translateY(18px); }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
	.js body:not(.elementor-editor-active) .reveal:not(.is-in) { opacity: 1; transform: none; }
}