/* -- NAV -- */
nav {
    z-index: 100;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    position: sticky;
    top: -1px;

    height: 5vh;
    width: 100%;

    padding-left: 1rem;
    padding-right: calc(5vh + 1.25rem);


    background: var(--hero-background-color);
    text-align: center;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);

    transition: height 0.25s ease-in; 

    /* border: solid purple; */
}
nav.standard {
    height: var(--nav-standard-height);
}

#nav-logo {
    padding: 0.25rem;
    height: 5vh;
    width: 5vh;

    opacity: 0;
    transition: opacity 0.25s ease-in;
}

#nav-logo.visible {
    opacity: 1;
}

nav ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    gap: clamp(12px, 3.25vw, 20px);


    width: 95vw;
    list-style: none;
    margin: 0;
    padding: 0;
    /* border: 2px solid blue; */
}

/* SCREEN COMPAT */
@media (min-width: 500px) {
    nav ul {
        gap: clamp(10px, 6vw, 330px);
    }
}
@media (min-width: 768px) {
    nav ul {
        gap: clamp(10px, 12vw, 330px);
    }
}


nav ul li {
    margin: 0 1rem;
}

nav ul li a {
    color: var(--text-color);
    text-align: left;
    text-decoration: none;

    font-size: clamp(9px, 2vw, 12px);
    font-weight:normal;
    position: relative;
    transition: color 0.3s ease;
}


/* Underline animation */
nav ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--accent-color);
    transition: width 0.3s ease;
}

/* Hover effects */
nav ul li a:hover {
    color: var(--accent-color);
}

nav ul li a:hover::after {
    width: 100%; /* Underline expands on hover */
}

/* Active link effect */
nav ul li a.active {
    color: var(--accent-color);
}

nav ul li a.active::after {
    width: 100%;
}