@font-face {
			font-family: 'Inter';
			font-style: normal;
			font-weight: 400;
			font-display: swap;
		}		
		/* CLS FIX 1: Set a system font fallback that matches 'Inter' metrics closely */
		/* Update your existing body block */
		body {
			font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
			background-color: #f0f2f5;
			color: #333;
			overflow-x: hidden;
			margin: 0;
			display: flex;
			flex-direction: column;
			min-height: 100vh;
			text-rendering: optimizeLegibility; /* Speeds up text painting */
		}

		/* Add these properties to your main tag */
		main {
			flex: 1 0 auto;
			min-height: 80vh; /* Prevents footer jump-up */
			contain: layout;  /* Optimization: limits layout recalculations to this area */
			display: block;   /* Ensures proper block formatting context */
		}
		

		
        /* Styles for active tab buttons */
        .tab-button.active {
            background-color: #4f46e5; /* Indigo 600 */
            color: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .category-button.active {
            background-color: #10b981; /* Emerald 500 */
            color: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        /* General button styling - REMOVED BACKGROUND FOR INACTIVE */
        .tab-button, .category-button {
            transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
            padding: 0.6rem 1.2rem;
            border-radius: 0.5rem;
            flex-shrink: 0; /* Prevent shrinking in flex container */
            background-color: transparent; /* Ensure no default background */
            color: #4a5568; /* Default text color for inactive */
            /* Added for trendy look: subtle hover effect */
            position: relative;
            overflow: hidden;
            white-space: nowrap; /* Prevent text wrapping */
            text-overflow: ellipsis; /* Add ellipsis if text overflows */
        }
        .tab-button:hover:not(.active) {
            color: #4f46e5; /* Indigo 600 on hover for inactive region */
        }
        .category-button:hover:not(.active) {
            color: #10b981; /* Emerald 500 on hover for inactive category */
        }
        /* Trendy hover effect: subtle underline */
        .tab-button:hover:not(.active)::after,
        .category-button:hover:not(.active)::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: currentColor; /* Matches text color */
            transform: scaleX(0);
            transform-origin: bottom right;
            transition: transform 0.3s ease-out;
        }
        .tab-button:hover:not(.active)::after {
            background-color: #4f46e5; /* Specific color for region hover underline */
        }
        .category-button:hover:not(.active)::after {
            background-color: #10b981; /* Specific color for category hover underline */
        }
        .tab-button:hover:not(.active)::after,
        .category-button:hover:not(.active)::after {
            transform: scaleX(1);
            transform-origin: bottom left;
        }

        /* NEW: Responsive grid for regions and categories */
        .responsive-grid {
            display: grid;
            /* Auto-fit as many columns as possible, each at least 100px wide (adjusted from 120px) */
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 
            gap: 0.4rem; /* Further reduced gap from 0.5rem to 0.4rem */
            justify-items: stretch; /* Stretch items to fill grid cell width */
        }

        /* Adjust button padding slightly if needed for better fit in grid cells */
        .responsive-grid .tab-button, 
        .responsive-grid .category-button {
            padding: 0.4rem 0.6rem; /* Slightly reduced padding */
            font-size: 0.875rem; /* text-sm */
            text-align: center; /* Center text within the button */
            width: 100%; /* Ensure buttons fill their grid cell */
            box-sizing: border-box; /* Include padding/border in width calculation */
        }

        /* Card styling */
        .card {
            background-color: white;
            border-radius: 0.75rem; /* rounded-lg */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-lg */
            overflow: hidden;
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
            display: flex; /* Use flexbox for vertical layout */
            flex-direction: column;
			content-visibility: auto; /* Browser skips rendering off-screen cards */
			contain-intrinsic-size: 1px 400px; /* Estimate of a card's height */
        }
		@media (hover: hover) {
			.card:hover {
				transform: translateY(-5px);
				box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
			}
		}
		/* CLS FIX 3: Strict Image Aspect Ratios */
        /* By setting aspect-ratio and height, the card doesn't 'grow' when the image pops in */
		/* Optimized for High-Resolution Display */
		.card-image {
			width: 100%;
			aspect-ratio: 16 / 9; /* Best for News Cards */
			object-fit: cover;    /* Crops the image to fill the box without stretching */
			
			/* PREVENT CRYSTALLIZATION: Forces browser to use high-quality interpolation */
			image-rendering: auto;
			
			
			border-radius: 0.75rem 0.75rem 0 0;
			background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
			background-size: 200% 100%;
			animation: skeleton-loading 1.5s infinite;
			display: block;
		}
		/* CLS FIX 4: Skeleton Loading for Cards */
        /* Ensuring the grid exists even if empty */
        #news-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
            min-height: 400px; /* Space for at least one row */
        }
		
		@keyframes skeleton-loading {
			0% { background-position: 200% 0; }
			100% { background-position: -200% 0; }
		}
        .card-content {
            padding: 1rem; /* p-4 */
            display: flex;
            flex-direction: column;
            flex-grow: 1; /* Allows content to expand and push link to bottom */
        }
        .card-title {
            font-weight: 600; /* font-semibold */
            font-size: 1.25rem; /* text-xl */
            line-height: 1.75rem; /* leading-7 */
            color: #1a202c; /* text-gray-900 */
            margin-bottom: 0.5rem; /* mb-2 */
        }
        .card-source { /* New style for source */
            font-size: 0.75rem; /* text-xs */
            color: #64748b; /* text-gray-600 */
            margin-bottom: 0.5rem; /* mb-1 */
            font-weight: 500; /* medium font weight */
        }
        .card-description {
            color: #4a5568; /* text-gray-700 */
            font-size: 0.875rem; /* text-sm */
            line-height: 1.25rem; /* leading-5 */
            margin-bottom: 1rem; /* mb-4 */
            flex-grow: 1; /* Allows description to take available space */
			display: -webkit-box;
			-webkit-line-clamp: 5;      /* Limits text to exactly 3 lines */
			-webkit-box-orient: vertical;
			overflow: hidden;           /* Hides the "huge" part of the text */
        }
        .read-more-link {
            display: inline-block;
            /*background-color: #3b82f6;  Blue 500 */
            color: #64748b;
			font-size: 0.75rem; /* text-xs */
            font-weight: 500; /* font-bold */
            padding: 0.5rem 1rem; /* py-2 px-4 */
            border-radius: 9999px; /* rounded-full */
            text-align: right;
            transition: background-color 0.2s ease;
            margin-top: auto; /* Pushes button to the bottom of the flex container */
        }
        .read-more-link:hover {
            background-color: #2563eb; /* Blue 600 */
        }

        /* Responsive grid for cards within each category section */
        .category-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem; /* gap-6 */
        }

        .ad-banner {
            background-color: #e2e8f0; /* Light gray for ads */
            border: 1px dashed #94a3b8; /* Dashed border for visibility */
            color: #475569; /* Darker gray text */
            text-align: center;
            padding: 1rem;
            margin-bottom: 1.5rem; /* mb-6 */
            font-size: 0.875rem; /* text-sm */
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 90px; /* Standard banner height */
            border-radius: 0.5rem; /* rounded-md */
        }
        /* Styles for the modal */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1000; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border-radius: 0.75rem;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            width: 90%;
            max-width: 500px;
            position: relative;
        }
        .close-button {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close-button:hover,
        .close-button:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        .comment-item {
            background-color: #f8f8f8;
            border-radius: 0.5rem;
            padding: 0.75rem;
            margin-bottom: 0.5rem;
            border: 1px solid #eee;
        }
        .comment-author {
            font-weight: 600;
            color: #333;
            font-size: 0.9rem;
        }
        .comment-text {
            font-size: 0.9rem;
            color: #555;
            margin-top: 0.25rem;
        }
        .comment-timestamp {
            font-size: 0.75rem;
            color: #888;
            text-align: right;
            margin-top: 0.5rem;
        }
        .like-button.liked {
            color: #ef4444; /* Red for liked state */
        }
        /* Share button styling */
        .share-button {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 600;
            color: white;
            transition: background-color 0.2s ease;
            width: 100%; /* Full width */
            margin-bottom: 0.75rem;
        }
        .share-button i {
            margin-right: 0.5rem;
        }
        .share-button.email { background-color: #ef4444; } /* Red */
        .share-button.email:hover { background-color: #dc2626; }
        .share-button.whatsapp { background-color: #25d366; } /* Green */
        .share-button.whatsapp:hover { background-color: #1da851; }
        .share-button.copy-link { background-color: #3b82f6; } /* Blue */
        .share-button.copy-link:hover { background-color: #2563eb; }

        /* Styles for the Follow Us Modal */
        #followUsModal .modal-content {
            text-align: center;
        }

        #followUsModal .modal-content h2 {
            font-size: 1.8em;
            margin-bottom: 20px;
            color: #333;
        }

        #followUsModal .modal-content p {
            color: #555;
            margin-bottom: 15px;
        }

        #followUsModal #email-signup-form {
            display: flex;
            flex-direction: column; /* Stack elements vertically */
            align-items: center; /* Center horizontally */
            gap: 10px;
            margin-bottom: 20px;
        }

        #followUsModal #email-signup-form input[type="email"] {
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            width: 80%; /* Adjust width as needed */
            max-width: 300px;
        }

        #followUsModal #email-signup-form button {
            background-color: #007bff; /* A nice blue */
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.3s ease;
        }

        #followUsModal #email-signup-form button:hover {
            background-color: #0056b3;
        }

        #followUsModal .social-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }

        #followUsModal .social-links img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            transition: transform 0.2s ease;
        }

        #followUsModal .social-links img:hover {
            transform: scale(1.1);
        }

        #followUsModal hr {
            border: 0;
            height: 1px;
            background: #f0f0f0;
            margin: 25px 0;
        }

        /* --- Sidebar Styles --- */
        .sidebar-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 998; /* Below sidebar, above content */
            display: none; /* Hidden by default */
        }

        #sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 280px; /* Adjust width as needed */
            max-width: 80vw; /* Max 80% of viewport width on small screens */
            height: 100%;
            background-color: #f8fafc; /* Light background for the sidebar */
            box-shadow: 2px 0 8px rgba(0,0,0,0.2);
            transform: translateX(-100%); /* Start off-screen to the left */
            transition: transform 0.3s ease-in-out;
            z-index: 999; /* Higher than content, lower than modals */
            display: flex;
            flex-direction: column;
            padding: 1rem;
            box-sizing: border-box;
            overflow-y: auto; /* Enable scrolling for categories if many */
        }

        #sidebar.open {
            transform: translateX(0); /* Slide in */
        }

        #sidebar .close-button {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 2rem;
            color: #666;
            cursor: pointer;
            z-index: 1000;
        }
        #sidebar .close-button:hover {
            color: #333;
        }

        #sidebar-country-title {
            font-size: 1.75rem; /* text-2xl */
            font-weight: 700; /* font-bold */
            color: #333;
            margin-bottom: 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid #e2e8f0; /* Light border */
            text-align: center;
            padding-top: 3rem; /* Space for close button */
        }

        #sidebar-categories {
            flex-grow: 1; /* Allows categories list to take available space */
        }

        #sidebar-categories .category-link {
            display: block;
            padding: 0.75rem 1rem;
            margin-bottom: 0.5rem;
            background-color: #eef2f5; /* Lighter background for links */
            color: #4a5568;
            font-weight: 500;
            border-radius: 0.5rem;
            transition: background-color 0.2s ease, color 0.2s ease;
            text-decoration: none;
            cursor: pointer;
        }

        #sidebar-categories .category-link:hover {
            background-color: #d8dee3; /* Darker on hover */
            color: #1a202c;
        }
        #sidebar-categories .category-link.active {
            background-color: #6366f1; /* Indigo 500 */
            color: white;
            font-weight: 600;
        }

        /* Hamburger icon styles */
        .hamburger-icon {
            font-size: 1.8rem;
            cursor: pointer;
            margin-right: 1rem; /* Space between icon and title */
            color: white; /* Match header text color */
            transition: color 0.2s ease;
        }
        .hamburger-icon:hover {
            color: #e0e7ff; /* Lighter blue on hover */
        }

        /* Ensure main content is not hidden by sidebar and shifts if desired */
        body.sidebar-open {
            overflow: hidden; /* Prevent body scroll when sidebar is open */
        }
        /* No longer shifts main content with transform property, as this can affect fixed elements */
        /* Instead, we handle overflow and overlay the sidebar. */
        
        @media (min-width: 768px) {
            /* On larger screens, main content can shift */
            body.sidebar-open main {
                /* Removed transform: translateX - sidebar will overlay */
            }
        }
        @media (max-width: 767px) {
            /* On smaller screens, sidebar covers content */
            body.sidebar-open main {
                /* Removed transform: translateX - sidebar will overlay */
            }
            #sidebar {
                width: 75vw; /* Make sidebar narrower on small screens */
            }
        }
		
		        /* ADDED: New styles for the Front Pages floating button */
        .floating-frontpages-button {
            position: fixed;
            bottom: 100px;
            right: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            background-color: #10b981; /* Emerald 500 */
            color: white;
            border-radius: 50%;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            transition: background-color 0.3s ease, transform 0.2s ease, opacity 0.3s ease;
            z-index: 990;
            opacity: 0; /* Initially hidden */
            pointer-events: none; /* Disable interaction when hidden */
        }
        .floating-frontpages-button:hover {
            background-color: #059669; /* Emerald 600 */
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            transform: scale(1.1);
        }


        /* UPDATED: Responsive styles for buttons */
        @media (max-width: 640px) {
            .floating-home-button, .floating-frontpages-button {
                bottom: 1rem;
                left: 1rem;
                width: 3rem;
                height: 3rem;
            }
            .floating-home-button {
                right: 1rem;
                left: unset;
            }
        }
		.floating-frontpages-button.show {
            opacity: 1;
            pointer-events: auto; /* Enable interaction when shown */
        }

		/* Mobile: Keep as a circle (hover doesn't exist on touch screens) */
		@media (max-width: 640px) {
			.floating-frontpages-button span {
				display: none; /* No text on mobile to save space */
			}
		}

        /* NEW: Scroll to Top Button Styles */
        .scroll-to-top-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
			
            background-color: #4f46e5; /* Indigo 600 */
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease, opacity 0.3s ease;
            z-index: 990; /* Below sidebar, above most content */
            opacity: 0; /* Hidden by default */
            pointer-events: none; /* Disable interaction when hidden */
        }

        .scroll-to-top-button.show {
            opacity: 1;
            pointer-events: auto; /* Enable interaction when shown */
        }

        .scroll-to-top-button:hover {
            background-color: #4338ca; /* Darker indigo on hover */
            transform: translateY(-3px);
        }
		/* Inside your existing <style> block */

		/* Optional: Ensure the search input is styled nicely */
		#searchInput {
			/* Base styling handled by Tailwind in HTML */
			/* You might want to override browser default focus style here if needed */
			box-shadow: none; 
		}
		/* Ensure the input doesn't take up excessive space on smaller screens */
		@media (max-width: 640px) {
			#searchInput {
				width: 60px !important; /* Make it narrower on mobile */
			}
		}
		/* Footer styling - specified as a source of shift in your logs */
        footer {
            flex-shrink: 0;
            background-color: #111827; /* gray-900 */
            color: #d1d5db; /* gray-300 */
            padding: 3rem 0; /* py-12 */
            width: 100%;
            contain: content; /* Optimization: tells browser footer layout is independent */
        }

	
    /* This ensures that when you click a link or use JS to scroll, 
       the content stops below the header instead of behind it. */
    html {
        scroll-padding-top: 85px; /* Adjust this to match your header height */
        scroll-behavior: smooth;
    }

    /* Optional: If you find the scroll happens too fast for dynamic content,
       keep the JavaScript 'setInterval' logic we discussed previously. */