/**
 * Styles personnalisés pour les sous-menus automatiques
 * 
 * @package Porto Child
 * @author Aming Tahiti
 */

/* ==========================================================================
   STYLES COMMUNS
   ========================================================================== */

.main-menu .menu-item.has-children {
    position: relative;
}

.main-menu .sub-menu-auto {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-menu .sub-menu-auto li {
    list-style: none;
} 

.main-menu .sub-menu-auto a {
    display: block;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.main-menu .sub-menu-auto .count {
    opacity: 0.7;
    font-size: 0.9em;
}

/* Indicateur de sous-menu (flèche CSS pure) */
.main-menu .has-children > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 8px;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 0.3s ease;
    opacity: 0.7;
}

/* ==========================================================================
   DESKTOP (> 992px)
   ========================================================================== */

@media (min-width: 992px) {
    
    /* Cacher les sous-menus par défaut */
    .main-menu .sub-menu-auto {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 280px;
        background: #ffffff;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
        border-radius: 0 0 4px 4px;
        z-index: 9999;
        padding: 15px 0;
    }
    
    /* Afficher au hover */
    .main-menu .has-children:hover > .sub-menu-auto {
        display: block;
        animation: fadeInDown 0.3s ease;
    }
    
    /* Style des liens dans le sous-menu */
    .main-menu .sub-menu-auto a {
        padding: 10px 20px;
        color: #333333;
        font-size: 14px;
        white-space: nowrap;
    }
    
    .main-menu .sub-menu-auto a:hover {
        background-color: #f5f5f5;
        color: #0088cc;
        padding-left: 25px;
    }
    
    /* Rotation de la flèche au hover */
    .main-menu .has-children:hover > a::after {
        transform: rotate(180deg);
        opacity: 1;
    }
    
    /* Animation d'apparition */
    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Style pour colonnes multiples si beaucoup d'items */
    .main-menu .sub-menu-auto.has-many-items {
        column-count: 2;
        column-gap: 20px;
        min-width: 500px;
    }
    
    .main-menu .sub-menu-auto.has-many-items li {
        break-inside: avoid;
    }
}

/* ==========================================================================
   MOBILE (< 992px)
   ========================================================================== */

@media (max-width: 991px) {
    
    /* Styles pour les sous-menus sur mobile */
    
    /* Style du bouton toggle (flèche) */
    .submenu-toggle {
        position: absolute;
        right: 10px;
        top: 0;  /* Aligné en haut du parent */
        width: 40px;
        height: 44px;  /* Hauteur fixe pour correspondre à la hauteur du lien */
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }
    
    /* Icône du toggle (chevron) */
    .submenu-toggle .toggle-icon {
        display: block;
        width: 8px;
        height: 8px;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
        transform: rotate(45deg);
        transform-origin: center center;  /* Point de pivot au centre */
        transition: transform 0.3s ease;
    }
    
    /* Rotation de la flèche quand ouvert - rotation complète pour rester au même endroit */
    .has-children.active .submenu-toggle .toggle-icon {
        transform: rotate(225deg);  /* 45deg + 180deg = chevron vers le haut, même position */
        transform-origin: center center;
    }
    
    /* Le parent doit être en position relative */
    .has-children {
        position: relative;
    }
    
    /* Le lien principal doit laisser de la place pour le bouton */
    .has-children > a {
        padding-right: 50px !important;
    }
    
    /* Sous-menus cachés par défaut */
    .sub-menu-auto {
        display: none;
        padding-left: 15px;
        padding-top: 8px;
        padding-bottom: 8px;
        background-color: rgba(0, 0, 0, 0.03);
    }
    
    /* Sous-menus visibles quand parent a la classe 'active' */
    .has-children.active > .sub-menu-auto {
        display: block !important;
        animation: slideDownMobile 0.3s ease;
    }
    
    /* Style des liens dans les sous-menus mobile */
    .sub-menu-auto li {
        list-style: none;
    }
    
    .sub-menu-auto a {
        display: block;
        padding: 10px 15px;
        color: #333333;
        font-size: 14px;
        text-decoration: none;
        border-left: 2px solid transparent;
        transition: all 0.2s ease;
    }
    
    .sub-menu-auto a:hover,
    .sub-menu-auto a:active {
        border-left-color: #0088cc;
        background-color: rgba(0, 136, 204, 0.08);
        padding-left: 20px;
    }
    
    /* Compteur de produits */
    .sub-menu-auto .count {
        opacity: 0.6;
        font-size: 0.85em;
        margin-left: 3px;
    }
    
    /* Animation slide down pour mobile */
    @keyframes slideDownMobile {
        from {
            opacity: 0;
            max-height: 0;
        }
        to {
            opacity: 1;
            max-height: 2000px;
        }
    }
    
    /* Adaptation pour le panel mobile de Porto */
    #nav-panel .sub-menu-auto,
    .mobile-sidebar .sub-menu-auto,
    .mobile-menu .sub-menu-auto {
        padding-left: 20px;
        background-color: rgba(0, 0, 0, 0.02);
    }
    
    #nav-panel .sub-menu-auto a,
    .mobile-sidebar .sub-menu-auto a,
    .mobile-menu .sub-menu-auto a {
        padding: 9px 12px;
        font-size: 13px;
    }
}

/* ==========================================================================
   MENU HAMBURGER / PANEL MOBILE - DÉSACTIVÉ
   ========================================================================== */

/* Le menu mobile de Porto gère déjà tout
 * Pas besoin d'ajouter de styles supplémentaires
 */

/* ==========================================================================
   MEGA MENU (si le thème Porto utilise des mega menus)
   ========================================================================== */

.main-menu .mega-menu .sub-menu-auto {
    position: static;
    box-shadow: none;
    padding: 0;
}

/* ==========================================================================
   ACCESSIBILITÉ
   ========================================================================== */

.main-menu .sub-menu-auto a:focus {
    outline: 2px solid #0088cc;
    outline-offset: 2px;
}

/* Skip link pour lecteurs d'écran */
.skip-submenu {
    position: absolute;
    left: -9999px;
}

.skip-submenu:focus {
    position: static;
    left: auto;
}

/* ==========================================================================
   PERSONNALISATION THÈME PORTO
   ========================================================================== */

/* Adaptation pour le header Porto */
#header .main-menu .sub-menu-auto {
    margin-top: 0;
}

/* Pour le menu sticky */
#header.sticky-header .main-menu .sub-menu-auto {
    margin-top: 0;
}

/* ==========================================================================
   DARK MODE (optionnel)
   ========================================================================== */

body.dark-mode .main-menu .sub-menu-auto {
    background: #2c2c2c;
    color: #ffffff;
}

body.dark-mode .main-menu .sub-menu-auto a {
    color: #ffffff;
}

body.dark-mode .main-menu .sub-menu-auto a:hover {
    background-color: #3c3c3c;
}

/* ==========================================================================
   PRINT (masquer les sous-menus à l'impression)
   ========================================================================== */

@media print {
    .main-menu .sub-menu-auto {
        display: none !important;
    }
}