/*
 * Stijl Strak (zakelijk) — modern, efficiënt, zakelijk.
 * Koppen: Inter Tight 600 · Tekst: Inter 400 · Afronding 6–8px.
 * Gebroken wit en koel lichtgrijs, strakke kaarten met een dunne rand en een lichte schaduw, kleine
 * kapitalen voor labels, licht en strak uitgesneden portretten, lijn-iconen.
 * Nooit puur zwart of puur wit. Lettertypes lokaal (assets/fonts, OFL).
 */
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
	--bb-font-koppen: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--bb-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--bb-kop-gewicht: 600;
	--bb-kop-spatie: -0.022em;

	--bb-achtergrond: #FBFBFC;
	--bb-vlak: #EFF1F4;
	--bb-zacht: var(--klant-primair-zacht);
	--bb-kaart: #FDFDFE;
	--bb-rand: #E1E5EA;
	--bb-tekst: #161B21;
	--bb-muted: #4D5762;

	--bb-radius: 8px;
	--bb-radius-knop: 6px;
	--bb-radius-foto: 8px;
	--bb-radius-icoon: 8px;
	--bb-schaduw: 0 1px 2px rgba(22, 25, 29, .05), 0 2px 10px rgba(22, 25, 29, .04);

	--bb-icoon-lijn: 1.8;
	--bb-icoon-vul: 0;
	--bb-icoon-rond: var(--klant-primair-zacht);
}

/* Typografie: compact en strak. */
body { font-size: 1.0625rem; line-height: 1.6; }
h1 { letter-spacing: -0.03em; line-height: 1.08; }
h2 { line-height: 1.14; }
.bb-eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .14em; }
.bb-eyebrow::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .6em; border-radius: 2px; background: var(--klant-accent); vertical-align: .05em; }
.bb-sectie--donker .bb-eyebrow { color: var(--klant-primair-tekst); }
.bb-page a { text-decoration-thickness: 1px; text-underline-offset: .22em; }

/* Koel grijs vlak in de hero, strakke header. */
.bb-hero--home { background: linear-gradient(180deg, var(--bb-achtergrond) 0%, var(--bb-vlak) 100%); }
#header [data-id="menu"] .ct-menu-link { font-weight: 500; }
.wp-block-button__link, .bb-knop { font-weight: 600; letter-spacing: -0.005em; }

/* Kaarten: dunne rand, lichte schaduw, accent bij hover. */
.bb-kaart--link:hover { transform: translateY(-1px); --bb-k-rand: var(--klant-accent); border-color: var(--klant-accent); }
.bb-sectie--tint .bb-kaart { --bb-k-rand: var(--bb-rand); }

/* Iconen: lijn, in een afgerond vierkant. */
.bb-icoonrond { width: 48px; height: 48px; }
.bb-icoonrond .bb-icoon { width: 24px; height: 24px; }
.bb-sectie--zacht .bb-icoonrond { background: var(--bb-kaart); }

/* Chips, stappen, FAQ, filter en tabellen: afgeronde rechthoeken, labels in kleine kapitalen. */
.bb-chips li { border-radius: 6px; background: var(--bb-vlak); color: var(--bb-tekst); border: 1px solid var(--bb-rand); font-weight: 500; }
.bb-sectie--donker .bb-chips li { background: rgba(251, 250, 247, .1); border-color: rgba(251, 250, 247, .28); color: var(--klant-primair-tekst); }
.bb-stap__nummer { border-radius: 8px; font-weight: 600; }
.bb-genummerd li::before { border-radius: 6px; font-weight: 600; }
.bb-faq-item summary { font-weight: 600; }
.bb-faq-item summary::after { border-radius: 6px; }
.bb-filter__knop { border-radius: 6px; font-weight: 500; border-width: 1px; }
.bb-page .wp-block-table th { background: var(--bb-vlak); color: var(--bb-tekst); font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; }

/* Foto's: licht en strak uitgesneden. */
.bb-foto img, .bb-hero__foto img, .bb-behandelaar__foto, .bb-review__foto, .bb-kaartbeeld img { filter: saturate(.94) brightness(1.03); }
.bb-teamstrip .bb-behandelaar__foto { border-radius: var(--bb-radius-foto); }

/* Formulieren: dunne randen met voldoende contrast (3:1). */
.bb-page .wpforms-container :is(input[type=text], input[type=email], input[type=tel], textarea, select) { border-width: 1px !important; border-color: #7E8894 !important; }

/* Footer: koppen als kleine labels. */
.bb-footer__kop { font-family: var(--bb-font-body); font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }