/* ============================================================
   WhatsApp-widget v3 (goedgekeurd 11-09-2026): floating chat-widget
   i.p.v. de centrale kantoorselector-modal. Zie AI-LOGBOOK.md voor het
   volledige besluitvormingstraject en het goedgekeurde ontwerpvoorstel.
   Backend/eventmodel/tracking ongewijzigd — dit bestand is uitsluitend
   presentatie.

   Mobile-positioneringsfix (11-09-2026, later): op mobiel stond de
   WhatsApp-trigger rechtsonder naast/over de bestaande Tawk.to-widget.
   Op ≤767px staat de trigger nu LINKSONDER, Tawk.to blijft ongewijzigd
   rechtsonder. Het breekpunt (767px) is bewust gelijkgetrokken met dat
   van de site-brede "Solliciteer vandaag"-balk (WPCode-snippet,
   .experza-solliciteer-fixed — zie onderaan dit bestand), die op
   diezelfde breedte van een verticale rechter-tab naar een
   volledige-breedte balk onderaan verandert.

   Overflow-bugfix (11-09-2026, later): op mobiel kon de pagina horizontaal
   scrollen. Root-cause-onderzoek (zie AI-LOGBOOK.md) sloot de WhatsApp-
   widget en de "Solliciteer vandaag"-balk uit als oorzaak — hun eigen
   CSS is structureel niet in staat om de documentbreedte te vergroten
   (fixed-positionering met expliciete left+right, geen ontsnappende
   kinderen). De sterkste kandidaat die WEL is gevonden ligt buiten deze
   plugin (een megamenu-dropdownpaneel van het jet-menu-plugin, "Meer"-item
   in de header) en is NIET in deze ronde aangepast — zie het rapport.
   De `html,body{max-width:100%}`-regel verderop is een door de
   opdrachtgever expliciet toegestaan, niet-maskerend veiligheidsnet (geen
   overflow-x:hidden), plus extra defensieve max-width/box-sizing op de
   eigen widget-elementen hieronder. Geen van beide is de root-cause-fix
   van het werkelijke (jet-menu-)probleem.
   ============================================================ */

/* Veiligheidsnet, expliciet toegestaan door de opdrachtgever — geen
   overflow-x:hidden/clip, enkel een harde bovengrens op de documentbreedte.
   Lost de werkelijke jet-menu-oorzaak niet op (zie hierboven/rapport), maar
   voorkomt dat de pagina zelf breder dan de viewport kan renderen. */
html,
body {
	max-width: 100%;
}

.vwc-widget {
	--vwc-wa-green: #25D366;
	--vwc-wa-green-dark: #128C4A;
	--vwc-wa-header: #075E54;
	--vwc-experza-pink: #E5005B;
	--vwc-ink: #1d211f;
	--vwc-ink-dim: #5c625d;
	--vwc-border: #e4e2da;
	--vwc-surface: #ffffff;
	--vwc-surface-2: #f6f7f5;
	/* Desktop (>767px): verticale afstand t.o.v. de bestaande Tawk.to-widget
	   (rechtsonder). Enige waarde die je nodig hebt aan te passen bij een
	   visuele botsing — verder niets in dit bestand hoeft daarvoor te wijzigen. */
	--vwc-stack-offset: 96px;
	/* Mobiel (≤767px): afstand t.o.v. de onderkant van het scherm, ZODAT de
	   trigger/het paneel boven de site-brede "Solliciteer vandaag"-balk
	   blijven. Die balk is zelf ~49px hoog + 15px marge; de site geeft er
	   zelf 88px ruimte voor (zie de padding-bottom-regel in de
	   .experza-solliciteer-fixed-snippet) — hier bewust dezelfde marge
	   aangehouden. Enige waarde die je nodig hebt aan te passen bij een
	   visuele botsing op mobiel. */
	--vwc-mobile-safe-bottom: 88px;
}

/* --- Floating trigger (gesloten state — het enige dat initieel zichtbaar is, nooit automatisch geopend) --- */
.vwc-trigger {
	box-sizing: border-box;
	position: fixed;
	right: 20px;
	bottom: var(--vwc-stack-offset);
	max-width: calc(100vw - 32px);
	z-index: 99990;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--vwc-wa-green);
	color: #ffffff;
	border: none;
	border-radius: 999px;
	padding: 12px 18px 12px 12px;
	font-family: "Futura", inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(18, 140, 74, 0.35), 0 2px 6px rgba(0, 0, 0, 0.08);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.vwc-trigger:hover,
