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

/* ================================================================
   Engineering Journal (EJ) Theme — main.css
   STAGE 2: restyles the OJS 3.5 default theme markup.

   Every selector below was verified against the real rendered
   HTML of this OJS 3.5.0.5 install. No template overrides — the
   default theme supplies all markup, this file only restyles it.
   ================================================================ */

:root {
  --ej-maroon: #8C1538;
  --ej-dark:   #5C0D24;
  --ej-darker: #3A0818;
  --ej-cream:  #FDF5F7;
  --ej-gold:       #C9A84C;
  --ej-gold-light: #E8C96B;
  /* Chulalongkorn corporate identity */
  --chula-pink:       #DE5CBE;
  --chula-pink-light: #F8E1EA;

  --ej-gray:      #6B7280;
  --ej-text:   #111827;
  --ej-border: #EAECF0;
  --ej-radius: 10px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.04);
  --shadow-lg: 0 4px 16px rgba(0,0,0,.06), 0 20px 52px rgba(140,21,56,.13);
  --font-head: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── BASE TYPOGRAPHY ─────────────────────────────────────────── */

body {
  font-family: var(--font-body);
  color: var(--ej-text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.page_title {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
}

a { color: var(--ej-maroon); }
a:hover, a:focus { color: var(--ej-dark); }

/* ── TOP BAR ─────────────────────────────────────────────────────
   Injected with CSS since we add no markup. Edit the `content`
   string to change what it says.
   ─────────────────────────────────────────────────────────────── */

body::before {
  content: "Faculty of Engineering, Chulalongkorn University  ·  ISSN 0125-8281  ·  Open Access";
  display: block;
  background: var(--ej-maroon);
  color: rgba(255,255,255,.88);
  font-family: var(--font-body);
  font-size: .71rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-align: center;
  padding: 8px 24px;
}

/* ── SITE HEADER ─────────────────────────────────────────────── */

/* position + z-index so nav dropdowns paint ABOVE the hero.
   Without this they open behind it and appear broken. */
.pkp_structure_head {
  position: relative;
  z-index: 900;
  background: #fff;
  border-bottom: 1px solid var(--ej-border);
  box-shadow: 0 2px 20px rgba(0,0,0,.05);
}

/* Full-bleed header */
.pkp_head_wrapper {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 48px;
}

/* Journal name — text-based, no logo image.
   inline-block + padding gives it a real hit area; as a plain
   inline link the clickable region was only the glyphs themselves. */
.pkp_site_name .is_text,
.pkp_site_name a.is_text {
  display: inline-block;
  position: relative;
  z-index: 3;
  padding: 10px 4px;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ej-maroon);
  letter-spacing: -.03em;
  line-height: 1.15;
  text-decoration: none;
}
.pkp_site_name .is_text:hover,
.pkp_site_name .is_text:focus { color: var(--ej-dark); }

/* Nothing should sit on top of the link and swallow the clicks */
.pkp_site_name_wrapper { position: relative; z-index: 2; }

/* ── PRIMARY NAVIGATION ──────────────────────────────────────── */

/* The default theme paints this bar blue — override it.
   !important is used through this block because we are competing
   with the parent theme's own selectors, not our own. */
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper,
.pkp_site_nav_menu,
ul#navigationPrimary,
ul#navigationPrimary > li {
  background: transparent !important;
  background-color: transparent !important;
}

.pkp_navigation_primary_row {
  border-top: 1px solid var(--ej-border);
  background: #fff !important;
}

/* The wrapper must fill the bar, otherwise the nav shrinks to fit
   its items and "push right" has nothing to push against. */
.pkp_navigation_primary_row,
.pkp_site_nav_menu .pkp_navigation_primary_wrapper {
  display: block;
  width: 100%;
}

/* Nav as a flex row so one item can be pushed to the far right */
.pkp_site_nav_menu ul#navigationPrimary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Push "Submit a Paper" to the right edge.
   The :has() rule targets the submissions link precisely; the
   :last-child rule above it is the fallback for older browsers. */
.pkp_site_nav_menu ul#navigationPrimary > li:last-child { margin-left: auto; }
.pkp_site_nav_menu ul#navigationPrimary > li:has(> a[href*="/about/submissions"]) {
  margin-left: auto;
}

/* Built-in search button removed — add "Search" as a normal
   navigation menu item in OJS instead. */
.pkp_navigation_search_wrapper { display: none !important; }

.pkp_site_nav_menu ul#navigationPrimary > li > a {
  font-family: var(--font-head);
  font-size: .855rem;
  font-weight: 600;
  color: #374151 !important;
  background: transparent !important;
  padding: 13px 20px;
  border-bottom: 3px solid transparent;
  letter-spacing: .01em;
  transition: color .2s, border-color .2s, background .2s;
}

.pkp_site_nav_menu ul#navigationPrimary > li > a:hover,
.pkp_site_nav_menu ul#navigationPrimary > li > a:focus,
.pkp_site_nav_menu ul#navigationPrimary > li:hover > a,
.pkp_site_nav_menu ul#navigationPrimary > li.current > a {
  color: var(--ej-maroon) !important;
  border-bottom-color: var(--chula-pink);
  background: var(--chula-pink-light) !important;
}

/* "Submit a Paper" rendered as a button.
   Matched by its href, not its position, so reordering the menu
   or adding items cannot transfer the button styling elsewhere. */
.pkp_site_nav_menu ul#navigationPrimary > li > a[href*="/about/submissions"] {
  background: var(--ej-maroon) !important;
  color: #fff !important;
  border-radius: 8px;
  border-bottom-color: transparent;
  padding: 10px 20px;
  margin: 4px 0 4px 12px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(140,21,56,.28);
}
.pkp_site_nav_menu ul#navigationPrimary > li > a[href*="/about/submissions"]:hover,
.pkp_site_nav_menu ul#navigationPrimary > li > a[href*="/about/submissions"]:focus {
  background: var(--ej-dark) !important;
  color: #fff !important;
  border-bottom-color: transparent;
  box-shadow: 0 4px 14px rgba(140,21,56,.36);
}

/* ── DROPDOWN PANELS ─────────────────────────────────────────────
   z-index must clear the hero, which is positioned and later in
   the DOM. Without it the menu opens behind the hero.
   ─────────────────────────────────────────────────────────────── */
.pkp_site_nav_menu ul#navigationPrimary > li { position: relative; }

.pkp_site_nav_menu ul#navigationPrimary > li > ul {
  z-index: 1000;
  min-width: 220px;
  border: 1px solid var(--ej-border);
  border-top: 3px solid var(--ej-maroon);
  border-radius: 0 0 8px 8px;
  box-shadow: var(--shadow-lg);
  background: #fff !important;
  padding: 6px 0;
}

.pkp_site_nav_menu ul#navigationPrimary > li > ul > li {
  background: transparent !important;
}

.pkp_site_nav_menu ul#navigationPrimary > li > ul > li > a {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 500;
  color: #374151 !important;
  background: transparent !important;
  padding: 9px 18px;
  white-space: nowrap;
  /* The parent theme marks the hovered item with a blue bar.
     Reserve the space here and recolour it below. */
  border-left: 3px solid transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ...and kill it if it is drawn as a pseudo-element instead */
.pkp_site_nav_menu ul#navigationPrimary > li > ul > li > a::before,
.pkp_site_nav_menu ul#navigationPrimary > li > ul > li > a::after,
.pkp_site_nav_menu ul#navigationPrimary > li > ul > li::before,
.pkp_site_nav_menu ul#navigationPrimary > li > ul > li::after {
  display: none !important;
}

.pkp_site_nav_menu ul#navigationPrimary > li > ul > li > a:hover,
.pkp_site_nav_menu ul#navigationPrimary > li > ul > li > a:focus,
.pkp_site_nav_menu ul#navigationPrimary > li > ul > li:hover > a {
  background: var(--chula-pink-light) !important;
  color: var(--ej-maroon) !important;
  border-left-color: var(--chula-pink) !important;
}

/* ── SEARCH + USER NAV ───────────────────────────────────────── */

.pkp_navigation_search_wrapper { background: transparent !important; }

.pkp_navigation_search_wrapper a.pkp_search {
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 600;
  color: var(--ej-gray) !important;
  background: transparent !important;
}
.pkp_navigation_search_wrapper a.pkp_search:hover,
.pkp_navigation_search_wrapper a.pkp_search:focus {
  color: var(--ej-maroon) !important;
}

ul#navigationUser > li > a {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 500;
  color: var(--ej-gray);
}
ul#navigationUser > li > a:hover { color: var(--ej-maroon); }

/* ── CONTENT SHELL ───────────────────────────────────────────── */

/* Two-column shell: main content + sidebar side by side.
   Flex is used so the parent theme's floats stop applying. */
.pkp_structure_content {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 48px;
  display: flex;
  align-items: flex-start;
  gap: 44px;
}

/* Hunting the vertical line: the parent theme paints a column
   divider via border/background on one of these containers. */
