/* =========================================================
   CIMEGS-SEJ — OJS Brand Layer / Phase 1
   SAFE VISUAL LAYER ONLY
   ---------------------------------------------------------
   Based on the CIMEGS Hub design system:
   - Brand navy:      #242F5F
   - Journal accent:  #32417F
   - Deep navy:       #10162E
   - Crimson accent:  #C31412
   - Paper:           #F7F8FA
   - Surface:         #FFFFFF
   - Ink:             #16202B
   - Muted:           #4A515B
   - Line:            #C9CED6

   IMPORTANT:
   This file intentionally does NOT redefine OJS grid widths,
   column widths, display modes, positioning, or structural
   wrappers. It is a visual identity layer only.
   ========================================================= */

:root {
  --cimegs-blue-900: #10162E;
  --cimegs-blue-800: #1A2247;
  --cimegs-brand: #242F5F;
  --cimegs-journal: #32417F;
  --cimegs-blue-500: #44549C;
  --cimegs-blue-300: #97A1CC;
  --cimegs-blue-100: #DCE0EF;
  --cimegs-blue-050: #F0F2F8;

  --cimegs-red-700: #9E100F;
  --cimegs-red-600: #C31412;
  --cimegs-red-500: #E41715;

  --cimegs-paper: #F7F8FA;
  --cimegs-surface: #FFFFFF;
  --cimegs-line-soft: #ECEEF1;
  --cimegs-line: #C9CED6;
  --cimegs-muted: #6E7785;
  --cimegs-text-soft: #4A515B;
  --cimegs-ink: #16202B;

  --cimegs-radius: 6px;
  --cimegs-radius-lg: 10px;
  --cimegs-shadow-1: 0 1px 2px rgba(26, 34, 71, .06);
  --cimegs-shadow-2: 0 6px 24px rgba(26, 34, 71, .09);
}

/* ---------------------------------------------------------
   1. Base typography and colour
   No width or layout changes.
   --------------------------------------------------------- */

body {
  color: var(--cimegs-ink);
  background: var(--cimegs-paper);
  font-family:
    "IBM Plex Sans",
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--cimegs-brand);
  font-family:
    "IBM Plex Serif",
    Georgia,
    "Times New Roman",
    serif;
  font-weight: 600;
  line-height: 1.18;
}

a {
  color: var(--cimegs-journal);
  text-underline-offset: 3px;
}

a:hover,
a:focus {
  color: var(--cimegs-brand);
  text-decoration-color: var(--cimegs-red-600);
}

::selection {
  background: var(--cimegs-blue-100);
  color: var(--cimegs-blue-900);
}

/* ---------------------------------------------------------
   2. OJS page canvas / surfaces
   Colour only, no wrapper sizing.
   --------------------------------------------------------- */

.pkp_structure_page {
  background: var(--cimegs-paper);
}

.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar {
  color: var(--cimegs-ink);
}

.pkp_structure_main {
  background: var(--cimegs-surface);
}

/* ---------------------------------------------------------
   3. Header
   Preserve OJS geometry. Replace only visual treatment.
   --------------------------------------------------------- */

.pkp_structure_head {
  position: relative;
  background: rgba(255, 255, 255, .97) !important;
  color: var(--cimegs-ink);
  border-bottom: 1px solid var(--cimegs-line-soft);
  box-shadow: 0 1px 0 rgba(26, 34, 71, .03);
}

/* CIMEGS cartographic brand rule:
   journal blue first, institutional navy second. */
.pkp_structure_head::before {
  content: "";
  display: block;
  height: 3px;
  background:
    linear-gradient(
      to right,
      var(--cimegs-journal) 0 40%,
      var(--cimegs-brand) 40% 100%
    );
}

/* Journal logo/name */
.pkp_site_name,
.pkp_site_name a,
.pkp_site_name .is_text,
.pkp_site_name_wrapper a {
  color: var(--cimegs-brand) !important;
  text-decoration: none !important;
}

.pkp_site_name .is_text,
.pkp_site_name_wrapper .is_text {
  font-family:
    "IBM Plex Serif",
    Georgia,
    "Times New Roman",
    serif;
  font-weight: 600;
}

/* ---------------------------------------------------------
   4. Primary navigation
   Removes the current brown/orange identity while keeping
   the existing OJS menu structure intact.
   --------------------------------------------------------- */

.pkp_navigation_primary_wrapper {
  background: var(--cimegs-surface) !important;
  border-top: 1px solid var(--cimegs-line-soft);
  border-bottom: 1px solid var(--cimegs-line-soft);
}

.pkp_navigation_primary,
.pkp_navigation_primary > li {
  background: transparent !important;
}

.pkp_navigation_primary > li > a {
  position: relative;
  background: transparent !important;
  color: var(--cimegs-text-soft) !important;
  font-family:
    "IBM Plex Sans",
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif;
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none !important;
  border: 0 !important;
}

/* Quiet CIMEGS red underline on hover/current */
.pkp_navigation_primary > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 2px;
  background: var(--cimegs-red-600);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .22s ease;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  color: var(--cimegs-brand) !important;
}

.pkp_navigation_primary > li > a:hover::after,
.pkp_navigation_primary > li > a:focus::after {
  transform: scaleX(1);
}

/* OJS may mark active/current items differently depending
   on version/theme, so support several common states. */
.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li.active > a,
.pkp_navigation_primary > li > a[aria-current="page"] {
  color: var(--cimegs-brand) !important;
}

.pkp_navigation_primary > li.current > a::after,
.pkp_navigation_primary > li.active > a::after,
.pkp_navigation_primary > li > a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Dropdown menus */
.pkp_navigation_primary ul,
.pkp_navigation_primary .dropdown-menu {
  background: var(--cimegs-surface) !important;
  border: 1px solid var(--cimegs-line-soft) !important;
  border-radius: var(--cimegs-radius) !important;
  box-shadow: var(--cimegs-shadow-2) !important;
}

.pkp_navigation_primary ul a,
.pkp_navigation_primary .dropdown-menu a {
  background: var(--cimegs-surface) !important;
  color: var(--cimegs-text-soft) !important;
  text-decoration: none !important;
}

.pkp_navigation_primary ul a:hover,
.pkp_navigation_primary ul a:focus,
.pkp_navigation_primary .dropdown-menu a:hover,
.pkp_navigation_primary .dropdown-menu a:focus {
  background: var(--cimegs-blue-050) !important;
  color: var(--cimegs-brand) !important;
}

/* User menu + Search */
.pkp_navigation_user > li > a,
.pkp_navigation_search_wrapper a {
  color: var(--cimegs-text-soft) !important;
  background: transparent !important;
  text-decoration: none !important;
}

.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus,
.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_search_wrapper a:focus {
  color: var(--cimegs-brand) !important;
}

/* ---------------------------------------------------------
   5. Current issue
   Keep OJS structure; apply the CIMEGS surface language.
   --------------------------------------------------------- */

.page_index_journal .current_issue {
  background: var(--cimegs-surface) !important;
  border: 1px solid var(--cimegs-line-soft);
  border-top: 3px solid var(--cimegs-journal);
  border-radius: var(--cimegs-radius-lg);
  box-shadow: var(--cimegs-shadow-1);
}

.page_index_journal .current_issue h2,
.page_index_journal .current_issue h3 {
  color: var(--cimegs-brand);
}

.current_issue .obj_issue_toc .cover img,
.obj_issue_summary .cover img {
  background: var(--cimegs-blue-050);
  border: 1px solid var(--cimegs-line-soft);
  border-radius: var(--cimegs-radius);
  box-shadow: var(--cimegs-shadow-1);
}

/* ---------------------------------------------------------
   6. Article and issue lists
   --------------------------------------------------------- */

.obj_article_summary,
.obj_issue_summary {
  border-bottom-color: var(--cimegs-line-soft) !important;
}

.obj_article_summary .title a,
.obj_issue_summary .title a {
  color: var(--cimegs-brand) !important;
  font-family:
    "IBM Plex Serif",
    Georgia,
    "Times New Roman",
    serif;
  font-weight: 600;
  text-decoration: none;
}

.obj_article_summary .title a:hover,
.obj_issue_summary .title a:hover {
  color: var(--cimegs-journal) !important;
  text-decoration: underline;
  text-decoration-color: var(--cimegs-red-600);
  text-underline-offset: 4px;
}

.obj_article_summary .authors,
.obj_article_summary .pages,
.obj_issue_summary .description {
  color: var(--cimegs-text-soft);
}

/* ---------------------------------------------------------
   7. Buttons
   Institutional CIMEGS button language.
   --------------------------------------------------------- */

