/*
Theme Name:   Alles over Duitsland
Theme URI:    https://www.allesoverduitsland.nl/
Description:  Childtheme van GeneratePress voor allesoverduitsland.nl. Zwart-rood-goud, één lettertype (Inter, lokaal gehost), kaarten, automatische inhoudsopgave, partnerblokken, praktische infobox en een AVG-vriendelijke kaart.
Author:       Tiefrot.design
Template:     generatepress
Version:      1.0.1
Requires PHP: 7.4
Text Domain:  allesoverduitsland-child
*/

/* Inter, lokaal gehost (geen verbinding met Google = AVG-proof) */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("fonts/inter-var.woff2") format("woff2-variations"),
	     url("fonts/inter-var.woff2") format("woff2");
}

/* ==========================================================================
   1. Huisstijl – pas hier kleuren aan, de rest volgt vanzelf
   ========================================================================== */
:root {
	--ao-ink:          #1c1d20;   /* bijna zwart (vlagzwart, iets zachter): tekst, footer, donkere vlakken */
	--ao-ink-2:        #5b5e64;   /* secundaire tekst */
	--ao-line:         #e4e3df;   /* randen */
	--ao-bg:           #f6f5f2;   /* pagina-achtergrond (warm gebroken wit) */
	--ao-surface:      #ffffff;   /* kaarten */
	--ao-accent:       #b3121c;   /* diep vlagrood, donker genoeg voor witte tekst (6,9:1) */
	--ao-accent-hover: #8e0e16;
	--ao-accent-ink:   #ffffff;   /* tekst óp de accentkleur */
	--ao-accent-soft:  #fbecea;   /* licht rood vlak */
	--ao-on-dark:      #ffcc00;   /* goud: goed leesbaar op donker (11:1) */
	--ao-link:         #a3101a;

	/* Goud van de Duitse vlag. Alleen decoratief (band, focusrand, hover op donker):
	   op wit haalt het nog geen 1,6:1, dus nooit voor tekst of knoppen op licht. */
	--ao-sky:          #ffcc00;
	--ao-glow:         221, 0, 0;    /* RGB van vlagrood (#dd0000), voor de gloed in donkere vlakken */

	/* Band in de vlagkleuren bovenaan de pagina en boven de footer.
	   Moet een gradient zijn (wordt ook als border-image gebruikt); één kleur:
	   linear-gradient(#b3121c, #b3121c). Hoogte 0 = weglaten. */
	--ao-band:        linear-gradient(180deg, #000 0 33.34%, #dd0000 33.34% 66.67%, #ffcc00 66.67% 100%);
	--ao-band-hoogte: 9px;

	--ao-mark:         "D";       /* letter in het rode blokje vóór de sitenaam */

	--ao-radius:     12px;
	--ao-shadow:     0 1px 2px rgba(28,29,32,.06), 0 4px 16px rgba(28,29,32,.07);
	--ao-shadow-up:  0 2px 4px rgba(28,29,32,.08), 0 12px 32px rgba(28,29,32,.13);
	--ao-font:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* GeneratePress globale kleuren meenemen (blokeditor-kleurkeuze) */
	--contrast:   var(--ao-ink);
	--contrast-2: var(--ao-ink-2);
	--base-2:     var(--ao-bg);
	--accent:     var(--ao-link);
}

/* ==========================================================================
   1b. Vlagband bovenaan en boven de footer
   ========================================================================== */
body::before {
	content: "";
	display: block;
	height: var(--ao-band-hoogte);
	background: var(--ao-band);
}
.site-info {
	border-top: var(--ao-band-hoogte) solid transparent;
	border-image: var(--ao-band) 1;
}

/* ==========================================================================
   2. Basis & typografie
   ========================================================================== */
body {
	background: var(--ao-bg);
	color: var(--ao-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
body, button, input, select, textarea {
	font-family: var(--ao-font);
}
body { font-size: 17px; line-height: 1.65; }

h1, h2, h3, h4 {
	font-family: var(--ao-font);
	color: var(--ao-ink);
	font-weight: 750;
	letter-spacing: -0.02em;
	line-height: 1.2;
	text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); margin-bottom: .6em; }
h3 { font-size: 1.3rem; }
p  { text-wrap: pretty; }

a { color: var(--ao-link); text-underline-offset: 3px; }
a:hover, a:focus { color: var(--ao-ink); }

:focus-visible { outline: 3px solid var(--ao-accent); outline-offset: 2px; }

/* ==========================================================================
   3. Topbalk (secundair menu) & hoofdnavigatie
   ========================================================================== */
.secondary-navigation {
	background: var(--ao-ink);
}
.secondary-navigation .main-nav ul li a { font-size: 13px; opacity: .85; }
.secondary-navigation .main-nav ul li a:hover { background: transparent; opacity: 1; }

.main-navigation,
.main-navigation ul ul {
	background: var(--ao-surface);
}
.main-navigation {
	border-bottom: 1px solid var(--ao-line);
	box-shadow: 0 1px 0 rgba(28,29,32,.02);
}
.main-navigation.navigation-stick,
#sticky-navigation {
	box-shadow: var(--ao-shadow);
}

/* Sitenaam als woordmerk i.p.v. het handschrift-lettertype */
.main-title,
.navigation-branding .main-title {
	font-family: var(--ao-font);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -0.03em;
	line-height: 72px;
}
.main-title a,
.main-title a:hover {
	color: var(--ao-ink);
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
/* Rood blokje met letter vóór de naam (letter: --ao-mark) */
.main-title a::before {
	content: var(--ao-mark);
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: var(--ao-accent);
	color: var(--ao-accent-ink);
	font-size: 18px;
	font-weight: 800;
	box-sizing: border-box;
	line-height: 1;
	flex-shrink: 0;
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
	color: var(--ao-ink);
	font-weight: 550;
	font-size: 15px;
}
.main-navigation .main-nav > ul > li > a {
	padding-left: 11px;
	padding-right: 11px;
	position: relative;
}
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .menu-bar-item:hover > a {
	color: var(--ao-ink);
	background: transparent;
}
/* Rood streepje onder hover/actief menu-item */
.main-navigation .main-nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: 11px; right: 11px; bottom: 16px;
	height: 3px;
	border-radius: 3px;
	background: var(--ao-accent);
	transform: scaleX(0);
	transition: transform .2s ease;
}
.main-navigation .main-nav > ul > li:hover > a::after,
.main-navigation .main-nav > ul > li[class*="current-menu-"] > a::after {
	transform: scaleX(1);
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--ao-ink);
	background: transparent;
}
.main-navigation .main-nav ul ul {
	border: 1px solid var(--ao-line);
	border-radius: 10px;
	box-shadow: var(--ao-shadow-up);
	overflow: hidden;
}
/* Uitklapmenu's: eigen kleuren, zodat de submenu-kleuren uit de Customizer
   (vaak witte tekst voor een donker vlak) niet wit-op-wit geven. */
