/* ==UserStyle==
   @name Desain untuk JHSNS
   @namespace github.com/openstyles/stylus
   @version 1.1.1
   @description Desain untuk JHSNS dari JPMKT. fixed, perbaiki yang numpuk
   @author Lasuardi
==/UserStyle== */

/* Mengimpor font dari sumber eksternal */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* Mengatur font untuk seluruh elemen */
html, body, * {
    font-family: Sunflower, helvetica, calibri;
}

/* Dropdown menu utama */
.pkp_navigation_primary_wrapper ul li ul {
    background-color: #00989e; /* Warna dropdown background */
    padding: 0;
    margin: 0;
}

.pkp_navigation_primary_wrapper ul li ul li a {
    color: #fff !important; /* Warna teks */
    padding: 10px 15px;
    display: block;
    text-decoration: none;
    background-color: #00989e; /* Atur background agar tidak putih */
}

.pkp_navigation_primary_wrapper ul li ul li a:hover {
    background-color: #00989e; /* Hover sedikit lebih gelap */
    color: #e0e0e0 !important;
}



/* Mengatur latar belakang halaman */
body {
    background-image: url(https://anwardani.github.io/css-ojs3/noisy_grid.png);
}

/* Struktur head */
.pkp_structure_head {
    background-color: #03989e;
    border-bottom: 1px solid #ddd;
}

/* Mengatur warna latar belakang untuk konten dengan sidebar */
.pkp_structure_content.has_sidebar {
    background-color: white;
}

/* Mengatur warna tautan */
a {
    color: #02733f;
}

/* Mengatur gaya tombol dan tautan galeri */
.cmp_button_wire {
    border: 1px solid #02733f;
    color: #fff;
}

/* Galley Link */
.obj_galley_link {
    text-transform: capitalize !important;
    margin: 5px;
    font-weight: 700;
    font-size: 13px;
    border: 1px solid #007ab2; /* Define the border */
    color: #00989e !important;
    padding: 10px;
}

.obj_galley_link:hover {
    background: #00989e !important;
    color: #fff !important;
    border-color: #005f8f; /* Optional: Change border color on hover */
}

/* Mengatur margin untuk nama situs */
.pkp_site_name {
    margin: 0;
}

/* Menghapus padding untuk tautan di nama situs */
.pkp_site_name > a {
    padding-top: 0;
    padding-bottom: 0;
}

/* Mengatur ukuran gambar dalam nama situs */
.pkp_site_name .is_img img {
    max-height: 100%;
    max-width: 100%;
}

/* Homepage */
.pkp_page_index .homepage_image img {
    width: 28%;
    margin-left: 0;
    float: right;
    margin-right: 10px;
    margin-top: 110px;
}
.homepage_image img {
    width: 300px;
    float: right;
    margin-right: 10px;
    margin-top: 130px;
}

/* Bagian about pada homepage */
/* Mengatur margin atas untuk struktur konten utama */
.pkp_structure_main {
    margin-top: 20px;
}

/* Mengatur margin atas untuk blok pertama */
div.pkp_block:nth-child(1) {
    margin-top: 15px; /* margin-top sebelumnya diubah dari 2px menjadi 15px */
}

/* Mengatur tampilan bagian 'about' di homepage */
.pkp_page_index .homepage_about {
    padding-top: 2.143rem;
    padding-bottom: 2.143rem;
    display: block;
    margin-top: 50px;
    width: 70%;
    padding-right: 10px;
    text-align: justify; /* Menyusun teks menjadi justify */
}

/* Menyusun paragraf dalam konten utama menjadi justify */
.pkp_structure_main p {
    margin-bottom: 0; /* Menghapus margin bawah */
    text-align: justify; /* Menyusun teks menjadi justify */
}

@media (max-width: 600px) {
    .homepage_about {
        width: 100%;
    }
    .page.page_issue_archive, .page.page_login, .pkp_structure_main {
        margin-top: 0px;
    }
    .current_issue {
        padding-right: 20px;
    }
    .pkp_page_index .homepage_about {
        padding-top: 2.143rem;
        padding-bottom: 2.143rem;
        text-align: justify;
    }
    .homepage_image > img:nth-child(1) {
        margin-top: 0px;
        padding-left: 20px;
    }
    .homepage_image {
        width: 100%;
        float: none;
        margin: 0;
    }
    .homepage_image img {
        width: 100%;
        float: none;
        margin: 0;
    }
}
@media (max-width: 360px) {
    .homepage_image {
        margin: 0;
    }
    .homepage_about {
        margin-top: 20px;
    }
    .homepage_image {
        width: 28%;
        margin-left: 0;
        float: right;
        margin-top: 150px;
    }
    .homepage_image img {
        margin: 150px -20px 0 0;
        width: 300px;
        float: right;
    }
}


/* Menambahkan margin dan border pada ringkasan artikel */
.obj_article_summary {
    margin-top: 20px;
    border-bottom: 2px solid #02733f;
    margin-bottom: 20px;
}

/* Mengatur warna latar belakang menu utama */
.pkp_navigation_primary_row {
    background-color: #03989e; /* Blue background */
}

/* Hover efek untuk menu */
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a {
    color: #fff !important; /* White font color */
    text-decoration: none; /* Remove underline */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover transition */
}

/* garis putih di atas menu primary */
.pkp_navigation_primary_wrapper {
  padding-left: 20px;
  border-top: 2px solid #fff;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a:hover {
    background-color: #026b70; /* Darker blue background on hover */
    color: #e0e0e0; /* Light gray font color on hover */
}

/* Hover efek untuk pencarian */
.pkp_navigation_search_wrapper a {
    color: #ffffff !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.pkp_navigation_search_wrapper a:hover {
    color: #e0e0e0 !important; /* Light gray font on hover */
}

/* header di sidebar */
.pkp_block .title {
    display: block;	
    background-color: #03989e; /* Same background color as .menu-header */
    border-bottom: 1px solid #ffffff; /* Same border as .menu-header */
    height: 40px; /* Same height as .menu-header */
    text-align: center; /* Same text alignment as .menu-header */
    vertical-align: middle; /* Same vertical alignment as .menu-header */
    padding-left: 15px; /* Same padding as .menu-header */
    color: #ffffff; /* Same text color as .menu-header */
    line-height: 40px; /* Ensures vertical centering of text */
}

/* Nambahkan icon author di author */
.meta .authors {
    position: relative; /* Ensures it is positioned relative to its normal position */
    font-weight: 700;
    margin-top: 4px;
    color: #000; /* Ensures the text color is visible */
}

.meta .authors::before {
    content: '';
    display: inline-block;
    background: url(https://jurnal.ruangide.org/public/site/images/rainazure/group-people.png) no-repeat center center;
    background-size: 20px 20px; /* Size of the icon */
    width: 20px; /* Width of the icon */
    height: 20px; /* Height of the icon */
    margin-right: 8px; /* Space between the icon and the author's name */
}


/* Custom Block Menu */
.custom-menu {
    width: 100%;
}

.menu-header {
    background-color: #03989e; /* Warna biru untuk header menu */
    border-bottom: 1px solid #ffffff; /* Garis bawah putih */
    height: 40px; /* Tinggi header */
    text-align: center; /* Teks rata tengah */
    vertical-align: middle; /* Teks vertikal di tengah */
    padding-left: 15px; /* Spasi kiri */
    color: #ffffff; /* Warna teks putih */
}

.menu-item {
    background-color: #03b0b7; /* Warna biru muda untuk item menu */
    border-bottom: 1px solid #ffffff; /* Garis bawah putih antar item */
    height: 35px; /* Tinggi item menu */
    text-align: center; /* Teks rata tengah */
    vertical-align: middle; /* Teks vertikal di tengah */
    padding-left: 15px; /* Spasi kiri */
    transition: background-color 0.3s ease; /* Transisi warna saat hover */
}

.menu-item a {
    color: #ffffff; /* Warna teks putih */
    text-decoration: none; /* Hilangkan garis bawah pada teks */
    display: block; /* Jadikan elemen blok penuh */
    height: 100%; /* Tinggi penuh sesuai item menu */
    width: 100%; /* Lebar penuh sesuai item menu */
    line-height: 35px; /* Vertikal teks di tengah item menu */
}

.menu-item:hover {
   background-color: #027d83 !important; /* Biru gelap */
    color: #ffffff !important; /* Tetap putih */}

.menu-item:hover a {
    color: #fff !important; /* Warna teks putih saat hover */
}

/* footer logo PKP diilangi */
.pkp_brand_footer {
  padding:2.143rem;
  display: none;
}



.pkp_structure_sidebar > * {
    /* align-content: center; */
    text-align: center;
  }


/* Media query untuk tampilan responsif */
@media screen (max-width: 600px) {
    .homepage_about {
        width: 100%;
    }

.pkp_page_index .homepage_about {
    padding-top: 0px;
    padding-bottom: 0px;
}

.homepage_about {
    display: inline-block;
    width: 100%;
}
.pkp_page_index .homepage_image img {
	display: none !important;
    }
}


@media screen and (max-width: 768px) {
    .homepage_about {
        width: 100%;
    }

.pkp_page_index .homepage_about {
    padding-top: 0px;
    padding-bottom: 0px;
}

.homepage_about {
    display: inline-block;
    width: 100%;
}
.pkp_page_index .homepage_image img {
display: none !important;
    }
}