.cmp_button,
button,
input[type="submit"],
input[type="button"],
.block_make_submission a {
  background: var(--cimegs-brand) !important;
  border: 1px solid var(--cimegs-brand) !important;
  color: #fff !important;
  border-radius: var(--cimegs-radius) !important;
  font-family:
    "IBM Plex Sans",
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif;
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: none;
  transition:
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.cmp_button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.block_make_submission a:hover {
  background: var(--cimegs-blue-800) !important;
  border-color: var(--cimegs-blue-800) !important;
  color: #fff !important;
  box-shadow: var(--cimegs-shadow-2);
}

/* Article file buttons (PDF, XML, etc.) */
.obj_galley_link {
  background: transparent !important;
  border: 1px solid var(--cimegs-journal) !important;
  color: var(--cimegs-journal) !important;
  border-radius: var(--cimegs-radius) !important;
  font-weight: 600;
}

.obj_galley_link:hover,
.obj_galley_link:focus {
  background: var(--cimegs-journal) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------
   8. Sidebar
   Keep dimensions; make components visually coherent.
   --------------------------------------------------------- */

.pkp_structure_sidebar .pkp_block {
  background: var(--cimegs-surface);
  color: var(--cimegs-ink);
  border-color: var(--cimegs-line-soft);
}

.pkp_structure_sidebar .pkp_block .title,
.pkp_structure_sidebar .title {
  color: var(--cimegs-brand);
  font-family:
    "IBM Plex Serif",
    Georgia,
    "Times New Roman",
    serif;
  font-weight: 600;
}

.pkp_structure_sidebar a {
  color: var(--cimegs-journal);
}

.pkp_structure_sidebar a:hover {
  color: var(--cimegs-brand);
}

/* ---------------------------------------------------------
   9. Forms
   --------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
textarea,
select {
  background: var(--cimegs-surface);
  color: var(--cimegs-ink);
  border-color: var(--cimegs-line);
  border-radius: var(--cimegs-radius);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--cimegs-journal);
  outline: 2px solid rgba(50, 65, 127, .20);
  outline-offset: 1px;
}

/* ---------------------------------------------------------
   10. Footer — Phase 1 colour alignment only
   Structural footer rebuild comes in Phase 3.
   --------------------------------------------------------- */

.pkp_structure_footer {
  background: var(--cimegs-blue-900) !important;
  color: var(--cimegs-blue-100) !important;
  border-top: 3px solid var(--cimegs-red-600);
}

.pkp_structure_footer p,
.pkp_footer_content {
  color: var(--cimegs-blue-300) !important;
}

.pkp_structure_footer a {
  color: var(--cimegs-blue-100) !important;
  text-decoration: none;
}

.pkp_structure_footer a:hover,
.pkp_structure_footer a:focus {
  color: #fff !important;
  text-decoration: underline;
  text-decoration-color: var(--cimegs-red-500);
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------
   11. Accessibility / reduced motion
   --------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--cimegs-journal);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------------------------------------------------------
   PHASE 1 SAFETY NOTE
   Intentionally NOT touched:
   - .pkp_structure_content widths
   - .pkp_structure_main widths
   - .pkp_structure_sidebar widths
   - .pkp_head_wrapper dimensions
   - navigation display/flex/position
   - footer grid/layout
   - issue/article structural grid
   --------------------------------------------------------- */
/* =========================================================
   PHASE 2 — Header compacting + navigation refinement
             + sidebar polish + footer readability
   This patch is intentionally scoped and avoids OJS grids.
   ========================================================= */

/* ---------- A. Compact institutional header ---------- */
@media (min-width: 992px) {
  .pkp_site_name_wrapper {
    height: 92px !important;
  }

  .pkp_site_name {
    min-height: 92px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
  }

  .pkp_site_name > a,
  .pkp_site_name .is_img {
    display: inline-flex !important;
    align-items: center !important;
  }

  .pkp_site_name img {
    width: auto !important;
    height: auto !important;
    max-height: 70px !important;
    max-width: 190px !important;
    object-fit: contain;
  }
}

/* Keep the top account/user line quiet and institutional */
.pkp_navigation_user {
  font-family:
    "IBM Plex Sans",
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif;
}

.pkp_navigation_user > li > a {
  font-size: .78rem !important;
  color: var(--cimegs-muted) !important;
}

/* ---------- B. Cleaner primary navigation ---------- */
@media (min-width: 992px) {
  .pkp_navigation_primary > li > a {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
  }

  .pkp_navigation_primary > li > a::after {
    bottom: 0 !important;
  }

  .pkp_navigation_search_wrapper a {
    font-size: .88rem !important;
    font-weight: 500 !important;
  }
}

/* Make dropdown caret inherit the journal family instead of old theme colour */
.pkp_navigation_primary .dropdown-toggle::after,
.pkp_navigation_primary [aria-haspopup="true"]::after {
  border-top-color: var(--cimegs-journal) !important;
}

/* ---------- C. Current issue presentation ---------- */
.page_index_journal .current_issue {
  overflow: hidden;
}

.page_index_journal .current_issue > h2 {
  margin-top: 0 !important;
}

.page_index_journal .current_issue .current_issue_title,
.page_index_journal .current_issue .obj_issue_toc .heading {
  color: var(--cimegs-brand) !important;
}

.page_index_journal .current_issue .description,
.obj_issue_toc .description {
  color: var(--cimegs-text-soft) !important;
  line-height: 1.7;
}

/* ---------- D. Sidebar becomes a set of quiet white panels ---------- */
.pkp_structure_sidebar .pkp_block {
  background: var(--cimegs-surface) !important;
  border: 1px solid var(--cimegs-line-soft) !important;
  border-top: 2px solid var(--cimegs-blue-100) !important;
  box-shadow: var(--cimegs-shadow-1);
}

.pkp_structure_sidebar .pkp_block + .pkp_block {
  margin-top: 16px;
}

/* ---------- E. Footer: fix low-contrast inline styles ---------- */
.pkp_structure_footer .pkp_footer_content,
.pkp_structure_footer .pkp_footer_content div,
.pkp_structure_footer .pkp_footer_content p,
.pkp_structure_footer .pkp_footer_content span {
  color: var(--cimegs-blue-300) !important;
}

.pkp_structure_footer .pkp_footer_content strong {
  color: #fff !important;
}

.pkp_structure_footer .pkp_footer_content a {
  color: var(--cimegs-blue-100) !important;
}

.pkp_structure_footer .pkp_footer_content a:hover,
.pkp_structure_footer .pkp_footer_content a:focus {
  color: #fff !important;
}

/* Normalize logo rows without changing the existing HTML order */
.pkp_structure_footer .pkp_footer_content img {
  width: auto !important;
  height: auto !important;
  max-width: 150px !important;
  max-height: 48px !important;
  object-fit: contain !important;
  vertical-align: middle !important;
  margin: 7px 11px !important;
}

/* A few logos are naturally square; let them breathe a little more */
.pkp_structure_footer .pkp_footer_content img[src*="EuroPub"],
.pkp_structure_footer .pkp_footer_content img[src*="researchgate"],
.pkp_structure_footer .pkp_footer_content img[src*="akedmia"] {
  max-height: 54px !important;
  max-width: 125px !important;
}

/* OJS/PKP mark: preserve it, but put it on a readable light plate */
.pkp_brand_footer {
  display: inline-block !important;
  background: #fff !important;
  border-radius: var(--cimegs-radius) !important;
  padding: 8px 12px !important;
  margin-top: 20px !important;
}

.pkp_brand_footer img {
  margin: 0 !important;
  max-width: 135px !important;
  max-height: none !important;
}

/* ---------- F. Mobile refinements ---------- */
@media (max-width: 991px) {
  .pkp_structure_head::before {
    background:
      linear-gradient(
        to right,
        var(--cimegs-journal) 0 40%,
        var(--cimegs-brand) 40% 100%
      );
  }

  .pkp_site_name img {
    max-height: 58px !important;
    width: auto !important;
  }

  .pkp_navigation_primary > li > a::after {
    display: none;
  }
}
/* =========================================================
   PHASE 3 — Homepage editorial layer
   Keeps the OJS structure, but makes the homepage concise
   and adds reusable CIMEGS journal blocks.
   ========================================================= */

/* ---------- A. Current issue becomes the homepage hero ---------- */
.page_index_journal .current_issue {
  margin-bottom: 28px;
}

.page_index_journal .current_issue > h2 {
  font-size: clamp(1.35rem, 1.2rem + .5vw, 1.7rem) !important;
  letter-spacing: -.01em;
}

/* The full issue page keeps the full editor's note.
   Only the homepage summary is visually shortened. */
.page_index_journal .current_issue .description,
.page_index_journal .current_issue .obj_issue_toc .description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  overflow: hidden;
  max-height: 13.6em;
}

/* ---------- B. Articles on the homepage ---------- */
.page_index_journal .obj_article_summary {
  padding-top: 18px;
  padding-bottom: 18px;
}

.page_index_journal .obj_article_summary .title {
  line-height: 1.35;
}

.page_index_journal .obj_article_summary .title a {
  font-size: 1.04rem;
}

/* ---------- C. Additional Content: compact journal profile ---------- */
.cimegs-home-profile {
  margin-top: 36px;
  padding: clamp(24px, 4vw, 38px);
  background: var(--cimegs-surface);
  border: 1px solid var(--cimegs-line-soft);
  border-top: 3px solid var(--cimegs-journal);
  border-radius: var(--cimegs-radius-lg);
  box-shadow: var(--cimegs-shadow-1);
}

.cimegs-home-kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 10px;
  color: var(--cimegs-journal);
  font-family:
    "IBM Plex Mono",
    ui-monospace,
    Consolas,
    monospace;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cimegs-home-kicker::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background:
    linear-gradient(
      to right,
      var(--cimegs-red-600) 0 30%,
      var(--cimegs-journal) 30% 100%
    );
}

.cimegs-home-profile h2 {
  margin: 0 0 12px;
  color: var(--cimegs-brand);
  font-size: clamp(1.55rem, 1.3rem + .8vw, 2rem);
}

.cimegs-home-intro {
  max-width: 760px;
  margin: 0;
  color: var(--cimegs-text-soft);
  font-size: 1rem;
  line-height: 1.75;
}

/* ---------- D. Journal facts ---------- */
.cimegs-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0 0;
}

.cimegs-fact {
  min-width: 0;
  padding: 16px 15px;
  background: var(--cimegs-blue-050);
  border: 1px solid var(--cimegs-blue-100);
  border-radius: var(--cimegs-radius);
}

.cimegs-fact strong {
  display: block;
  margin-bottom: 4px;
  color: var(--cimegs-brand);
  font-family:
    "IBM Plex Serif",
    Georgia,
    "Times New Roman",
    serif;
  font-size: 1rem;
  font-weight: 600;
}

.cimegs-fact span {
  display: block;
  color: var(--cimegs-text-soft);
  font-size: .84rem;
  line-height: 1.45;
}

/* ---------- E. Homepage calls to action ---------- */
.cimegs-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.cimegs-home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: .6rem 1.15rem;
  border: 1px solid var(--cimegs-brand);
  border-radius: var(--cimegs-radius);
  background: var(--cimegs-brand);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none !important;
  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.cimegs-home-btn:hover,
.cimegs-home-btn:focus {
  background: var(--cimegs-blue-800);
  border-color: var(--cimegs-blue-800);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: var(--cimegs-shadow-2);
}

.cimegs-home-btn--outline {
  background: transparent;
  color: var(--cimegs-brand) !important;
}

.cimegs-home-btn--outline:hover,
.cimegs-home-btn--outline:focus {
  background: var(--cimegs-blue-050);
  color: var(--cimegs-brand) !important;
  border-color: var(--cimegs-journal);
}

