/* ==========================================================
   SRIWIJAYA JOURNAL OF INTERNATIONAL LAW (SJIL)
   Clean replacement stylesheet — OJS-compatible
   Replace the old custom stylesheet; do not append to it.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Merriweather+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --sjil-navy: #0b2f5b;
  --sjil-blue: #164f82;
  --sjil-blue-light: #edf4fb;
  --sjil-gold: #d5a52b;
  --sjil-text: #26384b;
  --sjil-muted: #667789;
  --sjil-border: #dfe7f0;
  --sjil-surface: #ffffff;
  --sjil-page: #f5f8fc;
  --sjil-radius: 12px;
  --sjil-shadow: 0 4px 16px rgba(11, 47, 91, .07);
}

/* Base */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--sjil-text);
  background: #fff;
  font-family: 'Merriweather', Georgia, serif;
  font-size: 15px;
  line-height: 1.75;
}
a { color: #15558b; text-decoration: none; }
a:hover, a:focus { color: #0b2f5b; text-decoration: underline; }
button, input, select, textarea,
.pkp_navigation_primary, .pkp_navigation_user_wrapper,
.pkp_structure_sidebar, .cmp_button, .pkp_button {
  font-family: 'Merriweather Sans', Arial, sans-serif;
}
img { max-width: 100%; height: auto; }

/* Header: one continuous navy field. Hide the legacy image logo only;
   journal title text remains visible. */
.pkp_structure_head {
  margin: 0 !important;
  padding: 0 !important;
  background: linear-gradient(120deg, #174f7d 0%, #0b2f5b 100%) !important;
  border: 0 !important;
  border-bottom: 4px solid var(--sjil-gold) !important;
  box-shadow: none !important;
}
.pkp_head_wrapper {
  max-width: 1280px;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
}
.pkp_site_name_wrapper {
  margin: 0 !important;
  padding: 26px 24px 23px !important;
  min-height: 0 !important;
  text-align: center;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* The previous blank white strip appears to be the old logo image area. */
.pkp_site_name .is_img,
.pkp_site_name .is_img img,
.pkp_site_name > a > img {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.pkp_site_name {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
  background: transparent !important;
}
.pkp_site_name a,
.pkp_site_name > a:not(.is_img) {
  display: inline-block;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  background: transparent !important;
  font-family: 'Merriweather Sans', Arial, sans-serif;
  font-size: clamp(22px, 2.4vw, 34px) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none !important;
  overflow-wrap: anywhere;
}
.pkp_site_name_wrapper .issn,
.pkp_site_name + .issn {
  display: block;
  margin-top: 7px;
  color: #dce9f6;
  font: 13px/1.5 'Merriweather Sans', Arial, sans-serif;
}
.pkp_navigation_user_wrapper {
  padding: 8px 20px !important;
  background: #f4f7fb !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sjil-border) !important;
  text-align: right;
}
.pkp_navigation_user_wrapper a {
  color: var(--sjil-navy) !important;
  font-size: 12px;
  font-weight: 600;
}

/* Primary navigation: one connected blue bar on desktop */
.pkp_navigation_primary_wrapper {
  margin: 0 !important;
  padding: 0 !important;
  background: linear-gradient(100deg, #092d61, #174f89) !important;
  border: 0 !important;
  border-bottom: 3px solid var(--sjil-gold) !important;
}
.pkp_navigation_primary_row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px;
  max-width: 1280px;
  min-height: 54px;
  margin: 0 auto !important;
  padding: 0 12px !important;
  border: 0 !important;
  box-sizing: border-box;
}
.pkp_navigation_primary {
  display: flex !important;
  flex: 1 1 auto;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 2px;
  min-width: 0;
  margin: 0 !important;
  padding: 4px 0 !important;
  list-style: none !important;
}
.pkp_navigation_primary > li {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.pkp_navigation_primary > li > a {
  display: block;
  margin: 0 !important;
  padding: 11px 10px !important;
  border-radius: 6px;
  color: #fff !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  white-space: nowrap;
  text-decoration: none !important;
  transition: background .18s ease, color .18s ease;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li.current > a {
  color: #102d50 !important;
  background: var(--sjil-gold) !important;
}
.pkp_navigation_primary .dropdown-menu {
  min-width: 210px;
  padding: 6px !important;
  background: #fff !important;
  border: 1px solid var(--sjil-border) !important;
  border-radius: 9px !important;
  box-shadow: 0 12px 28px rgba(7, 35, 68, .18) !important;
}
.pkp_navigation_primary .dropdown-menu a {
  padding: 9px 11px !important;
  border-radius: 5px;
  color: var(--sjil-navy) !important;
  white-space: normal;
}
.pkp_navigation_primary .dropdown-menu a:hover { background: var(--sjil-blue-light) !important; }
.pkp_navigation_search_wrapper {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.pkp_navigation_search_wrapper a {
  display: block;
  padding: 10px 8px !important;
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.pkp_search { padding: 14px 20px 18px; }
.pkp_search input[type='text'], .pkp_search input[type='search'] {
  min-height: 42px;
  border: 1px solid var(--sjil-border);
  border-radius: 8px 0 0 8px;
  padding: 0 12px;
}
.pkp_search button {
  min-height: 42px;
  color: #fff !important;
  background: var(--sjil-navy) !important;
  border: 0 !important;
  border-radius: 0 8px 8px 0;
}

/* Page frame */
.pkp_structure_content {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 28px;
  padding-bottom: 32px;
  box-sizing: border-box;
}
.pkp_structure_main { min-width: 0; }
.pkp_structure_sidebar { min-width: 0; }
h1, h2, h3, h4, .page_title {
  color: var(--sjil-navy);
  font-family: 'Merriweather', Georgia, serif;
  line-height: 1.35;
}
.page_title { font-weight: 700; }

/* Home banner */
.page_index_journal .homepage_image {
  position: relative;
  margin: 0 0 28px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sjil-shadow);
}
.page_index_journal .homepage_image img { display: block; width: 100%; height: auto; }
.page_index_journal .homepage_image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(1, 31, 68, .76), rgba(10, 77, 143, .30), transparent);
  pointer-events: none;
}
.page_index_journal .homepage_image::after {
  content: 'Welcome to\A Sriwijaya Journal of\A International Law\A\A A peer-reviewed journal dedicated to the advancement of scholarly research in international law.';
  position: absolute;
  top: 50%;
  left: clamp(18px, 4vw, 48px);
  right: 18px;
  transform: translateY(-50%);
  max-width: 520px;
  color: #fff;
  font: 500 clamp(14px, 1.6vw, 20px)/1.4 'Merriweather Sans', Arial, sans-serif;
  white-space: pre-line;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  pointer-events: none;
}
.page_index_journal h2 {
  position: relative;
  margin: 0 0 18px;
  padding-left: 16px;
  color: var(--sjil-navy);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
}
.page_index_journal h2::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  width: 5px;
  height: 1.1em;
  border-radius: 4px;
  background: var(--sjil-gold);
}
.page_index_journal .cmp_announcements,
.page_index_journal .current_issue,
.page_index_journal .additional_content {
  margin-bottom: 24px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--sjil-border);
  border-radius: var(--sjil-radius);
}

/* Article and announcement cards */
.obj_article_summary, .obj_announcement_summary {
  margin-bottom: 18px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--sjil-border);
  border-radius: var(--sjil-radius);
  box-shadow: 0 2px 8px rgba(0,0,0,.025);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.obj_article_summary:hover, .obj_announcement_summary:hover {
  border-color: #bfd2e6;
  box-shadow: var(--sjil-shadow);
  transform: translateY(-2px);
}
.obj_article_summary .title a, .obj_announcement_summary .title a {
  color: var(--sjil-navy) !important;
  font-weight: 700;
  text-decoration: none;
}
.obj_article_summary .title a { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.45; }
.obj_article_summary .meta, .obj_article_summary .authors, .obj_article_summary .published,
.obj_announcement_summary .date { color: var(--sjil-muted) !important; font-size: 13px; }
.obj_article_summary .galley_link {
  display: inline-block;
  padding: 8px 13px;
  color: #fff !important;
  background: var(--sjil-navy);
  border-radius: 7px;
  font: 600 12px 'Merriweather Sans', Arial, sans-serif;
}
.obj_article_summary .galley_link:hover { background: var(--sjil-blue); }
.current_issue { border-left: 5px solid var(--sjil-blue) !important; }
.current_issue .title { color: var(--sjil-navy); font-weight: 700; }
.current_issue .issue_cover { overflow: hidden; border-radius: 10px; box-shadow: var(--sjil-shadow); }

/* Sidebar blocks — designed to work with existing Custom Block HTML */
.pkp_structure_sidebar { padding: 12px !important; background: #f4f7fb; border-left: 1px solid var(--sjil-border); }
.pkp_structure_sidebar .pkp_block,
.pkp_structure_sidebar .block {
  box-sizing: border-box;
  margin: 0 0 14px !important;
  padding: 14px !important;
  background: #fff !important;
  border: 1px solid var(--sjil-border) !important;
  border-radius: var(--sjil-radius) !important;
  box-shadow: var(--sjil-shadow) !important;
  overflow: hidden;
}
.pkp_structure_sidebar .pkp_block .title,
.pkp_structure_sidebar .block .title {
  margin: 0 0 10px !important;
  padding: 0 0 9px !important;
  color: var(--sjil-navy) !important;
  border-bottom: 2px solid #edf2f8 !important;
  font: 800 14px/1.4 'Merriweather Sans', Arial, sans-serif !important;
}
/* Reset inline card wrappers in the existing custom blocks. */
.pkp_structure_sidebar .pkp_block .content > div[style*='background'],
.pkp_structure_sidebar .block .content > div[style*='background'] {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.pkp_structure_sidebar .pkp_block .content div[style*='font-weight: bold'],
.pkp_structure_sidebar .block .content div[style*='font-weight: bold'] {
  margin: 0 0 10px !important;
  padding: 0 0 9px !important;
  color: var(--sjil-navy) !important;
  border-bottom: 2px solid #edf2f8;
  font: 800 14px/1.4 'Merriweather Sans', Arial, sans-serif !important;
}
.pkp_structure_sidebar .pkp_block .content a,
.pkp_structure_sidebar .block .content a {
  color: #29425e !important;
  text-decoration: none !important;
}
.pkp_structure_sidebar .pkp_block .content a:hover,
.pkp_structure_sidebar .block .content a:hover {
  color: var(--sjil-navy) !important;
  text-decoration: none !important;
}
/* Custom block items: turn each direct row into a compact card. */
.pkp_structure_sidebar .pkp_block .content div[style*='line-height'] > div,
.pkp_structure_sidebar .block .content div[style*='line-height'] > div {
  margin: 0 0 6px !important;
  padding: 8px 10px !important;
  color: #29425e !important;
  background: #f7f9fc;
  border: 1px solid #e5edf5;
  border-radius: 7px;
  font: 600 12px/1.5 'Merriweather Sans', Arial, sans-serif !important;
  overflow-wrap: anywhere;
}
.pkp_structure_sidebar .pkp_block .content div[style*='line-height'] > div:last-child,
.pkp_structure_sidebar .block .content div[style*='line-height'] > div:last-child { margin-bottom: 0 !important; }
/* The old HTML writes ◈ inside spans; hide only those menu ornaments. */
.pkp_structure_sidebar .pkp_block .content span[style*='color: #d4a017'],
.pkp_structure_sidebar .block .content span[style*='color: #d4a017'] { display: none !important; }
/* Preserve links as one complete card; prevent split title wrapping issues. */
.pkp_structure_sidebar .pkp_block .content div[style*='line-height'] > div a,
.pkp_structure_sidebar .block .content div[style*='line-height'] > div a { display: inline; }
.pkp_structure_sidebar .pkp_block .content img,
.pkp_structure_sidebar .block .content img { display: block; max-width: 100%; height: auto; margin: 8px auto; }
/* Journal metrics: keep rows aligned and responsive. */
.pkp_structure_sidebar .content strong { color: var(--sjil-navy); }

/* General buttons and forms */
.cmp_button, .pkp_button, button, input[type='submit'] {
  color: #fff !important;
  background: linear-gradient(135deg, var(--sjil-navy), var(--sjil-blue)) !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-weight: 700;
}
.cmp_breadcrumbs { margin-bottom: 18px; padding: 10px 14px; background: #fff; border: 1px solid var(--sjil-border); border-radius: 9px; }
.obj_article_details { padding: clamp(18px, 3vw, 32px); background: #fff; border: 1px solid var(--sjil-border); border-radius: 16px; box-shadow: var(--sjil-shadow); }
.obj_article_details .page_title { color: var(--sjil-navy); font-size: clamp(23px, 3vw, 34px); }
.obj_article_details .doi a { color: #946f0c; font-weight: 700; }

/* Footer */
.pkp_structure_footer_wrapper {
  background: linear-gradient(135deg, #092d61, #164f82) !important;
  border-top: 4px solid var(--sjil-gold);
}
.pkp_structure_footer { max-width: 1280px; margin: 0 auto; padding: 34px 28px 22px; }
.pkp_structure_footer h2, .pkp_structure_footer h3, .pkp_structure_footer .title { color: #fff; font-weight: 700; }
.pkp_structure_footer a { color: #d6e8fb !important; }
.pkp_structure_footer .copyright { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.2); color: #d6e0eb; text-align: center; }
.pkp_structure_footer_wrapper::after { content: ''; display: block; height: 4px; background: linear-gradient(90deg, var(--sjil-gold), #f2c94c, var(--sjil-gold)); }

/* Tablet: navigation may wrap when there is not enough space */
@media (max-width: 1050px) {
  .pkp_navigation_primary_row { display: block !important; padding: 5px 10px !important; }
  .pkp_navigation_primary { flex-wrap: wrap !important; justify-content: center !important; }
  .pkp_navigation_primary > li > a { padding: 9px 10px !important; }
  .pkp_navigation_search_wrapper { text-align: center; }
  .pkp_structure_sidebar { border-left: 0; }
}
@media (max-width: 768px) {
  body { font-size: 14px; }
  .pkp_site_name_wrapper { padding: 18px 12px !important; }
  .pkp_site_name a { font-size: clamp(19px, 5vw, 26px) !important; }
  .pkp_navigation_primary_row { padding: 5px !important; }
  .pkp_navigation_primary { gap: 2px; }
  .pkp_navigation_primary > li > a { padding: 8px 9px !important; font-size: 11px !important; white-space: normal; }
  .pkp_navigation_search_wrapper a { padding: 8px !important; }
  .pkp_structure_content { padding: 18px 12px 24px; }
  .pkp_structure_sidebar { margin-top: 18px; padding: 0 !important; background: transparent; }
  .pkp_structure_sidebar .pkp_block, .pkp_structure_sidebar .block { padding: 12px !important; }
  .page_index_journal .homepage_image { border-radius: 10px; }
  .page_index_journal .homepage_image img { max-height: 190px; object-fit: cover; }
  .page_index_journal .homepage_image::after { left: 14px; right: 12px; font-size: 12px; line-height: 1.35; max-width: 88%; }
  .obj_article_summary, .obj_announcement_summary { padding: 15px; }
  .obj_article_details { padding: 16px; }
  .pkp_structure_footer { padding: 26px 16px 18px; }
}
@media (max-width: 420px) {
  .pkp_site_name_wrapper { padding: 15px 10px !important; }
  .pkp_site_name a { font-size: 18px !important; }
  .pkp_navigation_primary > li > a { padding: 7px 8px !important; font-size: 10.5px !important; }
  .pkp_structure_content { padding-right: 10px; padding-left: 10px; }
  .page_index_journal .homepage_image::after { font-size: 11px; }
}

/* ==========================================================
   SJIL refinement v11 — fixes for the current Custom Blocks
   Append these rules to the end of the clean stylesheet.
   ========================================================== */

/* Remove the leftover white logo/image strip above the journal title. */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name {
  background-color: transparent !important;
}
.pkp_site_name_wrapper {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  overflow: hidden !important;
}
.pkp_site_name .is_img,
.pkp_site_name a.is_img,
.pkp_site_name_wrapper .is_img,
.pkp_site_name_wrapper a.is_img,
.pkp_site_name_wrapper img,
.pkp_site_name img,
.pkp_site_name > a > img,
.pkp_site_name_wrapper .pkp_site_name img {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.pkp_site_name_wrapper::before,
.pkp_site_name_wrapper::after,
.pkp_site_name::before,
.pkp_site_name::after {
  content: none !important;
  display: none !important;
}

/* Keep header and navigation visually connected, with no empty colored block. */
.pkp_navigation_primary_wrapper {
  width: 100% !important;
  box-sizing: border-box !important;
}
.pkp_navigation_primary_row {
  width: 100% !important;
  max-width: 1280px !important;
}
.pkp_navigation_search_wrapper {
  background: transparent !important;
  min-width: 0 !important;
}
.pkp_navigation_search_wrapper a {
  border-radius: 7px !important;
}

/* Style the new clean HTML classes used by all five Custom Blocks. */
.pkp_structure_sidebar .sjil-sidebar-card {
  box-sizing: border-box !important;
  margin: 0 0 14px !important;
  padding: 17px 16px !important;
  color: #26384b !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  border: 1px solid #dce6f1 !important;
  border-radius: 14px !important;
  box-shadow: 0 5px 18px rgba(11, 47, 91, .065) !important;
  overflow: hidden !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pkp_structure_sidebar .sjil-sidebar-card:hover {
  border-color: #c6d7e9 !important;
  box-shadow: 0 8px 22px rgba(11, 47, 91, .09) !important;
}
.pkp_structure_sidebar .sjil-sidebar-title {
  position: relative !important;
  margin: 0 0 12px !important;
  padding: 0 0 10px 11px !important;
  color: #0b2f5b !important;
  border: 0 !important;
  border-bottom: 1px solid #e7edf5 !important;
  font: 700 14px/1.45 'Merriweather Sans', Arial, sans-serif !important;
}
.pkp_structure_sidebar .sjil-sidebar-title::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 1px !important;
  bottom: 11px !important;
  width: 3px !important;
  background: #d5a52b !important;
  border-radius: 4px !important;
}
.pkp_structure_sidebar .sjil-sidebar-menu,
.pkp_structure_sidebar .sjil-metrics-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.pkp_structure_sidebar .sjil-sidebar-menu li {
  position: relative !important;
  margin: 0 !important;
  padding: 7px 9px 7px 23px !important;
  color: #344b63 !important;
  background: #f7f9fc !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  font: 500 12px/1.5 'Merriweather Sans', Arial, sans-serif !important;
  overflow-wrap: anywhere !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.pkp_structure_sidebar .sjil-sidebar-menu li::before {
  content: '' !important;
  position: absolute !important;
  left: 10px !important;
  top: 13px !important;
  width: 5px !important;
  height: 5px !important;
  background: #d5a52b !important;
  border-radius: 50% !important;
}
.pkp_structure_sidebar .sjil-sidebar-menu li:hover {
  color: #0b2f5b !important;
  background: #edf4fb !important;
  border-color: #dbe7f4 !important;
}
.pkp_structure_sidebar .sjil-sidebar-menu a {
  display: block !important;
  color: #29425e !important;
  text-decoration: none !important;
}
.pkp_structure_sidebar .sjil-sidebar-menu a:hover,
.pkp_structure_sidebar .sjil-sidebar-menu a:focus {
  color: #0b2f5b !important;
  text-decoration: none !important;
}
.pkp_structure_sidebar .sjil-flag-counter {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 76px !important;
  padding: 8px !important;
  background: #f7f9fc !important;
  border: 1px solid #e7edf5 !important;
  border-radius: 9px !important;
}
.pkp_structure_sidebar .sjil-flag-counter img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
}
.pkp_structure_sidebar .sjil-metrics-list li {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 9px 0 !important;
  color: #53677d !important;
  border-bottom: 1px solid #edf1f6 !important;
  font: 500 11.5px/1.5 'Merriweather Sans', Arial, sans-serif !important;
}
.pkp_structure_sidebar .sjil-metrics-list li:last-child { border-bottom: 0 !important; padding-bottom: 0 !important; }
.pkp_structure_sidebar .sjil-metrics-list strong {
  flex: 0 0 auto !important;
  color: #0b2f5b !important;
  font-weight: 800 !important;
}

/* Sidebar column: soften the surrounding panel and control spacing. */
.pkp_structure_sidebar {
  padding: 10px !important;
  background: #f3f7fc !important;
  border-left: 1px solid #e0e8f2 !important;
}
.pkp_structure_sidebar .pkp_block,
.pkp_structure_sidebar .block {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  overflow: visible !important;
}
.pkp_structure_sidebar .pkp_block .content,
.pkp_structure_sidebar .block .content {
  margin: 0 !important;
  padding: 0 !important;
}

/* Reduce the oversized empty feel around the home page content. */
.pkp_structure_content {
  padding-top: 20px !important;
  padding-bottom: 24px !important;
}
.page_index_journal .additional_content,
.page_index_journal .current_issue,
.page_index_journal .cmp_announcements {
  margin-bottom: 18px !important;
}

@media (max-width: 768px) {
  .pkp_site_name_wrapper { padding: 16px 12px !important; }
  .pkp_structure_sidebar { padding: 0 !important; background: transparent !important; border-left: 0 !important; }
  .pkp_structure_sidebar .sjil-sidebar-card { padding: 14px !important; }
  .pkp_structure_sidebar .sjil-sidebar-menu li { font-size: 12px !important; }
}


/* ==========================================================
   FINAL PATCH: show the uploaded OJS logo/header image.
   Built on V11 to preserve the previously approved sidebar.
   ========================================================== */
.pkp_structure_head {
  display: block !important;
  background: linear-gradient(120deg, #174f7d 0%, #0b2f5b 100%) !important;
  border: 0 !important;
  border-bottom: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.pkp_head_wrapper {
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
}
.pkp_site_name_wrapper {
  display: block !important;
  width: 100% !important;
  max-width: 1280px !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
}
.pkp_site_name {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  background: transparent !important;
}
/* Override V11's old rule that hid the logo image. */
.pkp_site_name .is_img,
.pkp_site_name a.is_img,
.pkp_site_name_wrapper .is_img,
.pkp_site_name_wrapper a.is_img {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.pkp_site_name .is_img img,
.pkp_site_name a.is_img img,
.pkp_site_name_wrapper .is_img img,
.pkp_site_name_wrapper a.is_img img {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* The uploaded banner already contains the journal name, so hide only text title. */
.pkp_site_name .is_text,
.pkp_site_name a:not(.is_img),
.pkp_site_name_wrapper .issn,
.pkp_site_name + .issn {
  display: none !important;
}
/* Keep the existing OJS menu below the banner, with the gold accent. */
.pkp_navigation_primary_wrapper {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: linear-gradient(100deg, #174f7d 0%, #0b2f5b 100%) !important;
  border: 0 !important;
  border-bottom: 4px solid #d5a52b !important;
}
.pkp_navigation_primary_row {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
}
@media (max-width: 768px) {
  .pkp_site_name_wrapper,
  .pkp_site_name,
  .pkp_site_name a.is_img,
  .pkp_site_name .is_img {
    width: 100% !important;
    max-width: 100% !important;
  }
  .pkp_site_name .is_img img,
  .pkp_site_name a.is_img img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* ==========================================================
   LAST HEADER PATCH: remove stray user-navigation strip and
   keep Search vertically aligned with the primary menu.
   ========================================================== */
.pkp_navigation_user_wrapper,
#navigationUser,
.pkp_navigation_user {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name,
.pkp_site_name a.is_img,
.pkp_site_name a.is_img img {
  border-top: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.pkp_site_name_wrapper::before,
.pkp_site_name_wrapper::after,
.pkp_site_name::before,
.pkp_site_name::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: transparent !important;
}

/* One line for primary navigation + Search on desktop. */
.pkp_navigation_primary_wrapper {
  position: relative !important;
  overflow: visible !important;
  background: linear-gradient(100deg, #174f7d 0%, #0b2f5b 100%) !important;
  border-top: 0 !important;
  border-bottom: 4px solid #d5a52b !important;
}
.pkp_navigation_primary_row {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 1280px !important;
  min-height: 52px !important;
  margin: 0 auto !important;
  padding: 0 112px 0 10px !important;
  box-sizing: border-box !important;
}
.pkp_navigation_primary {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 52px !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.pkp_navigation_primary > li {
  flex: 0 1 auto !important;
  white-space: nowrap !important;
}
.pkp_navigation_primary > li > a {
  padding: 12px 8px !important;
  line-height: 20px !important;
  white-space: nowrap !important;
}
.pkp_navigation_search_wrapper {
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  transform: translateY(-50%) !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.pkp_navigation_search_wrapper a {
  display: block !important;
  padding: 10px 7px !important;
  margin: 0 !important;
  line-height: 20px !important;
  white-space: nowrap !important;
  color: #fff !important;
}

@media (max-width: 900px) {
  .pkp_navigation_primary_row {
    padding: 0 8px !important;
  }
  .pkp_navigation_primary {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    padding-right: 0 !important;
  }
  .pkp_navigation_search_wrapper {
    position: static !important;
    transform: none !important;
    text-align: right !important;
    padding: 0 8px 6px !important;
  }
}


/* FINAL CORRECTION: keep Search on the same row as the primary menu */
.pkp_navigation_primary_wrapper {
  width: 100% !important;
  overflow: visible !important;
  background: linear-gradient(100deg, #174f7d 0%, #0b2f5b 100%) !important;
  border-bottom: 4px solid #d5a52b !important;
}
.pkp_navigation_primary_row {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 1280px !important;
  min-height: 52px !important;
  padding: 0 10px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}
.pkp_navigation_primary {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-width: 0 !important;
  width: auto !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pkp_navigation_primary > li {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}
.pkp_navigation_primary > li > a {
  padding: 10px 7px !important;
  font-size: 12px !important;
  line-height: 20px !important;
  white-space: nowrap !important;
}
.pkp_navigation_search_wrapper {
  position: static !important;
  display: block !important;
  flex: 0 0 auto !important;
  transform: none !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.pkp_navigation_search_wrapper a {
  display: block !important;
  padding: 10px 4px !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 20px !important;
  white-space: nowrap !important;
  color: #fff !important;
}
@media (max-width: 1050px) {
  .pkp_navigation_primary_row {
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 4px 8px !important;
  }
  .pkp_navigation_primary {
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
  }
  .pkp_navigation_search_wrapper {
    position: static !important;
    margin-left: auto !important;
  }
}

/* FINAL OVERRIDE: compact single-row navigation on desktop */
@media (min-width: 1051px) {
  .pkp_navigation_primary_wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: #0b2f5b !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }
  .pkp_navigation_primary_wrapper::before,
  .pkp_navigation_primary_wrapper::after,
  .pkp_navigation_primary_row::before,
  .pkp_navigation_primary_row::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: transparent !important;
  }
  .pkp_navigation_primary_row {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 48px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    gap: 0 !important;
  }
  .pkp_navigation_primary {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .pkp_navigation_primary > li {
    display: block !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  .pkp_navigation_primary > li > a {
    padding: 8px 6px !important;
    font-size: 11px !important;
    line-height: 18px !important;
    white-space: nowrap !important;
  }
  .pkp_navigation_search_wrapper {
    display: block !important;
    flex: 0 0 auto !important;
    position: static !important;
    float: none !important;
    width: auto !important;
    min-width: max-content !important;
    height: auto !important;
    margin: 0 0 0 5px !important;
    padding: 0 !important;
    transform: none !important;
    background: transparent !important;
  }
  .pkp_navigation_search_wrapper a {
    display: block !important;
    padding: 8px 5px !important;
    font-size: 11px !important;
    line-height: 18px !important;
    white-space: nowrap !important;
  }
}

/* Remove pale-blue side accents around the navigation bar */
.pkp_navigation_primary_wrapper,
.pkp_navigation_primary_row {
  border-left: 0 !important;
  border-right: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.pkp_navigation_primary_wrapper::before,
.pkp_navigation_primary_wrapper::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 1050px) {
  .pkp_navigation_primary_wrapper {
    max-width: 100% !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  .pkp_navigation_primary_row {
    flex-wrap: wrap !important;
  }
  .pkp_navigation_primary {
    flex-wrap: wrap !important;
  }
}

/* FINAL PATCH 19 OCT 2026 — align all navigation items in one desktop row */
@media (min-width: 1051px) {
  .pkp_navigation_primary_wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: #0b2f5b !important;
    border: 0 !important;
    border-bottom: 4px solid #d5a52b !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }
  .pkp_navigation_primary_row {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    gap: 0 !important;
    background: #0b2f5b !important;
    box-sizing: border-box !important;
  }
  .pkp_navigation_primary {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    background: #0b2f5b !important;
    box-sizing: border-box !important;
  }
  .pkp_navigation_primary > li {
    display: block !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  .pkp_navigation_primary > li > a {
    padding: 8px 5px !important;
    font-size: 10.5px !important;
    line-height: 18px !important;
    white-space: nowrap !important;
  }
  .pkp_navigation_search_wrapper {
    display: block !important;
    position: static !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    height: auto !important;
    margin: 0 0 0 4px !important;
    padding: 0 !important;
    transform: none !important;
    float: none !important;
    background: #0b2f5b !important;
    border: 0 !important;
  }
  .pkp_navigation_search_wrapper a {
    display: block !important;
    margin: 0 !important;
    padding: 8px 4px !important;
    font-size: 10.5px !important;
    line-height: 18px !important;
    white-space: nowrap !important;
    color: #fff !important;
  }
  .pkp_navigation_primary_wrapper::before,
  .pkp_navigation_primary_wrapper::after,
  .pkp_navigation_primary_row::before,
  .pkp_navigation_primary_row::after {
    content: none !important;
    display: none !important;
  }
}

/* Tablet/mobile: keep the bar navy and allow wrapping only when needed */
@media (max-width: 1050px) {
  .pkp_navigation_primary_wrapper,
  .pkp_navigation_primary_row,
  .pkp_navigation_primary,
  .pkp_navigation_search_wrapper {
    background: #0b2f5b !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
  }
  .pkp_navigation_primary_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* FINAL PATCH v12: pin Search to the right inside the same menu row */
@media (min-width: 1051px) {
  .pkp_navigation_primary_wrapper {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: #0b2f5b !important;
    border-bottom: 4px solid #d5a52b !important;
    box-sizing: border-box !important;
  }
  .pkp_navigation_primary_row {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 84px 0 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  .pkp_navigation_primary {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .pkp_navigation_primary > li {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  .pkp_navigation_primary > li > a {
    padding: 8px 5px !important;
    font-size: 10.5px !important;
    line-height: 18px !important;
    white-space: nowrap !important;
  }
  .pkp_navigation_search_wrapper {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    transform: translateY(-50%) !important;
    display: block !important;
    float: none !important;
    width: auto !important;
    min-width: max-content !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .pkp_navigation_search_wrapper a {
    display: block !important;
    padding: 8px 4px !important;
    margin: 0 !important;
    font-size: 10.5px !important;
    line-height: 18px !important;
    white-space: nowrap !important;
    color: #fff !important;
  }
}
/* ==========================================================
   SJIL NAV FINAL TUNE — avoid overlap, improve readability,
   flat hover style, Search and Contact kept separate.
   ========================================================== */
@media (min-width: 1051px) {
  .pkp_navigation_primary_wrapper {
    width: 100% !important; max-width: 1100px !important; margin: 0 auto !important;
    background: #0b2f5b !important; border: 0 !important;
    border-bottom: 4px solid #d5a52b !important; box-shadow: none !important; overflow: visible !important;
  }
  .pkp_navigation_primary_row {
    display: flex !important; flex-flow: row nowrap !important; align-items: center !important;
    justify-content: space-between !important; gap: 6px !important; width: 100% !important;
    max-width: 100% !important; min-height: 52px !important; padding: 0 10px !important;
    margin: 0 !important; box-sizing: border-box !important;
  }
  .pkp_navigation_primary {
    display: flex !important; flex: 1 1 auto !important; flex-flow: row nowrap !important;
    align-items: center !important; justify-content: space-between !important; gap: 0 !important;
    width: auto !important; min-width: 0 !important; min-height: 52px !important;
    margin: 0 !important; padding: 0 !important; box-sizing: border-box !important;
  }
  .pkp_navigation_primary > li { flex: 0 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; }
  .pkp_navigation_primary > li > a {
    display: block !important; padding: 10px 6px !important; font-size: 12px !important;
    font-weight: 700 !important; line-height: 20px !important; white-space: nowrap !important;
    border-radius: 0 !important; background: transparent !important; color: #fff !important; text-decoration: none !important;
  }
  .pkp_navigation_primary > li > a:hover,
  .pkp_navigation_primary > li > a:focus,
  .pkp_navigation_primary > li.current > a {
    color: #f5c84b !important; background: transparent !important; border-radius: 0 !important;
    box-shadow: inset 0 -3px 0 #d5a52b !important;
  }
  .pkp_navigation_search_wrapper {
    position: static !important; display: block !important; flex: 0 0 auto !important;
    width: auto !important; min-width: 64px !important; margin: 0 0 0 8px !important;
    padding: 0 !important; transform: none !important; float: none !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
  }
  .pkp_navigation_search_wrapper a {
    display: block !important; padding: 10px 3px !important; margin: 0 !important;
    font-size: 12px !important; font-weight: 700 !important; line-height: 20px !important;
    white-space: nowrap !important; color: #fff !important; background: transparent !important; border-radius: 0 !important;
  }
  .pkp_navigation_search_wrapper a:hover,
  .pkp_navigation_search_wrapper a:focus {
    color: #f5c84b !important; background: transparent !important; border-radius: 0 !important;
    box-shadow: inset 0 -3px 0 #d5a52b !important; text-decoration: none !important;
  }
}
@media (max-width: 1050px) {
  .pkp_navigation_primary_wrapper, .pkp_navigation_primary_row,
  .pkp_navigation_primary, .pkp_navigation_search_wrapper {
    background: #0b2f5b !important; border-left: 0 !important; border-right: 0 !important; box-shadow: none !important;
  }
  .pkp_navigation_primary_row {
    display: flex !important; flex-flow: row wrap !important; align-items: center !important;
    justify-content: center !important; gap: 0 !important; padding: 4px 8px !important;
  }
  .pkp_navigation_primary { display: flex !important; flex-flow: row wrap !important; justify-content: center !important; gap: 0 !important; }
  .pkp_navigation_primary > li > a {
    padding: 9px 8px !important; font-size: 12px !important; line-height: 20px !important; border-radius: 0 !important;
  }
  .pkp_navigation_primary > li > a:hover,
  .pkp_navigation_primary > li > a:focus,
  .pkp_navigation_primary > li.current > a {
    color: #f5c84b !important; background: transparent !important; border-radius: 0 !important;
    box-shadow: inset 0 -2px 0 #d5a52b !important;
  }
  .pkp_navigation_search_wrapper { position: static !important; flex: 0 0 auto !important; margin: 0 8px !important; padding: 0 !important; text-align: center !important; }
  .pkp_navigation_search_wrapper a { padding: 9px 8px !important; font-size: 12px !important; border-radius: 0 !important; }
}
@media (max-width: 600px) {
  .pkp_navigation_primary > li > a, .pkp_navigation_search_wrapper a {
    padding: 8px 7px !important; font-size: 11.5px !important; white-space: normal !important;
  }
}

/* V13 PATCH — force Search to stay on the same desktop row */
@media (min-width: 1051px) {
  .pkp_navigation_primary_wrapper {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    background: #0b2f5b !important;
    border: 0 !important;
    border-bottom: 4px solid #d5a52b !important;
    overflow: visible !important;
  }
  .pkp_navigation_primary_row {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 86px 0 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  .pkp_navigation_primary {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }
  .pkp_navigation_primary > li {
    display: block !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  .pkp_navigation_primary > li > a {
    display: block !important;
    padding: 9px 5px !important;
    font-size: 11.5px !important;
    line-height: 20px !important;
    white-space: nowrap !important;
    border-radius: 0 !important;
    color: #fff !important;
    background: transparent !important;
  }
  .pkp_navigation_primary > li > a:hover,
  .pkp_navigation_primary > li > a:focus,
  .pkp_navigation_primary > li.current > a {
    color: #f5c84b !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: inset 0 -3px 0 #d5a52b !important;
  }
  .pkp_navigation_search_wrapper {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    transform: translateY(-50%) !important;
    float: none !important;
    width: 68px !important;
    min-width: 68px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .pkp_navigation_search_wrapper a {
    display: block !important;
    padding: 9px 2px !important;
    margin: 0 !important;
    font-size: 11.5px !important;
    line-height: 20px !important;
    white-space: nowrap !important;
    color: #fff !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  .pkp_navigation_search_wrapper a:hover,
  .pkp_navigation_search_wrapper a:focus {
    color: #f5c84b !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: inset 0 -3px 0 #d5a52b !important;
    text-decoration: none !important;
  }
}

/* On narrower screens, let the menu wrap cleanly instead of overlapping. */
@media (max-width: 1050px) {
  .pkp_navigation_primary_row {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 8px !important;
  }
  .pkp_navigation_primary {
    display: flex !important;
    flex-flow: row wrap !important;
    justify-content: center !important;
    width: 100% !important;
  }
  .pkp_navigation_search_wrapper {
    position: static !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 8px !important;
    text-align: center !important;
  }
}

/* V14 FIX: reserve a dedicated right-side slot for Search so it never
   overlaps Contact. Keep the existing header, colors and gold underline. */
@media (min-width: 1051px) {
  .pkp_navigation_primary_row {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 88px 0 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .pkp_navigation_primary {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .pkp_navigation_primary > li {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .pkp_navigation_primary > li > a {
    padding: 10px 5px !important;
    font-size: 11.5px !important;
    line-height: 20px !important;
    white-space: nowrap !important;
  }

  .pkp_navigation_search_wrapper {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    transform: translateY(-50%) !important;
    display: block !important;
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    text-align: center !important;
    box-sizing: border-box !important;
    z-index: 5 !important;
  }

  .pkp_navigation_search_wrapper a {
    display: block !important;
    padding: 10px 2px !important;
    font-size: 11.5px !important;
    line-height: 20px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 1050px) {
  .pkp_navigation_primary_row {
    position: relative !important;
    padding: 4px 8px !important;
  }
  .pkp_navigation_primary {
    width: 100% !important;
  }
  .pkp_navigation_search_wrapper {
    position: static !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* V15 FINAL OVERRIDE: reserve Search space inside the menu list itself.
   OJS may position the search wrapper relative to a different ancestor,
   so padding on the row alone is insufficient. */
@media (min-width: 1051px) {
  .pkp_navigation_primary {
    box-sizing: border-box !important;
    padding-right: 92px !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: space-between !important;
  }
  .pkp_navigation_primary > li:last-child {
    margin-right: 0 !important;
  }
  .pkp_navigation_search_wrapper {
    right: 10px !important;
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    z-index: 10 !important;
    background: #102e59 !important;
  }
  .pkp_navigation_search_wrapper a {
    text-align: center !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
}

/* ==========================================================
   V16 PATCH — clearer menu hover + protect header logo on phones
   ========================================================== */
/* Elegant flat hover: no rounded blocks; gold underline and brighter text. */
.pkp_navigation_primary > li > a {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 11px 9px !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: color .18s ease, background-color .18s ease !important;
}
.pkp_navigation_primary > li > a::after {
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 3px !important;
  height: 2px !important;
  background: #e3b63f !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform .18s ease !important;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus-visible,
.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li > a[aria-current="page"] {
  color: #ffd66b !important;
  background: rgba(255,255,255,.045) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline-offset: -2px !important;
}
.pkp_navigation_primary > li > a:hover::after,
.pkp_navigation_primary > li > a:focus-visible::after,
.pkp_navigation_primary > li.current > a::after,
.pkp_navigation_primary > li > a[aria-current="page"]::after {
  transform: scaleX(1) !important;
}
.pkp_navigation_primary .dropdown-menu a {
  border-radius: 0 !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.pkp_navigation_primary .dropdown-menu a:hover,
.pkp_navigation_primary .dropdown-menu a:focus-visible {
  color: #0b2f5b !important;
  background: #edf4fb !important;
  border-left: 3px solid #d5a52b !important;
}

/* Mobile: reserve a clean layer for the header image so the menu button/content
   cannot sit on top of the logo/banner. Keep the banner's natural aspect ratio. */
@media (max-width: 768px) {
  .pkp_structure_head,
  .pkp_head_wrapper,
  .pkp_site_name_wrapper,
  .pkp_site_name {
    position: relative !important;
    z-index: 20 !important;
    overflow: visible !important;
  }
  .pkp_site_name_wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .pkp_site_name,
  .pkp_site_name a.is_img,
  .pkp_site_name .is_img,
  .pkp_site_name_wrapper a.is_img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .pkp_site_name .is_img img,
  .pkp_site_name a.is_img img,
  .pkp_site_name_wrapper a.is_img img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center top !important;
    margin: 0 auto !important;
  }
  .pkp_navigation_primary_wrapper {
    position: relative !important;
    z-index: 10 !important;
    clear: both !important;
    margin-top: 0 !important;
  }
  .pkp_site_name_wrapper::before,
  .pkp_site_name_wrapper::after,
  .pkp_site_name::before,
  .pkp_site_name::after {
    display: none !important;
    content: none !important;
  }
}
@media (max-width: 420px) {
  .pkp_navigation_primary > li > a {
    min-height: 40px !important;
    padding: 9px 8px !important;
    font-size: 11.5px !important;
  }
}

/* V17 FINAL TWEAKS: remove gold hover underline, preserve the pale-blue hover,
   and extend the gold separator across the full viewport below the header. */
.pkp_navigation_primary > li > a::after {
  display: none !important;
  content: none !important;
  transform: none !important;
  opacity: 0 !important;
  width: 0 !important;
  box-shadow: none !important;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li > a:focus-visible,
.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li > a[aria-current="page"] {
  box-shadow: none !important;
  border-bottom-color: transparent !important;
  background-color: #dceaf7 !important;
  color: #0b2f5b !important;
}
.pkp_navigation_primary_wrapper {
  border-bottom: 0 !important;
  box-shadow: none !important;
  position: relative !important;
}
.pkp_structure_head {
  position: relative !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.pkp_structure_head::after {
  content: "" !important;
  position: absolute !important;
  left: calc(50% - 50vw) !important;
  right: calc(50% - 50vw) !important;
  bottom: 0 !important;
  height: 3px !important;
  background: #d5a52b !important;
  pointer-events: none !important;
  z-index: 30 !important;
}
@media (max-width: 768px) {
  .pkp_structure_head::after {
    left: 0 !important;
    right: 0 !important;
  }
}

/* V18: tidy mobile hamburger panel and remove the Search item's own underline. */
.pkp_navigation_search_wrapper a::before,
.pkp_navigation_search_wrapper a::after,
.pkp_navigation_search_wrapper a:hover::before,
.pkp_navigation_search_wrapper a:hover::after,
.pkp_navigation_search_wrapper a:focus::before,
.pkp_navigation_search_wrapper a:focus::after,
.pkp_navigation_search_wrapper a:focus-visible::before,
.pkp_navigation_search_wrapper a:focus-visible::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  transform: none !important;
}
.pkp_navigation_search_wrapper,
.pkp_navigation_search_wrapper > a,
.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_search_wrapper a:focus,
.pkp_navigation_search_wrapper a:focus-visible {
  box-shadow: none !important;
  border-bottom: 0 !important;
  text-decoration: none !important;
}
.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_search_wrapper a:focus-visible {
  background-color: #dceaf7 !important;
  color: #0b2f5b !important;
}

@media (max-width: 768px) {
  /* Keep the hamburger dropdown as a clean, readable vertical menu. */
  .pkp_navigation_primary_wrapper,
  .pkp_navigation_primary_wrapper.is_visible {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 120px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #102f5d !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22) !important;
    padding: 8px 12px 12px !important;
    box-sizing: border-box !important;
  }
  .pkp_navigation_primary,
  .pkp_navigation_primary ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    text-align: left !important;
    float: none !important;
    position: static !important;
    box-sizing: border-box !important;
  }
  .pkp_navigation_primary > li,
  .pkp_navigation_primary li {
    display: block !important;
    float: none !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
  .pkp_navigation_primary > li > a,
  .pkp_navigation_primary li > a,
  .pkp_navigation_search_wrapper > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 40px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }
  .pkp_navigation_primary > li > a:hover,
  .pkp_navigation_primary > li > a:focus-visible,
  .pkp_navigation_primary > li.current > a,
  .pkp_navigation_primary li > a:hover,
  .pkp_navigation_search_wrapper > a:hover {
    background: #dceaf7 !important;
    color: #0b2f5b !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .pkp_navigation_primary .dropdown-menu,
  .pkp_navigation_primary li ul {
    display: block !important;
    position: static !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 0 12px !important;
    background: #0b2850 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .pkp_navigation_search_wrapper {
    display: block !important;
    float: none !important;
    position: static !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .pkp_navigation_search_wrapper a::after,
  .pkp_navigation_search_wrapper a:hover::after {
    display: none !important;
    content: none !important;
  }
}



/* ==========================================================
   SJIL SOFT EDITORIAL THEME — 21 October 2026
   Palette aligned with the current cover: burgundy, ivory,
   warm grey and restrained antique gold. Cambridge-inspired
   editorial hierarchy; no heavy blue gradients.
   Append-only override to preserve existing OJS layout fixes.
   ========================================================== */
:root {
  --sjil-navy: #0b2f5b;
  --sjil-blue: #85465a;
  --sjil-blue-light: #edf4fb;
  --sjil-gold: #b79a69;
  --sjil-text: #343239;
  --sjil-muted: #777078;
  --sjil-border: #dfe7f0;
  --sjil-surface: #ffffff;
  --sjil-page: #f7f9fc;
  --sjil-radius: 5px;
  --sjil-shadow: 0 2px 10px rgba(72, 37, 49, .045);
}

/* Clean, paper-like page canvas */
html, body {
  background: #f7f9fc !important;
  color: #343239 !important;
}
body {
  font-family: "Merriweather", Georgia, serif !important;
  line-height: 1.72 !important;
}
a { color: #762f49 !important; }
a:hover, a:focus { color: #082f63 !important; }

/* Header uses a light editorial surface; uploaded banner remains visible */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name {
  background: #fbf9f8 !important;
  background-image: none !important;
  box-shadow: none !important;
}
.pkp_structure_head {
  border: 0 !important;
  border-bottom: 1px solid #e8dfe2 !important;
}
.pkp_site_name_wrapper {
  padding: 0 !important;
}
.pkp_site_name a:not(.is_img),
.pkp_site_name .is_text {
  color: #0b2f5b !important;
}
.pkp_site_name .is_img img,
.pkp_site_name a.is_img img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  background: transparent !important;
}
.pkp_site_name .is_img,
.pkp_site_name a.is_img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Restrained burgundy navigation, with understated hover state */
.pkp_navigation_primary_wrapper,
.pkp_navigation_primary_row,
.pkp_navigation_primary,
.pkp_navigation_search_wrapper {
  background: #0b2f5b !important;
  background-image: none !important;
  box-shadow: none !important;
}
.pkp_navigation_primary_wrapper {
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
  border-bottom: 3px solid #b79a69 !important;
  margin: 0 !important;
}
.pkp_navigation_primary_row {
  max-width: 1280px !important;
}
.pkp_navigation_primary > li > a,
.pkp_navigation_search_wrapper a {
  color: #fff !important;
  font-family: "Merriweather Sans", Arial, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li.current > a,
.pkp_navigation_search_wrapper a:hover {
  color: #f2dfc2 !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 #d3b784 !important;
}
.pkp_navigation_primary .dropdown-menu,
.pkp_navigation_primary li ul {
  background: #fff !important;
  border: 1px solid #dfe7f0 !important;
  box-shadow: 0 8px 24px rgba(65, 33, 44, .10) !important;
}
.pkp_navigation_primary .dropdown-menu a,
.pkp_navigation_primary li ul a {
  color: #0b2f5b !important;
}
.pkp_navigation_primary .dropdown-menu a:hover,
.pkp_navigation_primary li ul a:hover {
  color: #0b2f5b !important;
  background: #f7eff1 !important;
}

/* Softer user links and search controls */
.pkp_navigation_user_wrapper,
#navigationUser,
.pkp_navigation_user {
  background: #f5f0ef !important;
  border: 0 !important;
  border-bottom: 1px solid #dfe7f0 !important;
}
.pkp_navigation_user_wrapper a,
#navigationUser a,
.pkp_navigation_user a {
  color: #0b2f5b !important;
}
.pkp_search input[type="text"],
.pkp_search input[type="search"],
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], select, textarea {
  border: 1px solid #ddd2d6 !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #343239 !important;
  box-shadow: none !important;
}
.pkp_search button,
.cmp_button, .pkp_button, button, input[type="submit"] {
  background: #0b2f5b !important;
  background-image: none !important;
  border: 1px solid #0b2f5b !important;
  border-radius: 4px !important;
  color: #fff !important;
  box-shadow: none !important;
}
.pkp_search button:hover,
.cmp_button:hover, .pkp_button:hover, button:hover, input[type="submit"]:hover {
  background: #082f63 !important;
  border-color: #082f63 !important;
}

/* Spacious, white editorial content rather than blue-tinted panels */
.pkp_structure_content {
  background: transparent !important;
  max-width: 1280px !important;
}
.pkp_structure_main {
  background: transparent !important;
}
h1, h2, h3, h4, .page_title,
.page_index_journal h2,
.obj_article_details .page_title {
  color: #0b2f5b !important;
}
.page_index_journal h2::before {
  background: #b79a69 !important;
}
.page_index_journal .cmp_announcements,
.page_index_journal .current_issue,
.page_index_journal .additional_content,
.obj_article_summary,
.obj_announcement_summary,
.obj_article_details,
.cmp_breadcrumbs {
  background: #fff !important;
  border: 1px solid #dfe7f0 !important;
  border-radius: 5px !important;
  box-shadow: 0 2px 10px rgba(72, 37, 49, .035) !important;
}
.obj_article_summary:hover,
.obj_announcement_summary:hover {
  border-color: #c9aab5 !important;
  box-shadow: 0 4px 14px rgba(72, 37, 49, .07) !important;
  transform: none !important;
}
.obj_article_summary .title a,
.obj_announcement_summary .title a,
.current_issue .title {
  color: #0b2f5b !important;
}
.obj_article_summary .meta,
.obj_article_summary .authors,
.obj_article_summary .published,
.obj_announcement_summary .date {
  color: #777078 !important;
}
.obj_article_summary .galley_link {
  background: #edf4fb !important;
  color: #0b2f5b !important;
  border: 1px solid #e8d9de !important;
  border-radius: 3px !important;
}
.obj_article_summary .galley_link:hover {
  background: #dfe7f0 !important;
  color: #082f63 !important;
}
.current_issue {
  border-left: 3px solid #b79a69 !important;
}

/* Sidebar blocks: light, quiet, academic */
.pkp_structure_sidebar {
  background: transparent !important;
  border-left: 1px solid #dfe7f0 !important;
}
.pkp_structure_sidebar .sjil-sidebar-card {
  background: #fff !important;
  border: 1px solid #dfe7f0 !important;
  border-radius: 5px !important;
  box-shadow: 0 2px 8px rgba(72, 37, 49, .035) !important;
}
.pkp_structure_sidebar .sjil-sidebar-card:hover {
  border-color: #d8c1c9 !important;
  box-shadow: 0 3px 10px rgba(72, 37, 49, .055) !important;
}
.pkp_structure_sidebar .sjil-sidebar-title,
.pkp_structure_sidebar .pkp_block .title,
.pkp_structure_sidebar .block .title,
.pkp_structure_sidebar .content strong {
  color: #0b2f5b !important;
}
.pkp_structure_sidebar .sjil-sidebar-title::before {
  background: #b79a69 !important;
}
.pkp_structure_sidebar .sjil-sidebar-menu li {
  background: #f7f9fc !important;
  color: #4c454a !important;
  border-color: transparent !important;
  border-radius: 3px !important;
}
.pkp_structure_sidebar .sjil-sidebar-menu li::before {
  background: #b79a69 !important;
}
.pkp_structure_sidebar .sjil-sidebar-menu li:hover {
  background: #edf4fb !important;
  border-color: #dfe7f0 !important;
}
.pkp_structure_sidebar .sjil-sidebar-menu a,
.pkp_structure_sidebar .pkp_block .content a,
.pkp_structure_sidebar .block .content a {
  color: #0b2f5b !important;
}
.pkp_structure_sidebar .sjil-flag-counter {
  background: #f7f9fc !important;
  border-color: #edf4fb !important;
}
.pkp_structure_sidebar .sjil-metrics-list li {
  color: #777078 !important;
  border-bottom-color: #edf4fb !important;
}
.pkp_structure_sidebar .sjil-metrics-list strong {
  color: #0b2f5b !important;
}

/* Avoid artificially blue overlays/text over the uploaded homepage image.
   The image itself can carry its own cover/banner typography. */
.page_index_journal .homepage_image {
  border-radius: 4px !important;
  box-shadow: none !important;
}
.page_index_journal .homepage_image::before {
  background: transparent !important;
}
.page_index_journal .homepage_image::after {
  content: none !important;
  display: none !important;
}

/* Footer: soft burgundy rather than navy gradient */
.pkp_structure_footer_wrapper {
  background: #0b2f5b !important;
  background-image: none !important;
  border-top: 3px solid #b79a69 !important;
}
.pkp_structure_footer h2,
.pkp_structure_footer h3,
.pkp_structure_footer .title {
  color: #fff !important;
}
.pkp_structure_footer a {
  color: #f0dfe4 !important;
}
.pkp_structure_footer .copyright {
  border-top-color: rgba(255,255,255,.22) !important;
  color: #eadde1 !important;
}
.pkp_structure_footer_wrapper::after {
  height: 0 !important;
  display: none !important;
}

/* Keep the mobile menu usable while preserving the softer palette */
@media (max-width: 900px) {
  .pkp_navigation_primary_wrapper,
  .pkp_navigation_primary_row,
  .pkp_navigation_primary,
  .pkp_navigation_search_wrapper {
    background: #0b2f5b !important;
  }
  .pkp_navigation_primary > li > a,
  .pkp_navigation_search_wrapper a {
    color: #fff !important;
  }
  .pkp_navigation_primary > li > a:hover,
  .pkp_navigation_primary > li.current > a {
    background: #7a3a50 !important;
    color: #fff !important;
    box-shadow: none !important;
  }
  .pkp_structure_sidebar {
    border-left: 0 !important;
    background: transparent !important;
  }
}


/* ==========================================================
   SJIL HEADER FULL-WIDTH TUNE — 22 October 2026
   Let the uploaded cover-style banner span the browser width.
   Keep the gold accent line full-width to match the banner.
   ========================================================== */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}
.pkp_site_name a.is_img,
.pkp_site_name .is_img,
.pkp_site_name_wrapper a.is_img,
.pkp_site_name_wrapper .is_img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pkp_site_name a.is_img img,
.pkp_site_name .is_img img,
.pkp_site_name_wrapper a.is_img img,
.pkp_site_name_wrapper .is_img img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  object-fit: cover !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Gold accent follows the full-width navigation/header edge. */
.pkp_navigation_primary_wrapper {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-bottom: 3px solid #b79a69 !important;
  box-sizing: border-box !important;
}
@media (max-width: 768px) {
  .pkp_structure_head,
  .pkp_head_wrapper,
  .pkp_site_name_wrapper,
  .pkp_site_name {
    width: 100% !important;
    max-width: none !important;
  }
  .pkp_site_name a.is_img img,
  .pkp_site_name .is_img img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}


/* ==========================================================
   SJIL V21 — make the navigation bar one continuous color
   Fix: remove the contrasting purple area on the right side.
   ========================================================== */
.pkp_navigation_primary_wrapper,
.pkp_navigation_primary_row,
.pkp_navigation_primary,
.pkp_navigation_search_wrapper,
.pkp_navigation_search_wrapper a {
  background-color: #0b2f5b !important;
  background-image: none !important;
}

.pkp_navigation_primary_wrapper {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 3px solid #b79a69 !important;
  box-sizing: border-box !important;
}

.pkp_navigation_primary_row {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 max(12px, calc((100% - 1280px) / 2)) !important;
  justify-content: space-between !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.pkp_navigation_primary {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

.pkp_navigation_primary > li > a,
.pkp_navigation_search_wrapper a {
  color: #fff !important;
  background-color: transparent !important;
  background-image: none !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li.current > a {
  color: #f1d8a5 !important;
  background-color: transparent !important;
  box-shadow: inset 0 -3px 0 #b79a69 !important;
}

@media (max-width: 1050px) {
  .pkp_navigation_primary_wrapper,
  .pkp_navigation_primary_row,
  .pkp_navigation_primary,
  .pkp_navigation_search_wrapper {
    width: 100% !important;
    max-width: none !important;
    background-color: #0b2f5b !important;
    background-image: none !important;
  }
  .pkp_navigation_primary_row {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 4px 10px !important;
  }
  .pkp_navigation_primary {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
  .pkp_navigation_search_wrapper {
    margin-left: auto !important;
  }
}


/* ==========================================================
   SJIL V22 — unified with the new navy-and-gold HD header
   Keep the existing OJS layout and responsive navigation.
   ========================================================== */
:root {
  --sjil-navy: #082f63;
  --sjil-blue: #124b83;
  --sjil-blue-light: #edf4fb;
  --sjil-gold: #d6a52c;
  --sjil-text: #27364a;
  --sjil-muted: #667487;
  --sjil-border: #dce4ee;
  --sjil-surface: #ffffff;
  --sjil-page: #f7f8fb;
  --sjil-radius: 12px;
  --sjil-shadow: 0 5px 18px rgba(8, 47, 99, .08);
}

html { scroll-behavior: smooth; }
body {
  color: var(--sjil-text) !important;
  background: #f7f8fb !important;
}
a { color: #124b83; }
a:hover, a:focus { color: #082f63; }

/* Header image remains edge-to-edge; no overlay or forced cropping. */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #082f63 !important;
  border: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.pkp_site_name a.is_img,
.pkp_site_name .is_img,
.pkp_site_name_wrapper a.is_img,
.pkp_site_name_wrapper .is_img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}
.pkp_site_name a.is_img img,
.pkp_site_name .is_img img,
.pkp_site_name_wrapper a.is_img img,
.pkp_site_name_wrapper .is_img img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.pkp_site_name .is_text,
.pkp_site_name a:not(.is_img),
.pkp_site_name_wrapper .issn,
.pkp_site_name + .issn { display: none !important; }

/* One continuous navy navigation bar, full viewport width. */
.pkp_navigation_primary_wrapper,
.pkp_navigation_primary_row,
.pkp_navigation_primary,
.pkp_navigation_search_wrapper,
.pkp_navigation_search_wrapper a {
  background: #082f63 !important;
  background-image: none !important;
}
.pkp_navigation_primary_wrapper {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 3px solid #d6a52c !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.pkp_navigation_primary_row {
  display: flex !important;
  width: 100% !important;
  max-width: 1280px !important;
  min-height: 50px !important;
  margin: 0 auto !important;
  padding: 0 14px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}
.pkp_navigation_primary {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 2px !important;
  box-sizing: border-box !important;
}
.pkp_navigation_primary > li {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}
.pkp_navigation_primary > li > a,
.pkp_navigation_search_wrapper a {
  display: block !important;
  padding: 10px 8px !important;
  color: #fff !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-family: 'Merriweather Sans', Arial, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li.current > a,
.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_search_wrapper a:focus {
  color: #f5cc63 !important;
  background: transparent !important;
  box-shadow: inset 0 -3px 0 #d6a52c !important;
}
.pkp_navigation_primary .dropdown-menu {
  background: #fff !important;
  border: 1px solid #dce4ee !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 28px rgba(8, 47, 99, .16) !important;
}
.pkp_navigation_primary .dropdown-menu a {
  color: #082f63 !important;
  background: #fff !important;
}
.pkp_navigation_primary .dropdown-menu a:hover {
  color: #082f63 !important;
  background: #edf4fb !important;
}

/* Page canvas, typography and section headings. */
.pkp_structure_content {
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 24px 18px 32px !important;
  box-sizing: border-box !important;
}
h1, h2, h3, h4, .page_title,
.obj_article_summary .title a,
.obj_announcement_summary .title a {
  color: #082f63 !important;
}
.page_index_journal h2 {
  color: #082f63 !important;
}
.page_index_journal h2::before {
  background: #d6a52c !important;
}

/* Do not place an artificial dark overlay or duplicate text over the uploaded banner. */
.page_index_journal .homepage_image::before,
.page_index_journal .homepage_image::after {
  content: none !important;
  display: none !important;
}
.page_index_journal .homepage_image {
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  margin: 0 0 24px !important;
}
.page_index_journal .homepage_image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* Main content cards. */
.page_index_journal .cmp_announcements,
.page_index_journal .current_issue,
.page_index_journal .additional_content,
.obj_article_summary,
.obj_announcement_summary,
.obj_article_details,
.cmp_breadcrumbs {
  background: #fff !important;
  border: 1px solid #dce4ee !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(8, 47, 99, .045) !important;
}
.obj_article_summary:hover,
.obj_announcement_summary:hover {
  border-color: #d6a52c !important;
  box-shadow: 0 7px 20px rgba(8, 47, 99, .09) !important;
}
.obj_article_summary .galley_link {
  color: #fff !important;
  background: #082f63 !important;
  border-radius: 6px !important;
}
.current_issue { border-left: 4px solid #d6a52c !important; }
.obj_article_details .doi a { color: #9b7214 !important; }

/* Sidebar blocks harmonize with the header: white cards, navy headings, gold accents. */
.pkp_structure_sidebar {
  background: transparent !important;
  border-left: 1px solid #e0e6ef !important;
}
.pkp_structure_sidebar .pkp_block,
.pkp_structure_sidebar .block {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.pkp_structure_sidebar .sjil-sidebar-card {
  color: #27364a !important;
  background: #fff !important;
  border: 1px solid #dce4ee !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(8, 47, 99, .055) !important;
}
.pkp_structure_sidebar .sjil-sidebar-title {
  color: #082f63 !important;
  border-bottom-color: #e4eaf2 !important;
}
.pkp_structure_sidebar .sjil-sidebar-title::before,
.pkp_structure_sidebar .sjil-sidebar-menu li::before {
  background: #d6a52c !important;
}
.pkp_structure_sidebar .sjil-sidebar-menu li {
  color: #334b66 !important;
  background: #f6f8fb !important;
  border-color: transparent !important;
}
.pkp_structure_sidebar .sjil-sidebar-menu li:hover {
  color: #082f63 !important;
  background: #edf4fb !important;
  border-color: #dce6f2 !important;
}
.pkp_structure_sidebar .sjil-sidebar-menu a,
.pkp_structure_sidebar .pkp_block .content a,
.pkp_structure_sidebar .block .content a {
  color: #163f70 !important;
}
.pkp_structure_sidebar .sjil-metrics-list strong,
.pkp_structure_sidebar .content strong { color: #082f63 !important; }

/* Buttons and forms. */
.cmp_button, .pkp_button, button, input[type='submit'] {
  color: #fff !important;
  background: #082f63 !important;
  border: 1px solid #082f63 !important;
  border-radius: 7px !important;
}
.cmp_button:hover, .pkp_button:hover, button:hover, input[type='submit']:hover {
  color: #082f63 !important;
  background: #f5cc63 !important;
  border-color: #d6a52c !important;
}
input, select, textarea {
  border-color: #d6deea !important;
  border-radius: 6px;
}
input:focus, select:focus, textarea:focus {
  border-color: #9bb6d5 !important;
  outline-color: #9bb6d5 !important;
}

/* Footer uses the same blue-and-gold identity as the masthead. */
.pkp_structure_footer_wrapper {
  background: #082f63 !important;
  border-top: 3px solid #d6a52c !important;
}
.pkp_structure_footer {
  max-width: 1280px !important;
  margin: 0 auto !important;
}
.pkp_structure_footer h2,
.pkp_structure_footer h3,
.pkp_structure_footer .title { color: #fff !important; }
.pkp_structure_footer a { color: #f5cc63 !important; }
.pkp_structure_footer .copyright {
  color: #e2eaf5 !important;
  border-top-color: rgba(255,255,255,.2) !important;
}
.pkp_structure_footer_wrapper::after { background: #d6a52c !important; }

/* Responsive layout: retain the single-row menu on desktop and wrap safely on smaller screens. */
@media (max-width: 1050px) {
  .pkp_navigation_primary_wrapper,
  .pkp_navigation_primary_row,
  .pkp_navigation_primary,
  .pkp_navigation_search_wrapper {
    background: #082f63 !important;
  }
  .pkp_navigation_primary_row {
    display: flex !important;
    flex-wrap: wrap !important;
    max-width: none !important;
    padding: 4px 10px !important;
  }
  .pkp_navigation_primary {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .pkp_navigation_search_wrapper {
    margin-left: auto !important;
  }
}
@media (max-width: 768px) {
  .pkp_structure_content { padding: 18px 12px 24px !important; }
  .pkp_structure_sidebar { border-left: 0 !important; }
  .pkp_site_name a.is_img img,
  .pkp_site_name .is_img img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
  .pkp_navigation_primary > li > a,
  .pkp_navigation_search_wrapper a {
    padding: 8px 9px !important;
    font-size: 11px !important;
    white-space: normal !important;
  }
}


/* ==========================================================
   SJIL V23 — FIX FULL-WIDTH NAVIGATION EDGES
   Remove the mauve side gaps so the navy menu and gold rule
   continue cleanly from the left edge to the right edge.
   ========================================================== */
.pkp_navigation_primary_wrapper {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #082f63 !important;
  border: 0 !important;
  border-bottom: 3px solid #d6a52c !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  left: auto !important;
  right: auto !important;
}
.pkp_navigation_primary_wrapper::before,
.pkp_navigation_primary_wrapper::after {
  content: none !important;
  display: none !important;
}
.pkp_navigation_primary_row {
  display: flex !important;
  width: 100% !important;
  max-width: 1440px !important;
  min-height: 48px !important;
  margin: 0 auto !important;
  padding: 0 14px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.pkp_navigation_primary {
  background: transparent !important;
}
.pkp_navigation_search_wrapper {
  background: transparent !important;
}
@media (max-width: 1050px) {
  .pkp_navigation_primary_wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .pkp_navigation_primary_row {
    width: 100% !important;
    max-width: none !important;
    padding: 5px 12px !important;
  }
}


/* ==========================================================
   SJIL V24 — TRUE FULL-BLEED NAV BAR
   V23 left the outer page background visible at both ends.
   Extend the navigation wrapper to the viewport edges while
   keeping its menu items centered inside the bar.
   ========================================================== */
html, body {
  overflow-x: hidden !important;
}
.pkp_structure_page,
.pkp_structure_page > .pkp_navigation_primary_wrapper,
.pkp_navigation_primary_wrapper {
  box-sizing: border-box !important;
}
.pkp_navigation_primary_wrapper {
  position: relative !important;
  left: 50% !important;
  right: auto !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: 0 !important;
  padding: 0 !important;
  background: #082f63 !important;
  background-color: #082f63 !important;
  border: 0 !important;
  border-bottom: 3px solid #d6a52c !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.pkp_navigation_primary_wrapper::before,
.pkp_navigation_primary_wrapper::after {
  background: #082f63 !important;
  border-radius: 0 !important;
}
.pkp_navigation_primary_row {
  width: 100% !important;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #082f63 !important;
  border-radius: 0 !important;
}
.pkp_navigation_primary,
.pkp_navigation_primary > li,
.pkp_navigation_primary > li > a,
.pkp_navigation_search_wrapper,
.pkp_navigation_search_wrapper > a {
  background-color: #082f63 !important;
}
.pkp_navigation_primary > li > a,
.pkp_navigation_search_wrapper > a {
  color: #ffffff !important;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_search_wrapper > a:hover,
.pkp_navigation_search_wrapper > a:focus {
  background-color: #123f78 !important;
  color: #f5cc63 !important;
}
@media (max-width: 1050px) {
  .pkp_navigation_primary_wrapper {
    left: 50% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: -50vw !important;
  }
  .pkp_navigation_primary_row {
    max-width: 100vw !important;
  }
}


/* ==========================================================
   SJIL V25 — COMPACT CENTERED NAVIGATION
   Keep the navy bar full width, but constrain and center the
   menu items so they do not stretch across the whole screen.
   ========================================================== */
.pkp_navigation_primary_wrapper {
  width: 100vw !important;
  max-width: 100vw !important;
  background: #082f63 !important;
  border-bottom: 3px solid #d6a52c !important;
}
.pkp_navigation_primary_row {
  display: flex !important;
  width: 100% !important;
  max-width: 1260px !important;
  min-height: 48px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 18px !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  box-sizing: border-box !important;
}
.pkp_navigation_primary {
  display: flex !important;
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
}
.pkp_navigation_primary > li {
  flex: 0 0 auto !important;
}
.pkp_navigation_primary > li > a,
.pkp_navigation_search_wrapper > a {
  padding: 10px 12px !important;
  font-size: 11.5px !important;
  white-space: nowrap !important;
}
.pkp_navigation_search_wrapper {
  flex: 0 0 auto !important;
  width: auto !important;
  margin-left: 4px !important;
}
@media (max-width: 1050px) {
  .pkp_navigation_primary_row {
    max-width: 100% !important;
    padding: 0 10px !important;
    justify-content: center !important;
  }
  .pkp_navigation_primary {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .pkp_navigation_primary > li > a,
  .pkp_navigation_search_wrapper > a {
    padding: 9px 9px !important;
    font-size: 11px !important;
  }
}


/* ==========================================================
   SJIL V26 PATCH — CENTERED NAVIGATION, NO PINK SIDE GAPS
   Keep the navigation links centered while the navy background
   extends to both viewport edges.
   ========================================================== */
html, body {
  overflow-x: hidden !important;
}

.pkp_navigation_primary_wrapper,
.pkp_navigation_primary_wrapper.pkp_nav_list,
#navigationPrimary,
.pkp_navigation_primary_row,
.pkp_navigation_primary {
  background-color: #082f63 !important;
}

/* Full-bleed outer bar: remove the centered-container side gaps. */
.pkp_navigation_primary_wrapper {
  position: relative !important;
  display: block !important;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  left: auto !important;
  right: auto !important;
  box-sizing: border-box !important;
  background: #082f63 !important;
  border-top: 0 !important;
  border-bottom: 3px solid #d6a52c !important;
  box-shadow: none !important;
  z-index: 20 !important;
}

/* If the theme paints the wrapper through pseudo-elements, force navy. */
.pkp_navigation_primary_wrapper::before,
.pkp_navigation_primary_wrapper::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 50vw !important;
  background: #082f63 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.pkp_navigation_primary_wrapper::before { right: 100% !important; }
.pkp_navigation_primary_wrapper::after { left: 100% !important; }

.pkp_navigation_primary_row {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  width: 100% !important;
  max-width: 1260px !important;
  min-height: 46px !important;
  margin: 0 auto !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  background: #082f63 !important;
}

.pkp_navigation_primary {
  display: flex !important;
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 2px !important;
  background: #082f63 !important;
}

.pkp_navigation_primary > li,
.pkp_navigation_search_wrapper {
  background: #082f63 !important;
  flex: 0 0 auto !important;
}

.pkp_navigation_primary > li > a,
.pkp_navigation_search_wrapper > a {
  display: block !important;
  padding: 10px 11px !important;
  color: #ffffff !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  background: transparent !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_search_wrapper > a:hover,
.pkp_navigation_search_wrapper > a:focus {
  color: #f0c75e !important;
  background: rgba(255,255,255,.07) !important;
}

.pkp_navigation_search_wrapper {
  width: auto !important;
  margin-left: 2px !important;
}

@media (max-width: 1050px) {
  .pkp_navigation_primary_row {
    max-width: 100% !important;
    padding: 0 8px !important;
  }
  .pkp_navigation_primary {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .pkp_navigation_primary > li > a,
  .pkp_navigation_search_wrapper > a {
    padding: 9px 8px !important;
    font-size: 10.5px !important;
  }
}

@media (max-width: 640px) {
  .pkp_navigation_primary_row {
    min-height: 44px !important;
    padding: 0 5px !important;
  }
  .pkp_navigation_primary {
    flex-wrap: wrap !important;
    gap: 0 !important;
  }
  .pkp_navigation_primary > li > a,
  .pkp_navigation_search_wrapper > a {
    padding: 8px 7px !important;
    font-size: 10px !important;
  }
}


/* ==========================================================
   SJIL V27 — centered navigation group with comfortable spacing
   Bring Search closer to the menu and increase item padding.
   ========================================================== */
@media (min-width: 1051px) {
  .pkp_navigation_primary_row {
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    max-width: 1320px !important;
    padding: 0 18px !important;
    margin: 0 auto !important;
  }

  .pkp_navigation_primary {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  .pkp_navigation_primary > li {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .pkp_navigation_primary > li > a {
    padding: 12px 13px !important;
    font-size: 11.5px !important;
    line-height: 20px !important;
    white-space: nowrap !important;
  }

  .pkp_navigation_search_wrapper {
    position: static !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 0 0 2px !important;
    padding: 0 !important;
    transform: none !important;
    float: none !important;
    background: transparent !important;
  }

  .pkp_navigation_search_wrapper > a {
    padding: 12px 13px !important;
    font-size: 11.5px !important;
    line-height: 20px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 1050px) {
  .pkp_navigation_primary_row {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 5px 8px !important;
  }

  .pkp_navigation_primary {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  .pkp_navigation_primary > li > a {
    padding: 9px 10px !important;
  }

  .pkp_navigation_search_wrapper {
    position: static !important;
    margin: 0 !important;
    transform: none !important;
  }

  .pkp_navigation_search_wrapper > a {
    padding: 8px 10px !important;
  }
}


/* ==========================================================
   SJIL V28 — keep primary navigation and Search on one line
   Desktop: centered single row. Smaller screens: compact spacing
   to prevent Search from wrapping onto a separate line.
   ========================================================== */
@media (min-width: 1051px) {
  .pkp_navigation_primary_row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 3px !important;
    width: 100% !important;
    max-width: 1320px !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .pkp_navigation_primary {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    gap: 2px !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .pkp_navigation_primary > li {
    display: block !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  .pkp_navigation_primary > li > a,
  .pkp_navigation_search_wrapper > a {
    display: block !important;
    padding: 11px 9px !important;
    font-size: 11px !important;
    line-height: 18px !important;
    white-space: nowrap !important;
  }
  .pkp_navigation_search_wrapper {
    display: block !important;
    position: static !important;
    float: none !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    white-space: nowrap !important;
    background: transparent !important;
  }
}

@media (min-width: 641px) and (max-width: 1050px) {
  .pkp_navigation_primary_row {
    display: flex !important;
    flex-flow: row wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 3px !important;
  }
  .pkp_navigation_primary {
    display: flex !important;
    flex-flow: row wrap !important;
    justify-content: center !important;
    gap: 2px !important;
  }
  .pkp_navigation_primary > li > a,
  .pkp_navigation_search_wrapper > a {
    padding: 8px 9px !important;
    white-space: nowrap !important;
  }
  .pkp_navigation_search_wrapper {
    position: static !important;
    float: none !important;
    margin: 0 !important;
    transform: none !important;
  }
}


/* ==========================================================
   SJIL V29 — FIX OJS SEARCH AS A SIBLING:
   desktop nav stays one row, centered within the page body.
   Search is anchored to the same bar, at the right edge.
   ========================================================== */
@media (min-width: 1051px) {
  .pkp_navigation_primary_wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #0b2f5b !important;
    border: 0 !important;
    border-bottom: 4px solid #d5a52b !important;
    box-sizing: border-box !important;
  }

  .pkp_navigation_primary_row {
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1320px !important;
    min-height: 50px !important;
    margin: 0 auto !important;
    padding: 0 100px 0 16px !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  .pkp_navigation_primary {
    display: flex !important;
    flex: 0 1 auto !important;
    flex-flow: row nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 3px !important;
    box-sizing: border-box !important;
  }

  .pkp_navigation_primary > li {
    display: block !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  .pkp_navigation_primary > li > a {
    display: block !important;
    padding: 11px 9px !important;
    font-size: 11px !important;
    line-height: 18px !important;
    white-space: nowrap !important;
  }

  /* OJS may place Search outside the primary-row flex container.
     Absolute positioning keeps it on the same navy bar. */
  .pkp_navigation_search_wrapper {
    position: absolute !important;
    top: 0 !important;
    right: max(12px, calc((100% - 1320px) / 2 + 12px)) !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    float: none !important;
    width: auto !important;
    min-width: max-content !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    background: #0b2f5b !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .pkp_navigation_search_wrapper > a {
    display: block !important;
    padding: 11px 8px !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 11px !important;
    line-height: 18px !important;
    white-space: nowrap !important;
  }

  .pkp_navigation_primary_wrapper::before,
  .pkp_navigation_primary_wrapper::after,
  .pkp_navigation_primary_row::before,
  .pkp_navigation_primary_row::after {
    content: none !important;
    display: none !important;
  }

  /* Center the page's content column within the available viewport. */
  .pkp_structure_content {
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* Smaller screens: keep the bar clean and allow wrapping when required. */
@media (max-width: 1050px) {
  .pkp_navigation_primary_wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #0b2f5b !important;
    border-bottom: 4px solid #d5a52b !important;
    box-sizing: border-box !important;
  }

  .pkp_navigation_primary_row {
    display: flex !important;
    flex-flow: row wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 5px 8px !important;
    margin: 0 auto !important;
    gap: 2px !important;
    box-sizing: border-box !important;
  }

  .pkp_navigation_primary {
    display: flex !important;
    flex-flow: row wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    gap: 2px !important;
  }

  .pkp_navigation_search_wrapper {
    position: static !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    text-align: center !important;
    background: #0b2f5b !important;
  }

  .pkp_navigation_primary > li > a,
  .pkp_navigation_search_wrapper > a {
    white-space: nowrap !important;
  }
}


/* ==========================================================
   V30 PATCH — remove pink side corners around the navigation.
   Make the navy navigation background full viewport width while
   keeping the menu items centered inside a readable inner row.
   ========================================================== */
.pkp_navigation_primary_wrapper {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #0b2f5b !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 4px solid #d5a52b !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.pkp_navigation_primary_wrapper::before,
.pkp_navigation_primary_wrapper::after {
  content: none !important;
  display: none !important;
  background: #0b2f5b !important;
}
.pkp_navigation_primary_row {
  width: 100% !important;
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #0b2f5b !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.pkp_navigation_primary,
.pkp_navigation_search_wrapper {
  background: #0b2f5b !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 1050px) {
  .pkp_navigation_primary_wrapper,
  .pkp_navigation_primary_row,
  .pkp_navigation_primary,
  .pkp_navigation_search_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: #0b2f5b !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
  }
}


/* ==========================================================
   V31 PATCH — true viewport-width navigation background.
   The pink gutters come from the navigation wrapper being
   constrained by the centered OJS page container. Break the
   wrapper out to the viewport edges; keep the menu row centered.
   ========================================================== */
.pkp_navigation_primary_wrapper {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: #0b2f5b !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.pkp_navigation_primary_wrapper::before,
.pkp_navigation_primary_wrapper::after {
  content: none !important;
  display: none !important;
}
.pkp_navigation_primary_row {
  width: 100% !important;
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #0b2f5b !important;
  box-sizing: border-box !important;
}
.pkp_navigation_primary,
.pkp_navigation_search_wrapper {
  background-color: #0b2f5b !important;
}
@media (max-width: 700px) {
  .pkp_navigation_primary_wrapper {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  .pkp_navigation_primary_row {
    max-width: 100% !important;
  }
}


/* ==========================================================
   V33 PATCH — only paint the outer navbar gutters navy.
   Based on V31 (not V32): do NOT recolor body/page/content.
   The pseudo-element extends the navbar background to viewport
   edges while keeping the menu row centered and unchanged.
   ========================================================== */
.pkp_navigation_primary_wrapper {
  position: relative !important;
  isolation: isolate !important;
  background: transparent !important;
  overflow: visible !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.pkp_navigation_primary_wrapper::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 100vw !important;
  transform: translateX(-50%) !important;
  background: #0b2f5b !important;
  z-index: -1 !important;
  pointer-events: none !important;
}
.pkp_navigation_primary_wrapper::after {
  content: none !important;
  display: none !important;
}
.pkp_navigation_primary_row {
  position: relative !important;
  z-index: 1 !important;
  background: #0b2f5b !important;
  border-bottom: 3px solid #d5a52b !important;
  box-sizing: border-box !important;
}
.pkp_navigation_primary,
.pkp_navigation_search_wrapper {
  background: #0b2f5b !important;
}
/* Keep the rest of the page on its existing light background. */
.pkp_structure_main,
.pkp_structure_content,
.pkp_structure_page,
body {
  background-color: initial;
}

/* V34 FIX — remove the remaining pink block at the far-right end of the navbar. */
.pkp_site_nav_menu,
.pkp_site_nav_menu > *,
.pkp_site_nav_menu .pkp_navigation_user,
.pkp_site_nav_menu .pkp_navigation_user_wrapper,
.pkp_site_nav_menu #navigationUser,
.pkp_site_nav_menu .pkp_navigation_primary_wrapper,
.pkp_site_nav_menu .pkp_navigation_primary_row,
.pkp_site_nav_menu .pkp_navigation_primary,
.pkp_site_nav_menu .pkp_navigation_search_wrapper,
.pkp_site_nav_menu .pkp_nav_list,
.pkp_site_nav_menu li,
.pkp_site_nav_menu li a,
.pkp_site_nav_menu::before,
.pkp_site_nav_menu::after,
.pkp_navigation_user::before,
.pkp_navigation_user::after,
.pkp_navigation_user_wrapper::before,
.pkp_navigation_user_wrapper::after,
#navigationUser::before,
#navigationUser::after {
  background-color: #0b2f5b !important;
  background-image: none !important;
}
.pkp_site_nav_menu .pkp_navigation_user,
.pkp_site_nav_menu .pkp_navigation_user_wrapper,
.pkp_site_nav_menu #navigationUser {
  border: 0 !important;
  box-shadow: none !important;
}


/* ==========================================================
   V34 PATCH — full-width gold rule + tidier desktop navbar.
   Keep the page content light and preserve navy/gold branding.
   ========================================================== */
.pkp_site_nav_menu {
  position: relative !important;
  background: #0b2f5b !important;
  border: 0 !important;
  box-shadow: none !important;
}
.pkp_navigation_primary_wrapper {
  position: relative !important;
  width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.pkp_navigation_primary_wrapper::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 3px !important;
  transform: translateX(-50%) !important;
  background: #d5a52b !important;
  z-index: 5 !important;
  pointer-events: none !important;
}
.pkp_navigation_primary_row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 1200px !important;
  min-height: 44px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 16px 3px !important;
  border-bottom: 0 !important;
  box-sizing: border-box !important;
}
.pkp_navigation_primary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 2px !important;
  background: #0b2f5b !important;
}
.pkp_navigation_primary > li {
  margin: 0 !important;
  padding: 0 !important;
}
.pkp_navigation_primary > li > a {
  display: flex !important;
  align-items: center !important;
  min-height: 41px !important;
  padding: 0 10px !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #0b2f5b !important;
  color: #fff !important;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  background: #123d70 !important;
  color: #f2c85b !important;
}
.pkp_navigation_search_wrapper {
  flex: 0 0 auto !important;
  margin-left: 12px !important;
  padding: 0 8px !important;
  background: #0b2f5b !important;
  white-space: nowrap !important;
}
.pkp_navigation_search_wrapper a,
.pkp_navigation_search_wrapper button {
  color: #fff !important;
  background: #0b2f5b !important;
}
@media (max-width: 1100px) {
  .pkp_navigation_primary_row { padding-left: 8px !important; padding-right: 8px !important; }
  .pkp_navigation_primary > li > a { padding-left: 7px !important; padding-right: 7px !important; font-size: 11px !important; }
  .pkp_navigation_search_wrapper { margin-left: 4px !important; padding-left: 4px !important; padding-right: 4px !important; }
}
@media (max-width: 700px) {
  .pkp_navigation_primary_wrapper { width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; }
  .pkp_navigation_primary_row { display: block !important; max-width: 100% !important; padding: 0 8px 3px !important; }
  .pkp_navigation_primary { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; }
  .pkp_navigation_primary > li > a { min-height: 36px !important; padding: 0 8px !important; }
  .pkp_navigation_search_wrapper { margin: 0 !important; text-align: center !important; }
}


/* ==========================================================
   SJIL V36 — sebar menu dari kiri ke kanan seperti pola Lex Lata
   Nama dan urutan menu SJIL tetap; hanya tata letak yang diubah.
   ========================================================== */
@media (min-width: 701px) {
  .pkp_navigation_primary_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #0b2f5b !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 4px solid #d5a52b !important;
    box-sizing: border-box !important;
  }
  .pkp_navigation_primary_row {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 1280px !important;
    min-height: 48px !important;
    margin: 0 auto !important;
    padding: 0 16px 3px !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }
  .pkp_navigation_primary {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-flow: row nowrap !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }
  .pkp_navigation_primary > li {
    flex: 0 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }
  .pkp_navigation_primary > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 45px !important;
    padding: 0 clamp(7px, 1vw, 14px) !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }
  .pkp_navigation_primary > li > a:hover,
  .pkp_navigation_primary > li > a:focus,
  .pkp_navigation_primary > li.current > a {
    color: #f2c85b !important;
    background: transparent !important;
    box-shadow: inset 0 -3px 0 #d5a52b !important;
  }
  .pkp_navigation_search_wrapper {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 4px 0 12px !important;
    background: transparent !important;
    border: 0 !important;
    white-space: nowrap !important;
  }
  .pkp_navigation_search_wrapper a,
  .pkp_navigation_search_wrapper button {
    display: flex !important;
    align-items: center !important;
    min-height: 45px !important;
    padding: 0 8px !important;
    color: #fff !important;
    background: transparent !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 700px) {
  .pkp_navigation_primary_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .pkp_navigation_primary_row {
    padding: 0 8px 3px !important;
  }
}

/* V37: remove the gold rule UNDER the navigation only; keep menu layout/colors. */
.pkp_navigation_primary_wrapper {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.pkp_navigation_primary_wrapper::after {
  content: none !important;
  display: none !important;
  height: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.pkp_navigation_primary_row {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* V38 — definitive removal of the gold line below the navbar.
   Keep the gold banner artwork and all menu items unchanged. */
.pkp_site_nav_menu,
.pkp_site_nav_menu .pkp_navigation_primary_wrapper,
.pkp_site_nav_menu .pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper,
.pkp_navigation_primary_row {
  border-bottom: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.pkp_site_nav_menu::before,
.pkp_site_nav_menu::after,
.pkp_site_nav_menu .pkp_navigation_primary_wrapper::before,
.pkp_site_nav_menu .pkp_navigation_primary_wrapper::after,
.pkp_navigation_primary_wrapper::before,
.pkp_navigation_primary_wrapper::after,
.pkp_navigation_primary_row::before,
.pkp_navigation_primary_row::after {
  content: none !important;
  display: none !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* V39 — remove the thin gold separator at the banner/navigation boundary.
   Preserve gold artwork embedded inside the banner image itself. */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name,
.pkp_site_name a.is_img,
.pkp_site_name .is_img,
.pkp_site_name a.is_img img,
.pkp_site_name .is_img img {
  border-bottom: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.pkp_navigation_primary_wrapper,
.pkp_site_nav_menu,
.pkp_navigation_primary_row {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.pkp_navigation_primary_wrapper::before,
.pkp_navigation_primary_wrapper::after,
.pkp_site_nav_menu::before,
.pkp_site_nav_menu::after,
.pkp_navigation_primary_row::before,
.pkp_navigation_primary_row::after {
  content: none !important;
  display: none !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* V40 — add a clean full-width gold accent UNDER the navigation menu only.
   The banner/nav boundary stays clean; menu content and colors are unchanged. */
.pkp_site_nav_menu .pkp_navigation_primary_wrapper,
.pkp_navigation_primary_wrapper {
  position: relative !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.pkp_site_nav_menu .pkp_navigation_primary_wrapper::after,
.pkp_navigation_primary_wrapper::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  z-index: 20 !important;
  left: 50% !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  height: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #d5a52b !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}


/* V41 — place the gold line at the bottom edge of the complete menu bar.
   Attach it to the site navigation wrapper rather than the inner menu wrapper. */
.pkp_navigation_primary_wrapper::after {
  content: none !important;
  display: none !important;
}
.pkp_site_nav_menu {
  position: relative !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.pkp_site_nav_menu::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  z-index: 999 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #d5a52b !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}


/* V42 — compact footer width and vertical spacing */
.pkp_structure_footer_wrapper {
  width: 100% !important;
  box-sizing: border-box !important;
  background: linear-gradient(135deg, #092d61, #164f82) !important;
  border-top: 3px solid #d5a52b !important;
}
.pkp_structure_footer {
  width: calc(100% - 40px) !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 20px 18px 14px !important;
  box-sizing: border-box !important;
}
.pkp_structure_footer h2,
.pkp_structure_footer h3,
.pkp_structure_footer .title {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}
.pkp_structure_footer p,
.pkp_structure_footer li,
.pkp_structure_footer address,
.pkp_structure_footer .content {
  font-size: 12px !important;
  line-height: 1.6 !important;
}
.pkp_structure_footer .copyright {
  margin-top: 12px !important;
  padding-top: 10px !important;
  font-size: 11px !important;
}
.pkp_structure_footer_wrapper::after {
  height: 3px !important;
}
@media (max-width: 768px) {
  .pkp_structure_footer {
    width: calc(100% - 24px) !important;
    padding: 16px 10px 12px !important;
  }
}


/* ==========================================================
   SJIL RESPONSIVE + NAVY COLOR CLEANUP — FINAL OVERRIDE
   Remove burgundy tones and prevent navigation/content overlap
   on phones, tablets, laptops, and wide screens.
   ========================================================== */
:root {
  --sjil-navy: #0b2f5b;
  --sjil-blue: #164f82;
  --sjil-blue-light: #edf4fb;
  --sjil-gold: #d5a52b;
  --sjil-border: #dfe7f0;
}
html, body { max-width: 100%; overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }

/* All links and interactive text use the navy family, not burgundy. */
a, a:visited { color: #0b2f5b; }
a:hover, a:focus { color: #164f82; }
.pkp_structure_sidebar a,
.pkp_structure_sidebar a:visited,
.pkp_navigation_primary .dropdown-menu a,
.pkp_block a, .pkp_block a:visited,
.pkp_structure_content a { color: #0b2f5b !important; }
.pkp_structure_sidebar,
.pkp_structure_sidebar .pkp_block,
.pkp_structure_sidebar .block,
.pkp_structure_sidebar .sjil-sidebar-card { min-width: 0 !important; max-width: 100% !important; }

/* Banner image always scales to its real container. */
.pkp_site_name_wrapper, .pkp_site_name, .pkp_site_name a.is_img,
.pkp_site_name a.is_img img, .pkp_site_name img {
  max-width: 100% !important;
}
.pkp_site_name a.is_img img { display: block !important; width: 100% !important; height: auto !important; object-fit: contain !important; }

/* Desktop/tablet navigation: allow items to shrink without covering Search. */
.pkp_navigation_primary_wrapper { width: 100% !important; max-width: 100% !important; }
.pkp_navigation_primary_row { width: 100% !important; max-width: 1280px !important; min-width: 0 !important; }
.pkp_navigation_primary > li > a { color: #fff !important; }
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li.current > a { color: #f5c84b !important; background: transparent !important; }
.pkp_navigation_primary .dropdown-menu { z-index: 9999 !important; }

/* Tablet: menu may wrap into multiple rows; no overlap or clipped labels. */
@media (max-width: 1050px) {
  .pkp_navigation_primary_wrapper { width: 100% !important; max-width: 100% !important; overflow: visible !important; }
  .pkp_navigation_primary_row {
    display: flex !important; flex-wrap: wrap !important; align-items: center !important;
    justify-content: center !important; gap: 4px !important; padding: 6px 8px !important;
    min-height: 0 !important; overflow: visible !important;
  }
  .pkp_navigation_primary {
    display: flex !important; flex: 1 1 100% !important; flex-wrap: wrap !important;
    justify-content: center !important; align-items: center !important; gap: 2px !important;
    width: 100% !important; min-width: 0 !important; min-height: 0 !important;
  }
  .pkp_navigation_primary > li { flex: 0 1 auto !important; min-width: 0 !important; white-space: normal !important; }
  .pkp_navigation_primary > li > a { padding: 9px 10px !important; white-space: normal !important; overflow-wrap: anywhere !important; }
  .pkp_navigation_search_wrapper { position: static !important; transform: none !important; margin: 0 auto !important; text-align: center !important; }
}

/* Phone layout: readable stacked menu, no hidden/overlapping items. */
@media (max-width: 767px) {
  body { font-size: 14px !important; }
  .pkp_site_name_wrapper { padding: 0 !important; }
  .pkp_site_name a.is_img, .pkp_site_name .is_img { width: 100% !important; max-width: 100% !important; }
  .pkp_site_name a.is_img img, .pkp_site_name .is_img img { width: 100% !important; height: auto !important; }

  .pkp_navigation_primary_wrapper {
    display: block !important; width: 100% !important; max-width: 100% !important;
    margin: 0 !important; padding: 0 !important; overflow: visible !important;
    background: #0b2f5b !important; border-bottom: 3px solid #d5a52b !important;
  }
  .pkp_navigation_primary_row {
    display: block !important; width: 100% !important; max-width: 100% !important;
    min-height: 0 !important; height: auto !important; margin: 0 !important;
    padding: 4px 8px !important; overflow: visible !important;
  }
  .pkp_navigation_primary {
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
    align-items: stretch !important; justify-content: flex-start !important;
    width: 100% !important; min-width: 0 !important; min-height: 0 !important;
    height: auto !important; margin: 0 !important; padding: 0 !important; gap: 0 !important;
  }
  .pkp_navigation_primary > li {
    display: block !important; float: none !important; width: 100% !important;
    min-width: 0 !important; margin: 0 !important; padding: 0 !important;
    white-space: normal !important; border-bottom: 1px solid rgba(255,255,255,.13) !important;
  }
  .pkp_navigation_primary > li > a {
    display: block !important; width: 100% !important; padding: 11px 12px !important;
    color: #fff !important; background: transparent !important; border-radius: 0 !important;
    font-size: 13px !important; line-height: 1.45 !important; text-align: left !important;
    white-space: normal !important; overflow-wrap: anywhere !important;
  }
  .pkp_navigation_primary > li > a:hover,
  .pkp_navigation_primary > li > a:focus,
  .pkp_navigation_primary > li.current > a {
    color: #f5c84b !important; background: #08264b !important; box-shadow: none !important;
  }
  .pkp_navigation_primary .dropdown-menu {
    position: static !important; float: none !important; display: block !important;
    width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 4px 8px 8px 18px !important;
    background: #102e59 !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; box-sizing: border-box !important;
  }
  .pkp_navigation_primary .dropdown-menu a {
    display: block !important; padding: 9px 10px !important; color: #e7f0fb !important;
    background: transparent !important; white-space: normal !important; overflow-wrap: anywhere !important;
    font-size: 12px !important; line-height: 1.45 !important;
  }
  .pkp_navigation_search_wrapper { display: block !important; position: static !important; width: 100% !important; margin: 0 !important; padding: 4px 8px !important; text-align: left !important; transform: none !important; }
  .pkp_navigation_search_wrapper a { display: block !important; padding: 10px 12px !important; color: #fff !important; white-space: normal !important; }

  .pkp_structure_content { width: 100% !important; padding: 16px 12px 22px !important; }
  .pkp_structure_main, .pkp_structure_sidebar, .pkp_structure_content .row { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .pkp_structure_sidebar { margin-top: 18px !important; padding: 0 !important; border: 0 !important; }
  .pkp_structure_sidebar .pkp_block, .pkp_structure_sidebar .block { width: 100% !important; margin: 0 0 12px !important; }
  .page_index_journal .homepage_image { margin-bottom: 18px !important; border-radius: 8px !important; }
  .page_index_journal .homepage_image img { display: block !important; width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; }
  .page_index_journal .homepage_image::after { font-size: clamp(10px, 3vw, 13px) !important; line-height: 1.35 !important; }
  .obj_article_summary, .obj_announcement_summary, .obj_article_details { max-width: 100% !important; padding: 14px !important; overflow-wrap: anywhere !important; }
  .pkp_structure_footer { padding: 22px 14px 16px !important; }
  img, video, iframe { max-width: 100% !important; }
}

@media (max-width: 380px) {
  .pkp_navigation_primary > li > a { padding: 10px !important; font-size: 12px !important; }
  .pkp_structure_content { padding-right: 9px !important; padding-left: 9px !important; }
  .pkp_structure_sidebar .sjil-sidebar-card { padding: 12px !important; }
}


/* ==========================================================
   V44 — MOBILE NAV FIX
   Keep dropdowns collapsed until the parent menu is opened.
   Remove the gold rule above the navbar (header bottom border).
   ========================================================== */
.pkp_structure_head {
  border-bottom: 0 !important;
}
.pkp_site_name_wrapper,
.pkp_site_name,
.pkp_site_name a.is_img,
.pkp_site_name a.is_img img {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 767px) {
  /* Prevent all About / For Authors submenus from appearing as giant empty boxes. */
  .pkp_navigation_primary > li > .dropdown-menu,
  .pkp_navigation_primary > li > ul.dropdown-menu {
    display: none !important;
    position: static !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 8px 8px 18px !important;
    overflow: visible !important;
    background: #102e59 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* OJS toggles the parent item's open class when a submenu is expanded. */
  .pkp_navigation_primary > li.open > .dropdown-menu,
  .pkp_navigation_primary > li.is_open > .dropdown-menu,
  .pkp_navigation_primary > li > a[aria-expanded="true"] + .dropdown-menu {
    display: block !important;
  }

  .pkp_navigation_primary .dropdown-menu li {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .pkp_navigation_primary .dropdown-menu a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 9px 10px !important;
    color: #e7f0fb !important;
    background: transparent !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Avoid fixed-height / forced blank panels from legacy theme rules. */
  .pkp_navigation_primary,
  .pkp_navigation_primary > li,
  .pkp_navigation_primary > li > a,
  .pkp_navigation_primary .dropdown-menu,
  .pkp_navigation_primary .dropdown-menu li,
  .pkp_navigation_primary .dropdown-menu a {
    max-height: none !important;
  }

  /* Keep only the gold accent below the complete navbar. */
  .pkp_structure_head,
  .pkp_head_wrapper,
  .pkp_site_name_wrapper,
  .pkp_site_name,
  .pkp_site_name a.is_img,
  .pkp_site_name a.is_img img {
    border-bottom: 0 !important;
  }
  .pkp_navigation_primary_wrapper {
    border-top: 0 !important;
    border-bottom: 3px solid #d5a52b !important;
  }
}

/* ==========================================================
   V45 — MOBILE SUBMENU VISIBILITY + CONTRAST FIX
   Preserve working hamburger; make nested links readable on phones.
   ========================================================== */
@media (max-width: 767px) {
  /* Keep the hamburger's top-level list navy, but never force every
     nested submenu open at once. */
  .pkp_navigation_primary > li > .dropdown-menu,
  .pkp_navigation_primary > li > ul.dropdown-menu {
    display: none !important;
    visibility: hidden !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 4px 8px 8px 18px !important;
    overflow: visible !important;
    background: #f3f7fc !important;
    border: 1px solid #dfe7f0 !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: none !important;
  }

  /* OJS / Bootstrap may mark an opened parent with different states. */
  .pkp_navigation_primary > li.open > .dropdown-menu,
  .pkp_navigation_primary > li.is_open > .dropdown-menu,
  .pkp_navigation_primary > li.show > .dropdown-menu,
  .pkp_navigation_primary > li > a[aria-expanded="true"] + .dropdown-menu,
  .pkp_navigation_primary > li > a[aria-expanded="true"] ~ .dropdown-menu {
    display: block !important;
    visibility: visible !important;
  }

  .pkp_navigation_primary .dropdown-menu li,
  .pkp_navigation_primary .dropdown-menu > li {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  .pkp_navigation_primary .dropdown-menu a,
  .pkp_navigation_primary .dropdown-menu li a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    color: #0b2f5b !important;
    background: #f3f7fc !important;
    border: 0 !important;
    border-bottom: 1px solid #dfe7f0 !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    box-shadow: none !important;
  }

  .pkp_navigation_primary .dropdown-menu li:last-child > a {
    border-bottom: 0 !important;
  }

  .pkp_navigation_primary .dropdown-menu a:hover,
  .pkp_navigation_primary .dropdown-menu a:focus,
  .pkp_navigation_primary .dropdown-menu li.current > a {
    color: #0b2f5b !important;
    background: #e2edf8 !important;
  }

  /* Remove accidental fixed sizing and blank menu panels on mobile. */
  .pkp_navigation_primary > li,
  .pkp_navigation_primary > li > a,
  .pkp_navigation_primary .dropdown-menu,
  .pkp_navigation_primary .dropdown-menu li,
  .pkp_navigation_primary .dropdown-menu a {
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* ==========================================================
   V46 — HARD FIX FOR EMPTY MOBILE SUBMENU PANELS
   The mobile theme leaves submenu containers visible while their
   children are hidden by earlier overrides. Explicitly render the
   submenu links and neutralize inherited navy overlays on phones.
   ========================================================== */
@media screen and (max-width: 767px) {
  /* Remove the empty panel appearance and allow the actual submenu list. */
  .pkp_navigation_primary li > ul,
  .pkp_navigation_primary li > ul.dropdown-menu,
  .pkp_navigation_primary li > .dropdown-menu,
  .pkp_navigation_primary li > div.dropdown-menu,
  #navigationPrimary li > ul,
  #navigationPrimary li > .dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 4px 8px 6px 16px !important;
    overflow: visible !important;
    background: #f3f7fc !important;
    border: 0 !important;
    border-left: 3px solid #d5a52b !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    clip: auto !important;
  }

  .pkp_navigation_primary li > ul > li,
  .pkp_navigation_primary li > .dropdown-menu > li,
  #navigationPrimary li > ul > li,
  #navigationPrimary li > .dropdown-menu > li {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    overflow: visible !important;
  }

  .pkp_navigation_primary li > ul a,
  .pkp_navigation_primary li > .dropdown-menu a,
  #navigationPrimary li > ul a,
  #navigationPrimary li > .dropdown-menu a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    color: #0b2f5b !important;
    background: #f3f7fc !important;
    border: 0 !important;
    border-bottom: 1px solid #dfe7f0 !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-decoration: none !important;
    box-shadow: none !important;
    clip: auto !important;
  }

  .pkp_navigation_primary li > ul a:hover,
  .pkp_navigation_primary li > .dropdown-menu a:hover,
  #navigationPrimary li > ul a:hover,
  #navigationPrimary li > .dropdown-menu a:hover {
    color: #0b2f5b !important;
    background: #e2edf8 !important;
  }

  /* Override theme rules that hide nested items at mobile breakpoints. */
  .pkp_navigation_primary .dropdown-menu li,
  .pkp_navigation_primary .dropdown-menu li a,
  #navigationPrimary .dropdown-menu li,
  #navigationPrimary .dropdown-menu li a {
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
  }
}


/* ==========================================================
   V47 — REMOVE GOLD STRIPE ABOVE NAV + REFINED MENU HOVER
   Based on the user's current V46 stylesheet.
   Keep the gold accent below the navbar.
   ========================================================== */

/* Remove any CSS-created gold line at the bottom of the header/banner.
   A tiny navy cover also masks a thin baked-in stripe at the banner edge. */
.pkp_structure_head {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name,
.pkp_site_name a.is_img {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.pkp_site_name a.is_img,
.pkp_site_name .is_img {
  position: relative !important;
  overflow: hidden !important;
}
.pkp_site_name a.is_img::after,
.pkp_site_name .is_img::after {
  content: "" !important;
  position: absolute !important;
  z-index: 5 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 3px !important;
  background: #0b2f5b !important;
  pointer-events: none !important;
}

/* The navbar should have no gold top border, only the existing bottom accent. */
.pkp_navigation_primary_wrapper {
  border-top: 0 !important;
  border-bottom: 4px solid #d5a52b !important;
}

/* More refined hover: soft blue glow and gentle lift, not a raised gold bar. */
.pkp_navigation_primary > li > a {
  position: relative !important;
  border-radius: 7px !important;
  transition:
    color .22s ease,
    background-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease !important;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus-visible {
  color: #f6d77b !important;
  background: rgba(255,255,255,.075) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.14) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}
/* Keep the active page recognizable without turning hover into a gold bar. */
.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li > a[aria-current="page"] {
  color: #f6d77b !important;
  background: rgba(255,255,255,.045) !important;
  box-shadow: inset 0 -2px 0 rgba(213,165,43,.85) !important;
}
/* Submenu hover remains clear and understated. */
.pkp_navigation_primary .dropdown-menu a {
  transition: color .18s ease, background-color .18s ease, padding-left .18s ease !important;
}
.pkp_navigation_primary .dropdown-menu a:hover,
.pkp_navigation_primary .dropdown-menu a:focus-visible {
  color: #0b2f5b !important;
  background: #edf4fb !important;
  padding-left: 15px !important;
  text-decoration: none !important;
}

@media (max-width: 767px) {
  /* Do not overlay the mobile hamburger or alter its open/close behavior. */
  .pkp_site_name a.is_img::after,
  .pkp_site_name .is_img::after {
    height: 2px !important;
  }
  .pkp_navigation_primary > li > a:hover,
  .pkp_navigation_primary > li > a:focus-visible {
    transform: none !important;
    box-shadow: none !important;
  }
}


/* ==========================================================
   V48 — DEFINITELY REMOVE THE GOLD STRIPE ABOVE THE NAVBAR
   Keep the gold accent below the navbar unchanged.
   ========================================================== */
.pkp_navigation_primary_wrapper {
  border-top: 0 !important;
  box-shadow: none !important;
}

/* Cover the very bottom edge of the banner itself, where the
   gold stripe may be baked into the banner image. */
.pkp_site_name_wrapper {
  position: relative !important;
}
.pkp_site_name_wrapper::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 999 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #0b2f5b !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

/* Do not add a gold line to the top edge of the menu.
   The existing bottom gold border remains in place. */
.pkp_navigation_primary_wrapper {
  border-top: 0 !important;
  border-bottom: 4px solid #d5a52b !important;
}