/* ── Front-end Menu ─────────────────────────────────────────────── */

.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.menu-item {
    position: relative;
}

.menu-link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    /*color: inherit;*/
    text-decoration: none;
    font-size: 15px;
    transition: color 0.15s, background-color 0.15s;
    white-space: nowrap;
}

/* Hover par défaut affaibli avec :where() (spec 0,0,1) pour qu'une classe
   Tailwind .text-X / .bg-X choisie en admin (specs 0,1,0) reprenne la main
   au hover. Sans ça, --color-primary écrasait la couleur explicite. */
:where(a.menu-link:not([class*=text-])):hover {
    color: var(--color-primary, #e85a1a);
}

/* ── CTA shortcodes ([account], [accessibility]) ─────────────────── */
/* Le rendu suit le choix admin (Apparence du lien) :
     - "Lien texte"     → linkStyle vide → aucune classe ajoutée → texte brut
     - "Bouton plein"   → linkStyle=button → classe `rounded-full` (sans `border`)
     - "Bouton outline" → linkStyle=outline → classes `rounded-full border`
   Quand "Bouton plein" est choisi SANS couleur de fond, on remplit avec
   --color-featured pour ne pas avoir un bouton transparent.
   Le sélecteur :
     - cible le mode bouton via [class*="rounded-full"]
     - exclut outline via :not([class~="border"]) (mot exact, pas border-X)
     - exclut le cas où l'admin a déjà choisi une couleur via :not([class*="bg-"])
   Neutralise aussi la bordure par défaut du <button> et le cursor pointer. */
.menu-link--cta {
    border: 0;
    cursor: pointer;
}
.menu-link--cta[class*="rounded-full"]:not([class~="border"]):not([class*="bg-"]) {
    background-color: var(--color-featured);
    color: var(--color-white, #fff);
}
.menu-link--cta[class*="rounded-full"]:not([class~="border"]):not([class*="bg-"]):hover {
    background-color: var(--color-black);
    color: var(--color-white, #fff);
}

.menu-chevron {
    flex-shrink: 0;
    transition: transform 0.2s;
}
nav .menu-item--has-children > .menu-link .menu-chevron{
    display: none;
}
nav.menu--header{
    .menu-item--has-children.is-open > .menu-link .menu-chevron,
    .menu-item--has-children:hover > .menu-link .menu-chevron {
        transform: rotate(180deg);
    }
}


/* Dropdown submenu */
nav.menu--header.menu-submenu {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    z-index: 100;
}

nav.menu--header .menu-item--has-children:hover > .menu-submenu,
nav.menu--header .menu-item--has-children.is-open > .menu-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menu-submenu .menu-link {
    padding: 7px 16px;
    font-size: 14px;
    /*color: #374151;*/
}

.menu-submenu .menu-link:hover {
    color: var(--color-primary, #e85a1a);
}
nav.menu--header .menu-submenu .menu-link:hover {
    background: #f9fafb;
}

/* Level 2 submenu (opens to the right) */
.menu-submenu--depth-2 {
    top: 0;
    left: 100%;
    margin-left: 4px;
}
.sm-flex-break{
    display: none;
    text-indent: -999px;
}

/* Mobile */
@media (max-width: 767px) {
    .menu-list {
        flex-direction: column;
        gap: 0;
    }
    .menu--legacy .menu-list,
    .menu--footer .menu-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0;
        & li{
            margin-left: auto;
            margin-right: auto;
            &[class*=logo-]{
                flex: 1 1 50%;
            }
            &.basis-full.w-full{
                & .sm-flex-break{
                    text-indent: -999px;
                }
            }
        }
        & li > *{
            text-align: center;
            & picture{
                margin-left: auto;
                margin-right: auto;

            }
        }
    }

    .menu--header .menu-submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-left: 2px solid #e5e7eb;
        border-radius: 0;
        padding: 0;
        display: none;
    }

    .menu--header .menu-item--has-children.is-open > .menu-submenu {
        display: block;
    }

    .menu--header .menu-submenu .menu-link {
        padding-left: 28px;
    }
}