.main-navigation.main-navigation .main-nav ul ul,
.main-navigation.main-navigation .main-nav ul ul li {
	background: var(--ao-surface);
}
.main-navigation.main-navigation .main-nav ul ul li a,
.main-navigation.main-navigation .main-nav ul ul li.menu-item-has-children .dropdown-menu-toggle {
	color: var(--ao-ink);
	font-size: 14.5px;
	font-weight: 500;
	background: transparent;
}
.main-navigation.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):hover > a,
.main-navigation.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):focus > a,
.main-navigation.main-navigation .main-nav ul ul li.sfHover:not([class*="current-menu-"]) > a {
	color: var(--ao-accent);
	background: var(--ao-accent-soft);
}
.main-navigation.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
	color: var(--ao-accent);
	background: transparent;
	font-weight: 650;
}
.main-navigation.main-navigation .main-nav ul ul li + li > a { border-top: 1px solid var(--ao-line); }
.navigation-search input[type="search"],
.navigation-search input[type="search"]:focus {
	background: var(--ao-surface);
	color: var(--ao-ink);
}

@media (max-width: 768px) {
	.main-title, .navigation-branding .main-title { font-size: 19px; line-height: 60px; }
	.main-navigation .main-nav > ul > li > a::after { display: none; }
	.main-navigation .main-nav ul li a { border-top: 1px solid var(--ao-line); }
}

/* ==========================================================================
   4. Inhoudsgebied
   ========================================================================== */
.separate-containers .inside-article,
.one-container .container {
	background: var(--ao-surface);
	border-radius: var(--ao-radius);
	box-shadow: var(--ao-shadow);
}
.separate-containers .site-main { margin-top: 32px; margin-bottom: 48px; }

/* Homepage: geen witte doos om alles heen, secties staan los */
.home.separate-containers .inside-article {
	background: transparent;
	box-shadow: none;
	padding: 0;
}
.home .site-main { margin-top: 0; }

/* Alle GenerateBlocks-secties op dezelfde, rustige manier.
   Overschrijft de losse paars/blauw/groen-randjes per blok. */
.entry-content .gb-container {
	border: 0;
	background-color: transparent;
}
.entry-content > .gb-container {
	margin: 0 0 28px;
	border-radius: var(--ao-radius);
}
.entry-content > .gb-container > .gb-inside-container {
	padding: clamp(24px, 4vw, 44px);
}
.home .entry-content > .gb-container + .gb-container:not(:first-child) {
	background: var(--ao-surface);
	box-shadow: var(--ao-shadow);
}
.home .entry-content > .gb-container:has(.gb-grid-wrapper):not(:first-child) {
	background: transparent;
	box-shadow: none;
}
.home .entry-content > .gb-container:has(.gb-grid-wrapper) > .gb-inside-container {
	padding: 8px 0 0;
}
/* Geneste wrappers rond een grid: geen extra inspringing */
.entry-content > .gb-container .gb-container:has(> .gb-inside-container > .gb-grid-wrapper) {
	max-width: none;
	margin: 0;
	background: transparent;
}
.entry-content > .gb-container .gb-container:has(> .gb-inside-container > .gb-grid-wrapper) > .gb-inside-container {
	padding: 0;
}
.entry-content .gb-container .gb-container {
	border: 0;
	margin-left: 0;
	margin-right: 0;
}
.entry-content p.has-text-align-center { text-align: left; }
.entry-content .has-text-align-center.wp-block-heading { text-align: left; }

/* Eerste sectie op de homepage = hero */
.home .entry-content > .gb-container:first-child {
	margin-top: 28px;
	background:
		radial-gradient(1200px 300px at 100% 0%, rgba(var(--ao-glow), .22), transparent 60%),
		var(--ao-ink);
	color: #ecebe8;
}
.home .entry-content > .gb-container:first-child h1,
.home .entry-content > .gb-container:first-child h2 {
	color: #fff;
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem);
	max-width: 18ch;
	margin-bottom: .4em;
}
.home .entry-content > .gb-container:first-child p {
	font-size: 1.1rem;
	max-width: 62ch;
	color: #d6d4cf;
	margin-bottom: 0;
}

/* ==========================================================================
   5. Kaarten op de homepage (wijken, bezienswaardigheden, dagtrips) (GB-grid met afbeelding, tekst en knop)
   ========================================================================== */
.home .entry-content .gb-grid-wrapper {
	row-gap: 0;
}
.home .entry-content .gb-grid-wrapper { align-items: stretch; }
.home .entry-content .gb-grid-wrapper > .gb-grid-column {
	padding-bottom: 24px;
	display: flex;
	flex-direction: column;
}
.home .entry-content .gb-grid-wrapper > .gb-grid-column > .gb-container {
	flex: 1 1 auto;
	height: auto;
}
.home .entry-content .gb-grid-column > .gb-container {
	background: var(--ao-surface);
	border: 1px solid var(--ao-line);
	border-radius: var(--ao-radius);
	overflow: hidden;
	margin-bottom: 0;
	transition: box-shadow .2s ease, transform .2s ease;
}
.home .entry-content .gb-grid-column > .gb-container:has(.wp-block-image):hover {
	box-shadow: var(--ao-shadow-up);
	transform: translateY(-2px);
}
.home .entry-content .gb-grid-column > .gb-container > .gb-inside-container {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0 20px 20px;
}
/* Kaart mét foto: geen zijpadding op de container, de tekst krijgt die zelf.
   Zo loopt de foto altijd randloos over de volle breedte. */
.home .entry-content .gb-grid-column > .gb-container:has(.wp-block-image) > .gb-inside-container {
	padding: 0 0 20px !important;
}
.home .entry-content .gb-grid-column > .gb-container:has(.wp-block-image) > .gb-inside-container > :not(.wp-block-image) {
	margin-left: 20px;
	margin-right: 20px;
}
/* Kaart zonder foto (bijv. agenda) krijgt gewone binnenruimte */
.home .entry-content .gb-grid-column > .gb-container:not(:has(.wp-block-image)) > .gb-inside-container {
	padding: clamp(22px, 3vw, 34px);
}
/* Kaart met het nieuwsbriefformulier wordt zelf het donkere vlak */
.home .entry-content .gb-grid-column > .gb-container:has(.mailpoet_form) {
	background: var(--ao-ink);
	border-color: var(--ao-ink);
}
.home .entry-content .gb-grid-column > .gb-container:has(.mailpoet_form) .mailpoet_form {
	padding: 0 !important;
}
/* Afbeelding bovenaan, randloos en altijd dezelfde verhouding */
.home .entry-content .gb-grid-column .wp-block-image {
	order: -1;
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 0 16px !important;
	align-self: stretch;
}
.home .entry-content .gb-grid-column .wp-block-image img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	contain-intrinsic-size: 600px 400px; /* WP's lazy-load placeholder (3000×1500) temmen */
	background: var(--ao-line);
}
.home .entry-content .gb-grid-column h2 {
	font-size: 1.25rem;
	margin: 0 0 .4em;
	text-align: left;
}
.home .entry-content .gb-grid-column p {
	font-size: .97rem;
	color: var(--ao-ink-2);
	text-align: left;
}
.home .entry-content .gb-grid-column .gb-button-wrapper {
	margin-top: auto;
	justify-content: flex-start;
}

/* ==========================================================================
   6. Knoppen (GB-knoppen, WP-knoppen, formulieren)
   ========================================================================== */
