/*
 * fcm-blog-custom.css
 * Full Circle Natural Medicine — Blog Layout Polish & Image Hover Animations
 * Loaded via functions.php, safe across Salient theme updates.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   1. IMAGE HOVER ANIMATIONS
   Applies to: post featured images on blog archive, single post inline images,
   and any .vc_column_text img (WPBakery content area)
   ───────────────────────────────────────────────────────────────────────────── */

/* Wrapper for archive card images */
.blog-card .featured-image-wrap,
.nectar-post-grid-item .featured-image,
article.post .nectar-post-header-featured-image,
.blog_next_prev_buttons .nav-image,
.nectar-recent-posts-with-text .featured-image {
    overflow: hidden;
    border-radius: 6px;
}

/* ── Zoom + brightness lift on hover ── */
.blog-card .featured-image-wrap img,
.nectar-post-grid-item .featured-image img,
.blog_next_prev_buttons .nav-image img,
.nectar-recent-posts-with-text .featured-image img {
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.45s ease;
    will-change: transform, filter;
}

.blog-card:hover .featured-image-wrap img,
.nectar-post-grid-item:hover .featured-image img,
.blog_next_prev_buttons .nav-image:hover img,
.nectar-recent-posts-with-text li:hover .featured-image img {
    transform: scale(1.06);
    filter: brightness(1.05);
}

/* ── Single post & WPBakery inline images ── */
.vc_column_text img,
.post-content img,
.entry-content img,
article.post img:not(.avatar):not(.emoji) {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.4s ease,
                filter 0.4s ease;
    border-radius: 6px;
    will-change: transform, box-shadow;
    display: block;
    margin: 1.5em auto;
    max-width: 100%;
    height: auto;
}

.vc_column_text img:hover,
.post-content img:hover,
.entry-content img:hover,
article.post img:not(.avatar):not(.emoji):hover {
    transform: scale(1.025) translateY(-3px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
    filter: brightness(1.03);
}

/* ── Featured image on single post ── */
.single-post .nectar-post-header-featured-image img {
    transition: filter 0.5s ease;
}
.single-post .nectar-post-header-featured-image:hover img {
    filter: brightness(1.05) saturate(1.1);
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. BLOG POST CONTENT LAYOUT POLISH
   Improves readability and spacing for imported content
   ───────────────────────────────────────────────────────────────────────────── */

/* Better body text sizing and line height */
.vc_column_text p,
.post-content p,
.entry-content p {
    font-size: 1.05rem;
    line-height: 1.85;
    margin-bottom: 1.4em;
    color: #3a3a3a;
}

/* Heading spacing inside posts */
.vc_column_text h2,
.post-content h2,
.entry-content h2 {
    margin-top: 2.2em;
    margin-bottom: 0.7em;
    font-size: 1.55rem;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.vc_column_text h3,
.post-content h3,
.entry-content h3 {
    margin-top: 1.8em;
    margin-bottom: 0.5em;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

/* List styling */
.vc_column_text ul,
.vc_column_text ol,
.post-content ul,
.post-content ol,
.entry-content ul,
.entry-content ol {
    padding-left: 1.8em;
    margin-bottom: 1.4em;
}

.vc_column_text li,
.post-content li,
.entry-content li {
    margin-bottom: 0.5em;
    line-height: 1.75;
}

/* Blockquote styling */
.vc_column_text blockquote,
.post-content blockquote,
.entry-content blockquote {
    border-left: 4px solid #8fbd9f;
    padding: 1em 1.5em;
    margin: 2em 0;
    background: #f7faf8;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #555;
}

/* Strong text */
.vc_column_text strong,
.post-content strong {
    color: #2a2a2a;
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. BLOG ARCHIVE CARD IMPROVEMENTS
   Subtle lift animation on card hover, cleaner title transitions
   ───────────────────────────────────────────────────────────────────────────── */

.blog-card,
.nectar-post-grid-item,
article.post.format-standard {
    transition: box-shadow 0.35s ease, transform 0.35s ease;
    border-radius: 8px;
}

.blog-card:hover,
.nectar-post-grid-item:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

/* Post title link hover */
.blog-card h2 a,
.nectar-post-grid-item h2 a,
.nectar-post-grid-item h3 a {
    transition: color 0.25s ease;
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. SINGLE POST LAYOUT — Max width & better reading experience
   ───────────────────────────────────────────────────────────────────────────── */

/* Constrain the WPBakery text column to a comfortable reading width */
.single-post .vc_column_text {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Ensure images inside posts don't overflow on mobile */
@media (max-width: 767px) {
    .vc_column_text img,
    .post-content img,
    .entry-content img {
        width: 100% !important;
        height: auto !important;
        border-radius: 4px;
    }

    .single-post .vc_column_text {
        max-width: 100%;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   5. SMOOTH PAGE TRANSITIONS & FOCUS STATES
   ───────────────────────────────────────────────────────────────────────────── */

a {
    transition: color 0.2s ease, opacity 0.2s ease;
}

/* Better focus ring for accessibility */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #8fbd9f;
    outline-offset: 3px;
    border-radius: 3px;
}