/* ==========================================================================
   JOURNAL STYLE SHEET
   Platform: OJS 3.5 (Immersion Theme)
   Target: https://jurnal.umt.ac.id/index.php/jgs/index
   ========================================================================== */

/* --------------------------------------------------------------------------
   /* ==========================================================================
   1. Section class "is_text" - Transparant & Tidak Terlihat
   -------------------------------------------------------------------------- */
.is_text {
    background-color: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important; /* Memastikan elemen benar-benar hilang dari layout */
}

/* ==========================================================================
   1.1 Gambar Homepage / Banner - Full Resolution, Adaptif & Responsive
   -------------------------------------------------------------------------- */
/* 
   Target selector umum untuk gambar homepage OJS 3. 
   Menjamin gambar mengikuti lebar layar dan menjaga ketajaman resolusi asli.
*/
.homepage-image img,
.pkp_site_name_wrapper img,
.brand-image img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
    
    /* Engine Rendering khusus agar gambar resolusi tinggi tetap terlihat tajam & tidak blur */
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
}

/* --- OPTIMASI MONITOR FULL (Desktop / Layar Lebar >= 1200px) --- */
@media (min-width: 1200px) {
    .homepage-image img,
    .pkp_site_name_wrapper img,
    .brand-image img {
        object-fit: cover !important; /* Memotong sedikit area atas-bawah agar gambar tidak gepeng/terdistorsi */
        object-position: center !important; /* Fokus potongan selalu tepat di tengah gambar */
        max-height: 420px !important; /* Membatasi tinggi maksimum agar monitor tidak habis hanya untuk banner */
    }
}

/* --- OPTIMASI MOBILE PHONE (Layar Smartphone <= 768px) --- */
@media (max-width: 768px) {
    .homepage-image img,
    .pkp_site_name_wrapper img,
    .brand-image img {
        object-fit: contain !important; /* Memastikan seluruh isi gambar (termasuk teks di dalam banner) terlihat utuh tanpa terpotong di HP */
        max-height: 180px !important; /* Menyesuaikan tinggi agar pas dengan genggaman layar HP */
    }
}
/* --------------------------------------------------------------------------
   2. Navigasi & Header Layout (Format Center & Dropdown Toggle)
   -------------------------------------------------------------------------- */
/* Target selector panjang untuk navigasi utama agar rata tengah */
html body.page_index.op_index header#immersion_content_header.main-header div.container-fluid nav.navbar.navbar-expand-sm.main-header__nav #navigationPrimary {
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Modifikasi id "navigationPrimary" menjadi full block Putih dengan font Verdana Hitam */
#navigationPrimary {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;
    background-color: #ffffff !important; /* Full block Putih */
    font-family: Verdana, Geneva, sans-serif !important; /* Font Verdana */
    color: #000000 !important; /* Warna teks Hitam */
}

/* Memastikan link/teks di dalam navigationPrimary juga berwarna hitam */
#navigationPrimary a {
    color: #000000 !important;
    font-family: Verdana, Geneva, sans-serif !important;
}

#navigationPrimary > li {
    float: none !important;
    display: inline-block !important;
}

/* Format dropdown menu toggle menjadi center */
#navigationPrimary .dropdown-menu {
    text-align: center !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background-color: #ffffff !important; /* Full block Putih */;
    right: auto !important;
}

/* Tambahan untuk #dropdownMenuLink agar berwarna full block Putih dengan font Verdana Hitam */
#dropdownMenuLink {
    background-color: #ffffff !important; /* Full block Putih */
    font-family: Verdana, Geneva, sans-serif !important; /* Font Verdana */
    color: #000000 !important; /* Teks Hitam */
    display: block !important; /* Menjadikannya full block di dalam pembungkusnya */
}

/* Pengaturan spasi jarak jarak default (revert) sebelum dan sesudah */
#navigationPrimary, 
html body.page_index.op_index header#immersion_content_header.main-header div.container-fluid nav.navbar.navbar-expand-sm.main-header__nav {
    margin-top: revert !important;
    margin-bottom: revert !important;
    padding-top: revert !important;
    padding-bottom: revert !important;
}
/* --------------------------------------------------------------------------
   /* --------------------------------------------------------------------------
3. Section Journal Description
   -------------------------------------------------------------------------- */
