/*
Theme Name: Cryptomaan Nieuws
Theme URI: https://cryptomaan.nl/nieuws
Author: Cryptomaan
Description: Licht blokthema voor de Cryptomaan crypto-nieuwssite. Huisstijl (Inter, merkblauw #1f32e0) afgestemd op cryptomaan.nl. Tokens staan in theme.json.
Version: 0.3.5
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cryptomaan-nieuws
*/

/* Aanvullende stijl bovenop theme.json. Houd dit licht. */

/* Categorie-pill (post-terms) */
.is-categorie-pill a,
.categorie-pill a {
	display: inline-block;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary-tint);
	padding: 0.2rem 0.65rem;
	border-radius: 9999px;
	text-decoration: none;
	line-height: 1.4;
}

/* Artikel-kaart */
.artikel-kaart {
	background: var(--wp--preset--color--bg);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--xl);
	overflow: hidden;
	box-shadow: var(--wp--custom--shadow--sm);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
	height: 100%;
}
.artikel-kaart:hover {
	box-shadow: var(--wp--custom--shadow--md);
	transform: translateY(-2px);
}
.artikel-kaart .wp-block-post-title {
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 600;
	line-height: 1.3;
}

/* Meta-regel (byline/datum) */
.artikel-meta,
.artikel-meta a {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-subtle);
}

/* Lead / samenvatting */
.artikel-lead {
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--text-muted);
	line-height: 1.55;
}

/* Afgeronde uitgelichte afbeeldingen */
.wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius--xl);
}
/* In een kaart-media-wrapper zit de foto strak (linksonder ligt het categorie-
   label eroverheen). Op de artikel-kaart (categorie-pagina) loopt de foto flush
   tegen de kaartrand, net als op home; op de artikelpagina houdt de foto z'n
   ronde hoeken via de wrapper. */
.artikel-kaart .kaart-media .wp-block-post-featured-image img {
	border-radius: 0;
}
.kaart-media .wp-block-post-featured-image {
	margin: 0;
}
.kaart-media .wp-block-post-featured-image img {
	display: block;
	width: 100%;
}

/* ================================================================== *
 * Homepage-feed (dynamisch blok cryptomaan/home-feed)
 * ================================================================== */
.home-feed {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

/* Media + categorie-label eroverheen (linksboven) */
.kaart-media {
	position: relative;
	display: block;
}
.kaart-imglink {
	display: block;
}
.kaart-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.categorie-over {
	position: absolute;
	top: 0;
	left: 0;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.4;
	padding: 0.35rem 0.8rem;
	border-radius: 0;
	text-decoration: none;
}
.categorie-over:hover {
	background: var(--wp--preset--color--primary-hover);
	color: #fff;
}
/* Op de grid-kaarten: label linksonder, 10px los van de randen, ronde hoeken.
   (De hero houdt zijn label linksboven, anders botst het met de hero-titel.) */
.kaart-media .categorie-over {
	top: auto;
	bottom: 10px;
	left: 10px;
	border-radius: 5px;
}

/* Hero: titel over de afbeelding (BLOX-stijl) */
.home-hero {
	margin: 0;
}
.hero-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--xl);
}
.hero-media .kaart-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0;
}
.hero-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2.5rem 1.5rem 1.25rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 100%);
	color: #fff;
}
/* Hero: categorie-label boven de titel (niet absoluut, loopt mee in de overlay),
   uitgelijnd met de titel en met 10px ruimte eronder. */
.hero-overlay .categorie-over {
	position: static;
	display: inline-block;
	margin-bottom: 10px;
	border-radius: 5px;
}
.hero-titel {
	margin: 0 0 0.4rem;
	max-width: 46rem;
}
.hero-titel a {
	color: #fff;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 800;
	line-height: 1.15;
	text-decoration: none;
}
.hero-titel a:hover {
	color: #fff;
	text-decoration: underline;
}
.hero-meta {
	font-size: var(--wp--preset--font-size--sm);
	color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 640px) {
	.hero-titel a {
		font-size: var(--wp--preset--font-size--xxl);
	}
	.hero-overlay {
		padding: 1.5rem 1rem 1rem;
	}
}

/* Grid van kaarten */
.home-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
@media (max-width: 1024px) {
	.home-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.home-grid { grid-template-columns: 1fr; }
}

