/* Import Merriweather font from Google Fonts - Professional font for academic journals */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap');

/* Apply Merriweather to body text */
body,
html,
p,
article,
.article-details,
.article-summary {
    font-family: 'Merriweather', serif !important;
}

/* Apply Merriweather to headings for consistent professional look */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Merriweather', serif !important;
    font-weight: 700 !important;
}

/* Apply Merriweather to navigation for consistency */
nav,
.pkp_navigation_primary,
.pkp_site_nav_menu,
.pkp_navigation_primary a,
.pkp_site_nav_menu a {
    font-family: 'Merriweather', serif !important;
}

/* Keep sans-serif for buttons only */
button,
input[type="submit"],
input[type="button"],
.button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Reset all custom styles for admin interface elements */
.pkpButton,
button[class*="pkpButton"],
[class*="__pkp"],
.app__page,
.app {
    all: revert !important;
}

/* Ensure admin buttons use default styling, but exclude header elements */
body:not(.pkp_page_index):not(.pkp_page_issue):not(.pkp_page_article) button:not(.pkp_site_nav_toggle),
body:not(.pkp_page_index):not(.pkp_page_issue):not(.pkp_page_article) input[type="submit"],
body:not(.pkp_page_index):not(.pkp_page_issue):not(.pkp_page_article) input[type="button"] {
    all: revert;
}

  .payment-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
    text-align: center; /* Center text in all columns */
  }

  .column {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    justify-content: flex-start; /* Align content to the top */
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  @media (max-width: 768px) {
    .payment-table {
      grid-template-columns: 1fr;
    }
  }




.issue-buttons a {
    font-size: 16px; /* Adjust to your preferred size */
    padding: 10px 20px; /* Optional: To make the buttons visually consistent */
}

img {
    border: none; /* Ensures no border is applied */
    outline: none; /* Removes any default outline on focus or active state */
}

/* Additionally, if the image is inside a link */
a img {
    border: none; /* Removes border inside anchor tag */
    outline: none; /* Removes outline when image link is clicked */
}

img:focus, img:active {
    outline: none;
    border: none;
}

/* Set primary color for links */
a {
    color: #00b0f0;
    text-decoration: none; /* Optional, to remove underline */
}

/* Set hover color for links */
a:hover {
    color: #eda82c;
    text-decoration: none; /* Optional, to add underline on hover */
}


/* Styling the link with the class 'title' */
a.title {
    color: #00b0f0; /* Primary color for clickable links */
    text-decoration: none;
    transition: color 0.3s ease;
    font-family: 'Merriweather', serif !important;
    font-weight: 700 !important;
}

/* Change color on hover */
a.title:hover {
    color: #eda82c; /* Hover color */
    text-decoration: none; /* Optional: underline to signify the link is clickable */
}


/* For non-clickable headings (default black color) */
h1, h2, h3, h4, h5, h6 {
    color: #000000; /* Default non-clickable color */
    transition: color 0.3s ease;
}

/* Apply primary color only to headings with clickable links */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: #16355f; /* Primary color for clickable links */
    text-decoration: none; /* Remove underline by default */
}

/* Hover effect for clickable links */
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: #eda82c; /* Hover color */
    text-decoration: underline; /* Optional: underline to signify interactivity */
}


/* Target the PDF button */
.obj_galley_link.pdf {
    background-color: #16355f; /* Change this to your desired background color */
    color: #ffffff; /* Change text color */
    padding: 10px 20px;
    border-radius: 5px;
    border: none !important;
    font-size: 16px;
    text-decoration: none; /* Remove underline */
}

/* Hover effect to change color when mouse is over the button */
.obj_galley_link.pdf:hover {
    background-color: #eda82c; /* Change this to the color you want on hover */
}

.journal-info table {
    margin-top: 0; /* Removes any extra top margin */
}

.journal-info p {
    line-height: 1.6; /* Ensures consistent line spacing */
    margin-top: 0; /* Removes any top margin */
    margin-bottom: 15px; /* Adds consistent spacing between paragraphs */
}

.journal-info td {
    vertical-align: top; /* Ensures all content in the table aligns to the top */
    padding-top: 0; /* Removes any top padding that may be causing misalignment */
}

.journal-info img {
    display: block;
    margin: 0; /* Ensure no margin around the image */
    padding: 0; /* Ensure no padding around the image */
}

.button-container {
    margin-bottom: 10px; /* Adds space between the buttons */
}

.custom-button {
    display: inline-block !important;
    width: 100% !important;
    padding: 15px !important;
    font-size: 16px !important;
    background-color: #16355f !important;
    color: white !important;
    text-align: center !important;
    border-radius: 5px; !important;
    text-decoration: none !important; /* Removes underline */
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
}

.custom-button:hover {
    background-color: #eda82c !important; /* Hover background color */
}

.pkp_block.block_custom {
    margin-bottom: 10px !important; /* Forcefully reduces the gap between blocks */
    margin-left: 5px !important;     /* Adds 5px left margin */
    margin-right: 5px !important;    /* Adds 5px right margin */
    padding: 10px !important;        /* Forcefully removes extra padding */
    border-radius: 5px; !important;
border: 2px dashed #16355f !important; /* Adds a 2px dashed border with color #16355f */
}

/* Change hover color for the navigation menu items */
#navigationPrimary a:hover {
    background-color: #eda82c !important; /* Change background color on hover */
    color: white !important; /* Ensure text remains white on hover */
}

/* Change hover color for the search button */
.pkp_search:hover {
    background-color: #eda82c !important; /* Change background color on hover */
    color: white !important; /* Ensure text remains white on hover */
}

/* Change hover color for Register, Login, Profile buttons */
.pkp_site_nav a:hover, /* Target Register, Login, and Profile links */
.pkp_user_nav a:hover { /* In case Profile link has a different class */
    background-color: #eda82c !important; /* Change background color on hover */
    color: white !important; /* Ensure text remains white on hover */
}