/* ---------- F. Responsive homepage profile ---------- */
@media (max-width: 860px) {
  .cimegs-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .cimegs-home-profile {
    padding: 20px;
  }

  .cimegs-facts {
    grid-template-columns: 1fr;
  }

  .cimegs-home-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cimegs-home-btn {
    width: 100%;
  }
}
/* =========================================================
   PHASE 4 — Editorial navigation + article list refinement
   Keeps the OJS structure intact.
   ========================================================= */

/* ---------- A. Navigation spacing ---------- */
@media (min-width: 992px) {
  .pkp_navigation_primary {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
  }

  .pkp_navigation_primary > li > a {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  /* Optional top-level submission CTA.
     Works when a TOP-LEVEL menu item points to /about/submissions */
  .pkp_navigation_primary > li > a[href*="/about/submissions"] {
    margin-left: 8px !important;
    padding: 8px 14px !important;
    background: var(--cimegs-brand) !important;
    border: 1px solid var(--cimegs-brand) !important;
    border-radius: var(--cimegs-radius) !important;
    color: #fff !important;
    font-weight: 600 !important;
  }

  .pkp_navigation_primary > li > a[href*="/about/submissions"]::after {
    display: none !important;
  }

  .pkp_navigation_primary > li > a[href*="/about/submissions"]:hover,
  .pkp_navigation_primary > li > a[href*="/about/submissions"]:focus {
    background: var(--cimegs-blue-800) !important;
    border-color: var(--cimegs-blue-800) !important;
    color: #fff !important;
  }
}

/* ---------- B. Section headings inside issue TOC ---------- */
.obj_issue_toc .sections > .section > h2,
.obj_issue_toc .sections > .section > h3,
.obj_issue_toc .section h2,
.obj_issue_toc .section h3 {
  color: var(--cimegs-brand) !important;
  font-family:
    "IBM Plex Serif",
    Georgia,
    "Times New Roman",
    serif;
  font-weight: 600 !important;
  letter-spacing: -.01em;
}

/* ---------- C. Article summaries as calm editorial rows ---------- */
.page_index_journal .obj_article_summary,
.obj_issue_toc .obj_article_summary {
  position: relative;
  margin: 0 !important;
  padding: 20px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cimegs-line-soft) !important;
  background: transparent;
  transition:
    background .18s ease,
    box-shadow .18s ease;
}

.page_index_journal .obj_article_summary::before,
.obj_issue_toc .obj_article_summary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 3px;
  background: transparent;
  transition: background .18s ease;
}

.page_index_journal .obj_article_summary:hover,
.obj_issue_toc .obj_article_summary:hover {
  background: var(--cimegs-blue-050);
}

.page_index_journal .obj_article_summary:hover::before,
.obj_issue_toc .obj_article_summary:hover::before {
  background: var(--cimegs-journal);
}

.page_index_journal .obj_article_summary .title,
.obj_issue_toc .obj_article_summary .title {
  margin-bottom: 6px !important;
  line-height: 1.35 !important;
}

.page_index_journal .obj_article_summary .title a,
.obj_issue_toc .obj_article_summary .title a {
  font-size: 1.02rem !important;
}

.page_index_journal .obj_article_summary .authors,
.obj_issue_toc .obj_article_summary .authors {
  color: var(--cimegs-text-soft) !important;
  font-family:
    "IBM Plex Sans",
    "Segoe UI",
    Arial,
    sans-serif !important;
  font-size: .88rem !important;
}

.page_index_journal .obj_article_summary .pages,
.obj_issue_toc .obj_article_summary .pages {
  color: var(--cimegs-muted) !important;
  font-family:
    "IBM Plex Mono",
    ui-monospace,
    Consolas,
    monospace !important;
  font-size: .76rem !important;
  letter-spacing: .03em;
}

/* ---------- D. Galley buttons ---------- */
.page_index_journal .obj_galley_link,
.obj_issue_toc .obj_galley_link {
  padding: 6px 11px !important;
  font-size: .82rem !important;
  min-height: 34px;
}

/* ---------- E. Full issue button area ---------- */
.obj_issue_toc .galleys,
.current_issue .galleys {
  margin-top: 10px;
  margin-bottom: 18px;
}

/* ---------- F. Current issue metadata ---------- */
.page_index_journal .current_issue .published {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 4px 8px;
  border: 1px solid var(--cimegs-blue-100);
  border-radius: 99px;
  background: var(--cimegs-blue-050);
  color: var(--cimegs-text-soft);
  font-size: .78rem;
}

/* ---------- G. Sidebar hierarchy ---------- */
.pkp_structure_sidebar .pkp_block .title,
.pkp_structure_sidebar .title {
  margin-bottom: 12px !important;
  font-size: 1.05rem !important;
}

.pkp_structure_sidebar .pkp_block ul {
  margin: 0;
}

.pkp_structure_sidebar .pkp_block a {
  text-decoration: none;
}

.pkp_structure_sidebar .pkp_block a:hover {
  text-decoration: underline;
  text-decoration-color: var(--cimegs-red-600);
  text-underline-offset: 3px;
}

/* ---------- H. Mobile ---------- */
@media (max-width: 991px) {
  .page_index_journal .obj_article_summary,
  .obj_issue_toc .obj_article_summary {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .page_index_journal .obj_article_summary::before,
  .obj_issue_toc .obj_article_summary::before {
    left: 0;
  }
}
/* =========================================================
   PHASE 5 — Semiannual metadata + final header logo sizing
   ---------------------------------------------------------
   Official journal frequency for this implementation:
   Semiannual / two issues per year.
   The SVG logo should be selected in OJS Appearance > Page Header.
   Public logo URL:
   https://journal.cimeg.ca/logo/logo.svg
   ========================================================= */

/* ---------- A. Final logo sizing ---------- */
@media (min-width: 992px) {
  .pkp_site_name_wrapper {
    height: 96px !important;
  }

  .pkp_site_name {
    min-height: 96px !important;
  }

  .pkp_site_name img {
    max-height: 76px !important;
    max-width: 205px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* ---------- B. Five journal facts fit cleanly ---------- */
.cimegs-facts {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .cimegs-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .cimegs-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .cimegs-facts {
    grid-template-columns: 1fr;
  }
}

/* ---------- C. Frequency badge helper ---------- */
.cimegs-frequency-note {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 14px;
  padding: 5px 9px;
  border: 1px solid var(--cimegs-blue-100);
  border-radius: 99px;
  background: var(--cimegs-blue-050);
  color: var(--cimegs-text-soft);
  font-size: .8rem;
}

.cimegs-frequency-note strong {
  color: var(--cimegs-brand);
}

/* =========================================================
   PHASE 6 — CIMEGS institutional footer
   ---------------------------------------------------------
   Replaces the visual treatment of the old logo wall with
   a structured institutional footer. OJS/PKP attribution is
   retained, but reduced to a quiet platform mark.
   ========================================================= */

/* ---------- A. Make the footer background full-width ---------- */
.pkp_structure_footer_wrapper {
  margin-top: 52px !important;
  background: var(--cimegs-blue-900) !important;
  border-top: 3px solid var(--cimegs-red-600) !important;
}

.pkp_structure_footer {
  background: transparent !important;
  border-top: 0 !important;
  color: var(--cimegs-blue-100) !important;
}

.pkp_footer_content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ---------- B. Main journal footer ---------- */
.cimegs-journal-footer {
  color: var(--cimegs-blue-100);
  font-family:
    "IBM Plex Sans",
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif;
}

.cjf-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.55fr)
    minmax(0, .8fr)
    minmax(0, .9fr)
    minmax(0, .9fr);
  gap: clamp(28px, 4vw, 54px);
  padding: 48px 0 36px;
}

/* ---------- C. Brand column ---------- */
.cjf-brand-lockup {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
}

.pkp_structure_footer .cjf-logo {
  display: block !important;
  width: 62px !important;
  height: 62px !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 5px;
  object-fit: contain !important;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(151, 161, 204, .34);
}

.cjf-brand-name {
  color: #fff;
  font-family:
    "IBM Plex Serif",
    Georgia,
    "Times New Roman",
    serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.15;
}

.cjf-brand-subtitle {
  margin-top: 3px;
  color: var(--cimegs-blue-300);
  font-size: .78rem;
  line-height: 1.3;
}

.cjf-brand-copy {
  max-width: 340px;
  margin: 0 0 16px !important;
  color: var(--cimegs-blue-300) !important;
  font-size: .89rem !important;
  line-height: 1.65;
}

.cjf-journal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.cjf-meta-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid rgba(151, 161, 204, .28);
  border-radius: 99px;
  color: var(--cimegs-blue-100);
  background: rgba(255, 255, 255, .035);
  font-family:
    "IBM Plex Mono",
    ui-monospace,
    Consolas,
    monospace;
  font-size: .7rem;
  letter-spacing: .035em;
}

