/* Vervangt het standaard Joomla favicon door de muzieksleutel */
:root {
  --cassiopeia-favicon: url('../muzieksleutel.png');
}

.logo-slider {
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  padding: 40px 0; /* Meer witruimte boven en onder de banner */
  display: block;
}

.logo-slide-track {
  display: flex;
  width: calc(310px * 28); /* Ruimere berekening voor grotere logo's */
  animation: scrollen-excelsior 35s linear infinite;
}

.logo-slide-track a {
  display: block;
  flex-shrink: 0;
}

.logo-slide-track img {
  width: auto;       /* Laat de breedte automatisch schalen */
  height: 120px;     /* Verhoogd van 80px naar 120px voor een groter beeld */
  margin: 0 50px;    /* Iets meer tussenruimte voor de balans */
  object-fit: contain; 
}

@keyframes scrollen-excelsior {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-310px * 14)); /* Aangepast aan de nieuwe breedte-stap */
  }
}

/* Zorgt ervoor dat de fotobanner flexibel is en mee omhoog scrollt */
.header {
  position: relative !important;
}

/* We pakken direct de specifieke grid-balk van de template aan */
nav.container-nav,
.container-nav,
.site-grid.container-nav {
  background-color: transparent !important;
  background-image: linear-gradient(90deg, #1d3361 0%, #132244 60%, #0c152b 100%) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

/* Zorgt dat ook de binnenkant van de menubalk geen eigen kleur vasthoudt */
nav.container-nav .navbar,
.container-nav .navbar-nav {
  background: transparent !important;
}

/* Zorgt dat de balk het verloop behoudt zodra het script hem vastzet */
.menu-vastgezet {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background-image: linear-gradient(90deg, #1d3361 0%, #132244 60%, #0c152b 100%) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}