/* CSS Reset and Global Styles */

        :root {
            --primary-color: rgb(27, 51, 37);
            --secondary-color: #5ca521; /* Blue */
            --background-light: #bbc790;
            --background-white: #eafaea;
            --text-color: #062e22;
            --serif-font: 'Playfair Display', serif;
            --sans-font: 'Roboto', sans-serif;
            --max-width: 1200px;
            --reading-width: 750px; /* Max width for comfortable reading */
        }

        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: var(--sans-font);
            color: var(--text-color);
            background-color: var(--background-light);
            line-height: 1.6;
        }

        a {
            color: var(--secondary-color);
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        .container {
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        /* ---------------------- Header & Navigation ---------------------- */

        .header {
            background-color: var(--background-white);
            box-shadow: 0 2px 4px rgb(0, 255, 13);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 0;
        }

        .logo h1 {
            font-family: var(--serif-font);
            font-weight: 700;
            font-size: 1.8rem;
            color: var(--primary-color);
        }
        
        .logo span {
            color: var(--secondary-color);
        }

        .nav-links a {
            margin-left: 1.5rem;
            font-weight: 500;
            color: var(--primary-color);
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: var(--secondary-color);
            text-decoration: none;
        }
        
        /* Utility Class to Hide Elements */

        .hidden {
            display: none !important;
        }

        /* ---------------------- Hero Section ---------------------- */

        .hero-section {
            background: linear-gradient(rgb(93, 138, 43), rgb(11, 85, 2)), url('./images/kelly-sikkema-mJ-IXqa39G8-unsplash.jpg');
            background-size: cover;
            background-position: center;
            color: var(--background-white);
            padding: 4rem 0;
            text-align: center;
            margin-bottom: 2rem;
            box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.2);
        }

        .hero-section h2 {
            font-family: var(--serif-font);
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        .hero-section p {
            font-size: 1.25rem;
            margin-bottom: 2rem;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            font-weight: 300;
        }

        .hero-button {
            display: inline-block;
            background-color: var(--secondary-color);
            color: var(--background-white);
            padding: 0.8rem 2rem;
            border-radius: 6px;
            font-size: 1.1rem;
            font-weight: 700;
            transition: background-color 0.3s, transform 0.2s;
            text-transform: uppercase;
        }

        .hero-button:hover {
            background-color: rgb(49, 226, 49);
            transform: translateY(-2px);
            text-decoration: none;
        }

        /* ---------------------- Spotlight/Featured Hero Post ---------------------- */

        .spotlight-section-wrapper {
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 0 1.5rem;
            margin-bottom: 3rem;
        }

        .spotlight-section {
            background-color: var(--background-white);
            border-radius: 8px;
            box-shadow: 0 10px 25px rgb(0, 255, 85);
            overflow: hidden; 
            display: flex; 
        }

        .spotlight-image {
            width: 40%; 
            height: 350px;
            background: url('./images/Gaza\'s\ children.avif') no-repeat center center/cover;
        }

        .spotlight-content {
            width: 60%; 
            padding: 2.5rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .spotlight-content h2 {
            font-family: var(--serif-font);
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: var(--secondary-color);
        }

        .spotlight-content p {
            font-size: 1.1rem;
            color: #022007;
            margin-bottom: 1.5rem;
        }


        /* ---------------------- Main Layout (Grid) ---------------------- */

        .main-grid {
            display: grid;
            grid-template-columns: 3fr 1fr; /* Main Content (75%) and Sidebar (25%) */
            gap: 2.5rem;
            padding: 2rem 0;
        }

        .main-content {
            border-right: 1px solid #cdffdd;
            padding-right: 2.5rem;
        }

        .sidebar {
            padding-left: 1.5rem;
        }

        /* ---------------------- Article Card Styles ---------------------- */

        .article-card {
            background-color: var(--background-white);
            padding: 1.5rem;
            margin-bottom: 2rem;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(93, 201, 147, 0.884);
            border-left: 5px solid var(--secondary-color);
            transition: transform 0.2s;
        }

        .article-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(108, 255, 186, 0.671);
        }

        .article-card h2 {
            font-family: var(--serif-font);
            font-size: 1.8rem;
            margin-bottom: 0.5rem;
            line-height: 1.3;
        }

        .article-meta {
            font-size: 0.9rem;
            color: #5d9e37;
            margin-bottom: 1rem;
            display: flex;
            gap: 1rem;
        }

        .article-summary {
            font-family: var(--serif-font);
            margin-bottom: 1rem;
            color: #025c50;
        }

        .read-more {
            display: inline-block;
            background-color: var(--secondary-color);
            color: var(--background-white);
            padding: 0.5rem 1rem;
            border-radius: 4px;
            font-size: 0.9rem;
            font-weight: 500;
            transition: background-color 0.3s;
        }

        .read-more:hover {
            background-color: #23c58f;
            text-decoration: none;
        }
        
        /* ---------------------- Sidebar Styles ---------------------- */

        .sidebar-widget {
            background-color: var(--background-white);
            padding: 1.5rem;
            margin-bottom: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgb(166, 252, 166);
        }

        .sidebar-widget h3 {
            font-family: var(--sans-font);
            font-size: 1.25rem;
            margin-bottom: 1rem;
            border-bottom: 2px solid var(--background-light);
            padding-bottom: 0.5rem;
            color: var(--primary-color);
        }
        
        /* Tag Cloud Styling */

        .tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .tag-cloud a {
            display: inline-block;
            background-color: var(--background-light);
            color: var(--primary-color);
            padding: 0.3rem 0.8rem;
            border-radius: 4px;
            border: 1px solid #a8ffcc;
            font-size: 0.85rem;
            transition: all 0.2s;
        }

        .tag-cloud a:hover {
            background-color: var(--secondary-color);
            color: var(--background-white);
            border-color: var(--secondary-color);
            text-decoration: none;
        }
        
        /* Regular List Styles */

        .sidebar-list {
            list-style: none;
        }

        .sidebar-list li {
            padding: 0.5rem 0;
            border-bottom: 1px dashed #8dffd9;
        }

        .sidebar-list li:last-child {
            border-bottom: none;
        }
        
        .sidebar-list li a {
            color: var(--text-color);
            font-size: 1rem;
        }

        .sidebar-list li a:hover {
            color: var(--secondary-color);
            text-decoration: none;
        }
        
        /* ---------------------- Pagination/Load More ---------------------- */

        .pagination-section {
            padding: 2rem 0;
            text-align: center;
            border-top: 1px solid #a1ffbd;
            margin-top: 1rem;
        }

        .load-more-button {
            display: inline-block;
            background-color: var(--background-white);
            color: var(--primary-color);
            padding: 0.75rem 2.5rem;
            border: 2px solid var(--secondary-color);
            border-radius: 6px;
            font-size: 1rem;
            font-weight: 700;
            transition: all 0.3s;
            text-transform: uppercase;
            box-shadow: 0 2px 5px rgb(10, 37, 10);
        }

        .load-more-button:hover {
            background-color: var(--secondary-color);
            color: var(--background-white);
            text-decoration: none;
            transform: translateY(-1px);
        }


        /* ---------------------- CTA Section ---------------------- */

        .cta-section {
            background-color: var(--primary-color);
            color: var(--background-white);
            padding: 3rem 1.5rem;
            text-align: center;
            border-radius: 8px;
            margin: 2rem auto;
            max-width: 900px;
            box-shadow: 0 4px 15px rgb(1, 17, 9);
            display: flex; 
            flex-direction: column;
            align-items: center;
        }

        .cta-section h3 {
            font-family: var(--serif-font);
            font-size: 2rem;
            margin-bottom: 1rem;
        }
        
        .cta-form {
            display: flex;
            width: 100%;
            max-width: 450px;
            margin-top: 1rem;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 0 10px rgba(1, 15, 12, 0.925);
        }
        .cta-form input[type="email"] {
            flex-grow: 1;
            padding: 1rem 1.5rem;
            border: none;
            font-size: 1rem;
            color: var(--text-color);
            outline: none;
        }
        .cta-form button {
            background-color: var(--secondary-color);
            color: var(--background-white);
            padding: 1rem 1.5rem;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 700;
            transition: background-color 0.3s;
            text-transform: uppercase;
        }
        .cta-form button:hover {
            background-color: #033a10;
        }
        
        /* ---------------------- Footer ---------------------- */

        .footer {
            background-color: var(--primary-color);
            color: var(--background-white);
            padding: 2rem 0;
            text-align: center;
            font-size: 0.9rem;
        }

        .footer p {
            margin-bottom: 0.5rem;
        }
        
        .social-links {
            margin: 1rem 0;
            display: flex;
            justify-content: center;
            gap: 1.5rem;
        }

        .social-links a {
            color: var(--background-white);
            font-size: 1.5rem;
            transition: color 0.3s, transform 0.2s;
            line-height: 1; 
        }

        .social-links a:hover {
            color: var(--secondary-color);
            text-decoration: none;
            transform: scale(1.1);
        }

        .footer-links a {
            color: #bdffb0;
            margin: 0 0.5rem;
        }

        .footer-links a:hover {
            color: var(--background-white);
        }

        /* Reading styles for body content */

        .post-content p {
            font-family: var(--serif-font);
            font-size: 1.15rem;
            line-height: 1.8;
            margin-bottom: 1.75rem;
            color: #688885;
        }
        
        .post-content h3 {
            font-family: var(--sans-font);
            font-size: 1.7rem;
            margin-top: 2rem;
            margin-bottom: 1rem;
            border-left: 4px solid var(--secondary-color);
            padding-left: 1rem;
        }

        .post-content img {
            max-width: 100%;
            height: auto;
            border-radius: 6px;
            margin: 2rem 0;
            display: block;
            box-shadow: 0 2px 10px rgba(141, 255, 217, 0.363);
        }
        
        .post-content blockquote {
            border-left: 5px solid #0c443b;
            padding: 1rem 1.5rem;
            margin: 2rem 0;
            font-style: italic;
            background-color: var(--background-light);
            border-radius: 0 8px 8px 0;
        }
        
        .post-content blockquote p {
            font-size: 1.2rem;
            line-height: 1.5;
            color: #6ea877;
            margin-bottom: 0;
        }

        /* Author Box */

        .author-box {
            max-width: var(--reading-width);
            margin: 3rem auto 5rem;
            padding: 2rem;
            border: 1px solid #d1fddc;
            border-radius: 8px;
            display: flex;
            align-items: center;
            background-color: var(--background-white);
        }
        
        .author-box-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: url('https://placehold.co/80x80/007bff/fff?text=A') no-repeat center center/cover;
            flex-shrink: 0;
            margin-right: 1.5rem;
        }
        
        .author-box-info h4 {
            font-size: 1.25rem;
            margin-bottom: 0.5rem;
            color: var(--secondary-color);
        }
        
        .author-box-info p {
            font-size: 0.95rem;
            line-height: 1.5;
            color: #3b5e50;
            margin-bottom: 0;
        }


        /* ---------------------- Mobile Responsiveness ---------------------- */

        @media (max-width: 768px) {
            
            /* Navbar adjustments */
            .navbar { flex-direction: column; padding: 1rem 0; text-align: center; }
            .logo { margin-bottom: 1rem; }
            .nav-links { width: 100%; display: flex; justify-content: space-around; }
            .nav-links a { margin: 0 0.5rem; font-size: 0.9rem; }
            
            /* Hero adjustments */
            .hero-section { padding: 3rem 0; }
            .hero-section h2 { font-size: 2rem; }
            .hero-section p { font-size: 1rem; }
            
            /* Spotlight adjustments */
            .spotlight-section { flex-direction: column; margin-top: 1rem; }
            .spotlight-image { width: 100%; height: 200px; }
            .spotlight-content { width: 100%; padding: 1.5rem; }
            .spotlight-content h2 { font-size: 2rem; }

            /* Main Grid stacks into a single column */
            .main-grid { grid-template-columns: 1fr; gap: 0; }
            .main-content { border-right: none; padding-right: 0; }
            .sidebar { padding-left: 0; padding-top: 1rem; border-top: 1px solid #ddd; }
            
            .article-card { padding: 1rem; margin-bottom: 1.5rem; }
            .article-card h2 { font-size: 1.5rem; }
            
            /* CTA adjustments */
            .cta-section { padding: 2rem 1rem; }
            .cta-section h3 { font-size: 1.5rem; }
            .cta-form { flex-direction: column; max-width: 300px; }
            .cta-form input[type="email"], .cta-form button { padding: 0.8rem 1rem; border-radius: 0; }
            .cta-form input[type="email"] { border-bottom: 1px solid #ddd; }
            
            /* Single Post View Mobile Adjustments */
            .post-header { margin: 1.5rem auto 2rem; }
            .post-header h1 { font-size: 2rem; }
            .post-meta-full { font-size: 0.85rem; }
            .post-content { padding: 2rem 1rem; }
            .post-content p { font-size: 1rem; line-height: 1.7; }
            .post-content h3 { font-size: 1.4rem; }
            .author-box { flex-direction: column; text-align: center; margin: 2rem auto; }
            .author-box-avatar { margin-right: 0; margin-bottom: 1rem; }
        }