/*
 * public/css/article-body.css
 *
 * Padanan CSS dari App\Support\Ui untuk elemen semantik polos
 * (h2, p, img, blockquote/.callout, .step-item, dst) — dipakai untuk
 * menampilkan artikel yang isinya diimpor dari database (lihat
 * show.blade.php: {!! $article->content !!}, serta artikel_lead /
 * artikel_note / artikel_cta yang dikirim ulang sebagai
 * <x-slot:lead>/<x-slot:note>/<x-slot:extra>), sehingga tidak perlu
 * lagi referensi Blade `{{ $ui::... }}` di dalam konten tersimpan.
 *
 * Artikel lama yang masih berupa file .blade.php custom (pakai
 * $ui::... langsung, bukan lewat DB) tidak terpengaruh sama sekali
 * oleh file ini dan tetap jalan seperti biasa.
 *
 * PENTING SOAL SCOPING: class semantik seperti .callout, .article-h2,
 * .step-item, .kicker-label, .closing-panel, .feature-card, dkk SENGAJA
 * TIDAK di-scope di bawah ".article-body" — karena class-class ini juga
 * dipakai di artikel_lead/artikel_note/artikel_cta, yang dirender di
 * artikel-layout.blade.php DI LUAR <article class="article-body">
 * (note/lead di atas cover image, CTA di luar <article>). Hanya rule
 * untuk TAG POLOS (h2, p, ul/ol, img, a, strong) yang di-scope ketat ke
 * ".article-body", karena itu cuma berlaku untuk isi $slot utama.
 *
 * PENTING: file ini TIDAK otomatis ikut berubah kalau Ui.php diedit.
 * Tiap blok di bawah diberi komentar "sinkron dengan Ui::XXX" —
 * kalau constant itu diubah di Ui.php, cek & samakan juga di sini.
 * Constant yang dipakai di chrome layout (LOGO_BOX, CARD_HOVER, BADGE,
 * dll — bukan di $slot/lead/note/extra artikel) TIDAK perlu
 * disinkronkan ke sini karena tetap dirender langsung dari Ui.php.
 */

.article-body {
    color: #111827;
}

/* sinkron dengan Ui::SECTION_GAP ('mb-8' = 2rem) */
.article-body > * + * {
    margin-top: 2rem;
}

/* sinkron dengan Ui::MUTED_TEXT — HANYA <p> polos di dalam body utama */
.article-body p {
    color: #4b5563;
    line-height: 1.625;
}
.dark .article-body p {
    color: #d1d5db;
}

.article-body a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.article-body strong {
    font-weight: 600;
    color: inherit;
}

/* tidak ada constant Ui:: khusus untuk list — menyamakan warna dengan MUTED_TEXT */
.article-body ul,
.article-body ol {
    margin-left: 1.25rem;
    color: #4b5563;
}
.dark .article-body ul,
.dark .article-body ol {
    color: #d1d5db;
}
.article-body ul {
    list-style: disc;
}
.article-body ol {
    list-style: decimal;
}
.article-body li + li {
    margin-top: 0.375rem;
}

/* tidak ada constant Ui:: khusus — menyamakan gaya bingkai gambar cover di artikel-layout.blade.php */
.article-body img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    border: 1px solid #f3f4f6;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.dark .article-body img {
    border-color: #1f2937;
}

/* =========================================================================
 * Class semantik lintas-konteks (dipakai di content, artikel_lead,
 * artikel_note, MAUPUN artikel_cta) — TIDAK di-scope ke .article-body,
 * lihat catatan scoping di atas.
 * ========================================================================= */

/* sinkron dengan Ui::H2 / Ui::H2_LARGE — HANYA menyasar heading yang memang
   berasal dari {{ $ui::H2 }} / {{ $ui::H2_LARGE }} (diberi class ini oleh
   ArticleBladeParser), BUKAN semua tag <h2>. Heading yang ditulis manual
   dengan ukuran berbeda (mis. heading di dalam closing-panel yang literal
   pakai text-xl) sengaja tidak disentuh supaya ukurannya tidak ketimpa. */
.article-h2 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1rem;
}
.dark .article-h2 {
    color: #ffffff;
}

/* sinkron dengan Ui::CALLOUT — dipakai di content (mis. callout tengah
   artikel) MAUPUN artikel_note (NOTE sebelum cover image) */
.callout {
    border-radius: 1rem;
    background: #ecfdf5;
    border: 1px solid #d1fae5;
    padding: 1.25rem;
}
.dark .callout {
    background: rgba(4, 47, 36, 0.3);
    border-color: #064e3b;
}
/* sinkron dengan Ui::CALLOUT_TEXT */
.callout p {
    font-size: 0.875rem;
    color: #065f46;
    line-height: 1.625;
    margin: 0;
}
.dark .callout p {
    color: #6ee7b7;
}

/* sinkron dengan Ui::CLOSING_PANEL */
.closing-panel {
    border-radius: 1rem;
    background: #f3f4f6;
    border: 1px solid #f3f4f6;
    padding: 1.5rem;
}
.dark .closing-panel {
    background: #111827;
    border-color: #1f2937;
}
@media (min-width: 640px) {
    /* sinkron dengan Ui::CLOSING_PANEL (varian sm:p-8) */
    .closing-panel {
        padding: 2rem;
    }
}