.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_content.has_sidebar,
.pkp_structure_main,
.pkp_structure_content.has_sidebar .pkp_structure_main,
.pkp_structure_sidebar,
.pkp_structure_sidebar.left,
.pkp_structure_sidebar.right,
.page_index_journal {
  border: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ...and in case it is drawn as a pseudo-element instead */
.pkp_structure_page::before,
.pkp_structure_page::after,
.pkp_structure_content::before,
.pkp_structure_content::after,
.pkp_structure_main::before,
.pkp_structure_main::after {
  display: none !important;
}

/* NOTE: an earlier block here handled the OJS sidebar by giving
   .page_index_journal `display: contents`. It was removed — that
   rule applied on every homepage, not only when a sidebar existed,
   and it dissolved the very box the announcements grid below needs.
   The OJS sidebar is no longer used; announcements are placed in a
   right-hand column by the grid in "HOMEPAGE TWO-COLUMN ZONE". */

/* .has_sidebar / .left are two-class selectors in the parent theme,
   so these must match that specificity to win. */
.pkp_structure_main,
.pkp_structure_content.has_sidebar .pkp_structure_main {
  max-width: none;
  width: auto;
  float: none;
  flex: 1 1 auto;
  min-width: 0;          /* lets long titles wrap instead of overflowing */
  padding-left: 0;
  padding-right: 0;
}

/* Full width belongs to the HOMEPAGE only, where the hero and
   metrics need to bleed edge to edge. Every other page centres in
   a readable column — without this, interior pages pin their
   content to the far left with dead space beside it. */
body:not(.pkp_page_index) .pkp_structure_content {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.pkp_structure_sidebar,
.pkp_structure_sidebar.left,
.pkp_structure_sidebar.right,
.pkp_structure_content.has_sidebar .pkp_structure_sidebar {
  float: none;
  flex: 0 0 300px;
  width: 300px;
  max-width: 300px;
  padding: 0;
  border: none;
}

/* Sidebar blocks styled as cards to match the article cards */
.pkp_structure_sidebar .pkp_block {
  background: #fff;
  border: 1px solid var(--ej-border);
  border-radius: var(--ej-radius);
  box-shadow: var(--shadow-sm);
  padding: 0;
  margin: 0 0 20px;
  overflow: hidden;
  width: 100%;
}

.pkp_structure_sidebar .pkp_block .title {
  background: var(--ej-maroon);
  color: #fff;
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 11px 18px;
  margin: 0;
}

.pkp_structure_sidebar .pkp_block .content { padding: 8px 18px 12px; }

.pkp_structure_sidebar .pkp_block ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pkp_structure_sidebar .pkp_block li {
  padding: 8px 0;
  border-bottom: 1px solid var(--ej-border);
}
.pkp_structure_sidebar .pkp_block li:last-child { border-bottom: none; }
.pkp_structure_sidebar .pkp_block a {
  font-size: .84rem;
  font-weight: 500;
  color: var(--ej-text);
  text-decoration: none;
}
.pkp_structure_sidebar .pkp_block a:hover { color: var(--ej-maroon); }

/* ── BREADCRUMBS ─────────────────────────────────────────────── */

/* The parent theme pads the content containers from the top, which
   left a wide band between the nav bar and the breadcrumbs.
   The homepage is excluded — its hero sits flush by design. */
body:not(.pkp_page_index) .pkp_structure_content,
body:not(.pkp_page_index) .pkp_structure_main,
body:not(.pkp_page_index) .pkp_structure_main .page {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.cmp_breadcrumbs {
  font-size: .78rem;
  color: var(--ej-gray);
  padding: 18px 0 0;
  margin: 0 0 16px !important;
}

/* Nothing should add space between the breadcrumbs and the title */
.page_article .obj_article_details,
.pkp_structure_main .page > article {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.cmp_breadcrumbs a { color: var(--ej-gray); font-weight: 500; }
.cmp_breadcrumbs a:hover { color: var(--ej-maroon); }
.cmp_breadcrumbs .separator { color: #D1D5DB; padding: 0 6px; }
.cmp_breadcrumbs .current span { color: var(--ej-text); font-weight: 600; }

/* ── STATIC & INTERIOR PAGES ─────────────────────────────────────
   Static Pages plugin content (Aims and Scope, AI Policy,
   Editorial Board) plus any other interior page. These had no
   styling at all, which is why they read as empty.
   ─────────────────────────────────────────────────────────────── */

.pkp_structure_main .page {
  padding: 12px 0 24px;
}

/* Trim the tail on the article page: the article element and the
   row should not each add their own bottom space. */
.page_article .obj_article_details,
.page_article .obj_article_details .row {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Margin only for the last blocks — these are cards, and zeroing
   their padding collapses the space inside them. */
.page_article .obj_article_details .main_entry > .item:last-of-type,
.page_article .obj_article_details .entry_details > .item:last-of-type {
  margin-bottom: 0 !important;
}

.page_article { padding-bottom: 8px !important; }

/* Page heading — same treatment across every interior page.

   The h2 is there for Static Pages: that plugin renders its page
   title as `<h2>` where built-in OJS pages use `<h1>`, and it is
   always the first element in .page, so :first-child picks out the
   title without catching the headings inside the content. */
.pkp_structure_main .page > .page_title,
.pkp_structure_main .page > h1,
.pkp_structure_main .page > h2:first-child {
  font-family: var(--font-head);
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--ej-text);
  letter-spacing: -.03em;
  line-height: 1.2;
  margin: 0 0 26px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--ej-border);
}

/* Prose measure — long lines are unreadable at full width */
.pkp_structure_main .page > p,
.pkp_structure_main .page > ul,
.pkp_structure_main .page > ol,
.pkp_structure_main .page > .static_page_content > p,
.pkp_structure_main .page > .static_page_content > ul,
.pkp_structure_main .page > .static_page_content > ol {
  font-size: .95rem;
  line-height: 1.8;
  color: #374151;
  max-width: 78ch;
}

/* Headings inside static content.
   :not(.page_article) keeps this away from the article page, whose
   h2 elements are section labels styled separately. */
.pkp_structure_main .page:not(.page_article) h2,
.pkp_structure_main .page:not(.page_article) .static_page_content h2 {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ej-maroon);
  letter-spacing: -.01em;
  margin: 36px 0 14px;
}

.pkp_structure_main .page:not(.page_article) h3,
.pkp_structure_main .page:not(.page_article) .static_page_content h3 {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ej-text);
  margin: 26px 0 10px;
}

/* ── EDITORIAL BOARD ─────────────────────────────────────────────
   Wrap a group of people in <div class="ej-board"> and they flow
   into columns, filling the width instead of a long thin list.
   ─────────────────────────────────────────────────────────────── */

.ej-board {
  column-count: 3;
  column-gap: 40px;
  margin: 4px 0 30px;
}

.ej-board .ej-board-person {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  padding: 12px 0;
  border-bottom: 1px solid var(--ej-border);
}

.ej-board .ej-board-name {
  display: block;
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: 700;
  color: var(--ej-text);
  margin-bottom: 2px;
}

.ej-board .ej-board-affil {
  display: block;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ej-gray);
}

@media (max-width: 1200px) { .ej-board { column-count: 2; } }
@media (max-width: 700px)  { .ej-board { column-count: 1; } }

/* ── ARTICLE DETAIL PAGE ─────────────────────────────────────── */

/* No rule under the title — the byline follows directly beneath it,
   and all three (title, byline, DOI) share the same left edge. */
.obj_article_details .page_title {
  font-size: 2.1rem;
  color: var(--ej-text);
  line-height: 1.22;
  letter-spacing: -.03em;
  margin: 0 0 18px;
  padding: 0;
  border-bottom: none;
}

/* Kill the parent theme's column padding so the byline and DOI
   line up flush with the title above them. */
.obj_article_details .row,
.obj_article_details .main_entry,
.obj_article_details .main_entry > .item {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Two columns: article content, then a fixed metadata rail.
   The parent theme's own proportions left a large empty gap. */
.obj_article_details .row {
  display: flex;
  align-items: flex-start;
  gap: 52px;
  margin: 0;
}

/* The parent theme puts a border-left on each column — that is the
   pair of vertical lines running down the article page. */
.obj_article_details .row,
.obj_article_details .main_entry,
.obj_article_details .entry_details,
.page_article .row,
.page_article .main_entry,
.page_article .entry_details {
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  background-image: none !important;
  box-shadow: none !important;
}
.obj_article_details .row::before,
.obj_article_details .row::after,
.obj_article_details .main_entry::before,
.obj_article_details .main_entry::after,
.obj_article_details .entry_details::before,
.obj_article_details .entry_details::after {
  display: none !important;
}

.obj_article_details .main_entry {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: none;
  padding: 0;
}

.obj_article_details .entry_details {
  flex: 0 0 320px;
  width: 320px;
  max-width: 320px;
  padding: 0;
}

@media (max-width: 992px) {
  .obj_article_details .row { display: block; }
  .obj_article_details .entry_details {
    width: 100%;
    max-width: none;
    margin-top: 36px;
  }
}

/* Section labels: "DOI:", "Keywords:", "Abstract", "Affiliations".
   The margin reset matters — these are <h2> elements, and the
   browser default margin was creating the large gaps between
   blocks. Specificity is raised so the interior-page h2 rule
   cannot capture them. */
.obj_article_details .item .label,
.obj_article_details .item h2.label,
.obj_article_details .item.doi h2.label,
.obj_article_details .item.abstract h2.label,
.obj_article_details .item.keywords h2.label,
.obj_article_details .item.ej-affiliations-item h2.label,
.obj_article_details .item.references h2.label,
.obj_article_details .item.author_bios h2.label,
.entry_details .item .label,
.entry_details .item h2.label {
  font-family: var(--font-head) !important;
  /* !important because the parent theme sizes .item.keywords .label
     at a higher specificity than we can reasonably match; without
     it that one label renders larger than the rest. */
  font-size: .72rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em !important;
  color: var(--ej-maroon);
  margin: 0 0 10px;
  padding: 0;
  line-height: 1.4;
}

/* Spacing between the blocks in the article body.
   Keywords sit after the abstract in the DOM now — no CSS
   reordering, so screen readers follow the same order.
   No dividing rules between blocks: the maroon labels already
   mark each section clearly enough. */
.obj_article_details .main_entry > .item {
  margin-bottom: 22px;
  padding-top: 0;
  border-top: none;
}
.obj_article_details .main_entry > .item:last-of-type { margin-bottom: 0; }

/* The one rule on the page: it closes the title/byline/DOI header
   group and opens the article body. */
.obj_article_details .main_entry > .item.abstract {
  margin-top: 8px;
  margin-bottom: 24px;
  padding-top: 26px;
  border-top: 1px solid var(--ej-border) !important;
}

/* ── AUTHOR BYLINE — names on one running line ───────────────── */

/* Byline sits tight under the title, DOI tight under the byline */
.obj_article_details .row { padding-top: 0; margin-top: 0; }
.obj_article_details .main_entry > .item.authors {
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 14px;
}
.obj_article_details .main_entry > .item.doi { margin-bottom: 0; }

.obj_article_details ul.authors.ej-byline {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1.6;
}

.obj_article_details ul.authors.ej-byline > li {
  display: inline;
  padding: 0;
  margin: 0;
  border-bottom: none;
}
.obj_article_details ul.authors.ej-byline > li:not(:last-child)::after {
  content: ", ";
  font-weight: 400;
  color: var(--ej-gray);
}

.obj_article_details ul.authors.ej-byline .name {
  display: inline;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ej-text);
}

.obj_article_details .ej-orcid {
  display: inline-block;
  margin-left: 3px;
  opacity: .55;
  vertical-align: -2px;
}
.obj_article_details .ej-orcid:hover { opacity: 1; }
.obj_article_details .ej-orcid svg,
.obj_article_details .ej-orcid img { width: 14px; height: 14px; }

/* ── AFFILIATIONS — own section, below the keywords ──────────── */

.obj_article_details ul.ej-affiliations {
  list-style: none;
  padding: 0;
  margin: 0;
}

.obj_article_details ul.ej-affiliations > li {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  padding: 3px 0;
  font-size: .82rem;
  line-height: 1.5;
}

.obj_article_details .ej-affil-author {
  font-weight: 600;
  color: #4B5563;
  min-width: 190px;
}

.obj_article_details .ej-affil-org { color: var(--ej-gray); }

/* Corresponding author — envelope icon, mailto link.
   Falls back to a maroon asterisk if the author has no email. */
.obj_article_details a.ej-corresponding,
.obj_article_details span.ej-corresponding {
  display: inline-block;
  margin-left: 5px;
  color: var(--ej-maroon);
  font-weight: 700;
  text-decoration: none;
  vertical-align: -2px;
  opacity: .75;
  transition: opacity .2s;
}
.obj_article_details a.ej-corresponding:hover,
.obj_article_details a.ej-corresponding:focus { opacity: 1; }

.obj_article_details .ej-corresponding svg {
  width: 14px;
  height: 14px;
  display: block;
}

.obj_article_details .ej-corresponding-mark {
  display: inline-block;
  color: var(--ej-maroon);
  vertical-align: -3px;
  margin-right: 4px;
}
.obj_article_details .ej-corresponding-mark svg { width: 15px; height: 15px; }

.obj_article_details .ej-corresponding-note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--ej-border);
  font-size: .82rem;
  color: var(--ej-gray);
  line-height: 1.6;
}
.obj_article_details .ej-corresponding-note a {
  color: var(--ej-maroon);
  text-decoration: none;
  border-bottom: 1px solid rgba(140,21,56,.3);
}
.obj_article_details .ej-corresponding-note a:hover {
  border-bottom-color: var(--ej-maroon);
}

