/*
 * nextlane blokken
 *
 * Alles verwijst naar de merktokens. Geen hexwaarde in dit bestand, Ook terugvalwaarden komen uit inc/tokens.php.
 */

.nlb {
	font-family: var(--nlb-font-body);
	color: var(--nlb-ink);
	position: relative;
	padding: 40px 0;
}
@media (min-width: 992px) { .nlb { padding: 80px 0; } }

.nlb-container {
	max-width: var(--nlb-container);
	margin: 0 auto;
	padding: 0 var(--nlb-gutter);
	position: relative;
	z-index: 2;
}

/* Achtergronden */
.nlb--light   { background: var(--nlb-surface-alt); }
.nlb--surface { background: var(--nlb-surface); }
.nlb--dark    { background: var(--nlb-dark); color: var(--nlb-on-dark); }
.nlb--dark .nlb-muted,
.nlb--dark .nlb-body { color: color-mix(in srgb, var(--nlb-on-dark) 82%, transparent); }

/* Typografie */
.nlb-h1, .nlb-h2, .nlb-h3 {
	font-family: var(--nlb-font-heading);
	font-weight: var(--nlb-heading-weight);
	text-transform: var(--nlb-heading-transform);
	margin: 0 0 .5em;
	line-height: 1.1;
}
.nlb-h1 { font-size: clamp(32px, 5vw, 56px); }
.nlb-h2 { font-size: clamp(26px, 3.4vw, 40px); }
.nlb-h3 { font-size: clamp(19px, 2vw, 24px); line-height: 1.25; }

.nlb-lead  { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; margin: 0 0 1em; }
.nlb-body  { line-height: 1.65; margin: 0 0 1em; }
.nlb-intro { color: var(--nlb-muted); max-width: 62ch; margin: 0 0 32px; }
.nlb-muted { color: var(--nlb-muted); }
.nlb-eyebrow {
	font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
	font-weight: 600; margin: 0 0 8px; opacity: .8;
}

/* Knoppen — minimaal 48px hoog, dat is de aanraakregel */
.nlb-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 12px 22px;
	margin: 0 10px 10px 0;
	border: 2px solid transparent; border-radius: var(--nlb-radius);
	font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.nlb-btn--accent  { background: var(--nlb-accent); border-color: var(--nlb-accent); color: var(--nlb-accent-contrast); }
.nlb-btn--outline { background: transparent; border-color: currentColor; color: inherit; }
.nlb-btn--ghost   { background: transparent; border-color: currentColor; color: inherit; }
.nlb-btn--light   { background: var(--nlb-on-dark); color: var(--nlb-ink); border-color: var(--nlb-on-dark); }
.nlb-btn--block   { display: flex; width: 100%; margin-right: 0; margin-top: auto; }
.nlb-btn:hover    { opacity: .9; }

/* ---------- Hero ---------- */
.nlb-hero { padding: 0; overflow: hidden; }
.nlb-hero__media { position: absolute; inset: 0; z-index: 0; }
.nlb-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nlb-hero__overlay { position: absolute; inset: 0; background: var(--nlb-dark); }

.nlb-hero__inner { padding-top: 48px; padding-bottom: 48px; }
@media (min-width: 992px) {
	.nlb-hero__inner { padding-top: 88px; padding-bottom: 88px; }
	.nlb-hero--form .nlb-hero__inner {
		display: grid; grid-template-columns: 1fr minmax(360px, 440px); gap: 48px; align-items: start;
	}
}
.nlb-hero__actions { margin: 24px 0 0; }

/* Op mobiel staat het beeld onder de tekst, niet erachter */
@media (max-width: 767px) {
	.nlb-hero__media { position: relative; height: 220px; }
	.nlb-hero--form.nlb--dark,
	.nlb-hero.nlb--dark { background: var(--nlb-dark); }
}

.nlb-hero__panel {
	background: var(--nlb-surface-alt); color: var(--nlb-ink);
	border-radius: var(--nlb-radius); box-shadow: var(--nlb-shadow);
	padding: 28px;
}
@media (min-width: 992px) { .nlb-hero__panel { padding: 32px; } }

/* Op een dark hero mag het paneel de on-dark kleur niet erven; anders
   worden labels en velden zwart-op-donker en verdwijnen ze (m.n. mobiel). */