/* Seluruh font menggunakan Geneva, justify, margin container 100%, ukuran font 15px, dan spasi 1.5 */
.journal-description,
[class*="journal-description"] {
    font-family: Geneva, sans-serif !important;
    text-align: justify !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    font-size: 15px !important; /* Menambahkan ukuran font 15px */
    line-height: 1,5 !important; /* Menambahkan spasi antar baris 1,5 */
}

/* Class col-md-6 di dalam deskripsi menggunakan font Verdana */
.journal-description .col-md-6,
[class*="journal-description"] .col-md-6 {
    font-family: Verdana, Geneva, sans-serif !important;
}

/* Class col-md-6 col-lg-8 menggunakan width 95% */
.journal-description .col-md-6.col-lg-8,
[class*="journal-description"] .col-md-6.col-lg-8,
.col-md-6.col-lg-8 {
    width: 95% !important;
    max-width: 95% !important;
    flex: 0 0 95% !important;
}

/* Mengubah warna background tombol btn-primary menjadi #e5e21b */
.journal-description .btn.btn-primary,
.btn.btn-primary {
    background-color: #e5e21b !important;
    border-color: #e5e21b !important;
    color: #000000 !important; /* Warna teks hitam agar kontras dan terbaca */
}

/* --------------------------------------------------------------------------
   4. Section Issue, Hyperlink, & Spasi Spesifik
   -------------------------------------------------------------------------- */
/* Seluruh komponen issue menggunakan font Verdana, spasi 1, dan background #0b3d64 */
.issue {
    font-family: Verdana, Geneva, sans-serif !important;
    line-height: 1 !important; /* Spasi 1 */
    background-color: #0b3d64 !important; 
    padding-top: 5vh !important; /* Sesuai dengan spesifikasi padding-top 5vh */
}

/* Default text hyperlink di dalam container issue berwarna sky blue */
.issue a {
    color: #0b3d64 !important; /* Blue */
}

/* Pewarnaan khusus #e5e21b pada link DOI dan link issue penuh */
.issue div.container header.issue__header p.issue__doi span.id a,
.issue div.container section.row.issue-desc div.col-md-6 div.issue-desc__content p a.full-issue__link {
    color: #e5e21b !important;
}

/* Aturan layout margin dan padding pada struktur issue */
.issue__header {
    margin-bottom: 2vh !important;
}

.issue-desc {
    padding-top: 0.5em !important;
    padding-bottom: 2.5em !important;
}

.issue-section {
    padding: 5vh 0 1vh 0 !important;
}

.issue-section__header {
    margin-bottom: 0.05vh !important;
}

/* Warna hitam (#000) untuk abstract fadeout sesuai spesifikasi */
.issue-section div.container div.row div.col-12 ol.issue-section__toc li.issue-section__toc-item article.article div.row div.col-md-8.offset-md-4 div.article__abstract-fadeout.article__abstract-fadeout-22 {
    color: #000000 !important;
}

/* Font Verdana untuk class judul artikel dan judul issue */
.article_title, .article-title {
    font-family: Verdana, Geneva, sans-serif !important;
}

.issue_title, .issue-title {
    font-family: Verdana, Geneva, sans-serif !important;
}

/* --------------------------------------------------------------------------
   5. Section "issue-section" & Meta Text Medium
   -------------------------------------------------------------------------- */
/* Seluruh komponen issue-section menggunakan font Verdana */
.issue-section {
    font-family: Verdana, Geneva, sans-serif !important;
}

/* Ukuran font-size medium untuk meta-data artikel sesuai selektor */
.issue section.issue-section div.container div.row div.col-12 ol.issue-section__toc li.issue-section__toc-item article.article div.row div.col-md-8.offset-md-4 p.article__meta {
    font-size: medium !important;
}

