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

.wd-dropdown-menu {
    margin-top: 0 !important;
}


/* =========================================================
   MENU PRODOTTI
========================================================= */

/*
 * LINEE / ESIGENZE / CATEGORIE
 * diventano il riferimento per il submenu successivo.
 */
#menu-item-30031
> .wd-dropdown-menu
> .container.wd-entry-content
> .wd-sub-menu
> .menu-item-has-children {
    position: relative;
}


/*
 * Seconda colonna del menu Prodotti.
 */
#menu-item-30031
> .wd-dropdown-menu
> .container.wd-entry-content
> .wd-sub-menu
> .menu-item-has-children
> .sub-sub-menu.wd-dropdown {
    position: absolute;

    left: 100%;

    margin-left: 20px !important;

    background-color: #ffffff !important;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;

    transition: none !important;
    transition-delay: 0s !important;
    animation: none !important;
}


/* =========================================================
   ALLINEAMENTO LINEE / ESIGENZE / CATEGORIE
========================================================= */

#menu-item-30031
> .wd-dropdown-menu
> .container.wd-entry-content
> .wd-sub-menu
> .menu-item-has-children:nth-child(1)
> .sub-sub-menu.wd-dropdown {
    top: -12px !important;
}

#menu-item-30031
> .wd-dropdown-menu
> .container.wd-entry-content
> .wd-sub-menu
> .menu-item-has-children:nth-child(2)
> .sub-sub-menu.wd-dropdown {
    top: calc(-100% - 12px) !important;
}

#menu-item-30031
> .wd-dropdown-menu
> .container.wd-entry-content
> .wd-sub-menu
> .menu-item-has-children:nth-child(3)
> .sub-sub-menu.wd-dropdown {
    top: calc(-200% - 12px) !important;
}


/* =========================================================
   TERZO LIVELLO MENU
========================================================= */

@media (min-width: 1025px) {

    /*
     * Mantiene aperto l'intero percorso del menu dopo che il puntatore lascia
     * la voce attiva. JavaScript rimuove queste classi con Escape, un clic
     * esterno o quando viene aperto un altro sottomenu.
     */
    #menu-item-30031.vdt-menu-open
    > .wd-dropdown-menu,

    #menu-item-30031
    .menu-item-has-children.vdt-submenu-parent-active
    > .sub-sub-menu.wd-dropdown {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    /*
     * Le voci come:
     * CONDITIONER / MANICURE / MASCHERE / SHAMPOO
     * diventano il riferimento del submenu successivo.
     */
    #menu-item-30031
    > .wd-dropdown-menu
    > .container.wd-entry-content
    > .wd-sub-menu
    > .menu-item-has-children
    > .sub-sub-menu.wd-dropdown
    > .menu-item-has-children {
        position: relative !important;
    }


    /*
     * Terzo livello.
     * Non impostiamo top: 0.
     *
     * In questo modo il submenu si apre
     * all'altezza della voce hoverata.
     */
    #menu-item-30031
    > .wd-dropdown-menu
    > .container.wd-entry-content
    > .wd-sub-menu
    > .menu-item-has-children
    > .sub-sub-menu.wd-dropdown
    > .menu-item-has-children
    > .sub-sub-menu.wd-dropdown {

        position: absolute !important;

        left: 100% !important;

        margin-left: 0 !important;
        margin-top: 0 !important;

        max-height: none !important;
        overflow: visible !important;

        background-color: #ffffff !important;

        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;

        transform: none !important;

        transition: none !important;
        transition-delay: 0s !important;
        animation: none !important;
    }


    /*
     * Mantiene aperto il terzo livello selezionato anche quando il puntatore
     * non è più sopra la sua voce. Lo stato viene cambiato dal JavaScript
     * soltanto aprendo un altro sottomenu o cliccando fuori dal menu Prodotti.
     */
    #menu-item-30031
    > .wd-dropdown-menu
    > .container.wd-entry-content
    > .wd-sub-menu
    > .menu-item-has-children
    > .sub-sub-menu.wd-dropdown
    > .menu-item-has-children.vdt-submenu-active
    > .sub-sub-menu.wd-dropdown {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        z-index: 30 !important;
    }


    /*
     * Se il terzo livello è più lungo dello spazio disponibile, il relativo
     * li diventa statico: top: 0 viene quindi calcolato rispetto alla seconda
     * colonna e il box parte dalla sua sommità, non dalla voce hoverata.
     */
    #menu-item-30031
    > .wd-dropdown-menu
    > .container.wd-entry-content
    > .wd-sub-menu
    > .menu-item-has-children
    > .sub-sub-menu.wd-dropdown
    > .menu-item-has-children.vdt-submenu-align-top {
        position: static !important;
    }

    #menu-item-30031
    > .wd-dropdown-menu
    > .container.wd-entry-content
    > .wd-sub-menu
    > .menu-item-has-children
    > .sub-sub-menu.wd-dropdown
    > .menu-item-has-children.vdt-submenu-align-top
    > .sub-sub-menu.wd-dropdown {
        left: 100% !important;
        top: 0 !important;
        bottom: auto !important;
    }

    #menu-item-30031
    .menu-item-has-children.vdt-submenu-align-top::after {
        display: none;
    }


    /*
     * Ponte invisibile:
     * evita che il submenu sparisca mentre
     * il mouse passa alla colonna successiva.
     */
    #menu-item-30031
    > .wd-dropdown-menu
    > .container.wd-entry-content
    > .wd-sub-menu
    > .menu-item-has-children
    > .sub-sub-menu.wd-dropdown
    > .menu-item-has-children::after {

        content: "";

        position: absolute;

        top: 0;
        right: -20px;

        width: 20px;
        height: 100%;
    }
}


/* =========================================================
   BACKGROUND DROPDOWN
========================================================= */

#menu-item-30031 .wd-dropdown,
#menu-item-30031 .sub-sub-menu.wd-dropdown {
    background-color: #ffffff !important;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}


/* =========================================================
   FIX CHIUSURA DROPDOWN
========================================================= */

/*
 * Evita che il testo sparisca prima del background.
 * Testo e box si chiudono insieme.
 */
@media (min-width: 1025px) {

    #menu-item-30031 .wd-dropdown,
    #menu-item-30031 .wd-dropdown-menu,
    #menu-item-30031 .sub-sub-menu.wd-dropdown {

        transition: none !important;
        transition-delay: 0s !important;
        animation: none !important;
    }

    #menu-item-30031 .wd-dropdown *,
    #menu-item-30031 .wd-dropdown-menu *,
    #menu-item-30031 .sub-sub-menu.wd-dropdown * {

        transition: none !important;
        transition-delay: 0s !important;
        animation: none !important;
    }
}


