/*!
 * Concern voor Werk – laad-, scroll- en paginatransities + reparaties voor de statische site.
 * Wordt na alle Breakdance-CSS geladen. Klassen op <html>:
 *   js            JavaScript actief            cvw-motion   animaties toegestaan (geen reduced motion)
 *   cvw-intro     intro-gordijn zichtbaar      cvw-ready    pagina klaar, reveals lopen
 *   cvw-failsafe  JS niet op tijd geladen: alles direct tonen
 */

/* ---- Lettertypen (lokaal, voorheen via Google Fonts) -------------------------------- */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/open-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/open-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/open-sans-italic-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/open-sans-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --cvw-navy: #022859;
  --cvw-red: #d92b4b;
  --cvw-soft: #f2f0ef;
  --cvw-ease: cubic-bezier(.22, 1, .36, 1);       /* zacht uitlopen */
  --cvw-ease-in: cubic-bezier(.55, 0, .75, .2);
  --cvw-ease-io: cubic-bezier(.76, 0, .24, 1);    /* gordijn */
  --cvw-ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --cvw-reveal: .95s;
}

/* ---- Koppen: Kumbh Sans ExtraBold (SIL Open Font License 1.1, assets/fonts/OFL-kumbh-sans.txt) ----
   Maten afgestemd op het vorige koplettertype: size-adjust geeft dezelfde x-hoogte, ascent/descent
   dezelfde regelhoogte en basislijn (75/25 bij 100px). */
@font-face { font-family: "Kumbh Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/kumbh-sans-latin-800-normal.woff2") format("woff2");
  size-adjust: 94.2%; ascent-override: 79.62%; descent-override: 26.54%; line-gap-override: 0%; }

