/* ==========================================================================
   Elkuator Scholar - Header Background & Responsive Sizing Patch
   Tempel/upload file ini SETELAH file CSS tema utama (elkuator-direct.css),
   supaya rule di sini menang di cascade dan tidak perlu edit file utama.
   Aman dipasang meski markup OJS masih memakai struktur default (bukan
   struktur custom template els_*), karena tiap rule ditulis dobel.
   ========================================================================== */

:root {
	--els-header-bg: #ffffff;
}

/* --------------------------------------------------------------------------
   1. Samakan warna latar di sekitar header dengan warna dasar banner
   -------------------------------------------------------------------------- */
html,
body {
	background: var(--els-header-bg) !important;
}

.els_topbar,
.els_topbar_inner,
.pkp_head,
.pkp_structure_head,
.pkp_site_name_wrapper,
header,
#headerContainer,
#pkpHeader,
.pkp_site_name,
.pkp_page_content_header {
	background: var(--els-header-bg) !important;
}

/* --------------------------------------------------------------------------
   2. Putus rantai "shrink-to-fit" dari pembungkus logo header.
      Tanpa ini, width:100% di gambar cuma ngitung dari lebar
      pembungkus yang ikut menyusut sebesar gambar aslinya,
      bukan dari lebar bar header yang sebenarnya lega.
   -------------------------------------------------------------------------- */
.pkp_site_name_wrapper,
.pkp_site_name,
.pkp_site_name_wrapper a,
.pkp_site_name a,
#headerContainer,
#headerContainer a,
.els_brand,
.els_brand_mandala {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
}

/* --------------------------------------------------------------------------
   3. Wrapper header: tinggi mengikuti isi, jangan dipotong
   -------------------------------------------------------------------------- */
.pkp_site_name_wrapper,
#headerContainer,
.pkp_head,
.pkp_structure_head,
header {
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}

/* --------------------------------------------------------------------------
   4. Logo/banner header: scale utuh dari kiri ke kanan, tidak di-crop,
      tidak kekecilan, dan ukurannya responsif tanpa media query
      terpisah per breakpoint (clamp otomatis menyesuaikan lebar layar)
   -------------------------------------------------------------------------- */
img[src*="pageHeaderLogoImage"],
.pkp_site_name img,
#headerContainer img,
.els_brand img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	object-fit: contain !important;
	background: var(--els-header-bg) !important;
}

.els_topbar_inner,
.pkp_site_name_wrapper {
	padding: clamp(12px, 2vw, 24px) clamp(16px, 4vw, 48px);
}