/*----------------------------------------------
 * Post Page Styles
 *----------------------------------------------*/

/* General styling for the post page background and text */
.post-page {
    background-color: #f7f7f7; /* Light gray background */
    color: #333; /* Dark text for contrast */
}

/* Wrapper for the entire post content */
.post-page .post-wrapper {
    max-width: 900px; /* Set maximum width for readability */
    margin: 40px auto; /* Center horizontally with top spacing */
    margin-left: 70px; /* Shift right to align with sidebar spacing */
    padding: 20px; /* Inner spacing for content */
    background-color: #fff; /* White background for clarity */
    border-radius: 8px; /* Smooth corner radius */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Styling for the main blog post content */
.post-page .blog-post {
    padding: 20px; /* Inner spacing */
    line-height: 1.8; /* Comfortable text spacing */
    font-size: 1.1rem; /* Slightly larger font size for readability */
}

/* Meta information such as date, author, etc. */
.post-page .post-meta {
    font-size: 0.9rem; /* Smaller font for meta details */
    color: #666; /* Neutral gray color */
    margin-bottom: 20px; /* Space below metadata */
}

.post-page .post-meta p {
    margin: 5px 0; /* Space between meta paragraphs */
}

.post-page .post-meta strong {
    color: #333; /* Darker text for emphasis */
}

/* Separator for meta sections */
.post-page .meta-separator {
    border-top: 2px solid #e1e1e1; /* Light gray border */
    margin: 20px 0; /* Space around separator */
}

/* Styling for the main post content area */
.post-page .post-content {
    font-size: 1.1rem; /* Base font size */
    color: #333; /* Standard text color */
}

.post-page .post-content p {
    margin-bottom: 1.5em; /* Space between paragraphs */
}

.post-page .post-content h3 {
    font-size: 1.4rem; /* Larger size for subheadings */
    color: #005a8b; /* Blue for differentiation */
    margin-top: 30px; /* Space above heading */
    margin-bottom: 10px; /* Space below heading */
    font-weight: bold; /* Emphasis for subheadings */
}

/* Ordered lists within the post content */
.post-page .post-content ol {
    margin-left: 20px; /* Indentation for list items */
}

.post-page .post-content ol li {
    margin-bottom: 10px; /* Space between list items */
}

/* Styling for italic text */
.post-page .post-content em {
    font-style: italic; /* Standard italic style */
}

/*----------------------------------------------
 * MathJax Integration Styles
 *----------------------------------------------*/

/* General styling for MathJax-rendered content */
.post-page .post-content .mjx-chtml {
    font-size: 1.2rem; /* Slightly larger for readability */
    color: #333; /* Consistent text color */
}

.post-page .post-content .mjx-chtml .mjx-math {
    margin: 20px auto; /* Center alignment and spacing */
    display: block; /* Display equations as block elements */
}

/*----------------------------------------------
 * Bibliography Section
 *----------------------------------------------*/

/* Styling for ordered lists directly following a heading */
.post-page .post-content h3 + ol {
    margin-top: 20px; /* Space above the list */
    padding-left: 20px; /* Indentation for list items */
}

.post-page .post-content h3 + ol li {
    font-size: 0.95rem; /* Slightly smaller font for bibliography */
    color: #555; /* Lighter text color for distinction */
}

/*----------------------------------------------
 * Footer Styles
 *----------------------------------------------*/

/* Footer section styling */
footer {
    text-align: center; /* Centered text */
    padding: 10px 0; /* Vertical spacing */
    background-color: #333; /* Dark background for contrast */
    color: #fff; /* White text for readability */
}

footer p {
    font-size: 0.9rem; /* Smaller font for footer text */
    margin: 0; /* Remove margin */
}

/*----------------------------------------------
 * Dark Mode Styles for Post Page
 *----------------------------------------------*/

 @media (prefers-color-scheme: dark) {
    /* General dark mode background and text color adjustments */
    .post-page {
        background-color: #1e1e1e; /* Dark background for the page */
        color: #e0e0e0; /* Light text color for readability */
    }

    /* Wrapper styling adjustments for dark mode */
    .post-page .post-wrapper {
        background-color: #2a2a2a; /* Slightly lighter dark background */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Softer shadow effect */
        border: 1px solid #444; /* Subtle border for separation */
    }

    /* Adjustments for the blog post content */
    .post-page .blog-post {
        color: #dcdcdc; /* Softer light text */
    }

    /* Meta information in dark mode */
    .post-page .post-meta {
        color: #aaaaaa; /* Muted light gray for meta text */
    }

    .post-page .post-meta strong {
        color: #ffffff; /* Bright white for emphasized meta details */
    }

    /* Separator styling for dark mode */
    .post-page .meta-separator {
        border-top: 2px solid #555; /* Darker gray separator */
    }

    /* Adjustments for the main post content */
    .post-page .post-content {
        color: #e0e0e0; /* Light text color */
    }

    .post-page .post-content h3 {
        color: #4dabf7; /* Soft blue for headings */
    }

    .post-page .post-content em {
        color: #cccccc; /* Slightly muted light gray for italic text */
    }

    /* MathJax styling in dark mode */
    .post-page .post-content .mjx-chtml {
        color: #e0e0e0; /* Light text color for equations */
    }

    /* Bibliography section adjustments */
    .post-page .post-content h3 + ol li {
        color: #bdbdbd; /* Muted light gray for bibliography items */
    }

    /* Footer adjustments for dark mode */
    footer {
        background-color: #111; /* Deep dark background for footer */
        color: #888; /* Muted light gray text */
    }

    footer p {
        color: #bbb; /* Slightly brighter light gray for footer text */
    }
}