/* =========================================================
   Ormilon styles — DARK MODE
   - Dark-mode toggle styles + .dark-mode overrides
   ========================================================= */


/* --- Overgenomen uit main.css --- */


.dark-mode .featured-content {
  background-color: var(--bg-color-dark, var(--bg-color, #121212));
}


.dark-mode .animated-main-logo {
  filter: none;
}


.dark-mode .animated-footer-logo {
  filter: none;
}


.dark-mode .module-orm-tabs{
  background-color: var(--tabs-bg-dark, var(--tabs-bg, transparent));
}


.dark-mode .module-orm-tabs .orm-tabs__subtitle{ color: var(--white); }


.dark-mode .module-orm-tabs .orm-tabs__item{ background: #121212; }


.dark-mode .module-orm-tabs .orm-tabs__item__header .sub{ color: #a1a1aa; }


/* Dark mode */
.dark-mode .module-orbit-icons .icon-col p{ color: #a1a1aa; }


.dark-mode .module-orbit-icons .icon-col > img{ background: rgba(153,96,234,0.22); }

/* --- Bestaande dark-mode rules --- */

#darkModeToggle{
	position: relative;
	display: flex;
	justify-content: space-between;
	width: 80px;
	background: var(--purple);
	height: 30px;
	align-items: center;
	border-radius: 30px;
	padding: 20px 15px;
	cursor: pointer;
}

#darkModeToggle:after,
#darkModeToggle:before{
	content: "";
	width: 20px;
	height: 20px;
	background-size: cover;
	display: block;
}

#darkModeToggle:after{
	background-image: url(../icons/sun-white.svg);
}

#darkModeToggle:before{
	background-image: url(../icons/moon-white.svg);
}

#darkModeToggle span{
	position: absolute;
	width: 30px;
	height: 30px;
	left: 5px;
	background: var(--white);
	border-radius: 50px;
	transition: all 0.3s;
}

.dark-mode #darkModeToggle span{
	left: 45px;
}

.dark-mode{
	background: var(--black);
	color: var(--white);
}

.dark-mode .secondary-button{
	background: var(--white);
	border-color: var(--white);
	color: var(--black);
}

.dark-mode .ic-tab .tab-head .tab-link {
    color: #fff;
}
.dark-mode .secondary-button:hover{
	background: var(--black);
	color: var(--white);
	border-color: var(--white);
}
.dark-mode .ic-tab .tab-body .icon-img:hover {
    border-color: var(--white);
}
.dark-mode .main-header.scrolled,
.dark-mode .main-header:hover{
	background-color: var(--black);
}

.dark-mode .main-header .menu a{
	color: var(--white);
}
.dark-mode a {
    color: var(--white);
}


.dark-mode .arrow-button{
	color: var(--white);
}

.dark-mode .arrow-button:after{
	filter: contrast(0) brightness(10);
}

.dark-mode .products .product-col:hover{
	border-color: var(--white);
}

.dark-mode .icon-tab .tab-head .tab-link{
	color: var(--white);
}

.dark-mode  .icon-tab .icon-img img{
	filter: contrast(0) brightness(20);
}

.dark-mode .icon-tab .tab-body .icon-img:hover{
	border-color: var(--white);
}


.dark-mode .slider-arrow{
	filter: contrast(0) brightness(20);
}

.dark-mode .price-card .card-row .card.best-choise{
	color: var(--black);
}

.dark-mode .best-choise .arrow-button{
	color: var(--black);
}

.dark-mode .best-choise .arrow-button:after{
	filter: none;
}

.dark-mode button#decrease, .dark-mode button#increase{
	color: var(--white);
}

.dark-mode .sidebar-link{
	color: var(--white);
}

.dark-mode .contact-featured .quote-block h3{
	color: var(--white);
}

.dark-mode .wysiwyg-row a:not(:hover){
	color: var(--white);
}

/* Alleen veldtekst wit in dark mode voor formulier 1272 */
.dark-mode #wpforms-1272 input[type="text"],
.dark-mode #wpforms-1272 input[type="email"],
.dark-mode #wpforms-1272 input[type="tel"],
.dark-mode #wpforms-1272 input[type="url"],
.dark-mode #wpforms-1272 textarea {
    color: var(--white);
}
.dark-mode #wpforms-1272 input::placeholder,
.dark-mode #wpforms-1272 textarea::placeholder {
    color: var(--white);
    opacity: 1; /* Zorgt dat het niet grijzig lijkt */
}
.dark-mode #wpforms-1272 label.wpforms-field-label {
    color: var(--white);
}

.dark-mode .hero-banner{
	position: relative;
}

.dark-mode .hero-banner .container{
	position: relative;
	z-index: 1;
}

.dark-mode .hero-hexagon:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--black);
	opacity: 0.7;
	top: 0;
	left: 0;
}

