/* =============================== */
/*         Donkere Modus CSS       */
/* =============================== */

/* Algemene body en tekstkleur */
html.dark-mode, body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}

/* =============================== */
/*          Achtergronden         */
/* =============================== */

.dark-mode body,
.dark-mode .block,
.dark-mode .block.even,
.dark-mode .block.odd,
.dark-mode .card,
.dark-mode .list-box-a,
.dark-mode .faq-answer-wrapper,
.dark-mode .content-text .short-description,
.dark-mode .intro-description,
.dark-mode .dropdown-menu,
.dark-mode footer,
.dark-mode header,
.dark-mode section,
.dark-mode .menu,
.dark-mode .top-menu-block,
.dark-mode .main-menu-block,
.dark-mode .box-cta-right,
.dark-mode .short-description.review,
.dark-mode .project-inner .img .layer,
.dark-mode .orange-wrapper,
.dark-mode .card-item-b a.img,
.dark-mode .card-dark.white,
.dark-mode .block.odd-2,
.dark-mode .block-recent-werk-2.odd-2,
.dark-mode .team-item-c .c2 {
    background-color: #1c1c1c !important;
}

/* =============================== */
/*         Tekstkleur             */
/* =============================== */

.dark-mode,
.dark-mode p,
.dark-mode li,
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode .label-cat,
.dark-mode .truncate-text .lees-meer,
.dark-mode .project-inner .infos span,
.dark-mode .faq-question,
.dark-mode .faq li h3,
.dark-mode .faq-answer-wrapper,
.dark-mode .block-intro p,
.dark-mode .nice-list ul li,
.dark-mode .team-item-c .c2,
.dark-mode .project-inner,
.dark-mode .card-item-b .inner-a,
.dark-mode .inline-item .c2,
.dark-mode .reading-time {
    color: #e0e0e0 !important;
}

.dark-mode a,
.dark-mode a:hover {
    color: #f86b00 !important;
}

/* =============================== */
/*         Formulieren            */
/* =============================== */

.dark-mode input,
.dark-mode select,
.dark-mode textarea {
    background-color: #222 !important;
    color: #fff !important;
    border: 1px solid #444 !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: #aaa !important;
}

/* =============================== */
/*            Knoppen             */
/* =============================== */

.dark-mode .button,
.dark-mode button,
.dark-mode input[type="submit"] {
    background-color: #333 !important;
    color: #fff !important;
    border-color: #555 !important;
}

.dark-mode .button.orange,
.dark-mode .button.black {
    background-color: #f86b00 !important;
    color: #fff !important;
    border-color: #f86b00 !important;
}

/* =============================== */
/*        Lijnen en borders       */
/* =============================== */

.dark-mode .line,
.dark-mode hr {
    background-color: #444 !important;
}

.dark-mode table,
.dark-mode th,
.dark-mode td {
    border-color: #444 !important;
}

/* =============================== */
/*   ::before & icon filters      */
/* =============================== */

.dark-mode li:before,
.dark-mode ul li:before,
.dark-mode .nice-list ul li:before,
.dark-mode .card-item-b a.img:before,
.dark-mode .arrow.nav-arrow:before,
.dark-mode a.faq-question:after,
.dark-mode ul.faq li a.question:after,
.dark-mode blockquote:before,
.dark-mode blockquote:after,
.dark-mode .project-inner .infos span:before,
.dark-mode .truncate-text .lees-meer:before,
.dark-mode .star-review,
.dark-mode .indicator-loader {
    filter: invert(100%) brightness(200%) !important;
}

/* =============================== */
/*     Navigatie en Menu Styles   */
/* =============================== */

.dark-mode .main-nav a,
.dark-mode .top-menu-block a,
.dark-mode .top-menu-block ul li a,
.dark-mode .main-menu-block .dropdown-item {
    color: #e0e0e0 !important;
}

.dark-mode .main-nav a:hover,
.dark-mode .top-menu-block a:hover,
.dark-mode .main-menu-block .dropdown-item:hover {
    color: #fff !important;
    background-color: transparent !important;
}

.dark-mode .dropdown-menu li.title a {
    color: #fff !important;
}

.dark-mode .dropdown-menu {
    background-color: #222 !important;
}

/* =============================== */
/*     Speciale elementen         */
/* =============================== */

.dark-mode .label-cat {
    background-color: #333 !important;
    color: #fff !important;
}

.dark-mode .box-share-page img,
.dark-mode .zoom-eff img,
.dark-mode .logo-opdr {
    filter: brightness(1.2) !important;
}

