/*
=================================================================
 JITP - FINAL REVISED OJS STYLE
 Jurnal Inovasi dan Transformasi Pendidikan
=================================================================

Tujuan revisi:
1. Header/logo menggunakan lebar penuh area jurnal.
2. Memberi jarak pada menu "Trust Tech Publisher".
3. Semua teks navigasi + Search putih dan bold.
4. Garis aksen navigasi berada DI BAWAH menu.
5. Homepage banner memenuhi area konten secara rapi.
6. Sidebar menu lebih bersih dan garis aksen berada di bawah judul.
7. Current Issue disembunyikan hanya dari homepage.
8. Tidak mengubah grid/float/width struktur utama OJS.

PENTING:
- Hapus stylesheet lama terlebih dahulu.
- Simpan Appearance tanpa CSS lama.
- Lakukan hard refresh / clear cache.
- Upload file ini sebagai satu-satunya Journal Style Sheet.
=================================================================
*/

:root {
    --jitp-dark: #076738;
    --jitp-green: #138a47;
    --jitp-green-hover: #0b7540;
    --jitp-lime: #94c83d;
    --jitp-lime-soft: #e9f9b9;
    --jitp-yellow: #f4c51f;
    --jitp-soft: #f4faf5;
    --jitp-border: #dce6dd;
    --jitp-text: #2e342f;
    --jitp-muted: #6c746d;
    --jitp-white: #ffffff;
}

/* =========================================================
   1. GLOBAL
========================================================= */

body {
    color: var(--jitp-text);
    line-height: 1.65;
}

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

