/**
 * Kennisbank. Bouwt op de tokens van theme.css (--okp-*); opzet volgens het
 * prototype van Ivy: witte tegels en kaarten, oranje accenten, blauwe
 * shopbalk.
 */

:root {
	--kb-tint: #fff1e5;
	--kb-tint-tekst: #c65a00;
	--kb-rand: var(--okp-border);
	--kb-schaduw: 0 7px 20px rgba(0, 35, 81, 0.08);
}

/* Hero (kennisbank-home) */
.kb-hero {
	padding-block: var(--okp-space-5);
	border-bottom: 1px solid var(--kb-rand);
	background: var(--okp-white);
}

.kb-hero__titel {
	max-width: 22ch;
	margin: var(--okp-space-2) 0 var(--okp-space-3);
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1.1;
	text-wrap: balance;
}

.kb-hero__intro {
	max-width: 65ch;
	color: var(--okp-text);
	font-size: 16px;
	line-height: 1.7;
}

/* Zoeken */
.kb-zoek {
	display: flex;
	align-items: center;
	gap: var(--okp-space-2);
	max-width: 640px;
	margin-top: var(--okp-space-4);
	padding: 6px 6px 6px var(--okp-space-3);
	border: 1px solid #d6d6d6;
	border-radius: var(--okp-radius-btn);
	background: var(--okp-white);
	color: var(--okp-text);
}

.kb-zoek:focus-within {
	border-color: var(--okp-primary);
}

.kb-zoek input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--okp-heading);
	font-size: 15px;
}

/* Kruimelpad */
.kb-kruimelpad {
	margin-bottom: var(--okp-space-4);
	color: #888;
	font-size: 13px;
}

.kb-kruimelpad a {
	color: inherit;
}

.kb-kruimelpad a:hover {
	color: var(--okp-primary);
}

/* Layout: zijbalk + inhoud */
.kb-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--okp-space-4);
}

/* Zonder dit rekt de horizontaal scrollende zijbalk de kolom op mobiel op. */
.kb-layout > * {
	min-width: 0;
}

@media (min-width: 992px) {
	.kb-layout {
		grid-template-columns: 240px minmax(0, 1fr);
		align-items: start;
	}
}

.kb-inhoud {
	display: grid;
	gap: var(--okp-space-4);
	min-width: 0;
}

/* Zijbalk */
.kb-zijbalk {
	padding: var(--okp-space-3);
	border: 1px solid var(--kb-rand);
	background: var(--okp-white);
}

@media (min-width: 992px) {
	.kb-zijbalk {
		position: sticky;
		top: var(--okp-space-3);
	}
}

.kb-zijbalk__kop {
	margin: 0 var(--okp-space-2) var(--okp-space-2);
	color: var(--okp-heading);
	font-family: var(--okp-font-heading);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.kb-zijbalk ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kb-zijbalk a {
	display: flex;
	justify-content: space-between;
	gap: var(--okp-space-2);
	padding: 10px var(--okp-space-2);
	border-radius: 4px;
	color: #555;
	font-size: 14px;
}

.kb-zijbalk a:hover,
.kb-zijbalk a[aria-current] {
	background: var(--kb-tint);
	color: var(--kb-tint-tekst);
	font-weight: 700;
}

.kb-zijbalk small {
	color: #888;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 991.98px) {
	.kb-zijbalk {
		padding: var(--okp-space-2);
	}

	.kb-zijbalk__kop {
		display: none;
	}

	.kb-zijbalk ul {
		display: flex;
		gap: var(--okp-space-1);
		overflow-x: auto;
		scrollbar-width: thin;
	}

	.kb-zijbalk a {
		white-space: nowrap;
	}
}

/* Koppen */
.kb-kop__titel {
	margin: var(--okp-space-3) 0 var(--okp-space-2);
	font-size: clamp(28px, 3vw, 40px);
	text-wrap: balance;
}

.kb-kop__hoofd {
	color: var(--okp-primary);
}

.kb-kop__tekst {
	max-width: 70ch;
	color: var(--okp-text);
	line-height: 1.7;
}

.kb-kop__tekst p:last-child {
	margin-bottom: 0;
}

.kb-sectiekop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--okp-space-2) var(--okp-space-3);
	margin-top: var(--okp-space-2);
}

.kb-sectiekop h2 {
	margin: 0;
	font-size: clamp(22px, 2.4vw, 28px);
}

.kb-aantal {
	color: #888;
	font-size: 13px;
}

.kb-pil,
.kb-label {
	display: inline-flex;
	margin: 0;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--kb-tint);
	color: var(--kb-tint-tekst);
	font-size: 12px;
	font-weight: 700;
}

.kb-label {
	margin-bottom: var(--okp-space-2);
}

.kb-tekstlink {
	color: var(--okp-primary);
	font-size: 14px;
	font-weight: 700;
}

.kb-tekstlink:hover {
	color: var(--okp-primary-dark);
}

/* Onderwerpknoppen */
.kb-onderwerpen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--okp-space-2);
}

.kb-onderwerpen a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 15px;
	border: 1px solid #ddd;
	border-radius: 999px;
	background: var(--okp-white);
	color: #444;
	font-size: 14px;
}

