/**
 * SAITS Website - Sticky Navigation CSS v2.2
 * Deze standalone CSS implementeert een sticky navigatiebalk die bovenaan de pagina blijft staan tijdens scrollen.
 * Deze CSS werkt onafhankelijk van componenten om maximale stabiliteit te garanderen.
 */

/* Basis sticky navigatie stijlen */
.saits-sticky-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 50 !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
  background-color: white !important;
}

/* Stijlen voor donkere modus */
.dark .saits-sticky-nav {
  background-color: #111827 !important;
}

/* Stijlen voor scrolled state */
.saits-sticky-nav.scrolled {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Stijlen voor scroll-up state */
.saits-sticky-nav.scroll-up {
  transform: translateY(0) !important;
}

/* Stijlen voor scroll-down state (verberg navigatie) */
.saits-sticky-nav.scroll-down {
  transform: translateY(-100%) !important;
}

/* Ruimte maken onder de navigatie */
body.saits-sticky-nav-enabled {
  padding-top: 64px !important;
}

/* Responsive aanpassingen */
@media (max-width: 768px) {
  body.saits-sticky-nav-enabled {
    padding-top: 56px !important;
  }
}