/* ============================================================
   Bconnect — Kennismaking-pagina (conversie-landing, /kennismaken/)
   ------------------------------------------------------------
   Tokens uit tokens.css. Visuele taal afgestemd op de site-hero's
   (lg-hero / km-form-card): lavendel wash, grote display-kop,
   witte kaarten met gelaagde navy-schaduw, gradient-haarlijn.

   Twee Hello-Elementor-valkuilen zijn hier relevant:
   - reset.css zet `button:hover, button:focus { background-color:#c36 }`
     (0,1,1) en verslaat elke kale button-kleur. Elke button in dit
     bestand krijgt daarom een eigen :hover/:focus-staat met minstens
     twee classes (0,2,0).
   - `.elementor img { border-radius: 0 }` (0,1,1) verslaat kale
     img-selectors; de logo's hebben geen radius nodig, dus n.v.t.
   ============================================================ */

/* ---- ÉÉN actie: nav + footer-links verbergen, logo behouden ----
   Gescoped op de body-class .bc-conversie (meta _bc_landing=1). */
.bc-conversie .nav-links,
.bc-conversie .nav-cta,
.bc-conversie .nav-toggle { display: none !important; }
.bc-conversie .site-footer .footer-grid { display: none !important; }
/* Het uitklapblok met studentenjobs (`<details class="footer-jobs">`) hoort
   bij de footer-links en moet dus mee verborgen (12-08-2026). Stond er
   eerst niet bij: dan bleef er op deze pagina een losse "Toon meer"-knop
   over in een verder lege donkere band, want de kolommen eromheen waren
   al weg. */
.bc-conversie .site-footer .footer-jobs { display: none !important; }
.bc-conversie .site-footer .footer-bottom { border-top: 0 !important; }

/* ============================================================
   HERO — copy links, planningsmodule rechts
   ============================================================ */
.km-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	align-items: center;
	padding: clamp(48px, 6vw, 96px) 0 clamp(56px, 6.4vw, 104px);
	background:
		radial-gradient(58% 74% at 86% 6%, rgba(35, 1, 251, 0.12), transparent 60%),
		radial-gradient(52% 68% at 4% 96%, rgba(168, 2, 144, 0.10), transparent 62%),
		var(--c-lavender);
}
/* zachte lichtbaan achter de planningsmodule voor diepte */
.km-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	right: -6%;
	width: 46vw;
	max-width: 720px;
	aspect-ratio: 1;
	transform: translateY(-50%);
	background: radial-gradient(closest-side, rgba(35, 1, 251, 0.10), transparent 70%);
	pointer-events: none;
}
/* Twee kolommen, drie plaatsen: de eyebrow krijgt rij 1 in de linkerkolom,
   daaronder staan de copy (links) en de planningskaart (rechts) samen in
   rij 2. Daardoor ligt de bovenkant van de kaart gelijk met de H1 en niet
   met de eyebrow. `align-items: start` hoort daarbij: met `center` zou de
   kortste kolom binnen de rij verschuiven en zouden de bovenkanten alsnog
   uit elkaar lopen. De rij-gap staat op 0, want de afstand tussen eyebrow
   en H1 wordt door de margin van de eyebrow bepaald. */
.km-grid {
	display: grid;
	grid-template-columns: 1fr minmax(400px, 0.74fr);
	column-gap: clamp(40px, 5vw, 88px);
	row-gap: 0;
	align-items: start;
	width: 100%;
}
.km-grid > .km-eyebrow { grid-column: 1; grid-row: 1; }
.km-grid > .km-copy    { grid-column: 1; grid-row: 2; }
.km-grid > .km-plan-col { grid-column: 2; grid-row: 2; }

