/* ====================================
   1. BLOG LAYOUT: TWO-COLUMN STRUCTURE
   ==================================== */

/* Global container for main blog area and sidebar */
.blog-container {
    max-width: 1200px; /* Adjust to match your main site's maximum container width */
    margin: 0 auto;
    padding: 40px 20px;
    display: grid;
    /* Defines the column ratio: 70% for content, 30% for sidebar */
    grid-template-columns: 1fr 300px; 
    gap: 50px; /* Space between the main content and the sidebar */
}

/* Ensure the main area uses the available space */
.main-blog-area {
    min-width: 0; /* Prevents overflow with long content/images */
}

/* Sidebar styling for fixed content */
#blog-sidebar {
    position: sticky; /* Keeps the sidebar visible while scrolling */
    top: 20px; /* Offset from the top of the viewport */
    align-self: start; /* Sticks it to the top of its row */
}

/* ====================================
   2. TYPOGRAPHY & READING EXPERIENCE
   ==================================== */

/* Optimize body text for legibility */
.main-blog-area p {
    font-size: 1.125rem; /* 18px - Great reading size */
    line-height: 1.7; /* Generous line spacing */
    margin-bottom: 20px;
    color: #333; /* Dark gray for soft contrast */
}

/* General Link Styles (inherited, but ensure consistency) */
.main-blog-area a:not(.btn):not(.cta-link) {
    color: var(--color-primary-blue); /* Use your brand blue variable */
    text-decoration: underline;
    transition: color 0.2s ease;
}

.main-blog-area a:hover:not(.btn):not(.cta-link) {
    color: var(--color-primary-teal); /* Hover effect */
}

/* Styles for Headings WITHIN the post (e.g., H2, H3) */
.main-blog-area h2 {
    font-size: 2rem;
    margin: 40px 0 20px;
    border-bottom: 2px solid var(--color-light-grey);
    padding-bottom: 5px;
}

.main-blog-area h3 {
    font-size: 1.5rem;
    margin: 30px 0 15px;
}

/* ====================================
   3. COMPONENTS: POST CARDS
   ==================================== */

.post-card {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--color-light-grey);
}

.post-card:last-child {
    border-bottom: none; /* No separator after the last post */
}

.post-card h2 a {
    font-size: 1.8rem;
    color: var(--color-dark-text); /* Ensure post title is prominent */
    text-decoration: none;
}

.post-card h2 a:hover {
    color: var(--color-primary-blue);
}

.post-meta {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 15px;
}
.post-thumbnail,.featured-image{
    width:100%;
    height: 350px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ====================================
   4. COMPONENTS: SIDEBAR WIDGETS
   ==================================== */

.sidebar-widget {
    background: #f7f7f7; /* Light background for contrast */
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    border-left: 5px solid var(--color-primary-blue); /* Brand accent */
}

.sidebar-widget h3 {
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--color-dark-text);
}

.sidebar-widget ul {
    list-style: none;
    padding: 0;
}

.sidebar-widget ul li a {
    display: block;
    padding: 5px 0;
    text-decoration: none;
    color: #555;
    transition: color 0.2s ease;
}

.sidebar-widget ul li a:hover {
    color: var(--color-primary-blue);
}

/* Custom styling for the CTA widget */
.cta-widget {
    text-align: center;
    background: var(--color-primary-teal); /* Use a brand color for high visibility */
    color: white;
}

.cta-widget h3 {
    color: white;
}

/* ====================================
   5. MEDIA QUERIES (RESPONSIVENESS)
   ==================================== */

@media (max-width: 992px) {
    .blog-container {
        /* On smaller screens, stack the content and sidebar */
        grid-template-columns: 1fr; 
        gap: 30px;
    }
.mobile-menu-blog{
     display:none;
    
}
    #blog-sidebar {
       background:#fff;
       left:0;
        position: fixed; /* Disable sticky behavior on small screens */
        order: -1; /* Place the sidebar above the main content on mobile */
        
    }
}

@media (max-width: 768px) {
    .blog-container {
        padding: 20px 15px;
    }
    .main-blog-area p {
        font-size: 1rem;
    }
}

/* ====================================
   5. COMPONENTS: SEARCH WIDGET STYLING
   ==================================== */

.search-widget form {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden; /* Keeps the button and input aligned */
    background: white;
}

.search-widget input[type="search"] {
    flex-grow: 1;
    padding: 10px 12px;
    border: none;
    font-size: 1rem;
    outline: none;
    /* Resetting default browser search input styles */
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
}

.search-widget button {
    /* Inherit button styles from main CSS, but modify */
    background: var(--color-primary-blue);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 1rem;
}

.search-widget button:hover {
    background: var(--color-dark-blue); /* Darker blue on hover */
}