.nlb--dark .nlb-hero__panel,
.nlb--dark .nlb-hero__panel * { color: var(--nlb-ink); }
.nlb--dark .nlb-hero__panel .nlb-muted { color: var(--nlb-muted); }

/* Onder 992px grijpt de desktop-grid nog niet; paneel stapelt en krijgt lucht. */
@media (max-width: 991px) {
	.nlb-hero__panel { margin-top: 28px; width: 100%; }
}

/* Stroken onder de hero */
.nlb-hero__strips { background: var(--nlb-surface-alt); color: var(--nlb-ink); padding: 24px 0; }
.nlb-strip { list-style: none; margin: 0 0 16px; padding: 0; }
.nlb-strip:last-child { margin-bottom: 0; }

.nlb-strip--stats { display: grid; gap: 20px; }
@media (min-width: 768px) { .nlb-strip--stats { grid-template-columns: repeat(3, 1fr); } }
.nlb-strip--stats li { border-top: 2px solid var(--nlb-line); padding-top: 12px; }
.nlb-stat { font-family: var(--nlb-font-heading); font-size: 30px; display: block; }
.nlb-stat__label { display: block; font-size: 13px; font-weight: 600; margin-top: 2px; }
.nlb-stat__source { display: block; font-size: 11px; color: var(--nlb-muted); margin-top: 4px; }

.nlb-strip--checks { display: grid; gap: 12px; }
@media (min-width: 768px) { .nlb-strip--checks { grid-template-columns: repeat(3, 1fr); } }
.nlb-strip--checks li { position: relative; padding-left: 28px; font-weight: 600; }
.nlb-strip--checks li::before {
	content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px;
	border: 2px solid var(--nlb-accent); border-radius: 3px;
	background: var(--nlb-accent);
}

.nlb-strip--logos ul { list-style: none; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; padding: 0; margin: 0; }
.nlb-strip__heading { text-align: center; font-weight: 600; margin: 0 0 12px; }
.nlb-logo  { max-height: 34px; width: auto; }
.nlb-badge { max-height: 44px; width: auto; }

.nlb-strip--rating { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nlb-rating__score { font-family: var(--nlb-font-heading); font-size: 22px; }
.nlb-strip--rating ul { list-style: none; display: flex; gap: 12px; padding: 0; margin: 0; }

/* ---------- Beslisser-split ---------- */
.nlb-split__grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .nlb-split__grid { grid-template-columns: 1fr 1fr; } }

.nlb-card {
	display: flex; flex-direction: column;
	padding: 28px; border-radius: var(--nlb-radius);
	border: 1px solid var(--nlb-line);
}
@media (min-width: 992px) { .nlb-card { padding: 32px; } }
.nlb-card--light { background: var(--nlb-surface-alt); }
.nlb-card--dark  { background: var(--nlb-dark); color: var(--nlb-on-dark); border-color: transparent; }
.nlb-card--dark .nlb-body { color: color-mix(in srgb, var(--nlb-on-dark) 82%, transparent); }

.nlb-points { list-style: none; padding: 0; margin: 0 0 24px; }
.nlb-points li { position: relative; padding-left: 24px; margin-bottom: 10px; line-height: 1.5; }
.nlb-points li::before {
	content: ""; position: absolute; left: 0; top: 7px;
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--nlb-accent);
}

/* ---------- Slot-CTA ---------- */
.nlb-cta { overflow: hidden; }
.nlb-cta__media { position: absolute; inset: 0; z-index: 0; opacity: .45; }
.nlb-cta__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (min-width: 992px) {
	.nlb-cta__inner { display: grid; grid-template-columns: 1fr minmax(360px, 460px); gap: 48px; align-items: center; }
}
.nlb-cta__panel {
	background: var(--nlb-surface-alt); color: var(--nlb-ink);
	border-radius: var(--nlb-radius); box-shadow: var(--nlb-shadow);
	padding: 28px; margin-top: 28px;
}
@media (min-width: 992px) { .nlb-cta__panel { margin-top: 0; padding: 32px; } }

