/* Image lightbox styles */
            .lightbox-overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.9);
                z-index: 2000;
                justify-content: center;
                align-items: center;
                cursor: zoom-out;
            }
            

            .lightbox-container {
                position: relative;
                max-width: 90%;
                max-height: 90%;
                margin: auto;
                overflow: visible; /* Changed from hidden to visible */
            }

            .lightbox-image-wrapper {
                width: 100%;
                height: 100%;
                display: contents;
                align-items: center;
                overflow: auto; /* Critical for scrolling */
            }

            .lightbox-image {
                display: block;
                max-width: 100%; /* Critical for horizontal scrolling */
                max-height: 90vh;
                transform-origin: center;
                transition: transform 0.3s ease;
                user-select: none;
            }
            
            .lightbox-caption {
                position: absolute;
                bottom: -40px;
                left: 0;
                right: 0;
                text-align: center;
                color: white;
                font-size: 14px;
                padding: 10px;
            }
            
            .lightbox-close {
                position: absolute;
                top: 20px;
                right: 20px;
                color: white;
                font-size: 32px;
                cursor: pointer;
                background: rgba(0, 0, 0, 0.5);
                width: 40px;
                height: 40px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                border: none;
                z-index: 2010;
            }
            
            .lightbox-nav {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                color: white;
                font-size: 32px;
                cursor: pointer;
                background: rgba(0, 0, 0, 0.5);
                width: 40px;
                height: 60px;
                border-radius: 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: none;
                z-index: 2001;
            }
            
            .lightbox-prev {
                left: 20px;
            }
            
            .lightbox-next {
                right: 20px;
            }
            
            /* Zoom controls */
            .lightbox-zoom-controls {
                position: absolute;
                bottom: 20px;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                gap: 10px;
                z-index: 2010;
            }
            
            .lightbox-zoom-btn {
                background: rgba(0, 0, 0, 0.5);
                color: white;
                border: none;
                border-radius: 4px;
                width: 40px;
                height: 40px;
                font-size: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
            }
            
            .lightbox-zoom-text {
                background: rgba(0, 0, 0, 0.5);
                color: white;
                border: none;
                border-radius: 4px;
                height: 40px;
                font-size: 14px;
                padding: 0 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                pointer-events: none;
            }
            
            /* Make images inside the article content clickable */
            .guide-article-content img, 
            .article-placeholder-image img,
            .guide-topic-image,
            .image-container-wrapper img,
            #modalContent img {
                cursor: zoom-in;
                transition: opacity 0.2s;
            }
            
            .guide-article-content img:hover, 
            .article-placeholder-image img:hover,
            .guide-topic-image:hover,
            .image-container-wrapper img:hover,
            #modalContent img:hover {
                opacity: 0.9;
            }
            
            /* Loading indicator */
            .lightbox-loading {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: white;
                font-size: 16px;
            }
            
            /* Animation for the lightbox */
            @keyframes  fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            
            .lightbox-overlay.active {
                display: flex;
                animation: fadeIn 0.3s ease-in-out;
            }
           /* Mobile article modal/popup styles */
        .article-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            overflow-y: auto;
        }
        
        .article-modal {
            position: relative;
            background-color: white;
            margin: 15px;
            border-radius: 8px;
            max-width: 100%;
            max-height: 95vh;
            overflow-y: auto;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }
        
        .article-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid var(--guide-border-color);
            position: sticky;
            top: 0;
            background-color: white;
            z-index: 10;
        }
        
        .article-modal-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--guide-green-color);
            margin: 0;
        }
        
        .article-modal-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #666;
            padding: 0 10px;
        }
        
        .article-modal-content {
            padding: 20px;
        }
        
        .article-modal-footer {
            display: flex;
            justify-content: space-between;
            padding: 15px;
            border-top: 1px solid var(--guide-border-color);
            background-color: white;
            position: sticky;
            bottom: 0;
        }
        
        .article-nav-button {
            background-color: white;
            border: 1px solid var(--guide-border-color);
            border-radius: 4px;
            padding: 8px 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            color: var(--guide-text-color);
            font-size: 14px;
        }
        
        .article-nav-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .article-nav-button-prev::before {
            content: "←";
            margin-right: 5px;
        }
        
        .article-nav-button-next::after {
            content: "→";
            margin-left: 5px;
        }
        
        /* Mobile-specific styles */
        @media (max-width: 768px) {
            /* Hide the sidebar on mobile */
            .guide-sidebar {
                display: none;
            }
            
            /* Full-width main content on mobile */
            .guide-main-content {
                width: 100%;
            }
            
            /* Make topic items more clickable */
            .guide-topic-item {
                cursor: pointer;
                transition: background-color 0.2s;
                padding: 15px;
                border-radius: 8px;
                margin-bottom: 15px;
                border: 1px solid var(--guide-border-color);
            }
            
            .guide-topic-item:hover, 
            .guide-topic-item:active {
                background-color: rgba(31, 107, 18, 0.1);
            }
            
            /* Add visual cue for clickable items */
            .guide-topic-title {
                position: relative;
                padding-right: 20px;
            }
            
            .guide-topic-title::after {
                content: "→";
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                color: var(--guide-green-color);
            }
        }

        :root {
            --guide-text-color: #37352f;
            --guide-sidebar-bg: #fbfbfa;
            --guide-border-color: #e6e6e6;
            --guide-light-bg: #f7f6f3;
            --guide-primary-color: #1f6b12;
            --guide-green-color: #1f6b12;
        }
        
        .guide-container {
            display: flex;
            /* Explicit viewport-bound height (not the old "height: 100%", which never
               resolved to anything concrete because none of the ancestors up to <body>
               declare a height, so it silently did nothing and the two flex children
               below just grew with their content instead of clipping to the viewport).
               Bounding this container is what makes overflow-y:auto below actually work:
               each pane now scrolls independently within a fixed-height box, so the
               sidebar's reachability has nothing to do with how long the current
               article is — no coincidental "does this article provide enough scroll
               runway" dependency, works the same whether the list has 14 items or 100. */
            height: calc(100vh - 85px);
            gap: 0;
        }

        /* Sidebar styles - simplified */
        .guide-sidebar {
            width: 200px;
            background-color: var(--guide-sidebar-bg);
            border-right: 1px solid var(--guide-border-color);
            padding: 20px 15px;
            flex-shrink: 0;
            overflow-y: auto;
        }
        
        .guide-logo-container {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
            padding-left: 7px;
        }
        
        .guide-logo {
            width: 32px;
            height: 32px;
            background-color: #444;
            border-radius: 3px;
            margin-right: 12px;
        }
        
        .guide-logo-text h2 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 1px;
        }
        
        .guide-logo-text p {
            font-size: 14px;
            color: #6b7280;
        }
        
        .guide-nav-links a {
            display: block;
            text-decoration: none;
            color: var(--guide-text-color);
            padding: 5px 7px;
            margin: 1px 0;
            font-size: 14px;
            border-radius: 3px;
            transition: background-color 0.2s;
        }
        
        .guide-nav-links a:hover {
            background-color: rgba(55, 53, 47, 0.08);
        }
        
        .guide-nav-links a.active {
            color: var(--guide-primary-color);
        }
        
        /* Main content */
        .guide-main-content {
            flex-grow: 1;
            overflow-y: auto;
            background-color: white;
            padding-left: 0;
        }
        
        .guide-content-wrapper {
            max-width: 100%;
            width: 100%;
            padding: 10px 20px 40px 0;
        }
        
        .guide-content-section {
            margin-bottom: 70px;
            position: relative;
            min-height: 200px;
            cursor: pointer;
            transition: background-color 0.2s;
            padding: 20px;
            border-radius: 5px;
        }
        
        .guide-content-section:hover {
            background-color: rgba(31, 107, 18, 0.05);
        }
        
        .guide-content-section::after {
            content: "";
            position: absolute;
            bottom: -35px;
            left: 0;
            right: 0;
            height: 1px;
            background-color: var(--guide-border-color);
        }
        
        .guide-image-container {
            position: absolute;
            left: 0;
            top: 0;
            width: 230px;
        }
        
        .article-placeholder-image {
            background-color: var(--guide-light-bg);
            border-radius: 5px;
            display: inline-block;
            position: relative;
            margin: 20px auto;
            text-align: center;
            border: 1px solid var(--guide-border-color);
            overflow: hidden;
            max-width: 100%;
        }

        .article-placeholder-image img {
            display: block;
            max-width: 100%;
            height: auto;
        }

        /* Optional: Add this wrapper if you want to center the image container */
        .image-container-wrapper {
            text-align: center;
            width: 100%;
            margin: 20px 0;
        }
        
        .guide-placeholder-image {
            background-color: var(--guide-light-bg);
            border-radius: 5px;
            width: 100%;
            padding-top: 85%;
            position: relative;
            border: 1px solid var(--guide-border-color);
        }
        
        .guide-placeholder-image img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 60%;
            max-height: 60%;
        }
        
        .guide-content-text {
            margin-left: 260px;
        }
        
        .guide-section-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 12px;
            color: var(--guide-green-color);
        }
        
        .guide-section-description {
            color: var(--guide-text-color);
            margin-bottom: 15px;
            font-size: 15px;
        }
        
        .guide-time-tag {
            display: flex;
            align-items: center;
            color: #6b7280;
            font-size: 14px;
            margin-top: 15px;
        }
        
        .guide-time-tag svg {
            margin-right: 5px;
        }
        
        .guide-button {
            display: inline-block;
            padding: 2px 8px;
            background-color: white;
            border: 1px solid var(--guide-border-color);
            border-radius: 3px;
            font-size: 14px;
            color: var(--guide-text-color);
            text-decoration: none;
            margin-top: 5px;
        }
        
        /* Article styles */
        .guide-article-wrapper {
            padding: 30px;
            margin: 0 auto;
        }
        
        .guide-article-header {
            margin-bottom: 30px;
        }
        
        .guide-article-title {
            font-size: 28px;
            color: var(--guide-green-color);
            margin-bottom: 15px;
        }
        
        .guide-article-description {
            color: #666;
            font-size: 16px;
            margin-bottom: 20px;
        }
        
        .guide-article-content {
            line-height: 1.7;
        }
        
        /* Topic list styles (for Start Here page) */
        .guide-topic-list {
            display: flex;
            flex-direction: column;
            gap: 40px;
        }
        
        .guide-topic-item {
            display: flex;
            align-items: center;
            gap: 30px;
            cursor: pointer;
            padding: 5px;
            border-radius: 4px;
            transition: background-color 0.2s;
        }
        
        .guide-topic-item:hover {
            background-color: rgba(31, 107, 18, 0.05);
        }
        
        .guide-topic-image {
            flex: 0 0 auto;
            width: 150px;
            height: auto;
            object-fit: contain;
            background-color: var(--guide-light-bg);
            border-radius: 5px;
            border: 1px solid var(--guide-border-color);
        }
        
        .guide-topic-content {
            flex: 1;
            padding-top: 10px;
        }
        
        .guide-topic-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
        }
        
        .guide-topic-description {
            color: var(--guide-text-color);
            font-size: 15px;
            line-height: 1.5;
        }
        
        /* Loading and error states */
        .guide-loading {
            text-align: center;
            padding: 50px;
            color: #666;
            font-size: 16px;
        }
        
        .guide-article-error {
            text-align: center;
            padding: 50px 20px;
            color: #666;
        }
        
        .guide-article-error h2 {
            color: var(--guide-green-color);
            margin-bottom: 15px;
        }
        
        /* Responsive styles */
        @media (max-width: 768px) {
            .guide-container {
                flex-direction: column;
            }
            
            .guide-sidebar {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid var(--guide-border-color);
            }
            
            .guide-content-wrapper {
                padding: 10px 20px 20px;
            }
            
            .guide-content-section {
                padding-top: 200px;
                margin-bottom: 40px;
            }
            
            .guide-image-container {
                position: relative;
                width: 100%;
                max-width: 230px;
                margin-bottom: 20px;
            }
            
            .guide-content-text {
                margin-left: 0;
            }
            
            .guide-article-wrapper {
                padding: 20px;
            }
            
            .guide-topic-item {
                flex-direction: column;
                gap: 15px;
            }
            
            .guide-topic-image {
                width: 100%;
                max-width: 150px;
            }
        }