/**
 * Neptune Mega Menu - Structure CSS Front Office
 * 
 * Ce fichier contient UNIQUEMENT la structure de base du menu.
 * Les styles visuels (couleurs, typographie, animations) doivent
 * être ajoutés dans le thème de chaque projet.
 *
 * @author Neptune Team
 * @copyright 2026 Neptune
 */

/* ============================================
   Structure de base du menu
   ============================================ */

.neptune-mega-menu {
    position: relative;
}

.neptune-mega-menu__mobile-trigger {
    display: none;
}

.neptune-mega-menu__overlay {
    display: none;
}

.neptune-mega-menu__mobile-close,
.neptune-mega-menu__item-expander,
.neptune-mega-menu__column-expander,
.neptune-mega-menu__block-expander {
    display: none;
}

.neptune-mega-menu__items {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.neptune-mega-menu__item {
    position: relative;
}

.neptune-mega-menu__link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.neptune-mega-menu__link i {
    margin-right: 0.5rem;
}

/* ============================================
   Structure des sous-menus
   ============================================ */

.neptune-mega-menu__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    z-index: 1000;
    min-width: 100%;
}

.neptune-mega-menu__item:hover > .neptune-mega-menu__submenu {
    display: block;
}

.neptune-mega-menu__item.is-open > .neptune-mega-menu__submenu,
.neptune-mega-menu__item.is-active > .neptune-mega-menu__submenu {
    display: block;
}

/* ============================================
   Système de grille pour les colonnes
   ============================================ */

.neptune-mega-menu__columns {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* gap: 1rem; */
}

.neptune-mega-menu__column {
    display: flex;
    flex-direction: column;
}

/* Tailles de colonnes */
.neptune-mega-menu__column--3 {
    grid-column: span 3;
}

.neptune-mega-menu__column--4 {
    grid-column: span 4;
}

.neptune-mega-menu__column--6 {
    grid-column: span 6;
}

.neptune-mega-menu__column--8 {
    grid-column: span 8;
}

.neptune-mega-menu__column--9 {
    grid-column: span 9;
}

.neptune-mega-menu__column--12 {
    grid-column: span 12;
}

/* ============================================
   Structure des blocs
   ============================================ */

.neptune-mega-menu__block {
    margin-bottom: 1rem;
}

.neptune-mega-menu__block:last-child {
    margin-bottom: 0;
}

/* Niveau 2 : titre / lien de la colonne */
.neptune-mega-menu__column-header {
    margin-bottom: 0.75rem;
}
.neptune-mega-menu__column-link {
    font-weight: 600;
    text-decoration: none;
}
.neptune-mega-menu__column-link:hover {
    text-decoration: underline;
}

.neptune-mega-menu__block-title {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
}

/* .neptune-mega-menu__block-content : contenu HTML libre injecté par le module */

.neptune-mega-menu__block-link {
    display: block;
    text-decoration: none;
    padding: 5px 0;
}

.neptune-mega-menu__block-link:hover {
    text-decoration: underline;
}

/* Niveau 3 : titre du bloc cliquable */
.neptune-mega-menu__block-title-link {
    text-decoration: none;
    font-weight: inherit;
}
.neptune-mega-menu__block-title-link:hover {
    text-decoration: underline;
}

/* Niveau 4 : liste des sous-éléments */
.neptune-mega-menu__block-children {
    list-style: none;
    margin: 0.5rem 0 0 0;
    padding: 0;
}
/* .neptune-mega-menu__block-child et .neptune-mega-menu__block-child-content : styles visuels côté thème */

/* ============================================
   Responsive - Mobile
   ============================================ */

@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1366px) {
    .neptune-mega-menu__mobile-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        padding: 0;
        cursor: pointer;
    }

    .neptune-mega-menu__panel {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 70vw;
        max-width: 420px;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 1200;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .neptune-mega-menu.is-mobile-open .neptune-mega-menu__panel {
        transform: translateX(0);
    }

    .neptune-mega-menu__overlay {
        position: fixed;
        inset: 0;
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
        z-index: 1190;
    }

    .neptune-mega-menu.is-mobile-open .neptune-mega-menu__overlay {
        opacity: 1;
        visibility: visible;
    }

    .neptune-mega-menu__mobile-close {
        display: inline-flex;
        align-items: center;
    }

    .neptune-mega-menu__items {
        flex-direction: column;
    }

    .neptune-mega-menu__submenu {
        position: static;
        display: none;
    }

    .neptune-mega-menu__item:hover > .neptune-mega-menu__submenu {
        display: none;
    }

    .neptune-mega-menu__item.is-active > .neptune-mega-menu__submenu,
    .neptune-mega-menu__item.is-open > .neptune-mega-menu__submenu {
        display: block;
    }

    .neptune-mega-menu__item-expander {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .neptune-mega-menu__column-expander,
    .neptune-mega-menu__block-expander {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    /* Toutes les colonnes en pleine largeur sur mobile */
    .neptune-mega-menu__column--3,
    .neptune-mega-menu__column--4,
    .neptune-mega-menu__column--6,
    .neptune-mega-menu__column--8,
    .neptune-mega-menu__column--9 {
        grid-column: span 12;
    }
}

/* ============================================
   Utilitaires
   ============================================ */

body.mm-mobile-open {
    overflow: hidden;
}

.neptune-mega-menu--hidden {
    display: none;
}