/**
 * BNI Land van Aalst — digitale ledengids.
 * Handgeschreven klassieke CSS (geen build). Design-tokens uit de handoff.
 */

:root {
	--red: #C8102E;
	--red-dark: #a60d26;
	--white: #FFFFFF;
	--tint: #F6F5F2;
	--roze: #FBEEF0;
	--roze-border: #F3D7DC;
	--dark: #1A1714;
	--text: #3A352E;
	--text-body: #544E45;
	--muted: #7A736A;
	--muted-2: #A39B90;
	--b1: #E9E4DB;
	--b2: #E5E0D8;
	--b3: #E2DCD2;
	--b4: #ECE7DF;

	--container: 1200px;
	--radius: 16px;
	--radius-lg: 18px;
	--shadow-hover: 0 14px 34px -16px rgba(200, 16, 46, 0.32);

	--font-head: "Schibsted Grotesk", system-ui, sans-serif;
	--font-body: "Hanken Grotesk", system-ui, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--text-body);
	background: var(--white);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--text); margin: 0; line-height: 1.15; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

.site-main { min-height: 40vh; }
.text-red { color: var(--red); }
.eyebrow {
	font-family: var(--font-head);
	font-size: 12px; font-weight: 600; text-transform: uppercase;
	letter-spacing: .14em; color: var(--red); margin-bottom: 14px;
}
.label {
	display: block; font-family: var(--font-head);
	font-size: 12px; font-weight: 600; text-transform: uppercase;
	letter-spacing: .12em; color: var(--red); margin-bottom: 6px;
}
.rating { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.rating::first-letter { color: #f59e0b; }
.rating--lg { font-size: 15px; margin-top: 12px; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-block; font-family: var(--font-head); font-weight: 500;
	font-size: 14px; padding: 11px 20px; border-radius: 999px;
	border: 1px solid transparent; cursor: pointer; transition: .15s;
}
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-dark); }
.btn--outline { background: #fff; color: var(--text); border-color: var(--b2); }
.btn--outline:hover { border-color: var(--red); color: var(--red); }
.btn--white { background: #fff; color: var(--red); white-space: nowrap; }
.btn--white:hover { background: var(--roze); }

/* ---------- Nav ---------- */
.nav {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--b4);
}
.nav__inner {
	max-width: var(--container); margin: 0 auto; height: 64px; padding: 0 32px;
	/* Drie kolommen met gelijke buitenkolommen -> het menu staat écht centraal,
	   ongeacht de breedte van logo of CTA-knop. */
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
}
.nav__logo { justify-self: start; }
.nav__links { justify-self: center; }
.nav__actions { justify-self: end; }
.nav__logo { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text); }
.nav__logo--img { line-height: 0; }
.nav__logo--img .custom-logo-link { display: block; }
.nav__logo--img .custom-logo { height: var(--logo-height, 46px); width: auto; display: block; }
.nav__logo strong { font-weight: 700; }
.nav__badge {
	width: 26px; height: 26px; border-radius: 7px; background: var(--red); color: #fff;
	display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 14px;
}
.nav__links { display: flex; gap: 26px; font-size: 14px; }
.nav__links a { color: var(--text-body); padding: 4px 0; border-bottom: 2px solid transparent; }
.nav__links a:hover { color: var(--red); }
.nav__actions { display: flex; align-items: center; gap: 12px; }
.nav__cta { padding: 8px 16px; }

