/*** NAVBAR ***/

.navbar
{
    color: white;
    /*border: 0.2rem solid rgba(38, 40, 43, 0.8);*/
    padding: 0.5rem;
    background-color: rgba(17, 18, 19);
    
    position: fixed;
    top: 0;
    width: 100%; 
    z-index: 2;
    /*font-family:'Courier New', Courier, monospace;  THIS STYLE IS REALLY COOL ON THE NAVBAR */
}

#nav-img
{
    width: 2.5rem;
    height: 2.5rem;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}



/* Styles specifically for Firefox */
@-moz-document url-prefix() {
    #nav-img
    {
        width: 2.8rem;
        height: 2.8rem;
        margin-left: 0.2rem;
        margin-right: 0.2rem;
        vertical-align: middle;
    }

    .nav-img
    {
        margin: 0.5rem;
        text-decoration: none;
    }
}


.nav-img
{
    margin: 0.5rem;
    text-decoration: none;
    vertical-align: middle;
}

.nav-link
{
    color: white;
    text-decoration: none;
    padding: 1.45rem;
}



.nav-link:hover
{
    /*color: rgb(223, 137, 10);*/
    background-color: rgba(36, 37, 37, 0.8);
}

.nav-left
{
    float: left;
}

.nav-right
{
    float: right;
    
    margin: 0.8rem; /* This is used to make it look like centered but it is not */
    margin-right: 3rem;
}








/* Hamburger button */
.menu-toggle-mobile {
    display: block;
    position: absolute;
    top: 0.9375rem; /* 15px -> 0.9375rem */
    right: 3rem; 
    font-size: 1.75rem; /* 28px -> 1.75rem */
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
    z-index: 1000;
}

/* Mobile menu container */
.nav-links-mobile {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 3.75rem; /* height of navbar */
    left: 0;      /* start from left edge of screen */
    right: 0;     /* end at right edge of screen */
    width: 100%;  /* full width of viewport */
    max-height: 90vh; /* maximum height = 90% of viewport */
    overflow-y: auto; /* allow vertical scrolling */
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.375rem rgba(0,0,0,0.1);
    z-index: 999;
    padding-bottom: 1rem; /* optional space at bottom */
}


/* Mobile menu container */
/*
.nav-links-mobile {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 3.75rem; 
    right: 2rem;
    width: auto;
    max-height: 90vh;
    overflow-y: auto; 
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.375rem rgba(0,0,0,0.1);
    z-index: 999;
    padding-bottom: 1rem;
}*/


/* Optional: smooth scrolling */
.nav-links-mobile::-webkit-scrollbar {
    width: 0.5rem;
}

.nav-links-mobile::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 0.25rem;
}


/* Links inside mobile menu */
.nav-links-mobile a.nav-link-mobile {
    display: block;
    padding: 0.75rem 1.25rem; /* 12px 20px -> 0.75rem 1.25rem */
    color: #333;
    text-decoration: none;
    border-bottom: 0.0625rem solid #eee; /* 1px -> 0.0625rem */
}

.nav-links-mobile a.nav-link-mobile:hover {
    background-color: #f0f0f0;
}

/* Show menu when active */
.nav-links-mobile.active {
    display: flex;
}

/* Responsive: only show hamburger on mobile */
@media (min-width: 64.0625rem) { /* 1025px -> 64.0625rem */
    .menu-toggle-mobile {
        display: none;
    }

    .nav-links-mobile {
        display: flex !important;
        position: static;
        flex-direction: row;
        width: auto;
        background: none;
        box-shadow: none;
    }

    .nav-links-mobile a.nav-link-mobile {
        border: none;
        padding: 0 0.625rem; /* 10px -> 0.625rem */
    }
}


/* Right-aligned elements like language selector */
.nav-right-mobile {
    margin-left: auto;
    padding: 0.625rem 1.25rem; /* 10px 20px -> 0.625rem 1.25rem */
}

/* Responsive: show hamburger only on mobile */
@media (max-width: 64rem) { /* 1024px -> 64rem */
    .menu-toggle-mobile {
        display: block;
    }

    .nav-links-mobile {
        display: none; /* toggled via JS */
    }
}



/* Mobile lang select */
.lang {
    display: block;
    position: absolute;
    top: 1.60rem; /* 15px -> 0.9375rem */
    right: 10rem; 
    font-size: 1.75rem; /* 28px -> 1.75rem */

    z-index: 1000;
}