/* =========================
   NAVBAR – basis
========================= */

.navbar {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* =========================
   HOME – SVG icoon (SOLID)
========================= */

/* Home-link */
.navbar .nav-home {
  box-shadow: none !important;     /* nooit het balkje */
  background-color: transparent;
  display: flex;
  align-items: center;
}

/* Huisje – normale toestand */
.nav-home-icon {
  width: 20px;
  height: 20px;
  display: block;
  fill: #fff;                     /* wit op zwarte balk */
}

/* Hover & active: NEGATIEF */
.navbar .nav-home:hover,
.navbar .nav-home.active {
  background-color: #fff !important;
}

/* Huisje wordt zwart op wit */
.navbar .nav-home:hover .nav-home-icon,
.navbar .nav-home.active .nav-home-icon {
  fill: #000;
}
/* Actieve pagina */
.navbar .w3-bar-item.w3-button.active {
  box-shadow: inset 0 -6px 0 #fff;
}

/* =========================
   DESKTOP MENU – overige items
========================= */

.navbar .w3-bar-item.w3-button {
  background-color: transparent !important;
  color: #fff !important;
}

/* Hover = wit blokje onderaan */
.navbar .w3-bar-item.w3-button:hover:not(.nav-home) {
  background-color: transparent !important;
  box-shadow: inset 0 -6px 0 #fff;
}

/* =========================
   HOME – active & hover (forceer negatief)
========================= */

/* Normale toestand: wit huisje op zwart */
.navbar a.nav-home .nav-home-icon {
  fill: #fff;
}

/* ACTIVE & HOVER: wit vlak + zwart huisje */
.navbar a.nav-home.active,
.navbar a.nav-home:hover {
  background-color: #fff !important;
}

.navbar a.nav-home.active .nav-home-icon,
.navbar a.nav-home:hover .nav-home-icon {
  fill: #000 !important;
}

/* Zorg dat Home NOOIT het onderbalkje krijgt */
.navbar a.nav-home {
  box-shadow: none !important;
}

/* =========================
   NAVBAR – effectieve hoogte
========================= */

.navbar {
  height: 40px;              /* ← pas aan: 36–44px is mooi */
  line-height: 40px;
}

/* Zorg dat items zich hieraan aanpassen */
.navbar .w3-bar-item {
  height: 40px;
  line-height: 40px;
  padding-top: 0;
  padding-bottom: 0;
}
.navbar {
  position: relative;
}
/* =========================
   SOCIAL ICONS – zichtbaar & stabiel
========================= */

.nav-social {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);

  display: flex;
  align-items: center;
  gap: 10px;
}

/* DIT WAS DE ONTBREKENDE SCHAKEL */
.nav-social a {
  color: #fff;              /* ← essentieel */
  display: flex;
  align-items: center;
}

/* SVG volgt de kleur */
.nav-social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  opacity: 0.85;
}

.nav-social a:hover svg {
  opacity: 1;
}

@media (max-width: 400px) {
  .nav-social {
    display: none;
  }
}

/* =========================
   MOBIEL MENU
========================= */

#navMobile {
  position: relative;
  z-index: 5;
}