/*
==================================================
PustakOne
File: mega-nav.css
Purpose: Dropdown Navigation System
==================================================
*/

/* ========================================= */
/* DROPDOWN WRAPPER */
/* ========================================= */

.has-dropdown{
    position:relative;
}

.main-nav .dropdown{
    display:none;
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    background:#fff;
    box-shadow:var(--shadow-md);
    border-radius:var(--radius-sm);
    min-width:220px;
    padding:10px 0;
    z-index:9999;
    flex-direction:column;
}

.has-dropdown.open .dropdown{
    display:flex;
}

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

.main-nav .dropdown a{
    display:block;
    padding:10px 20px;
    color:var(--color-dark);
    font-weight:500;
    font-size:.95rem;
    transition:var(--transition);
    border-left:3px solid transparent;
}

.main-nav .dropdown a:hover{
    background:var(--color-bg);
    color:var(--color-primary);
    border-left-color:var(--color-primary);
    padding-left:24px;
}

/* ========================================= */
/* MOBILE TOGGLE */
/* ========================================= */

.mobile-toggle{
    display:none;
    background:none;
    border:none;
    font-size:1.6rem;
    cursor:pointer;
    color:var(--color-dark);
    padding:5px;
}

/* ========================================= */
/* MOBILE NAV */
/* ========================================= */

@media(max-width:991px){

    .mobile-toggle{
        display:block;
    }

    .main-nav{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#fff;
        padding:20px;
        box-shadow:var(--shadow-md);
        z-index:9998;
    }

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

    .main-nav ul{
        flex-direction:column;
        gap:0;
    }

    .main-nav > ul > li > a{
        padding:12px 0;
        display:block;
        border-bottom:1px solid var(--border);
    }

    .main-nav .dropdown{
        position:static;
        display:none;
        box-shadow:none;
        padding:5px 0 5px 15px;
        border-left:2px solid var(--border);
        margin:5px 0 5px 10px;
    }

    .has-dropdown.open .dropdown{
        display:flex;
    }

    .main-nav li:last-child a{
        margin-top:15px;
        display:inline-flex;
    }
}