/* ACV 2026: aanvullingen op theme.json. Alleen tokens, geen losse kleuren of maten. */

:root {
	--acv-sig: linear-gradient(90deg, var(--wp--preset--color--zwart) 0 33.33%, var(--wp--preset--color--rood) 33.33% 66.66%, var(--wp--preset--color--groen) 66.66%);
	--acv-op-donker: color-mix(in srgb, var(--wp--preset--color--wit) 86%, var(--wp--preset--color--zwart));
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--rood);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--klein);
}
.wp-element-button, .wp-block-button__link { min-height: var(--wp--custom--knop--hoogte); display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--wp--custom--beweging), border-color var(--wp--custom--beweging); }

/* Header */
.acv-header { position: sticky; top: 0; z-index: 50; background: var(--wp--preset--color--licht); }
.acv-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--wp--custom--handtekening); background: var(--acv-sig); }
.acv-header__bar { min-height: 76px; gap: var(--wp--preset--spacing--40); padding-bottom: var(--wp--custom--handtekening); }
.acv-nav { margin-left: auto; }
.acv-nav .wp-block-navigation-item__content { text-decoration: none; padding: 8px 0; }
.acv-nav .wp-block-navigation-item__content:hover { text-decoration: underline; text-underline-offset: 6px; }
.acv-nav .wp-block-navigation__responsive-container-open { width: 48px; height: 48px; justify-content: center; border: 1.5px solid currentColor; border-radius: var(--wp--custom--radius--pil); }
.acv-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--licht); color: var(--wp--preset--color--zwart); padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30); }
.acv-nav .is-menu-open .wp-block-navigation-item__content { font: 600 var(--wp--preset--font-size--kop-3)/1.2 var(--wp--preset--font-family--serif); }
.acv-header__cta { flex: none; }
@media (max-width: 599px) { .acv-header__cta { display: none; } }

.acv-header--overlay { position: absolute; left: 0; right: 0; background: transparent; color: var(--wp--preset--color--wit); }
.acv-header--overlay .acv-header__cta .wp-element-button { background: var(--wp--preset--color--wit); border-color: var(--wp--preset--color--wit); color: var(--wp--preset--color--groen-donker); }
.admin-bar .acv-header { top: var(--wp-admin--admin-bar--height, 0px); }

/* Footer */
.acv-footer { position: relative; margin-top: 0; background-color: var(--wp--preset--color--zwart); color: var(--acv-op-donker); padding-top: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--50); font-size: var(--wp--preset--font-size--klein); }
.acv-footer::after { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--wp--custom--handtekening)); height: var(--wp--custom--handtekening); background: var(--acv-sig); }
.acv-footer a { color: var(--wp--preset--color--wit); text-decoration-color: color-mix(in srgb, var(--wp--preset--color--wit) 40%, transparent); }
.acv-footer a:hover { color: var(--wp--preset--color--wit); text-decoration-color: currentColor; }
.acv-footer__emblem svg { width: 132px; height: 132px; }
.acv-footer__name { color: var(--wp--preset--color--wit); font-weight: 600; }
.acv-footer__title { color: var(--wp--preset--color--wit); font-size: 18px; margin-bottom: var(--wp--preset--spacing--30); }
.acv-footer__sub { color: var(--wp--preset--color--wit); font-weight: 600; margin: var(--wp--preset--spacing--30) 0 6px; }
.acv-footer__sub:first-of-type { margin-top: 0; }
.acv-footer .wp-block-column > * { margin-block: 0; }
.acv-footer .wp-block-column > * + * { margin-top: var(--wp--preset--spacing--20); }
.acv-footer ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.acv-footer__times li { white-space: nowrap; }
.acv-footer__times strong { color: var(--wp--preset--color--wit); display: inline-block; min-width: 8.5em; }
.acv-footer__legal { margin-top: var(--wp--preset--spacing--60); padding-top: var(--wp--preset--spacing--40); border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--wit) 15%, transparent); }
.acv-footer__legal p { margin: 0; }
.acv-footer__legal a + a { margin-left: var(--wp--preset--spacing--40); }

