/*
Theme Name: Wafi Science Child Theme
Theme URI: https://ejournal-science.upi.edu/wafi
Author: Departemen Fisika UPI
Author URI: https://fisika.upi.edu
Description: Child theme untuk menyesuaikan tampilan Wafi agar mirip ejournal-science.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wafi-science-child
Template: twentytwentyfour
*/

/* =================================================
   GLOBAL & LAYOUT UTAMA 
   ================================================= */
body {
    font-family: "Segoe UI", Arial, sans-serif;
    background: #f4f6fb;
    color: #333;
    line-height: 1.6;
}

/* --- TAMBAHAN BARU: HEADER DAN LOGO PROPORSIONAL --- */
.pkp_structure_head {
    background: #004d26;
    border-bottom: 4px solid #f2b705;
    padding-top: 25px !important;    /* Memberi ruang kosong di atas logo */
    padding-bottom: 25px !important; /* Memberi ruang kosong di bawah logo */
    display: flex;
    align-items: center;
}

/* Memaksa Logo Membesar */
.pkp_structure_head .pkp_site_name .is_img img {
    max-height: 120px !important; /* Ubah angka ini jika logo dirasa masih kurang besar/terlalu besar */
    width: auto !important;
    transition: all 0.3s ease;
}

/* Mengatur Posisi Logo Agar Tidak Terlalu Mepet Kiri (Opsional) */
.pkp_structure_head .pkp_site_name {
    margin-left: 20px; 
}
/* -------------------------------------------------- */

.pkp_site_name .is_text {
    font-size: 30px;
    font-weight: 700;
    color: white;
}

.pkp_navigation_primary_wrapper {
    background: #004d26;
}
.pkp_navigation_primary > li > a {
    color: white;
    padding: 12px 18px;
    font-weight: 600;
}
.pkp_navigation_primary > li > a:hover {
    background: #006b3c;
    border-radius: 4px;
}

