/* ==========================================
   MARZOEKI MAHDI JOURNAL OF HEALTH SCIENCES
   Custom Theme Color Configuration - OJS 3.5
   ========================================== */

:root {
    --primary-color: #047c78;    /* Teal */
    --secondary-color: #d2db02;  /* Lime Green */
    --accent-color: #ff5020;     /* Coral / Orange-Red */
    --dark-text: #1a1a1a;
    --light-bg: #f8f9fa;
}

/* ==========================================
   1. HEADER & LOGO UTAMA
   ========================================== */
.pkp_structure_head {
    background-color: var(--primary-color) !important;
    border-bottom: 3px solid var(--secondary-color); /* Pembatas estetis dengan warna lime */
}

/* Menyembunyikan teks judul bawaan pada header jika gambar PNG digunakan */
.pkp_site_name .is_text {
    display: none !important;
}


/* ==========================================
   2. NAVIGASI & DROPDOWN MENU
   ========================================== */
.pkp_navigation_primary_row {
    background-color: var(--primary-color) !important;
}

.pkp_site_nav_menu {
    background-color: var(--primary-color) !important; /* Pastikan menu dropdown tidak memiliki latar belakang */
}

/* Mengubah semua teks di dalam ID #navigationPrimary menjadi putih */
#navigationPrimary a,
#navigationPrimary .pkp_navigation_primary > li > a {
    color: #ffffff !important;
    font-weight: 600;
    transition: color 0.2s ease;
}

/* Mengubah warna teks menu menjadi warna secondary (Lime) atau accent saat di-hover */
#navigationPrimary .pkp_navigation_primary > li > a:hover,
#navigationPrimary .pkp_navigation_primary > li > a:focus,
#navigationPrimary .pkp_navigation_primary > li .dropdown-menu a:hover { /* FIX: Koreksi tanda '->' menjadi '>' */
    color: var(--secondary-color) !important;
}

/* Kursor aktif pada menu yang sedang dibuka (teks berubah menjadi lime) */
#navigationPrimary .pkp_navigation_primary > li[class*="_current"] > a,
#navigationPrimary .pkp_navigation_primary > li.is_current > a {
    color: var(--secondary-color) !important;
    border-bottom: 2px solid var(--secondary-color) !important;
}

/* Memastikan teks dropdown menu tetap terbaca jika memiliki background putih */
#navigationPrimary .dropdown-menu a {
    color: var(--dark-text) !important;
}

#navigationPrimary .dropdown-menu a:hover {
    color: var(--primary-color) !important;
    background-color: var(--light-bg) !important;
}


/* ==========================================
   3. TOMBOL UTAMA (BUTTONS) & CALL TO ACTION
   ========================================== */
.pkp_button, 
.cmp_button,
.pkp_button.submitFormButton {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.pkp_button:hover, 
.cmp_button:hover {
    background-color: #035f5c !important;
}

/* Tombol Aksen / Pendaftaran / Call to Action */
.pkp_register_button,
.pkp_button.accent {
    background-color: var(--accent-color) !important;
    color: #ffffff !important;
}

.pkp_register_button:hover {
    background-color: #e04319 !important;
}


/* ==========================================
   4. SIDEBAR, LINK, & TEKS GLOBAL
   ========================================== */
.pkp_block .title {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    padding: 10px 15px;
    font-weight: bold;
    border-left: 5px solid var(--secondary-color);
}

a {
    color: var(--primary-color);
    text-decoration: none;
}

a:hover, a:focus {
    color: var(--accent-color);
}


/* ==========================================
   5. HALAMAN ARTIKEL & DOWNLOAD GALLEY PDF
   ========================================== */
.obj_article_summary .title a:hover {
    color: var(--primary-color) !important;
}

/* Tombol PDF Galley */
.obj_galley_link.pdf {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border: 1px solid var(--primary-color) !important;
}

.obj_galley_link.pdf:hover {
    background-color: var(--secondary-color) !important;
    color: var(--dark-text) !important;
    border-color: var(--secondary-color) !important;
}


/* ==========================================
   6. FOOTER
   ========================================== */
.pkp_structure_footer {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border-top: 5px solid var(--secondary-color);
    padding: 30px 0;
}

.pkp_structure_footer a {
    color: var(--secondary-color) !important;
}

.pkp_structure_footer a:hover {
    color: var(--accent-color) !important;
}

/* ==========================================================================
   CSS FOOTER DENGAN INTEGRASI ID "ADDRESS" DAN "COUNTER" (PC VIEW)
   ========================================================================== */

/* 1. Penyelarasan Lebar Pembungkus Footer dengan Header Wrapper */
.pkp_structure_footer_wrapper {
    width: 100%;
    max-width: 1160px;          
    margin: auto;
    box-sizing: border-box;
}

/* 2. Kontainer Dalam Footer (Fleksibel Kiri-Kanan) */
.pkp_structure_footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Konten di kiri, Logo/Brand di kanan */
    align-items: flex-start;        
    padding: 30px 20px;             
    width: 100%;
    box-sizing: border-box;
}

