/* Altijd licht: de site volgt bewust niet de donkere modus van het apparaat. */
:root { color-scheme: light; }
/* Murphy's Heroes — aanvulling op theme.json. Kleuren komen altijd uit de presets. */



body { font-stretch: 100%; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .wp-block-post-title, .wp-block-navigation, .wp-element-button { font-stretch: 87.5%; }
h1, h2, h3, .wp-block-post-title { text-wrap: balance; }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid transparent;
	box-shadow: var(--wp--custom--focus);
}

/* ---------- Header ---------- */
.mh-header { border-bottom: 1px solid var(--wp--preset--color--line); }
.mh-brand { display: block; line-height: 0; }
.mh-brand img { height: 64px; width: auto; }
.mh-brand .mh-brand__letters { display: none; height: 34px; }
@media (max-width: 600px) {
	.mh-brand .mh-brand__full { display: none; }
	.mh-brand .mh-brand__letters { display: block; }
}
.wp-block-navigation a:where(:not(.wp-element-button)) { text-decoration: none; }
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation a[aria-current="page"] { color: var(--wp--preset--color--heroes-blue); }

/* ---------- Knoppen ---------- */
.wp-element-button, .wp-block-button__link { border-radius: 0; transition: transform .15s, box-shadow .15s; }
.wp-element-button:hover, .wp-block-button__link:hover { transform: translate(-2px, -2px); box-shadow: var(--wp--custom--shadow--brick); }
.wp-block-button.is-style-mh-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 2px solid var(--wp--preset--color--line-strong);
}

/* ---------- Tekst ---------- */
.is-style-mh-lead { font-size: var(--wp--preset--font-size--lead); line-height: 1.52; }
.mh-eyebrow, .mh-eyebrow a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--heroes-blue);
	text-decoration: none;
}
.mh-meta, .mh-meta a, .mh-count {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--wp--preset--color--ink-muted);
	text-decoration: none;
}

/* ---------- Tags (spelsystemen) ---------- */
.wp-block-post-terms.taxonomy-post_tag { display: flex; flex-wrap: wrap; gap: 4px; }
.wp-block-post-terms.taxonomy-post_tag .wp-block-post-terms__separator { display: none; }
.wp-block-post-terms.taxonomy-post_tag a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 0.8125rem;
	line-height: 16px;
	padding: 4px 10px;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--blue-soft);
	color: var(--wp--preset--color--heroes-blue);
	text-decoration: none;
}

/* ---------- Foto's: tekst altijd ónder de foto, nooit eroverheen ---------- */
.wp-block-image img { border-radius: 0; }
.wp-block-image figcaption,
.wp-block-gallery .wp-block-image figcaption,
.wp-block-gallery figcaption.blocks-gallery-caption {
	position: static;
	margin: 12px 0 0;
	padding: 0;
	max-height: none;
	overflow: visible;
	background: none;
	color: var(--wp--preset--color--ink);
	text-align: left;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.61;
	text-shadow: none;
}
.wp-block-gallery .wp-block-image figcaption::before { display: none; }
.wp-block-gallery.has-nested-images figure.wp-block-image { flex-direction: column; align-items: stretch; }
.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before { display: none; }

/* ---------- Fotoreeks (galerij-stijl "Fotoreeks") ---------- */
.wp-block-gallery.is-style-mh-carousel {
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: 0 !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	position: relative;
}
.wp-block-gallery.is-style-mh-carousel::-webkit-scrollbar { display: none; }
.wp-block-gallery.is-style-mh-carousel > figure.wp-block-image {
	width: 100% !important;
	margin: 0 !important;
	scroll-snap-align: start;
}
.wp-block-gallery.is-style-mh-carousel > figure.wp-block-image img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; background: var(--wp--preset--color--plaster); }
.mh-carousel { position: relative; }
.mh-carousel__nav {
	position: absolute; z-index: 2;
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border: 0; cursor: pointer;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}
.mh-carousel__nav[disabled] { opacity: .35; cursor: default; }
.mh-carousel__nav--prev { left: 0; }
.mh-carousel__nav--next { right: 0; }
.mh-carousel__count {
	display: block;
	margin-top: 8px;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--heroes-blue);
	font-variant-numeric: tabular-nums;
}
.mh-carousel__dots { display: flex; gap: 6px; margin-top: 8px; }
.mh-carousel__dots button { width: 24px; height: 4px; padding: 0; border: 0; background: var(--wp--preset--color--line); cursor: pointer; }
.mh-carousel__dots button[aria-current="true"] { background: var(--wp--preset--color--heroes-blue); }