/* ---------- Co-brandingslot ---------- */
.nlb-cobrand { margin-bottom: 20px; }
.nlb-cobrand__intro { display: block; font-size: 13px; color: var(--nlb-muted); margin-bottom: 8px; }
.nlb-cobrand__logos { display: flex; align-items: center; gap: 16px; }
.nlb-cobrand__rule { width: 1px; height: 28px; background: var(--nlb-line); }
.nlb-cobrand__vendor,
.nlb-cobrand__partner { max-height: 34px; width: auto; }

/* ---------- Formulier ---------- */
.nlb-form__row { display: block; margin-bottom: 14px; }
.nlb-form__label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.nlb-form__label em { color: var(--nlb-brand); font-style: normal; }
.nlb-form input[type="text"],
.nlb-form input[type="email"],
.nlb-form input[type="tel"],
.nlb-form textarea {
	width: 100%; padding: 11px 14px; min-height: 48px;
	border: 1px solid var(--nlb-line); border-radius: var(--nlb-radius);
	font: inherit; background: var(--nlb-surface-alt);
}
.nlb-form textarea { min-height: 88px; }
.nlb-form__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; margin: 4px 0 18px; }
.nlb-form__consent input { margin-top: 3px; }
.nlb-form .nlb-btn { width: 100%; margin: 0; }
.nlb-note { color: var(--nlb-muted); font-size: 14px; }

/* ---------- Segmentkiezer ---------- */
.nlb-tabs__bar { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--nlb-line); margin-bottom: 28px; }
.nlb-tabs__btn {
	min-height: 48px; padding: 10px 16px; background: none; border: 0;
	border-bottom: 3px solid transparent; font: inherit; font-weight: 600;
	color: var(--nlb-muted); cursor: pointer;
}
.nlb-tabs__btn.is-active { color: var(--nlb-ink); border-bottom-color: var(--nlb-accent); }

.nlb-segments__grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .nlb-segments--cards .nlb-segments__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.nlb-segment {
	background: var(--nlb-surface-alt); border: 1px solid var(--nlb-line);
	border-radius: var(--nlb-radius); overflow: hidden;
	display: flex; flex-direction: column;
}
.nlb-segment__media img { width: 100%; height: 200px; object-fit: cover; display: block; }
.nlb-segment__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.nlb-segment__body .nlb-btn { margin-top: auto; }
.nlb-segment[hidden] { display: none; }

/* ---------- Bewijs ---------- */
.nlb-proof__grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .nlb-proof__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.nlb-proof__card {
	background: var(--nlb-surface-alt); border: 1px solid var(--nlb-line);
	border-radius: var(--nlb-radius); overflow: hidden; display: flex; flex-direction: column;
}
.nlb-proof__media img { width: 100%; height: 190px; object-fit: cover; display: block; }
.nlb-proof__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.nlb-proof__body .nlb-btn { margin-top: auto; }
.nlb-stars { color: var(--nlb-accent); font-size: 18px; letter-spacing: 2px; display: block; margin-bottom: 8px; }
.nlb-quote { margin: 0 0 14px; font-size: 17px; line-height: 1.5; font-style: normal; }
.nlb-quote::before { content: "\201C"; }
.nlb-quote::after  { content: "\201D"; }
.nlb-attrib { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 14px; }
.nlb-attrib em { display: block; font-style: normal; color: var(--nlb-muted); font-size: 13px; }
.nlb-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.nlb-source { display: block; margin-top: 10px; font-size: 11px; color: var(--nlb-muted); }
.nlb-figures { list-style: none; display: flex; gap: 20px; padding: 0; margin: 0 0 14px; }
.nlb-figures strong { display: block; font-family: var(--nlb-font-heading); font-size: 26px; }
.nlb-figures span { font-size: 12px; color: var(--nlb-muted); }
.nlb-proof__logos { list-style: none; display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: center; padding: 0; margin: 0; }

