/*
 * Theme Name:    Twenty Twenty-Four Child
 * Theme URI:     https://wordpress.org/themes/twenty-twenty-four/
 * Description:   Tema Anak Twenty Twenty-Four dengan integrasi Tailwind CSS
 * Author:        Jajang Nurjaman
 * Template:      twentytwentyfour
 * Version:       1.0.0
*/

/* =========================================================
   BLOK KODE (PRE) - STYLING MODERN DENGAN TAILWIND
   ========================================================= */

/* Container utama untuk blok kode */
.prose pre,
.entry-content pre,
article pre {
    background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%) !important;
    border: 1px solid #334155 !important;
    padding: 1.5rem !important;
    border-radius: 0rem !important;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 0.875rem !important;
    line-height: 1.7 !important;
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.4),
        0 10px 10px -5px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Efek glassmorphism pada code block */
.prose pre::before,
.entry-content pre::before,
article pre::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
    pointer-events: none;
}

/* Styling untuk baris kode di dalam pre */
.prose pre code,
.entry-content pre code,
article pre code {
    display: block;
    padding: 0 !important;
    background: transparent !important;
    font-weight: 400 !important;
}

/* Efek glowing border saat hover */
.prose pre:hover,
.entry-content pre:hover,
article pre:hover {
    border-color: rgba(99, 102, 241, 0.3) !important;
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.4),
        0 10px 10px -5px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(99, 102, 241, 0.05) !important;
}

/* =========================================================
   GAYA TAMBAHAN - Scroll & Responsive
   ========================================================= */

/* Scrollbar kustom untuk code block */
.prose pre::-webkit-scrollbar,
.entry-content pre::-webkit-scrollbar,
article pre::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.prose pre::-webkit-scrollbar-track,
.entry-content pre::-webkit-scrollbar-track,
article pre::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.prose pre::-webkit-scrollbar-thumb,
.entry-content pre::-webkit-scrollbar-thumb,
article pre::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

.prose pre::-webkit-scrollbar-thumb:hover,
.entry-content pre::-webkit-scrollbar-thumb:hover,
article pre::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Responsive font size */
@media (max-width: 640px) {
    .prose pre,
    .entry-content pre,
    article pre {
        font-size: 0.75rem !important;
        padding: 1rem !important;
    }
}

/* =========================================================
   FIX: INLINE CODE SELALU TERLIHAT DIMANA SAJA
   ========================================================= */

/* Target SEMUA elemen code di seluruh halaman (KECUALI di dalam pre) */
article code:not(pre code),
.entry-content code:not(pre code),
.prose code:not(pre code),
main code:not(pre code),
.site-content code:not(pre code) {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    padding: 0.2em 0.4em !important;
    border-radius: 0.375rem !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 0.875em !important;
    font-weight: 600 !important;
    border: 1px solid #e2e8f0 !important;
    text-shadow: none !important;
    opacity: 1 !important;
    background-image: none !important;
    display: inline-block !important;
    line-height: 1.4 !important;
}

/* Target SEMUA elemen turunan di dalam inline code (KECUALI yang di dalam pre) */
article code:not(pre code) *,
.entry-content code:not(pre code) *,
.prose code:not(pre code) *,
main code:not(pre code) *,
.site-content code:not(pre code) * {
    background-color: transparent !important;
    color: #0f172a !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    padding: 0 !important;
    border: none !important;
    text-shadow: none !important;
}

/* Jika inline code berada di dalam list (ul/ol), berikan warna ungu */
article ul li code:not(pre code),
.entry-content ul li code:not(pre code),
.prose ul li code:not(pre code),
main ul li code:not(pre code) {
    background-color: #eef2ff !important;
    color: #4f46e5 !important;
    border-color: #c7d2fe !important;
}

/* =========================================================
   PENTING: OVERRIDE KHUSUS UNTUK CODE DI DALAM PRE (PRISM.JS)
   ========================================================= */