/* ---------- Verslagkaarten ---------- */
.mh-card { background: var(--wp--preset--color--surface); height: 100%; transition: transform .15s, box-shadow .15s; }
.mh-card:hover { transform: translate(-2px, -2px); box-shadow: var(--wp--custom--shadow--brick); }
.mh-card .wp-block-post-featured-image { margin: 0; overflow: hidden; background: var(--wp--preset--color--plaster); }
.mh-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.mh-card .wp-block-post-title a { text-decoration: none; color: inherit; }
.mh-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.mh-card { position: relative; }
.mh-card .taxonomy-post_tag a { position: relative; z-index: 1; }

/* ---------- Vlakken ---------- */
.is-style-mh-plaster { background: var(--wp--preset--color--plaster); }

/* ---------- Rooster (tabel-stijl "Rooster") ---------- */
.wp-block-table.is-style-mh-rooster table { background: var(--wp--preset--color--plaster); border-collapse: collapse; width: 100%; }
.wp-block-table.is-style-mh-rooster td,
.wp-block-table.is-style-mh-rooster th { border: 0; border-top: 1px solid var(--wp--preset--color--line); padding: 10px 16px; font-size: 1rem; text-align: left; }
.wp-block-table.is-style-mh-rooster tr > :first-child { font-family: var(--wp--preset--font-family--display); font-weight: 600; }
.wp-block-table.is-style-mh-rooster tr > :last-child {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--ink-muted);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.wp-block-table.is-style-mh-rooster thead { border: 0; }
.wp-block-table.is-style-mh-rooster figcaption {
	font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--wp--preset--font-size--h3);
	text-align: left; margin: 0 0 8px;
}

/* ---------- Footer ---------- */
.mh-footer a { color: inherit; }
.mh-credit a { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.mh-card .taxonomy-post_tag a:nth-of-type(n+4) { display: none; }

/* ---------- Homepage-intro ---------- */
.mh-hero-lion img { display: block; width: 100%; max-width: 320px; height: auto; margin-inline: auto; }
@media (max-width: 781px) { .mh-hero-lion img { max-width: 160px; margin-inline: 0; } }
.mh-footer-lion { display: block; width: 58px; height: auto; }

/* ---------- 0.1.1 ---------- */
/* CTA: tekst en knop naast elkaar op desktop, onder elkaar op mobiel */
.is-style-mh-plaster > .wp-block-group { flex: 1 1 28rem; }
.is-style-mh-plaster > .wp-block-buttons { flex: 0 0 auto; }
/* Actieve menu-item, ook op de homepage */
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
.wp-block-navigation a[aria-current="page"] { color: var(--wp--preset--color--heroes-blue); }
.wp-block-navigation a:hover { color: var(--wp--preset--color--heroes-blue); }

/* ---------- 0.1.2 ---------- */
.mh-nav-lang a { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--ink-muted); }
.mh-footer-nav a { text-decoration: none; }
.mh-footer-nav a:hover { color: var(--wp--preset--color--heroes-blue); }

/* ---------- 0.2.0: verslagenoverzicht ---------- */
.mh-filter { margin-top: var(--wp--preset--spacing--50); padding: var(--wp--preset--spacing--50); background: var(--wp--preset--color--surface); }
.mh-filter__row { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--40); align-items: flex-end; }
.mh-filter__field { display: grid; gap: 6px; flex: 1 1 10rem; min-width: 0; }
.mh-filter__field--zoek { flex: 2 1 16rem; }
.mh-filter__field > span {
	font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 0.8125rem;
	letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--ink-muted);
}
.mh-filter input, .mh-filter select {
	font: inherit; font-size: 1rem; width: 100%; box-sizing: border-box;
	padding: 10px 12px; border: 2px solid var(--wp--preset--color--line-strong); border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink);
}
.mh-filter input:focus-visible, .mh-filter select:focus-visible { outline: 2px solid transparent; box-shadow: var(--wp--custom--focus); border-color: var(--wp--preset--color--heroes-blue); }
.mh-filter__submit { flex: 0 0 auto; border: 2px solid var(--wp--preset--color--heroes-blue); }
.mh-filter__result { margin: var(--wp--preset--spacing--40) 0 0; }
.mh-filter__result a { color: var(--wp--preset--color--heroes-blue); }