.entry-content a.gb-button,
.wp-block-button__link,
button, input[type="submit"], input[type="button"], .button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--ao-accent);
	color: var(--ao-accent-ink);
	border: 0;
	border-radius: 999px;
	padding: 11px 20px;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	text-align: left;
	transition: background-color .15s ease, transform .15s ease;
}
.entry-content a.gb-button::after { content: "→"; display: inline-block; margin-left: 6px; transition: transform .15s ease; }
.entry-content a.gb-button:hover,
.wp-block-button__link:hover,
button:hover, input[type="submit"]:hover {
	background: var(--ao-accent-hover);
	color: var(--ao-accent-ink);
}
.entry-content a.gb-button:hover::after { transform: translateX(3px); }
.entry-content a.gb-button:has(.gb-icon)::after { display: none; } /* knop heeft al een eigen icoon */
/* Knoppen in een kaart: rustiger, als tekstlink met pijl */
.home .entry-content .gb-grid-column > .gb-container a.gb-button {
	display: inline-block;
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
	background: transparent;
	padding: 6px 0;
	color: var(--ao-link);
	border-radius: 0;
}
.home .entry-content .gb-grid-column > .gb-container a.gb-button:hover { color: var(--ao-ink); }
/* Menu-knop mobiel niet als blauwe pil */
.main-navigation .menu-toggle,
.navigation-search button,
button.secondary-menu-toggle {
	background: transparent;
	border-radius: 0;
	color: var(--ao-ink);
}

input[type="text"], input[type="email"], input[type="search"], input[type="url"],
input[type="tel"], input[type="number"], textarea, select {
	border: 1px solid var(--ao-line);
	border-radius: 10px;
	background: #fff;
	color: var(--ao-ink);
	padding: 12px 14px;
}
input:focus, textarea:focus, select:focus {
	border-color: var(--ao-ink);
	outline: none;
	box-shadow: 0 0 0 3px rgba(179,18,28,.3);
}

/* ==========================================================================
   7. Nieuwsbrief (MailPoet) – inline stijlen van MailPoet overschrijven
   ========================================================================== */
form.mailpoet_form { padding: 0 !important; background: transparent; }
div.mailpoet_form {
	background: var(--ao-ink) !important; /* MailPoet zet wit via #id */
	color: #ecebe8 !important;
	border-radius: var(--ao-radius);
	padding: clamp(22px, 3vw, 34px) !important;
}
.mailpoet_form .mailpoet_form_image { display: none; }
.mailpoet_form .mailpoet-heading,
.mailpoet_form .mailpoet-heading span {
	font-family: var(--ao-font) !important;
	color: #fff !important;
	font-size: 1.6rem !important;
	font-weight: 750;
	letter-spacing: -0.02em;
	text-align: left !important;
	margin: 0 0 16px !important;
}
.mailpoet_form input.mailpoet_text {
	background: #fff !important;
	color: var(--ao-ink) !important;
	font-family: var(--ao-font) !important;
	font-size: 16px !important;
	padding: 14px 16px !important;
	border-radius: 10px !important;
}
.mailpoet_form input.mailpoet_submit {
	background: var(--ao-accent) !important;
	border: 1px solid rgba(255,255,255,.25) !important;
	color: var(--ao-accent-ink) !important;
	font-family: var(--ao-font) !important;
	font-size: 16px !important;
	padding: 14px 16px !important;
	border-radius: 10px !important;
	justify-content: center;
}
.mailpoet_form input.mailpoet_submit:first-letter { text-transform: uppercase; }
.mailpoet_form .mailpoet_paragraph { margin-bottom: 12px !important; }
.mailpoet_form .mailpoet_form_paragraph,
.mailpoet_form .mailpoet_form_paragraph span {
	font-family: var(--ao-font) !important;
	color: #b3b0aa !important;
	text-align: left !important;
}
.mailpoet_form a { color: #fff; }
.mailpoet_form .mailpoet_validate_success { color: #9ae6b4 !important; }

/* ==========================================================================
   8. Tabellen & lijsten
   ========================================================================== */
.entry-content table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--ao-line);
	border-radius: var(--ao-radius);
	overflow: hidden;
	font-size: .97rem;
	background: #fff;
}
.entry-content th {
	background: var(--ao-bg);
	text-align: left;
	font-weight: 700;
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ao-ink-2);
}
.entry-content th, .entry-content td {
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid var(--ao-line);
}
.entry-content tr:last-child td { border-bottom: 0; }
.entry-content tbody tr:hover td { background: #faf9f7; }

/* "Laatst gecontroleerd"-regel onder een pagina */
.ao-checked {
	font-size: .88rem;
	color: var(--ao-ink-2);
	border-left: 3px solid var(--ao-accent);
	padding-left: 12px;
}

/* ==========================================================================
   9. Footer
   ========================================================================== */
.site-info {
	background: var(--ao-ink);
	color: #b3b0aa;
	font-size: 14px;
}
.site-info a { color: #ecebe8; text-decoration: none; }
.site-info a:hover { color: var(--ao-on-dark); }
.inside-site-info { padding-top: 28px; padding-bottom: 28px; }
.ao-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.ao-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
}
.ao-footer__brand strong { color: #fff; }

/* ==========================================================================
   11. Artikelpagina's (alles behalve de homepage)
   ========================================================================== */
body:not(.home) .inside-article {
	padding: clamp(22px, 4vw, 48px);
}
body:not(.home) .entry-header { margin-bottom: 20px; }
body:not(.home) .entry-title {
	font-size: clamp(2rem, 1.4rem + 2.2vw, 2.8rem);
	margin-bottom: 0;
}
/* Eerste alinea = intro */
body:not(.home) .entry-content > p:first-child {
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--ao-ink-2);
}
body:not(.home) .entry-content > h2 {
	margin-top: 1.9em;
	scroll-margin-top: 90px; /* sticky menu valt niet over de kop bij ankerlinks */
}
body:not(.home) .entry-content > h3 { margin-top: 1.5em; }
body:not(.home) .entry-content [id] { scroll-margin-top: 90px; }

/* Foto's in de tekst */
/* Brede foto's: volle breedte met afgeronde hoeken, in hun eigen verhouding
   (staande foto's worden niet bijgesneden). Links/rechts uitgelijnde en
   verkleinde afbeeldingen blijven zoals ze in de editor staan. */
body:not(.home) .entry-content > .wp-block-image img {
	border-radius: var(--ao-radius);
	height: auto;
}
body:not(.home) .entry-content > .wp-block-image:not(.alignleft):not(.alignright):not(.aligncenter):not(.is-resized):not(.size-thumbnail):not(.size-medium) img {
	width: 100%;
}
body:not(.home) .entry-content > .wp-block-image.alignleft { margin: .3em 1.5em 1em 0; max-width: 45%; }
body:not(.home) .entry-content > .wp-block-image.alignright { margin: .3em 0 1em 1.5em; max-width: 45%; }
body:not(.home) .entry-content .gb-block-image img { border-radius: var(--ao-radius); height: auto; }
@media (max-width: 520px) {
	body:not(.home) .entry-content > .wp-block-image.alignleft,
	body:not(.home) .entry-content > .wp-block-image.alignright { float: none; max-width: 100%; margin: 0 0 1em; }
}
body:not(.home) .entry-content > .wp-block-image figcaption {
	font-size: .85rem;
	color: var(--ao-ink-2);
	margin-top: 8px;
}

/* Losse GB-blokken in de tekst: kaders met rustige binnenruimte */
body:not(.home) .entry-content > .gb-container {
	margin: 2em 0;
}
body:not(.home) .entry-content > .gb-container > .gb-inside-container {
	padding: clamp(20px, 3vw, 30px);
}
body:not(.home) .entry-content > .gb-container h2 {
	margin-top: 0;
	font-size: 1.45rem;
}
body:not(.home) .entry-content > .gb-container > .gb-inside-container > :last-child { margin-bottom: 0; }

/* Inhoudsopgave (Rank Math) */
.wp-block-rank-math-toc-block {
	background: var(--ao-bg);
	border-radius: var(--ao-radius);
	padding: 20px 24px;
}
.wp-block-rank-math-toc-block > h2,
body:not(.home) .entry-content .wp-block-rank-math-toc-block > h2 {
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--ao-ink-2);
	margin: 0 0 10px;
}
.wp-block-rank-math-toc-block ul {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: toc;
}
.wp-block-rank-math-toc-block nav > ul > li {
	counter-increment: toc;
	padding: 5px 0;
	border-top: 1px solid var(--ao-line);
}
.wp-block-rank-math-toc-block nav > ul > li:first-child { border-top: 0; }
.wp-block-rank-math-toc-block nav > ul > li > a::before {
	content: counter(toc) ".";
	display: inline-block;
	width: 1.6em;
	color: var(--ao-ink-2);
	font-variant-numeric: tabular-nums;
}
.wp-block-rank-math-toc-block ul ul { padding-left: 1.6em; }
.wp-block-rank-math-toc-block ul ul li { padding: 2px 0; font-size: .95rem; }
.wp-block-rank-math-toc-block a { text-decoration: none; color: var(--ao-ink); }
.wp-block-rank-math-toc-block a:hover { color: var(--ao-link); text-decoration: underline; }
body:not(.home) .entry-content > .gb-container:has(> .wp-block-rank-math-toc-block),
body:not(.home) .entry-content > .gb-container:has(.wp-block-rank-math-toc-block) {
	padding: 0;
}

