/* MOBILE MENU */
.mobile-menu-toggle,
.mobile-menu { display:none; }

@media (max-width:700px) {
    .home-page .top .nav { position:relative; }

    .desktop-nav-links { display:none !important; }

    .mobile-menu-toggle {
        display:flex;
        flex:0 0 44px;
        width:44px;
        height:44px;
        margin-left:auto;
        padding:9px;
        box-sizing:border-box;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        gap:5px;
        border:1px solid rgba(112,198,169,.28);
        border-radius:9px;
        background:rgba(16,22,19,.82);
        color:#eef3ef;
        cursor:pointer;
        position:relative;
        z-index:1002;
    }

    .mobile-menu-toggle span {
        display:block;
        width:21px;
        height:2px;
        border-radius:2px;
        background:#eef3ef;
        transition:.2s ease;
    }

    .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
        transform:translateY(7px) rotate(45deg);
    }

    .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity:0;
    }

    .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
        transform:translateY(-7px) rotate(-45deg);
    }

    .mobile-menu {
        position:absolute;
        top:calc(100% + 10px);
        right:16px;
        z-index:1001;
        width:min(280px,calc(100vw - 32px));
        padding:8px;
        box-sizing:border-box;
        background:rgba(16,22,19,.98);
        border:1px solid rgba(112,198,169,.20);
        border-radius:12px;
        box-shadow:0 18px 40px rgba(0,0,0,.40);
    }

    .mobile-menu.open { display:block; }

    .mobile-menu a {
        display:block;
        width:100%;
        box-sizing:border-box;
        padding:13px 14px;
        color:#eef3ef;
        text-decoration:none;
        border-radius:8px;
        font-size:14px;
        line-height:1.3;
    }

    .mobile-menu a + a { margin-top:2px; }

    .mobile-menu a:active,
    .mobile-menu a:focus {
        background:rgba(112,198,169,.10);
        color:#8ed2b4;
    }

    .home-page .brand {
        min-width:0;
        max-width:calc(100% - 56px);
    }

    .home-page .brand strong {
        display:block;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
}

@media (max-width:420px) {
    .mobile-menu {
        right:12px;
        width:min(270px,calc(100vw - 24px));
    }

    .mobile-menu-toggle {
        flex-basis:42px;
        width:42px;
        height:42px;
    }
}