/* ==========================================================================
   REKO Raalte — header + footer
   Gemeten waarden: header 168px @1920 (44 topbalk + 124 hoofdbalk),
   144px @1512 (44 + 100), 140px @1440, 138px @1200, 135px @980, 114px @390.
   Omslagpunt desktop/mobiel: 1180/1181px.
   De footerbanden op 1512px: reviews 540px, linkkolommen 404px, balk 57px.
   ========================================================================== */

/* ==========================================================================
   Header
   ========================================================================== */

.reko-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 1000;
	background: var(--reko-white);
}

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

@media screen and (max-width: 782px) {
	.admin-bar .reko-header { top: 46px; }
}

/* De content schuift onder de fixed header door; reko.js houdt de variabele
   bij per breakpoint (ResizeObserver op de header). */
.reko-main {
	margin-top: var(--reko-menu-height);
	transition: margin-top 0.3s ease-in-out;
}

/* Gedeelde binnenbalk: volle breedte met 10% zijmarge, zoals gemeten. */
.reko-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-inline: var(--reko-gutter-x);
}

/* De oude Css/Menu.css zette de zijmarge alleen tussen 1181 en 1410px op 5%
   (`#desktop-menu .et_pb_row { padding-left/right: 5% }`). Daarboven én op de
   mobiele header is het 10%. Stond hier eerder op max-width:1250px zonder
   ondergrens, waardoor ook de mobiele balk 5% kreeg: het logo begon op 390px
   bij x=20 in plaats van de gemeten x=39. */
@media (min-width: 1181px) and (max-width: 1410px) {
	.reko-header__bar { padding-inline: 5%; }
}

/* --- Zichtbaarheid: twee losse headers ---------------------------------- */

.reko-header__desktop { display: none; }
.reko-header__mobile  { display: block; }

@media (min-width: 1181px) {
	.reko-header__desktop { display: block; }
	.reko-header__mobile  { display: none; }
}

/* --- Topbalk ------------------------------------------------------------ */

.reko-header__topbar {
	background: var(--reko-surface-2);
}

.reko-header__topbar .reko-header__bar {
	min-height: 44px;
	padding-block: 0;
}

.reko-header__reviews {
	display: flex;
	align-items: center;
	font-size: 16px;
}

/* De Google-badge is een <a class="sellabees-greviews"> met losse spans voor
   score, sterren en aantal (inc/reviews.php bouwt hem uit de bouwstenen van de
   core; de core zelf zet er nog een logo voor, de oude site niet). De core
   levert geen layout mee en de img's erin zijn display:block, dus zonder deze
   regels stapelt hij verticaal en wordt de topbalk 154px hoog in plaats van 44px.

   Gemeten op live: badge 311x20, alle spans 16px met marge 0 5px — vandaar
   10px tussenruimte — en regelhoogte 20px. */
.reko-header .sellabees-greviews {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--reko-black);
	font-family: var(--reko-font-body);
	font-size: 16px;
	line-height: 20px;
	white-space: nowrap;
}

.reko-header .sellabees-greviews:hover { text-decoration: none; }

.reko-header .sellabees-greviews > span {
	display: inline-flex;
	align-items: center;
}

.reko-header .sellabees-greviews__stars img { height: 17px; width: auto; }

.reko-header .sellabees-greviews__stars { gap: 1px; }

/*
 * Onder 400px valt "op Google" weg; het aantal blijft staan.
 *
 * Hier stond een regel die onder 480px het HELE aantal verborg. Die heeft
 * nooit gewerkt: `.reko-header .sellabees-greviews > span` hierboven is met
 * (0,2,1) specifieker dan `.reko-header .sellabees-greviews__count` (0,2,0) —
 * dat type-deel `span` weegt mee — en een mediaquery voegt geen specificiteit
 * toe. Gemeten op 480, 430, 399, 390 en 360px stond de teller er dus gewoon,
 * inclusief "op Google", met een badge van 307px breed op een venster van 390.
 *
 * Deze selector heeft drie classes (0,3,0) en verslaat die van hierboven wel.
 */
@media (max-width: 399px) {
	.reko-header .sellabees-greviews__count .reko-greviews__bron { display: none; }
}

.reko-header__topnav { margin-left: auto; }

/* -11px rechts: Divi compenseerde met `.et_pb_menu .et-menu { margin-right:
   -11px }` de eigen zijpadding van 11px per menu-item. Css/Menu.css zette die
   padding op 25px maar liet de compensatie staan, waardoor de hele topbalk 11px
   voorbij de 10%-marge liep. Gemeten: het zwarte blok eindigt op 1371px bij een
   marge van 1361px, en alle topbalk-tekst staat exact 11px verder naar rechts. */
.reko-topmenu {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	margin: 0 -11px 0 0;
	padding: 0;
	list-style: none;
}

/* display:flex op de li, anders maakt de list-item-box met de geërfde
   regelhoogte (23.8px) de balk 58px hoog in plaats van 44px. */
.reko-topmenu > li {
	position: relative;
	display: flex;
	align-items: stretch;
}

.reko-topmenu > li > a {
	display: block;
	padding: 15px 25px;
	font-family: var(--reko-font-body);
	font-size: 16px;
	line-height: 14px;
	text-transform: uppercase;
	color: var(--reko-black);
	/* Zonder nowrap breekt "Over REKO" over twee regels en wordt de hele
	   balk 58px in plaats van 44px (15+14+14+15). */
	white-space: nowrap;
}

.reko-topmenu > li > a:hover { text-decoration: none; }

/* Uitklappijl achter items met kinderen. "Container vol?" heeft twee
   subitems; Divi zette daar een chevron uit het ETmodules-icoonfont achter.
   Gemeten: 10x10px, 8px na de tekst. Een 5px vierkant met 2px randen komt
   geroteerd op 9,9px uit. */
