/* Base navbar state for normal anonymous visitors */
.custom-navbar {
  top: 0;
  z-index: 1030; /* Standard Bootstrap fixed-top z-index */
}

/* 1. When the standard horizontal Drupal admin toolbar is visible */
body.toolbar-horizontal .custom-navbar {
  top: 39px; /* Pushes the navbar exactly below the main admin bar */
}

/* 2. When the admin menu tray/sub-menu is expanded downwards */
body.toolbar-horizontal.toolbar-tray-open .custom-navbar {
  top: 79px; /* Adjusts further down to clear the secondary toolbar row */
}

/* 3. Handle Admin Toolbar Z-Index conflict */
/* Ensures dropdowns or administrative trays always sit strictly on top of your navbar */
#toolbar-administration {
  z-index: 1040 !important; 
}

/* Base navbar styles */
.custom-navbar {
  /*background-color: rgba(33, 37, 41, 0); Completely transparent at start */
  background-color: rgba(255, 255, 255, 1);
  transition: background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out; /* Smooth transition animation */
  padding-left: 10px;
  padding-right: 10px;
}

/* This class gets added dynamically by JavaScript when scrolling begins */
.custom-navbar.scrolled {
  background-color: rgba(33, 37, 41, 0.80) !important; /* 85% opacity dark background */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important; /* Optional: add subtle shadow for depth */
}

.custom-navbar.scrolled .nav-item a {
  color: azure !important;
}

.custom-navbar .navbar-toggler {
    border: none !important;
}

.custom-navbar.scrolled .navbar-toggler-icon,
.custom-navbar.scrolled .navbar-toggler-icon::before,
.custom-navbar.scrolled .navbar-toggler-icon::after {
  display: block;
  background-color: #fff; /* Veranderd van #000 naar #fff */
  height: 2px;
  width: 24px;
  transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease;
}

@media (max-width: 992px) {
  .navbar-brand img {
      height: 60px !important;
  }
}
@media (min-width: 992px) {
  .navbar-brand img {
      height: 80px !important;
  }
}

#site-logo {
  transition: transform 0.4s ease, opacity 0.4s ease;
}

#site-logo.scrolled {
  /* Optioneel: maak het logo iets kleiner tijdens het scrollen */
  /*transform: scale(0.8); */
}

/* Verwijder de standaard Bootstrap SVG-achtergrond */
.navbar-toggler-icon {
  background-image: none !important;
  position: relative;
  width: 24px;
  height: 24px;
}

/* Maak de 3 horizontale streepjes aan */
.navbar-toggler-icon,
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  display: block;
  background-color: #000; /* Kleur van de streepjes (pas aan naar wens) */
  height: 2px;
  width: 24px;
  transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease;
}

/* Positioneer het bovenste en onderste streepje */
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.navbar-toggler-icon::before {
  top: -8px;
}

.navbar-toggler-icon::after {
  top: 8px;
}

/* --- ANIMATIE NAAR X (Wanneer NIET gecollapsed) --- */
.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
  background-color: transparent; /* Het middelste streepje verdwijnt */
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon::before {
  top: 0;
  transform: rotate(45deg); /* Bovenste streepje draait */
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon::after {
  top: 0;
  transform: rotate(-45deg); /* Onderste streepje draait */
}

/* Optioneel: verwijder de blauwe Bootstrap-focusrand bij het klikken */
.navbar-toggler:focus {
  box-shadow: none;
}

/* ==========================================================================
   Menu Taalvlaggen Styling
   ========================================================================== */

/* 1. Algemene instellingen voor de ruimte en positie (geldt voor BEIDE talen) */
#block-boat4you-theme-main-navigation .language-switcher-menu a.flag-sq,
#block-boat4you-theme-main-navigation .language-switcher-menu a.flag-en {
    position: relative !important;
    padding-left: 35px !important; /* Maakt ruimte voor de vlag */
}

/* Basisstijl voor de vlaggen via het pseudo-element */
#block-boat4you-theme-main-navigation .language-switcher-menu a.flag-sq::before,
#block-boat4you-theme-main-navigation .language-switcher-menu a.flag-en::before {
    content: "" !important;
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 13px !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    display: inline-block !important;
    z-index: 10 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* 2. De specifieke vlagbestanden per landcode */

/* Koppel de Albanese vlag aan de klasse 'flag-sq' */
#block-boat4you-theme-main-navigation .language-switcher-menu a.flag-sq::before {
    background-image: url('https://flagcdn.com/w20/al.png') !important;
}

/* Koppel de Engelse vlag aan de klasse 'flag-en' */
#block-boat4you-theme-main-navigation .language-switcher-menu a.flag-en::before {
    background-image: url('https://flagcdn.com/w20/gb.png') !important;
}

/* 3. Extra witruimte-correctie specifiek voor de items IN het dropdown-menu zelf */
#block-boat4you-theme-main-navigation .language-switcher-menu .dropdown-menu a.dropdown-item {
    padding-left: 40px !important;
}
#block-boat4you-theme-main-navigation .language-switcher-menu .dropdown-menu a.dropdown-item::before {
    left: 15px !important;
}