/* ---------- Partnerblok ---------- */
@media (min-width: 992px) {
	.nlb-partner__inner { display: grid; grid-template-columns: 1fr minmax(320px, 400px); gap: 48px; align-items: start; }
}
.nlb-partner__steps { list-style: none; counter-reset: none; padding: 0; margin: 0; }
.nlb-partner__steps li { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--nlb-line); }
.nlb-partner__steps li:first-child { border-top: 0; }
.nlb-step__num { font-family: var(--nlb-font-heading); font-size: 20px; color: var(--nlb-accent); min-width: 34px; }
.nlb-step__body strong { display: block; margin-bottom: 3px; }
.nlb-step__body em { font-style: normal; color: var(--nlb-muted); }
.nlb-partner__card {
	background: var(--nlb-surface-alt); border: 1px solid var(--nlb-line);
	border-radius: var(--nlb-radius); padding: 28px; margin-top: 28px;
}
@media (min-width: 992px) { .nlb-partner__card { margin-top: 0; } }
.nlb-partner__contact { list-style: none; padding: 0; margin: 0 0 20px; }
.nlb-partner__contact li { padding: 6px 0; }
.nlb-partner__contact a { color: inherit; }
.nlb-partner__media { margin-top: 20px; }
.nlb-partner__media img { width: 100%; border-radius: var(--nlb-radius); display: block; }

/* ---------- Breedte afdwingen ----------
 *
 * Blokthema's zoals Twenty Twenty-Five stoppen elke pagina in een smalle
 * kolom (is-layout-constrained). Onze secties zijn op volle breedte
 * ontworpen en moeten daar zelf uit breken — het theme geeft die ruimte niet.
 */
.nlb {
	width: 100%;
	max-width: none;
}

/* Uit de kolom van het theme breken, ongeacht hoe breed die is. */
.is-layout-constrained > .nlb,
.is-layout-flow > .nlb,
.wp-block-post-content > .nlb,
.entry-content > .nlb {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

/* Het theme zet soms een eigen maximum op alles wat eronder hangt. */
.nlb > *,
.nlb .nlb-container > * {
	max-width: none;
}

/* Kop- en tekstmarges van het theme overschrijven, anders lopen de
 * verticale afstanden door elkaar. */
.nlb :where(h1, h2, h3, p, ul, ol, figure) {
	margin-block-start: 0;
}

/* ---------- Hero-overlay als verloop ----------
 *
 * Een egale waas over de hele foto maakt het beeld dof. Een verloop houdt de
 * tekstkant donker en laat de andere kant zichtbaar, zodat beeld en tekst
 * samenwerken in plaats van om aandacht vechten.
 */
.nlb-hero__overlay { background: var(--nlb-dark); opacity: var(--nlb-overlay, .25); }

.nlb-hero__overlay--side {
	opacity: 1;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--nlb-dark) calc(var(--nlb-overlay, .3) * 100%), transparent) 0%,
		color-mix(in srgb, var(--nlb-dark) calc(var(--nlb-overlay, .3) * 88%), transparent) 30%,
		color-mix(in srgb, var(--nlb-dark) calc(var(--nlb-overlay, .3) * 45%), transparent) 52%,
		color-mix(in srgb, var(--nlb-dark) calc(var(--nlb-overlay, .3) * 10%), transparent) 72%,
		transparent 100%
	);
}

.nlb-hero__overlay--bottom {
	opacity: 1;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--nlb-dark) calc(var(--nlb-overlay, .3) * 90%), transparent) 0%,
		color-mix(in srgb, var(--nlb-dark) calc(var(--nlb-overlay, .3) * 100%), transparent) 60%,
		var(--nlb-dark) 100%
	);
}

/* Op mobiel staat de tekst onder het beeld, dus dan altijd egaal. */
@media (max-width: 767px) {
	.nlb-hero__overlay--side,
	.nlb-hero__overlay--bottom {
		background: var(--nlb-dark);
		opacity: var(--nlb-overlay, .25);
	}
}

/* ---------- Merkstreep ----------
 *
 * Diagonaal herhalend patroon onderaan donkere secties. Paroc gebruikt dit
 * als handtekening; bij een leeg token verdwijnt hij vanzelf.
 */
.nlb-stripe {
	position: absolute;
	inset: auto 0 0 0;
	height: var(--nlb-stripe-height, 12px);
	background: var(--nlb-stripe, none);
	background-size: 430px 100%;
	z-index: 3;
	pointer-events: none;
}

/* ---------- Bovenkopjes in de accentkleur ---------- */
.nlb-eyebrow {
	color: var(--nlb-brand);
	letter-spacing: .11em;
	font-weight: 700;
	opacity: 1;
}
.nlb--dark .nlb-eyebrow,
.nlb-card--dark .nlb-eyebrow { color: var(--nlb-on-dark); opacity: .75; }