/* Default button style - only for frontend submission/article pages */
.page_article button,
.page_issue button,
.page_index button,
.page_search button,
input[type="submit"].pkp_button,
input[type="button"].pkp_button,
.issue-buttons a,
.custom-button {
    background-color: #16355f !important;
    color: white !important;
    border: 2px solid #16355f !important;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

/* Hover effect for frontend buttons */
.page_article button:hover,
.page_issue button:hover,
.page_index button:hover,
.page_search button:hover,
input[type="submit"].pkp_button:hover,
input[type="button"].pkp_button:hover,
.issue-buttons a:hover,
.custom-button:hover {
    background-color: #eda82c !important;
    border-color: #eda82c !important;
    color: white !important;
}

/* Ensures both buttons (Submit Paper and Read Issue) are of equal width and styling */
.issue-buttons {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
}

.issue-buttons a {
    flex: 1;
    text-align: center;
    padding: 15px;
    background-color: #16355f;
    color: white;
    text-decoration: none !important; /* Removes underline */
    border-radius: 5px;
    border: 2px solid #16355f;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Hover effect for both buttons */
.issue-buttons a:hover {
    background-color: #eda82c !important; /* Hover background color */
    border-color: #eda82c !important; /* Match the border with the hover background */
}

/* Styling for responsive images */
.responsive-image {
    max-width: 100%; /* Image width will never exceed the container width */
    height: auto;    /* Maintains aspect ratio */
    display: inline-block; /* Ensures it's treated as an inline element within the centered block */
}

/* Change the background color of the main header */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name,
.pkp_site_nav_menu,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper,
.pkp_navigation_user_wrapper,
.header,
.navbar {
    background-color: #16355f !important;
}

/* Header navigation menu toggle button - only visible on mobile */
.pkp_site_nav_toggle {
    background-color: #16355f !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 15px !important;
    cursor: pointer !important;
    display: inline-block !important;
    font-size: 16px !important;
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
}

.pkp_site_nav_toggle:hover {
    background-color: #eda82c !important;
    color: #ffffff !important;
}

/* Hide the text but keep it for screen readers */
.pkp_site_nav_toggle span {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Create hamburger icon with CSS */
.pkp_site_nav_toggle::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 20px !important;
    height: 2px !important;
    background-color: #ffffff !important;
    box-shadow: 0 -6px 0 #ffffff, 0 6px 0 #ffffff !important;
}

/* Hide mobile menu toggle on desktop */
@media (min-width: 992px) {
    .pkp_site_nav_toggle {
        display: none !important;
    }
}

/* Mobile header redesign */
@media (max-width: 991px) {
    /* Main header container */
    .pkp_structure_head {
        padding: 0 !important;
    }

    .pkp_head_wrapper {
        padding: 0 !important;
    }

    /* Site name wrapper with hamburger and logo */
    .pkp_site_name_wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 15px !important;
        gap: 15px !important;
        min-height: 60px !important;
    }

    /* Hamburger button - fixed on left */
    .pkp_site_nav_toggle {
        flex-shrink: 0 !important;
        margin: 0 !important;
        width: 40px !important;
        height: 40px !important;
        position: relative !important;
        background-color: #16355f !important;
        border: none !important;
        padding: 0 !important;
        cursor: pointer !important;
    }

    .pkp_site_nav_toggle:hover {
        background-color: #eda82c !important;
    }

    /* Hide text, show icon */
    .pkp_site_nav_toggle span {
        position: absolute !important;
        left: -9999px !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
    }

    /* Hamburger icon - three lines */
    .pkp_site_nav_toggle::before {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 20px !important;
        height: 2px !important;
        background-color: #ffffff !important;
        box-shadow: 0 -6px 0 #ffffff, 0 6px 0 #ffffff !important;
    }

    /* Logo container - grows to fill space */
    .pkp_site_name {
        flex: 1 !important;
        line-height: 0 !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 30px !important;
        max-height: 30px !important;
        overflow: hidden !important;
    }

    .pkp_site_name a {
        display: block !important;
        line-height: 0 !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Logo image - scaled for mobile */
    .pkp_site_name img {
        max-height: 30px !important;
        height: 30px !important;
        width: auto !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        vertical-align: top !important;
    }

    /* Hide navigation menu on mobile (shows when hamburger is clicked) */
    .pkp_site_nav_menu {
        width: 100% !important;
    }
}

/* Change the text color within the header */
.pkp_structure_head a,
.pkp_head_wrapper a,
.pkp_site_nav_menu a,
.pkp_navigation_primary a,
.pkp_navigation_user a,
.header a,
.navbar a,
.pkp_site_name a {
    color: #ffffff !important;
}

/* Header link hover, focus, and visited states (except dropdowns) */
.pkp_structure_head a:hover,
.pkp_head_wrapper a:hover,
.pkp_site_nav_menu > a:hover,
.pkp_navigation_primary > ul > li > a:hover,
.pkp_navigation_user a:hover,
.header a:hover,
.navbar a:hover,
.pkp_site_name a:hover {
    background-color: #eda82c !important;
    color: #ffffff !important;
}

/* Header link active state (when clicked, except dropdowns) */
.pkp_structure_head a:active,
.pkp_head_wrapper a:active,
.pkp_site_nav_menu > a:active,
.pkp_navigation_primary > ul > li > a:active,
.pkp_navigation_user a:active,
.header a:active,
.navbar a:active,
.pkp_site_name a:active {
    background-color: #eda82c !important;
    color: #ffffff !important;
}

/* Header link focus state (after clicking, except dropdowns) */
.pkp_structure_head a:focus,
.pkp_head_wrapper a:focus,
.pkp_site_nav_menu > a:focus,
.pkp_navigation_primary > ul > li > a:focus,
.pkp_navigation_user a:focus,
.header a:focus,
.navbar a:focus,
.pkp_site_name a:focus {
    background-color: #16355f !important;
    color: #ffffff !important;
    outline: none !important;
}

/* Header link visited state */
.pkp_structure_head a:visited,
.pkp_head_wrapper a:visited,
.pkp_site_nav_menu a:visited,
.pkp_navigation_primary a:visited,
.pkp_navigation_user a:visited,
.header a:visited,
.navbar a:visited,
.pkp_site_name a:visited {
    color: #ffffff !important;
}

/* Dropdown menu styling */
.dropdown-menu {
    background-color: #16355f !important;
    border: none !important;
    min-width: 250px !important;
    width: auto !important;
}

.dropdown-menu li {
    background-color: #16355f !important;
    width: 100% !important;
}

.dropdown-menu li a {
    background-color: #16355f !important;
    color: #ffffff !important;
    display: block !important;
    width: 100% !important;
    padding: 10px 20px !important;
    white-space: nowrap !important;
}

.dropdown-menu li:hover {
    background-color: #eda82c !important;
}

.dropdown-menu li a:hover {
    background-color: #eda82c !important;
    color: #ffffff !important;
    width: 100% !important;
}

.dropdown-menu li a:active {
    background-color: #eda82c !important;
    color: #ffffff !important;
    width: 100% !important;
}

.dropdown-menu li a:focus {
    background-color: #16355f !important;
    color: #ffffff !important;
    width: 100% !important;
}

/* Add more spacing between main navbar items */
.pkp_navigation_primary li {
    margin-right: 20px !important;
}

/* Styling for the journal info table */
.journal-info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.journal-info-table td {
    padding: 10px;
    border: 1px solid #ddd;
    vertical-align: top;
}

.journal-info-table td:first-child {
    font-weight: bold;
}

/* Responsive styling for journal info table */
@media (max-width: 768px) {
    .journal-info-table td {
        display: block;
        width: 100%;
    }

    .journal-info-table tr {
        display: block;
        margin-bottom: 10px;
    }
}

/* Hide PKP/OJS branding in footer */
.pkp_brand_footer {
    display: none !important;
}

/* Footer styling with dark background and white text */
.pkp_structure_footer_wrapper {
    background-color: #16355f !important;
    color: white !important;
    padding: 0 !important;
}

.pkp_structure_footer {
    background-color: #16355f !important;
    color: white !important;
}

.pkp_footer_content {
    background-color: #16355f !important;
    color: white !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 40px 40px !important;
}

/* Add logo to the left of footer */
.pkp_footer_content::before {
    content: "";
    background-image: url('https://irjmse.com/public/journals/1/pageHeaderLogoImage_en.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    width: 250px;
    height: 60px;
    flex-shrink: 0;
    margin-right: 40px;
}

/* Style the contact information paragraph */
.pkp_footer_content p {
    text-align: right !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.6 !important;
    color: white !important;
}

.pkp_footer_content p strong {
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure all footer text and links are white */
.pkp_structure_footer_wrapper a,
.pkp_structure_footer a,
.pkp_footer_content a,
.pkp_structure_footer_wrapper p,
.pkp_structure_footer p,
.pkp_footer_content p {
    color: white !important;
}

/* Footer link hover effect */
.pkp_structure_footer_wrapper a:hover,
.pkp_structure_footer a:hover,
.pkp_footer_content a:hover {
    color: #eda82c !important;
}

/* Add copyright text to footer - dynamic year via JavaScript */
.pkp_structure_footer_wrapper::after {
    content: attr(data-copyright);
    display: block;
    text-align: center;
    color: white;
    padding: 10px 20px;
    font-size: 11px;
    background-color: #222222;
    margin: 0 !important;
}

/* Fallback if JavaScript is disabled */
.pkp_structure_footer_wrapper:not([data-copyright])::after {
    content: "© Copyright 2026. All Rights Reserved. International Research Journal of Multidisciplinary Studies and Excellence.";
}

/* Ensure footer is at the very bottom with no space */
body {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

html {
    margin: 0 !important;
    padding: 0 !important;
}

/* Responsive footer logo */
@media (max-width: 768px) {
    .pkp_footer_content::before {
        width: 150px;
        height: 40px;
        margin-bottom: 15px;
        margin-right: 0;
    }

    .pkp_footer_content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }

    .pkp_footer_content p {
        text-align: center !important;
        margin-top: 15px !important;
    }

    .pkp_structure_footer_wrapper::after {
        font-size: 12px;
        padding: 15px;
    }
}

/* 4-Column Footer Layout - Compact */
.pkp_structure_footer_wrapper {
    background-color: #16355f !important;
}

.pkp_structure_footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 25px 40px;
}

.pkp_footer_columns {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
}

.pkp_footer_col {
    padding: 0 15px;
}

/* Column 1: Logo */
.pkp_footer_col_logo {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 15%;
    padding-left: 0;
}

.pkp_footer_col_logo .footer_logo {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

/* Column 2: Links */
.pkp_footer_col_links {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
    width: 22%;
}

.pkp_footer_col_links h4 {
    color: #eda82c;
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 8px 0;
    font-family: 'Merriweather', serif;
}

.pkp_footer_col_links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 11px;
    font-family: 'Merriweather', serif;
    transition: color 0.3s ease;
    line-height: 1.4;
}

.pkp_footer_col_links a:hover {
    color: #eda82c;
}

/* Column 3: Information */
.pkp_footer_col_info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
    width: 18%;
}

.pkp_footer_col_info h4 {
    color: #eda82c;
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 8px 0;
    font-family: 'Merriweather', serif;
}

.pkp_footer_col_info a {
    color: #ffffff;
    text-decoration: none;
    font-size: 11px;
    font-family: 'Merriweather', serif;
    transition: color 0.3s ease;
    line-height: 1.4;
}

.pkp_footer_col_info a:hover {
    color: #eda82c;
}

/* Column 4: Address */
.pkp_footer_col_address {
    width: 35%;
    text-align: right;
    padding-right: 0;
}

.pkp_footer_col_address h4 {
    color: #eda82c;
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 5px 0;
    font-family: 'Merriweather', serif;
    line-height: 1.3;
}

.pkp_footer_col_address p {
    color: #ffffff;
    font-size: 11px;
    font-family: 'Merriweather', serif;
    line-height: 1.5;
    margin: 0;
}

.pkp_footer_col_address a {
    color: #00b0f0;
    text-decoration: none;
    font-size: 11px;
}

.pkp_footer_col_address a:hover {
    color: #eda82c;
}

/* Mobile Responsive Footer */
@media (max-width: 768px) {
    .pkp_footer_columns {
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        text-align: center;
        gap: 20px;
    }

    .pkp_footer_col {
        width: 100% !important;
        padding: 0;
    }

    .pkp_footer_col_logo {
        justify-content: center;
    }

    .pkp_footer_col_links {
        align-items: center;
    }

    .pkp_footer_col_info {
        align-items: center;
    }

    .pkp_footer_col_address {
        text-align: center;
    }
}

/* ============================================
 * OJS REGISTRATION FORM
 * Targets: /index.php/irjmse/user/register
 * Appended 2026-05-11
 * ============================================ */
.pkp_op_register .page_register {
    max-width: 760px;
    margin: 30px auto 50px;
    padding: 32px 40px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid #ebeef2;
}
.pkp_op_register .page_register .cmp_breadcrumbs {
    margin-bottom: 14px;
    font-size: 13px;
    color: #6b7480;
}
.pkp_op_register .page_register .cmp_breadcrumbs a {
    color: #3399cc;
    text-decoration: none;
}
.pkp_op_register .page_register .cmp_breadcrumbs a:hover {
    text-decoration: underline;
}
.pkp_op_register .page_register > h1 {
    margin: 0 0 6px 0;
    font-size: 30px;
    font-weight: 700;
    color: #1a4a78;
    text-align: center;
}
.pkp_op_register .page_register > p {
    text-align: center;
    color: #6b7480;
    font-size: 13px;
    margin: 0 0 26px 0;
}
.pkp_op_register .page_register > p .required {
    color: #d73a49;
    font-weight: 600;
}

/* Fieldsets as soft cards */
.pkp_op_register .cmp_form.register fieldset {
    margin: 0 0 18px 0;
    padding: 20px 24px 16px 24px;
    border: 1px solid #e5e9ee;
    border-radius: 8px;
    background: #fafbfc;
}
.pkp_op_register .cmp_form.register fieldset > legend {
    padding: 0 10px;
    font-weight: 700;
    color: #1a4a78;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.pkp_op_register .cmp_form.register fieldset.consent,
.pkp_op_register .cmp_form.register fieldset.reviewer {
    background: #ffffff;
}

/* Two-column grid for identity (first/last name) and login (password pair) on desktop */
@media (min-width: 600px) {
    .pkp_op_register .cmp_form.register fieldset.identity > .fields,
    .pkp_op_register .cmp_form.register fieldset.login > .fields {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 18px;
    }
    .pkp_op_register .cmp_form.register fieldset.identity > .fields .affiliation,
    .pkp_op_register .cmp_form.register fieldset.identity > .fields .country,
    .pkp_op_register .cmp_form.register fieldset.login > .fields .email,
    .pkp_op_register .cmp_form.register fieldset.login > .fields .username {
        grid-column: 1 / -1;
    }
}

/* Mobile single-column spacing */
.pkp_op_register .cmp_form.register fieldset > .fields > div {
    margin-bottom: 14px;
}
.pkp_op_register .cmp_form.register fieldset > .fields > div:last-child {
    margin-bottom: 0;
}
@media (min-width: 600px) {
    .pkp_op_register .cmp_form.register fieldset.identity > .fields > div,
    .pkp_op_register .cmp_form.register fieldset.login > .fields > div {
        margin-bottom: 0;
    }
}

/* Labels */
.pkp_op_register .cmp_form.register label .label {
    display: block;
    font-weight: 600;
    color: #4a4a4a;
    font-size: 13px;
    margin-bottom: 5px;
}
.pkp_op_register .cmp_form.register label .label .required {
    color: #d73a49;
    margin-left: 2px;
    font-weight: 700;
}

/* Inputs + select */
.pkp_op_register .cmp_form.register input[type="text"],
.pkp_op_register .cmp_form.register input[type="email"],
.pkp_op_register .cmp_form.register input[type="password"],
.pkp_op_register .cmp_form.register select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    background: #ffffff;
    font-size: 14px;
    color: #24292f;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    font-family: inherit;
}
.pkp_op_register .cmp_form.register input[type="text"]:focus,
.pkp_op_register .cmp_form.register input[type="email"]:focus,
.pkp_op_register .cmp_form.register input[type="password"]:focus,
.pkp_op_register .cmp_form.register select:focus {
    border-color: #3399cc;
    outline: none;
    box-shadow: 0 0 0 3px rgba(51, 153, 204, 0.15);
}

/* Checkbox rows (consent + reviewer opt-in) */
.pkp_op_register .cmp_form.register fieldset.consent .optin label,
.pkp_op_register .cmp_form.register fieldset.reviewer .optin label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #444;
    line-height: 1.5;
    cursor: pointer;
    font-weight: 400;
}
.pkp_op_register .cmp_form.register fieldset.consent .optin input[type="checkbox"],
.pkp_op_register .cmp_form.register fieldset.reviewer .optin input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: #3399cc;
    width: 16px;
    height: 16px;
}
.pkp_op_register .cmp_form.register fieldset.consent .fields + .fields {
    margin-top: 10px;
}
.pkp_op_register .cmp_form.register fieldset.reviewer .reviewer_interests {
    margin-top: 14px;
}
.pkp_op_register .cmp_form.register fieldset.consent a {
    color: #3399cc;
    text-decoration: underline;
}

.pkp_op_register .cmp_form.register .required {
    color: #d73a49;
}

/* Submit / login buttons row */
.pkp_op_register .cmp_form.register .buttons {
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}
.pkp_op_register .cmp_form.register .buttons .submit,
.pkp_op_register .cmp_form.register .buttons button[type="submit"] {
    background: linear-gradient(135deg, #3399cc 0%, #1a73b8 100%);
    color: #ffffff;
    border: none;
    padding: 12px 40px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px rgba(51, 153, 204, 0.3);
    letter-spacing: 0.3px;
}
.pkp_op_register .cmp_form.register .buttons .submit:hover,
.pkp_op_register .cmp_form.register .buttons button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(51, 153, 204, 0.42);
}
.pkp_op_register .cmp_form.register .buttons a {
    color: #586069;
    text-decoration: none;
    font-size: 14px;
}
.pkp_op_register .cmp_form.register .buttons a:hover {
    color: #3399cc;
    text-decoration: underline;
}

/* Errors */
.pkp_op_register .cmp_form.register .pkp_form_error,
.pkp_op_register .cmp_form.register .error {
    color: #d73a49;
    font-size: 13px;
    margin-top: 4px;
}

