/* ==========================================================================
   KENNISBANK
   Bestand: /versatile-v2-child/css/kennisbank.css
   Wordt geladen via functions.php (child_enqueue_kennisbank_styles), alleen op:
   1. het overzicht        archive-kennisbank.php
   2. de categoriepagina's taxonomy-kennisbank-categorie.php
   3. de definitiepagina's single-kennisbank.php

   Alle classes beginnen met "kb-", zodat niets anders op de site geraakt wordt.
   Kleuren en afrondingen komen uit de theme variabelen (--cl-*, --r-*),
   dus die veranderen automatisch mee met de huisstijl.

   Inhoud
   1.  Hero (rode header)
   2.  Beige inhoudsvlak
   3.  Categoriepillen
   3b. Zoekbalk
   4.  Kaarten (overzicht en categorie)
   5.  Paginering
   6.  Categoriebeschrijving met afbeelding
   7.  Definitiepagina: layout en inhoud
   8.  Definitiepagina: zijbalk
   9.  Blog blokken en CTA
   10. Responsive
   ========================================================================== */


/* ==========================================================================
   1. HERO (RODE HEADER)
   Gedeeld door alle drie de templates.
   ========================================================================== */

.kb-hero {
	position: relative;
	border-top-left-radius: var(--r-l);
}

.kb-hero h1 {
	color: var(--cl-tertiary-text);
	margin-bottom: 0;
}

/* Rood vlak achter de afgeronde hoek rechtsboven van het beige blok,
   zodat die hoek rood "uitloopt" zoals op de blogpagina. */
.kb-hero::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: calc(var(--r-l) * -1);
	width: var(--r-l);
	height: var(--r-l);
	background: var(--cl-tertiary);
}

/* Groen categorielabel boven de titel (alleen op de definitiepagina) */
.kb-hero__label {
	display: inline-block;
	margin-bottom: .4em;
	color: var(--cl-primary);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

.kb-hero__label:hover {
	text-decoration: underline;
}


/* ==========================================================================
   2. BEIGE INHOUDSVLAK
   ========================================================================== */

.kb-content {
	position: relative;
	z-index: 1; /* ligt boven het rode vlak van .kb-hero::after */
	border-top-right-radius: var(--r-l);
}


/* ==========================================================================
   3. CATEGORIEPILLEN
   Standaard voor de rode hero. Een lichte variant voor de zijbalk
   van de definitiepagina staat in sectie 8.
   ========================================================================== */

.kb-categories {
	margin-top: 2em;
}

.kb-categories .title {
	font-size: 15px;
	color: var(--cl-tertiary-text-75);
	margin-bottom: .8em !important;
}

.kb-categories__list {
	display: flex;
	flex-wrap: wrap;
	gap: .6em;
}

.kb-cat {
	display: inline-flex;
	align-items: center;
	padding: .55em 1.2em;
	border: 1px solid var(--cl-tertiary-text-25);
	border-radius: 50px;
	color: var(--cl-tertiary-text);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: background .2s, border-color .2s;
}

.kb-cat:hover {
	background: var(--cl-tertiary-text-10);
	border-color: var(--cl-tertiary-text-75);
}

.kb-cat.active {
	background: var(--cl-primary);
	border-color: var(--cl-primary);
	color: var(--cl-primary-text);
}


/* ==========================================================================
   3b. ZOEKBALK
   Witte pil in de rode hero, onder de titel. Op een categoriepagina
   zoekt hij binnen die categorie, op het overzicht in de hele kennisbank.
   ========================================================================== */

.kb-search {
	display: flex;
	align-items: center;
	max-width: 560px;
	margin-top: 1.5em;
	padding: .35em;
	background: var(--cl-default);
	border-radius: 50px;
	box-shadow: 0 10px 30px var(--cl-default-text-10);
	transition: box-shadow .2s;
}

/* Duidelijke focusrand voor toetsenbordgebruikers */
.kb-search:focus-within {
	box-shadow: 0 0 0 3px var(--cl-tertiary-text-25), 0 10px 30px var(--cl-default-text-10);
}

/* Theme stijlen voor inputs neutraliseren */
.kb-search input[type="search"] {
	flex: 1;
	min-width: 0;
	height: auto;
	margin: 0 !important;
	padding: .7em 1.2em;
	border: 0;
	border-radius: 50px;
	background: transparent;
	box-shadow: none;
	outline: none;
	color: var(--cl-default-text);
	font-size: 16px;
	-webkit-appearance: none;
	appearance: none;
}

.kb-search input[type="search"]::placeholder {
	color: var(--cl-default-text-75);
	opacity: 1;
}

.kb-search button {
	flex: none;
	margin: 0;
	padding: .75em 1.6em;
	border: 0;
	border-radius: 50px;
	background: var(--cl-primary);
	color: var(--cl-primary-text);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background .2s;
}

.kb-search button:hover {
	background: var(--cl-primary-based);
}

/* Label visueel verbergen, maar houden voor schermlezers */
.kb-search .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Resultaatregel boven de kaarten op het beige vlak */
.kb-search__result {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5em 1.5em;
	margin-bottom: 2em;
}

.kb-search__result p {
	margin: 0 !important;
	color: var(--cl-default-text);
	font-size: 18px;
	font-weight: 500;
}

.kb-search__reset {
	color: var(--cl-tertiary);
	font-size: 15px;
	font-weight: 700;
	text-decoration: underline;
}


/* ==========================================================================
   4. KAARTEN (OVERZICHT EN CATEGORIE)
   ========================================================================== */

/* Kolommen als flex, zodat alle kaarten in een rij even hoog zijn */
.kb-grid > [class*="col-"] {
	display: flex;
}

.kb-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--cl-default);
	box-shadow: 0 10px 30px var(--cl-default-text-05);
	transition: transform .25s ease, box-shadow .25s ease;
}

