/**
 * Vlotweg — headerconsistentie
 *
 * De site had drie verschillende headers naast elkaar (zie het rapport van 2026-09-01).
 * Dit bestand brengt de Astra-header in dezelfde designtaal als de header van de homepage:
 * donkere merkachtergrond, witte navigatie, telefoonnummer, dezelfde knop.
 *
 * Wat hier NIET gebeurt: de homepage zelf krijgt geen nieuwe header. Die blijft transparant
 * over de hero staan — dat is de gewenste referentie. Alleen het afbreken van "Français"
 * naar een tweede regel wordt hier opgelost.
 *
 * Merkkleuren komen uit het Astra-palet: #083535 (donker), #6bc290 (groen), #6dc2bc (teal).
 */

/* ------------------------------------------------------------------ 1. kleur
   Pagina's zonder transparante header kregen een lichtgrijze balk met donkergroene
   tekst — een heel andere uitstraling dan de homepage. Die krijgen nu de merkkleur.
   Pagina's mét transparante header (over een hero) blijven ongemoeid: die stonden al goed. */
body:not(.ast-theme-transparent-header) .ast-below-header-bar,
body:not(.ast-theme-transparent-header) .ast-below-header-wrap .ast-below-header-bar {
	background-color: #083535;
}

body:not(.ast-theme-transparent-header) .ast-below-header-bar .main-header-menu .menu-link,
body:not(.ast-theme-transparent-header) .ast-below-header-bar .main-header-menu > .menu-item > .menu-link,
body:not(.ast-theme-transparent-header) .ast-below-header-bar .main-header-menu .menu-item > .ast-menu-toggle {
	color: #ffffff;
}

body:not(.ast-theme-transparent-header) .ast-below-header-bar .main-header-menu > .menu-item > .menu-link:hover,
body:not(.ast-theme-transparent-header) .ast-below-header-bar .main-header-menu > .menu-item.current-menu-item > .menu-link,
body:not(.ast-theme-transparent-header) .ast-below-header-bar .main-header-menu > .menu-item.current-menu-ancestor > .menu-link {
	color: #6bc290;
}

/* Submenu's blijven een lichte kaart met donkere tekst — leesbaar op beide varianten. */
body:not(.ast-theme-transparent-header) .ast-below-header-bar .main-header-menu .sub-menu .menu-link {
	color: #083535;
}

/* ------------------------------------------------------------------- 2. logo
   Het logo wordt via de Customizer-CSS vervangen met `content: url()` per taal. De
   ankercontainer stond vast op 160×50 terwijl het bestand een verhouding van 1,15 heeft;
   daardoor stak het logo onder de balk uit. Hoogte sturen en breedte laten volgen lost dat op. */
.site-logo-img a,
.site-logo-img .custom-logo-link {
	width: auto;
	height: auto;
	display: inline-flex;
	align-items: center;
}

.site-branding .site-logo-img .custom-logo {
	height: 46px;
	width: auto;
	max-width: 190px;
	object-fit: contain;
	display: block;
}

/* De Franse variant werd met scale(1.5) opgerekt omdat het bronbestand 6811px breed is.
   Met een vaste hoogte is dat niet meer nodig en staan beide talen even groot. */
body.lang-fr .site-branding .site-logo-img .custom-logo {
	transform: none;
	height: 46px;
}

/* ------------------------------------------------------- 3. navigatie wrapt niet
   "Français" sprong naar een tweede regel zodra "Verkoophulp" aan het menu werd
   toegevoegd. De ruimte is er wel — het menu mocht alleen niet groeien.

   Alleen op desktop, en alleen op horizontale menu's: het footermenu staat verticaal
   (`sm-vertical`) en zou door nowrap juist buiten het scherm lopen. */
@media (min-width: 922px) {
	.elementor-nav-menu--main .elementor-nav-menu:not(.sm-vertical),
	.ast-below-header-bar .main-header-menu.ast-nav-menu,
	.ast-primary-header-bar .main-header-menu.ast-nav-menu {
		flex-wrap: nowrap;
	}

	.elementor-nav-menu--main .elementor-nav-menu:not(.sm-vertical) > li,
	.ast-below-header-bar .main-header-menu.ast-nav-menu > .menu-item {
		white-space: nowrap;
	}

	/* Het menublok mag de ruimte tussen logo en telefoonnummer gebruiken in plaats van
	   te krimpen tot de items niet meer passen. */
	.elementor-widget-nav-menu .elementor-nav-menu--main {
		flex-shrink: 0;
	}
}

