/* ------------------------------------ Burger design ----------------- */
#burger {
    padding: 10px;
}

#burger > div {
    background-color: var(--white);
    width: 26px;
    height: 4px;
    margin-bottom: 6px;

    transition: 0.3s;
}

#burger.active > div:nth-child(2) {
    width: 18px;
}

#burger.active > div:nth-child(3) {
    width: 8px;
}



.nav_mobile {
    display: flex;
    justify-content: space-between;

    position: fixed;
    width: 100%;
    padding: 10px;
    height: max(calc(var(--vh) * 10), 50px);
    top: 0;
    left: 0;
    z-index: 110;

    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.95) 0%,
        rgba(0,0,0,0.5) 50%,
        rgba(0,0,0,0) 90%
    );
}



/* ------------------------------------ Menu design ----------------- */
#menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    width: 100%;
    height: calc(var(--vh) * 100);
    padding-top: calc(var(--vh) * 14);

    background-color: var(--black);
    display: flex;
    flex-direction: column;
    align-items: center;

    transform: translateX(100%);
    transition: 0.4s;
}

#menu > a {
    color: var(--white);
    font-size: var(--fs-header);
    font-family: var(--font-theme);
    text-decoration: none;

    margin-bottom: var(--bottom-space-l);
}

#menu.active {
    transform: translateX(0);
}

#menu .logo_container {
    display: none;
}



/* ------------------------------ Language switch ----------- */
.lang_switch {
    display: flex;
    align-items: center;
    gap: 8px;

    padding-top: 1px; /* Just for OPTIC CENTER I set it lower */
}

.lang {
    color: var(--white);
    text-decoration: none;
    font-size: var(--fs-lang);

    opacity: .6;
}

.lang.active {
    opacity: 1;
    color: var(--orange);
}

.lang_switch span {
    font-size: var(--fs-lang);
    color: var(--white);
    opacity: .5;
}









/* ------------------------------------------------ LANDSCAPE MOBILE ------------------------------ */
@media (orientation: landscape) and (max-height: 500px) {
    #menu {
        padding-top: 0;
        height: calc(var(--vh) * 100);
    }

    #menu > a {
        height: 20%;
        margin-bottom: 0;
    }

    .nav_mobile {
        height: max(calc(var(--vh) * 10), 60px);
        padding-top: 5px;
    }

    .nav_mobile .logo_container {
        height: max(calc(var(--vh) * 6), 50px);
    }
}









/* ---------------------------------------------------------- Tablet ---------------------------------- */
@media (min-width: 768px) and (orientation: portrait) {
    .nav_mobile {
        padding-top: 10px;
    }

    .nav_mobile .logo_container {
        height: max(calc(var(--vh) * 6), 50px);
    }

    #burger {
        padding: 20px;
    }

    #burger > div {
        width: 28px;
        height: 4px;
        margin-bottom: 8px;

    }
}









/* ------------------------------------------------------ Small Notebook ------------------------------ */
@media (min-width: 1024px) {
    .nav_mobile {
        display: none;
    }

    #menu .logo_container {
        display: flex;
    }

    #menu {
        flex-direction: row;

        top: 10px;
        left: 10%;
        width: 80%;
        height: calc(var(--vh) * 6);
        padding-top: 0;
        padding-right: 20px;
        
        transition:
            background-color 0.4s ease,
            backdrop-filter 0.4s ease;
        background-color: rgba(0, 0, 0, 0);
        border-radius: var(--radius-s);

        transform: translateX(0);
    }

    #menu > a {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 15px 20px;

        cursor: pointer;
    }

    #menu.scrolled {
        background-color: rgba(0, 0, 0, 0.32);
        backdrop-filter: blur(18px);
    }

    .nav_box:hover {
        color: var(--orange);
        font-weight: 400;
        letter-spacing: 1px;
    }

    .lang {
        transition: 0.3s ease;
    }

    .lang:hover {
        opacity: 1;
        color: var(--orange);
    }

    .lang.active {
        cursor: default;
    }
}









/* ---------------------------------------------------------- Monitor -------------------------- */
@media (min-width: 1280px) {
    #menu {
        left: 15%;
        width: 70%;
    }
}