/* =============================== */
/*     AANVULLINGEN - DARK MODE    */
/* =============================== */

/* Formulier placeholders (aanvulling forms.css) */
.dark-mode ::placeholder {
  color: #aaa !important;
  opacity: 1 !important;
}

.dark-mode :-ms-input-placeholder {
  color: #aaa !important;
}

.dark-mode ::-ms-input-placeholder {
  color: #aaa !important;
}

/* Validation errors */
.dark-mode .validation_error,
.dark-mode .validation_error p {
  color: #ff6b6b !important;
}

/* Form icon (select dropdown arrow) */
.dark-mode .ginput_container_select:before {
  filter: invert(1) brightness(2) !important;
}

/* Menu: overschrijf witte achtergrond en zwarte tekst */
.dark-mode header.sticky,
.dark-mode .main-menu-block,
.dark-mode .top-menu-block {
  background-color: #1c1c1c !important;
}

.dark-mode .navbar-light .navbar-nav .nav-link {
  color: #e0e0e0 !important;
}

.dark-mode .main-menu-block .dropdown-menu {
  background-color: #222 !important;
}

/* Icons en pseudo-elementen in knoppen */
.dark-mode .button.cta span:after,
.dark-mode .button.cta2:before,
.dark-mode .ginput_container_select:before,
.dark-mode .button.arrow-hover:hover span:after,
.dark-mode a.button.txt-black span:after {
  filter: invert(100%) brightness(200%) !important;
}