/* ------------------------------------------------- 3b. geen horizontale overflow
   Het verticale menu in de footer stond op `flex-wrap: nowrap` en werd daardoor
   3.510px breed. Gevolg: de layout-viewport op een telefoon werd 1.560px in plaats
   van 390px, waardoor Astra dácht dat het een desktop was en het mobiele menu niet
   opende. De hamburger reageerde dus letterlijk nergens op.
   Dit begrenst alleen de breedte; aan de footer verandert verder niets. */
   Let op: dit mag GEEN media query zijn. De layout-viewport was juist door de overflow
   opgeblazen tot 1.560px, waardoor een `max-width: 921px`-query nooit aansloeg. Een
   verticaal menu hoort sowieso nooit breder te zijn dan zijn container, op elk scherm. */
.elementor-nav-menu.sm-vertical,
.elementor-widget-nav-menu .elementor-nav-menu.sm-vertical {
	flex-direction: column;
	flex-wrap: wrap;
	max-width: 100%;
	min-width: 0;
}

.elementor-nav-menu.sm-vertical > li,
.elementor-nav-menu.sm-vertical > li > a {
	max-width: 100%;
	min-width: 0;
}

/* Flexkinderen krimpen standaard niet onder hun inhoud (`min-width: auto`). Daardoor
   duwde één menu de hele footercontainer breder dan het scherm. */
.elementor-widget-nav-menu .elementor-widget-container,
.elementor-widget-heading .elementor-widget-container {
	min-width: 0;
}

/* --------------------------------------------------------------- 4. telefoon
   Het telefoonnummer stond alleen in de Elementor-header van de homepage. Het staat nu
   ook in de Astra-header, als HTML-element. */
.ast-header-html-1 .ast-builder-html-element,
.ast-header-html-1 {
	display: flex;
	align-items: center;
}

.vw-header-tel {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	color: #ffffff;
}