/* Kaart */
.home-grid .artikel-kaart {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.home-grid .artikel-kaart .kaart-img {
	border-radius: 0;
}
.kaart-body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem;
}
.kaart-titel {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 600;
	line-height: 1.3;
}
.kaart-titel a,
.artikel-kaart .wp-block-post-title a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}
.kaart-titel a:hover,
.artikel-kaart .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}

/* Meta-regel */
.artikel-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-subtle);
}
.artikel-meta a {
	color: var(--wp--preset--color--text-subtle);
	text-decoration: none;
}
.artikel-meta a:hover {
	color: var(--wp--preset--color--primary);
}
.meta-sep {
	opacity: 0.6;
}

/* Kruimelpad boven de uitgelichte afbeelding (Home > Categorie > Artikel) */
.kruimelpad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.75rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-subtle);
}
.kruimelpad a {
	color: var(--wp--preset--color--text-subtle);
	text-decoration: none;
}
.kruimelpad a:hover {
	color: var(--wp--preset--color--primary);
}
.kruimel-sep {
	opacity: 0.6;
}
.kruimel-huidig {
	color: var(--wp--preset--color--text-muted);
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Meta-regel tussen afbeelding en H1: auteur, datum, tijd, leestijd (alles sm) */
.artikel-meta-top {
	margin-top: 0.75rem;
	margin-bottom: 0.25rem;
	color: var(--wp--preset--color--text-muted);
}
.artikel-meta-top a {
	color: var(--wp--preset--color--text-muted);
}
.artikel-meta-top a:hover {
	color: var(--wp--preset--color--primary);
}

/* Paginering */
.paginering {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin-top: 1rem;
}
.pagina-nr,
.pagina-pijl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
}
.pagina-nr:hover,
.pagina-pijl:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.pagina-nr.active {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
}

