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

   ANĀHATA - REIKI MENU



   Menu autonomo dell'area Reiki.



   NON dipende da:

   /Css/Menu.css

   /Css/Home.css



   MENU:

   - nav_reiki_default = SOLO Reiki/Default.aspx

   - main-nav          = pagine interne tramite Reiki.Master



   I dropdown Reiki sono condivisi.

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





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

   MENU DEFAULT REIKI

   SOLO /Reiki/Default.aspx



   Menu sopra la hero.



   Stato normale:

   bianco attenuato.



   Hover:

   bianco pieno.

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



.nav_reiki_default {

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    align-items: center;

    justify-content: flex-end;

    gap: clamp(17px, 1.35vw, 26px);

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

    font-size: 14px;

    font-weight: 400;

}





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

   LINK PRINCIPALI - DEFAULT

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



    .nav_reiki_default > a,

    .nav_reiki_default > .menu-item > .menu-link {

        position: relative;

        display: block;

        margin: 0;

        padding: 0;

        color: rgba(255, 255, 255, .78);

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

        font-size: clamp(14px, .9vw, 18px);

        font-weight: 400;

        font-style: normal;

        line-height: 1.2;

        text-decoration: none;

        white-space: nowrap;

        opacity: 1;

        transition: color .20s ease, opacity .20s ease;

    }





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

   HOVER LINK PRINCIPALI - DEFAULT

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



        .nav_reiki_default > a:hover,

        .nav_reiki_default > a:focus,

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

        .nav_reiki_default > .menu-item > .menu-link:focus,

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

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

            color: #ffffff;

            opacity: 1;

        }





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

   ACTIVE



   Nessun colore speciale.

   Reiki rimane come gli altri link.



   Hover = bianco pieno.

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



        .nav_reiki_default > a.active,

        .nav_reiki_default > .menu-item > .menu-link.active {

            color: rgba(255, 255, 255, .78);

            opacity: 1;

        }



            .nav_reiki_default > a.active:hover,

            .nav_reiki_default > a.active:focus,

            .nav_reiki_default > .menu-item:hover > .menu-link.active,

            .nav_reiki_default > .menu-item:focus-within > .menu-link.active {

                color: #ffffff;

                opacity: 1;

            }





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

   SOTTOLINEATURA HOVER

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



        .nav_reiki_default > a::after,

        .nav_reiki_default > .menu-item > .menu-link::after {

            content: "";

            position: absolute;

            left: 0;

            right: 0;

            bottom: -7px;

            height: 1px;

            background: rgba(255, 255, 255, .85);

            opacity: 0;

            transition: opacity .18s ease;

        }



        .nav_reiki_default > a:hover::after,

        .nav_reiki_default > a:focus::after,

        .nav_reiki_default > .menu-item:hover > .menu-link::after,

        .nav_reiki_default > .menu-item:focus-within > .menu-link::after {

            opacity: 1;

        }





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

   MENU PAGINE INTERNE REIKI

   Usato da Reiki.Master



   Separato dalla Default.

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



.main-nav {

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    align-items: center;

    justify-content: flex-end;

    gap: clamp(17px, 1.35vw, 26px);

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

    font-size: 14px;

    font-weight: 400;

}





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

   LINK PRINCIPALI - PAGINE INTERNE



   Per ora viene definita soltanto la struttura.

   Il colore definitivo delle pagine interne potrà essere

   definito con il layout del Reiki.Master.

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



    .main-nav > a,

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

        position: relative;

        display: block;

        margin: 0;

        padding: 0;

        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;

    }





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

   CONTENITORE GENERICO VOCE MENU

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



.menu-item {

    position: relative;

    margin: 0;

    padding: 0;

}





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

   FRECCIA PRINCIPALE

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



.arrow {

    display: inline-block;

    margin-left: 4px;

    color: inherit;

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

    font-size: 12px;

    font-weight: 400;

    line-height: 1;

    transition: transform .20s ease;

}





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

   DROPDOWN REIKI

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



