/* Barre de navigation, PARTAGÉE par les deux sites (caravaning + Groupe).

   L'accent — couleur du survol, de l'onglet actif, du survol des sous-items du
   déroulant, et du pictogramme masqué qui les accompagne — n'est pas écrit ici :
   il passe par var(--navbar-accent-color), déclaré dans
   static/css/shared/input.css et redéfini par site via [data-site="..."] posé
   sur le <body> (cf. templates/shared/base.html) : --caravaning-bg (cyan) par
   défaut, --groupe-bg (teal) sur le portail Groupe.

   Aucune barre n'épingle son accent contre celui de son site : une classe
   .navbar-accent-caravaning l'a permis pour le sous-menu de l'Espace
   investisseur (cyan sous le domaine Groupe), elle est retirée — la barre suit
   le site, sans exception.

   Ne jamais réintroduire une couleur en dur dans les règles ci-dessous : ce
   fichier étant servi aux deux domaines, un hexadécimal y vaut pour les deux.
   Seule exception assumée, .concession* en bas de fichier : le sélecteur de
   concession n'est rendu que par la barre caravaning. */

.navbar_item {
  transition: all 0.15s ease-in-out;
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem; /* 'text-base' size */
  line-height: 1.5rem; /* Corresponding to 'leading-6' in Tailwind */
  text-align: start;

  /* 'px-3' */
  /* 'px-3' */
  padding: 0 0.75rem;

  /* 'px-3' */
  /* 'px-3' */
  /* 'px-3' */
  /* 'px-3' */
  margin: 0.75rem 0.75rem 0.75rem 0;
}

.navbar_item:hover {
  color: var(--navbar-accent-color);
  margin-left: 0.75rem; /* 'px-3' */
  border-left: 2px solid var(--navbar-accent-color); /* This combines width, style, and color */
  .logo {
    background-color: var(--navbar-accent-color);
  }
}

.navbar_item_selected {
  color: var(--navbar-accent-color);
  transition: all 0.15s ease-in-out;
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem; /* 'text-base' size */
  line-height: 1.5rem; /* Corresponding to 'leading-6' in Tailwind */
  /* 'py-2' */
  /* 'py-2' */
  /* 'px-3' */
  /* 'px-3' */
  padding: 0 0.75rem;
  text-align: start;
  margin-left: 0.75rem; /* 'px-3' */
  margin-right: 0.75rem; /* 'px-3' */
  border-left: 2px solid var(--navbar-accent-color); /* This combines width, style, and color */
  .logo {
    background-color: var(--navbar-accent-color);
  }
}

.nav-sub-item {
  transition: all 0.15s ease-in-out;
  text-decoration: none;
  font-size: 1rem; /* 'text-base' size */
  line-height: 1.5rem; /* Corresponding to 'leading-6' in Tailwind */
  /* 'py-2' */
  /* 'py-2' */
  /* 'px-3' */
  /* 'px-3' */
  padding: 0 0.75rem;
  text-align: start;
  margin-left: 0; /* 'px-3' */
  margin-right: 0.75rem; /* 'px-3' */
}
.nav-sub-item:hover {
  color: var(--navbar-accent-color);
  margin-left: 0.75rem; /* 'px-3' */
  border-left: 2px solid var(--navbar-accent-color); /* This combines width, style, and color */
  .logo {
    background-color: var(--navbar-accent-color);
  }
}

#mobileMenu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000 !important;
  width: 70%; /* Adjust based on your design */
  height: 100%;
  background: #ffffff; /* or any color or dark:bg-gray-800 for dark mode */
  transform: translateX(-100%); /* Start off-screen */
  transition: transform 0.5s ease-in-out; /* Smooth transition for the transform property */
}

#custom-menu-links {
  padding: 0.5rem; /* p-2 */
  display: flex;
  flex-direction: column;
  /*color: #4a5568; !* text-gray-700, assuming the gray-700 color is #4a5568 *!*/
  gap: 0.5rem; /* space-y-2, assumes that each element has a 0.5rem vertical space between */
  overflow-y: auto;
  height: calc(100vh - 250px);
}

/* Styles pour le mode sombre */
@media (prefers-color-scheme: dark) {
  .mobile-sub-item {
    color: white; /* dark:text-white */
  }

  .mobile-sub-item:hover {
    background-color: #2d3748; /* dark:hover:bg-gray-700 */
  }
}

@media (min-width: 900px) {
  .navbar_item {
    display: block;
    text-align: center;
    margin-left: 0.75rem; /* 'px-3' */
    margin-top: 0;
    margin-bottom: 2px;
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
  }
  .navbar_item:hover {
    color: var(--navbar-accent-color);
    border-left-width: 0;
    padding-right: 0.75rem; /* 'px-3' */
    padding-top: calc(0.75rem - 2px);
    margin-bottom: 0;
    border-bottom: 2px solid var(--navbar-accent-color); /* This combines width, style, and color */
    .logo {
      background-color: var(--navbar-accent-color);
    }
  }
  .navbar_item_selected {
    display: block;
    text-align: center;
    margin-left: 0.75rem; /* 'px-3' */
    margin-top: 0;
    margin-bottom: 2px;
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
    color: var(--navbar-accent-color);
    border-left-width: 0;
    border-bottom: 2px solid var(--navbar-accent-color); /* This combines width, style, and color */
    .logo {
      background-color: var(--navbar-accent-color);
    }
  }

  #mobileMenu {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    transform: translateX(0%) !important;
    background: none;
    width: 100%;
    overflow: visible;
    z-index: auto;
  }

  #custom-menu-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    overflow: visible;
    height: auto;
  }
}

.logo {
  transition: all 0.15s ease-in-out;
}

.home_logo {
  background-color: black;
  -webkit-mask: url(../icons/home.svg) no-repeat center;
  mask: url(../icons/home.svg) no-repeat center;
  width: 40px;
  height: 40px;
}

.concession_logo {
  background-color: black;
  -webkit-mask: url(../icons/concession.svg) no-repeat center;
  mask: url(../icons/concession.svg) no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
  width: 2rem;
  height: 2rem;
}

.rotate {
  transform: rotate(-90deg);
}

.custom-dropdown {
  z-index: 10; /* equivalent to Tailwind's .z-10 */

  background-color: white; /* equivalent to Tailwind's .bg-white */
  --tw-divide-y-reverse: 0; /* preparation for divide-y */
  border-top-width: calc(
    1px * var(--tw-divide-y-reverse)
  ); /* equivalent to Tailwind's .divide-y */
  border-bottom-width: calc(
    1px * calc(1 - var(--tw-divide-y-reverse))
  ); /* continue for .divide-y */
  border-color: #d1d5db; /* equivalent to Tailwind's .divide-gray-100 */
  border-radius: 0.5rem; /* equivalent to Tailwind's .rounded-lg */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05); /* equivalent to Tailwind's .shadow */
  width: 18rem; /* equivalent to Tailwind's .w-72 */
  height: 18rem; /* equivalent to Tailwind's .h-72 */
}

.concession {
  color: #141a1c;
  font-weight: 600;
  line-height: 24px;
  word-wrap: break-word;
}

.concession:hover {
  color: var(--primary-color);
  /* This combines width, style, and color */
  .logo {
    background-color: var(--primary-color);
  }
}

@media (max-width: 900px) {
  .concession {
    position: fixed;
    top: calc(100% - 75px);
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}