.mobile-menu-toggle { display: none; }
.mobile-nav-shortcuts { display: none; }

@media (max-width: 720px) {
    .home-nav > .nav-link--desktop-only { display: none; }
    .mobile-nav-shortcuts {
        display: flex;
        padding: 0 14px 10px;
        margin-top: 10px;
    }
    .mobile-nav-shortcuts .resource-link {
        height: auto;
        width: 100%;
        min-height: 48px;
        box-sizing: border-box;
        justify-content: center;
        padding: 10px 18px;
        border-radius: 14px;
        border: 0;
        background: #eee9e1;
        color: #433b32;
        gap: 10px;
        font-size: .9rem;
        font-weight: 600;
    }
    .mobile-nav-ready .topbar { position: relative; background: #f5ede1; }
    .mobile-nav-ready .topbar-inner {
        width: calc(100% - 32px);
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0 12px;
        min-height: 76px;
        padding: 12px 0;
        align-items: center;
    }
    .mobile-nav-ready .brand { gap: 10px; flex-wrap: nowrap; }
    .mobile-nav-ready .brand-mark { width: 44px; height: 44px; border-radius: 13px; }
    .mobile-nav-ready .brand-text strong { font-size: 1.4rem; }
    .mobile-nav-ready .brand-text span { font-size: .55rem; letter-spacing: .18em; }
    .mobile-menu-toggle:not([hidden]) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 13px;
        border: 1px solid rgba(47, 122, 82, .2);
        border-radius: 14px;
        background: rgba(255, 255, 255, .65);
        color: #235d40;
        font: inherit;
        font-size: .85rem;
        cursor: pointer;
    }
    .mobile-menu-toggle:focus-visible { outline: 2px solid #235d40; outline-offset: 3px; }
    .mobile-menu-icon { width: 16px; height: 12px; position: relative; }
    .mobile-menu-icon::before, .mobile-menu-icon::after {
        content: ""; position: absolute; left: 0; width: 16px; height: 2px;
        background: currentColor; border-radius: 2px; top: 2px;
    }
    .mobile-menu-icon::after { top: 9px; }
    .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon::before { top: 5px; transform: rotate(45deg); }
    .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon::after { top: 5px; transform: rotate(-45deg); }
    .mobile-nav-ready .top-actions { display: none; }
    .mobile-nav-ready .home-nav { display: none; }
    .mobile-nav-ready .home-nav.is-mobile-open {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        gap: 2px;
        margin-top: 12px;
        padding: 8px;
        border: 1px solid rgba(47, 122, 82, .12);
        border-radius: 18px;
        background: #fffcf7;
        box-sizing: border-box;
    }
    .mobile-nav-ready .nav-item { display: block; width: 100%; min-width: 0; }
    .mobile-nav-ready .home-nav > .nav-link,
    .mobile-nav-ready .nav-trigger {
        width: 100%; min-height: 44px; padding: 9px 14px;
        justify-content: space-between; border-radius: 10px; font-size: .95rem;
    }
    .mobile-nav-ready .home-nav > .nav-link::after { content: none; }
    .mobile-nav-ready .home-nav > .active { color: #235d40; background: #edf3eb; }
    .mobile-nav-ready .nav-submenu {
        position: static; width: 100%; padding: 0; transform: none;
        display: grid; grid-template-rows: 0fr;
        transition: grid-template-rows 280ms cubic-bezier(.22,.61,.36,1), opacity 280ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 280ms;
    }
    .mobile-nav-ready .nav-item.is-open > .nav-submenu { grid-template-rows: 1fr; transition-delay: 0s; }
    .mobile-nav-ready .nav-submenu-clip {
        padding: 0 8px; border: 0; box-shadow: none; background: transparent;
        backdrop-filter: none;
    }
    .mobile-nav-ready .nav-submenu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 4px 0 10px; }
    .mobile-nav-ready .nav-submenu-link {
        width: 100%; font-size: .9375rem; padding: 10px 8px; gap: 8px;
    }
    .mobile-nav-ready .nav-submenu-featured { margin: 0; padding: 0; }
    .mobile-nav-ready .nav-submenu-featured::before { content: none; }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
    .mobile-nav-ready .nav-submenu {
        transition: opacity 120ms linear, visibility 0s linear 120ms;
    }
}

@media (max-width: 480px) {
    .mobile-nav-ready .nav-submenu-list { grid-template-columns: minmax(0, 1fr); }
}