/* CTA gradient knoppen (accent) */
.dark-mode a.button.accent,
.dark-mode .cta-menu ul li a.nav-link {
  background: linear-gradient(122.22deg, #a34fe5 21.63%, #a34fe5 43.63%, #7133b2 84.31%) !important;
  border-color: #a34fe5 !important;
}

/* Tekst in accent knoppen */
.dark-mode a.button.accent,
.dark-mode .cta-menu ul li a.nav-link {
  color: #fff !important;
}

/* Menu-hover overlay effect */
.dark-mode .cta-menu ul li a.nav-link:hover::before,
.dark-mode a.button.accent:hover::before {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* List hover (bijvoorbeeld li.has-icon) */
.dark-mode li.has-icon:hover {
  background-color: #2a2a2a !important;
}

/* Border schaduw uit menu verwijderen */
.dark-mode header.is-scrolling {
  box-shadow: 0 2px 3px rgba(255, 255, 255, 0.05) !important;
}

/* Buttons hover (bij gebrek aan specifieke varianten) */
.dark-mode a.button:hover {
  background-color: #f86b00 !important;
  color: #fff !important;
}

.dark-mode .top-menu-block {
    background-color: #262626 !important;
}

/* =============================== */
/*     Pijl-iconen in knoppen     */
/* =============================== */

/* Algemene pijlen in knoppen */
.dark-mode .button.cta span:after,
.dark-mode .button.cta2:before,
.dark-mode .button.arrow-hover:hover span:after,
.dark-mode a.button span:after,
.dark-mode .cta-menu ul li a.nav-link span:after,
.dark-mode .ginput_container_select:before {
    filter: invert(100%) brightness(200%) !important;
}

/* =============================== */
/*     Donkere modus pijlen        */
/* =============================== */

.dark-mode .button span:after,
.dark-mode a.button span:after,
.dark-mode .button.cta span:after,
.dark-mode .button.arrow-hover span:after,
.dark-mode .cta-menu ul li a.nav-link span:after {
    background-image: url('../images/arrow-right-button.svg') !important;
    filter: none !important; /* Geen invert, want wit is al correct */
}

/* =========================================== */
/* UI & UX blokken knoppen - dark mode         */
/* =========================================== */

/* Witte tekst standaard voor knoppen */
.dark-mode .button,
.dark-mode .button span,
.dark-mode a.button,
.dark-mode a.button span {
    color: #ffffff !important;
}

/* Donkerder bij hover */
.dark-mode .button:hover,
.dark-mode a.button:hover {
    color: #cccccc !important;
}

.dark-mode .button:hover span,
.dark-mode a.button:hover span {
    color: #cccccc !important;
}

/* =========================================== */
/* .item-box-a hover - dark mode fix           */
/* =========================================== */

.dark-mode .item-box-a:hover {
    background-color: #2a2a2a !important;
}

.dark-mode .item-box-a,
.dark-mode .item-box-a *,
.dark-mode .item-box-a:hover,
.dark-mode .item-box-a:hover * {
    color: #ffffff !important;
}

/* =========================================== */
/* Knoptekstkleur bij hover terug naar wit     */
/* =========================================== */

.dark-mode a.button:hover,
.dark-mode a.button:hover span,
.dark-mode .button:hover,
.dark-mode .button:hover span {
    color: #ffffff !important;
}

/* =========================================== */
/* UX Scan blok - aangepaste achtergrondkleur  */
/* =========================================== */

.dark-mode .block.block-cta-2.default-padding {
    background-color: #262626 !important;
}

/* =========================================== */
/* Onze opdrachtgevers blok - dark mode kleur  */
/* =========================================== */

.dark-mode .block.block-opdrachtgevers {
    background-color: #262626 !important;
}

/* =========================================== */
/* Ons Team blok - dark mode kleur             */
/* =========================================== */

.dark-mode .block.block-team,
.dark-mode .block.block-one-review {
    background-color: #262626 !important;
}

/* =========================================== */
/* FAQ items - aangepaste achtergrondkleur     */
/* =========================================== */

.dark-mode ul.faq li {
    background-color: #262626 !important;
}

.dark-mode ul.faq li:hover {
    background-color: #2a2a2a !important;
}

/* =========================================== */
/* Correctie: Ons Team blok achtergrond         */
/* =========================================== */

.dark-mode .block.block-team,
.dark-mode .block.block-team-members,
.dark-mode .block.block-team-overview,
.dark-mode .block.home .block-team,
.dark-mode .team-member-item,
.dark-mode .block-team {
    background-color: #262626 !important;
}

/* =========================================== */
/* Specifiek: Ons Team blok (.block-7.odd)     */
/* =========================================== */

.dark-mode .block.block-7.odd.default-padding {
    background-color: #262626 !important;
}

/* =========================================== */
/* Bekijk Team knop - witte pijl op hover      */
/* =========================================== */

.dark-mode a.button:hover span:after,
.dark-mode .button:hover span:after {
    background-image: url('../images/arrow-right-button.svg') !important;
    filter: none !important;
}

/* =========================================== */
/* Oranje knop met pijl - witte hover-pijl     */
/* =========================================== */

.dark-mode .button.orange.arrow-hover:hover span:after {
    background-image: url('../images/arrow-right-button.svg') !important;
    filter: none !important;
}

/* ===================================================== */
/* Owl-dots achtergrond met afgeronde hoeken (links/rechts) */
/* ===================================================== */

.dark-mode .owl-theme .owl-dots {
    border-radius: 0 50px 50px 0 !important;
    padding-left: 10px;
    padding-right: 10px;
    background-color: transparent; /* geen achtergrond als fallback */
    overflow: hidden;
}

/* ===================================================== */
/* Visuele afronding owl-dots zonder knoppen te storen  */
/* ===================================================== */

.dark-mode .block.block-7 .owl-theme .owl-dots {
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 30px;
    background-color: #1e1e1e;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* ========================================================== */
/* Alleen eerste en laatste knoppen afronden in button groep  */
/* ========================================================== */

.dark-mode .button:first-child,
.dark-mode button:first-child,
.dark-mode input[type="submit"]:first-child {
    border-top-left-radius: 30px !important;
    border-bottom-left-radius: 30px !important;
}

.dark-mode .button:last-child,
.dark-mode button:last-child,
.dark-mode input[type="submit"]:last-child {
    border-top-right-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
}

.dark-mode footer .socials img { 
    filter:invert(1); 
}

.dark-mode .nav-wrap-slider a.nav-arrow:before {
    filter: invert(0%) brightness(0%) !important;
}

.dark-mode .star-reviews-wrapper div {
    filter:none !important;
}

/* ============================================== */
/* Toegankelijkheids-knop zelf (.tgl-opener)      */
/* ============================================== */

.dark-mode .tgl-opener:hover {
    background-color: #F86B00 !important;
}

.dark-mode .tgl-opener:hover svg,
.dark-mode .tgl-opener:hover svg *,
.dark-mode .tgl-opener:hover i {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* ====================================================================== */
/* Herstel hover-stijlen voor toegankelijkheidsmenu-items (uitgeklapt)   */
/* ====================================================================== */

.dark-mode .tgl-wrapper .inner-content ul li a:hover:before {
    background-color: #F86B00 !important;
}

.dark-mode .tgl-wrapper .inner-content ul li a:hover {
    color: #F86B00 !important;
}

.dark-mode .tgl-wrapper .inner-content ul li a:hover svg,
.dark-mode .tgl-wrapper .inner-content ul li a:hover svg path,
.dark-mode .tgl-wrapper .inner-content ul li a:hover svg * {
    fill: #ffffff !important;
    color: #ffffff !important;
}

.dark-mode .tgl-wrapper .inner-content ul li:hover .label,
.dark-mode .tgl-wrapper .inner-content ul li:hover span.label,
.dark-mode .tgl-wrapper .inner-content ul li:hover .label-text,
.dark-mode .tgl-wrapper .inner-content ul li a:hover .label,
.dark-mode .tgl-wrapper .inner-content ul li a:hover span.label,
.dark-mode .tgl-wrapper .inner-content ul li a:hover .label-text,
.dark-mode .tgl-wrapper .inner-content ul li a:hover [class*="label"] {
    background-color: #F86B00 !important;
    color: #ffffff !important;
}

/* ================================================= */
/* Breadcrumbs tekstkleur aanpassen in dark mode     */
/* ================================================= */

.dark-mode .breadcrumbs,
.dark-mode .breadcrumbs a,
.dark-mode .breadcrumbs span {
    color: #b3b3b3 !important;
}

/* ======================================= */
/* .card-dark achtergrondkleur in dark mode */
/* ======================================= */

.dark-mode .card-dark {
    background-color: #2a2a2a !important;
}

/* ================================================= */
/* Breadcrumbs tekstkleur - lichtgrijs in dark mode  */
/* ================================================= */

.dark-mode .breadcrumbs,
.dark-mode .breadcrumbs a,
.dark-mode .breadcrumbs span {
    color: #d3d3d3 !important;
}

/* ===================================================================== */
/* Breadcrumbs tekstkleur forceren naar lichtgrijs in dark mode          */
/* ===================================================================== */

.dark-mode .breadcrumbs a,
.dark-mode .breadcrumbs span,
.dark-mode .breadcrumbs a:link,
.dark-mode .breadcrumbs a:visited,
.dark-mode .breadcrumbs * {
    color: #d3d3d3 !important;
}

/* ===================================================================== */
/* Breadcrumbs <a> overschrijven van globale .dark-mode a oranje kleur   */
/* ===================================================================== */

.dark-mode .breadcrumbs a,
.dark-mode .breadcrumbs a:link,
.dark-mode .breadcrumbs a:visited {
    color: #d3d3d3 !important;
}

/* ======================================================== */
/* Breadcrumbs links zichtbaar maken in dark mode           */
/* ======================================================== */

.dark-mode .breadcrumbs a,
.dark-mode .breadcrumbs a:link,
.dark-mode .breadcrumbs a:visited {
    color: #d3d3d3 !important;
    text-decoration: none !important;
}

.dark-mode .breadcrumbs a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

/* =========================================================================== */
/* Specifiek overschrijven van breadcrumb linkkleur binnen .dark-mode context  */
/* =========================================================================== */

.dark-mode .breadcrumb-box a,
.dark-mode .breadcrumb-box a:link,
.dark-mode .breadcrumb-box a:visited {
    color: #d3d3d3 !important;
    text-decoration: none !important;
}

.dark-mode .breadcrumb-box a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

/* =========================================================================== */
/* Breadcrumbs donkerder grijs (#A7A7A7) in dark mode                          */
/* =========================================================================== */

.dark-mode .breadcrumb-box a,
.dark-mode .breadcrumb-box a:link,
.dark-mode .breadcrumb-box a:visited {
    color: #A7A7A7 !important;
    text-decoration: none !important;
}

.dark-mode .breadcrumb-box a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

/* =========================================================================== */
/* Breadcrumbs hover - zelfde kleur (#A7A7A7) met underline in dark mode       */
/* =========================================================================== */

.dark-mode .breadcrumb-box a,
.dark-mode .breadcrumb-box a:link,
.dark-mode .breadcrumb-box a:visited,
.dark-mode .breadcrumb-box a:hover {
    color: #A7A7A7 !important;
    text-decoration: none !important;
}

.dark-mode .breadcrumb-box a:hover {
    text-decoration: underline !important;
}

/* =================================================================== */
/* Verberg visuele overgang: onderbalk bij UI/UX blok - dark unify    */
/* =================================================================== */

.dark-mode .block.block-3.default-padding.b-f-img.even {
    background-color: #121212 !important;
}

/* ====================================================================== */
/* Onderbalk onder projectcategorieën (block-4) afstemmen op achtergrond  */
/* ====================================================================== */

.dark-mode .block.block-4.default-padding.even {
    background-color: #121212 !important;
}

/* =================================================================== */
/* Projectdetailpagina - "Bereikte resultaten" achtergrond in dark mode */
/* =================================================================== */

.dark-mode .block.block-5.default-padding.odd.b-f-img {
    background-color: #1e1e1e !important;
}

/* =================================================================== */
/* Projectdetailpagina - .box-cta-right achtergrond in dark mode       */
/* =================================================================== */

.dark-mode .box-cta-right {
    background-color: #1e1e1e !important;
}

/* ======================================================================== */
/* Iets lichtere achtergrond voor .box-cta-right in dark mode (#2a2a2a)    */
/* ======================================================================== */

.dark-mode .box-cta-right {
    background-color: #2a2a2a !important;
}

/* ======================================================================== */
/* Cijfers in bereikte resultaten wit maken in dark mode                   */
/* ======================================================================== */

.dark-mode .box-cta-right .result-list li strong,
.dark-mode .box-cta-right .result-list li b,
.dark-mode .box-cta-right .result-list li span.number {
    color: #ffffff !important;
}

/* ========================================================================== */
/* Forceren van witte opsommingscijfers binnen .box-cta-right in dark mode   */
/* ========================================================================== */

.dark-mode .box-cta-right ol li,
.dark-mode .box-cta-right ol li::marker,
.dark-mode .box-cta-right ol li::before,
.dark-mode .box-cta-right ol li span:first-child {
    color: #ffffff !important;
}

/* ======================================================================== */
/* Verwijder ongewenste filter op cijfers in .counter-ul ul li::before     */
/* ======================================================================== */

.dark-mode .counter-ul ul li::before {
    filter: none !important;
    color: #ffffff !important;
}

/* ======================================================================== */
/* Donkergrijze achtergrond voor USP-blokken op de Over ons pagina         */
/* ======================================================================== */

.dark-mode .usp-wrapper .item,
.dark-mode .usp-wrapper .item:hover {
    background-color: #1e1e1e !important;
}

/* ======================================================================== */
/* Donkergrijze achtergrond voor .team-item-c .c1 in dark mode             */
/* ======================================================================== */

.dark-mode .team-item-c .c1 {
    background-color: #1e1e1e !important;
}

/* ======================================================================== */
/* Donkerdere achtergrond (#1c1c1c) voor block-4 op homepage in dark mode  */
/* ======================================================================== */

.dark-mode .block.block-4.default-padding.even {
    background-color: #1c1c1c !important;
}


/* ======================================================================== */
/* Donkere weergave van expertiseblokken op mobiel                         */
/* ======================================================================== */

@media screen and (max-width: 768px) {
  .dark-mode .c2 .button {
	  background-color: transparent !important;
  }
  
  .dark-mode .item-box-a:hover {
 	 background-color: transparent !important;
 }
  
  .dark-mode .c2 .button:hover {
	  background-color: transparent !important;
  }
  
  .dark-mode .c2 a.button.mobile-transform:before {
  	filter: invert(1) !important;
  }
}


/* ======================================================================== */
/* Donkere topbar en wit hamburgericoon in dark mode                       */
/* ======================================================================== */

.dark-mode .emm-icon-wrapper {
  background-color: #121212 !important;
}

.dark-mode .emm-icon-wrapper .hamburger,
.dark-mode .emm-icon-wrapper .hamburger span,
.dark-mode .emm-icon-wrapper .hamburger::before,
.dark-mode .emm-icon-wrapper .hamburger::after {
  background-color: #ffffff !important;
}

/* ======================================================================== */
/* Donkere topbar en wit hamburgericoon (fallbacks en bredere selectors)   */
/* ======================================================================== */

.dark-mode .emm-icon-wrapper {
  background-color: #121212 !important;
}

.dark-mode .emm-icon-wrapper .hamburger,
.dark-mode .emm-icon-wrapper .hamburger span,
.dark-mode .emm-icon-wrapper .hamburger::before,
.dark-mode .emm-icon-wrapper .hamburger::after {
  background-color: #ffffff !important;

}

.dark-mode .emm-icon-wrapper .hamburger svg,
.dark-mode .emm-icon-wrapper .hamburger svg path {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

.dark-mode #emm-icon-wrapper .hamburger img {
	filter: invert(1) !important;
}

.dark-mode .emm-icon-wrapper .menu-toggle,
.dark-mode .emm-icon-wrapper .menu-toggle span {
  background-color: #ffffff !important;
}

.dark-mode #emm-icon-wrapper {
	background-color: #000 !important;
}

/* ======================================================================== */
/* Fix voor achtergrond mobile menu     */
/* ======================================================================== */

@media screen and (max-width: 768px) {

	.dark-mode nav.emm-mobile-menu .menu {
		background-color: #001422 !important;
	}
}