/* ============================================
   MOBILE NAVIGATION DROPDOWN BACKGROUND FIX
   ============================================ */

@media (max-width: 991px) {

    /* The entire expanded menu panel gets a solid dark background */
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        background-color: #0a0a0a !important;
        background: #0a0a0a !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1060 !important;
        padding: 1rem 1.5rem 1.5rem !important;
        border-top: 2px solid #EAB308 !important;
        border-bottom: 1px solid rgba(234, 179, 8, 0.2) !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.95) !important;
    }

    /* Make the navbar itself position:relative so the absolute dropdown anchors correctly */
    #mainNav {
        position: fixed !important;
        overflow: visible !important;
    }

    /* Make the navbar container allow overflow for the dropdown */
    #mainNav .container,
    #mainNav .container-fluid {
        position: relative !important;
    }

    /* Nav links inside the expanded menu */
    .navbar-collapse.show .nav-link,
    .navbar-collapse.show .navbar-nav .nav-link {
        color: #e4e4e7 !important;
        padding: 0.85rem 0.5rem !important;
        font-size: 0.9rem !important;
        letter-spacing: 1px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        display: block !important;
        background: transparent !important;
        transition: all 0.2s ease !important;
    }

    .navbar-collapse.show .nav-link:last-child {
        border-bottom: none !important;
    }

    /* Hover effect on menu items */
    .navbar-collapse.show .nav-link:hover,
    .navbar-collapse.show .nav-link.active {
        color: #EAB308 !important;
        padding-left: 1rem !important;
        background: rgba(234, 179, 8, 0.06) !important;
        border-radius: 6px !important;
    }

    /* The gold "CrudOps Hub" special link */
    .navbar-collapse.show .crudops-hub {
        color: #EAB308 !important;
    }

    /* The "Contact Us" CTA button - full width */
    .navbar-collapse.show .nav-cta-btn {
        display: block !important;
        text-align: center !important;
        margin-top: 1rem !important;
        padding: 0.85rem 1.5rem !important;
        width: 100% !important;
        border-radius: 8px !important;
        background: #fff !important;
        color: #000 !important;
        font-weight: 700 !important;
    }

    .navbar-collapse.show .nav-cta-btn:hover {
        background: #EAB308 !important;
    }

    /* Separator between nav links and CTA button */
    .navbar-collapse.show .navbar-nav {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding-bottom: 0.5rem !important;
        margin-bottom: 0 !important;
    }

    /* Hide underline pseudo animation - not appropriate on mobile */
    .navbar-collapse.show .nav-link::after {
        display: none !important;
    }
}