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

/* ==========================================================================
  the reference JOURNALS CLONE — home (overrides the Modern17/soft styling above)
   ========================================================================== */
.mlcs-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) ---- */
.mlcs-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);
}
.mlcs-pub { color: #141b4d; font-weight: 700; font-size: 15px; }
.mlcs-metrics { color: #333; font-size: 14.5px; }
.mlcs-btns { margin-left: auto; display: flex; gap: 12px; }
.mlcs-btn-grey, .mlcs-btn-navy { padding: 11px 18px; border-radius: 3px; font-weight: 700; font-size: 13.5px; text-decoration: none !important; white-space: nowrap; }
.mlcs-btn-grey { background: #cbced0; color: #1a1a1a !important; }
.mlcs-btn-navy { background: #141b4d; color: #fff !important; }
.mlcs-btn-grey:hover { background: #b9bdbf; }
.mlcs-btn-navy:hover { background: #0d1440; color:#fff !important; }

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

/* ---- Browse by tabs (radio-hack, no scroll jump) ---- */
.mlcs-browse h2 { color: #141b4d !important; font-size: 26px !important; font-weight: 700 !important; margin: 0 0 10px !important; border: 0 !important; }
.mlcs-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: the reference 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; }  /* the reference 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 (the reference) */
.jsubmit { background: #141b4d !important; color: #fff !important; border-radius: 3px; }
.jsubmit:hover { background: #0d1440 !important; color:#fff !important; }

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

/* Hide OJS's "About the Journal" heading above the custom 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 custom layout) */
.pkp_op_index .current_issue, .page_index_journal .current_issue { display: none !important; }
/* Banner: darker diagonal wedge on the left (the reference detail) */
.pkp_structure_head { background: linear-gradient(100deg,#05231f 0%,#083b34 20%,#0f5f54 52%,#12695c 100%) !important; }

/* ==========================================================================
  the reference PLATFORM TOP BAR (injected above the green banner) + metric line + tags
   ========================================================================== */
.mlcs-topbar { background: #ffffff; border-bottom: 1px solid #e2e2e2; font-family: "Noto Sans", Arial, sans-serif; }
.mlcs-topbar-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 12px 20px 18px; }
.mlcs-logo { color: #141b4d !important; font-size: 24px; font-weight: 400; text-decoration: none !important; white-space: nowrap; letter-spacing: -.3px; }
.mlcs-logo b { font-weight: 800; }
.mlcs-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; }
.mlcs-access { margin-left: auto; font-size: 12.5px; color: #333; max-width: 150px; line-height: 1.35; }
.mlcs-access span { display: block; }
.mlcs-access b { color: #141b4d; }
.mlcs-ico { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #333 !important; font-size: 11.5px; text-decoration: none !important; }
.mlcs-ico:hover { color: #0f5f54 !important; }
.mlcs-topnav { border-top: 1px solid #ececec; background: #fff; }
.mlcs-topnav-inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.mlcs-topnav a { display: inline-block; padding: 12px 0; margin-right: 30px; color: #141b4d !important; font-weight: 600; font-size: 15px; text-decoration: none !important; }
.mlcs-topnav a em { color: #888; font-style: normal; }
.mlcs-topnav a:hover { color: #0f5f54 !important; }
@media (max-width: 900px){ .mlcs-topsearch, .mlcs-access { display: none; } }

/* Metric line as publisher-style underlined links */
.mlcs-metrics a { color: #1a1a1a !important; text-decoration: underline; font-weight: 400; }
.mlcs-metrics a:hover { color: #0f5f54 !important; }
.mlcs-metrics b { font-weight: 700; }
.mlcs-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; }

/* the reference metrics line (underlined navy links) + browse-by article tag */
.mlcs-infocard .mlcs-metrics a { color:#1c2b7a !important; text-decoration:underline; font-size:14.5px; }
.mlcs-infocard .mlcs-metrics a:hover { color:#0d1440 !important; }
.mlcs-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 (the reference: publisher | metrics centered | buttons) */
.mlcs-infocard .mlcs-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, publisher-style) */
.pkp_structure_content > .mlcs-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 (the reference) */
.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%);
  /* Widened 2026-11-11. The box was 150x214 = ratio 0.701 while the cover
     file is 510x637 = 0,801, and background-size:cover CROPS to fill — the sides
     were being cut off. At height 214 the matching width is 172px, so the
     cover is both wider and no longer cropped. */
  width: 172px; 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: 214px !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 > .mlcs-infocard { padding-left: 214px !important; }
@media (max-width: 640px){
  .pkp_head_wrapper::before { display: none; }
  .pkp_head_wrapper .pkp_site_name { padding-left: 0 !important; }
  .pkp_structure_content > .mlcs-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) */
.mlcs-desc .mlcs-homecover { display: none !important; }
.mlcs-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 — publisher-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, the reference 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 custom transform JS finishes,
   with a safety auto-reveal in case JS is slow or disabled.
   ========================================================================== */
.pkp_structure_page { opacity: 0; animation: mlcsReveal .01s linear .5s forwards; }
html.mlcs-ready .pkp_structure_page { opacity: 1 !important; animation: none !important; transition: opacity .16s ease; }
@keyframes mlcsReveal { 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, publisher-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 (the reference 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 the reference-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 > .mlcs-infocard, .mlcs-infocard { padding-top: 24px !important; padding-bottom: 24px !important; }
/* Buttons: clearly bold (ExtraBold 800) */
.mlcs-btn-grey, .mlcs-btn-navy { font-weight: 800 !important; }

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

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

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

/* Final override: compact info-card vertical padding (beats earlier 24px rules) */
.pkp_structure_content > .mlcs-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 > .mlcs-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) — publisher-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 the reference 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 custom 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 the reference 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 (the reference 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 (the reference "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 > .mlcs-infocard { margin-top: -16px !important; }

/* ==== Info bar integrated INTO the dark banner (follows banner colour) ==== */
.pkp_structure_content > .mlcs-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;
}
.mlcs-infocard .mlcs-pub { color: #ffffff !important; }
.mlcs-infocard .mlcs-metrics a { color: #ddcccc !important; text-decoration: none !important; }
.mlcs-infocard .mlcs-metrics a:hover { color: #ffffff !important; text-decoration: underline; }
.mlcs-infocard .mlcs-metrics b { color: #ff9a9d !important; }
.mlcs-infocard .sm-sep { color: rgba(255,255,255,.32) !important; }
/* buttons on dark: primary solid white, secondary ghost */
.mlcs-infocard .mlcs-btn-navy { background: #ffffff !important; color: #141b4d !important; border: 0 !important; }
.mlcs-infocard .mlcs-btn-navy:hover { background: #eef0f5 !important; color: #141b4d !important; }
.mlcs-infocard .mlcs-btn-grey { background: transparent !important; color: #ffffff !important; border: 1.5px solid rgba(255,255,255,.55) !important; }
.mlcs-infocard .mlcs-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 > .mlcs-infocard {
    margin-top: 0 !important; margin-bottom: 22px !important;
    padding: 14px 16px !important;
    background: linear-gradient(100deg, #6b1526 0%, #c8102e 100%) !important;
    flex-wrap: wrap !important; gap: 12px !important; row-gap: 12px !important;
  }
  .mlcs-infocard .mlcs-pub { white-space: normal !important; }
  .mlcs-infocard .mlcs-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;
  }
  .mlcs-infocard .mlcs-btns {
    flex: 1 1 100% !important; margin-left: 0 !important; flex-wrap: wrap !important; gap: 10px !important;
  }
  .mlcs-infocard .mlcs-btn-grey, .mlcs-infocard .mlcs-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; }
}

/* ==========================================================================
   TYPOGRAPHY SCALE (added 2026-11-04)
   The stylesheet above grew 20+ ad-hoc font sizes. This block replaces them
   with ONE 7-step scale anchored on a 16px body — the size academic
   publishers use for article text, and the browser default.

   Three measured defects are corrected:
     a. body text was 14px (readers had to zoom)
     b. article prose ran ~120 characters per line (readable band is 55-80)
     c. the small uppercase metadata labels were #777 on white = 4.48:1,
        just under the 4.5:1 WCAG AA minimum, at only 11.5px

   NOT changed on purpose: the small uppercase "eyebrow" labels (Abstract,
   Published, Issue) stay smaller than body text. That is a deliberate
   publisher convention — they read as labels, not headings, because they are
   uppercase, bold and letterspaced. They are only made legible, not promoted.

   Appended last so it out-cascades the rules above at equal specificity.
   --------------------------------------------------------------------------
     11.5px  retired — nothing should be smaller than 12.5px
     12.5px  micro: uppercase eyebrow labels
     13px    small print: captions, buttons, field values
     14.5px  secondary: author lists, meta, sidebar links, navigation
     16px    BODY / abstract / article text            <- anchor
     19px    h3 sub-heading, sidebar card title
     23px    h2 section heading
     28px    h1 page / article title
     34px    banner display title
   ========================================================================== */

:root {
  --t-micro: 12.5px;  --t-small: 13px;  --t-meta: 14.5px;  --t-body: 16px;
  --t-h3: 19px;       --t-h2: 23px;     --t-h1: 28px;      --t-display: 34px;
  --t-label-ink: #5f6a75;   /* 5.52:1 on white — replaces #777 at 4.48:1 */
}

/* ---- 1. Body -------------------------------------------------------------- */
body,
.pkp_structure_main,
.pkp_structure_main p,
.pkp_structure_main li,
.pkp_structure_main td,
.pkp_structure_main dd { font-size: var(--t-body); line-height: 1.6; }

/* ---- 2. Reading measure --------------------------------------------------- */
/* Caps the article's running text only, never the grids, tables or cards. */
.obj_article_details .item.abstract p,
.obj_article_details .jart-absbody p,
.obj_article_details .main_entry > p { max-width: 55ch; }

/* ---- 3. Heading scale ----------------------------------------------------- */
.pkp_structure_main h1, .page_article h1, .page h1 { font-size: var(--t-h1); line-height: 1.2;  font-weight: 700; }
.pkp_structure_main h2:not(.label):not(.title),
.main_entry h2:not(.label)                        { font-size: var(--t-h2); line-height: 1.3;  font-weight: 700; }
.pkp_structure_main h3:not(.label)                { font-size: var(--t-h3); line-height: 1.35; font-weight: 700; }
.pkp_structure_main h4:not(.label)                { font-size: var(--t-body); line-height: 1.4; font-weight: 700; }

/* ---- 4. Eyebrow labels: keep the convention, fix size and contrast -------- */
.obj_article_details .label,
.page_article .label,
.obj_article_details .citation_formats_button.label {
  font-size: var(--t-micro) !important;
  line-height: 1.45 !important;
  letter-spacing: .05em;
}
/* These two already existed with !important at a HIGHER specificity, so the
   override has to repeat their exact selector shape to win. */
.pkp_page_article .entry_details .item .label {
  font-size: var(--t-micro) !important;
  color: var(--t-label-ink) !important;
}
.pkp_structure_sidebar .pkp_block > .title:not(.pkp_screen_reader) {
  font-size: var(--t-h3) !important; line-height: 1.3 !important;
}

/* ---- 5. Secondary text ---------------------------------------------------- */
.obj_article_details .authors, .obj_article_details .author,
.pkp_structure_main .date_published, .obj_article_summary .meta {
  font-size: var(--t-meta); line-height: 1.5;
}

/* ---- 6. Sidebar & navigation ---------------------------------------------- */
.pkp_structure_sidebar .pkp_block .title { font-size: var(--t-h3); line-height: 1.3; font-weight: 700; }
.pkp_structure_sidebar .pkp_block a,
.pkp_structure_sidebar .pkp_block li { font-size: var(--t-meta); line-height: 1.55; }
.pkp_navigation_primary a { font-size: var(--t-meta); }

/* ---- 7. Banner ------------------------------------------------------------ */
.pkp_site_name, .pkp_site_name a, .pkp_site_name .is_text {
  font-size: var(--t-display) !important; line-height: 1.18 !important;
}
.pkp_head_wrapper .pkp_site_name::after { font-size: var(--t-meta) !important; }
.mlcs-pub, .mlcs-metrics { font-size: var(--t-meta); }
.mlcs-btn-grey, .mlcs-btn-navy { font-size: var(--t-small); font-weight: 700 !important; }

/* ---- 8. Small print ------------------------------------------------------- */
.pkp_structure_main figcaption, .pkp_structure_main caption,
.pkp_structure_main small, .pkp_structure_main .galley_link {
  font-size: var(--t-small); line-height: 1.45;
}

/* ---- 9. Tablet & phone: step the display sizes down, keep body at 16 ------ */
@media (max-width: 991px) {
  :root { --t-display: 28px; --t-h1: 25px; --t-h2: 21px; --t-h3: 18px; }
}
@media (max-width: 640px) {
  :root { --t-display: 23px; --t-h1: 22px; --t-h2: 19px; --t-h3: 17px; }
  .obj_article_details .item.abstract p,
  .obj_article_details .jart-absbody p,
  .obj_article_details .main_entry > p { max-width: none; }
}

/* ---- 10. Custom components snapped onto the same scale -------------------
   The jart-* (article tabs), ai-* (article info card) and sg-* (sidebar card)
   components had grown their own sizes: 11, 12, 13, 13.5, 14, 14.5, 17px.
   They are mapped onto the 7 steps so the page reads as one system.         */
.pkp_page_article .jart-authors { font-size: var(--t-body) !important; line-height: 1.5 !important; }
.pkp_page_article .jart-affil   { font-size: var(--t-meta) !important; }
.pkp_page_article .jart-authors sup,
.pkp_page_article .jart-affil sup { font-size: var(--t-micro) !important; }
.pkp_page_article .jart-dates,
.pkp_page_article .jart-doi,
.pkp_page_article .jart-lic,
.pkp_page_article .jart-lic a,
.pkp_page_article .jart-full a,
.pkp_page_article .jart-sel,
.pkp_page_article .jart-sel option,
.pkp_page_article .jart-copy,
.pkp_page_article .jart-citelbl { font-size: var(--t-meta) !important; }
.pkp_page_article .jart-cc,
.pkp_page_article .jart-full-lbl,
.pkp_page_article .jart-metrics .jart-met-lbl { font-size: var(--t-micro) !important; }
.pkp_page_article .jart-btn,
.pkp_page_article .jart-ref,
.pkp_page_article .jart-meta,
.pkp_page_article .jart-legal,
.pkp_page_article .jart-metrics .jart-met-note { font-size: var(--t-small) !important; }
.pkp_page_article .jart-tab { font-size: var(--t-meta) !important; }
.pkp_structure_sidebar .sg-artinfo .ai-row,
.pkp_structure_sidebar .sg-artinfo .ai-stats .ai-stat-ico,
.pkp_structure_sidebar .sg-sub { font-size: var(--t-meta) !important; }
.pkp_structure_sidebar .sg-artinfo .ai-metrics-lbl,
.pkp_structure_sidebar .sg-artinfo .ai-metrics-note { font-size: var(--t-micro) !important; }
/* the last two strays: citation-format list and the sidebar stat numbers */
.pkp_page_article .citation_formats_styles a { font-size: var(--t-small) !important; }
.pkp_structure_sidebar .sg-artinfo .ai-stat-n { font-size: var(--t-meta) !important; }

/* ---- 11. Homepage "Browse by" cards snapped onto the scale ---------------- */
.mlcs-browse h2            { font-size: var(--t-h2) !important; }
.sabtn, .sanav label       { font-size: var(--t-meta) !important; }
.saart h4                  { font-size: var(--t-body) !important; line-height: 1.35; }
.saauth                    { font-size: var(--t-meta) !important; }
.salinks a                 { font-size: var(--t-small) !important; }
.saart .satag, .satag      { font-size: var(--t-micro) !important; }
.mlcs-desc .read_more, .pkp_structure_main a.read_more { font-size: var(--t-meta) !important; }
/* the article title was pinned at 28px !important, so it ignored the mobile step */
.pkp_page_article .obj_article_details .page_title { font-size: var(--t-h1) !important; line-height: 1.22 !important; }
.pkp_op_archive .page_issue_archive > h1 { font-size: var(--t-h1) !important; }

/* ==========================================================================
   MOTION (added 2026-11-04)
   Two things only: one easing system for the transitions that already exist,
   and full support for the reader's "reduce motion" setting.
   No JavaScript and no animation library — every transition below was already
   in the CSS; this block only changes HOW it eases, not WHAT moves.

   The plugin injects its inline <style> AFTER this stylesheet, so the easing
   tokens need !important to reach the .ja-*, .jm-* and .mlcs-* components.
   ========================================================================== */

:root {
  /* colour / opacity: symmetric soft curve */
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  /* movement / shadow: quick start, gentle settle — reads as "soft" */
  --ease-out:  cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 160ms;   /* hover colour */
  --dur-soft: 220ms;   /* lift, shadow, transform */
}

/* ---- 1. Colour and background: soft symmetric easing --------------------- */
a, button, input, select, textarea,
.mlcs-btn-grey, .mlcs-btn-navy, .sabtn, .sanav label,
.jm-tab, .jm-idx a, .ja-cl-title, .ja-tb-go,
.pkp_page_article .jart-tab, .pkp_page_article .jart-btn,
.pkp_navigation_primary a, .pkp_block a {
  transition-timing-function: var(--ease-soft) !important;
  transition-duration: var(--dur-fast) !important;
}

/* ---- 2. Movement and shadow: gentle settle ------------------------------- */
.ja-card, .ja-cv-cover, .ja-vol,
.mlcs-infocard, .jm-stat, .jm-chart,
.mlcs-auth-right a[id^=openid-provider-] > div,
.mlcs-auth-left button[type=submit] {
  transition-timing-function: var(--ease-out) !important;
  transition-duration: var(--dur-soft) !important;
}

/* ---- 3. In-page jumps glide instead of snapping -------------------------- */
html { scroll-behavior: smooth; }

/* ==========================================================================
   4. REDUCED MOTION — honours the reader's operating-system setting.
   People with vestibular disorders, migraine or photosensitive epilepsy turn
   this on; WCAG 2.3.3 expects motion to stop. This block must stay LAST.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }
  /* The easing block above sets transition-duration with !important at class
     specificity, and among !important declarations the HIGHER specificity
     wins — so the universal reset alone would NOT stop it. These two lists
     repeat those selectors verbatim so the reduction actually takes effect. */
  a, button, input, select, textarea,
  .mlcs-btn-grey, .mlcs-btn-navy, .sabtn, .sanav label,
  .jm-tab, .jm-idx a, .ja-cl-title, .ja-tb-go,
  .pkp_page_article .jart-tab, .pkp_page_article .jart-btn,
  .pkp_navigation_primary a, .pkp_block a,
  .ja-card, .ja-cv-cover, .ja-vol,
  .mlcs-infocard, .jm-stat, .jm-chart,
  .mlcs-auth-right a[id^=openid-provider-] > div,
  .mlcs-auth-left button[type=submit] {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    animation-duration: .01ms !important;
  }
  /* the anti-flash reveal must not depend on an animation that is now disabled */
  .pkp_structure_page { opacity: 1 !important; animation: none !important; }
  /* hover lifts become a plain border change, no travel */
  .ja-card:hover, .ja-cv-item:hover .ja-cv-cover { transform: none !important; }
}

/* ==========================================================================
   MENU BAR — GROUPED DROPDOWNS + INLINE SEARCH (added 2026-11-05)
   The menu row now holds: three grouped dropdowns, a journal search field, and
   the two action links, separated by hairline rules.
   The grouping itself is OJS data, not CSS — Settings → Website → Navigation
   Menus. The accent is MLCS red, not the reference's orange.
   ========================================================================== */

.mlcs-infocard .mlcs-nav {
  display: flex; align-items: stretch; gap: 0;
  border-bottom: 1px solid #e2e5ea;
  margin: 0 -26px 12px; padding: 0;
}
.mlcs-infocard .mlcs-nav .pkp_navigation_primary { flex: 0 0 auto; padding-left: 26px !important; }
.mlcs-infocard .mlcs-nav .pkp_navigation_primary > li { position: relative; }

/* chevron on the three group headers */
.mlcs-infocard .mlcs-nav .pkp_navigation_primary > li:has(ul) > a::after {
  content: ""; display: inline-block; margin-left: 7px; vertical-align: 2px;
  width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

/* dropdown panel */
.mlcs-infocard .mlcs-nav .pkp_navigation_primary > li > ul {
  position: absolute; left: 0; top: 100%; z-index: 60;
  min-width: 232px; padding: 8px 0 !important; margin: 0 !important;
  background: #fff !important; border: 1px solid #dfe3ea !important;
  box-shadow: 0 10px 26px rgba(20,27,77,.18) !important; list-style: none;
}
.mlcs-infocard .mlcs-nav .pkp_navigation_primary > li > ul > li > a {
  display: block; padding: 9px 20px !important; font-size: 14.5px; font-weight: 400;
  color: #1a1a2e !important; border: 0 !important; white-space: nowrap;
}
.mlcs-infocard .mlcs-nav .pkp_navigation_primary > li > ul > li > a:hover {
  background: #f4f6fa; color: #c8102e !important;
  box-shadow: inset 0 -2px 0 #c8102e;          /* the reference's underline, in brand red */
}

/* ---- inline journal search ----------------------------------------------- */
.mlcs-navsearch {
  flex: 1 1 auto; display: flex; align-items: center; min-width: 0;
  border-left: 1px solid #e2e5ea; margin: 0 !important;
}
.mlcs-navsearch input[type=search] {
  flex: 1 1 auto; min-width: 0; height: 44px;
  border: 0 !important; background: transparent !important;
  padding: 0 14px !important; font-size: 14.5px; color: #1a1a2e;
  box-shadow: none !important; outline: none;
}
.mlcs-navsearch input[type=search]::placeholder { color: #6a7480; }
.mlcs-navsearch button {
  flex: 0 0 auto; width: 44px; height: 44px; border: 0;
  background: #141b4d; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.mlcs-navsearch button:hover { background: #c8102e; }

/* ---- action links on the right -------------------------------------------- */
.mlcs-nav .mlcs-navactions {
  flex: 0 0 auto; display: flex; align-items: stretch; margin: 0 !important;
}
.mlcs-nav .mlcs-navactions > a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 20px !important; height: 44px;
  background: transparent !important; border: 0 !important;
  border-left: 1px solid #e2e5ea !important; border-radius: 0 !important;
  color: #141b4d !important; font-size: 14.5px; font-weight: 700;
  white-space: nowrap;
}
.mlcs-nav .mlcs-navactions > a::after { content: "\2197"; font-size: 14px; line-height: 1; }
.mlcs-nav .mlcs-navactions > a:hover { background: #f4f6fa !important; color: #c8102e !important; }

/* Search moved into the bar, so the duplicate icon in the top strip goes. */
.pkp_search.pkp_search_desktop { display: none !important; }

@media (max-width: 991px) {
  /* menu returns to the hamburger here; bar extras are not rendered */
  .pkp_search.pkp_search_desktop { display: inline-block !important; }
}

/* ==========================================================================
   MENU BAR AS ITS OWN STRIP (added 2026-11-05)
   The menu was living inside the red masthead card. Now that it carries the
   site's NAVIGATION it is a structural element, so it sits on its own
   full-bleed strip between the banner and the content — the arrangement in the
   reference. The identity line (accreditation / indexed in / ISSN) stays in
   the card inside the red, which is where that information belongs.
   Measured trade-off: header-to-content was 325px with the menu inside and is
   ~334px with it outside — the change is about hierarchy, not space.
   ========================================================================== */

.mlcs-menubar {
  /* It lives inside the content wrapper (so it can follow the card), and is
     stretched back out to the full viewport width from there. */
  /* exact edge-to-edge margins are set by the theme JS from clientWidth;
     100vw is deliberately avoided because it counts the scrollbar */
  margin-bottom: 26px;
  background: #ffffff;
  border-top: 1px solid #dfe3ea;
  border-bottom: 1px solid #dfe3ea;
  position: relative; z-index: 30;
}
.mlcs-menubar-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: stretch; gap: 0;
}

/* the groups */
.mlcs-menubar .pkp_navigation_primary {
  display: flex !important; flex-wrap: nowrap; align-items: center;
  flex: 0 0 auto; gap: 0;
  margin: 0 !important; padding: 0 !important;
  background: transparent !important; border: 0 !important; list-style: none;
}
.mlcs-menubar .pkp_navigation_primary > li { position: relative; margin: 0 !important; border: 0 !important; }
.mlcs-menubar .pkp_navigation_primary > li > a {
  display: flex; align-items: center; height: 48px;
  padding: 0 16px !important; font-size: 15px; font-weight: 700;
  color: #141b4d !important; text-decoration: none !important;
  border: 0 !important; border-bottom: 3px solid transparent !important;
  white-space: nowrap;
}
.mlcs-menubar .pkp_navigation_primary > li > a:hover,
.mlcs-menubar .pkp_navigation_primary > li > a:focus {
  color: #c8102e !important; border-bottom-color: #c8102e !important;
}
.mlcs-menubar .pkp_navigation_primary > li:has(ul) > a::after {
  content: ""; margin-left: 8px; width: 7px; height: 7px; flex: 0 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

/* dropdown panels */
.mlcs-menubar .pkp_navigation_primary > li > ul {
  position: absolute; left: 0; top: 100%; z-index: 80;
  min-width: 236px; padding: 8px 0 !important; margin: 0 !important;
  background: #fff !important; border: 1px solid #dfe3ea !important;
  box-shadow: 0 12px 28px rgba(20,27,77,.18) !important; list-style: none;
}
.mlcs-menubar .pkp_navigation_primary > li > ul > li > a {
  display: block; padding: 10px 20px !important; font-size: 14.5px; font-weight: 400;
  color: #1a1a2e !important; border: 0 !important; white-space: nowrap;
}
.mlcs-menubar .pkp_navigation_primary > li > ul > li > a:hover {
  background: #f4f6fa; color: #c8102e !important; box-shadow: inset 0 -2px 0 #c8102e;
}

/* search */
.mlcs-menubar .mlcs-navsearch {
  flex: 1 1 auto; display: flex; align-items: center; min-width: 0;
  border-left: 1px solid #e2e5ea; margin: 0 !important;
}
.mlcs-menubar .mlcs-navsearch input[type=search] {
  flex: 1 1 auto; min-width: 0; height: 48px;
  border: 0 !important; background: transparent !important;
  padding: 0 14px !important; font-size: 14.5px; color: #1a1a2e;
  box-shadow: none !important; outline: none;
}
.mlcs-menubar .mlcs-navsearch input[type=search]::placeholder { color: #6a7480; }
.mlcs-menubar .mlcs-navsearch button {
  flex: 0 0 auto; width: 48px; height: 48px; border: 0;
  background: #141b4d; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.mlcs-menubar .mlcs-navsearch button:hover { background: #c8102e; }

/* right-hand actions */
.mlcs-menubar .mlcs-navactions { flex: 0 0 auto; display: flex; align-items: stretch; margin: 0 !important; }
.mlcs-menubar .mlcs-navactions > a {
  display: inline-flex; align-items: center; gap: 7px; height: 48px;
  padding: 0 18px !important;
  background: transparent !important; border: 0 !important;
  border-left: 1px solid #e2e5ea !important; border-radius: 0 !important;
  color: #141b4d !important; font-size: 14.5px; font-weight: 700; white-space: nowrap;
}
.mlcs-menubar .mlcs-navactions > a::after { content: "\2197"; font-size: 14px; line-height: 1; }
.mlcs-menubar .mlcs-navactions > a:hover { background: #f4f6fa !important; color: #c8102e !important; }

/* the card is a single row again */
.mlcs-infocard .mlcs-nav, .mlcs-infocard .mlcs-row2 { display: contents; }

/* ==========================================================================
   DROPDOWN POSITION FIX (added 2026-11-05)
   The theme opens these panels with Bootstrap + Popper.js, which positions the
   element by writing `position:absolute; inset:0 auto auto 0` plus a
   `transform: translate3d(x,y,0)` inline. The bar's own `top:100%` was then
   ADDED to Popper's translate, so the panel opened roughly one bar-height too
   far down — exactly the gap in the screenshot.
   Popper's three outputs are neutralised so the panel is placed by the rules
   here alone: directly under its menu item, flush left with it.
   ========================================================================== */

.mlcs-menubar .pkp_navigation_primary > li > ul.dropdown-menu,
.mlcs-menubar .pkp_navigation_primary > li > ul {
  position: absolute !important;
  inset: auto auto auto 0 !important;   /* clears Popper's inset */
  top: 100% !important;
  left: 0 !important;
  transform: none !important;           /* clears Popper's translate3d */
  margin: 0 !important;
  will-change: auto !important;
}

/* ==========================================================================
   MENU BAR SITS FLUSH UNDER THE RESTORED BANNER (added 2026-11-06)
   With the 2026-10-21 banner back, the identity card is pulled up INSIDE the
   red and its bottom margin (measured 30px) was left behind as a white gap
   between the banner and the menu bar. The bar is pulled back by exactly that
   margin so the two strips meet, which is how the reference lays them out.
   Spacing below the bar is unchanged: .mlcs-menubar's own 26px.
   ========================================================================== */

.mlcs-menubar { margin-top: -30px; }

@media (max-width: 991px) {
  /* the bar is not built at all below 992px — nothing to pull */
  .mlcs-menubar { margin-top: 0; }
}

/* ==========================================================================
   BANNER BRIGHTENED + CONVENTIONAL DROPDOWN CARET (added 2026-11-06)

   1. COLOUR. The restored banner ran #0b0a0c -> #161114 -> #1e1417 -> #0a090b,
      which is near-black: the brand red only showed as a faint glow. The same
      four-stop rhythm is kept (dark at both ends, bright through the middle so
      the brain motif on the far right stays readable) but lifted into the real
      brand red.
      Contrast re-checked against the BRIGHTEST stop #c8102e, the worst case for
      light text — two values failed there and were corrected:
        white title ................ 5.89  pass
        metrics link #ddcccc ....... 3.81  FAIL -> #ffffff = 5.89
        accent #ff9a9d ............. 3.82  FAIL -> #ffe6e7 = 4.97
      The accent keeps its own identity through weight (it is <b>), not hue.

   2. CARET. The dropdown indicator was a 7x7 box with two 2px borders rotated
      45 degrees. At that size the mitred corners read as a thick bent arrow
      rather than a caret. Replaced with the conventional chevron, drawn as an
      SVG mask so it still inherits the link colour (navy, red on hover) and
      stays crisp at any zoom. It flips when the menu is open — no transition,
      so reduced-motion is unaffected.
      The trigger is matched on [data-toggle="dropdown"], which the theme puts
      on every dropdown link, rather than on :has(ul) — same result, and it
      works in browsers without :has().
   ========================================================================== */

.pkp_structure_head {
  background-color: #8e1226 !important;
  background-image:
    radial-gradient(at 82% 26%, rgba(255,120,128,.20), rgba(0,0,0,0) 55%),
    linear-gradient(120deg, #6a0f1e 0%, #96122a 42%, #c8102e 70%, #7d1020 100%) !important;
}

/* the two failing values, corrected */
.mlcs-infocard .mlcs-metrics a { color: #ffffff !important; }
.mlcs-infocard .mlcs-metrics b { color: #ffe6e7 !important; }
/* separator and the outlined button need a touch more presence on the lighter ground */
.mlcs-infocard .sm-sep { color: rgba(255,255,255,.45) !important; }
.mlcs-infocard .mlcs-btn-grey { border-color: rgba(255,255,255,.75) !important; }

/* ---- dropdown caret ------------------------------------------------------ */
/* This rule replaces the old rotated-square chevron outright — it is more
   specific (an attribute beats the :has(ul) element selector), so no separate
   neutralising rule is needed. An earlier attempt at one carried
   `transform: none !important` and silently blocked the flip below. */
.mlcs-menubar .pkp_navigation_primary > li > a[data-toggle="dropdown"]::after {
  content: "";
  flex: 0 0 auto;
  margin-left: 8px;
  width: 11px; height: 11px;
  border: 0 !important;
  transform: none;              /* clears the old translateY/rotate(45deg) */
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.2 5.8 L8 10.6 L12.8 5.8' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 11px 11px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.2 5.8 L8 10.6 L12.8 5.8' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 11px 11px no-repeat;
}

.mlcs-menubar .pkp_navigation_primary > li > a[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* ---- mobile card follows the brightened banner --------------------------
   Below 992px the identity card drops out of the banner and carries the
   banner colour itself. It still held the pre-brightening gradient, which
   now reads as a darker block seamed onto a lighter banner, so it is given
   the banner's own gradient and the two read as one piece. */
@media (max-width: 991px) {
  .pkp_structure_content > .mlcs-infocard {
    background:
      radial-gradient(at 82% 26%, rgba(255,120,128,.20), rgba(0,0,0,0) 55%),
      linear-gradient(120deg, #6a0f1e 0%, #96122a 42%, #c8102e 70%, #7d1020 100%) !important;
  }
}

/* ==========================================================================
   BANNER COVER — SQUARE CORNERS (added 2026-11-06)
   Two earlier rules rounded the cover in the banner: 12px, then 16px which
   won. The journal cover is a printed-object motif, and rounding its corners
   made it read as a UI card instead. Set to 0 so all four corners are square.
   The drop shadow is kept — it is what lifts the cover off the banner.
   Only the pseudo-element is touched; the cover FILE itself has square
   corners already, the curve was purely CSS clipping.
   ========================================================================== */

.pkp_head_wrapper::before { border-radius: 0 !important; }

/* ==========================================================================
   BANNER — COLOURS TAKEN FROM THE COVER FILE (added 2026-11-09)
   "warna banner merahnya terlalu gelap ... sesuai dengan warna dasar cover,
   ada yang berwarna kuning."

   The palette is not picked by eye. mlcs-cover-v5.png was sampled pixel by
   pixel (32,000 samples, grouped by hue and lightness):
       gold, brightest 10% ...... #e4b16d
       red,  brightest 30% ...... #e22f32
       red,  mean ............... #af282d
       ground, darkest 40% ...... #0b060a
   So the cover really does carry a gold, and its red is brighter than the
   #c8102e the banner was using. Both now appear in the banner.

   What changed, and why it is not simply "the cover red everywhere":
   white text on the cover's #e22f32 scores 4.48, and 3.93 once the gold wash
   is over it — both below the 4.5 needed. The bright red and the gold are
   therefore laid in as two soft ellipses on the MOTIF side, where no text
   sits, over a field that stays text-safe:

       field, left  #9c1d26 ... white 8.02   accent #ffe6e7 6.77
       field, mid   #b31f2b ... white 6.67   accent #ffe6e7 5.63
       field, right #c8102e ... white 5.88   accent #ffe6e7 4.97
       brightest composite (field + 45% cover red + 18% cover gold)
                    #d7383b ... white 4.65   <- the buttons sit here

   The dark end rose from #6a0f1e to #9c1d26 and the far end no longer falls
   back to #7d1020, which is what made the old banner read as dark.
   Alpha values were solved, not guessed: at 55%/18% the composite drops to
   4.53 and at 45%/22% to 4.50 — both fail, so 45%/18% is the brightest pair
   that still clears the threshold.
   ========================================================================== */

.pkp_structure_head {
  background-color: #b31f2b !important;
  background-image:
    /* cover gold — a warm wash over the brain motif */
    radial-gradient(ellipse 44% 150% at 86% 40%, rgba(228,177,109,.18), rgba(228,177,109,0) 70%),
    /* the cover's own brightest red, kept to the motif side */
    radial-gradient(ellipse 50% 165% at 88% 52%, rgba(226,47,50,.45), rgba(226,47,50,0) 72%),
    linear-gradient(118deg, #9c1d26 0%, #b31f2b 48%, #c8102e 100%) !important;
}

/* the mobile card carries the banner colour, so it follows it here too */
@media (max-width: 991px) {
  .pkp_structure_content > .mlcs-infocard {
    background:
      radial-gradient(ellipse 44% 150% at 86% 40%, rgba(228,177,109,.18), rgba(228,177,109,0) 70%),
      radial-gradient(ellipse 50% 165% at 88% 52%, rgba(226,47,50,.45), rgba(226,47,50,0) 72%),
      linear-gradient(118deg, #9c1d26 0%, #b31f2b 48%, #c8102e 100%) !important;
  }
}