@media (max-width: 600px) {
  .obj_article_details .ej-affil-author { min-width: 0; width: 100%; }
}

/* ── FULL ARTICLE LINK — beside the DOI ──────────────────────────
   Matches the DOI pill: same grey field, maroon text, plus an icon.
   The selector must be as specific as the generic
   `.item.doi .value a` rule above, or that one wins and paints a
   grey background under white text.
   ─────────────────────────────────────────────────────────────── */
.obj_article_details .item.doi .value a.ej-full-article,
.obj_article_details a.ej-full-article {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 0;          /* the row's flex gap handles spacing */
  padding: 5px 12px;
  background: #F4F4F5;
  border: 1px solid #E4E4E7;
  border-radius: 6px;
  color: var(--ej-maroon) !important;
  font-family: var(--font-head);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  vertical-align: baseline;
  transition: background .2s, border-color .2s;
}
.obj_article_details .item.doi .value a.ej-full-article:hover,
.obj_article_details a.ej-full-article:hover,
.obj_article_details a.ej-full-article:focus {
  background: var(--chula-pink-light);
  border-color: rgba(222,92,190,.35);
  color: var(--ej-dark) !important;
}
.obj_article_details a.ej-full-article svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Abstract */
.obj_article_details .item.abstract p {
  font-size: .93rem;
  line-height: 1.8;
  color: #374151;
}

/* Body-section headings — ABSTRACT, KEYWORDS, AFFILIATIONS and the
   other long-form blocks — sit larger than the small metadata
   labels. The DOI label is deliberately excluded: it shares a row
   with the DOI pill and would unbalance it.
   Tracking eases off as the size grows; large caps need less. */
.obj_article_details .main_entry > .item.abstract > h2.label,
.obj_article_details .main_entry > .item.keywords > h2.label,
.obj_article_details .main_entry > .item.ej-affiliations-item > h2.label,
.obj_article_details .main_entry > .item.references > h2.label,
.obj_article_details .main_entry > .item.author_bios > h2.label,
.obj_article_details .main_entry > .item.downloads_chart > h2.label {
  font-size: 1.02rem !important;
  letter-spacing: .09em !important;
  margin-bottom: 14px;
}

/* DOI row: label, DOI pill and Full article all on one baseline.
   Flex is used because the pieces have different fonts and icon
   heights, so inline alignment alone left them a few pixels off. */
.obj_article_details .item.doi {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.obj_article_details .item.doi h2.label { margin: 0; }
.obj_article_details .item.doi .value {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* DOI — rendered as a pill */
.obj_article_details .item.doi .value a {
  display: inline-block;
  background: #F4F4F5;
  border: 1px solid #E4E4E7;
  border-radius: 6px;
  padding: 5px 12px;
  font-family: 'Courier New', monospace;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ej-maroon);
  text-decoration: none;
}
.obj_article_details .item.doi .value a:hover { background: var(--chula-pink-light); }

/* Keywords */
.obj_article_details .item.keywords .value {
  font-size: .86rem;
  color: #374151;
}

/* ── GALLEY / PDF BUTTONS ────────────────────────────────────── */

a.obj_galley_link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ej-maroon);
  color: #fff !important;
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 10px 18px;
  border: none;
  border-radius: 7px;
  box-shadow: 0 2px 6px rgba(140,21,56,.22);
  text-decoration: none;
  transition: background .2s, transform .2s, box-shadow .2s;
}

a.obj_galley_link:hover,
a.obj_galley_link:focus {
  background: var(--ej-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(140,21,56,.3);
}

.galleys_links { list-style: none; padding: 0; }
.galleys_links > li { margin-bottom: 8px; }

/* ── ENTRY DETAILS SIDEBAR ───────────────────────────────────── */

.entry_details .item {
  border: 1px solid var(--ej-border);
  border-radius: var(--ej-radius);
  padding: 14px 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  background: #fff;
}

/* Download block: outlined rather than solid. A filled maroon block
   was the loudest thing on the page, and the DOI row now offers a
   second route to the same file, so this one need not shout.
   Fills in on hover.
   Scoped to .entry_details — listing buttons stay solid. */
.entry_details .item.galleys {
  border: none;
  box-shadow: none;
  padding: 0;
  margin-bottom: 22px;
}
.entry_details .item.galleys .galleys_links { margin: 0; }

.entry_details .item.galleys a.obj_galley_link {
  display: inline-flex;
  width: auto;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-size: .8rem;
  font-weight: 700;
  background: #fff !important;
  color: var(--ej-maroon) !important;
  border: 1.5px solid var(--ej-maroon);
  border-radius: 7px;
  box-shadow: none !important;
  transform: none;
  transition: background .2s, color .2s;
}

.entry_details .item.galleys a.obj_galley_link:hover,
.entry_details .item.galleys a.obj_galley_link:focus {
  background: var(--ej-maroon) !important;
  color: #fff !important;
  transform: none;
  box-shadow: none !important;
}

.entry_details .item.galleys a.obj_galley_link svg {
  width: 14px;
  height: 14px;
}
.entry_details .item .value { font-size: .86rem; }
.entry_details .item.issue .value a.title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .88rem;
}

/* Merge PUBLISHED and ISSUE/SECTION into a single card.
   :has() and the adjacent-sibling selector mean this only applies
   when the two blocks are actually next to each other — if OJS
   renders something between them (a data-availability statement,
   for instance) they stay as separate cards rather than joining
   across an intruder. */
.entry_details .item.published:has(+ .item.issue) {
  margin-bottom: 0;
  border-bottom: none;
  border-radius: var(--ej-radius) var(--ej-radius) 0 0;
  padding-bottom: 4px;
}
.entry_details .item.published + .item.issue {
  border-top: none;
  border-radius: 0 0 var(--ej-radius) var(--ej-radius);
  padding-top: 4px;
  /* the last sub_item has no bottom margin, so the card's own
     padding is all that separates it from the edge */
  padding-bottom: 20px;
}

/* Space the label/value pairs inside the merged card */
.entry_details .item > .sub_item { margin-bottom: 16px; }
.entry_details .item > .sub_item:last-child { margin-bottom: 0; }

/* Citation block */
.item.citation .csl-entry {
  font-size: .84rem;
  line-height: 1.7;
  color: #374151;
}
.citation_formats_button {
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  color: var(--ej-maroon);
  background: #fff;
  border: 1.5px solid var(--ej-maroon);
  border-radius: 7px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background .2s;
}
.citation_formats_button:hover { background: var(--chula-pink-light); }

/* ── HOMEPAGE HERO ───────────────────────────────────────────────
   Markup comes from our indexJournal.tpl override.
   ─────────────────────────────────────────────────────────────── */

/* Full-bleed: cancels the 48px padding on .pkp_structure_content so
   the band runs edge to edge. The two values must stay in step —
   if that padding changes, change these too. */
.ej-hero {
  position: relative;
  overflow: hidden;
  margin: 0 -48px;
  padding: 76px 48px 80px;
  border-radius: 0;
  background: linear-gradient(160deg, #6B0F28 0%, #8C1538 30%, #5C0D24 65%, #2E0612 100%);
}

.ej-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ej-hero-inner { position: relative; z-index: 2; max-width: 780px; }

.ej-hero-title {
  font-family: var(--font-head);
  font-size: 3.3rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.045em;
  color: #fff;
  margin: 0 0 20px;
}
.ej-hero-title span { color: var(--ej-gold-light); }

.ej-hero-blurb {
  font-size: 1.02rem;
  line-height: 1.75;
  color: rgba(255,255,255,.78);
  margin: 0 0 30px;
  max-width: 60ch;
}

.ej-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; }

.ej-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-head);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  padding: 5px 13px;
}
.ej-badge-gold {
  background: rgba(201,168,76,.18);
  border-color: rgba(201,168,76,.45);
  color: var(--ej-gold-light);
}

/* ── METRICS STRIP ───────────────────────────────────────────── */

/* Full-bleed too, so it reads as one band with the hero above it */
.ej-metrics {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: #fff;
  border: none;
  border-bottom: 1px solid var(--ej-border);
  border-radius: 0;
  box-shadow: 0 4px 24px rgba(140,21,56,.07);
  margin: 0 -48px 44px;
  padding: 0 48px;
  overflow: hidden;
}

.ej-metric {
  padding: 22px 14px;
  text-align: center;
  border-right: 1px solid var(--ej-border);
  transition: background .2s;
}
.ej-metric:last-child { border-right: none; }
/* Kept as the pale cream, not Chula pink — the metrics band reads as
   part of the hero, and pink was too strong there. */
.ej-metric:hover { background: var(--ej-cream); }

.ej-metric-icon {
  width: 36px;
  height: 36px;
  margin: 0 auto 10px;
  background: var(--ej-cream);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ej-maroon);
}
.ej-metric-icon svg { width: 18px; height: 18px; }

.ej-metric-val {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ej-maroon);
  line-height: 1;
  margin-bottom: 5px;
}