/* ---------- D. Footer navigation columns ---------- */
.cjf-col h2 {
  margin: 0 0 15px !important;
  color: #fff !important;
  font-family:
    "IBM Plex Mono",
    ui-monospace,
    Consolas,
    monospace !important;
  font-size: .72rem !important;
  font-weight: 500 !important;
  line-height: 1.3;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.cjf-col ul {
  display: grid !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.cjf-col li {
  margin: 0 !important;
  padding: 0 !important;
}

.pkp_structure_footer .cjf-col a {
  color: var(--cimegs-blue-100) !important;
  font-size: .9rem !important;
  line-height: 1.4;
  text-decoration: none !important;
}

.pkp_structure_footer .cjf-col a:hover,
.pkp_structure_footer .cjf-col a:focus {
  color: #fff !important;
  text-decoration: underline !important;
  text-decoration-color: var(--cimegs-red-500) !important;
  text-underline-offset: 4px;
}

/* ---------- E. Scholarly publishing strip ---------- */
.cjf-services {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  padding: 18px 0;
  border-top: 1px solid rgba(151, 161, 204, .22);
  border-bottom: 1px solid rgba(151, 161, 204, .22);
}

.cjf-services-label {
  margin-right: 8px;
  color: var(--cimegs-blue-300);
  font-family:
    "IBM Plex Mono",
    ui-monospace,
    Consolas,
    monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pkp_structure_footer .cjf-badge,
.cjf-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid rgba(151, 161, 204, .30);
  border-radius: 99px;
  background: rgba(255, 255, 255, .04);
  color: var(--cimegs-blue-100) !important;
  font-size: .75rem !important;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
}

.pkp_structure_footer a.cjf-badge:hover,
.pkp_structure_footer a.cjf-badge:focus {
  background: rgba(255, 255, 255, .08);
  border-color: var(--cimegs-blue-300);
  color: #fff !important;
  text-decoration: none !important;
}

/* ---------- F. Legal / copyright row ---------- */
.cjf-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
  flex-wrap: wrap;
  padding: 17px 0 10px;
  color: var(--cimegs-blue-300);
  font-size: .78rem;
  line-height: 1.5;
}

.cjf-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.pkp_structure_footer .cjf-bottom a {
  color: var(--cimegs-blue-100) !important;
  font-size: .78rem !important;
  text-decoration: none !important;
}

.pkp_structure_footer .cjf-bottom a:hover,
.pkp_structure_footer .cjf-bottom a:focus {
  color: #fff !important;
  text-decoration: underline !important;
  text-decoration-color: var(--cimegs-red-500) !important;
}

/* ---------- G. OJS/PKP mark: keep it, but make it secondary ---------- */
.pkp_brand_footer {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 4px 0 22px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.pkp_brand_footer a {
  display: inline-block;
  opacity: .62;
}

.pkp_brand_footer a:hover,
.pkp_brand_footer a:focus {
  opacity: .9;
}

.pkp_brand_footer img {
  width: auto !important;
  height: auto !important;
  max-width: 92px !important;
  max-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: grayscale(1) brightness(0) invert(1);
}

/* ---------- H. Responsive ---------- */
@media (max-width: 960px) {
  .cjf-grid {
    grid-template-columns: 1.35fr 1fr 1fr;
  }

  .cjf-brand {
    grid-column: 1 / -1;
  }

  .cjf-brand-copy {
    max-width: 620px;
  }
}

@media (max-width: 640px) {
  .pkp_structure_footer_wrapper {
    margin-top: 38px !important;
  }

  .cjf-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 0 28px;
  }

  .cjf-brand {
    grid-column: auto;
  }

  .cjf-services {
    align-items: flex-start;
  }

  .cjf-services-label {
    flex-basis: 100%;
    margin-right: 0;
    margin-bottom: 3px;
  }

  .cjf-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .pkp_brand_footer {
    justify-content: flex-start !important;
  }
}

/* =========================================================
   PHASE 6.1 — Footer polish
   Fixes the footer logo rendering and tightens the join
   between the page content and the footer.
   ========================================================= */

/* Slightly tighter transition into the footer */
.pkp_structure_footer_wrapper {
  margin-top: 34px !important;
}

/* The OJS editor/theme is rendering the inline SVG image too small.
   Use the same-origin SVG as a CSS background instead. */
.cjf-brand-lockup > a:first-child {
  display: block !important;
  flex: 0 0 66px !important;
  width: 66px !important;
  height: 66px !important;
  border-radius: 50% !important;
  background:
    #fff
    url("https://journal.cimeg.ca/logo/logo.svg")
    center / 56px auto
    no-repeat !important;
  box-shadow: 0 0 0 1px rgba(151, 161, 204, .34) !important;
}

/* Hide the problematic inline image; the accessible link remains. */
.cjf-brand-lockup > a:first-child .cjf-logo {
  display: none !important;
}

/* Give the journal name a little more presence */
.cjf-brand-name {
  font-size: 1.32rem !important;
}

.cjf-brand-subtitle {
  font-size: .8rem !important;
}

/* Keep the footer content visually aligned with the page above */
.cjf-grid {
  padding-top: 44px !important;
}

/* Small screen */
@media (max-width: 640px) {
  .pkp_structure_footer_wrapper {
    margin-top: 28px !important;
  }

  .cjf-brand-lockup > a:first-child {
    flex-basis: 58px !important;
    width: 58px !important;
    height: 58px !important;
    background-size: 49px auto !important;
  }
}

/* =========================================================
   PHASE 6.2 — Restore scholarly/indexing logos
   Keeps the institutional footer and adds the former logos
   back in an organized, responsive strip.
   ========================================================= */

.cjf-logo-zone {
  padding: 22px 0 20px;
  border-top: 1px solid rgba(151, 161, 204, .22);
  border-bottom: 1px solid rgba(151, 161, 204, .22);
}

.cjf-logo-zone-title {
  margin: 0 0 16px !important;
  color: var(--cimegs-blue-300) !important;
  font-family:
    "IBM Plex Mono",
    ui-monospace,
    Consolas,
    monospace !important;
  font-size: .68rem !important;
  font-weight: 500 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
}

.cjf-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  align-items: center;
  gap: 14px 18px;
}

.cjf-logo-item {
  min-width: 0;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border: 1px solid rgba(151, 161, 204, .20);
  border-radius: var(--cimegs-radius);
  background: rgba(255, 255, 255, .035);
}