/* ---- Copy (links) ---- */
.km-grid > .km-eyebrow { margin-bottom: 20px; font-size: 13px; }
.km-h1 {
	font-family: var(--font-head);
	font-size: clamp(38px, 4.2vw, 58px);
	line-height: 1.04;
	letter-spacing: -0.028em;
	font-weight: var(--fw-bold);
	color: var(--c-navy);
	margin: 0 0 22px;
	max-width: 18ch;
	text-wrap: balance;
}
.km-h1 .accent {
	background: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.km-lead {
	font-size: clamp(17px, 1.3vw, 20px);
	line-height: 1.6;
	color: var(--c-text-muted);
	max-width: 34em;
	margin: 0 0 clamp(32px, 3.4vw, 46px);
}

/* ---- Drie voordelen ---- */
.km-benefits {
	list-style: none;
	margin: 0;
	padding: clamp(24px, 2.2vw, 32px) 0 0;
	border-top: 1px solid var(--c-border);
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2vw, 26px);
	/* ruimer dan de lead: de toelichtingen zijn langer, en met deze breedte
	   blijven ze twee regels i.p.v. drie (scheelt hoogte in de hero) */
	max-width: 41em;
}
.km-benefit { display: flex; align-items: flex-start; gap: 18px; }
.km-benefit-ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--radius-card);
	background: var(--c-white);
	border: 1px solid var(--c-border-soft);
	box-shadow: var(--shadow-soft);
	color: var(--c-navy);
}
.km-benefit-ico svg { width: 22px; height: 22px; }
.km-benefit-h {
	font-family: var(--font-head);
	font-size: clamp(16px, 1.25vw, 18px);
	line-height: 1.3;
	letter-spacing: -0.01em;
	font-weight: var(--fw-bold);
	color: var(--c-navy);
	margin: 0 0 6px;
}
.km-benefit-p {
	font-family: var(--font-body);
	font-size: clamp(14.5px, 1.05vw, 15.5px);
	line-height: 1.6;
	color: var(--c-text-muted);
	margin: 0;
}

/* ============================================================
   PLANNINGSMODULE (Calendly-embed)
   ------------------------------------------------------------
   .km-booking-slot is de huls waar sinds 12-08-2026 de echte
   Calendly-embed in zit; de kaart eromheen is ongewijzigd.
   ============================================================ */
.km-plan-col { width: 100%; min-width: 0; }
.km-plan-card {
	position: relative;
	overflow: hidden;
	background: var(--c-white);
	border: 1px solid var(--c-border-soft);
	border-radius: var(--radius-feature);
	box-shadow:
		0 2px 4px rgba(20, 20, 100, 0.06),
		0 34px 68px -24px rgba(20, 20, 100, 0.42),
		0 12px 28px -14px rgba(170, 2, 142, 0.18);
	padding: clamp(24px, 2.4vw, 34px) clamp(22px, 2.2vw, 32px) clamp(24px, 2.4vw, 32px);
}
/* gradient-accentlijn bovenaan de kaart */
.km-plan-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 5px;
	background: var(--gradient-brand);
}
.km-plan-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: clamp(18px, 1.8vw, 24px);
}
.km-plan-mark {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--radius-card);
	background: var(--gradient-brand);
	color: var(--c-white);
	box-shadow: 0 8px 20px -8px rgba(35, 1, 123, 0.45);
}
.km-plan-mark svg { width: 20px; height: 20px; }
.km-plan-h {
	font-family: var(--font-head);
	font-size: clamp(20px, 1.6vw, 25px);
	line-height: 1.15;
	letter-spacing: -0.015em;
	font-weight: var(--fw-bold);
	color: var(--c-navy);
	margin: 0;
}
.km-plan-note {
	font-family: var(--font-body);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--c-text-soft);
	text-align: center;
	margin: 18px 0 0;
}

/* De agenda zelf is een iframe van Calendly; die stylen we niet mee.
   Alleen de huls krijgt maten, zodat de kaart eromheen zijn vorm houdt.
   Hier stonden tot 12-08-2026 de regels voor de nepkalender
   (.km-cal*, .km-slot*); die zijn met dat prototype meegegaan. */
/* De huls is het positioneringsvlak voor het laadscherm hieronder. */
.km-booking-slot { position: relative; }

