/* ==========================================================================
Blog page styling
   ========================================================================== */
h1{
    font-size: 3rem;
    margin-top: 2em;
}

h2{
    font-size: 1.3rem;
    font-family: "Untitled", sans-serif;
    color: rgb(101, 124, 103);
    margin-bottom: 20px;
    margin-top: 10px;
    line-height: 1.3em;
}


h2 a{
        color: rgb(101, 124, 103);
        text-decoration: none;
}

.header p{
        font-size: 1rem;
        max-width: 500px;
        margin: 0 auto;
}

p{
    font-size: .8rem;
}

h4{
    font-size: 1.25rem;
    letter-spacing: 0em;
}


.image-container img {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Class added by WordPress/JS once the file is fully downloaded */
.image-container img.is-loaded {
    opacity: 1;
}

.image-container{
    aspect-ratio: 1/1;
    overflow: hidden;
}

.read-more a{
    color: rgb(101, 124, 103);
    text-decoration: none; 
    font-size: .8rem;
}



/* ==========================================================================
   Single Post Layout & Styling
   ========================================================================== */

/* 1. Main Article Wrapper */
.single-post article.post {
    max-width: 800px;         /* Prevents lines of text from getting too wide to read comfortably */
    margin: 0 auto;           /* Centers the article on the screen */
    padding: 2rem 1rem;       /* Padding on the sides for mobile screens */
    font-family: "Untitled", sans-serif;
       color: rgb(101, 124, 103);
    line-height: 1.2;   
    margin-top: 5em;      /* Clean, breathable line spacing */
}

/* 2. Header & Titles */
.single-post .entry-header {
    margin-bottom: 2rem;
    text-align: center;       /* Centers the title and meta data */
}

.single-post  .entry-excerpt{
    margin-top: 10px;

}

.single-post  .entry-excerpt p{
    font-size: 1rem;
}

.single-post .entry-title {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.single-post .entry-meta {
    font-size: 0.8rem;
    color: #afafaf;
    padding: 1em 0;
}

.single-post .entry-meta a {
    color: #afafaf;
    text-decoration: none;
}

.single-post .entry-meta a:hover {
    text-decoration: underline;
}

/* 3. Featured Image Styling */
/* Targets the wrapper created by astridclinic_post_thumbnail() */
.single-post .post-thumbnail, 
.single-post .wp-post-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 2.5rem auto;
    border-radius: 8px;       /* Gives the featured image slightly rounded corners */
}

/* 4. Main Body Content Area */
.single-post .entry-content {
    font-size: 1.125rem;      /* Slightly larger font size optimized for long-form reading */
}

/* Paragraph and Element Spacing inside the Content */
.single-post .entry-content p,
.single-post .entry-content ul,
.single-post .entry-content ol {
    margin-top: 0;
    margin-bottom: 1.5rem;   
    font-size: 1rem; /* Consistent spacing between paragraphs */
}

.single-post h2 a{
    text-decoration: underline;
}

/* Content Headings */
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.single-post .entry-content h2 { font-size: 1.8rem; }
.single-post .entry-content h3 { font-size: 1.5rem; }

/* Responsive Media Inside Content (Images/Videos) */
.single-post .entry-content img,
.single-post .entry-content iframe {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2rem auto;
    border-radius: 4px;
}

/* 5. Footer (Categories, Tags) */
.single-post .entry-footer {
    display: none;
}



/* ==========================================================================
   Responsive Adjustments (Mobile)
   ========================================================================== */
@media (max-width: 600px) {
    .single-post .entry-title {
        font-size: 1.85rem;    /* Scales down the title size for smaller phone screens */
    }
    
    .single-post .entry-content {
        font-size: 1rem;       /* Keeps text legible on mobile */
    }
    .single-post .entry-content p,
        .single-post .entry-content ul,
        .single-post .entry-content ol {
            margin-top: 0;
            margin-bottom: 1.5rem;   
            font-size: 1rem; /* Consistent spacing between paragraphs */
        }
}