/* CW Kozijnen: gedrag rondom de Elementor-opbouw.
   Haakjes zijn data-attributen (data-cw, data-cw-pagina, data-cw-anker, data-cw-icon) die op de
   elementen in Elementor staan. Alle opmaak zelf zit in Elementor. */

body {
	background: #EDF0F1;
	font-family: Barlow, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

/* ---------- Particulier / zakelijk ----------
   Twee aparte pagina's (/ en /zakelijk/); de schakelaar in de groene balk
   toont welke actief is. */
[data-cw="toggle-p"] { background: #0c0d0c !important; color: #fff !important; }
[data-cw="toggle-p"] a, [data-cw="toggle-z"] a { color: inherit !important; }
body:has([data-cw-pagina="zakelijk"]) [data-cw="toggle-z"] { background: #0c0d0c !important; color: #fff !important; }
body:has([data-cw-pagina="zakelijk"]) [data-cw="toggle-p"] { background: transparent !important; color: #0c0d0c !important; }

/* ---------- Header ---------- */
.elementor-location-header { position: sticky; top: -38px; z-index: 50; margin-bottom: -104px; }
.admin-bar .elementor-location-header { top: -6px; }
[data-cw="navbar"] { transition: background-color .3s ease, backdrop-filter .3s ease; }
body.cw-scrolled [data-cw="navbar"] { background-color: rgba(12,13,12,.94) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
[data-cw="nav-in"] { transition: min-height .3s ease; }
[data-cw="logo"] { transition: width .3s ease; }
body.cw-scrolled [data-cw="nav-in"] { min-height: 76px !important; }
body.cw-scrolled [data-cw="logo"] { width: 131px !important; margin-bottom: 0 !important; }
[data-cw="burger"] { display: none !important; }
@media (max-width: 1199px) {
	[data-cw="nav"], [data-cw="btn-service"] { display: none !important; }
	[data-cw="burger"] { display: flex !important; }
}
@media (max-width: 767px) {
	.elementor-location-header { margin-bottom: -80px; }
	body.cw-scrolled [data-cw="nav-in"] { min-height: 60px !important; }
	body.cw-scrolled [data-cw="logo"] { width: 103px !important; }
}

/* Service-knop: schuine witte omlijning */
[data-cw="btn-service"] { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,0 94,100 0,100' fill='none' stroke='white' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important; }
[data-cw="btn-service"]:hover { background-color: rgba(255,255,255,.12) !important; }

/* Groen accent in koppen en labels (Elementor bewaart geen inline kleur op <span>) */
[data-cw="accent"] span { color: #8DC21F; }

/* Sticky balken direct onder de header; --cw-header-h zet cw-home.js */
[data-cw="modebar"] { top: var(--cw-header-h, 76px) !important; transition: top .3s ease; }

/* Mobiel menu */
body:not(.elementor-editor-active) [data-cw="menu"] { display: none !important; }
body.cw-menu-open [data-cw="menu"] { display: flex !important; }
body.cw-menu-open { overflow: hidden; }
/* In de Elementor-editor staat het menu als gewoon blok onder de header, zodat het bewerkbaar is. */
.elementor-editor-active [data-cw="menu"] { position: relative !important; inset: auto !important; min-height: 0 !important; }
.elementor-editor-active .elementor-location-header { position: relative; top: auto; margin-bottom: 0; }

/* ---------- Hero ----------
   Donker vlak met schuine lijnen; de kaarten steken via een negatieve marge
   uit in de sectie eronder. */
[data-cw="hero"] { background: #0c0d0c url(hero-bg.svg) 50% 100% / cover no-repeat !important; }
[data-cw="hero-kaart"] { transition: transform .25s; cursor: pointer; }
[data-cw="hero-kaart"]:hover { transform: translateY(-4px); }

/* ---------- Tegels ---------- */
[data-cw="tegel"] img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
[data-cw="tegel"]:hover img { transform: scale(1.03); }
[data-cw="tegel"] [data-cw="meer"] { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0 !important; transition: max-height .4s ease, opacity .3s ease, margin-top .4s ease; }
[data-cw="tegel"]:hover [data-cw="meer"] { max-height: 60px; opacity: 1; margin-top: 16px !important; }

/* ---------- Showroom-foto schuift in beeld ---------- */
[data-cw="band-img"] { transition: left 1.1s cubic-bezier(.2,.7,.2,1), width 1.1s cubic-bezier(.2,.7,.2,1), clip-path 1.1s cubic-bezier(.2,.7,.2,1); }
body:not(.elementor-editor-active) [data-cw="band"]:not(.cw-in) [data-cw="band-img"] { left: 200px !important; width: calc(100% - 200px) !important; clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%) !important; }

/* ---------- FAQ (native accordion) ----------
   Plus/min-blokje rechts van de vraag. */
[data-cw="faq"] summary { list-style: none; cursor: pointer; display: flex !important; align-items: center; justify-content: space-between; gap: 20px; }
[data-cw="faq"] summary::-webkit-details-marker { display: none; }
[data-cw="faq"] summary::after { content: "+"; flex: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 32px; background: #1d201d; color: #8DC21F; font-size: 20px; line-height: 1; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
[data-cw="faq"] details[open] > summary::after { content: "\2212"; }

/* Offerteformulier: stap 2 (contactgegevens) verschijnt na "Doorgaan" */
body:not(.elementor-editor-active) form:not(.cw-stap-2) [data-cw="stap-2"] { display: none !important; }
form.cw-stap-2 [data-cw="doorgaan"] { display: none !important; }

/* Formuliervelden */
.e-form-base input:focus { border-color: #8DC21F !important; background: #fff !important; }

@media (prefers-reduced-motion: reduce) {
	[data-cw] , [data-cw] * { transition: none !important; }
}

/* ---------- Iconen ----------
   <div data-cw-icon="naam"> kleurt het icoon uit assets/icons/ met de tekstkleur
   van het element (standaard groen). */
[data-cw-icon] { background-color: #8DC21F; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; flex: none; }
[data-cw-icon="award"] { -webkit-mask-image: url(icons/award.svg); mask-image: url(icons/award.svg); }
[data-cw-icon="moersleutel"] { -webkit-mask-image: url(icons/moersleutel.svg); mask-image: url(icons/moersleutel.svg); }
[data-cw-icon="huis"] { -webkit-mask-image: url(icons/huis.svg); mask-image: url(icons/huis.svg); }
[data-cw-icon="pin"] { -webkit-mask-image: url(icons/pin.svg); mask-image: url(icons/pin.svg); }
[data-cw-icon="klok"] { -webkit-mask-image: url(icons/klok.svg); mask-image: url(icons/klok.svg); }
[data-cw-icon="vink"] { -webkit-mask-image: url(icons/vink.svg); mask-image: url(icons/vink.svg); }
[data-cw-icon="telefoon"] { -webkit-mask-image: url(icons/telefoon.svg); mask-image: url(icons/telefoon.svg); }
[data-cw-icon="mail"] { -webkit-mask-image: url(icons/mail.svg); mask-image: url(icons/mail.svg); }
[data-cw-icon="schuifwand"] { -webkit-mask-image: url(icons/schuifwand.svg); mask-image: url(icons/schuifwand.svg); }
[data-cw-icon="zonwering"] { -webkit-mask-image: url(icons/zonwering.svg); mask-image: url(icons/zonwering.svg); }
[data-cw-icon="overkapping"] { -webkit-mask-image: url(icons/overkapping.svg); mask-image: url(icons/overkapping.svg); }
[data-cw-icon="nieuwbouw"] { -webkit-mask-image: url(icons/nieuwbouw.svg); mask-image: url(icons/nieuwbouw.svg); }
[data-cw-icon="renovatie"] { -webkit-mask-image: url(icons/renovatie.svg); mask-image: url(icons/renovatie.svg); }
[data-cw-icon="kozijn"] { -webkit-mask-image: url(icons/kozijn.svg); mask-image: url(icons/kozijn.svg); }
/* Google-logo in kleur, geen masker */
[data-cw-icon="google"] { background: url(icons/google.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }

/* Merkenbalk: op laptopschermen iets kleinere logo's zodat ze op één regel passen */
@media (min-width: 768px) and (max-width: 1439px) {
	[data-cw="merken"] { column-gap: 40px !important; }
	[data-cw="merken"] img { height: 22px !important; }
}