/* Kruisstraat Beheer – lijst, kaart, agenda, formulieren.
   Kleuren komen uit de themakleuren (Editor > Stijlen), met veilige terugvalwaarden. */
.kv-leden, .kv-act, .kv-nb, .kv-form, .kv-mapwrap { --kv-brand: var(--wp--preset--color--brand, #1F4A87); --kv-brand-dark: var(--wp--preset--color--brand-dark, #163A6B); --kv-ink: var(--wp--preset--color--ink, #202A3E); --kv-line: var(--wp--preset--color--line, #D8E4EF); --kv-cloud: var(--wp--preset--color--cloud, #EEF5FB); --kv-link: var(--wp--preset--color--link-blue, #0B5CAD); --kv-slate: var(--wp--preset--color--slate, #475569); }
.kv-noscroll, .kv-noscroll body { overflow: hidden; }
.screen-reader-text { position: absolute !important; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }

/* ===== Zoeken ===== */
.kv-search { max-width: 560px; margin: 0 auto 1rem; }
.kv-search__label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .4rem; color: var(--kv-ink); }
.kv-search__field { position: relative; display: flex; align-items: center; }
.kv-search__icon { position: absolute; left: 16px; color: var(--kv-slate); pointer-events: none; }
.kv-search input[type="search"] { width: 100%; box-sizing: border-box; height: 52px; border: 1px solid #94A3B8; border-radius: 9999px; padding: 0 52px 0 46px; font: inherit; font-size: 1rem; background: #fff; color: #1E293B; box-shadow: 0 6px 18px rgba(16,46,75,.06); -webkit-appearance: none; appearance: none; }
.kv-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.kv-search input[type="search"]::placeholder { color: #64748B; opacity: 1; }
.kv-search input[type="search"]:focus { outline: 3px solid var(--kv-link); outline-offset: 2px; border-color: var(--kv-link); }
.kv-search__clear { position: absolute; right: 8px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--kv-slate); cursor: pointer; }
.kv-search__clear:hover { background: var(--kv-cloud); color: var(--kv-ink); }
.kv-search__clear[hidden] { display: none; }
.kv-leden__bar { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: center; margin: 0 0 1.25rem; min-height: 1.75rem; }
.kv-status { margin: 0; color: var(--kv-slate); font-size: .95rem; }
.kv-linkbtn { border: 0; background: none; padding: .25rem .1rem; font: inherit; font-weight: 700; color: var(--kv-link); text-decoration: underline; cursor: pointer; min-height: 32px; }
.kv-linkbtn[hidden], .kv-leden__empty[hidden], .kv-member[hidden], [hidden].kv-act__section { display: none !important; }
.kv-leden__empty { text-align: center; background: #fff; border: 1px dashed #94A3B8; border-radius: 16px; padding: 1.5rem; margin: 0 auto 1.5rem; max-width: 640px; }

/* ===== Ledenlijst ===== */
.kv-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; grid-auto-rows: 1fr; }
@media (max-width: 1023px) { .kv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .kv-grid { grid-template-columns: minmax(0, 1fr); } }
.kv-member, .kv-grid > li { margin: 0; min-width: 0; }
.kv-card-member { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--kv-line); border-radius: 16px; padding: 18px; overflow-wrap: anywhere; box-shadow: 0 10px 30px rgba(16,46,75,.06); transition: box-shadow .2s, border-color .2s; }
.kv-member.is-active .kv-card-member { border-color: var(--kv-brand); box-shadow: 0 0 0 3px rgba(31,74,135,.25); }
.kv-card-member h3 { margin: 12px 0 4px; font-size: 1.05rem; line-height: 1.3; min-height: 2.6em; color: var(--kv-ink); }
.kv-logo-box { height: 96px; display: flex; align-items: center; justify-content: center; border: 1px solid #EEF2F6; border-radius: 12px; padding: 10px; background: #fff; flex-shrink: 0; }
.kv-logo-box img { max-width: 100%; max-height: 76px; width: auto; height: auto; object-fit: contain; border-radius: 0; }
.kv-initials { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--kv-cloud); color: var(--kv-brand); font-weight: 800; font-size: 1.35rem; letter-spacing: .02em; }
.kv-branche { margin: 0 0 8px; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #0B4A8A; min-height: 1.2em; }
.kv-adres { margin: 0 0 12px; display: flex; gap: 8px; align-items: flex-start; color: var(--kv-slate); font-size: .92rem; line-height: 1.45; }
.kv-adres svg { flex: 0 0 16px; margin-top: 3px; }
.kv-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 8px; }
.kv-site { font-weight: 700; color: var(--kv-link); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.kv-site:hover { text-decoration: underline; }
.kv-showmap { font: inherit; font-weight: 700; font-size: .9rem; padding: .45rem .9rem; min-height: 40px; border-radius: 9999px; border: 2px solid var(--kv-brand); background: #fff; color: var(--kv-brand); cursor: pointer; }
.kv-showmap:hover { background: var(--kv-cloud); color: var(--kv-brand-dark); }
.kv-noloc { font-size: .85rem; color: var(--kv-slate); }
.kv-note { text-align: center; color: var(--kv-slate); }
.kv-btn { display: inline-flex; align-items: center; min-height: 44px; padding: .6rem 1.25rem; border-radius: 9999px; background: var(--kv-brand); color: #fff !important; font-weight: 700; text-decoration: none !important; }
.kv-btn:hover { background: var(--kv-brand-dark); }

/* ===== Kaart ===== */
.kv-mapwrap { width: 100%; }
.kv-map { position: relative; width: 100%; aspect-ratio: 4 / 3; min-height: 300px; max-height: 70vh; border-radius: 20px; overflow: hidden; background: #DCE6EF; box-shadow: 0 18px 45px rgba(0,0,0,.28); isolation: isolate; color: #1E293B; }
.kv-map:not(.is-ready) { background: #DCE6EF; }
.kv-map__vp { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: pan-y; outline-offset: -3px; user-select: none; -webkit-user-select: none; }
.kv-map__vp.is-grabbing { cursor: grabbing; }
.kv-map__vp:focus-visible { outline: 3px solid var(--kv-link); }
.kv-map.is-full .kv-map__vp { touch-action: none; }
.kv-map__tiles, .kv-map__markers { position: absolute; inset: 0; }
.kv-map__tile { position: absolute; left: 0; top: 0; width: 256px; height: 256px; max-width: none; border-radius: 0 !important; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.kv-map__markers { pointer-events: none; }
.kv-map__markers > * { pointer-events: auto; position: absolute; left: 0; top: 0; }
.kv-pin { width: 44px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); transform-origin: 50% 100%; }
.kv-pin__shape { display: block; }
.kv-pin__logo { position: absolute; left: 8px; top: 7.5px; width: 28px; height: 28px; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; font-size: .72rem; font-weight: 800; color: var(--kv-brand); }
.kv-pin__logo img { width: 22px; height: 22px; object-fit: contain; display: block; border-radius: 0; }
.kv-pin__logo.is-initials { letter-spacing: -.02em; }
.kv-pin__label { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 4px); white-space: nowrap; background: var(--kv-brand-dark); color: #fff; padding: .2rem .55rem; border-radius: 8px; font-size: .78rem; font-weight: 700; display: none; }
.kv-pin.is-selected .kv-pin__label { display: block; }
.kv-pin.is-selected .kv-pin__shape path { fill: var(--kv-brand-dark); }
.kv-pin:focus-visible, .kv-cluster:focus-visible { outline: 3px solid #fff; outline-offset: 0; box-shadow: 0 0 0 6px var(--kv-link); border-radius: 12px; }
.kv-cluster { width: 40px; height: 40px; border-radius: 50%; border: 3px solid #fff; background: var(--kv-brand); color: #fff; font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.kv-cluster:hover { background: var(--kv-brand-dark); }
.kv-map__ctl { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.3); z-index: 3; }
.kv-map__btn { width: 44px; height: 44px; border: 0; border-bottom: 1px solid var(--kv-line); background: #fff; color: var(--kv-ink); display: grid; place-items: center; cursor: pointer; }
.kv-map__btn:last-child { border-bottom: 0; }
.kv-map__btn:hover { background: var(--kv-cloud); }
.kv-map__full { position: absolute; left: 10px; top: 10px; z-index: 3; min-height: 44px; padding: .5rem 1rem; border: 0; border-radius: 9999px; background: #fff; color: var(--kv-brand); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.kv-map__full:hover { background: var(--kv-cloud); }
.kv-map__attr { position: absolute; right: 0; bottom: 0; z-index: 2; background: rgba(255,255,255,.85); padding: 2px 8px; font-size: 11px; color: #1E293B; border-top-left-radius: 8px; }
.kv-map__attr a { color: #0B4A8A; }
.kv-map__hint { position: absolute; inset: auto 0 36px 0; margin: auto; width: max-content; max-width: 90%; background: rgba(16,46,75,.9); color: #fff; padding: .4rem .9rem; border-radius: 9999px; font-size: .85rem; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 3; }
.kv-map__hint.is-on { opacity: 1; }
.kv-map__note { position: absolute; left: 12px; right: 12px; bottom: 34px; z-index: 3; background: #fff; border-radius: 12px; padding: .6rem .9rem; font-size: .9rem; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.kv-map__nojs { padding: 1rem; background: #fff; margin: 0; }
.kv-map.is-full { position: fixed; inset: 0; z-index: 100000; max-height: none; aspect-ratio: auto; border-radius: 0; min-height: 0; width: 100vw; height: 100dvh; }
.kv-map.is-full .kv-map__full { background: var(--kv-brand); color: #fff; }

.kv-pop { position: absolute; z-index: 4; width: 300px; max-width: calc(100% - 16px); background: #fff; color: #1E293B; border-radius: 16px; padding: 16px; box-shadow: 0 18px 45px rgba(0,0,0,.35); box-sizing: border-box; }
.kv-pop[hidden] { display: none; }
.kv-pop:focus { outline: none; }
.kv-pop:focus-visible { outline: 3px solid var(--kv-link); }
.kv-pop__close { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: transparent; border-radius: 50%; cursor: pointer; color: var(--kv-slate); }
.kv-pop__close:hover { background: var(--kv-cloud); }
.kv-pop__top { display: flex; gap: 12px; align-items: center; padding-right: 36px; }
.kv-pop__logo { flex: 0 0 64px; height: 64px; border: 1px solid #EEF2F6; border-radius: 12px; display: grid; place-items: center; padding: 4px; box-sizing: border-box; background: #fff; }
.kv-pop__logo img { max-width: 100%; max-height: 54px; object-fit: contain; border-radius: 0; }
.kv-pop__logo.is-initials, .kv-pop__mini.is-initials { color: var(--kv-brand); font-weight: 800; background: var(--kv-cloud); }
.kv-pop__text { min-width: 0; }
.kv-pop__title { margin: 0 0 2px; font-size: 1.05rem; line-height: 1.25; color: var(--kv-ink); }
.kv-pop__branche { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #0B4A8A; }
.kv-pop__adres { margin: 4px 0 0; font-size: .88rem; color: var(--kv-slate); }
.kv-pop__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.kv-pop__btn { flex: 1 1 auto; text-align: center; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: .5rem 1rem; border-radius: 9999px; background: var(--kv-brand); color: #fff !important; font-weight: 700; font-size: .92rem; text-decoration: none !important; border: 2px solid var(--kv-brand); box-sizing: border-box; }
.kv-pop__btn:hover { background: var(--kv-brand-dark); border-color: var(--kv-brand-dark); }
.kv-pop__btn--ghost { background: #fff; color: var(--kv-brand) !important; }
.kv-pop__btn--ghost:hover { background: var(--kv-cloud); }
.kv-pop__list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 220px; overflow: auto; }
.kv-pop__item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; min-height: 44px; padding: .35rem .5rem; border: 0; background: none; font: inherit; font-weight: 600; color: var(--kv-ink); border-radius: 10px; cursor: pointer; }
.kv-pop__item:hover { background: var(--kv-cloud); }
.kv-pop__mini { flex: 0 0 36px; height: 36px; border-radius: 8px; border: 1px solid #EEF2F6; display: grid; place-items: center; font-size: .75rem; overflow: hidden; background: #fff; }
.kv-pop__mini img { max-width: 30px; max-height: 30px; object-fit: contain; border-radius: 0; }
.kv-pop.is-sheet { width: auto; }

/* ===== Activiteiten ===== */
.kv-act__section { margin: 0 0 2rem; }
.kv-act__h { margin: 0 0 1rem; font-size: 1.5rem; }
.kv-act__list { display: grid; gap: 14px; }
.kv-act__item { display: flex; gap: 16px; background: #fff; border: 1px solid var(--kv-line); border-radius: 16px; padding: 16px 18px; box-shadow: 0 10px 30px rgba(16,46,75,.06); }
.kv-act__date { flex: 0 0 64px; height: 72px; border-radius: 12px; background: var(--kv-brand); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.kv-act__day { font-size: 1.6rem; font-weight: 800; }
.kv-act__mon { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.kv-act__body { min-width: 0; }
.kv-act__body h3 { margin: .1rem 0 .25rem; font-size: 1.15rem; color: var(--kv-ink); }
.kv-act__body p { margin: .25rem 0; }
.kv-act__meta { color: var(--kv-slate); font-size: .92rem; }
.kv-act__empty { background: #fff; border: 1px solid var(--kv-line); border-radius: 16px; padding: 1.25rem 1.5rem; text-align: center; color: var(--kv-slate); box-shadow: 0 10px 30px rgba(16,46,75,.06); max-width: 720px; margin: 0 auto; }
.kv-act__empty[hidden] { display: none; }
.kv-badge { display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: .15rem .6rem; border-radius: 9999px; margin-bottom: .25rem; }
.kv-badge--voorlopig { background: #FEF3C7; color: #7A4A00; }
.kv-badge--afgelast { background: #FEE2E2; color: #8F1D1D; }
.kv-badge--uitgesteld { background: #E0E7FF; color: #2B3A8A; }
.kv-nb__cover { width: 100%; height: auto; border-radius: 12px; aspect-ratio: 4 / 3; object-fit: cover; }
.kv-grid--nb { grid-auto-rows: auto; }

/* ===== Formulieren ===== */
.kv-form { max-width: 720px; }
.kv-form form { display: grid; gap: 1rem; }
.kv-form__row { display: grid; gap: .35rem; margin: 0; }
.kv-form__row label { font-weight: 700; color: var(--kv-ink); }
.kv-form input[type="text"], .kv-form input[type="email"], .kv-form input[type="tel"], .kv-form textarea { width: 100%; box-sizing: border-box; padding: .8rem 1rem; border: 1px solid #94A3B8; border-radius: 12px; font: inherit; background: #fff; color: #1E293B; }
.kv-form input:focus, .kv-form textarea:focus { outline: 3px solid var(--kv-link); outline-offset: 2px; border-color: var(--kv-link); }
.kv-form__set { border: 1px solid var(--kv-line); border-radius: 16px; padding: 1rem 1.25rem 1.25rem; background: #fff; display: grid; gap: .9rem; margin: 0; }
.kv-form__set legend { font-weight: 800; padding: 0 .5rem; color: var(--kv-ink); }
.kv-form__opt { font-weight: 400; color: var(--kv-slate); font-size: .9rem; }
.kv-form__check { display: flex; gap: .75rem; align-items: flex-start; }
.kv-form__check input { margin-top: .3rem; width: 20px; height: 20px; flex: 0 0 20px; }
.kv-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kv-form__msg { padding: 1rem 1.25rem; border-radius: 12px; margin-bottom: 1rem; }
.kv-form__msg.is-ok { background: #DCFCE7; color: #14532D; border: 1px solid #86EFAC; }
.kv-form__msg.is-error { background: #FEE2E2; color: #7F1D1D; border: 1px solid #FCA5A5; }
.kv-form__submit { margin: 0; }
.kv-submit { cursor: pointer; }
.kv-form__fine { margin: 0; font-size: .85rem; color: var(--kv-slate); }
.kv-editor-placeholder { border: 2px dashed #94A3B8; border-radius: 12px; padding: 1rem 1.25rem; background: #F4F8FC; color: #1E293B; }
.kv-editor-placeholder p { margin: .25rem 0 0; }

@media (max-width: 520px) { .kv-act__item { flex-direction: column; gap: 10px; } .kv-act__date { flex-direction: row; gap: .5rem; height: 44px; width: fit-content; padding: 0 1rem; } }
@media (prefers-reduced-motion: reduce) { .kv-map__hint, .kv-card-member { transition: none; } }

/* Kaart in de leden-hero: groter en rechts van de tekst op desktop */
@media (min-width: 782px) { .kv-hero-cols .kv-map { aspect-ratio: 1 / 1; min-height: 440px; max-height: 560px; } }
.kv-hero-cols .kv-map { box-shadow: 0 18px 50px rgba(8,20,40,.45); border: 3px solid #fff; }