/* Custom styles for blog post content to improve readability and aesthetics */

/* Apply a clean, readable font to the article content */
.prose {
    font-family: 'Inter', sans-serif;
    color: #374151; /* Tailwind's gray-700 */
    line-height: 1.75;
}

/* Style for main headings (h2) within the article */
.prose h2 {
    font-size: 1.875rem; /* 30px */
    font-weight: 800;
    letter-spacing: -0.025em;
    margin-top: 2.5em;
    margin-bottom: 1em;
    border-bottom: 1px solid #e5e7eb; /* Tailwind's gray-200 */
    padding-bottom: 0.25em;
    /* NEW: Add scroll margin for ToC links */
    scroll-margin-top: 5rem; 
}

/* Style for subheadings (h3) */
.prose h3 {
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    margin-top: 2em;
    margin-bottom: 0.75em;
}

/* Style for standard paragraphs */
.prose p {
    margin-bottom: 1.25em;
    font-size: 1.125rem; /* 18px */
}

/* Style for links within the article */
.prose a {
    color: #166534; /* Tailwind's green-800 */
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease-in-out;
}

.prose a:hover {
    color: #15803d; /* Tailwind's green-700 */
    text-decoration: underline;
}

/* Style for bulleted and numbered lists */
.prose ul, .prose ol {
    margin-left: 1.5rem;
    margin-bottom: 1.25em;
}

.prose li {
    padding-left: 0.5rem;
    margin-bottom: 0.5em;
}

/* Style for blockquotes to make them stand out */
.prose blockquote {
    margin-left: 0;
    margin-right: 0;
    padding: 1rem 1.5rem;
    border-left: 4px solid #16a34a; /* Tailwind's green-600 */
    background-color: #f0fdf4; /* Tailwind's green-50 */
    font-style: italic;
    font-size: 1.125rem;
    color: #1f2937; /* Tailwind's gray-800 */
}

.prose blockquote p {
    margin-bottom: 0;
}