/* ---- Basis ------------------------------------------------------------------------- */
html { scroll-padding-top: 110px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Geen horizontale scroll door uitstekende sliders/vormen. */
body { overflow-x: clip; }
main:focus { outline: none; }

.cvw-sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.cvw-skip {
  position: fixed; left: 16px; top: 12px; z-index: 2147483001;
  padding: 10px 18px; border-radius: 999px; background: var(--cvw-red); color: #fff !important;
  font: 700 15px/1.2 "Open Sans", sans-serif; text-decoration: none;
  transform: translateY(-160%); transition: transform .25s var(--cvw-ease);
}
.cvw-skip:focus { transform: none; outline: 3px solid #fff; outline-offset: 2px; }

/* ---- Intro: merkgordijn bij het eerste bezoek -------------------------------------- */
.cvw-curtain { display: none; }
html.cvw-intro .cvw-curtain {
  position: fixed; inset: 0; z-index: 2147483000;
  display: grid; place-items: center;
  background: var(--cvw-navy);
  will-change: transform;
}
.cvw-curtain__inner { display: grid; justify-items: center; gap: 28px; }
.cvw-curtain__logo { width: min(320px, 62vw); height: auto; overflow: visible; }
.cvw-curtain__l1, .cvw-curtain__l2 { animation: cvw-intro-line .8s var(--cvw-ease) both; }
.cvw-curtain__l2 { animation-delay: .09s; }
.cvw-curtain__star {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: cvw-intro-star .9s .18s var(--cvw-ease-back) both, cvw-spin 6s 1.1s linear infinite;
}
.cvw-curtain__bar {
  position: relative; display: block; width: 120px; height: 2px; overflow: hidden;
  border-radius: 2px; background: rgba(255, 255, 255, .16);
}
.cvw-curtain__bar > span {
  position: absolute; inset: 0; background: var(--cvw-red);
  transform-origin: 0 50%; animation: cvw-intro-bar 2.2s .25s var(--cvw-ease) both;
}
html.cvw-intro-out .cvw-curtain {
  pointer-events: none;
  animation: cvw-curtain .95s var(--cvw-ease-io) forwards;
}
html.cvw-intro-out .cvw-curtain__inner { animation: cvw-intro-leave .45s var(--cvw-ease-in) forwards; }
html.cvw-intro-out .cvw-curtain__bar > span { animation: cvw-intro-bar-done .3s var(--cvw-ease) forwards; }

@keyframes cvw-intro-line { from { opacity: 0; transform: translateY(26px); } }
@keyframes cvw-intro-star { from { opacity: 0; transform: rotate(-160deg) scale(.2); } }
@keyframes cvw-spin { to { transform: rotate(360deg); } }
@keyframes cvw-intro-bar { from { transform: scaleX(0); } to { transform: scaleX(.85); } }
@keyframes cvw-intro-bar-done { from { transform: scaleX(.85); } to { transform: scaleX(1); } }
@keyframes cvw-intro-leave { to { opacity: 0; transform: translateY(-24px); } }
@keyframes cvw-curtain {
  to { transform: translateY(-100%); border-bottom-left-radius: 50% 16vh; border-bottom-right-radius: 50% 16vh; }
}

/* ---- Scroll-reveals ---------------------------------------------------------------- */
/* Verborgen beginstand alleen als JS + animatie actief zijn (zonder JS is alles gewoon zichtbaar). */
html.js.cvw-motion:not(.cvw-failsafe) [data-reveal]:not(.is-revealed) { opacity: 0; }
html.js.cvw-motion:not(.cvw-failsafe) [data-split]:not(.is-revealed) { opacity: 1; }
html.js.cvw-motion:not(.cvw-failsafe) [data-split]:not(.is-revealed) .cvw-wi { translate: 0 108%; }

/* Geanimeerd naar de eigen (berekende) eindwaarde: bestaande transforms en opacity blijven intact. */
[data-reveal].is-revealed:not(.is-done) {
  animation: cvw-up var(--cvw-reveal) var(--cvw-ease) backwards;
  animation-delay: var(--cvw-delay, 0ms);
}
[data-reveal].bde-image2.is-revealed:not(.is-done),
[data-reveal].bde-video.is-revealed:not(.is-done),
[data-reveal].bde-advancedslider.is-revealed:not(.is-done) { animation-name: cvw-zoom; animation-duration: 1.15s; }
[data-reveal].bde-button.is-revealed:not(.is-done),
[data-reveal].bde-text-link.is-revealed:not(.is-done) { animation-name: cvw-up-sm; }
[data-reveal].bde-container-link.is-revealed:not(.is-done),
[data-reveal].bde-loop-item.is-revealed:not(.is-done) { animation-name: cvw-card; animation-duration: 1.05s; }
[data-split].is-revealed { animation: none !important; }

/* Kop: woorden glijden omhoog uit een masker */
.cvw-w {
  display: inline-block; vertical-align: top; overflow: hidden;
  padding: .06em .02em .14em; margin: -.06em -.02em -.14em;
}
.cvw-wi { display: inline-block; }
[data-split].is-revealed:not(.is-done) .cvw-wi {
  animation: cvw-word 1.05s var(--cvw-ease) backwards;
  animation-delay: calc(var(--cvw-delay, 0ms) + var(--i, 0) * 55ms);
}

@keyframes cvw-up { from { opacity: 0; translate: 0 34px; } }
@keyframes cvw-up-sm { from { opacity: 0; translate: 0 16px; } }
@keyframes cvw-card { from { opacity: 0; translate: 0 48px; scale: .985; } }
@keyframes cvw-zoom { from { opacity: 0; translate: 0 24px; scale: .955; } }
@keyframes cvw-word { from { translate: 0 108%; } }

/* ---- Foto's: pas tonen als ze helemaal binnen zijn (geen regel-voor-regel-opbouw) --- */
html.js:not(.cvw-failsafe) img.cvw-img:not(.is-loaded) { opacity: 0; }
html.js img.cvw-img { transition: opacity .7s var(--cvw-ease); }


/* ---- Paginatransities (View Transitions, Chrome/Edge/Safari) ----------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  .bde-header-builder { view-transition-name: cvw-header; }
  .onetap-container-toggle .onetap-toggle { view-transition-name: cvw-a11y; }

  /* "fade-through": eerst de oude pagina weg, dan de nieuwe erin (geen troebele mengfase) */
  ::view-transition-old(root) { animation: cvw-vt-out .2s var(--cvw-ease-in) both; }
  ::view-transition-new(root) { animation: cvw-vt-in .55s var(--cvw-ease) .14s both; }
  html.cvw-vt-back::view-transition-old(root) { animation-name: cvw-vt-out-back; }
  html.cvw-vt-back::view-transition-new(root) { animation-name: cvw-vt-in-back; }
  ::view-transition-group(cvw-header) { animation-duration: .5s; animation-timing-function: var(--cvw-ease); }

  /* Gedeelde foto: kaart <-> grote foto van de detailpagina */
  ::view-transition-group(cvw-photo) { animation-duration: .62s; animation-timing-function: var(--cvw-ease); z-index: 1; }
  ::view-transition-image-pair(cvw-photo) { overflow: clip; border-radius: 30px; }
  ::view-transition-old(cvw-photo),
  ::view-transition-new(cvw-photo) { height: 100%; object-fit: cover; animation-duration: .62s; }
  ::view-transition-old(cvw-photo):only-child { animation: cvw-vt-out .2s var(--cvw-ease-in) both; }
  ::view-transition-new(cvw-photo):only-child { animation: cvw-vt-in .55s var(--cvw-ease) .14s both; }
}
@keyframes cvw-vt-out { to { opacity: 0; transform: translateY(-18px); } }
@keyframes cvw-vt-in { from { opacity: 0; transform: translateY(28px); } }
@keyframes cvw-vt-out-back { to { opacity: 0; transform: translateY(18px); } }
@keyframes cvw-vt-in-back { from { opacity: 0; transform: translateY(-28px); } }

/* Terugval voor browsers zonder View Transitions: inhoud zacht weg, header blijft staan. */
html.cvw-leaving main,
html.cvw-leaving .cvw-footer { opacity: 0; translate: 0 -18px; transition: opacity .19s var(--cvw-ease-in), translate .19s var(--cvw-ease-in); }

/* ---- Micro-interacties ------------------------------------------------------------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* Knoppen: het pijl-rondje schuift mee */
  .breakdance .button-atom::after { transition: transform .45s var(--cvw-ease), background-color var(--bde-transition-duration, .3s) ease-in-out; }
  .breakdance .button-atom:hover::after { transform: translateX(4px); }
  .breakdance .button-atom:active { transform: scale(.98); }

  /* Kaarten: lichte lift + foto-zoom */
  .breakdance .bde-container-link:has(> img, > picture) { overflow: clip; isolation: isolate; }
  .breakdance .bde-container-link:has(> img, > picture) img { transition: scale 1.1s var(--cvw-ease), opacity .7s var(--cvw-ease); }
  .breakdance .bde-container-link:has(> img, > picture):hover img { scale: 1.045; }
  .breakdance .bde-loop-item,
  .breakdance .bde-container-link:has(> img, > picture) { transition: translate .6s var(--cvw-ease), box-shadow .6s var(--cvw-ease); }
  .breakdance .bde-loop-item:hover,
  .breakdance .bde-grid > .bde-container-link:hover { translate: 0 -6px; }
  .breakdance .bde-container-link .bde-icon,
  .breakdance .bde-container-link .bde-text-link { transition: translate .45s var(--cvw-ease); }
  .breakdance .bde-container-link:hover .bde-icon { translate: 5px 0; }
}