/* Pengaturan khusus untuk Cover Articles / Gambar */
.issue-section .img-fluid, 
.issue-section .img-thumbnail {
    max-width: 68% !important; /* Membatasi lebar maksimal cover artikel hingga 68% */
    height: auto !important;
}

.issue-section img, 
.issue-section svg {
    vertical-align: middle !important;
    alignment-baseline: middle !important;
    baseline-shift: 0px !important;
    baseline-source: auto !important;
}
/* --------------------------------------------------------------------------
   /* ==========================================================================
   6. Footer Section
   -------------------------------------------------------------------------- */
/* Menggabungkan variabel tema dan format dasar footer rata kiri */
footer,
.footer,
.main-footer {
    /* -- Bootstrap Variables (Immersion Theme) -- */
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #fff;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-2xl: 2rem;
    --bs-border-radius-pill: 50rem;
    --bs-link-color: #0d6efd;
    --bs-link-hover-color: #0a58ca;
    --bs-code-color: #d63384;
    --bs-highlight-bg: #fff3cd;
    -webkit-tap-highlight-color: transparent;
    
    /* -- Layout & Styling Footer -- */
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    text-rendering: optimizeLegibility;
    box-sizing: border-box;
    padding: 2vh 0;
    background-color: #0b3d64;
    border-top: 1px solid #a9a9a9;
    font-family: Verdana, Geneva, sans-serif !important;
    line-height: 1 !important;
    text-align: left !important;
}

/* Trik CSS untuk menyembunyikan gambar logo OJS Brand / PKP Workflow */
footer img[src*="ojs_brand.png"],
.footer img[src*="ojs_brand.png"],
.main-footer img[src*="ojs_brand.png"] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   7. Section Article Page (Main Content Background)
   -------------------------------------------------------------------------- */
/* Mengubah background container utama section artikel menjadi Biru Tua */
html body.page_article.op_view main#immersion_content_main > div.row > section.article-page {
    background-color: #0b3d64 !important;
    color: #ffffff; 
    padding: 20px !important; 
    border-radius: 4px; 
}

/* Memastikan tautan (links) di dalam section ini tetap kontras dan terbaca */
html body.page_article.op_view main#immersion_content_main > div.row > section.article-page a {
    color: #ffcc00 !important; 
}

/* Memastikan teks abstrak dan teks meta lainnya menyesuaikan dengan background gelap */
html body.page_article.op_view main#immersion_content_main > div.row > section.article-page .article-page__title,
html body.page_article.op_view main#immersion_content_main > div.row > section.article-page .article-page__meta,
html body.page_article.op_view main#immersion_content_main > div.row > section.article-page .article-page__abstract,
html body.page_article.op_view main#immersion_content_main > div.row > section.article-page .references li {
    color: #ffffff !important;
}
/* --------------------------------------------------------------------------
   8. Header Background Image & Navigation Position Layout
   -------------------------------------------------------------------------- */
/* Menambahkan background image pada header dengan format cover */
html body header#immersion_content_header.main-header {
    background-image: url('https://jurnal.umt.ac.id/public/journals/22/homepageImage_en.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    /* Mengubah layout header menjadi Flexbox untuk kontrol posisi vertikal */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    
    /* Mengatur tinggi minimal header agar gambar cover terlihat jelas dan luas */
    min-height: 350px !important; /* Jalankan penyesuaian angka px ini sesuai dengan proporsi gambar Anda */
    position: relative !important;
}

/* Memastikan container pembungkus di dalam header mendorong konten ke bawah */
html body header#immersion_content_header.main-header div.container-fluid {
    width: 100% !important;
    margin-top: auto !important; /* Mendorong seluruh elemen internal (termasuk nav) ke dasar header */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Penyesuaian spesifik pada Navbar agar pas di bawah dan tidak menutupi area gambar utama */
html body.page_index.op_index header#immersion_content_header.main-header div.container-fluid nav.navbar.navbar-expand-sm.main-header__nav {
    margin-top: 20px !important; /* Memberikan space/jarak aman di atas nav jika ada text/logo jurnal */
    width: 100% !important;
    position: relative !important;
    z-index: 10 !important;
}