/*
 * Mobile navbar hamburger menu: gives guests quick access to the staff
 * "Login" portal and the "About" page without cluttering the main filter
 * toolbar. Shown on all screen sizes at the end of the navbar, but is
 * most useful on mobile where space is tight.
 */

.guest-nav-menu-wrap {
    position: relative;
    flex-shrink: 0;
    margin-left: 0.5rem;
    isolation: isolate;
    z-index: 1200;
}

.guest-nav-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.guest-nav-menu-trigger:hover,
.guest-nav-menu-trigger[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.2);
}

.guest-nav-menu-trigger i {
    font-size: 1.35rem;
    line-height: 1;
}

.guest-nav-menu-dropdown {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    min-width: 190px;
    /* Hardcoded solid color (not a CSS custom property) so this always
       renders as an opaque, high-contrast panel regardless of which
       theme variables are or aren't defined on the current page. */
    background-color: #12261c;
    background-image: linear-gradient(155deg, #14301f 0%, #0d1f15 100%);
    border: 1px solid rgba(201, 162, 39, 0.35);
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 1200;
}

.guest-nav-menu-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.guest-nav-menu-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    border-radius: 9px;
    color: #f5efe0;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    transition: background 0.15s ease;
}

.guest-nav-menu-item i {
    font-size: 1.1rem;
    color: #d9b64a;
    flex-shrink: 0;
}

.guest-nav-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.guest-nav-menu-item--staff {
    margin-top: 0.25rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(245, 239, 224, 0.75);
}

.guest-nav-menu-item--staff i {
    font-size: 0.95rem;
    color: rgba(217, 182, 74, 0.75);
}

@media (max-width: 480px) {
    .guest-nav-menu-trigger {
        width: 36px;
        height: 36px;
    }

    .guest-nav-menu-trigger i {
        font-size: 1.2rem;
    }
}

/* -------------------------------------------------------------------------
   Accordion mobile layout stretches .logo to flex: 1 1 100% (see
   veg-premium.css) so the full restaurant name can show on its own row —
   that pushes any flex sibling after it (this hamburger) down to its own
   line. Pin the hamburger to the same row as the name instead, and reserve
   room on the right of the name so the two never overlap.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    body.mobile-nav-accordion .navbar:not(.guest-navbar) {
        position: relative;
    }

    body.mobile-nav-accordion .navbar:not(.guest-navbar) .logo {
        padding-right: 3rem !important;
        box-sizing: border-box !important;
    }

    body.mobile-nav-accordion .navbar:not(.guest-navbar) .guest-nav-menu-wrap {
        position: absolute;
        top: 0.65rem;
        right: 0.8rem;
        margin-left: 0;
    }
}