/* 1. Remove the mismatched CSS background color completely */
body .pkp_structure_head {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* 2. Break open EVERY single OJS container trapping the image */
body .pkp_structure_head .pkp_head_wrapper,
body .pkp_site_name_wrapper,
body .pkp_site_name,
body .pkp_site_name a.is_img {
    width: 100% !important;
    max-width: 100vw !important; /* Forces the box to the absolute edges of the screen */
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* 3. Force the image to fill the width WITHOUT distorting the text */
body .pkp_site_name_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

body .pkp_site_name .is_img img,
body .pkp_site_name img {
    width: 100% !important; 
    max-width: 100% !important;
    height: auto !important; 
    max-height: none !important; /* THIS IS THE MAGIC LINE THAT STOPS THE SQUASHING */
    object-fit: unset !important; /* Removes any forced cropping */
    display: block !important;
    margin: 0 auto !important;
}
/* 4. Keep the top-right links pinned safely over the drawing */
body .pkp_navigation_user_wrapper {
    position: absolute !important;
    top: 20px !important;
    right: 40px !important; 
    z-index: 9999 !important;
}

/* Ensure links remain dark and readable */
body .pkp_navigation_user_wrapper a,
body .pkp_navigation_user_wrapper button,
body .pkp_navigation_user_wrapper span {
    color: #0b2645 !important; 
    font-weight: bold !important;
    text-shadow: none !important;
}

/* 5. Force EVERY layer of the Footer to be Pastel Yellow */
body .pkp_structure_footer_wrapper,
body footer.pkp_structure_footer_wrapper {
    background-color: #fcf9eb !important;
    background: #fcf9eb !important;
    background-image: none !important;
    border-top: 1px solid #e0e0e0 !important;
    border-bottom: none !important;
    display: block !important;
    visibility: visible !important;
    padding: 20px 0 !important;
}

/* Force all text inside the bottom bar to remain visible and dark navy */
body .pkp_structure_footer_wrapper *,
body footer.pkp_structure_footer_wrapper * {
    color: #0b2645 !important;
    visibility: visible !important;
}

/* =========================================================
   NAVIGATION & DROPDOWN: FULL BLACK TEXT HOVER
   ========================================================= */

/* 1. Base Dropdown Container */
body .pkp_navigation_primary ul,
body .pkp_navigation_primary ul ul,
body .pkp_navigation_primary .pkp_nav_list ul {
    background-color: #fcf9eb !important; /* Exact pastel yellow */
    background: #fcf9eb !important;
    border: 1px solid #ebdca0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* 2. Text styling inside dropdown (Default state) */
body .pkp_navigation_primary ul a,
body .pkp_navigation_primary ul li a {
    color: #0b2645 !important;
    background-color: #fcf9eb !important;
    font-weight: 600 !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

/* 3. Dropdown items hover: warm yellow background + pure black text */
body .pkp_navigation_primary ul a:hover,
body .pkp_navigation_primary ul a:focus,
body .pkp_navigation_primary ul li:hover > a,
body .pkp_navigation_primary ul li a:hover {
    background-color: #ebdca0 !important;
    color: #000000 !important; /* Pure black text */
}

/* 4. Top-level menu tabs hover & active: pure black text + navy underline */
body .pkp_navigation_primary > li > a:hover,
body .pkp_navigation_primary > li > a:focus,
body .pkp_navigation_primary > li:hover > a,
body .pkp_navigation_primary > li[aria-expanded="true"] > a {
    color: #000000 !important; /* Pure black text */
    border-bottom: 3px solid #0b2645 !important;
}