/*----------------------------TOP NAVBAR STYLES---------------------------------------------*/


.top-menu{
    display: flex;
    flex-direction: row;
    box-shadow: var(--shadow-custom);
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: rgba(255,255,255,0.45);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    /* prev version 
    background: rgba(251, 235, 215, 0.72); 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    */
    /*
    a different feel with cool frosted look
    background: rgba(240, 242, 244, 0.65); 
    backdrop-filter: blur(14px) saturate(110%);
    -webkit-backdrop-filter: blur(14px) saturate(110%);
    */
    font-size: 16px;
    border-bottom: 1px solid rgba(47, 42, 36, 0.06);
    transition: background-color 0.5s ease-in-out;

}

.top-menu.subopen{
    background-color: #fbf8f2;
    backdrop-filter: none;
    -webkit-backdrop-filter:none;
}

.top-menu:active, .top-menu:hover, .top-menu:focus-within{
    background-color: #fbf8f2;

}

.top-nav{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: var(--space-2) var(--space-3);
}

.top-nav img{
    height: 44px;
}

.nav-top-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    position: relative;
}

.nav-list{
    justify-content: flex-end;
    flex-wrap: wrap;
}

.nav-list, .submenu{
    list-style: none;
    display: flex;
    flex-direction: row;
    gap: var(--space-1) var(--space-2);
}

.nav-list li{
    position: relative;
    display: flex;
}

.submenu{
    flex-direction: column;
    position: absolute;
    display: none;
    top: 100%;
    right: 0; 
    background: #fbf8f2;
    color: inherit;
    padding: var(--space-2) 0;
    min-width: 180px;
    box-shadow: var(--shadow-medium);
    border-radius: var(--radius);
    z-index: 10;
    align-items: center;
}

.main-item, .sub-item{
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    transition: background 0.2s, color 0.2s;
}

.nav-list li a:hover {
    background: rgba(0,0,0,0.05);
    color: var(--color-text);
}

.submenu.active {
    display: flex;
}


.has-submenu > button::after {
    content: "▼";
    font-size: 0.6rem;
    margin-left: var(--space-1);
}

.hamburger{
    display: none;
}


@media (max-width: 768px) {

    .top-nav{
        padding: var(--space-1);
        flex-direction: column;
        max-height: 70px;
    }
    .cards-container {
        grid-template-columns: 1fr; 
    }

    body.menu-open{
        overflow: hidden;
        main{
            overflow: hidden;
        }
    }

    .nav-top-row{
        width: 95%;
    }

    .nav-list {
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        flex-wrap: nowrap;
        gap:var(--space-1);
        background-color: #fbf8f2;
        box-shadow: 0 10px 5px  rgba(240, 218, 191, 0.3);
        /*delete from here for the push behaviour*/
        position: absolute;
        top:100%;
        left:0;
    }

    
    .nav-list.open {
        display: flex;
        max-height: 80vh;
        overflow: auto;
    }

    .has-submenu {
        position: static;
    }

    .nav-list li{
        padding: var(--space-1) var(--space-2);
        width: 100%;
        justify-content: center;
        flex-direction: column;
    }

    .submenu {
        position: static;
        display: none;
        width: 100%;
    }

    .has-submenu.open .submenu {
        display: block;
    }

    .hamburger {
        width: 32px;
        height: 24px;
        position: relative;
        background: none;
        border: none;
        cursor: pointer;
        display: block;
    }

    .hamburger.active, .hamburger.focus, .hamburger:hover{
        all: unset;
        width: 32px;
        height: 24px;
        position: relative;
    }


    .hmb{
        width: 100%;
        height: 2px;
        border-radius: 4px;
        background-color: rgb(45, 43, 43);
        position: absolute;
        top:50%;
        left: 0;
        transform-origin: 50% 50%;
        transition: transform 0.25s ease;
    }

    .bot{
        transform: translateY(10px);
    }

    .top{
        transform: translateY(-10px);
    }

    .hamburger.active .top{
        transform: translateY(0) rotate(45deg);
    }

    .hamburger.active .bot{
        transform: translateY(0) rotate(-45deg);
    }

    .hamburger.active .mid{
        display: none;
    }

}

/*focus-within is for keyboard accessibility*/

@media (hover: hover) {
    .nav-list li:hover > .submenu, .has-submenu:focus-within .submenu  {
        display: flex;
        
    }
    
}