/* Mobile tweaks */
@media (max-width: 599px) {
    .pkp_op_register .page_register {
        margin: 12px 8px 30px;
        padding: 22px 18px;
        border-radius: 8px;
    }
    .pkp_op_register .page_register > h1 {
        font-size: 24px;
    }
    .pkp_op_register .cmp_form.register fieldset {
        padding: 14px 16px 12px;
    }
    .pkp_op_register .cmp_form.register .buttons {
        flex-direction: column-reverse;
        gap: 12px;
    }
    .pkp_op_register .cmp_form.register .buttons .submit {
        width: 100%;
        padding: 14px;
    }
}

/* === Registration updates + global button parity (2026-05-11) === */

/* Affiliation + Country share a row; Email + Username share a row */
@media (min-width: 600px) {
    .pkp_op_register .cmp_form.register fieldset.identity > .fields .affiliation,
    .pkp_op_register .cmp_form.register fieldset.identity > .fields .country,
    .pkp_op_register .cmp_form.register fieldset.login > .fields .email,
    .pkp_op_register .cmp_form.register fieldset.login > .fields .username {
        grid-column: auto;
    }
}

/* Merge consent + reviewer fieldsets into one continuous card */
.pkp_op_register .cmp_form.register fieldset.consent {
    margin-bottom: 0;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding-bottom: 12px;
    background: #fafbfc;
}
.pkp_op_register .cmp_form.register fieldset.reviewer {
    margin-top: 0;
    border-top: 1px dashed #e0e4e9;
    border-radius: 0 0 8px 8px;
    padding-top: 14px;
    background: #fafbfc;
}
.pkp_op_register .cmp_form.register fieldset.consent .fields + .fields {
    margin-top: 8px;
}
.pkp_op_register .cmp_form.register fieldset.reviewer .reviewer_interests {
    margin-top: 12px;
}

/* Global primary-button styling across all frontend pages.
   Scoped to .page (visitor-facing) so admin/editor UI is untouched.
   Excludes secondary/cancel variants. */