/* Blokken met affiliate-/partnerlinks: herkenbaar als partner, niet als redactie */
body:not(.home) .entry-content > .gb-container:has(a[rel~="sponsored"]) {
	position: relative;
	background: var(--ao-surface);
	border: 1px solid var(--ao-line);
	border-radius: var(--ao-radius);
}
body:not(.home) .entry-content > .gb-container:has(a[rel~="sponsored"])::before {
	content: "Partnerlink";
	position: absolute;
	top: 12px;
	right: 14px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ao-ink-2);
	background: var(--ao-bg);
	padding: 3px 8px;
	border-radius: 999px;
}
body:not(.home) .entry-content > .gb-container:has(a[rel~="sponsored"]) img {
	border-radius: 10px;
	display: block;
	margin: 0 auto;
}
body:not(.home) .entry-content > .gb-container:has(a[rel~="sponsored"]) .gb-grid-wrapper {
	align-items: center;
}
body:not(.home) .entry-content > .gb-container:has(a[rel~="sponsored"]) .gb-container {
	background: transparent;
}
body:not(.home) .entry-content > .gb-container:has(a[rel~="sponsored"]) .gb-inside-container .gb-inside-container {
	padding: 0;
}
body:not(.home) .entry-content > .gb-container:has(a[rel~="sponsored"]) p { color: var(--ao-ink-2); }

/* "(laatste update: …)" onderaan de pagina */
body:not(.home) .entry-content > p:last-child:has(> em:only-child),
body:not(.home) .entry-content > p.ao-checked {
	font-size: .88rem;
	color: var(--ao-ink-2);
	border-left: 3px solid var(--ao-accent);
	padding-left: 12px;
	margin-top: 2.5em;
}
body:not(.home) .entry-content > p:last-child > em:only-child { font-style: normal; }

/* Zijbalk */
.sidebar .widget {
	background: var(--ao-surface);
	border-radius: var(--ao-radius);
	box-shadow: var(--ao-shadow);
	font-size: 15px;
}
.sidebar .widget .widget { box-shadow: none; padding: 0; background: transparent; }
.sidebar .widget_nav_menu ul,
.sidebar .wp-block-navigation__container {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sidebar .widget_nav_menu li a {
	display: block;
	padding: 8px 10px;
	border-radius: 8px;
	color: var(--ao-ink);
	text-decoration: none;
}
.sidebar .widget_nav_menu li a:hover { background: var(--ao-bg); }
.sidebar .widget_nav_menu li.current-menu-item > a {
	background: var(--ao-bg);
	font-weight: 700;
	box-shadow: inset 3px 0 0 var(--ao-accent);
}
.sidebar .wp-block-search__label {
	font-weight: 700;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--ao-ink-2);
}
.sidebar .wp-block-search__inside-wrapper { gap: 8px; }
.sidebar .wp-block-search__button { margin-left: 0; padding: 10px 16px; }
.sidebar div.mailpoet_form { padding: 22px !important; }
.sidebar .mailpoet_form .mailpoet-heading,
.sidebar .mailpoet_form .mailpoet-heading span { font-size: 1.25rem !important; }
.sidebar .widget:has(div.mailpoet_form) { padding: 0; background: transparent; box-shadow: none; }

/* ==========================================================================
   12. Bouwstenen voor artikelen (core-blokken met eigen klasse)
   ========================================================================== */
/* Partnerblok (core Groep met klasse ao-partner, of elke groep met een sponsored-link) */
.entry-content > .wp-block-group.ao-partner,
.entry-content > .wp-block-group:has(a[rel~="sponsored"]) {
	position: relative;
	background: var(--ao-surface);
	border: 1px solid var(--ao-line);
	border-left: 4px solid var(--ao-accent);
	border-radius: var(--ao-radius);
	padding: clamp(20px, 3vw, 28px);
	padding-top: 38px;
	margin: 1.5em 0 2em;
}
.entry-content > .wp-block-group.ao-partner::before,
.entry-content > .wp-block-group:has(a[rel~="sponsored"])::before {
	content: "Partnerlink";
	position: absolute;
	top: 12px;
	right: 14px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ao-ink-2);
	background: var(--ao-bg);
	padding: 3px 8px;
	border-radius: 999px;
}
.entry-content > .wp-block-group.ao-partner h3 { margin-top: 0; }
.entry-content > .wp-block-group.ao-partner > :last-child,
.entry-content > .wp-block-group.ao-nieuwsbrief > :last-child { margin-bottom: 0; }
.entry-content .wp-block-buttons { margin-top: 4px; }
/* Core-knoppen: winnen van de grijze standaardknop van GeneratePress/WordPress */
.entry-content .wp-block-button .wp-block-button__link,
.sidebar .wp-block-search__button {
	background: var(--ao-accent);
	color: var(--ao-accent-ink);
	border-radius: 999px;
	font-weight: 700;
	padding: 12px 22px;
}
.entry-content .wp-block-button .wp-block-button__link::after { content: " →"; }
.entry-content .wp-block-button .wp-block-button__link:hover,
.sidebar .wp-block-search__button:hover { background: var(--ao-accent-hover); color: var(--ao-accent-ink); }

