/*
Theme Name:         Efna
Theme URI:          https://buatweb.my/efna
Description:        A modern, lightweight Reddit-style WordPress theme built with Tailwind CSS.
Version:            1.0.0
Author:             Nizam Ahamad
Author URI:         https://ohzam.com
Text Domain:        efna
Tags:               blog, custom-colors, two-columns, translation-ready, tailwindcss

License:            GNU General Public License v2 or later
License URI:        http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   ENJIN GLOBAL SKINNY SCROLLBAR (UNTUK BROWSER UTAMA)
   ========================================================================== */
html, body {
    /* Untuk Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
}

/* Untuk Chrome, Safari, Edge, dan Opera */
::-webkit-scrollbar {
    width: 6px; /* Lebar ultra-halus untuk scrollbar utama browser */
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Warna latar track lembut */
}

::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5); /* Warna kelabu lembut */
    border-radius: 10px;
    border: 1px solid #f1f1f1;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #ea580c; /* Oren Jingga Pergh! */
}

/* ==========================================================================
   FORCE ASIDE SCROLLBAR JADI ULTRA SKINNY (MENJAWAB ARROW KAU)
   ========================================================================== */
aside, 
aside div, 
.pergh-skinny-scroll {
    /* Untuk Firefox */
    scrollbar-width: thin !important; 
    scrollbar-color: rgba(156, 163, 175, 0.4) transparent !important;
}

/* Untuk Chrome, Safari, dan Edge pada mana-mana scrollbar di dalam Sidebar */
aside::-webkit-scrollbar, 
aside div::-webkit-scrollbar {
    width: 4px !important; /* Paksa jadi ultra-halus (4px) */
    height: 4px !important;
}

aside::-webkit-scrollbar-track, 
aside div::-webkit-scrollbar-track {
    background: transparent !important; /* Buat track belakang dia ghaib */
}

aside::-webkit-scrollbar-thumb, 
aside div::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.3) !important; /* Warna kelabu lembut pasif */
    border-radius: 10px !important;
}

/* Bila user layangkan mouse dekat area sidebar, baru dia highlight oren */
aside:hover::-webkit-scrollbar-thumb, 
aside div:hover::-webkit-scrollbar-thumb {
    background-color: #ea580c !important; /* Tukar oren Pergh! */
}

/* --- ANIMASI FADE IN HOVER CARD --- */
@keyframes perghFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: perghFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- KAWALAN GAMBAR UTAMA DALAM KOMEN (Meme / Rujukan) --- */
.entry-comment-text img:not(.wp-smiley):not(.emoji), 
.ql-editor img:not(.wp-smiley):not(.emoji) {
    max-width: 320px !important; /* Hadkan lebar Trollface & imej biasa */
    max-height: 240px !important; 
    object-fit: contain !important; 
    border-radius: 12px !important; 
    border: 1px solid #e5e7eb !important; 
    margin: 12px 0 !important;
    display: block !important; /* Kekal block supaya teks tak bercampur di tepi */
    cursor: pointer;
    transition: transform 0.2s ease;
}

.entry-comment-text img:not(.wp-smiley):not(.emoji):hover {
    transform: scale(1.02);
    border-color: #ea580c;
}

/* --- KEKALKAN SMILEY WORDPRESS SATU BARIS (INLINE) --- */
.entry-comment-text img.wp-smiley,
.entry-comment-text img.emoji {
    display: inline !important; /* Paksa inline balik biar duduk sebelah-sebelah */
    border: none !important;
    box-shadow: none !important;
    height: 1.25em !important;
    width: 1.25em !important;
    margin: 0 0.07em !important;
    vertical-align: -0.2em !important;
    background: none !important;
    padding: 0 !important;
}
/* --- OPTIMASI KAD PADA ARAS MAKSIMUM --- */
.pergh-comments-list .depth-3 bg-white,
.pergh-comments-list .depth-4 bg-white {
    background-color: #fafafa !important; /* Bagi warna kelabu pudar sikit untuk balasan dalaman */
    border-color: #f3f4f6 !important;
}