.reko-topmenu > li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 8px;
	vertical-align: 3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

/* Laatste item is de zwarte "Container vol?"-blok met uitklap.
   Niet width:100% — als flex-item eist dat alle ruimte op en knijpt het de
   andere items samen. */
.reko-topmenu > li:last-child {
	flex: 0 0 auto;
	min-width: 200px;
	max-width: 240px;
	background: var(--reko-black);
}

.reko-topmenu > li:last-child > a { justify-content: center; }

.reko-topmenu > li:last-child > a { color: var(--reko-white); }

/* Uitklapmenu's in de topbalk: zwart met witte scheidingslijnen. */
.reko-topmenu .sub-menu {
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 999;
	display: flex;
	flex-direction: column;
	min-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--reko-black);
	border-top: 1px solid var(--reko-white);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.reko-topmenu > li:hover > .sub-menu,
.reko-topmenu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.reko-topmenu .sub-menu a {
	display: block;
	padding: 15px 25px;
	color: var(--reko-white);
	font-size: 16px;
	text-transform: uppercase;
	border-bottom: 1px solid var(--reko-white);
}

.reko-topmenu .sub-menu li:last-child a { border-bottom: 0; }

/* --- Hoofdbalk ---------------------------------------------------------- */

.reko-header__main { background: var(--reko-white); }

.reko-header__main .reko-header__bar { padding-block: 12px; }

/* Logo: de HOOGTE volgt uit de kolombreedte, niet uit max-height.
 *
 * In Divi stond het logo in een kolom van 17,7% met min-width 200px, en tot
 * 1760px had de module daarbinnen 30px marge rechts. De afbeelding vult die
 * kolom (width:100%), dus de kolom bepaalt de hoogte:
 *
 *   1512px -> rij 1209,6 -> 17,7% = 214,1 - 30 = 184,1 breed -> 76 hoog
 *             -> hoofdbalk 100 -> header 144  (gemeten 144)
 *   1920px -> rij 1536 -> 271,9, geen marge -> max-width 250 en max-height 100
 *             knijpen naar 242,9x100 -> hoofdbalk 124 -> header 168 (gemeten)
 *   1440px -> 203,9 - 30 = 173,9 -> 71,6 hoog -> header 140 (gemeten)
 *   1200px -> min-width 200 - 30 = 170 -> 70 hoog -> header 138 (gemeten)
 *
 * Eerder stond hier alleen max-height:80px; dat gaf 80px logo en dus 148px
 * header in plaats van 144px, en op 1920px een te klein logo. */
.reko-header__desktop .reko-header__logo {
	flex: 0 0 auto;
	width: 17.7%;
	min-width: 200px;
}

.reko-header__desktop .reko-header__logo > a { display: block; }

/* `width: auto` en niet 100%: met een breedte van 100% naast een max-height
   perst de browser het logo plat zodra de hoogte begrenst. Gemeten vervorming
   1,10x op zowel 1400 als 1700px (lokaal 193x70 en 210,7x80, waar live 170x70 en
   194,2x80 doet). Live zet op de img alleen een max-height en laat de breedte
   vrij; de verhouding is daar constant 2,43. */
.reko-header__desktop .reko-header__logo img {
	width: auto;
	max-width: 250px;
	max-height: 100px;
}

@media (max-width: 1760px) {
	.reko-header__desktop .reko-header__logo > a { margin-right: 30px; }
	.reko-header__desktop .reko-header__logo img { max-height: 80px; }
}

@media (max-width: 1410px) {
	.reko-header__desktop .reko-header__logo img { max-height: 70px; }
}

.reko-header__actions {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-left: auto;
}

/*
 * Het winkelwagenpictogram hoort 11px BINNEN de rijmarge te eindigen, niet
 * gelijk met de rand. Live geeft het icoon `margin: 0 11px`, dus links en rechts
 * evenveel; hier stond die 11px alleen als `gap` ervoor. Gemeten rechterrand van
 * het icoon: live 1319 op 1400px en 1350 op 1512px, lokaal 1330 en 1361 -- steeds
 * 11px te ver naar rechts. De badge stond wel goed (1px).
 *
 * Alleen de desktopheader: onder 1181px staat de mobiele header met zijn eigen
 * icoonmarges, en die klopt in de band 981-1180 al exact.
 */
.reko-header__desktop .reko-header__actions { padding-inline-end: 11px; }

/*
 * Onder 980px zet live nog 6px extra om de hamburger:
 *   @media (max-width:980px) { .et_pb_menu .et_mobile_nav_menu { margin: 0 6px } }
 * bovenop de `margin: 0 11px` van het icoon zelf. Gemeten stond lokaal de
 * hamburger 6px en de winkelwagen 12px te ver naar rechts, met 11px tussenruimte
 * waar live 17px doet. In de band 981-1180 doet live dit NIET, dus deze regel
 * hoort achter een max-width van 980 en niet bij de mobiele header in het
 * algemeen.
 */
@media (max-width: 980px) {
	.reko-header__mobile-main .reko-header__actions {
		gap: 17px;
		padding-inline-end: 6px;
	}
}

/* --- Hoofdmenu ---------------------------------------------------------- */