/* 3. Area Teks Kebijakan & Alamat (Sisi Kiri Halaman) */
.pkp_footer_content {
    flex: 2;                       /* Mengambil ruang lebih besar dibanding logo */
    min-width: 300px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;                     /* Jarak horizontal antara Blok Address dan Blok Counter */
}

/* Mengatur Posisi Id Address dan Id Counter agar Bersandingan di PC */
#address, #counter {
    flex: 1;
    min-width: 220px;              /* Batas minimum lebar masing-back blok */
    text-align: left;              /* Formatan resmi rata kiri pada PC */
}

/* Memastikan elemen di dalam ID (seperti H4) mengikuti format */
#address h4, #counter h4 {
    margin-top: 0;                 /* Menghilangkan margin atas agar sejajar */
    margin-bottom: 15px;
}

/* 4. Area Logo/Brand OJS (Sisi Kanan Halaman) */
.pkp_brand_content,
.pkp_brand_footer {
    flex: 1;                       
    min-width: 200px;
    text-align: right;            
    padding: 20px;
    margin-top: 0 !important;      
    border-top: none !important;   
}

/* Ukuran Gambar Logo Brand */
.pkp_brand_content img,
.pkp_brand_footer img {
    max-width: 150px;
    height: auto;
    display: inline-block;
}


/* ==========================================================================
   MEDIA QUERY: TAMPILAN PONSEL (MOBILE VIEW < 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    /* Lebar penuh untuk pembungkus pada perangkat mobile */
    .pkp_structure_footer_wrapper {
        width: 100%;
        padding: 0 10px;
    }

    /* Transformasi struktur luar menjadi baris tunggal vertikal */
    .pkp_structure_footer {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px 10px;
    }

    /* Teks konten footer berubah menjadi rata tengah */
    .pkp_footer_content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        gap: 25px;                 /* Jarak vertikal antar blok saat menumpuk */
    }

    /* Memaksa ID Address dan Counter menurun ke bawah dan berada di tengah */
    #address, #counter {
        text-align: center !important;
        width: 100%;
    }

    /* Memastikan teks paragraf di dalam ID ikut rata tengah */
    #address p, #counter p,
    #address h4, #counter h4 {
        text-align: center !important;
    }

    /* Penyesuaian area logo brand di ponsel */
    .pkp_brand_content,
    .pkp_brand_footer {
        text-align: center !important;
        width: 100%;
        margin-top: 30px !important;  
        padding-top: 10px !important; 
    }
}

/* ==========================================
   7. KELOMPOK MEDIA QUERIES (RESPONSIVE)
   ========================================== */
@media (max-width: 992px) {
    /* Memaksa kontainer luar logo untuk melar secara fleksibel di HP */
    .pkp_site_name_wrapper,
    .pkp_site_name {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
    }

    /* Memaksa tautan di dalam logo agar tidak mengunci ukuran kaku */
    .pkp_site_name a,
    .pkp_site_name a.is_img {
        display: inline-block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* Memaksa gambar logo mengecil secara proporsional mengikuti lebar layar HP */
    .pkp_site_name img,
    .pkp_site_name a.is_img img {
        display: block !important;
        margin: 0 auto !important;
        width: 85% !important; 
        max-width: 280px !important; 
        height: auto !important;    
        min-width: 0 !important;
        min-height: 0 !important;
    }
}