/* ---------- Hover ---------- */
.nlb-btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.nlb-btn--accent:hover { background: var(--nlb-accent); border-color: var(--nlb-accent); opacity: .9; }
.nlb-btn--outline:hover,
.nlb-btn--ghost:hover { background: color-mix(in srgb, currentColor 8%, transparent); opacity: 1; }
.nlb-btn--light:hover { background: var(--nlb-surface); opacity: 1; }

.nlb-proof__card a:not(.nlb-btn):hover,
.nlb-partner__contact a:hover { color: var(--nlb-brand); text-decoration: underline; text-underline-offset: 4px; }

/* Beeld in kaarten licht inzoomen bij hover. */
.nlb-segment__media,
.nlb-proof__media { overflow: hidden; }
.nlb-segment__media img,
.nlb-proof__media img { transition: transform .35s ease; }
.nlb-segment:hover .nlb-segment__media img,
.nlb-proof__card:hover .nlb-proof__media img { transform: scale(1.04); }

/* ---------- Zachte schaduw op formulierkaarten ---------- */
.nlb-hero__panel,
.nlb-cta__panel { box-shadow: var(--nlb-card-shadow, var(--nlb-shadow)); }

/* De knop in de partnerkaart moet binnen de kaart blijven. */
.nlb-partner__card .nlb-btn--block { width: 100%; box-sizing: border-box; }

/* Hero minder hoog wanneer er geen beeld is. */
.nlb-hero:not(:has(.nlb-hero__media)) .nlb-hero__inner { padding-top: 56px; padding-bottom: 56px; }

/* ---------- Storende thema-elementen op een blokkenpagina ----------
 *
 * Blokthema's zetten standaard de paginatitel en soms een zoekveld in de
 * hoofdinhoud. Op een landingspagina hoort daar niets boven de hero.
 * Dit geldt alleen op pagina's waar onze blokken staan.
 */
body:has(.nlb-hero) main > .wp-block-group > .wp-block-post-title,
body:has(.nlb-hero) main > .wp-block-post-title,
body:has(.nlb-hero) .wp-block-post-title:first-child,
body:has(.nlb-hero) main .wp-block-post-featured-image:empty {
	display: none;
}

/* Het zoekblok van het theme hoort niet tussen onze secties. */
body:has(.nlb-hero) main > .wp-block-search,
body:has(.nlb-hero) main > .wp-block-group > .wp-block-search {
	display: none;
}

/* De bovenmarge die het theme boven de hoofdinhoud zet weghalen, zodat de
 * hero direct onder de header begint. */
body:has(.nlb-hero) main.wp-block-group { margin-top: 0 !important; }
body:has(.nlb-hero) main > .wp-block-group:first-child {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* ---------- Hero: bovenkopje, ankerlink, dealerkaart ---------- */

.nlb-eyebrow--hero {
	color: var(--nlb-on-dark);
	letter-spacing: .16em;
	font-size: 13px;
	margin-bottom: 18px;
	opacity: 1;
}

/* Ankerlink: een verwijzing naar beneden, geen knop. */
.nlb-hero__anchor {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: 34px;
	padding-bottom: 14px;
	min-width: 260px;
	border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}
.nlb-hero__anchor svg { margin-left: auto; }
.nlb-hero__anchor:hover { border-bottom-color: currentColor; }
.nlb-hero__anchor:hover svg { transform: translateY(3px); }
.nlb-hero__anchor svg { transition: transform .2s ease; }

/* De dealer hoort in de hero. Dit is het verschil tussen een merkpagina en
 * een partnerpagina. */
.nlb-hero__dealer {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-top: 34px;
}
.nlb-pin { color: var(--nlb-brand); flex: 0 0 auto; margin-top: 2px; }
.nlb-hero__region {
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin: 0 0 4px;
	opacity: .8;
}
.nlb-hero__dealername {
	font-family: var(--nlb-font-heading);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: var(--nlb-heading-weight);
	text-transform: var(--nlb-heading-transform);
	line-height: 1.15;
	margin: 0 0 4px;
}
.nlb-hero__tagline { margin: 0; font-size: 15px; opacity: .82; }

@media (max-width: 767px) {
	.nlb-hero__anchor { min-width: 0; width: 100%; }
	.nlb-hero__dealer { margin-top: 26px; }
}

/* ---------- Strook: eigenschappen met iconen ----------
 *
 * Vier items met een icoon, titel en toelichting, gescheiden door dunne
 * verticale lijnen. Anders dan de vinkjesstrook: die heeft alleen een regel.
 */
.nlb-strip--usps {
	display: grid;
	gap: 0;
	list-style: none;
	padding: 0;
	margin: 0;
}
@media (min-width: 768px) {
	.nlb-strip--usps { grid-template-columns: repeat(4, 1fr); }
	.nlb-strip--usps li + li {
		border-left: 1px solid var(--nlb-line);
		padding-left: 28px;
	}
	.nlb-strip--usps li { padding-right: 28px; }
}
.nlb-strip--usps li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
}
@media (max-width: 767px) {
	.nlb-strip--usps li + li { border-top: 1px solid var(--nlb-line); }
}
.nlb-usp__icon {
	flex: 0 0 auto;
	width: 40px;
	color: var(--nlb-brand);
}
.nlb-usp__icon img { width: 40px; height: 40px; object-fit: contain; }
.nlb-usp__body strong { display: block; font-size: 16px; line-height: 1.3; }
.nlb-usp__body em {
	display: block;
	font-style: normal;
	color: var(--nlb-muted);
	font-size: 14px;
	margin-top: 2px;
}

