/* =========================
   MENU – DARK MODERN
========================= */
:root{
    --menu-bg: rgba(15,15,20,.75);
    --menu-bg-solid: #0f0f14;
    --menu-border: rgba(255,255,255,.08);
    --menu-accent: #7aa2ff;
    --menu-accent-soft: rgba(122,162,255,.35);
}

/* =========================
   CONTAINER
========================= */
.menu-container{
    width: 100%;
    height: 4rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;

    padding: 0 1.5rem;
    box-sizing: border-box;

    background: linear-gradient(
        180deg,
        rgba(20,20,28,.85),
        rgba(12,12,18,.65)
    );
    backdrop-filter: blur(12px);

    border-bottom: 1px solid var(--menu-border);
    transition: background .2s ease, box-shadow .2s ease;
}

/* =========================
   SCROLL STATE
========================= */
.menu-container--scroll{
    background: var(--menu-bg-solid);
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

/* =========================
   CONTENT
========================= */
.menu-container__content{
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

/* =========================
   LINKS
========================= */
.menu-container__link{
    position: relative;
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: .02em;

    color: #e6e6e6;
    opacity: .85;

    transition: color .2s ease, opacity .2s ease;
}

.menu-container__link:hover{
    color: var(--menu-accent);
    opacity: 1;
}

/* underline glow */
.menu-container__link::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.45rem;
    width: 0;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        var(--menu-accent),
        transparent
    );

    transform: translateX(-50%);
    transition: width .25s ease;
}

.menu-container__link:hover::after{
    width: 100%;
}

/* =========================
   TOGGLE BUTTON (MOBILE)
========================= */
.menu-container__toggle-btn{
    width: 2.75rem;
    height: 2.75rem;

    display: none;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: 1px solid var(--menu-border);
    border-radius: .6rem;
    cursor: pointer;

    transition: background .2s ease, border .2s ease;
}

.menu-container__toggle-btn:hover{
    background: rgba(255,255,255,.05);
    border-color: var(--menu-accent-soft);
}

.menu-container__toggle-btn img{
    width: 1.1rem;
    height: auto;
    opacity: .85;
}

/* =========================
   ACTIVE (MOBILE OPEN)
========================= */
.menu-container--active{
    background: var(--menu-bg-solid);
}

/* mobile panel */
.menu-container--active .menu-container__content{
    position: fixed;
    top: 4rem;
    left: 0;

    width: 100%;
    max-height: calc(100svh - 4rem);

    flex-direction: column;
    justify-content: flex-start;
    gap: 1.75rem;

    padding: 2rem 1.25rem;
    box-sizing: border-box;

    background: linear-gradient(
        180deg,
        #101018,
        #0b0b0e
    );

    border-top: 1px solid var(--menu-border);
    overflow-y: auto;
}

/* =========================
   RESPONSIVE
========================= */
@media only screen and (max-width: 45rem){
    .menu-container{
        justify-content: flex-start;
    }

    .menu-container__toggle-btn{
        display: flex;
    }

    .menu-container__content{
        display: none;
    }

    .menu-container--active .menu-container__content{
        display: flex;
    }
}