.active {
    color: #0068ff !important;
}

.dropdown-item.active {
    color: #0068ff !important;
    background-color: #fff !important;
}

.navbar {
box-shadow: 0 0 2em #0000001a;
}

.navbar-toggler:focus {
    box-shadow: none !important;
}
.nav-item, .dropdown-menu, .dropdown-item {
font-weight: 500;
font-size: 1rem;
}

.dropdown-item:focus, .dropdown-item:hover {
    background-color: #e7eef5 !important;
}

.navbar-nav .nav-link {
color: #323232;
transition: color 0.2s ease-in-out;
}

.dropdown-menu .dropdown-item:hover,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
color: #0068fd;
}

.navbar-nav .dropdown-toggle::after {
display: none;
}

@media (max-width: 992px) {
.dropdown-menu-borderless {
    border: 0 !important;
    }
    .nav-item {
        margin: 5px 0;
        font-size: 18px !important;
    }
    .nav-item, .dropdown-menu, .dropdown-item {
        font-size: 18px !important;
        width: 100%;
        margin: 5px 0 !important;
    }
    .navbar-nav {
        padding-top: 1rem;
        padding-right: .5rem !important;
        padding-left: .5rem !important;
    }
    .navbar-collapse {
        padding-bottom: 20px !important;
    }
}

/* VERWIJDER deze: */
@media (min-width: 992px) {
  .navbar-nav .dropdown:hover .dropdown-menu { display:block; visibility:visible; margin-top:0; }
}

.dropdown-item:hover {
background-color: #f7f9ff;
}

.dropdown-item.uitloggen:hover {
background-color: #fff2f2;
}

#offcanvasNavbar > .offcanvas-body > ul > li {
    margin: 0 1rem;
}

.navbar-nav .dropdown:hover > .nav-link {
color: #0068fd;
}

.desktop-buttons {
gap: 10px;
}

.desktop-buttons a {
font-size: 1rem;
}

.offcanvas-header {
border-bottom: 1px solid #ddd;
}
.dropdown-menu.dropdown-menu-end {
right: 0 !important;
}

.custom-toggler {
border: none;
background: transparent;
}

.toggler-line {
display: block;
width: 25px;
height: 2px;
background-color: #000;
margin: 5px 0;
}

/* Basis knop-gebied (afmetingen kun je naar smaak tweaken) */
.custom-toggler {
  width: 40px;
  height: 32px;
  border: 0;           /* je border komt vaak van .navbar-toggler; pas aan naar wens */
  padding: 4px 6px;
}

/* Lijnen van het hamburger-icoon */
.custom-toggler .toggler-line {
  display: block;
  width: 26px;
  height: 2px;
  background: #000;         /* kleur van je merk/knop */
  border-radius: 1px;
  transition:
    transform .25s ease,
    opacity .2s ease,
    background-color .2s ease;
}

/* Minder beweging voor mensen die dat ingesteld hebben */
@media (prefers-reduced-motion: reduce) {
  .custom-toggler .toggler-line {
    transition: none;
  }
}

/* Actieve staat: wanneer het menu open is (Bootstrap zet aria-expanded="true") */
.custom-toggler[aria-expanded="true"] .toggler-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.custom-toggler[aria-expanded="true"] .toggler-line:nth-child(2) {
  opacity: 0;
}

.custom-toggler[aria-expanded="true"] .toggler-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Optioneel: donkere lijnen op witte achtergrond bij hover/focus */
.custom-toggler:focus .toggler-line,
.custom-toggler:hover .toggler-line {
  background: #000;
}

/* Navbar en dropdowns liggen altijd boven de backdrop */
.navbar.sticky-top { z-index: 1040; }
.navbar .dropdown-menu { z-index: 1050; }

/* Globale backdrop (buiten de navbar) */
.site-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 1030; /* onder navbar (1040), boven pagina */
}

/* Alleen tonen wanneer menu open is */
body.nav-open .site-backdrop{
  opacity: 1;
  pointer-events: auto;
}

/* Op ≥ lg geen backdrop (navbar is daar toch open) */
@media (min-width: 992px){
  .site-backdrop{ display: none !important; }
}