/* theme-light.css */

/* Theme tokens */
:root{
  --bg: #EDEDE8;     /* gebrokenwit */
  --text: #1e1e1e;   /* bijnazwart */
  --muted: rgba(30,30,30,.75);
  --border: rgba(30,30,30,.15);
}

/* Base */
html, body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Common text */
p, li, span, label, small, strong, em, h1, h2, h3, h4, h5, h6{
  color: var(--text);
}

/* Links (standaard dezelfde kleur als tekst; pas aan als je een linkkleur wil) */
a{ color: inherit; }

/* Subtle separators */
hr{
  border-color: var(--border) !important;
}

/* Als je theme een "dark" class gebruikt, neutraliseer die */
html.sibe-dark{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* theme-light.css */

/* tokens */
html.sibe-light{
  --bg: #EDEDE8;     /* gebrokenwit */
  --text: #1e1e1e;   /* bijnazwart */
  --muted: rgba(30,30,30,.75);
  --border: rgba(30,30,30,.15);
}

/* basis */
html.sibe-light, 
html.sibe-light body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* veel templates zetten in dark mode tekst expliciet wit/licht */
html.sibe-light .tp-text-common-white,
html.sibe-light .tp-text-grey-2,
html.sibe-light .tp-ff-heading,
html.sibe-light p,
html.sibe-light li,
html.sibe-light span{
  color: var(--text) !important;
}

/* menu (bij jou is dit nu te licht) */
html.sibe-light .tp-main-menu nav ul li > a,
html.sibe-light .tp-submenu li a{
  color: var(--text) !important;
}

/* pill/labels (zoals in je screenshot) */
html.sibe-light .tp-portfolio-outcome-bost span{
  color: var(--text) !important;
}

/* uitzondering: hero/sections met afbeelding mogen wél wit blijven */
html.sibe-light .tp-faq-hero-area .tp-section-ai-title,
html.sibe-light .tp-faq-hero-area .tp-text-common-white{
  color: #EDEDE8 !important;
}

/* Footer: alles gebrokenwit */
html.sibe-light .tp-footer-area,
html.sibe-light .tp-footer-area p,
html.sibe-light .tp-footer-area a,
html.sibe-light .tp-footer-area li,
html.sibe-light .tp-footer-area span,
html.sibe-light .tp-footer-area small,
html.sibe-light .tp-footer-area strong,
html.sibe-light .tp-footer-area em,
html.sibe-light .tp-footer-area h1,
html.sibe-light .tp-footer-area h2,
html.sibe-light .tp-footer-area h3,
html.sibe-light .tp-footer-area h4,
html.sibe-light .tp-footer-area h5,
html.sibe-light .tp-footer-area h6,
html.sibe-light .tp-footer-area .tp-text-grey-2,
html.sibe-light .tp-footer-area .tp-text-common-white{
  color: #EDEDE8 !important;
}

/* Footer links (hover mag ook gebrokenwit blijven of wit) */
html.sibe-light .tp-footer-area a:hover{
  color: #fff !important;
}

/* Iconen/SVG in footer ook gebrokenwit */
html.sibe-light .tp-footer-area svg path{
  fill: #EDEDE8 !important;
}
html.sibe-light .tp-footer-area svg [stroke]{
  stroke: #EDEDE8 !important;
}

/* theme-light.css */

/* Light theme defaults */
html.sibe-light{
  --bg: #EDEDE8;        /* gebrokenwit */
  --text: #1e1e1e;      /* bijnazwart */
  --text-on-dark: #EDEDE8;
  --text-on-light: #1e1e1e;
}

/* Default page */
html.sibe-light, 
html.sibe-light body{
  background: var(--bg);
  color: var(--text);
}

/* Laat tekst standaard de variabele volgen */
html.sibe-light p,
html.sibe-light li,
html.sibe-light span,
html.sibe-light a,
html.sibe-light h1, html.sibe-light h2, html.sibe-light h3,
html.sibe-light h4, html.sibe-light h5, html.sibe-light h6{
  color: var(--text);
}

/* Alles binnen deze containers wordt wit */
html.sibe-light .is-dark,
html.sibe-light .tp-footer-area,
html.sibe-light .tp-donkergroen,
html.sibe-light .sticky-black-bg,
html.sibe-light .tp-faq-hero-area{
  --text: var(--text-on-dark);
}

/* (optioneel) ook iconen/svgs in dark sections */
html.sibe-light .is-dark svg path,
html.sibe-light .tp-footer-area svg path,
html.sibe-light .tp-donkergroen svg path,
html.sibe-light .sticky-black-bg svg path,
html.sibe-light .tp-faq-hero-area svg path{
  fill: var(--text-on-dark);
}
html.sibe-light .is-dark svg [stroke],
html.sibe-light .tp-footer-area svg [stroke],
html.sibe-light .tp-donkergroen svg [stroke],
html.sibe-light .sticky-black-bg svg [stroke],
html.sibe-light .tp-faq-hero-area svg [stroke]{
  stroke: var(--text-on-dark);
}


/* Alles binnen deze containers wordt wit */
html.sibe-light .is-light{
  --text: var(--text-on-light);
}

/* (optioneel) ook iconen/svgs in dark sections */
html.sibe-light .is-light svg path{
  fill: var(--text-on-light);
}

html.sibe-light .is-dark svg [stroke]{
  stroke: var(--text-on-light);
}

/* Sticky header moet donkergroen worden */
#header-sticky.sticky,
#header-sticky.is-sticky,
#header-sticky.header-sticky,
#header-sticky.sticky-black-bg{
  background: var(--tp-donkergroen) !important;
  background-color: var(--tp-donkergroen) !important;
}

