/* ============================================================
   Bconnect — bedankpagina adviesgesprek (/bedankt-adviesgesprek/)
   ------------------------------------------------------------
   Platte tekstpagina, links uitgelijnd, in de gewone .container
   van de site. Bewust GEEN kaarten, kaders, schaduwen,
   achtergrondvlakken per blok, icoontegels of genummerde
   gradient-bolletjes: dit is een bevestiging die je één keer
   leest, geen salespagina.

   DE GRADIENT STAAT OP PRECIES ÉÉN PLEK: het accentwoord in de
   H1 (.ba-h1 .accent). De H2's zijn gewoon navy. Zet je hier een
   tweede accent bij, dan verdwijnt de enige hiërarchie die de
   pagina nog heeft.

   ÉÉN KOLOMBREEDTE. De .container van dit thema is 1520px en een
   alinea die zo ver uitloopt leest niet. Alles staat daarom in
   .ba-in, één kolom van 900px waar élk blok in past — ook de
   drie kolommen van blok 2. Bewust niet per blok een eigen
   max-width: dan stoppen de alinea's op een andere breedte dan
   de kolommen en rafelt de rechterrand. Het idee van een
   leesmaat volgt /kennismaken/ (.km-lead 34em, .km-benefits
   41em); alleen ligt hij hier op één plek in plaats van vijf.

   Hello-Elementor-valkuil die hier speelt: `a:hover` staat op
   documentniveau, dus de links in de slotregel hebben een
   :hover met twee classes (0,2,0) nodig.
   ============================================================ */

.ba-in { max-width: 900px; }

.ba-page {
	background: var(--c-white);
	padding: clamp(32px, 3.6vw, 52px) 0 clamp(44px, 4.8vw, 72px);
	text-align: left;
}

/* Afstand tussen de blokken. Bewust krap: de pagina moet kort ogen. */
.ba-blok { margin-bottom: clamp(30px, 3.2vw, 44px); }

/* ============================================================
   BLOK 1 — hero
   ============================================================ */
.ba-h1 {
	font-family: var(--font-head);
	font-size: clamp(25px, 2.4vw, 34px);
	line-height: 1.15;
	letter-spacing: -0.022em;
	font-weight: var(--fw-bold);
	color: var(--c-navy);
	margin: 0 0 10px;
	text-wrap: balance;
}
.ba-h1 .accent {
	background: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ba-lead {
	font-family: var(--font-body);
	font-size: clamp(15px, 1.1vw, 16.5px);
	line-height: 1.6;
	color: var(--c-text-muted);
	margin: 0;
	text-wrap: pretty;
}

/* ============================================================
   GEDEELD — kop en introregel van blok 2 en 3
   ============================================================ */
.ba-h2 {
	font-family: var(--font-head);
	/* Kleiner dan .au-h2 uit bconnect-shared (36px): op een platte pagina
	   zonder kaders doet een kop van dat formaat te veel. */
	font-size: clamp(18px, 1.5vw, 22px);
	line-height: 1.25;
	letter-spacing: -0.012em;
	font-weight: var(--fw-bold);
	color: var(--c-navy);
	margin: 0 0 6px;
}
.ba-intro {
	font-family: var(--font-body);
	font-size: clamp(14.5px, 1.05vw, 16px);
	line-height: 1.6;
	color: var(--c-text-muted);
	margin: 0 0 clamp(16px, 1.8vw, 22px);
	text-wrap: pretty;
}

/* ============================================================
   BLOK 2 — drie kolommen platte tekst
   ============================================================ */
.ba-kolommen {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* minmax(0,…) zodat een lange regel in één kolom de andere twee niet
	   smaller duwt. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.4vw, 34px);
}
.ba-kolom-h {
	font-family: var(--font-head);
	font-size: clamp(15px, 1.15vw, 16.5px);
	line-height: 1.35;
	letter-spacing: -0.008em;
	font-weight: var(--fw-bold);
	color: var(--c-navy);
	margin: 0 0 4px;
}
.ba-kolom-p {
	font-family: var(--font-body);
	font-size: clamp(14px, 1.05vw, 15.5px);
	line-height: 1.55;
	color: var(--c-text-muted);
	margin: 0;
	text-wrap: pretty;
}

/* ============================================================
   BLOK 3 — twee genummerde punten
   ------------------------------------------------------------
   Gewone <ol> met decimale nummering; geen bolletje, geen
   gradient, geen eigen counter.
   ============================================================ */
.ba-punten {
	list-style: decimal;
	margin: 0;
	padding: 0 0 0 1.35em;
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1.4vw, 18px);
}
.ba-punt {
	font-family: var(--font-body);
	font-size: clamp(14px, 1.05vw, 15.5px);
	line-height: 1.6;
	color: var(--c-text-muted);
	padding-left: 4px;
}
.ba-punt::marker { color: var(--c-navy); font-weight: var(--fw-bold); }
/* Kop van het punt op een eigen regel, in navy — zelfde rol als .ba-kolom-h
   in blok 2, maar inline zodat de <li> één tekstblok blijft. */
.ba-punt-h {
	display: block;
	font-weight: var(--fw-bold);
	color: var(--c-navy);
	margin-bottom: 2px;
}
.ba-punt-p { display: block; text-wrap: pretty; }
.ba-note {
	font-family: var(--font-body);
	font-size: clamp(13px, 1vw, 14px);
	line-height: 1.6;
	color: var(--c-text-soft);
	margin: clamp(14px, 1.6vw, 20px) 0 0;
	text-wrap: pretty;
}

/* ============================================================
   BLOK 4 — één kleine gedempte slotregel
   ------------------------------------------------------------
   Een haarlijn erboven en verder niets: geen kader, geen vlak.
   ============================================================ */
.ba-foot {
	margin: 0;
	padding-top: clamp(16px, 1.8vw, 22px);
	border-top: 1px solid var(--c-border);
	font-family: var(--font-body);
	font-size: clamp(13px, 1vw, 14px);
	line-height: 1.6;
	color: var(--c-text-soft);
	text-wrap: pretty;
}
/* Twee classes (0,2,0) omdat Hello Elementor `a:hover` op documentniveau
   zet; met één class zou de kleurwissel niet doorkomen. */
.ba-foot .ba-foot-link {
	color: var(--c-navy);
	font-weight: var(--fw-semibold);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(20, 20, 100, 0.35);
	/* Nummer en adres mogen nooit middenin afbreken. */
	white-space: nowrap;
	transition: color .18s var(--ease), text-decoration-color .18s var(--ease);
}
.ba-foot .ba-foot-link:hover,
.ba-foot .ba-foot-link:focus-visible {
	color: var(--c-magenta);
	text-decoration-color: var(--c-magenta);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
	/* Drie kolommen naast elkaar worden hier te smal om te lezen. */
	.ba-kolommen { grid-template-columns: 1fr; gap: clamp(16px, 2.4vw, 22px); }
}
@media (max-width: 767px) {
	.ba-page { padding: clamp(26px, 6vw, 36px) 0 clamp(32px, 7vw, 48px); }
	/* Het e-mailadres is breder dan een smal scherm; daar mag het wél
	   afbreken, anders duwt het de pagina horizontaal open. */
	.ba-foot .ba-foot-link { white-space: normal; word-break: break-word; }
}