/* Mobiel menu: items gestaffeld binnen laten komen */
@media (max-width: 1119px) and (prefers-reduced-motion: no-preference) {
  .breakdance-responsive-menu--open .breakdance-menu-list > li { animation: cvw-up-sm .55s var(--cvw-ease) backwards; }
  .breakdance-responsive-menu--open .breakdance-menu-list > li:nth-child(2) { animation-delay: .05s; }
  .breakdance-responsive-menu--open .breakdance-menu-list > li:nth-child(3) { animation-delay: .1s; }
  .breakdance-responsive-menu--open .breakdance-menu-list > li:nth-child(4) { animation-delay: .14s; }
  .breakdance-responsive-menu--open .breakdance-menu-list > li:nth-child(5) { animation-delay: .18s; }
  .breakdance-responsive-menu--open .breakdance-menu-list > li:nth-child(6) { animation-delay: .22s; }
  .breakdance-responsive-menu--open .breakdance-menu-list > li:nth-child(7) { animation-delay: .26s; }
  .breakdance-responsive-menu--open .breakdance-menu-list > li:nth-child(8) { animation-delay: .3s; }
  .breakdance-responsive-menu--open .breakdance-menu-list > li:nth-child(n+9) { animation-delay: .34s; }
}

/* Header: zachte schaduw zodra je scrolt (Breakdance zet --sticky-styles en animeert box-shadow al) */
.breakdance .bde-header-builder.bde-header-builder--sticky-styles { box-shadow: 0 12px 32px -20px rgba(2, 20, 50, .6); }