/* Nieuwsbriefblok in de tekst */
.entry-content > .wp-block-group.ao-nieuwsbrief {
	background: var(--ao-ink);
	color: #dddbd6;
	border-radius: var(--ao-radius);
	padding: clamp(20px, 3vw, 30px);
	margin: 2em 0;
}
.entry-content > .wp-block-group.ao-nieuwsbrief h3 { color: #fff; margin-top: 0; }
.entry-content > .wp-block-group.ao-nieuwsbrief div.mailpoet_form { padding: 0 !important; background: transparent !important; }
.entry-content > .wp-block-group.ao-nieuwsbrief .mailpoet-heading,
.entry-content > .wp-block-group.ao-nieuwsbrief .mailpoet_form_image { display: none !important; }

/* Tabel met data */
.ao-tabel-wrap { overflow-x: auto; margin: 1.2em 0 .6em; -webkit-overflow-scrolling: touch; }
.ao-tabel-wrap table { min-width: 520px; margin: 0; }
.entry-content .ao-bron { font-size: .88rem; color: var(--ao-ink-2); }

/* Klasse ao-checked op een core-alinea */
.entry-content > p.ao-checked { margin-top: 2.5em; }

/* ==========================================================================
   13. Inhoudsopgave (automatisch uit functions.php, of [inhoud])
   ========================================================================== */
.ao-toc {
	background: var(--ao-bg);
	border: 1px solid var(--ao-line);
	border-radius: var(--ao-radius);
	margin: 1.6em 0 2em;
	font-size: .97rem;
}
.ao-toc summary {
	cursor: pointer;
	list-style: none;
	padding: 14px 20px;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ao-ink-2);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.ao-toc summary::-webkit-details-marker { display: none; }
.ao-toc summary::after {
	content: "";
	width: 8px; height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .2s ease;
}
.ao-toc details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.ao-toc ol {
	list-style: none;
	margin: 0;
	padding: 0 20px 14px;
	counter-reset: aotoc;
}
.ao-toc ol li {
	counter-increment: aotoc;
	border-top: 1px solid var(--ao-line);
	padding: 7px 0;
	margin: 0;
}
.ao-toc ol li:first-child { border-top: 0; }
.ao-toc ol li a {
	color: var(--ao-ink);
	text-decoration: none;
	display: flex;
	gap: .5em;
}
.ao-toc ol li a::before {
	content: counter(aotoc) ".";
	min-width: 1.6em;
	color: var(--ao-accent);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.ao-toc ol li a:hover { color: var(--ao-link); text-decoration: underline; }

/* ==========================================================================
   14. Partnerblokken: [partner] en [partners]
   ========================================================================== */
.ao-partnerkaart {
	position: relative;
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 0;
	background: var(--ao-surface);
	border: 1px solid var(--ao-line);
	border-radius: var(--ao-radius);
	overflow: hidden;
	margin: 1.6em 0 2em;
	box-shadow: var(--ao-shadow);
}
.ao-partnerkaart:not(:has(.ao-partnerkaart__foto)) { grid-template-columns: 1fr; border-left: 4px solid var(--ao-accent); }
.ao-partnerkaart__foto { margin: 0; background: var(--ao-line); }
.ao-partnerkaart__foto img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 160px;
	object-fit: cover;
}
.ao-partnerkaart__body {
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ao-partnerkaart__label {
	align-self: flex-start;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ao-accent);
	background: var(--ao-accent-soft);
	padding: 3px 8px;
	border-radius: 999px;
}
.entry-content .ao-partnerkaart__titel {
	font-size: 1.2rem;
	margin: 2px 0 0;
}
.ao-partnerkaart__tekst { color: var(--ao-ink-2); font-size: .97rem; }
.ao-partnerkaart__tekst > :last-child { margin-bottom: 0; }
.ao-partnerkaart__voet {
	margin-top: auto;
	padding-top: 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
}
.ao-partnerkaart__prijs { font-weight: 700; color: var(--ao-ink); }
.ao-partnerkaart__prijs small { font-weight: 500; color: var(--ao-ink-2); }
.entry-content a.ao-knop,
a.ao-knop {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--ao-accent);
	color: var(--ao-accent-ink);
	border-radius: 999px;
	padding: 11px 20px;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .15s ease;
}
a.ao-knop::after { content: "→"; transition: transform .15s ease; }
a.ao-knop:hover, a.ao-knop:focus { background: var(--ao-accent-hover); color: var(--ao-accent-ink); }
a.ao-knop:hover::after { transform: translateX(3px); }

/* Meerdere partners naast elkaar */
.ao-partners { margin: 1.6em 0 2em; }
.ao-partners__titel { margin: 0 0 .6em; }
.ao-partners__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
}
.ao-partners .ao-partnerkaart {
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr;
	margin: 0;
	border-left-width: 1px;
}
.ao-partners .ao-partnerkaart__foto img { aspect-ratio: 3 / 2; height: auto; min-height: 0; }
.ao-disclosure {
	font-size: .82rem;
	color: var(--ao-ink-2);
	margin: 10px 0 0;
}

/* ==========================================================================
   15. Praktische infobox: [praktisch]
   ========================================================================== */
.ao-praktisch {
	background: var(--ao-surface);
	border: 1px solid var(--ao-line);
	border-top: 5px solid var(--ao-accent);
	border-radius: var(--ao-radius);
	padding: clamp(18px, 3vw, 26px);
	margin: 1.6em 0 2em;
}
.entry-content .ao-praktisch__titel {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ao-ink-2);
	margin: 0 0 12px;
}
.ao-praktisch dl {
	display: grid;
	grid-template-columns: minmax(120px, 170px) 1fr;
	margin: 0;
}
.ao-praktisch dt,
.ao-praktisch dd {
	margin: 0;
	padding: 10px 0;
	border-top: 1px solid var(--ao-line);
}
.ao-praktisch dt:first-of-type,
.ao-praktisch dt:first-of-type + dd { border-top: 0; }
.ao-praktisch dt {
	font-weight: 700;
	font-size: .92rem;
	padding-right: 14px;
	display: flex;
	gap: 8px;
	align-items: baseline;
}
.ao-praktisch dt::before {
	content: "";
	flex: 0 0 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ao-accent);
	transform: translateY(-2px);
}
.ao-praktisch dd { font-size: .97rem; }
.ao-praktisch dd a { font-weight: 600; }
.ao-praktisch__tip {
	margin: 14px 0 0;
	padding: 12px 14px;
	background: var(--ao-accent-soft);
	border-radius: 10px;
	font-size: .95rem;
}
.ao-praktisch__tip strong { color: var(--ao-accent); }
.ao-praktisch__check {
	margin: 12px 0 0;
	font-size: .82rem;
	color: var(--ao-ink-2);
}
@media (max-width: 520px) {
	.ao-praktisch dl { grid-template-columns: 1fr; }
	.ao-praktisch dt { padding-bottom: 0; }
	.ao-praktisch dd { border-top: 0; padding-top: 2px; padding-left: 15px; }
}

/* ==========================================================================
   16. Kaart: [kaart] (pas geladen na klik, AVG-vriendelijk)
   ========================================================================== */
