/**
 * Mega-Menu Styles - Compatible Astra
 * UNIQUEMENT DESKTOP (min-width: 769px)
 * Sur mobile: aucun style, Astra gère
 */

/* ========================================
   DESKTOP UNIQUEMENT: Mega-menu au hover
======================================== */
@media (min-width: 769px) {
    .has-mega-menu {
        position: relative;
    }

    .has-mega-menu > .sub-menu {
        display: none;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .has-mega-menu:hover > .sub-menu {
        display: grid !important;
        gap: 1rem;
        position: absolute;
        top: 100%;
        left: 0;
        width: fit-content;
        min-width: 600px;
        max-width: min(95vw, 1200px);
        background: transparent;
        padding: 1.5rem 0;
        box-shadow: none;
        border: none;
        border-radius: 0;
        z-index: 9999;
        margin-top: 0;
        align-items: flex-start;
    }

    /* Colonnes dynamiques selon la classe */
    .mega-cols-2:hover > .sub-menu {
        grid-template-columns: repeat(2, minmax(250px, 400px));
    }

    .mega-cols-3:hover > .sub-menu {
        grid-template-columns: repeat(3, minmax(250px, 333px));
    }

    .mega-cols-4:hover > .sub-menu {
        grid-template-columns: repeat(4, minmax(250px, 300px));
    }

    .mega-cols-5:hover > .sub-menu {
        grid-template-columns: repeat(5, minmax(250px, 280px));
    }

    /* Items de colonnes : stretch pour occuper toute la largeur de la colonne */
    .has-mega-menu > .sub-menu > li {
        min-width: 0;
        width: 100%;
    }

    .has-mega-menu > .sub-menu > li > .sub-menu {
        width: 100%;
    }

    .has-mega-menu > .sub-menu > li > a,
    .has-mega-menu > .sub-menu > li > .mega-menu__col-title {
        font-weight: 600;
        font-size: 1rem;
        color: inherit;
        text-decoration: none;
        display: block;
        margin-bottom: 0.5rem;
        padding: 1em 1em 0 1em !important;
        transition: color 0.2s ease;
    }

    .has-mega-menu > .sub-menu > li > a:hover {
        color: var(--ast-global-color-0, #0274be);
    }

    /* Titre de colonne (non-lien) : pas de hover */
    .has-mega-menu > .sub-menu > li > .mega-menu__col-title {
        cursor: default;
    }

    /* Sous-sous-menu (niveau 3) - toujours visible */
    .has-mega-menu > .sub-menu > li > .sub-menu {
        display: block !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: none !important;
        border: 0;
        padding: 0 1em;
        margin-top: 0;
        list-style: none;
    }

    .has-mega-menu > .sub-menu > li > .sub-menu > li:last-child {
        margin-bottom: 0.5rem;
    }

    .has-mega-menu > .sub-menu > li > .sub-menu > li > a {
        font-weight: 400;
        color: inherit;
        padding: 0.15rem 0;
        padding-left: 0;
        border: none;
        transition: opacity 0.2s ease;
        text-decoration: none;
        display: block;
    }
    /* Theme astra ? */
    .main-header-menu .has-mega-menu .sub-menu {
        padding: 1rem 1.5rem;
    }
    .main-header-menu .has-mega-menu .sub-menu .menu-link {
        padding: 0.5rem 0;
    }

    .has-mega-menu > .sub-menu > li > .sub-menu > li > a:hover {
        opacity: 1;
        color: var(--ast-global-color-0, #0274be);
    }
    .has-mega-menu > .sub-menu .icon-arrow svg {
        display: none;
    }
    /* Override Astra desktop */
    .main-header-menu .has-mega-menu > .sub-menu {
        opacity: 1;
        visibility: visible;
        background-color: #fff;
    }

    .main-header-menu .has-mega-menu:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
    }

    .main-header-menu .has-mega-menu .sub-menu .sub-menu,
    .ast-desktop .has-mega-menu .sub-menu .sub-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: static !important;
    }
}

/* ========================================
   TABLETTE: Adaptation colonnes
======================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .has-mega-menu:hover > .sub-menu {
        gap: 1.5rem;
        max-width: min(90vw, 700px);
    }

    /* Réduire à 2 colonnes max sur tablette pour 3, 4, 5 colonnes */
    .mega-cols-3:hover > .sub-menu,
    .mega-cols-4:hover > .sub-menu,
    .mega-cols-5:hover > .sub-menu {
        grid-template-columns: repeat(2, minmax(300px, 350px));
    }
}