/*
 * Peluit — OJS 3 Default Theme Header
 * Tujuan: membuat banner header tampil proporsional dan responsif.
 *
 * Cara pakai:
 * 1. Unggah banner Peluit ke Website > Appearance > Setup > Journal Page Header
 *    atau lokasi header gambar yang digunakan instalasi OJS Anda.
 * 2. Tambahkan CSS ini melalui Appearance > Advanced > Additional CSS
 *    (nama menu dapat berbeda menurut versi OJS), atau ke stylesheet tema.
 */

/* Header container: gunakan lebar penuh yang tersedia */
.pkp_site_name_wrapper {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Logo/header image OJS 3 default theme */
.pkp_site_name a,
.pkp_site_name .is_img,
.pkp_site_name .is_img img,
.pkp_site_name img {
    display: block;
    max-width: 100%;
}

/* Banner: tampilkan seluruh gambar, jangan terpotong */
.pkp_site_name .is_img img,
.pkp_site_name img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center;
}

/* Hindari batas lebar bawaan tema pada area header */
.pkp_head_wrapper .pkp_site_name_wrapper,
.pkp_head_wrapper .pkp_site_name {
    width: 100%;
    max-width: 100%;
}

/* Kurangi ruang kosong di sekitar banner */
.pkp_head_wrapper .pkp_site_name {
    margin: 0;
    padding: 0;
}

/* Jika tema membatasi lebar konten header */
.pkp_head_wrapper .pkp_navigation_primary_wrapper,
.pkp_head_wrapper .pkp_navigation_user_wrapper {
    max-width: 100%;
}

/* Tampilan tablet dan ponsel */
@media (max-width: 767px) {
    .pkp_site_name_wrapper {
        padding: 0;
    }

    .pkp_site_name .is_img img,
    .pkp_site_name img {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
    }
}