/* Auteur-bio (auteur-archief) */
.auteur-bio {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 760px;
	margin: 0.5rem 0 1.5rem;
	padding: 1.5rem;
	background: var(--wp--preset--color--surface, #f6f7f9);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
}
.auteur-bio-head {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}
.auteur-naam {
	margin: 0;
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 1.1;
}
.auteur-bio p {
	margin: 0;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.6;
}
.auteur-avatar-wrap {
	flex: 0 0 auto;
}
.auteur-avatar {
	display: block;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
}
/* E-mailknop op de auteurpagina */
.auteur-mail {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.15rem;
	background: var(--wp--preset--color--primary, #1f32e0);
	color: #ffffff;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border-radius: 999px;
	transition: background 0.15s ease;
}
.auteur-mail:hover,
.auteur-mail:focus-visible {
	background: var(--wp--preset--color--primary-hover, #1929c0);
	color: #ffffff;
}
.auteur-mail-icoon {
	flex: 0 0 auto;
}

@media (max-width: 600px) {
	.auteur-bio-head {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.auteur-bio p {
		text-align: center;
	}
	.auteur-mail {
		align-self: center;
	}
}

/* Redactie-overzicht */
.redactie-lijst {
	display: grid;
	gap: 1.25rem;
	margin-top: 1.5rem;
}
.redactie-kaart {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
}
.redactie-kaart .redactie-avatar {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
}
.redactie-kaart h2 {
	margin: 0 0 0.5rem;
}
.redactie-kaart h2 a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}
.redactie-kaart h2 a:hover {
	color: var(--wp--preset--color--primary);
}
.redactie-kaart p {
	margin: 0;
	color: var(--wp--preset--color--text-muted);
	line-height: 1.6;
}

/* Dropdowns: parent blijft niet-klikbaar (open-on-click knop), maar opent op
   desktop óók op hover/focus. Overschrijft de core "verborgen" submenu-staat. */
@media (min-width: 782px) {
	.site-header .wp-block-navigation .has-child.open-on-click:hover > .wp-block-navigation__submenu-container,
	.site-header .wp-block-navigation .has-child.open-on-click:focus-within > .wp-block-navigation__submenu-container {
		height: auto;
		min-width: 200px;
		width: auto;
		overflow: visible;
		opacity: 1;
		visibility: visible;
	}
}

/* Footer: 3 kolommen */
.site-footer .footer-kop {
	margin: 0 0 0.9rem;
	color: var(--wp--preset--color--text);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lg);
}
.footer-cats a,
.footer-links a {
	font-size: var(--wp--preset--font-size--lg);
}
.footer-cats,
.footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.footer-cats a,
.footer-links a,
.footer-email a {
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
}
.footer-cats a:hover,
.footer-links a:hover,
.footer-email a:hover {
	color: var(--wp--preset--color--primary);
}
.footer-logo {
	margin-bottom: 0.9rem;
}
.footer-email {
	margin: 0;
}

/* Alle kolommen: inhoud links uitgelijnd, gelijke tussenruimte */
.footer-cols {
	align-items: flex-start;
	gap: 2rem;
}
.footer-col {
	flex: 1 1 0;
	text-align: left;
}
.footer-col .footer-links,
.footer-col .footer-cats {
	align-items: flex-start;
}

/* Onderbalk / disclaimer: gecentreerd, volle breedte */
.footer-bar {
	margin-top: 1rem;
	text-align: center;
}
.footer-bar p {
	max-width: none;
}

@media (max-width: 781px) {
	/* Kolommen onder elkaar op mobiel */
	.footer-cols {
		flex-direction: column;
		gap: 2rem;
	}
	.footer-col {
		flex-basis: 100%;
	}
}

/* ================================================================== *
 * Single artikel: delen, navigatie, auteur, gerelateerd
 * ================================================================== */

/* Delen-knoppen */
.artikel-delen {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	flex-wrap: wrap;
	margin: 0.5rem 0 1rem;
}
.delen-label {
	font-weight: 700;
	color: var(--wp--preset--color--text);
}
.delen-knoppen {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.delen-knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	color: var(--wp--preset--color--text-muted);
	background: var(--wp--preset--color--bg);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.delen-knop:hover {
	color: #fff;
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}
.delen-kopieer.gekopieerd {
	color: #fff;
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

/* Vorig / volgend artikel */
.artikel-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin: 2rem 0;
}
.artikel-nav-cel {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.85rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	text-decoration: none;
	color: var(--wp--preset--color--text);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.artikel-nav-cel:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--custom--shadow--sm);
}
.artikel-nav-cel.is-leeg {
	border: none;
	box-shadow: none;
	pointer-events: none;
}
.artikel-nav-next {
	text-align: right;
	align-items: flex-end;
}
.artikel-nav-label {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-subtle);
	font-weight: 600;
}
.artikel-nav-inner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.artikel-nav-next .artikel-nav-inner {
	flex-direction: row-reverse;
}
.artikel-nav-img {
	width: 56px;
	height: 56px;
	flex: 0 0 auto;
	border-radius: var(--wp--custom--radius--lg);
	object-fit: cover;
}
.artikel-nav-img.is-leeg {
	background: var(--wp--preset--color--bg-subtle);
}
.artikel-nav-titel {
	font-weight: 600;
	line-height: 1.3;
}

/* Auteur onderaan */
.artikel-auteur {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin: 2rem 0;
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--surface, #f6f7f9);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
}
.artikel-auteur-fig {
	flex: 0 0 auto;
	line-height: 0;
}
.artikel-auteur-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}
.artikel-auteur-tekst {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}
.artikel-auteur-label {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-subtle);
}
.artikel-auteur-naam {
	font-weight: 700;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}
.artikel-auteur-naam:hover {
	color: var(--wp--preset--color--primary);
}
.artikel-auteur-bio {
	margin: 0.35rem 0 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-subtle);
	line-height: 1.5;
}

/* Tweet-/X-embed als screenshot (geen extern X-script, AVG/CLS-veilig).
   Generator levert een gewoon wp:image-blok met class "tweet-embed":
   de afbeelding is de screenshot, de figcaption bevat de bronlink. */
.tweet-embed {
	max-width: 520px;
	margin: 1.75rem auto;
}
.tweet-embed img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
}
.tweet-embed figcaption {
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--s, 0.875rem);
	color: var(--wp--preset--color--text-muted);
	text-align: center;
}
.tweet-embed figcaption a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.tweet-embed figcaption a:hover {
	text-decoration: underline;
}

/* Gerelateerde artikelen */
.gerelateerd {
	margin-top: 2.5rem;
}
.gerelateerd-kop {
	font-size: var(--wp--preset--font-size--xxl);
	margin: 0 0 1.25rem;
}

/* ================================================================== *
 * Mobiele body-gutter + grotere/hogere header
 * ================================================================== */

/* Consistente 10px zijmarge op mobiel voor élke pagina (home/artikel/categorie).
   Content is constrained (768/1200px) zonder root-padding, dus op smalle
   schermen raakt de inhoud anders de schermrand. Dit forceert overal 10px. */