/* For word values ("Open Access") rather than figures */
.ej-metric-val--sm {
  font-size: 1.02rem;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.ej-metric-label {
  font-size: .68rem;
  font-weight: 600;
  color: var(--ej-gray);
  text-transform: uppercase;
  letter-spacing: .07em;
  line-height: 1.35;
}

/* ── HOMEPAGE TWO-COLUMN ZONE ────────────────────────────────────
   Announcements move into a right-hand column beside the current
   issue. This is done here rather than with the OJS sidebar because
   stock OJS has no announcements block — announcements always
   render in the main flow.
   `dense` lets the current issue backfill the left cell even though
   announcements come first in the DOM.
   ─────────────────────────────────────────────────────────────── */
@media (min-width: 993px) {
  .page_index_journal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    column-gap: 44px;
    grid-auto-flow: row dense;
    align-items: start;
  }

  /* Full-width rows */
  .page_index_journal > .ej-hero,
  .page_index_journal > .ej-metrics,
  .page_index_journal > .highlights,
  .page_index_journal > .homepage_about,
  .page_index_journal > .homepage_image,
  .page_index_journal > .additional_content {
    grid-column: 1 / -1;
  }

  /* The two-column pair */
  .page_index_journal > .current_issue    { grid-column: 1; }
  .page_index_journal > .cmp_announcements { grid-column: 2; }

  /* Announcements are narrower here, so tighten them up */
  .page_index_journal > .cmp_announcements .obj_announcement_summary {
    padding: 18px 20px;
  }
  .page_index_journal > .cmp_announcements .obj_announcement_summary h3 {
    font-size: .92rem;
  }
  .page_index_journal > .cmp_announcements .obj_announcement_summary .summary {
    font-size: .82rem;
  }
}

/* ── HIGHLIGHTS CAROUSEL ─────────────────────────────────────────
   OJS 3.5 renders Highlights as a Swiper carousel. Swiper's own CSS
   and JS come from the default theme; this only skins it.
   ─────────────────────────────────────────────────────────────── */

.highlights {
  margin: 0 0 40px;
}

.highlights .swiper {
  position: relative;
  border: 1px solid var(--ej-border);
  border-left: 4px solid var(--ej-gold);
  border-radius: var(--ej-radius);
  background: linear-gradient(115deg, var(--ej-cream) 0%, #fff 55%);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.highlights .swiper-wrapper {
  list-style: none;
  margin: 0;
  padding: 0;
}

.highlights .swiper-slide-content { padding: 30px 56px 32px 34px; }

.highlights .swiper-slide-title {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ej-text);
  letter-spacing: -.02em;
  margin: 0 0 8px;
}

/* A gold "Featured" eyebrow above each slide title */
.highlights .swiper-slide-title::before {
  content: "Featured";
  display: block;
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ej-gold);
  margin-bottom: 7px;
}

.highlights .swiper-slide-desc {
  font-size: .875rem;
  line-height: 1.75;
  color: #4B5563;
  max-width: 74ch;
  margin-bottom: 16px;
  overflow-wrap: anywhere;   /* stops long pasted URLs overflowing */
}
.highlights .swiper-slide-desc p { margin: 0; }

/* Carousel arrows and dots */
.highlights .swiper-button-prev,
.highlights .swiper-button-next {
  color: var(--ej-maroon);
  background: none;
  border: none;
  transform: scale(.55);
}
.highlights .swiper-pagination-bullet-active { background: var(--ej-maroon); }

/* Shared button style — also used by the Highlights "Read" button */
.pkp_button,
a.pkp_button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ej-maroon);
  color: #fff !important;
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 9px 18px;
  border: none;
  border-radius: 7px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(140,21,56,.22);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.pkp_button:hover,
a.pkp_button:hover {
  background: var(--ej-dark);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(140,21,56,.3);
}

/* ── ANNOUNCEMENTS ───────────────────────────────────────────────
   The parent theme boxes and divides the first announcement
   (.highlight_first) — that is the stray vertical rule. Reset it
   and use the same card treatment as the article list.
   ─────────────────────────────────────────────────────────────── */

section.cmp_announcements {
  margin-bottom: 40px;
}

/* Section heading — forced visible, the parent theme hides it in
   some layouts. Matches the "CURRENT ISSUE" label opposite it. */
section.cmp_announcements > h2 {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  overflow: visible !important;
  font-family: var(--font-head);
  font-size: 1.44rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ej-maroon);
  border-bottom: 2px solid var(--ej-border);
  padding-bottom: 12px;
  margin-bottom: 20px;
}

section.cmp_announcements,
section.cmp_announcements.highlight_first,
section.cmp_announcements .obj_announcement_summary,
section.cmp_announcements.highlight_first .obj_announcement_summary,
section.cmp_announcements .obj_announcement_summary_details {
  border: none !important;
  background-image: none !important;
  box-shadow: none;
}

.obj_announcement_summary {
  background: #fff;
  border: 1px solid var(--ej-border) !important;
  border-radius: var(--ej-radius);
  padding: 22px 26px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: box-shadow .25s, transform .2s, border-color .2s;
}
.obj_announcement_summary:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: rgba(201,168,76,.4) !important;
}
.obj_announcement_summary::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--ej-gold);
  border-radius: var(--ej-radius) 0 0 var(--ej-radius);
  opacity: 0;
  transition: opacity .2s;
}
.obj_announcement_summary:hover::before { opacity: 1; }

.obj_announcement_summary h3 {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 6px;
}
.obj_announcement_summary h3 a { color: var(--ej-text); text-decoration: none; }
.obj_announcement_summary h3 a:hover { color: var(--ej-maroon); }

.obj_announcement_summary .date {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ej-gold);
  font-family: var(--font-head);
  margin-bottom: 10px;
}

.obj_announcement_summary .summary {
  font-size: .875rem;
  line-height: 1.7;
  color: #4B5563;
}
.obj_announcement_summary .summary p { margin: 0 0 10px; }

/* ── HOMEPAGE: ABOUT THE JOURNAL ─────────────────────────────── */

section.homepage_about {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--ej-border);
}

section.homepage_about > h2 {
  font-family: var(--font-head);
  font-size: 1.44rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;   /* large caps need less tracking */
  color: var(--ej-maroon);
  margin-bottom: 16px;
}

section.homepage_about p {
  font-size: .93rem;
  line-height: 1.8;
  color: #374151;
  max-width: 78ch;      /* keeps prose readable at full width */
}

/* Graphics added via the Journal Description editor */
section.homepage_about img {
  max-width: 100%;
  height: auto;
  border-radius: var(--ej-radius);
  margin: 18px 0;
}

/* An image floated left/right in the editor stays readable */
section.homepage_about img[style*="float"] {
  max-width: 42%;
  margin: 6px 24px 18px 0;
}

section.homepage_about h3,
section.homepage_about h4 {
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ej-maroon);
  margin: 34px 0 14px;
}

/* ── EDITORIAL PERFORMANCE STATS ─────────────────────────────────
   Markup lives in the Journal Description field.
   ─────────────────────────────────────────────────────────────── */

.ej-estats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 26px 34px;
  margin: 4px 0 10px;
}

.ej-estat {
  border-left: 3px solid var(--ej-maroon);
  padding: 2px 0 2px 18px;
}

.ej-estat-val {
  font-family: var(--font-head);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ej-text);
  letter-spacing: -.03em;
  margin-bottom: 4px;
}

.ej-estat-label {
  font-size: .82rem;
  line-height: 1.45;
  color: var(--ej-gray);
}

.ej-estats-note {
  font-size: .76rem !important;
  color: var(--ej-gray);
  font-style: italic;
  margin-top: 4px !important;
}

/* ── EDITOR-IN-CHIEF ─────────────────────────────────────────── */

.ej-eic {
  background: #F7F8F9;
  border: 1px solid var(--ej-border);
  border-radius: var(--ej-radius);
  padding: 26px 30px 28px;
  margin: 34px 0;
  max-width: 900px;
}

/* The OJS editor can leave behind an empty duplicate of this block.
   Hide any .ej-eic that has no visible name in it. */
.ej-eic:not(:has(strong)) { display: none; }

.ej-eic-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 20px;
}
.ej-eic-head h3 { margin: 0 !important; }
.ej-eic-head a {
  font-size: .78rem;
  font-weight: 600;
  color: var(--ej-maroon);
  border-bottom: 1px solid rgba(140,21,56,.35);
  text-decoration: none;
}
.ej-eic-head a:hover { border-bottom-color: var(--ej-maroon); }

.ej-eic-person {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}
.ej-eic-person:last-child { margin-bottom: 0; }

/* Plain square portrait — no frame, no rounding, no shadow. */
.ej-eic-person img {
  box-sizing: border-box;
  width: 130px;
  height: 130px;
  flex: 0 0 130px;
  object-fit: cover;
  display: block;
  margin: 0 !important;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}

.ej-eic-info { display: flex; flex-direction: column; gap: 3px; }
.ej-eic-info strong {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ej-text);
}
.ej-eic-info span {
  font-size: .84rem;
  color: var(--ej-gray);
  line-height: 1.5;
}

@media (max-width: 600px) {
  .ej-eic { padding: 20px 20px 22px; }
  .ej-eic-person { gap: 16px; }
  .ej-eic-person img {
    width: 92px;
    height: 92px;
    flex-basis: 92px;
  }
}

section.homepage_about ul,
section.homepage_about ol {
  font-size: .93rem;
  line-height: 1.8;
  color: #374151;
  max-width: 78ch;
  padding-left: 22px;
}
section.homepage_about li { margin-bottom: 6px; }

/* ── HOMEPAGE: CURRENT ISSUE SECTION ─────────────────────────── */

section.current_issue > h2 {
  font-family: var(--font-head);
  font-size: 1.44rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ej-maroon);
  border-bottom: 2px solid var(--ej-border);
  padding-bottom: 12px;
  margin-bottom: 18px;
}

/* Issue icon + identification sit on one row */
.ej-issue-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 6px;
}

.ej-issue-icon {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--ej-cream);
  border: 1px solid var(--ej-border);
  color: var(--ej-maroon);
}
.ej-issue-icon svg { width: 30px; height: 30px; }

.current_issue_title {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ej-text);
  letter-spacing: -.02em;
  margin: 0;
}

/* Issue TOC heading — "Published: 2026-06-30".
   Indented to line up with the title beside the icon (64 + 20). */
.obj_issue_toc > .heading .published {
  font-size: .8rem;
  color: var(--ej-gray);
  margin: 0 0 24px 84px;
}
@media (max-width: 600px) {
  .obj_issue_toc > .heading .published { margin-left: 0; }
}
.obj_issue_toc > .heading .published .label {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ej-gray);
  text-transform: none;
  letter-spacing: 0;
  font-size: .8rem;
}

