/**
 * Dutch Balance — blog.css
 *
 * Afgesplitst uit extra.css op 12-09-2026 (CSS per template). Alleen regels
 * waarvan elke selector aantoonbaar op één pagina-type voorkomt; alles wat op
 * meerdere plekken gebruikt wordt staat nog in extra.css. Laadt NA extra.css,
 * zie inc/enqueue.php. Volgorde en @media-groepen zijn uit extra.css overgenomen.
 */

.db-single-head {
	text-align: center;
}

.db-single-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: clamp(2rem, 4.2vw, 3rem) !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
	color: var(--wp--preset--color--forest) !important;
	letter-spacing: -0.005em;
}

.db-single-meta {
	justify-content: center;
	align-items: center;
	gap: 0.5rem !important;
	color: var(--wp--preset--color--text-muted);
}

.db-single-meta time,
.db-single-meta .wp-block-post-author-name {
	font-size: 13px;
	color: var(--wp--preset--color--text-muted) !important;
	margin: 0 !important;
}

/* Featured image — radius via inline-style; wrap zorgt voor 1100px max */
.db-single-image-wrap {
	max-width: 100% !important;
}

.db-single-image img {
	width: 100%;
	height: auto;
	display: block;
	box-shadow: var(--db-shadow-md);
}

/* Body section: terug naar 720px content */
.db-single-body {
	max-width: 100% !important;
}

/* Author-bio onderaan */
.db-single-author {
	background: var(--wp--preset--color--warm-white);
	border-top: 1px solid var(--db-border-subtle);
}

.db-single-author-avatar img {
	border-radius: 50% !important;
	width: 64px;
	height: 64px;
	object-fit: cover;
	display: block;
}

.db-single-author-name {
	font-family: var(--wp--preset--font-family--heading) !important;
	margin: 0 0 0.25rem 0 !important;
}

.db-single-author-bio {
	line-height: 1.55;
	margin: 0 !important;
}

/* Related posts — gebruikt EXACT dezelfde kaart als het blog-archief:
   het grid draagt de class .db-blog-grid (zie single.html), dus base .db-kennis-*
   + .db-blog-grid + .db-kennis-foot doen al het werk. Eén blogkaart, overal gelijk
   (net als de productkaart op PLP/up-/cross-sell). Hier alleen de sectie-wrapper. */
.db-single-related {
	max-width: 100% !important;
}

/* ============================================================
   SECTIE — BLOG (sessie 9, 2026-06-30)
   Archief (index/archive) + detail (single). Sessie-7 page-header
   (breadcrumb + titel, GÉÉN cream-band) + featured-post + leestijd.
   Vervangt de oude .db-archive-head-band-aanpak (dood, opruim-kandidaat).
   ============================================================ */

/* ---- Gedeeld: intro onder de paginatitel ---- */
.db-blog-intro {
	max-width: 640px;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--wp--preset--color--charcoal-soft);
}

.db-blog {
	max-width: 100% !important;
}

/* ---- Featured-post (groot 2-koloms, alleen blog-landing) ---- */
.db-blog-featured {
	background: #fff; /* echt wit → contrast met warm-white body (= Martijn) */
	border: 1px solid var(--db-border-subtle);
	border-radius: var(--db-radius-2xl);
	overflow: hidden;
	box-shadow: var(--db-shadow-soft);
	transition: box-shadow 300ms;
	margin-bottom: 3rem;
}

.db-blog-featured:hover {
	box-shadow: var(--db-shadow-md);
}

.db-blog-featured-media {
	overflow: hidden;
	background: var(--wp--preset--color--cream);
}

.db-blog-featured-img,
.db-blog-featured-img img {
	display: block;
	width: 100%;
}

.db-blog-featured-img img {
	object-fit: cover;
	transition: transform 700ms ease;
}

.db-blog-featured:hover .db-blog-featured-img img {
	transform: scale(1.03);
}

.db-blog-featured-body {
	padding: 2.5rem !important;
	box-sizing: border-box; /* anders telt padding bovenop width:100% → 55px overflow rechts op mobiel (fix 2026-07-19) */
	display: flex;
	flex-direction: column;
	justify-content: flex-start; /* content bovenaan, voet onderaan gepind (= productkaart) */
}

.db-blog-featured-eyebrow,
.db-blog-featured-eyebrow a {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal) !important;
	text-decoration: none !important;
	margin: 0 0 0.85rem 0 !important;
}

