/* --- BLOG DETAIL PAGE SPECIFIC RULES --- */

/* Main Component Shell Box */
.content-card {
    border: none;
}

/* Image Hero Overlay Setup */
.bd-hero-wrapper {
    height: 440px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 100px rgba(0,0,0,0.2);
}

/* Dark gradient mask for the image base text readability protection */
.bd-hero-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%);
}

.bd-article-title {
    font-size: 1.85rem;
    line-height: 1.3;
    letter-spacing: -0.015em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* Category meta tags badge element customization */
.bd-meta-cat {
    font-size: 0.75rem !important;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Raw Inner Content Paragraph Formatter rules */
.dynamic-html-output p {
    font-size: 1rem;
    line-height: 1.65;
    /* color: #4a5568 !important; */
    margin-bottom: 1.5rem;
}

.dynamic-html-output h2, 
.dynamic-html-output h3 {
    color: #1a202c;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.dynamic-html-output h2 { font-size: 1.35rem; }
.dynamic-html-output h3 { font-size: 1.15rem; }

/* Dynamic list element controls inside raw articles */
.dynamic-html-output ul, 
.dynamic-html-output ol {
    padding-left: 1.25rem;
    margin-bottom: 1.5rem;
}

.dynamic-html-output li {
    font-size: 0.95rem;
    color: #4a5568;
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* --- FAQ SECTION CARD MODIFICATIONS (Image 3) --- */
.bd-faq-container {
    background-color: #f8fbff !important;
    border-color: #e2e8f0 !important;
}

.bi-faq-header {
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}

.bd-faq-item h3 {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
}

.bd-faq-answer p {
    margin-bottom: 0;
    line-height: 1.5;
}

/* Mobile Responsiveness adjustments */
@media (max-width: 768px) {
    .bd-hero-wrapper {
        height: 320px;
    }
    .bd-article-title {
        font-size: 1.4rem;
    }
}



.bg-light-blue{
    background-color: #f4f7fb;
    min-height: 100vh;
}

.blog-index-page{
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}