/* Patroon: khatam-ster als masker, kleur komt uit het palet */
[class*="is-style-acv-patroon-"] { position: relative; isolation: isolate; }
[class*="is-style-acv-patroon-"]::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	-webkit-mask: url(../svg/khatam.svg) 0 0 / 48px 48px repeat; mask: url(../svg/khatam.svg) 0 0 / 48px 48px repeat;
}
.is-style-acv-patroon-beige { background-color: var(--wp--preset--color--beige); }
.is-style-acv-patroon-beige::before { background-color: var(--wp--preset--color--grijs); opacity: .22; }
.is-style-acv-patroon-groen { background-color: var(--wp--preset--color--groen); color: var(--wp--preset--color--wit); }
.is-style-acv-patroon-groen::before { background-color: var(--wp--preset--color--wit); opacity: .13; }
.is-style-acv-patroon-zwart { background-color: var(--wp--preset--color--zwart); }
.is-style-acv-patroon-zwart::before { background-color: var(--wp--preset--color--wit); opacity: .1; }

/* Knopstijlen */
.wp-block-button.is-style-acv-doneer .wp-block-button__link { background: var(--wp--preset--color--rood); border-color: var(--wp--preset--color--rood); color: var(--wp--preset--color--wit); }
.wp-block-button.is-style-acv-doneer .wp-block-button__link:hover { background: var(--wp--preset--color--rood-donker); border-color: var(--wp--preset--color--rood-donker); }
.wp-block-button.is-style-acv-wit .wp-block-button__link { background: var(--wp--preset--color--wit); border-color: var(--wp--preset--color--wit); color: var(--wp--preset--color--groen-donker); }
.wp-block-button.is-style-acv-wit .wp-block-button__link:hover { background: var(--wp--preset--color--licht); }

/* Paginakop en inhoud */
.acv-main { margin-top: 0; }
.acv-pagehead { padding-top: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--60); margin-bottom: var(--wp--preset--spacing--60); }
.acv-content { padding-bottom: var(--wp--preset--spacing--80); }
.acv-content--front { padding-bottom: 0; }
.acv-meta { color: var(--wp--preset--color--grijs); font-size: var(--wp--preset--font-size--klein); }
.acv-loop { padding-bottom: var(--wp--preset--spacing--80); }
.acv-loop .wp-block-post-template { display: grid; gap: var(--wp--preset--spacing--30); list-style: none; padding: 0; }
.acv-card { background: var(--wp--preset--color--licht); border: var(--wp--custom--lijn); border-radius: var(--wp--custom--radius--kaart); padding: var(--wp--preset--spacing--40); }
.acv-card .wp-block-post-title a { color: inherit; text-decoration: none; }
.acv-card .wp-block-post-title a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ===== Homepage (fase 2) ===== */
:where(.wp-site-blocks) > * { margin-block-start: 0; }
.acv-main--front > * { margin-block: 0; }
.acv-band { padding-block: var(--wp--preset--spacing--80); }
.acv-band--kort { padding-top: 0; }
.acv-band--zwart { padding-block: var(--wp--preset--spacing--60); }
.acv-band--oproep { padding-block: var(--wp--preset--spacing--70); }
.acv-sechead { margin-bottom: var(--wp--preset--spacing--50); gap: var(--wp--preset--spacing--30); }
.acv-sechead h2 { margin: 0; }
.acv-sechead .wp-block-buttons { gap: var(--wp--preset--spacing--20); }
.acv-sechead .wp-element-button { min-height: 40px; padding: 10px 18px; font-size: 14px; }