/* Section headings inside the TOC — "Articles" */
.obj_issue_toc .sections .section > h3 {
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ej-gold);
  margin-bottom: 16px;
}

/* Article list as a card grid.
   auto-fill + minmax means the column count follows the available
   width — three across on a wide screen, two on a laptop, one on
   a phone — without hard-coded breakpoints. */
ul.cmp_article_list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 20px;
  align-items: stretch;
}
ul.cmp_article_list > li {
  margin: 0;
  width: auto;
  float: none;
  clear: none;
  display: flex;      /* lets the card fill the row height */
}

.obj_issue_toc .sections,
.obj_issue_toc .sections .section {
  clear: both;
  max-width: none;
}

/* "View All Issues" */
.page_index_journal a.read_more,
section.current_issue a.read_more,
a.read_more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-size: .84rem;
  font-weight: 700;
  color: var(--ej-maroon) !important;
  text-decoration: none;
  margin-top: 8px;
}
a.read_more::after { content: " →"; }
.page_index_journal a.read_more:hover,
a.read_more:hover { color: var(--ej-dark) !important; }

/* ── ARTICLE LISTINGS (issue / homepage / search) ────────────── */

/* Card: generous padding, soft corners, headline-led — the parts
   that make the reference layout read the way it does. */
.obj_article_summary {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1px solid var(--ej-border);
  border-radius: 18px;
  padding: 28px 28px 24px;
  margin-bottom: 0;
  box-shadow: var(--shadow-sm);
  position: relative;
}
/* No hover state on the card — the title and PDF button carry
   their own affordances. */

/* Headline — the dominant element on the card */
.obj_article_summary > .title {
  font-family: var(--font-head);
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.025em;
  margin: 0 0 14px;
}
.obj_article_summary > .title a { color: var(--ej-text); text-decoration: none; }
.obj_article_summary > .title a:hover { color: var(--ej-maroon); }

/* Meta block grows to fill, pushing the PDF button to the foot so
   every card in a row lines up regardless of title length. */
.obj_article_summary > .meta {
  flex: 1 1 auto;
  margin-bottom: 18px;
}

.obj_article_summary .authors {
  font-size: .855rem;
  color: #4B5563;
  font-style: normal;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Page range removed in our article_summary.tpl override. This is a
   safety net in case that override is ever removed. */
.obj_article_summary .pages { display: none; }

/* Eyebrow above the headline */
.obj_article_summary .ej-art-type {
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -.01em;
  color: #4B5563;
  margin-bottom: 12px;
}
/* DOI + date share a row under the authors */
.obj_article_summary .ej-art-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 10px;
}

.obj_article_summary .ej-art-date {
  font-size: .78rem;
  font-weight: 600;
  color: var(--ej-gray);
}
/* A subtle dot between DOI and date when both are present */
.obj_article_summary .ej-art-doi + .ej-art-date::before {
  content: "·";
  margin-right: 14px;
  color: #D1D5DB;
}

/* DOI — plain text, no chrome. Present to be read and copied. */
.obj_article_summary .ej-art-doi {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: .78rem;
}
.obj_article_summary .ej-doi-label {
  font-family: var(--font-head);
  font-size: .64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ej-gray);
}
.obj_article_summary .ej-doi-value {
  font-family: 'Courier New', monospace;
  font-size: .78rem;
  font-weight: 400;   /* Courier renders heavy without this */
  color: var(--ej-gray);
  /* one click selects the whole identifier, ready to copy */
  user-select: all;
  -webkit-user-select: all;
}

.obj_article_summary .ej-art-date { font-weight: 500; }

/* Card footer line: DOI to the left, date to the right */
.obj_article_summary .ej-art-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--ej-border);
}


/* ── CARD ACTION ROW ─────────────────────────────────────────────
   "Read the article" (primary) beside the galley buttons.
   ─────────────────────────────────────────────────────────────── */

.obj_article_summary .ej-art-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

/* Primary: keeps the reader on the article page */
.obj_article_summary .ej-btn-read {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ej-maroon);
  color: #fff !important;
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 9px 16px;
  border: 1.5px solid var(--ej-maroon);
  border-radius: 7px;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.obj_article_summary .ej-btn-read:hover,
.obj_article_summary .ej-btn-read:focus {
  background: var(--ej-dark);
  border-color: var(--ej-dark);
  color: #fff !important;
}
.obj_article_summary .ej-btn-read svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Secondary: outlined, so the pair reads as a hierarchy */
.obj_article_summary .galleys_links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.obj_article_summary .galleys_links > li { margin: 0; }

.obj_article_summary .galleys_links a.obj_galley_link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-head) !important;
  font-size: .78rem;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 7px;
  background: #fff !important;
  color: var(--ej-maroon) !important;
  border: 1.5px solid var(--ej-maroon);
  box-shadow: none !important;
  transform: none;
  transition: background .2s, color .2s;
}
.obj_article_summary .galleys_links a.obj_galley_link:hover,
.obj_article_summary .galleys_links a.obj_galley_link:focus {
  background: var(--ej-maroon) !important;
  color: #fff !important;
  transform: none;
}
.obj_article_summary .galleys_links a.obj_galley_link svg {
  width: 14px;
  height: 14px;
}

/* The galley label is just "PDF" — prefix it so the pair reads as
   two clear actions. Applies to any galley type: "Download HTML",
   "Download XML" and so on.

   The font declarations matter: as a flex item this pseudo-element
   does not pick up the anchor's typography reliably, which left
   "Download" in a different face from "PDF". No trailing space —
   the flex gap provides it. */
.obj_article_summary .galleys_links a.obj_galley_link::before {
  content: "Download";
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
}

/* ── FOOTER ──────────────────────────────────────────────────── */

/* Two flat fields with a hard edge between them, rather than a
   long fade: deep plum carries the columns, then the footer closes
   on a band of --ej-maroon — the same colour as the strip across
   the top of the page, so the page ends on the colour it opened
   with. The closing band is .ej-foot-uni, further down. */
.pkp_structure_footer_wrapper {
  /* Parts two and three: the dark field that carries the columns,
     easing into --ej-maroon — the colour of the strip across the
     top of the page — for the last stretch. Part one, the white
     indexing band, is a child element further down. */
  background: linear-gradient(180deg,
    var(--ej-darker)  0,
    var(--ej-darker)  58%,
    var(--ej-maroon)  100%);
  /* No rule across the top — the page above casts a soft shadow
     down onto the footer instead. Inset, because the footer's own
     first band is white and so is the page: the shadow has to fall
     on the footer to be seen at all. */
  border-top: none;
  box-shadow: inset 0 9px 14px -10px rgba(0,0,0,.28);
  margin-top: 72px;
}

/* 72px suits the homepage, where the full-bleed hero earns the
   breathing room. Interior pages just end, so the same gap reads
   as dead space. */
body:not(.pkp_page_index) .pkp_structure_footer_wrapper {
  margin-top: 36px;
}

.pkp_structure_footer {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 44px 48px 32px;
}

.pkp_footer_content {
  color: rgba(255,255,255,.55);
  font-size: .8rem;
  line-height: 1.75;
  /* The parent theme puts 2.143rem of padding here. Every
     full-bleed band inside the footer (.ej-badges, .ej-foot-uni)
     cancels the gutters with negative margins, and it can only
     know about one set of them — so the gutters live on
     .pkp_structure_footer and this is zeroed. */
  padding: 0;
}
.pkp_footer_content strong { color: #fff; font-weight: 700; }
.pkp_footer_content p:first-child strong {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.pkp_footer_content a {
  color: rgba(255,255,255,.62);
  text-decoration: none;
}
.pkp_footer_content a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Three-column footer — matches the markup pasted into
   Settings → Website → Appearance → Footer.
   If the editor stripped the wrapper divs this rule simply
   does nothing and the footer stays stacked. */
.pkp_footer_content .ej-foot-cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.pkp_footer_content .ej-foot-col h4 {
  font-family: var(--font-head);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.35);
  margin: 0 0 14px;
}

/* Kill the bullets and indent on the footer lists */
.pkp_footer_content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pkp_footer_content li {
  margin-bottom: 9px;
  font-size: .8rem;
}

/* ── FOOTER PART 2 — THE UNIVERSITY ──────────────────────────────
   Sits below the journal columns, deliberately quieter so the
   journal's own links stay dominant.
   ─────────────────────────────────────────────────────────────── */

/* White band closing the footer. The colour flips here — dark text
   on white — so every inherited footer colour must be overridden.
   Negative margins cancel .pkp_structure_footer's 48px/32px padding;
   keep them in step if that padding changes. */
.pkp_footer_content .ej-foot-uni {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  margin: 44px -48px -32px;
  padding: 36px 48px 40px;
  /* The closing band sits on the maroon end of the wrapper's
     gradient rather than painting its own, so the two never drift
     apart — and with no rule across it, the gradient is the only
     thing marking where part three begins. */
  background: transparent;
  border-top: none;
}

.pkp_footer_content .ej-foot-uni h4 {
  color: var(--chula-pink-light);
  margin-bottom: 12px;
}

/* The band used to be white, so these were dark. They are light
   now — the type sits on the closing maroon. */
.pkp_footer_content .ej-foot-uni-about p,
.pkp_footer_content .ej-foot-uni p {
  font-size: .8rem;
  line-height: 1.75;
  /* Lighter than the footer columns above: this text sits on the
     closing maroon, not on the deep plum, so it needs more weight
     of white to clear 4.5:1. */
  color: rgba(255,255,255,.74);
  /* 62ch broke "…Chulalongkorn University." onto a line of its own
     at 1440px — the sentence wants 473px and 62ch gave it 438.
     76ch clears it with room to spare and still keeps the measure
     readable; the grid column takes over the wrapping on narrow
     screens. */
  max-width: 76ch;
  margin: 0;
}

.pkp_footer_content .ej-foot-uni-links li {
  margin-bottom: 8px;
  color: rgba(255,255,255,.82);
}
.pkp_footer_content .ej-foot-uni-links a,
.pkp_footer_content .ej-foot-uni a {
  font-size: .8rem;
  color: rgba(255,255,255,.82);
  text-decoration: none;
}
.pkp_footer_content .ej-foot-uni-links a:hover,
.pkp_footer_content .ej-foot-uni a:hover {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 992px) {
  .pkp_footer_content .ej-foot-uni {
    grid-template-columns: 1fr;
    gap: 26px;
    margin: 34px -24px -32px;
    padding: 30px 24px 34px;
  }
}

/* ── INDEXING BAND ───────────────────────────────────────────────
   Part one of the three-part footer: a full-bleed white band that
   carries the indexing marks, sitting directly under the page.

   It must be the FIRST element in the footer HTML (Settings →
   Website → Appearance → Footer) — the negative margins pull it
   out to the window edges and up over .pkp_structure_footer's own
   44px/48px padding, so keep them in step if that padding changes.
   ─────────────────────────────────────────────────────────────── */
.pkp_footer_content .ej-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: -44px -48px 42px;
  padding: 26px 48px 30px;
  background: #fff;
  border-top: none;
}

