/**
 * Blog post look — solid blocks instead of pastel tinted boxes.
 *
 * Post bodies are stored in the database with inline styles (green
 * "Key Takeaways", yellow "Pro Tip", light-blue reference boxes, dark
 * gradient CTAs with pink buttons). The attribute selectors below restyle
 * those boxes without editing any post. !important is needed to beat the
 * inline style attributes.
 */

/* ── Page chrome ─────────────────────────────── */
.breadcrumb-bar { background: var(--cream); border-bottom: none; }
.article-card h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 4.6vw, 3.2rem); letter-spacing: -0.005em; color: var(--navy); }
.article-content h2 { font-family: var(--font-display); font-size: 2rem; letter-spacing: -0.005em; color: var(--navy); }
.article-content h3 { color: var(--navy); }
.badge-row .badge { font-family: var(--font-sans); font-weight: 700; border-radius: 999px; padding: .25rem .7rem; }
.badge-exam { background: var(--blue-600); color: #fff; box-shadow: none; }
.badge-topic { background: var(--navy); color: #fff; }
.article-meta { font-family: var(--font-sans); }
.article-excerpt { border-color: var(--line); }

.article-content blockquote { background: var(--blue-600); border: none; border-radius: 16px; color: #fff; padding: 1.25rem 1.5rem; }
.article-content blockquote p, .article-content blockquote strong, .article-content blockquote a { color: #fff; }

.article-content table { border: 1px solid var(--line); border-radius: 16px; }
.article-content thead th { background: var(--navy); color: #fff; font-size: 13px; font-weight: 600; border-bottom: none; }
.article-content tbody tr:hover { background: var(--blue-50); }

.bp-mid-cta { background: var(--navy); border: none; border-radius: 16px; padding: 1.4rem 1.5rem; }
.article-content p.bp-mid-cta-title { color: #fff; }
.article-content p.bp-mid-cta-sub { color: #cdd8ea; }

.inline-cta { background: var(--blue-600); border: none; border-radius: 16px; padding: 1.75rem; }
.inline-cta h3 { color: #fff; }
.inline-cta p { color: #e1e9f8; }
.inline-cta .btn-primary { background: #fff; border-color: #fff; color: var(--blue-700); }
.inline-cta .btn-outline, .inline-cta .btn-secondary { background: transparent; border-color: #fff; color: #fff; }

.topic-cta { border: none; border-radius: 16px; box-shadow: var(--shadow-lg); }
.topic-cta-top { background: var(--navy); }
.topic-cta-top h3 { font-family: var(--font-display); font-size: 1.7rem; }

.related-section h2 { font-family: var(--font-display); font-size: 1.8rem; }
.related-grid { gap: 1rem; background: none; border: none; border-radius: 0; overflow: visible; }
.related-card { border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.related-card:hover { background: #fff; box-shadow: var(--shadow-lg); }
.related-card-banner-text, .related-read-time { font-family: var(--font-sans); font-weight: 700; }

.sidebar-card { border-color: var(--line); border-radius: 16px; }
.sidebar-cta { background: var(--navy); }
.sidebar-cta-badge { background: var(--blue-600); border: none; }
.sidebar-cta-badge svg { color: #fff; }
.sidebar-cta p { color: #cdd8ea; }
.sidebar-section-title { font-family: var(--font-sans); font-weight: 700; letter-spacing: .1em; }

.paywall-gate { border-color: var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); }
.paywall-icon, .paywall-icon--upgrade { background: var(--blue-600); border: none; color: #fff; }
.share-btn { border-radius: 999px; }
.read-progress { height: 3px; }

/* ── Callout boxes inside posts ─────────────── */
.blog-article-content div[style*="#fefce8"],
.blog-article-content div[style*="#fef3c7"],
.blog-article-content div[style*="#fff7ed"],
.blog-article-content div[style*="#eff6ff"],
.blog-article-content div[style*="#f0f9ff"],
.blog-article-content div[style*="#f3f7ff"],
.blog-article-content div[style*="#e4ecfe"],
.blog-article-content div[style*="#f0fdf4"],
.blog-article-content div[style*="#dcfce7"] {
    border: none !important;
    border-radius: 16px !important;
    padding: 1.5rem 1.75rem !important;
}

/* Tips and warnings: solid blue */
.blog-article-content div[style*="#fefce8"],
.blog-article-content div[style*="#fef3c7"],
.blog-article-content div[style*="#fff7ed"] { background: var(--blue-600) !important; }

/* Takeaways, quick facts, worked examples: solid navy */
.blog-article-content div[style*="#eff6ff"],
.blog-article-content div[style*="#f0f9ff"],
.blog-article-content div[style*="#f3f7ff"],
.blog-article-content div[style*="#e4ecfe"],
.blog-article-content div[style*="#f0fdf4"],
.blog-article-content div[style*="#dcfce7"] { background: var(--navy) !important; }

.blog-article-content div[style*="#fefce8"] *,
.blog-article-content div[style*="#fef3c7"] *,
.blog-article-content div[style*="#fff7ed"] *,
.blog-article-content div[style*="#eff6ff"] *,
.blog-article-content div[style*="#f0f9ff"] *,
.blog-article-content div[style*="#f3f7ff"] *,
.blog-article-content div[style*="#e4ecfe"] *,
.blog-article-content div[style*="#f0fdf4"] *,
.blog-article-content div[style*="#dcfce7"] * { color: #fff !important; }

.blog-article-content div[style*="#fefce8"] h3,
.blog-article-content div[style*="#fef3c7"] h3,
.blog-article-content div[style*="#fff7ed"] h3,
.blog-article-content div[style*="#eff6ff"] h3,
.blog-article-content div[style*="#f0f9ff"] h3,
.blog-article-content div[style*="#f3f7ff"] h3,
.blog-article-content div[style*="#e4ecfe"] h3,
.blog-article-content div[style*="#f0fdf4"] h3,
.blog-article-content div[style*="#dcfce7"] h3 {
    font-family: var(--font-display) !important;
    font-size: 1.5rem !important;
    margin: 0 0 .6rem !important;
}
.blog-article-content div[style*="#f0fdf4"] li::marker,
.blog-article-content div[style*="#eff6ff"] li::marker,
.blog-article-content div[style*="#f0f9ff"] li::marker { color: var(--blue-300); }
.blog-article-content div[style*="#fefce8"] a,
.blog-article-content div[style*="#eff6ff"] a,
.blog-article-content div[style*="#f0fdf4"] a,
.blog-article-content div[style*="#f0f9ff"] a { text-decoration: underline !important; }

/* Practice questions inside posts: white cards, solid answer reveal */
.blog-article-content .question-block {
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-md);
}
.blog-article-content .question-block div[style*="#f0fdf4"],
.blog-article-content .question-block div[style*="#dcfce7"] {
    background: var(--success) !important;
    border-radius: 12px !important;
    padding: 1rem 1.25rem !important;
}
.blog-article-content .question-block div[style*="#e5e7eb"] { border: 2px solid var(--line) !important; border-radius: 12px !important; }

/* End-of-post CTA panels: solid blue, white button */
.blog-article-content div[style*="#0f172a"],
.blog-article-content div[style*="#111a2e"],
.blog-article-content div[style*="linear-gradient"] {
    background: var(--blue-600) !important;
    border: none !important;
    border-radius: 16px !important;
}
.blog-article-content div[style*="#0f172a"] h3,
.blog-article-content div[style*="#111a2e"] h3,
.blog-article-content div[style*="linear-gradient"] h3,
.blog-article-content div[style*="#0f172a"] p:first-child,
.blog-article-content div[style*="linear-gradient"] p:first-child {
    font-family: var(--font-display) !important;
    font-size: 1.9rem !important;
    color: #fff !important;
}
.blog-article-content div[style*="#0f172a"] p,
.blog-article-content div[style*="#111a2e"] p,
.blog-article-content div[style*="linear-gradient"] p { color: #e1e9f8 !important; }

/* Every inline pink / orange / old-blue button becomes a solid pill */
.blog-article-content a[style*="#e63363"],
.blog-article-content a[style*="#f97316"],
.blog-article-content a[style*="#dc2626"],
.blog-article-content a[style*="#1a56db"],
.blog-article-content a[style*="#1e56b3"] {
    background: var(--blue-600) !important;
    color: #fff !important;
    border: 2px solid var(--blue-600) !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
}
.blog-article-content div[style*="#0f172a"] a[style*="background"],
.blog-article-content div[style*="#111a2e"] a[style*="background"],
.blog-article-content div[style*="linear-gradient"] a[style*="background"] {
    background: #fff !important;
    border-color: #fff !important;
    color: var(--blue-700) !important;
}

/* Plain light-grey panels and striped table rows */
.blog-article-content div[style*="#f7f9fb"],
.blog-article-content div[style*="#f8fafc"],
.blog-article-content div[style*="#f0f3f7"] { background: var(--cream) !important; border-color: var(--line) !important; border-radius: 16px !important; }
.blog-article-content tr[style*="#f8fafc"] { background: var(--cream) !important; }