.vwc-trigger:focus-visible {
	background: var(--vwc-wa-green-dark);
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(18, 140, 74, 0.4), 0 3px 8px rgba(0, 0, 0, 0.1);
}
.vwc-trigger-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex: none;
}
.vwc-trigger-icon svg {
	width: 100%;
	height: 100%;
}
.vwc-trigger-label {
	white-space: nowrap;
}

/* Mobiel: LINKSONDER (Tawk.to staat rechtsonder — niet meer naast elkaar
   concurreren aan dezelfde kant), enkel de ronde knop, geen tekstlabel
   (duimvriendelijk, compact). Bottom-offset houdt rekening met de
   "Solliciteer vandaag"-balk onderaan én met de iOS-safe-area. */
@media (max-width: 767px) {
	.vwc-trigger {
		left: 16px;
		right: auto;
		bottom: calc(var(--vwc-mobile-safe-bottom) + env(safe-area-inset-bottom, 0px));
		padding: 14px;
		width: 52px;
		height: 52px;
	}
	.vwc-trigger-label {
		display: none;
	}
	.vwc-trigger-icon {
		width: 24px;
		height: 24px;
	}
}

/* --- Panel (open state) — compacte, geankerde kaart, GEEN centrale modal, GEEN backdrop --- */
.vwc-panel {
	box-sizing: border-box;
	position: fixed;
	right: 20px;
	bottom: calc(var(--vwc-stack-offset) + 64px);
	z-index: 99991;
	width: 350px;
	max-width: calc(100vw - 32px);
	background: var(--vwc-surface);
	border-radius: 16px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	font-family: "Futura", inherit;
	transform-origin: bottom right;
	opacity: 0;
	transform: translateY(8px) scale(0.96);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}
.vwc-panel.is-open {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
	.vwc-panel {
		transition: opacity 0.12s linear;
		transform: none !important;
	}
	.experza-solliciteer-fixed {
		transition: opacity 0.12s linear;
	}
}

.vwc-panel-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 14px 14px 16px;
	background: linear-gradient(135deg, var(--vwc-wa-header), var(--vwc-wa-green));
	color: #ffffff;
}
/* Bugfix 12-09-2026 (browserverificatie): Elementor's eigen lazy-load-CSS voor
   achtergrondafbeeldingen bevat de regel
   `.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) *
   { background-image: none !important; }` — specificiteit (0,5,0). Omdat de
   WhatsApp-widget `position:fixed` is, wordt de ouder-sectie waarschijnlijk
   nooit als "gelazyload" gemarkeerd (Elementor's IntersectionObserver ziet
   'm nooit als "in beeld gescrold", want de widget is altijd zichtbaar
   ongeacht scrollpositie) — waardoor de gradient-achtergrond hierboven
   permanent onzichtbaar bleef (witte tekst/×-knop op transparante
   achtergrond). Bewezen via een geïsoleerde browserprototype-test
   (zie AI-LOGBOOK.md, 12-09-2026): enkel een gelijke-of-hogere specificiteit
   dan (0,5,0) wint dit gevecht; onderstaande selector gebruikt 6 echte,
   bestaande klassen uit de daadwerkelijke DOM-boom van deze widget (0,6,0) —
   geen Elementor-bestand aangeraakt, geen lazy-load-regel uitgeschakeld. */
.elementor-element-vwc001cta .elementor-shortcode .vwc-widget .vwc-panel.is-open .vwc-panel-header {
	background-image: linear-gradient(135deg, var(--vwc-wa-header), var(--vwc-wa-green)) !important;
}
.vwc-panel-header-icon {
	width: 30px;
	height: 30px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 50%;
}
.vwc-panel-header-icon svg {
	width: 18px;
	height: 18px;
}
.vwc-panel-header-text {
	flex: 1;
	line-height: 1.25;
}
.vwc-panel-header-text strong {
	display: block;
	font-size: 14px;
	font-weight: 700;
}
.vwc-panel-header-text span {
	display: block;
	font-size: 11.5px;
	opacity: 0.85;
	font-family: "Source Serif 4", Georgia, serif;
}
.vwc-panel-close {
	width: 28px;
	height: 28px;
	flex: none;
	border: none;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	border-radius: 50%;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}
