<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Journeys - Blog</title>
    
    <!--=============== REMIXICONS ===============-->
    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet">
    
    <link rel="stylesheet" href="assets/css/blog.css">
        <!--=============== CSS ===============-->
    <link rel="stylesheet" href="assets/css/styles.css">
    <link rel="stylesheet" href="assets/css/navigation.css">
    <link rel="stylesheet" href="assets/css/dashboard-mobile.css">
    <link rel="icon" href="images/logo-red.png" type="image/png">
    
    <style>
        /* Universal box-sizing and overflow prevention */
        *, *::before, *::after {
            box-sizing: border-box;
        }
        
        html {
            overflow-x: hidden;
        }
        
        body {
            overflow-x: hidden !important;
            width: 100%;
            max-width: 100vw;
        }
        
        /* Navigation and Header Styles */
        .nav.container {
            display: flex !important;
            align-items: center !important;
            width: 100% !important;
            max-width: 100vw;
        }
        
        .overlay-logo {
            margin-right: 3rem !important;
        }
        
        .nav__menu {
            display: flex !important;
            align-items: center !important;
            flex: 1 1 auto !important;
        }
        
        .nav__list {
            display: flex !important;
            gap: 0.8rem !important;
            align-items: center !important;
            margin-left: auto !important;
            margin-right: 0 !important;
        }
        
        .nav__auth {
            margin-left: 2rem !important;
            flex-shrink: 0 !important;
            min-width: 66px !important;
            z-index: 10 !important;
        }
        
        /* Mobile Toggle Button - Match mobile dashboard style */
        .mobile-toggle-btn {
            position: fixed !important;
            top: 1rem !important;
            left: 1rem !important;
            z-index: 999999 !important;
            background: rgba(255, 255, 255, 0.1) !important;
            backdrop-filter: blur(20px) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            border-radius: 50% !important;
            width: 2.5rem !important;
            height: 2.5rem !important;
            color: #fff !important;
            font-size: 1.25rem !important;
            cursor: pointer !important;
            transition: all 0.3s ease !important;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
            font-weight: 600 !important;
            display: none !important;
            align-items: center !important;
            justify-content: center !important;
            pointer-events: auto !important;
        }
        
        .mobile-toggle-btn:hover {
            background: rgba(255, 255, 255, 0.15) !important;
            transform: scale(1.05) !important;
        }
        
        .mobile-toggle-btn.hidden {
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
            transform: scale(0.8) !important;
        }
        
        /* Ensure mobile dashboard CSS variables are available */
        :root {
            --mobile-primary-color: #ffffff;
            --mobile-secondary-color: #e0e0e0;
            --mobile-accent-color: #f5f5f5;
            --mobile-dark-bg: #000000;
            --mobile-card-bg: rgba(255, 255, 255, 0.05);
            --mobile-border-color: rgba(255, 255, 255, 0.1);
            --mobile-text-primary: #ffffff;
            --mobile-text-secondary: #b0b0b0;
            --mobile-text-muted: #808080;
            --mobile-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            --mobile-blur: blur(20px);
            --mobile-border-radius: 1rem;
            --mobile-spacing-xs: 0.5rem;
            --mobile-spacing-sm: 0.75rem;
            --mobile-spacing-md: 1rem;
            --mobile-spacing-lg: 1.5rem;
            --mobile-spacing-xl: 2rem;
        }
        

        /* Hide mobile sidebar on desktop */
        @media screen and (min-width: 1024px) {
            .mobile-sidebar {
                display: none;
            }
            
            .mobile-toggle-btn {
                display: none !important;
            }
        }

        /* Show mobile toggle button on mobile */
        @media screen and (max-width: 1023px) {
            .mobile-toggle-btn {
                display: flex !important;
            }
            
            .nav__toggle {
                display: none !important;
            }
            
            .nav__menu {
                display: none !important;
            }
        }

        /* ================= MOBILE RESPONSIVENESS ================= */
        @media screen and (max-width: 1024px) {
            .journey-header h1 {
                font-size: 2.5rem;
            }
            
            .blog-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1.5rem;
            }
            
            .nav__item {
                margin-bottom: 2rem;
            }
            
            .nav__item:last-child {
                margin-bottom: 0;
            }
        }

        @media screen and (max-width: 768px) {
            /* Prevent horizontal overflow */
            body {
                overflow-x: hidden !important;
                width: 100% !important;
                max-width: 100vw !important;
            }
            
            .blog-main {
                width: 100%;
                max-width: 100vw;
                overflow-x: hidden;
            }
            
            /* Header adjustments */
            .nav {
                height: 4rem;
                padding: 0 1rem;
                width: 100%;
                max-width: 100vw;
            }
            
            .nav__logo {
                font-size: 1.25rem;
            }
            
            /* Journey header mobile optimization */
            .journey-header {
                padding: 6rem 1rem 4rem;
                background-size: cover;
                background-position: center;
                width: 100%;
                max-width: 100vw;
                overflow: hidden;
                min-height: 300px;
            }
            
            .journey-header-title {
                font-size: 2rem;
                line-height: 1.2;
                margin-bottom: 1rem;
                text-align: center;
            }
            
            .journey-header-subtitle {
                font-size: 1rem;
                line-height: 1.6;
                text-align: center;
                max-width: 100%;
            }
            
            /* Main content adjustments */
            .container {
                padding: 0 1rem;
                margin: 0 auto;
                max-width: 100%;
                width: 100%;
                overflow-x: hidden;
            }
            
            /* Featured post optimization */
            .featured-post {
                padding: 3rem 0;
                width: 100%;
                max-width: 100vw;
                overflow-x: hidden;
            }
            
            .featured-card {
                display: flex;
                flex-direction: column;
                margin: 0;
                /* Preserve desktop glassmorphism styling */
                background: rgba(0,0,0,0.7);
                border-radius: 18px;
                box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37);
                backdrop-filter: blur(18px) saturate(180%);
                -webkit-backdrop-filter: blur(18px) saturate(180%);
                border: 1.5px solid rgba(255,255,255,0.22);
                overflow: hidden;
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            
            .featured-img {
                width: 100%;
                height: 200px;
                object-fit: cover;
                filter: brightness(0.85) contrast(1.1);
            }
            
            .featured-content {
                padding: 1.5rem;
            }
            
            .featured-title {
                font-size: 1.5rem;
                margin-bottom: 1rem;
                color: #fff;
                line-height: 1.3;
            }
            
            .featured-meta {
                font-size: 0.9rem;
                margin-bottom: 1rem;
                color: #fff;
            }
            
            .featured-desc {
                font-size: 1rem;
                line-height: 1.6;
                color: #fff;
                margin-bottom: 1.5rem;
            }
            
            /* Blog grid mobile optimization */
            .blog-list {
                padding: 3rem 0;
                width: 100%;
                max-width: 100vw;
                overflow-x: hidden;
            }
            
            .blog-grid {
                display: grid;
                grid-template-columns: 1fr;
                gap: 1.5rem;
                margin: 2rem 0;
                width: 100%;
                max-width: 100%;
            }
            
            /* Preserve desktop glassmorphism styling for mobile */
            .blog-card {
                margin: 0;
                /* Keep desktop glassmorphism effects */
                background: rgba(30, 34, 44, 0.45);
                border-radius: 1.5rem;
                box-shadow: 0 8px 32px rgba(0,0,0,0.18);
                backdrop-filter: blur(16px) saturate(180%);
                -webkit-backdrop-filter: blur(16px) saturate(180%);
                border: 1.5px solid rgba(255,255,255,0.18);
                transition: transform 0.3s cubic-bezier(.25,.8,.25,1), box-shadow 0.3s, backdrop-filter 0.3s, border 0.3s;
                cursor: pointer;
                overflow: hidden;
                position: relative;
            }
            
            .blog-card:hover {
                transform: scale(1.02) translateY(-3px);
                box-shadow: 0 12px 40px rgba(0,0,0,0.25), 0 0 0 2px rgba(255,255,255,0.22);
                backdrop-filter: blur(20px) saturate(200%);
                -webkit-backdrop-filter: blur(20px) saturate(200%);
                border: 2px solid rgba(255,255,255,0.25);
            }
            
            .blog-img {
                width: 100%;
                height: 200px;
                object-fit: cover;
                filter: brightness(0.85) contrast(1.1);
            }
            
            .blog-content {
                padding: 1.5rem;
                flex: 1;
                display: flex;
                flex-direction: column;
            }
            
            .blog-title {
                font-size: 1.25rem;
                margin-bottom: 0.75rem;
                color: #fff;
                line-height: 1.3;
            }
            
            .blog-meta {
                font-size: 0.85rem;
                margin-bottom: 1rem;
                color: #fff;
            }
            
            .blog-desc {
                font-size: 0.9rem;
                margin-bottom: 1rem;
                color: #fff;
                line-height: 1.5;
                flex: 1;
            }
            
            .read-more {
                color: #fff !important;
                font-weight: 600;
                text-decoration: none;
                transition: color 0.2s;
                display: inline-block;
                padding: 0.5rem 0;
            }
            
            .read-more:hover {
                color: #f7b267 !important;
            }
            
            /* Footer styles removed - using reusable component */
        }

        @media screen and (max-width: 480px) {
            /* Further mobile optimization for small screens */
            .journey-header {
                padding: 5rem 0.75rem 3rem;
                min-height: 250px;
            }
            
            .journey-header-title {
                font-size: 1.75rem;
                line-height: 1.3;
            }
            
            .journey-header-subtitle {
                font-size: 0.9rem;
            }
            
            .container {
                padding: 0 0.75rem;
            }
            
            .featured-title {
                font-size: 1.3rem;
            }
            
            .featured-content {
                padding: 1rem;
            }
            
            .blog-content {
                padding: 1rem;
            }
            
            .blog-title {
                font-size: 1.1rem;
            }
            
            .blog-desc {
                font-size: 0.85rem;
            }
            
            /* Footer styles removed - using reusable component */
        }

        @media screen and (max-width: 360px) {
            /* Ultra-small screen optimization */
            body {
                overflow-x: hidden !important;
                max-width: 100vw !important;
            }
            
            .journey-header-title {
                font-size: 1.5rem;
            }
            
            .journey-header-subtitle {
                font-size: 0.85rem;
            }
            
            .featured-img,
            .blog-img {
                height: 160px;
            }
            
            /* Final overflow prevention for ultra-small screens */
            * {
                max-width: 100vw !important;
            }
            
            .container {
                padding: 0 0.5rem !important;
            }
        }
    </style>
