/* Custom CSS for NoviceVibeCoder */

/* Add spacing between lists and headings */
ul + h3,
ol + h3 {
    margin-top: 2.5rem !important;
    padding-top: 0.5rem !important;
}

/* Header logo styling */
.site-logo,
.nav_brand img {
    height: 80px !important;
    width: auto !important;
    vertical-align: middle;
    max-width: none !important;
}

@media (max-width: 768px) {
    .site-logo,
    .nav_brand img {
        height: 60px !important;
    }
}

/* Adjust post card image sizes */
.article_thumb {
    height: 200px !important;
    min-height: 200px !important;
    background-size: cover !important;
    background-position: center !important;
}

/* For the first/featured article */
.grid-reverse .article_thumb {
    height: 300px !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .article_thumb {
        height: 150px !important;
        min-height: 150px !important;
    }
    
    .grid-reverse .article_thumb {
        height: 200px !important;
    }
}

/* Control the featured/thumbnail image at the top of posts */
.post_thumbnail {
    max-width: 600px !important;
    max-height: 300px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 2rem auto !important;
    object-fit: contain !important;
}

/* Control images in post content */
.post figure,
article figure,
main figure,
.post_inner figure {
    max-width: 600px !important;
    margin: 2rem auto;
    text-align: center;
}

.post figure img,
article figure img,
main figure img,
.post_inner figure img {
    max-width: 100% !important;
    max-height: 500px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

/* Override any width attributes */
figure[width] {
    max-width: 600px !important;
}

/* For smaller screens */
@media (max-width: 768px) {
    .post figure,
    article figure,
    main figure {
        max-width: 100%;
    }
}