@charset "UTF-8";

/* spacer vóór de headerfoto zodat die niet onder de sticky menu's valt */
.sticky-offset {
  height: var(--sticky-offset);
}

/* alleen desktop: height animeren (zacht), mobiel: direct */
@media (min-width: 992px) {
  .sticky-offset {
    transition: height 0.45s ease-in-out;
    will-change: height;
  }
}

/* bonus: anchors/scroll naar secties vallen ook niet onder header */
.header,
section[id] {
  scroll-margin-top: calc(var(--sticky-offset, 80px) + 12px);
}

/* ==========================
   TOPBAR / NAVBAR gedrag
   ========================== */
.topbar {
  transition: transform 0.45s ease-in-out;
  will-change: transform;
}

.topbar.topbar--hidden {
  transform: translateY(-100%);
}

:root {
  --nav-pad-y-default: 0.75rem;
  --nav-pad-y-raised: 0.25rem;
  --nav-link-h-default: 1;
  --nav-link-h-raised: 0.85;
}

#site-navbar {
  transition: transform 0.45s ease-in-out, padding 0.45s ease-in-out, min-height 0.45s ease-in-out;
  will-change: transform, padding;
  padding-top: var(--nav-pad-y-default);
  padding-bottom: var(--nav-pad-y-default);
}

/* Raised gedrag alleen op desktop */
@media (min-width: 992px) {
  #site-navbar.navbar--raised {
    transform: translateY(calc(-1 * var(--topbar-h, 0px)));
    padding-top: var(--nav-pad-y-raised);
    padding-bottom: var(--nav-pad-y-raised);
  }

  #site-navbar .navbar-nav .nav-link {
    transition: line-height 0.35s ease-in-out, padding 0.35s ease-in-out;
    line-height: calc(1.5 * var(--nav-link-h-default));
  }

  #site-navbar.navbar--raised .navbar-nav .nav-link {
    line-height: calc(1.5 * var(--nav-link-h-raised));
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  #site-navbar .site-logo {
    transform-origin: left center;
  }
}

/* ==========================
   HEADER hoogte (CMS wint)
   ========================== */
.header {
  position: relative;
  overflow: hidden; /* voorkomt dat media/content de header visueel "oprekt" */
  z-index: 1;
  height: var(--header-height, auto);
}

/* Alleen als er GEEN CMS hoogte is gezet */
.header:not([style*="--header-height"]) {
  min-height: 350px;
}

@media (max-width: 991.98px) {
  .header:not([style*="--header-height"]) {
    min-height: 140px;
  }
}

/* Header varianten (1- en 2-koloms) gebruiken dezelfde basis */
.header-one-col,
.header-two-col {
  height: var(--header-height, auto);
  overflow: hidden;
}

/* Media in header: vult de header */
.header picture,
.header img,
.header video {
  width: 100%;
  height: 100%;
  max-height: 800px;
  object-fit: cover;
  display: block;
}

/* Achtergrond-media variant (div met background-image) */
.header-media {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  display: block;
  min-height: 280px;
}

/* Als CMS hoogte is gezet, dan moet de media ook niet "hoger willen" */
.header[style*="--header-height"] .header-media {
  min-height: 0;
}

/* ==========================
   VIDEO in header
   ========================== */
.header-video,
.header-video-embed {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  background: #000;
}

.header-video iframe,
.header-video-embed iframe,
.header-video video,
.header-video-embed video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  max-height: none;
  transform: translate(-50%, -50%);
  border: 0;
  display: block;
  pointer-events: none;
  object-fit: cover;
}

@media (min-aspect-ratio: 16/9) {
  .header-video iframe,
  .header-video-embed iframe,
  .header-video video,
  .header-video-embed video {
    width: 100%;
    height: 56.25vw;
  }
}

@media (max-aspect-ratio: 16/9) {
  .header-video iframe,
  .header-video-embed iframe,
  .header-video video,
  .header-video-embed video {
    width: 177.78vh;
    height: 100%;
  }
}

/* Overlay voor layout 3 (tekst over beeld) */
.header-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.header-overlay .container-xxl,
.header-overlay .row,
.header-overlay .header-block {
  pointer-events: auto;
}

/* Center-variant voor tekst-only layout (layout 4) */
.header-text-centered .header-left .container-xxl {
  justify-content: center !important;
  text-align: center !important;
  align-items: center !important;
}

