/* ===== SHARED NAVBAR STYLE ===== */

nav{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:15px 25px;
    border-bottom:1px solid #222;
    position:sticky;
    top:0;
    background:#0f1117;
    z-index:10;
}

.nav-top{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    width:100%;
}

.logo{
    grid-column:2;
    justify-self:center;
}

.logo img{
    height:55px;
    width:auto;
    filter:brightness(1.1);
}

.lang{
    grid-column:3;
    justify-self:end;
    margin-top:0;
}

.lang button{
    background:none;
    border:1px solid #d4af37;
    color:#d4af37;
    padding:5px 10px;
    margin-left:5px;
    cursor:pointer;
}

.lang button:hover{
    background:#d4af37;
    color:#0f1117;
}

.nav-links{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin-top:10px;
}

nav a{
    color:#f5f0e6;
    text-decoration:none;
    margin:0 8px;
    font-size:2rem;
}

nav a:hover{
    color:#d4af37;
}

.dropdown{
    position:relative;
    display:inline-block;
}

.dropdown-content{
    display:none;
    position:absolute;
    background:#0f1117;
    min-width:180px;
    border:1px solid #333;
    z-index:20;
}

.dropdown-content a{
    display:block;
    padding:12px 14px;
    margin:0;
    color:#f5f0e6;
}

.dropdown-content a:hover{
    background:#151923;
    color:#d4af37;
}

.dropdown:hover .dropdown-content{
    display:block;
}

/* ===== MOBILE NAVBAR ===== */

@media (max-width:768px){

    nav{
        flex-direction:column;
        gap:10px;
        text-align:center;
    }

    .nav-top{
        display:grid;
        grid-template-columns:1fr auto 1fr;
        align-items:center;
        width:100%;
    }

    .logo{
        grid-column:2;
        justify-self:center;
    }

    .logo img{
        height:55px;
    }

    .lang{
        grid-column:3;
        justify-self:end;
        margin-top:0;
    }

    .nav-links{
        flex-direction:row;
        flex-wrap:nowrap;
        justify-content:center;
        gap:2px;
        width:100%;
        margin-top:8px;
    }

    nav a{
        display:inline-block;
        margin:0 4px;
        font-size:1.00rem;
    }

    .dropdown{
        position:relative;
    }

    .dropdown-content{
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        border:1px solid #333;
        margin-top:5px;
    }

    .dropdown-content a{
        font-size:0.85rem;
        padding:10px 12px;
    }
}