/* --- Page Specific Styles: Individual Blog Post --- */


/* Adjust main content area specifically for blog post pages */

body{
  background-image: none;
}

.main-content-area.blog-post-page {
    padding-top: 80px; /* More space from header */
    padding-bottom: 80px; /* More space before footer */
    max-width: 1400px; /* Slightly narrower for optimal reading experience */
    margin: 0 auto; /* Ensure this is explicitly set to center the block */
    box-sizing: border-box; /* Good practice to keep this */
    text-align: left;
}

.blog-post-full {
    padding: 0; /* No extra padding on this main article wrapper, padding from main-content-area is enough */
}

.blog-post-full-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 48px; /* Prominent title */
    font-weight: 700;
    color: var(--primary-accent); /* Use accent color for main post title */
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.2;
}

.blog-post-full-meta {
    font-size: 16px;
    color: var(--footer-text); /* Lighter grey for meta info */
    margin-bottom: 40px; /* More space after meta before content */
    border-bottom: 1px solid var(--secondary-support); /* Subtle line below meta */
    padding-bottom: 10px;
}

.blog-post-full-meta .post-category {
    font-weight: 500;
    color: var(--text-dark-grey); /* Darker for better visibility */
}

.post-content {
    font-size: 18px;
    line-height: 1.8; /* Increased line height for readability of body text */
    color: var(--text-dark-grey);
    margin-bottom: 50px; /* Space after content */
}

.post-content p {
    margin-bottom: 1.5em; /* More space between paragraphs */
    font-weight: 400;
}

.post-content h1, /* Include H1 as well, for consistency if you manually set it */
.post-content h2,
.post-content h3,
.post-content h4 {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-dark-grey); /* Headings within content */
    margin-top: 2.5em; /* Space above headings */
    margin-bottom: 0.8em; /* Space below headings */
    line-height: 1.3;
}

.post-content h1 { /* If Markdown H1 ends up here instead of post-full-title */
    font-size: 40px; /* Slightly smaller than main title */
    font-weight: 700;
    color: var(--primary-accent);
}

.post-content h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-accent); /* Accent for main subheadings */
}

.post-content h3 {
    font-size: 28px;
    font-weight: 600;
}

.post-content h4 {
    font-size: 24px;
    font-weight: 600;
}

.post-content ul,
.post-content ol {
    margin-bottom: 1.5em;
    padding-left: 25px;
}

.post-content li {
    margin-bottom: 0.5em;
    line-height: 1.6;
}

.post-content img {
    max-width: 100%;
    height: auto;
    display: block; /* Make image a block element to control margins */
    margin: 30px auto; /* Center images within content */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.post-content figure {
    margin: 30px auto; /* Center figure element */
    max-width: 100%;
    text-align: center;
}

.post-content figcaption {
    font-size: 15px;
    color: var(--footer-text);
    margin-top: 10px;
    font-style: italic;
}



/* --- Responsive Adjustments for Blog Post Page --- */
@media (max-width: 900px) {
    .main-content-area.blog-post-page {
        padding-top: 50px;
        padding-bottom: 50px;
        max-width: 100%; /* Allow full width minus padding */
    }
    .blog-post-full-title {
        font-size: 40px;
    }
    .blog-post-full-meta {
        font-size: 15px;
    }
    .post-content {
        font-size: 17px;
    }
    .post-content h1 { /* Responsive for Markdown's H1 */
        font-size: 32px;
    }
    .post-content h2 {
        font-size: 28px;
    }
    .post-content h3 {
        font-size: 24px;
    }
    .post-content h4 {
        font-size: 20px;
    }
    .back-to-blog, .next-post {
        font-size: 14px;
        padding: 8px 15px;
    }
}

@media (max-width: 600px) {
    .main-content-area.blog-post-page {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .blog-post-full-title {
        font-size: 32px;
    }
    .blog-post-full-meta {
        font-size: 14px;
    }
    .post-content {
        font-size: 16px;
    }
    .post-content h1 {
        font-size: 28px;
    }
    .post-content h2 {
        font-size: 24px;
    }
    .post-content h3 {
        font-size: 20px;
    }
    .post-content h4 {
        font-size: 18px;
    }
    .post-navigation {
        flex-direction: column; /* Stack navigation buttons */
        gap: 15px;
    }
    .back-to-blog, .next-post {
        width: 100%; /* Make buttons full width when stacked */
        text-align: center;
    }
}