.reko-menu {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.reko-menu > li { position: relative; }

/* Zijpadding 11px = Divi's standaard menu-item-padding. Css/Menu.css zette die
   pas onder 1410px op 8px. Gemeten tussenruimte op 1512px: 22-23px (dus 11px
   per zijde); met 8px was dat 16-17px en stond het hele menu 24px te smal. */
.reko-menu > li > a {
	display: block;
	padding: 10px 11px;
	font-family: var(--reko-font-body);
	font-size: 16px;
	line-height: 14px;
	text-transform: uppercase;
	color: var(--reko-black);
}

@media (max-width: 1410px) {
	.reko-menu > li > a { padding-inline: 8px; }
}

.reko-menu > li > a:hover { text-decoration: none; }

/* Submenu: wit, geen schaduw, bruine tekst met beige hover — zoals gemeten. */
.reko-menu .sub-menu {
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 999;
	min-width: 260px;
	margin: 0;
	padding: 10px 0 5px;
	list-style: none;
	background: var(--reko-white);
	box-shadow: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.reko-menu > li:hover > .sub-menu,
.reko-menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.reko-menu .sub-menu li { padding-inline: 25px 15px; }

.reko-menu .sub-menu a {
	display: block;
	padding: 10px 0;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--reko-brown);
	border-bottom: 1px solid var(--reko-brown-line);
	transition: background-color 0.3s ease, letter-spacing 0.3s ease;
}

.reko-menu .sub-menu li:last-child a { border-bottom: 0; }

.reko-menu .sub-menu a:hover {
	background: var(--reko-beige);
	letter-spacing: 2px;
	text-decoration: none;
}

/* --- Winkelwagen -------------------------------------------------------- */

.reko-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.reko-cart__icon {
	width: 36px;
	height: 36px;
}

/* De core levert .sellabees-cart-count; hier alleen de vormgeving.
   right:-14px is een keuze van de klant: de badge mag met zijn rechterkant
   voorbij de 10%-marge (1361px) uitsteken, zodat hij losser van het icoon
   hangt. */
.reko-cart .sellabees-cart-count {
	position: absolute;
	top: -7px;
	right: -14px;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--reko-green);
	color: var(--reko-white);
	font-family: var(--reko-font-body);
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
}

/* --- Mobiele header ----------------------------------------------------- */

.reko-header__mobile-reviews {
	background: var(--reko-surface-2);
	border-bottom: 1px solid var(--reko-beige);
}

/* Gemeten op 390px: reviewbalk 44px hoog plus de 1px haarlijn, hoofdbalk 69px
   (10 + 49 logo + 10). De eigen badge van de core is 19px hoog waar de
   Trustindex-widget 24px was, vandaar de min-height in plaats van meer padding. */
.reko-header__mobile-reviews .reko-header__bar {
	padding-block: 10px;
	min-height: 44px;
}

.reko-header__mobile-main { background: var(--reko-white); }

.reko-header__mobile-main .reko-header__bar { padding-block: 10px; }

/*
 * 170 / 120 / 100px, en niet 200 / 150 / 120. Elke stap stond een maat te hoog.
 * Live (sellabees_child_v3.0/Css/Menu.css): `max-width:100px !important` onder
 * 415px, een wrap van 150px met een logo van 120px onder 767px, en `width:100%`
 * dat boven 768px op 170px uitkomt.
 *
 * Gemeten logohoogte en de headerhoogte die eruit volgt:
 *              live            lokaal-voor
 *   <=415px    100x41  h=106   120x49  h=114
 *   <=767px    120x49  h=114   150x62  h=127
 *   768-1180   170x70  h=135   200x82  h=147
 *
 * De headerhoogte telt dubbel: reko.js meet hem en zet --reko-menu-height, dus
 * alle inhoud eronder schoof 8 tot 13px mee. Het commentaar hieronder zei dat
 * "het logo op 390px 120x49 is" -- dat is gemeten op de verkeerde breedte: 120px
 * is live's waarde voor de band 416-767px, niet voor 390px.
 */
.reko-header__logo--mobile img {
	max-width: 170px;
	max-height: none;
}

@media (max-width: 767px) {
	.reko-header__logo--mobile img { max-width: 120px; }
}

@media (max-width: 415px) {
	.reko-header__logo--mobile img { max-width: 100px; }
	.reko-header__actions { gap: 10px; }
}

@media (max-width: 355px) {
	.reko-header__actions { gap: 5px; }
}

/* --- Hamburger ---------------------------------------------------------- */

