/* 1. Header Container - Full Width & Depth */
.pkp_structure_head {
    padding-top: 0 !important;
    /* background: linear-gradient(180deg, #001a33 0%, #002147 100%); */
    min-height: 400px; /* Changed to min-height for better scaling */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Pushes content toward the nav bar */
}

/* 2. Banner/Logo Styling */
.is_img.pkp_site_name_wrapper {
    padding: 0 !important;
    margin: 0 auto;
    width: 100%;
    display: block;
}

.pkp_site_name_wrapper img {
    width: 100%;
    max-width: 1200px; /* Keeps the logo from stretching infinitely on 4k monitors */
    height: auto;
    margin: 180px auto 0; /* Centered with top breathing room */
    display: block;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5));
}

/* 3. Navigation Bar - Modern & Functional */
.pkp_navigation_primary_wrapper {
    background: rgba(0, 51, 102, 0.95); /* Semi-transparent navy */
    backdrop-filter: blur(5px); /* Modern glass effect */
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 3px solid #001529;
    padding: 0 20px !important;
    z-index: 1000;
}

/* Main Nav Links */
.pkp_navigation_primary > li > a {
    color: #ffffff !important;
    /* font-weight: 600; */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 15px 20px !important;
    transition: all 0.3s ease;
}

.pkp_navigation_primary > li > a:hover {
    background: #0056b3 !important;
    color: #fff !important;
    box-shadow: inset 0 -3px 0 #00a3ff; /* Bottom highlight on hover */
}

/* 4. Dropdown Menus (Clean & Readable) */
.pkp_navigation_primary .dropdown-menu,
.pkp_navigation_user .dropdown-menu {
    border: none;
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
    border-radius: 0 0 4px 4px;
    padding: 10px 0;
}

.pkp_navigation_primary .dropdown-menu a,
.pkp_navigation_user .dropdown-menu a {
    color: #004080 !important;
    padding: 10px 20px !important;
    font-weight: 500;
}

.pkp_navigation_primary .dropdown-menu a:hover {
    background-color: #f0f5ff !important;
    color: #006798 !important;
}

/* 5. User Profile Button (The "Account" look) */
.pkp_navigation_user .profile > a {
    color: #fff !important;
    background: #0056b3 !important;
    border-radius: 4px !important; /* Slight roundness looks more professional than 0% */
    margin: 8px 5px !important;
    padding: 8px 18px !important;
    font-size: 0.9em;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.2);
}

.pkp_navigation_user .profile > a:hover {
    background: #007bff !important;
    transform: translateY(-1px);
}

/* 5. Search Bar Integration */
.pkp_structure_head .pkp_search {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px; /* Squared look to match OJS 3.4 defaults */
    color: #fff;
    padding: 5px 10px;
}

.pkp_structure_head .pkp_search:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: #00a3ff;
    outline: none;
}
/* 6. Mobile Responsiveness */
@media (max-width: 991px) {
    .pkp_structure_head {
        height: auto;
        min-height: 250px;
    }
    .pkp_site_name_wrapper img {
        margin-top: 50px;
        min-height: 120px;
        object-fit: contain;
    }
}