.vwc-panel-close:hover,
.vwc-panel-close:focus-visible {
	background: rgba(255, 255, 255, 0.28);
}

.vwc-panel-body {
	padding: 14px 16px 16px;
}
.vwc-panel-intro {
	margin: 0 0 12px;
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--vwc-ink);
}
.vwc-office-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.vwc-office-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	text-align: left;
	cursor: pointer;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--vwc-border);
	background: var(--vwc-surface-2);
	font-family: "Futura", inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--vwc-ink);
	transition: border-color 0.12s ease, background-color 0.12s ease;
}
.vwc-office-row:hover,
.vwc-office-row:focus-visible {
	border-color: var(--vwc-wa-green);
	background: #ffffff;
}
.vwc-office-row.is-recommended {
	background: #eafaf0;
	border-color: #b7e6c9;
}
.vwc-office-row-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.vwc-office-tag {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--vwc-experza-pink);
}
.vwc-office-arrow {
	color: var(--vwc-ink-dim);
	font-size: 16px;
	font-weight: 400;
}

.vwc-panel-footer {
	margin: 12px 0 0;
	font-size: 11px;
	color: var(--vwc-ink-dim);
	text-align: center;
}

/* Mobiel: bottom-sheet i.p.v. geankerde kaart rechtsboven de trigger.
   Volledige breedte (min. marges) behouden i.p.v. links-verankerd, zodat de
   kantoorselectie op smalle schermen (360px) niet krap wordt en er geen
   horizontale overflow ontstaat — de trigger zelf staat wel linksonder.
   Bottom-offset gebruikt dezelfde --vwc-mobile-safe-bottom als de trigger,
   zodat het paneel nooit over de "Solliciteer vandaag"-balk valt. */
@media (max-width: 767px) {
	.vwc-panel {
		left: 12px;
		right: 12px;
		bottom: calc(var(--vwc-mobile-safe-bottom) + env(safe-area-inset-bottom, 0px));
		width: auto;
		/* Expliciete max-width i.p.v. "none" — puur defensief: identiek aan wat
		   left+right al opleveren (100vw - 24px), maar als extra harde grens
		   zodat niets (bv. lange kantoornamen) het paneel breder kan duwen. */
		max-width: calc(100vw - 24px);
		max-height: calc(100vh - var(--vwc-mobile-safe-bottom) - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px) - 24px);
		display: flex;
		flex-direction: column;
		border-radius: 18px;
		transform-origin: bottom left;
		transform: translateY(16px) scale(0.98);
	}
	.vwc-panel.is-open {
		transform: translateY(0) scale(1);
	}
	.vwc-panel-body {
		overflow-y: auto;
	}
	.vwc-office-list {
		max-height: 40vh;
		overflow-y: auto;
	}
}

/* --- Site-brede "Solliciteer vandaag"-balk (WPCode-snippet, niet onderdeel
   van deze plugin — selector .experza-solliciteer-fixed): tijdelijk
   inschuiven zolang het WhatsApp-paneel open staat, ENKEL op desktop/tablet
   (>767px). Op mobiel blijft de balk zichtbaar (op uitdrukkelijk verzoek),
   omdat --vwc-mobile-safe-bottom hierboven al garandeert dat het paneel er
   niet overheen valt. Nette transition i.p.v. abrupt display:none; het
   bestand van de balk zelf wordt niet aangeraakt. --- */
.experza-solliciteer-fixed {
	transition: transform 0.25s ease, opacity 0.2s ease;
}
@media (min-width: 768px) {
	body.vwc-widget-open .experza-solliciteer-fixed {
		transform: translateY(-50%) translateX(140%);
		opacity: 0;
		pointer-events: none;
	}
}
/* Defensieve, puur additieve harding — het bronbestand van de balk zelf
   (WPCode-snippet) blijft ongewijzigd en definieert zelf al left:15px;
   right:15px op mobiel, wat normaliter al exact 100vw-30px oplevert. Deze
   regel verandert daar niets aan; ze voegt enkel een expliciete harde
   bovengrens toe als extra vangnet. */
@media (max-width: 767px) {
	.experza-solliciteer-fixed {
		box-sizing: border-box;
		max-width: calc(100vw - 30px);
	}
}