.kb-onderwerpen a:hover,
.kb-onderwerpen a[aria-current] {
	border-color: var(--okp-primary);
	background: var(--kb-tint);
	color: var(--kb-tint-tekst);
}

.kb-onderwerpen small {
	color: inherit;
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
}

/* Tegels */
/* Tegels en kaarten: 1, 2 of 3 kolommen, zodat 9 tegels en 6 keuzehulpen
   altijd volle rijen geven. */
.kb-tegels,
.kb-raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--okp-space-3);
}

@media (min-width: 640px) {
	.kb-tegels,
	.kb-raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.kb-tegels,
	.kb-raster {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.kb-tegel {
	display: flex;
	flex-direction: column;
	gap: var(--okp-space-2);
	padding: 22px;
	border: 1px solid var(--kb-rand);
	background: var(--okp-white);
	color: var(--okp-heading);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.kb-tegel:hover,
.kb-tegel:focus-visible {
	border-color: var(--okp-primary);
	box-shadow: var(--kb-schaduw);
	color: var(--okp-heading);
	transform: translateY(-2px);
}

.kb-tegel__icoon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 4px;
	background: var(--kb-tint);
	color: var(--okp-primary);
}

.kb-tegel__naam {
	margin-top: var(--okp-space-1);
	font-family: var(--okp-font-heading);
	font-size: 18px;
	font-weight: 700;
}

.kb-tegel__tekst {
	color: var(--okp-text);
	font-size: 14px;
	line-height: 1.55;
}

.kb-tegel__voet {
	display: flex;
	justify-content: space-between;
	gap: var(--okp-space-2);
	margin-top: auto;
	padding-top: var(--okp-space-2);
	color: var(--okp-primary);
	font-size: 13px;
	font-weight: 700;
}

/* Homepage: rijtjes met icoon links, 1 of 3 kolommen (9 = 3 × 3). */
.kb-tegels--compact {
	gap: var(--okp-space-2);
}

@media (min-width: 640px) {
	.kb-tegels.kb-tegels--compact {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.kb-tegels--compact .kb-tegel {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 2px var(--okp-space-3);
	padding: 14px var(--okp-space-3);
}

.kb-tegels--compact .kb-tegel__icoon {
	grid-row: span 2;
	width: 40px;
	height: 40px;
}

.kb-tegels--compact .kb-tegel__naam {
	margin: 0;
	font-size: 15px;
	line-height: 1.25;
}

.kb-tegels--compact .kb-tegel__voet {
	margin: 0;
	padding: 0;
	color: #888;
	font-weight: 400;
}

/* Artikelkaarten */
@media (min-width: 992px) {
	.kb-raster--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.kb-kaart {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--okp-space-2);
	padding: 20px;
	border: 1px solid var(--kb-rand);
	background: var(--okp-white);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kb-kaart[hidden] {
	display: none;
}

.kb-kaart:hover,
.kb-kaart:focus-within {
	border-color: var(--okp-primary);
	box-shadow: var(--kb-schaduw);
}

.kb-kaart__label {
	margin: 0;
	color: var(--okp-primary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.kb-kaart__titel {
	margin: 0;
	font-size: 16px;
	line-height: 1.45;
}

.kb-kaart__titel a {
	color: var(--okp-heading);
}

/* De hele kaart is klikbaar via de titellink. */
.kb-kaart__titel a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.kb-kaart__titel a:focus-visible {
	outline: none;
}

.kb-kaart:focus-within {
	outline: 2px solid var(--okp-primary);
	outline-offset: 2px;
}

.kb-kaart__tekst {
	margin: 0;
	color: var(--okp-text);
	font-size: 14px;
	line-height: 1.6;
}

.kb-kaart__lees {
	margin-top: auto;
	padding-top: var(--okp-space-1);
	color: #888;
	font-size: 13px;
}

.kb-kaart:hover .kb-kaart__lees {
	color: var(--okp-primary);
}

.kb-kaart--uitgelicht {
	grid-column: 1 / -1;
	padding: var(--okp-space-4);
	border-left: 4px solid var(--okp-primary);
}

.kb-kaart--uitgelicht .kb-kaart__titel {
	font-size: clamp(20px, 2vw, 24px);
}

/* Shop-CTA */
.kb-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--okp-space-3);
	padding: var(--okp-space-4);
	background: var(--okp-light-blue);
	color: var(--okp-white);
}

.kb-cta__titel {
	margin: 0 0 var(--okp-space-1);
	color: var(--okp-white);
	font-size: 22px;
}

.kb-cta p {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
}

.kb-cta__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--okp-space-2);
}

/* Leeg / geen resultaten */
.kb-leeg {
	padding: var(--okp-space-4) var(--okp-space-3);
	border: 1px dashed #ccc;
	background: var(--okp-white);
	text-align: center;
}

.kb-leeg p:last-child {
	margin-bottom: 0;
}

/* Bij een artikel en bij producten */
.kb-meer {
	display: grid;
	gap: var(--okp-space-3);
	margin-top: var(--okp-space-5);
}

.kb-meer--shop {
	margin-top: var(--okp-space-4);
}

/* Homepage */
.kb-home-blok__intro {
	max-width: 70ch;
	margin-bottom: var(--okp-space-3);
}

.kb-home-blok__artikelen {
	margin-top: var(--okp-space-3);
}