/**
 * File: blog.css
 * Purpose: Styles for blog grid layout, image aspect ratio control, blog navigation links, and post hover effects.
 * Usage: Applied to blog index/archive pages or blog modules using `.pa-blog-image-16-9`, `#blog-nav`, and `.et_pb_salvattore_content`.
 * Dependencies: Divi (for blog module structure, ET theme classes)
 *
 * Notes:
 * - Uses CSS variables for full color control
 * - Enforces a 16:9 image aspect ratio for `.pa-blog-image-16-9`
 * - Includes hover enhancements for blog cards and "Read More" links
 */


/* -------------------------- */
/* ---- Scoped Variables ---- */
/* -------------------------- */

/* These are not set or tested since the restructure, due to the component not being in use. Edit before implementing. */
.et_pb_blog_grid,
#blog-nav
{
    --blog-nav-link-color: var(--black);
    --blog-nav-link-hover-color: var(--brand-accent-color);
    --blog-read-more-link-hover-color: var(--brand-accent-color);
    --blog-post-content-bg-color: var(--white);
    --blog-post-content-border-color: var(--gray-medium);
    --blog-post-image-border-color: var(--gray-medium);
    --blog-post-hover-bg-color: var(--white);
    --blog-post-hover-border-color: var(--brand-accent-color);
}

/* -------------------------- */

/* --- Blog Catalog Title --- */
.pa-blog-image-16-9 .et_pb_blog_grid h2 {
    font-size:16px!important;
}

/* --- Blog Image: Landscape 16:9 Aspect Ratio --- */
.pa-blog-image-16-9 .entry-featured-image-url {
    padding-top: 56.25%!important;
    display: block!important;
}

.pa-blog-image-16-9 .entry-featured-image-url img {
    position: absolute!important;
    height: 100%!important;
    width: 100%!important;
    top: 0!important;
    left: 0!important;
    right: 0!important;
    bottom: 0!important;
    object-fit: cover!important;
}


/* --- Start Blog Navigation Styles --- */
#blog-nav a 
{
    color:var(--blog-nav-link-color)!important;
    font-weight: 700!important;
    text-transform:uppercase!important;
    transition: all 300ms ease;
    text-decoration: underline solid var(--blog-nav-link-underline-color) !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 7px !important;

}

#blog-nav a:hover
{
    color:var(--blog-nav-link-hover-color)!important;
    text-decoration: underline solid var(--blog-nav-link-hover-underline-color) !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 7px !important;
}

/* --- End Blog Navigation Styles --- */


/* --- Read More Link Style --- */
a.more-link
{
    font-weight: 600!important;
}

a.more-link:hover
{
    color: var(--blog-read-more-link-hover-color)!important;
}


/* --- Start Blog Post Card Styles --- */
.et_pb_salvattore_content .et_pb_post:hover .more-link{
    color: var(--blog-read-more-link-hover-color)!important;
}

.et_pb_salvattore_content .et_pb_post{
    transition: all 500ms ease;
    background-color:var(--blog-post-content-bg-color);
    border: 1px solid var(--blog-post-content-border-color)!important;
}

.et_pb_salvattore_content .et_pb_post img{
    border: 1px solid var(--blog-post-image-border-color)!important;
}

.et_pb_salvattore_content .et_pb_post:hover{
    background-color:var(--blog-post-hover-bg-color);
    border: 1px solid var(--blog-post-hover-border-color)!important;
    }

.et_pb_salvattore_content .et_pb_post .et_overlay{
    border: 1px solid var(--blog-post-hover-border-color)!important;
}

/* --- End Blog Post Card Styles --- */