/*START MENU con tendine*/
/* ================================
   MENU MULTILIVELLO TIMBER/ACF
   ================================ */

/* RESET BASE */
ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ================================
   LIVELLO 1 – MENU PRINCIPALE
   ================================ */
.menu-item {
    position: relative;
}

.menu-item > a:hover {
    color: #a60000;
}

/* ================================
   DROPDOWN DI BASE
   ================================ */
.menu-item.menu-item-has-children > ul {
    display: flex; /* permette colonne orizzontali del 2° livello */
    position: absolute;
    top: 80%;
    left: -50%;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    padding: 1.5rem;
    gap: 2rem;
    z-index: 999;
    align-items: flex-start;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.25s ease;
}

/* Mostra tutto il dropdown all'hover del primo livello */
.menu-item.menu-item-has-children:hover > ul:first-of-type{
    opacity: 1;
    /* transform: translateY(0); */
}

/* risluzione problema menu */
.menu-item-has-children > a {
    display: block;
}

.menu-item-has-children > ul {
    pointer-events: none;
}

.menu-item-has-children:hover > ul {
    pointer-events: auto;
}
/* */



/* Titolo del secondo livello non cliccabile */
.menu-item.menu-item-has-children > ul > .menu-item-has-children > a {
    pointer-events: none;
    cursor: default;
    font-weight: 600;
    color: #333;
    display: block;
    margin-bottom: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #eee;
}

/* ================================
   LIVELLO 3 – LINK SOTTO IL TITOLO
   ================================ */
/* Forza il terzo livello a essere sempre visibile */
.menu-item-has-children > ul > .menu-item-has-children > ul {
    display: block !important;
    position: static;
    margin: 0;
    padding: 0;
    box-shadow: none;
    opacity: 1;
}

/* Link del terzo livello */
.menu-item-has-children > ul > .menu-item-has-children > ul > .menu-item > a {
    display: block;
    padding: 0.4rem 0;
    color: #444;
    text-decoration: none;
    transition: color 0.2s ease;
}

.menu-item-has-children > ul > .menu-item-has-children > ul > .menu-item > a:hover {
    color: #a60000;
}

/* ================================
   RESPONSIVE – MOBILE
   ================================ */
@media (min-width: 992px) {
    /* ================================
   LIVELLO 2 – COLONNE ORIZZONTALI
   ================================ */
    .menu-item.menu-item-has-children > ul > .menu-item-has-children {
        display: inline-block;
        vertical-align: top;
        min-width: 180px;
    }

    .menu-item > a {
        display: inline-block;
        padding: 0.75rem 1rem;
        text-decoration: none;
        color: #222;
        font-weight: 500;
        transition: color 0.2s ease;
    }
}
@media (max-width: 991px) {
    .menu-item > ul {
        position: static;
        display: none;
        box-shadow: none;
        padding: 0.5rem 0;
        flex-direction: column;
        opacity: 1;
        transform: none;
    }

    .menu-item.open > ul {
        display: block;
    }

    .menu-item > ul > .menu-item-has-children {
        display: block;
        min-width: 100%;
        margin-bottom: 1rem;
    }

    .menu-item > ul > .menu-item-has-children > a {
        border: none;
        margin-bottom: 0.3rem;
    }

    .menu-item.menu-item-has-children > ul{
        left: auto;
        right: 0;
    }
    /* ================================
   LIVELLO 2 – COLONNE ORIZZONTALI
   ================================ */
    .menu-item.menu-item-has-children > ul > .menu-item-has-children {
        display: inline-block;
        vertical-align: top;
    }

    .menu-item > a {
        display: inline-block;
        padding: 0.75rem 0 0.75rem 1rem;
        text-decoration: none;
        color: #222;
        font-weight: 500;
        transition: color 0.2s ease;
    }
}
/*END MENU con tendine*/