.elementor-kit-10{--e-global-color-primary:#F8F8F8;--e-global-color-secondary:#8DD6F2;--e-global-color-text:#F8F8F8;--e-global-color-accent:#D3066E;--e-global-color-2f6b250:#2C2C7F;--e-global-color-83cea8a:#EEEEEE;--e-global-color-7378159:#000000;--e-global-color-0c14b5d:#7A7A7A;--e-global-color-ae05c8e:#D3D9FD;--e-global-color-6aa894e:#424242;--e-global-color-bce1994:#FCDBDF;--e-global-color-ab4484f:#EDEFFF;--e-global-color-221b1fd:#D1DDFF;--e-global-color-4662fac:#D0F2FF;--e-global-typography-primary-font-family:"Outfit";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Outfit";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Outfit";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Outfit";--e-global-typography-accent-font-weight:500;color:var( --e-global-color-primary );font-family:"Outfit", Outfit;}.elementor-kit-10 e-page-transition{background-color:#FFBC7D;}.elementor-kit-10 a{color:var( --e-global-color-primary );}.elementor-kit-10 h1{color:#4B4B4B;font-family:"Outfit", Outfit;font-size:40px;text-transform:none;}.elementor-kit-10 h2{color:#4B4B4B;font-family:"Outfit", Outfit;font-size:30px;text-transform:none;}.elementor-kit-10 h3{color:var( --e-global-color-6aa894e );font-family:"Outfit", Outfit;font-size:20px;text-transform:none;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1180px;}.e-con{--container-max-width:1180px;--container-default-padding-top:60px;--container-default-padding-right:0px;--container-default-padding-bottom:60px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:30px;}.elementor-element{--widgets-spacing:30px 30px;--widgets-spacing-row:30px;--widgets-spacing-column:30px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;--container-default-padding-top:45px;--container-default-padding-right:45px;--container-default-padding-bottom:45px;--container-default-padding-left:45px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;--container-default-padding-top:30px;--container-default-padding-right:30px;--container-default-padding-bottom:30px;--container-default-padding-left:30px;}}/* Start custom CSS *//* vk-kit: sitebrede interactie- en toegankelijkheidsregels (Apple Design-audit 08-10-2026).
   Staat in Elementor > Site Settings > Custom CSS (kit, post 10) en laadt op elke pagina; gezet door
   bin/build-header via wordpress/tools/set-kit-css.php. Paginaregels staan in tools/vk_blocks.py (PAGE_CSS). */

/* Knoppen: feedback op indrukken, korte overgangen alleen op kleur en transform. */
.elementor-button { transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease-out; }
.elementor-button:active { transform: scale(.97); }
.elementor-icon-list-item, .elementor-icon-list-item a, .e-n-accordion-item-title { transition: color .18s ease; }
.e-n-accordion-item-title-icon { transition: transform .2s ease; }

/* Zichtbare focusring in navy (wit op donker). */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid #2C2C7F; outline-offset: 3px; box-shadow: 0 0 0 5px #FFFFFF; border-radius: 4px;
}
.vk-on-dark a:focus-visible, .vk-on-dark button:focus-visible { outline-color: #FFFFFF; box-shadow: 0 0 0 5px #2C2C7F; }

/* Ankers landen onder de sticky header (82 px desktop, kleiner op mobiel). */
[id].e-con, [id].elementor-element { scroll-margin-top: 90px; }
@media (max-width: 767px) { [id].e-con, [id].elementor-element { scroll-margin-top: 80px; } }

@media (prefers-reduced-motion: reduce) {
  .elementor-button:active { transform: none; }
}

/* Nieuwskaartje (loop-item 538, tools/generate_theme_parts.py): klikbare kaart zoals op de pagina's. De custom CSS van
   een loop-item laadt Elementor niet mee, daarom hier. Geldt voor elk loop-item met de klasse vk-card. */
.e-loop-item .vk-card { box-shadow: 0 1px 2px rgba(44,44,127,.05), 0 8px 24px rgba(44,44,127,.07); transition: transform .18s ease, box-shadow .18s ease; }
.e-loop-item .vk-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(44,44,127,.06), 0 14px 32px rgba(44,44,127,.12); }
.e-loop-item .vk-card:active { transform: translateY(0); }
.e-loop-item .vk-card .elementor-widget-theme-post-title .elementor-heading-title::after { content: " →"; color: #D3066E; }
.e-loop-item .vk-card .elementor-widget-theme-post-excerpt p { margin: 0; }
/* "Lees meer" onder de samenvatting (eerste 22 woorden, tools/generate_theme_parts.py); de hele kaart is de link (10-11-2026). */
.e-loop-item .vk-card .elementor-widget-theme-post-excerpt .elementor-widget-container::after { content: "Lees meer"; display: block; margin-top: .5em; color: #D3066E; font-weight: 600; font-size: .9375rem; }
@media (prefers-reduced-motion: reduce) { .e-loop-item .vk-card, .e-loop-item .vk-card:hover { transition: none; transform: none; } }
@media (prefers-contrast: more) { .e-loop-item .vk-card { border-color: #424242; box-shadow: none; } }

/* Vergrendeld: afdelingen die nog niet open zijn (Beachcourt, Sporthal, Sportcafé & vergaderen; 10-11-2026, was sinds
   29-10-2026 een pil "Komt binnenkort" achter de naam). Klasse vk-locked op de drie afdelingspanelen in het uitklapmenu
   (header-template 151: 2e8f2b7, 15bc40d, 60482cd, via wordpress/header-style.json) en op de drie tegels in het hero-vak
   van de homepage (tools/generate_home.py, LOCKED). De inhoud wordt gedempt en is niet meer klikbaar; er ligt een schuine
   roze band "Komt binnenkort" overheen. De pagina's zelf blijven bereikbaar op hun url. Weghalen zodra een afdeling live
   gaat: klasse eraf (header-style.json en LOCKED), bin/build-header en bin/build-home. */
.vk-locked { position: relative; overflow: hidden; pointer-events: none; cursor: default; }
.vk-locked > * { opacity: .45; filter: saturate(.6); }
.vk-locked::after {
  content: "Komt binnenkort"; position: absolute; left: -15%; right: -15%; top: var(--vk-lock-y, 64%); z-index: 3;
  transform: translateY(-50%) rotate(var(--vk-lock-angle, -10deg)); padding: .6em 0; text-align: center;
  font-family: "Outfit", sans-serif; font-size: .8rem; font-weight: 700; line-height: 1; letter-spacing: .12em; text-transform: uppercase;
  background: #D3066E; color: #FFFFFF; box-shadow: 0 6px 18px rgba(44,44,127,.18); pointer-events: none;
}
@media (max-width: 767px) { .vk-locked::after { font-size: .7rem; letter-spacing: .1em; } }
@media (prefers-contrast: more) { .vk-locked > * { opacity: .7; filter: none; } }
/* De band ligt onder de afdelingsnaam (die blijft leesbaar): op de tegels over de ondertitel (64%), in het uitklapmenu over
   het begin van de lijst; op tablet en mobiel staan de panelen onder elkaar en is het midden goed. */
.elementor-element-2e8f2b7.vk-locked, .elementor-element-15bc40d.vk-locked, .elementor-element-60482cd.vk-locked { --vk-lock-y: 47%; --vk-lock-angle: -12deg; }
@media (max-width: 1024px) {
  .elementor-element-2e8f2b7.vk-locked, .elementor-element-15bc40d.vk-locked, .elementor-element-60482cd.vk-locked { --vk-lock-y: 50%; }
}

/* Nieuwscarousel op de homepage (loop-carousel 01ec962: 4 per rij, 10 px ertussen). Elementor start Swiper alleen bij
   twee of meer slides; met precies één bericht (testsite, 10-11-2026) kreeg dat kaartje de volle breedte. Zonder Swiper
   zetten we de kaartbreedte zelf: 4 per rij, tablet 2, mobiel 1. Met twee of meer berichten doet Swiper dit zelf. */
.elementor-widget-loop-carousel .swiper:not(.swiper-initialized) .swiper-wrapper { gap: 10px; }
.elementor-widget-loop-carousel .swiper:not(.swiper-initialized) .swiper-slide { width: calc((100% - 30px) / 4); }
@media (max-width: 1024px) { .elementor-widget-loop-carousel .swiper:not(.swiper-initialized) .swiper-slide { width: calc((100% - 10px) / 2); } }
@media (max-width: 767px) { .elementor-widget-loop-carousel .swiper:not(.swiper-initialized) .swiper-slide { width: 100%; } }

/* Roze kaders "Aan te vullen door De Vlaskoel" (.vk-todo, tools/vk_blocks.py) zijn sinds de livegang (10-11-2026) alleen
   zichtbaar voor wie is ingelogd: bezoekers zien ze niet, de klant ziet in wp-admin-sessie nog wat er ontbreekt.
   Weer voor iedereen tonen: deze regel weghalen en bin/build-header draaien. */
body:not(.logged-in) .vk-todo { display: none !important; }/* End custom CSS */