.km-calendly {
	position: relative;
	z-index: 1;
	width: 100%;
	min-width: 0;
	margin: 4px 0 0;
}
/* Calendly rendert in de iframe zijn eigen achtergrond. Zonder deze regel
   steekt die vierkant door de afgeronde hoeken van .km-plan-card heen. */
.km-calendly iframe { border-radius: 12px; }
/* ---- Laadscherm ------------------------------------------------
   Calendly's iframe is de eerste seconden een leeg wit vlak. Dit vult
   dat op in de merkkleuren.

   HET LIGT ERACHTER, NIET EROVER (z-index 0 tegen 1 op .km-calendly).
   Dat is bewust: een lege iframe is doorzichtig, dus je ziet het
   laadscherm; zodra Calendly zijn eigen witte pagina tekent dekt de
   iframe het af. Daarmee is er geen timer nodig die raadt wanneer het
   klaar is, en kan het laadscherm de agenda ook nooit blokkeren als de
   JS uitvalt. Een eerdere versie verdween na 12s vanzelf, maar dan zie
   je bij een trage verbinding alsnog het lege vlak dat we juist
   wilden afdekken.

   kennismaken.js zet daarnaast `.is-klaar` op het load-event van de
   iframe. Dat is de nette laag erbovenop: het ruimt het laadscherm
   echt op (visibility + pointer-events) in plaats van het alleen te
   bedekken, voor het geval Calendly ooit een doorzichtige achtergrond
   zou gebruiken.
   ---------------------------------------------------------------- */
.km-booking-laden {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	border-radius: 12px;
	background: var(--c-white);
}
.km-booking-slot.is-klaar .km-booking-laden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.km-booking-laden-t {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-text-soft);
	margin: 0;
}

/* Drie pulserende bollen in de merkgradient — hetzelfde motief als de
   typ-indicator in de chatvisuals, zodat het laden bij de site hoort. */
.km-booking-dots { display: inline-flex; gap: 9px; }
.km-booking-dots i {
	width: 11px;
	height: 11px;
	border-radius: var(--radius-pill);
	background: var(--gradient-brand);
	animation: kmLadenPuls 1.15s var(--ease) infinite;
}
.km-booking-dots i:nth-child(2) { animation-delay: .16s; }
.km-booking-dots i:nth-child(3) { animation-delay: .32s; }

@keyframes kmLadenPuls {
	0%, 70%, 100% { transform: scale(.62); opacity: .38; }
	35%           { transform: scale(1);   opacity: 1; }
}

/* Zonder beweging: geen puls en geen fade, alleen de tekst. */
@media (prefers-reduced-motion: reduce) {
	.km-booking-dots i { animation: none; opacity: .75; transform: none; }
	.km-booking-slot.is-klaar .km-booking-laden { transition: none; }
}

.km-booking-leeg {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.55;
	color: var(--c-text-muted);
	margin: 0;
}

/* ---- Plan B ----------------------------------------------------
   Verschijnt als er na een paar seconden geen iframe in de container
   staat: Cookiebot, een adblocker, een storing bij Calendly of een
   verbinding die het niet trekt. kennismaken.js zet `.is-terugval` op
   de huls; zie de kop van dat bestand en bconnect_booking_terugval()
   in functions.php.

   HET LIGT OVER DE EMBED-CONTAINER (z-index 2 tegen 1 op .km-calendly
   en 0 op het laadscherm). Die container is dan een lege, doorzichtige
   div van 540px, dus dit blok neemt precies de plek in waar de agenda
   had gestaan — zonder dat er iets in de kaart verschuift.

   GEEN FOUTMELDING. Dit is een gewoon alternatief, dus: geen kader,
   geen icoon, geen waarschuwingskleur. Witte achtergrond zoals de kaart
   eromheen, dezelfde navy voor de kop, en de knop is de gewone
   .btn-primary van de site.
   ---------------------------------------------------------------- */
.km-terugval {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 2;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: clamp(18px, 2vw, 28px) clamp(8px, 1.4vw, 20px);
	border-radius: 12px;
	background: var(--c-white);
	text-align: center;
}
.km-booking-slot.is-terugval .km-terugval { display: flex; }