/* Hero */
.acv-hero { color: var(--wp--preset--color--wit); padding-top: 140px; padding-bottom: var(--wp--preset--spacing--70); min-height: min(88vh, 860px) !important; }
.acv-hero .wp-block-cover__background { background: linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--zwart) 70%, transparent) 0, color-mix(in srgb, var(--wp--preset--color--zwart) 45%, transparent) 40%, color-mix(in srgb, var(--wp--preset--color--zwart) 88%, transparent) 100%) !important; opacity: 1 !important; }
.acv-hero__inner { width: 100%; max-width: var(--wp--style--global--wide-size, 1200px) !important; margin-inline: auto !important; }
.acv-hero__inner > * { max-width: 760px; }
.acv-hero__title { color: inherit; font-size: clamp(48px, 7vw, 96px) !important; max-width: 12ch; letter-spacing: -.02em; line-height: 1.02; margin-top: var(--wp--preset--spacing--30); }
.acv-hero__lead { color: var(--wp--preset--color--wit); max-width: 52ch; font-weight: 500; text-shadow: 0 1px 24px color-mix(in srgb, var(--wp--preset--color--zwart) 50%, transparent); }
.acv-hero .wp-block-buttons { margin-top: var(--wp--preset--spacing--50); }
.acv-kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--wp--preset--font-size--klein); margin: 0; color: color-mix(in srgb, var(--wp--preset--color--wit) 88%, transparent); }
.acv-kicker svg { width: 22px; height: 25px; flex: none; }
.acv-video-toggle { position: absolute; right: var(--wp--preset--spacing--30); bottom: 96px; z-index: 3; width: 48px; height: 48px; border-radius: var(--wp--custom--radius--pil); border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--wit) 70%, transparent); background: color-mix(in srgb, var(--wp--preset--color--zwart) 35%, transparent); color: var(--wp--preset--color--wit); cursor: pointer; font-size: 0; }
.acv-video-toggle::before { content: ""; display: block; margin: auto; width: 12px; height: 14px; border-inline: 4px solid currentColor; box-sizing: border-box; }
.acv-video-toggle[data-state="paused"]::before { border: 0; width: 0; height: 0; border-left: 12px solid currentColor; border-block: 7px solid transparent; margin-left: 18px; }
.wp-block-button.is-style-acv-lijn-wit .wp-block-button__link { background: transparent; border-color: var(--wp--preset--color--wit); color: var(--wp--preset--color--wit); }
.wp-block-button.is-style-acv-lijn-wit .wp-block-button__link:hover { background: color-mix(in srgb, var(--wp--preset--color--wit) 12%, transparent); }

/* Cijferstrook */
.acv-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--wp--preset--spacing--40); }
@media (min-width: 768px) { .acv-stats { grid-template-columns: repeat(4, 1fr); } }
.acv-stat b { display: block; font: 600 var(--wp--preset--font-size--kop-1)/1 var(--wp--preset--font-family--serif); color: var(--wp--preset--color--wit); }
.acv-stat span { display: block; margin-top: 8px; font-size: var(--wp--preset--font-size--klein); color: var(--acv-op-donker); max-width: 24ch; }

/* Pijlers */
.acv-pijlers { display: grid; gap: var(--wp--preset--spacing--30); }
@media (min-width: 768px) { .acv-pijlers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .acv-pijlers { grid-template-columns: repeat(4, 1fr); } }
.acv-pijler { background: var(--wp--preset--color--licht); border-radius: var(--wp--custom--radius--kaart); padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); border-top: 4px solid var(--wp--preset--color--zwart); }
.acv-pijler--geloof { border-top-color: var(--wp--preset--color--rood); }
.acv-pijler--kennis { border-top-color: var(--wp--preset--color--groen); }
.acv-pijler h3 { margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--kop-3); }
.acv-pijler p { margin: 0; color: var(--wp--preset--color--grijs); }
.acv-icon { width: 44px; height: 44px; padding: 9px; border-radius: 12px; border: 1.75px solid var(--wp--preset--color--groen); color: var(--wp--preset--color--groen); }