.kb-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px var(--cl-default-text-10);
}

/* Uitgelichte afbeelding (alleen als die is ingesteld) */
.kb-card__image {
	position: relative;
	padding-bottom: 55%;
	overflow: hidden;
}

.kb-card__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kb-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 2.2em 2em 1.8em;
}

/* Groen categorielabel (alleen op het overzicht) */
.kb-card__label {
	color: var(--cl-primary);
	font-size: 14px;
	margin-bottom: .6em;
}

.kb-card__title {
	font-size: 22px;
	line-height: 1.25;
	margin: 0 0 .6em;
}

.kb-card__title a {
	color: var(--cl-default-text);
	font-size: inherit;
	text-decoration: none;
}

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

.kb-card__excerpt {
	font-size: 15px;
	color: var(--cl-default-text-75);
	margin-bottom: 1.5em !important;
}

/* Footer met lijn en "Lees meer" altijd onderaan de kaart */
.kb-card__footer {
	margin-top: auto;
}

.kb-card__footer hr {
	margin: 0 0 1em;
	border: 0;
	border-top: 1px solid var(--cl-default-text-15);
}

.kb-card__more {
	display: inline-flex;
	gap: .5em;
	font-size: 15px;
	font-weight: 700;
	color: var(--cl-default-text);
}

.kb-card__more .arrow {
	font-size: 15px;
	transition: transform .2s ease;
}

.kb-card:hover .kb-card__more .arrow {
	transform: translateX(4px);
}


/* ==========================================================================
   5. PAGINERING
   ========================================================================== */

.kb-pagination {
	margin-top: 3em;
}

/* Verbergt de kop "Paginering" visueel, maar houdt hem voor schermlezers */
.kb-pagination .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.kb-pagination .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .5em;
}

.kb-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4em;
	height: 2.4em;
	padding: 0 .5em;
	border-radius: 50px;
	background: var(--cl-default);
	color: var(--cl-default-text);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: background .2s;
}

.kb-pagination a.page-numbers:hover {
	background: var(--cl-secondary-based);
}

.kb-pagination .page-numbers.current {
	background: var(--cl-tertiary);
	color: var(--cl-tertiary-text);
}

.kb-pagination .page-numbers.dots {
	background: transparent;
}


/* ==========================================================================
   6. CATEGORIEBESCHRIJVING MET AFBEELDING
   Onder de kaarten op de categoriepagina. Tekst uit de categoriebeschrijving,
   afbeelding uit het ACF veld "kb_categorie_afbeelding" (optioneel).
   ========================================================================== */

.kb-description {
	display: flex;
	margin-top: 4em;
	background: var(--cl-default);
	border-top-right-radius: var(--r-m);
	overflow: hidden;
}

.kb-description__text {
	flex: 1;
	padding: 2.5em;
}

/* Vlak is volle breedte, maar de tekstregels blijven leesbaar */
.kb-description__text > * {
	max-width: 820px;
}

.kb-description__text h2,
.kb-description__text h3 {
	margin-bottom: .5em;
}

.kb-description__text p {
	color: var(--cl-default-text-75);
	margin-bottom: .8em !important;
}

.kb-description__text p:last-child {
	margin-bottom: 0 !important;
}

.kb-description__text a {
	color: var(--cl-tertiary);
	text-decoration: underline;
}

/* Afbeelding vult altijd de volle hoogte van het blok */
.kb-description__image {
	position: relative;
	flex: 0 0 40%;
	min-height: 300px;
}

.kb-description__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ==========================================================================
   7. DEFINITIEPAGINA: LAYOUT EN INHOUD
   ========================================================================== */

.kb-single {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 2.5em;
	align-items: start;
}

.kb-single__content {
	padding: 3em;
	background: var(--cl-default);
	border-top-right-radius: var(--r-m);
}

.kb-single__content > * {
	max-width: 760px;
}

/* Ruimte boven tussenkoppen (het theme zet margin-top op 0 !important) */
.kb-single__content > * + h2,
.kb-single__content > * + h3 {
	margin-top: 1.4em !important;
}

.kb-single__content > :last-child {
	margin-bottom: 0 !important;
}

.kb-single__content a {
	color: var(--cl-tertiary);
	text-decoration: underline;
}