/* Sommige themes zetten de kleur op een overlay/pseudo-element */
#header-sticky::before,
#header-sticky::after{
  background: var(--tp-donkergroen) !important;
}

:root{
  --gebrokenwit: #EDEDE8;
  --bijnazwart: #1e1e1e;
}
  
/* 1) Submenu (ul) achtergrond + tekst */
.tp-main-menu .has-dropdown:hover > .tp-submenu,
.tp-main-menu .has-dropdown:hover > ul.tp-submenu,
.tp-main-menu .has-dropdown:hover > .submenu{
  background: var(--gebrokenwit) !important;
  color: var(--bijnazwart) !important;
  border-color: rgba(30,30,30,.12) !important;
}

/* 2) Mega menu (div wrapper) achtergrond + tekst */
.tp-main-menu .has-dropdown:hover > .tp-megamenu-wrapper,
.tp-main-menu .has-dropdown:hover > .mega-menu{
  background: var(--gebrokenwit) !important;
  color: var(--bijnazwart) !important;
  border-color: rgba(30,30,30,.12) !important;
}

/* 3) Links en titels binnen dropdowns */
.tp-main-menu .tp-submenu a,
.tp-main-menu .tp-megamenu-wrapper a,
.tp-main-menu .tp-megamenu-title{
  color: var(--bijnazwart) !important;
}

/* 4) Hover state binnen dropdowns */
.tp-main-menu .tp-submenu a:hover,
.tp-main-menu .tp-megamenu-wrapper a:hover{
  color: var(--bijnazwart) !important;
  opacity: .85;
}

/* 5) Pijltje/SVG dat currentColor gebruikt */
.tp-main-menu .has-dropdown:hover > a{
  color: var(--bijnazwart) !important;
}
.tp-main-menu .has-dropdown:hover > a svg{
  color: var(--bijnazwart) !important;
}

:root{
  --tp-donkergroen: #436467;
  --gebrokenwit: #EDEDE8;
  --bijnazwart: #1e1e1e;
}

/* Header blijft donkergroen + links gebrokenwit */
#header-sticky{
  background: var(--tp-donkergroen) !important;
  background-color: var(--tp-donkergroen) !important;
}
#header-sticky .tp-main-menu > nav > ul > li > a{
  color: var(--gebrokenwit) !important;
}
#header-sticky .tp-main-menu > nav > ul > li > a svg{
  color: var(--gebrokenwit) !important;
}

