/*-----------------------------------------------------------------------------------*/
/*  Mobile Menu Fix - Force proper mobile behavior
/*-----------------------------------------------------------------------------------*/

/* Force mobile menu behavior on small screens */
@media (max-width: 991.98px) {

    /* Show the hamburger button on mobile */
    .navbar-toggler {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 8px !important;
        padding: 8px 12px !important;
        background: transparent !important;
        transition: all 0.3s ease !important;
    }

    .navbar-toggler:hover {
        border-color: rgba(255, 255, 255, 0.6) !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    .navbar-toggler:focus {
        box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25) !important;
    }

    /* Hide the menu by default on mobile ONLY */
    .navbar-collapse {
        display: none !important;
    }

    /* Mobile fullscreen menu styles - only when .show class is present */
    .navbar-collapse.show {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: rgba(22, 42, 75, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        padding: 80px 1rem 2rem 1rem !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        animation: slideDown 0.3s ease-out !important;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Stack menu items vertically on mobile */
    .navbar-nav {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 400px !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    .navbar-nav .nav-item {
        width: 100% !important;
        margin: 0.5rem 0 !important;
    }

    .navbar-nav .nav-link {
        padding: 1.25rem 1.5rem !important;
        border-radius: 12px !important;
        margin: 0.25rem 0 !important;
        text-align: center !important;
        display: block !important;
        width: 100% !important;
        color: rgba(255, 255, 255, 0.95) !important;
        font-size: 1.1rem !important;
        font-weight: 500 !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        transition: all 0.3s ease !important;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        background-color: rgba(255, 255, 255, 0.2) !important;
        color: #fff !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }

    /* Mobile dropdown menus */
    .navbar-nav .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        margin-top: 0.5rem !important;
        background-color: rgba(255, 255, 255, 0.15) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
        border-radius: 12px !important;
        backdrop-filter: blur(5px) !important;
        overflow: hidden !important;
    }

    .navbar-nav .dropdown-item {
        color: rgba(255, 255, 255, 0.9) !important;
        padding: 1rem 1.5rem !important;
        text-align: center !important;
        font-size: 1rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        transition: all 0.3s ease !important;
    }

    .navbar-nav .dropdown-item:last-child {
        border-bottom: none !important;
    }

    .navbar-nav .dropdown-item:hover {
        background-color: rgba(255, 255, 255, 0.2) !important;
        color: #fff !important;
        transform: translateX(5px) !important;
    }
}

/* Desktop behavior - ensure menu is always visible */
@media (min-width: 992px) {
    .navbar-toggler {
        display: none !important;
    }

    .navbar-collapse {
        display: flex !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        backdrop-filter: none !important;
        z-index: auto !important;
        overflow: visible !important;
        padding: 0 !important;
        flex-basis: auto !important;
        justify-content: center !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    .navbar-collapse.show {
        display: flex !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        backdrop-filter: none !important;
        z-index: auto !important;
        overflow: visible !important;
        padding: 0 !important;
        animation: none !important;
    }

    .navbar-nav {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .navbar-nav .nav-item {
        margin: 0 0.25rem !important;
        width: auto !important;
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        white-space: nowrap !important;
        font-size: 0.9rem !important;
        font-weight: 500 !important;
        background: transparent !important;
        border: none !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        background-color: rgba(255, 255, 255, 0.15) !important;
        color: #fff !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    }
}

/* Override any conflicting Bootstrap classes */
.d-lg-none {
    display: block !important;
}

@media (min-width: 992px) {
    .d-lg-none {
        display: none !important;
    }
}

/* Ensure proper navbar toggler icon */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    width: 1.5em !important;
    height: 1.5em !important;
}

/* Debug indicator removed for production */
/*---
--------------------------------------------------------------------------------*/
/*  Mobile Menu Close Button & Body Scroll Lock
/*-----------------------------------------------------------------------------------*/

@media (max-width: 991.98px) {

    /* Close button for mobile menu */
    .mobile-menu-close {
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 50% !important;
        width: 50px !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: white !important;
        font-size: 1.5rem !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        z-index: 10000 !important;
    }

    .mobile-menu-close:hover {
        background: rgba(255, 255, 255, 0.3) !important;
        border-color: rgba(255, 255, 255, 0.5) !important;
        transform: rotate(90deg) !important;
    }

    /* Lock body scroll when menu is open */
    body.mobile-menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Menu header with logo */
    .mobile-menu-header {
        text-align: center !important;
        margin-bottom: 2rem !important;
        padding: 1rem !important;
    }

    .mobile-menu-header .logo-mobile {
        max-width: 150px !important;
        height: auto !important;
        margin-bottom: 1rem !important;
    }

    .mobile-menu-header h3 {
        color: white !important;
        font-size: 1.2rem !important;
        margin: 0 !important;
        font-weight: 300 !important;
    }
}

/*-----------------------------------------------------------------------------------*/
/*  Enhanced Mobile Menu Animations
/*-----------------------------------------------------------------------------------*/

@media (max-width: 991.98px) {
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-100%);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .navbar-nav .nav-item {
        animation: fadeInUp 0.5s ease-out !important;
        animation-fill-mode: both !important;
    }

    .navbar-nav .nav-item:nth-child(1) {
        animation-delay: 0.1s !important;
    }

    .navbar-nav .nav-item:nth-child(2) {
        animation-delay: 0.2s !important;
    }

    .navbar-nav .nav-item:nth-child(3) {
        animation-delay: 0.3s !important;
    }

    .navbar-nav .nav-item:nth-child(4) {
        animation-delay: 0.4s !important;
    }

    .navbar-nav .nav-item:nth-child(5) {
        animation-delay: 0.5s !important;
    }

    .navbar-nav .nav-item:nth-child(6) {
        animation-delay: 0.6s !important;
    }
}

/*
-----------------------------------------------------------------------------------*/
/*  Desktop Dropdown Hover Support
/*-----------------------------------------------------------------------------------*/

@media (min-width: 992px) {

    /* Desktop dropdown menus */
    .navbar-nav .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-top: 0.25rem !important;
        background: white !important;
        border: none !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
        border-radius: 12px !important;
        min-width: 200px !important;
        max-width: 300px !important;
        z-index: 1050 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateX(-50%) translateY(-10px) !important;
        transition: all 0.3s ease !important;
    }

    .navbar-nav .dropdown-menu.show {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(-50%) translateY(0) !important;
    }

    .navbar-nav .dropdown-item {
        color: #495057 !important;
        padding: 0.75rem 1.5rem !important;
        font-weight: 500 !important;
        border-bottom: 1px solid #f8f9fa !important;
        transition: all 0.3s ease !important;
    }

    .navbar-nav .dropdown-item:last-child {
        border-bottom: none !important;
    }

    .navbar-nav .dropdown-item:hover {
        background: linear-gradient(135deg, #162a4b 0%, #1e3a5f 100%) !important;
        color: white !important;
        transform: translateX(5px) !important;
    }

    /* Hover support for desktop */
    .navbar-nav .dropdown:hover .dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(-50%) translateY(0) !important;
    }

    .navbar-nav .dropdown:hover .dropdown-toggle {
        background-color: rgba(255, 255, 255, 0.15) !important;
        color: #fff !important;
    }
}

/*-----------------------------------------------------------------------------------*/
/*  Scroll Behavior Improvements
/*-----------------------------------------------------------------------------------*/

/* Ensure navbar doesn't interfere with page scroll */
.navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1020 !important;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth !important;
}

/* Ensure content is not hidden behind navbar */
body {
    padding-top: 0 !important;
}

/* Add padding to first content element to account for sticky navbar */
.container-fluid.mt-4 {
    margin-top: 80px !important;
}

/*-----------------------------------------------------------------------------------*/
/*  Mobile Menu Auto-Hide on Scroll
/*-----------------------------------------------------------------------------------*/

@media (max-width: 991.98px) {

    /* Add a subtle animation when menu closes due to scroll */
    .navbar-collapse.scroll-closing {
        animation: fadeOutUp 0.3s ease-out forwards !important;
    }

    @keyframes fadeOutUp {
        from {
            opacity: 1;
            transform: translateY(0);
        }

        to {
            opacity: 0;
            transform: translateY(-20px);
        }
    }
}

/*-----------------------------------------------------------------------------------*/
/*  Improved Touch Targets for Mobile
/*-----------------------------------------------------------------------------------*/

@media (max-width: 991.98px) {

    /* Ensure touch targets are large enough */
    .navbar-nav .nav-link,
    .navbar-nav .dropdown-toggle {
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .navbar-nav .dropdown-item {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}