/* Blog detail page styles — extracted from inline <style> in pages/blog-details.php */

/* ── Breadcrumb title responsive sizing ─────────────────────────────────── */

.rts-breadcrumb-area .title-area-left.center .title {
    font-size: var(--type-h2);
    line-height: var(--line-height-snug);
}

/* ── Article content heading hierarchy ──────────────────────────────────── */

.article-content h1 { font-size: var(--type-h2); line-height: 1.28; margin: 28px 0 14px; }
.article-content h2 { font-size: var(--type-h3); line-height: 1.34; margin: 24px 0 12px; }
.article-content h3 { font-size: var(--type-h4); line-height: 1.40; margin: 22px 0 10px; }
.article-content h4 { font-size: var(--type-h5); line-height: 1.45; margin: 18px 0  8px; }
.article-content h5 { font-size: var(--type-title-sm); line-height: 1.50; margin: 16px 0  8px; }
.article-content h6 { font-size: var(--type-body); line-height: 1.55; margin: 14px 0  8px; }

/* ── FAQ scroll anchors ──────────────────────────────────────────────────── */

.article-content .faq-section,
.article-content .faq-block,
.article-content .faq-wrapper,
.article-content [class*="faq"] {
    scroll-margin-top: 120px;
}

/* ── <details> accordion ─────────────────────────────────────────────────── */

.article-content details {
    border: 1px solid #e8edf3;
    border-radius: var(--radius-lg, 16px);
    background: #fff;
    box-shadow: 0 8px 22px rgba(29, 53, 87, 0.06);
    padding: 0 16px;
    margin: 12px 0;
}

.article-content details[open] {
    border-color: var(--brand-accent, #fd7801);
    box-shadow: 0 12px 26px rgba(253, 120, 1, 0.14);
}

.article-content details summary {
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: var(--type-title-sm);
    line-height: 1.45;
    color: #1f2937;
    padding: 16px 28px 16px 0;
    position: relative;
}

.article-content details summary::-webkit-details-marker {
    display: none;
}

.article-content details summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand-accent, #fd7801);
    font-size: var(--font-size-xl);
    font-weight: 800;
    line-height: 1;
}

.article-content details[open] summary::after {
    content: "-";
}

.article-content details > *:not(summary) {
    padding: 0 0 16px;
    color: #4b5563;
    font-size: var(--type-body);
    line-height: 1.75;
}

/* ── FAQ item cards ──────────────────────────────────────────────────────── */

.article-content .faq-item {
    border: 1px solid #e8edf3;
    border-radius: var(--radius-lg, 16px);
    background: #fff;
    padding: 16px 18px;
    margin: 12px 0;
    box-shadow: 0 8px 22px rgba(29, 53, 87, 0.06);
}

.article-content .faq-question {
    font-size: var(--type-title-sm);
    font-weight: 700;
    line-height: 1.45;
    color: #1f2937;
    margin-bottom: 8px;
}

.article-content .faq-answer {
    font-size: var(--type-body);
    line-height: 1.75;
    color: #4b5563;
    margin: 0;
}

/* ── Internal link injection ─────────────────────────────────────────────── */

.article-content a.internal-link-inline {
    color: var(--color-link, #1e3a8a);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}

/* ── Responsive breakpoints ──────────────────────────────────────────────── */

@media (max-width: 991px) {
    .rts-breadcrumb-area .title-area-left.center .title { font-size: var(--type-h3); }
    .article-content h1 { font-size: var(--type-h3); }
    .article-content h2 { font-size: var(--type-h4); }
    .article-content h3 { font-size: var(--type-h5); }
    .article-content h4 { font-size: var(--type-title-sm); }
}

@media (max-width: 576px) {
    .rts-breadcrumb-area .title-area-left.center .title { font-size: var(--type-h4); }
    .article-content h1 { font-size: var(--type-h4); }
    .article-content h2 { font-size: var(--type-h5); }
    .article-content h3 { font-size: var(--type-title-sm); }
    .article-content h4 { font-size: var(--type-body-lg); }
    .article-content details summary { font-size: var(--type-body-lg); }
}