/**
 * Mobile Navigation Fix v1
 * Ensures hamburger menu is always visible on mobile
 */

/* ===== FORCE HAMBURGER VISIBILITY ON MOBILE ===== */
@media (max-width: 991px) {
    /* Make sure the mobile nav wrapper is visible */
    .d-flex.d-lg-none,
    .navbar .d-flex.d-lg-none {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 100002 !important;
        position: relative !important;
    }

    /* Style the hamburger button for visibility */
    .sidebar-toggle-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 100003 !important;
    }

    .sidebar-toggle-btn .btn,
    #sidebarCollapse {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 10px !important;
        cursor: pointer !important;
        z-index: 100003 !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .sidebar-toggle-btn .btn:hover,
    #sidebarCollapse:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        border-color: rgba(255, 255, 255, 0.5) !important;
    }

    .sidebar-toggle-btn .btn:active,
    #sidebarCollapse:active {
        background: rgba(255, 255, 255, 0.3) !important;
        transform: scale(0.95) !important;
    }

    /* Make the hamburger icon visible */
    .sidebar-toggle-btn .btn i,
    #sidebarCollapse i,
    #sidebarCollapse .fa-bars {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 24px !important;
        color: #ffffff !important;
        line-height: 1 !important;
    }

    /* Login button styling */
    .navbar-nav .nav-btn .nav-link {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 10px 16px !important;
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
    }

    .navbar-nav .nav-btn .nav-link:hover {
        background: rgba(255, 255, 255, 0.2) !important;
    }

    /* Ensure header is positioned correctly */
    header.mainHeader,
    .mainHeader {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 99999 !important;
        background: linear-gradient(135deg, #0c4a6e 0%, #0891b2 50%, #164e63 100%) !important;
    }

    /* The sticky navbar inside header */
    .header-sticky,
    nav.header-sticky {
        background: transparent !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    /* Adjust container alignment */
    .header-sticky .container {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Social icons row - make smaller on mobile */
    .social-icons-navbar {
        gap: 8px !important;
    }

    .social-icons-navbar .button-transparent-white-text,
    .social-icons-navbar .social-icon-link {
        font-size: 14px !important;
        padding: 6px 12px !important;
    }

    /* Logo sizing for mobile */
    .main-logo img {
        max-height: 40px !important;
        width: auto !important;
    }

    /* Ensure nav items are in a row */
    .navbar-nav.flex-row {
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
    }
}

/* ===== SMALLER MOBILE SCREENS ===== */
@media (max-width: 576px) {
    .sidebar-toggle-btn .btn,
    #sidebarCollapse {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .sidebar-toggle-btn .btn i,
    #sidebarCollapse i {
        font-size: 20px !important;
    }

    /* Hide login text on very small screens, show only icon */
    .navbar-nav .nav-btn .nav-link {
        padding: 10px 12px !important;
    }

    /* Even smaller logo */
    .main-logo img {
        max-height: 35px !important;
    }
}

/* ===== ANNOUNCEMENT BAR ADJUSTMENT ===== */
@media (max-width: 991px) {
    .slim-announcement-bar {
        position: relative !important;
        z-index: 99998 !important;
    }

    /* Add padding to body to account for fixed header + announcement */
    body {
        padding-top: 120px !important;
    }

    /* If announcement is hidden */
    body.no-announcement {
        padding-top: 70px !important;
    }
}