@media (max-width: 781px) {
	main.wp-block-group {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* Header: grotere, vetgedrukte navigatie */
.site-header .wp-block-navigation {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
}
.site-header .wp-block-navigation a,
.site-header .wp-block-navigation .wp-block-navigation-item__content {
	font-weight: 700;
}

/* Home-hero: afbeelding 2x zo hoog als de grid-kaarten op mobiel.
   Op desktop is de hero al veel groter (volle breedte t.o.v. 1/3-kaarten),
   dus daar blijft 16/9. */
@media (max-width: 781px) {
	.hero-media .kaart-img {
		aspect-ratio: 8 / 9;
	}
}

/* ================================================================== *
 * Mobiele header: compacter, gutters, kleiner logo, duidelijke hamburger,
 * links uitgelijnd overlay-menu met accordion-submenu's
 * ================================================================== */
@media (max-width: 781px) {
	/* Compacte header + 10px zijmarge (tweeregelig logo = hoger, dus minder padding).
	   Let op: dit hoort op .header-inner, niet op .site-header: de promobalk is
	   een zusje binnen .site-header en moet volle breedte houden. */
	.site-header .header-inner {
		padding-top: 0.9rem !important;
		padding-bottom: 0.9rem !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	/* Footer: minimaal 10px zijmarge op mobiel */
	.site-footer {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* Logo compacter op mobiel */
	.site-header .custom-logo {
		width: 100px !important;
		height: auto !important;
	}

	/* Hamburger duidelijker: groter en in merkkleur */
	.wp-block-navigation__responsive-container-open {
		padding: 0.3rem;
	}
	.wp-block-navigation__responsive-container-open svg {
		width: 34px;
		height: 34px;
		fill: #ffffff;
	}

	/* Root-fix: dit menu is op desktop rechts uitgelijnd (items-justified-right),
	   waardoor core in het overlay álles naar rechts (flex-end) zet. In het
	   mobiele menu willen we links uitlijnen: overschrijf de layout-variabelen. */
	.site-header .wp-block-navigation {
		--navigation-layout-justification-setting: flex-start !important;
		--navigation-layout-justify: flex-start !important;
		--navigation-layout-align: flex-start !important;
	}

	/* Overlay-menu links uitlijnen (i.p.v. gecentreerd/rechts) */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: flex-start !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		align-items: flex-start !important;
		justify-content: flex-start !important;
		text-align: left;
	}

	/* Accordion-submenu's: verder ingesprongen naar RECHTS zodat de
	   hiërarchie duidelijk is (parent links, sub-items iets naar rechts) */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		align-items: flex-start !important;
		text-align: left;
		padding-left: 1.75rem !important;
	}
}

/* ================================================================== *
 * Donkere header + footer (#231f20) met witte tekst
 * ================================================================== */

/* Randen subtiel wit i.p.v. de lichte merk-rand (overschrijft inline stijl) */
.site-header,
.site-footer,
.site-footer .footer-bar {
	border-color: rgba(255, 255, 255, 0.14) !important;
}

/* Alle tekst in header/footer wit */
.site-header,
.site-header a,
.site-header .wp-block-navigation,
.site-header .wp-block-navigation a,
.site-header .wp-block-navigation .wp-block-navigation-item__content,
.site-footer,
.site-footer .footer-kop,
.site-footer p,
.site-footer .has-text-muted-color,
.site-footer .has-text-subtle-color {
	color: #ffffff !important;
}

/* Links in header/footer: wit, iets gedempt, wit op hover */
.site-header .wp-block-navigation a,
.site-footer .footer-cats a,
.site-footer .footer-links a,
.site-footer .footer-email a {
	color: rgba(255, 255, 255, 0.86) !important;
}
.site-header .wp-block-navigation a:hover,
.site-footer .footer-cats a:hover,
.site-footer .footer-links a:hover,
.site-footer .footer-email a:hover {
	color: #ffffff !important;
}

/* Submenu-basis (o.a. mobiele overlay): donker met witte tekst */
.site-header .wp-block-navigation__submenu-container {
	background-color: #231f20;
	border-color: rgba(255, 255, 255, 0.16);
}
.site-header .wp-block-navigation__submenu-container a {
	color: rgba(255, 255, 255, 0.86) !important;
}
.site-header .wp-block-navigation__submenu-container a:hover {
	color: #ffffff !important;
}

/* Desktop-uitklap in de header: WITTE achtergrond, tekst #231f20, 10px hoeken */
@media (min-width: 782px) {
	.site-header .wp-block-navigation .wp-block-navigation__submenu-container {
		background-color: #ffffff !important;
		border: 1px solid rgba(0, 0, 0, 0.12) !important;
		border-radius: 10px !important;
		overflow: hidden !important;
		color: #231f20;
		box-shadow: var(--wp--custom--shadow--md);
	}
	/* Hoge specificiteit nodig: de witte-tekst-regel gebruikt
	   .site-header .wp-block-navigation .wp-block-navigation-item__content (3 classes). */
	.site-header .wp-block-navigation .wp-block-navigation__submenu-container a,
	.site-header .wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
		color: #231f20 !important;
	}
	.site-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover,
	.site-header .wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--primary) !important;
	}
	/* Ronde hoeken netjes: klik-cellen binnen de dropdown geen eigen vierkant vlak */
	.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		background-color: transparent;
	}
}

