/* ============================================
Custom CSS Jurnal CRITA - FINAL PRESISI
Berdasarkan struktur HTML aktual OJS
============================================ */

/* ============================================
1. HEADER CONTAINER
============================================ */
#headerNavigationContainer {
background-color: #264653 !important;
border-bottom: 3px solid #E9C46A !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
}

/* ============================================
2. LOGO - SELECTOR BERDASARKAN HTML AKTUAL
Link logo langsung di dalam #headerNavigationContainer
============================================ */

/* Link pembungkus logo */
#headerNavigationContainer > a,
#headerNavigationContainer a.pkp_site_name,
#headerNavigationContainer a[href*="crita/index"] {
display: block !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
background-color: #264653 !important;
order: -1 !important;
}

/* Gambar logo - banner penuh seperti PIWELING */
#headerNavigationContainer > a img,
#headerNavigationContainer a.pkp_site_name img,
#headerNavigationContainer a[href*="crita/index"] img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: none !important;
object-fit: unset !important;
background-color: #264653 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
vertical-align: bottom !important;
}

/* Override OJS default max-height */
.pkp_site_name .is_img img {
max-height: none !important;
height: auto !important;
width: 100% !important;
}

/* ============================================
2b. Navigasi bar (di bawah logo)
============================================ */
#siteNav,
.pkp_site_nav_menu {
background-color: #264653 !important;
width: 100% !important;
}

/* ============================================
3. NAVIGASI UTAMA
============================================ */
.pkp_navigation_primary > li > a {
color: #FFFFFF !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
color: #E9C46A !important;
background-color: rgba(0,0,0,0.15) !important;
}

.pkp_navigation_primary .pkp_nav_has_submenu ul {
background-color: #264653 !important;
}

.pkp_navigation_primary .pkp_nav_has_submenu ul li a {
color: #FFFFFF !important;
}

.pkp_navigation_primary .pkp_nav_has_submenu ul li a:hover {
color: #E9C46A !important;
background-color: rgba(0,0,0,0.2) !important;
}

.pkp_search .search_prompt,
.pkp_search button {
color: #FFFFFF !important;
}

/* ============================================
4. NAVIGASI USER
============================================ */
.pkp_navigation_user > li > a {
color: #FFFFFF !important;
}

.pkp_navigation_user > li > a:hover {
color: #E9C46A !important;
}

/* ============================================
5. TOMBOL UTAMA
============================================ */
.pkp_site_nav .cmp_button,
.pkp_site_nav .cmp_button:visited,
.obj_article_details .item.files a.pdf,
button, .cmp_button {
background-color: #E76F51 !important;
border: none !important;
color: #FFFFFF !important;
border-radius: 4px;
transition: background 0.3s ease;
}

.pkp_site_nav .cmp_button:hover,
button:hover, .cmp_button:hover {
background-color: #264653 !important;
}

/* ============================================
6. SIDEBAR
============================================ */
.pkp_structure_sidebar .block,
.pkp_block {
border: 1px solid rgba(38,70,83,0.2);
border-radius: 4px;
overflow: hidden;
margin-bottom: 16px;
}

.pkp_structure_sidebar .block .title,
.pkp_block .title {
background-color: #E9C46A !important;
color: #264653 !important;
border-left: 5px solid #E76F51 !important;
padding: 10px 15px;
text-transform: uppercase;
font-size: 0.9em;
font-weight: bold;
margin: 0;
letter-spacing: 0.05em;
}

.pkp_structure_sidebar .block ul,
.pkp_block ul {
margin: 0;
padding: 0;
list-style: none;
background-color: #264653;
}

.pkp_structure_sidebar .block ul li,
.pkp_block ul li {
border-bottom: 1px solid rgba(233,196,106,0.2);
}

.pkp_structure_sidebar .block ul li:last-child,
.pkp_block ul li:last-child {
border-bottom: none;
}

.pkp_structure_sidebar .block ul li a,
.pkp_block ul li a {
display: block;
padding: 9px 15px;
color: #FFFFFF !important;
text-decoration: none;
font-size: 0.92em;
transition: background 0.2s, color 0.2s, padding-left 0.2s;
}

.pkp_structure_sidebar .block ul li a:hover,
.pkp_block ul li a:hover {
background-color: #E76F51 !important;
color: #FFFFFF !important;
padding-left: 20px;
}

/* ============================================
7. LINK DAN TEKS
============================================ */
a {
color: #264653;
}

a:hover {
color: #E76F51;
text-decoration: none;
}

/* ============================================
8. FOOTER
============================================ */
.pkp_structure_footer {
background-color: #264653;
color: #FFFFFF;
padding-top: 30px;
border-top: 4px solid #E76F51;
}

.pkp_structure_footer a {
color: #E9C46A;
}

.pkp_structure_footer a:hover {
color: #FFFFFF;
}

/* ============================================
9. JUDUL ARTIKEL
============================================ */
.obj_article_summary .title a {
color: #264653;
font-weight: bold;
}

.obj_article_summary .title a:hover {
color: #E76F51;
}

/* ============================================
10. SIDEBAR WIDTH FIX (rapat ke tengah)
============================================ */
@media (min-width: 992px) {
  .pkp_structure_main { width: 700px !important; }
  .pkp_structure_sidebar { width: 240px !important; min-width: 240px !important; max-width: 240px !important; }
}