/**
 * MOBILE NAVBAR - Modern Professional Design
 * Inspired by Grand Ceylon Holidays reference
 */

/* Hide mobile navbar on desktop */
.mobile-header {
    display: none;
}

/* Show mobile navbar only on mobile, hide desktop navbar */
@media (max-width: 768px) {
    /* Hide desktop navbar completely */
    .desktop-header {
        display: none !important;
    }

    /* Show mobile navbar */
    .mobile-header {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 99999;
    }

    /* Mobile navbar bar - Transparent by default */
    .mobile-navbar {
        background: transparent;
        box-shadow: none;
        padding: 16px 0;
        transition: all 0.3s ease;
    }

    /* White background when scrolled OR menu is open */
    .mobile-navbar.scrolled,
    .mobile-navbar.menu-open {
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .mobile-navbar-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 24px;
        max-width: 100%;
    }

    .mobile-logo img {
        height: 40px;
        width: auto;
        display: block;
        filter: brightness(0) invert(1);
        transition: filter 0.3s ease;
    }

    /* Dark logo when scrolled OR menu is open */
    .mobile-navbar.scrolled .mobile-logo img,
    .mobile-navbar.menu-open .mobile-logo img {
        filter: none;
    }

    /* Hamburger button - Minimal design */
    .mobile-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 18px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        position: relative;
        z-index: 100001;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-hamburger span {
        display: block;
        width: 100%;
        height: 2px;
        background: #ffffff;
        transition: all 0.3s ease;
    }

    /* Dark hamburger when scrolled OR menu is open */
    .mobile-navbar.scrolled .mobile-hamburger span,
    .mobile-navbar.menu-open .mobile-hamburger span {
        background: #1a1a1a;
    }

    /* Hamburger animation when menu is open - X shape */
    .mobile-hamburger.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .mobile-hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-hamburger.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Mobile menu dropdown - Slides from top */
    .mobile-menu-overlay {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: #ffffff;
        box-shadow: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 99998;
    }

    .mobile-menu-overlay.active {
        max-height: calc(100vh - 60px);
    }

    /* Mobile navigation menu - Dropdown style */
    .mobile-nav {
        display: flex;
        flex-direction: column;
        padding: 8px 0;
        overflow-y: auto;
        max-height: calc(100vh - 60px);
    }

    /* Mobile navigation links - Clean dropdown style */
    .mobile-nav-link {
        display: block;
        padding: 16px 24px;
        color: #475569;
        font-size: 1rem;
        font-weight: 400;
        font-family: 'Poppins', sans-serif;
        text-decoration: none;
        transition: all 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        border-bottom: 1px solid #f1f5f9;
    }

    .mobile-nav-link:last-child {
        border-bottom: none;
    }

    .mobile-nav-link:active {
        background: #f8fafc;
        color: #0ea5e9;
    }

    /* Home link highlighted */
    .mobile-nav-link:first-child {
        color: #0ea5e9;
        font-weight: 500;
    }

    /* Optional: Prevent body scroll when menu is open (can be removed for dropdown) */
    body.mobile-menu-open {
        /* overflow: hidden; */ /* Commented out - dropdown allows scrolling */
    }
}