/* Mobiele overlay-menu: donkere achtergrond + wit icoon/tekst */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: #231f20 !important;
	/* Core rekent hier met --wp--style--root--padding-*, die dit thema niet
	   zet: de padding valt dan terug op 0 en het menu plakt tegen de rand
	   (sluitkruis half buiten beeld). Daarom zelf zetten. */
	padding: 0.9rem 1.25rem 2rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open a {
	color: #ffffff !important;
}

/* Ruimte onder het sluitkruis zodat het eerste menu-item er niet achter valt */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3.5rem !important;
}

/* Sluitkruis: groot genoeg om te raken en duidelijk zichtbaar */
.wp-block-navigation__responsive-container-close {
	padding: 0.25rem !important;
}
.wp-block-navigation__responsive-container-close svg {
	width: 32px;
	height: 32px;
	fill: #ffffff;
}

/* ================================================================== *
 * Logo: op mobiel gecentreerd (hamburger rechts), op desktop links
 * ================================================================== */
@media (max-width: 781px) {
	.site-header .header-row {
		position: relative;
		justify-content: center;
		align-items: center;
	}
	/* Hamburger uit de flow, vast links, verticaal gecentreerd via flex.
	   GEEN transform gebruiken: een transform op deze ouder zou het
	   position:fixed overlay-menu in dit kleine kadertje opsluiten
	   waardoor er "niks uitklapt". Daarom top/bottom + flex-center. */
	.site-header .header-row > .wp-block-navigation {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		margin: 0;
	}
}

/* ================================================================== *
 * Mobiel overlay-menu: echte accordion i.p.v. core's "alles open"
 * ------------------------------------------------------------------
 * Core toont in de overlay álle submenu's uitgeklapt (position:static,
 * visibility:visible) én verbergt de chevron-iconen. Hier draaien we dat
 * terug: submenu's staan dicht en klappen pas open bij tik op de parent,
 * met een zichtbare chevron die aangeeft dat het uitklapbaar is.
 * ================================================================== */
@media (max-width: 781px) {
	/* Submenu's standaard dicht in het overlay-menu */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		display: none !important;
		padding-top: 0 !important;
		padding-left: 1.5rem !important;
	}

	/* Core's eigen chevron-span verbergen; we tekenen 'm zelf op de knop */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
		display: none !important;
	}

	/* Parent = volledige aanklikbare regel met chevron vóór het label */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
		display: flex !important;
		align-items: center;
		justify-content: flex-start;
		gap: 0.6em;
		width: 100%;
		padding-left: 0 !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle::before {
		content: "";
		flex: 0 0 auto;
		width: 0.5em;
		height: 0.5em;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(-45deg); /* wijst naar rechts: dichtgeklapt */
		transition: transform 0.15s ease;
	}

	/* Aangetikt (aria-expanded=true): chevron omlaag + submenu open */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"]::before {
		transform: rotate(45deg); /* wijst omlaag: opengeklapt */
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		display: flex !important;
	}
}

/* ================================================================== *
 * Sticky header: blijft ~400px aan de bovenkant plakken en scrolt
 * daarna mee weg. De verschuiving (translateY) wordt door JS gezet
 * (zie functions.php, wp_footer). --cm-header-h = echte headerhoogte.
 * ================================================================== */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}

/* BELANGRIJK: geen permanente transform/will-change op de header.
   Allebei maken van de header een "containing block", waardoor het
   position:fixed mobiele overlay-menu (een kind van de header) niet meer
   het scherm vult maar wordt opgesloten in het smalle headerbalkje.
   De JS zet de translateY alleen als die echt nodig is (voorbij de
   drempel) en haalt 'm er weer af bij 0. Zodra het menu open is (core zet
   .has-modal-open op <html>) zetten we allebei hard uit. */