.pkp_footer_content .ej-badges::before {
  content: "Indexed in";
  flex: 0 0 100%;
  font-family: var(--font-head);
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ej-gray);
  margin-bottom: 2px;
}

/* Logo files, if any are added later. On white they no longer need
   flattening — greyscale keeps a row of brand colours from
   clashing, and they come back to full colour on hover. */
.pkp_footer_content .ej-badges img {
  height: 30px;
  width: auto;
  filter: grayscale(1);
  opacity: .65;
  transition: opacity .2s, filter .2s;
}

.pkp_footer_content .ej-badges a:hover img,
.pkp_footer_content .ej-badges img:hover {
  filter: none;
  opacity: 1;
}

@media (max-width: 992px) {
  .pkp_footer_content .ej-badges { margin: -44px -24px 34px; padding: 22px 24px 26px; }
}
@media (max-width: 600px) {
  .pkp_footer_content .ej-badges img { height: 24px; }
}

/* OJS/PKP brand badge — hidden at the journal's request.
   To bring it back, delete this rule. */
.pkp_brand_footer { display: none; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */

@media (max-width: 992px) {
  .pkp_head_wrapper,
  .pkp_structure_content,
  .pkp_structure_footer { padding-left: 24px; padding-right: 24px; }
  .obj_article_details .page_title { font-size: 1.5rem; }

  /* Sidebar drops below the content */
  .pkp_structure_content { display: block; }
  .pkp_structure_sidebar {
    flex: none;
    width: 100%;
    max-width: none;
    margin-top: 40px;
  }
  .pkp_footer_content .ej-foot-cols { grid-template-columns: 1fr; gap: 28px; }

  /* Padding drops to 24px here, so the bleed must match */
  .ej-hero    { margin: 0 -24px; padding: 52px 24px 56px; }
  .ej-metrics { margin: 0 -24px 36px; padding: 0 24px; }
  .ej-hero-title { font-size: 2.4rem; }
  .ej-hero-blurb { font-size: .95rem; }
  .ej-metrics { grid-template-columns: repeat(3, 1fr); }
  .ej-metric:nth-child(3) { border-right: none; }
  .ej-metric:nth-child(-n+3) { border-bottom: 1px solid var(--ej-border); }
}

@media (max-width: 600px) {
  body::before {
    content: "Chulalongkorn University  ·  ISSN 0125-8281";
    font-size: .65rem;
    letter-spacing: .04em;
  }

  .ej-hero { padding: 40px 24px 44px; }
  .ej-hero-title { font-size: 1.85rem; }
  .ej-hero-blurb { font-size: .9rem; }
  .ej-issue-head { gap: 14px; }
  .ej-issue-icon { flex-basis: 48px; width: 48px; height: 48px; }
  .ej-issue-icon svg { width: 22px; height: 22px; }
  .ej-metrics { grid-template-columns: repeat(2, 1fr); }
  .ej-metric { border-right: 1px solid var(--ej-border); border-bottom: 1px solid var(--ej-border); }
  .ej-metric:nth-child(2n) { border-right: none; }
  .ej-metric:nth-last-child(-n+2) { border-bottom: none; }
}

/* ── MOBILE NAV TOGGLE (HAMBURGER) ───────────────────────────────
   The parent theme paints the three bars in @text-bg-base (white),
   which was right on its blue header and invisible on our white one.

   Default-theme markup, unchanged:
     button.pkp_site_nav_toggle > span
       span          → bottom bar (border-bottom)
       span::before  → top bar
       span::after   → middle bar
   `--transform` is added while the menu is open: it drops the bottom
   bar and rotates the other two into an X.

   !important throughout — we are competing with the parent theme.
   ─────────────────────────────────────────────────────────────── */

.pkp_site_nav_toggle > span,
.pkp_site_nav_toggle--transform > span {
  border-bottom-color: var(--ej-maroon) !important;
}

.pkp_site_nav_toggle > span::before,
.pkp_site_nav_toggle > span::after,
.pkp_site_nav_toggle--transform > span::before,
.pkp_site_nav_toggle--transform > span::after {
  background: var(--ej-maroon) !important;
}

/* The parent's white side-lines are invisible here too. Replace them
   with a tap target that reacts. */
.pkp_site_nav_toggle {
  box-shadow: none !important;
  border-radius: 8px;
  transition: background .2s;
}

.pkp_site_nav_toggle:hover,
.pkp_site_nav_toggle:focus {
  background: var(--ej-cream) !important;
}

/* The focus ring was white as well. */
.pkp_site_nav_toggle:focus-visible {
  outline: 2px solid var(--ej-maroon) !important;
  outline-offset: 2px;
}

.pkp_site_nav_toggle:hover > span,
.pkp_site_nav_toggle:focus > span {
  border-bottom-color: var(--ej-dark) !important;
}

.pkp_site_nav_toggle:hover > span::before,
.pkp_site_nav_toggle:hover > span::after,
.pkp_site_nav_toggle:focus > span::before,
.pkp_site_nav_toggle:focus > span::after {
  background: var(--ej-dark) !important;
}

/* ── HEADER ALIGNMENT ON WIDE SCREENS ────────────────────────────
   The parent theme puts .pkp_site_name_wrapper and .pkp_navigation_user
   in a fixed-width centred container (728 / 952 / 1160px at its three
   breakpoints). We made the header full-bleed, so on a wide monitor the
   nav row sat at the 48px gutter while the journal title floated in from
   the left — the wider the screen, the bigger the gap.

   Release all three from the container so everything in the header
   lines up on the same 48px gutter.
   ─────────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  .pkp_site_name_wrapper,
  .pkp_navigation_user {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Parent caps the nav at 80%, which stopped "Submit a Paper"
     well short of the right gutter. */
  .pkp_site_nav_menu ul#navigationPrimary {
    max-width: none !important;
  }
}

/* The user menu (admin / login) is absolutely positioned and centred
   on the same container — pin it to the gutters instead. */
@media (min-width: 993px) {
  .pkp_navigation_user_wrapper {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  /* Pinning it to the gutters makes it a full-width absolute box at
     z-index 1000, lying across the header — including over the
     journal title, whose clicks it then swallowed. It is empty for
     logged-out visitors (height 0), so the block only showed up
     once signed in. Let clicks fall through everywhere except on
     the menu's own controls. */
  .pkp_navigation_user_wrapper {
    pointer-events: none;
  }
  .pkp_navigation_user_wrapper ul,
  .pkp_navigation_user_wrapper li,
  .pkp_navigation_user_wrapper a,
  .pkp_navigation_user_wrapper button {
    pointer-events: auto;
  }
}

/* ── MOBILE NAV DRAWER ───────────────────────────────────────────
   Below 992px the parent theme drops the nav into an absolutely
   positioned panel and renders the sub-menus inline (position:static),
   always expanded. Two of our desktop rules broke that:

     · the panel has no background of its own, so the hero showed
       through the menu;
     · ul#navigationPrimary is a wrapping flex row, so items flowed
       into a second column — "Editorial Board" and "Submit a Paper"
       landed on top of the open sub-menus.

   Here the panel becomes an opaque drawer and the list becomes a
   plain vertical stack with indented sub-items.
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {

  .pkp_site_nav_menu {
    background: #fff !important;
    /* Parent insets the panel by 0.714rem; the drawer reads better
       flush, with the items supplying their own 24px gutter. */
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-top: 1px solid var(--ej-border);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Stack, don't wrap */
  .pkp_site_nav_menu ul#navigationPrimary {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 4px 0 12px !important;
  }

  .pkp_site_nav_menu ul#navigationPrimary > li,
  .pkp_site_nav_menu ul#navigationPrimary > li:last-child {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;      /* cancels the desktop "push right" */
  }

  .pkp_site_nav_menu ul#navigationPrimary > li > a {
    display: block !important;
    width: 100%;
    padding: 14px 24px !important;
    font-size: .95rem;
    border-bottom: 1px solid var(--ej-border) !important;
  }

  /* Sub-menus: inline and indented, not floating cards */
  .pkp_site_nav_menu ul#navigationPrimary > li > ul {
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    background: var(--ej-cream) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .pkp_site_nav_menu ul#navigationPrimary > li > ul > li > a {
    display: block !important;
    padding: 11px 24px 11px 42px !important;
    font-size: .88rem;
    white-space: normal !important;
    border-left: 0 !important;
  }

  .pkp_site_nav_menu ul#navigationPrimary > li > ul > li > a:hover,
  .pkp_site_nav_menu ul#navigationPrimary > li > ul > li > a:focus {
    background: var(--chula-pink-light) !important;
  }

  /* "Submit a Paper" — full-width button at the foot of the drawer */
  .pkp_site_nav_menu ul#navigationPrimary > li > a[href*="/about/submissions"] {
    margin: 16px 24px 4px !important;
    padding: 14px 20px !important;
    width: auto;
    text-align: center;
    border-bottom: 0 !important;
  }
}

/* ── AUTHOR BIOGRAPHIES ──────────────────────────────────────────
   The heading was already styled; the contents were not, so each
   author's name fell through to the generic metadata-label rule
   (10px uppercase maroon — it read as a field label, not a name)
   and the biography text kept the browser's 14px/#111827 instead
   of the .93rem/#374151 used by the abstract.
   ─────────────────────────────────────────────────────────────── */

.obj_article_details .item.author_bios ul.authors {
  list-style: none;
  margin: 0;
  padding: 0;
}

.obj_article_details .item.author_bios > ul.authors > li.sub_item {
  margin: 0 0 18px;
  padding: 0;
}
.obj_article_details .item.author_bios > ul.authors > li.sub_item:last-child {
  margin-bottom: 0;
}

/* The author's name — a name, not a label. Overrides the shared
   `.item .label` rule, which is why the resets are explicit. */
