/* ==========================================================================
   Amazing FD — globale layout: header + footer. Waarden uit DESIGN-SYSTEM.md.
   Content-band 1322px (marges 299); header/hero-band ~1480px (marges 220).
   ========================================================================== */

/* ==========================  HEADER (140px)  ============================= */
/* Sticky: volledige header (topbalk + navbalk) scrollt mee bovenaan. */
.site-header { position: sticky; top: 0; z-index: 100; }

/* -- Topbalk (39px, goud) -- */
.site-header__topbar { background: var(--amazing-accent); color: #fff; }
.site-header__topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 39px;
}
.site-header__reviews { display: flex; align-items: center; }
/* Reviews-badge: horizontale rij in de topbalk (logo · sterren · score · aantal) */
.site-header__reviews .sellabees-greviews {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-family: var(--amazing-font-body);
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
}
.site-header__reviews .sellabees-greviews:hover { opacity: .9; color: #fff; }
.site-header__reviews .sellabees-greviews__logo { display: inline-flex; }
/* Wit "Google Reviews"-lockup (twee regels) uit het ontwerp; asset is al wit. */
.site-header__reviews .sellabees-greviews__logo img { height: 22px; width: auto; display: block; }
.site-header__reviews .sellabees-greviews__score { font-weight: 400; }
.site-header__reviews .sellabees-greviews__stars { display: inline-flex; align-items: center; gap: 1px; }
.site-header__reviews .sellabees-greviews__stars img { height: 15px; width: 15px; display: block; }
.site-header__reviews .sellabees-greviews__count { font-weight: 700; text-transform: uppercase; text-decoration: underline; }

/* Rechthoekige tab, vult de volledige topbalk-hoogte en sluit aan op de rechtermarge. */
.site-header__werkenbij {
	align-self: stretch;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--amazing-accent-2);
	color: #fff;
	font-family: var(--amazing-font-body);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	padding: 0 24px;
	border: 0;
}
.site-header__werkenbij:hover { opacity: .9; color: #fff; }
.site-header__werkenbij-ico { flex: 0 0 auto; display: inline-flex; line-height: 0; }
.site-header__werkenbij-ico svg { display: block; width: 20px; height: 20px; }

/* -- Navbalk (101px, #292929) -- */
.site-header__bar { background: var(--amazing-nav); }
.site-header__bar-inner {
	display: flex;
	align-items: center;
	gap: 40px;
	min-height: 101px;
}
/* Logo hangt vanaf de bovenkant van de navbalk (sluit aan op de topbalk) en
   vult vrijwel de volledige balkhoogte — zo 'zakt' het in het menu zoals in het ontwerp. */
.site-header__logo { margin-right: auto; align-self: flex-start; display: inline-flex; align-items: flex-start; }
.site-header__logo img { width: auto; height: 96px; }

.site-nav__menu {
	display: flex;
	align-items: center;
	gap: 34px;
	list-style: none;
	margin: 0; padding: 0;
	font-family: var(--amazing-font-body);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0;
}
.site-nav__menu > li { position: relative; }
.site-nav__menu > li > a { color: #fff; display: inline-flex; align-items: center; gap: 6px; }
/* Dropdown-chevron op menu-items met kinderen */
.site-nav__menu > li.menu-item-has-children > a::after,
.site-nav__menu > li.has-dropdown > a::after {
	content: "";
	width: 8px; height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s;
}
.site-nav__menu > li:hover > a { opacity: .85; }

/* Submenu (dropdown) */
.site-nav__menu .sub-menu {
	position: absolute;
	top: 100%; left: 0;
	min-width: 220px;
	background: var(--amazing-nav);
	list-style: none;
	margin: 0; padding: 10px 0;
	border-top: 3px solid var(--amazing-accent);
	box-shadow: 0 16px 40px rgba(0,0,0,.4);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .2s, transform .2s, visibility .2s;
	z-index: 40;
}
.site-nav__menu > li:hover .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.site-nav__menu .sub-menu a { display: block; padding: 9px 22px; color: #fff; font-size: 13px; }
.site-nav__menu .sub-menu a:hover { background: rgba(255,255,255,.06); color: var(--amazing-accent); opacity: 1; }

.site-header__cta { flex: 0 0 auto; }

.site-header__burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.site-header__burger span { display: block; width: 26px; height: 2px; margin: 5px 0; background: #fff; transition: .2s; }

/* ==========================  FOOTER  ==================================== */
.site-footer { background: var(--amazing-footer); color: #fff; }

/* -- Offerte-CTA-band (#242424) -- */
.footer-cta {
	background: var(--amazing-bg);
	display: grid;
	grid-template-columns: minmax(0, 949fr) minmax(0, 971fr);
	align-items: center;
	overflow: visible;
}
/* Beeld = uitgesneden schoonmaker (transparante PNG). Geen eigen achtergrond →
   de sectie-achtergrond (#242424) schijnt door; contain + links-onder verankerd
   zodat de uitsnede niet wordt bijgesneden. */
.footer-cta__media { align-self: stretch; min-height: 460px; background: transparent; position: relative; }
.footer-cta__media img { width: 100%; height: 100%; object-fit: contain; object-position: left bottom; display: block; }

/* Decoratieve sparkles rond de uitsnede (posities uit Figma). */
.footer-cta__sparkles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.footer-cta__sparkle { position: absolute; color: #fff; transform: translate(-50%, -50%); }
.footer-cta__sparkle--1 { width: 56px; height: 56px; left: 7%;  top: 0%; }
.footer-cta__sparkle--2 { width: 93px; height: 93px; left: 50%; top: 41%; }
.footer-cta__sparkle--3 { width: 44px; height: 44px; left: 99.5%; top: 91%; }
.footer-cta__body {
	padding: 72px clamp(24px, 5vw, 96px) 72px clamp(32px, 4vw, 72px);
	max-width: 760px;
}
.footer-cta__title { font-size: clamp(34px, 2.6vw, 50px); line-height: 1.18; margin-bottom: 18px; }
.footer-cta__text { font-size: 16px; line-height: 1.31; margin-bottom: 22px; max-width: 620px; }
.footer-cta__usps { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; }
.footer-cta__usps li { display: flex; align-items: center; gap: 14px; font-style: italic; font-weight: 500; font-size: 18px; line-height: 1.44; }
.usp-check { flex: 0 0 24px; line-height: 0; }
.usp-check svg { display: block; }

/* -- Link-kolommen (#161616) -- */
.footer-main { background: var(--amazing-footer); }
.footer-main__cols {
	display: grid;
	grid-template-columns: 1.25fr 1fr 1fr 1fr;
	gap: 40px;
	padding-block: 72px 40px;
}
.footer-col__heading { font-family: var(--amazing-font-heading); font-weight: 400; font-size: 25px; color: #fff; margin-bottom: 22px; }
.footer-menu { list-style: none; margin: 0; padding: 0; }
.footer-menu li { line-height: 34px; }
.footer-menu a { color: #fff; font-size: 16px; }
.footer-menu a:hover { color: var(--amazing-accent); opacity: 1; }

.footer-contact { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 16px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.5; }
.footer-contact a { color: #fff; }
.footer-contact a:hover { color: var(--amazing-accent); opacity: 1; }
.footer-contact__ico { flex: 0 0 20px; display: inline-flex; justify-content: center; color: var(--amazing-accent); margin-top: 3px; line-height: 0; }
.footer-contact__ico svg { display: block; }

.footer-social { display: flex; gap: 12px; }
.footer-social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px;
	color: var(--amazing-accent);
	transition: color .2s;
}
.footer-social a:hover { color: #fff; opacity: 1; }
.footer-social svg { display: block; width: 100%; height: 100%; }

.footer-col__cta { margin-top: 12px; }

/* -- Colofon (#161616 + divider) -- */
.footer-colophon { background: var(--amazing-footer); border-top: 1px solid rgba(255,255,255,.14); padding-block: 26px; }
.sb-colophon { margin: 0; font-size: 14px; line-height: 1.5; color: #fff; }
.sb-colophon__copyright, .sb-colophon__sellabees { display: block; }
.sb-colophon__sellabees a { color: #fff; }
.sb-colophon__sellabees a:hover { color: var(--amazing-accent); opacity: 1; }

/* ==========================  RESPONSIVE  =============================== */
@media (max-width: 1024px) {
	.footer-cta { grid-template-columns: 1fr; }
	.footer-cta__media { min-height: 320px; }
	.footer-cta__body { padding: 48px clamp(20px,5vw,48px); }
}
@media (max-width: 900px) {
	.site-nav, .site-header__cta { display: none; }
	.site-header__burger { display: block; }
	.footer-main__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
	.footer-main__cols { grid-template-columns: 1fr; }
	.site-header__topbar-inner { min-height: 44px; }
}