/* ===== Dropdowns: background gebrokenwit + tekst bijnazwart ===== */

/* Submenu container */
#header-sticky .tp-main-menu li.has-dropdown:hover > ul.tp-submenu,
#header-sticky .tp-main-menu li.has-dropdown:hover > ul.submenu,
#header-sticky .tp-main-menu li.has-dropdown:hover > .tp-submenu,
#header-sticky .tp-main-menu li.has-dropdown:hover > .submenu{
  background: var(--gebrokenwit) !important;
  background-color: var(--gebrokenwit) !important;
  color: var(--bijnazwart) !important;
}

/* Mega menu container (als je die gebruikt) */
#header-sticky .tp-main-menu li.has-dropdown:hover > .tp-megamenu-wrapper,
#header-sticky .tp-main-menu li.has-dropdown:hover > .mega-menu{
  background: var(--gebrokenwit) !important;
  background-color: var(--gebrokenwit) !important;
  color: var(--bijnazwart) !important;
}

/* Links in dropdowns: forceer kleur + opacity (dit is wat bij jou fout gaat) */
#header-sticky .tp-main-menu ul.tp-submenu li a,
#header-sticky .tp-main-menu ul.submenu li a,
#header-sticky .tp-main-menu .tp-megamenu-wrapper a{
  color: var(--bijnazwart) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Hover binnen dropdowns */
#header-sticky .tp-main-menu ul.tp-submenu li a:hover,
#header-sticky .tp-main-menu ul.submenu li a:hover,
#header-sticky .tp-main-menu .tp-megamenu-wrapper a:hover{
  color: var(--bijnazwart) !important;
  opacity: 1 !important;
}

/* (optioneel) als je theme een achtergrond-overlay op dropdowns zet via ::before */
#header-sticky .tp-main-menu ul.tp-submenu::before,
#header-sticky .tp-main-menu ul.submenu::before,
#header-sticky .tp-main-menu .tp-megamenu-wrapper::before{
  background: var(--gebrokenwit) !important;
}

:root{
  --tp-donkergroen: #436467;
}

/* 1) Maak "tp-donkergroen" altijd exact deze kleur */
.tp-donkergroen{
  background: var(--tp-donkergroen) !important;
  background-color: var(--tp-donkergroen) !important;
}

/* 2) Header: forceer exact donkergroen (ook bij scroll/sticky) */
#header-sticky,
#header-sticky.sticky,
#header-sticky.is-sticky,
#header-sticky.header-sticky,
#header-sticky.sticky-black-bg,
.tp-header-area.tp-header-blur{
  background: var(--tp-donkergroen) !important;
  background-color: var(--tp-donkergroen) !important;

  /* haal "grijs" effect weg door blur/transparantie */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 3) Veel themes leggen een semi-transparante laag via ::before/::after */
#header-sticky::before,
#header-sticky::after,
.tp-header-area.tp-header-blur::before,
.tp-header-area.tp-header-blur::after{
  background: var(--tp-donkergroen) !important;
  background-color: var(--tp-donkergroen) !important;
  opacity: 1 !important;
}

/* 4) Als je hero/sectie ook een overlay gebruikt */
.tp-hero-area::before,
.tp-faq-hero-area::before{
  background: transparent !important; /* of zet hier ook donkergroen als je wil */
}

:root { --tp-donkergroen: #436467; }

/* Forceer header altijd exact donkergroen (ook sticky/transparent/blur varianten) */
#header-sticky.tp-header-area,
#header-sticky.sticky-black-bg,
#header-sticky.tp-header-blur,
#header-sticky.header-transparent{
  background: var(--tp-donkergroen) !important;
  background-color: var(--tp-donkergroen) !important;

  /* haal het “grijs” effect weg */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Veel themes leggen een semi-transparante laag via ::before/::after */
#header-sticky::before,
#header-sticky::after{
  background: var(--tp-donkergroen) !important;
  background-color: var(--tp-donkergroen) !important;
  opacity: 1 !important;
}