.menu-item > .dropdown {

    position: absolute;

    top: calc(100% + 15px);

    left: 0;

    z-index: 5000;

    min-width: 215px;

    box-sizing: border-box;

    margin: 0;

    padding: 9px 0;

    background: rgba(252, 250, 244, .98);

    box-shadow: 0 14px 35px rgba(0, 0, 0, .18);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateY(7px);

    transition: opacity .20s ease, visibility .20s ease, transform .20s ease;

}





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

   PONTE INVISIBILE



   Evita che il dropdown si chiuda passando

   dal link Reiki al menu.

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



    .menu-item > .dropdown::before {

        content: "";

        position: absolute;

        left: 0;

        bottom: 100%;

        width: 100%;

        height: 15px;

    }





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

   APERTURA DROPDOWN

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



.menu-item:hover > .dropdown,

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

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);

}





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

   ROTAZIONE FRECCIA

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



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

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

    transform: rotate(180deg);

}





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

   LINK DIRETTI DEL DROPDOWN



   Introduzione

   il Reiki

   Su di me

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



.menu-item > .dropdown > a {

    display: block;

    width: 100%;

    box-sizing: border-box;

    margin: 0;

    padding: 9px 17px;

    color: #25231f;

    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;

    transition: background .15s ease, color .15s ease;

}



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

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

        color: #25231f;

        background: rgba(215, 128, 47, .10);

    }





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

   CONTENITORE SEZIONE REIKI



   la Pratica

   la Storia

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



.reiki-submenu-item {

    position: relative;

    display: block;

    width: 100%;

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}





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

   TITOLO SEZIONE



   Il colore NON viene definito qui.

   Default.aspx usa volutamente inline:

   style="color: darkgray;"

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



.reiki-submenu-title {

    display: block;

    width: 100%;

    box-sizing: border-box;

    margin: 4px 0 0 0;

    padding: 6px 16px 3px 28px;

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

    font-size: 14px;

    font-weight: 400;

    font-style: normal;

    line-height: 1.2;

    text-align: left;

    white-space: nowrap;

}





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

   CONTENITORE LINK INTERNI

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



.reiki-submenu {

    display: block;

    width: 100%;

    box-sizing: border-box;

    margin: 0;

    padding: 0 0 2px 0;

}





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

   LINK INTERNI



   i Principi

   i Simboli

   le Posizioni



   Hawayo Takata

   Frank Arjava Petter

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



    .reiki-submenu > a {

        display: block;

        width: 100%;

        box-sizing: border-box;

        margin: 0;

        padding: 9px 17px 9px 34px;

        color: #25231f;

        background: transparent;

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

        font-size: 13px;

        font-weight: 400;

        font-style: normal;

        line-height: 1.2;

        text-align: left;

        text-decoration: none;

        white-space: nowrap;

        transition: background .15s ease, color .15s ease;

    }



        .reiki-submenu > a:hover,

        .reiki-submenu > a:focus {

            color: #25231f;

            background: rgba(215, 128, 47, .10);

        }





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

   TABLET

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



@media (max-width: 1050px) {



    .nav_reiki_default,

    .main-nav {

        gap: 14px;

    }





        .nav_reiki_default > a,

        .nav_reiki_default > .menu-item > .menu-link,

        .main-nav > a,

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

            font-size: 12px;

        }

}





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

   MOBILE

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



@media (max-width: 900px) {



    .nav_reiki_default,

    .main-nav {

        display: none;

    }

}







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

   PER IL BOTTOM TEXT

    NON CANCELLARE

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



.site-footer {

    border-top: 1px solid rgba(39, 54, 46, .12);

}



.footer-bottom {

    min-height: 70px;

    border-top: 1px solid rgba(39, 54, 46, .12);

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 10px;

    color: #6d716c;

}



    .footer-bottom div {

        display: flex;

        gap: 10px;

    }