@charset "UTF-8";

.navbar-toggler {
  border: none;
  outline: none;
  background-color: var(--basiskleurnegenendertig); /* cirkelkleur */
  width: 44px; /* diameter cirkel */
  height: 44px;
  border-radius: 50%; /* perfecte cirkel */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  box-shadow: none;
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

/* Container voor de drie streepjes – sluit aan op menu.inc.php (.burger) */
.navbar-toggler .burger {
  position: relative;
  width: 24px;
  height: 21px;
}

/* De drie lijnen zelf */
.navbar-toggler .burger .line {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background: var(--basiskleurachtendertig); /* streepjes */
  transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

/* Posities als hamburger */
.navbar-toggler .burger .line1 {
  top: 0;
}

.navbar-toggler .burger .line2 {
  top: 9px;
}

.navbar-toggler .burger .line3 {
  bottom: 0;
}

/* Animatie wanneer het menu open is */
.navbar-toggler[aria-expanded="true"] .burger .line1 {
  top: 9px;
  transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .burger .line2 {
  opacity: 0;
}

.navbar-toggler[aria-expanded="true"] .burger .line3 {
  bottom: auto;
  top: 9px;
  transform: rotate(-45deg);
}

/* Eventuele tekst naast/bij de hamburger */
.tekstbijhamburger {
  font-family: "Bebas Neue", sans-serif;
  color: var(--basiskleurachtendertig);
}

/* Hover: achtergrond & tekstkleur */
.navbar-toggler:hover,
.navbar-toggler:focus {
  background-color: var(--basiskleureenenveertig);
}

.navbar-toggler:hover .burger .line,
.navbar-toggler:focus .burger .line,
.navbar-toggler:hover .tekstbijhamburger,
.navbar-toggler:focus .tekstbijhamburger {
  background-color: var(--basiskleurveertig);
  color: var(--basiskleurveertig);
}