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

/* ==========================================================================
   SAGE JOURNALS CLONE — home (overrides the Modern17/soft styling above)
   ========================================================================== */
.sage-home, .pkp_op_index .pkp_structure_main { --sg-green:#0f5f54; --sg-green-d:#083b34; --sg-navy:#141b4d; --sg-navy2:#1b2a6b; --sg-link:#1c2b7a; --sg-card:#f4f6f7; }

/* ---- Header: flat green title banner (drop the busy cover image) ---- */
.pkp_structure_head {
  background: linear-gradient(90deg,#083b34 0%,#0f5f54 44%,#12695c 100%) !important;
  box-shadow: none !important; border: 0 !important;
}
.pkp_site_name_wrapper, .pkp_site_name { padding: 40px 0 30px !important; min-height: 0 !important; }
.pkp_site_name, .pkp_site_name a, .pkp_site_name .is_text {
  color: #fff !important; font-weight: 700 !important; font-size: 32px !important; line-height: 1.18 !important;
}

/* ---- Nav: white bar, navy links (kill orange box + pipes) ---- */
.pkp_navigation_primary_row, .pkp_site_nav_menu, .pkp_navigation_primary_wrapper {
  background: #ffffff !important; border-top: 0 !important; border-bottom: 1px solid #e4e4e4 !important;
}
.pkp_navigation_primary::before { display: none !important; }
.pkp_navigation_primary > li + li::before { content: "" !important; margin: 0 !important; }
.pkp_navigation_primary > li > a, .pkp_site_nav_menu a {
  color: #1b2a6b !important; font-weight: 600 !important; border-bottom: 3px solid transparent !important;
}
.pkp_navigation_primary > li > a:hover, .pkp_site_nav_menu a:hover {
  color: #0f5f54 !important; border-bottom-color: #0f5f54 !important; background: transparent !important;
}
.pkp_navigation_user a, .pkp_site_nav_menu .pkp_search a { color: #1b2a6b !important; }
.pkp_search input { border: 1px solid #ccc !important; border-radius: 2px !important; }

/* ---- Info card (overlaps the banner) ---- */
.sage-infocard {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: #fff; border: 1px solid #e6e6e6; border-radius: 4px;
  padding: 16px 24px; margin: -34px 0 26px; box-shadow: 0 2px 10px rgba(0,0,0,.07);
}
.sage-pub { color: #141b4d; font-weight: 700; font-size: 15px; }
.sage-metrics { color: #333; font-size: 14.5px; }
.sage-btns { margin-left: auto; display: flex; gap: 12px; }
.sage-btn-grey, .sage-btn-navy { padding: 11px 18px; border-radius: 3px; font-weight: 700; font-size: 13.5px; text-decoration: none !important; white-space: nowrap; }
.sage-btn-grey { background: #cbced0; color: #1a1a1a !important; }
.sage-btn-navy { background: #141b4d; color: #fff !important; }
.sage-btn-grey:hover { background: #b9bdbf; }
.sage-btn-navy:hover { background: #0d1440; color:#fff !important; }

/* ---- Description + cover ---- */
.sage-desc { display: flex; gap: 26px; background: #f4f6f7; border-radius: 4px; padding: 26px; margin-bottom: 30px; }
.sage-cover { flex: 0 0 auto; }
.sage-cover img { width: 150px; height: auto; display: block; box-shadow: 0 3px 10px rgba(0,0,0,.22); }
.sage-desctext { flex: 1; color: #2a2a2a; font-size: 16px; line-height: 1.62; }
.sage-desctext p:first-child { margin-top: 0; }
.sage-desctext .sage-full, .sage-desctext a { color: #1c2b7a !important; font-weight: 600; }

/* ---- Browse by tabs (radio-hack, no scroll jump) ---- */
.sage-browse h2 { color: #141b4d !important; font-size: 26px !important; font-weight: 700 !important; margin: 0 0 10px !important; border: 0 !important; }
.sage-tabs .sar { position: absolute; left: -9999px; opacity: 0; }
.sanav { border-bottom: 1px solid #dcdcdc; margin-bottom: 18px; }
.sabtn { display: inline-block; color: #444; font-weight: 600; font-size: 15px; margin-right: 28px; padding: 10px 2px; margin-bottom: -1px; border-bottom: 3px solid transparent; cursor: pointer; }
.sabtn:hover { color: #141b4d; }
.satp { display: none; }
#sa-recent:checked ~ .p-recent, #sa-read:checked ~ .p-read, #sa-cited:checked ~ .p-cited, #sa-trend:checked ~ .p-trend { display: block; }
#sa-recent:checked ~ .sanav label[for="sa-recent"],
#sa-read:checked ~ .sanav label[for="sa-read"],
#sa-cited:checked ~ .sanav label[for="sa-cited"],
#sa-trend:checked ~ .sanav label[for="sa-trend"] { color: #141b4d; border-bottom-color: #141b4d; }
.saart { padding: 16px 0; border-bottom: 1px solid #ececec; }
.saart h4 { margin: 0 0 5px; font-size: 17px; font-weight: 700; }
.saart h4 a { color: #1c2b7a !important; text-decoration: none; }
.saart h4 a:hover { text-decoration: underline; }
.saauth { margin: 0 0 3px; color: #333; font-size: 14px; }
.sameta { margin: 0; color: #777; font-size: 13px; }
.saempty { color: #777; padding: 16px 0; font-style: italic; }

/* ---- Sidebar: Sage clean cards, navy headings, back on the RIGHT ---- */
.pkp_structure_content:has(.pkp_structure_sidebar) .pkp_structure_sidebar { float: right !important; }
.pkp_structure_content:has(.pkp_structure_sidebar) .pkp_structure_main {
  float: left !important; border-left: 0 !important; padding-left: 0 !important; padding-right: 40px !important;
}
.jsb-label { display: none !important; }
.pkp_structure_sidebar .pkp_block {
  background: #fff !important; border: 1px solid #e6e6e6 !important; border-radius: 4px !important;
  box-shadow: none !important; margin-bottom: 20px !important; overflow: visible !important; padding: 0 !important;
}
.pkp_structure_sidebar .pkp_block > .title:not(.pkp_screen_reader),
.pkp_structure_sidebar .pkp_block > h2:not(.pkp_screen_reader) {
  background: #fff !important; color: #1b2a6b !important; font-size: 20px !important; font-weight: 700 !important;
  padding: 16px 20px 10px !important; border-bottom: 2px solid #e2e2e2 !important; text-transform: none !important;
}
.pkp_structure_sidebar .pkp_block.jacc > .title::after, .pkp_structure_sidebar .pkp_block.jacc > h2::after { content: "" !important; }
.pkp_structure_sidebar .pkp_block.jcollapsed .content { display: block !important; }  /* Sage sidebars are not collapsed */
.pkp_structure_sidebar .pkp_block .content { background: #fff !important; padding: 6px 20px 16px !important; }
.pkp_structure_sidebar .pkp_block .content li { padding: 9px 0 !important; border-bottom: 1px solid #f0f0f0 !important; }
.pkp_structure_sidebar .pkp_block .content a { color: #1c2b7a !important; font-weight: 400 !important; padding-left: 0 !important; }
.pkp_structure_sidebar .pkp_block .content a::before { content: "" !important; }
/* Make a Submission stays a button but navy (Sage) */
.jsubmit { background: #141b4d !important; color: #fff !important; border-radius: 3px; }
.jsubmit:hover { background: #0d1440 !important; color:#fff !important; }

@media (max-width: 767px){ .sage-infocard, .sage-desc { flex-direction: column; } .sage-btns { margin-left: 0; } }

/* Hide OJS's "About the Journal" heading above the Sage widget */
.homepage_about > h2, .page_index_journal > h2, .obj_journal_index .about_journal > h2 { display: none !important; }

/* Hide the OJS "Current Issue" block below the widget (not part of the Sage layout) */
.pkp_op_index .current_issue, .page_index_journal .current_issue { display: none !important; }
/* Banner: darker diagonal wedge on the left (Sage detail) */
.pkp_structure_head { background: linear-gradient(100deg,#05231f 0%,#083b34 20%,#0f5f54 52%,#12695c 100%) !important; }

/* ==========================================================================
   SAGE PLATFORM TOP BAR (injected above the green banner) + metric line + tags
   ========================================================================== */
.sage-topbar { background: #ffffff; border-bottom: 1px solid #e2e2e2; font-family: "Noto Sans", Arial, sans-serif; }
.sage-topbar-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 12px 20px 18px; }
.sage-logo { color: #141b4d !important; font-size: 24px; font-weight: 400; text-decoration: none !important; white-space: nowrap; letter-spacing: -.3px; }
.sage-logo b { font-weight: 800; }
.sage-topsearch { display: flex; align-items: center; flex: 0 1 600px; flex-wrap: wrap; margin-left: 18px; }
.sts-scope { display: flex; align-items: center; gap: 6px; background: #f0f0f0; border: 1px solid #cfcfcf; border-radius: 24px; padding: 9px 16px; font-size: 14px; color: #333; white-space: nowrap; margin-right: 10px; }
.sts-scope em { font-style: normal; color: #777; }
.sts-field { display: flex; align-items: center; flex: 1; min-width: 220px; border: 1px solid #cfcfcf; border-radius: 24px; overflow: hidden; background: #fff; }
.sts-field input { flex: 1; border: 0; padding: 9px 16px; font-size: 14px; outline: none; background: transparent; }
.sts-field button { background: transparent; border: 0; color: #0f5f54; padding: 0 14px; cursor: pointer; display: flex; align-items: center; }
.sts-adv { flex-basis: 100%; text-align: right; margin-top: 4px; font-size: 13px; color: #1c2b7a !important; }
.sage-access { margin-left: auto; font-size: 12.5px; color: #333; max-width: 150px; line-height: 1.35; }
.sage-access span { display: block; }
.sage-access b { color: #141b4d; }
.sage-ico { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #333 !important; font-size: 11.5px; text-decoration: none !important; }
.sage-ico:hover { color: #0f5f54 !important; }
.sage-topnav { border-top: 1px solid #ececec; background: #fff; }
.sage-topnav-inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.sage-topnav a { display: inline-block; padding: 12px 0; margin-right: 30px; color: #141b4d !important; font-weight: 600; font-size: 15px; text-decoration: none !important; }
.sage-topnav a em { color: #888; font-style: normal; }
.sage-topnav a:hover { color: #0f5f54 !important; }
@media (max-width: 900px){ .sage-topsearch, .sage-access { display: none; } }

/* Metric line as Sage-style underlined links */
.sage-metrics a { color: #1a1a1a !important; text-decoration: underline; font-weight: 400; }
.sage-metrics a:hover { color: #0f5f54 !important; }
.sage-metrics b { font-weight: 700; }
.sage-metrics .sm-sep { color: #bbb; margin: 0 4px; }

/* Article tag chip in Browse-by list */
.saart .satag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #0f5f54; margin-bottom: 4px; }

/* Sage metrics line (underlined navy links) + browse-by article tag */
.sage-infocard .sage-metrics a { color:#1c2b7a !important; text-decoration:underline; font-size:14.5px; }
.sage-infocard .sage-metrics a:hover { color:#0d1440 !important; }
.sage-infocard .sm-sep { color:#c2c2c2; margin:0 5px; }
.satag { display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#0f5f54; margin-bottom:6px; }

/* Info card: center the metric line (Sage: publisher | metrics centered | buttons) */
.sage-infocard .sage-metrics { flex: 1; text-align: right; padding-right: 4px; }
/* Richer Browse-by article cards (access badge + Abstract/PDF links) */
.saart { display: flex !important; align-items: flex-start; gap: 16px; padding: 18px 0; border-bottom: 1px solid #ececec; }
.saart-main { flex: 1; }
.salinks { margin-top: 9px; }
.salinks a { color: #1c2b7a !important; font-weight: 600; font-size: 13.5px; margin-right: 18px; text-decoration: none; }
.salinks a:hover { text-decoration: underline; }
.saoa { flex: 0 0 auto; color: #c2410c; font-weight: 700; font-size: 12px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.saoa::before { content: "\1F513"; font-size: 13px; }

/* Info card spans the FULL content width (moved above the two columns, Sage-style) */
.pkp_structure_content > .sage-infocard { width: auto; margin: -75px 0 28px !important; position: relative; z-index: 5; clear: both; }

/* Nav moved ABOVE the green banner → white top bar, items aligned RIGHT (Sage) */
.pkp_structure_page > .pkp_site_nav_menu { background: #ffffff !important; border-bottom: 1px solid #e4e4e4 !important; }
.pkp_structure_page > .pkp_site_nav_menu .pkp_navigation_primary_row,
.pkp_structure_page > .pkp_site_nav_menu .pkp_navigation_primary_wrapper {
  display: flex !important; justify-content: flex-end !important; align-items: center;
}
.pkp_structure_page > .pkp_site_nav_menu .pkp_navigation_primary { flex: 0 0 auto !important; }
.pkp_structure_page > .pkp_site_nav_menu .pkp_navigation_search_wrapper { margin-left: 22px !important; }

/* Top nav bar: proper height, vertically centered, user links inline on the right */
.pkp_structure_page > .pkp_site_nav_menu .pkp_navigation_primary_wrapper { align-items: center !important; gap: 4px; padding: 5px 0 !important; }
.pkp_structure_page > .pkp_site_nav_menu .pkp_navigation_user { position: static !important; flex: 0 0 auto !important; margin: 0 0 0 16px !important; width: auto !important; display: flex !important; align-items: center; }
.pkp_structure_page > .pkp_site_nav_menu .pkp_navigation_user li { display: inline-block; }
.pkp_structure_page > .pkp_site_nav_menu .pkp_navigation_user a { color: #1b2a6b !important; }

/* Banner: fixed height, title vertically centered, subtle illustrative background */
.pkp_structure_head {
  min-height: 210px !important;
  background:
    linear-gradient(100deg, rgba(5,35,31,.97) 0%, rgba(8,59,52,.93) 30%, rgba(15,95,84,.84) 66%, rgba(18,105,92,.75) 100%),
    url('journalCover.jpg') right center / cover no-repeat #0d4d47 !important;
}
.pkp_head_wrapper { padding: 0 !important; min-height: 210px !important; display: flex !important; align-items: center !important; }
.pkp_head_wrapper .pkp_site_name_wrapper, .pkp_head_wrapper .pkp_site_name {
  padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; min-height: 0 !important;
}

/* Banner illustrative background: subtle transparent network motif (no diagonal stripes) */
.pkp_structure_head {
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27170%27%20height%3D%27170%27%20viewBox%3D%270%200%20170%20170%27%3E%3Cg%20stroke%3D%27%23ffffff%27%20stroke-opacity%3D%270.09%27%20stroke-width%3D%271%27%20fill%3D%27none%27%3E%3Cline%20x1%3D%2728%27%20y1%3D%2742%27%20x2%3D%2788%27%20y2%3D%2774%27%2F%3E%3Cline%20x1%3D%2788%27%20y1%3D%2774%27%20x2%3D%27146%27%20y2%3D%2738%27%2F%3E%3Cline%20x1%3D%2788%27%20y1%3D%2774%27%20x2%3D%2766%27%20y2%3D%27140%27%2F%3E%3Cline%20x1%3D%2788%27%20y1%3D%2774%27%20x2%3D%27150%27%20y2%3D%27128%27%2F%3E%3Cline%20x1%3D%2728%27%20y1%3D%2742%27%20x2%3D%2716%27%20y2%3D%27128%27%2F%3E%3Cline%20x1%3D%27146%27%20y1%3D%2738%27%20x2%3D%27150%27%20y2%3D%27128%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%23ffffff%27%20fill-opacity%3D%270.13%27%3E%3Ccircle%20cx%3D%2728%27%20cy%3D%2742%27%20r%3D%272.6%27%2F%3E%3Ccircle%20cx%3D%2788%27%20cy%3D%2774%27%20r%3D%273.2%27%2F%3E%3Ccircle%20cx%3D%27146%27%20cy%3D%2738%27%20r%3D%272.6%27%2F%3E%3Ccircle%20cx%3D%2766%27%20cy%3D%27140%27%20r%3D%272.6%27%2F%3E%3Ccircle%20cx%3D%27150%27%20cy%3D%27128%27%20r%3D%272.6%27%2F%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%27128%27%20r%3D%272.2%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat,
    radial-gradient(ellipse at 84% 30%, rgba(255,255,255,.10), transparent 50%),
    linear-gradient(100deg, #05231f 0%, #083b34 22%, #0f5f54 58%, #12695c 100%) !important;
  background-size: 170px 170px, auto, auto !important;
}

/* ==========================================================================
   BANNER — height 180 + journal COVER on the left (Elsevier/ScienceDirect style)
   ========================================================================== */
.pkp_structure_head { min-height: 180px !important; position: relative !important; overflow: visible !important; }
.pkp_head_wrapper { min-height: 180px !important; position: relative !important; overflow: visible !important; }
/* Cover image on the left, overhanging the banner top & bottom, aligned to content edge */
.pkp_head_wrapper::before {
  content: ""; position: absolute; z-index: 20;
  left: max(16px, calc((100% - 1160px) / 2));
  top: 50%; transform: translateY(-50%);
  width: 150px; height: 214px;
  background: var(--mlcs-cover, url('journalCover.jpg')) center / cover no-repeat #ffffff;
  box-shadow: 0 8px 24px rgba(0,0,0,.38);
  border: 3px solid #ffffff;
}
/* Title shifted to the right of the cover + "Supports open access" subtitle */
.pkp_head_wrapper .pkp_site_name { padding-left: 192px !important; }
.pkp_head_wrapper .pkp_site_name::after {
  content: "Supports open access"; display: block; margin-top: 8px;
  font-size: 15px !important; font-weight: 400 !important; color: rgba(255,255,255,.9) !important;
  text-transform: none; letter-spacing: 0;
}
/* Info-card content clears the overhanging cover on the left */
.pkp_structure_content > .sage-infocard { padding-left: 192px !important; }
@media (max-width: 640px){
  .pkp_head_wrapper::before { display: none; }
  .pkp_head_wrapper .pkp_site_name { padding-left: 0 !important; }
  .pkp_structure_content > .sage-infocard { padding-left: 24px !important; }
}

/* ==========================================================================
   FULL-WIDTH LAYOUT — exactly 1cm margin from each screen edge (left & right)
   ========================================================================== */
.pkp_structure_content,
.pkp_head_wrapper .pkp_site_name_wrapper,
.pkp_site_nav_menu .pkp_navigation_primary_wrapper,
.pkp_structure_footer .pkp_footer_content {
  width: auto !important;
  max-width: none !important;
  margin-left: 1cm !important;
  margin-right: 1cm !important;
}
/* Main column becomes fluid to fill the wider row (sidebar stays 300px on the right) */
.pkp_structure_content:has(.pkp_structure_sidebar) .pkp_structure_main { width: calc(100% - 300px) !important; }
/* Cover + title still align to the (new) 1cm content edge */
.pkp_head_wrapper::before { left: 1cm !important; }

/* Hide the theme's decorative vertical column divider lines (re-added) */
.pkp_structure_main::before, .pkp_structure_main::after { display: none !important; content: none !important; }

/* Description block: remove the redundant cover (already shown in the banner) */
.sage-desc .sage-cover { display: none !important; }
.sage-desc { display: block !important; }

/* Align description block top with the sidebar (remove homepage_about top padding) */
.homepage_about, .page_index_journal .homepage_about { padding-top: 0 !important; }

/* ==========================================================================
   FOOTER — Sage-style: dark navy, link columns, bottom legal bar
   ========================================================================== */
.pkp_structure_footer_wrapper { background: #141b4d !important; color: #cdd3e8 !important; border-top: 3px solid #e3e3e3 !important; }
.pkp_structure_footer { background: transparent !important; }
.pkp_footer_content { padding: 42px 0 8px !important; }
.jichi-footer-cols { display: flex !important; flex-wrap: wrap; gap: 44px; }
.jichi-fcol { flex: 1 1 190px; min-width: 170px; }
.jichi-fcol.jichi-fcol-about { flex: 1.4 1 260px; }
.jichi-fcol h3 { color: #ffffff !important; font-size: 15px !important; font-weight: 700 !important; margin: 0 0 14px !important; padding: 0 0 10px !important; border-bottom: 1px solid rgba(255,255,255,.22) !important; text-transform: none !important; letter-spacing: 0 !important; }
.jichi-fcol ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.jichi-fcol li { padding: 6px 0 !important; border: 0 !important; }
.jichi-fcol a { color: #cdd3e8 !important; font-size: 14px !important; }
.jichi-fcol a:hover { color: #ffffff !important; text-decoration: underline !important; }
.jichi-fcol p { color: #a7afd0 !important; font-size: 13.5px; line-height: 1.55; margin: 0 0 10px; }
.jichi-footer-issn { color: #ffffff !important; font-weight: 600 !important; }
.jichi-footer-bottom { border-top: 1px solid rgba(255,255,255,.15) !important; margin-top: 22px !important; padding: 16px 0 !important; font-size: 12.5px !important; color: #9aa2c6 !important; }
.pkp_structure_footer a { color: #cdd3e8 !important; }
.pkp_structure_footer a:hover { color: #ffffff !important; }
/* OJS "Open Journal Systems" brand strip → subtle on navy */
.pkp_brand_footer { background: transparent !important; opacity: .5; padding: 6px 0 16px !important; }
.pkp_brand_footer, .pkp_brand_footer a, .pkp_brand_footer a:link { color: #9aa2c6 !important; }

/* ==========================================================================
   FOOTER v2 — WHITE background, Sage colours, PKP logo hidden
   ========================================================================== */
.pkp_structure_footer_wrapper {
  background: #ffffff !important; color: #333333 !important;
  border-top: 3px solid #e3e3e3 !important;
}
.pkp_structure_footer { background: transparent !important; }
.jichi-fcol h3 { color: #141b4d !important; border-bottom: 1px solid #dcdcdc !important; }
.jichi-fcol a, .pkp_structure_footer a { color: #1c2b7a !important; }
.jichi-fcol a:hover, .pkp_structure_footer a:hover { color: #0d1440 !important; }
.jichi-fcol p { color: #555555 !important; }
.jichi-footer-issn { color: #141b4d !important; }
.jichi-footer-bottom { border-top: 1px solid #e5e5e5 !important; color: #777777 !important; }
/* Hide the "Platform & workflow by OJS / PKP" logo strip */
.pkp_brand_footer, .pkp_structure_footer .pkp_brand { display: none !important; }

/* ==========================================================================
   ANTI-FLASH (FOUC) — hide the page until the Sage transform JS finishes,
   with a safety auto-reveal in case JS is slow or disabled.
   ========================================================================== */
.pkp_structure_page { opacity: 0; animation: sageReveal .01s linear .5s forwards; }
html.sage-ready .pkp_structure_page { opacity: 1 !important; animation: none !important; transition: opacity .16s ease; }
@keyframes sageReveal { to { opacity: 1; } }

/* Banner cover: nudge right + remove the white frame */
.pkp_head_wrapper::before { left: calc(1cm + 26px) !important; border: 0 !important; }

/* ==========================================================================
   ARCHIVE (issue/archive) — clean year-grouped list, Sage-styled (rebuilt)
   Template markup: .gridListBox (View toolbar) + .issues_container.calView
   > .yearBox + .issue_item > .obj_issue_summary > .media-heading a.title .ident
   ========================================================================== */
.pkp_op_archive .page_issue_archive > h1 { color: #141b4d !important; font-size: 28px !important; font-weight: 700 !important; margin: 4px 0 6px !important; }
/* Hide the calendar/list/grid view toolbar (Sage archive has no view toggle) */
.pkp_op_archive .gridListBox { display: none !important; }
/* Year-grouped list */
.pkp_op_archive .issues_container.calView { display: flex !important; flex-wrap: wrap; margin-top: 8px; }
.pkp_op_archive .calView .yearBox {
  flex: 0 0 100%; display: block; font-size: 22px; font-weight: 700; color: #141b4d;
  margin: 26px 0 4px; padding: 0 0 8px; border-bottom: 2px solid #e2e2e2;
}
.pkp_op_archive .calView .yearBox:first-child { margin-top: 8px; }
.pkp_op_archive .calView .issue_item { flex: 0 0 33.333%; max-width: 33.333%; box-sizing: border-box; padding: 14px 18px 14px 0; }
.pkp_op_archive .obj_issue_summary { position: relative; padding-left: 24px; }
.pkp_op_archive .obj_issue_summary .cover, .pkp_op_archive .archiveDate, .pkp_op_archive .description { display: none !important; }
.pkp_op_archive .media-heading { margin: 0 !important; font-size: 15px !important; }
.pkp_op_archive .media-heading a.title { color: #1c2b7a !important; font-weight: 600 !important; text-decoration: none !important; position: relative; display: inline-block; }
.pkp_op_archive .media-heading a.title:hover { text-decoration: underline !important; }
.pkp_op_archive .media-heading a.title::before { content: "\1F4D5"; position: absolute; left: -24px; top: 0; font-size: 14px; filter: grayscale(1) brightness(.4); }
.pkp_op_archive .issue_title_sub { font-size: 13px; color: #777; margin-top: 2px; }
@media (max-width: 991px){ .pkp_op_archive .calView .issue_item { flex-basis: 50%; max-width: 50%; } }
@media (max-width: 600px){ .pkp_op_archive .calView .issue_item { flex-basis: 100%; max-width: 100%; } }

/* Banner cover: nudge up a bit more */
.pkp_head_wrapper::before { top: calc(50% - 18px) !important; }

/* ==========================================================================
   FONT — swap Noto Sans → Catamaran (free Sage-like humanist sans) site-wide
   ========================================================================== */
:root { --els-sans: "Catamaran", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
body, body * {
  font-family: "Catamaran", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Info card: taller (more vertical padding) */
.pkp_structure_content > .sage-infocard, .sage-infocard { padding-top: 24px !important; padding-bottom: 24px !important; }
/* Buttons: clearly bold (ExtraBold 800) */
.sage-btn-grey, .sage-btn-navy { font-weight: 800 !important; }

/* Info card: taller + non-bold buttons */
.sage-infocard { padding-top: 24px !important; padding-bottom: 24px !important; }
.sage-btn-grey, .sage-btn-navy { font-weight: 400 !important; }

/* Info card: tighter, content-driven (dynamic) height — minimal vertical padding */
.sage-infocard { padding-top: 8px !important; padding-bottom: 8px !important; align-items: center !important; }
.sage-btn-grey, .sage-btn-navy { padding-top: 9px !important; padding-bottom: 9px !important; }

/* Info card: force single row for a compact, stable dynamic height */
.sage-infocard { flex-wrap: nowrap !important; gap: 16px !important; }
.sage-infocard .sage-pub { white-space: nowrap; flex: 0 0 auto; }
.sage-infocard .sage-metrics { min-width: 0 !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
.sage-infocard .sage-btns { flex: 0 0 auto; }
@media (max-width: 900px){ .sage-infocard .sage-metrics { white-space: normal !important; } .sage-infocard { flex-wrap: wrap !important; } }

/* Final override: compact info-card vertical padding (beats earlier 24px rules) */
.pkp_structure_content > .sage-infocard { padding-top: 8px !important; padding-bottom: 8px !important; }

/* Info card centered exactly on the banner's bottom edge; title nudged up to center in the visible banner area */
.pkp_structure_content > .sage-infocard { margin-top: -58px !important; }
.pkp_head_wrapper .pkp_site_name { transform: translateY(-14px); }

/* Banner: subtle EKG/heartbeat line on the right (Health Informatics) over the network motif (Intelligent Computing) */
.pkp_structure_head {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27560%27%20height%3D%2764%27%20viewBox%3D%270%200%20560%2064%27%3E%20%3Cpolyline%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-opacity%3D%270.16%27%20stroke-width%3D%271.6%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%20points%3D%270%2C32%2064%2C32%2074%2C32%2082%2C24%2090%2C32%20106%2C32%20114%2C6%20122%2C58%20130%2C32%20148%2C32%20158%2C27%20166%2C32%20280%2C32%20290%2C32%20298%2C24%20306%2C32%20322%2C32%20330%2C6%20338%2C58%20346%2C32%20364%2C32%20374%2C27%20382%2C32%20560%2C32%27%2F%3E%20%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27170%27%20height%3D%27170%27%20viewBox%3D%270%200%20170%20170%27%3E%3Cg%20stroke%3D%27%23ffffff%27%20stroke-opacity%3D%270.09%27%20stroke-width%3D%271%27%20fill%3D%27none%27%3E%3Cline%20x1%3D%2728%27%20y1%3D%2742%27%20x2%3D%2788%27%20y2%3D%2774%27%2F%3E%3Cline%20x1%3D%2788%27%20y1%3D%2774%27%20x2%3D%27146%27%20y2%3D%2738%27%2F%3E%3Cline%20x1%3D%2788%27%20y1%3D%2774%27%20x2%3D%2766%27%20y2%3D%27140%27%2F%3E%3Cline%20x1%3D%2788%27%20y1%3D%2774%27%20x2%3D%27150%27%20y2%3D%27128%27%2F%3E%3Cline%20x1%3D%2728%27%20y1%3D%2742%27%20x2%3D%2716%27%20y2%3D%27128%27%2F%3E%3Cline%20x1%3D%27146%27%20y1%3D%2738%27%20x2%3D%27150%27%20y2%3D%27128%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%23ffffff%27%20fill-opacity%3D%270.13%27%3E%3Ccircle%20cx%3D%2728%27%20cy%3D%2742%27%20r%3D%272.6%27%2F%3E%3Ccircle%20cx%3D%2788%27%20cy%3D%2774%27%20r%3D%273.2%27%2F%3E%3Ccircle%20cx%3D%27146%27%20cy%3D%2738%27%20r%3D%272.6%27%2F%3E%3Ccircle%20cx%3D%2766%27%20cy%3D%27140%27%20r%3D%272.6%27%2F%3E%3Ccircle%20cx%3D%27150%27%20cy%3D%27128%27%20r%3D%272.6%27%2F%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%27128%27%20r%3D%272.2%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    radial-gradient(ellipse at 84% 30%, rgba(255,255,255,.10), transparent 50%),
    linear-gradient(100deg, #05231f 0%, #083b34 22%, #0f5f54 58%, #12695c 100%) !important;
  background-repeat: no-repeat, repeat, no-repeat, no-repeat !important;
  background-position: right 4% top 56%, 0 0, 0 0, 0 0 !important;
  background-size: 560px 64px, 170px 170px, auto, auto !important;
}

/* Banner: dark charcoal + red accent (brand-matched) */
.pkp_structure_head {
  background-image:
    radial-gradient(ellipse at 82% 26%, rgba(225,31,38,.28), transparent 55%),
    linear-gradient(120deg, #0b0a0c 0%, #161114 42%, #1e1417 70%, #0a090b 100%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: 0 0, 0 0 !important;
  background-size: auto, auto !important;
}



/* ==========================================================================
   ARTICLE PAGE (article/view) — Sage-style professional layout
   ========================================================================== */
.pkp_page_article .obj_article_details .page_title {
  color: #141b4d !important; font-size: 28px !important; font-weight: 700 !important; line-height: 1.28 !important;
  margin: 6px 0 20px !important;
}
/* Authors */
.pkp_page_article .item.authors { margin-bottom: 18px !important; }
.pkp_page_article .item.authors .name { color: #141b4d !important; font-weight: 700 !important; font-size: 16px !important; }
.pkp_page_article .item.authors .affiliation { color: #555 !important; font-size: 14px !important; }
.pkp_page_article .item.authors .orcid { display: none !important; }   /* hides the broken ORCID icon text */
/* Item labels */
.pkp_page_article .obj_article_details .item .label {
  color: #141b4d !important; font-weight: 700 !important; font-size: 12.5px !important;
  text-transform: uppercase !important; letter-spacing: .05em !important; margin-bottom: 6px !important;
}
/* Abstract as a soft card */
.pkp_page_article .item.abstract { background: #f4f6f7 !important; border-radius: 4px !important; padding: 22px 24px !important; margin: 18px 0 !important; }
.pkp_page_article .item.abstract .value { color: #2a2a2a !important; font-size: 16px !important; line-height: 1.65 !important; }
/* Keywords */
.pkp_page_article .item.keywords .value { color: #333 !important; font-size: 14.5px !important; line-height: 1.7 !important; }
/* References */
.pkp_page_article .item.references .value { font-size: 14px !important; line-height: 1.65 !important; color: #333 !important; }
.pkp_page_article .item.references .value p, .pkp_page_article .item.references .value div { padding: 6px 0 !important; border-bottom: 1px solid #f0f0f0 !important; }
/* Right inner column (PDF / Published / Issue) as a clean panel */
.pkp_page_article .entry_details { background: #ffffff !important; border: 1px solid #e6e6e6 !important; border-radius: 4px !important; padding: 18px 20px !important; }
.pkp_page_article .entry_details .item { padding: 10px 0 !important; border-bottom: 1px solid #ececec !important; margin: 0 !important; }
.pkp_page_article .entry_details .item:last-child { border-bottom: 0 !important; }
.pkp_page_article .entry_details .item .label { font-size: 11.5px !important; color: #777 !important; }
.pkp_page_article .entry_details .item .value { color: #141b4d !important; font-weight: 600 !important; font-size: 14.5px !important; }
.pkp_page_article .entry_details .item .value a { color: #1c2b7a !important; }
/* PDF / galley button */
.pkp_page_article .item.galleys a.obj_galley_link, .pkp_page_article .galleys a {
  display: inline-block !important; background: #141b4d !important; color: #ffffff !important;
  padding: 11px 20px !important; border-radius: 3px !important; font-weight: 700 !important; text-decoration: none !important;
}
.pkp_page_article .item.galleys a.obj_galley_link:hover, .pkp_page_article .galleys a:hover { background: #0d1440 !important; }

/* ---- Article-page sidebar cards: Article Info + Related Research ---- */
/* Article Info rows: inline "Label : value", normal case (not all-caps), bold dark label */
.sg-artinfo .ai-list { margin: 0; padding: 0; }
.sg-artinfo .ai-row { margin-top: 12px; font-size: 14px; line-height: 1.5; color: #333; }
.sg-artinfo .ai-row:first-child { margin-top: 0; }
.sg-artinfo .ai-k { font-weight: 700 !important; color: #1a1a2e !important; text-transform: none !important; letter-spacing: 0 !important; }
.sg-artinfo .ai-k::after { content: " : "; }
.sg-artinfo .ai-v { font-weight: 400 !important; color: #333 !important; }
.sg-artinfo .ai-v a { color: #1c2b7a !important; font-weight: 400 !important; }
/* Statistics stays inline after its label */
.sg-artinfo .ai-row .ai-stats { display: inline-flex; align-items: center; gap: 16px; vertical-align: middle; }
/* Metrics content drops below its label (badges/notes are block-sized) */
.sg-artinfo .ai-row-metrics .ai-v { display: block; margin-top: 4px; }
.sg-artinfo .ai-pdf {
  display: block !important; margin-top: 16px !important; text-align: center !important;
  background: #141b4d !important; color: #ffffff !important; padding: 11px 14px !important;
  border-radius: 3px !important; font-weight: 700 !important; text-decoration: none !important;
}
.sg-artinfo .ai-pdf:hover { background: #0d1440 !important; color: #fff !important; }
.sg-related .sg-sub { color: #141b4d !important; font-size: 14px !important; font-weight: 700 !important; margin: 14px 0 6px !important; padding-bottom: 6px !important; border-bottom: 1px solid #ececec !important; text-transform: none !important; }
.sg-related .sg-sub:first-child { margin-top: 4px !important; }
.sg-related .sg-note { color: #888 !important; font-size: 13px !important; font-style: italic !important; }

/* Article page polish: hide ROR/ORCID badge glyphs; Download PDF button text must be white
   (selector specificity raised to beat the generic sidebar-link colour rule) */
.pkp_page_article .item.authors .ror, .pkp_page_article .item.authors .orcid,
.pkp_page_article .item.authors img, .pkp_page_article .item.authors svg { display: none !important; }
.pkp_structure_sidebar .pkp_block.sg-artinfo .content a.ai-pdf,
.pkp_structure_sidebar .pkp_block .content .ai-pdf { color: #ffffff !important; background: #141b4d !important; }
.pkp_structure_sidebar .pkp_block.sg-artinfo .content a.ai-pdf:hover { background: #0d1440 !important; color: #ffffff !important; }

/* ==========================================================================
   ARTICLE PAGE v2 — BCREC-style structure in Sage styling
   (header meta strip · copyright/licence · Fulltext View|Download · "How to Cite" box)
   ========================================================================== */
/* Single main column: hide the inner right panel (its info now lives in the header strip + sidebar) */
.pkp_page_article .obj_article_details .entry_details { display: none !important; }
.pkp_page_article .obj_article_details .row .main_entry { width: 100% !important; float: none !important; padding-right: 0 !important; }

/* Header block under the title */
.pkp_page_article .jart-head { margin: -6px 0 18px; padding: 0 0 16px; border-bottom: 1px solid #e6e6e6; position: relative; }
.pkp_page_article .jart-doi { font-size: 14px; color: #333; margin-bottom: 8px; }
.pkp_page_article .jart-doi a { color: #1c2b7a !important; text-decoration: underline; }
.pkp_page_article .jart-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13.5px; color: #444; margin-bottom: 10px; }
.pkp_page_article .jart-meta b { color: #141b4d; font-weight: 700; }
.pkp_page_article .jart-legal { font-size: 13px; color: #666; line-height: 1.6; padding-right: 250px; }
.pkp_page_article .jart-legal a { color: #1c2b7a !important; text-decoration: underline; }
/* Fulltext View | Download — pinned right like BCREC */
.pkp_page_article .jart-full { position: absolute; right: 0; bottom: 16px; display: flex; align-items: center; gap: 8px; }
.pkp_page_article .jart-full-lbl { font-size: 12px; font-weight: 700; color: #141b4d; text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; }
.pkp_page_article .jart-btn { display: inline-block; background: #141b4d; color: #fff !important; padding: 9px 18px; border-radius: 3px; font-weight: 700; font-size: 13.5px; text-decoration: none !important; }
.pkp_page_article .jart-btn:hover { background: #0d1440; color: #fff !important; }
.pkp_page_article .jart-btn-alt { background: #ffffff; color: #141b4d !important; border: 2px solid #141b4d; padding: 7px 16px; }
.pkp_page_article .jart-btn-alt:hover { background: #f4f6f7; color: #141b4d !important; }

/* "How to Cite" (OJS CSL plugin) as a Sage box — moved into the main column */
.pkp_page_article .obj_article_details > .item.citation,
.pkp_page_article .item.citation { background: #f4f6f7 !important; border-radius: 4px !important; padding: 18px 22px !important; margin: 0 0 22px !important; }
.pkp_page_article .item.citation .citation_display > .label { color: #141b4d !important; font-size: 12.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .05em !important; margin: 0 0 8px !important; }
.pkp_page_article .item.citation .csl-entry { color: #2a2a2a !important; font-size: 14.5px !important; line-height: 1.6 !important; }
.pkp_page_article .item.citation .csl-entry a { color: #1c2b7a !important; word-break: break-all; }
/* citation-format selector (plugin's own toggle keeps working) */
.pkp_page_article .citation_formats { margin-top: 12px !important; position: relative; }
.pkp_page_article .citation_formats_button {
  background: #ffffff !important; color: #141b4d !important; border: 1.5px solid #141b4d !important; border-radius: 3px !important;
  padding: 7px 14px !important; font-size: 13px !important; font-weight: 700 !important; text-transform: none !important; cursor: pointer;
}
.pkp_page_article .citation_formats_list[aria-hidden="true"] { display: none !important; }
.pkp_page_article .citation_formats_list {
  background: #ffffff !important; border: 1px solid #dcdcdc !important; border-radius: 4px !important; box-shadow: 0 4px 14px rgba(0,0,0,.10) !important;
  padding: 8px 0 !important; margin-top: 6px !important; min-width: 220px; position: absolute; z-index: 20;
}
.pkp_page_article .citation_formats_list a, .pkp_page_article .citation_formats_list .label { display: block !important; padding: 7px 16px !important; color: #1c2b7a !important; font-size: 13.5px !important; text-decoration: none !important; }
.pkp_page_article .citation_formats_list a:hover { background: #f4f6f7 !important; }
.pkp_page_article .citation_formats_list .label { color: #777 !important; font-size: 11.5px !important; text-transform: uppercase !important; letter-spacing: .05em !important; }
@media (max-width: 760px){ .pkp_page_article .jart-legal { padding-right: 0; } .pkp_page_article .jart-full { position: static; margin-top: 12px; } }

/* ==========================================================================
   ARTICLE PAGE v3 — BCREC format in Sage styling
   (authors inline · affiliation bar · dates · copyright + Fulltext row · licence · cite box · citation bar)
   ========================================================================== */
.pkp_page_article .jart-src-hidden { display: none !important; }
.pkp_page_article .jart-doi { text-align: right; font-size: 14px; color: #333; margin: 0 0 10px; }
.pkp_page_article .jart-doi a { color: #1c2b7a !important; text-decoration: underline; }
.pkp_page_article .jart-authors { font-size: 17px; margin: -6px 0 8px; }
.pkp_page_article .jart-author { color: #1c2b7a; font-style: italic; font-weight: 500; }
.pkp_page_article .jart-comma { color: #333; }
.pkp_page_article .jart-affil { background: #f4f6f7; border-left: 4px solid #141b4d; padding: 9px 14px; font-size: 14.5px; color: #333; margin: 0 0 14px; line-height: 1.5; }
.pkp_page_article .jart-head { margin: 0 0 16px; padding: 0; border: 0; position: static; }
.pkp_page_article .jart-dates { font-size: 14px; color: #444; margin: 0 0 12px; }
.pkp_page_article .jart-clock { margin-right: 6px; }
.pkp_page_article .jart-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 10px; }
.pkp_page_article .jart-copy { font-size: 14.5px; color: #333; }
.pkp_page_article .jart-oa { margin-right: 6px; }
/* Fulltext View | Download — outlined box, position kept on the right */
.pkp_page_article .jart-full { position: static; display: inline-flex; align-items: center; gap: 8px; border: 2px solid #141b4d; border-radius: 4px; padding: 7px 12px; background: #fff; }
.pkp_page_article .jart-pdf { color: #c2410c; }
.pkp_page_article .jart-full-lbl { font-size: 14px; font-weight: 700; color: #141b4d; text-transform: none; letter-spacing: 0; margin: 0; }
.pkp_page_article .jart-full a { color: #1c2b7a !important; font-weight: 600; text-decoration: none !important; font-size: 14px; background: transparent !important; padding: 0 !important; border: 0 !important; }
.pkp_page_article .jart-full a:hover { text-decoration: underline !important; }
.pkp_page_article .jart-sep { color: #999; }
.pkp_page_article .jart-lic { font-size: 14px; color: #333; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pkp_page_article .jart-lic a { color: #1c2b7a !important; text-decoration: underline; }
.pkp_page_article .jart-cc { display: inline-block; background: #000; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 3px 8px; border-radius: 3px; }
/* "How to cite (STYLE):" box with inline label */
.pkp_page_article .item.citation { background: #f4f6f7 !important; padding: 16px 20px !important; margin: 0 0 20px !important; border-radius: 4px !important; }
.pkp_page_article .item.citation .citation_display > .label { display: inline !important; margin: 0 6px 0 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 14.5px !important; font-weight: 700 !important; color: #141b4d !important; }
.pkp_page_article .item.citation .citation_display > .value, .pkp_page_article #citationOutput, .pkp_page_article .csl-bib-body, .pkp_page_article .csl-entry { display: inline !important; }
.pkp_page_article .csl-entry { font-size: 14.5px !important; line-height: 1.65 !important; }
.pkp_page_article .item.citation .citation_formats { display: none !important; }
/* Citation Format / Download Citation / Mendeley / Zotero bar */
.pkp_page_article .jart-citebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e3e6e8; }
.pkp_page_article .jart-citelbl { font-weight: 700; color: #141b4d; font-size: 14.5px; margin-right: 4px; }
.pkp_page_article .jart-sel { font-size: 14px; padding: 8px 34px 8px 10px; border: 1px solid #c9ced3; border-radius: 3px; background: #fff; color: #141b4d; min-width: 150px; }
.pkp_page_article .jart-ref { display: inline-block; padding: 8px 14px; border: 1px solid #c9ced3; border-radius: 3px; font-size: 13.5px; font-weight: 700; text-decoration: none !important; background: #fff; }
.pkp_page_article .jart-mendeley { color: #a51e1e !important; }
.pkp_page_article .jart-zotero { color: #444 !important; }
.pkp_page_article .jart-ref:hover { background: #f4f6f7; }
@media (max-width: 760px){ .pkp_page_article .jart-row { flex-direction: column; align-items: flex-start; } .pkp_page_article .jart-doi { text-align: left; } }

/* Article Info → Metrics: Altmetric donut + Dimensions citation badge (placeholders until a DOI exists) */
.sg-artinfo .ai-metrics { margin-top: 4px !important; }
.sg-artinfo .ai-badges { display: flex; align-items: center; gap: 14px; min-height: 64px; }
.sg-artinfo .ai-badges .altmetric-embed, .sg-artinfo .ai-badges .__dimensions_badge_embed__ { display: inline-block; }
.sg-artinfo .ai-metrics-lbl { font-size: 11.5px !important; color: #777 !important; font-weight: 400 !important; margin-top: 4px; }
/* empty state: faint outlined donut + circle where the badges will render */
.sg-artinfo .ai-badges-empty .ai-donut { width: 56px; height: 56px; border-radius: 50%; border: 9px solid #e4e7ea; box-sizing: border-box; display: inline-block; }
.sg-artinfo .ai-badges-empty .ai-circle { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #e4e7ea; box-sizing: border-box; display: inline-block; }
.sg-artinfo .ai-metrics-note { font-size: 12.5px !important; color: #888 !important; font-weight: 400 !important; font-style: italic; line-height: 1.45; margin-top: 6px; }

/* Article Info → Statistics (real OJS usage counts) */
.sg-artinfo .ai-stats { display: flex; gap: 18px; flex-wrap: wrap; }
.sg-artinfo .ai-stats span { display: inline-flex; align-items: center; gap: 6px; color: #141b4d !important; font-weight: 600 !important; font-size: 14px !important; }
.sg-artinfo .ai-stats .ai-stat-ico { font-size: 14px; }
.sg-artinfo .ai-stats .ai-stat-n { font-weight: 700 !important; }

/* Article header: BCREC-style numbered authors + affiliations; hide Author Biographies */
.pkp_page_article .item.author_bios { display: none !important; }
.pkp_page_article .jart-authors sup, .pkp_page_article .jart-affil sup { font-size: 11px !important; line-height: 0; vertical-align: super; font-style: normal !important; font-weight: 600 !important; color: #141b4d !important; }
.pkp_page_article .jart-authors sup { margin-left: 1px; }
.pkp_page_article .jart-affil { padding-top: 8px; padding-bottom: 8px; }
.pkp_page_article .jart-affil .jart-affil-line { display: block; line-height: 1.55; }
.pkp_page_article .jart-affil .jart-affil-line sup { margin-right: 2px; }

/* ===== Article main column: Funding, Article Metrics, References/Copyright tabs ===== */
.pkp_page_article .item.jart-funding .value p { margin: .2em 0; color: #333; line-height: 1.55; }
.pkp_page_article .item.jart-metrics .jart-met-stats { display: flex; gap: 40px; margin: .3em 0 16px; }
.pkp_page_article .item.jart-metrics .jart-met-item { display: flex; flex-direction: column; line-height: 1.05; }
.pkp_page_article .item.jart-metrics .jart-met-n { font-size: 30px; font-weight: 700; color: #141b4d; }
.pkp_page_article .item.jart-metrics .jart-met-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #6a7480; margin-top: 4px; font-weight: 600; }
.pkp_page_article .item.jart-metrics .jart-met-note { font-size: 13px; color: #6a7480; font-style: italic; line-height: 1.5; max-width: 640px; }
.pkp_page_article .item.jart-metrics .jart-met-badges { display: flex; gap: 22px; align-items: center; margin-top: 4px; }

/* Tab block (Sage style) — Abstract / References / Funding / Copyright, directly under Citation Format */
/* Sits in .obj_article_details right after .item.citation, so left/right edges match that block exactly */
.pkp_page_article .obj_article_details > .jart-tabs { margin: 22px 0 8px; }
.pkp_page_article .jart-tabradio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pkp_page_article .jart-tabbar { display: flex; gap: 6px; margin: 0; border-bottom: 1px solid #d9dde3; flex-wrap: wrap; }
.pkp_page_article .jart-tab { cursor: pointer; padding: 12px 20px; font-weight: 700; font-size: 16px; color: #4a5568; background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 4px 4px 0 0; margin-bottom: -1px; user-select: none; transition: color .12s ease, background .12s ease; }
.pkp_page_article .jart-tab:hover { color: #141b4d; }
.pkp_page_article #jarttab-abs:checked ~ .jart-tabbar .jart-tab-abs,
.pkp_page_article #jarttab-ref:checked ~ .jart-tabbar .jart-tab-ref,
.pkp_page_article #jarttab-fund:checked ~ .jart-tabbar .jart-tab-fund,
.pkp_page_article #jarttab-cop:checked ~ .jart-tabbar .jart-tab-cop { color: #141b4d; background: #f5f7fb; border-bottom-color: #141b4d; cursor: default; }
.pkp_page_article .jart-tabpanel { display: none; padding: 22px 2px 6px; }
.pkp_page_article #jarttab-abs:checked ~ .jart-panel-abs,
.pkp_page_article #jarttab-ref:checked ~ .jart-panel-ref,
.pkp_page_article #jarttab-fund:checked ~ .jart-panel-fund,
.pkp_page_article #jarttab-cop:checked ~ .jart-panel-cop { display: block; }
.pkp_page_article .jart-absbody { line-height: 1.6; color: #333; }
.pkp_page_article .jart-absbody p { margin: .55em 0; line-height: 1.6; color: #333; }
.pkp_page_article .jart-refbody { counter-reset: jref; }
.pkp_page_article .jart-refbody p { counter-increment: jref; padding-left: 2em; text-indent: -2em; margin: .55em 0; line-height: 1.55; color: #333; }
.pkp_page_article .jart-refbody p::before { content: counter(jref) ". "; font-weight: 700; color: #141b4d; }
.pkp_page_article .jart-refbody p a { word-break: break-word; }
.pkp_page_article .jart-panel-fund p, .pkp_page_article .jart-panel-cop p { margin: .55em 0; line-height: 1.6; color: #333; max-width: 760px; }

/* Remove the leftover gray separator line under the Abstract tab: the now-empty
   .row (its main_entry content moved into tabs / hidden) still drew a 1px #ddd top+bottom border */
.pkp_page_article .obj_article_details > .row { border-top: 0 !important; border-bottom: 0 !important; }

/* ===== Right sidebar (ALL pages): hover highlight on menu/link items (Sage "Browse journal" style) =====
   Applies to theme-injected cards (.sg-card) AND backend Custom Block Manager blocks (.block_custom). */
.pkp_structure_sidebar .sg-card .content ul,
.pkp_structure_sidebar .block_custom .content ul { margin: 0 -20px !important; padding: 0 !important; list-style: none !important; }
.pkp_structure_sidebar .sg-card .content li,
.pkp_structure_sidebar .block_custom .content li { padding: 0 !important; border-bottom: 0 !important; margin: 0 !important; }
.pkp_structure_sidebar .sg-card .content li a,
.pkp_structure_sidebar .block_custom .content li a {
  display: block !important;
  padding: 11px 20px !important;
  border-left: 3px solid transparent !important;
  color: #1c2b7a !important;
  text-decoration: none !important;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.pkp_structure_sidebar .sg-card .content li a:hover,
.pkp_structure_sidebar .sg-card .content li a:focus,
.pkp_structure_sidebar .block_custom .content li a:hover,
.pkp_structure_sidebar .block_custom .content li a:focus {
  background: #e8f1fd !important;
  border-left-color: #141b4d !important;
  color: #12308f !important;
  text-decoration: underline !important;
}

/* ===== Top-nav dropdowns (About + Admin/user menu): same hover highlight as the sidebar ===== */
.pkp_site_nav_menu .dropdown-menu > li > a,
.pkp_navigation_user .dropdown-menu > li > a {
  display: block !important;
  padding: 12px 22px !important;
  border-left: 3px solid transparent !important;
  color: #1b2a6b !important;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.pkp_site_nav_menu .dropdown-menu > li > a:hover,
.pkp_site_nav_menu .dropdown-menu > li > a:focus,
.pkp_navigation_user .dropdown-menu > li > a:hover,
.pkp_navigation_user .dropdown-menu > li > a:focus {
  background: #e8f1fd !important;
  border-left-color: #141b4d !important;
  color: #12308f !important;
  border-bottom-color: transparent !important;
  text-decoration: none !important;
}

/* Article page sidebar = only Article Info + Related Research; hide the server-rendered
   "Browse journal" Custom Block there (it belongs on non-article pages) */
.pkp_page_article .pkp_structure_sidebar .block_custom { display: none !important; }

/* ===== "Track your research" custom block (author submission dashboard link) ===== */
.pkp_structure_sidebar .block_custom .content p.tyr-desc { color: #4a5568; font-size: 13.5px; line-height: 1.55; margin: 2px 0 14px; padding: 0; }
.pkp_structure_sidebar .block_custom .content a.tyr-btn,
.pkp_structure_sidebar .block_custom .content a.tyr-btn:link,
.pkp_structure_sidebar .block_custom .content a.tyr-btn:visited {
  display: inline-block; background: #141b4d; color: #ffffff !important;
  padding: 10px 18px; border-radius: 3px; font-weight: 700; font-size: 13.5px;
  text-decoration: none !important; border-left: 0 !important;
}
.pkp_structure_sidebar .block_custom .content a.tyr-btn:hover { background: #0d1440; color: #ffffff !important; text-decoration: none !important; }

/* Footer alignment: remove OJS default 62.5px side margin so the footer lines up
   with the page content (only the 1cm margin on .pkp_footer_content should apply) */
.pkp_structure_footer { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; max-width: none !important; }

/* Keep Font Awesome icons in their icon font (the site-wide Catamaran override must not touch them) */
.fa, .fa::before, [class^="fa-"], [class^="fa-"]::before, [class*=" fa-"], [class*=" fa-"]::before { font-family: "FontAwesome" !important; }


/* Brain illustration overhangs from the banner onto the white info card (right) */
.pkp_head_wrapper::after {
  content: "";
  position: absolute;
  z-index: 30;
  pointer-events: none;
  right: max(20px, calc((100% - 1160px) / 2));
  top: -14px;
  width: 215px;
  height: 215px;
  background: url('brain-motif.svg?v=2') center / contain no-repeat;
}
@media (max-width: 900px) { .pkp_head_wrapper::after { display: none; } }

/* cover card rounded corners */
.pkp_head_wrapper::before { border-radius: 12px !important; }

/* footer logo (About column) */
.jichi-fcol-about .jichi-flogo { display:block; width:260px; max-width:100%; height:auto; margin:0 0 16px; }

/* cover fully on dark banner so all 4 rounded corners show (match reference) */
.pkp_structure_head, .pkp_head_wrapper { min-height: 250px !important; }
.pkp_head_wrapper::before { border-radius: 16px !important; }
.pkp_structure_content > .sage-infocard { margin-top: -16px !important; }

/* ==== Info bar integrated INTO the dark banner (follows banner colour) ==== */
.pkp_structure_content > .sage-infocard {
  margin-top: -88px !important;
  margin-bottom: 30px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: relative; z-index: 22;
}
.sage-infocard .sage-pub { color: #ffffff !important; }
.sage-infocard .sage-metrics a { color: #ddcccc !important; text-decoration: none !important; }
.sage-infocard .sage-metrics a:hover { color: #ffffff !important; text-decoration: underline; }
.sage-infocard .sage-metrics b { color: #ff9a9d !important; }
.sage-infocard .sm-sep { color: rgba(255,255,255,.32) !important; }
/* buttons on dark: primary solid white, secondary ghost */
.sage-infocard .sage-btn-navy { background: #ffffff !important; color: #141b4d !important; border: 0 !important; }
.sage-infocard .sage-btn-navy:hover { background: #eef0f5 !important; color: #141b4d !important; }
.sage-infocard .sage-btn-grey { background: transparent !important; color: #ffffff !important; border: 1.5px solid rgba(255,255,255,.55) !important; }
.sage-infocard .sage-btn-grey:hover { background: rgba(255,255,255,.12) !important; color: #ffffff !important; }

/* ==========================================================================
   RESPONSIVE — tablet & phone (added 2026-10-21)
   Appended LAST on purpose: the desktop two-column rules earlier in this file
   use !important, so these overrides must come later and match their
   specificity to win the cascade.
   NOTE: the :has() variants are written as SEPARATE rules, never comma-joined
   with the plain ones — a browser that does not understand :has() would throw
   away the whole selector list and the fix would silently disappear.
   ========================================================================== */

/* ---- 1. Page structure: stack the sidebar under the content ------------- */
@media (max-width: 991px) {
  .pkp_structure_main {
    float: none !important; width: 100% !important; max-width: 100% !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
  .pkp_structure_sidebar {
    float: none !important; width: 100% !important; max-width: 100% !important;
    padding-left: 0 !important; margin-top: 24px !important;
  }
}
/* the same two rules again, at the specificity of the desktop rules they override */
@media (max-width: 991px) {
  .pkp_structure_content:has(.pkp_structure_sidebar) .pkp_structure_main {
    float: none !important; width: 100% !important; max-width: 100% !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
}
@media (max-width: 991px) {
  .pkp_structure_content:has(.pkp_structure_sidebar) .pkp_structure_sidebar {
    float: none !important; width: 100% !important; max-width: 100% !important;
    padding-left: 0 !important; margin-top: 24px !important;
  }
}

/* ---- 2. Banner title: give it room inside the flex header ---------------
   .pkp_head_wrapper is display:flex, so the title block collapses to width:0
   next to the menu button unless it is told to grow.                        */
@media (max-width: 991px) {
  .pkp_head_wrapper { flex-wrap: wrap !important; }
  .pkp_head_wrapper .pkp_site_name_wrapper,
  .pkp_head_wrapper .pkp_site_name {
    flex: 1 1 100% !important; width: auto !important; min-width: 0 !important;
    transform: none !important;
  }
  /* On small screens the theme positions the title absolutely, pins its
     wrapper to 40px and clips the overflow, so a two-line journal name is cut
     off. Put the title back in normal flow and let every box grow.          */
  .pkp_head_wrapper .pkp_site_name { position: static !important; overflow: visible !important; }
  .pkp_head_wrapper .pkp_site_name,
  .pkp_head_wrapper .pkp_site_name_wrapper,
  .pkp_head_wrapper,
  .pkp_structure_head { height: auto !important; max-height: none !important; }
  .pkp_site_name, .pkp_site_name a, .pkp_site_name .is_text {
    white-space: normal !important; overflow-wrap: break-word; display: block !important;
  }
}

/* ---- 3. Info bar: it overlaps the dark banner on desktop (white text on a
   transparent background). On narrow screens it no longer fits over the
   banner, so it carries the banner colour itself and keeps the text legible. */
@media (max-width: 991px) {
  .pkp_structure_content > .sage-infocard {
    margin-top: 0 !important; margin-bottom: 22px !important;
    padding: 14px 16px !important;
    background: linear-gradient(100deg, #05231f 0%, #083b34 30%, #0f5f54 100%) !important;
    flex-wrap: wrap !important; gap: 12px !important; row-gap: 12px !important;
  }
  .sage-infocard .sage-pub { white-space: normal !important; }
  .sage-infocard .sage-metrics {
    flex: 1 1 100% !important; min-width: 0 !important; text-align: left !important;
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
    padding-right: 0 !important;
  }
  .sage-infocard .sage-btns {
    flex: 1 1 100% !important; margin-left: 0 !important; flex-wrap: wrap !important; gap: 10px !important;
  }
  .sage-infocard .sage-btn-grey, .sage-infocard .sage-btn-navy {
    flex: 1 1 140px; text-align: center; white-space: normal !important;
  }
}

/* ---- 4. Phone: compact banner ------------------------------------------- */
@media (max-width: 640px) {
  .pkp_structure_head { min-height: 0 !important; }
  .pkp_head_wrapper { min-height: 0 !important; padding: 18px 0 20px !important; }
  /* The menu button is absolutely pinned to the TITLE WRAPPER's top-left and is
     only hidden from 992px up. Padding the header moves both together, so the
     offset has to go on the title itself for it to clear the button.        */
  .pkp_head_wrapper .pkp_site_name { padding-left: 0 !important; padding-top: 48px !important; }
  .pkp_site_name, .pkp_site_name a, .pkp_site_name .is_text {
    font-size: 23px !important; line-height: 1.22 !important;
  }
  .pkp_head_wrapper .pkp_site_name::after { font-size: 13.5px !important; margin-top: 6px; }
}

/* ---- 5. Wide content never forces the page sideways --------------------- */
@media (max-width: 991px) {
  .pkp_structure_main img,
  .pkp_structure_main iframe,
  .pkp_structure_main video { max-width: 100% !important; height: auto; }
  .pkp_structure_main p, .pkp_structure_main li, .pkp_structure_main td { overflow-wrap: break-word; }
}