/* Desktop: tekstblok layout 2 / 5 / 6 centreren in kolom, maar tekstregels links */
@media (min-width: 992px) {
  .header-layout-2 .header-content {
    flex: 0 0 auto;
    width: auto;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* ==========================
   MOBIEL: 2-koloms header stackt
   ========================== */
@media (max-width: 991.98px) {
  .header-two-col {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible;
  }

  .header-two-col .row.h-100,
  .header-two-col .row.align-items-stretch.h-100 {
    height: auto !important;
    min-height: 0 !important;
  }

  .header-two-col .header-left {
    height: auto !important;
    min-height: 0 !important;
  }

  .header-two-col .header-media {
    height: clamp(240px, 55vw, 420px) !important;
    min-height: clamp(240px, 55vw, 420px) !important;
  }

  .header-two-col .header-video,
  .header-two-col .header-video-embed {
    height: clamp(240px, 55vw, 420px) !important;
    min-height: clamp(240px, 55vw, 420px) !important;
  }

  .header-left .container-xxl {
    display: flex;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    min-height: 0;
  }

  .header-content {
    overflow: visible;
    font-size: 0.95rem;
    line-height: 1.35;    
  }

  .header-content h1,
  .header-content h2 {
    margin-bottom: 0.5rem;
    line-height: 1.2;
  }

  .header-content h1 {
    font-size: clamp(1.25rem, 4.8vw, 1.6rem);
  }

  .header-content h2 {
    font-size: clamp(1.1rem, 4.2vw, 1.4rem);
  }

  .header-content p {
    margin-bottom: 0.5rem;
  }

  .header-content .btn,
  .header-content .btn1,
  .header-content .btn1small,
  .header-content .button {
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }

  .header-content [aria-label="Breadcrumb"] {
    margin-top: 0.5rem;
  }

  .header:not([style*="--header-height"]) .header-media,
  .header:not([style*="--header-height"]) .header-video,
  .header:not([style*="--header-height"]) .header-video-embed {
    min-height: 140px;
  }
}

/* Desktop: content in kolom 1 uitlijnen met linkerkant van het logo */
@media (min-width: 992px) {
  .header-left .container-xxl[data-align-with-logo] {
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: var(--logo-pad-left, 0px);
  }
}

/* Contentblok basis */
.header-block {
  text-align: left;
}

.content-section {
  position: relative;
  z-index: 3;
}

/* ===== Header content animaties ===== */
@keyframes header-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Startstate */
.anim-on-scroll {
  opacity: 0;
  transform: translateY(12px);
}

/* Als 'ie in beeld komt */
.anim-on-scroll.is-inview,
.anim-fade-up.is-inview {
  animation: header-fade-up 0.8s ease-out 0.1s forwards;
}

/* Stagger */
.anim-stagger.is-inview > * {
  opacity: 0;
  transform: translateY(8px);
  animation: header-fade-up 0.6s ease-out forwards;
}

.anim-stagger.is-inview > *:nth-child(1) {
  animation-delay: 0.15s;
}

.anim-stagger.is-inview > *:nth-child(2) {
  animation-delay: 0.25s;
}

.anim-stagger.is-inview > *:nth-child(3) {
  animation-delay: 0.35s;
}

.anim-stagger.is-inview > *:nth-child(4) {
  animation-delay: 0.45s;
}

.anim-stagger.is-inview > *:nth-child(5) {
  animation-delay: 0.55s;
}

/* Respecteer gebruikersinstelling: minder beweging */
@media (prefers-reduced-motion: reduce) {
  .sticky-offset {
    transition: none !important;
  }

  .anim-on-scroll,
  .anim-fade-up,
  .anim-stagger,
  .anim-stagger > * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .topbar,
  #site-navbar,
  #site-navbar .site-logo,
  #site-navbar .navbar-nav .nav-link {
    transition: none !important;
  }
}

/* Voorkom horizontale scroll in content-sectie op small screens */
@media (max-width: 767.98px) {
  .content-section {
    overflow-x: clip;
  }
}

/* Flex children mogen krimpen */
.content-section .d-flex,
.content-section .col {
  min-width: 0;
}

/* Lange woorden/URL’s in CMS-content mogen breken */
.content-section .content-body {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Layout 7: desktop oude hero houden */
.header-layout-7 {
  @media (min-width: 992px) {
    height: var(--header-height, auto);
  }
}

/* Layout 7: mobiel zoals layout 1, zonder vaste headerhoogte */
@media (max-width: 991.98px) {
  .header-layout-7 {
    height: auto !important;
    min-height: 0 !important;
  }

  .header-layout-7 .header-video-mobile {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
  }

  .header-layout-7 .header-video-mobile iframe,
  .header-layout-7 .header-video-mobile video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}