/*==================================================
NAVIGATION DROPDOWN - RESPONSIVE
==================================================*/


/*==================================================
992px
==================================================*/

@media(max-width:992px){

    /*
    Keep the dropdown as one item inside
    the existing mobile navigation.
    */

    .nav-dropdown{

        position:relative;

        width:100%;

        display:block;

        flex:0 0 auto;

        margin:0;

    }


    /*==================================================
    DROPDOWN BUTTON
    ==================================================*/

    .nav-dropdown-toggle{

        position:relative;

        width:100%;

        min-height:0;

        margin:0;

        padding:0;

        display:flex;

        align-items:center;

        justify-content:center;

        gap:8px;

        border:0;

        outline:0;

        background:transparent;

        color:var(--text-light);

        font-family:var(--body-font);

        font-size:.9rem;

        font-weight:500;

        line-height:1.5;

        cursor:pointer;

        transition:var(--transition);

    }


    .nav-dropdown-toggle:hover{

        color:var(--primary-light);

        text-shadow:var(--glow-primary);

    }


    /*==================================================
    ARROW
    ==================================================*/

    .nav-dropdown-toggle i{

        position:relative;

        width:auto;

        margin:0;

        padding:0;

        font-size:.65rem;

        color:var(--primary);

        transition:var(--transition);

    }


    .nav-dropdown.open
    .nav-dropdown-toggle{

        color:var(--primary-light);

        text-shadow:var(--glow-primary);

    }


    .nav-dropdown.open
    .nav-dropdown-toggle i{

        transform:rotate(180deg);

    }


    /*==================================================
    SUBMENU

    Completely reset desktop positioning.
    ==================================================*/

    .nav-dropdown-menu{

        position:relative !important;

        top:auto !important;

        right:auto !important;

        bottom:auto !important;

        left:auto !important;

        transform:none !important;

        width:100% !important;

        max-width:none;

        min-width:0;

        margin:10px 0 0;

        padding:6px 0;

        display:none;

        flex-direction:column;

        align-items:stretch;

        gap:4px;

        opacity:1;

        visibility:visible;

        pointer-events:auto;

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

        border:1px solid var(--border-primary);

        border-radius:12px;

        box-shadow:none;

        backdrop-filter:none;

        -webkit-backdrop-filter:none;

        z-index:1;

    }


    /*==================================================
    OPEN SUBMENU
    ==================================================*/

    .nav-dropdown.open
    .nav-dropdown-menu{

        display:flex;

    }


    /*==================================================
    SUBMENU LINKS

    Reset the normal .nav-links a rules.
    ==================================================*/

    .nav-dropdown-menu a{

        position:relative;

        left:auto;

        right:auto;

        top:auto;

        bottom:auto;

        width:100%;

        min-height:42px;

        margin:0;

        padding:10px 14px;

        display:flex;

        align-items:center;

        justify-content:flex-start;

        gap:10px;

        color:var(--text-light);

        font-family:var(--body-font);

        font-size:.85rem;

        font-weight:500;

        line-height:1.4;

        text-align:left;

        transform:none;

        border-radius:8px;

        transition:var(--transition);

    }


    /*==================================================
    REMOVE MAIN NAV UNDERLINE
    ==================================================*/

    .nav-dropdown-menu a::before{

        content:none !important;

        display:none !important;

    }


    /*==================================================
    SUBMENU ICON
    ==================================================*/

    .nav-dropdown-menu a i{

        position:static;

        flex:0 0 20px;

        width:20px;

        margin:0;

        padding:0;

        color:var(--primary);

        font-size:.85rem;

        text-align:center;

    }


    /*==================================================
    HOVER
    ==================================================*/

    .nav-dropdown-menu a:hover{

        color:var(--primary-light);

        background:var(--glass-strong);

        transform:none;

        box-shadow:none;

        text-shadow:none;

    }


    .nav-dropdown-menu a:hover i{

        color:var(--primary-light);

        text-shadow:var(--glow-primary);

    }


    /*==================================================
    REMOVE DESKTOP MENU DECORATION
    ==================================================*/

    .nav-dropdown-menu::before{

        content:none !important;

        display:none !important;

    }

}


/*==================================================
768px
==================================================*/

@media(max-width:768px){

    .nav-dropdown-toggle{

        font-size:.9rem;

    }

    .nav-dropdown-menu{

        margin-top:9px;

    }

    .nav-dropdown-menu a{

        min-height:42px;

        font-size:.86rem;

    }

}


/*==================================================
576px
==================================================*/

@media(max-width:576px){

    .nav-dropdown-toggle{

        font-size:.9rem;

    }

    .nav-dropdown-menu{

        margin-top:8px;

        padding:5px;

    }

    .nav-dropdown-menu a{

        min-height:40px;

        padding:9px 11px;

        font-size:.84rem;

    }

}


/*==================================================
480px
==================================================*/

@media(max-width:480px){

    .nav-dropdown-toggle{

        font-size:.88rem;

    }

    .nav-dropdown-menu a{

        font-size:.82rem;

    }

}


/*==================================================
360px
==================================================*/

@media(max-width:360px){

    .nav-dropdown-toggle{

        font-size:.86rem;

    }

    .nav-dropdown-menu{

        padding:4px;

    }

    .nav-dropdown-menu a{

        min-height:38px;

        padding:8px 9px;

        font-size:.8rem;

    }

}