/* Evenementen */
.acv-filter { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); margin-bottom: var(--wp--preset--spacing--40); }
.acv-filter button { min-height: 44px; padding: 0 18px; border-radius: var(--wp--custom--radius--pil); border: 1.5px solid var(--wp--preset--color--zand); background: var(--wp--preset--color--wit); font: 600 14px/1 var(--wp--preset--font-family--sans); color: var(--wp--preset--color--zwart); cursor: pointer; }
.acv-filter button[aria-pressed="true"] { background: var(--wp--preset--color--zwart); border-color: var(--wp--preset--color--zwart); color: var(--wp--preset--color--wit); }
.acv-events { display: grid; gap: var(--wp--preset--spacing--30); }
@media (min-width: 768px) { .acv-events { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .acv-events { grid-template-columns: repeat(3, 1fr); } }
.acv-event { display: flex; flex-direction: column; background: var(--wp--preset--color--wit); border: var(--wp--custom--lijn); border-radius: var(--wp--custom--radius--kaart); overflow: hidden; }
.acv-event[hidden] { display: none; }
.acv-event__img { display: block; aspect-ratio: 16 / 9; background: var(--wp--preset--color--beige); }
.acv-event__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acv-event__body { display: grid; grid-template-columns: auto 1fr; gap: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); }
.acv-event__date { margin: 0; text-align: center; padding-right: var(--wp--preset--spacing--30); border-right: var(--wp--custom--lijn); }
.acv-event__date b { display: block; font: 600 28px/1 var(--wp--preset--font-family--serif); }
.acv-event__date span { font-size: 13px; color: var(--wp--preset--color--grijs); text-transform: lowercase; }
.acv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.acv-tag { padding: 4px 12px; border-radius: var(--wp--custom--radius--pil); font: 700 13px/1.45 var(--wp--preset--font-family--sans); background: var(--wp--preset--color--groen-tint); color: var(--wp--preset--color--groen-donker); }
.acv-tag--vol { background: var(--wp--preset--color--rood); color: var(--wp--preset--color--wit); }
.acv-event__title { margin: 0; font-size: 20px; text-wrap: balance; }
.acv-event__title a { color: inherit; text-decoration: none; }
.acv-event__title a:hover { text-decoration: underline; }
.acv-event__meta { margin: 4px 0 0; color: var(--wp--preset--color--grijs); font-size: 15px; }
.acv-event__cta { margin: auto var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); align-self: flex-start; min-height: 40px !important; padding: 10px 18px !important; font-size: 14px !important; text-decoration: none; }
.acv-event__cta.is-vol { display: inline-flex; align-items: center; border-radius: var(--wp--custom--radius--pil); background: var(--wp--preset--color--zand); color: var(--wp--preset--color--grijs); font-weight: 700; }
.acv-empty { background: var(--wp--preset--color--wit); border: var(--wp--custom--lijn); border-radius: var(--wp--custom--radius--kaart); padding: var(--wp--preset--spacing--50); max-width: 640px; }
.acv-empty p { margin: 0 0 8px; }

/* Jongeren */
.acv-split { gap: var(--wp--preset--spacing--70); }
.acv-lockup { display: flex; align-items: center; gap: 12px; margin: 0; }
.acv-lockup svg { width: 44px; height: 50px; }
.acv-lockup b { display: block; font: 600 28px/1 var(--wp--preset--font-family--serif); letter-spacing: .1em; }
.acv-lockup small { display: block; font: 700 15px/1.3 var(--wp--preset--font-family--sans); }
.acv-pill { display: inline-block; margin: var(--wp--preset--spacing--40) 0 0; padding: 6px 14px; border-radius: var(--wp--custom--radius--pil); background: color-mix(in srgb, var(--wp--preset--color--wit) 15%, transparent); font-weight: 700; font-size: var(--wp--preset--font-size--klein); }
.is-style-acv-patroon-groen h2 { color: var(--wp--preset--color--wit); }
.acv-lead-op-kleur { color: color-mix(in srgb, var(--wp--preset--color--wit) 88%, transparent); font-size: var(--wp--preset--font-size--groot); max-width: 52ch; }
.acv-photo { margin: 0; border-radius: var(--wp--custom--radius--paneel); overflow: hidden; }
.acv-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.acv-photo--square { aspect-ratio: 1; }

/* Terugblikken */
.acv-galerij { display: grid; gap: var(--wp--preset--spacing--20); grid-template-columns: repeat(2, 1fr); }
.acv-galerij__item { margin: 0; position: relative; border-radius: var(--wp--custom--radius--kaart); overflow: hidden; aspect-ratio: 4 / 3; }
.acv-galerij__item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 1024px) {
	.acv-galerij { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; }
	.acv-galerij__item { aspect-ratio: auto; }
	.acv-galerij__item:first-child { grid-column: auto; grid-row: span 2; aspect-ratio: auto; }
}
.acv-galerij__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acv-galerij__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30); background: linear-gradient(0deg, color-mix(in srgb, var(--wp--preset--color--zwart) 75%, transparent), transparent); color: var(--wp--preset--color--wit); font-weight: 600; }

