/* =========================================================

   ANĀHATA - MENU HOME

   =========================================================



   Menu esclusivo di:



   /Default.aspx



   NON viene utilizzato da:

   - Ayurveda

   - Yoga

   - Meditation

   - Reiki



   Ogni area utilizza il proprio menu CSS.

   ========================================================= */





/* =========================================================

   NAVIGAZIONE PRINCIPALE

   ========================================================= */



.main-nav {

    display: flex;

    align-items: center;

    gap: clamp(18px, 2vw, 36px);

    font-family: Arial, Helvetica, sans-serif;

    font-size: clamp(11px, .72vw, 14px);

}





    /* =========================================================

   LINK PRINCIPALI

   ========================================================= */



    .main-nav > a,

    .main-nav > .menu-item > .menu-link {

        display: block;

        color: #27362e;

        font-family: Arial, Helvetica, sans-serif;

        font-size: 14px;

        font-weight: 400;

        font-style: normal;

        line-height: 1.2;

        text-decoration: none;

        white-space: nowrap;

    }





        /* =========================================================

   HOVER LINK PRINCIPALI

   ========================================================= */



        .main-nav > a:hover,

        .main-nav > .menu-item > .menu-link:hover {

            color: #9b321f;

        }





/* =========================================================

   VOCE CON DROPDOWN

   ========================================================= */



.menu-item {

    position: relative;

}





/* =========================================================

   FRECCIA

   ========================================================= */



.arrow {

    display: inline-block;

    margin-left: 4px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    font-weight: 400;

    line-height: 1;

    transition: transform 0.20s ease;

}





/* =========================================================

   DROPDOWN

   ========================================================= */



.menu-item > .dropdown {

    position: absolute;

    top: calc(100% + 14px);

    left: 50%;

    min-width: 190px;

    box-sizing: border-box;

    margin: 0;

    padding: 7px 0;

    background: #f4f0e8;

    border-top: 1px solid #27362e;

    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.10);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateX(-50%) translateY(8px);

    transition: opacity 0.20s ease, transform 0.20s ease, visibility 0.20s ease;

    z-index: 1000;

}





    /* =========================================================

   PONTE TRA LINK E DROPDOWN

   ========================================================= */



    .menu-item > .dropdown::before {

        content: "";

        position: absolute;

        left: 0;

        bottom: 100%;

        width: 100%;

        height: 14px;

    }





/* =========================================================

   APERTURA DROPDOWN

   ========================================================= */



.menu-item:hover > .dropdown,

.menu-item:focus-within > .dropdown {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateX(-50%) translateY(0);

}





/* =========================================================

   ROTAZIONE FRECCIA

   ========================================================= */



.menu-item:hover > .menu-link .arrow,

.menu-item:focus-within > .menu-link .arrow {

    transform: rotate(180deg);

}





/* =========================================================

   LINK DEL DROPDOWN

   ========================================================= */



.menu-item > .dropdown > a {

    display: block;

    width: 100%;

    box-sizing: border-box;

    margin: 0;

    padding: 7px 16px;

    color: #27362e;

    background: transparent;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-weight: 400;

    font-style: normal;

    line-height: 1.2;

    text-align: left;

    text-decoration: none;

    white-space: nowrap;

}





    /* =========================================================

   HOVER LINK DEL DROPDOWN

   ========================================================= */



    .menu-item > .dropdown > a:hover {

        color: #9b321f;

        background: rgba(39, 54, 46, 0.06);

    }





/* =========================================================

   LANGUAGE - ROOT DEFAULT ONLY

   ========================================================= */



.root-language {

    display: flex;

    align-items: center;

    flex: 0 0 auto;

    gap: 6px;

    margin-left: 20px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    font-weight: 400;

    line-height: 1;

    white-space: nowrap;

}





    .root-language a {

        color: #77736b;

        text-decoration: none;

        transition: color 0.20s ease;

    }





        .root-language a:hover {

            color: #27362e;

        }





        .root-language a.active {

            color: #27362e;

            font-weight: 600;

        }





    .root-language span {

        color: #aaa59b;

        font-weight: 300;

    }





/* =========================================================

   TABLET

   ========================================================= */



@media (max-width: 1200px) {



    .main-nav {

        gap: 14px;

    }





    .root-language {

        margin-left: 12px;

        font-size: 11px;

    }

}





/* =========================================================

   SMALL TABLET / LARGE PHONE

   ========================================================= */



@media (max-width: 900px) {



    .main-nav {

        display: none;

    }





    .root-language {

        margin-left: auto;

    }

}