/* ---------- 0.3.0: clubkleuren blauw-geel ---------- */
/* Footer: altijd clubblauw met witte tekst, ook in het donkere thema. */
.mh-footer { --mh-club-blue: #1537C9; background: var(--mh-club-blue) !important; color: #FFFFFF; }
.mh-footer a, .mh-footer .mh-meta, .mh-footer .mh-meta a { color: #FFFFFF; }
.mh-footer a:hover, .mh-footer-nav a:hover { color: #FFD200; }
.mh-footer .wp-block-table.is-style-mh-rooster table { background: rgba(255,255,255,.08); }
.mh-footer .wp-block-table.is-style-mh-rooster td, .mh-footer .wp-block-table.is-style-mh-rooster th { border-top-color: rgba(255,255,255,.25); }
.mh-footer .wp-block-table.is-style-mh-rooster tr > :last-child { color: #FFD200; }
.mh-footer .wp-block-table.is-style-mh-rooster figcaption { color: #FFFFFF; }
/* Wervingsbanner in clubgeel */
.is-style-mh-yellow { background: var(--wp--preset--color--heroes-yellow); color: var(--wp--preset--color--on-yellow); }
.is-style-mh-yellow a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--on-yellow); }


/* =====================================================================
   0.4.0 — Clubvlag: vaste header, mobiel menu, spellenband, statistieken
   ===================================================================== */
:root { --lm: #1537C9; --la: #FFD200; --mh-yellow: #FFD200; --mh-blue: #1537C9; --mh-blue-2: #2447D6; }
html { scroll-padding-top: 96px; }
html.mh-menu-open { overflow: hidden; }

/* ---------- Knoppen: hoofdletters, stevig ---------- */
.wp-element-button, .wp-block-button__link, .mh-btn {
	font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 0.9375rem; letter-spacing: .06em; text-transform: uppercase;
	padding: 16px 22px; border-radius: 0; text-decoration: none; display: inline-block; border: 0; cursor: pointer;
}
.wp-element-button:hover, .wp-block-button__link:hover, .mh-btn:hover { transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--wp--preset--color--ink); }
.wp-block-button.is-style-mh-ghost .wp-block-button__link { background: transparent; color: var(--wp--preset--color--ink); border: 0; box-shadow: inset 0 0 0 2px var(--wp--preset--color--ink); }
.wp-block-button.is-style-mh-ghost .wp-block-button__link:hover { box-shadow: inset 0 0 0 2px var(--wp--preset--color--ink), 4px 4px 0 var(--wp--preset--color--ink); }
.mh-btn--yellow { background: var(--mh-yellow); color: var(--wp--preset--color--ink); }

/* ---------- Eyebrow met geel blokje, sectietitels in kapitalen ---------- */
.mh-eyebrow { display: flex; align-items: center; gap: 10px; letter-spacing: .12em; }
.mh-eyebrow::before { content: ""; flex: 0 0 22px; height: 10px; background: var(--mh-yellow); }
.wp-block-post-terms.mh-eyebrow::before { display: none; }
.mh-section-title { text-transform: uppercase; font-weight: 800; letter-spacing: .01em; }
.mh-hero-title mark {
	background: linear-gradient(transparent 12%, var(--mh-yellow) 12%, var(--mh-yellow) 88%, transparent 88%);
	color: inherit; padding: 0 .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.mh-hero-title { font-size: clamp(2.5rem, 6vw, 5rem) !important; font-weight: 800; letter-spacing: -.015em; font-stretch: 92%; }
.mh-hero-lion__svg { display: block; width: 100%; max-width: 360px; height: auto; margin-inline: auto; }
@media (max-width: 781px) { .mh-hero-lion__svg { max-width: 180px; margin-inline: 0; } }

/* ---------- Header ---------- */
.mh-hdr { position: relative; background: var(--wp--preset--color--paper); padding: 18px 0; transition: background .25s, padding .25s; --lm: var(--mh-blue); --la: var(--mh-yellow); }
.mh-hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; opacity: 0; transition: opacity .25s;
	background: repeating-linear-gradient(90deg, var(--mh-yellow) 0 18px, transparent 18px 44px); pointer-events: none; }
.mh-hdr.is-scrolled { background: var(--mh-blue); padding: 10px 0; --lm: var(--mh-yellow); --la: #FFFFFF; }
.mh-hdr.is-scrolled::after { opacity: 1; }
.mh-hdr__wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.mh-brand { display: block; line-height: 0; }
.mh-brand__logo { display: block; height: 76px; width: auto; transition: height .25s; }
.mh-hdr.is-scrolled .mh-brand__logo { height: 52px; }
.mh-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.mh-nav a { display: block; position: relative; padding: 12px 14px; font: 700 0.875rem/1 var(--wp--preset--font-family--display); letter-spacing: .09em; text-transform: uppercase; text-decoration: none; color: var(--wp--preset--color--ink); }
.mh-nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 3px; background: var(--mh-blue); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.mh-nav a:hover::after { transform: scaleX(1); }
.mh-nav a[aria-current="page"] { background: var(--mh-yellow); color: var(--wp--preset--color--ink); }
.mh-nav a[aria-current="page"]::after { display: none; }
.mh-nav__lang a { font-family: var(--wp--preset--font-family--mono); font-weight: 500; letter-spacing: .04em; color: var(--wp--preset--color--ink-muted); }
.mh-hdr.is-scrolled .mh-nav a { color: #FFFFFF; }
.mh-hdr.is-scrolled .mh-nav a::after { background: var(--mh-yellow); }
.mh-hdr.is-scrolled .mh-nav a[aria-current="page"] { color: var(--wp--preset--color--ink); }
.mh-hdr.is-scrolled .mh-nav__lang a { color: #C9D2FF; }
.mh-hdr.is-scrolled :where(a, button):focus-visible { box-shadow: 0 0 0 3px var(--mh-yellow); }
.mh-burger { display: none; position: relative; width: 52px; height: 52px; flex: 0 0 auto; border: 0; padding: 0; background: var(--mh-yellow); cursor: pointer; }
.mh-burger span { position: absolute; left: 13px; right: 13px; height: 4px; background: var(--mh-blue); }
.mh-burger span:nth-child(1) { top: 16px; } .mh-burger span:nth-child(2) { top: 24px; right: 19px; } .mh-burger span:nth-child(3) { top: 32px; }
@media (max-width: 900px) {
	.mh-nav { display: none; }
	.mh-burger { display: block; }
	.mh-hdr__wrap { padding: 0 16px; }
	.mh-brand__logo { height: 54px; }
	.mh-hdr.is-scrolled .mh-brand__logo { height: 44px; }
}

/* ---------- Mobiel menu ---------- */
.mh-menu[hidden] { display: none; }
.mh-menu { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; padding: 18px 20px 28px; overflow: hidden;
	background: var(--mh-blue); color: #FFFFFF; clip-path: inset(0 0 100% 0); transition: clip-path .45s cubic-bezier(.7, 0, .2, 1); }
.mh-menu.is-open { clip-path: inset(0 0 0 0); }
body.admin-bar .mh-menu { top: 46px; }
.mh-menu__top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; --lm: var(--mh-yellow); --la: #FFFFFF; }
.mh-menu__top a { line-height: 0; }
.mh-menu__logo { height: 48px; width: auto; }
.mh-menu__close { position: relative; width: 52px; height: 52px; border: 0; padding: 0; background: var(--mh-yellow); cursor: pointer; }
.mh-menu__close span { position: absolute; left: 12px; right: 12px; top: 24px; height: 4px; background: var(--mh-blue); }
.mh-menu__close span:first-child { transform: rotate(45deg); } .mh-menu__close span:last-child { transform: rotate(-45deg); }
.mh-menu__list { position: relative; z-index: 2; list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 6px; }
.mh-menu__list a { display: inline-block; margin-left: -10px; padding: 4px 10px 6px; font: 900 clamp(2.1rem, 11vw, 4rem)/.95 var(--wp--preset--font-family--display); font-stretch: 112%; text-transform: uppercase; text-decoration: none; color: #FFFFFF; }
.mh-menu__list li:nth-child(odd) a { color: var(--mh-yellow); }
.mh-menu__list li a[aria-current="page"] { background: var(--mh-yellow); color: var(--mh-blue); }
.mh-menu__list li { opacity: 0; transform: translateY(-120%) rotate(-4deg); }
.mh-menu.is-open .mh-menu__list li { animation: mh-drop .5s cubic-bezier(.3, 1.5, .5, 1) forwards; }
.mh-menu.is-open .mh-menu__list li:nth-child(1) { animation-delay: .18s; } .mh-menu.is-open .mh-menu__list li:nth-child(2) { animation-delay: .26s; }
.mh-menu.is-open .mh-menu__list li:nth-child(3) { animation-delay: .34s; } .mh-menu.is-open .mh-menu__list li:nth-child(4) { animation-delay: .42s; }
.mh-menu.is-open .mh-menu__list li:nth-child(5) { animation-delay: .5s; }
@keyframes mh-drop { to { opacity: 1; transform: none; } }
.mh-menu__lion { position: absolute; z-index: 1; right: -60px; bottom: -40px; height: 78%; width: auto; pointer-events: none; --lm: var(--mh-blue-2); --la: var(--mh-blue-2); }
.mh-menu__foot { position: relative; z-index: 2; margin-top: auto; display: grid; gap: 14px; }
.mh-menu__foot p { margin: 0; font: 500 0.8125rem/1.5 var(--wp--preset--font-family--mono); color: #DDE3FF; }
.mh-menu__foot a:not(.mh-btn) { color: #FFFFFF; }
.mh-billets { height: 10px; background: repeating-linear-gradient(90deg, var(--mh-yellow) 0 22px, transparent 22px 52px); }
.mh-menu :where(a, button):focus-visible { box-shadow: 0 0 0 3px var(--mh-yellow); outline: none; }

/* ---------- Spellenband ---------- */
.mh-band { background: var(--mh-blue); border-block: 6px solid var(--mh-yellow); overflow: hidden; margin-block: clamp(40px, 6vw, 72px) 0 !important; }
.mh-band__track { display: flex; width: max-content; animation: mh-tick 70s linear infinite; }
.mh-band:hover .mh-band__track, .mh-band:focus-within .mh-band__track { animation-play-state: paused; }
.mh-band__set { display: flex; }
.mh-band a { display: inline-flex; align-items: center; padding: 16px 0; white-space: nowrap; text-decoration: none;
	font: 800 1.25rem/1 var(--wp--preset--font-family--display); font-stretch: 110%; letter-spacing: .04em; text-transform: uppercase; color: var(--mh-yellow); }
.mh-band a:nth-child(3n+2) { color: #FFFFFF; }
.mh-band a::after { content: ""; width: 12px; height: 12px; margin: 0 24px; background: #FFFFFF; }
.mh-band a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.mh-band a:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -3px; }
@keyframes mh-tick { to { transform: translateX(-50%); } }

/* ---------- Statistieken ---------- */
.mh-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mh-stat { display: block; border-top: 6px solid var(--mh-blue); padding-top: 14px; text-decoration: none; color: inherit; }
.mh-stat b { display: block; font: 900 clamp(3rem, 6vw, 4.5rem)/1 var(--wp--preset--font-family--display); font-stretch: 90%; color: var(--mh-blue); font-variant-numeric: tabular-nums; }
.mh-stat span { font: 500 0.875rem/1.4 var(--wp--preset--font-family--mono); color: var(--wp--preset--color--ink-muted); }
.mh-stat:hover { border-top-color: var(--mh-yellow); }
@media (max-width: 700px) { .mh-stats { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- Verslagkaarten: altijd 3 naast elkaar, rijen gevuld ---------- */
.wp-block-post-template.mh-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 1000px) { .wp-block-post-template.mh-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { .wp-block-post-template.mh-grid-3 { grid-template-columns: 1fr !important; } }
.mh-card { border-bottom: 6px solid var(--mh-yellow); }
.mh-card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--mh-blue); }

/* ---------- Wervingsbanner met grote leeuw ---------- */
.mh-cta { position: relative; overflow: hidden; }
.mh-cta > *:not(.mh-cta__lion) { position: relative; z-index: 1; }
.mh-cta__lion { position: absolute; right: -30px; top: -40px; height: 150%; width: auto; --lm: #E6BD00; --la: #E6BD00; pointer-events: none; }
.mh-cta .mh-section-title { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 900; }

/* ---------- Footer-logo ---------- */
.mh-footer { --lm: var(--mh-yellow); --la: #FFFFFF; }
.mh-footer-logo { display: block; height: 64px; width: auto; margin-bottom: 16px; }

@media (prefers-reduced-motion: reduce) {
	.mh-band__track { animation: none; }
	.mh-band { overflow-x: auto; }
	.mh-menu__list li { opacity: 1; transform: none; }
}


/* ---------- 0.4.1 ---------- */
/* Vaste header: de wrapper van het template-deel plakt, niet de header zelf
   (die zit in een eigen div en kan daarbinnen niet meeschuiven). */
.wp-site-blocks > .wp-block-template-part:has(.mh-hdr),
.wp-site-blocks > div:has(> .mh-hdr) { position: sticky; top: 0; z-index: 50; }
body.admin-bar .wp-site-blocks > :has(> .mh-hdr) { top: 32px; }
@media (max-width: 782px) { body.admin-bar .wp-site-blocks > :has(> .mh-hdr) { top: 46px; } }

/* Kaarten: één categorie boven de titel, geen kommalijst */
.wp-block-post-terms.mh-eyebrow { display: block; }
.mh-card .wp-block-post-terms.mh-eyebrow a:not(:first-of-type),
.mh-card .wp-block-post-terms.mh-eyebrow .wp-block-post-terms__separator { display: none; }
.wp-block-post-terms.mh-eyebrow .wp-block-post-terms__separator { color: var(--wp--preset--color--line-strong); }

/* Kaart zonder foto: gipsvlak met leeuw */
.mh-no-image { margin: 0; display: grid; place-items: center; background: var(--wp--preset--color--plaster); }
.mh-no-image__lion { height: 62%; width: auto; --lm: #D6CCB8; --la: #D6CCB8; }

/* Dienstrooster: titel boven de tabel */
.wp-block-table.is-style-mh-rooster { display: flex; flex-direction: column; }
.wp-block-table.is-style-mh-rooster figcaption { order: -1; margin: 0 0 12px; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .04em; }
.wp-block-table.is-style-mh-rooster td { padding-block: 8px; }

/* =====================================================================
   0.5.0 — Pagina-onderdelen: stappen, genres, feiten, info-tabel, formulier
   ===================================================================== */
/* Pagina-intro */
.mh-page-lead { font-size: var(--wp--preset--font-size--lead); line-height: 1.5; max-width: 38em; }

/* Stappen (een echte volgorde: kijken, aanmelden, lid worden) */
.mh-steps { counter-reset: mh-step; gap: 24px !important; }
.mh-steps > .wp-block-column { counter-increment: mh-step; background: var(--wp--preset--color--surface); padding: 24px; border-top: 6px solid var(--mh-blue); }
.mh-steps > .wp-block-column::before { content: counter(mh-step); display: block; margin-bottom: 12px; font: 900 3rem/1 var(--wp--preset--font-family--display); color: var(--mh-blue); }
.mh-steps h3 { margin: 0 0 8px; text-transform: uppercase; font-size: 1.125rem; letter-spacing: .03em; }
.mh-steps p { margin: 0; font-size: 1rem; line-height: 1.55; }

/* Wat we spelen */
.mh-genres { gap: 24px !important; }
.mh-genres > .wp-block-column { background: var(--wp--preset--color--surface); padding: 24px; border-bottom: 6px solid var(--mh-yellow); display: flex; flex-direction: column; gap: 10px; }
.mh-genres h3 { margin: 0; text-transform: uppercase; font-size: 1.25rem; letter-spacing: .02em; color: var(--mh-blue); }
.mh-genres p { margin: 0; font-size: 1rem; line-height: 1.55; }
.mh-genres p:last-child { margin-top: auto; padding-top: 6px; }
.mh-genres p:last-child a { font: 700 0.8125rem/1.4 var(--wp--preset--font-family--display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.mh-genres p:last-child a:hover { text-decoration: underline; }

/* Feiten in grote cijfers (vaste waarden op een pagina) */
.mh-facts { gap: 24px !important; }
.mh-facts > .wp-block-column { border-top: 6px solid var(--mh-blue); padding-top: 12px; }
.mh-facts .mh-fact-num { margin: 0; font: 900 clamp(2.5rem, 5vw, 3.75rem)/1 var(--wp--preset--font-family--display); font-stretch: 90%; color: var(--mh-blue); }
.mh-facts .mh-fact-label { margin: 6px 0 0; font: 500 0.875rem/1.4 var(--wp--preset--font-family--mono); color: var(--wp--preset--color--ink-muted); }

/* Info-tabel (tijden, prijzen, bestuur): zelfde stijl als het rooster, op licht */
.wp-block-table.is-style-mh-rooster:not(.mh-footer *) table { background: var(--wp--preset--color--surface); }

/* Adresblok */
.mh-address { background: var(--mh-blue); color: #FFFFFF; padding: 28px; }
.mh-address * { color: #FFFFFF; }
.mh-address p { margin: 0 0 6px; }
.mh-address .mh-address__big { font: 800 1.5rem/1.2 var(--wp--preset--font-family--display); text-transform: uppercase; }
.mh-address a { color: var(--mh-yellow); }

/* Formulier */
.mh-form { background: var(--wp--preset--color--surface); padding: clamp(20px, 4vw, 36px); border-top: 6px solid var(--mh-yellow); }
.mh-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 12px; }
.mh-form__field { display: grid; gap: 6px; min-width: 0; }
.mh-form__field--wide { grid-column: 1 / -1; }
.mh-form__field > span { font: 700 0.8125rem/1 var(--wp--preset--font-family--display); letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--ink-muted); }
.mh-form input, .mh-form select, .mh-form textarea { font: inherit; font-size: 1rem; width: 100%; box-sizing: border-box; padding: 12px; border: 2px solid var(--wp--preset--color--line-strong); border-radius: 2px; background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
.mh-form input:focus-visible, .mh-form select:focus-visible, .mh-form textarea:focus-visible { outline: 2px solid transparent; border-color: var(--mh-blue); box-shadow: 0 0 0 3px #C9D2FF; }
.mh-form__note { font: 500 0.8125rem/1.5 var(--wp--preset--font-family--mono); color: var(--wp--preset--color--ink-muted); margin: 0 0 16px; }
.mh-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mh-form__ok { border-left: 0; }
.mh-form__title { font: 800 1.5rem/1.2 var(--wp--preset--font-family--display); text-transform: uppercase; color: var(--mh-blue); margin: 0 0 8px; }
.mh-form__error { background: var(--wp--preset--color--yellow-soft); padding: 12px 16px; margin: 0 0 16px; }
@media (max-width: 640px) { .mh-form__grid { grid-template-columns: 1fr; } }

/* ---------- 0.5.2: pagina-blokken breed, vaste aantallen per rij ---------- */
.wp-block-columns.mh-genres,
.wp-block-columns.mh-steps,
.wp-block-columns.mh-facts {
	display: grid !important; gap: 24px !important;
	/* Breekt uit de tekstkolom naar de brede maat, ongeacht de omliggende layout */
	width: min(var(--wp--style--global--wide-size, 1200px), calc(100vw - 48px)) !important; max-width: none !important;
	margin-left: 50% !important; margin-right: 0 !important; transform: translateX(-50%);
}
.wp-block-columns.mh-steps, .wp-block-columns.mh-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wp-block-columns.mh-genres { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) {
	.wp-block-columns.mh-genres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.wp-block-columns.mh-genres, .wp-block-columns.mh-steps, .wp-block-columns.mh-facts { grid-template-columns: 1fr; }
}
.wp-block-columns.mh-genres > .wp-block-column,
.wp-block-columns.mh-steps > .wp-block-column,
.wp-block-columns.mh-facts > .wp-block-column { flex-basis: auto !important; width: auto; min-width: 0; margin: 0 !important; }
.mh-genres h3, .mh-steps h3 { hyphens: manual; overflow-wrap: normal; word-break: normal; }
/* Informatietabellen op pagina's: geen bijschrift, één lettertype per kolomsoort */
.mh-info-table figcaption { display: none; }
.mh-info-table { margin-top: 0; }
.mh-section-title { font-size: var(--wp--preset--font-size--h2); }
h3.wp-block-heading { font-stretch: 87.5%; }

/* ---------- 0.5.3: meer lucht boven sectiekoppen en tabellen (pagina-inhoud) ---------- */
.wp-block-post-content > .mh-section-title,
.wp-block-post-content > h2.wp-block-heading { margin-top: clamp(64px, 8vw, 104px) !important; margin-bottom: 24px !important; }
.wp-block-post-content > .mh-section-title:first-child,
.wp-block-post-content > h2.wp-block-heading:first-child { margin-top: 0 !important; }
.wp-block-post-content > .wp-block-table,
.wp-block-post-content .mh-info-table { margin-top: 32px !important; margin-bottom: 40px !important; }
.wp-block-post-content > .mh-section-title + .wp-block-table,
.wp-block-post-content > h2.wp-block-heading + .wp-block-table { margin-top: 32px !important; }
.wp-block-post-content > .wp-block-columns.mh-genres,
.wp-block-post-content > .wp-block-columns.mh-steps,
.wp-block-post-content > .wp-block-columns.mh-facts { margin-top: 32px !important; margin-bottom: 24px !important; }

/* ---------- 0.6.0: intro-video over de homepage ---------- */
html.mh-intro-open, html.mh-intro-open body { overflow: hidden; }
.mh-intro {
  position: fixed; inset: 0; z-index: 100000;
  background: var(--wp--preset--color--paper, #F7F6F2);
  display: grid; place-items: center;
  opacity: 1; transition: opacity .45s ease;
}
.mh-intro.is-closing { opacity: 0; pointer-events: none; }
.mh-intro__stage { width: 100%; height: 100%; display: grid; place-items: center; padding: 64px 16px 96px; box-sizing: border-box; }
.mh-intro__video {
  position: relative; aspect-ratio: 16 / 9;
  width: min(100%, calc((100vh - 160px) * 16 / 9)); width: min(100%, calc((100dvh - 160px) * 16 / 9));
  opacity: 0; transition: opacity .35s ease;
}
.mh-intro.is-playing .mh-intro__video, .mh-intro.is-ended .mh-intro__video { opacity: 1; }
.mh-intro__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.mh-intro__shield { position: absolute; inset: 0; } /* geen klikken op de video: niet pauzeren of spoelen */

.mh-intro button { font-family: var(--wp--preset--font-family--display); cursor: pointer; }
.mh-intro button:focus-visible { outline: 3px solid var(--wp--preset--color--heroes-yellow); outline-offset: 3px; }
.mh-intro svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.mh-intro__close {
  position: absolute; top: 16px; right: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0; padding: 10px 12px;
  color: var(--wp--preset--color--ink); font-weight: 800; font-size: .875rem; text-transform: uppercase; letter-spacing: .04em;
}
.mh-intro__close:hover { color: var(--wp--preset--color--heroes-blue); }

.mh-intro__sound { position: absolute; left: 16px; bottom: 20px; display: flex; align-items: center; gap: 14px; }
.mh-intro__mute {
  width: 52px; height: 52px; display: grid; place-items: center; border: 0; padding: 0;
  background: var(--wp--preset--color--heroes-blue); color: #fff; transition: transform .15s ease, box-shadow .15s ease;
}
.mh-intro__mute:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--wp--preset--color--ink); }
.mh-intro__icon-on { display: none; }
.mh-intro.is-sound-on .mh-intro__icon-on { display: block; }
.mh-intro.is-sound-on .mh-intro__icon-off { display: none; }
.mh-intro__tip {
  position: relative; margin: 0; padding: 8px 12px;
  background: var(--wp--preset--color--heroes-yellow); color: var(--wp--preset--color--on-yellow);
  font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: .875rem; text-transform: uppercase; letter-spacing: .03em;
  animation: mh-tip 1.6s ease-in-out infinite;
}
.mh-intro__tip::before { content: ""; position: absolute; left: -8px; top: 50%; margin-top: -8px; border: 8px solid transparent; border-left: 0; border-right-color: var(--wp--preset--color--heroes-yellow); }
.mh-intro.is-sound-on .mh-intro__tip { display: none; }
@keyframes mh-tip { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }

.mh-intro__end { position: absolute; left: 0; right: 0; bottom: 24px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 0 16px; }
.mh-intro__end[hidden] { display: none; }
.mh-intro__end .wp-element-button { min-width: 180px; }
.mh-intro__again { background: transparent !important; color: var(--wp--preset--color--heroes-blue) !important; box-shadow: inset 0 0 0 2px var(--wp--preset--color--heroes-blue); }
.mh-intro.is-ended .mh-intro__sound { display: none; }
.mh-intro.is-ended .mh-intro__end { animation: mh-end-in .3s ease both; }
@keyframes mh-end-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
  .mh-intro__stage { padding: 64px 12px 150px; }
  .mh-intro__end { bottom: 20px; }
  .mh-intro__end .wp-element-button { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mh-intro, .mh-intro__video { transition: none; }
  .mh-intro__tip, .mh-intro.is-ended .mh-intro__end { animation: none; }
}
.mh-intro .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.mh-intro:focus { outline: none; }

/* ---------- 0.6.1: homepage-leeuw met dobbelsteen ---------- */
.mh-hero-leeuw { width: 100%; max-width: 520px; margin-inline: auto; aspect-ratio: 1; }
.mh-hero-leeuw__video {
  display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  /* randen van het filmpje zacht laten overlopen in de papierkleur */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}
@media (max-width: 781px) { .mh-hero-leeuw { max-width: 260px; margin-inline: 0; } }