/* Verbatim <style> block of templates/navbar.html.twig (Symfony app). */

    /* Show desktop icon only on lg+ */
    .nav .desktop { display: inline; }
    .nav .mobile { display: none; }

    /* templa.css positions the logged-in dropdown (Projects List / Categories
       List / Logout) as position:absolute against its nearest positioned
       ancestor - .submenu itself had no position set, so it could anchor to
       an unrelated ancestor instead of sitting under its own trigger. */
    .nav li.submenu {
        position: relative;
    }

    /* .submenu is the last (rightmost) item in the nav, so a dropdown that
       extends rightward from its left edge (templa.css's default) overflows
       past the viewport edge. Anchor it to the trigger's right edge instead,
       extending safely leftward. */
    .nav li.submenu ul {
        left: auto;
        right: 0;
    }

    /* templa.css has a leftover rule from the original template
       (".header-area .main-nav .nav li:last-child { display: none; }" under
       max-width:767px) that hides whatever nav item happens to be last.
       Login (logged out) and the user dropdown (logged in) are always our
       last item, so that rule was silently hiding both. Same selector
       specificity, so this wins on source order - restores them.
       Uses "block" rather than "list-item": .main-nav .nav is a flex
       container, and an explicitly-declared list-item collapses to 0x0 as a
       flex child in this browser (a real blockification quirk) even though
       the other <li>s' implicit default list-item renders fine. */
    .header-area .main-nav .nav li.login-item,
    .header-area .main-nav .nav li.submenu {
        display: block;
    }

    @media (max-width: 992px) {
        .nav {
            display: none; /* keep this for collapsed menu */
            flex-direction: column;
        }

        .nav.open { /* when menu-trigger clicked */
            display: flex;
        }

        .nav .desktop { display: none; }
        .nav .mobile { display: inline; }

        /* A floating absolutely-positioned dropdown is a desktop pattern;
           on mobile, expand the logged-in submenu inline instead so it can't
           render off-screen or overlap other content. */
        .nav li.submenu ul {
            position: static;
            background: transparent;
            min-width: 0;
            padding-left: 15px;
        }
    }