.reko-burger {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.reko-burger__inner {
	position: relative;
	width: 40px;
	height: 40px;
	transform: scale(0.5);
}

.reko-burger__inner span {
	position: absolute;
	right: 0;
	height: 4px;
	background: var(--reko-brown);
	transition:
		transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
		top 0.4s ease,
		opacity 0.2s ease,
		width 0.3s ease;
}

.reko-burger__inner span:nth-child(1) { top: 0;    width: 40px; }
.reko-burger__inner span:nth-child(2) { top: 18px; width: 35px; }
.reko-burger__inner span:nth-child(3) { top: 36px; width: 30px; }

.reko-burger[aria-expanded="true"] .reko-burger__inner span:nth-child(1) {
	top: 18px;
	transform: rotate(45deg) scale(1.1);
}

.reko-burger[aria-expanded="true"] .reko-burger__inner span:nth-child(2) {
	opacity: 0;
	transform: scale(0);
}

.reko-burger[aria-expanded="true"] .reko-burger__inner span:nth-child(3) {
	top: 18px;
	width: 40px;
	transform: rotate(-45deg) scale(1.1);
}

/* --- Mobiel menupaneel -------------------------------------------------- */

/*
 * Schermvullend, niet zo hoog als de items. Live zet `height: 100vh` op de
 * menu-<ul> (Css/Menu.css), waardoor het paneel op 390px 1094px hoog is en de
 * pagina eronder volledig bedekt. Lokaal stond hier alleen een max-height en was
 * het paneel 377px, zodat de inhoud eronder zichtbaar bleef en het menu als een
 * losse uitklaplijst las.
 *
 * `min-height` en niet `height`, met de menuhoogte eraf: het paneel hangt onder
 * de vaste header, dus met een volle 100dvh zou het net dat stuk te lang zijn en
 * onnodig scrollen. De max-height blijft staan als bovengrens voor een menu met
 * veel open submenu's -- dan neemt overflow-y het over.
 */
/*
 * `position: absolute` en niet in de flow, want anders bijt dit paneel zichzelf.
 * Het staat binnen <header id="reko-header">, en reko.js meet met een
 * ResizeObserver de HELE header in --reko-menu-height. Zolang het paneel
 * meetelt, gebeurt bij openen dit: header 106 -> 1200, dus
 * `calc(100dvh - var(--reko-menu-height))` wordt 0 en het menu klapt naar niets.
 * Nagemeten op 981 en 1100px: in 1 op de 3 keer laden kwam --reko-menu-height op
 * 1200px uit en was het paneel 0px hoog (scrollHeight 443, clientHeight 0) —
 * een race met de ResizeObserver, dus wisselend zichtbaar.
 *
 * Live heeft dit probleem niet omdat Divi's paneel óók buiten de flow hangt:
 * gemeten op live `ul#mobile_menu3.et_mobile_menu { position: absolute; top:
 * 100%; left: 0; width: 100% }`, waardoor de vaste header daar op 106px blijft
 * staan met het menu open. Diezelfde constructie staat hier nu.
 * `inset: 100% 0 auto 0` = top op de volle headerhoogte, links en rechts tegen
 * de rand; .reko-header is position:fixed en dus de positiecontext.
 */
.reko-mobile-menu {
	position: absolute;
	inset: 100% 0 auto 0;
	background: var(--reko-white);
	min-height: calc(100dvh - var(--reko-menu-height));
	max-height: calc(100dvh - var(--reko-menu-height));
	overflow-y: auto;
	padding: 0 10%;
}

.reko-mobile-menu[hidden] { display: none; }

.reko-mobile-menu__list,
.reko-mobile-menu .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.reko-mobile-menu a {
	display: block;
	padding: 15px 0;
	font-family: var(--reko-font-ui);
	font-size: 20px;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--reko-black);
}

/*
 * 14px onder 980px. Het mobiele menu is op live in twee banden zichtbaar --
 * 981-1180 (waar de header al gewisseld is) en alles onder 980 -- en die hebben
 * een eigen maat. Letterlijk uit de live-stylesheets gelezen:
 *
 *   .et_mobile_menu li a, .nav li li a                        { font-size: 14px }
 *   @media (min-width:981px) ... #mobile_menu3 .menu-item > a { font-size: 20px }
 *
 * Dus 14px is de basis en 20px geldt alleen in de band 981-1180. Hier stond eerst
 * 20px op elke breedte, en daarna kort 16px -- die 16px kwam uit een meting op het
 * verkeerde element (een link in een submenu). De regel uit de bron gaat vóór de
 * meting: `ul#mobile_menu3` draagt óók de class `et_mobile_menu`, dus de eerste
 * regel raakt hem.
 */
@media (max-width: 980px) {
	.reko-mobile-menu a { font-size: 14px; }
}

.reko-mobile-menu .sub-menu {
	padding-left: 15px;
	overflow: hidden;
	transform: scaleY(0);
	transform-origin: top;
	max-height: 0;
	transition: transform 0.3s ease, max-height 0.3s ease;
}

.reko-mobile-menu li.is-open > .sub-menu {
	transform: scaleY(1);
	max-height: 60vh;
	overflow-y: auto;
}

.reko-mobile-menu .sub-menu a { font-size: 17px; }

/* Uitklappijl naast items met kinderen. */
.reko-mobile-menu__toggle {
	position: absolute;
	right: 0;
	top: 8px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.reko-mobile-menu__toggle::before {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	margin: auto;
	border-right: 2px solid var(--reko-black);
	border-bottom: 2px solid var(--reko-black);
	transform: rotate(45deg);
	transition: transform 0.3s ease;
}

.reko-mobile-menu li.is-open > .reko-mobile-menu__toggle::before {
	transform: rotate(-135deg);
}

.reko-mobile-menu .menu-item-has-children { position: relative; }

/* --- "Container vol?"-uitklap onder het menu ----------------------------- */

/*
 * Live hangt onder de zeven menu-items een zwarte knop met een uitklap; die
 * ontbrak hier volledig. Markup staat in header.php, met de reden waarom het
 * <details>/<summary> is. Bron van de opmaak: Custom/custom.css regel 1885 e.v.
 * (".extra-menu-container / .footer-dropdown — used in both footer and mobile
 * hamburger menu") plus .footer-menu in Css/Menu.css regel 706.
 *
 * Nagemeten op live met de open menustaat GEFORCEERD: Divi's jQuery vuurt niet
 * in headless, dus .mobile_nav kreeg met de hand de class 'opened' die live daar
 * zelf op zet, waarna de MutationObserver van menufunctions.js het blok inhangt.
 *
 *              container       knop          uitklap open
 *    390px   343,2 x 66     257,4 x 46     226,1 x 103,4  (klapt OMHOOG)
 *    600px   528   x 66     203,1 x 46     226,1 x 103,4
 *   1100px  1012   x 66     203,1 x 46     226,1 x 103,4
 *
 * 66 = 10 + 46 + 10; de 10px komt van `.extra-menu-container { padding: 10px 0 }`.
 * De 1100px-band hoort erbij omdat het mobiele menu op live in twee banden
 * zichtbaar is (981-1180 én alles onder 980); beide zijn nagemeten.
 *
 * Live heeft hier twee wrappers (.extra-menu-container transparant,
 * .footer-menu met background:#fff en width:100%); dat is hier één div, omdat
 * het menupaneel eromheen al wit is en die tweede laag dus niets doet.
 */
.reko-mobile-menu__extra {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 10px 0;
}

/* Positiecontext voor de uitklap, zoals `.footer-dropdown { position: relative;
   display: inline-block }` op live. Als flex-item met align-items:flex-start
   krimpt deze <details> net zo naar de knopbreedte. */
.reko-mobile-menu__extra-drop { position: relative; }

/*
 * De knop. Gemeten op live: 18px DM Sans 500, uppercase, regelhoogte 18px, wit
 * op zwart, padding 14px 20px met 35px rechts voor het pijltje -> 46px hoog.
 * `list-style: none` plus de -webkit-regel halen het standaard driehoekje van
 * <summary> weg.
 */
.reko-mobile-menu .reko-mobile-menu__extra-trigger {
	position: relative;
	display: block;
	padding: 14px 35px 14px 20px;
	background: var(--reko-black);
	color: var(--reko-white);
	font-family: var(--reko-font-body);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	list-style: none;
	cursor: pointer;
}

.reko-mobile-menu__extra-trigger::-webkit-details-marker { display: none; }

/*
 * Het pijltje. Live zet daar de ETmodules-glyph "3" voor (16px, gewicht 800,
 * absoluut op right:10px); dat icoonfont zit niet in dit thema. De ink van die
 * glyph is nagemeten door hem in de live-pagina op een canvas te tekenen: 9 x
 * 5px, dus een platte chevron en geen vierkant. Het 16px-glyphvak staat op
 * right:10px met de ink 4..12px daarin, dus het midden van de ink ligt 18px van
 * de rechterrand van de knop.
 *
 * Een 5px-vierkant met 2px randen — hetzelfde recept als de chevron in
 * .reko-topmenu hierboven — is geroteerd 9,9 x 9,9px; met scale(1,.5) erbij komt
 * dat op 9,9 x 5,0px uit. Het vak is dan 7px, dus right:14,5px legt het midden
 * op de gemeten 18px.
 */
.reko-mobile-menu__extra-trigger::after {
	content: "";
	position: absolute;
	right: 14.5px;
	top: 50%;
	width: 5px;
	height: 5px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-50%) scale(1, 0.5) rotate(45deg);
	transition: transform 0.3s ease;
}