a.cjf-logo-item {
  text-decoration: none !important;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

a.cjf-logo-item:hover,
a.cjf-logo-item:focus {
  background: rgba(255, 255, 255, .075);
  border-color: rgba(151, 161, 204, .44);
  transform: translateY(-1px);
}

.pkp_structure_footer .cjf-logo-item img,
.cjf-logo-item img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 118px !important;
  max-height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.pkp_structure_footer .cjf-logo-item--wide img {
  max-width: 135px !important;
}

.pkp_structure_footer .cjf-logo-item--square img {
  max-width: 72px !important;
  max-height: 52px !important;
}

/* The textual scholarly strip now follows the visual logo zone */
.cjf-services {
  border-top: 0 !important;
  padding-top: 17px !important;
}

@media (max-width: 640px) {
  .cjf-logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .cjf-logo-item {
    height: 64px;
    padding: 8px;
  }

  .pkp_structure_footer .cjf-logo-item img,
  .cjf-logo-item img {
    max-width: 105px !important;
    max-height: 42px !important;
  }
}

/* =========================================================
   PHASE 6.3 — Logo normalization
   Uniform light logo plates + optical size correction.
   No HTML changes required.
   ========================================================= */

/* Each logo gets the same visual canvas */
.cjf-logo-grid {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
  gap: 12px !important;
}

.cjf-logo-item {
  height: 76px !important;
  min-width: 0 !important;
  padding: 10px 12px !important;

  /* Light plate keeps transparent/dark logos readable */
  background: #ffffff !important;
  border: 1px solid #DCE0EF !important;
  border-radius: 7px !important;

  box-shadow:
    0 1px 2px rgba(16, 22, 46, .06),
    inset 0 0 0 1px rgba(255,255,255,.45);

  overflow: hidden !important;
}

a.cjf-logo-item:hover,
a.cjf-logo-item:focus {
  background: #F7F8FA !important;
  border-color: #97A1CC !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(16, 22, 46, .10);
}

/* Standard optical box */
.pkp_structure_footer .cjf-logo-item img,
.cjf-logo-item img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 118px !important;
  max-height: 44px !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Wide marks */
.pkp_structure_footer .cjf-logo-item--wide img,
.cjf-logo-item--wide img {
  max-width: 126px !important;
  max-height: 42px !important;
}

/* Square / near-square marks */
.pkp_structure_footer .cjf-logo-item--square img,
.cjf-logo-item--square img {
  max-width: 70px !important;
  max-height: 52px !important;
}

/* Optical corrections for specific source images.
   These compensate for transparent margins inside the original files. */
.cjf-logo-item img[src*="ithenticate"] {
  max-width: 132px !important;
  max-height: 40px !important;
}

.cjf-logo-item img[src*="open-1024x455"] {
  max-width: 112px !important;
  max-height: 46px !important;
}

.cjf-logo-item img[src*="5b55262f744ee"] {
  max-width: 122px !important; /* Google Scholar */
  max-height: 44px !important;
}

.cjf-logo-item img[src*="repec1"] {
  max-width: 118px !important;
  max-height: 42px !important;
}

.cjf-logo-item img[src*="5dc3d0719d5c4"] {
  max-width: 116px !important; /* CNKI */
  max-height: 44px !important;
}

.cjf-logo-item img[src*="rbid-1"] {
  max-width: 116px !important; /* ResearchBib */
  max-height: 44px !important;
}

.cjf-logo-item img[src*="researchgate"] {
  max-width: 112px !important;
  max-height: 50px !important;
}

.cjf-logo-item img[src*="EuroPub"] {
  max-width: 62px !important;
  max-height: 54px !important;
}

.cjf-logo-item img[src*="/ICI.png"] {
  max-width: 120px !important;
  max-height: 44px !important;
}

/* CC license is naturally smaller; keep it crisp rather than stretching */
.cjf-logo-item img[src*="licensebuttons.net"] {
  max-width: 96px !important;
  max-height: 34px !important;
}

/* Crossref badge has a naturally tall aspect ratio */
.cjf-logo-item img[src*="crossref_badge2"] {
  max-width: 122px !important;
  max-height: 48px !important;
}

/* Mobile */
@media (max-width: 640px) {
  .cjf-logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .cjf-logo-item {
    height: 70px !important;
    padding: 9px !important;
  }

  .pkp_structure_footer .cjf-logo-item img,
  .cjf-logo-item img {
    max-width: 108px !important;
    max-height: 42px !important;
  }
}

/* =========================================================
   PHASE 7 — Header + mobile navigation rebuild
   ---------------------------------------------------------
   Targets OJS Default Theme header classes only.
   Goals:
   1) remove excess desktop whitespace,
   2) use the official CIMEGS-SEJ SVG without needing an OJS
      "change header logo" option,
   3) move the mobile menu button to the right,
   4) replace the old brown mobile menu with a clean CIMEGS
      white navigation panel,
   5) simplify nested mobile menu groups.
   ========================================================= */

/* ---------- A. Use the official SVG visually in the header ---------- */
/* Keep the existing OJS image in the DOM for accessibility/fallback,
   but render the official same-origin SVG as the visible brand mark. */
.pkp_site_name .is_img {
  width: 176px !important;
  height: 72px !important;
  padding: 0 !important;
  background:
    transparent
    url("https://journal.cimeg.ca/logo/logo.svg")
    left center / contain
    no-repeat !important;
}

.pkp_site_name .is_img img {
  width: 176px !important;
  height: 72px !important;
  max-width: 176px !important;
  max-height: 72px !important;
  opacity: 0 !important;
}

/* ---------- B. Desktop: remove the unnecessary top void ---------- */
@media (min-width: 992px) {
  .pkp_head_wrapper,
  .has_site_logo .pkp_head_wrapper {
    padding-top: 18px !important;
  }

  .pkp_site_name_wrapper {
    height: 78px !important;
  }

  .pkp_site_name {
    min-height: 78px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .pkp_site_name .is_img {
    width: 168px !important;
    height: 66px !important;
    margin: 0 !important;
  }

  .pkp_site_name .is_img img {
    width: 168px !important;
    height: 66px !important;
    max-width: 168px !important;
    max-height: 66px !important;
  }

  /* User/account menu stays in the upper-right, but closer to the brand */
  .pkp_navigation_user_wrapper {
    top: 3px !important;
  }
}

/* ---------- C. Mobile header row ---------- */
@media (max-width: 991px) {
  .pkp_head_wrapper {
    padding: 0 !important;
    min-height: 74px !important;
  }

  .pkp_site_name_wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    height: 74px !important;
    min-height: 74px !important;
    padding: 0 12px 0 16px !important;
    background: var(--cimegs-surface) !important;
    border-bottom: 1px solid var(--cimegs-line-soft) !important;
  }

  /* OJS normally places the logo after a left-side menu button.
     Rebuild the row so the brand sits left and the menu control right. */
  .pkp_site_name {
    position: static !important;
    left: auto !important;
    right: auto !important;
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 74px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .pkp_site_name > a,
  .pkp_site_name .is_img {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .pkp_site_name .is_img {
    width: 148px !important;
    height: 56px !important;
    background-position: left center !important;
  }

  .pkp_site_name .is_img img {
    width: 148px !important;
    height: 56px !important;
    max-width: 148px !important;
    max-height: 56px !important;
  }

  /* Menu button on the right */
  .pkp_site_nav_toggle {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    order: 2 !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border: 1px solid var(--cimegs-brand) !important;
    border-radius: 7px !important;
    background: var(--cimegs-brand) !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  .pkp_site_nav_toggle:hover,
  .pkp_site_nav_toggle:focus {
    background: var(--cimegs-blue-800) !important;
    border-color: var(--cimegs-blue-800) !important;
  }

  /* Keep the hamburger/X strokes white regardless of old theme colours */
  .pkp_site_nav_toggle span,
  .pkp_site_nav_toggle span::before,
  .pkp_site_nav_toggle span::after,
  .pkp_site_nav_toggle::before,
  .pkp_site_nav_toggle::after {
    border-color: #fff !important;
    background-color: #fff;
    color: #fff !important;
  }

  /* ---------- D. Mobile navigation panel ---------- */
  .pkp_site_nav_menu {
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    width: 100% !important;
    max-height: calc(100vh - 74px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding: 10px 16px 18px !important;
    background: var(--cimegs-surface) !important;
    border-top: 1px solid var(--cimegs-line-soft) !important;
    border-bottom: 1px solid var(--cimegs-line) !important;
    box-shadow: 0 14px 30px rgba(16, 22, 46, .14) !important;
    z-index: 9999 !important;
  }

  .pkp_navigation_primary_wrapper {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  .pkp_navigation_primary {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .pkp_navigation_primary > li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--cimegs-line-soft) !important;
    background: transparent !important;
  }

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

  .pkp_navigation_primary > li > a {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 11px 2px !important;
    color: var(--cimegs-brand) !important;
    background: transparent !important;
    border: 0 !important;
    font-size: .98rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
  }

  .pkp_navigation_primary > li > a:hover,
  .pkp_navigation_primary > li > a:focus {
    color: var(--cimegs-journal) !important;
    background: var(--cimegs-blue-050) !important;
  }

  .pkp_navigation_primary > li > a::after {
    display: none !important;
  }

  /* Nested groups: no floating white "cards"; use one quiet indented rule */
  .pkp_navigation_primary ul,
  .pkp_navigation_primary .dropdown-menu {
    position: static !important;
    display: block !important;
    transform: none !important;
    width: auto !important;
    margin: -2px 0 9px 8px !important;
    padding: 2px 0 3px 13px !important;
    background: transparent !important;
    border: 0 !important;
    border-left: 2px solid var(--cimegs-blue-100) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .pkp_navigation_primary ul li,
  .pkp_navigation_primary .dropdown-menu li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .pkp_navigation_primary ul a,
  .pkp_navigation_primary .dropdown-menu a {
    display: block !important;
    margin: 0 !important;
    padding: 7px 8px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: var(--cimegs-text-soft) !important;
    font-size: .91rem !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
  }

  .pkp_navigation_primary ul a:hover,
  .pkp_navigation_primary ul a:focus,
  .pkp_navigation_primary .dropdown-menu a:hover,
  .pkp_navigation_primary .dropdown-menu a:focus {
    background: var(--cimegs-blue-050) !important;
    color: var(--cimegs-brand) !important;
  }

  /* Hide desktop-style dropdown triangles in the always-expanded mobile list */
  .pkp_navigation_primary [aria-haspopup="true"]::after,
  .pkp_navigation_primary .dropdown-toggle::after {
    display: none !important;
  }

  /* ---------- E. Search + account actions ---------- */
  .pkp_navigation_search_wrapper {
    float: none !important;
    margin: 9px 0 0 !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid var(--cimegs-line-soft) !important;
  }

  .pkp_navigation_search_wrapper a {
    display: block !important;
    margin: 0 !important;
    padding: 9px 2px !important;
    color: var(--cimegs-brand) !important;
    background: transparent !important;
    border: 0 !important;
    font-size: .95rem !important;
    font-weight: 500 !important;
  }

  .pkp_navigation_user_wrapper {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .pkp_navigation_user.pkp_navigation_user {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 18px !important;
    margin: 8px 0 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid var(--cimegs-line-soft) !important;
    text-align: left !important;
  }

  .pkp_navigation_user > li {
    display: inline-block !important;
    margin: 0 !important;
  }

  .pkp_navigation_user > li > a {
    display: inline-block !important;
    padding: 6px 0 !important;
    color: var(--cimegs-muted) !important;
    background: transparent !important;
    font-size: .88rem !important;
    font-weight: 500 !important;
  }

  .pkp_navigation_user > li > a:hover,
  .pkp_navigation_user > li > a:focus {
    color: var(--cimegs-brand) !important;
  }
}

/* =========================================================
   PHASE 7.1 — Mobile menu icon + menu visual polish
   ---------------------------------------------------------
   Fixes:
   - broken mobile menu icon
   - clearer open/close state when aria-expanded is present
   - visual affordance for items that contain submenus
   - softer, more editorial mobile menu styling
   ========================================================= */

/* ---------- 1. Rebuild the mobile menu icon from scratch ---------- */
@media (max-width: 991px) {

  .pkp_site_nav_toggle {
    position: relative !important;
    overflow: hidden !important;
  }

  /* Keep the real accessible label, but hide it visually */
  .pkp_site_nav_toggle > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* Kill any inherited icon pseudo-elements from the old OJS theme */
  .pkp_site_nav_toggle > span::before,
  .pkp_site_nav_toggle > span::after {
    content: none !important;
    display: none !important;
  }

  /* Closed state: clean 3-line hamburger */
  .pkp_site_nav_toggle::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 23px !important;
    height: 2px !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: #fff !important;
    box-shadow:
      0 -7px 0 #fff,
      0  7px 0 #fff !important;
    transform: translate(-50%, -50%) !important;
    transition:
      transform .18s ease,
      box-shadow .18s ease !important;
  }

  .pkp_site_nav_toggle::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 23px !important;
    height: 2px !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: transparent !important;
    transform: translate(-50%, -50%) !important;
    transition:
      transform .18s ease,
      background .18s ease !important;
  }

  /* If the OJS script exposes aria-expanded, show a real close icon */
  .pkp_site_nav_toggle[aria-expanded="true"]::before {
    box-shadow: none !important;
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  .pkp_site_nav_toggle[aria-expanded="true"]::after {
    background: #fff !important;
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }


  /* ---------- 2. Give the mobile panel a softer editorial surface ---------- */

  .pkp_site_nav_menu {
    padding: 14px 18px 20px !important;
    background:
      linear-gradient(180deg, #fff 0%, #fbfcfe 100%) !important;
  }

  .pkp_navigation_primary {
    display: grid !important;
    gap: 7px !important;
  }

  /* Reset the hard horizontal rules from Phase 7 */
  .pkp_navigation_primary > li {
    border-bottom: 0 !important;
  }

  /* Plain top-level items */
  .pkp_navigation_primary > li > a {
    position: relative !important;
    padding: 12px 13px !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--cimegs-brand) !important;
    font-size: .98rem !important;
    font-weight: 600 !important;
    transition:
      color .16s ease,
      background .16s ease,
      border-color .16s ease,
      transform .16s ease !important;
  }

  .pkp_navigation_primary > li > a:hover,
  .pkp_navigation_primary > li > a:focus {
    background: var(--cimegs-blue-050) !important;
    border-color: var(--cimegs-blue-100) !important;
    color: var(--cimegs-brand) !important;
    transform: translateX(2px);
  }


  /* ---------- 3. Visually group items that contain submenus ---------- */

  .pkp_navigation_primary > li:has(> a[aria-haspopup="true"]) {
    margin: 2px 0 4px !important;
    padding: 4px 7px 8px !important;
    border: 1px solid var(--cimegs-blue-100) !important;
    border-radius: 9px !important;
    background:
      linear-gradient(
        135deg,
        rgba(240, 242, 248, .90),
        rgba(255, 255, 255, .98)
      ) !important;
    box-shadow: 0 1px 2px rgba(26, 34, 71, .04);
  }

  .pkp_navigation_primary > li:has(> a[aria-haspopup="true"]) > a {
    padding: 10px 38px 9px 8px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--cimegs-brand) !important;
  }

  /* Journal-blue marker gives the group a little identity */
  .pkp_navigation_primary > li:has(> a[aria-haspopup="true"]) > a::before {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    bottom: 3px !important;
    width: 30px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background:
      linear-gradient(
        to right,
        var(--cimegs-red-600) 0 28%,
        var(--cimegs-journal) 28% 100%
      ) !important;
  }

  /* Clear chevron = this item owns a submenu */
  .pkp_navigation_primary > li > a[aria-haspopup="true"]::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    right: 11px !important;
    top: 50% !important;
    width: 8px !important;
    height: 8px !important;
    margin: -6px 0 0 !important;
    border: 0 !important;
    border-right: 2px solid var(--cimegs-journal) !important;
    border-bottom: 2px solid var(--cimegs-journal) !important;
    transform: rotate(45deg) !important;
    overflow: visible !important;
  }


  /* ---------- 4. Submenu styling ---------- */

  .pkp_navigation_primary ul,
  .pkp_navigation_primary .dropdown-menu {
    margin: 4px 0 0 9px !important;
    padding: 3px 0 2px 15px !important;
    border-left: 2px solid var(--cimegs-blue-100) !important;
  }

  .pkp_navigation_primary ul a,
  .pkp_navigation_primary .dropdown-menu a {
    position: relative !important;
    padding: 8px 9px 8px 16px !important;
    border-radius: 5px !important;
    color: #59616d !important;
    font-size: .91rem !important;
    line-height: 1.35 !important;
  }

  /* Tiny node marker: helps the eye read hierarchy */
  .pkp_navigation_primary ul a::before,
  .pkp_navigation_primary .dropdown-menu a::before {
    content: "" !important;
    position: absolute !important;
    left: 3px !important;
    top: 50% !important;
    width: 4px !important;
    height: 4px !important;
    margin-top: -2px !important;
    border-radius: 50% !important;
    background: var(--cimegs-blue-300) !important;
  }

  .pkp_navigation_primary ul a:hover,
  .pkp_navigation_primary ul a:focus,
  .pkp_navigation_primary .dropdown-menu a:hover,
  .pkp_navigation_primary .dropdown-menu a:focus {
    background: rgba(220, 224, 239, .55) !important;
    color: var(--cimegs-brand) !important;
  }

  .pkp_navigation_primary ul a:hover::before,
  .pkp_navigation_primary ul a:focus::before,
  .pkp_navigation_primary .dropdown-menu a:hover::before,
  .pkp_navigation_primary .dropdown-menu a:focus::before {
    background: var(--cimegs-red-600) !important;
  }


  /* ---------- 5. Search/account area: less dry ---------- */

  .pkp_navigation_search_wrapper {
    margin-top: 11px !important;
    padding: 11px 0 0 !important;
  }

  .pkp_navigation_search_wrapper a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 9px 12px !important;
    border: 1px solid var(--cimegs-blue-100) !important;
    border-radius: 7px !important;
    background: var(--cimegs-blue-050) !important;
  }

  .pkp_navigation_user.pkp_navigation_user {
    gap: 8px !important;
  }

  .pkp_navigation_user > li > a {
    padding: 7px 11px !important;
    border: 1px solid var(--cimegs-line-soft) !important;
    border-radius: 99px !important;
    background: #fff !important;
  }
}


/* ---------- 6. Desktop dropdown affordance ---------- */
@media (min-width: 992px) {
  .pkp_navigation_primary > li > a[aria-haspopup="true"] {
    padding-right: 25px !important;
  }

  .pkp_navigation_primary > li > a[aria-haspopup="true"]::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    right: 9px !important;
    top: 50% !important;
    width: 6px !important;
    height: 6px !important;
    margin-top: -5px !important;
    border: 0 !important;
    border-right: 1.5px solid var(--cimegs-journal) !important;
    border-bottom: 1.5px solid var(--cimegs-journal) !important;
    background: transparent !important;
    transform: rotate(45deg) !important;
    overflow: visible !important;
  }

  .pkp_navigation_primary > li:hover > a[aria-haspopup="true"]::after,
  .pkp_navigation_primary > li > a[aria-haspopup="true"]:focus::after {
    border-color: var(--cimegs-red-600) !important;
  }
}

/* =========================================================
   PHASE 8 — Journal hero + richer desktop navigation
   ---------------------------------------------------------
   Goals:
   1) Put a branded journal introduction BEFORE Current Issue
      using OJS Additional Content + CSS ordering.
   2) Give the desktop navigation a richer CIMEGS surface.
   3) Support optional header-row CTA buttons created as
      TOP-LEVEL navigation items in OJS:
        - Submit a Manuscript -> /about/submissions
        - CIMEGS Institute    -> https://cimeg.ca/
   ========================================================= */

/* ---------------------------------------------------------
   A. Homepage ordering
   The Additional Content wrapper is visually dissolved so
   its hero/profile children can be ordered around Current Issue.
   --------------------------------------------------------- */

.page_index_journal {
  display: flex !important;
  flex-direction: column !important;
}

.page_index_journal .additional_content {
  display: contents !important;
}

.page_index_journal .cimegs-journal-hero {
  order: -100 !important;
}

.page_index_journal .current_issue {
  order: -90 !important;
}

.page_index_journal .cimegs-home-profile {
  order: 90 !important;
}

/* Keep any other direct homepage elements in their normal zone */
.page_index_journal > * {
  min-width: 0;
}


/* ---------------------------------------------------------
   B. Journal hero
   --------------------------------------------------------- */

.cimegs-journal-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 28px !important;
  border: 1px solid rgba(36, 47, 95, .14);
  border-radius: 12px;
  background:
    radial-gradient(
      80% 120% at 100% 0%,
      rgba(68, 84, 156, .46) 0%,
      rgba(68, 84, 156, 0) 58%
    ),
    linear-gradient(
      118deg,
      #10162E 0%,
      #1A2247 50%,
      #242F5F 100%
    );
  box-shadow: 0 10px 32px rgba(26, 34, 71, .10);
  color: #fff;
}

/* Quiet cartographic/grid signature */
.cimegs-journal-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  background-image:
    linear-gradient(
      12deg,
      transparent 0 42%,
      rgba(255,255,255,.28) 42.3% 42.7%,
      transparent 43% 100%
    ),
    linear-gradient(
      -8deg,
      transparent 0 61%,
      rgba(255,255,255,.20) 61.2% 61.5%,
      transparent 61.8% 100%
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.07) 1px,
      transparent 1px
    ),
    linear-gradient(
      0deg,
      rgba(255,255,255,.055) 1px,
      transparent 1px
    );
  background-size:
    100% 100%,
    100% 100%,
    78px 78px,
    78px 78px;
}

