/**
 * Preline Header - Styles personnalisés
 * Complète les classes Tailwind pour le header
 *
 * @package GrimTheme
 */

/* ========================================
   HEADER PRINCIPAL
   ======================================== */

header {
    position: relative;
    transition: all 0.3s ease;
}

/* ========================================
   NAVIGATION
   ======================================== */

/* Liens de navigation */
nav a {
    transition: all 0.2s ease;
}

/* Animation des liens du menu principal UNIQUEMENT avec underline au hover */
.mega-menu-nav-container a {
    position: relative;
}

.mega-menu-nav-container a:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    background-color: currentColor;
    transition: width 0.3s ease;
}

.mega-menu-nav-container a:hover:after {
    width: 80%;
}

/* ========================================
   DROPDOWNS (MEGA-MENUS)
   ======================================== */

/* Animation du dropdown */
.hs-dropdown-menu {
    transform-origin: top;
}

.hs-dropdown-open .hs-dropdown-menu {
    animation: slideDown 0.15s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Overlay hover subtil pour les items du mega-menu */
.hs-dropdown-menu a:hover {
    transform: translateX(2px);
}

/* ========================================
   BOUTONS
   ======================================== */

/* Effet hover sur les boutons */
button.hs-dropdown-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Rotation de la flèche dans les dropdowns */
.hs-dropdown-toggle svg {
    transition: transform 0.3s ease;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 767px) {
    /* En mobile, les dropdowns deviennent des collapses */
    .hs-dropdown-menu {
        position: static !important;
        width: 100%;
        box-shadow: none;
        background: transparent;
    }

    /* Espacement vertical pour mobile */
    .hs-dropdown-menu > div {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

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

/* Focus visible pour la navigation au clavier */
nav a:focus-visible,
button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* ========================================
   ANIMATIONS AVANCÉES
   ======================================== */

/* Transition douce pour les mega-menus */
.hs-dropdown-menu {
    will-change: opacity, transform;
}

/* Hover sur les items avec icônes */
.hs-dropdown-menu a:hover img {
    transform: scale(1.05);
}