.db-blog-featured-title,
.db-blog-featured-title a {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: clamp(1.5rem, 2.4vw, 1.9rem) !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	color: var(--wp--preset--color--forest) !important;
	text-decoration: none !important;
	margin: 0 0 0.85rem 0 !important;
	display: block;
}

.db-blog-featured-title a:hover {
	color: var(--wp--preset--color--forest-deep) !important;
}

.db-blog-featured-excerpt {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.65;
	color: var(--wp--preset--color--charcoal-soft);
	margin: 0 0 1.1rem 0;
}

.db-blog-featured-foot { display:flex; justify-content:space-between; align-items:center;
	gap: 0.5rem !important;
	margin-top: auto; /* duwt de voet naar de onderkant van de kaart (= productkaart) */
	padding-top: 1.5rem;
}

.db-blog-featured-date {
	font-size: 12px !important;
	color: var(--wp--preset--color--text-muted) !important;
	margin: 0 !important;
}

.db-blog-featured-cta {
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--teal);
	margin: 0;
}

@media (min-width: 782px) {
	.db-blog-featured {
		align-items: stretch;
	}

	/* Beeld absoluut in de mediakolom: zo kan de BEELDVERHOUDING nooit de kaarthoogte
	   bepalen, die volgt puur de body. Een vierkant bestand blies de kaart anders op
	   (shilajit.webp was 1:1 terwijl de jpg 16:9 is → kaart 646px hoog, 2026-07-19).
	   Zelfde patroon als de categorie-afbeeldingen. */
	.db-blog-featured-media {
		position: relative;
	}

	.db-blog-featured-img {
		position: absolute;
		inset: 0;
		display: block;
	}

	.db-blog-featured-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		aspect-ratio: auto !important;
	}
}

@media (max-width: 781px) {
	/* Stapel de featured-kolommen gegarandeerd verticaal (beeld boven, tekst onder),
	   ongeacht de inline flex-basis 56/44 uit het block. flex-basis:auto voorkomt dat
	   56% als HOOGTE-basis wordt gelezen zodra de as verticaal is. */
	.db-blog-featured {
		flex-direction: column;
	}

	.db-blog-featured-media,
	.db-blog-featured-body {
		flex-basis: auto !important;
		width: 100%;
	}

	/* Beeld krijgt dezelfde vaste ratio als de gewone kennis-kaarten (16/10), zodat het
	   niet uitrekt tot de volle body-hoogte = kaart veel te hoog. (fix 2026-07-03) */
	.db-blog-featured-media {
		aspect-ratio: 16 / 10;
	}

	.db-blog-featured-img,
	.db-blog-featured-img img {
		height: 100%;
	}

	.db-blog-featured-img img {
		object-fit: cover;
	}

	.db-blog-featured-body {
		padding: 1.75rem !important;
	}
}

/* ---- Grid van kennis-cards (gedeeld index/archive) ---- */
.db-blog-grid {
	gap: 2rem !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.db-blog-grid > li,
.db-blog-grid > * {
	list-style: none;
}

.db-blog-grid .db-kennis-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0 !important;
	background: #fff; /* echt wit → contrast met warm-white body (= Martijn) */
	border: 1px solid var(--db-border-subtle);
}

.db-blog-grid .db-kennis-img {
	border-radius: 0 !important;
}

.db-blog-grid .db-kennis-body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.db-blog-grid .db-kennis-excerpt {
	flex: 1;
}

@media (max-width: 1023px) {
	.db-blog-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.5rem !important; }
}