.dark-mode .hero-banner:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--black);
	opacity: 0.3;
	top: 0;
	left: 0;
}
.dark-mode .main-header .toggle-menu span{
	background-color: var(--white);
}

.dark-mode .sidebar{
	background-color: var(--black);
}

.dark-mode .tab-post .category-tab-list .primary-button:not(.active) {
	color: var(--white);
	background: transparent;
	border-color: transparent;
}

.dark-mode .icon-accordion .accordion-main .accordion-title-trigger h4{
	color: var(--white);
}

.dark-mode .pricing-box .inner-price-second div {
    color: #a2a2a2;
}

.dark-mode .featured-content {
    background-color: var(--bg-color-dark);
}
.dark-mode .producten {
    background-color: var(--bg-color-dark);
}
.dark-mode-img{
	display: none;
}

body.dark-mode .dark-mode-img{
	display: block;
}

body.dark-mode .light-mode-img{
	display: none;
}

@media (max-width: 991px) {
	.dark-mode .main-header .main-nav {
		background: var(--black);
	}
	.dark-mode .pricing-tab:is(.mobile-tab) section, .dark-mode .pricing-tab:is(.mobile-tab) .inner-child-page {
		background-color: var(--black);
	}
}

@media(max-width: 768px){
	.dark-mode .pricing-tab td:nth-child(5),
	.dark-mode .pricing-tab td:nth-child(6) {
		border-top: 1px solid #dcdcdc;
		color: var(--green);
	}
	 .dark-mode .mobile-location {
    color: var(--white);!important;
  }
   a.mobile-location {
        text-decoration: underline;
    }
}

@media(max-width: 767px){
	.dark-mode .pricing-tab:is(.mobile-tab) section.active,
	.dark-mode .pricing-tab:is(.mobile-tab) .inner-child-page{
		background: var(--black);
	}
}
.dark-mode .orm-feature{
  background-color: var(--bg-color-dark, var(--bg-color, #111111));
}
.dark-mode .orm-feature .ormf-text {
 color: var(--white);
}
.dark-mode .orm-feature h2{
	color: var(--white);
}
/* ==== Dark Mode – global ==== */
.dark-mode{
  background: var(--black);
  color: var(--white);
}

/* Toggle */
#darkModeToggle{
  position: relative; display:flex; justify-content:space-between;
  width:80px; height:30px; background:var(--purple); align-items:center;
  border-radius:30px; padding:20px 15px; cursor:pointer;
}
#darkModeToggle:after, #darkModeToggle:before{
  content:""; width:20px; height:20px; background-size:cover; display:block;
}
#darkModeToggle:after{ background-image:url(../icons/sun-white.svg); }
#darkModeToggle:before{ background-image:url(../icons/moon-white.svg); }
#darkModeToggle span{
  position:absolute; width:30px; height:30px; left:5px; background:var(--white);
  border-radius:50px; transition:all .3s;
}
.dark-mode #darkModeToggle span{ left:45px; }

.dark-mode .secondary-button{
  background: var(--white); border-color: var(--white); color: var(--black);
}
.dark-mode .secondary-button:hover{
  background: var(--black); color: var(--white); border-color: var(--white);
}
.dark-mode .main-header.scrolled,
.dark-mode .main-header:hover{ background-color: var(--black); }
.dark-mode .main-header .menu a{ color: var(--white); }
.dark-mode .main-header .toggle-menu span{ background-color: var(--white); }
.dark-mode .copy-right-part .copy-right *{ color: var(--white); }

