:root {
    /* Extracted Light/Mid Tones for Blogs */
    --b-ice-blue: #E5EDF0; /* Very light shade to start */
    --b-light-blue: #AFCCD5; /* Pale Blue/Grey */
    --b-mid-slate: #8EA4B0; /* Mid-tone derived for smooth gradient */
    --b-slate-blue: #36486C;
    --b-golden: #F2C36F; /* Keep the golden accent */

    /* Extracted Dark Tones for Blogs */
    --b-deep-navy: #263251;
    --b-charcoal: #25262A;
}

/* --------------------------------------
   1. HEADER NAV OVERRIDE
-------------------------------------- */
.header-nav {
    background: linear-gradient(to bottom, rgba(229, 237, 240, 0.9) 0%, transparent 100%) !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
.header-nav .nav-link {
    color: var(--b-deep-navy) !important;
}

/* --------------------------------------
   2. HERO SECTION (.blogs-hero)
-------------------------------------- */
.blogs-hero {
    background: 
        /* Bottom fade into Ice Blue (lighter shade) */
        linear-gradient(to bottom, transparent 70%, var(--b-ice-blue) 100%),
        /* Right fade to protect text */
        linear-gradient(to left, var(--b-ice-blue) 0%, var(--b-ice-blue) 35%, rgba(229, 237, 240, 0) 80%),
        url('../assets/blogs_page_hero.png') left center / cover no-repeat !important;
}

/* Force text visibility if JS fails */
.blogs-hero .disperse-text {
    opacity: 1 !important;
    filter: blur(0) !important;
    transform: scale(1) !important;
    letter-spacing: normal !important;
}

/* Align content to the left */
.blogs-hero-content, .blogs-hero-text-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left !important;
}

.blogs-hero-heading,
.blogs-hero-desc {
    color: var(--b-deep-navy) !important;
}
.blogs-hero-subheading {
    color: var(--b-golden) !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
}

/* --------------------------------------
   3. MAIN CONTENT (Compendium)
-------------------------------------- */
main {
    /* Smooth waterfall from Ice Blue -> Light Blue -> Mid Slate */
    background: linear-gradient(180deg, var(--b-ice-blue) 0%, var(--b-light-blue) 50%, var(--b-mid-slate) 100%) !important;
}
.section-inner h2, .section-inner p, .section-inner .eyebrow {
    color: var(--b-deep-navy) !important;
}
.section-inner .eyebrow {
    color: var(--b-golden) !important;
}

/* --------------------------------------
   4. CATEGORY BAR
-------------------------------------- */
.cat-btn {
    color: var(--b-deep-navy) !important;
    background: transparent !important;
    border: 2px solid #C8A14A !important;
    border-radius: 50px !important;
    font-size: 0.75rem !important;
    font-weight: 600;
    padding: 0.6rem 1.4rem !important;
    width: max-content !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}
.cat-btn.active, .cat-btn:hover {
    background: var(--b-deep-navy) !important;
    color: var(--b-ice-blue) !important;
    border-color: var(--b-deep-navy) !important;
}

/* --------------------------------------
   5. POST CARDS & FEATURED POST
-------------------------------------- */
.featured-post, .post-card {
    position: relative !important;
    isolation: isolate !important;
    margin-top: 1.5rem !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    clip-path: none !important;
    border-radius: 20px !important;
    outline: none !important;
}

.featured-post::before, .post-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 20px !important;
    clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 40px 100%, 0 calc(100% - 40px)) !important;
    z-index: -1;
    pointer-events: none;
    box-shadow: 0 10px 40px rgba(38, 50, 81, 0.08) !important;
}

.featured-post::after, .post-card::after {
    content: "";
    position: absolute;
    top: -11px; left: -11px; right: -11px; bottom: -11px;
    border: 2px solid #C8A14A !important;
    border-radius: 31px !important;
    clip-path: polygon(0 0, calc(100% - 51px) 0, 100% 51px, 100% 100%, 51px 100%, 0 calc(100% - 51px)) !important;
    z-index: -2;
    pointer-events: none;
}
.featured-post:hover, .post-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: none !important;
    filter: drop-shadow(0 20px 30px rgba(38, 50, 81, 0.15)) !important;
}

/* Image wrappers hold the mask and filter so they don't break on hover zoom */
.post-card-image, .featured-post-image {
    border-radius: 20px !important;
    overflow: hidden !important;
    position: relative;
    /* Soft feathered edges via mask */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%), 
                        linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%), 
                linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-composite: intersect;
    
    /* Original styling without distortion */
    filter: sepia(10%) contrast(1.04) !important;
}