/* Toegankelijkheidsknop: rustig infaden in plaats van "ploppen" */
html.js.cvw-motion:not(.cvw-ready):not(.cvw-failsafe) .onetap-container-toggle .onetap-toggle { opacity: 0; }
html.js.cvw-motion.cvw-ready .onetap-container-toggle .onetap-toggle { animation: cvw-fade-in .6s .6s var(--cvw-ease) backwards; }
@keyframes cvw-fade-in { from { opacity: 0; translate: 0 12px; } }
/* Het (dichte) paneel staat buiten beeld, maar zijn schaduw lekte de pagina in */
nav.onetap-accessibility.onetap-plugin-onetap:not(.onetap-toggle-open) { box-shadow: none !important; }
/* De widget-CSS laadt asynchroon: tot die er is, de (ongestijlde) widget niet tonen */
html.js:not(.cvw-a11y) nav.onetap-accessibility,
html.js:not(.cvw-a11y) .onetap-container-toggle,
html.js:not(.cvw-a11y) [class^="onetap-markup-"] { display: none !important; }
/* Taalkeuze van de widget heeft maar één taal: verbergen */
nav.onetap-accessibility .onetap-languages,
nav.onetap-accessibility .onetap-list-of-languages { display: none !important; }

/* ---- Formulieren ------------------------------------------------------------------- */
.cvw-form-message { animation: cvw-up-sm .5s var(--cvw-ease) both; }
.cvw-form-message p { margin: 0; }
.cvw-form-fallback { display: grid; gap: 10px; justify-items: start; margin-top: 12px !important; }
.cvw-form-fallback .button-atom { display: inline-flex; align-items: center; padding: 12px 24px !important; text-decoration: none; }
.cvw-form-fallback .button-atom::after { display: none !important; }
.breakdance-form.is-loading .breakdance-form-button__submit { pointer-events: none; opacity: .75; }
.breakdance .cvw-form-privacy .breakdance-form-field__label { display: block; margin: 0; font-size: 14px; font-weight: 400; line-height: 1.5; opacity: .85; cursor: auto; }
.breakdance .cvw-form-privacy a { color: inherit; text-decoration: underline; }

