/*kleuren menu-links voor groene menubalk*/
:root
[data-bs-theme=light] {
  --mainnav-link-color:white;
  --mainnav-link-hover-color:#DDDDDD;
  --mainnav-link-active-color:#0a58ca;
  --mainnav-dropdown-link-color:#495057;
}

[data-bs-theme=dark] {
  color-scheme: dark;
  --mainnav-dropdown-link-color:white;
}

body.dark-active .t4-megamenu {
  --mainnav-dropdown-link-color:#495057;
}

.t4-megamenu .navbar-nav > li.active > a, .t4-megamenu .navbar-nav > li.active > .nav-link {
    color: #0a58ca;
}

@media (min-width: 992px) {
.t4-megamenu .navbar-nav > li > a, .t4-megamenu .navbar-nav > li > .nav-link {
    color: white;
    font-size: 1rem;
    font-weight: 500;
    padding: 10px;
    height: 80px;
    line-height: 40px;
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    text-transform: uppercase;
}
}

/*groene menubalk*/
.header-wrap {
  position: relative;
  background-color:#78a22f;
}

.t4-header {
  background-color:#78a22f
}


/*sponsorbanner minder padding*/
.t4-sponsorbanner {
    background-color: var(--tpl-base-100);
    color: var(--body-text-color);
    padding-top: 0.6666666667rem;
    padding-bottom: 0.6666666667rem;
}
/* om overzicht dikke van pale breed genoeg te maken in template.css lijn 17629 uitgeschakeld   max-width: 768px; */

/*afbeelding in artikel - contain ipv cover*/
@media (min-width: 1200px) {
    .item-page.layout-2 .top-article-info .full-image .item-image img {
           object-fit: contain;
               height: 100%;
        width: 100%;
    }
}

/*menutekst op smartphone grijs ipv wit - hamburgermenu*/
@media (max-width: 991.98px) {

  .t4-megamenu .navbar-nav > li > a, .t4-megamenu .navbar-nav > li > .nav-link {
    color: #495057;
  }
}
/* meer spatie boven moduletitel (balken op frontpagina)*/
.module-title {
        padding-top: 1rem;
}

/* minder witruimte tussen artikel en sponsorbanner*/
@media (min-width: 1200px) {
    .item-page.layout-2 .top-article-info .full-image .item-image img {
        -o-object-fit: contain;
        object-fit: contain;

    }
}
/* minder witruimte tussen foto/introtekst en hoofdtekst*/
.item-page.layout-2 .top-article-info {
    margin-bottom: 0rem;
}
/* minder witruimte tussen artikel en sponsorbanner*/
@media (min-width: 768px) {
    .t4-main-body {
        padding-top: 1rem; 
        padding-bottom: 1rem;
    }
}
/* Youtube filmpje in iframe grootte aanpassen aan ruimte*/
.youtube { aspect-ratio: 16/9; width: 100%; }


/* blog layout cursiefjes geen intro image, titel boven filmpje , minder witruimte*/
.blog.layout_style_2_no_image .item-content, .blog-featured.layout_style_2_no_image .item-content {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 2rem 1fr;
    grid-template-columns: 1fr; /*titel boven filmpje ipv naast*/
    gap: 0.5rem; /*minder witruimte*/
}
/* badge info groen - bijvoorbeeld aantal artikels in categorie */
.badge-info {
    background-color: #78a22f;
}
/* Zorgt samen met volgende item dat de afbeelding en naam op één regel staan in de contactenlijst */
.contact-category table.table tbody td {
    vertical-align: middle;
}
/* Zorgt samen met vorige item dat de afbeelding en naam op één regel staan in de contactenlijst */
.contact-category .contact-image img {
    float: left;
    margin-right: 35px;
    max-width: 300px; /* Pas grootte aan naar wens */
    height: auto;
    border-radius: 4px;
}
/* Zorgt voor minder tussenruimte tussen subcategorieën */
.category-desc {
    padding-top: 1rem;
    padding-left:1rem;
    padding-right:1rem;
    padding-bottom: 0.1rem;
    margin-top: 1rem;
    margin-bottom: 0.7rem;
    border-radius: 0.25rem;
}
/* Zorgt voor minder tussenruimte slider en dots en meer onder dots */
.magz-layout.slide-2 .owl-dots {
    position: static;
    margin-top: 0.1em;
    margin-bottom: 1em;
}
/* pijlen naast carousel */
/* De hoofdcontainer moet relatief zijn */
.owl-carousel {
    position: relative;
}
/* Positioneer de navigatie-container */
.owl-nav {
    position: absolute;
    top: 40px;
    width: 100%;
    transform: translateY(-50%);
    pointer-events: none; /* Zorgt dat de carrousel zelf klikbaar blijft */
}
/* Stijl de individuele knoppen */
.owl-prev, .owl-next {
    position: absolute;
    pointer-events: auto; /* Maakt alleen de knoppen weer klikbaar */
    background: #EEE !important; /* Pas kleur naar wens aan */
    color: #999 !important;
    padding: 5px 10px !important;
    border-radius: 50%;
}
/* Knoop links */
.owl-prev {
    left: -20px; /* Gebruik een negatieve waarde om ze BUITEN de carrousel te zetten */
}

/* Knoop rechts */
.owl-next {
    right: -20px;
}
div.owl-carousel div.owl-nav > button.owl-prev, div.owl-carousel div.owl-nav > button.owl-next {
    border: 1px solid var(--tpl-base-200);
    border-radius: 50%;
    line-height: 26px;
    margin: 0 0.5rem;
    font-size: 20px;
    height: 28px;
    width: 28px;
}
.t4-section-2 {
    padding-top: 1em;
    position: relative;
}
/* Vervang 'palette-name' door de naam/ID van jouw custom palette */
.dark-active .t4-palette-licht {
    --body-bg-color: #212121; /* Je gewenste donkere kleur */
    --body-text-color: #e0e0e0;
    background-color: var(--body-bg-color) !important;
}
.dark-active .t4-palette-grijs {
    --body-bg-color: #121212; /* Je gewenste donkere kleur */
    --body-text-color: #e0e0e0;
    background-color: var(--body-bg-color) !important;
}