article pre code,
.entry-content pre code,
.prose pre code,
main pre code,
.site-content pre code {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    font-weight: 400 !important;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    display: block !important;
    line-height: 1.7 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* =========================================================
   HEADING (H1 - H6) - STYLING MODERN & RESPONSIF
   ========================================================= */

.prose h1,
.entry-content h1,
article h1 {
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
    margin-top: 2rem !important;
    margin-bottom: 1.5rem !important;
    letter-spacing: -0.025em !important;
}

.prose h2,
.entry-content h2,
article h2 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    margin-top: 2.5rem !important;
    margin-bottom: 1rem !important;
    letter-spacing: -0.015em !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding-bottom: 0.5rem !important;
}

.prose h3,
.entry-content h3,
article h3 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.3 !important;
    margin-top: 2rem !important;
    margin-bottom: 0.75rem !important;
}

.prose h4,
.entry-content h4,
article h4 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.4 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.5rem !important;
}

.prose h5,
.entry-content h5,
article h5 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    line-height: 1.4 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.5rem !important;
}

.prose h6,
.entry-content h6,
article h6 {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    line-height: 1.4 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* =========================================================
   HEADING DI DALAM LIST ATAU KONTEKS LAIN
   ========================================================= */
.prose li h1,
.prose li h2,
.prose li h3,
.entry-content li h1,
.entry-content li h2,
.entry-content li h3,
article li h1,
article li h2,
article li h3 {
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
}

/* =========================================================
   EFEK HOVER UNTUK HEADING
   ========================================================= */
.prose h2 a,
.prose h3 a,
.entry-content h2 a,
.entry-content h3 a,
article h2 a,
article h3 a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.prose h2 a:hover,
.prose h3 a:hover,
.entry-content h2 a:hover,
.entry-content h3 a:hover,
article h2 a:hover,
article h3 a:hover {
    color: #6366f1 !important;
    text-decoration: underline !important;
}

/* =========================================================
   HILANGKAN GARIS BAWAH PADA SEMUA LINK
   ========================================================= */
a,
a:link,
a:visited,
a:hover,
a:focus,
a:active,
.entry-content a,
.entry-content a:link,
.entry-content a:visited,
.entry-content a:hover,
.entry-content a:focus,
.entry-content a:active,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
article a,
article a:link,
article a:visited,
article a:hover,
article a:focus,
article a:active,
nav a,
nav a:hover,
.widget a,
.widget a:hover,
footer a,
footer a:hover,
* a,
* a:hover,
article .entry-title a,
article .entry-title a:hover,
article .read-more a,
article .read-more a:hover,
article a[rel="bookmark"],
article a[rel="bookmark"]:hover,
.wp-block-post a,
.wp-block-post a:hover,
.wp-block-post a:link,
.wp-block-post a:visited,
.post-item a,
.post-item a:hover,
.card a,
.card a:hover,
.wp-block-group a,
.wp-block-group a:hover {
    text-decoration: none !important;
    border-bottom: none !important;
    outline: none !important;
}

/* Menargetkan secara spesifik link judul artikel agar garis bawah hilang */
article h3 a,
article h3 a:hover,
article h3 a:focus {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* =========================================================
   FIX: MENAMPILKAN KEMBALI BULLET & NOMOR PADA LIST (UL/OL)
   ========================================================= */
.prose ul,
.entry-content ul,
article ul {
    list-style-type: disc !important;
    padding-left: 1.5rem !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.prose ol,
.entry-content ol,
article ol {
    list-style-type: decimal !important;
    padding-left: 1.5rem !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.prose ul li,
.entry-content ul li,
article ul li {
    list-style-type: disc !important;
    display: list-item !important;
    margin-bottom: 0.5rem !important;
}

.prose ol li,
.entry-content ol li,
article ol li {
    list-style-type: decimal !important;
    display: list-item !important;
    margin-bottom: 0.5rem !important;
}

/* =========================================================
   MODIFIKASI <hr /> MENJADI PEMISAH TAK TERLIHAT (SPACER)
   ========================================================= */
.prose hr,
.entry-content hr,
article hr,
hr {
    border: none !important;
    background-color: transparent !important;
    height: 2rem !important; /* Sesuaikan tinggi jarak pemisah sesuai kebutuhan (misal: 1.5rem, 2rem, dll) */
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}