/* Styles for the blog listing page */
.blog-list-item {
    border-bottom: 1px solid var(--border-color); /* A slightly darker border for visibility */
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

.blog-list-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.blog-list-title a {
    text-decoration: none;
    color: var(--text-primary); /* Light color to stand out on dark background */
}

.blog-list-title a:hover {
    text-decoration: underline;
}

.blog-list-date {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    font-style: italic;
}

.blog-list-summary {
    margin-bottom: 1rem;
}

.read-more {
    text-decoration: none;
    font-weight: bold;
    color: var(--accent); /* A bright link color */
}

.read-more:hover {
    text-decoration: underline;
}

/* Styles for individual blog post pages */
.main-blog .blog-title {
    margin-bottom: 0.5rem;
}

.main-blog .blog-date {
    color: var(--text-secondary);
    font-style: italic;
    margin-bottom: 1.5rem;
}

.main-blog .blog-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Optional: adds rounded corners */
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Style for the "Back to Blog" link on individual posts */
.back-to-blog {
    display: inline-block;
    margin-top: 2rem;
    text-decoration: none;
    font-weight: bold;
    color: var(--accent); /* A bright link color */
}

.back-to-blog:hover {
    text-decoration: underline;
}