/* -----------------------------------------------------------
   FILE: menu-transition.css
   ROLE: Gestion exclusive de la navbar (scroll, resize, padding body)
   DEPENDANCE: Requiert navbar-scroll.js chargé en footer
   ----------------------------------------------------------- */

/* ========== 1. CONFIGURATION & TRANSITIONS GLOBALES ========== */
.navbar,
.navbar-brand,
.navbar-brand img,
.nav-link,
.navbar-toggler {
  transition: all 0.4s ease-in-out;
}

body {
  transition: padding-top 0.4s ease-in-out;
  /* Valeur par défaut sécurisée, sera surchargée par les états */
  padding-top: 270px; 
}

/* Ajustement pour la région highlighted si nécessaire */
.highlighted {
  margin-top: 100px;
}

/* ========== 2. ÉTAT INITIAL (MENU GRAND) ========== */
.navbar {
  /* Utilisation de ta variable PEV Verte */
  border-bottom: 3px solid var(--pev-vert-feuille); 
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  z-index: 1030;
  /* Fond transparent ou blanc selon design initial */
  background-color: var(--bs-navbar-bg); 
}

.navbar-brand img {
  height: 200px; 
  width: auto;
  display: block;
  padding-left: 5px;
  transition: height 0.4s ease-in-out;
}

.navbar-brand {
  font-weight: 800;
  font-size: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  /*width: 90%;*/
  text-wrap: auto;
  z-index: 1;
  color: var(--pev-terre-fonce); /* Couleur de base du texte */
}

.nav-link {
  font-weight: 500;
  margin: 0 5px;
  border-radius: 4px;
  z-index: 1;
  color: var(--pev-gris-texte);
}

.navbar-toggler {
  margin-right: 5px;
  z-index: 1;
  border-color: var(--pev-terre-fonce);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(93, 64, 55, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ========== 3. ÉTAT "SCROLLED" (MENU RÉDUIT) ========== */
.navbar.scrolled {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: rgba(255, 255, 255, 0.95) !important; 
  backdrop-filter: blur(5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-bottom: 3px solid var(--pev-vert-feuille);
}

.navbar.scrolled .navbar-brand img {
  height: 60px; 
}

.navbar.scrolled .navbar-brand {
  font-size: 1.2rem;
}

/* ========== 4. GESTION DU PADDING DU BODY ========== */
/* 
   NOTE : Ces valeurs doivent correspondre à la hauteur totale de la navbar
   + la région header si elle existe au-dessus. 
   Ajuste les pixels si ton logo change de taille.
*/

body.user-logged-in {
  padding-top: 270px !important; /* Admin bar présente */
}

body:not(.user-logged-in) {
  padding-top: 250px !important; /* Ajusté pour logo 200px + padding navbar */
}

body.navbar-is-scrolled.user-logged-in {
  padding-top: 180px !important; /* Réduit quand scrollé */
}

body:not(.user-logged-in).navbar-is-scrolled {
  padding-top: 160px !important; /* Réduit quand scrollé */
}

/* ========== 5. RESPONSIVE (MOBILE) ========== */
@media (max-width: 768px) {
  body:not(.user-logged-in) {
    padding-top: 140px !important; 
  }
  body.user-logged-in {
    padding-top: 180px !important;
  }
  
  body.navbar-is-scrolled:not(.user-logged-in) {
    padding-top: 90px !important;
  }
  body.navbar-is-scrolled.user-logged-in {
    padding-top: 130px !important;
  }

  .navbar {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
  
  .navbar-brand img {
    height: 80px; /* Ajusté pour mobile */
    width: auto;
    display: block;
  }
  
  .navbar-brand {
    font-size: 1.2rem;
    width: 70%;
    text-wrap: auto;
  }
  
  .navbar.scrolled .navbar-brand {
    font-size: 1rem;
  }

  /* Correction pour la toolbar verticale de Drupal */
  body.toolbar-vertical #navbar-main.fixed-top {
    top: 40px;
  }
}

/* ========== 6. SURCHARGES SPÉCIFIQUES & HOVERS ========== */
.navbar-brand:hover {
  text-decoration: none;
  color: var(--pev-terre-clair) !important; /* Remplacement de bocaux-orange */
}

.nav-link:hover, 
.nav-link.active {
  text-decoration: none;
  color: var(--pev-vert-feuille) !important;
  background-color: rgba(85, 139, 47, 0.05); /* Léger fond vert au hover */
}