/*------------------------------------*\
  #COLORS
\*------------------------------------*/
/*------------------------------------*\
  #ANIMATION
\*------------------------------------*/
/*------------------------------------*\
  #RESPONSIVE
\*------------------------------------*/
/*------------------------------------*\
  #BRAND 2026
  Cobytes Look and Feel (juni 2021, versie zonder blauw/geel), op verzoek van
  Jeroen toegepast op 7 okt 2026: paarse header met koraal logo, brede
  merkbanden in de hero en koraal knoppen met paarse tekst (PDF p.35-36, 73-76).

  Gecompileerd via brand.scss naar brand.css, dat assets.php op elke pagina direct
  na main.css laadt (niet uitgesteld): zo winnen deze regels ook van de critical
  CSS en van de pas na load toegepaste main.css op home en managed hosting.
\*------------------------------------*/
.c-btn--primary {
  background-color: #FF785C;
  color: #383158;
}
.c-btn--primary:hover, .c-btn--primary:focus-visible {
  background-color: #383158;
  color: #FFFFFF;
  box-shadow: 0 0 0 0.2rem #FF785C;
}

.m-main-header {
  background-color: #383158;
}
.m-main-header .m-main-header__top {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}
.m-main-header--mobile.scroll:not(.isActive) {
  background-color: #383158;
}
.m-main-header--mobile.scroll:not(.isActive) .m-main-header__top .c-logo__img {
  display: none;
}
.m-main-header--mobile.scroll:not(.isActive) .m-main-header__top .c-logo__img--dark-bg {
  display: inline-block;
}
.m-main-header--mobile.isActive {
  background-color: #FFFFFF;
}

.m-main-header--dark-bg .o-header-nav-list > ul > li.current-menu-item > a {
  color: #FFFFFF;
  text-decoration-color: #FF785C;
}

.m-main-header--dark-bg .o-header-nav-list > ul > li.menu-item-has-children:hover > a {
  color: #383158;
}

.m-main-header--dark-bg .o-drop-down:not(.o-drop-down--mobile-menu):not(.is-active) .o-drop-down__btn {
  border: 0.2rem solid #FF785C;
  border-radius: 10rem;
}

.o-drop-down__container ul li a:hover {
  color: #c2462c;
}
.o-drop-down__container ul li a:hover::after {
  border-color: #c2462c;
}

.m-main-header--dark-bg .o-drop-down.is-active .o-drop-down__btn:hover span,
.m-main-header--dark-bg .o-drop-down.is-active .o-drop-down__btn:hover i::before {
  color: #c2462c;
}

.o-dropdown-text .js-answer a {
  color: #383158;
  text-decoration: underline;
  text-decoration-color: #FF785C;
  text-underline-offset: 0.2em;
}
.o-dropdown-text .js-answer a:hover, .o-dropdown-text .js-answer a:focus-visible {
  color: #c2462c;
}

.s-mobile-header-padding--dark-bg {
  background-color: #383158;
}

.home .m-main-hero {
  background-color: #383158;
}
.home .m-main-hero .o-cta-content-container__hero {
  background-color: transparent;
}
.home .m-main-hero .o-cta-content-container__hero h1,
.home .m-main-hero .o-cta-content-container__hero p {
  color: #FFFFFF;
}
.home .m-main-hero .o-cta-content-container__hero h2 {
  color: #FF785C;
}
.home .m-main-hero .c-btn--secondary {
  border-color: #FFFFFF;
  color: #FFFFFF;
}
.home .m-main-hero .c-btn--secondary:hover, .home .m-main-hero .c-btn--secondary:focus-visible {
  background-color: #FFFFFF;
  color: #383158;
}

.m-main-hero--large-text {
  background-color: #f5f5f7;
  background-image: linear-gradient(120deg, #f7f7f9 0%, #eceef3 55%, #e3e6ed 100%);
}
.m-main-hero--large-text .o-cta-content-container__hero-text-block,
.m-main-hero--large-text .o-cta-content-container__hero {
  background-color: transparent;
}

@media screen and (max-width: 767px) {
  .m-services-hero-mobile .o-container.o-container--primary .o-cta-content-container__hero-text-block .o-image-shape {
    display: block;
    order: -1;
    height: auto;
    margin: 0 0 2.4rem;
  }
  .m-services-hero-mobile .o-container.o-container--primary .o-cta-content-container__hero-text-block .o-image-shape .o-image-shape__foreground {
    position: static;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
  }
}