/* CIMEGS red/journal-blue rule */
.cimegs-journal-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background:
    linear-gradient(
      to right,
      var(--cimegs-red-600) 0 14%,
      var(--cimegs-journal) 14% 100%
    );
}

.cimegs-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(240px, 4fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: clamp(34px, 5vw, 58px);
}

.cimegs-hero-copy {
  min-width: 0;
}

.cimegs-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  color: #DCE0EF;
  font-family:
    "IBM Plex Mono",
    ui-monospace,
    Consolas,
    monospace;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.cimegs-hero-kicker::before {
  content: "";
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background:
    linear-gradient(
      to right,
      var(--cimegs-red-500) 0 30%,
      #97A1CC 30% 100%
    );
}

.cimegs-journal-hero h1 {
  max-width: 760px;
  margin: 0 0 16px !important;
  color: #fff !important;
  font-family:
    "IBM Plex Serif",
    Georgia,
    "Times New Roman",
    serif !important;
  font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem) !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em;
}

.cimegs-hero-lede {
  max-width: 710px;
  margin: 0 !important;
  color: rgba(255,255,255,.82) !important;
  font-size: clamp(.98rem, .9rem + .25vw, 1.08rem);
  line-height: 1.7;
}

.cimegs-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.pkp_structure_main .cimegs-hero-btn,
.cimegs-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  padding: .64rem 1.18rem;
  border: 1px solid #fff;
  border-radius: 6px;
  background: #fff;
  color: var(--cimegs-brand) !important;
  font-weight: 600;
  text-decoration: none !important;
  transition:
    transform .16s ease,
    background .16s ease,
    color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.pkp_structure_main .cimegs-hero-btn:hover,
.pkp_structure_main .cimegs-hero-btn:focus {
  transform: translateY(-1px);
  background: var(--cimegs-blue-050);
  border-color: var(--cimegs-blue-050);
  color: var(--cimegs-blue-900) !important;
  box-shadow: 0 7px 18px rgba(0,0,0,.16);
}

.pkp_structure_main .cimegs-hero-btn--ghost,
.cimegs-hero-btn--ghost {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.48);
  color: #fff !important;
}

.pkp_structure_main .cimegs-hero-btn--ghost:hover,
.pkp_structure_main .cimegs-hero-btn--ghost:focus {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.75);
  color: #fff !important;
}

.cimegs-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 22px;
}

.cimegs-hero-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid rgba(220,224,239,.28);
  border-radius: 99px;
  background: rgba(255,255,255,.055);
  color: #DCE0EF;
  font-family:
    "IBM Plex Mono",
    ui-monospace,
    Consolas,
    monospace;
  font-size: .68rem;
  letter-spacing: .035em;
}


/* Hero visual panel */
.cimegs-hero-visual {
  position: relative;
  min-height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cimegs-hero-plaque {
  position: relative;
  z-index: 2;
  width: min(100%, 290px);
  padding: 26px 24px 22px;
  border: 1px solid rgba(255,255,255,.22);
  border-top: 3px solid var(--cimegs-red-500);
  border-radius: 10px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 16px 38px rgba(0,0,0,.20);
  text-align: center;
}

.cimegs-hero-plaque img {
  display: block;
  width: auto;
  height: 82px;
  max-width: 190px;
  margin: 0 auto 16px;
  object-fit: contain;
}

.cimegs-hero-plaque strong {
  display: block;
  color: var(--cimegs-brand);
  font-family:
    "IBM Plex Serif",
    Georgia,
    serif;
  font-size: 1.15rem;
  line-height: 1.2;
}

.cimegs-hero-plaque span {
  display: block;
  margin-top: 5px;
  color: var(--cimegs-text-soft);
  font-size: .8rem;
  line-height: 1.45;
}

.cimegs-hero-orbit {
  position: absolute;
  width: 290px;
  height: 290px;
  border: 1px solid rgba(151,161,204,.30);
  border-radius: 50%;
}

.cimegs-hero-orbit::before,
.cimegs-hero-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(151,161,204,.20);
}