.obj_article_details .item.author_bios .sub_item > .label,
.obj_article_details .item.author_bios .sub_item > .label a {
  font-family: var(--font-head) !important;
  /* A shade larger than the biography text below it, so the name
     still reads as the heading of its block. */
  font-size: .95rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
  color: var(--ej-text) !important;
  line-height: 1.45;
  text-decoration: none;
}
.obj_article_details .item.author_bios .sub_item > .label {
  margin: 0 0 5px;
}
.obj_article_details .item.author_bios .sub_item > .label a:hover,
.obj_article_details .item.author_bios .sub_item > .label a:focus {
  color: var(--ej-maroon) !important;
}

/* Biography text — same measure as the abstract */
.obj_article_details .item.author_bios .sub_item > .value,
.obj_article_details .item.author_bios .sub_item > .value p {
  font-size: .93rem;
  line-height: 1.8;
  color: #374151;
  margin: 0;
}
.obj_article_details .item.author_bios .sub_item > .value p + p {
  margin-top: 10px;
}

/* ── MOST READ ARTICLES BY THE SAME AUTHOR(S) ────────────────────
   Rendered by the recommendByAuthor plugin into the article footer,
   outside .obj_article_details, as a bare <h2> and an unstyled <ul>
   (see plugins/generic/recommendByAuthor/templates/articleFooter.tpl) —
   hence the oversized heading, browser bullets and 14px text.

   Each <li> is "authors, <a>title</a>, <a>journal: issue</a>".

   NOTE: this block only renders when the authors have other
   published articles, so it is styled from the plugin template
   rather than verified on screen — worth a look once deployed.
   ─────────────────────────────────────────────────────────────── */

#articlesBySameAuthorList {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--ej-border);
}

/* Keep it under the article column rather than running beneath the
   metadata rail as well (rail 320px + the row's 52px gap). */
@media (min-width: 993px) {
  #articlesBySameAuthorList { max-width: calc(100% - 372px); }
}

#articlesBySameAuthorList > h2 {
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ej-maroon);
  line-height: 1.4;
  margin: 0 0 14px;
}

#articlesBySameAuthorList > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#articlesBySameAuthorList > ul > li {
  font-size: .86rem;
  line-height: 1.65;
  color: var(--ej-gray);
  padding: 11px 0;
  border-bottom: 1px solid var(--ej-border);
}
#articlesBySameAuthorList > ul > li:last-child { border-bottom: 0; }

/* First link is the article title, second is the issue it appeared in */
#articlesBySameAuthorList > ul > li a {
  font-family: var(--font-head);
  font-size: .93rem;
  font-weight: 600;
  color: var(--ej-text);
  text-decoration: none;
}
#articlesBySameAuthorList > ul > li a + a {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 500;
  color: var(--ej-gray);
}
#articlesBySameAuthorList > ul > li a:hover,
#articlesBySameAuthorList > ul > li a:focus {
  color: var(--ej-maroon);
  text-decoration: underline;
}

#articlesBySameAuthorPages {
  margin-top: 14px;
  font-size: .8rem;
  color: var(--ej-gray);
}

/* ── INDEXING PILLS (text, no image files) ───────────────────────
   For indexes whose logos we do not have or may not use. Same
   .ej-badges band as the images — it just holds .ej-badge elements
   instead of <img>.

   Squared black outline on the white band, deliberately plain, so
   a row of them reads as a register rather than as decoration.

   Paste as the FIRST thing in Settings → Website → Appearance →
   Footer:

     <div class="ej-badges">
       <a class="ej-badge" href="#">Scopus</a>
       <a class="ej-badge" href="#">Web of Science</a>
     </div>

   <span class="ej-badge"> works too, for an index with no page to
   link to. Note .ej-badge is also the hero's chip class, hence the
   .pkp_footer_content scoping on every rule here.
   ─────────────────────────────────────────────────────────────── */

.pkp_footer_content .ej-badges:has(.ej-badge) {
  gap: 8px;
}

.pkp_footer_content .ej-badge {
  display: inline-block;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid #000;
  border-radius: 0;
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.pkp_footer_content a.ej-badge:hover,
.pkp_footer_content a.ej-badge:focus {
  background: #000;
  color: #fff;
  text-decoration: none;
}

@media (max-width: 600px) {
  .pkp_footer_content .ej-badge {
    font-size: .63rem;
    padding: 6px 11px;
    letter-spacing: .06em;
  }
}

/* ── SPONSOR BAND ────────────────────────────────────────────────
   A second white band for sponsors and supporting bodies, built on
   the same bones as the indexing band above it.

   Place it in the footer HTML directly after .ej-badges:

     <div class="ej-sponsor-badges">
       <a href="#"><img src="/plugins/themes/ej/images/sponsor.png"
                        alt="Sponsor name"></a>
       <a class="ej-badge" href="#">Sponsor name</a>
     </div>

   Either kind of child works — a logo file, or an .ej-badge pill
   for a sponsor with no usable mark, styled exactly as the
   indexing pills are.

   The two bands share one white field with a hairline between
   them: the :has() rule closes the gap when both are present, and
   the :first-child rule covers a sponsor band used on its own.

   The label is "Supported by"; add data-label="…" to the div to
   say something else.
   ─────────────────────────────────────────────────────────────── */

.pkp_footer_content .ej-badges:has(+ .ej-sponsor-badges) {
  margin-bottom: 0;
}

.pkp_footer_content .ej-sponsor-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  margin: 0 -48px 42px;
  padding: 24px 48px 30px;
  background: #fff;
  border-top: 1px solid var(--ej-border);
}

/* Used without an indexing band above it, it has to pull itself up
   over the footer's own padding the way .ej-badges does. */
.pkp_footer_content .ej-sponsor-badges:first-child {
  margin-top: -44px;
  padding-top: 26px;
  border-top: none;
}

.pkp_footer_content .ej-sponsor-badges::before {
  content: "Supported by";
  flex: 0 0 100%;
  font-family: var(--font-head);
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ej-gray);
  margin-bottom: 2px;
}

.pkp_footer_content .ej-badges[data-label]::before,
.pkp_footer_content .ej-sponsor-badges[data-label]::before {
  content: attr(data-label);
}

/* Sponsor names as text. Same squared outline as the indexing
   pills, but sentence case and free to wrap: an institution name
   like "Office of Research Affairs (ORA), Chulalongkorn University"
   is unreadable in tracked-out capitals and too wide for a row.

   Both .ej-sponsor-badge and .ej-badge work in this band. */
.pkp_footer_content .ej-sponsor-badge {
  display: inline-block;
  max-width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid #000;
  border-radius: 0;
  font-family: var(--font-head);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  color: #000;
  text-decoration: none;
  transition: background .2s, color .2s;
}

.pkp_footer_content a.ej-sponsor-badge:hover,
.pkp_footer_content a.ej-sponsor-badge:focus {
  background: #000;
  color: #fff;
  text-decoration: none;
}

/* Text badges need a tighter gap than logos */
.pkp_footer_content .ej-sponsor-badges:has(.ej-sponsor-badge) {
  gap: 10px 12px;
}

@media (max-width: 600px) {
  .pkp_footer_content .ej-sponsor-badge { font-size: .7rem; padding: 7px 12px; }
}

/* Sponsor marks sit slightly larger than the indexing logos —
   there are usually fewer of them and they carry more weight. */
.pkp_footer_content .ej-sponsor-badges img {
  height: 38px;
  width: auto;
  filter: grayscale(1);
  opacity: .7;
  transition: opacity .2s, filter .2s;
}

.pkp_footer_content .ej-sponsor-badges a:hover img,
.pkp_footer_content .ej-sponsor-badges img:hover {
  filter: none;
  opacity: 1;
}

/* Pills mixed in with logos need the gap to suit both */
.pkp_footer_content .ej-sponsor-badges:has(.ej-badge) {
  gap: 10px 14px;
}

@media (max-width: 992px) {
  .pkp_footer_content .ej-sponsor-badges {
    margin: 0 -24px 34px;
    padding: 20px 24px 26px;
  }
  .pkp_footer_content .ej-sponsor-badges:first-child {
    margin-top: -44px;
    padding-top: 22px;
  }
}

@media (max-width: 600px) {
  .pkp_footer_content .ej-sponsor-badges { gap: 18px; }
  .pkp_footer_content .ej-sponsor-badges img { height: 30px; }
}

/* ── INTERIOR PAGE RIBBON ────────────────────────────────────────
   A slim full-bleed band under the nav on every page except the
   homepage, so an interior page opens with something of the hero's
   colour instead of white space. Purely decorative — the page
   title and content stay black-on-white below it.

   It hangs off .pkp_structure_head rather than the content shell
   for two reasons: the shell's ::before/::after are already set to
   `display: none !important` by the vertical-line rule up in
   CONTENT SHELL, and interior pages cap that shell at 1280px, so a
   band inside it would stop short of the window edges on a wide
   monitor. The header is the only full-width block in the chain.

   The gradient is the hero's, re-angled; the dots are the hero
   SVG's pattern approximated in CSS, since no markup can be added
   to OJS-generated pages.
   ─────────────────────────────────────────────────────────────── */

body:not(.pkp_page_index) .pkp_structure_head::after {
  content: "";
  display: block;
  width: 100%;
  height: 90px;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.13) 1px, transparent 0) 0 0/22px 22px,
    radial-gradient(120% 200% at 84% 0%, rgba(201,168,76,.20), transparent 62%),
    linear-gradient(100deg, #6B0F28 0%, #8C1538 38%, #5C0D24 78%, #2E0612 100%);
}

/* Breathing room under the ribbon. The BREADCRUMBS block earlier
   sets this to 0 !important to close the parent theme's gap; this
   rule is later in the file at the same specificity, so it wins —
   keep them in step if either moves. */
body:not(.pkp_page_index) .pkp_structure_main .page {
  padding-top: 34px !important;
}

@media (max-width: 992px) {
  body:not(.pkp_page_index) .pkp_structure_head::after { height: 72px; }
  body:not(.pkp_page_index) .pkp_structure_main .page { padding-top: 28px !important; }
}

@media (max-width: 600px) {
  body:not(.pkp_page_index) .pkp_structure_head::after { height: 56px; }
  body:not(.pkp_page_index) .pkp_structure_main .page { padding-top: 24px !important; }
}

