/* SC-34 Kennisbank -- /kennis/-overzicht, [sc_faq] en kennisartikelen.
 * Palet (canvas SC-34): accent #FF6210, tekst #1C0D0A, creme #FEF1E4,
 * randen #E5D7D1, links #A63F00 (4,5:1 op wit en creme). Fonts erft de site
 * al (Astra laadt Work Sans + Inter); hier geen extra font-load. */

.sc-kennis {
	--sc-accent: #FF6210;
	--sc-tekst: #1C0D0A;
	--sc-rand: #E5D7D1;
	--sc-link: #A63F00;
	--sc-link-hover: #7A2E00;
	--sc-gedempt: #5C4A43;
	gap: 28px;
	align-items: flex-start;
}
/* Astra geeft .entry-content > .wp-block-columns 3em binnenmarge rondom; de
 * kolommen moeten links uitlijnen met de H1 en de intro (canvas). */
.entry-content > .wp-block-columns.sc-kennis {
	padding: 0;
	margin-top: 24px;
}

.sc-kennis a,
.sc-faq a,
.sc-kennis-kop a,
.sc-kennis-voet a,
.sc-kennis__vraag a { color: #A63F00; }
.sc-kennis a:hover,
.sc-faq a:hover,
.sc-kennis-kop a:hover,
.sc-kennis-voet a:hover,
.sc-kennis__vraag a:hover { color: #7A2E00; }

/* Kolomkop: dikke donkere onderlijn zoals op het canvas. */
.sc-kennis .wp-block-column > .wp-block-heading {
	font-family: 'Work Sans', sans-serif;
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 4px;
	padding-bottom: 14px;
	border-bottom: 2px solid #1C0D0A;
	color: #1C0D0A;
}
.sc-kennis .sc-kennis__faq > .wp-block-heading { font-size: 24px; }

/* Shift Happens en FAQ: witte kaart. Verdiepend: losse kaarten. */
.sc-kennis .sc-kennis__sh,
.sc-kennis .sc-kennis__faq {
	background: #FFFFFF;
	border: 1px solid #E5D7D1;
	border-radius: 10px;
	padding: 24px;
	box-sizing: border-box;
}
.sc-kennis .sc-kennis__faq { padding: 28px 32px; }

/* Astra hangt via post_class 'ast-article-single' aan elk Query Loop-item;
 * .ast-separate-container geeft dat padding 1.5em 2.14em + achtergrond, wat
 * in een smalle kolom de inhoud tot ~40px liet krimpen (fixronde 2026-09-25).
 * Hoge specificiteit: laadvolgorde t.o.v. Astra's inline CSS is niet gegarandeerd. */
.sc-kennis .wp-block-post-template > .wp-block-post.ast-article-single {
	padding: 0;
	margin: 0;
	background: none;
	box-shadow: none;
	border: 0;
	width: 100%;
	max-width: none;
}

/* Shift Happens-items: datum + zin + bronlink, gescheiden door een lijn. */
.sc-kennis__sh .wp-block-post-template { margin: 0; padding: 0; list-style: none; }
.sc-kennis .sc-kennis__sh .wp-block-post-template > .wp-block-post { padding: 16px 0; border-bottom: 1px solid #E5D7D1; margin: 0; }
.sc-kennis__sh .wp-block-post-date { font-size: 12px; font-weight: 600; color: #A63F00; margin-bottom: 6px; }
.sc-kennis__sh .wp-block-post-content,
.sc-kennis__sh .wp-block-post-content p { font-size: 14px; line-height: 1.5; margin: 0 0 6px; }

/* Verdiepend-kaarten. */
.sc-kennis__vd .wp-block-post-template { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.sc-kennis__vd .sc-kennis-kaart { width: 100%; box-sizing: border-box; }
.sc-kennis-kaart {
	background: #FFFFFF;
	border: 1px solid #E5D7D1;
	border-radius: 10px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.sc-kennis-kaart > * { margin: 0 !important; }
.sc-kennis-kaart .wp-block-post-terms { font-size: 12px; font-weight: 600; color: #A63F00; }
/* Astra zet font-size (28px) ook direct op .entry-content :where(h3) a -> titel
 * en link allebei expliciet op 18px (canvas), met hogere specificiteit. */
.sc-kennis .sc-kennis-kaart .wp-block-post-title,
.sc-kennis .sc-kennis-kaart .wp-block-post-title a {
	font-family: 'Work Sans', sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}
.sc-kennis-kaart .wp-block-post-title a { color: #1C0D0A; text-decoration: none; }
.sc-kennis-kaart .wp-block-post-title a:hover { color: #A63F00; text-decoration: underline; }
.sc-kennis-kaart .wp-block-post-excerpt,
.sc-kennis-kaart .wp-block-post-excerpt p { font-size: 13px; line-height: 1.5; color: #353535; margin: 0; }
.sc-kennis-kaart .wp-block-post-excerpt__more-text { display: none; }
.sc-kennis-kaart .wp-block-post-time-to-read { font-size: 12px; color: #5C4A43; }
.sc-kennis-kaart .wp-block-post-time-to-read::after { content: " lezen"; }

.sc-kennis .sc-kennis__alle { margin: 12px 0 0; font-size: 14px; font-weight: 600; }

/* Onderaan: "Staat uw vraag er niet tussen?" + pill-link (canvas). */
.sc-kennis__vraag {
	margin-top: 28px;
	background: #FFFFFF;
	border: 1px solid #E5D7D1;
	border-radius: 10px;
	padding: 24px 28px;
	font-size: 16px;
	line-height: 1.5;
}
.sc-kennis__vraag a {
	display: inline-block;
	margin-left: 8px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border: 1.5px solid #1C0D0A;
	border-radius: 999px;
	padding: 10px 20px;
}

/* FAQ-uitklapper ([sc_faq]). */
.sc-faq { display: flex; flex-direction: column; margin-top: 8px; }
.sc-faq__item { border-bottom: 1px solid #E5D7D1; padding: 18px 0; }
.sc-faq__item:last-child { border-bottom: 0; }
.sc-faq__vraag {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: #1C0D0A;
}
.sc-faq__vraag::-webkit-details-marker { display: none; }
.sc-faq__vraag::after { content: "+"; color: #A63F00; flex-shrink: 0; }
.sc-faq__item[open] > .sc-faq__vraag::after { content: "\2212"; }
.sc-faq__vraag:focus-visible { outline: 2px solid #A63F00; outline-offset: 4px; }
.sc-faq__antwoord { margin-top: 12px; font-size: 15px; line-height: 1.6; color: #353535; }
.sc-faq__antwoord p { margin: 0 0 10px; }
.sc-faq__permalink { font-size: 14px; font-weight: 600; }

/* Mobiel (core Columns stapelt onder 782px): volgorde FAQ -> Shift Happens -> Verdiepend. */
@media (max-width: 781px) {
	.sc-kennis .sc-kennis__faq { order: -1; padding: 20px; }
	.sc-kennis .sc-kennis__sh { order: 0; }
	.sc-kennis .sc-kennis__vd { order: 1; }
}

/* Kennisartikel: kruimelpad + terugknop boven, terugknop onder. */
.sc-kennis-kop { margin: 0 0 24px; font-size: 14px; }
.sc-kennis-kop__rij { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; }
.sc-kruimelpad { font-size: 13px; color: #5C4A43; }
.sc-kennis-terug { font-weight: 600; text-decoration: none; }
.sc-kennis-meta { margin: 12px 0 0; font-size: 13px; color: #5C4A43; }
.sc-kennis-voet { margin: 32px 0 0; padding-top: 24px; border-top: 1px solid #E5D7D1; }
.sc-kennis-voet .sc-kennis-terug--knop {
	display: inline-block;
	color: #1C0D0A;
	border: 1.5px solid #1C0D0A;
	border-radius: 999px;
	padding: 12px 22px;
	font-size: 15px;
}
.sc-kennis-voet .sc-kennis-terug--knop:hover { color: #FFFFFF; background: #1C0D0A; }