.ast-theme-transparent-header .vw-header-tel { color: #ffffff; }
body:not(.ast-theme-transparent-header) .vw-header-tel { color: #ffffff; }
.vw-header-tel:hover,
.vw-header-tel:focus { color: #6bc290; }
.vw-header-tel:focus-visible { outline: 2px solid #6bc290; outline-offset: 3px; border-radius: 3px; }

/* Astra filtert SVG uit het HTML-element van de header weg, dus komt het icoon uit CSS. */
.vw-header-tel::before {
	content: "";
	width: 1.05em;
	height: 1.05em;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--vw-tel-icoon) center / contain no-repeat;
	mask: var(--vw-tel-icoon) center / contain no-repeat;
}

:root {
	--vw-tel-icoon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z\"/></svg>');
}

/* Het HTML-element van Astra wordt in een <p> gezet; die marge moet weg. */
.ast-header-html-1 .ast-builder-html-element p { margin: 0; }

/* ------------------------------------------------------------- 4b. knoptekst
   Astra zet alle knoppen op `text-transform: capitalize`, waardoor de header
   "Maak Een Afspraak" toont terwijl de homepage "Maak een afspraak" schrijft.
   Alleen de headerknop wordt hier rechtgezet; andere knoppen blijven zoals ze zijn. */
.ast-header-button-1 .ast-custom-button { text-transform: none; }

/* Onder 1200px wordt het krap naast menu en knop; dan verdwijnt het nummer bewust.
   De knop en het menu blijven staan, en op mobiel staat het nummer in het uitklapmenu. */
@media (max-width: 1200px) {
	.ast-header-html-1 { display: none !important; }
}

/* --------------------------------------------------------------- 5. hoogte
   De balk was 60px hoog tegenover ruim 90px op de homepage. Iets meer lucht sluit
   dichter aan bij de referentie zonder de pagina-indeling te verschuiven. */
.ast-below-header-bar,
.ast-below-header-bar .site-below-header-wrap {
	min-height: 78px;
}

.ast-below-header-bar .main-header-menu > .menu-item {
	line-height: 78px;
}

@media (max-width: 921px) {
	.ast-below-header-bar,
	.ast-below-header-bar .site-below-header-wrap { min-height: 64px; }
	.site-branding .site-logo-img .custom-logo { height: 38px; }
}


/* ------------------------------------------- 3c. de werkelijke oorzaak van de overflow
   De footercontainer `4f0ac4ef` (zelfde id in de NL- én de FR-footer) staat op
   `flex-direction: column` mét `flex-wrap: wrap`. Een kolom die mag wrappen, vult bij een
   begrensde hoogte extra KOLOMMEN naast elkaar — de container werd daardoor 3.510px breed.

   Gevolg op een telefoon: de layout-viewport rekte op tot 1.560px, Astra dacht dat het een
   desktop was en het mobiele menu opende niet. De hamburger reageerde nergens op.

   Voor een kolomcontainer is `nowrap` het juiste gedrag. Dit is bewust één regel op één
   element: geen herontwerp van de footer. */
.elementor-element-4f0ac4ef {
	flex-wrap: nowrap !important;
	width: auto !important;
	max-width: 100% !important;
}


/* ==========================================================================
   6. Dropdown "Verkoophulp"
   --------------------------------------------------------------------------
   De labels liepen buiten het witte paneel. Op de homepage was de dropdown maar
   156px breed terwijl "Welke verkooproute past bij mij?" 196px tekst nodig had.

   Twee dingen opgelost: de labels zijn ingekort tot Regio-check / Verkooproute /
   Verkoopklaar / Complexe situatie / Documentencheck, en het paneel krijgt een
   fatsoenlijke minimumbreedte met echte padding. Geen kleinere letters.
   ========================================================================== */

/* -- Elementor-header (homepage en de andere canvas-pagina's) -- */
.elementor-nav-menu--main .elementor-nav-menu--dropdown,
.elementor-nav-menu--main .elementor-nav-menu ul.sub-menu {
	min-width: 15rem;
	max-width: 20rem;
	padding: .5rem 0;
	border-radius: .55rem;
	box-shadow: 0 12px 32px -12px rgba(8, 53, 53, .38), 0 2px 6px rgba(8, 53, 53, .06);
	border: 1px solid rgba(8, 53, 53, .08);
	overflow: hidden;
}

.elementor-nav-menu--main .elementor-nav-menu--dropdown a.elementor-sub-item,
.elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a {
	display: block;
	padding: .68rem 1.15rem;
	line-height: 1.35;
	white-space: normal;
	overflow-wrap: break-word;
}

/* -- Astra-header (alle overige pagina's) -- */
.ast-below-header-bar .main-header-menu .sub-menu,
.ast-primary-header-bar .main-header-menu .sub-menu {
	min-width: 15rem;
	width: auto;
	padding: .5rem 0;
	border-radius: .55rem;
	box-shadow: 0 12px 32px -12px rgba(8, 53, 53, .38), 0 2px 6px rgba(8, 53, 53, .06);
	border: 1px solid rgba(8, 53, 53, .08);
}

.ast-below-header-bar .main-header-menu .sub-menu .menu-link,
.ast-primary-header-bar .main-header-menu .sub-menu .menu-link {
	padding: .68rem 1.15rem;
	line-height: 1.35;
	white-space: normal;
	overflow-wrap: break-word;
	height: auto;
}

/* Hover en toetsenbord krijgen dezelfde, duidelijke behandeling. */
.ast-below-header-bar .main-header-menu .sub-menu .menu-link:hover,
.ast-below-header-bar .main-header-menu .sub-menu .menu-link:focus-visible,
.elementor-nav-menu--main .elementor-nav-menu--dropdown a:hover,
.elementor-nav-menu--main .elementor-nav-menu--dropdown a:focus-visible {
	background-color: rgba(109, 194, 188, .16);
	color: #083535;
}

.ast-below-header-bar .main-header-menu .sub-menu .menu-link:focus-visible,
.elementor-nav-menu--main .elementor-nav-menu--dropdown a:focus-visible {
	outline: 2px solid #2E8F87;
	outline-offset: -2px;
}

/* Het huidige item in het submenu mag herkenbaar zijn. */
.ast-below-header-bar .main-header-menu .sub-menu .current-menu-item > .menu-link {
	color: #083535;
	font-weight: 600;
	box-shadow: inset 3px 0 0 #6DC2BC;
}

/* ==========================================================================
   7. Taalwissel als secundair element
   --------------------------------------------------------------------------
   "Français" stond als volwaardig navigatie-item naast Werkwijze en Vragen en nam
   daarmee evenveel visueel gewicht én ruimte in. De functie blijft volledig intact
   — vendufacile.be bestaat, dus de wissel moet blijven — maar hij wordt een
   compacte utility-knop in plaats van een primair menu-item.

   De vlag is eruit: een vlag staat voor een land, niet voor een taal, en de
   Belgische vlag dekt er drie. Het woord "Français" blijft staan, want dat is voor
   een Franstalige bezoeker het duidelijkste signaal — duidelijker dan "FR" alleen.
   ========================================================================== */
.main-header-menu > .lang-item > .menu-link,
.elementor-nav-menu--main .elementor-nav-menu > .lang-item > a.elementor-item {
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .02em;
	padding: .34em .78em;
	border: 1px solid currentColor;
	border-radius: 999px;
	opacity: .72;
	line-height: 1.5;
	transition: opacity .15s ease, background-color .15s ease;
}

.main-header-menu > .lang-item > .menu-link:hover,
.main-header-menu > .lang-item > .menu-link:focus-visible,
.elementor-nav-menu--main .elementor-nav-menu > .lang-item > a.elementor-item:hover,
.elementor-nav-menu--main .elementor-nav-menu > .lang-item > a.elementor-item:focus-visible {
	opacity: 1;
	background-color: rgba(109, 194, 188, .16);
}

/* Astra tekent standaard een onderstreping/hoogte op menu-items; die hoort niet
   bij een pill. */
.ast-below-header-bar .main-header-menu > .lang-item > .menu-link {
	height: auto;
	align-self: center;
}

.main-header-menu > .lang-item,
.elementor-nav-menu--main .elementor-nav-menu > .lang-item {
	display: flex;
	align-items: center;
}

/* Vlagafbeeldingen van Polylang, mochten ze ergens nog terugkomen. */
.lang-item img.iclflag,
.lang-item .lang-flag { display: none; }


/* ==========================================================================
   8. De mobiele header hoorde er ook bij
   --------------------------------------------------------------------------
   De merkkleur was alleen op de desktoprij (`ast-below-header-bar`) gezet. De
   mobiele header gebruikt een andere rij (`ast-primary-header-bar`) en bleef dus
   licht. Dat viel extra op omdat het logo wit is: op een witte balk verdwenen de
   letters "Vlot" en de huisomtrek volledig en bleef alleen het teal-groene deel
   ("€ weg") zichtbaar. Het logo léék half stuk, maar was gewoon onzichtbaar.
   ========================================================================== */
@media (max-width: 921px) {
	body:not(.ast-theme-transparent-header) .ast-mobile-header-wrap .ast-primary-header-bar,
	body:not(.ast-theme-transparent-header) .ast-mobile-header-wrap .main-header-bar {
		background-color: #083535;
	}

	/* Hamburger en het uitklapmenu volgen dezelfde kleurstelling. */
	body:not(.ast-theme-transparent-header) .ast-mobile-header-wrap .menu-toggle,
	body:not(.ast-theme-transparent-header) .ast-mobile-header-wrap .menu-toggle .ahfb-svg-iconset svg {
		color: #ffffff;
		fill: #ffffff;
	}

	.ast-mobile-header-content .main-header-menu,
	.ast-mobile-header-content {
		background-color: #083535;
	}
	.ast-mobile-header-content .menu-link,
	.ast-mobile-header-content .ast-menu-toggle {
		color: #ffffff !important;
		border-color: rgba(255, 255, 255, .12);
	}
	.ast-mobile-header-content .menu-item:hover > .menu-link,
	.ast-mobile-header-content .current-menu-item > .menu-link {
		color: #6bc290 !important;
	}

	/* Iets meer hoogte zodat het logo ademruimte houdt. */
	.ast-mobile-header-wrap .ast-primary-header-bar { min-height: 68px; }
	.site-branding .site-logo-img .custom-logo { height: 40px; }
}