/* ── ISSUE ARCHIVE — COVER GRID ──────────────────────────────────
   Stock OJS stacks the archive one issue per row: 50 issues came to
   25,000px of scrolling. Here it flows as a grid of cover cards,
   which brings the same list down to about 4,300px.

   Three things in the way, all worth knowing about:
     · the interior-page prose rule caps `.page > ul` at 78ch, which
       caught this list too — exempted below;
     · the parent theme floats .cover left, and a float inside a
       flex column shrink-wraps to the image's own width, so the
       covers came out 54px wide;
     · it also pins the cover image to `width: auto; max-height:
       250px`, which has to be undone before the card can size it.
   ─────────────────────────────────────────────────────────────── */

.pkp_structure_main .page > ul.issues_archive {
  max-width: none;
}

.page_issue_archive ul.issues_archive {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* The parent also rules off the top of the list — the other half
     of the stacked-row dividers removed on the <li> below. */
  border: none;
}

.page_issue_archive ul.issues_archive > li {
  display: block;
  margin: 0;
  padding: 0;
  /* The parent theme rules off each row with a bottom border —
     right for a stacked list, a stray line under every card here. */
  border: none;
}

.page_issue_archive .obj_issue_summary {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--ej-border);
  border-radius: var(--ej-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.page_issue_archive .obj_issue_summary:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(140,21,56,.28);
}

.page_issue_archive .obj_issue_summary .cover {
  display: block;
  float: none;             /* see note above */
  width: 100%;
  align-self: stretch;
  margin: 0;
}

/* No forced ratio: the covers are 596x863 (0.69), narrower than a
   3/4 box, so fitting them into one left a pale bar down each side.
   Sized by width alone they fill the card edge to edge, uncropped.
   Rows still line up — the grid stretches every card to the tallest
   in its row, and the text block simply sits a little lower on a
   card whose cover is shorter. */
.page_issue_archive .obj_issue_summary .cover img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
}

.page_issue_archive .obj_issue_summary h2 {
  margin: 0;
  padding: 14px 14px 16px;
  font-size: 1rem;
}

.page_issue_archive .obj_issue_summary a.title {
  display: block;
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ej-maroon);
  text-decoration: none;
  margin-bottom: 6px;
}

.page_issue_archive .obj_issue_summary .series {
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 500;
  color: var(--ej-gray);
  margin: 0;
}

/* The description is the same four boilerplate lines on every issue
   — journal name, volume, ISSN, DOI — and the volume is already in
   .series above. Delete this rule to bring it back. */
.page_issue_archive .obj_issue_summary .description {
  display: none;
}

@media (max-width: 600px) {
  .page_issue_archive ul.issues_archive {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 18px;
  }
  .page_issue_archive .obj_issue_summary h2 { padding: 12px 12px 14px; }
  .page_issue_archive .obj_issue_summary a.title { font-size: .86rem; }
  .page_issue_archive .obj_issue_summary .series { font-size: .72rem; }
}

/* ── SITE LOGO ───────────────────────────────────────────────────
   Uploading a header logo adds `has_site_logo` to <body>, which
   switches on a parent-theme rule the header never matched before:

     .has_site_logo .pkp_head_wrapper { width: 728/952/1160px;
                                        margin: 0 auto;
                                        padding-left: 0 }

   Two classes beat our single-class .pkp_head_wrapper rule, so the
   header quietly re-boxed itself into a centred 1160px column and
   dropped the 48px gutters — which is why the logo sat ~65px in
   from the edge on a wide screen while nothing else moved.

   Matching that specificity puts the header back to full width.
   ─────────────────────────────────────────────────────────────── */

body.has_site_logo .pkp_head_wrapper {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 14px 48px 0 !important;
}

@media (max-width: 992px) {
  body.has_site_logo .pkp_head_wrapper {
    padding: 12px 24px 8px !important;
  }

  /* Below 992px the parent positions .pkp_site_name absolutely and
     pins its wrapper to a fixed 2.857rem (40px). The logo's line
     box is 51px, so it overflowed the header by 9px and left no
     room beneath it. `height: auto` is not an option — the wrapper
     would collapse to nothing, its only child being absolute — so
     the height is raised instead. Together with the padding above
     that gives ~15px of white under the mark. */
  body.has_site_logo .pkp_site_name_wrapper {
    height: 46px;
  }
}

/* Render at the file's own size — 443x69 — and never above it.
   max-width lets it shrink to fit a phone; the max-height stops any
   inherited rule scaling it up (the parent theme allows 80px). */
body.has_site_logo .pkp_site_name .is_img img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 69px;
}

/* ── DESKTOP TYPE SCALE ──────────────────────────────────────────
   Everything in this theme is sized in rem, so lifting the root
   from the parent's 14px to 15px on desktop scales the whole
   reading scale by 7% in one move — abstract 13.0→14.0px, article
   title 29.4→31.5px — without touching the px-based layout
   (gutters, rail width, ribbon height) or the phone and tablet
   sizes, which you said already read well.
   ─────────────────────────────────────────────────────────────── */

@media (min-width: 993px) {
  html { font-size: 15px; }
}

/* ── ARTICLE RAIL — LICENCE CARD ─────────────────────────────────
   The licence block carries ~865 characters of copyright-transfer
   text, which in a 320px rail rendered 632px tall — taller than
   everything else in the rail put together.

   Three changes bring it to ~447px with the text still fully
   readable and nothing hidden: a narrower rail, a smaller type
   size for this card only, and a tighter line-height. That last
   one needs !important and a selector reaching the paragraphs
   directly: the parent sets `.pkp_structure_main p` to a fixed
   1.785rem line-height, which a rule on the card itself can't
   reach.

   If you want it shorter still, the text comes from OJS settings
   (Settings → Distribution → Permissions → Copyright notice),
   not from CSS.
   ─────────────────────────────────────────────────────────────── */

@media (min-width: 993px) {
  .obj_article_details .entry_details {
    flex: 0 0 288px;
    width: 288px;
    max-width: 288px;
  }

  .entry_details .item.copyright {
    font-size: .78rem;
    padding: 16px !important;
  }

  .entry_details .item.copyright p {
    line-height: 1.55 !important;
    margin: 0 0 8px !important;
  }

  .entry_details .item.copyright img {
    width: 72px;
    height: auto;
  }
}

/* ── FOOTER TEXT CONTRAST ────────────────────────────────────────
   The muted whites were set against the old flat near-black. On
   the gradient — which climbs to --ej-maroon at the foot — they
   were reading as grey mud, the column headings worst at 3.0:1.
   Brightened, measured against the gradient at each block's own
   height: body 5.8→10.6, headings 3.0→6.6, links 6.4→11.0.
   ─────────────────────────────────────────────────────────────── */

.pkp_footer_content {
  color: rgba(255,255,255,.78);
}

.pkp_footer_content .ej-foot-col h4 {
  color: rgba(255,255,255,.60);
}

.pkp_footer_content a {
  color: rgba(255,255,255,.85);
}

/* ── LOGO SIZE ───────────────────────────────────────────────────
   The file is 443x69. Capped to 55px tall on desktop (20% down)
   and 35px on tablet and phone (50%), where the full-size mark was
   crowding the hamburger and the header.
   ─────────────────────────────────────────────────────────────── */

body.has_site_logo .pkp_site_name .is_img img {
  max-height: 55px;
}

@media (max-width: 992px) {
  body.has_site_logo .pkp_site_name .is_img img {
    max-height: 35px;
  }
}

/* ── INDEXING BADGES AS LOGOS ────────────────────────────────────
   When an .ej-badge holds an <img> instead of a word, it stops
   being a text pill and becomes a logo tile.

   The six marks are all 57px tall in the file, so giving them one
   height keeps them on a single baseline and preserves their
   relative weight; only the tile widths differ.

   Full colour rather than the greyscale used for bare <img> marks
   above — flattened, a pale wordmark like Scopus's all but
   disappeared on white. For greyscale, add
   `filter: grayscale(1)` to the img rule below.

   The hover on the text pills fills the tile black, which would
   swallow a dark logo, so image tiles get their own hover: the
   border goes maroon and the mark comes up to full opacity.
   ─────────────────────────────────────────────────────────────── */

.pkp_footer_content .ej-badge:has(img) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  line-height: 0;
  /* The tile takes its height from the mark. min-height holds the
     row level on a narrow screen, where a wide mark (Web of
     Science) shrinks to fit and would otherwise sit in a shorter
     tile than its neighbours. */
  height: auto;
  min-height: 56px;
  min-width: 0;
  /* No outline at rest — the marks stand on their own. The border
     is kept at 1px and merely made transparent so nothing shifts
     by a pixel when it reappears on hover. */
  border-color: transparent;
  transition: border-color .2s;
}

.pkp_footer_content .ej-badge img {
  display: block;
  height: 40px;          /* 30% down from the files' own 57px */
  width: auto;
  max-width: 100%;       /* shrinks further only if the screen demands it */
  filter: none;
  opacity: .9;
  transition: opacity .2s;
}

.pkp_footer_content a.ej-badge:has(img):hover,
.pkp_footer_content a.ej-badge:has(img):focus {
  background: transparent;
  border-color: var(--ej-maroon);
}

.pkp_footer_content a.ej-badge:has(img):hover img,
.pkp_footer_content a.ej-badge:has(img):focus img {
  opacity: 1;
}

/* No small-screen override: 26px is already modest, and the marks
   stay legible at that size on a phone. The tiles simply wrap. */

/* ── BREADCRUMBS OFF ON INTERIOR PAGES ───────────────────────────
   Built-in OJS pages render a breadcrumb above the title; Static
   Pages have none, and no CSS can invent one — there is no link
   data to work with. Hiding it is what makes the two page types
   open identically: ribbon, then title.

   Article pages keep theirs, where the trail carries the issue the
   article belongs to. Add :not(.pkp_page_article) → remove it, to
   hide those too.
   ─────────────────────────────────────────────────────────────── */

body:not(.pkp_page_index):not(.pkp_page_article) .cmp_breadcrumbs {
  display: none;
}

/* ── STATIC PAGES: THE REPEATED TITLE ────────────────────────────
   Static Pages prints the page title itself, and two pages then
   open their content with the same title again:

     Guide for Authors   h2 "Guide for authors" + h1 "Guide for Authors"
     Aims and Scope      h2 "Aims and Scope"    + h1 "Aim & Scope"

   Where that happens the content's own h1 wins and the plugin's h2
   is dropped — the h1 is the wording you actually wrote, and it
   takes the interior-page title styling above (2.1rem, --ej-text,
   rule beneath) without any further rules.

   :has(+ h1) is what keeps this safe. Editorial Board and AI
   Policy have no h1 in their content, so their h2 is the only
   title they have and stays exactly as it is.
   ─────────────────────────────────────────────────────────────── */

.pkp_structure_main .page > h2:first-child:has(+ h1) {
  display: none;
}