/* =========================================================
   EDITION BG — VARIABLES
   ========================================================= */

body.editionBG {
  --edition-black: #6400ca;
  --link-color: #6400ca;
  --edition-accent: #C499F0;
  --edition-yellow: #FFC20E;
  --campaign-image-shift: -130px;
  --campaign-image-extra-height: 130px;
  color: var(--edition-black);
}

#doemee .teaser-square,
#doemee .teaser-ellipse,
#doemee .teaser-square-col-md-2-trapeze-mirror,
#doemee .teaser-square-col-md-5-diamond,
#doemee .teaser-square-envelope {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#doemee svg {
  color: #6400CA !important;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

body.editionBG .sonsbeek-navbar.scrolled,
body.editionBG .show-on-mobile.navbar.sonsbeek-navbar.mobile-nav.sticky-top {
  background: transparent !important;
  background-color: transparent !important;
}

body.editionBG .hide-on-mobile.navbar.sonsbeek-navbar.sticky-top.scrolled {
  border-bottom-color: var(--edition-black) !important;
}

body.editionBG ul.sonsbeek-menu {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  padding: 0;
  margin: 0;
}

body.editionBG ul.sonsbeek-menu > li,
body.editionBG ul.sonsbeek-menu > li > a,
body.editionBG ul.sonsbeek-menu > li > .nav-link {
  margin: 0 !important;
  padding: 0 !important;
}

body.editionBG .submenu-border-wrap::before {
  background: var(--edition-black);
}

body.editionBG .sonsbeek-submenu,
body.editionBG .sonsbeek-submenu * {
  background-color: transparent !important;
}


/* =========================================================
   GLOBAL TEXT / LINKS
   ========================================================= */

body.editionBG h1,
body.editionBG h2,
body.editionBG h3,
body.editionBG h4,
body.editionBG h5,
body.editionBG h6,
body.editionBG p,
body.editionBG li,
body.editionBG a,
body.editionBG span,
body.editionBG strong,
body.editionBG em,
body.editionBG label,
body.editionBG .nav-link,
body.editionBG .submenu-border-wrap,
body.editionBG figcaption {
  color: var(--edition-black);
}

body.editionBG a.current,
body.editionBG a[aria-current="page"],
body.editionBG .nav-link.current {
  color: var(--edition-accent) !important;
  text-decoration-color: var(--edition-accent) !important;
  border-color: var(--edition-accent) !important;
}

body.editionBG a:hover,
body.editionBG a:active,
body.editionBG a:focus,
body.editionBG a:focus-visible,
body.editionBG #toggle-submenu:hover,
body.editionBG #toggle-submenu:active,
body.editionBG #toggle-submenu:focus,
body.editionBG #toggle-submenu:focus-visible {
  color: var(--edition-accent) !important;
  text-decoration-color: var(--edition-accent) !important;
  border-color: var(--edition-accent) !important;
}


/* =========================================================
   BORDERS / FORMS / SVG
   ========================================================= */

body.editionBG hr,
body.editionBG table,
body.editionBG td,
body.editionBG th,
body.editionBG input,
body.editionBG textarea,
body.editionBG select,
body.editionBG button {
  border-color: var(--edition-black);
}

body.editionBG svg,
body.editionBG svg * {
  stroke: var(--edition-black);
}

/* Bij voorkeur later vervangen door class i.p.v. id als SVG vaker voorkomt. */
body.editionBG #Layer_1 .st0 {
  fill: none;
  stroke: var(--edition-black) !important;
}

body.editionBG #Layer_1 .st1 {
  fill: var(--edition-black);
  stroke: none !important;
}


/* =========================================================
   IMAGES / FILTERS
   ========================================================= */