.page button[type="submit"]:not(.pkp_button_secondary):not(.cancel):not(#rzp-button),
.page input[type="submit"]:not(.pkp_button_secondary):not(.cancel),
.page .pkp_button:not(.pkp_button_secondary):not(.cancel),
.page button.submit:not(#rzp-button),
.page .buttons .submit:not(#rzp-button) {
    background: linear-gradient(135deg, #3399cc 0%, #1a73b8 100%);
    color: #ffffff !important;
    border: none;
    padding: 12px 32px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px rgba(51, 153, 204, 0.3);
    letter-spacing: 0.3px;
    text-decoration: none !important;
    display: inline-block;
    line-height: 1.2;
}
.page button[type="submit"]:not(.pkp_button_secondary):not(.cancel):not(#rzp-button):hover,
.page input[type="submit"]:not(.pkp_button_secondary):not(.cancel):hover,
.page .pkp_button:not(.pkp_button_secondary):not(.cancel):hover,
.page button.submit:not(#rzp-button):hover,
.page .buttons .submit:not(#rzp-button):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(51, 153, 204, 0.42);
}

/* ============================================
 * STANDARD BUTTON SYSTEM (single source of truth)
 * Tokens live as CSS variables on :root so tuning
 * the brand later is a one-line change.
 * Scope: visitor-facing pages (.page ancestor)
 * Exclusions: #rzp-button (carries inline overrides
 *             for the Razorpay flow).
 * Appended 2026-05-11.
 * ============================================ */

:root {
    --btn-primary-bg:          linear-gradient(135deg, #3399cc 0%, #1a73b8 100%);
    --btn-primary-bg-hover:    linear-gradient(135deg, #2d8cc0 0%, #1665a8 100%);
    --btn-primary-shadow:      0 2px 8px rgba(51, 153, 204, 0.3);
    --btn-primary-shadow-hov:  0 4px 14px rgba(51, 153, 204, 0.42);
    --btn-primary-color:       #ffffff;
    --btn-radius:              6px;
    --btn-padding-y:           12px;
    --btn-padding-x:           32px;
    --btn-font-size:           15px;
    --btn-font-weight:         600;
    --btn-letter-spacing:      0.3px;
}

/* PRIMARY -------------------------------------- */
.btn-primary,
.page button[type="submit"]:not(.cancel):not(.pkp_button_secondary):not(#rzp-button),
.page input[type="submit"]:not(.cancel):not(.pkp_button_secondary),
.page .pkp_button:not(.cancel):not(.pkp_button_secondary),
.page button.submit:not(#rzp-button),
.page .cmp_form .buttons .submit:not(#rzp-button),
.pkp_op_register .cmp_form.register .buttons .submit {
    display: inline-block;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    border: none;
    border-radius: var(--btn-radius);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-color) !important;
    font-family: inherit;
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    letter-spacing: var(--btn-letter-spacing);
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: var(--btn-primary-shadow);
    transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.2s ease;
}
.btn-primary:hover,
.page button[type="submit"]:not(.cancel):not(.pkp_button_secondary):not(#rzp-button):hover,
.page input[type="submit"]:not(.cancel):not(.pkp_button_secondary):hover,
.page .pkp_button:not(.cancel):not(.pkp_button_secondary):hover,
.page button.submit:not(#rzp-button):hover,
.page .cmp_form .buttons .submit:not(#rzp-button):hover,
.pkp_op_register .cmp_form.register .buttons .submit:hover {
    transform: translateY(-1px);
    background: var(--btn-primary-bg-hover);
    box-shadow: var(--btn-primary-shadow-hov);
}
.btn-primary:active,
.page button[type="submit"]:not(.cancel):not(.pkp_button_secondary):not(#rzp-button):active,
.page .cmp_form .buttons .submit:not(#rzp-button):active,
.pkp_op_register .cmp_form.register .buttons .submit:active {
    transform: translateY(0);
    box-shadow: var(--btn-primary-shadow);
}
.btn-primary:focus-visible,
.page button[type="submit"]:focus-visible,
.page input[type="submit"]:focus-visible,
.page button.submit:focus-visible,
.page .submit:focus-visible {
    outline: 3px solid rgba(51, 153, 204, 0.35);
    outline-offset: 2px;
}
.btn-primary:disabled,
.page button[type="submit"]:disabled,
.page input[type="submit"]:disabled,
.page button.submit:disabled,
.page .submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* SECONDARY (text-link style for cancel / inline login) -- */
.btn-secondary,
.pkp_button_secondary,
.page .cmp_form .buttons .cancel,
.page .cmp_form .buttons a:not(.submit):not(.pkp_button):not(.btn-primary) {
    display: inline-block;
    padding: 10px 18px;
    background: transparent;
    color: #586069 !important;
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    transition: color 0.15s ease, background 0.15s ease;
}
.btn-secondary:hover,
.pkp_button_secondary:hover,
.page .cmp_form .buttons .cancel:hover,
.page .cmp_form .buttons a:not(.submit):not(.pkp_button):not(.btn-primary):hover {
    color: #1a73b8 !important;
    background: rgba(51, 153, 204, 0.08);
}

/* ============================================
 * THEME COLOR ALIGNMENT
 * Replaces my earlier placeholder blues with
 * the PKP Default theme's actual brand palette
 * (#006798 primary, #008acb accent) so all
 * buttons and form accents match the site.
 * Appended 2026-05-11.
 * ============================================ */

:root {
    /* Standard button tokens - now sourced from theme palette */
    --btn-primary-bg:          linear-gradient(135deg, #008acb 0%, #006798 100%);
    --btn-primary-bg-hover:    linear-gradient(135deg, #0078b3 0%, #00557f 100%);
    --btn-primary-shadow:      0 2px 8px rgba(0, 103, 152, 0.3);
    --btn-primary-shadow-hov:  0 4px 14px rgba(0, 103, 152, 0.42);
}

/* Registration page accents (override my earlier #3399cc/#1a4a78 placeholders) */
.pkp_op_register .page_register > h1 {
    color: #006798;
}
.pkp_op_register .page_register .cmp_breadcrumbs a,
.pkp_op_register .cmp_form.register fieldset.consent a,
.pkp_op_register .cmp_form.register .buttons a:hover {
    color: #006798;
}
.pkp_op_register .cmp_form.register fieldset > legend {
    color: #006798;
}
.pkp_op_register .cmp_form.register input[type="text"]:focus,
.pkp_op_register .cmp_form.register input[type="email"]:focus,
.pkp_op_register .cmp_form.register input[type="password"]:focus,
.pkp_op_register .cmp_form.register select:focus {
    border-color: #008acb;
    box-shadow: 0 0 0 3px rgba(0, 138, 203, 0.18);
}
.pkp_op_register .cmp_form.register fieldset.consent .optin input[type="checkbox"],
.pkp_op_register .cmp_form.register fieldset.reviewer .optin input[type="checkbox"] {
    accent-color: #006798;
}

/* Secondary button hover - use theme color */
.btn-secondary:hover,
.pkp_button_secondary:hover,
.page .cmp_form .buttons .cancel:hover,
.page .cmp_form .buttons a:not(.submit):not(.pkp_button):not(.btn-primary):hover {
    color: #006798 !important;
    background: rgba(0, 103, 152, 0.07);
}

/* Focus ring on primary buttons */
.btn-primary:focus-visible,
.page button[type="submit"]:focus-visible,
.page input[type="submit"]:focus-visible,
.page button.submit:focus-visible,
.page .submit:focus-visible {
    outline: 3px solid rgba(0, 103, 152, 0.4);
}

/* ============================================
 * BRAND PALETTE (final override)
 * Primary: #16355f (navy) + #00b0f0 (cyan)
 * Hover:   #eda82c (orange/amber)
 * All earlier #3399cc / #006798 placeholders
 * are superseded by these via :root + accent
 * overrides on the register form.
 * Appended 2026-05-11.
 * ============================================ */

:root {
    --btn-primary-bg:          linear-gradient(135deg, #00b0f0 0%, #16355f 100%);
    --btn-primary-bg-hover:    #eda82c;
    --btn-primary-shadow:      0 2px 8px rgba(22, 53, 95, 0.3);
    --btn-primary-shadow-hov:  0 4px 14px rgba(237, 168, 44, 0.5);
}

/* On orange hover keep text white + tighten the shadow tone */
.btn-primary:hover,
.page button[type="submit"]:not(.cancel):not(.pkp_button_secondary):not(#rzp-button):hover,
.page input[type="submit"]:not(.cancel):not(.pkp_button_secondary):hover,
.page .pkp_button:not(.cancel):not(.pkp_button_secondary):hover,
.page button.submit:not(#rzp-button):hover,
.page .cmp_form .buttons .submit:not(#rzp-button):hover,
.pkp_op_register .cmp_form.register .buttons .submit:hover {
    color: #ffffff !important;
}

/* Registration page accents */
.pkp_op_register .page_register > h1,
.pkp_op_register .cmp_form.register fieldset > legend {
    color: #16355f;
}
.pkp_op_register .page_register .cmp_breadcrumbs a,
.pkp_op_register .cmp_form.register fieldset.consent a {
    color: #00b0f0;
}
.pkp_op_register .page_register .cmp_breadcrumbs a:hover,
.pkp_op_register .cmp_form.register fieldset.consent a:hover {
    color: #eda82c;
}
.pkp_op_register .cmp_form.register input[type="text"]:focus,
.pkp_op_register .cmp_form.register input[type="email"]:focus,
.pkp_op_register .cmp_form.register input[type="password"]:focus,
.pkp_op_register .cmp_form.register select:focus {
    border-color: #00b0f0;
    box-shadow: 0 0 0 3px rgba(0, 176, 240, 0.2);
}
.pkp_op_register .cmp_form.register fieldset.consent .optin input[type="checkbox"],
.pkp_op_register .cmp_form.register fieldset.reviewer .optin input[type="checkbox"] {
    accent-color: #16355f;
}

/* Secondary buttons: hover lands on the brand accent (orange) */
.btn-secondary:hover,
.pkp_button_secondary:hover,
.page .cmp_form .buttons .cancel:hover,
.page .cmp_form .buttons a:not(.submit):not(.pkp_button):not(.btn-primary):hover {
    color: #eda82c !important;
    background: rgba(237, 168, 44, 0.1);
}

/* Focus ring on primary buttons - cyan glow */
.btn-primary:focus-visible,
.page button[type="submit"]:focus-visible,
.page input[type="submit"]:focus-visible,
.page button.submit:focus-visible,
.page .submit:focus-visible {
    outline: 3px solid rgba(0, 176, 240, 0.45);
}

/* ============================================
 * TYPOGRAPHY
 * Body / long-form reading: Merriweather (serif)
 * UI / headings / buttons / forms: Inter (sans)
 * Fonts loaded via Google Fonts <link> injected
 * into the journal's customHeaders.
 * Appended 2026-05-11.
 * ============================================ */

:root {
    --font-body: 'Merriweather', Georgia, 'Times New Roman', serif;
    --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body,
.pkp_page_content,
.pkp_structure_main article,
.pkp_structure_main p,
.pkp_structure_main li,
.pkp_structure_main dd,
.pkp_structure_main dt,
.obj_article_details .item,
.obj_article_details .item.abstract,
.obj_article_details .item.references,
.obj_galley_link,
blockquote {
    font-family: var(--font-body);
    line-height: 1.65;
}

/* UI surfaces use Inter */
h1, h2, h3, h4, h5, h6,
.pkp_structure_head, .pkp_site_name, .pkp_navigation_user, .pkp_site_nav,
.pkp_navigation_primary, .pkp_structure_footer, .pkp_brand_footer,
nav, .cmp_breadcrumbs,
.pkp_block, .pkp_block .title,
.cmp_form, .cmp_form label, .cmp_form .label,
.cmp_form .buttons, .buttons,
button, input, select, textarea,
.pkp_button, .btn-primary, .btn-secondary,
.page_register > p,
.payment-details, #billing-form-container,
.proc-indian-charges, .proc-intl-charges {
    font-family: var(--font-ui);
}

/* Inter looks best with slightly looser letter-spacing on headings */
h1, h2, h3 { letter-spacing: -0.01em; font-weight: 700; }

/* Body paragraphs benefit from Merriweather at a comfortable size */
.pkp_structure_main p,
.obj_article_details .item.abstract,
.obj_article_details .item.references {
    font-size: 16px;
}

/* ============================================
 * LOGIN PAGE
 * Matches the same card-style as register.
 * Primary submit button inherits from the
 * standard button system (.btn-primary).
 * Appended 2026-05-11.
 * ============================================ */

.pkp_op_index.pkp_page_login .page_login {
    max-width: 460px;
    margin: 30px auto 50px;
    padding: 32px 36px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid #ebeef2;
}

.pkp_op_index.pkp_page_login .page_login .cmp_breadcrumbs {
    margin-bottom: 14px;
    font-size: 13px;
    color: #6b7480;
}
.pkp_op_index.pkp_page_login .page_login .cmp_breadcrumbs a {
    color: #00b0f0;
    text-decoration: none;
}
.pkp_op_index.pkp_page_login .page_login .cmp_breadcrumbs a:hover {
    color: #eda82c;
}

.pkp_op_index.pkp_page_login .page_login > h1 {
    margin: 0 0 6px 0;
    font-size: 28px;
    font-weight: 700;
    color: #16355f;
    text-align: center;
}
.pkp_op_index.pkp_page_login .page_login > p {
    text-align: center;
    color: #6b7480;
    font-size: 13px;
    margin: 0 0 22px 0;
}
.pkp_op_index.pkp_page_login .page_login > p .required {
    color: #d73a49;
    font-weight: 600;
}

/* Fieldset is just a transparent grouping wrapper */
.pkp_op_index.pkp_page_login .cmp_form.login fieldset {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

.pkp_op_index.pkp_page_login .cmp_form.login fieldset > .username,
.pkp_op_index.pkp_page_login .cmp_form.login fieldset > .password,
.pkp_op_index.pkp_page_login .cmp_form.login fieldset > .remember {
    margin-bottom: 16px;
}
.pkp_op_index.pkp_page_login .cmp_form.login fieldset > .remember {
    margin-bottom: 4px;
}

.pkp_op_index.pkp_page_login .cmp_form.login label .label {
    display: block;
    font-weight: 600;
    color: #4a4a4a;
    font-size: 13px;
    margin-bottom: 5px;
}
.pkp_op_index.pkp_page_login .cmp_form.login label .label .required {
    color: #d73a49;
    margin-left: 2px;
    font-weight: 700;
}

.pkp_op_index.pkp_page_login .cmp_form.login input[type="text"],
.pkp_op_index.pkp_page_login .cmp_form.login input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    background: #ffffff;
    font-size: 14px;
    color: #24292f;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    font-family: inherit;
}
.pkp_op_index.pkp_page_login .cmp_form.login input[type="text"]:focus,
.pkp_op_index.pkp_page_login .cmp_form.login input[type="password"]:focus {
    border-color: #00b0f0;
    box-shadow: 0 0 0 3px rgba(0, 176, 240, 0.2);
    outline: none;
}

/* "Forgot your password?" link inside .password label */
.pkp_op_index.pkp_page_login .cmp_form.login .password label a {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    color: #00b0f0;
    text-decoration: none;
}
.pkp_op_index.pkp_page_login .cmp_form.login .password label a:hover {
    color: #eda82c;
    text-decoration: underline;
}

/* Remember-me checkbox row */
.pkp_op_index.pkp_page_login .cmp_form.login .remember label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #444;
    cursor: pointer;
    font-weight: 400;
}
.pkp_op_index.pkp_page_login .cmp_form.login .remember .label {
    margin-bottom: 0;
    font-weight: 400;
    color: #444;
    display: inline;
}
.pkp_op_index.pkp_page_login .cmp_form.login .remember input[type="checkbox"] {
    margin: 0;
    accent-color: #16355f;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Buttons row */
.pkp_op_index.pkp_page_login .cmp_form.login .buttons {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.pkp_op_index.pkp_page_login .cmp_form.login .buttons .submit {
    flex: 1;
}
.pkp_op_index.pkp_page_login .cmp_form.login .buttons .register {
    padding: 10px 18px;
    background: transparent;
    color: #586069 !important;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.pkp_op_index.pkp_page_login .cmp_form.login .buttons .register:hover {
    color: #eda82c !important;
    border-color: #eda82c;
    background: rgba(237, 168, 44, 0.06);
}

/* Mobile */
@media (max-width: 599px) {
    .pkp_op_index.pkp_page_login .page_login {
        margin: 12px 8px 30px;
        padding: 22px 18px;
        border-radius: 8px;
    }
    .pkp_op_index.pkp_page_login .page_login > h1 {
        font-size: 22px;
    }
    .pkp_op_index.pkp_page_login .cmp_form.login .buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .pkp_op_index.pkp_page_login .cmp_form.login .buttons .register {
        text-align: center;
    }
}

/* === Login field width fix (2026-05-11) === */

/* The wrapping <label> defaults to display:inline, which prevents
   the input's width:100% from spanning the card. Force block. */
.pkp_op_index.pkp_page_login .cmp_form.login .username > label,
.pkp_op_index.pkp_page_login .cmp_form.login .password > label,
.pkp_op_index.pkp_page_login .cmp_form.login .remember > label {
    display: block;
    width: 100%;
}

/* Same treatment for the register form to be consistent */
.pkp_op_register .cmp_form.register .username > label,
.pkp_op_register .cmp_form.register .password > label,
.pkp_op_register .cmp_form.register .email > label,
.pkp_op_register .cmp_form.register .given_name > label,
.pkp_op_register .cmp_form.register .family_name > label,
.pkp_op_register .cmp_form.register .affiliation > label,
.pkp_op_register .cmp_form.register .country > label,
.pkp_op_register .cmp_form.register .reviewer_interests > label {
    display: block;
    width: 100%;
}

/* "Forgot your password?" sits on its own line below the password input */
.pkp_op_index.pkp_page_login .cmp_form.login .password label a {
    display: block;
    margin-top: 8px;
}

/* === Override PKP Default theme width constraints (2026-05-11) === */

/* Theme has `.page_login .login { max-width: 17em }` which clamps the
   entire login form to ~272px. Lift it so the form fills our card. */
.pkp_op_index.pkp_page_login .page_login .cmp_form.login {
    max-width: none !important;
    width: 100%;
    margin-bottom: 0;
}

/* Theme has `.cmp_form input { max-width: 20em }` capping each input.
   Lift on both login and register so inputs respect their container. */
.pkp_op_index.pkp_page_login .cmp_form.login input[type="text"],
.pkp_op_index.pkp_page_login .cmp_form.login input[type="password"],
.pkp_op_register .cmp_form.register input[type="text"],
.pkp_op_register .cmp_form.register input[type="email"],
.pkp_op_register .cmp_form.register input[type="password"],
.pkp_op_register .cmp_form.register select {
    max-width: none !important;
    width: 100%;
}

/* Theme also right-floats login button. Restore normal flex layout
   so our buttons row (submit + register) sits naturally. */
.pkp_op_index.pkp_page_login .cmp_form.login .buttons button {
    float: none;
}

/* === Select dropdown styling - normalize across browsers + theme override (2026-05-11) === */
.pkp_op_register .cmp_form.register select,
.pkp_op_index.pkp_page_login .cmp_form.login select,
.page .cmp_form select {
    height: auto !important;
    min-height: 42px;
    line-height: 1.4 !important;
    padding: 9px 36px 9px 12px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2316355f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
    background-color: #ffffff;
    font-size: 14px;
    color: #24292f;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Focus state keeps the custom arrow visible */
.pkp_op_register .cmp_form.register select:focus,
.pkp_op_index.pkp_page_login .cmp_form.login select:focus {
    border-color: #00b0f0;
    box-shadow: 0 0 0 3px rgba(0, 176, 240, 0.2);
    outline: none;
}

/* === Equalize input + select heights on register / login (2026-05-11) === */
.pkp_op_register .cmp_form.register input[type="text"],
.pkp_op_register .cmp_form.register input[type="email"],
.pkp_op_register .cmp_form.register input[type="password"],
.pkp_op_register .cmp_form.register select,
.pkp_op_index.pkp_page_login .cmp_form.login input[type="text"],
.pkp_op_index.pkp_page_login .cmp_form.login input[type="password"],
.pkp_op_index.pkp_page_login .cmp_form.login select {
    height: 40px !important;
    min-height: 40px !important;
    line-height: 1.4 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    box-sizing: border-box !important;
    font-size: 14px;
}

/* Selects need extra right padding for the chevron arrow */
.pkp_op_register .cmp_form.register select,
.pkp_op_index.pkp_page_login .cmp_form.login select,
.page .cmp_form select {
    padding-right: 36px !important;
}

/* ============================================
 * MODERN HEADER v2
 * Overrides PKP Default's float-based fixed-width
 * layout with a flex single-row design.
 * Keeps the navy brand background.
 * Appended 2026-05-11.
 * ============================================ */

/* Header band - navy, slight bottom highlight */
.pkp_structure_head {
    background-color: #16355f !important;
    border-bottom: 2px solid #00b0f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    position: sticky;
    top: 0;
    z-index: 200;
    padding: 0 !important;
}

/* Wrapper - override theme's fixed width + floats */
.pkp_structure_head .pkp_head_wrapper {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 10px 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: nowrap !important;
}
/* Kill the theme's clearfix pseudo-elements which break flex */
.pkp_structure_head .pkp_head_wrapper::before,
.pkp_structure_head .pkp_head_wrapper::after {
    display: none !important;
    content: none !important;
}

/* Logo - first column, fixed size */
.pkp_structure_head .pkp_site_name_wrapper {
    flex: 0 0 auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
}
.pkp_structure_head .pkp_site_name {
    margin: 0 !important;
    padding: 0 !important;
}
.pkp_structure_head .pkp_site_name a {
    display: block;
    line-height: 0;
}
.pkp_structure_head .pkp_site_name img {
    max-height: 54px !important;
    max-width: 320px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    display: block;
}

/* Hamburger - hidden by default, mobile only */
.pkp_structure_head .pkp_site_nav_toggle {
    display: none;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    margin-right: 10px;
    color: #ffffff;
    border-radius: 6px;
    font-size: 14px;
}

/* Site nav menu - middle + right columns */
.pkp_structure_head .pkp_site_nav_menu {
    flex: 1 !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}
.pkp_structure_head .pkp_navigation_primary_row {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    float: none !important;
}
.pkp_structure_head .pkp_navigation_primary_wrapper {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    float: none !important;
}

/* Primary navigation - horizontal list */
.pkp_structure_head .pkp_navigation_primary.pkp_nav_list {
    display: flex !important;
    align-items: center;
    gap: 2px !important;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    flex: 1;
    flex-wrap: wrap;
}
.pkp_structure_head .pkp_navigation_primary li {
    position: relative;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}
.pkp_structure_head .pkp_navigation_primary li > a {
    display: block !important;
    padding: 9px 14px !important;
    font-family: var(--font-ui);
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1.3;
    border-bottom: none !important;
}
.pkp_structure_head .pkp_navigation_primary li > a:hover,
.pkp_structure_head .pkp_navigation_primary li > a:focus,
.pkp_structure_head .pkp_navigation_primary li.show > a {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

/* Chevron on dropdown toggles */
.pkp_structure_head .pkp_navigation_primary li > a[data-toggle="dropdown"] {
    padding-right: 28px !important;
}
.pkp_structure_head .pkp_navigation_primary li > a[data-toggle="dropdown"]::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    opacity: 0.7;
}

/* Dropdown panels - white with shadow */
.pkp_structure_head .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff !important;
    border: 1px solid #e8ebf0 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    padding: 6px 0 !important;
    min-width: 220px;
    list-style: none;
    margin: 8px 0 0 0 !important;
    z-index: 300;
}
.pkp_structure_head .dropdown-menu li {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}
.pkp_structure_head .dropdown-menu li a {
    display: block !important;
    padding: 9px 18px !important;
    color: #495464 !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    transition: background 0.15s ease, color 0.15s ease;
    background: transparent !important;
}
.pkp_structure_head .dropdown-menu li a:hover,
.pkp_structure_head .dropdown-menu li a:focus {
    background: rgba(0, 176, 240, 0.08) !important;
    color: #00b0f0 !important;
}

/* Search - pill with icon + label */
.pkp_structure_head .pkp_navigation_search_wrapper {
    flex: 0 0 auto !important;
    float: none !important;
}
.pkp_structure_head .pkp_search.pkp_search_desktop {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 7px 14px !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border: none !important;
    transition: background 0.15s ease;
}
.pkp_structure_head .pkp_search.pkp_search_desktop:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}
.pkp_structure_head .pkp_search.pkp_search_desktop .fa-search {
    font-size: 12px;
}

/* User nav (right) - logged-in pill, or login/register buttons */
.pkp_structure_head .pkp_navigation_user_wrapper {
    flex: 0 0 auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.pkp_structure_head .pkp_navigation_user.pkp_nav_list {
    display: flex !important;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}
.pkp_structure_head .pkp_navigation_user li {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    list-style: none;
    position: relative;
}

/* Logged-in user pill */
.pkp_structure_head .pkp_navigation_user li.profile > a {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 7px 14px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background 0.15s ease;
}
.pkp_structure_head .pkp_navigation_user li.profile > a:hover,
.pkp_structure_head .pkp_navigation_user li.profile.show > a {
    background: rgba(255, 255, 255, 0.2) !important;
}
.pkp_structure_head .pkp_navigation_user li.profile > a::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: 0.8;
    margin-left: 2px;
}

/* Logged-out Login / Register links — turn into buttons */
.pkp_structure_head .pkp_navigation_user li:not(.profile) > a {
    display: inline-flex !important;
    align-items: center;
    padding: 7px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    transition: all 0.15s ease;
}
/* First (Login) - outlined */
.pkp_structure_head .pkp_navigation_user li:not(.profile):nth-of-type(1) > a {
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}
.pkp_structure_head .pkp_navigation_user li:not(.profile):nth-of-type(1) > a:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
}
/* Second (Register) - primary orange accent */
.pkp_structure_head .pkp_navigation_user li:not(.profile):nth-of-type(2) > a {
    background: #eda82c !important;
    color: #ffffff !important;
    border: 1px solid #eda82c !important;
}
.pkp_structure_head .pkp_navigation_user li:not(.profile):nth-of-type(2) > a:hover {
    background: #d99119 !important;
    border-color: #d99119 !important;
}

/* Task badge - orange */
.pkp_structure_head .task_count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    background: #eda82c;
    color: #ffffff;
    border-radius: 9px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
}

/* User dropdown aligns right */
.pkp_structure_head .pkp_navigation_user .dropdown-menu {
    right: 0 !important;
    left: auto !important;
    min-width: 220px;
}

/* Skip-to-content (a11y) */
.pkp_structure_head .cmp_skip_to_content a {
    position: absolute;
    left: -9999px;
}
.pkp_structure_head .cmp_skip_to_content a:focus {
    left: 12px;
    top: 12px;
    background: #ffffff;
    color: #16355f;
    padding: 10px 14px;
    border-radius: 6px;
    z-index: 1000;
    font-size: 13px;
    text-decoration: none;
    font-weight: 600;
}

/* Mobile collapse */
@media (max-width: 900px) {
    .pkp_structure_head .pkp_head_wrapper {
        flex-wrap: wrap !important;
        padding: 10px 14px !important;
        gap: 10px !important;
    }
    .pkp_structure_head .pkp_site_nav_toggle {
        display: inline-flex !important;
        align-items: center;
        order: 1;
    }
    .pkp_structure_head .pkp_site_name_wrapper {
        flex: 1 !important;
        order: 2;
        justify-content: center;
    }
    .pkp_structure_head .pkp_site_name img {
        max-height: 38px !important;
    }
    .pkp_structure_head .pkp_navigation_user_wrapper {
        order: 3;
    }
    .pkp_structure_head .pkp_site_nav_menu {
        order: 4;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
    }
    .pkp_structure_head .pkp_navigation_primary_row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .pkp_structure_head .pkp_navigation_primary.pkp_nav_list {
        flex-direction: column !important;
        width: 100%;
    }
    .pkp_structure_head .pkp_navigation_primary li > a {
        width: 100%;
        box-sizing: border-box;
    }
    .pkp_structure_head .dropdown-menu {
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        border-left: 2px solid rgba(255, 255, 255, 0.2) !important;
        margin-left: 14px !important;
        border-radius: 0 !important;
        background: rgba(255, 255, 255, 0.05) !important;
    }
    .pkp_structure_head .dropdown-menu li a {
        color: rgba(255, 255, 255, 0.85) !important;
    }
    .pkp_structure_head .dropdown-menu li a:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
    }
    .pkp_structure_head .pkp_search.pkp_search_desktop {
        width: 100%;
        justify-content: flex-start;
        padding: 10px 14px !important;
        border-radius: 6px !important;
    }
}

/* === Header layout fix - kill the theme's fixed widths on each child === */

/* Theme forces width:1160px on these at desktop, causing vertical stack.
   Reset to auto so flex on .pkp_head_wrapper can lay them out side by side. */
.pkp_structure_head .pkp_site_name_wrapper,
.pkp_structure_head .pkp_navigation_primary_wrapper,
.pkp_structure_head .pkp_navigation_primary,
.pkp_structure_head .pkp_navigation_user,
.pkp_structure_head .pkp_navigation_user_wrapper,
.pkp_structure_head .pkp_search_mobile,
.pkp_structure_head .pkp_navigation_search_wrapper {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
}

/* The primary nav UL needs to be a flex row (not just flex container - already set) */
.pkp_structure_head .pkp_navigation_primary.pkp_nav_list {
    flex-wrap: wrap !important;
}

/* The has_site_logo variant of pkp_head_wrapper has its own width rule -
   override that too. */
.has_site_logo .pkp_structure_head .pkp_head_wrapper,
.pkp_structure_head .pkp_head_wrapper {
    width: 100% !important;
    max-width: 1280px !important;
    padding: 10px 24px !important;
    padding-top: 10px !important;
}

/* === Pull pkp_navigation_user_wrapper out of theme's absolute positioning === */

/* PKP Default positions user-nav with `position:absolute` so it floats
   over the primary nav. Force static to participate in the flex row. */
.pkp_structure_head .pkp_navigation_user_wrapper {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
}

/* Ensure pkp_site_nav_menu is a real flex row so its two children
   (primary row + user wrapper) sit side by side */
.pkp_structure_head .pkp_site_nav_menu {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    max-width: none !important;
    flex: 1 1 auto !important;
}

/* Same for the primary_row wrapper */
.pkp_structure_head .pkp_navigation_primary_row {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

/* === Kill remaining theme positioning artifacts on header === */
.pkp_structure_head .pkp_navigation_user_wrapper {
    transform: none !important;
    z-index: auto !important;
    text-align: left !important;
    margin: 0 !important;
}
.pkp_structure_head .pkp_navigation_search_wrapper {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: none !important;
    padding-top: 0 !important;
}
.pkp_structure_head .pkp_navigation_user {
    position: static !important;
    width: auto !important;
    padding: 0 !important;
}

/* === Tighten gap between search and username pill === */
.pkp_structure_head .pkp_site_nav_menu {
    gap: 6px !important;
}
.pkp_structure_head .pkp_navigation_primary_wrapper {
    gap: 6px !important;
}

/* ============================================
 * SEARCH PAGE
 * Targets /index.php/irjmse/search.
 * Markup differs from login/register - the submit
 * button is wrapped in <div class="submit"> (not
 * .buttons) and the form has nested date-select
 * fieldsets for advanced filters.
 * Appended 2026-05-11.
 * ============================================ */

.page_search {
    max-width: 880px;
    margin: 30px auto 50px;
    padding: 32px 36px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid #ebeef2;
}

.page_search .cmp_breadcrumbs {
    margin-bottom: 14px;
    font-size: 13px;
    color: #6b7480;
}
.page_search .cmp_breadcrumbs a { color: #00b0f0; text-decoration: none; }
.page_search .cmp_breadcrumbs a:hover { color: #eda82c; }

.page_search > h1 {
    margin: 0 0 18px 0;
    font-size: 28px;
    font-weight: 700;
    color: #16355f;
    text-align: center;
}

/* Search box - hero-style large input */
.page_search .cmp_form .search_input {
    margin-bottom: 22px;
}
.page_search .cmp_form input.query,
.page_search .cmp_form input[type="text"]#query {
    width: 100% !important;
    max-width: none !important;
    height: 52px !important;
    min-height: 52px !important;
    line-height: 1.4 !important;
    padding: 12px 18px !important;
    border: 1px solid #d0d7de !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    font-size: 16px !important;
    color: #24292f !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.page_search .cmp_form input.query:focus,
.page_search .cmp_form input[type="text"]#query:focus {
    border-color: #00b0f0 !important;
    box-shadow: 0 0 0 3px rgba(0, 176, 240, 0.2) !important;
    outline: none;
}

/* Advanced filters card */
.page_search .cmp_form fieldset.search_advanced {
    margin: 0 0 22px 0;
    padding: 18px 22px;
    border: 1px solid #e5e9ee;
    border-radius: 8px;
    background: #fafbfc;
}
.page_search .cmp_form fieldset.search_advanced > legend {
    padding: 0 10px;
    font-weight: 700;
    color: #16355f;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Date range rows - flexible two-column */
.page_search .cmp_form .date_range {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 700px) {
    .page_search .cmp_form .date_range {
        grid-template-columns: 1fr 1fr;
    }
}
.page_search .cmp_form .date_range .from,
.page_search .cmp_form .date_range .to {
    min-width: 0;
}

/* Nested fieldsets inside date range */
.page_search .cmp_form .date_range fieldset {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #e8ebf0;
    border-radius: 6px;
    background: #ffffff;
}
.page_search .cmp_form .date_range fieldset legend {
    font-size: 12px;
    color: #16355f;
    font-weight: 600;
    padding: 0 6px;
}
.page_search .cmp_form .date_range fieldset label {
    display: inline-block;
    font-size: 12px;
    color: #6b7480;
    margin: 6px 4px 4px 0;
    font-weight: 500;
}
.page_search .cmp_form .date_range fieldset select {
    width: auto !important;
    max-width: none !important;
    min-width: 60px;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 6px 4px 0;
    padding: 4px 26px 4px 10px !important;
    font-size: 13px !important;
    border: 1px solid #d0d7de !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2316355f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px 10px;
}
.page_search .cmp_form .date_range fieldset select:focus {
    border-color: #00b0f0 !important;
    box-shadow: 0 0 0 2px rgba(0, 176, 240, 0.2) !important;
    outline: none;
}

/* Author filter row */
.page_search .cmp_form .author {
    margin-top: 16px;
}
.page_search .cmp_form .author > label.label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #4a4a4a;
    margin-bottom: 5px;
}
.page_search .cmp_form .author input[type="text"] {
    width: 100% !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    border: 1px solid #d0d7de !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}
.page_search .cmp_form .author input[type="text"]:focus {
    border-color: #00b0f0 !important;
    box-shadow: 0 0 0 3px rgba(0, 176, 240, 0.2) !important;
    outline: none;
}

/* Submit wrapper */
.page_search .cmp_form > .submit {
    text-align: center;
    margin-top: 8px;
}

/* The search submit button - explicit override since it lives in
   <div class="submit"> not .buttons, and theme styles win on
   .cmp_form .submit > button.submit (specificity 0,3,1). */
.page_search .cmp_form > .submit > button.submit,
.page_search .cmp_form > .submit > button[type="submit"] {
    background: linear-gradient(135deg, #00b0f0 0%, #16355f 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 40px !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(22, 53, 95, 0.3) !important;
    transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.2s ease !important;
    letter-spacing: 0.3px !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    display: inline-block !important;
    height: auto !important;
    min-height: 0 !important;
}
.page_search .cmp_form > .submit > button.submit:hover,
.page_search .cmp_form > .submit > button[type="submit"]:hover {
    transform: translateY(-1px);
    background: #eda82c !important;
    box-shadow: 0 4px 14px rgba(237, 168, 44, 0.5) !important;
}

/* Search results section */
.page_search .search_results {
    list-style: none;
    margin: 0;
    padding: 0;
}
.page_search .cmp_notification.notice {
    margin: 16px 0;
    padding: 14px 18px;
    background: #fafbfc;
    border: 1px solid #e5e9ee;
    border-radius: 6px;
    color: #586069;
    font-size: 14px;
}

/* Mobile */
@media (max-width: 599px) {
    .page_search {
        margin: 12px 8px 30px;
        padding: 18px;
        border-radius: 8px;
    }
    .page_search > h1 { font-size: 22px; }
}

/* === Kill theme's pseudo-element search icon on submit buttons === */
/* Theme adds a Font Awesome search magnifier (\f002) absolutely-positioned
   on .submit button via ::after at one breakpoint and ::before/::after on
   left at another. Causes overlapping icons and broken layout. */
.page_search .submit button::after,
.page_search .submit button::before,
.page_search .cmp_form .submit > button::after,
.page_search .cmp_form .submit > button::before,
.page .cmp_form .submit > button.submit::after,
.page .cmp_form .submit > button.submit::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Ensure search button is a clean, normally-positioned element */
.page_search .submit button,
.page_search .cmp_form .submit > button {
    position: relative !important;
    overflow: visible !important;
}

/* === Search page advanced filters - grid layout for date fields === */

/* Each date fieldset: legend on row 1 (full width),
   labels on row 2, selects on row 3, in 3 columns (Year / Month / Day) */
.page_search .cmp_form .date_range fieldset {
    display: grid !important;
    grid-template-columns: 1.2fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
    padding: 14px 16px;
}
.page_search .cmp_form .date_range fieldset legend {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0 0 6px 0;
    padding: 0 4px;
}
.page_search .cmp_form .date_range fieldset label[for*="Year"]   { grid-column: 1; grid-row: 2; }
.page_search .cmp_form .date_range fieldset select[id*="Year"]   { grid-column: 1; grid-row: 3; }
.page_search .cmp_form .date_range fieldset label[for*="Month"]  { grid-column: 2; grid-row: 2; }
.page_search .cmp_form .date_range fieldset select[id*="Month"]  { grid-column: 2; grid-row: 3; }
.page_search .cmp_form .date_range fieldset label[for*="Day"]    { grid-column: 3; grid-row: 2; }
.page_search .cmp_form .date_range fieldset select[id*="Day"]    { grid-column: 3; grid-row: 3; }

/* Labels: small uppercase tag */
.page_search .cmp_form .date_range fieldset label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #6b7480 !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin: 0 !important;
}

/* Selects: full width of their grid cell */
.page_search .cmp_form .date_range fieldset select {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* === Search advanced filters - two date cards side by side, selects inline === */

/* Override the previous grid attempt and use a flex row for the two cards */
.page_search .cmp_form .date_range {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
}
.page_search .cmp_form .date_range > .from,
.page_search .cmp_form .date_range > .to {
    flex: 1 1 280px;
    min-width: 0;
}

/* Each inner fieldset: block layout, selects inline */
.page_search .cmp_form .date_range fieldset {
    display: block !important;
    padding: 12px 14px;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
}
.page_search .cmp_form .date_range fieldset legend {
    display: block !important;
    grid-column: auto !important;
    grid-row: auto !important;
    margin: 0 0 8px 0;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: #16355f;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Keep Year/Month/Day labels screen-reader only (theme intent) */
.page_search .cmp_form .date_range fieldset label {
    position: absolute !important;
    left: -2000px !important;
    width: 1px !important;
    height: 1px !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Selects flow inline within each card */
.page_search .cmp_form .date_range fieldset select {
    display: inline-block !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 6px 28px 6px 10px !important;
    font-size: 13px !important;
    margin: 0 6px 6px 0 !important;
    width: auto !important;
    vertical-align: top;
    grid-column: auto !important;
    grid-row: auto !important;
}
.page_search .cmp_form .date_range fieldset select[id*="Year"]  { min-width: 86px; }
.page_search .cmp_form .date_range fieldset select[id*="Month"] { min-width: 94px; }
.page_search .cmp_form .date_range fieldset select[id*="Day"]   { min-width: 70px; }

/* Author row clearly separated below */
.page_search .cmp_form fieldset.search_advanced .author {
    margin-top: 18px;
    clear: both;
}

/* === Search advanced filters - kill theme floats === */
/* Theme uses .date_range {float:left; width:50%} and .author {float:right; width:50%}
   forcing the two date cards to stack inside left half and By Author to live in right half.
   Override so date_range is full-width (date cards side-by-side inside it), and By Author
   sits on its own row below. */
.page_search .cmp_form fieldset.search_advanced .date_range,
.page_search .cmp_form fieldset.search_advanced .author {
    float: none !important;
    width: 100% !important;
    clear: both !important;
}

/* === Date selects fill the card width proportionally === */
.page_search .cmp_form .date_range fieldset {
    display: grid !important;
    grid-template-columns: 1.1fr 1.4fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 4px;
    align-items: center;
}
.page_search .cmp_form .date_range fieldset legend {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0 0 6px 0;
}
.page_search .cmp_form .date_range fieldset select {
    grid-row: 2;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}
.page_search .cmp_form .date_range fieldset select[id*="Year"]  { grid-column: 1; }
.page_search .cmp_form .date_range fieldset select[id*="Month"] { grid-column: 2; }
.page_search .cmp_form .date_range fieldset select[id*="Day"]   { grid-column: 3; }

/* Author input fills the full card width too */
.page_search .cmp_form .author input[type="text"] {
    width: 100% !important;
    max-width: none !important;
}

/* === Final fix: force grid columns + rows with !important === */
.page_search .cmp_form .date_range fieldset {
    grid-template-columns: 1.1fr 1.4fr 1fr !important;
    grid-template-rows: auto auto !important;
    grid-auto-flow: row !important;
}

/* === Header dropdown chevron - replace fragile CSS-border chevrons with unicode === */

/* Primary nav dropdown toggles */
.pkp_structure_head .pkp_navigation_primary li > a[data-toggle="dropdown"] {
    padding-right: 26px !important;
    position: relative !important;
}
.pkp_structure_head .pkp_navigation_primary li > a[data-toggle="dropdown"]::after {
    content: "\25BE" !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    height: auto !important;
    border: none !important;
    background: none !important;
    font-size: 10px !important;
    line-height: 1 !important;
    opacity: 0.85;
    color: currentColor;
}
.pkp_structure_head .pkp_navigation_primary li.show > a[data-toggle="dropdown"]::after {
    content: "\25B4" !important;
    transform: translateY(-50%) !important;
}

/* User pill dropdown chevron */
.pkp_structure_head .pkp_navigation_user li.profile > a {
    position: relative;
    padding-right: 26px !important;
}
.pkp_structure_head .pkp_navigation_user li.profile > a::after {
    content: "\25BE" !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    height: auto !important;
    border: none !important;
    background: none !important;
    font-size: 10px !important;
    line-height: 1 !important;
    opacity: 0.85;
    color: currentColor;
    margin: 0 !important;
}
.pkp_structure_head .pkp_navigation_user li.profile.show > a::after {
    content: "\25B4" !important;
}

/* === Dropdown menu styling - clean overrides for theme leftovers === */

/* The whole dropdown panel */
.pkp_structure_head .dropdown-menu,
.pkp_structure_head .pkp_nav_list .dropdown-menu {
    width: auto !important;
    min-width: 220px !important;
    background: #ffffff !important;
    border: 1px solid #e8ebf0 !important;
    border-radius: 10px !important;
    padding: 6px 0 !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden;
}

/* Dropdown items - kill the theme's left-border trick */
.pkp_structure_head .dropdown-menu li,
.pkp_structure_head .pkp_nav_list .dropdown-menu li {
    display: block !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
.pkp_structure_head .dropdown-menu li a,
.pkp_structure_head .pkp_nav_list .dropdown-menu li a {
    display: block !important;
    padding: 10px 18px !important;
    color: #1f2937 !important;
    background: transparent !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    transition: background 0.12s ease, color 0.12s ease;
    line-height: 1.4;
}
.pkp_structure_head .dropdown-menu li a:hover,
.pkp_structure_head .dropdown-menu li a:focus,
.pkp_structure_head .pkp_nav_list .dropdown-menu li a:hover,
.pkp_structure_head .pkp_nav_list .dropdown-menu li a:focus {
    background: rgba(0, 176, 240, 0.1) !important;
    color: #00b0f0 !important;
    border: none !important;
    border-left: none !important;
    border-color: transparent !important;
    outline: 0;
}

/* First/last item rounded corners look weird with overflow:hidden on parent; reset */
.pkp_structure_head .dropdown-menu li:first-child a,
.pkp_structure_head .dropdown-menu li:last-child a {
    border-radius: 0 !important;
}

/* ============================================
 * DUAL-STATE HEADER
 * Top of page (no .is-scrolled): light header,
 * dark navy text/links, CSS-filtered logo.
 * Scrolled (.is-scrolled present): navy header
 * with white text (current style), slightly compact.
 * Transitions smoothly between the two.
 * Appended 2026-05-11.
 * ============================================ */

/* Smooth transitions */
.pkp_structure_head {
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.pkp_structure_head .pkp_head_wrapper {
    transition: padding 0.25s ease !important;
}
.pkp_structure_head .pkp_site_name img {
    transition: filter 0.3s ease, max-height 0.25s ease !important;
}
.pkp_structure_head .pkp_navigation_primary li > a,
.pkp_structure_head .pkp_search.pkp_search_desktop,
.pkp_structure_head .pkp_navigation_user li.profile > a {
    transition: background 0.2s ease, color 0.2s ease !important;
}

/* ===== TOP-OF-PAGE STATE (no .is-scrolled) ===== */
.pkp_structure_head:not(.is-scrolled) {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e8ebf0 !important;
    box-shadow: 0 1px 3px rgba(22, 53, 95, 0.04) !important;
}

/* Invert the logo so the white/light artwork reads as dark on white */
.pkp_structure_head:not(.is-scrolled) .pkp_site_name img {
    filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(1.1);
}

/* Primary nav text dark navy on light */
.pkp_structure_head:not(.is-scrolled) .pkp_navigation_primary li > a {
    color: #16355f !important;
}
.pkp_structure_head:not(.is-scrolled) .pkp_navigation_primary li > a:hover,
.pkp_structure_head:not(.is-scrolled) .pkp_navigation_primary li > a:focus,
.pkp_structure_head:not(.is-scrolled) .pkp_navigation_primary li.show > a {
    background: rgba(0, 176, 240, 0.1) !important;
    color: #00b0f0 !important;
}

/* Search pill on light bg */
.pkp_structure_head:not(.is-scrolled) .pkp_search.pkp_search_desktop {
    background: rgba(22, 53, 95, 0.06) !important;
    color: #16355f !important;
}
.pkp_structure_head:not(.is-scrolled) .pkp_search.pkp_search_desktop:hover {
    background: rgba(0, 176, 240, 0.12) !important;
    color: #00b0f0 !important;
}

/* User pill on light bg */
.pkp_structure_head:not(.is-scrolled) .pkp_navigation_user li.profile > a {
    background: rgba(22, 53, 95, 0.06) !important;
    color: #16355f !important;
}
.pkp_structure_head:not(.is-scrolled) .pkp_navigation_user li.profile > a:hover,
.pkp_structure_head:not(.is-scrolled) .pkp_navigation_user li.profile.show > a {
    background: rgba(22, 53, 95, 0.12) !important;
}

/* Logged-out Login button on light bg */
.pkp_structure_head:not(.is-scrolled) .pkp_navigation_user li:not(.profile):nth-of-type(1) > a {
    color: #16355f !important;
    border-color: rgba(22, 53, 95, 0.3) !important;
}
.pkp_structure_head:not(.is-scrolled) .pkp_navigation_user li:not(.profile):nth-of-type(1) > a:hover {
    background: rgba(22, 53, 95, 0.08) !important;
    border-color: rgba(22, 53, 95, 0.6) !important;
}
/* Register stays orange in both states */

/* Mobile hamburger on light bg */
.pkp_structure_head:not(.is-scrolled) .pkp_site_nav_toggle {
    background: rgba(22, 53, 95, 0.06);
    color: #16355f;
}

/* ===== SCROLLED STATE (.is-scrolled present) ===== */
.pkp_structure_head.is-scrolled .pkp_head_wrapper {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
.pkp_structure_head.is-scrolled .pkp_site_name img {
    max-height: 44px !important;
}

/* === Kill .pkp_site_nav_menu navy background - inherit from header parent === */
.pkp_structure_head .pkp_site_nav_menu {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

/* === Disable header height change between states (prevents reflow flicker) === */
.pkp_structure_head.is-scrolled .pkp_head_wrapper {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.pkp_structure_head.is-scrolled .pkp_site_name img {
    max-height: 54px !important;
}

/* === Drop the cyan border on header to eliminate any blue stripe === */
.pkp_structure_head {
    border-bottom: none !important;
}
.pkp_structure_head.is-scrolled {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.pkp_structure_head:not(.is-scrolled) {
    border-bottom: 1px solid #e8ebf0 !important;
}

/* === Aggressive: clear navy from every structural wrapper at top state === */
body.has_site_logo .pkp_structure_head:not(.is-scrolled),
body .pkp_structure_head:not(.is-scrolled),
html .pkp_structure_head:not(.is-scrolled) {
    background: #ffffff !important;
    background-color: #ffffff !important;
}
.pkp_structure_head:not(.is-scrolled) .pkp_head_wrapper,
.pkp_structure_head:not(.is-scrolled) .pkp_site_name_wrapper,
.pkp_structure_head:not(.is-scrolled) .pkp_site_nav_menu,
.pkp_structure_head:not(.is-scrolled) .pkp_navigation_primary_row,
.pkp_structure_head:not(.is-scrolled) .pkp_navigation_primary_wrapper,
.pkp_structure_head:not(.is-scrolled) .pkp_navigation_user_wrapper,
.pkp_structure_head:not(.is-scrolled) .pkp_navigation_primary,
.pkp_structure_head:not(.is-scrolled) .pkp_navigation_user {
    background: transparent !important;
    background-color: transparent !important;
}

/* === Simpler logo filter at top state - pure brightness(0) avoids hue artifacts === */
.pkp_structure_head:not(.is-scrolled) .pkp_site_name img {
    filter: brightness(0) !important;
}

/* === Kill the hamburger button navy square on desktop === */
/* PKP theme has .pkp_site_nav_toggle { position: absolute; background: #16355f }
   that shows as a navy square over the logo area on some breakpoints. */
.pkp_structure_head .pkp_site_nav_toggle {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
@media (min-width: 901px) {
    .pkp_structure_head .pkp_site_nav_toggle {
        display: none !important;
    }
}

/* === Force transparent on every element in the logo path === */
.pkp_structure_head .pkp_site_name_wrapper,
.pkp_structure_head .pkp_site_name_wrapper *,
.pkp_structure_head .pkp_site_name,
.pkp_structure_head .pkp_site_name *,
.pkp_structure_head .pkp_site_name a,
.pkp_structure_head .pkp_site_name a.is_img,
.pkp_structure_head .pkp_site_name img {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Keep the hamburger styling separate (it had transparent bg already) */
.pkp_structure_head .pkp_site_nav_toggle {
    background: transparent !important;
}

/* === Top-state header background swapped to soft gray === */
body.has_site_logo .pkp_structure_head:not(.is-scrolled),
body .pkp_structure_head:not(.is-scrolled),
html .pkp_structure_head:not(.is-scrolled) {
    background: #f6f7f8 !important;
    background-color: #f6f7f8 !important;
}

/* ============================================
 * #3 HOVER-TRIGGERED DROPDOWNS with fade
 * Always block (so transitions work), use
 * opacity + visibility + pointer-events to
 * show/hide. Works on both :hover and .show
 * (Bootstrap click-toggle still functional).
 * ============================================ */

.pkp_structure_head .dropdown-menu {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}

/* Show on hover OR when BS adds .show (click-toggle still works) */
.pkp_structure_head .pkp_navigation_primary li:hover > .dropdown-menu,
.pkp_structure_head .pkp_navigation_primary li.show > .dropdown-menu,
.pkp_structure_head .pkp_navigation_primary li:focus-within > .dropdown-menu,
.pkp_structure_head .pkp_navigation_user li:hover > .dropdown-menu,
.pkp_structure_head .pkp_navigation_user li.show > .dropdown-menu,
.pkp_structure_head .pkp_navigation_user li:focus-within > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Invisible hover-bridge so the 8px margin between trigger and panel
   does not break the hover chain when moving the cursor down. */
.pkp_structure_head .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
}

/* ============================================
 * #4 GLASSMORPHISM on top-state header
 * Soft frosted-glass with backdrop blur.
 * ============================================ */

body.has_site_logo .pkp_structure_head:not(.is-scrolled),
body .pkp_structure_head:not(.is-scrolled),
html .pkp_structure_head:not(.is-scrolled) {
    background: rgba(246, 247, 248, 0.7) !important;
    background-color: rgba(246, 247, 248, 0.7) !important;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
}

/* Scrolled state stays opaque navy - blur there reads odd */
.pkp_structure_head.is-scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ============================================
 * ACTIVE PAGE INDICATOR
 * Cyan underline pseudo-element on active link.
 * Uses ::before so it does not collide with the
 * dropdown chevron in ::after.
 * ============================================ */
.pkp_structure_head .pkp_navigation_primary li > a.is-active,
.pkp_structure_head .pkp_navigation_primary li.is-active > a,
.pkp_structure_head .pkp_navigation_primary li.is-active-parent > a {
    position: relative;
    color: #00b0f0 !important;
}
.pkp_structure_head .pkp_navigation_primary li > a.is-active::before,
.pkp_structure_head .pkp_navigation_primary li.is-active > a::before,
.pkp_structure_head .pkp_navigation_primary li.is-active-parent > a::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 3px;
    height: 2px;
    background: #00b0f0;
    border-radius: 1px;
}
/* Active dropdown item: cyan tint */
.pkp_structure_head .dropdown-menu li > a.is-active,
.pkp_structure_head .dropdown-menu li.is-active > a {
    background: rgba(0, 176, 240, 0.1) !important;
    color: #00b0f0 !important;
    font-weight: 600 !important;
}

/* ============================================
 * ALIGN SEARCH + USER pills - same height/padding
 * ============================================ */
.pkp_structure_head .pkp_search.pkp_search_desktop,
.pkp_structure_head .pkp_navigation_user li.profile > a {
    height: 36px;
    padding: 0 14px !important;
    line-height: 1 !important;
    box-sizing: border-box;
    align-self: center;
}

/* ============================================
 * DROPDOWN MENU - CLEAN REDESIGN
 * Single source of truth, overrides all previous
 * dropdown rules. Hover-triggered with smooth fade,
 * works with click-toggle too.
 * ============================================ */

/* Reset PKP theme legacy positioning */
.pkp_structure_head .pkp_nav_list ul.dropdown-menu,
.pkp_structure_head ul.dropdown-menu {
    /* layout */
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    z-index: 1000;
    list-style: none;
    margin: 0 !important;
    padding: 8px 0 !important;
    min-width: 240px;
    width: auto !important;
    /* appearance */
    background: #ffffff !important;
    border: 1px solid rgba(22, 53, 95, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(22, 53, 95, 0.18), 0 2px 6px rgba(22, 53, 95, 0.08) !important;
    /* hidden by default, fade in on hover/show */
    display: block !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top left;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    /* hover bridge so 10px gap below the parent does not break hover */
    overflow: visible;
}

/* Right-align the user (profile) dropdown */
.pkp_structure_head .pkp_navigation_user .dropdown-menu {
    left: auto !important;
    right: 0 !important;
    transform-origin: top right;
}

/* Invisible bridge area above the dropdown to maintain hover continuity */
.pkp_structure_head .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
}

/* Show the dropdown on hover or click (Bootstrap .show) or focus */
.pkp_structure_head .pkp_navigation_primary > li:hover > .dropdown-menu,
.pkp_structure_head .pkp_navigation_primary > li.show > .dropdown-menu,
.pkp_structure_head .pkp_navigation_primary > li:focus-within > .dropdown-menu,
.pkp_structure_head .pkp_navigation_user > li:hover > .dropdown-menu,
.pkp_structure_head .pkp_navigation_user > li.show > .dropdown-menu,
.pkp_structure_head .pkp_navigation_user > li:focus-within > .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(8px) scale(1) !important;
}

/* Items inside the dropdown */
.pkp_structure_head .dropdown-menu li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
}
.pkp_structure_head .dropdown-menu li a {
    display: block !important;
    padding: 10px 18px !important;
    color: #1f2937 !important;
    background: transparent !important;
    font-family: var(--font-ui);
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    line-height: 1.4 !important;
    transition: background 0.12s ease, color 0.12s ease, padding 0.12s ease;
}
.pkp_structure_head .dropdown-menu li a:hover,
.pkp_structure_head .dropdown-menu li a:focus {
    background: rgba(0, 176, 240, 0.1) !important;
    color: #00b0f0 !important;
    padding-left: 22px !important;
    outline: 0;
}

/* Active item in dropdown */
.pkp_structure_head .dropdown-menu li a.is-active,
.pkp_structure_head .dropdown-menu li.is-active > a {
    background: rgba(0, 176, 240, 0.12) !important;
    color: #00b0f0 !important;
    font-weight: 600 !important;
}

/* === Force dropdown panels to be readable: solid white bg, dark text === */
html body .pkp_structure_head .dropdown-menu,
html body .pkp_structure_head ul.dropdown-menu,
html body .pkp_structure_head .pkp_nav_list ul.dropdown-menu {
    background: #ffffff !important;
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #1f2937 !important;
}

html body .pkp_structure_head .dropdown-menu li,
html body .pkp_structure_head .dropdown-menu li a,
html body .pkp_structure_head ul.dropdown-menu li a {
    color: #1f2937 !important;
    background: transparent !important;
    background-color: transparent !important;
}

html body .pkp_structure_head .dropdown-menu li a:hover,
html body .pkp_structure_head .dropdown-menu li a:focus,
html body .pkp_structure_head ul.dropdown-menu li a:hover,
html body .pkp_structure_head ul.dropdown-menu li a:focus {
    background: rgba(0, 176, 240, 0.1) !important;
    color: #00b0f0 !important;
}

/* === Force task_count badge visible + properly centered on user pill === */
.pkp_structure_head .pkp_navigation_user > li > a .task_count,
.pkp_structure_head .pkp_navigation_user li.profile > a .task_count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 7px !important;
    background: #eda82c !important;
    color: #ffffff !important;
    border-radius: 11px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin: 0 4px 0 6px !important;
    vertical-align: middle !important;
    text-align: center !important;
    position: relative !important;
    top: 0 !important;
    flex-shrink: 0;
}

/* And in the dropdown items - same visual style */
.pkp_structure_head .dropdown-menu .task_count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 7px !important;
    background: #eda82c !important;
    color: #ffffff !important;
    border-radius: 11px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin-left: 8px !important;
}

/* === Title-case the displayed username in the header user pill === */
.pkp_structure_head .pkp_navigation_user li.profile > a {
    text-transform: capitalize;
}
/* The task_count badge should not get capitalize behaviour - reset on it */
.pkp_structure_head .pkp_navigation_user li.profile > a .task_count {
    text-transform: none;
}

/* === Remove the slide-right effect on dropdown item hover === */
.pkp_structure_head .dropdown-menu li a:hover,
.pkp_structure_head .dropdown-menu li a:focus,
.pkp_structure_head ul.dropdown-menu li a:hover,
.pkp_structure_head ul.dropdown-menu li a:focus,
html body .pkp_structure_head .dropdown-menu li a:hover,
html body .pkp_structure_head .dropdown-menu li a:focus {
    padding-left: 18px !important;
}

/* === Kill the slide-right effect on .profile dropdown items too === */
.pkp_structure_head .dropdown-menu li a,
.pkp_structure_head .dropdown-menu li.profile a,
.pkp_structure_head .pkp_navigation_user .dropdown-menu li a,
.pkp_structure_head .pkp_navigation_user .dropdown-menu li.profile a {
    transition: background 0.12s ease, color 0.12s ease !important;
    padding: 10px 18px !important;
}
.pkp_structure_head .dropdown-menu li a:hover,
.pkp_structure_head .dropdown-menu li a:focus,
.pkp_structure_head .dropdown-menu li.profile a:hover,
.pkp_structure_head .dropdown-menu li.profile a:focus,
.pkp_structure_head .pkp_navigation_user .dropdown-menu li a:hover,
.pkp_structure_head .pkp_navigation_user .dropdown-menu li a:focus,
.pkp_structure_head .pkp_navigation_user .dropdown-menu li.profile a:hover,
.pkp_structure_head .pkp_navigation_user .dropdown-menu li.profile a:focus {
    padding: 10px 18px !important;
    padding-left: 18px !important;
    border: none !important;
    border-left: none !important;
}

/* === Final normalization: profile dropdown items styled IDENTICALLY to others === */
html body .pkp_structure_head .pkp_navigation_user .dropdown-menu,
html body .pkp_structure_head .pkp_navigation_user .dropdown-menu li,
html body .pkp_structure_head .pkp_navigation_user .dropdown-menu li.profile {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

html body .pkp_structure_head .pkp_navigation_user .dropdown-menu li.profile {
    background: transparent !important;
    background-color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

html body .pkp_structure_head .pkp_navigation_user .dropdown-menu li.profile > a,
html body .pkp_structure_head .pkp_navigation_user .dropdown-menu li > a {
    display: block !important;
    padding: 10px 18px !important;
    margin: 0 !important;
    color: #1f2937 !important;
    background: transparent !important;
    background-color: transparent !important;
    font-family: var(--font-ui) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    border: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    transition: background 0.12s ease, color 0.12s ease !important;
}

html body .pkp_structure_head .pkp_navigation_user .dropdown-menu li.profile > a:hover,
html body .pkp_structure_head .pkp_navigation_user .dropdown-menu li.profile > a:focus,
html body .pkp_structure_head .pkp_navigation_user .dropdown-menu li > a:hover,
html body .pkp_structure_head .pkp_navigation_user .dropdown-menu li > a:focus {
    background: rgba(0, 176, 240, 0.1) !important;
    background-color: rgba(0, 176, 240, 0.1) !important;
    color: #00b0f0 !important;
    padding: 10px 18px !important;
    border: none !important;
}

/* === Lock task_count to stay orange on hover too (theme turns it dark) === */
html body .pkp_structure_head .pkp_navigation_user > li > ul a:hover .task_count,
html body .pkp_structure_head .pkp_navigation_user > li > ul a:focus .task_count,
html body .pkp_structure_head .dropdown-menu a:hover .task_count,
html body .pkp_structure_head .dropdown-menu a:focus .task_count {
    background: #eda82c !important;
    background-color: #eda82c !important;
    color: #ffffff !important;
}

/* === Final specificity hammer: identical cyan hover on ALL dropdown items === */
html body .pkp_structure_head ul.dropdown-menu > li > a:hover,
html body .pkp_structure_head ul.dropdown-menu > li > a:focus,
html body .pkp_structure_head ul.dropdown-menu > li.profile > a:hover,
html body .pkp_structure_head ul.dropdown-menu > li.profile > a:focus,
html body .pkp_structure_head .pkp_navigation_user > li > ul.dropdown-menu > li > a:hover,
html body .pkp_structure_head .pkp_navigation_user > li > ul.dropdown-menu > li.profile > a:hover,
html body .pkp_structure_head .pkp_navigation_primary > li > ul.dropdown-menu > li > a:hover {
    background: rgba(0, 176, 240, 0.1) !important;
    background-color: rgba(0, 176, 240, 0.1) !important;
    background-image: none !important;
    color: #00b0f0 !important;
    border-color: transparent !important;
}

/* === Unify all dropdown hovers to accent gold === */
html body .pkp_structure_head ul.dropdown-menu > li > a:hover,
html body .pkp_structure_head ul.dropdown-menu > li > a:focus,
html body .pkp_structure_head ul.dropdown-menu > li.profile > a:hover,
html body .pkp_structure_head ul.dropdown-menu > li.profile > a:focus,
html body .pkp_structure_head .pkp_navigation_user > li > ul.dropdown-menu > li > a:hover,
html body .pkp_structure_head .pkp_navigation_user > li > ul.dropdown-menu > li.profile > a:hover,
html body .pkp_structure_head .pkp_navigation_user > li > ul.dropdown-menu > li.profile > a:focus,
html body .pkp_structure_head .pkp_navigation_primary > li > ul.dropdown-menu > li > a:hover,
html body .pkp_structure_head .dropdown-menu li a:hover,
html body .pkp_structure_head .dropdown-menu li a:focus {
    background: rgba(237, 168, 44, 0.12) !important;
    background-color: rgba(237, 168, 44, 0.12) !important;
    background-image: none !important;
    color: #eda82c !important;
    border-color: transparent !important;
}

/* === Equal gold intensity on regular and profile dropdowns === */
html body .pkp_structure_head .pkp_navigation_primary > li > ul.dropdown-menu > li > a:hover,
html body .pkp_structure_head .pkp_navigation_primary > li > ul.dropdown-menu > li > a:focus,
html body .pkp_structure_head .pkp_navigation_user > li > ul.dropdown-menu > li > a:hover,
html body .pkp_structure_head .pkp_navigation_user > li > ul.dropdown-menu > li > a:focus,
html body .pkp_structure_head .pkp_navigation_user > li > ul.dropdown-menu > li.profile > a:hover,
html body .pkp_structure_head .pkp_navigation_user > li > ul.dropdown-menu > li.profile > a:focus {
    background: rgba(237, 168, 44, 0.15) !important;
    background-color: rgba(237, 168, 44, 0.15) !important;
    background-image: none !important;
    color: #eda82c !important;
}

/* === ID-based selector for guaranteed highest specificity === */
#navigationUser .dropdown-menu li > a:hover,
#navigationUser .dropdown-menu li > a:focus,
#navigationUser .dropdown-menu li.profile > a:hover,
#navigationUser .dropdown-menu li.profile > a:focus,
#navigationPrimary .dropdown-menu li > a:hover,
#navigationPrimary .dropdown-menu li > a:focus {
    background: rgba(237, 168, 44, 0.15) !important;
    background-color: rgba(237, 168, 44, 0.15) !important;
    background-image: none !important;
    color: #eda82c !important;
    opacity: 1 !important;
}

/* === Strict normalization: search + profile pills identical === */
html body .pkp_structure_head .pkp_search.pkp_search_desktop,
html body .pkp_structure_head .pkp_navigation_user li.profile > a,
html body .pkp_structure_head .pkp_navigation_user > li.profile > a {
    display: inline-flex !important;
    align-items: center !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    line-height: 1 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    white-space: nowrap;
    gap: 8px;
}

/* Make sure the parent wrappers center their children vertically */
html body .pkp_structure_head .pkp_navigation_search_wrapper,
html body .pkp_structure_head .pkp_navigation_user_wrapper {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
}

/* task_count + chevron inside profile pill align cleanly */
html body .pkp_structure_head .pkp_navigation_user li.profile > a .task_count {
    align-self: center;
    flex-shrink: 0;
}
html body .pkp_structure_head .pkp_navigation_user li.profile > a::after {
    align-self: center;
    position: static !important;
    margin: 0 0 0 4px !important;
    transform: none !important;
}

/* === Match regular nav item hover shape to search/profile pills === */
html body .pkp_structure_head .pkp_navigation_primary li > a {
    display: inline-flex !important;
    align-items: center !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 14px !important;
    line-height: 1 !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
    white-space: nowrap;
}

/* Adjust chevron position now that link is inline-flex */
html body .pkp_structure_head .pkp_navigation_primary li > a[data-toggle="dropdown"] {
    padding-right: 28px !important;
}

/* === Show colored logo without inversion + size for new square format === */
html body .pkp_structure_head .pkp_site_name img,
html body .pkp_structure_head:not(.is-scrolled) .pkp_site_name img,
html body .pkp_structure_head.is-scrolled .pkp_site_name img {
    filter: none !important;
    max-height: 64px !important;
    max-width: 160px !important;
    width: auto !important;
    height: auto !important;
}

/* ============================================
 * SITE WORDMARK (journal title next to emblem)
 * Injected via JS into .pkp_site_name_wrapper.
 * Replaces the old text-heavy logo with: small
 * emblem + elegant typography wordmark.
 * Appended 2026-05-11.
 * ============================================ */

.pkp_structure_head .pkp_site_name_wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.pkp_structure_head .pkp_site_wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    font-family: var(--font-ui);
    max-width: 380px;
}
.pkp_structure_head .pkp_site_wordmark .wm-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #16355f;
    letter-spacing: 0.2px;
}
.pkp_structure_head .pkp_site_wordmark .wm-subtitle {
    font-size: 13.5px;
    font-weight: 500;
    color: #5b6877;
    letter-spacing: 0.1px;
}

/* In scrolled state, header is navy — wordmark goes white */
.pkp_structure_head.is-scrolled .pkp_site_wordmark .wm-title {
    color: #ffffff;
}
.pkp_structure_head.is-scrolled .pkp_site_wordmark .wm-subtitle {
    color: rgba(255, 255, 255, 0.75);
}

/* Smaller emblem now (no text in the logo image itself) */
html body .pkp_structure_head .pkp_site_name img {
    max-height: 52px !important;
    max-width: 52px !important;
}

/* Mobile - hide subtitle, shrink title */
@media (max-width: 700px) {
    .pkp_structure_head .pkp_site_wordmark .wm-subtitle {
        display: none;
    }
    .pkp_structure_head .pkp_site_wordmark .wm-title {
        font-size: 12.5px;
    }
    .pkp_structure_head .pkp_site_wordmark {
        max-width: 200px;
    }
}
@media (max-width: 480px) {
    .pkp_structure_head .pkp_site_wordmark {
        display: none;
    }
}

/* === Compact wordmark + tighter nav spacing to fit one row === */
.pkp_structure_head .pkp_site_wordmark {
    max-width: 240px !important;
    line-height: 1.15 !important;
}
.pkp_structure_head .pkp_site_wordmark .wm-title {
    font-size: 12.5px !important;
    font-weight: 700 !important;
}
.pkp_structure_head .pkp_site_wordmark .wm-subtitle {
    font-size: 11.5px !important;
    font-weight: 500 !important;
}

/* Tighten nav item spacing + slightly smaller font */
html body .pkp_structure_head .pkp_navigation_primary li > a {
    padding: 0 10px !important;
    font-size: 13px !important;
}

/* Slightly reduce gap in the header row */
.pkp_structure_head .pkp_head_wrapper {
    gap: 14px !important;
}
.pkp_structure_head .pkp_site_name_wrapper {
    gap: 12px !important;
}

/* Smaller emblem to free more horizontal space */
html body .pkp_structure_head .pkp_site_name img {
    max-height: 46px !important;
    max-width: 46px !important;
}

/* === Scrolled state: filter logo to all-white === */
.pkp_structure_head.is-scrolled .pkp_site_name img {
    filter: brightness(0) invert(1) !important;
}