/**********************************************************
*    IncludeMe Tools
*    IncludeMe-nav V3.2.0
*    Copyright 2025, Hyssop Production
*    https://www.hyssop.com/
**********************************************************/

.nav-main {
    --nav-menu-bg: var(--tertiary);
    --nav-link-bg: var(--nav-menu-bg);
    --nav-link-text: var(--secondary);
    --nav-sub-link-text: var(--nav-link-text);
    --nav-menu-icon: var(--nav-link-text);
    --nav-sub-menu-icon: var(--nav-menu-icon);
    --nav-mobi-menu-switch: var(--nav-link-text);
    --nav-active-mobi-menu-switch: var(--nav-link-text);
    --nav-mobi-menu-control: var(--nav-link-text);
    --nav-active-mobi-menu-control: var(--nav-sub-menu-icon);
    --nav-sub-mobi-menu-control: var(--nav-link-text);
    --nav-active-sub-mobi-menu-control: var(--nav-sub-menu-icon);
}

.nav-main * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.nav-main {
    background-color: var(--nav-menu-bg); /*menu BG color*/
    padding: 5px 0; /*menu bar height and menu text width*/
}

.nav-main > menu {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.nav-main li {
    list-style-type: none;
    background-color: var(--nav-link-bg); /*link BG color*/
}

.nav-main a, .nav-main span {
    padding: 4px 8px;
    text-decoration: none;
    color: var(--nav-link-text); /*link text color*/
    /*width: 100%;*/
    /*text-align: left;*/
}

.nav-main li li a, .nav-main li li span {
    color: var(--nav-sub-link-text); /*sub-menu link text color*/
}

.nav-main a:hover {
    text-decoration: underline;
}

.nav-main > menu li {
    text-transform: uppercase;
}

.nav-main > menu li.has-child {
    z-index: 0; /*keep submenus on top when main menu wraps*/
}

.nav-main li menu {
    display: none;
    position: absolute;
    width: max-content;
}

.nav-main li:hover > menu {
    display: flex;
    flex-direction: column;
}

.nav-main li > menu menu {
    margin: 0 0 0 100%;
}

.nav-main li li {
    display: flex;
    text-transform: none;
}

.nav-main li li:last-child {
    border-radius: 0 0 5px 5px;
}

.nav-main li li li:first-child {
    border-radius: 5px 5px 0 0;
}

.nav-main li li li:last-child {
    border-radius: 0 0 5px 5px;
}

.nav-main .control {
    display: none;
}

.js-show-block {
    display: none;
}

/*-- desktop -----------------------------------------------------------------------------------------*/
@media all and (min-width: 576px) {
    .nav-main .has-child::after {
        position: relative;
        right: 6px; /*main icon positioning*/
        color: var(--nav-menu-icon);
        content: "\25bc"; /*filled triangle arrow*/
        /*content: "\25bd"; !*hollow triangle arrow*!*/
        /*content: "\22c1"; !*down arrow*!*/
        /*content: "\27a4"; !*delta*! transform: rotate(90deg); !*delta rotate*!*/
    }

    .nav-main menu menu .has-child::after {
        padding: 3px 4px 0 6px; /*sub icon positioning*/
        color: var(--nav-sub-menu-icon);
        content: "\25bc"; /*filled triangle arrow*/
        /*content: "\25bd"; !*hollow triangle arrow*!*/
        /*content: "\22c1"; !*down arrow*!*/
        /*content: "\27a4"; !*delta*! transform: rotate(90deg); !*delta rotate*!*/
    }
}

/*-- mobile -----------------------------------------------------------------------------------------*/
@media all and (max-width: 575px) {
    .nav-main > button {
        width: 100%;
    }

    .nav-main > menu {
        display: block;
    }

    .nav-main li {
        line-height: 1.7rem;
        text-align: left;
    }

    .nav-main a, .nav-main span {
        width: calc(100% - 65px);
        display: inline-block;
    }

    .nav-main li menu {
        display: block;
        position: unset;
        padding: 0 0 0 20px;
    }

    .nav-main li li {
        display: block;
    }

    .nav-main li > menu, .nav-main li > menu menu {
        margin: 0;
        width: 100%;
    }

    .nav-main .control {
        border: none;
        background-color: transparent;
        color: var(--nav-mobi-menu-switch); /*menu control link color*/
        transition-duration: 2.5s;
    }

    .nav-main .control.activated {
        color: var(--nav-active-mobi-menu-switch); /*activated menu control text color*/
    }

    .nav-main .control::before, .nav-main .control::after, .nav-main .control {
        font-size: 1.2rem;
    }

    .nav-main .control.mmcon::before {
        content: "\2630"; /*hamburger icon*/
    }

    .nav-main .control.mmcon::after, .nav-main .control.activated.mmcon::after {
        display: none; /*disables arrow in main menu button*/
        padding: 0;
    }

    .nav-main .control::after {
        display: inline-block;
        color: var(--nav-mobi-menu-control); /*sub-menu control icon color*/

        /*duration*/
        transition-duration: 1.0s;

        /*static*/
        /*content: "\2715"; !*multiplication X*!*/
        /*content: "\2716"; !*bold multiplication X*!*/
        /*content: "\2b58"; !*sm circle*!*/
        /*content: "\25ef"; !*lg circle*!*/

        /*dynamic*/
        /*content: "+"; !*plus*!*/
        /*content: "\271a"; !*bold plus*!*/
        content: "\25bc"; /*filled triangle arrow*/
        /*content: "\25bd"; !*hollow triangle arrow*!*/
        /*content: "\22c1"; !*down arrow*!*/
        /*content: "\27a4"; !*delta*! transform: rotate(90deg);*/
    }

    .nav-main .control.activated::after{
        color: var(--nav-active-mobi-menu-control); /*activated sub-menu control icon color*/

        /*dynamic - only needed if different from initial above*/
        /*content: "-"; !*minus*! padding-left: 4px; !*minus padding*!*/
        /*content: "\2012"; !*dash*! padding-left: 3px; !*dash padding*! font-size: 1.3rem; !*dash size*!*/
        content: "\25bc"; /*filled triangle arrow*/
        /*content: "\25bd"; !*hollow triangle arrow*!*/
        /*content: "\22c0"; !*up arrow*!*/

        /*rotating*/
        transform: rotate(180deg); /*triangle/arrow rotate*/
        /*transform: rotate(270deg); !*delta rotate*! padding-bottom: 3px; !*delta padding*!*/
    }

    .nav-main menu menu .control::after {
        display: inline-block;
        color: var(--nav-sub-mobi-menu-control); /*sub-menu control icon color*/

        /*static*/
        /*content: "\2715"; !*multiplication X*!*/
        /*content: "\2716"; !*bold multiplication X*!*/
        /*content: "\2b58"; !*sm circle*!*/
        /*content: "\25ef"; !*lg circle*!*/

        /*dynamic*/
        /*content: "+"; !*plus*!*/
        /*content: "\271a"; !*bold plus*!*/
        content: "\25bc"; /*filled triangle arrow*/
        /*content: "\25bd"; !*hollow triangle arrow*!*/
        /*content: "\22c1"; !*down arrow*!*/
        /*content: "\27a4"; !*delta*! transform: rotate(90deg);*/
    }

    .nav-main menu menu .control.activated::after{
        color: var(--nav-active-sub-mobi-menu-control); /*activated sub-menu control icon color*/

        /*dynamic - only needed if different from initial above*/
        /*content: "-"; !*minus*! padding-left: 4px; !*minus padding*!*/
        /*content: "\2012"; !*dash*! padding-left: 3px; !*dash padding*! font-size: 1.3rem; !*dash size*!*/
        content: "\25bc"; /*filled triangle arrow*/
        /*content: "\25bd"; !*hollow triangle arrow*!*/
        /*content: "\22c0"; !*up arrow*!*/

        /*rotating*/
        transform: rotate(180deg); /*triangle/arrow rotate*/
        /*transform: rotate(270deg); !*delta rotate*! padding-bottom: 3px; !*delta padding*!*/
    }
}