/* Open: live draait het pijltje een halve slag en zet een witte lijn boven de
   knop (`[data-open="true"] .footer-dropdown-trigger { border-top: 1px solid
   #fff }`). Met box-sizing:border-box blijft de knop daarbij 46px hoog. */
.reko-mobile-menu__extra-drop[open] .reko-mobile-menu__extra-trigger {
	border-top: 1px solid var(--reko-white);
}

.reko-mobile-menu__extra-drop[open] .reko-mobile-menu__extra-trigger::after {
	transform: translateY(-50%) scale(1, 0.5) rotate(-135deg);
}

/*
 * Breedte van de knop.
 *
 * Boven 450px laat live de knop zijn eigen tekstbreedte houden: `max-width:
 * 240px` wordt niet gehaald, gemeten 203,1px op zowel 600 als 1100px. Dat volgt
 * hier uit het krimpen van het flex-item, dus daar staat geen breedte.
 *
 * Tot en met 450px zet live `.footer-dropdown { width: 75% }` (custom.css regel
 * 2567, in @media max-width:450px) van de menuband. Die band is op live 88vw:
 * `ul#mobile_menu3 { padding-left: 10% }` van de 80%-rij is 8vw links en Divi's
 * `.et_mobile_menu { padding: 5% }` van diezelfde rij is 4vw rechts. 75% van
 * 88vw is 66vw, en dat is de gemeten 257,4px op 390.
 *
 * Daarom 66vw en geen percentage: de menuband van DIT thema is 80vw
 * (`.reko-mobile-menu { padding: 0 10% }`), dus 75% zou hier 234px geven.
 */
@media (max-width: 450px) {
	.reko-mobile-menu__extra-drop {
		width: 66vw;
		max-width: 100%;
	}

	.reko-mobile-menu .reko-mobile-menu__extra-trigger { width: 100%; }
}

/*
 * De uitklap zelf. Live: `position:absolute; bottom:100%; left:0;
 * min-width:200px; padding:6px 0; background:#000; z-index:9999`. Hij klapt dus
 * OMHOOG en legt zich over de laatste twee menu-items — gemeten op 390px staat
 * hij op y 423,3 terwijl de knop op 526,6 begint. Breedte 226,1px op alle drie
 * de gemeten breedtes: die volgt de langste link (nowrap), niet de knop.
 */
.reko-mobile-menu__extra-menu {
	position: absolute;
	bottom: 100%;
	left: 0;
	z-index: 9999;
	min-width: 200px;
	padding: 6px 0;
	background: var(--reko-black);
}

/* De links. Gemeten: 18px DM Sans, regelhoogte 1.4 (25,2px), uppercase, wit,
   padding 10px 18px -> 45,2px hoog, met een witte scheidingslijn tussen de twee
   (`a.footer-dropdown-item:not(:last-child) { border-bottom: 1px solid #fff }`).
   6 + 45,2 + 1 + 45,2 + 6 = de gemeten 103,4px.

   Twee classes in de selector: `.reko-mobile-menu a` hierboven is even specifiek
   en zet padding 15px 0, 16/20px en zwart. */
.reko-mobile-menu .reko-mobile-menu__extra-item {
	display: block;
	padding: 10px 18px;
	color: var(--reko-white);
	font-family: var(--reko-font-body);
	font-size: 18px;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
}

.reko-mobile-menu .reko-mobile-menu__extra-item:not(:last-child) {
	border-bottom: 1px solid var(--reko-white);
}

.reko-mobile-menu .reko-mobile-menu__extra-item:hover,
.reko-mobile-menu .reko-mobile-menu__extra-item:focus {
	background: rgba(255, 255, 255, 0.1);
	color: var(--reko-white);
	text-decoration: none;
}