.pkp_structure_content {
    background: #f4f6fb !important;
    display: flex;
    gap: 20px;
}
.pkp_structure_main {
    background: #ffffff;
    padding: 25px;
    border-radius: 6px;
    border: none !important;
    flex: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.pkp_structure_sidebar,
.pkp_structure_sidebar_right {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    flex: 0 0 300px;
}
.pkp_structure_sidebar_right::before,
.pkp_structure_sidebar_right::after {
    content: none !important;
    display: none !important;
}

.pkp_structure_sidebar_right .pkp_block {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    margin-bottom: 20px;
    padding: 18px;
}
.pkp_block h2 {
    font-size: 16px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid #004d26;
    color: #004d26;
}

/* =================================================
   FIX HALAMAN HOME (BERANDA): MENGHANCURKAN SEKAT
   ================================================= */
.page_index_journal .pkp_structure_main {
    display: block !important;
}
.page_index_journal .pkp_structure_main section {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

/* Memaksa elemen dalam pengumuman melebar dan menghapus garis vertikal */
.page_index_journal .obj_announcement_summary,
.page_index_journal .obj_announcement_summary > div,
.page_index_journal .obj_announcement_summary .description {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    border: none !important; /* Menghapus garis abu-abu vertikal */
    margin: 0 !important;
}

/* =================================================
   ARTICLE LIST (DAFTAR ARTIKEL)
   ================================================= */
.obj_article_summary {
    background: white;
    padding: 20px;
    margin-bottom: 18px;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
    transition: all 0.25s ease;
}
.obj_article_summary:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.obj_article_summary .title a {
    font-size: 18px;
    font-weight: 600;
    color: #004d26;
}
.obj_article_summary .title a:hover {
    color: #f2b705;
}
.obj_article_summary .authors {
    font-size: 14px;
    color: #666;
}

/* =================================================
   FIX TOTAL: STRUKTUR HALAMAN ARTIKEL (NATIVE FLEX)
   ================================================= */
.obj_article_details .title {
    font-size: 28px;
    font-weight: 700;
    color: #004d26;
    margin-bottom: 15px;
    width: 100% !important;
}

@media (min-width: 769px) {
    .obj_article_details {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
    }
    .obj_article_details .main_entry {
        flex: 0 0 64% !important;
        width: 64% !important;
        max-width: 64% !important;
        float: left !important;
    }
    .obj_article_details .entry_details {
        flex: 0 0 32% !important;
        width: 32% !important;
        max-width: 32% !important;
        margin-top: 0 !important;
        float: right !important;
    }
}

/* =================================================
   PDF BUTTON
   ================================================= */
.obj_galley_link {
    background: #f2b705;
    color: black;
    padding: 8px 14px;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-block;
}
.obj_galley_link:hover {
    background: #e0a900;
}

/* =================================================
   BUTTON UMUM
   ================================================= */
.cmp_button {
    background: #004d26;
    color: white;
    border-radius: 4px;
    padding: 8px 14px;
}
.cmp_button:hover {
    background: #006b3c;
}

/* =================================================
   FOOTER
   ================================================= */
.pkp_structure_footer {
    background: #004d26;
    color: white;
    margin-top: 40px;
}
.pkp_footer_content {
    padding: 30px;
    text-align: center;
    font-size: 14px;
}

/* =================================================
   KODE ASLI SHARIFF PLUGIN (TOMBOL MEDIA SOSIAL)
   ================================================= */
.shariff .theme-grey .shariff-button a { background-color: #707070; color: #fff; }
.shariff .theme-grey .shariff-button a:hover { background-color: #636363; color: #fff; }
.shariff .theme-white .shariff-button a { background-color: #fff; }
.shariff .theme-white .shariff-button a .share_text  { color: #333; }
.shariff .theme-standard .shariff-button a { border: 1px solid #333; background-color: #fff; color: #333; }
.shariff .theme-standard .shariff-button a:hover { background-color: #eee; }
.shariff .theme-standard .shariff-button.twitter a { border-color: #55acee; }
.shariff .theme-standard .shariff-button.twitter a .fab { color: #55acee; }
.shariff .theme-standard .shariff-button.facebook a { border-color: #3b5998; }
.shariff .theme-standard .shariff-button.facebook a .fab { color: #3b5998; }
.shariff .theme-standard .shariff-button.linkedin a { border-color: #0077b5; }
.shariff .theme-standard .shariff-button.linkedin a .fab { color: #0077b5; }
.shariff .theme-standard .shariff-button.pinterest a { border-color: #bd081c; }
.shariff .theme-standard .shariff-button.pinterest a .fab { color: #bd081c; }
.shariff .theme-standard .shariff-button.xing a { border-color: #126567; }
.shariff .theme-standard .shariff-button.xing a .fab { color: #126567; }
.shariff .theme-standard .shariff-button.whatsapp a { border-color: #5cbe4a; }
.shariff .theme-standard .shariff-button.whatsapp a .fab { color: #5cbe4a; }
.shariff .theme-standard .shariff-button.addthis a { border-color: #f8694d; }
.shariff .theme-standard .shariff-button.addthis a .fas { color: #f8694d; }
.shariff .theme-standard .shariff-button.tumblr a { border-color: #36465d; }
.shariff .theme-standard .shariff-button.tumblr a .fab { color: #36465d; }
.shariff .theme-standard .shariff-button.flattr a { border-color: #7ea352; }
.shariff .theme-standard .shariff-button.flattr a .far { color: #7ea352; }
.shariff .theme-standard .shariff-button.diaspora a,
.shariff .theme-standard .shariff-button.mail a, 
.shariff .theme-standard .shariff-button.print a { border-color: #999; }
.shariff .theme-standard .shariff-button.diaspora a .fas,
.shariff .theme-standard .shariff-button.mail a .fas,
.shariff .theme-standard .shariff-button.print a .fas { color: #999; }
.shariff .theme-standard .shariff-button.reddit a { border-color: #ff4500; }
.shariff .theme-standard .shariff-button.reddit a .fab { color: #ff4500; }
.shariff .theme-standard .shariff-button.stumbleupon a { border-color: #eb4924; }
.shariff .theme-standard .shariff-button.stumbleupon a .fab { color: #eb4924; }
.shariff .theme-standard .shariff-button.weibo a { border-color: #f56770; }
.shariff .theme-standard .shariff-button.weibo a .fab { color: #f56770; }
.shariff .theme-standard .shariff-button.qzone a { border-color: #2b82d9; }
.shariff .theme-standard .shariff-button.qzone a .fab { color: #2b82d9; }
.shariff .theme-standard .shariff-button.buffer a { border-color: #3a3a3a; }
.shariff .theme-standard .shariff-button.buffer a .fab { color: #3a3a3a; }
.shariff .theme-standard .shariff-button.flipboard a { border-color: #e12828; }
.shariff .theme-standard .shariff-button.flipboard a .fab { color: #e12828; }
.shariff .theme-standard .shariff-button.tencent-weibo a { border-color: #26ace0; }
.shariff .theme-standard .shariff-button.tencent-weibo a .fab { color: #26ace0; }
.shariff .theme-standard .shariff-button.pocket a { border-color: #ef4056; }
.shariff .theme-standard .shariff-button.pocket a .fab { color: #ef4056; }
.shariff .theme-standard .shariff-button.telegram a { border-color: #08c; }
.shariff .theme-standard .shariff-button.telegram a .fab { color: #08c; }
.shariff .theme-standard .shariff-button.vk a { border-color: #5d7fa4; }
.shariff .theme-standard .shariff-button.vk a .fab { color: #5d7fa4; }

/* =================================================
   RESPONSIVE (TAMPILAN HP)
   ================================================= */
@media (max-width: 768px) {
    .pkp_structure_content {
        flex-direction: column;
    }
    .pkp_structure_sidebar_right {
        flex: 1;
    }
    .obj_article_details .main_entry,
    .obj_article_details .entry_details {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }
}
/* =================================================
   MEMINDAHKAN DOI KE BAWAH NAMA PENULIS (HOME/ISSUE)
   ================================================= */
.obj_article_summary {
    display: flex !important;
    flex-direction: column !important;
}

/* =================================================
   MERAPIKAN DOI DI BAWAH PENULIS (HOME/ISSUE) - FIX
   ================================================= */
/* Mengembalikan container ke mode normal agar tidak terbalik */
.obj_article_summary {
    display: block !important;
}

/* Memastikan teks informasi DOI tampil rapi di bawah nama penulis */
.obj_article_summary .pub_id.doi {
    display: block !important;
    margin-top: 5px !important;
    margin-bottom: 10px !important;
    font-size: 13px !important;
    word-break: break-all !important; /* Mencegah teks DOI panjang keluar layar */
}

/* Memberikan sedikit jarak atas untuk tombol PDF agar tidak menempel */
.obj_article_summary .obj_galley_link {
    margin-top: 5px !important;
}
/* =================================================
   PENGATURAN RADIKAL: PAKSA ABSTRAK JADI JUSTIFY
   ================================================= */
.item.abstract, 
.item.abstract .value, 
.item.abstract p, 
.article-abstract, 
.article-abstract p {
    text-align: justify !important;
    text-justify: inter-word !important;
}
/* =================================================
   LOGIKA LOCK POP-UP: HANYA BOLEH MUNCUL DI BERANDA (HOME)
   ================================================= */

/* KONDISI UTAMA: Sembunyikan pop-up di SELURUH halaman jurnal */
.wafi-popup-overlay {
    display: none !important;
}

/* KONDISI KHUSUS BERANDA: Pop-up HANYA boleh aktif di halaman depan (.pkp_page_index) */
.pkp_page_index .wafi-popup-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    z-index: 999999 !important;
    display: block !important; /* Dihidupkan khusus di beranda */
}

/* KONDISI MENUTUP: Ketika tombol close diklik, pop-up di beranda langsung lenyap */
.pkp_page_index .wafi-popup-overlay:target {
    display: none !important;
}
/* =================================================
   LAYOUT KOTAK POP-UP
   ================================================= */
.wafi-popup-box {
    background: #fff !important;
    margin: 6% auto !important;
    padding: 0 !important;
    width: 90% !important;
    max-width: 650px !important;
    position: relative !important;
    border-radius: 6px !important;
    box-shadow: 0px 5px 25px rgba(0,0,0,0.5) !important;
    overflow: hidden !important;
}

.wafi-popup-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

.wafi-popup-close-x {
    position: absolute !important;
    right: 15px !important;
    top: 5px !important;
    font-size: 35px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    text-decoration: none !important;
    z-index: 100002 !important;
}

.wafi-popup-bottom {
    background-color: #f5f5f5 !important;
    padding: 10px 15px !important;
    text-align: right !important;
    border-top: 1px solid #ddd !important;
}

.wafi-popup-btn-close {
    background-color: #d9534f !important;
    color: white !important;
    padding: 7px 20px !important;
    display: inline-block !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    font-size: 14px !important;
}
/* =================================================
   DESAIN LAYOUT KOTAK POP-UP (DI TENGAH LAYAR)
   ================================================= */
.wafi-popup-box {
    background: #fff !important;
    margin: 6% auto !important;
    padding: 0 !important;
    width: 90% !important;
    max-width: 650px !important;
    position: relative !important;
    border-radius: 6px !important;
    box-shadow: 0px 5px 25px rgba(0,0,0,0.5) !important;
    overflow: hidden !important;
}

.wafi-popup-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

.wafi-popup-close-x {
    position: absolute !important;
    right: 15px !important;
    top: 5px !important;
    font-size: 35px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    text-decoration: none !important;
    z-index: 100002 !important;
}
.wafi-popup-close-x:hover { color: #ddd !important; }

.wafi-popup-bottom {
    background-color: #f5f5f5 !important;
    padding: 10px 15px !important;
    text-align: right !important;
    border-top: 1px solid #ddd !important;
}

.wafi-popup-btn-close {
    background-color: #d9534f !important;
    color: white !important;
    padding: 7px 20px !important;
    display: inline-block !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-family: Arial, sans-serif !important;
}
.wafi-popup-btn-close:hover { background-color: #c9302c !important; color: white !important; }