body.editionBG img,
body.editionBG image {
  filter: url(#duotone-purple) !important;
  transition: filter 0.2s ease;
}

body.editionBG img.campaignImage {
  display: block;
  width: 100%;
  height: auto;
  filter: none !important;
}

body.editionBG a:hover img,
body.editionBG a:hover image,
body.editionBG figure:hover img,
body.editionBG figure:hover image,
body.editionBG .image-wrap:hover img,
body.editionBG .image-wrap:hover image,
body.editionBG .card:hover img,
body.editionBG .card:hover image {
  filter: none !important;
}

body.editionBG .news-img-bg {
  opacity: 0 !important;
}


/* =========================================================
   SMALL UTILITIES
   ========================================================= */


body.editionBG .mobile-negative {
  margin-bottom: -50px;
}

body.editionBG .content-sections {
  background: white !important;
}


/* =========================================================
   RIGHT BAR / INTERMEDIARY
   ========================================================= */

body.intermediary.editionBG {
  --right-bar-top: calc(
    var(--nav-padding-top) +
    (1em * var(--nav-line-height)) +
    var(--nav-padding-bottom)
  );
}

body.intermediary.editionBG:has(.sonsbeek-navbar.scrolled) {
  --right-bar-top: calc(
    var(--nav-padding-top) +
    (1em * var(--nav-line-height)) +
    var(--nav-padding-bottom) +
    0.13rem
  );
}

body.intermediary.editionBG::after {
  content: "";
  position: fixed;
  top: var(--right-bar-top);
  right: 0;
  width: var(--page-x);
  height: var(--right-bar-height, 858px);
  background: var(--edition-black);
  z-index: 999;
  pointer-events: none;
}

/* =========================================================
   HERO — BASE SVG
   ========================================================= */

.heroSvgVisual svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 83vh;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  left: 5%;
  transform: none !important;
}

.heroState--left .heroTextInner {
  padding-left: 0.05rem !important;
}

.heroState--right .heroTextInner {
  padding-left: 0.45rem !important;
}

/* =========================================================
   HERO — DESKTOP / TABLET
   ========================================================= */

@media (min-width: 768px) {
  .heroSwapWrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: calc(var(--hero-height) + var(--campaign-image-extra-height));
    background: var(--edition-yellow);
    z-index: 0;
    pointer-events: none;
    transform: translateY(var(--campaign-image-shift));
  }

  .heroState {
    position: absolute;
    inset: 0;
    height: var(--hero-state-height);
    min-height: var(--hero-state-height);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
  }

  .heroState.is-active {
    opacity: 1;
    pointer-events: none;
    z-index: 30;
  }

  .heroState > .row,
  .heroState .heroSplit {
    height: var(--hero-height);
    min-height: var(--hero-height);
  }

  .heroState.is-active a,
  .heroState.is-active button,
  .heroState.is-active .heroCarouselCta,
  .heroState.is-active #heroCarouselCta {
    position: relative;
    z-index: 40;
    pointer-events: auto;
  }

  .heroHit {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: 20;
    background: transparent;
  }

  .heroHit--left {
    left: 0;
  }

  .heroHit--right {
    right: 0;
  }

  .heroImageCol,
  .heroImageInner,
  .heroTextCol {
    display: flex;
    height: var(--hero-height);
    min-height: var(--hero-height);
    margin-bottom: 0 !important;
  }

  body.editionBG img.campaignImage,
  body.editionBG .heroState .campaignImage {
    display: block;
    width: calc(100% + 25px) !important;
    height: calc(var(--hero-height) + var(--campaign-image-extra-height)) !important;
    min-height: calc(var(--hero-height) + var(--campaign-image-extra-height)) !important;

    margin-left: -25px;
    margin-top: 0 !important;

    transform: translateY(var(--campaign-image-shift));
    transform-origin: top center;

    padding: 0 !important;
    object-fit: cover;
    object-position: top center;
    filter: none !important;
    vertical-align: top;
  }

  .heroSvgCol {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: var(--hero-svg-height);
    min-height: var(--hero-svg-height);
    margin-top: var(--hero-svg-offset);
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;
  }

  .heroSvgInner,
  .heroSvgVisual {
    width: 100%;
    height: var(--hero-height);
    min-height: var(--hero-height);
  }

  .heroSvgVisual {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 20px;
    box-sizing: border-box;
  }

  .heroSvgVisual svg {
    vertical-align: top;
  }

  .heroTextCol--yellow {
    position: relative;
    z-index: 1;
  }

  .heroTextCol--yellow .heroTextInner {
    margin-left: 1.20rem !important;
  }

  .yellow-sections {
    position: relative;
    width: calc(100% + 1.5rem + 1.25rem);
    min-height: var(--hero-height);
    margin-left: -1.25rem;
    margin-right: -1.5rem;
    background: transparent;
    overflow: visible;
  }

  .yellow-sections::before {
    content: "";
    position: absolute;
    top: var(--campaign-image-shift);
    left: -8px;
    right: -8px;
    height: calc(var(--hero-height) + var(--campaign-image-extra-height) + 5px);
    background: var(--edition-yellow);
    z-index: -1;
    pointer-events: none;
  }

  .yellow-sections > * {
    position: relative;
    z-index: 1;
  }

  .teaser-rect {
    position: relative;
    width: 100.2%;
    aspect-ratio: 100 / 74 !important;
    overflow: visible;
  }

  .teaser-rect-col-md-10 {
    position: relative;
    aspect-ratio: 1000 / 620 !important;
    min-width: 102.2%;
    height: auto;
    overflow: visible;
  }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

  body.editionBG img.campaignImage {
    width: calc(100% + 25px) !important;
    min-width: 110vw !important;
    min-height: 110svh;
    margin-left: -25px;
    padding: 0 !important;
    object-fit: cover;
    filter: none !important;
  }

  body.intermediary #sonsbeek-subsubmenu:not(.archive-subsubmenu) {
    position: relative !important;
    top: auto !important;
  }

  .heroTextCol,
  .heroImageCol {
    min-height: 100svh;
    display: flex;
  }

  .heroSplit--mobile .heroTextInner {
    padding-left: 0 !important;
    margin-left: 0.35rem !important;
    margin-bottom: 3.5rem !important;
  }

  .heroImageInner,
  .heroTextCol > * {
    flex: 1 1 auto;
  }

  body.editionBG .mobile-nav::after {
    background: var(--edition-black);
  }

  body.intermediary.editionBG:has(.sonsbeek-navbar.scrolled) {
  --right-bar-top: calc(
    var(--nav-padding-top) +
    (1em * var(--nav-line-height)) +
    var(--nav-padding-bottom) -
    0.1rem
    );
  }

  .carousel-arrow.right.carousel-arrow-next {
    transform: translateX(-1.5rem);
  }

}