@media (max-width: 640px) {
	.db-blog-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 767px) {
	.db-single-related .db-blog-grid {
		display: flex !important;
		max-width: calc(100vw - 48px);
		grid-template-columns: none !important;
		gap: 1rem !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.db-single-related .db-blog-grid::-webkit-scrollbar {
		display: none;
	}

	/* Post-template rendert <ul><li> → het <li> is het flex-item (de .db-kennis-card
	   zit erin), dus hier op de directe child (li) i.p.v. de kaart zoals bij de
	   custom-block-carousels (bestsellers/PDP). */
	.db-single-related .db-blog-grid > * {
		flex: 0 0 calc(100% - 48px);
		max-width: 360px;
		scroll-snap-align: start;
	}
}

/* ---- Single-head: links uitgelijnd (override oude centrering) ---- */
.db-single-head {
	text-align: left;
}

.db-single-head .db-single-eyebrow {
	display: block; /* block → blijft binnen de constrained 760px-kolom, links uitgelijnd met de titel (inline-block valt uit de centrering) */
	margin-top: var(--db-title-gap);
	margin-bottom: 0.75rem !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.db-single-head .db-single-eyebrow,
.db-single-head .db-single-eyebrow a {
	color: var(--wp--preset--color--teal) !important;
	text-decoration: none !important;
}

.db-single-head .db-page-title.db-single-title {
	margin-top: var(--db-title-gap) !important; /* breadcrumb → titel (eyebrow verwijderd, titel levert nu de top-ruimte) */
}

.db-single-head .db-single-meta {
	justify-content: flex-start;
	margin-top: 1.25rem !important;
}

.db-single-head .db-single-meta time,
.db-single-head .db-single-meta .wp-block-post-author-name,
.db-single-head .db-single-meta .db-reading-time {
	font-size: 13px;
	color: var(--wp--preset--color--text-muted) !important;
	margin: 0 !important;
}

/* ---- Auteur-bio = cream card (E-E-A-T) ---- */
.db-single-author {
	background: color-mix(in srgb, var(--wp--preset--color--cream) 60%, var(--wp--preset--color--warm-white));
	border: 1px solid var(--db-border-subtle);
	border-radius: var(--db-radius-2xl);
	border-top: 1px solid var(--db-border-subtle); /* override oude full-width border-top */
}

.db-single-author-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
	margin: 0 0 1rem 0;
}

.db-single-author-avatar img {
	width: 72px;
	height: 72px;
}

.db-single-author-name {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: 19px !important;
	font-weight: 500 !important;
	color: var(--wp--preset--color--forest) !important;
	margin: 0 0 0.4rem 0 !important;
}

.db-single-author-bio {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.65;
	color: var(--wp--preset--color--charcoal-soft) !important;
	margin: 0 !important;
}

/* ---- Terug-naar-blog ---- */
.db-single-back {
	border-top: 1px solid var(--db-border-subtle);
}

.db-single-back-link {
	margin: 0;
}

.db-single-back-link a {
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--teal);
	text-decoration: none;
	transition: color 150ms;
}

.db-single-back-link a:hover {
	color: var(--wp--preset--color--forest);
}

/* ---- Gerelateerd-kop: eyebrow+titel links, "Alle artikelen →" rechtsboven (= Martijn) ---- */
.db-single-related-head {
	margin-bottom: 2.25rem;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
}

.db-single-related-all {
	margin: 0;
	flex-shrink: 0;
}

.db-single-related-all a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--teal);
	text-decoration: none;
	transition: color 150ms;
}

.db-single-related-all a::after {
	content: "";
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url(../icons/arrow-right.svg) center / contain no-repeat;
	mask: url(../icons/arrow-right.svg) center / contain no-repeat;
}

.db-single-related-all a:hover {
	color: var(--wp--preset--color--forest);
}

@media (max-width: 767px) {
	.db-single-related-all {
		display: none;
	}
}

.db-single-related-eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
	margin: 0 0 0.5rem 0;
}

.db-single-related-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: clamp(1.5rem, 3vw, 2rem) !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: var(--wp--preset--color--forest) !important;
}

.db-single-inner > .db-single-eyebrow,
.db-single-inner > .db-single-title,
.db-single-inner > .db-single-meta,
.db-single-inner > .db-single-image {
	max-width: var(--db-article-col, 820px);
}

/* ===== Inhoudsopgave (TOC) — ingeklapte balk bovenaan de tekstkolom, alleen H2 ===== */
.db-toc {
	margin: 0 0 2rem 0;
	background: color-mix(in srgb, var(--wp--preset--color--cream) 55%, var(--wp--preset--color--warm-white));
	border: 1px solid var(--db-border-subtle);
	border-radius: var(--db-radius-2xl);
}

.db-toc-summary {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.25rem;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.db-toc-summary::-webkit-details-marker { display: none; }

.db-toc-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
}

.db-toc-count {
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	padding: 0.25rem 0.5rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--teal) 12%, transparent);
	color: var(--wp--preset--color--teal);
}

.db-toc-chevron {
	margin-left: auto;
	color: var(--wp--preset--color--text-muted);
	transition: transform 150ms;
}