/* "Kop, klein": kleiner dan .km-plan-h erboven, zodat de kaart zijn
   eigen kop houdt en dit een tussenkopje blijft. */
.km-terugval-h {
	font-family: var(--font-head);
	font-size: 16.5px;
	line-height: 1.3;
	letter-spacing: -0.01em;
	font-weight: var(--fw-semibold);
	color: var(--c-navy);
	margin: 0;
}
.km-terugval-t {
	font-family: var(--font-body);
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--c-text-soft);
	max-width: 40ch;
	margin: 0;
}
/* De knop erft .btn/.btn-primary; hier alleen de plaatsing. */
.km-terugval-btn { margin-top: 2px; }

/* Een <button> met het uiterlijk van een tekstlink: hij navigeert niet
   maar heropent de Cookiebot-banner, dus <a href> zou liegen over wat er
   gebeurt. De browser-default van een knop moet er daarvoor helemaal af. */
.km-terugval-cookies { margin: 0; }
.km-terugval-link {
	font-family: var(--font-body);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--c-text-soft);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color .18s var(--ease);
}
.km-terugval-link:hover { color: var(--c-navy); }

/* Kleiner en gedempt: de derde uitweg, niet de hoofdroute. */
.km-terugval-alt {
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.55;
	color: var(--c-text-muted);
	max-width: 40ch;
	margin: 0;
}
.km-terugval-alt a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.km-terugval-alt a:hover { color: var(--c-navy); }

/* ============================================================
   SOCIAL PROOF — witte logosectie, één rustige rij
   ============================================================ */
.km-logos {
	padding: clamp(44px, 5vw, 72px) 0;
	background: var(--c-white);
}
.km-logos-h {
	font-family: var(--font-head);
	font-size: clamp(17px, 1.4vw, 21px);
	line-height: 1.4;
	letter-spacing: -0.01em;
	font-weight: var(--fw-semibold);
	color: var(--c-navy);
	text-align: center;
	margin: 0 0 clamp(26px, 3vw, 40px);
}
.km-logos-row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(30px, 5vw, 76px);
}
.km-logo { display: flex; align-items: center; justify-content: center; }
/* Alle bronbestanden zijn monochroom te maken met brightness(0): dat zet
   RGB op 0 en houdt de alpha (en dus de vorm) intact. Drie van de vijf
   bronnen zijn wit-op-transparant (bedoeld voor navy banden) en zouden
   zonder deze filter onzichtbaar zijn op wit. */
.km-logo img {
	height: var(--km-logo-h, 30px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	filter: brightness(0);
	opacity: .62;
	transition: opacity .25s var(--ease);
}
.km-logo img:hover { opacity: .9; }

/* ============================================================
   WAT GEBEURT ER — drie stappen
   ============================================================ */
.km-steps {
	padding: clamp(56px, 7vw, 104px) 0;
	background: var(--c-lavender);
}
.km-steps .au-head { margin-bottom: clamp(40px, 5vw, 64px); }
.km-steps .au-h2 { font-size: clamp(30px, 3.2vw, 44px); }
.km-steps-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.4vw, 34px);
}
/* Bolletje en titel naast elkaar op rij 1, de alinea eronder over de volle
   breedte van de kaart (12-08-2026; stond daarvoor alle drie onder elkaar).
   Als grid en niet als flex-rij met een geneste wrapper, zodat de markup
   niet hoeft te veranderen en de alinea toch onder het bolletje door loopt
   in plaats van ernaast te blijven hangen. */
