/* * Custom CSS for OJS Theme
 * Based on Academic Free by openjournaltheme.com
 * Customized by ATM (trismanto@unimma.ac.id)
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&family=Open+Sans:wght@400;600&display=swap');

body { font-family: 'Open Sans', sans-serif; background-color: #ffffff; color: #222; overflow-x: hidden; }
a { text-decoration: none; transition: all 0.2s ease; }

.breadcrumb, .page-header, .pkp_page_title, .about_journal > h1:first-child, .site_logo {
    display: none !important;
}

header.navbar-default, #headerNavigationContainer {
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 0 !important;
    height: 80px !important;
    z-index: 99999 !important;
    position: relative !important;
}

#headerNavigationContainer .container {
    width: 100%; max-width: 1200px !important; padding: 0 20px;
    height: 100%; position: relative;
}

.navbar-header {
    float: left; height: 80px; display: flex; align-items: center;
    margin-right: 20px !important; padding-left: 50px !important;
}

a.navbar-brand {
    padding: 0 !important;
    background-image: url('https://prpcjournal.org/public/journals/1/pageHeaderLogoImage_en.png');
    background-repeat: no-repeat; background-position: left center; background-size: contain;
    width: 250px; height: 50px; color: transparent !important;
}

.navbar-collapse.collapse { width: auto !important; padding: 0 !important; margin: 0 !important; float: left !important; }
ul.nav.navbar-nav { float: left; margin: 0; display: flex; flex-direction: row; height: 80px; }
.navbar-nav > li > a {
    color: #222 !important; font-weight: 700; font-size: 13px; text-transform: uppercase;
    padding: 0 15px !important; line-height: 80px; white-space: nowrap;
}
.navbar-nav > li > a:hover { color: #005538 !important; }
ul.nav li.dropdown:hover > ul.dropdown-menu { display: block !important; top: 80px !important; }

body .pkp_structure_page header#headerNavigationContainer .user_navigation,
div.user_navigation, .user_navigation {
    position: absolute !important; top: 25px !important; right: 20px !important; 
    height: 30px !important; background: transparent !important; border: none !important;
    padding: 0 !important; margin: 0 !important; display: flex; align-items: center; z-index: 100005;
}
.user_navigation ul.nav > li > a {
    color: #555 !important; font-weight: 600; font-size: 11px; text-transform: uppercase;
    padding: 0 !important; line-height: 30px !important; display: block; text-shadow: none !important;
}

.navbar-form {
    position: absolute !important; top: 25px !important; right: 110px !important; 
    height: 30px !important; margin: 0 !important; padding: 0 !important;
    border: none !important; box-shadow: none !important; display: flex; align-items: center; z-index: 100004;
}
.navbar-form .form-control {
    height: 30px !important; width: 140px !important; font-size: 11px !important;
    border: 1px solid #ddd !important; background-color: #f9f9f9 !important; 
    border-radius: 2px 0 0 2px !important; padding: 0 10px !important;
}
.navbar-form .btn {
    height: 30px !important; background: #333 !important; color: #fff !important;
    border: none; text-transform: uppercase; font-size: 10px !important;
    border-radius: 0 2px 2px 0 !important; padding: 0 12px !important;
}

.row.journal_index {
    background: linear-gradient(135deg, #00a79d 0%, #008c82 100%) !important;
    padding: 70px 0 90px 0 !important; margin: 0 0 50px 0; border: none !important;
    text-align: left !important; position: relative; z-index: 1;
}
.about_journal, .row.journal_index .container {
    background: transparent !important; border: none !important; box-shadow: none !important;
    width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 20px !important;
    text-align: left !important;
}
.emerald-banner-layout { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; width: 100%; }
.emerald-text-col { width: 60% !important; text-align: left !important; padding-right: 20px !important; }
.emerald-img-col { display: block !important; width: 40% !important; text-align: right !important; }
.emerald-img-col img { max-width: 100%; height: auto; box-shadow: 0 25px 50px rgba(0,0,0,0.3); border: 4px solid rgba(255,255,255,0.2); transform: rotate(2deg); }
h1.emerald-title {
    font-family: 'Roboto', sans-serif; font-size: 3.5rem !important; font-weight: 300 !important;
    color: #ffffff !important; margin-bottom: 20px; line-height: 1.1; text-align: left !important;
}
p.emerald-desc {
    font-size: 1.3rem !important; color: rgba(255,255,255,0.95) !important; font-weight: 300;
    margin-bottom: 35px; line-height: 1.6; text-align: left !important; max-width: 100%; margin-left: 0;
}
.emerald-actions { display: flex; gap: 15px; justify-content: flex-start; }
.btn-emerald-primary { background-color: #9d1e58 !important; color: #fff !important; padding: 14px 40px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border-radius: 50px; }
.btn-emerald-secondary { background-color: transparent !important; border: 2px solid #fff !important; color: #fff !important; padding: 14px 40px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border-radius: 50px; }

.pkp_block .title,
.pkp_block .card-header,
.block_web_feed .title,
.block_browse .title,
.block_information .title {
    background: #ffffff !important;
    background-image: none !important;
    background-color: transparent !important;
    color: #333 !important;
    border: none !important;
    border-bottom: 2px solid #005538 !important;
    text-transform: uppercase;
    font-weight: 800;
    padding: 10px 0 !important;
    box-shadow: none !important;
}

.pkp_block .card, .pkp_block {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

@media (max-width: 991px) {
    header.navbar-default, #headerNavigationContainer { 
        height: auto !important; 
        padding-bottom: 10px !important;
        position: relative !important;
    }
    .navbar-header { 
        padding-left: 0 !important; 
        width: 100%; 
        height: 60px;
        display: flex;
        justify-content: center;
        margin-right: 0 !important;
    }
    .navbar-toggle {
        display: block !important;
        float: left !important;
        margin-left: 15px;
        margin-top: 13px;
        position: absolute;
        left: 0;
        z-index: 100010;
    }
    a.navbar-brand { 
        background-position: center !important; 
        width: 200px !important;
    }
    .user_navigation {
        position: relative !important;
        top: auto !important; right: auto !important; 
        width: 100% !important;
        justify-content: center !important;
        margin-top: 5px !important;
        height: 30px !important;
    }
    .navbar-form {
        position: relative !important;
        top: auto !important; right: auto !important;
        width: 100% !important;
        justify-content: center !important;
        margin-bottom: 15px !important;
        margin-top: 5px !important;
    }
    .navbar-form .form-control { width: 200px !important; }
    .emerald-banner-layout { flex-direction: column !important; }
    .emerald-text-col, .emerald-img-col { width: 100% !important; text-align: center !important; padding: 0 !important; }
    .emerald-img-col { margin-top: 30px !important; }
    h1.emerald-title, p.emerald-desc { text-align: center !important; }
    .emerald-actions { justify-content: center; }
}

.pkp_structure_content { margin-top: 0 !important; }
footer.footer { background: #111 !important; color: #888; padding: 60px 0; border-top: none; }

body, .pkp_structure_content { background-color: #f4f6f8 !important; }

.pkp_structure_content.container {
    max-width: 1280px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

@media (min-width: 992px) {
    .pkp_structure_main.col-md-8 {
        width: 70% !important; 
        flex: 0 0 70%;
        max-width: 70%;
        margin-right: 2% !important;
    }
    .pkp_structure_sidebar.col-md-4 {
        width: 28% !important;
        flex: 0 0 28%;
        max-width: 28%;
    }
}

.pkp_structure_main {
    background: #ffffff !important;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    padding: 40px !important;
    border: 1px solid #eaf0f1;
    margin-bottom: 40px;
}

.pkp_structure_sidebar {
    background: #ffffff !important;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    padding: 25px !important;
    border: 1px solid #eaf0f1;
    height: fit-content;
}

#main-content .page_index_journal {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 30px;
}

.homepage-image, .col-md-4 .media-object {
    width: 240px !important;
    min-width: 240px !important;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    margin: 0 !important;
}

.journal-description {
    flex: 1;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #444;
    text-align: justify;
}

@media (max-width: 991px) {
    .pkp_structure_main, .pkp_structure_sidebar { width: 100% !important; margin-right: 0 !important; }
    #main-content .page_index_journal { flex-direction: column !important; }
    .homepage-image, .col-md-4 .media-object { width: 100% !important; max-width: 100% !important; margin-bottom: 20px !important; }
}

body .pkp_structure_sidebar .pkp_block li a,
body .pkp_structure_sidebar .block_content li a,
.pkp_block .content ul li a {
    display: block !important;
    position: relative !important;
    padding: 10px 12px !important;
    color: #555 !important;        
    font-weight: 500 !important;
    text-decoration: none !important;
    border-left: 3px solid transparent !important; 
    border-bottom: 1px solid #f0f0f0 !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    background-color: transparent !important;
}

body .pkp_structure_sidebar .pkp_block li a:hover,
body .pkp_structure_sidebar .block_content li a:hover,
.pkp_block .content ul li a:hover {
    color: #005538 !important;       
    background-color: #f7fcf9 !important;
    padding-left: 20px !important;   
    border-left: 5px solid #005538 !important; 
    font-weight: 700 !important;     
    box-shadow: 2px 2px 8px rgba(0,0,0,0.05) !important;
}

body .pkp_structure_sidebar .pkp_block ul,
body .pkp_structure_sidebar .pkp_block li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}