nav {
    height: 10vh;
    width: 100%;
    background-color: rgba(248, 246, 243, 0.6);
    padding: 0px 2.5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
}

#links {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

nav h1 a,
#links a {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size);
    color: var(--paragraph-color);
    font-weight: normal;
}

nav h1 a:hover,
#links a:hover {
    background-color: var(--green);
    color: var(--offwhite);
}

nav h1 a:active,
#links a:active {
    background-color: var(--green);
    color: var(--offwhite);
}

#links a {
    text-decoration: none;
}

nav h1 a {
    text-decoration: none;
    color: black;
}


#links a:last-child:hover,
#links a:last-child:active {
    color: var(--paragraph-color);
    background-color: transparent;
}

/* Hamburger knapp (dold som standard) */
#hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--paragraph-color);
    z-index: 1001;
}

/* MEDIA QUERIES */


/* Mobilversion */
@media (max-width: 800px) {
    nav {
        padding: 0px 30px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    /* Dölj länkarna som standard på mobil */
    #links {
        display: none;
    }

    /* Visa hamburger knappen på mobil */
    #hamburger {
        display: block;
        position: relative;
        z-index: 1001;
    }

    /* Fullskärms hamburgermeny när den är öppen */
    #links.show {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--spacing-l);

        /* Fullskärm styling */
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(248, 246, 243, 0.98);
        z-index: 1000;

        /* Smooth transition */
        animation: slideInFromTop 0.3s ease-out;
    }

    /* Större text i fullskärmsmenyn */
    #links.show a {
        font-size: calc(var(--paragraph-font-size) * 1.5);
        padding: 10px 20px;
        text-align: center;
    }

    /* Animation för att menyn glider in från toppen */
    @keyframes slideInFromTop {
        from {
            transform: translateY(-100%);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Se till att logotypen ligger över menyn */
    nav h1 {
        position: relative;
        z-index: 1001;
    }
}