/* =========================================================
   Manhaji — Jurnal Manajemen Pendidikan Islam
   Journal Style Sheet (OJS 3.x — tema Default)

   Konsep:
   Blok warna header dibatasi selebar container, lurus
   dengan tulisan "Home". Area di luar itu tetap memakai
   warna latar halaman yang sekarang.

   Cara pakai:
   Dashboard > Settings > Website > Appearance >
   Journal style sheet > Upload file ini.
   ========================================================= */


/* ---------------------------------------------------------
   1. Variabel
   Ubah nilai di sini saja bila ingin menyesuaikan.
   --------------------------------------------------------- */
:root {
	/* Diambil langsung dari gambar banner Manhaji */
	--manhaji-navy:       #182e66;  /* biru tua banner      */
	--manhaji-navy-dark:  #101f47;  /* biru tua untuk hover */
	--manhaji-orange:     #f0965a;  /* oranye tulisan       */
	--manhaji-white:      #ffffff;

	/* Lebar blok header. Samakan dengan lebar konten
	   halaman agar lurus dengan tulisan "Home". */
	--manhaji-lebar:      1200px;
}


/* ---------------------------------------------------------
   2. Pembungkus header
   Latar dibiarkan transparan supaya warna halaman yang
   sekarang tetap terlihat di kiri dan kanan.
   --------------------------------------------------------- */
.pkp_structure_head {
	background: transparent;
	padding: 0;
}

.pkp_head_wrapper {
	max-width: var(--manhaji-lebar);
	margin: 0 auto;
	padding: 0;
}

.pkp_site_name_wrapper,
.pkp_site_name {
	padding: 0;
	margin: 0;
}


/* ---------------------------------------------------------
   3. Banner
   Memenuhi lebar blok header, tanpa celah di bawahnya.
   --------------------------------------------------------- */
.pkp_site_name .is_img {
	display: block;
	padding: 0;
	margin: 0;
	line-height: 0;
}

.pkp_site_name .is_img img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
}


/* ---------------------------------------------------------
   4. Bilah navigasi
   Warna dipasang pada pembungkus dalam, bukan pada baris
   penuh, sehingga blok warna berhenti tepat di batas
   banner dan lurus dengan kata "Home".
   --------------------------------------------------------- */
.pkp_navigation_primary_row {
	background: transparent;
	padding: 0;
	border: 0;
}

.pkp_navigation_primary_wrapper {
	max-width: var(--manhaji-lebar);
	margin: 0 auto;
	padding: 0;
	background: var(--manhaji-navy);
}

.pkp_navigation_primary > li > a {
	color: var(--manhaji-white);
	padding: 14px 18px;
	font-weight: 400;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
	color: var(--manhaji-orange);
	background: var(--manhaji-navy-dark);
}

/* Submenu dropdown "About" */
.pkp_navigation_primary > li > ul {
	background: var(--manhaji-navy);
	border: 0;
}

.pkp_navigation_primary > li > ul > li > a {
	color: var(--manhaji-white);
}

.pkp_navigation_primary > li > ul > li > a:hover,
.pkp_navigation_primary > li > ul > li > a:focus {
	color: var(--manhaji-orange);
	background: var(--manhaji-navy-dark);
}


/* ---------------------------------------------------------
   5. Tautan pencarian dan menu pengguna
   --------------------------------------------------------- */
.pkp_navigation_user_wrapper .pkp_navigation_user > li > a,
.pkp_search_desktop a {
	color: var(--manhaji-white);
}

.pkp_navigation_user_wrapper .pkp_navigation_user > li > a:hover,
.pkp_search_desktop a:hover {
	color: var(--manhaji-orange);
}


/* ---------------------------------------------------------
   6. Layar kecil
   Di bawah 1200px blok mengikuti lebar layar dengan sedikit
   jarak tepi, agar tidak menempel ke pinggir.
   --------------------------------------------------------- */
@media (max-width: 1240px) {

	.pkp_head_wrapper,
	.pkp_navigation_primary_wrapper {
		max-width: 100%;
		margin-left: 20px;
		margin-right: 20px;
	}
}

@media (max-width: 991px) {

	.pkp_head_wrapper,
	.pkp_navigation_primary_wrapper {
		margin-left: 0;
		margin-right: 0;
	}

	.pkp_site_nav_toggle {
		background: var(--manhaji-navy);
	}

	.pkp_site_nav_toggle > a {
		color: var(--manhaji-white);
	}
}