/* blog.css - blog styles (base.css master; modular imports) */

@import url('blog/layout.css');
@import url('blog/article.css');
@import url('blog/index.css');

/* Blog-specific overrides and glue */
main {
    min-height: 100dvh;
}

footer {
    margin-top: 4rem;
}

.back-link {
    display: inline-block;
    text-decoration: none;
    color: var(--color-text);
    margin-bottom: var(--space-lg);
    padding: var(--space-sm) 0;
    font-size: var(--font-size-sm);
}

.back-link:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .blog-layout {
        flex-direction: column;
    }

    .blog-side-nav {
        position: static;
        width: 100%;
        max-height: none;
        padding: var(--space-lg) max(var(--space-md), 4dvw) var(--space-md);
        border-bottom: 1px solid var(--color-border-light);
    }

    .side-nav-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .side-nav-list a {
        font-size: var(--font-size-2xs);
    }

    .blog-main {
        padding: var(--space-md) max(var(--space-md), 4dvw) var(--space-xl);
    }

    .page-header h1 {
        font-size: 1.1rem;
    }

    .article-title {
        font-size: 1.25rem;
    }

    .article-content {
        font-size: 0.95rem;
    }

    .article-content .lead::first-letter {
        font-size: 2.75rem;
    }
}