/* ---------- Header ---------- */
.nlb-header { padding: 0; background: var(--nlb-surface-alt); border-bottom: 1px solid var(--nlb-line); }
.nlb-header--sticky { position: sticky; top: 0; z-index: 50; }
body.admin-bar .nlb-header--sticky { top: 32px; }

.nlb-header__inner {
	display: flex; align-items: center; gap: 24px;
	min-height: 76px; padding-top: 12px; padding-bottom: 12px;
}
.nlb-header__brand { display: flex; align-items: center; gap: 18px; margin-right: auto; }
.nlb-header__vendor { max-height: 38px; width: auto; }
.nlb-header__rule { width: 1px; height: 40px; background: var(--nlb-line); }
.nlb-header__partner small {
	display: block; font-size: 12px; color: var(--nlb-muted); margin-bottom: 3px;
}
.nlb-header__partnerlogo { max-height: 32px; width: auto; }
.nlb-header__partner strong { font-size: 15px; }

.nlb-header__nav { display: none; gap: 28px; }
@media (min-width: 992px) { .nlb-header__nav { display: flex; } }
.nlb-header__nav a { color: inherit; font-size: 15px; line-height: 1.25; max-width: 90px; }
.nlb-header__nav a:hover { color: var(--nlb-brand); }
/* Zes menu-items passen op 1240px; daaronder de tussenruimte knijpen. */
@media (min-width: 992px) and (max-width: 1239px) {
	.nlb-header__inner { gap: 16px; }
	.nlb-header__nav { gap: 18px; }
	.nlb-header__nav a { font-size: 14px; max-width: 84px; }
}

.nlb-header__cta { margin: 0; gap: 12px; white-space: nowrap; }
@media (max-width: 767px) {
	.nlb-header__cta span { display: none; }
	.nlb-header__cta { padding: 12px 14px; }
	.nlb-header__vendor { max-height: 30px; }
	.nlb-header__partnerlogo { max-height: 26px; }
}

/* ---------- Footer ---------- */
.nlb-footer { padding: 36px 0 20px; border-top: 1px solid var(--nlb-line); }
.nlb-footer__inner { display: grid; gap: 22px; align-items: start; }
@media (min-width: 992px) {
	.nlb-footer__inner { grid-template-columns: auto 1fr 1fr auto; gap: 48px; }
}
.nlb-footer__brand { display: flex; align-items: center; gap: 16px; }
.nlb-footer__vendor, .nlb-footer__partnerlogo { max-height: 30px; width: auto; }
.nlb-footer__rule { width: 1px; height: 30px; background: var(--nlb-line); }
.nlb-footer p { margin: 0 0 4px; font-size: 14px; }
.nlb-footer a { color: inherit; }
.nlb-footer a:hover { color: var(--nlb-brand); }
.nlb-footer__top a { font-size: 14px; white-space: nowrap; }
.nlb-footer__legal {
	margin-top: 22px; padding-top: 16px;
	border-top: 1px solid var(--nlb-line);
}
.nlb-footer__legal p { font-size: 12px; color: var(--nlb-muted); margin: 0; }

