/**
 * TechVibes Menu Enhancer - Animation de ligne pour les menus WordPress
 */

/* Cibler tous les liens de menu WordPress courants */
.menu a,
.menu-item a,
.nav-menu a,
.navigation a,
.main-navigation a,
.primary-menu a,
.header-menu a,
.site-navigation a,
.navbar-nav a,
.wp-block-navigation a,
.tvb-menu-link {
  position: relative;
  display: inline-block;
  text-decoration: none !important;
  transition: color var(--tvb-menu-animation-duration, 300ms) ease;
}

/* Animation de ligne de base */
.menu a::after,
.menu-item a::after,
.nav-menu a::after,
.navigation a::after,
.main-navigation a::after,
.primary-menu a::after,
.header-menu a::after,
.site-navigation a::after,
.navbar-nav a::after,
.wp-block-navigation a::after,
.tvb-menu-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: var(--tvb-menu-line-thickness, 1px);
  background-color: var(--tvb-menu-line-color, #ffffff);
  transition: width var(--tvb-menu-animation-duration, 300ms) ease;
  z-index: 1;
}

/* Animation au survol */
.menu a:hover::after,
.menu-item a:hover::after,
.nav-menu a:hover::after,
.navigation a:hover::after,
.main-navigation a:hover::after,
.primary-menu a:hover::after,
.header-menu a:hover::after,
.site-navigation a:hover::after,
.navbar-nav a:hover::after,
.wp-block-navigation a:hover::after,
.tvb-menu-link:hover::after {
  width: 100%;
}