.ao-kaart {
	position: relative;
	margin: 1.6em 0 2em;
	border: 1px solid var(--ao-line);
	border-radius: var(--ao-radius);
	overflow: hidden;
	background: var(--ao-surface);
}
.ao-kaart__vlak {
	height: var(--ao-kaart-hoogte, 380px);
	background:
		repeating-linear-gradient(0deg, transparent 0 38px, rgba(28,29,32,.05) 38px 39px),
		repeating-linear-gradient(90deg, transparent 0 38px, rgba(28,29,32,.05) 38px 39px),
		var(--ao-bg);
	display: grid;
	place-items: center;
	text-align: center;
	padding: 20px;
	z-index: 0;
}
.ao-kaart__start { max-width: 34ch; }
.ao-kaart__start p { font-size: .88rem; color: var(--ao-ink-2); margin: 10px 0 0; }
.ao-kaart__start label { font-size: .85rem; color: var(--ao-ink-2); display: inline-flex; gap: 6px; align-items: center; margin-top: 8px; }
.ao-kaart__start button { justify-content: center; }
.ao-kaart.is-geladen .ao-kaart__vlak { display: block; padding: 0; }
.ao-kaart__voet {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 16px;
	padding: 10px 14px;
	border-top: 1px solid var(--ao-line);
	font-size: .88rem;
}
.ao-kaart__voet span { color: var(--ao-ink-2); }
.ao-kaart .leaflet-container { font-family: var(--ao-font); }
.ao-kaart .leaflet-popup-content { font-size: .95rem; }
.ao-kaart .leaflet-container a.leaflet-popup-close-button { background: transparent; }
.ao-kaart .leaflet-control-zoom a { background: #fff; color: var(--ao-ink); border-radius: 0; padding: 0; display: block; }
/* Rode speld */
.ao-pin { background: transparent; border: 0; }
.ao-pin span {
	display: block;
	width: 26px;
	height: 26px;
	background: var(--ao-accent);
	border: 3px solid #fff;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	box-shadow: 0 2px 6px rgba(0,0,0,.35);
	box-sizing: border-box;
}

/* ==========================================================================
   17. Blog, archief & artikelkaarten ([artikelen] en "Lees ook")
   ========================================================================== */
/* Archief/blog/zoeken als kaartenraster */
.ao-archief .site-main {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	align-items: stretch;
}
.ao-archief .site-main > :not(article) { grid-column: 1 / -1; margin-bottom: 0; }
.ao-archief .site-main > article { margin: 0; display: flex; }
.ao-archief.separate-containers .site-main > article .inside-article {
	padding: 0 0 20px;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}
.ao-archief .site-main > article .inside-article:hover { box-shadow: var(--ao-shadow-up); transform: translateY(-2px); }
.ao-archief .post-image { order: -1; margin: 0 0 16px !important; }
.ao-archief .post-image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--ao-line);
}
.ao-archief .entry-header,
.ao-archief .entry-summary { padding: 0 20px; }
body.ao-archief .site-main .entry-title { font-size: 1.25rem; margin: 0 0 .3em; overflow-wrap: anywhere; hyphens: auto; }
.ao-archief .entry-header { margin-bottom: 8px; }
.ao-archief .entry-title a { color: var(--ao-ink); text-decoration: none; }
.ao-archief .entry-title a:hover { color: var(--ao-link); }
.ao-archief .entry-summary { font-size: .95rem; color: var(--ao-ink-2); margin-top: 0; }
.ao-archief .entry-summary p:last-child { margin-bottom: 0; }
.ao-archief .entry-meta { font-size: .82rem; color: var(--ao-ink-2); }
.ao-archief footer.entry-meta { display: none; }
.ao-archief .page-header {
	background: var(--ao-surface);
	border-radius: var(--ao-radius);
	box-shadow: var(--ao-shadow);
	padding: clamp(22px, 4vw, 40px);
}
.ao-archief .page-header h1 { margin: 0; }
.ao-archief .taxonomy-description { color: var(--ao-ink-2); margin-top: .6em; }
.ao-archief .paging-navigation { padding: 0; background: transparent; box-shadow: none; }
.paging-navigation .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--ao-surface);
	border: 1px solid var(--ao-line);
	text-decoration: none;
	color: var(--ao-ink);
}
.paging-navigation .page-numbers.current { background: var(--ao-accent); border-color: var(--ao-accent); color: #fff; }

/* Kaartenraster uit [artikelen] en "Lees ook" */
.ao-artikelen { margin: 1.6em 0 2em; }
.entry-content .ao-artikelen__titel,
.ao-artikelen__titel { margin: 0 0 .7em; }
.ao-artikelen__grid {
	display: grid;
	grid-template-columns: repeat(var(--ao-kolommen, 3), minmax(0, 1fr));
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ao-artikelen__grid > li { margin: 0; padding: 0; }
.ao-artikelkaart {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--ao-surface);
	border: 1px solid var(--ao-line);
	border-radius: var(--ao-radius);
	overflow: hidden;
	text-decoration: none;
	color: var(--ao-ink);
	transition: box-shadow .2s ease, transform .2s ease;
}
.entry-content a.ao-artikelkaart { color: var(--ao-ink); text-decoration: none; }
.ao-artikelkaart:hover { box-shadow: var(--ao-shadow-up); transform: translateY(-2px); color: var(--ao-ink); }
.ao-artikelkaart__foto {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--ao-line);
	margin: 0;
	border-radius: 0 !important;
}
.ao-artikelkaart__foto--leeg {
	background:
		radial-gradient(400px 160px at 100% 0%, rgba(var(--ao-glow), .4), transparent 60%),
		var(--ao-ink);
}
.ao-artikelkaart__body { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ao-artikelkaart__titel { font-weight: 750; font-size: 1.08rem; line-height: 1.3; letter-spacing: -0.01em; }
.ao-artikelkaart__tekst { font-size: .92rem; color: var(--ao-ink-2); line-height: 1.5; }
.ao-artikelkaart__meer { margin-top: auto; padding-top: 6px; font-size: .9rem; font-weight: 700; color: var(--ao-link); }
.ao-artikelkaart__meer::after { content: " →"; }

/* "Lees ook" onder artikelen */
.ao-leesook { margin-top: 2.5em; padding-top: 2em; border-top: 1px solid var(--ao-line); }

@media (max-width: 900px) {
	.ao-artikelen__grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
@media (max-width: 600px) {
	.ao-artikelen__grid { grid-template-columns: 1fr; }
	.ao-partnerkaart { grid-template-columns: 1fr; }
	.ao-partnerkaart__foto img { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
}

/* ==========================================================================
   18. Homepage met core-blokken: ao-hero, ao-intro, ao-tegels, ao-tekstblok
   (Groep-blokken met die klasse via Geavanceerd → Extra CSS-klasse)
   ========================================================================== */
/* WordPress zet in klassieke thema's een extra binnen-div in elke Groep;
   die doet voor de opmaak niet mee. */
.ao-hero > .wp-block-group__inner-container,
.ao-tegels > .wp-block-group__inner-container,
.ao-tegel > .wp-block-group__inner-container { display: contents; }

/* Hero: foto als achtergrond, tekst linksonder */
.entry-content > .ao-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(380px, 48vw, 560px);
	margin: 28px 0;
	padding: clamp(24px, 5vw, 56px);
	border-radius: var(--ao-radius);
	background: var(--ao-ink);
	color: #fff;
}
.ao-hero .wp-block-image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	max-width: none !important;
	margin: 0 !important;
}
.ao-hero .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}
.ao-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(18,18,20,0) 25%, rgba(18,18,20,.8) 100%),
		linear-gradient(90deg, rgba(18,18,20,.55), rgba(18,18,20,0) 70%);
}
.entry-content .ao-hero :is(p, h1, h2, .wp-block-buttons) {
	max-width: 38rem;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-top: 0;
}
.entry-content .ao-hero p.ao-hero__kicker {
	align-self: flex-start;
	margin-bottom: 14px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--ao-accent);
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.entry-content .ao-hero h1 {
	color: #fff;
	font-size: clamp(2.3rem, 1.5rem + 3.4vw, 3.8rem);
	margin-bottom: .25em;
	text-shadow: 0 2px 20px rgba(0,0,0,.25);
}
.entry-content .ao-hero p { color: #eceef2; font-size: 1.15rem; margin-bottom: 0; }
.entry-content .ao-hero .wp-block-buttons { margin-top: 22px; gap: 10px; }
.entry-content .ao-hero .wp-block-button.is-style-outline .wp-block-button__link {
	background: rgba(255,255,255,.08);
	border: 2px solid rgba(255,255,255,.85);
	color: #fff;
	padding: 10px 20px;
	backdrop-filter: blur(4px);
}
.entry-content .ao-hero .wp-block-button.is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--ao-ink); }