/* Scroll vastzetten zolang het menu open staat. */
body.reko-menu-open { overflow: hidden; }

/* ==========================================================================
   Footer
   ========================================================================== */

/* --- Reviewbalk --------------------------------------------------------- */

/* Padding-top 81px: gemeten staat de kop 80,6px onder de bovenkant van de band
   (Divi's 4% sectiepadding plus de rijpadding). Rechts geen padding — de
   kaartenrij loopt bewust door tot de rechterrand van het venster. */
.reko-reviews {
	background: var(--reko-surface-3);
	padding: 81px 0 0 15vw;
}

/*
 * Ruimte BOVEN de kop "Deze klanten gingen u voor!".
 *
 * Hier stond padding-top 0, waardoor de kop op smalle vensters pal tegen de
 * sectie erboven plakte terwijl desktop er 81px voor heeft. Dat 0 was geen
 * meting maar het gevolg van de shorthand: die zette alle vier de zijden.
 *
 * --reko-section-y (54px) en geen eigen getal: dat is het sectieritme van het
 * thema, en de reviewbalk is op dit breekpunt in geen bron vastgelegd.
 */
@media (max-width: 980px) {
	.reko-reviews { padding: var(--reko-section-y) 0 0 10vw; }
}

/* Kop en knop stonden in Divi in twee halve kolommen (1_2 + 1_2 met 5,5%
   tussenruimte) binnen een rij die tot de rechterrand doorloopt, met de knop
   GECENTREERD in zijn helft. Gemeten knop: 1085-1336px. Met
   justify-content:space-between plakte hij tegen de 15vw-marge (1285px). */
.reko-reviews__head {
	display: grid;
	grid-template-columns: repeat(2, 47.25%);
	gap: 5.5%;
	align-items: center;
	padding-right: 0;
}

.reko-reviews__head > .reko-btn { justify-self: center; }

.reko-reviews__head h3 {
	font-size: 64px;
	text-transform: uppercase;
	text-align: left;
}

/* De mobiele kopie van de reviewkop staat live NIET in kapitalen. Divi houdt
   twee exemplaren: `.et_pb_text_0_tb_footer h3` met uppercase op 64px voor
   desktop, en `.et_pb_text_1_tb_footer h3` op 40px zonder transform daaronder.
   Gemeten op zes pagina's, op 980px én 767px: live trans=none. */
.reko-reviews__head.reko-footer-mobile h3 { text-transform: none; }

/*
 * Tussenstap 981-1180px: 40px, net als de bannerkop en de blok-h2. De ladder
 * 64/50/40 had alleen een stap op 980 en 767.
 *
 * De reviewkop staat letterlijk in dezelfde live-regel als de bannerkop
 * (sellabees_child_v3.0/Custom/custom.css, regel 2134 e.v.):
 *   @media (min-width:981px) and (max-width:1180px) {
 *     .ReviewSlider h3, ... { font-size: 40px !important }
 *   }
 * Gemeten op live @1100: 40px op EEN regel, met de groene knop ernaast. Lokaal
 * stond hij op 64px en brak over twee regels (90px hoog).
 */
@media (min-width: 981px) and (max-width: 1180px) {
	.reko-reviews__head h3 { font-size: 40px; }
}

@media (max-width: 980px) {
	.reko-reviews__head {
		grid-template-columns: 1fr;
		gap: 20px;
		padding-right: 10vw;
	}
	.reko-reviews__head > .reko-btn { justify-self: start; }
	.reko-reviews__head h3 { font-size: 50px; }

}

@media (max-width: 767px) {
	.reko-reviews__head h3 { font-size: 40px; }
}

/* Kaartenrij: scroll-snap in plaats van een JS-slider. Zelfde beeld, geen
   afhankelijkheid van Divi Supreme of Swiper. */
/* Gemeten: kaarten beginnen 54px onder de kop en er zit 88px onder de kaarten
   voordat de grijze linkband begint. */
.reko-reviews__track {
	display: flex;
	gap: 50px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block: 54px 88px;
	scrollbar-width: none;
}

.reko-reviews__track::-webkit-scrollbar { display: none; }

/*
 * Vanaf 980px naar beneden krapper rond de kaartenrij, aan beide kanten.
 *
 * De 54/88 hierboven is op live gemeten op DESKTOP. Daar staat de kop NAAST de
 * knop en loopt de ruimte onder de kaarten door tot de grijze linkband; onder
 * 980px staat de kop erboven en de knop eronder, en dan zijn beide te ruim: de
 * kop kwam los van zijn eigen kaarten te staan en de 88px viel als een gat
 * tussen de kaarten en de knop.
 *
 * De ruimte boven de KOP zit niet hier maar op .reko-reviews.
 *
 * Deze regel staat NA de basisregel en niet in het mediablok bij de reviewkop
 * hierboven: dat blok komt eerder in dit bestand, en bij gelijke
 * specificiteit wint de laatste regel. Daar had de override dus geen effect.
 *
 * De twee waarden komen niet uit een meting — de reviewbalk is op dit
 * breekpunt in geen bron vastgelegd — maar volgen de aanwijzing van de
 * opdrachtgever: boven ruimer, onder krapper.
 */
@media (max-width: 980px) {
	.reko-reviews__track { padding-block: 20px 35px; }
}

/* Zodra reko.js de carrousel overneemt schuift niet de baan maar een rij
   erbinnen, met een CSS-transitie op transform (zoals Swiper op de oude site).
   De baan zelf scrollt dan niet meer, dus overflow dicht en snappen uit —
   met `scroll-snap-type: x mandatory` zou de browser elke tussenstand
   terugtrekken naar een kaartrand. */
.reko-reviews__track--auto {
	overflow: hidden;
	scroll-snap-type: none;
}