/* =========================================================
   HOME HEADER
========================================================= */

/*
 * Navigazione bianca sopra la hero.
 *
 * Lo sticky header di WoodMart mantiene
 * i colori normali del tema.
 */
@media (min-width: 1025px) {

    body.home
    .whb-main-header:not(.whb-clone):not(.whb-sticked)
    .wd-nav-header {

        --nav-color: #ffffff !important;
        --nav-color-hover: #ffffff !important;
        --nav-color-active: #ffffff !important;
        --nav-chevron-color: rgba(255, 255, 255, 0.75) !important;
    }


    body.home
    .whb-main-header:not(.whb-clone):not(.whb-sticked)
    .wd-nav-header > li > a,

    body.home
    .whb-main-header:not(.whb-clone):not(.whb-sticked)
    .wd-nav-header > li:hover > a,

    body.home
    .whb-main-header:not(.whb-clone):not(.whb-sticked)
    .wd-nav-header > li.current-menu-item > a,

    body.home
    .whb-main-header:not(.whb-clone):not(.whb-sticked)
    .wd-nav-header > li.current_page_item > a {

        color: #ffffff !important;
    }
}


/* =========================================================
   DESKTOP COMPATTO
========================================================= */

@media (min-width: 1025px) and (max-width: 1400px) {

    .whb-main-header .wd-header-nav,
    .whb-sticky-header .wd-header-nav {
        min-width: 0;
    }


    .whb-main-header .wd-nav-header,
    .whb-sticky-header .wd-nav-header {

        --nav-gap: clamp(18px, 2vw, 28px) !important;

        flex-wrap: nowrap !important;

        justify-content: space-evenly !important;

        min-width: 0;

        white-space: nowrap;

        width: 100%;
    }


    .whb-main-header .wd-nav-header > li,
    .whb-sticky-header .wd-nav-header > li {

        flex: 0 0 auto;

        min-width: 0;
    }


    .whb-main-header .wd-nav-header > li > a,
    .whb-sticky-header .wd-nav-header > li > a {

        white-space: nowrap;
    }


    .whb-main-header
    .wd-nav-header
    > li
    > a
    .nav-link-text,

    .whb-sticky-header
    .wd-nav-header
    > li
    > a
    .nav-link-text {

        font-size: clamp(14px, 1.25vw, 17px) !important;

        line-height: 1.2;
    }
}


/* =========================================================
   DESKTOP MOLTO COMPATTO
========================================================= */

@media (min-width: 1025px) and (max-width: 1150px) {

    .whb-main-header .wd-nav-header,
    .whb-sticky-header .wd-nav-header {

        --nav-gap: 16px !important;
    }


    .whb-main-header
    .wd-nav-header
    > li
    > a
    .nav-link-text,

    .whb-sticky-header
    .wd-nav-header
    > li
    > a
    .nav-link-text {

        font-size: 13px !important;
    }
}