/* =========================================================
   JVLE - OJS 3.5
   Header/banner full-width + logo responsive + animations
   + sidebar navigation hover animation
   Tempelkan di: Website Settings > Appearance > Advanced
   > Additional CSS (atau stylesheet tema aktif).
   ========================================================= */

/* 1. Header: putih, full width, garis aksen biru muda */
#headerNavigationContainer,
#headerNavigationContainer.navbar,
#headerNavigationContainer.navbar-default {
    width: 100% !important;
    max-width: none !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 0 !important;
    border-bottom: 3px solid #55bce8 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* Lepaskan batas lebar container tema */
#headerNavigationContainer > .container,
#headerNavigationContainer .container,
#headerNavigationContainer .navbar-container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 2. Area nama situs/logo: memenuhi lebar header */
#headerNavigationContainer .navbar-header,
#headerNavigationContainer .pkp_site_name,
#headerNavigationContainer .navbar-brand,
#headerNavigationContainer a.navbar-brand {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    text-align: center !important;
    background: #ffffff !important;
}

/* Logo/banner saja — hindari meregangkan ikon navigasi lainnya */
#headerNavigationContainer .navbar-brand img,
#headerNavigationContainer .pkp_site_name img,
#headerNavigationContainer .navbar-header img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    animation: jvleBannerReveal 0.85s ease-out both;
    transform-origin: center center;
}

/* 3. Animasi masuk logo/banner */
@keyframes jvleBannerReveal {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 4. Navigasi di baris bawah banner */
#headerNavigationContainer .navbar-collapse,
#headerNavigationContainer .navbar-nav,
#headerNavigationContainer .pkp_navigation_primary_wrapper,
#headerNavigationContainer .pkp_navigation_primary {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

#headerNavigationContainer .navbar-nav > li > a,
#headerNavigationContainer .pkp_navigation_primary > li > a {
    color: #123b55 !important;
    background-color: #ffffff !important;
    transition: color 0.22s ease, background-color 0.22s ease,
                transform 0.22s ease !important;
}

#headerNavigationContainer .navbar-nav > li > a:hover,
#headerNavigationContainer .pkp_navigation_primary > li > a:hover {
    color: #087eae !important;
    background-color: #f1f7fa !important;
}

#headerNavigationContainer .navbar-nav > li.active > a,
#headerNavigationContainer .pkp_navigation_primary > li > a[aria-current="page"] {
    color: #123b55 !important;
    background-color: #f1f7fa !important;
}

/* 5. Kontrol akun/admin tetap terbaca */
#headerNavigationContainer .navbar-text,
#headerNavigationContainer .navbar-link,
#headerNavigationContainer .dropdown-toggle {
    color: #123b55 !important;
}

/* 6. Animasi tombol navigasi sidebar dari CSS asli */
.ojs-sidebar-card .ojs-nav-btn {
    display: block !important;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.28s ease,
                filter 0.28s ease !important;
}

.ojs-sidebar-card .ojs-nav-btn:hover {
    transform: translateX(10px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
    filter: brightness(0.96) !important;
}

/* 7. Mobile: banner tetap proporsional dan tidak terpotong */
@media (max-width: 767px) {
    #headerNavigationContainer .navbar-brand img,
    #headerNavigationContainer .pkp_site_name img,
    #headerNavigationContainer .navbar-header img {
        width: 100% !important;
        height: auto !important;
    }

    .ojs-sidebar-card .ojs-nav-btn:hover {
        transform: translateX(4px) !important;
    }
}

/* 8. Hormati pengaturan aksesibilitas: kurangi animasi bila diminta */
@media (prefers-reduced-motion: reduce) {
    #headerNavigationContainer .navbar-brand img,
    #headerNavigationContainer .pkp_site_name img,
    #headerNavigationContainer .navbar-header img {
        animation: none !important;
    }

    #headerNavigationContainer .navbar-nav > li > a,
    #headerNavigationContainer .pkp_navigation_primary > li > a,
    .ojs-sidebar-card .ojs-nav-btn {
        transition: none !important;
    }
}