/* ---- Externe inhoud pas na een klik (privacy) -------------------------------------- */
.ee-video-container { position: relative; }
.breakdance .cvw-embed-note {
  position: absolute; left: 20px; right: 20px; bottom: 16px; margin: 0; pointer-events: none;
  color: #fff; font-size: 13px; line-height: 1.4; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
lite-youtube.lyt-activated ~ .cvw-embed-note { display: none; }
lite-youtube.cvw-noposter { background-color: var(--cvw-navy); }
.cvw-embed {
  display: grid; place-items: center; box-sizing: border-box; max-width: 100%;
  padding: 24px; background: #f3f5f7; color: var(--cvw-navy); text-align: center;
}
.cvw-embed__inner { max-width: 440px; }
.breakdance .cvw-embed__text { margin: 0 0 16px; font-size: 16px; line-height: 1.5; color: inherit; }
.cvw-embed__load { cursor: pointer; }
.cvw-embed__link { display: block; margin-top: 12px; font-size: 14px; color: inherit; }

/* ---- Vacaturefilter ---------------------------------------------------------------- */
/* Eigen filter (vervangt Filter Everything Pro); maten gelijk aan de oude widget. */
.cvw-filter { width: 100%; text-align: left; }
.cvw-filter__fields { display: flex; flex-wrap: wrap; gap: 20px; }
.cvw-filter__fields::before { content: ""; } /* lege eerste kolom: dezelfde 20px inspringing als voorheen */
.cvw-filter__field { flex: 1; min-width: 220px; margin: 0 0 24px; }
@media (max-width: 767px) { .cvw-filter__fields { flex-direction: column; } }
.breakdance .cvw-filter__label { display: block; margin: 0 0 8px; color: #fff; font: 600 16px/22.4px "Open Sans", sans-serif; }
.cvw-filter__select {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; padding: 0 40px 0 26px;
  border: 1px solid #ddd; border-radius: 6px; cursor: pointer; color: #333; font: 400 16px/22.4px "Open Sans", sans-serif;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M.6.6 6 6 11.4.6' fill='none' stroke='%236d6d6d'/%3E%3C/svg%3E") no-repeat right 9px center;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cvw-filter__select.is-empty { color: rgba(51, 51, 51, .7); }
.cvw-filter__select option { color: #333; }
.cvw-filter__select:hover { border-color: #999; }
.cvw-filter__select:focus { outline: none; border-color: #000; box-shadow: 0 0 0 1px #000; }
.cvw-filter__select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bde-loop-item[hidden] { display: none !important; }
.cvw-filter-empty {
  margin: 30px 0 0; padding: 28px 32px; border-radius: 30px; background: var(--cvw-soft);
  color: var(--cvw-navy); font: 600 17px/1.5 "Open Sans", sans-serif; text-align: center;
  animation: cvw-up-sm .5s var(--cvw-ease) both;
}
.cvw-filter-empty[hidden] { display: none; }
.cvw-filter-clear {
  margin-left: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--cvw-red); font: inherit; text-decoration: underline; text-underline-offset: 3px;
}
::view-transition-group(*) { animation-timing-function: var(--cvw-ease); }

/* ---- Toegankelijkheidswidget: geen cursorknop op tablet en mobiel (zoals voorheen) - */
@media (max-width: 1024px) {
  nav.onetap-accessibility.onetap-plugin-onetap .onetap-container .onetap-accessibility-settings .onetap-features-container .onetap-features .onetap-box-features .onetap-box-feature.onetap-cursor { display: none !important; }
}

/* ---- 404 --------------------------------------------------------------------------- */
.cvw-404 {
  position: relative; overflow: hidden; isolation: isolate; min-height: 72vh; display: grid; align-items: center;
  padding: 160px 60px 120px; background: var(--cvw-navy); color: #fff;
}
.cvw-404__inner { position: relative; max-width: 760px; }
.cvw-404__code {
  position: absolute; right: -40px; top: -120px; margin: 0; z-index: -1;
  font: 700 clamp(160px, 30vw, 420px)/1 "Kumbh Sans", "Open Sans", sans-serif; color: rgba(255, 255, 255, .07); pointer-events: none;
}
.breakdance .cvw-404 .cvw-404__title { margin: 0 0 20px; color: #fff; font: 700 clamp(38px, 6vw, 64px)/1.05 "Kumbh Sans", "Open Sans", sans-serif; }
.breakdance .cvw-404 .cvw-404__text { color: #fff; margin: 0 0 36px; font: 400 18px/1.6 "Open Sans", sans-serif; max-width: 560px; }
.cvw-404__actions { display: flex; flex-wrap: wrap; gap: 16px; }
@media (max-width: 767px) { .cvw-404 { padding: 140px 24px 90px; } }

/* ---- Afdrukken: alles zichtbaar, geen intro ---------------------------------------- */
@media print {
  [data-reveal], img.cvw-img { opacity: 1 !important; animation: none !important; }
  .cvw-wi { translate: none !important; animation: none !important; }
  .cvw-curtain, .cvw-skip { display: none !important; }
}

/* ---- Minder beweging --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .cvw-wi { animation: none !important; }
  img.cvw-img { transition: none !important; }
  html.cvw-intro .cvw-curtain { display: none; }
}

/* Zonder JavaScript zet boot.js de inline stijlen niet (data-cvw-style, zie tools/build.py: CSP):
   verborgen houden wat verborgen hoort (o.a. de panelen van de toegankelijkheidswidget) */
html:not(.js) [data-cvw-style*="display: none"],
html:not(.js) [data-cvw-style*="display:none"] { display: none !important; }