/* The actual image should just fill the wrapper and scale, NO masks */
.post-card-image img, .featured-post-image img {
    border-radius: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    filter: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

.featured-title, .post-card-title, .post-excerpt, .post-card-excerpt, .post-cat, .post-meta {
    color: var(--b-deep-navy) !important;
}
.read-link {
    color: #B8860B !important;
}

/* --------------------------------------
   6. CONVICTIONS (Six Categories)
-------------------------------------- */
.blogs-convictions-section {
    background: var(--b-mid-slate) !important;
}
.blogs-card {
    background: transparent !important; /* Blend completely with the background */
    border: 1px solid rgba(37, 38, 42, 0.05) !important;
    border-radius: 20px !important;
}
.blogs-card-text {
    color: var(--b-deep-navy) !important;
    transition: color 0.4s ease;
}
.blogs-card-title, .blogs-inline-16, .blogs-inline-20, .blogs-inline-24, .blogs-inline-28, .blogs-inline-32, .blogs-inline-36 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(3, 23, 37, 0.35); /* Subtle dark shadow for contrast */
    transition: color 0.4s ease, text-shadow 0.4s ease;
}
.blogs-card:hover .blogs-card-text {
    color: #ffffff !important;
}
.blogs-card:hover .blogs-card-title, 
.blogs-card:hover .blogs-inline-16, 
.blogs-card:hover .blogs-inline-20, 
.blogs-card:hover .blogs-inline-24, 
.blogs-card:hover .blogs-inline-28, 
.blogs-card:hover .blogs-inline-32, 
.blogs-card:hover .blogs-inline-36 {
    color: #C89B3C !important;
    text-shadow: none !important;
}
.blogs-roman-watermark {
    color: rgba(200, 155, 60, 0.15) !important; /* Golden and visible normally */
}
.blogs-card:hover .blogs-roman-watermark {
    color: rgba(200, 155, 60, 0.25) !important; /* Slightly more visible on hover */
}
.gold-rule {
    background: var(--b-golden) !important;
}

/* Image blending and border-radius removal */
.post-card-image, .featured-post-image,
.post-card-image img, .featured-post-image img {
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}
.post-card-image img, .featured-post-image img {
    -webkit-mask-image: radial-gradient(ellipse at center, black 70%, transparent 100%) !important;
    mask-image: radial-gradient(ellipse at center, black 70%, transparent 100%) !important;
}

/* Force perfectly even column widths regardless of content */
.posts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 1024px) {
    .posts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 600px) {
    .posts-grid {
        grid-template-columns: 1fr !important;
    }
}

/* --------------------------------------
   7. FOOTER BLEND
-------------------------------------- */
.new-footer {
    background-blend-mode: normal !important;
    background-image: 
        linear-gradient(to bottom, var(--b-mid-slate) 0%, rgba(142, 164, 176, 0) 30%),
        linear-gradient(135deg, rgba(37, 38, 42, 0.4) 0%, rgba(37, 38, 42, 0.8) 100%), 
        url('../assets/blogs_page_footer.png') !important;
    background-color: var(--b-deep-navy) !important;
    background-size: 100% 100%, 100% 100%, cover !important; /* Cover prevents shrinking */
    background-position: center 120% !important; /* Pushes image up from the bottom */
    background-repeat: no-repeat !important;
    box-shadow: inset 0 20px 40px -10px var(--b-mid-slate) !important;
}

.footer-overlay {
    display: none !important; /* using the image background directly */
}

/* Invert footer text for contrast against navy */
.huge-watermark {
    color: rgba(175, 204, 213, 0.12) !important; /* Standardized 12% opacity */
}

/* --------------------------------------
   8. MODAL SCROLLBAR FIX
-------------------------------------- */
.post-modal::-webkit-scrollbar-track {
    background-color: transparent !important;
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}


/* Global Unified Footer Typography & Social Icons */
.new-footer h2, .new-footer h3, .new-footer h4 { color: #ffffff !important; }
.new-footer p, .new-footer a, .new-footer li { color: #ffffff !important; font-size: 1.05rem !important; }
.new-footer a:hover { color: var(--c-golden, #C8A14A) !important; }
.new-footer p.sub-credit { font-size: 0.95rem !important; opacity: 0.8; }
.new-footer .social-icons a { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.4) !important; background: transparent !important; }
.new-footer .social-icons a.social-instagram:hover { color: #ffffff !important; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; border-color: transparent !important; }
.new-footer .social-icons a.social-facebook:hover { color: #ffffff !important; background: #1877F2 !important; border-color: #1877F2 !important; }
.new-footer .social-icons a.social-twitter:hover { color: #ffffff !important; background: #000000 !important; border-color: #000000 !important; }
.new-footer .social-icons a.social-linkedin:hover { color: #ffffff !important; background: #0A66C2 !important; border-color: #0A66C2 !important; }
.new-footer .social-icons a.social-youtube:hover { color: #ffffff !important; background: #FF0000 !important; border-color: #FF0000 !important; }
.new-footer .social-icons a.social-whatsapp:hover { color: #ffffff !important; background: #25D366 !important; border-color: #25D366 !important; }
.new-footer .social-icons a.social-gmail:hover { color: #ffffff !important; background: #D44638 !important; border-color: #D44638 !important; }