:root{
  --tp-donkergroen: #436467;
  --gebrokenwit: #EDEDE8;
}

/* Header altijd exact #436467 */
#header-sticky{
  background: var(--tp-donkergroen) !important;
  background-color: var(--tp-donkergroen) !important;
  background-image: none !important;

  /* haal eventuele “tint” effecten weg */
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
  border-bottom: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Als je theme een overlay via pseudo-elements gebruikt */
#header-sticky::before,
#header-sticky::after{
  content: none !important;            /* hard kill */
  background: transparent !important;
  opacity: 1 !important;
}

/* Tekst/links in header (zodat je niet per ongeluk bijnazwart krijgt) */
#header-sticky .tp-main-menu > nav > ul > li > a{
  color: var(--gebrokenwit) !important;
}
#header-sticky .tp-main-menu > nav > ul > li > a svg{
  color: var(--gebrokenwit) !important;
}

.tp-portfolio-2-item {
  background: var(--gebrokenwit) !important;
}

.tp-portfolio-2-item .tp-portfolio-title,
.tp-portfolio-2-item .tp-portfolio-title a {
  color: var(--bijnazwart) !important;
}

.masonry-item,
.masonry-item .gridinfo{
  color: var(--gebrokenwit);
}

/* links erven de kleur i.p.v. default blauw/paars */
.masonry-item a{
  color: inherit;
}

/* icon (Font Awesome) ook mee laten kleuren */
.masonry-item .fa{
  color: inherit;
}

.masonry-item .gridinfo,
.masonry-item .gridinfo h3,
.masonry-item .gridinfo p,
.masonry-item .gridinfo a,
.masonry-item .gridinfo i{
  color: var(--gebrokenwit); 
}

.gridinfo,
.gridinfo h3,
.gridinfo h3 a,
.gridinfo .gridexerpt,
.gridinfo a.grid-btn.grid-more,
.gridinfo a.grid-btn.grid-more span,
.gridinfo a.grid-btn.grid-more i {
  color: var(--gebrokenwit) !important;
}

/* ook voor states */
.gridinfo h3 a:visited,
.gridinfo h3 a:hover,
.gridinfo a.grid-btn.grid-more:hover,
.gridinfo a.grid-btn.grid-more:focus {
  color: var(--gebrokenwit) !important;
}

/* alle tp-buttons tekst gebrokenwit */
a.tp-btn-lg,
a.tp-btn-lg .btn-text,
a.tp-btn,
a.tp-btn .btn-text,
.tp-hero-sa-btn-wrap a[class*="tp-btn"]{
  color: var(--gebrokenwit) !important;
}

/* states (anders springt hij terug naar zwart/blauw) */
a.tp-btn-lg:hover,
a.tp-btn-lg:focus,
a.tp-btn-lg:active,
a.tp-btn-lg:visited,
a.tp-btn-lg:hover .btn-text,
a.tp-btn-lg:focus .btn-text,
a.tp-btn-lg:active .btn-text,
a.tp-btn-lg:visited .btn-text{
  color: var(--gebrokenwit) !important;
}

/* iconen (als er font-icons gebruikt worden) */
a.tp-btn-lg i,
a.tp-btn i{
  color: var(--gebrokenwit) !important;
}





/* card-border lichtgroen */
.tp-team-it-item{
  border: 1px solid var(--tp-lichtgroen) !important;
}

/* sommige themes tekenen de rand via box-shadow of pseudo-elements */
.tp-team-it-item{
  box-shadow: inset 0 0 0 1px var(--tp-lichtgroen) !important;
}

.tp-team-it-item::before,
.tp-team-it-item::after{
  border-color: var(--tp-lichtgroen) !important;
}

.tp-team-it-item:hover{
  border-color: var(--tp-lichtgroen) !important;
  box-shadow: inset 0 0 0 1px var(--tp-lichtgroen) !important;
}