/*
Theme Name: Enfold Child
Description: A child theme of Enfold
Author: Kriesi
Author URI: https://kriesi.at
Template: enfold
Version: 1.0.0
Theme URI: https://kriesi.at/themes/enfold/
*/

/* ==========================================================================
   CNN-Style Professional Left Date Badge Feed Layout
   ========================================================================== */

/* Outer Article Container Card */
#top .template-blog .post-entry.bloglist-excerpt {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important; /* Stretch badge to card height */
    gap: 20px !important; /* Space between badge and content */
    padding: 0 !important; /* Flush borders */
    border: 1px solid #e2e8f0 !important;
    border-left: none !important; /* Removed outer left border since we have the left badge */
    margin: 0 0 16px 0 !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    clear: both !important;
    text-align: left !important;
    overflow: hidden !important; /* Crop badge corners */
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important; /* For absolute overlay link */
    cursor: pointer !important;
}

/* Pronounced Hover Floating Effect */
#top .template-blog .post-entry.bloglist-excerpt:not(.single-post-header-card):hover {
    background-color: #ffffff !important;
    border-color: #0e6eb8 !important; /* Highlight border with brand blue */
    box-shadow: 0 12px 28px rgba(14, 110, 184, 0.1) !important; /* Large soft floating shadow */
    transform: translateY(-5px) !important; /* Float up 5px */
}

/* Make entire card clickable by stretching the title anchor pseudo-element */
#top .template-blog .post-entry.bloglist-excerpt:not(.single-post-header-card) .post-title.entry-title a::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10 !important; /* Cover entire card */
}

/* Single post header card static styles */
#top .template-blog .post-entry.bloglist-excerpt.single-post-header-card {
    margin-bottom: 24px !important;
}
#top .template-blog .post-entry.bloglist-excerpt.single-post-header-card:hover {
    transform: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    border-color: #e2e8f0 !important;
}

/* Force left-alignment and 100% width for all child elements in content */
#top .template-blog .post-entry.bloglist-excerpt .entry-content-wrapper * {
    text-align: left !important;
    float: none !important;
    max-width: 100% !important;
}

/* Custom Left Date Badge (Flush with borders) */
#top .template-blog .post-entry.bloglist-excerpt .cnn-date-badge {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #0e6eb8 !important; /* Brand Blue */
    color: #ffffff !important; /* White Font */
    width: 96px !important;
    min-width: 96px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    align-self: stretch !important; /* Stretch vertically */
    border-radius: 0 !important; /* Let overflow:hidden handle card corners */
    font-family: Georgia, Garamond, "Times New Roman", Times, serif !important; /* Serif font matching oldstyle figures */
    font-variant-numeric: oldstyle-nums !important; /* Render hanging numbers */
    font-feature-settings: "onum" 1 !important;
    border: none !important;
}

#top .template-blog .post-entry.bloglist-excerpt .cnn-date-year {
    font-size: 21px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    letter-spacing: 0.5px !important;
}

#top .template-blog .post-entry.bloglist-excerpt .cnn-date-divider {
    display: block !important;
    width: 32px !important;
    height: 1px !important;
    background-color: rgba(255, 255, 255, 0.4) !important;
    margin: 8px 0 !important;
    border: none !important;
}

#top .template-blog .post-entry.bloglist-excerpt .cnn-date-day {
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Hide default delimiters, read-more link, meta-infos, and spacing borders */
#top .template-blog .post-entry.bloglist-excerpt .post_delimiter,
#top .template-blog .post-entry.bloglist-excerpt .post-meta-infos,
#top .template-blog .post-entry.bloglist-excerpt .read-more-link,
#top .template-blog .post-entry.bloglist-excerpt .av-vertical-delimiter,
#top .template-blog .post-entry.bloglist-excerpt .hr,
#top .template-blog .post-entry.bloglist-excerpt .blog-meta {
    display: none !important;
}

/* Reset containers styling and force full-width */
#top .template-blog .post-entry.bloglist-excerpt .entry-content-header,
#top .template-blog .post-entry.bloglist-excerpt .entry-content {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Content Layout Wrapper */
#top .template-blog .post-entry.bloglist-excerpt .entry-content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 8px !important; /* Tight, readable spacing */
    padding: 20px 24px 20px 0 !important; /* Padding only on right side */
    margin: 0 !important;
    text-align: left !important;
    flex: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Headline / Title */
#top .template-blog .post-entry.bloglist-excerpt .post-title.entry-title {
    font-size: 18px !important; /* Sleek compact header */
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Single post header card specific h1 title size */
#top .template-blog .post-entry.bloglist-excerpt.single-post-header-card .post-title.entry-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    color: #0f172a !important;
}

#top .template-blog .post-entry.bloglist-excerpt .post-title.entry-title a {
    color: #1e293b !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

#top .template-blog .post-entry.bloglist-excerpt .post-title.entry-title a:hover {
    color: #0e6eb8 !important;
}

/* Excerpt Preview Text */
#top .template-blog .post-entry.bloglist-excerpt .entry-content p {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #475569 !important;
    margin: 0 !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ==========================================================================
   Single Post Clean Modern Custom Layout
   ========================================================================== */

/* Hide default blog-meta column/pencil icon on single posts */
.single-post .blog-meta,
.single-post .post_author_timeline,
.single-post .post_delimiter {
    display: none !important;
}

/* Category kicker above title */
.single-post .single-post-header-card .blog-categories {
    display: inline-block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: #0e6eb8 !important;
    margin-bottom: 6px !important;
}

.single-post .single-post-header-card .blog-categories a {
    color: #0e6eb8 !important;
    text-decoration: none !important;
}

/* Content block styling (outside of the header card) */
.single-post .entry-content:not(.cnn-news-summary) {
    font-size: 16px !important;
    line-height: 1.85 !important;
    color: #334155 !important;
    margin: 24px 0 !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.single-post .entry-content:not(.cnn-news-summary) p {
    font-size: 16px !important;
    line-height: 1.85 !important;
    color: #334155 !important;
    margin: 0 0 16px 0 !important;
    text-align: left !important;
}

/* AddToAny share bar styling */
.addtoany_share_save_container {
    margin-top: 40px !important;
    padding-top: 24px !important;
    border-top: 1px solid #e2e8f0 !important;
    clear: both !important;
    text-align: left !important;
}

.addtoany_share_save_container .a2a_kit {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 16px !important;
}

.addtoany_header {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    margin: 0 0 12px 0 !important;
    border: none !important;
}

/* Responsive adjustment */
@media only screen and (max-width: 767px) {
    #top .template-blog .post-entry.bloglist-excerpt {
        flex-direction: column !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    #top .template-blog .post-entry.bloglist-excerpt .cnn-date-badge {
        width: 100% !important;
        height: auto !important;
        padding: 12px !important;
        flex-direction: row !important;
        gap: 12px !important;
    }
    #top .template-blog .post-entry.bloglist-excerpt .cnn-date-divider {
        width: 1px !important;
        height: 14px !important;
        margin: 0 !important;
    }
    #top .template-blog .post-entry.bloglist-excerpt .entry-content-wrapper {
        padding: 16px 18px !important;
    }
    #top .template-blog .post-entry.bloglist-excerpt .post-title.entry-title {
        font-size: 16px !important;
    }
    #top .template-blog .post-entry.bloglist-excerpt.single-post-header-card .post-title.entry-title {
        font-size: 20px !important;
    }
}