/* Hamburger (verborgen op desktop) */
.nav__toggle {
	display: none; width: 42px; height: 42px; padding: 0; cursor: pointer;
	background: #fff; border: 1px solid var(--b3); border-radius: 11px; position: relative;
}
.nav__toggle span {
	position: absolute; left: 50%; width: 18px; height: 2px; background: var(--text);
	border-radius: 2px; transform: translateX(-50%); transition: transform .22s ease, opacity .22s ease, top .22s ease;
}
.nav__toggle span:nth-child(1) { top: 14px; }
.nav__toggle span:nth-child(2) { top: 20px; }
.nav__toggle span:nth-child(3) { top: 26px; }
.nav.is-open .nav__toggle span:nth-child(1) { top: 20px; transform: translateX(-50%) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { top: 20px; transform: translateX(-50%) rotate(-45deg); }

/* Mobiel menu-paneel (verborgen op desktop) */
.mobile-menu {
	display: none; position: absolute; top: 64px; left: 0; right: 0; z-index: 49;
	background: #fff; border-bottom: 1px solid var(--b4);
	box-shadow: 0 16px 34px -20px rgba(0, 0, 0, 0.28);
	overflow: hidden; max-height: 0; opacity: 0; visibility: hidden;
	transition: max-height .32s ease, opacity .24s ease, visibility .32s;
}
.nav.is-open .mobile-menu { max-height: 420px; opacity: 1; visibility: visible; }
.mobile-menu__links { display: flex; flex-direction: column; padding: 10px 20px 22px; }
.mobile-menu__links a:not(.btn) {
	font-family: var(--font-head); font-size: 16px; color: var(--text);
	padding: 14px 4px; border-bottom: 1px solid var(--b4);
}
.mobile-menu__links a:not(.btn):hover { color: var(--red); }
.mobile-menu__cta { margin-top: 16px; text-align: center; }

/* ---------- Intro ---------- */
.intro { background: #fff; }
.intro__inner { max-width: var(--container); margin: 0 auto; padding: 64px 32px 56px; }
.intro__title { font-size: 52px; font-weight: 700; letter-spacing: -0.02em; }
.intro__lead { max-width: 620px; font-size: 17px; color: var(--muted); margin: 20px 0 0; }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.choice-card {
	position: relative; background: #fff; border: 1px solid var(--b2);
	border-radius: var(--radius); padding: 24px 26px; transition: .15s;
}
.choice-card:hover { border-color: var(--red); box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.choice-card__title { font-family: var(--font-head); font-weight: 600; font-size: 19px; color: var(--text); }
.choice-card__sub { font-size: 14px; color: var(--muted); margin-top: 4px; }
.choice-card__arrow { position: absolute; right: 24px; bottom: 22px; color: var(--red); font-size: 20px; }

/* ---------- Directory ---------- */
.directory { background: var(--tint); border-top: 1px solid var(--b4); }
.directory__inner { max-width: var(--container); margin: 0 auto; padding: 40px 32px 72px; }

.filterbar {
	position: sticky; top: 64px; z-index: 20;
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	padding: 14px 0; background: var(--tint);
}
.chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.chip {
	font-family: var(--font-body); font-size: 13px; cursor: pointer;
	background: #fff; border: 1px solid var(--b3); color: var(--text-body);
	border-radius: 999px; padding: 7px 14px; transition: .15s;
}
.chip:hover { border-color: var(--red); color: var(--red); }
.chip.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.search {
	width: 260px; max-width: 100%; font-family: var(--font-body); font-size: 14px;
	background: #fff; border: 1px solid var(--b3); border-radius: 10px; padding: 9px 14px; color: var(--text);
}
.search:focus { outline: none; border-color: var(--red); }

.result-count { font-size: 13px; color: var(--muted); margin: 4px 0 18px; }
.no-results { font-size: 15px; color: var(--muted); padding: 24px 0; }

.leden-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(282px, 1fr)); gap: 18px; }
.lid-card[hidden] { display: none; } /* overschrijft display:flex zodat filteren verbergt */

/* ---------- Lid-kaart ---------- */
.lid-card {
	display: flex; flex-direction: column; gap: 15px;
	background: #fff; border: 1px solid var(--b1); border-radius: var(--radius);
	padding: 22px; transition: .15s;
}
.lid-card:hover { border-color: var(--red); box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.lid-card__head { display: flex; align-items: center; justify-content: space-between; }
.lid-card__num { font-family: var(--font-head); font-weight: 600; color: var(--red); font-size: 14px; }
.pill {
	font-size: 11.5px; color: var(--muted); background: #fff;
	border: 1px solid var(--b3); border-radius: 999px; padding: 3px 10px;
}
.lid-card__top { display: flex; align-items: center; gap: 12px; }
.avatar {
	width: 48px; height: 48px; border-radius: 13px; background: var(--roze);
	color: var(--red); display: grid; place-items: center; flex-shrink: 0;
	font-family: var(--font-head); font-weight: 600; font-size: 15px; overflow: hidden;
}
.avatar--img { padding: 0; }
.avatar--img, .avatar img {
	object-fit: cover; width: 48px; height: 48px;
	/* Iets hoger uitsnijden zodat hoofden niet afgekapt worden. */
	object-position: 50% 20%;
}
.lid-card__name { font-family: var(--font-head); font-weight: 600; font-size: 18px; color: var(--text); }
.lid-card__bedrijf { color: var(--red); font-weight: 500; font-size: 13.5px; }
.lid-card__quote { font-size: 15.5px; color: var(--text-body); margin: 0; font-style: italic; }
.lid-card__foot {
	display: flex; align-items: center; justify-content: space-between;
	border-top: 1px solid var(--b1); padding-top: 14px; margin-top: auto;
}
.lid-card__more { font-family: var(--font-head); font-weight: 500; font-size: 13.5px; color: var(--red); }

/* ---------- Lid-detail ---------- */
.lid-detail { max-width: var(--container); margin: 0 auto; padding: 32px 32px 72px; }
.breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 28px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb__sep { margin: 0 8px; }
.breadcrumb__current { color: var(--red); }

.lid-detail__grid { display: grid; grid-template-columns: 340px 1fr; gap: 56px; }
.lid-detail__aside { position: sticky; top: 92px; align-self: start; }
.portret {
	aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden;
	background: repeating-linear-gradient(45deg, #f3eee7, #f3eee7 10px, #efe9e1 10px, #efe9e1 20px);
	display: grid; place-items: center;
}
.portret img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.portret__label { font-family: var(--font-head); font-size: 12px; letter-spacing: .18em; color: var(--muted-2); }
.lid-logo-box { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--b1); border-radius: 14px; padding: 22px 24px; margin-top: 18px; min-height: 168px; }
.lid-logo { max-height: 140px; max-width: 100%; width: auto; height: auto; display: block; }
.lid-detail__name { font-size: 30px; font-weight: 700; margin-top: 20px; }
.lid-detail__bedrijf { color: var(--red); font-weight: 600; font-size: 16px; margin-top: 4px; }
.lid-detail__rol { color: var(--muted); font-size: 14px; }
.contact { border-top: 1px solid var(--b1); margin-top: 20px; padding-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.contact__row { font-size: 14px; color: var(--text-body); }
a.contact__row:hover { color: var(--red); }
.lid-detail__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.lid-detail__quote { font-family: var(--font-head); font-weight: 500; font-size: 30px; letter-spacing: -0.02em; color: var(--text); margin: 0 0 24px; }
.kernwoorden { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.kw { font-size: 14px; color: var(--text); border: 1px solid var(--b1); border-radius: 999px; padding: 8px 16px; }
.kw__check { color: var(--red); font-weight: 700; }
.services { border-left: 3px solid var(--red); padding-left: 14px; color: var(--text-body); font-size: 16px; margin: 0 0 28px; }
.block-txt { margin-bottom: 24px; }
.block-txt p { font-size: 16.5px; line-height: 1.62; color: var(--text-body); margin: 0; }

.lead { background: var(--roze); border: 1px solid var(--roze-border); border-radius: var(--radius-lg); padding: 28px; margin-top: 36px; }
.lead__title { font-size: 21px; font-weight: 600; margin-bottom: 18px; }
.lead__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lead__form input, .lead__form textarea {
	width: 100%; font-family: var(--font-body); font-size: 14px; background: #fff;
	border: 1px solid var(--roze-border); border-radius: 10px; padding: 11px 14px; margin-bottom: 12px; color: var(--text);
}
.lead__form input:focus, .lead__form textarea:focus { outline: none; border-color: var(--red); }
.lead__hint { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }

/* ---------- Events ---------- */
.events__inner { max-width: var(--container); margin: 0 auto; padding: 56px 32px 72px; }
.events__title { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
.events__lead { color: var(--muted); font-size: 17px; margin: 16px 0 36px; max-width: 620px; }

.event-featured {
	background: var(--red); color: #fff; border-radius: 20px; padding: 32px;
	display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; margin-bottom: 28px;
}
.event-featured__date { text-align: center; }
.event-featured__day { display: block; font-family: var(--font-head); font-weight: 700; font-size: 46px; line-height: 1; }
.event-featured__month { font-size: 13px; color: rgba(255,255,255,.85); text-transform: uppercase; letter-spacing: .08em; }
.event-featured__title { font-size: 24px; font-weight: 600; margin: 10px 0 6px; color: #fff; }
.event-featured__meta { font-size: 14px; color: rgba(255,255,255,.9); margin: 0; }
.event-featured__desc { font-size: 14px; color: rgba(255,255,255,.85); margin: 8px 0 0; }

.event-list { display: flex; flex-direction: column; gap: 14px; }
.event-row {
	background: #fff; border: 1px solid var(--b1); border-radius: var(--radius);
	padding: 20px 22px; display: grid; grid-template-columns: 64px 1fr auto; gap: 20px; align-items: center;
}
.event-row__date { text-align: center; }
.event-row__day { display: block; font-family: var(--font-head); font-weight: 700; font-size: 28px; color: var(--text); line-height: 1; }
.event-row__month { font-size: 12px; color: var(--red); text-transform: uppercase; letter-spacing: .06em; }
.event-row__title { font-size: 17px; font-weight: 600; margin: 0 0 3px; }
.event-row__meta { font-size: 13px; color: var(--muted); margin: 0; }
.event-row__desc { font-size: 13.5px; color: var(--text-body); margin: 6px 0 0; }

.event-badge { align-self: start; font-size: 11.5px; font-weight: 500; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.event-badge--bezoek { background: var(--roze); color: var(--red); }
.event-badge--extern { background: #EAF3EC; color: #2E7D32; }
.event-badge--training { background: #EAF0F6; color: #2A5C9A; }
.event-badge--netwerk { background: #F6F0E6; color: #9A6B2A; }

/* ---------- Event-detail ---------- */
.event-detail { max-width: var(--container); margin: 0 auto; padding: 32px 32px 72px; }
.event-detail__grid { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }
.event-detail__title { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 24px; }
.event-facts { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.event-facts li { font-size: 16px; color: var(--text); }
.event-detail__desc { font-size: 16.5px; line-height: 1.62; color: var(--text-body); }
.event-detail__form .lead { margin-top: 0; }

/* ---------- Word lid ---------- */
.wordlid__inner { max-width: var(--container); margin: 0 auto; padding: 56px 32px 72px; }
.wordlid__title { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
.wordlid__intro { color: var(--muted); font-size: 17px; margin: 16px 0 28px; }
.wordlid .lead { background: #fff; border-color: var(--b2); }

/* ---------- Plan je bezoek (landing) ---------- */
.visit__inner { max-width: var(--container); margin: 0 auto; padding: 64px 32px 72px; text-align: center; }
.visit .eyebrow { display: block; }
.visit__title { font-size: 44px; font-weight: 700; letter-spacing: -0.02em; }
.visit__intro { max-width: 620px; margin: 18px auto 0; font-size: 17px; color: var(--muted); }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 40px 0; }
.stat-card { background: var(--tint); border: 1px solid var(--b4); border-radius: var(--radius); padding: 24px 16px; }
.stat-card__num { display: block; font-family: var(--font-head); font-weight: 700; font-size: 36px; color: var(--text); line-height: 1; }
.stat-card__lbl { display: block; font-size: 13px; color: var(--muted); margin-top: 8px; }
.visit__next { background: var(--dark); color: #fff; border-radius: 20px; padding: 32px; margin: 8px 0 32px; }
.visit__next-label { font-family: var(--font-head); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.6); }
.visit__next-title { font-family: var(--font-head); font-weight: 600; font-size: 24px; margin: 10px 0 6px; }
.visit__next-meta { font-size: 14px; color: rgba(255,255,255,.8); margin-bottom: 20px; }
.visit__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Gravity Forms in onze kaders ---------- */
.gf-missing { font-size: 14px; color: var(--muted); }
.lead .gform_wrapper, .wordlid .gform_wrapper { margin: 0; }
.lead .gfield_label, .wordlid .gfield_label { font-family: var(--font-head); font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.lead .ginput_container input, .lead .ginput_container textarea, .lead .ginput_container select,
.wordlid .ginput_container input, .wordlid .ginput_container textarea, .wordlid .ginput_container select {
	width: 100%; font-family: var(--font-body); font-size: 14px; background: #fff;
	border: 1px solid var(--roze-border); border-radius: 10px; padding: 11px 14px; color: var(--text);
}
.wordlid .ginput_container input, .wordlid .ginput_container textarea, .wordlid .ginput_container select { border-color: var(--b2); }
.lead .ginput_container input:focus, .lead .ginput_container textarea:focus, .lead .ginput_container select:focus,
.wordlid .ginput_container input:focus, .wordlid .ginput_container textarea:focus, .wordlid .ginput_container select:focus { outline: none; border-color: var(--red); }
.lead .gform_button, .wordlid .gform_button {
	font-family: var(--font-head); font-weight: 500; font-size: 14px; cursor: pointer;
	background: var(--red); color: #fff; border: none; border-radius: 999px; padding: 12px 22px;
}
.lead .gform_button:hover, .wordlid .gform_button:hover { background: var(--red-dark); }

/* ---------- Footer ---------- */
.footer { background: #fff; border-top: 1px solid var(--b4); }
.footer__inner {
	max-width: var(--container); margin: 0 auto; padding: 24px 32px;
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.footer__meta { font-size: 13px; color: var(--muted); display: grid; gap: 3px; }
.footer__loc strong { color: var(--text-body); font-weight: 600; }
.footer__socials { display: flex; align-items: center; gap: 8px; }
.footer__social {
	width: 34px; height: 34px; border-radius: 50%;
	display: grid; place-items: center; color: var(--muted);
	border: 1px solid var(--b2); background: #fff;
	transition: color .15s ease, border-color .15s ease;
}
.footer__social:hover { color: var(--red); border-color: var(--red); }
.footer__social svg { width: 15px; height: 15px; fill: currentColor; }
.footer__powered { font-size: 13px; color: var(--muted); }
.footer__powered a { color: var(--red); font-weight: 500; }
.footer__powered a:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
	.nav__links { display: none; }
	.nav__toggle { display: block; }
	.mobile-menu { display: block; }
	.intro__title { font-size: 40px; }
	.events__title { font-size: 32px; }
	.choice-grid { grid-template-columns: 1fr; }
	.lid-detail__grid { grid-template-columns: 1fr; gap: 32px; }
	.lid-detail__aside { position: static; }
	.event-detail__grid { grid-template-columns: 1fr; gap: 32px; }
	.event-detail__title { font-size: 28px; }
	.event-featured { grid-template-columns: 1fr; text-align: left; gap: 16px; }
	.event-row { grid-template-columns: 56px 1fr; }
	.event-row .event-badge { grid-column: 2; }
}

@media (max-width: 560px) {
	.nav__inner, .intro__inner, .directory__inner, .lid-detail, .events__inner, .footer__inner { padding-left: 20px; padding-right: 20px; }
	.intro__title { font-size: 34px; }
	.lead__row { grid-template-columns: 1fr; }
	.nav__cta { padding: 7px 12px; font-size: 13px; }
	.nav__logo { font-size: 14px; gap: 8px; }
	.nav__logo .nav__badge { width: 24px; height: 24px; }
	.nav__logo--img .custom-logo { height: min(var(--logo-height, 46px), 40px); }
	.visit__title { font-size: 32px; }
	.stat-grid { grid-template-columns: 1fr; }
}

/* ---------- Lid: tabs (Lid info / Reviews) ---------- */
.lid-tabs {
	display: flex; gap: 4px; margin: 0 0 24px;
	border-bottom: 1px solid var(--b4);
}
.lid-tab {
	appearance: none; background: none; border: 0; cursor: pointer;
	font: inherit; font-weight: 600; color: var(--muted);
	padding: 10px 14px; margin-bottom: -1px;
	border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0;
	display: inline-flex; align-items: center; gap: 8px;
	transition: color .15s ease, border-color .15s ease;
}
.lid-tab:hover { color: var(--red); }
.lid-tab.is-active { color: var(--red); border-bottom-color: var(--red); }
.lid-tab:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.lid-tab__count {
	font-size: 12px; font-weight: 600; line-height: 1;
	background: var(--red); color: #fff; border-radius: 999px; padding: 3px 7px;
}
.lid-panel[hidden] { display: none; }

/* ---------- Lid: reviews ---------- */
.reviews { display: flex; flex-direction: column; gap: 16px; }
.review {
	border: 1px solid var(--b4); border-radius: 12px;
	padding: 18px 20px; background: #fff;
}
.review__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
.review__author { font-weight: 600; }
.review__company { color: var(--muted); font-weight: 400; }
.review__stars { color: #f5a623; letter-spacing: 2px; white-space: nowrap; }
.review__body { margin: 4px 0 8px; line-height: 1.6; }
.review__body br + br { content: ""; display: block; margin-top: 10px; }
.review__date { font-size: 13px; color: var(--muted); }
.reviews-empty {
	border: 1px dashed var(--b4); border-radius: 12px;
	padding: 40px 24px; text-align: center; color: var(--muted);
}
.reviews-empty__title { font-weight: 600; color: var(--ink, #1a1a1a); margin-bottom: 4px; }
.reviews-empty__hint { font-size: 14px; }

/* ---------- Homepage hero: foto rechts, zwart links ---------- */
.home-hero {
	position: relative; isolation: isolate;
	/* Navhoogte = 64px inhoud + 1px onderrand. Exact zoveel omhoog trekken,
	   anders blijft er bovenaan een streepje paginakleur zichtbaar. */
	margin-top: calc(-1 * (64px + 1px)); padding-top: calc(64px + 1px);
	background: #080706; min-height: 640px;
	display: flex; align-items: center;
}
.home-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #080706; }
.home-hero__media img {
	position: absolute; top: 0; right: 0; height: 100%; width: 80%;
	object-fit: cover; object-position: 72% 50%;
}
.home-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(90deg,
			#080706 0%, #080706 19%,
			rgba(8,7,6,.94) 26%, rgba(8,7,6,.70) 38%,
			rgba(8,7,6,.34) 54%, rgba(8,7,6,.14) 74%, rgba(8,7,6,.28) 100%),
		linear-gradient(180deg, rgba(8,7,6,.60) 0%, rgba(8,7,6,0) 28%, rgba(8,7,6,.38) 100%);
}
.home-hero__inner { position: relative; width: 100%; max-width: var(--container); margin: 0 auto; padding: 104px 32px 80px; }
.eyebrow--light { color: #fff; opacity: .9; }
.home-hero__title {
	font-size: clamp(38px, 5.6vw, 64px); font-weight: 700; letter-spacing: -0.02em;
	color: #fff; max-width: 16ch; text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.home-hero__title .text-red { color: #ff2d4b; display: block; }
.home-hero__lead {
	max-width: 480px; font-size: 18px; line-height: 1.55;
	color: rgba(255,255,255,.9); margin: 22px 0 0; text-shadow: 0 1px 14px rgba(0,0,0,.5);
}
.home-hero .choice-grid { max-width: 780px; }

/* Nav transparant boven de hero (met wit beeldlogo), wit zodra je scrollt */
.nav__logo-white { display: none; }
body.home .nav { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
body.home .nav .nav__links a, body.home .nav .nav__logo { color: #fff; }
body.home .nav .nav__toggle span { background: #fff; }
body.home .nav:not(.is-scrolled):not(.is-open) .nav__toggle {
	background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.38);
}
body.home .nav:not(.is-scrolled):not(.is-open) .nav__logo--img .custom-logo-link { display: none; }
body.home .nav:not(.is-scrolled):not(.is-open) .nav__logo-white {
	/* Beeldmerk (zonder tekst) oogt zwaarder dan het volledige logo:
	   apart begrensd zodat het binnen de 64px-nav past en niet afkapt. */
	display: block; height: auto; width: auto;
	max-height: min(var(--logo-height, 46px), 44px);
}
body.home .nav.is-scrolled {
	background: rgba(255,255,255,.92); border-bottom-color: var(--b4);
	backdrop-filter: saturate(180%) blur(12px);
}
body.home .nav.is-scrolled .nav__links a, body.home .nav.is-scrolled .nav__logo { color: var(--text-body); }
body.home .nav.is-scrolled .nav__toggle span { background: var(--text); }
body.home .nav.is-open { background: rgba(255,255,255,.98); }
body.home .nav.is-open .nav__links a, body.home .nav.is-open .nav__logo { color: var(--text-body); }
body.home .nav.is-open .nav__toggle span { background: var(--text); }

/* ---------- Homepage: welkomst / over ons ---------- */
.welcome { background: #fff; }
.welcome__inner { max-width: var(--container); margin: 0 auto; padding: 76px 32px 68px; }
.welcome__top { display: grid; grid-template-columns: 1.55fr 1fr; gap: 52px; align-items: start; }
.welcome__statement {
	font-family: var(--font-head); font-size: clamp(21px, 2.3vw, 27px); font-weight: 600;
	line-height: 1.32; color: var(--text); margin: 0 0 18px; text-wrap: balance;
}
.welcome__body { font-size: 17px; line-height: 1.62; color: var(--text-body); margin: 0; max-width: 62ch; }
.welcome__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.fact {
	background: var(--tint); border: 1px solid var(--b4); border-radius: var(--radius);
	padding: 20px 12px; text-align: center;
}
.fact__num { display: block; font-family: var(--font-head); font-weight: 700; font-size: 27px; color: var(--text); line-height: 1; }
.fact__lbl { display: block; font-size: 12px; color: var(--muted); margin-top: 7px; }

.welcome__quote {
	margin: 46px 0; padding: 30px 34px;
	background: var(--roze); border: 1px solid var(--roze-border); border-radius: var(--radius-lg);
	font-family: var(--font-head); font-weight: 600; font-size: clamp(20px, 2.1vw, 26px);
	line-height: 1.34; color: var(--text); text-wrap: balance;
}
.welcome__quote .text-red { display: block; }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pillar {
	background: #fff; border: 1px solid var(--b2); border-radius: var(--radius);
	padding: 24px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pillar:hover { border-color: var(--red); box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.pillar__num { font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--red); }
.pillar__title { font-size: 19px; font-weight: 600; margin: 10px 0 8px; }
.pillar__text { font-size: 15.5px; line-height: 1.6; color: var(--text-body); margin: 0; }

.welcome__outro {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	margin: 52px 0 0; font-family: var(--font-head); font-weight: 600; font-size: 17px; color: var(--text);
}
.welcome__outro-arrow { color: var(--red); font-size: 20px; line-height: 1; }

@media (max-width: 980px) {
	.welcome__top { grid-template-columns: 1fr; gap: 30px; }
	.pillars { grid-template-columns: 1fr; }
	.home-hero__title { max-width: none; }
}
@media (max-width: 880px) {
	.home-hero { min-height: 560px; }
	.home-hero__inner { padding: 88px 20px 56px; }
	.home-hero .choice-grid { grid-template-columns: 1fr; }
	.home-hero__media img { width: 100%; object-position: 64% 50%; }
	.home-hero::after { background: linear-gradient(180deg, rgba(8,7,6,.84) 0%, rgba(8,7,6,.60) 45%, rgba(8,7,6,.88) 100%); }
	.welcome__inner { padding: 52px 20px 52px; }
	.welcome__quote { padding: 24px 22px; }
}

/* ---------- Lid: socials ---------- */
.socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.social {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 13px; font-weight: 500; color: var(--text-body);
	background: #fff; border: 1px solid var(--b2); border-radius: 999px;
	padding: 7px 14px; transition: border-color .15s ease, color .15s ease;
}
.social:hover { border-color: var(--red); color: var(--red); }
.social svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }


/* ---------- Uitgelicht: onderling doorgegeven omzet ---------- */
.omzet {
	display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 30px;
	background: var(--dark); color: #fff;
	border-radius: var(--radius-lg); padding: 30px 34px; margin: 40px 0;
	text-align: left;
}
.omzet__num {
	margin: 0; font-family: var(--font-head); font-weight: 700;
	font-size: clamp(32px, 4.6vw, 54px); line-height: 1;
	letter-spacing: -0.02em; color: #fff; white-space: nowrap;
	/* Cijfers even breed: anders verspringt het getal tijdens het optellen. */
	font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.omzet__cur { font-size: .62em; vertical-align: .12em; margin-right: .12em; color: rgba(255,255,255,.7); }
.omzet__plus { color: #ff6b7f; font-weight: 600; }
.omzet__body { border-left: 1px solid rgba(255,255,255,.16); padding-left: 30px; }
.omzet__label {
	font-family: var(--font-head); font-size: 11.5px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.55);
}
.omzet__txt { margin: 7px 0 0; font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,.82); }

/* ---------- Plan je bezoek: praktische info ---------- */
.visit__action { margin-top: 28px; }
.btn--lg { padding: 14px 26px; font-size: 16px; }
.visit-praktisch {
	display: grid; grid-template-columns: 1.05fr .95fr; gap: 16px;
	margin-top: 34px; align-items: stretch;
}
.visit-info {
	text-align: left; background: var(--tint); border: 1px solid var(--b4);
	border-radius: var(--radius-lg); padding: 26px 28px;
	display: grid; gap: 18px; align-content: start;
}
.visit-map {
	position: relative; overflow: hidden; min-height: 300px;
	border: 1px solid var(--b4); border-radius: var(--radius-lg); background: var(--tint);
}
.visit-map iframe { display: block; width: 100%; height: 100%; min-height: 300px; border: 0; }
.visit-map__cta {
	position: absolute; left: 14px; bottom: 14px;
	display: inline-flex; align-items: center; gap: 6px;
	background: #fff; color: var(--text); border: 1px solid var(--b2);
	border-radius: 999px; padding: 8px 15px;
	font-family: var(--font-head); font-size: 13px; font-weight: 600;
	box-shadow: 0 6px 18px -8px rgba(0,0,0,.35);
	transition: color .15s ease, border-color .15s ease;
}
.visit-map__cta:hover { color: var(--red); border-color: var(--red); }
.routelink {
	display: inline-flex; align-items: center; gap: 5px; margin-top: 9px;
	font-family: var(--font-head); font-size: 13.5px; font-weight: 600; color: var(--red);
}
.routelink:hover { text-decoration: underline; }
.event-facts__next { display: block; font-size: 13.5px; color: var(--muted); }
.event-loc { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--b2); }
.event-featured .event-loc { text-decoration-color: rgba(255,255,255,.4); }
.event-loc:hover { text-decoration-color: currentColor; }
.footer__loc a { color: inherit; }
.footer__loc a:hover strong { color: var(--red); }
.visit-info__row { display: grid; grid-template-columns: 116px 1fr; gap: 16px; align-items: start; }
.visit-info__lbl {
	font-family: var(--font-head); font-size: 12px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .12em; color: var(--red); padding-top: 4px;
}
.visit-info__val { font-size: 16.5px; line-height: 1.5; color: var(--text); }
.visit-info__val strong { font-weight: 600; }
.visit-info__note { display: block; font-size: 14.5px; color: var(--muted); margin-top: 3px; }
.stat-grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 640px) {
	.visit-info__row { grid-template-columns: 1fr; gap: 3px; }
	.visit-praktisch { grid-template-columns: 1fr; }
	.visit-info { padding: 22px 20px; }
	.omzet { grid-template-columns: 1fr; gap: 16px; padding: 26px 22px; }
	.omzet__body { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); padding-left: 0; padding-top: 16px; }
	.stat-grid--2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Mobiele optimalisatie
   Staat bewust achteraan: overschrijft de eerdere media queries.
   ========================================================================== */

@media (max-width: 880px) {

	/* --- Navbalk ---
	   Het menu (.nav__links) is hier verborgen. In het 3-koloms raster schuift
	   .nav__actions dan naar de middelste kolom en wordt het logo tot enkele
	   pixels platgeknepen. Op mobiel dus terug naar flex. */
	.nav__inner {
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
	}
	.nav__logo, .nav__actions { flex: 0 0 auto; }
	.nav__cta { padding: 12px 14px; font-size: 12.5px; line-height: 1.1; }
	.nav__toggle { flex: 0 0 auto; }

	/* --- Filterbalk: zoeken bovenaan, sectoren als veegbare rij --- */
	.filterbar {
		flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 0;
	}
	.search {
		order: -1; width: 100%;
		font-size: 16px;          /* 16px voorkomt dat iOS inzoomt bij focus */
		padding: 12px 15px;
	}
	.chips {
		/* width:100% is hier essentieel. Zonder expliciete breedte rekt dit
		   flexitem mee met zijn inhoud (alle chips samen = ~1024px) en steekt
		   de pagina horizontaal uit; align-items:stretch en min-width:0 zijn
		   niet genoeg. Met een vaste breedte klipt overflow-x en scrollt de rij. */
		flex: 0 0 auto; width: 100%; min-width: 0; flex-wrap: nowrap; overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 8px; padding: 2px 0 6px;
		scrollbar-width: none; -ms-overflow-style: none;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
	}
	.chips::-webkit-scrollbar { display: none; }
	.chip {
		flex: 0 0 auto; white-space: nowrap;
		padding: 11px 16px; font-size: 13.5px;
		scroll-snap-align: start;
	}

	/* --- Tikdoelen op minstens 44px --- */
	.btn { padding: 12px 18px; }
	.nav__cta { padding: 12px 14px; }        /* compact maar wel aantikbaar */
	.social { padding: 11px 16px; }
	.lid-tab { padding: 13px 14px; }
	.contact__row { padding: 5px 0; }
	.breadcrumb a { display: inline-block; padding: 6px 0; }
	.routelink, .visit-map__cta { padding-top: 10px; padding-bottom: 10px; }
	/* Geen min-height op 'Bekijk →' of de keuzekaarten: die zitten al in een
	   link die de volledige kaart beslaat (250px+), dus ruim boven de 44px. */

	/* Kleine icoon- en tekstlinks ruimer maken om aan te tikken */
	.footer__social { width: 40px; height: 40px; }
	.footer__loc a { display: inline-block; padding: 4px 0; }
	.event-row__title a { display: inline-block; padding: 3px 0; }
	.visit-map__cta { padding: 12px 16px; }
	.lid-tab { min-height: 46px; }

	/* --- Leesbaarheid: geen tekst onder 12,5px --- */
	.pill, .fact__lbl, .review__date, .lead__hint,
	.footer__meta, .footer__powered, .result-count { font-size: 12.5px; }
	.omzet__label, .visit-info__lbl, .eyebrow, .label { font-size: 12.5px; }
}

@media (max-width: 560px) {
	/* Hero iets compacter zodat de kaarten sneller in beeld komen */
	.home-hero { min-height: 500px; }
	.home-hero__inner { padding: 76px 20px 44px; }
	.home-hero__lead { font-size: 16.5px; }

	/* Kaarten in de hero naast elkaar te smal -> onder elkaar, compacter */
	.home-hero .choice-card { padding: 18px 20px; }
	.choice-card__arrow { right: 20px; bottom: 18px; }

	/* Ledenpagina: portret niet onnodig hoog op een smal scherm */
	.portret { aspect-ratio: 1 / 1; }
	.lid-detail__quote { font-size: 24px; }
	.lid-detail__name { font-size: 26px; }
}

/* ---------- Losse pagina's (page.php) ---------- */
.page__inner {
	max-width: 640px; margin: 0 auto;
	padding: 88px 32px 96px;
	text-align: center;
}
.page__title { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
.page__content { margin-top: 18px; color: var(--text-body); font-size: 17px; }
.page__content > *:first-child { margin-top: 0; }
.page__content p { margin: 0 0 14px; }
.page__content > p:last-child { margin-bottom: 0; }
.page__content a:not(.btn) { color: var(--red); border-bottom: 1px solid var(--roze-border); }
.page__content a:not(.btn):hover { border-bottom-color: var(--red); }

/* Knoppenrij onder de tekst, bv. op een bedankpagina */
.page__actions {
	display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
	margin-top: 32px;
}

@media (max-width: 720px) {
	.page__inner { padding: 56px 20px 64px; }
	.page__title { font-size: 30px; }
}

/* ---------- Tekstpagina's (template-tekstpagina.php) ---------- */
.textpage__inner { max-width: var(--container); margin: 0 auto; padding: 72px 32px 88px; }
.textpage__title { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
.textpage__meta { margin: 12px 0 0; font-size: 14px; color: var(--muted-2); }
.textpage__content { margin-top: 36px; color: var(--text-body); font-size: 16.5px; }
.textpage__content h2 {
	font-size: 22px; font-weight: 600; color: var(--text);
	margin: 40px 0 12px; padding-top: 28px; border-top: 1px solid var(--b1);
}
.textpage__content h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.textpage__content h3 { font-size: 17px; font-weight: 600; color: var(--text); margin: 26px 0 8px; }
.textpage__content p { margin: 0 0 14px; }
.textpage__content ul { margin: 0 0 16px; padding-left: 22px; }
.textpage__content li { margin-bottom: 7px; }
.textpage__content li::marker { color: var(--red); }
.textpage__content a { color: var(--red); border-bottom: 1px solid var(--roze-border); }
.textpage__content a:hover { border-bottom-color: var(--red); }
.textpage__content strong { font-weight: 600; color: var(--text); }

/* Blok voor gegevens die de klant zelf moet aanvullen */
.textpage__content .todo {
	background: var(--roze); border: 1px solid var(--roze-border);
	border-radius: var(--radius); padding: 18px 20px; margin: 0 0 20px;
	font-size: 15.5px;
}
.textpage__content .todo strong { color: var(--red); }

@media (max-width: 720px) {
	.textpage__inner { padding: 48px 20px 64px; }
	.textpage__title { font-size: 29px; }
	.textpage__content h2 { font-size: 20px; }
}
.footer__legal { border-bottom: 1px solid transparent; }
.footer__legal:hover { color: var(--red); border-bottom-color: var(--red); }

/* ---------- Cookiebanner (WPConsent) ---------- */
/* De banner leeft in een shadow DOM, dus gewone selectors bereiken hem niet.
   Stylen gaat via de parts die de plugin blootstelt. De kleuren staan in de
   plugin-instellingen zelf; hieronder alleen vorm en typografie, zodat de
   knoppen overeenkomen met .btn elders op de site. */

#wpconsent-container::part(wpconsent-banner) {
	border-top: 1px solid var(--b1);
	box-shadow: 0 -10px 34px -20px rgba(26, 23, 20, 0.28);
}

#wpconsent-container::part(wpconsent-banner-logo) {
	max-height: 40px;
	width: auto;
}

#wpconsent-container::part(wpconsent-button-preferences),
#wpconsent-container::part(wpconsent-button-cancel),
#wpconsent-container::part(wpconsent-button-accept),
#wpconsent-container::part(wpconsent-preferences-accept-button),
#wpconsent-container::part(wpconsent-preferences-save-button),
#wpconsent-container::part(wpconsent-preferences-cancel-button) {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: 14px;
	padding: 11px 20px;
	border-radius: 999px;
	border: 1px solid transparent;
	transition: .15s;
	/* De plugin zet een vaste hoogte die de padding indrukt; op mobiel werden
	   de knoppen daardoor maar 30px hoog. Flex met een minimumhoogte houdt ze
	   op een aanraakbaar formaat. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: auto !important;
	min-height: 42px !important;
}

/* Secundaire knoppen krijgen dezelfde rand als .btn--outline. */
#wpconsent-container::part(wpconsent-button-preferences),
#wpconsent-container::part(wpconsent-button-cancel),
#wpconsent-container::part(wpconsent-preferences-cancel-button) {
	border-color: var(--b2);
}

/* Cookievoorkeuren in de footer: een button, maar hij moet als de
   privacybeleid-link lezen. */
.footer__legal--button {
	background: none; border: 0; padding: 0; margin: 0;
	font-family: inherit; font-size: inherit; color: inherit;
	cursor: pointer; border-bottom: 1px solid transparent;
}

/* Cookiemelding in het midden van het scherm.
   De plugin kent alleen de vier hoeken; de banner zelf staat op position:fixed
   en is via zijn CSS-part bereikbaar, dus we hangen hem hier zelf in het
   midden. Met een dimlaag erachter leest het als een modaal venster. */
#wpconsent-container::part(wpconsent-banner) {
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	transform: translate(-50%, -50%) !important;
	/* Breedte bewust NIET overschrijven: die bepaalt de plugin zelf, samen met
	   zijn interne padding. Forceren we hier een breedte, dan loopt de tekst
	   buiten de box. */
	/* De plugin zet de achtergrond op de holder, en die staat na het
	   centreren op nul breedte. Daarom hier expliciet op de banner zelf,
	   anders schijnt de dimlaag erdoor en wordt het venster grijs. */
	background: var(--tint) !important;
	border: 1px solid var(--b1);
	border-radius: var(--radius-lg);
	box-shadow: 0 30px 80px -28px rgba(26, 23, 20, 0.45);
}


/* De reCAPTCHA-badge willen we niet zien. Google vraagt in dat geval om de
   voorwaarden in tekst te vermelden; dat doet digi_gform() onder elk
   formulier. */
.grecaptcha-badge {
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Verplichte vermelding bij verborgen badge. */
.gf-recaptcha-note {
	margin: 14px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--muted-2);
}
.gf-recaptcha-note a {
	color: var(--muted);
	border-bottom: 1px solid var(--b2);
}
.gf-recaptcha-note a:hover { color: var(--red); border-bottom-color: var(--red); }

/* Instemmingveld: enkel een vinkje met de tekst ernaast.
   De invoerstijl hierboven zet width:100% en padding op elke input in het
   formulier; voor een checkbox levert dat een breed vak op met het vinkje
   ergens in het midden. Hier zetten we die weer op een normaal formaat en
   leggen we vinkje en tekst naast elkaar. */
.lead .ginput_container_consent,
.wordlid .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.lead .ginput_container_consent input[type="checkbox"],
.wordlid .ginput_container_consent input[type="checkbox"] {
	flex: none;
	width: 17px;
	min-width: 17px;
	height: 17px;
	margin: 2px 0 0;
	padding: 0;
	border-radius: 4px;
	accent-color: var(--red);
}
.lead .gfield_consent_label,
.wordlid .gfield_consent_label {
	margin: 0;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-body);
}
.lead .gfield_consent_label a,
.wordlid .gfield_consent_label a {
	color: var(--red);
	border-bottom: 1px solid var(--roze-border);
}
.lead .gfield_consent_label a:hover,
.wordlid .gfield_consent_label a:hover { border-bottom-color: var(--red); }
/* Het "(Vereist)" plakt achter de vinktekst. Enkel visueel weghalen: de
   checkbox houdt aria-required, en de verborgen veldtitel vermeldt het ook,
   dus schermlezers krijgen het nog mee. */
.lead .gfield_consent_label .gfield_required,
.wordlid .gfield_consent_label .gfield_required { display: none !important; }

/* Aanbeveling-label bij een review zonder score.
   De getuigenissen zijn door leden aangeleverd zonder cijfer; sterren zouden
   een beoordelingsschaal suggereren die er niet is. */
.review__badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--font-head);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--red);
	background: var(--roze);
	border: 1px solid var(--roze-border);
	border-radius: 999px;
	padding: 4px 11px;
	white-space: nowrap;
}
.review__badge::before { content: "\2713"; font-weight: 700; }

/* Deelnameprijs voor bezoekers, als badge naast de aanmeldknop. */
.bijdrage {
	display: flex; width: fit-content; align-items: baseline; gap: 8px;
	margin: 16px auto 0; padding: 9px 18px;
	background: var(--tint); border: 1px solid var(--b1); border-radius: 999px;
	font-size: 14.5px; color: var(--text);
}
.bijdrage__bedrag { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--red); }
.lead .bijdrage { margin-left: 0; background: #fff; }

/* Langere aankondiging op een eventpagina: ruimte tussen alinea's, lijsten en beeld. */
.event-detail .entry-content > * + * { margin-top: 16px; }
.event-detail .entry-content ul { margin-bottom: 0; padding-left: 20px; }
.event-detail .entry-content li { font-size: 16.5px; line-height: 1.62; color: var(--text-body); }
.event-detail .entry-content li + li { margin-top: 4px; }
.event-detail .entry-content .wp-block-image { margin-left: 0; margin-right: 0; }
.event-detail .entry-content img { display: block; width: 100%; height: auto; border-radius: 16px; }
.event-cta { margin-top: 24px; margin-bottom: 24px; }
.event-cta .btn { white-space: normal; text-align: center; }

/* Pop-up voor een event (inc/event-promotie.php). Ligt onder de cookiemelding (z-index 900000). */
html.promo-open { overflow: hidden; }
.promo { position: fixed; inset: 0; z-index: 899000; display: grid; place-items: center; padding: 16px; }
.promo[hidden] { display: none; }
.promo__backdrop { position: absolute; inset: 0; background: rgba(30, 26, 22, .6); opacity: 0; transition: opacity .25s ease; }
.promo__dialog {
	position: relative; display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	width: min(840px, 100%); max-height: calc(100vh - 32px); overflow: auto;
	background: #fff; border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
	opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .25s ease, transform .25s ease;
}
.promo__dialog--zonder-beeld { grid-template-columns: 1fr; width: min(520px, 100%); }
.promo.is-zichtbaar .promo__backdrop,
.promo.is-zichtbaar .promo__dialog { opacity: 1; transform: none; }
.promo__beeld { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.promo__body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 32px 30px 28px; }
.promo__titel { margin: 2px 0 0; font-family: var(--font-head); font-size: 27px; font-weight: 700; line-height: 1.15; color: var(--text); }
.promo__meta { margin: 0; font-weight: 600; color: var(--red); }
.promo__tekst { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--text-body); }
.promo .bijdrage { margin: 4px 0 0; }
.promo__acties { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.promo__sluit {
	position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center;
	width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .94); box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
	font-size: 26px; line-height: 1; color: var(--text); cursor: pointer;
}
.promo__sluit:hover { color: var(--red); }
.promo__sluit:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

@media (max-width: 720px) {
	.promo { align-items: end; padding: 10px; }
	.promo__dialog { grid-template-columns: 1fr; max-height: calc(100vh - 20px); border-radius: 18px; }
	.promo__beeld { height: auto; max-height: 42vh; object-fit: contain; background: var(--tint); }
	.promo__body { padding: 20px 20px 22px; }
	.promo__titel { font-size: 22px; }
	.promo__acties .btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.promo__backdrop, .promo__dialog { transition: none; }
}

/* Eventpagina: affiche en aanmeldblok in de rechterkolom, tekst links meteen onder de titel. */
.event-detail__form { display: flex; flex-direction: column; gap: 20px; }
.event-detail__visual { margin: 0; }
.event-detail__visual-img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }

@media (min-width: 881px) {
	/* Volle rijhoogte, zodat het aanmeldblok ruimte heeft om mee te scrollen. */
	.event-detail__form { align-self: stretch; }
	.event-detail__form .lead { position: sticky; top: 92px; }
	/* Het aanmeldblok blijft in beeld, dus de knoppen in de tekst zijn hier dubbel. */
	.event-detail .entry-content .event-cta { display: none; }
}

@media (max-width: 880px) {
	/* Op gsm eerst aanmelden, de affiche sluit de pagina af. */
	.event-detail__form .lead { order: -1; }
	/* Het aanmeldblok volgt meteen na de tekst, dus de onderste knop is dubbel. */
	.event-detail .entry-content > .event-cta:last-child { display: none; }
}

/* Agenda: het hele eventblok is klikbaar. De titellink wordt over het blok
   uitgerekt; de locatielink en de knop liggen erboven en blijven apart klikbaar. */
.event-featured, .event-row { position: relative; }
.event-featured__link, .event-row__link { color: inherit; text-decoration: none; }
.event-featured__link::after, .event-row__link::after { content: ""; position: absolute; inset: 0; }
.event-featured .event-loc, .event-row .event-loc, .event-featured .btn { position: relative; z-index: 1; }
.event-featured__link:focus-visible, .event-row__link:focus-visible { outline: none; }
.event-featured:has(.event-featured__link:focus-visible),
.event-row:has(.event-row__link:focus-visible) { outline: 2px solid var(--red); outline-offset: 3px; }

.event-featured, .event-row { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.event-featured:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.event-row:hover { border-color: var(--red); box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.event-row:hover .event-row__title { color: var(--red); }

@media (max-width: 560px) {
	.event-detail { padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.event-featured, .event-row { transition: none; }
	.event-featured:hover, .event-row:hover { transform: none; }
}

/* Eventpagina: praktische info als één balk naast elkaar, intro als inleiding. */
.event-facts {
	display: flex; flex-direction: row; flex-wrap: wrap; gap: 0; margin: 0 0 28px; padding: 0;
	background: var(--tint); border: 1px solid var(--b1); border-radius: var(--radius-lg);
}
.event-facts__item { flex: 1 1 auto; display: flex; flex-direction: column; padding: 18px 22px; }
.event-facts__item + .event-facts__item { border-left: 1px solid var(--b1); }
.event-facts .label { margin-bottom: 6px; }
.event-facts__val { font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--text); }
.event-facts__next { margin-top: 2px; font-weight: 400; }
.event-facts .routelink { margin-top: 6px; }

.event-detail__desc { margin: 0 0 20px; font-size: 19px; font-weight: 500; line-height: 1.5; color: var(--text); }

@media (max-width: 640px) {
	.event-facts { flex-direction: column; }
	.event-facts__item { padding: 14px 18px; }
	.event-facts__item + .event-facts__item { border-left: 0; border-top: 1px solid var(--b1); }
	.event-detail__desc { font-size: 17.5px; }
}

/* Word lid: kop en intro links, formulier rechts, op de volle containerbreedte. */
@media (min-width: 881px) {
	.wordlid__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); gap: 64px; align-items: start; }
	.wordlid__kop { position: sticky; top: 92px; }
	.wordlid__intro { margin-bottom: 0; }
}

/* Tekstpagina (privacybeleid): links uitgelijnd met het logo, de tekst zelf blijft leesbaar smal. */
.textpage__inner > * { max-width: 760px; }

/* Op gsm dezelfde witrand als de rest van de site. */
@media (max-width: 560px) {
	.visit__inner, .wordlid__inner, .textpage__inner { padding-left: 20px; padding-right: 20px; }
}

/* Tekstpagina: inhoudstabel rechts, sticky op desktop, uitklapbaar op gsm. */
html:has(.textpage) { scroll-padding-top: 100px; }
@media (prefers-reduced-motion: no-preference) {
	html:has(.textpage) { scroll-behavior: smooth; }
}

.inhoud { padding: 22px 20px 18px; background: var(--tint); border: 1px solid var(--b1); border-radius: var(--radius-lg); }
.inhoud__titel { display: block; margin: 0 0 10px 14px; font-family: var(--font-head); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--red); }
.inhoud__lijst { margin: 0; padding: 0; list-style: none; }
.inhoud__lijst a {
	display: block; padding: 6px 0 6px 12px; border-left: 2px solid transparent;
	font-size: 14px; line-height: 1.35; color: var(--muted);
	transition: color .15s ease, border-color .15s ease;
}
.inhoud__lijst a:hover { color: var(--text); }
.inhoud__lijst a.is-actief { color: var(--red); border-left-color: var(--red); font-weight: 600; }

.inhoud-mobiel { display: none; }

@media (min-width: 881px) {
	.textpage__inner { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 300px); justify-content: space-between; gap: 48px; }
	.textpage__toc { align-self: stretch; }
	.inhoud { position: sticky; top: 92px; max-height: calc(100vh - 116px); overflow-y: auto; }
}

@media (max-width: 880px) {
	.textpage__toc { display: none; }
	.inhoud-mobiel { display: block; margin-top: 24px; background: var(--tint); border: 1px solid var(--b1); border-radius: var(--radius); }
	.inhoud-mobiel summary { padding: 14px 18px; font-family: var(--font-head); font-weight: 600; color: var(--text); cursor: pointer; }
	.inhoud-mobiel .inhoud__lijst { padding: 0 18px 12px 6px; }
}

/* Melding bij de aanmeldknop, bv. een gesloten vergadering. */
.melding {
	margin: 16px 0 0; padding: 12px 16px;
	background: #FFF7E0; border: 1px solid #EFD48A; border-radius: var(--radius);
	font-size: 14.5px; line-height: 1.5; color: var(--text); text-align: left;
}
.melding__titel { display: block; margin-bottom: 2px; font-family: var(--font-head); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: #8A5A00; }
.visit .melding { max-width: 520px; margin-left: auto; margin-right: auto; }
.lead .melding { margin: 0 0 16px; }