/* Koppen in de inhoud kleiner dan de theme standaard (h2 is daar erg groot) */
.kb-single__content h2 {
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.2;
}

.kb-single__content h3 {
	font-size: 22px;
	line-height: 1.25;
}

/* Blockquote = korte definitie van het begrip, als uitgelicht blok */
.kb-single__content blockquote {
	position: relative;
	margin: 0 0 2.5em;
	padding: 1.6em 1.8em;
	background: var(--cl-secondary-60);
	border-left: 4px solid var(--cl-primary);
	border-top-right-radius: var(--r-m);
}

.kb-single__content blockquote::before {
	content: 'In het kort';
	display: block;
	margin-bottom: .5em;
	color: var(--cl-primary-based);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.kb-single__content blockquote p {
	margin: 0 !important;
	color: var(--cl-default-text);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.45;
}

.kb-single__content blockquote p + p {
	margin-top: .6em !important;
}

.kb-single__content blockquote cite {
	display: block;
	margin-top: .8em;
	font-size: 14px;
	font-style: normal;
	color: var(--cl-default-text-75);
}


/* ==========================================================================
   8. DEFINITIEPAGINA: ZIJBALK
   ========================================================================== */

/* Scrollt mee op desktop. Verhoog "top" als hij onder het vaste menu valt. */
.kb-single__sidebar {
	position: sticky;
	top: 120px;
	display: flex;
	flex-direction: column;
	gap: 1.5em;
}

.kb-widget {
	padding: 2em;
	background: var(--cl-default);
}

.kb-widget__title {
	font-size: 18px;
	font-weight: 500;
	color: var(--cl-default-text);
	margin-bottom: .8em !important;
}

/* Lijst "Meer in [categorie]" */
.kb-single .kb-related {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kb-single .kb-related li {
	margin: 0 !important;
	padding: 0 !important;
	border-top: 1px solid var(--cl-default-text-10);
}

.kb-single .kb-related li:first-child {
	border-top: 0;
}

/* Theme bolletjes weghalen */
.kb-single .kb-related li::before,
.kb-single .kb-related li::marker {
	content: none !important;
	display: none !important;
}

.kb-related a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
	padding: .7em 0;
	color: var(--cl-default-text);
	font-size: 16px;
	text-decoration: none;
	transition: color .2s;
}

.kb-related a span {
	font-size: inherit;
}

.kb-related a:hover {
	color: var(--cl-tertiary);
}

.kb-related .arrow {
	transition: transform .2s ease;
}

.kb-related a:hover .arrow {
	transform: translateX(4px);
}

.kb-widget__more {
	display: inline-block;
	margin-top: 1em;
	color: var(--cl-tertiary);
	font-size: 15px;
	font-weight: 700;
}

/* Categoriepillen op lichte achtergrond */
.kb-widget .kb-cat {
	color: var(--cl-default-text);
	border-color: var(--cl-default-text-15);
	font-size: 14px;
}

.kb-widget .kb-cat:hover {
	background: var(--cl-secondary);
	border-color: var(--cl-secondary-based);
}

.kb-widget .kb-cat.active {
	background: var(--cl-primary);
	border-color: var(--cl-primary);
	color: var(--cl-primary-text);
}


/* ==========================================================================
   9. BLOG BLOKKEN EN CTA
   ========================================================================== */

/* Formulier (Blog) blok binnen een definitie, gelijk aan de blogposts */
.single-kennisbank .image-form .container {
	padding: 0;
}

/* CTA "Advies of hulp nodig?" onderaan op beige, zoals bij de blog */
.post-type-archive-kennisbank .cta,
.tax-kennisbank-categorie .cta,
.single-kennisbank .cta {
	background: var(--cl-secondary);
}


/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */

/* Tablet: zijbalk onder de inhoud */
@media (max-width: 991px) {
	.kb-single {
		grid-template-columns: 1fr;
	}

	.kb-single__sidebar {
		position: static;
	}
}

/* Mobiel */
@media (max-width: 767px) {
	.kb-card__body {
		padding: 1.8em 1.5em 1.5em;
	}

	.kb-card__title {
		font-size: 20px;
	}

	/* Zoekbalk: compacter. Input blijft 16px, anders zoomt iOS in bij focus. */
	.kb-search {
		max-width: none;
	}

	.kb-search input[type="search"] {
		padding: .6em 1em;
	}

	.kb-search button {
		padding: .7em 1.2em;
	}

	/* Categoriebeschrijving: afbeelding boven de tekst */
	.kb-description {
		flex-direction: column;
		margin-top: 3em;
	}

	.kb-description__text {
		padding: 1.8em 1.5em;
	}

	.kb-description__image {
		order: -1;
		flex: none;
		min-height: 220px;
	}

	.kb-single__content,
	.kb-widget {
		padding: 1.8em 1.5em;
	}

	.kb-single__content blockquote {
		padding: 1.3em 1.4em;
	}

	.kb-single__content blockquote p {
		font-size: 18px;
	}

	.single-kennisbank .form-box ul {
		padding-left: 0;
	}
}