html.has-modal-open .site-header,
.site-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	transform: none !important;
	will-change: auto !important;
}

/* Ruimte reserveren zodat de vaste header de content niet overlapt. */
body {
	padding-top: var(--cm-header-h, 0px);
}

/* ================================================================== *
 * Promobalk boven de header (affiliate). Zit binnen .site-header, dus
 * hij plakt en scrolt mee met de sticky header en telt automatisch mee
 * in --cm-header-h (JS meet header.offsetHeight, zie functions.php).
 * ================================================================== */
.cm-promo-bar {
	background-color: var(--wp--preset--color--primary);
	transition: background-color 0.15s ease;
}
.cm-promo-bar:has(.cm-promo:hover) {
	background-color: var(--wp--preset--color--primary-hover);
}

.cm-promo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 0.6rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.5rem 10px;
	color: #ffffff !important;
	text-decoration: none !important;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}

/* Verplichte reclame-aanduiding: subtiel, maar leesbaar */
.cm-promo__tag {
	flex: 0 0 auto;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 999px;
	padding: 0.1rem 0.45rem;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

.cm-promo__text {
	min-width: 0;
}

.cm-promo__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.18);
	padding: 0.15rem 0.6rem;
	white-space: nowrap;
}
.cm-promo:hover .cm-promo__cta {
	background-color: rgba(255, 255, 255, 0.28);
}
.cm-promo__arrow {
	transition: transform 0.15s ease;
}
.cm-promo:hover .cm-promo__arrow {
	transform: translateX(2px);
}

/* Mobiel: compacter, en de CTA valt terug op alleen de pijl zodat de
   promotekst op smalle schermen op één regel blijft. */
@media (max-width: 781px) {
	.cm-promo {
		gap: 0.4rem;
		padding: 0.4rem 10px;
		font-size: 0.8125rem;
	}
	.cm-promo__tag {
		font-size: 0.5625rem;
		padding: 0.05rem 0.35rem;
	}
	.cm-promo__cta {
		background-color: transparent;
		padding: 0;
	}
	.cm-promo:hover .cm-promo__cta {
		background-color: transparent;
	}
	.cm-promo__cta-label {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cm-promo-bar,
	.cm-promo__arrow {
		transition: none;
	}
	.cm-promo:hover .cm-promo__arrow {
		transform: none;
	}
}

/* ================================================================== *
 * Partnercontent-blok onder het artikel (affiliate). Staat in de
 * single-template tussen de auteursbox en de gerelateerde artikelen,
 * dus bewust buiten de artikeltekst zelf.
 * ================================================================== */
.cm-promo-card {
	margin: 2.5rem 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--base, 1rem);
	line-height: var(--wp--custom--leading--relaxed, 1.625);
}
.cm-promo-card p {
	margin: 0 0 1rem;
}

.cm-promo-card__label {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--preset--color--text-muted);
	margin-bottom: 0.75rem !important;
}

.cm-promo-card__kop {
	font-size: var(--wp--preset--font-size--xxl);
	line-height: var(--wp--custom--leading--snug, 1.375);
	margin: 0 0 0.75rem;
}

.cm-promo-card__tekstlink a {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Risicowaarschuwing: zachte amber kader, zoals de branchestandaard */
.cm-promo-card__waarschuwing {
	border: 1px solid rgba(243, 156, 18, 0.45);
	border-radius: var(--wp--custom--radius--lg);
	background-color: rgba(243, 156, 18, 0.08);
	padding: 0.9rem 1.1rem;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
}

.cm-promo-card__actie {
	margin-bottom: 0.5rem !important;
}
.cm-promo-card__knop {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 1rem 1.25rem;
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--primary);
	color: #ffffff !important;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	transition: background-color 0.15s ease;
}
.cm-promo-card__knop:hover,
.cm-promo-card__knop:focus-visible {
	background-color: var(--wp--preset--color--primary-hover);
}

.cm-promo-card__doorstuur {
	text-align: center;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-muted);
	margin-bottom: 1rem !important;
}

.cm-promo-card__disclosure {
	margin-bottom: 0 !important;
	padding-top: 0.9rem;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	color: var(--wp--preset--color--text-muted);
}

@media (max-width: 781px) {
	.cm-promo-card__knop {
		padding: 0.9rem 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cm-promo-card__knop {
		transition: none;
	}
}