/*
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.1.9
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,
.footer-email 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) */
	.site-header {
		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;
}
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open a {
	color: #ffffff !important;
}
.wp-block-navigation__responsive-container-close svg {
	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;
	will-change: transform;
}

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