/* ========================================
   MOBILE HEADER CRITICAL STYLES
   Load this FIRST to ensure mobile elements 
   display correctly before other CSS loads
   ======================================== */

@media (max-width: 767px) {
    /* CRITICAL: Hide desktop left-navigation CONTAINER on mobile */
    aside.left-navigation {
        display: none !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* CRITICAL: Hide breadcrumb on mobile */
    .breadcrumb,
    nav[aria-label="breadcrumb"],
    .breadcrumb-section {
        display: none !important;
        visibility: hidden !important;
    }

    /* CRITICAL: Adjust main-content to take full width on mobile */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .main-container {
        margin-left: 0 !important;
    }

    /* Force hide desktop navbar on mobile */
    .navbar.d-none.d-md-block,
    nav.navbar.navbar-expand-lg.d-none.d-md-block {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Show mobile header container */
    .mobile-header-container.d-md-none {
        display: block !important;
    }
    
    /* Hide mobile elements by default (will be shown on mobile) */
    .mobile-menu-overlay {
        display: block;
        position: fixed;
        transform: translateX(100%);
        visibility: hidden;
    }
}

@media (min-width: 768px) {
    /* CRITICAL: Force hide ALL mobile elements on tablet and desktop (? 768px) */
    .mobile-header-container,
    .mobile-header-container.d-md-none,
    div.mobile-header-container,
    .mobile-menu-overlay,
    div.mobile-menu-overlay,
    .mobile-menu-toggle,
    button.mobile-menu-toggle,
    .mobile-header-row-1,
    .hamburger-icon {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* CRITICAL: Show desktop navbar on tablet and desktop */
    .navbar.d-none.d-md-block,
    header.bg-worldstrides .navbar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* CRITICAL: Ensure navbar toggler is hidden on tablet and desktop */
    .navbar-toggler,
    button.navbar-toggler {
        display: none !important;
        visibility: hidden !important;
    }

    /* CRITICAL: Show navbar collapse (navigation links) on tablet and desktop */
    .navbar-collapse,
    #navbarContent {
        display: flex !important;
        visibility: visible !important;
    }
}