/* ══════════════════════════════════════════
   MOBILE NAV — max-width: 850px
══════════════════════════════════════════ */

@media (max-width: 850px) {

    /* ─── MOBILE TOPBAR ─── */

    #mobile-topbar {
        display: flex;
    }

    #mobile-topbar .logo_nav_small .blue_text {
        color: #89BCD9;
    }

    #burger-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
        width: 50px;
        height: 36px;
        cursor: pointer;
        z-index: 300;
        background: none;
        border: none;
        padding: 0;
        flex-shrink: 0;
    }

    #burger-btn span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--color-white);
        border-radius: 2px;
        transition: transform 0.35s ease, opacity 0.35s ease;
        transform-origin: center;
    }

    #burger-btn.open span:nth-child(1) {
        transform: translateY(14px) rotate(45deg);
    }

    #burger-btn.open span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    #burger-btn.open span:nth-child(3) {
        transform: translateY(-14px) rotate(-45deg);
    }

    /* ─── MOBILE NAV OVERLAY ─── */

    #mobile-nav {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 150;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    @keyframes blob-morph {
        0%   { border-radius: 60% 40% 55% 45% / 50% 45% 55% 50%; }
        33%  { border-radius: 45% 55% 40% 60% / 55% 40% 60% 45%; }
        66%  { border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%; }
        100% { border-radius: 60% 40% 55% 45% / 50% 45% 55% 50%; }
    }

    #mobile-nav-blob {
        background-color: var(--color-blue);
        border-radius: 60% 40% 55% 45% / 50% 45% 55% 50%;
        width: 500px;
        height: 500px;
        margin-top: -10vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        padding: 60px;
        box-sizing: border-box;
        transform: scale(0);
        opacity: 0;
        transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                    opacity 0.3s ease;
        pointer-events: none;
    }

    #mobile-nav.open {
        pointer-events: all;
    }

    #mobile-nav.open #mobile-nav-blob {
        transform: scale(1);
        opacity: 1;
        pointer-events: all;
        animation: blob-morph 6s ease-in-out infinite;
    }

    #mobile-nav-blob a {
        color: var(--color-dark);
        font-family: 'JosefinSans', sans-serif;
        font-size: clamp(18px, 5vw, 28px);
        font-weight: 600;
        text-decoration: none;
        transition: color 0.2s ease;
        text-align: center;
    }

    #mobile-nav-blob a:hover {
        color: var(--color-white);
    }

    #mobile-nav-blob .mobile-lang {
        display: flex;
        gap: 12px;
        margin-top: 8px;
    }

    #mobile-nav-blob .lang-btn {
        color: var(--color-dark);
        font-size: clamp(16px, 4.5vw, 24px);
        font-weight: 700;
        padding: 4px 14px;
    }

    #mobile-nav-blob .lang-btn.active {
        background-color: rgba(255, 255, 255, 0.35);
        border-radius: 50%;
        color: var(--color-white);
    }

    /* ─── HIDE DESKTOP ELEMENTS ─── */

    nav {
        display: none;
    }

    #social-icons {
        display: none;
    }

}