.km-step {
	position: relative;
	background: var(--c-white);
	border: 1px solid var(--c-border-soft);
	border-radius: var(--radius-feature);
	padding: clamp(28px, 2.6vw, 40px) clamp(26px, 2.4vw, 34px);
	transition: transform .2s var(--ease), box-shadow .25s var(--ease);
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 16px;
	row-gap: 18px;
	align-items: center;
}
.km-step > .km-step-n { grid-column: 1; grid-row: 1; }
.km-step > .km-step-h { grid-column: 2; grid-row: 1; }
.km-step > .km-step-p { grid-column: 1 / -1; grid-row: 2; }
.km-step:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-hover);
}
.km-step-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--radius-pill);
	background: var(--gradient-brand);
	color: var(--c-white);
	font-family: var(--font-head);
	font-weight: var(--fw-bold);
	font-size: 21px;
	/* De ruimte onder het bolletje wordt nu door de rij-gap gezet, niet
	   meer door een eigen margin — anders zakt de titel ernaast mee. */
	flex: 0 0 auto;
	box-shadow: 0 10px 24px -6px rgba(35, 1, 123, 0.45);
}
.km-step-h {
	font-family: var(--font-head);
	font-size: clamp(18px, 1.5vw, 22px);
	line-height: 1.25;
	font-weight: var(--fw-bold);
	color: var(--c-navy);
	margin: 0;
}
.km-step-p {
	font-family: var(--font-body);
	font-size: clamp(14.5px, 1.1vw, 16px);
	line-height: 1.6;
	color: var(--c-text-muted);
	margin: 0;
}

/* ============================================================
   RESPONSIVE
   ------------------------------------------------------------
   Tablet en mobiel: tekst boven, planningsmodule eronder.
   ============================================================ */
@media (max-width: 1024px) {
	/* Eén kolom. De vaste rij/kolom-plaatsing van de desktopvariant moet hier
	   los, anders maakt .km-plan-col een tweede kolom naast het raster.
	   row-gap blijft 0 zoals op desktop: de eyebrow houdt zo zijn eigen 20px
	   naar de kop, en de kaart krijgt de ruimte via een eigen margin. */
	.km-grid {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 0;
		align-items: start;
	}
	.km-grid > .km-eyebrow,
	.km-grid > .km-copy,
	.km-grid > .km-plan-col { grid-column: 1; grid-row: auto; }
	.km-grid > .km-plan-col { margin-top: clamp(32px, 5vw, 48px); }
	.km-hero::after { display: none; }
	.km-h1 { max-width: 22ch; }
	.km-lead, .km-benefits { max-width: none; }
	.km-plan-col { max-width: 470px; margin-left: auto; margin-right: auto; }
	.km-steps-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 767px) {
	.km-hero { padding: clamp(36px, 8vw, 56px) 0 clamp(40px, 8vw, 60px); }
	.km-plan-col { max-width: none; }
	.km-benefit { gap: 14px; }
	.km-benefit-ico { width: 40px; height: 40px; }
	.km-benefit-ico svg { width: 20px; height: 20px; }
	/* Logo's: net raster van 3 + 3 + 1. Het 6-koloms raster met spans van 2
	   zet er drie per rij; alleen de laatste rij moet je zelf centreren.
	   GAAT UIT VAN ZEVEN LOGO'S (12-08-2026, JLR en Mitsubishi erbij).
	   Verandert dat aantal, pas dan de nth-child hieronder aan: bij een rest
	   van 1 hoort `3 / span 2`, bij een rest van 2 horen `2 / span 2` en
	   `4 / span 2` op de laatste twee. */
	.km-logos-row {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		justify-items: center;
		align-items: center;
		gap: 22px 8px;
	}
	.km-logo { grid-column: span 2; }
	.km-logo:nth-child(7) { grid-column: 3 / span 2; }
	/* 0.78 = de grootste factor waarbij ook het breedste logo (ALKU) nog
	   binnen twee rasterkolommen past en dus niet gelijkgetrokken wordt. */
	.km-logo img { height: calc(var(--km-logo-h, 30px) * 0.78); }
}
@media (max-width: 359px) {
	/* Zeer smalle toestellen: nog een stap kleiner, zodat het breedste logo
	   binnen zijn rasterkolommen blijft en niet kleiner uitvalt dan de rest. */
	.km-logo img { height: calc(var(--km-logo-h, 30px) * 0.62); }
}
@media (max-width: 480px) {
	.km-plan-card { padding: 20px 14px 22px; }
}