/*
   Fichier: src/css/shop-nav.css
   Menu boutique : sous-menus déroulants avec « Tout voir » en tête (style Monocle).
   Chargé par shop-core.php sur les pages boutique. S'appuie sur header.css (.main-nav).
*/

/* === DESKTOP === */

/* layout.css donne overflow-x: auto à .nav-menu, ce qui force aussi overflow-y: auto
   et coupe les sous-menus. Sur les pages boutique, on le rétablit. */
.main-nav .nav-menu {
    overflow: visible;
}

.main-nav .nav-menu .menu-item {
    position: relative;
}

/* Chevron sur les éléments qui ont un sous-menu */
.main-nav .nav-menu .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin-left: 0.45em;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translateY(-0.15em);
    vertical-align: middle;
}

.main-nav .nav-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    min-width: 14rem;
    margin: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    list-style: none;
    background: var(--color-gentologie-background);
    border: 1px solid var(--color-gentologie-green);
}

.main-nav .nav-menu .menu-item-has-children:hover > .sub-menu,
.main-nav .nav-menu .menu-item-has-children:focus-within > .sub-menu {
    display: block;
}

.main-nav .nav-menu .sub-menu .menu-item {
    display: block;
}

.main-nav .nav-menu .sub-menu .menu-item::after {
    display: none;
}

.main-nav .nav-menu .sub-menu .menu-item a {
    display: block;
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-base);
    text-transform: none;
    white-space: nowrap;
}

.main-nav .nav-menu .sub-menu .menu-item-all {
    margin-bottom: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-gentologie-green);
}

.main-nav .nav-menu .sub-menu .current-menu-item > a {
    border-bottom: 0;
    text-decoration: underline;
}

/* === MOBILE : sous-menus toujours visibles, en retrait === */

.mobile-nav-menu .sub-menu {
    margin: 0;
    padding: 0 0 0 var(--spacing-md);
    list-style: none;
}

.mobile-nav-menu .menu-item-has-children > a::after {
    display: none;
}