@media (min-width: 768px) {
  body.editionBG {
    --hero-height: 91vh;
    --hero-state-height: var(--hero-height);
  }

  .heroSwapWrap {
    position: relative;
    height: var(--hero-height);
    min-height: var(--hero-height);
    isolation: isolate;
    overflow: visible;
  }
}

@media (min-width: 768px) and  (max-width: 1199.98px) {
  .heroSwapWrap .heroTextCol {
    transform: translateY(-0.5rem);
  }

  .heroSwapWrap .heroSvgCol {
    transform: translateY(-1.6rem);
  }

  body.intermediary.editionBG {
    --right-bar-top: calc(
    var(--nav-padding-top) +
    (1em * var(--nav-line-height)) +
    var(--nav-padding-bottom) -
    0.1rem
    );
  }

  body.intermediary.editionBG:has(.sonsbeek-navbar.scrolled) {
  --right-bar-top: calc(
    var(--nav-padding-top) +
    (1em * var(--nav-line-height)) +
    var(--nav-padding-bottom) +
    0rem
    );
  }

}

@media (min-width: 1200px) {
  .heroSwapWrap .heroTextCol{
    transform: translateY(-0.2rem);
  }

  .heroSwapWrap .heroSvgCol {
    transform: translateY(-1rem);
  }
}

/* =========================================================
   EXTRA LARGE DESKTOP
   ========================================================= */

@media (min-width: 1728.98px){ 
  body.editionBG {
    --campaign-image-shift: -177px;
    --campaign-image-extra-height: 177px;
  }

  body.intermediary.editionBG:has(.sonsbeek-navbar.scrolled) {
  --right-bar-top: calc(
    var(--nav-padding-top) +
    (1em * var(--nav-line-height)) +
    var(--nav-padding-bottom) +
    0rem
    );
  }

}