a:hover,
a:focus {
    color: var(--jitp-dark);
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   2. TOP USER MENU: REGISTER / LOGIN
========================================================= */

.pkp_navigation_user_wrapper {
    background: #ffffff !important;
}

.pkp_navigation_user,
.pkp_navigation_user > li,
.pkp_navigation_user > li > a,
.pkp_navigation_user_wrapper a {
    color: var(--jitp-dark) !important;
}

.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus,
.pkp_navigation_user_wrapper a:hover,
.pkp_navigation_user_wrapper a:focus {
    color: var(--jitp-green) !important;
}


/* =========================================================
   3. HEADER / JOURNAL LOGO
========================================================= */

/*
 Header dibuat selebar container OJS.
 Tidak menggunakan max-width 780px lagi.
*/

.pkp_site_name_wrapper {
    width: 100%;
    padding: 10px 0 14px 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: #ffffff;
    box-sizing: border-box;
}

.pkp_site_name {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.pkp_site_name .is_img {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_site_name .is_img img {
    display: block !important;

    /* Membuat header mencapai sisi kanan container */
    width: 100% !important;
    max-width: none !important;

    /* Menjaga proporsi gambar */
    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain;
    object-position: center;
}


/* =========================================================
   4. PRIMARY NAVIGATION BAR
========================================================= */

.pkp_navigation_primary_row {
    background: var(--jitp-dark) !important;

    /*
    Garis aksen ada DI BAWAH menu.
    */
    border-top: 0 !important;
    border-bottom: 4px solid var(--jitp-yellow) !important;

    box-shadow: none !important;
}

.pkp_navigation_primary_wrapper {
    background: transparent !important;
}

ul.pkp_navigation_primary,
.pkp_navigation_primary {
    background: transparent !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/*
 Semua tab utama putih + bold.
 */
ul.pkp_navigation_primary > li > a,
.pkp_navigation_primary > li > a {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: none !important;

    padding-left: 18px !important;
    padding-right: 18px !important;
}

/*
 Tambah ruang di sebelah kiri menu Trust Tech Publisher
 supaya tidak mepet ke tepi blok hijau.
*/
ul.pkp_navigation_primary > li:first-child > a,
.pkp_navigation_primary > li:first-child > a {
    padding-left: 22px !important;
    padding-right: 22px !important;
}

/* Hover menu */
ul.pkp_navigation_primary > li > a:hover,
ul.pkp_navigation_primary > li > a:focus,
ul.pkp_navigation_primary > li:hover > a,
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    background: rgba(255, 255, 255, 0.09) !important;
    color: #ffffff !important;
}


/* =========================================================
   5. ABOUT DROPDOWN
========================================================= */

.pkp_navigation_primary ul {
    background: #ffffff !important;
    border-top: 3px solid var(--jitp-yellow) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.pkp_navigation_primary ul a {
    color: var(--jitp-text) !important;
    font-weight: 600 !important;
}

.pkp_navigation_primary ul a:hover,
.pkp_navigation_primary ul a:focus {
    background: var(--jitp-soft) !important;
    color: var(--jitp-dark) !important;
}


/* =========================================================
   6. SEARCH IN GREEN NAVIGATION BAR
========================================================= */

/*
 Search pada theme OJS dapat menggunakan selector berbeda.
 Selector berikut menangani varian yang umum.
*/

.pkp_navigation_primary_row .pkp_search,
.pkp_navigation_primary_row .search_prompt,
.pkp_navigation_primary_row .search_prompt *,
.pkp_navigation_primary_row .pkp_search a,
.pkp_navigation_primary_row .pkp_search button,
.pkp_navigation_primary_row .pkp_search .fa,
.pkp_navigation_primary_row .pkp_search .icon,
.pkp_navigation_primary_row .pkp_search svg,
.pkp_navigation_primary_row .pkp_search span,
.pkp_navigation_primary_row [class*="search"] > a,
.pkp_navigation_primary_row [class*="search"] > button {
    color: #ffffff !important;
    fill: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

/* Search hover */
.pkp_navigation_primary_row .search_prompt:hover,
.pkp_navigation_primary_row .search_prompt:focus,
.pkp_navigation_primary_row .pkp_search a:hover,
.pkp_navigation_primary_row .pkp_search a:focus,
.pkp_navigation_primary_row .pkp_search button:hover,
.pkp_navigation_primary_row .pkp_search button:focus {
    color: var(--jitp-yellow) !important;
}

/*
 Ketika kotak Search terbuka, input harus kembali gelap
 agar mudah dibaca.
*/
.pkp_search.is_open,
.pkp_search.is_open input,
.pkp_search.is_open button {
    color: var(--jitp-text) !important;
}

.pkp_search.is_open svg {
    fill: var(--jitp-text) !important;
}


/* =========================================================
   7. HOMEPAGE BANNER
========================================================= */

.page_index_journal .homepage_image {
    display: block;
    width: 100%;
    margin: 26px 0 28px 0 !important;
    padding: 0 !important;

    background: #ffffff;
    border: 0;
    border-radius: 5px;

    overflow: hidden;
    box-sizing: border-box;
}

.page_index_journal .homepage_image img {
    display: block !important;

    /* Banner memenuhi kolom utama */
    width: 100% !important;
    max-width: none !important;

    height: auto !important;
    max-height: none !important;

    margin: 0 auto !important;
    padding: 0 !important;

    object-fit: contain;
    object-position: center;

    border-radius: 5px;
}


/* =========================================================
   8. ABOUT THE JOURNAL
========================================================= */

.page_index_journal .homepage_about {
    background: var(--jitp-soft);
    border-left: 4px solid var(--jitp-green);

    padding: 20px 24px;
    margin: 0 0 26px 0;

    box-sizing: border-box;
}

.page_index_journal .homepage_about h2 {
    color: var(--jitp-dark);
    margin-top: 0;
    margin-bottom: 18px;
}

.page_index_journal .homepage_about p {
    margin-bottom: 12px;
    line-height: 1.7;
}


/* =========================================================
   9. HIDE CURRENT ISSUE ON HOMEPAGE ONLY
========================================================= */

/*
 Current Issue masih tetap dapat dibuka melalui:
 - Current
 - Archives
 - direct URL
*/

.page_index_journal > .current_issue {
    display: none !important;
}


/* =========================================================
   10. ADDITIONAL CONTENT
========================================================= */

.page_index_journal .additional_content {
    margin-top: 26px;
}

.page_index_journal .additional_content h2,
.page_index_journal .additional_content h3,
.page_index_journal .additional_content h4 {
    color: var(--jitp-dark);
}

.page_index_journal .additional_content h3 {
    margin-top: 26px;
    margin-bottom: 12px;

    padding-bottom: 7px;

    border-top: 0 !important;
    border-bottom: 2px solid var(--jitp-lime) !important;
}


/* =========================================================
   11. SIDEBAR - GENERAL BLOCK
========================================================= */

/*
 Jangan membuat garis hijau di atas seluruh blok.
 Garis ditempatkan pada bagian BAWAH judul.
*/

.pkp_structure_sidebar .pkp_block {
    margin-bottom: 22px;

    background: #ffffff;

    border: 1px solid var(--jitp-border) !important;
    border-top: 0 !important;

    box-shadow: none !important;
}

.pkp_structure_sidebar .pkp_block .title {
    display: block;

    margin: 0 !important;
    padding: 10px 14px !important;

    background: #ffffff !important;
    color: var(--jitp-dark) !important;

    font-weight: 700;
    text-align: center;

    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;

    /* Garis hijau tepat di bawah judul sidebar */
    border-bottom: 3px solid var(--jitp-lime) !important;
}

.pkp_structure_sidebar .pkp_block .content {
    padding: 14px;
}


/* =========================================================
   12. SIDEBAR CUSTOM MENU
========================================================= */

/*
 Untuk menu Publication Ethics, Author Guidelines, dst.
*/

.pkp_structure_sidebar .pkp_block ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.pkp_structure_sidebar .pkp_block ul li {
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_structure_sidebar .pkp_block ul li a {
    display: block;

    padding: 9px 10px;

    background: var(--jitp-lime-soft);

    color: #000000 !important;

    font-weight: 700;
    text-align: center;

    border-bottom: 1px solid #ffffff;
}

.pkp_structure_sidebar .pkp_block ul li a:hover,
.pkp_structure_sidebar .pkp_block ul li a:focus {
    background: #d9f39a;

    color: var(--jitp-dark) !important;
}


/* =========================================================
   13. CUSTOM SIDEBAR TABLE MENU
========================================================= */

/*
 Jika menu dibuat menggunakan HTML table di Custom Block,
 styling ini akan merapikannya.
*/

.pkp_structure_sidebar .pkp_block .content table {
    width: 100% !important;

    margin: 0 auto !important;

    border: 0 !important;
    border-collapse: collapse !important;

    background: transparent !important;
}

.pkp_structure_sidebar .pkp_block .content table td,
.pkp_structure_sidebar .pkp_block .content table th {
    padding: 0 !important;

    border: 0 !important;

    text-align: center;
}

.pkp_structure_sidebar .pkp_block .content table a {
    display: block;

    padding: 9px 10px;

    background: var(--jitp-lime-soft);

    color: #000000 !important;

    font-weight: 700;

    border-bottom: 1px solid #ffffff;
}

.pkp_structure_sidebar .pkp_block .content table a:hover {
    background: #d9f39a;

    color: var(--jitp-dark) !important;
}


/* =========================================================
   14. MAKE A SUBMISSION
========================================================= */

.block_make_submission a {
    display: block;

    background: var(--jitp-green) !important;

    border-color: var(--jitp-green) !important;
    border-radius: 3px;

    color: #ffffff !important;

    font-weight: 700;

    text-align: center;
}

.block_make_submission a:hover,
.block_make_submission a:focus {
    background: var(--jitp-dark) !important;

    border-color: var(--jitp-dark) !important;

    color: #ffffff !important;
}


/* =========================================================
   15. HEADINGS / ARTICLE LINKS
========================================================= */

.page h1,
.page h2,
.page h3,
.page h4,
.obj_article_details h1 {
    color: var(--jitp-dark);
}

.obj_article_summary .title a,
.obj_issue_summary h2 a {
    color: var(--jitp-dark);
    font-weight: 700;
}

.obj_article_summary .title a:hover,
.obj_issue_summary h2 a:hover {
    color: var(--jitp-green);
}

.obj_article_summary .authors,
.obj_article_summary .pages {
    color: var(--jitp-muted);
}


/* =========================================================
   16. GALLEY / PDF LINKS
========================================================= */

.obj_galley_link,
.galleys_links .obj_galley_link,
.obj_article_summary .galleys_links a {
    color: var(--jitp-green) !important;

    border-color: var(--jitp-green) !important;
}

.obj_galley_link:hover,
.galleys_links .obj_galley_link:hover,
.obj_article_summary .galleys_links a:hover {
    background: var(--jitp-green) !important;

    border-color: var(--jitp-green) !important;

    color: #ffffff !important;
}


/* =========================================================
   17. TABLES IN ADDITIONAL CONTENT
========================================================= */

.additional_content table {
    width: 100%;

    border-collapse: collapse;
}

.additional_content table th {
    background: var(--jitp-dark);

    color: #ffffff;

    padding: 9px 10px;
}

.additional_content table td {
    padding: 9px 10px;

    border-bottom: 1px solid var(--jitp-border);
}


/* =========================================================
   18. FORMS
========================================================= */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select {
    border-color: #ccd8ce;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    border-color: var(--jitp-green);

    outline-color: var(--jitp-green);
}


/* =========================================================
   19. FOOTER
========================================================= */

.pkp_structure_footer_wrapper {
    border-top: 4px solid var(--jitp-yellow);
}


/* =========================================================
   20. MOBILE
========================================================= */

@media (max-width: 767px) {

    /*
    Di mobile header mengikuti layar.
    */
    .pkp_site_name_wrapper {
        padding: 8px 0 10px 0 !important;
    }

    .pkp_site_name .is_img img {
        width: 100% !important;
        max-width: none !important;

        height: auto !important;
    }

    /*
    Sedikit kurangi padding tab.
    */
    ul.pkp_navigation_primary > li > a,
    .pkp_navigation_primary > li > a {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    ul.pkp_navigation_primary > li:first-child > a,
    .pkp_navigation_primary > li:first-child > a {
        padding-left: 14px !important;
    }

    /*
    Banner mobile tetap proporsional.
    */
    .page_index_journal .homepage_image {
        margin-top: 18px !important;
        margin-bottom: 20px !important;
    }

    .page_index_journal .homepage_image img {
        width: 100% !important;
        height: auto !important;
    }

    .page_index_journal .homepage_about {
        padding: 16px 18px;
    }
}


/* =========================================================
   END OF JITP CSS
========================================================= */