/* Componenten die je in main.css had met .dark-mode — verzameld hier */
.dark-mode .featured-content{ background-color: var(--bg-color-dark, var(--bg-color, #121212)); }
.dark-mode .producten{ background-color: var(--bg-color-dark, var(--bg-color, #121212)); }

/* Tabs modules */
.dark-mode .module-orm-tabs{ background-color: var(--tabs-bg-dark, var(--bg-color, #454545)); }
.dark-mode .module-orm-tabs .orm-tabs__subtitle{ color: var(--white); }

/* Orbit icons */
.dark-mode .module-orbit-icons .icon-col p{ color:#a1a1aa; }
.dark-mode .module-orbit-icons .icon-col > img{ background: rgba(153,96,234,0.22); }

/* Slick / sliders / icon-tab */
.dark-mode .icon-tab .tab-head .tab-link{ color:#fff; }
.dark-mode .icon-tab .icon-img img{ filter: contrast(0) brightness(20); }
.dark-mode .icon-tab .tab-body .icon-img:hover{ border-color: var(--white); }
.dark-mode .ic-tab .tab-head .tab-link { color:#fff; }
.dark-mode .ic-tab .tab-body .icon-img:hover { border-color: var(--white); }

/* Footer / typografie / links */
.dark-mode .best-choise .arrow-button{ color: var(--black); }
.dark-mode .arrow-button{ color: var(--white); }
.dark-mode .arrow-button:after{ filter: contrast(0) brightness(10); }

/* Form 1272 */
.dark-mode #wpforms-1272 input[type="text"],
.dark-mode #wpforms-1272 input[type="email"],
.dark-mode #wpforms-1272 input[type="tel"],
.dark-mode #wpforms-1272 input[type="url"],
.dark-mode #wpforms-1272 textarea{
  color: var(--white);
}
.dark-mode #wpforms-1272 input::placeholder,
.dark-mode #wpforms-1272 textarea::placeholder{
  color: var(--white); opacity:1;
}
.dark-mode #wpforms-1272 label.wpforms-field-label{ color: var(--white); }

/* Hero-banner hexa overlay (zoals je had) */
.dark-mode .hero-banner{ position:relative; }
.dark-mode .hero-banner .container{ position:relative; z-index:1; }
.dark-mode .hero-hexagon:after,
.dark-mode .hero-banner:after{
  content:""; position:absolute; width:100%; height:100%; top:0; left:0;
  background: var(--black); opacity:.7;
}
.dark-mode .hero-banner:after{ opacity:.3; }

/* Sidebar / mobile menu */
@media (max-width: 991px){
  .dark-mode .main-header .main-nav{ background: var(--black); }
  .dark-mode .pricing-tab:is(.mobile-tab) section,
  .dark-mode .pricing-tab:is(.mobile-tab) .inner-child-page{ background-color: var(--black); }
}
@media (max-width: 768px){
  .dark-mode .pricing-tab td:nth-child(5),
  .dark-mode .pricing-tab td:nth-child(6){
    border-top:1px solid #dcdcdc; color: var(--green);
  }
  .dark-mode .mobile-location{ color: var(--white); }
  a.mobile-location{ text-decoration: underline; }
}
@media (max-width: 767px){
  .dark-mode .pricing-tab:is(.mobile-tab) section.active,
  .dark-mode .pricing-tab:is(.mobile-tab) .inner-child-page{ background: var(--black); }
}

/* WYSIWYG / content tinten */
.dark-mode .wysiwyg-row a:not(:hover){ color: var(--white); }
.dark-mode .contact-featured .quote-block h3{ color: var(--white); }
.dark-mode .pricing-box .inner-price-second div{ color: #a2a2a2; }

/* ===== Ormilon feature blok ===== */
.dark-mode .orm-feature{
  background-color: var(--bg-color-dark, var(--bg-color, #111111));
}
.dark-mode .orm-feature h2{ color: var(--white); }
.dark-mode .orm-feature .ormf-text{ color: #ffffff; }

/* ===== Header Hero – dark mode (los van main.css) ===== */
.dark-mode .header-hero{
  background-color: var(--hero-bg-dark, var(--hero-bg, #111111));
}
/* desktop: rechterhelft overlay komt van ::after op sectie */
@media (min-width: 992px){
  .dark-mode .header-hero::after{
    background: var(--hero-right-overlay-dark, var(--hero-right-overlay, rgba(0,0,0,.45)));
  }
}
/* mobiel: overlay ligt op het image-blok (::after van .header-hero-right) */
@media (max-width: 991px){
  .dark-mode .header-hero .header-hero-right::after{
    background: var(--hero-right-overlay-dark, var(--hero-right-overlay, rgba(0,0,0,.45)));
  }
}

/* Eyebrow in dark (zoals gevraagd) */
.dark-mode .header-hero .header-hero-eyebrow{
  font-size: 18px; font-weight: 500; color: #fff; margin: 0 0 6px 0;
  padding: 12px 16px; border-radius: 100px;
  border: 1px solid rgb(77 87 63 / 50%);
  background: rgb(100 110 86 / 57%);
}

/* Light/dark assets switch */
.dark-mode-img{ display: none; }
body.dark-mode .dark-mode-img{ display: block; }
body.dark-mode .light-mode-img{ display: none; }
.dark-mode .orm-uspnd{
  background-color: var(--uspnd-bg-dark, var(--uspnd-bg, #111111));
}
.dark-mode .uspnd-grid{background: #323135 !important;}
.dark-mode .card-top {background: #6258748c !important;}
.dark-mode .under-desc {color: #ffffffb3 !important;}

/* Footer */
.dark-mode .site-footer{ background-color: var(--footer-bg-dark, var(--footer-bg, #121212)); }
.dark-mode .site-footer .widget-title{ color: var(--white); }
.dark-mode .site-footer .fw-acc-icon{ filter: brightness(0) invert(1); }
.dark-mode .footer-wrap { background-color: var(--footer-bg-dark, var(--footer-bg, #121212)); }
.dark-mode .subfooter { background-color: #1d1d1d }
.dark-mode .mp-desc { color: #1d1d1d }
.dark-mode .mp-title { color: #1d1d1d }

/* ===== Chart style ===== */
.dark-mode .pricing-section {background-color: var(--tabs-bg-dark, var(--bg-color-dark, #323135));}
.dark-mode .pricing-intro p { color:#fff; }
.dark-mode .pricing-chart-component {background-color: #3f3f3f;}
.dark-mode .cpu-select .label { color:#fff; }
.dark-mode .specs{ color:#fff; }
.dark-mode .cpu-toggle-container{background-color: #9d9d9d;}
.dark-mode .cpu-btn {color: #fff;}
.dark-mode .chart-card {background-color: #e5e5e5;}
.dark-mode .faq-knowledge-section {background-color: var(--tabs-bg-dark, var(--bg-color-dark, #323135));}
.dark-mode .faq-header h2 { color:#fff; }
.dark-mode .col-title { color:#fff; }
.dark-mode .faq-trigger{ background-color: #4a4a4a; color:#fff; }
.dark-mode .faq-item { background-color: #4a4a4a; color:#fff; }
.dark-mode .question-text { color:#fff; }
.dark-mode .faq-content { background-color: #4a4a4a; color:#fff; }
.dark-mode .faq-content-inner p { color:#fff; }
.dark-mode .icon-box{background-color: #d8f850;}
.dark-mode .icon-line{ background-color:#4a4a4a; }
.dark-mode .faq-item.active .icon-box{background-color: #d8f850;}
.dark-mode .faq-item.active .icon-line{ background-color:#4a4a4a; }

/* ==== Dark mode - blog posts ==== */
.dark-mode .post-hero-title{ color: var(--white); }
.dark-mode .post-hero-chip{ background-color: #333333; color: var(--white); }
.dark-mode .post-hero-author-name{color: var(--white);}
.dark-mode .post-hero-separator{ background-color: var(--white);}
.dark-mode .post-hero-meta{ color: var(--white); }
.dark-mode .post-layout {color: var(--white);}
.dark-mode .post-latest{ background-color: #3d3d3d;}
.dark-mode .post-card{ background-color: var(--black); }
.dark-mode .post-card__tag{ background-color: #d8f850; color: #333333; }
.dark-mode .post-card__reading-time{color: #ccd1db;}
.dark-mode .post-card__meta-bottom{ color:var(--green);}
.dark-mode .post-toc__title{ color: var(--white); }
.dark-mode .post-card__reading-time::before {background-image: url('../icons/clock-time-white.svg');}
.dark-mode .post-hero-reading-time::before {background-image: url('../icons/clock-time-white.svg');}
.dark-mode .blog-topics {background-color:#323135; border: 2px solid #28272a;}
.dark-mode .blog-topics__chip {background: #d8f850; color: #333333;}
.dark-mode .blog-latest-small {background-color:#323135; border: 2px solid #28272a;}
.dark-mode .latest-blog__featured-date::before {background-image: url('../icons/calendar-white.svg');}
.dark-mode .latest-blog__featured {background-color:#28272a; border: 2px solid #28272a;}
.dark-mode .latest-blog__featured-excerpt {color: #fff;}
.dark-mode .latest-blog__chip{ background-color: #d8f850; color: #333333; }
.dark-mode .latest-blog__featured-author{ color: #fff; }
.dark-mode .post-card__readmore::after{    filter: contrast(0) brightness(10);}
.dark-mode .latest-blog__card{background-color:#28272a; border: 2px solid #28272a;}
.dark-mode .post-card__title{color: #fff;}
.dark-mode .post-card__title a{color: #fff;}
.dark-mode .latest-blog__card-tag{ background-color: #d8f850; color: #333333; }
.dark-mode .latest-blog__card-author{color: #fff;}
.dark-mode .latest-blog__category-slider .post-card__readmore{color: #fff;}
.dark-mode .latest-blog__category-slider .post-card__readmore:hover{color:var(--purple);}
.dark-mode .slick-next::before {background-image: url(../icons/arrow-right-black.svg);}
.dark-mode .latest-blog__featured-date{ color: #fff;}
.dark-mode .category-hero-intro{ color: #fff;}
.dark-mode .category-archive{background-color: #323134;}
.dark-mode .post-card{background-color:#28272a; border: 2px solid #28272a;}
.dark-mode .category-archive__pagination .page-numbers{border: 1px solid var(--purple); color:#fff;background: #ff575700;}
.dark-mode .category-archive__pagination .page-numbers.current {background: var(--brand-purple);border-color: var(--brand-purple);}
.dark-mode .sidebar-blog.sidebar-blog--cta{ background: var(--purple);}