.cimegs-hero-orbit::before {
  inset: 28px;
}

.cimegs-hero-orbit::after {
  inset: 60px;
}


/* ---------------------------------------------------------
   C. Desktop navigation strip — closer to CIMEGS hub
   --------------------------------------------------------- */

@media (min-width: 992px) {

  .pkp_navigation_primary_wrapper {
    position: relative !important;
    background:
      linear-gradient(
        180deg,
        rgba(247,248,250,.96) 0%,
        rgba(255,255,255,.98) 100%
      ) !important;
    border-top: 1px solid var(--cimegs-line-soft) !important;
    border-bottom: 1px solid var(--cimegs-line-soft) !important;
    box-shadow:
      0 1px 0 rgba(36,47,95,.025),
      inset 0 1px 0 rgba(255,255,255,.70);
  }

  .pkp_navigation_primary > li > a {
    margin: 5px 1px !important;
    padding: 9px 13px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
  }

  .pkp_navigation_primary > li > a:hover,
  .pkp_navigation_primary > li > a:focus {
    background: var(--cimegs-blue-050) !important;
    border-color: var(--cimegs-blue-100) !important;
  }

  /* Keep a fine red underline within the softer hover chip */
  .pkp_navigation_primary > li > a::before {
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--cimegs-red-600);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .18s ease;
  }

  .pkp_navigation_primary > li > a:hover::before,
  .pkp_navigation_primary > li > a:focus::before,
  .pkp_navigation_primary > li.current > a::before,
  .pkp_navigation_primary > li.active > a::before,
  .pkp_navigation_primary > li > a[aria-current="page"]::before {
    transform: scaleX(1);
  }

  /* Dropdown surfaces */
  .pkp_navigation_primary ul,
  .pkp_navigation_primary .dropdown-menu {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    border: 1px solid var(--cimegs-blue-100) !important;
    border-top: 3px solid var(--cimegs-journal) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.99) !important;
    box-shadow: 0 14px 34px rgba(16,22,46,.12) !important;
  }

  .pkp_navigation_primary ul a,
  .pkp_navigation_primary .dropdown-menu a {
    margin: 1px 6px !important;
    border-radius: 5px !important;
  }


  /* -------------------------------------------------------
     D. Optional CTA buttons on the SAME ROW as the logo.
     Create these as TOP-LEVEL Navigation Menu items in OJS.
     ------------------------------------------------------- */

  /* Submission CTA */
  .pkp_navigation_primary > li:has(> a[href*="/about/submissions"]) {
    position: absolute !important;
    top: -60px !important;
    right: 18px !important;
    z-index: 5;
  }

  .pkp_navigation_primary > li > a[href*="/about/submissions"] {
    min-height: 40px !important;
    margin: 0 !important;
    padding: 9px 16px !important;
    border: 1px solid var(--cimegs-brand) !important;
    border-radius: 6px !important;
    background: var(--cimegs-brand) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 10px rgba(36,47,95,.12);
  }

  .pkp_navigation_primary > li > a[href*="/about/submissions"]::before,
  .pkp_navigation_primary > li > a[href*="/about/submissions"]::after {
    display: none !important;
  }

  .pkp_navigation_primary > li > a[href*="/about/submissions"]:hover,
  .pkp_navigation_primary > li > a[href*="/about/submissions"]:focus {
    background: var(--cimegs-blue-800) !important;
    border-color: var(--cimegs-blue-800) !important;
    color: #fff !important;
  }

  /* Institute secondary CTA */
  .pkp_navigation_primary > li:has(> a[href^="https://cimeg.ca"]) {
    position: absolute !important;
    top: -60px !important;
    right: 190px !important;
    z-index: 5;
  }

  .pkp_navigation_primary > li > a[href^="https://cimeg.ca"] {
    min-height: 40px !important;
    margin: 0 !important;
    padding: 9px 14px !important;
    border: 1px solid var(--cimegs-line) !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: var(--cimegs-brand) !important;
    font-weight: 600 !important;
  }

  .pkp_navigation_primary > li > a[href^="https://cimeg.ca"]::before,
  .pkp_navigation_primary > li > a[href^="https://cimeg.ca"]::after {
    display: none !important;
  }

  .pkp_navigation_primary > li > a[href^="https://cimeg.ca"]:hover,
  .pkp_navigation_primary > li > a[href^="https://cimeg.ca"]:focus {
    background: var(--cimegs-blue-050) !important;
    border-color: var(--cimegs-journal) !important;
  }
}


/* ---------------------------------------------------------
   E. Mobile hero + CTA behavior
   --------------------------------------------------------- */

@media (max-width: 991px) {

  .cimegs-journal-hero {
    margin: 12px 18px 24px !important;
    border-radius: 10px;
  }

  .cimegs-hero-grid {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 30px 24px;
  }

  .cimegs-journal-hero h1 {
    font-size: clamp(1.8rem, 8vw, 2.35rem) !important;
  }

  .cimegs-hero-visual {
    min-height: 180px;
  }

  .cimegs-hero-plaque {
    width: min(100%, 270px);
  }

  .cimegs-hero-orbit {
    width: 235px;
    height: 235px;
  }

  /* If the optional duplicate CIMEGS Institute top-level item is
     added only for the desktop header CTA, hide that duplicate on
     mobile because About already contains the Institute link. */
  .pkp_navigation_primary > li:has(> a[href^="https://cimeg.ca"]) {
    display: none !important;
  }

  /* A top-level Submit item remains visible on mobile as a CTA */
  .pkp_navigation_primary > li > a[href*="/about/submissions"] {
    margin: 4px 0 !important;
    padding: 11px 14px !important;
    border: 1px solid var(--cimegs-brand) !important;
    border-radius: 7px !important;
    background: var(--cimegs-brand) !important;
    color: #fff !important;
    text-align: center;
  }
}

@media (max-width: 520px) {
  .cimegs-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cimegs-hero-btn {
    width: 100%;
  }

  .cimegs-hero-meta {
    gap: 6px;
  }
}

/* =========================================================
   FINAL DESKTOP HEADER OPTICAL BALANCE
   ---------------------------------------------------------
   Purpose:
   - keep the successful CTA vertical position
   - make the journal logo optically stronger
   - make the two opposite CTA buttons lighter and smaller
   - do NOT change header wrapper height, dropdown geometry,
     account/profile position, search position, or mobile
   ========================================================= */

@media (min-width: 992px) {

  /* Stronger logo without changing the header's structural height */
  .pkp_site_name .is_img {
    width: 200px !important;
    height: 76px !important;
    background-size: auto 74px !important;
    background-position: left center !important;
  }

  .pkp_site_name .is_img img {
    width: 200px !important;
    height: 76px !important;
    max-width: 200px !important;
    max-height: 76px !important;
  }

  /* Keep the already successful vertical position */
  .pkp_navigation_primary > li:has(> a[href*="/about/submissions"]) {
    top: -60px !important;
    right: 18px !important;
  }

  .pkp_navigation_primary > li:has(> a[href^="https://cimeg.ca"]) {
    top: -60px !important;
    right: 180px !important;
  }

  /* Reduce visual weight of both header CTAs */
  .pkp_navigation_primary > li > a[href*="/about/submissions"] {
    min-width: 148px !important;
    min-height: 36px !important;
    padding: 7px 13px !important;
    border-radius: 5px !important;
    font-size: .78rem !important;
    line-height: 1.2 !important;
    box-shadow: 0 2px 7px rgba(36,47,95,.10) !important;
  }

  .pkp_navigation_primary > li > a[href^="https://cimeg.ca"] {
    min-width: 118px !important;
    min-height: 36px !important;
    padding: 7px 12px !important;
    border-radius: 5px !important;
    font-size: .78rem !important;
    line-height: 1.2 !important;
  }
}

/* =========================================================
   FINAL DESKTOP NAVIGATION POLISH
   ---------------------------------------------------------
   Purpose:
   - keep Search on the SAME row as the primary navigation
   - remove the broad empty navigation band
   - use a cleaner white institutional navigation surface
   - replace the old angular dropdown marker with a small,
     restrained down-caret after the label
   - desktop only; mobile and dropdown geometry are untouched
   ========================================================= */