.db-toc-details[open] .db-toc-chevron { transform: rotate(180deg); }

.db-toc-list {
	list-style: none;
	margin: 0;
	padding: 0 1.25rem 0.9rem 1.25rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	column-gap: 1.5rem;
}

.db-toc-item {
	margin: 0;
}

.db-toc-item a {
	display: inline-block;
	padding: 0.22rem 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--wp--preset--color--charcoal-soft);
	text-decoration: none;
	transition: color 150ms;
}

.db-toc-item a:hover {
	color: var(--wp--preset--color--forest);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Auteur-box: "Meer artikelen van …"-link (= Martijn) */
.db-single-author-more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1.1rem;
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--teal);
	text-decoration: none;
	transition: color 150ms;
}

.db-single-author-more:hover { color: var(--wp--preset--color--forest); }

.db-single-author-more-icon { flex-shrink: 0; }

/* ===== DEEL-KNOPPEN (share) — sticky rail LINKS (desktop) + rij boven auteur (mobiel) ===== */
/* bodycol = flex-rij [rail | tekst], links op de wrapper-rand. De rail staat links
   (order:-1), de tekst-kolom (820) volgt na de gap → prose lijnt uit met de
   ingesprongen afbeelding/titel. */
.db-single-bodycol {
	max-width: var(--db-article-col, 820px); /* [rail | tekst] samen = afbeeldingsbreedte */
	display: flex;
	align-items: flex-start;
	gap: 2.5rem; /* 40px tussen deel-rail en tekst */
}

.db-single-main {
	flex: 1 1 auto;
	min-width: 0; /* vult de rest van de 820-kolom (820 − rail − gap) → rechterrand = afbeelding */
}

/* Desktop sticky rail — LINKS op de wrapper-rand, naast de tekst */
.db-single-share-rail {
	order: -1; /* visueel links; content blijft eerst in de DOM voor screenreaders */
	flex: 0 0 auto;
	position: sticky;
	top: 110px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	padding-top: 0;
	margin-top: 0.25rem; /* "Deel"-label uitlijnen met de eerste tekstregel (offset gemeten) */
}

.db-share-rail-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 0.25rem 0;
}

/* Knoppen-container: rail = verticaal, mobiele rij = horizontaal */
.db-share-buttons {
	display: flex;
	gap: 0.6rem;
}

.db-single-share-rail .db-share-buttons {
	flex-direction: column;
}

/* Knop = ronde outline (Dutch Balance / Martijn-stijl) */
.db-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--db-border-subtle);
	background: #fff;
	color: var(--wp--preset--color--forest); /* groen icoon (huisstijl) */
	cursor: pointer;
	transition: color 150ms, border-color 150ms, background 150ms, transform 150ms;
	padding: 0;
}

.db-share-btn:hover {
	color: #fff; /* wit icoon op groene achtergrond */
	border-color: var(--wp--preset--color--forest);
	background: var(--wp--preset--color--forest);
	transform: translateY(-1px);
}

.db-share-btn svg { display: block; }

/* Kopieer-knop: vinkje verbergen tot gekopieerd */
.db-share-copy .db-share-copy-check { display: none; }

/* Mobiele deel-rij (boven auteur) — standaard verborgen (desktop gebruikt de rail) */
.db-single-share-row { display: none !important; }

.db-share-row-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--forest);
	margin: 0;
}

@media (max-width: 960px) {
	.db-single-bodycol { display: block; max-width: 100%; }

	.db-single-main { max-width: 100%; }

	.db-single-share-rail { display: none; }

	.db-single-share-row {
		display: flex !important;
		align-items: center;
		gap: 1rem;
		flex-wrap: wrap;
		margin-top: 3rem;
		padding-top: 2rem;
		border-top: 1px solid var(--db-border-subtle);
	}
}

/* ===== Post-meta (auteur+avatar · datum+icoon · leestijd+klok) ===== */
.db-single-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 13px;
	color: var(--wp--preset--color--text-muted);
}

.db-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.db-meta-avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: block;
}

.db-meta-icon {
	color: var(--wp--preset--color--teal);
	flex-shrink: 0;
}

.db-meta-sep { opacity: 0.5; }

.db-single-meta time { color: inherit; }

/* Minder ruimte boven de afbeelding: head-onderruimte weg → gap = image padding-top (1.25rem, = titel-meta-gap) */
.db-single-head { padding-bottom: 0 !important; }