/* ---------- Partnerblok: contactkolommen ---------- */
.nlb-partner__cols { display: grid; gap: 20px; margin: 22px 0; }
@media (min-width: 540px) { .nlb-partner__cols { grid-template-columns: 1fr 1fr; } }
.nlb-partner__colhead {
	font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
	font-weight: 700; margin: 0 0 8px;
}
.nlb-partner__cols p { margin: 0 0 3px; font-size: 14px; }
.nlb-partner__cols a { color: inherit; }

/* ---------- Bewijs: donkere kaart met groot cijfer ---------- */
.nlb-proof__card--dark {
	background: var(--nlb-dark);
	color: var(--nlb-on-dark);
	border-color: transparent;
	position: relative;
	overflow: hidden;
}
.nlb-proof__card--dark .nlb-h3,
.nlb-proof__card--dark .nlb-body { color: var(--nlb-on-dark); }
.nlb-proof__card--dark .nlb-source { color: color-mix(in srgb, var(--nlb-on-dark) 62%, transparent); }
.nlb-proof__card--dark::after {
	content: "";
	position: absolute; inset: auto 0 0 0;
	height: var(--nlb-stripe-height, 12px);
	background: var(--nlb-stripe, none);
	background-size: 430px 100%;
}
.nlb-bigfigure {
	font-family: var(--nlb-font-heading);
	font-size: clamp(48px, 7vw, 76px);
	line-height: 1;
	margin: 4px 0 6px;
}

/* ---------- Merkkleur als achtergrond ---------- */
.nlb--brand { background: var(--nlb-brand); color: var(--nlb-on-brand); }
.nlb--brand .nlb-h2,
.nlb--brand .nlb-h3,
.nlb--brand .nlb-body,
.nlb--brand .nlb-intro { color: var(--nlb-on-brand); }
.nlb--brand .nlb-btn--accent {
	background: var(--nlb-on-brand);
	border-color: var(--nlb-on-brand);
	color: var(--nlb-brand);
}
.nlb--brand .nlb-eyebrow { color: var(--nlb-on-brand); opacity: .85; }

/* ---------- Logopaar ---------- */
.nlb-logopair { display: flex; align-items: center; gap: 18px; }
.nlb-logopair__a, .nlb-logopair__b { max-height: 46px; width: auto; }
.nlb-logopair__rule { width: 1px; height: 44px; background: var(--nlb-line); }
.nlb-logopair--card { margin-bottom: 26px; }
/* Borg witte ondergrond onder het logopaar in de kaart: veel dealer- en
   vendorlogo's zijn donkere PNG's zonder eigen achtergrond en vallen anders
   weg. Het kaartje is al wit (surface_alt), dit dekt de plaatsing op donker af. */
.nlb-footer__card .nlb-logopair--card {
	background: var(--nlb-paper); border-radius: var(--nlb-radius);
	padding: 12px 16px; display: inline-flex;
}

/* ---------- Footer: kaart over beeld ----------
 *
 * Wit kaartje links met beide logo's en de dealergegevens, de boodschap
 * rechts over het beeld. De kaart is het co-brandingmoment.
 */
.nlb-footer--card { padding: 0; border-top: 0; position: relative; overflow: hidden; }
.nlb-footer__media { position: absolute; inset: 0; z-index: 0; }
.nlb-footer__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Scrim over de footerfoto: donker aan de boodschapkant, zodat witte tekst
   leesbaar blijft ook op een lichte foto. Onder 992px valt het terug op een
   vlakke wash omdat de tekst dan onder de foto stapelt. */
.nlb-footer--card .nlb-footer__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--nlb-dark) 72%, transparent) 0%,
		color-mix(in srgb, var(--nlb-dark) 55%, transparent) 46%,
		color-mix(in srgb, var(--nlb-dark) 20%, transparent) 100%);
}
@media (max-width: 991px) {
	.nlb-footer--card .nlb-footer__media::after { background: color-mix(in srgb, var(--nlb-dark) 62%, transparent); }
}