/* Intro onder de hero */
.entry-content > p.ao-intro {
	font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
	line-height: 1.55;
	max-width: 62ch;
	margin: 8px 0 40px;
}
.home .entry-content > h2 { margin: 0 0 18px; }

/* Tegels: raster van onderwerpen, hele tegel klikbaar via de kop-link */
.entry-content > .ao-tegels {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0 0 44px;
}
@media (max-width: 960px) { .entry-content > .ao-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .entry-content > .ao-tegels { grid-template-columns: 1fr; } }
.entry-content .ao-tegels .ao-tegel {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	background: var(--ao-surface);
	border: 1px solid var(--ao-line);
	border-radius: var(--ao-radius);
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}
.ao-tegel:hover { box-shadow: var(--ao-shadow-up); transform: translateY(-2px); }
.ao-tegel:focus-within { outline: 3px solid var(--ao-accent); outline-offset: 2px; }
.entry-content .ao-tegel .wp-block-image { margin: 0 !important; }
.ao-tegel .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 0;
	background: var(--ao-line);
}
.entry-content .ao-tegel h3 { font-size: 1.2rem; margin: 16px 20px 6px; }
.entry-content .ao-tegel p { font-size: .95rem; line-height: 1.55; color: var(--ao-ink-2); margin: 0 20px 20px; }
.ao-tegel h3 a { color: var(--ao-ink); text-decoration: none; }
.ao-tegel h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ao-tegel h3 a:hover { color: var(--ao-link); }
.ao-tegel h3 a:focus-visible { outline: none; }
.ao-tegel h3::after { content: " →"; color: var(--ao-accent); }
/* Tegel zonder foto: donker vlak met rode gloed */
.entry-content .ao-tegels .ao-tegel:not(:has(.wp-block-image)) {
	justify-content: flex-end;
	min-height: 260px;
	border-color: var(--ao-ink);
	background:
		radial-gradient(500px 220px at 100% 0%, rgba(var(--ao-glow), .45), transparent 65%),
		var(--ao-ink);
}
.ao-tegel:not(:has(.wp-block-image)) h3 a { color: #fff; }
.entry-content .ao-tegel:not(:has(.wp-block-image)) p { color: #cfd3da; }
.ao-tegel:not(:has(.wp-block-image)) h3::after { color: var(--ao-on-dark); }

/* Tekstblok: witte kaart voor redactionele tekst op de homepage */
.entry-content .ao-tekstblok {
	background: var(--ao-surface);
	border-radius: var(--ao-radius);
	box-shadow: var(--ao-shadow);
	padding: clamp(24px, 4vw, 48px);
	margin: 0 0 32px;
}
.entry-content .ao-tekstblok :is(p, h2, h3, h4, ul, ol, .wp-block-buttons) { max-width: none; margin-left: 0 !important; margin-right: 0 !important; }
.entry-content .ao-tekstblok h2 { margin-top: 1.6em; margin-bottom: .5em; }
.entry-content .ao-tekstblok :is(h2, p):first-child { margin-top: 0; }
.entry-content .ao-tekstblok p:last-child { margin-bottom: 0; }
.entry-content .ao-tekstblok .wp-block-image { margin: 1.4em 0 !important; max-width: none; }
.entry-content .ao-tekstblok .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 10px;
	background: var(--ao-line);
}
.entry-content .ao-tekstblok .wp-block-image figcaption { font-size: .85rem; color: var(--ao-ink-2); margin-top: 8px; }
.entry-content .ao-tekstblok .wp-block-buttons { margin-top: 18px; }

/* ==========================================================================
   19. Twee derde / één derde: Kolommen-blok met klasse ao-kolommen
   Linkerkolom: tekstblokken. Rechterkolom (klasse ao-zijbalk): [zoekbalk],
   [meest_gelezen], [hotels] of gewone blokken.
   ========================================================================== */
.entry-content > .wp-block-columns.ao-kolommen {
	display: flex;
	flex-wrap: nowrap;
	gap: 28px;
	align-items: flex-start;
	margin: 0 0 32px;
}
.ao-kolommen > .wp-block-column { min-width: 0; flex-grow: 0; flex-shrink: 1; }
.ao-kolommen > .wp-block-column:not([style*="flex-basis"]) { flex: 1 1 0; }
.ao-kolommen > .wp-block-column > :last-child { margin-bottom: 0; }
.entry-content .ao-kolommen .ao-tekstblok { margin: 0 0 28px; padding: clamp(22px, 3vw, 38px); }
.entry-content .ao-kolommen .ao-tekstblok h2 { font-size: clamp(1.4rem, 1.2rem + .7vw, 1.75rem); }
.entry-content .ao-kolommen .ao-tekstblok:last-child { margin-bottom: 0; }
.ao-zijbalk { display: flex; flex-direction: column; gap: 20px; }
.ao-zijbalk > * { margin: 0 !important; }
@media (max-width: 781px) {
	.entry-content > .wp-block-columns.ao-kolommen { flex-wrap: wrap !important; }
	.ao-kolommen > .wp-block-column { flex-basis: 100% !important; }
}

/* Widgetkaart (zijbalk op de homepage en in widgets) */
.ao-widget {
	background: var(--ao-surface);
	border-radius: var(--ao-radius);
	box-shadow: var(--ao-shadow);
	padding: 22px;
}
.entry-content .ao-widget__titel,
.ao-widget__titel {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ao-ink-2);
	margin: 0 0 14px;
}
.ao-widget__titel label { cursor: pointer; }
.ao-widget__meer {
	display: inline-block;
	margin-top: 14px;
	font-weight: 700;
	font-size: .92rem;
	text-decoration: none;
}
.ao-widget__meer::after { content: " →"; }
.ao-widget .ao-disclosure { margin-top: 12px; }

