:root {
    --u: 1vh;
}

@media (orientation: portrait) {
    :root {
        --u: 1vw;
    }
}

body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
}

body::before {
    content: '';
    position: fixed;
    inset: calc(-1 * var(--u));
    background-image: url('morfur.png');
    background-size: cover;
    background-position: center;
    filter: blur(calc(0.5 * var(--u))) brightness(0.7);
    z-index: -1;
}

#container {
    margin-left: calc(35 * var(--u));
    flex: 1;
    transition: margin-left 0.3s ease;
}

#main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(35 * var(--u));
    height: 100vh;
    transition: transform 0.3s ease;
    background: linear-gradient(180deg, rgba(10, 10, 35, 0.97) 0%, rgba(5, 5, 25, 0.97) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow-y: auto;
    scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }
    z-index: 10;
    padding: calc(2 * var(--u)) 0 calc(1.2 * var(--u));
    box-sizing: border-box;
}

#main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0 calc(1 * var(--u));
    display: flex;
    flex-direction: column;
    gap: calc(1 * var(--u));
}

#main-nav ul li a {
    display: flex;
    align-items: center;
    color: rgba(200, 210, 255, 0.85);
    text-decoration: none;
    font-size: calc(2 * var(--u));
    font-weight: 500;
    padding: calc(0.9 * var(--u)) calc(1.2 * var(--u));
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}

#main-nav ul li a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
}

body.nav-closed #main-nav {
    transform: translateX(calc(-35 * var(--u)));
}

body.nav-closed #container {
    margin-left: 0;
}

#nav-toggle {
    position: fixed;
    top: calc(50vh - 4 * var(--u));
    left: calc(36 * var(--u));
    z-index: 20;
    width: calc(5 * var(--u));
    height: calc(8 * var(--u));
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: rgba(200, 210, 255, 0.9);
    font-size: calc(4 * var(--u));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: left 0.3s ease, background 0.15s;
    &::before { content: '‹'; }
    &:hover { background: rgba(255, 255, 255, 0.18); }
}

body.nav-closed #nav-toggle {
    left: calc(1 * var(--u));
    &::before { content: '›'; }
}

.nav-home {
    display: flex;
    align-items: center;
    font-size: calc(10 * var(--u));
    padding: calc(1.5 * var(--u)) 0;
}

.nav-home #logo {
    height: calc(5 * var(--u));
    margin-right: calc(1.5 * var(--u));
}

.nav-dropdown > summary {
    display: flex;
    align-items: center;
    gap: calc(0.6 * var(--u));
    padding: calc(0.9 * var(--u)) calc(1.2 * var(--u));
    border-radius: 8px;
    cursor: pointer;
    list-style: none;
    color: rgba(200, 210, 255, 0.85);
    font-size: calc(2 * var(--u));
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    user-select: none;
    &::-webkit-details-marker { display: none; }
    &::before {
        content: '›';
        font-size: calc(3.5 * var(--u));
        line-height: 1;
        color: rgba(255, 255, 255, 0.4);
        transition: transform 0.2s ease, color 0.15s;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1em;
        height: 1em;
    }
    &:hover {
        background: rgba(255, 255, 255, 0.08);
        color: white;
    }
}

.nav-dropdown[open] > summary {
    color: white;
    &::before {
        transform: rotate(90deg);
        color: rgba(255, 255, 255, 0.7);
    }
}

#main-nav .nav-dropdown-list {
    margin-left: calc(1.5 * var(--u));
    padding-left: 0;
    border-left: calc(0.25 * var(--u)) solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: calc(0.5 * var(--u));

    li a {
        color: rgba(180, 190, 240, 0.65);
        font-size: calc(1.8 * var(--u));
        font-weight: 400;
        padding: calc(0.8 * var(--u)) calc(1.4 * var(--u));
        white-space: nowrap;
        &:hover {
            color: white;
            background: rgba(255, 255, 255, 0.07);
        }
    }
}