/* ============================================
   MOBILE TOP BAR – Reusable component
   Used by _MobileTopBarPartial.cshtml
   Include this CSS in any page that uses the partial.
   ============================================ */

/* Hidden by default on desktop */
.mobile-topbar {
    display: none;
    position: relative;
}

.mobile-topbar__menu {
    display: none;
}

/* ===== MOBILE (≤991.98px) ===== */
@media (max-width: 991.98px) {
    /* Hide desktop .top-nav when mobile-topbar is active */
    .top-nav {
        display: none !important;
    }

    .mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 7vh;
        padding: var(--spacing-3) var(--spacing-4);
        background: url("../../Content/images/TopNavigation_bg.png") center/cover no-repeat;
        position: relative;
        z-index: 10;
    }

    .mobile-topbar__logo-link {
        display: flex;
        align-items: center;
    }

    .mobile-topbar__logo {
        height: 32px;
        width: auto;
    }

    .mobile-topbar__actions {
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
    }

    .mobile-topbar__hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: var(--spacing-2);
    }

    .mobile-topbar__hamburger span {
        display: block;
        width: 24px;
        height: 2.5px;
        background: #fff;
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* Hamburger -> X animation */
    .mobile-topbar__hamburger.open span:nth-child(1) {
        transform: translateY(7.5px) rotate(45deg);
    }

    .mobile-topbar__hamburger.open span:nth-child(2) {
        opacity: 0;
    }

    .mobile-topbar__hamburger.open span:nth-child(3) {
        transform: translateY(-7.5px) rotate(-45deg);
    }

    /* Mobile dropdown menu */
    .mobile-topbar__menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #F5F7FB;
        flex-direction: column;
        display: flex;
        padding: 0;
        z-index: 100;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease, padding 0.35s ease;
    }

    .mobile-topbar__menu.open {
        max-height: 300px;
        padding: var(--spacing-2) 0;
    }

    .mobile-topbar__menu-link {
        display: block;
        padding: var(--spacing-3) var(--spacing-5);
        color: var(--color-text-default);
        font-size: var(--text-base);
        font-weight: var(--font-medium);
        text-decoration: none;
        opacity: 0;
        transform: translateY(-8px);
        transition: background 0.2s ease, opacity 0.3s ease, transform 0.3s ease;
    }

    .mobile-topbar__menu.open .mobile-topbar__menu-link {
        opacity: 1;
        transform: translateY(0);
    }

    .mobile-topbar__menu.open .mobile-topbar__menu-link:nth-child(1) { transition-delay: 0.05s; }
    .mobile-topbar__menu.open .mobile-topbar__menu-link:nth-child(2) { transition-delay: 0.1s; }
    .mobile-topbar__menu.open .mobile-topbar__menu-link:nth-child(3) { transition-delay: 0.15s; }

    .mobile-topbar__menu-link:hover {
        background: rgba(0, 0, 0, 0.05);
    }
}