/* sinkron dengan Ui::SECTION_LABEL — dipakai di content maupun artikel_cta
   (label "Solusinya" di atas heading CTA) */
.kicker-label {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #10b981;
    margin-bottom: 0.75rem;
    display: block;
}

/* LEGACY: parser versi baru TIDAK LAGI menghasilkan class ini — wrapper grid
   step-item sekarang dibiarkan pakai class Tailwind literal aslinya (grid
   grid-cols-1 sm:grid-cols-N gap-X), apa pun jumlah kolomnya, karena literal
   class sudah otomatis ter-compile di CSS bundle situs. Rule di bawah ini
   dipertahankan HANYA supaya artikel yang sudah kadung ter-import sebelum
   fix ini (masih tersimpan dengan class="step-grid" di kolom content/
   artikel_cta) tetap tampil benar. Jangan hapus tanpa mengecek dulu apakah
   masih ada baris di DB yang memakainya. */
.step-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) {
    .step-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* sinkron dengan Ui::STEP_CARD */
.step-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.75rem;
    background: #ffffff;
    border: 1px solid #f3f4f6;
    padding: 1rem;
    color: #374151;
    font-size: 0.875rem;
}
.dark .step-item {
    background: #111827;
    border-color: #1f2937;
    color: #d1d5db;
}

/* sinkron dengan Ui::ICON_BOX_SM + Ui::ICON_COLORS['emerald'] (warna default).
   background-image = checkmark svg yang sama seperti dipakai komponen
   <x-step-item> asli (path "M5 13l4 4L19 7", stroke text-emerald-500 dst),
   supaya kotak ini benar-benar tampil sebagai ikon centang, bukan cuma
   kotak warna polos tanpa isi. */
.step-item::before {
    content: '';
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    background-color: #d1fae5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1rem 1rem;
}
/* sinkron dengan Ui::ICON_COLORS['blue'] */
.step-item[data-color="blue"]::before {
    background-color: #dbeafe;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}
/* sinkron dengan Ui::ICON_COLORS['rose'] */
.step-item[data-color="rose"]::before {
    background-color: #ffe4e6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f43f5e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}
/* sinkron dengan Ui::ICON_COLORS['violet'] */
.step-item[data-color="violet"]::before {
    background-color: #ede9fe;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}

/* =========================================================================
 * Khusus dipakai di artikel_cta (slot "extra" — CTA section besar di
 * bagian bawah). Bedanya dengan .step-item::before: di sini ikon SVG-nya
 * ditulis literal di file sumber (bukan digenerate oleh komponen), jadi
 * cukup pastikan div pembungkusnya dapat background + warna (untuk
 * `stroke="currentColor"` pada svg di dalamnya) yang benar per warna.
 * ========================================================================= */

/* sinkron dengan Ui::CARD */
.feature-card {
    border-radius: 1rem;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    padding: 1.25rem;
}
.dark .feature-card {
    background: #030712;
    border-color: #1f2937;
}

/* sinkron dengan Ui::ICON_BOX + Ui::ICON_COLORS['emerald'] (warna default) */
.icon-box {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    background-color: #d1fae5;
    color: #10b981;
}
.dark .icon-box {
    background-color: rgba(2, 44, 34, 0.6);
}
.icon-box[data-color="blue"] {
    background-color: #dbeafe;
    color: #3b82f6;
}
.dark .icon-box[data-color="blue"] {
    background-color: rgba(23, 37, 84, 0.6);
}
.icon-box[data-color="rose"] {
    background-color: #ffe4e6;
    color: #f43f5e;
}
.dark .icon-box[data-color="rose"] {
    background-color: rgba(76, 5, 25, 0.6);
}
.icon-box[data-color="violet"] {
    background-color: #ede9fe;
    color: #8b5cf6;
}
.dark .icon-box[data-color="violet"] {
    background-color: rgba(46, 16, 101, 0.6);
}

/* sinkron dengan Ui::ICON_BOX_SM (versi kecil, kalau dipakai di luar step-item) */
.icon-box-sm {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: #d1fae5;
    color: #10b981;
}
.icon-box-sm[data-color="blue"] { background-color: #dbeafe; color: #3b82f6; }
.icon-box-sm[data-color="rose"] { background-color: #ffe4e6; color: #f43f5e; }
.icon-box-sm[data-color="violet"] { background-color: #ede9fe; color: #8b5cf6; }

/* sinkron dengan Ui::FEATURE_TITLE */
.feature-title {
    font-weight: 600;
    color: #111827;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}
.dark .feature-title {
    color: #ffffff;
}

/* sinkron dengan Ui::FEATURE_TEXT */
.feature-text {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.625;
}
.dark .feature-text {
    color: #9ca3af;
}

/* sinkron dengan Ui::CTA_BUTTON */
.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: #ffffff;
    color: #059669;
    font-weight: 700;
    border-radius: 0.75rem;
    font-size: 1rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    transition: background-color 150ms;
}
.cta-button:hover {
    background: #f9fafb;
}
.cta-button:active {
    background: #f3f4f6;
}