</head>
<body class="mobile-dashboard">
    <!-- Header (from main homepage) -->
    <header class="header" id="header">
        <!-- Overlay Logo -->
        <div class="overlay-logo">
            <img src="assets/img/logo.png" alt="Reisen mit Sunil" class="overlay-logo-img">
        </div>
        
        <nav class="nav container">
            <div class="nav__menu" id="nav-menu">
                <ul class="nav__list">
                    <li class="nav__item">
                        <a href="index.html#home" class="nav__link">Home</a>
                    </li>
                    <li class="nav__item">
                        <a href="about.html" class="nav__link">About us</a>
                    </li>
                    <li class="nav__item">
                        <a href="places.html" class="nav__link">Places</a>
                    </li>
                    <li class="nav__item">
                        <a href="journeys.html" class="nav__link active-link">Blog</a>
                    </li>
                    <li class="nav__item">
                        <a href="make-your-tour.html" class="nav__link">Make Your Tour</a>
                    </li>
                    <li class="nav__item">
                        <a href="contact.html" class="nav__link">Contact us</a>
                    </li>
                </ul>

                <!-- Close button-->
                <div class="nav__close" id="nav-close">
                    <i class="ri-close-line"></i>
                </div>
            </div>
            
            <!--Toggle button-->
            <div class="nav__toggle" id="nav-toggle">
                <i class="ri-menu-fill"></i>
            </div>
            
            <!-- Authentication Section -->
            <div class="nav__auth">
                <!-- Login Button (shown when not authenticated) -->
                <button class="auth-btn" id="loginBtn">
                    <i class="ri-user-line"></i>
                    Sign In
                </button>
                
                <!-- User Profile (shown when authenticated) -->
                <div class="user-profile" id="userProfile">
                    <div class="user-avatar" id="userAvatar">U</div>
                    <span class="user-name" id="userName">User</span>
                    <button class="auth-btn" id="logoutBtn" style="margin-left: 0.5rem; padding: 0.5rem 1rem;">
                        <i class="ri-logout-circle-line"></i>
                    </button>
                </div>
            </div>
        </nav>
    </header>
    
    <!-- Mobile Sidebar Toggle Button - At body level -->
    <button class="mobile-toggle-btn" id="mobileToggleBtn">
        <i class="ri-menu-line"></i>
    </button>

    <!--==================== MOBILE SIDEBAR COMPONENT ====================-->
    <div id="mobileSidebarContainer"></div>

    <!-- Blog Section -->
    <main class="blog-main">
        <!-- Header Image Section -->
        <section class="journey-header">
            <div class="journey-header-content">
                <h1 class="journey-header-title">Explore Sri Lanka's Wonders</h1>
                <p class="journey-header-subtitle">Discover breathtaking landscapes, ancient heritage, and unforgettable experiences</p>
            </div>
            <div class="journey-header-overlay"></div>
        </section>

        <section class="featured-post">
            <div class="container">
                <div class="featured-card">
                    <img src="images/story-1.png" alt="Featured Journey" class="featured-img">
                    <div class="featured-content">
                        <h2 class="featured-title">Discovering the Hidden Gems of Sri Lanka</h2>
                        <p class="featured-meta">By <span class="author">Sunil Rajintha</span> | Sep 20, 2025</p>
                        <p class="featured-desc">Join us as we explore the lesser-known wonders of Sri Lanka, from tranquil beaches to ancient temples. Get insider tips and must-see spots for your next adventure.</p>
                        <a href="#" class="read-more">Read More</a>
                    </div>
                </div>
            </div>
        </section>

        <section class="blog-list">
            <div class="container">
                <div class="blog-grid">
                    <!-- Blog Post 1 -->
                    <div class="blog-card">
                        <img src="images/story-2.png" alt="Journey" class="blog-img">
                        <div class="blog-content">
                            <h3 class="blog-title">A Culinary Tour Through Colombo</h3>
                            <p class="blog-meta">By <span class="author">Ayesha Perera</span> | Sep 15, 2025</p>
                            <p class="blog-desc">Taste the flavors of Sri Lanka's capital with our guide to the best local eats, street food, and fine dining experiences.</p>
                            <a href="#" class="read-more">Read More</a>
                        </div>
                    </div>
                    <!-- Blog Post 2 -->
                    <div class="blog-card">
                        <img src="images/story-3.png" alt="Journey" class="blog-img">
                        <div class="blog-content">
                            <h3 class="blog-title">Adventure in the Hill Country</h3>
                            <p class="blog-meta">By <span class="author">Kamal Silva</span> | Sep 10, 2025</p>
                            <p class="blog-desc">From hiking trails to tea plantations, discover the best ways to experience Sri Lanka's breathtaking hill country.</p>
                            <a href="#" class="read-more">Read More</a>
                        </div>
                    </div>
                    <!-- Blog Post 3 -->
                    <div class="blog-card">
                        <img src="images/banner-2.png" alt="Journey" class="blog-img">
                        <div class="blog-content">
                            <h3 class="blog-title">Wildlife Encounters in Yala National Park</h3>
                            <p class="blog-meta">By <span class="author">Nuwan Jayasuriya</span> | Sep 5, 2025</p>
                            <p class="blog-desc">Experience the thrill of spotting leopards, elephants, and exotic birds in one of Sri Lanka's most famous national parks.</p>
                            <a href="#" class="read-more">Read More</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!--==================== FOOTER ====================-->
    <!-- Include CSS for responsive footer -->
    <link rel="stylesheet" href="assets/css/footer-responsive.css">
    
    <!-- Ensure footer container is visible -->
    <style>
        #footer-container {
            display: block !important;
            visibility: visible !important;
            width: 100% !important;
        }
    </style>
    
    <!-- Footer Container -->
    <div id="footer-container"></div>
    
    <!-- Include JavaScript for responsive behavior -->
    <script src="assets/js/footer-responsive.js"></script>
    
    <!-- Load footer content -->
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        console.log('Loading footer component...');
        fetch('components/footer.html')
            .then(response => {
                console.log('Footer fetch response:', response.status);
                return response.text();
            })
            .then(data => {
                console.log('Footer data loaded, length:', data.length);
                const container = document.getElementById('footer-container');
                if (container) {
                    container.innerHTML = data;
                    console.log('Footer content inserted into container');
                    // Initialize responsive behavior
                    if (typeof toggleFooterVisibility === 'function') {
                        toggleFooterVisibility();
                        console.log('Footer responsive behavior initialized');
                    } else {
                        console.log('toggleFooterVisibility function not found');
                    }
                } else {
                    console.error('Footer container not found');
                }
            })
            .catch(error => {
                console.error('Error loading footer:', error);
            });
    });
    </script>

    <!--=============== NAVIGATION JS ===============-->
    <script src="assets/js/navigation.js"></script>

    <!--=============== MOBILE SIDEBAR COMPONENT LOADER ===============-->
    <script type="module">
        // Load reusable mobile sidebar component
        async function loadMobileSidebar() {
            try {
                const response = await fetch('components/mobile-sidebar.html');
                const sidebarHTML = await response.text();
                document.getElementById('mobileSidebarContainer').innerHTML = sidebarHTML;
                
                // Initialize mobile sidebar after loading
                const { default: MobileSidebar } = await import('./assets/js/mobile-sidebar.js');
                window.mobileSidebar = new MobileSidebar();
                
                // Force update active state for journeys page
                setTimeout(() => {
                    if (window.mobileSidebar) {
                        window.mobileSidebar.forceUpdateActiveState();
                    }
                }, 500);
                
                // Dispatch event to notify that mobile sidebar is loaded
                window.dispatchEvent(new CustomEvent('mobileSidebarLoaded'));
                console.log('Mobile sidebar component loaded and event dispatched');
            } catch (error) {
                console.error('Error loading mobile sidebar:', error);
            }
        }

        // Load mobile sidebar component
        loadMobileSidebar();
    </script>
    
    <!--=============== MOBILE SIDEBAR JS ===============-->
    <script>
      // Mobile Sidebar Functionality
      let mobileSidebar, mobileSidebarOverlay, mobileSidebarClose, mobileToggleBtn;
      
      // Function to initialize mobile sidebar after it's loaded
      function initializeMobileSidebar() {
        mobileSidebar = document.getElementById('mobileSidebar');
        mobileSidebarOverlay = document.getElementById('mobileSidebarOverlay');
        mobileSidebarClose = document.getElementById('mobileSidebarClose');
        mobileToggleBtn = document.getElementById('mobileToggleBtn');
        
        // Check if all elements exist before adding event listeners
        if (mobileSidebar && mobileSidebarOverlay && mobileSidebarClose && mobileToggleBtn) {
          console.log('Mobile sidebar elements found, initializing...');
          
          // Open mobile sidebar
          function openMobileSidebar() {
            if (mobileSidebar) {
              mobileSidebar.classList.add('show');
              if (mobileToggleBtn) mobileToggleBtn.classList.add('hidden');
              document.body.style.overflow = 'hidden';
            }
          }
          
          // Close mobile sidebar
          function closeMobileSidebar() {
            if (mobileSidebar) {
              mobileSidebar.classList.remove('show');
              if (mobileToggleBtn) mobileToggleBtn.classList.remove('hidden');
              document.body.style.overflow = '';
            }
          }
          
          // Event listeners
          mobileToggleBtn.addEventListener('click', openMobileSidebar);
          mobileSidebarClose.addEventListener('click', closeMobileSidebar);
          mobileSidebarOverlay.addEventListener('click', closeMobileSidebar);
          
          // Close sidebar when clicking on navigation links
          const mobileNavLinks = document.querySelectorAll('.mobile-sidebar__nav-link');
          mobileNavLinks.forEach(link => {
            link.addEventListener('click', () => {
              // Don't close for journeys link since we're already on journeys page
              if (link.getAttribute('href') !== 'journeys.html') {
                closeMobileSidebar();
              }
            });
          });
          
          // Close sidebar on escape key
          document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && mobileSidebar.classList.contains('show')) {
              closeMobileSidebar();
            }
          });
          
          // Mobile authentication integration
          const mobileLoginBtn = document.getElementById('mobileLoginBtn');
          const mobileSignupBtn = document.getElementById('mobileSignupBtn');
          const mobileLogoutBtn = document.getElementById('mobileLogoutBtn');
          const mobileUserProfile = document.getElementById('mobileUserProfile');
          const mobileAuthSection = document.querySelector('.mobile-sidebar__auth-section');
          
          // Sync mobile sidebar auth state with main auth
          function updateMobileAuthState() {
            const loginBtn = document.getElementById('loginBtn');
            const userProfile = document.getElementById('userProfile');
            
            if (userProfile && userProfile.style.display !== 'none') {
              // User is logged in
              if (mobileAuthSection) mobileAuthSection.style.display = 'none';
              if (mobileUserProfile) mobileUserProfile.style.display = 'block';
              
              // Update user info from auth manager
              const authManager = window.authManager;
              if (authManager && authManager.currentUser) {
                const user = authManager.currentUser;
                const userName = user.displayName || user.email.split('@')[0];
                const userEmail = user.email;
                const userPhotoURL = user.photoURL;
                
                // Update mobile sidebar user info
                const mobileUserName = document.getElementById('mobileUserName');
                const mobileUserEmail = document.getElementById('mobileUserEmail');
                if (mobileUserName) mobileUserName.textContent = userName;
                if (mobileUserEmail) mobileUserEmail.textContent = userEmail;
                
                // Update mobile avatar
                const mobileUserAvatar = document.getElementById('mobileUserAvatar');
                if (mobileUserAvatar) {
                  if (userPhotoURL) {
                    mobileUserAvatar.innerHTML = `<img src="${userPhotoURL}" alt="${userName}" style="width: 100%; height: 100%; border-radius: 50%; object-fit: cover;">`;
                  } else {
                    mobileUserAvatar.textContent = userName.charAt(0).toUpperCase();
                  }
                }
              }
            } else {
              // User is not logged in
              if (mobileAuthSection) mobileAuthSection.style.display = 'block';
              if (mobileUserProfile) mobileUserProfile.style.display = 'none';
            }
          }
          
          // Set up authentication event listeners
          if (mobileLoginBtn) {
            mobileLoginBtn.addEventListener('click', function() {
              closeMobileSidebar();
              const mainLoginBtn = document.getElementById('loginBtn');
              if (mainLoginBtn) mainLoginBtn.click();
            });
          }
          
          if (mobileSignupBtn) {
            mobileSignupBtn.addEventListener('click', function() {
              closeMobileSidebar();
              const mainLoginBtn = document.getElementById('loginBtn');
              if (mainLoginBtn) {
                mainLoginBtn.click();
                setTimeout(() => {
                  const showSignupLink = document.getElementById('showSignup');
                  if (showSignupLink) showSignupLink.click();
                }, 100);
              }
            });
          }
          
          if (mobileLogoutBtn) {
            mobileLogoutBtn.addEventListener('click', function() {
              closeMobileSidebar();
              // Trigger logout from auth manager
              if (window.authManager) {
                window.authManager.logout();
              }
            });
          }
          
          // Initial auth state update
          updateMobileAuthState();
          
          // Set up periodic auth state sync
          setInterval(updateMobileAuthState, 2000);
          
          console.log('Mobile sidebar event listeners added successfully');
        } else {
          console.log('Mobile sidebar elements not found, retrying...');
          // Retry after a short delay
          setTimeout(initializeMobileSidebar, 100);
        }
      }
      
      // Start initialization when DOM is ready
      document.addEventListener('DOMContentLoaded', function() {
        // Wait a bit for the mobile sidebar component to load
        setTimeout(initializeMobileSidebar, 200);
      });
      
      // Also try to initialize when the mobile sidebar component is loaded
      window.addEventListener('mobileSidebarLoaded', function() {
        console.log('Mobile sidebar component loaded event received');
        initializeMobileSidebar();
      });
    </script>
    
    </script>

    <!-- Authentication Modal -->
    <div id="loginModal" class="modal" style="display: none;">
      <div class="modal-content glass-modal">
        <button class="modal-close" onclick="document.getElementById('loginModal').style.display='none'">&times;</button>
        
        <!-- Login Form -->
        <div id="loginForm">
          <h2 class="modal-title">Welcome Back</h2>
          
          <button class="google-btn" id="googleSignInBtn">
            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 488 512">
              <path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z" fill="#4285F4"></path>
            </svg>
            Continue with Google
          </button>
          
          <div class="auth-divider">
            <span>OR</span>
          </div>
          
          <form class="auth-form" id="emailLoginForm">
            <div class="form-group">
              <label class="form-label" for="loginEmail">Email</label>
              <input type="email" id="loginEmail" class="form-input" placeholder="Enter your email" required>
            </div>
            
            <div class="form-group">
              <label class="form-label" for="loginPassword">Password</label>
              <input type="password" id="loginPassword" class="form-input" placeholder="Enter your password" required>
            </div>
            
            <button type="submit" class="auth-btn main-signin-btn">
              Sign In
            </button>
          </form>
          
          <div class="auth-footer">
            Don't have an account?<a class="auth-link" id="showSignup">Sign Up</a>
          </div>
        </div>
        
        <!-- Signup Form -->
        <div id="signupForm">
          <h2 class="modal-title">Create Account</h2>
          
          <button class="google-btn" id="googleSignUpBtn">
            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 488 512">
              <path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z" fill="#4285F4"></path>
            </svg>
            Continue with Google
          </button>
          
          <div class="auth-divider">
            <span>OR</span>
          </div>
          
          <form class="auth-form" id="emailSignupForm">
            <div class="form-group">
              <label class="form-label" for="signupEmail">Email</label>
              <input type="email" id="signupEmail" class="form-input" placeholder="Enter your email" required>
            </div>
            
            <div class="form-group">
              <label class="form-label" for="signupPassword">Password</label>
              <input type="password" id="signupPassword" class="form-input" placeholder="Create a password" required>
            </div>
            
            <div class="form-group">
              <label class="form-label" for="confirmPassword">Confirm Password</label>
              <input type="password" id="confirmPassword" class="form-input" placeholder="Confirm your password" required>
            </div>
            
            <button type="submit" class="auth-btn">
              Create Account
            </button>
          </form>
          
          <div class="auth-footer">
            Already have an account?<a class="auth-link" id="showLogin">Sign In</a>
          </div>
        </div>
        
        <div class="auth-loading" id="authLoading">Processing...</div>
      </div>
    </div>

    <style>
      /* Glassmorphic Modal Styles */
      .modal {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(20, 20, 20, 0.55);
        backdrop-filter: blur(6px);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.3s;
      }
      .modal-content.glass-modal {
        background: rgba(40, 40, 40, 0.38);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-radius: 2rem;
        border: 1.5px solid rgba(255,255,255,0.18);
        padding: 2.5rem 2.2rem 2rem 2.2rem;
        min-width: 350px;
        max-width: 95vw;
        width: 400px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: relative;
        animation: fadeInModal 0.3s;
      }
      @keyframes fadeInModal {
        from { opacity: 0; transform: scale(0.98); }
        to { opacity: 1; transform: scale(1); }
      }
      .modal-close {
        position: absolute;
        top: 1.2rem;
        left: 1.2rem;
        background: rgba(255,255,255,0.13);
        border: none;
        font-size: 1.6rem;
        color: #fff;
        border-radius: 50%;
        width: 2.2rem;
        height: 2.2rem;
        cursor: pointer;
        transition: background 0.2s;
        z-index: 2;
      }
      .modal-close:hover {
        background: rgba(255,255,255,0.28);
      }
      .modal-title {
        text-align: center;
        font-size: 2.2rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 1.5rem;
        margin-top: 0.2rem;
        letter-spacing: 0.01em;
      }
      .google-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        color: #222;
        font-weight: 600;
        font-size: 1.1rem;
        border: none;
        border-radius: 1rem;
        padding: 0.85rem 1.2rem;
        margin-bottom: 1.2rem;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0,0,0,0.07);
        transition: background 0.2s, box-shadow 0.2s;
        gap: 0.7rem;
      }
      .google-btn:hover {
        background: #f5f5f5;
        box-shadow: 0 4px 16px rgba(0,0,0,0.10);
      }
      .auth-divider {
        display: flex;
        align-items: center;
        text-align: center;
        margin: 1.1rem 0 1.2rem 0;
        color: #fff;
        font-weight: 500;
        font-size: 1.05rem;
        opacity: 0.85;
      }
      .auth-divider span {
        background: rgba(40,40,40,0.38);
        padding: 0 1.2rem;
        border-radius: 1.2rem;
        border: 1px solid rgba(255,255,255,0.13);
      }
      .auth-form {
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
      }
      .form-group {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
      }
      .form-label {
        color: #fff;
        font-size: 1.01rem;
        font-weight: 600;
        margin-bottom: 0.1rem;
        letter-spacing: 0.01em;
      }
      .form-input {
        padding: 0.85rem 1.1rem;
        border-radius: 1.1rem;
        border: 1.5px solid rgba(255,255,255,0.18);
        background: rgba(255,255,255,0.10);
        color: #fff;
        font-size: 1.08rem;
        outline: none;
        transition: border 0.2s, background 0.2s;
      }
      .form-input:focus {
        border: 2px solid #fff;
        background: rgba(255,255,255,0.18);
      }
      .auth-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        background: linear-gradient(90deg, #e0e0e0 0%, #bdbdbd 100%);
        color: #222;
        font-weight: 700;
        font-size: 1.13rem;
        border: none;
        border-radius: 1.1rem;
        padding: 0.9rem 1.2rem;
        margin-top: 0.7rem;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0,0,0,0.07);
        transition: background 0.2s, color 0.2s;
      }
      .main-signin-btn {
        background: linear-gradient(90deg, #b2b6c6 0%, #e0e0e0 100%);
        color: #222;
      }
      .auth-btn:hover {
        background: linear-gradient(90deg, #fff 0%, #e0e0e0 100%);
        color: #111;
      }
      .auth-footer {
        text-align: center;
        color: #fff;
        margin-top: 1.2rem;
        font-size: 1.01rem;
        opacity: 0.92;
      }
      .auth-link {
        color: #fff;
        font-weight: 600;
        text-decoration: underline;
        margin-left: 0.2rem;
        cursor: pointer;
      }
      .auth-loading {
        display: none;
        text-align: center;
        color: #fff;
        font-size: 1.1rem;
        margin-top: 1.2rem;
      }
      #signupForm { display: none; }
      @media (max-width: 600px) {
        .modal-content.glass-modal {
          min-width: 90vw;
          width: 98vw;
          padding: 1.2rem 0.5rem 1.2rem 0.5rem;
        }
      }
    </style>

    <script>
      // Modal form switching
      document.getElementById('showSignup').addEventListener('click', function() {
        document.getElementById('loginForm').style.display = 'none';
        document.getElementById('signupForm').style.display = 'block';
      });
      
      document.getElementById('showLogin').addEventListener('click', function() {
        document.getElementById('signupForm').style.display = 'none';
        document.getElementById('loginForm').style.display = 'block';
      });
      
      // Close modal when clicking outside
      document.getElementById('loginModal').addEventListener('click', function(event) {
        if (event.target === this) {
          this.style.display = 'none';
        }
      });
    </script>

    <!-- ...existing code... -->
</body>

</html>