/* Custom CSS for improved layout and typography on 16:9 screens */
/* Simple approach - just widen content and improve typography */

/* Increase text size for better readability */
html {
    font-size: 16px !important; /* Reduced from 18px */
}

body {
    font-size: 1em !important;
    line-height: 1.6 !important;
}

/* Widen the main content container */
.page__inner-wrap {
    max-width: 1400px !important; /* Much wider than default ~800px */
    margin: 0 auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Make sidebar narrower to give more space to content */
.sidebar {
    width: 150px !important; /* Narrower sidebar */
}

/* Adjust content when sidebar is present */
.layout--single .page {
    width: calc(100% - 160px) !important; /* Account for narrower sidebar */
    padding-left: 1rem !important;
}

/* Make masthead wider */
.masthead__inner-wrap {
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

/* Improve content typography */
.page__content {
    max-width: none !important;
    font-size: 1em !important; /* Reduced from 1.1em */
    line-height: 1.6 !important; /* Reduced from 1.7 */
}

.page__content p,
.page__content li {
    font-size: 1em !important; /* Reduced from 1.1em */
    line-height: 1.6 !important; /* Reduced from 1.7 */
    margin-bottom: 1em !important; /* Reduced from 1.2em */
}

/* Increase heading sizes */
.page__content h1 {
    font-size: 1.5em !important; /* Reduced from 2.2em */
    margin-bottom: 0.8em !important;
}

.page__content h2 {
    font-size: 1.3em !important; /* Reduced from 1.8em */
    margin-bottom: 0.7em !important;
}

.page__content h3 {
    font-size: 1.1em !important; /* Reduced from 1.5em */
    margin-bottom: 0.6em !important;
}

/* Code blocks */
.page__content pre,
.page__content code {
    font-size: 1em !important;
}

/* Reduce spacing for blog post listings and archive items */
.archive__item {
    margin-bottom: 1em !important; /* Reduced spacing between blog posts */
}

.archive__item-title {
    margin-bottom: 0.3em !important; /* Tighter spacing after titles */
}

.archive__item-excerpt {
    margin-bottom: 0.5em !important; /* Tighter spacing after excerpts */
}

/* Reduce spacing for regular lists */
.page__content ul li,
.page__content ol li {
    margin-bottom: 0.3em !important; /* Much tighter list item spacing */
}

/* Reduce spacing between list items in post meta */
.page__meta p {
    margin-bottom: 0.2em !important;
}

/* Tighter spacing for post navigation and related posts */
.page__related .archive__item {
    margin-bottom: 0.8em !important;
}

/* Footer */
.page__footer {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

/* Mobile responsiveness */
@media (max-width: 80em) {
    .page__inner-wrap,
    .masthead__inner-wrap,
    .page__footer {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .sidebar {
        width: 100% !important;
    }
    
    .layout--single .page {
        width: 100% !important;
        padding-left: 1rem !important;
    }
    
    html {
        font-size: 16px !important;
    }
}