/* `gap: inherit` neemt de 50px van de baan over (en de 20px onder 767px), en
   `flex: 0 0 100%` houdt de rij precies zo breed als de baan. Dat laatste is
   nodig omdat de kaarten hun breedte uit `calc((100% - 150px) / 4)` halen: zonder
   die 100% zou dat tegen de inhoud van de rij gaan rekenen in plaats van tegen
   de baan, en dan klopt de kaartbreedte niet meer. De kaarten steken bewust
   buiten de rij; de baan snijdt ze af. */
.reko-reviews__rail {
	display: flex;
	gap: inherit;
	flex: 0 0 100%;
	/* Zonder dit blijft de rij op `min-width: auto` staan — de standaard voor een
	   flexitem — en rekt hij op tot de 15 kaarten erin passen (gemeten 3257px).
	   De kaarten rekenden hun breedte dan tegen die 3257px en werden 777px in
	   plaats van 284px. */
	min-width: 0;
	will-change: transform;
}

/* Eén doorlopende beweging over precies één set kaarten. Omdat de rij drie
   identieke sets bevat, valt het einde van de animatie samen met het begin:
   oneindig zonder zichtbare sprong, en lineair zodat hij nergens afremt of
   halverwege een kaart tot stilstand komt.

   De setbreedte en de duur komen uit reko.js: die meet de set op en deelt door
   de gemeten live-snelheid van 24,5 px/s. */
@keyframes reko-reviews-schuif {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-1 * var(--reko-reviews-set, 0px)), 0, 0); }
}

.reko-reviews__track--auto .reko-reviews__rail {
	animation: reko-reviews-schuif var(--reko-reviews-duur, 60s) linear infinite;
}

/* BEWUST NIET op :hover. De balk is 1285px breed en een paar honderd pixels
   hoog; wie ernaar kijkt heeft de muis er bijna altijd op, en dan staat de
   carrousel stil op een willekeurige plek — halverwege een kaart. Dat leest als
   "hij loopt niet door". De oude site zet ook geen pause_on_hover.

   Wel op :focus-within: staat de focus met het toetsenbord in een kaart, dan
   moet die kaart blijven staan om te kunnen lezen. En buiten beeld, waar
   reko.js de pauzeclass zet. Voor wie beweging helemaal niet wil is er de
   prefers-reduced-motion-regel hieronder. */
.reko-reviews__track--auto:focus-within .reko-reviews__rail,
.reko-reviews__track--pauze .reko-reviews__rail {
	animation-play-state: paused;
}

/* Wie beweging heeft afgezet krijgt een stilstaande balk die gewoon te scrollen
   blijft. Los van de check in reko.js, zodat het ook klopt als iemand de
   instelling wisselt zonder de pagina te herladen. */
@media (prefers-reduced-motion: reduce) {
	.reko-reviews__track--auto .reko-reviews__rail { animation: none; }
	.reko-reviews__track--auto { overflow-x: auto; }
}

/* De Divi Supreme-carrousel stond op slide_to_show=4 met space_between=50; die
   rekent de kaartbreedte uit de baanbreedte. Op 1512px is dat
   (1285,2 - 3*50) / 4 = 283,8 -> gemeten 284. De vaste 393px die hier stond gaf
   maar 3,2 kaarten in beeld in plaats van 4,3. Tablet 2 kaarten, mobiel 1. */
.reko-review {
	flex: 0 0 calc((100% - 150px) / 4);
	scroll-snap-align: start;
	background: var(--reko-white);
	padding: 20px 30px;
}

/*
 * Twee kaarten naast elkaar vanaf 1180px en niet vanaf 980px. Live schakelt de
 * reviewcarrousel in de band 981-1180 al terug naar twee brede kaarten; lokaal
 * bleven er vier smalle staan.
 *
 * Gemeten op /over-reko/ @1100 -- de reviewband is het grootste deel van het
 * hoogteverschil van de footer:
 *              reviewband   footer
 *   live          425px      877px
 *   lokaal-voor   664px     1166px
 * Vier kaarten van 196px breed laten de tekst zo vaak afbreken dat de band 239px
 * te hoog werd. Live zet daar kaarten van 458px.
 *
 * De kaartBREEDTE komt hiermee op 415px in plaats van de 458px die live meet: de
 * carrousel is op live een Swiper die zijn eigen baanbreedte en goot meebrengt, en
 * die is met CSS alleen niet na te rekenen (zie ook de goot van 50px hieronder,
 * die live rond 1100px zelf omzet). Het aantal kaarten is wat het beeld bepaalt;
 * de laatste 43px breedte is bewust niet nagejaagd.
 */
@media (max-width: 1180px) {
	.reko-review { flex-basis: calc((100% - 50px) / 2); }
}

@media (max-width: 767px) {
	/* 90vw en niet 85vw: op live loopt de kaart tot exact de rechterrand van het
	   scherm. Gemeten kaartbreedte live 351px op 390px en 540px op 600px -- precies
	   90vw; lokaal 331,5 en 510px, waardoor er een kier overbleef waarin de
	   volgende kaart al meekeek. */
	.reko-review {
		flex-basis: 90vw;
		padding: 20px;
	}
	.reko-reviews__track { gap: 20px; }
}

.reko-review__stars {
	font-family: var(--reko-font-stars);
	font-size: 26px;
	font-weight: 500;
	line-height: 1;
	color: var(--reko-gold);
	padding-bottom: 6px;
}

.reko-review__name {
	font-family: var(--reko-font-heading);
	font-size: 25px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--reko-black);
	padding-bottom: 8px;
}

/* 23.8px en niet 1.7 (= 27,2px): op de oude site stond de regelhoogte als
   `1.7em` op een ouder van 14px, en zo'n em-waarde erft door als vaste LENGTE.
   De kaarttekst van 16px kreeg daardoor de regelhoogte van 14px-tekst. Zonder
   deze regel wordt de kaart 268px hoog in plaats van de gemeten 244px. */
