/*
 * Tipografi isi postingan & halaman. Dipakai bersama oleh situs publik (.article-body)
 * dan isi editor TinyMCE di panel admin, agar tampilan saat menulis sama dengan hasilnya.
 * Warna mengikuti palet GKI di tailwind.config (site.blade.php).
 */
.article-body { color: #334155; font-size: 17px; line-height: 2rem; overflow-wrap: break-word; }
.article-body > * { margin-top: 0; margin-bottom: 0; }
.article-body > * + * { margin-top: 1.25rem; }

.article-body h2,
.article-body h3,
.article-body h4 { color: #0f172a; }
.article-body h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 800; letter-spacing: -0.025em; margin-top: 2.5rem; }
.article-body h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; margin-top: 2rem; }
.article-body h4 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; margin-top: 1.5rem; }
.article-body > h2:first-child,
.article-body > h3:first-child,
.article-body > h4:first-child { margin-top: 0; }

.article-body a { color: #1A5FA8; text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: #237DDA; }

.article-body ul { list-style: disc; padding-left: 1.5rem; }
.article-body ol { list-style: decimal; padding-left: 1.5rem; }
.article-body li { margin: 0; }
.article-body li + li { margin-top: 0.375rem; }

.article-body blockquote { margin-left: 0; margin-right: 0; border-left: 4px solid #FED63D; background: rgb(254 214 61 / 0.1); padding: 0.75rem 1rem 0.75rem 1.25rem; border-radius: 0 0.5rem 0.5rem 0; font-style: italic; color: #334155; }

.article-body img { display: block; max-width: 100%; height: auto; border-radius: 0.75rem; }
.article-body figure { margin-left: 0; margin-right: 0; max-width: 100%; }
.article-body figure img { margin: 0 auto; }
.article-body figcaption { font-size: 0.875rem; line-height: 1.25rem; color: #64748b; font-style: italic; margin-top: 0.5rem; text-align: center; }
.article-body iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 0.75rem; }

.article-body table { width: 100%; font-size: 0.875rem; line-height: 1.25rem; border-collapse: collapse; }
.article-body th,
.article-body td { border: 1px solid #e2e8f0; padding: 0.5rem 0.75rem; text-align: left; }
.article-body th { background: #f8fafc; font-weight: 600; }
.article-body hr { border: 0; border-top: 1px solid #e2e8f0; margin: 2rem 0; }