/* Custom styles for blog posts */

/* Limit content width for better readability */
article {
    max-width: 650px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Improve paragraph spacing */
article p {
    margin-bottom: 1.5em;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
}

/* Style for the first paragraph (lede) */
article > p:first-of-type {
    font-size: 1.2em;
    line-height: 1.5;
    margin-bottom: 1.8em;
}

/* Better heading spacing */
article h2 {
    margin-top: 2.5em;
    margin-bottom: 1em;
    font-weight: 700;
}

article h3 {
    margin-top: 2em;
    margin-bottom: 0.8em;
}

/* Improve blockquote styling */
article blockquote {
    border-left: 4px solid var(--border);
    margin: 2em 0;
    padding-left: 1.5em;
    font-style: italic;
    opacity: 0.9;
}

/* Better list spacing */
article ul, article ol {
    margin-bottom: 1.5em;
}

article li {
    margin-bottom: 0.5em;
}

/* Responsive design */
@media (max-width: 768px) {
    article {
        font-size: 16px;
        padding: 0 0.5rem;
    }
    
    article p {
        text-align: left;
        hyphens: none;
    }
}

/* Post metadata styling */
.post-meta {
    text-align: center;
    margin-bottom: 3em;
    color: var(--text-muted);
}

.post-meta h1 {
    margin-bottom: 0.5em;
}

.post-meta small {
    display: block;
    margin-top: 0.5em;
}

/* Drop cap for dramatic opening */
article > p:first-of-type::first-letter {
    float: left;
    font-size: 4em;
    line-height: 0.8;
    margin: 0.1em 0.1em 0 0;
    font-weight: 700;
}

/* Section dividers */
article hr {
    margin: 3em auto;
    width: 50%;
    opacity: 0.3;
}

/* Link styling within articles */
article a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

article a:hover {
    text-decoration-thickness: 2px;
}

/* Code blocks */
article pre {
    margin: 2em 0;
    padding: 1.5em;
    overflow-x: auto;
}

article code {
    font-size: 0.9em;
}

/* Pull quotes */
.pull-quote {
    font-size: 1.4em;
    line-height: 1.4;
    margin: 2em -2em;
    padding: 1em 0;
    border-top: 2px solid var(--border);
    border-bottom: 2px solid var(--border);
    text-align: center;
    font-style: italic;
}

@media (max-width: 768px) {
    .pull-quote {
        margin: 2em 0;
        font-size: 1.2em;
    }
}