/* Changement de couleur du texte au survol */
.menu a:hover,
.menu-item a:hover,
.nav-menu a:hover,
.navigation a:hover,
.main-navigation a:hover,
.primary-menu a:hover,
.header-menu a:hover,
.site-navigation a:hover,
.navbar-nav a:hover,
.wp-block-navigation a:hover,
.tvb-menu-link:hover {
  color: var(--tvb-menu-text-color-hover, #ffffff) !important;
}

/* Support pour les éléments de menu actifs */
.menu .current-menu-item a::after,
.menu-item.current-menu-item a::after,
.nav-menu .current-menu-item a::after,
.navigation .current-menu-item a::after,
.main-navigation .current-menu-item a::after,
.primary-menu .current-menu-item a::after,
.header-menu .current-menu-item a::after,
.site-navigation .current-menu-item a::after,
.navbar-nav .current-menu-item a::after {
  width: 100%;
  opacity: 0.7;
}

/* Support pour les éléments de menu actifs Elementor */
.elementor-nav-menu .current-menu-item a::after,
.elementor-nav-menu .elementor-item-active::after,
.elementor-nav-menu--main .current-menu-item a::after,
.elementor-nav-menu--main .elementor-item-active::after {
  width: calc(100% - var(--tvb-menu-line-offset-left, 20px) - var(--tvb-menu-line-offset-right, 20px));
  opacity: 0.7;
}

/* Support pour les menus Elementor */
.elementor-nav-menu a {
  position: relative;
  display: inline-block;
  text-decoration: none !important;
  transition: color var(--tvb-menu-animation-duration, 300ms) ease;
}

.elementor-nav-menu a::after {
  content: '';
  position: absolute;
  left: var(--tvb-menu-line-offset-left, 20px);
  right: var(--tvb-menu-line-offset-right, 20px);
  bottom: var(--tvb-menu-line-offset-bottom, 13px);
  width: 0;
  height: var(--tvb-menu-line-thickness, 1px);
  background-color: var(--tvb-menu-line-color, #ffffff);
  transition: width var(--tvb-menu-animation-duration, 300ms) ease;
  z-index: 1;
}

.elementor-nav-menu a:hover::after {
  width: calc(100% - var(--tvb-menu-line-offset-left, 20px) - var(--tvb-menu-line-offset-right, 20px));
}

.elementor-nav-menu a:hover {
  color: var(--tvb-menu-text-color-hover, #ffffff) !important;
}

/* Version alternative plus simple - ligne collée au texte */
.elementor-nav-menu.tvb-line-text a::after {
  left: 20px;
  right: 20px;
  bottom: 13px;
  width: 0;
}

.elementor-nav-menu.tvb-line-text a:hover::after {
  width: calc(100% - 40px);
}

/* Détection automatique du padding Elementor */
.elementor-nav-menu--main .elementor-nav-menu a::after {
  left: 20px;
  right: 20px;  
  bottom: 13px;
}

.elementor-nav-menu--main .elementor-nav-menu a:hover::after {
  width: calc(100% - 40px);
}

/* Éléments actifs Elementor avec les bons offsets */
.elementor-nav-menu--main .elementor-nav-menu .elementor-item-active::after,
.elementor-nav-menu--main .elementor-nav-menu .current-menu-item a::after {
  left: 20px;
  right: 20px;  
  bottom: 13px;
  width: calc(100% - 40px);
  opacity: 0.7;
}

/* Support pour les menus verticaux */
.menu.vertical a::after,
.nav-menu.vertical a::after,
.vertical-menu a::after {
  left: 0;
  bottom: auto;
  top: 0;
  width: var(--tvb-menu-line-thickness, 1px);
  height: 0;
  transition: height var(--tvb-menu-animation-duration, 300ms) ease;
}

.menu.vertical a:hover::after,
.nav-menu.vertical a:hover::after,
.vertical-menu a:hover::after {
  width: var(--tvb-menu-line-thickness, 1px);
  height: 100%;
}

/* Support pour différents thèmes populaires */

/* Twenty Twenty-One, Twenty Twenty-Two, etc. */
.wp-block-navigation__container a::after,
.wp-block-navigation-item a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: var(--tvb-menu-line-thickness, 1px);
  background-color: var(--tvb-menu-line-color, #ffffff);
  transition: width var(--tvb-menu-animation-duration, 300ms) ease;
}

.wp-block-navigation__container a:hover::after,
.wp-block-navigation-item a:hover::after {
  width: 100%;
}

/* Astra Theme */
.ast-desktop .main-header-menu a::after,
.ast-mobile-popup-content .main-header-menu a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: var(--tvb-menu-line-thickness, 1px);
  background-color: var(--tvb-menu-line-color, #ffffff);
  transition: width var(--tvb-menu-animation-duration, 300ms) ease;
}

.ast-desktop .main-header-menu a:hover::after,
.ast-mobile-popup-content .main-header-menu a:hover::after {
  width: 100%;
}

/* GeneratePress */
.main-navigation .main-nav ul li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: var(--tvb-menu-line-thickness, 1px);
  background-color: var(--tvb-menu-line-color, #ffffff);
  transition: width var(--tvb-menu-animation-duration, 300ms) ease;
}

.main-navigation .main-nav ul li a:hover::after {
  width: 100%;
}

/* Responsive - adaptation mobile */
@media (max-width: 768px) {
  /* Réduire l'animation sur mobile pour de meilleures performances */
  .menu a::after,
  .menu-item a::after,
  .nav-menu a::after,
  .navigation a::after,
  .main-navigation a::after,
  .elementor-nav-menu a::after {
    transition: width calc(var(--tvb-menu-animation-duration, 300ms) * 0.7) ease;
  }
}

/* Support pour les filtres Elementor Pro (seulement l'animation de ligne) */
.elementor-widget-taxonomy-filter .e-filter .e-filter-item,
.e-filter .e-filter-item {
  position: relative !important;
}

.elementor-widget-taxonomy-filter .e-filter .e-filter-item::after,
.e-filter .e-filter-item::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 0 !important;
  height: var(--tvb-menu-line-thickness, 1px) !important;
  background-color: #000000 !important;
  transition: width var(--tvb-menu-animation-duration, 300ms) ease !important;
  z-index: 999 !important;
}

.elementor-widget-taxonomy-filter .e-filter .e-filter-item:hover::after,
.elementor-widget-taxonomy-filter .e-filter .e-filter-item[aria-pressed="true"]::after,
.e-filter .e-filter-item:hover::after,
.e-filter .e-filter-item[aria-pressed="true"]::after {
  width: 100% !important;
}

/* Version avec marges pour les filtres */
.e-filter .e-filter-item.tvb-with-margins::after {
  left: var(--tvb-menu-line-offset-left, 10px) !important;
  right: var(--tvb-menu-line-offset-right, 10px) !important;
  bottom: var(--tvb-menu-line-offset-bottom, 5px) !important;
}

.e-filter .e-filter-item.tvb-with-margins:hover::after,
.e-filter .e-filter-item.tvb-with-margins[aria-pressed="true"]::after {
  width: calc(100% - var(--tvb-menu-line-offset-left, 10px) - var(--tvb-menu-line-offset-right, 10px)) !important;
}

/* Désactiver l'animation si l'utilisateur préfère les animations réduites */
@media (prefers-reduced-motion: reduce) {
  .menu a::after,
  .menu-item a::after,
  .nav-menu a::after,
  .navigation a::after,
  .main-navigation a::after,
  .elementor-nav-menu a::after,
  .e-filter-item::after {
    transition: none;
  }
  
  .menu a:hover::after,
  .menu-item a:hover::after,
  .nav-menu a:hover::after,
  .navigation a:hover::after,
  .main-navigation a:hover::after,
  .elementor-nav-menu a:hover::after,
  .e-filter-item:hover::after,
  .e-filter-item[aria-pressed="true"]::after {
    width: 100%;
  }
}