@media (min-width: 992px) {

  /* Compact navigation strip */
  .pkp_navigation_primary_wrapper {
    display: flex !important;
    align-items: center !important;
    min-height: 52px !important;
    padding: 0 12px !important;

    background: #ffffff !important;
    border-top: 1px solid var(--cimegs-line-soft) !important;
    border-bottom: 1px solid var(--cimegs-blue-100) !important;
    box-shadow: 0 2px 8px rgba(16, 22, 46, .025) !important;
  }

  /* Primary items remain on the left */
  .pkp_navigation_primary {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .pkp_navigation_primary > li > a {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  /* Search occupies the right edge of the SAME row */
  .pkp_navigation_search_wrapper {
    float: none !important;
    flex: 0 0 auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .pkp_navigation_search_wrapper a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px 9px !important;
    border: 1px solid transparent !important;
    border-radius: 5px !important;
    color: var(--cimegs-text-soft) !important;
    background: transparent !important;
    font-size: .82rem !important;
    line-height: 1.2 !important;
  }

  .pkp_navigation_search_wrapper a:hover,
  .pkp_navigation_search_wrapper a:focus {
    background: var(--cimegs-blue-050) !important;
    border-color: var(--cimegs-blue-100) !important;
    color: var(--cimegs-brand) !important;
  }

  /* Elegant dropdown affordance:
     a tiny muted caret AFTER the label, no check-mark look. */
  .pkp_navigation_primary > li > a[aria-haspopup="true"],
  .pkp_navigation_primary > li > a.dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding-right: 13px !important;
  }

  .pkp_navigation_primary > li > a[aria-haspopup="true"]::after,
  .pkp_navigation_primary > li > a.dropdown-toggle::after {
    content: "▾" !important;
    position: static !important;
    display: inline-block !important;

    width: auto !important;
    height: auto !important;
    margin: -1px 0 0 0 !important;

    border: 0 !important;
    background: transparent !important;

    color: #7A8392 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    transform: none !important;
    opacity: .9 !important;
  }

  .pkp_navigation_primary > li:hover > a[aria-haspopup="true"]::after,
  .pkp_navigation_primary > li > a[aria-haspopup="true"]:focus::after,
  .pkp_navigation_primary > li:hover > a.dropdown-toggle::after,
  .pkp_navigation_primary > li > a.dropdown-toggle:focus::after {
    color: var(--cimegs-journal) !important;
  }
}

/* =========================================================
   FINAL HEADER SURFACE + NAV SEPARATORS
   ---------------------------------------------------------
   Purpose:
   - restore a subtle institutional background to the logo/CTA row
   - keep the navigation strip clean and compact
   - add elegant separators between primary menu items
   - preserve all successful geometry and mobile behavior
   ========================================================= */

@media (min-width: 992px) {

  /* -------------------------------------------------------
     A. Upper brand row: subtle CIMEGS institutional surface
     ------------------------------------------------------- */
  .pkp_structure_head {
    background:
      linear-gradient(
        135deg,
        #FFFFFF 0%,
        #FAFBFD 48%,
        #F2F4F9 100%
      ) !important;
  }

  /* Navigation remains a distinct, clean white strip */
  .pkp_navigation_primary_wrapper {
    background: rgba(255,255,255,.97) !important;
    border-top: 1px solid #E5E8F0 !important;
    border-bottom: 1px solid #DCE0EF !important;
    box-shadow:
      0 1px 0 rgba(36,47,95,.025),
      0 3px 10px rgba(16,22,46,.025) !important;
  }

  /* -------------------------------------------------------
     B. Fine separators between NORMAL menu items only
     ------------------------------------------------------- */
  #navigationPrimary > li:not(:first-child)
                         :not(:has(> a[href*="/about/submissions"]))
                         :not(:has(> a[href^="https://cimeg.ca"])) {
    position: relative !important;
  }

  #navigationPrimary > li:not(:first-child)
                         :not(:has(> a[href*="/about/submissions"]))
                         :not(:has(> a[href^="https://cimeg.ca"]))::before {
    content: "" !important;
    position: absolute !important;
    left: -1px !important;
    top: 50% !important;

    width: 1px !important;
    height: 16px !important;

    background: linear-gradient(
      to bottom,
      transparent 0%,
      #D7DCE7 22%,
      #D7DCE7 78%,
      transparent 100%
    ) !important;

    transform: translateY(-50%) !important;
    opacity: .82 !important;
    pointer-events: none !important;
  }

  /* Keep a little breathing room around each separator */
  #navigationPrimary > li:not(:has(> a[href*="/about/submissions"]))
                         :not(:has(> a[href^="https://cimeg.ca"])) > a {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* First item does not need extra left-space */
  #navigationPrimary > li:first-child > a {
    padding-left: 12px !important;
  }

  /* Search gets its own subtle visual separation */
  .pkp_navigation_search_wrapper {
    position: relative !important;
    padding-left: 15px !important;
    margin-left: auto !important;
  }

  .pkp_navigation_search_wrapper::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;

    width: 1px !important;
    height: 18px !important;

    background: linear-gradient(
      to bottom,
      transparent 0%,
      #D3D9E5 20%,
      #D3D9E5 80%,
      transparent 100%
    ) !important;

    transform: translateY(-50%) !important;
    opacity: .9 !important;
  }
}

/* =========================================================
   CIMEGS-SEJ — Manuscript Template Sidebar Card
   Place the custom block above "Latest publications".
   ========================================================= */

.cimegs-template-card {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 20px 18px 18px;
  border: 1px solid #DCE0EF;
  border-top: 3px solid #C9272C;
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0%, rgba(36,47,95,.07), transparent 38%),
    linear-gradient(145deg, #FFFFFF 0%, #F7F8FC 100%);
  box-shadow: 0 8px 24px rgba(16,22,46,.06);
  color: #26324F;
}

.cimegs-template-card::after {
  content: "";
  position: absolute;
  right: -26px;
  bottom: -34px;
  width: 110px;
  height: 110px;
  border: 1px solid rgba(36,47,95,.08);
  border-radius: 50%;
  pointer-events: none;
}

.cimegs-template-eyebrow {
  margin: 0 0 10px;
  color: #6B7485;
  font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.cimegs-template-title {
  margin: 0 0 8px;
  color: #17224F;
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.35;
}

.cimegs-template-copy {
  margin: 0 0 15px;
  color: #596273;
  font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  font-size: .81rem;
  line-height: 1.6;
}

.cimegs-template-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 15px;
}

.cimegs-template-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid #D8DDEA;
  border-radius: 999px;
  background: #FFFFFF;
  color: #536078;
  font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  font-size: .66rem;
  font-weight: 600;
  line-height: 1;
}

.cimegs-template-actions {
  display: grid;
  gap: 8px;
}

.cimegs-template-download,
.cimegs-template-guide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 11px;
  border-radius: 6px;
  font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
}

.cimegs-template-download {
  border: 1px solid #242F5F;
  background: #242F5F;
  color: #FFFFFF !important;
  box-shadow: 0 3px 10px rgba(36,47,95,.12);
}

.cimegs-template-download:hover,
.cimegs-template-download:focus {
  background: #17224F;
  border-color: #17224F;
  color: #FFFFFF !important;
}

.cimegs-template-guide {
  border: 1px solid #D9DEEA;
  background: #FFFFFF;
  color: #242F5F !important;
}

.cimegs-template-guide:hover,
.cimegs-template-guide:focus {
  border-color: #B9C2D9;
  background: #F2F4F9;
  color: #17224F !important;
}

.pkp_structure_sidebar .cimegs-template-card {
  margin-bottom: 18px;
}

@media (max-width: 991px) {
  .cimegs-template-card {
    padding: 18px 16px 16px;
  }
}


/* =========================================================
   CIMEGS–SEJ — Indexing, Abstracting & Discovery page
   Append to the journal stylesheet.
   ========================================================= */

.cimegs-indexing-page {
  --idx-navy: #17224F;
  --idx-blue: #242F5F;
  --idx-red: #C9272C;
  --idx-text: #303849;
  --idx-muted: #6B7485;
  --idx-line: #DDE2EC;
  --idx-soft: #F5F7FB;
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 0 30px;
}

.cimegs-indexing-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 24px;
  padding: 32px 34px 30px;
  border: 1px solid var(--idx-line);
  border-top: 4px solid var(--idx-blue);
  border-radius: 10px;
  background:
    radial-gradient(circle at 93% 4%, rgba(36,47,95,.10), transparent 28%),
    linear-gradient(145deg, #FFFFFF 0%, #F6F8FC 100%);
  box-shadow: 0 10px 30px rgba(18,27,57,.06);
}

.cimegs-indexing-hero::after {
  content: "";
  position: absolute;
  right: -55px;
  bottom: -82px;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(36,47,95,.08);
  border-radius: 50%;
  pointer-events: none;
}

.cimegs-indexing-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 11px;
  color: var(--idx-red);
  font-family: "IBM Plex Sans","Segoe UI",Arial,sans-serif;
  font-size: .69rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .14em;
}

.cimegs-indexing-kicker::before {
  content: "";
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg,var(--idx-red) 0 34%,var(--idx-blue) 34% 100%);
}

.cimegs-indexing-hero h1 {
  position: relative;
  z-index: 1;
  margin: 0 0 11px;
  color: var(--idx-navy);
  font-size: clamp(1.65rem,3vw,2.35rem);
  line-height: 1.16;
}

.cimegs-indexing-hero p {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0;
  color: #4E586A;
  font-family: "IBM Plex Sans","Segoe UI",Arial,sans-serif;
  font-size: .93rem;
  line-height: 1.75;
}

.cimegs-indexing-status {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 8px 12px;
  border: 1px solid #E6D9B9;
  border-radius: 999px;
  background: #FFFDF6;
  color: #695B3B;
  font-family: "IBM Plex Sans","Segoe UI",Arial,sans-serif;
  font-size: .74rem;
  line-height: 1.35;
}

.cimegs-status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #C78A21;
  box-shadow: 0 0 0 3px rgba(199,138,33,.13);
}

.cimegs-indexing-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
}

.cimegs-index-card {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr);
  gap: 12px;
  min-height: 124px;
  padding: 15px;
  border: 1px solid var(--idx-line);
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 3px 12px rgba(18,27,57,.025);
  transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.cimegs-index-card:hover {
  transform: translateY(-2px);
  border-color: #BCC5D8;
  box-shadow: 0 8px 20px rgba(18,27,57,.07);
}

.cimegs-index-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 29px;
  border-radius: 5px;
  background: #EEF1F8;
  color: var(--idx-blue);
  font-family: "IBM Plex Sans","Segoe UI",Arial,sans-serif;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .05em;
}

.cimegs-index-card h3 {
  margin: 1px 0 5px;
  color: var(--idx-navy);
  font-size: .92rem;
  line-height: 1.32;
}

.cimegs-index-card p {
  margin: 0 0 8px;
  color: var(--idx-muted);
  font-family: "IBM Plex Sans","Segoe UI",Arial,sans-serif;
  font-size: .75rem;
  line-height: 1.45;
}

.cimegs-index-card a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--idx-blue) !important;
  font-family: "IBM Plex Sans","Segoe UI",Arial,sans-serif;
  font-size: .71rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none !important;
  word-break: break-word;
}

.cimegs-index-card a::after {
  content: "↗";
  color: #9099AA;
  font-size: .72rem;
}

.cimegs-index-card a:hover {
  color: var(--idx-red) !important;
}

.cimegs-indexing-note {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid #E4E7EF;
  border-left: 3px solid var(--idx-red);
  border-radius: 0 7px 7px 0;
  background: #F8F9FC;
  color: #636D7E;
  font-family: "IBM Plex Sans","Segoe UI",Arial,sans-serif;
  font-size: .78rem;
  line-height: 1.65;
}

.cimegs-indexing-note strong {
  color: var(--idx-navy);
}

@media (max-width: 980px) {
  .cimegs-indexing-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 640px) {
  .cimegs-indexing-page {
    padding-top: 4px;
  }

  .cimegs-indexing-hero {
    padding: 24px 20px 22px;
  }

  .cimegs-indexing-status {
    align-items: flex-start;
    border-radius: 7px;
  }

  .cimegs-indexing-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cimegs-index-card {
    min-height: 0;
  }
}