/* Instagram (Smash Balloon) */
.acv-band #sb_instagram { padding: 0 !important; }
.acv-band #sb_instagram .sbi_item { border-radius: var(--wp--custom--radius--klein); overflow: hidden; }

/* Doneren */
.acv-doneer { position: relative; display: grid; gap: var(--wp--preset--spacing--50); align-items: center; background: var(--wp--preset--color--licht); border: var(--wp--custom--lijn); border-radius: var(--wp--custom--radius--paneel); padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50); overflow: hidden; }
.acv-doneer::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--wp--preset--color--rood); }
@media (min-width: 1024px) { .acv-doneer { grid-template-columns: 1.3fr 1fr; padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70); } }
.acv-doneer h2 { margin-top: 0; }
.acv-doneer p { color: var(--wp--preset--color--grijs); max-width: 56ch; }
.acv-anbi { display: flex; gap: var(--wp--preset--spacing--30); align-items: flex-start; margin: 0; font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--grijs); }
.acv-anbi__badge { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; border: 1.5px solid var(--wp--preset--color--rood); color: var(--wp--preset--color--rood); font-weight: 700; font-size: 12px; letter-spacing: .04em; }

/* Reviews */
.acv-reviews { display: grid; gap: var(--wp--preset--spacing--30); }
@media (min-width: 1024px) { .acv-reviews { grid-template-columns: repeat(3, 1fr); } }
.acv-review { margin: 0; background: var(--wp--preset--color--licht); border: var(--wp--custom--lijn); border-radius: var(--wp--custom--radius--kaart); padding: var(--wp--preset--spacing--40); display: flex; flex-direction: column; justify-content: space-between; gap: var(--wp--preset--spacing--30); }
.acv-review blockquote { margin: 0; }
.acv-review blockquote p { margin: 0; font: 600 19px/1.45 var(--wp--preset--font-family--serif); }
.acv-review blockquote p::before { content: "\201C"; } .acv-review blockquote p::after { content: "\201D"; }
.acv-review figcaption { color: var(--wp--preset--color--grijs); font-size: var(--wp--preset--font-size--klein); }

/* Oproep */
.acv-oproep { gap: var(--wp--preset--spacing--40); }
.acv-oproep h2 { color: var(--wp--preset--color--wit); margin: 0; }

/* WhatsApp */

/* Menu klapt in onder 1024 px (standaard pas onder 600 px) */
@media (max-width: 1023px) {
	.acv-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.acv-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.acv-split .acv-photo { max-width: 480px; }
}

/* Evenement zonder foto: patroon in plaats van een leeg vlak */
.acv-event__noimg { display: block; width: 100%; height: 100%; position: relative; background: var(--wp--preset--color--zand); }
.acv-event__noimg::before { content: ""; position: absolute; inset: 0; background: var(--wp--preset--color--grijs); opacity: .22; -webkit-mask: url(../svg/khatam.svg) 0 0 / 48px 48px repeat; mask: url(../svg/khatam.svg) 0 0 / 48px 48px repeat; }

/* Hero-inhoud op dezelfde lijn als header en secties */
.acv-hero { padding-inline: 0 !important; }
.acv-hero .wp-block-cover__inner-container { width: 100% !important; max-width: none !important; }
.acv-hero .acv-hero__inner { width: min(100% - 2 * var(--wp--preset--spacing--30), 1200px) !important; margin-inline: auto !important; }
@media (min-width: 768px) { .acv-hero .acv-hero__inner { width: min(100% - 2 * var(--wp--preset--spacing--50), 1200px) !important; } }
.acv-header__bar.alignwide { width: min(100% - 2 * var(--wp--preset--spacing--30), 1200px); margin-inline: auto !important; max-width: none !important; }
@media (min-width: 768px) { .acv-header__bar.alignwide { width: min(100% - 2 * var(--wp--preset--spacing--50), 1200px); } }