.nlb-footer__cardwrap {
	position: relative; z-index: 2;
	display: grid; gap: 32px;
	padding-top: 48px; padding-bottom: 48px;
	align-items: center;
}
@media (min-width: 992px) {
	.nlb-footer__cardwrap { grid-template-columns: minmax(360px, 46%) 1fr; gap: 56px; padding-top: 64px; padding-bottom: 64px; }
}

.nlb-footer__card {
	background: var(--nlb-surface-alt);
	color: var(--nlb-ink);
	border-radius: var(--nlb-radius);
	box-shadow: var(--nlb-card-shadow, var(--nlb-shadow));
	padding: 32px;
}
@media (min-width: 992px) { .nlb-footer__card { padding: 40px; } }

.nlb-footer__details { list-style: none; padding: 0; margin: 0 0 26px; }
.nlb-footer__details li {
	display: flex; align-items: flex-start; gap: 14px;
	padding: 9px 0; font-size: 16px; line-height: 1.4;
}
.nlb-footer__details a { color: inherit; }
.nlb-footer__details a:hover { color: var(--nlb-brand); }

.nlb-ico { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; color: var(--nlb-ink); }
.nlb-ico--dot { border-radius: 50%; background: currentColor; width: 18px; height: 18px; margin-top: 3px; }
.nlb-ico--pin {
	background: currentColor;
	-webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'%3E%3Cpath d='M10 0C4.5 0 0 4.4 0 9.9 0 17 10 26 10 26s10-9 10-16.1C20 4.4 15.5 0 10 0z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'%3E%3Cpath d='M10 0C4.5 0 0 4.4 0 9.9 0 17 10 26 10 26s10-9 10-16.1C20 4.4 15.5 0 10 0z'/%3E%3C/svg%3E");
}
.nlb-ico--tel {
	background: currentColor;
	-webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15 15 0 006.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 013 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'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15 15 0 006.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 013 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'/%3E%3C/svg%3E");
}
.nlb-ico--mail {
	background: currentColor;
	-webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h20v14H2z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M2 6l10 7 10-7' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h20v14H2z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M2 6l10 7 10-7' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

.nlb-footer__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.nlb-footer__actions .nlb-btn { margin: 0; }

.nlb-footer__message { color: var(--nlb-on-dark); }
.nlb-footer__message .nlb-h2 { color: var(--nlb-on-dark); font-style: italic; }
.nlb-footer__message .nlb-lead { color: var(--nlb-on-dark); }
.nlb-footer__notes p {
	font-size: 13px;
	color: color-mix(in srgb, var(--nlb-on-dark) 78%, transparent);
	margin: 0 0 8px;
}

/* ---------- Verzendknop forceren ----------
 * Sommige thema's leggen hun eigen knopstijl over onze accentkleur heen.
 */
.nlb .nlb-form button[type="submit"],
.nlb .nlb-form .nlb-btn {
	background-color: var(--nlb-accent) !important;
	border-color: var(--nlb-accent) !important;
	color: var(--nlb-accent-contrast) !important;
	opacity: 1 !important;
}
.nlb--brand .nlb-form button[type="submit"] {
	background-color: var(--nlb-on-brand) !important;
	border-color: var(--nlb-on-brand) !important;
	color: var(--nlb-brand) !important;
}

/* Tekstkleur op de accentknop forceren — sommige thema's zetten hun eigen
 * kleur over onze knoppen heen. */
.nlb .nlb-btn--accent {
	color: var(--nlb-accent-contrast) !important;
	background-color: var(--nlb-accent) !important;
	border-color: var(--nlb-accent) !important;
}
.nlb--brand .nlb-btn--accent,
.nlb-footer--card.nlb--brand .nlb-btn--accent {
	background-color: var(--nlb-on-brand) !important;
	border-color: var(--nlb-on-brand) !important;
	color: var(--nlb-brand) !important;
}

/* Light cards keep their own text context on dark and brand sections. */
.nlb-card--light, .nlb-segment, .nlb-proof__card:not(.nlb-proof__card--dark) { color: var(--nlb-ink); }
.nlb-card--light :is(.nlb-h2,.nlb-h3,.nlb-body), .nlb-segment :is(.nlb-h2,.nlb-h3,.nlb-body), .nlb-proof__card:not(.nlb-proof__card--dark) :is(.nlb-h2,.nlb-h3,.nlb-body) { color: var(--nlb-ink); }