/* Zoekbalk */
.ao-zoek { background: var(--ao-ink); }
.entry-content .ao-zoek .ao-widget__titel { color: #fff; }
.ao-zoek__form { display: flex; margin: 0; }
.ao-zoek__form input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	border-radius: 999px 0 0 999px;
	padding: 12px 16px;
	font-size: 16px;
	background: #fff;
}
.ao-zoek__form input[type="search"]:focus { box-shadow: inset 0 0 0 2px var(--ao-sky); }
.ao-zoek__form button {
	flex: 0 0 auto;
	justify-content: center;
	border-radius: 0 999px 999px 0;
	padding: 0 18px;
	background: var(--ao-accent);
}
.ao-zoek__form button:hover { background: var(--ao-accent-hover); }

/* Meest gelezen */
.ao-populair__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: aopop;
}
.ao-populair__lijst li {
	counter-increment: aopop;
	margin: 0;
	border-top: 1px solid var(--ao-line);
}
.ao-populair__lijst li:first-child { border-top: 0; }
.ao-populair__lijst a {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 12px;
	align-items: center;
	padding: 10px 0;
	color: var(--ao-ink);
	text-decoration: none;
	font-weight: 650;
	font-size: .95rem;
	line-height: 1.35;
}
.ao-populair__lijst li:first-child a { padding-top: 0; }
.ao-populair__lijst li:last-child a { padding-bottom: 0; }
.ao-populair__lijst a:hover { color: var(--ao-link); }
.ao-populair__foto { position: relative; display: block; }
.ao-populair__foto img,
.ao-populair__foto--leeg {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
	background: var(--ao-line);
}
.ao-populair__foto::after {
	content: counter(aopop);
	position: absolute;
	left: -6px;
	top: -6px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ao-accent);
	color: #fff;
	font-size: .72rem;
	font-weight: 800;
	border: 2px solid var(--ao-surface);
}
.ao-populair--zonder-foto .ao-populair__lijst a { grid-template-columns: 1.6em 1fr; }
.ao-populair--zonder-foto .ao-populair__lijst a::before {
	content: counter(aopop) ".";
	color: var(--ao-accent);
	font-weight: 800;
}

/* Hotels */
.ao-hotels__lijst { list-style: none; margin: 0; padding: 0; }
.ao-hotels__lijst li { margin: 0; border-top: 1px solid var(--ao-line); }
.ao-hotels__lijst li:first-child { border-top: 0; }
.ao-hotel {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 0;
	color: var(--ao-ink);
	text-decoration: none;
}
.ao-hotels__lijst li:first-child .ao-hotel { padding-top: 0; }
.ao-hotels__lijst li:last-child .ao-hotel { padding-bottom: 0; }
a.ao-hotel:hover .ao-hotel__naam { color: var(--ao-link); }
.ao-hotel__foto img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
	background: var(--ao-line);
}
.ao-hotel__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ao-hotel__naam { font-weight: 700; font-size: .98rem; line-height: 1.3; }
.ao-hotel__meta { font-size: .82rem; color: var(--ao-accent); font-weight: 600; }
.ao-hotel__uitleg { font-size: .88rem; color: var(--ao-ink-2); line-height: 1.45; }

/* Zelfde kaarten in de gewone zijbalk van GeneratePress */
.sidebar .widget:has(> .ao-widget),
.sidebar .widget:has(> .wp-block-shortcode > .ao-widget) { padding: 0; background: transparent; box-shadow: none; }

@media (max-width: 768px) {
	.entry-content > .ao-hero { margin-top: 12px; min-height: 420px; }
	.entry-content .ao-hero p { font-size: 1.02rem; }
}

/* ==========================================================================
   10. Mobiel
   ========================================================================== */
@media (max-width: 768px) {
	body { font-size: 16px; }
	.separate-containers .site-main { margin-top: 16px; }
	.home .entry-content > .gb-container:first-child { margin-top: 12px; }
	.entry-content > .gb-container { border-radius: 10px; }
	.ao-footer { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

/* ==========================================================================
   20. Tegenwicht voor GeneratePress-instellingen
   GP schrijft zijn Customizer-instellingen als inline CSS in de pagina.
   Een deel daarvan heeft een hogere specificiteit dan de regels hierboven,
   of zet dingen die dit thema niet verwacht. Deze regels zorgen dat het
   thema er hetzelfde uitziet, welke GP-instellingen er ook staan.
   ========================================================================== */

/* GP: lettergewicht 300 op body, knoppen en velden → te dunne tekst */
body, button, input, select, textarea { font-weight: 400; }

/* GP: witte of grijze tekstkleur via Customizer */
body,
.separate-containers .inside-article,
.one-container .container,
.inside-page-header { color: var(--ao-ink); }

/* GP: linkkleur voor inhoud (.inside-article a). Niet hier overschrijven:
   dan verliezen knoppen en kaarten hun eigen kleur. Stel in GP
   Kleuren → Inhoud → Link in op #a3101a (zie LEESMIJ). */

/* GP: knopkleuren (a.wp-block-button__link:not(.has-background)) winnen van .wp-block-button__link */
.inside-article a.wp-block-button__link:not(.has-background),
.inside-article a.wp-block-button__link:not(.has-background):visited {
	background-color: var(--ao-accent);
	color: var(--ao-accent-ink);
}
.inside-article a.wp-block-button__link:not(.has-background):hover,
.inside-article a.wp-block-button__link:not(.has-background):focus,
.inside-article a.wp-block-button__link:not(.has-background):active {
	background-color: var(--ao-accent-hover);
	color: var(--ao-accent-ink);
}
.inside-article .is-style-outline > a.wp-block-button__link:not(.has-background) {
	background-color: transparent;
	color: var(--ao-accent);
	box-shadow: inset 0 0 0 2px currentColor;
}
.inside-article .is-style-outline > a.wp-block-button__link:not(.has-background):hover {
	background-color: var(--ao-accent);
	color: var(--ao-accent-ink);
}
/* Omlijnde knop in de hero blijft wit (zie sectie 18) */
.inside-article .ao-hero .is-style-outline > a.wp-block-button__link:not(.has-background) {
	color: #fff;
	box-shadow: none;
}

/* GP: binnenmarge (padding 0 40px) en max-breedte op elke Groep in .site-main.
   Dat maakt tekstblokken, tegels en de hero smaller dan bedoeld. */
.site-main .entry-content .wp-block-group:not(.alignfull):not(.alignwide) > .wp-block-group__inner-container {
	padding: 0;
	max-width: none;
}

/* GP: extra marge onder elk blok in .entry-content */
.entry-content > .ao-tegels,
.entry-content > .ao-tekstblok { margin-bottom: 32px; }

/* Tekstblok op een gewone pagina: staat al in een witte kaart,
   dus geen kaart-in-kaart maar een rustig vlak. */
body:not(.home) .entry-content .ao-tekstblok {
	background: var(--ao-bg);
	box-shadow: none;
	padding: clamp(20px, 3vw, 32px);
}
body:not(.home) .entry-content .ao-tekstblok .ao-toc { background: var(--ao-surface); }

/* Logo én letterblokje tegelijk is dubbel: met een eigen logo vervalt de letter */
.wp-custom-logo .main-title a::before { display: none; }