.reko-review p {
	font-size: 16px;
	line-height: 23.8px;
	padding-bottom: 0;
}

.reko-reviews__cta { padding-block: 0 40px; }

/* --- Linkkolommen ------------------------------------------------------- */

/* Gemeten: de eerste kolomkop begint 81px onder de bovenkant van de band en er
   zit 90px onder de kolommen (Divi's 4% sectiepadding + rijpadding). */
.reko-footer__links {
	background: var(--reko-surface-2);
	padding-block: 81px 90px;
}

@media (max-width: 980px) {
	.reko-footer__links { padding-block: 54px 40px; }
}

@media (max-width: 767px) {
	.reko-footer__links { padding-block: 40px; }
}

/* Divi-rijen zijn 80% breed met een maximum; de footerrij had max_width 1500px.
   Op 1512px is dat 1209,6 breed vanaf x=151 — gemeten kolommen op 153, 467, 789
   en 1111. Met .reko-row--full (1500px + 20px padding) begonnen ze op x=26. */
.reko-footer__grid,
.reko-footer__bottom-inner {
	width: 80%;
	max-width: var(--reko-row-full);
	padding-inline: 0;
}

.reko-footer__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 5.5%;
}

/*
 * In de band 981-1180 is de kolomgoot 4% en niet 5,5%. Live zet daar
 * `margin-right: 4% !important` op de footerkolommen (Css/Menu.css, regel ~102).
 * Met 5,5% werden de kolommen op 1100px 173px breed waar live 194px meet: vier
 * kolommen met drie goten geeft (100 - 3x5,5)/4 = 20,875% tegen (100 - 3x4)/4 = 22%.
 */
@media (min-width: 981px) and (max-width: 1180px) {
	.reko-footer__grid { gap: 4%; }
}

/* De goot is 5,5% en niet 30px, ook onder 980px. Live houdt Divi's eigen
   kolommodel aan: `@media (max-width:980px){ ... width:47.25%; margin-right:5.5% }`,
   wat op 980px een goot van 44px geeft. Met de vaste 30px werden de kolommen 7px
   te breed en de goot 14px te smal. */
@media (max-width: 980px) {
	.reko-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 5.5%; }
}

/* Eén kolom vanaf 479px en niet vanaf 600px. Live stapt hier op Divi's
   telefoonbreekpunt: `@media (max-width:479px){ .et_pb_column_1_4 { width:100% } }`.
   Gemeten op 520px: live twee kolommen van 181px, lokaal één van 384px -- de
   footer was daar 1602px hoog tegen 1118px op live, dus 484px te veel. */
@media (max-width: 479px) {
	.reko-footer__grid { grid-template-columns: 1fr; gap: 24px; }
}

.reko-footer__col h4 {
	font-size: 30px;
	margin-bottom: 10px;
	padding-bottom: 0;
}

.reko-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.reko-footer__list a,
.reko-footer__list li {
	font-family: var(--reko-font-ui);
	font-size: 14px;
	line-height: 26px;
	color: var(--reko-black);
}

.reko-footer__contact {
	margin: 0 0 15px;
	padding: 0;
	list-style: none;
}

.reko-footer__contact li { padding-block: 8px; }

.reko-footer__contact a {
	display: flex;
	align-items: center;
	font-family: var(--reko-font-body);
	font-size: 15px;
	line-height: 1.3;
	color: var(--reko-black);
}

/* 5px rondom een icoon van 20px = een vak van 30px; daarmee komen de drie
   contactregels op 55 + 46 + 46 = 147px uit, precies de gemeten afstand tussen
   de kop en de socialicoontjes. Met 7px werd elke regel 4px te hoog. */
.reko-footer__icon {
	display: grid;
	place-items: center;
	padding: 5px;
	flex: 0 0 auto;
}

.reko-footer__ctext { padding-left: 12px; }

.reko-footer__socials {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.reko-footer__socials img {
	width: 32px;
	height: 32px;
	border-radius: 3px;
}

/* De contactformulier-knop stond tegen de linklijst aan (margin-top 0, gemeten
   gat 0px). Eigen class en niet `.reko-footer__col .reko-btn`: die selector is
   specifieker dan .reko-footer__full hieronder en zou de 15px van de zwarte
   knop overschrijven. */
.reko-footer__contactbtn { margin-top: 10px; }

.reko-footer__full { margin-top: 15px; min-width: 215px; }

/* --- Copyrightbalk ------------------------------------------------------ */

/* KvK en btw onder de contactkolom: klein, het is verplichte informatie en
   geen blikvanger. */
.reko-footer__bedrijf {
	margin: 20px 0 0;
	padding: 0;
	font-size: 12px;
	line-height: 1.6;
}

.reko-footer__bottom { background: var(--reko-green); }

.reko-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.reko-footer__bottom p {
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 22px;
	color: var(--reko-white);
}

.reko-footer__bottom a { color: var(--reko-white); }

/* De hoogte van de balk komt van de knop, niet van de tekst: Divi had daar
   padding 10px boven en 7px onder (24px Bebas, regelhoogte 1,7em = 40,8) →
   57,8px. Gemeten balk: 57px. Met de standaard 3px/0px werd het 44px. */
.reko-footer__bottom .reko-btn { padding-block: 10px 7px; }

/* De zwarte knop in de balk hovert naar #424242, niet naar #212121. */
/* Dezelfde kleur als elke andere zwarte knop; staat nu als token in main.css. */
.reko-footer__bottom .reko-btn--black:hover { background: var(--reko-black-hover); }

@media (max-width: 980px) {
	.reko-footer__bottom p { padding-block: 20px; }
}