/* =============================================================================
   Indonesian Community Empowerment Journal — "Tosca" skin
   Loaded as the journal style sheet (STYLE_SEQUENCE_LATE), so it lands after
   the compiled Default-theme CSS and wins without needing !important tricks.
   Built for OJS 3.5 Default theme. Palette: deep tosca + gold.
   ========================================================================== */

:root {
  --ice-900:#04262b; --ice-800:#083a41; --ice-700:#0b545c;
  --ice-600:#0d7d86; --ice-500:#12a09c; --ice-400:#1fbdb0; --ice-300:#5fded0;
  --gold-700:#8a6d1f; --gold-500:#c9a63c; --gold-300:#e8cf7a;

  --ink:#0b2b30; --ink-soft:#3f5f64; --ink-mute:#6b878b;
  --surface:#ffffff; --canvas:#eef5f5; --line:#dbe8e8;

  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --shadow-1:0 1px 2px rgba(4,38,43,.06), 0 6px 18px rgba(4,38,43,.07);
  --shadow-2:0 2px 4px rgba(4,38,43,.08), 0 14px 34px rgba(4,38,43,.12);
  --gold-rule:linear-gradient(90deg,var(--gold-700) 0%,var(--gold-300) 42%,var(--gold-300) 58%,var(--gold-700) 100%);
}

/* ---------- page shell ---------------------------------------------------- */
.pkp_structure_page { background:var(--canvas); }
body { color:var(--ink-soft); }

/* ---------- 1. header ----------------------------------------------------- */
/* Gloss is three stacked layers: a faint node motif (community), a specular
   radial highlight, then the tosca ramp. */
.pkp_structure_head {
  position:relative; border-bottom:0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1'%3E%3Cpath d='M32 6 L58 20 L58 44 L32 58 L6 44 L6 20 Z'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Ccircle cx='32' cy='6' r='1.6'/%3E%3Ccircle cx='58' cy='20' r='1.6'/%3E%3Ccircle cx='58' cy='44' r='1.6'/%3E%3Ccircle cx='32' cy='58' r='1.6'/%3E%3Ccircle cx='6' cy='44' r='1.6'/%3E%3Ccircle cx='6' cy='20' r='1.6'/%3E%3C/g%3E%3C/svg%3E") repeat,
    radial-gradient(ellipse at 16% -20%, rgba(95,222,208,.34) 0%, transparent 58%),
    /* Deep at both ends with the tosca glow off-centre: a single dark→bright
       ramp washed out on the right once the header got this wide. */
    linear-gradient(115deg, var(--ice-900) 0%, var(--ice-800) 24%, var(--ice-600) 52%,
                    var(--ice-700) 74%, var(--ice-900) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.pkp_structure_head::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:var(--gold-rule);
}
.pkp_head_wrapper { position:relative; z-index:1; }

.pkp_site_name_wrapper {
  display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap;
  padding-top:1.15rem; padding-bottom:1.15rem;
}
/* logo sits on a white plate so the artwork keeps its own contrast */
.pkp_site_name .is_img {
  display:inline-block; line-height:0; background:#fff; padding:7px;
  border-radius:var(--r-sm); box-shadow:0 8px 26px rgba(0,0,0,.3);
}
.pkp_site_name .is_img img { max-height:120px; width:auto; border-radius:3px; }
.pkp_site_name a, .pkp_site_name { color:#fff; }

/* ---------- 2. navigation ------------------------------------------------- */
/* The nav sits inside the centred head wrapper, so its band stopped at the
   wrapper edge and read as a floating stripe. Bleed it to the viewport while
   keeping the links on the same grid as the content. */
.pkp_navigation_primary_row {
  background:linear-gradient(180deg, rgba(4,38,43,.55) 0%, rgba(4,38,43,.80) 100%);
  border-top:1px solid rgba(255,255,255,.10);
  margin-left:calc(-50vw + 50%); margin-right:calc(-50vw + 50%);
  padding-left:calc(50vw - 50%); padding-right:calc(50vw - 50%);
}
.pkp_navigation_primary > li > a,
.pkp_navigation_user > li > a {
  color:#eafaf8; font-weight:600; letter-spacing:.01em; position:relative;
}
.pkp_navigation_primary > li > a::after {
  content:""; position:absolute; left:1rem; right:1rem; bottom:.35rem; height:2px;
  background:var(--gold-300); transform:scaleX(0); transform-origin:left;
  transition:transform .18s ease;
}
.pkp_navigation_primary > li > a:hover::after,
.pkp_navigation_primary > li > a:focus::after { transform:scaleX(1); }
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_user > li > a:hover { color:#fff; background:rgba(255,255,255,.06); }

.pkp_navigation_primary ul li a { color:var(--ink); }
.pkp_navigation_primary ul { border-top:3px solid var(--gold-500); box-shadow:var(--shadow-2); }

/* "Make a Submission" is the last top-level item and the page's primary call to
   action, so it reads as a button rather than another nav link. */
.pkp_navigation_primary > li:last-child > a {
  margin:.35rem .3rem; padding:.42rem 1rem; border-radius:var(--r-sm);
  background:linear-gradient(180deg, var(--gold-500) 0%, var(--gold-700) 100%);
  color:#241d05; font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 2px 6px rgba(4,38,43,.25);
}
.pkp_navigation_primary > li:last-child > a:hover,
.pkp_navigation_primary > li:last-child > a:focus {
  filter:brightness(1.07); color:#241d05; background:linear-gradient(180deg, var(--gold-500) 0%, var(--gold-700) 100%);
}
.pkp_navigation_primary > li:last-child > a::after { display:none; }

.pkp_search input[type="search"], .pkp_search .search_controls { color:#fff; }
.pkp_navigation_search_wrapper a { color:#eafaf8; }

/* ---------- 3. layout ----------------------------------------------------- */
/* The theme pins the container to a fixed 1160px. With a 320px sidebar and a
   300px metadata rail that left the article body at ~310px — narrower than its
   own metadata. Let the container use the viewport and cap it instead. */
.pkp_structure_content {
  width:100% !important; max-width:1400px; margin:0 auto; padding:1.6rem 1rem 3rem;
}

/* The template stamps .has_sidebar even when no sidebar block exists, leaving a
   quarter of the page empty. Give the width back when the column is absent. */
.pkp_structure_content.has_sidebar:not(:has(.pkp_structure_sidebar)) .pkp_structure_main {
  width:100%; float:none;
}
/* When the sidebar IS present, floats can't be used: the theme emits the
   sidebar *after* main in the source, so float:right drops it below the whole
   article list. Flex puts them side by side regardless of source order. */
.pkp_structure_content.has_sidebar:has(.pkp_structure_sidebar) {
  display:flex; gap:1.5rem; align-items:flex-start;
}
.pkp_structure_content.has_sidebar:has(.pkp_structure_sidebar) .pkp_structure_main {
  flex:1 1 auto; width:auto; min-width:0; float:none;
}
.pkp_structure_content.has_sidebar:has(.pkp_structure_sidebar) .pkp_structure_sidebar {
  flex:0 0 320px; width:320px; float:none;
}

/* ---------- 3b. sidebar blocks ------------------------------------------- */
/* Bioscmed-style: a titled card — solid header bar with a gold rule under it,
   white body. The theme puts all block markup inside .content, so the leading
   heading is pulled full-bleed with negative margins to become the bar. */
.pkp_structure_sidebar .pkp_block {
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-1); padding:0; margin-bottom:1.1rem;
  overflow:hidden;
}
.pkp_structure_sidebar .pkp_block .content { padding:1rem 1.15rem; }

.pkp_structure_sidebar .pkp_block .content > h1:first-child,
.pkp_structure_sidebar .pkp_block .content > h2:first-child,
.pkp_structure_sidebar .pkp_block .content > h3:first-child {
  margin:-1rem -1.15rem 1rem !important;
  padding:.72rem 1.15rem !important;
  background:linear-gradient(135deg, var(--ice-800) 0%, var(--ice-600) 100%);
  border-bottom:3px solid var(--gold-500);
  color:#fff !important; font-size:.92rem !important; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; text-align:left !important;
}
/* the old inline rules painted this text white for a teal table background */
.pkp_structure_sidebar .pkp_block .content h1 span,
.pkp_structure_sidebar .pkp_block .content h2 span,
.pkp_structure_sidebar .pkp_block .content h3 span { color:inherit !important; }

/* link lists */
.icej-linklist { list-style:none; margin:0; padding:0; }
.icej-linklist li { margin:0; padding:0; border-bottom:1px solid var(--line); }
.icej-linklist li:last-child { border-bottom:0; }
.icej-linklist a {
  display:block; padding:.55rem .6rem .55rem .85rem; position:relative;
  color:var(--ink-soft); font-weight:600; font-size:.87rem; line-height:1.4;
  border-left:3px solid transparent;
  transition:background .14s ease, color .14s ease, border-color .14s ease;
}
.icej-linklist a::before {
  content:"›"; position:absolute; left:.2rem; color:var(--gold-500); font-weight:700;
}
.icej-linklist a:hover, .icej-linklist a:focus {
  background:#eaf5f5; color:var(--ice-700); border-left-color:var(--gold-500);
}

/* indexing logos */
.icej-logogrid {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:.55rem;
}
.icej-logogrid li { margin:0; }
.icej-logogrid a {
  display:flex; align-items:center; justify-content:center; height:100%;
  padding:.5rem; border:1px solid var(--line); border-radius:var(--r-sm);
  background:#fff; transition:border-color .14s ease, box-shadow .14s ease;
}
.icej-logogrid a:hover { border-color:var(--ice-400); box-shadow:var(--shadow-1); }
.icej-logogrid img { max-width:100%; height:auto; display:block; }

.icej-counter { margin:.2rem 0 .6rem !important; }
.icej-counter img { display:block; }
/* Every heading in a block body gets the same quiet treatment... */
.pkp_structure_sidebar .pkp_block .content h1,
.pkp_structure_sidebar .pkp_block .content h2,
.pkp_structure_sidebar .pkp_block .content h3 {
  font-size:.92rem !important; color:var(--ink) !important; text-align:left !important;
  margin:.9rem 0 .5rem !important; padding:0; position:relative;
  text-transform:none; letter-spacing:0; font-weight:700;
}
/* ...but only the block's leading heading carries the gold rule, otherwise a
   block with sub-headings ends up with several competing title bars. */
.pkp_structure_sidebar .pkp_block .content > h1:first-child,
.pkp_structure_sidebar .pkp_block .content > h2:first-child,
.pkp_structure_sidebar .pkp_block .content > h3:first-child,
.pkp_structure_sidebar .pkp_block .content > table h3 {
  font-size:1rem !important; margin:0 0 .8rem !important; padding-bottom:.5rem;
}
.pkp_structure_sidebar .pkp_block .content > h1:first-child::after,
.pkp_structure_sidebar .pkp_block .content > h2:first-child::after,
.pkp_structure_sidebar .pkp_block .content > h3:first-child::after,
.pkp_structure_sidebar .pkp_block .content > table h3::after {
  content:""; position:absolute; left:0; bottom:0; width:46px; height:3px;
  border-radius:2px; background:var(--gold-rule);
}
/* mapmyvisitors.com currently returns HTTP 500, so the widget renders as a
   broken-image icon. Hide it until the block content is updated. */
.pkp_structure_sidebar .pkp_block img[src*="mapmyvisitors"] { display:none; }
/* the block bodies are editor HTML carrying hard-coded #02c7c7 mint */
.pkp_structure_sidebar .pkp_block table {
  width:100% !important; height:auto !important; background:none !important;
  border-collapse:collapse;
}
.pkp_structure_sidebar .pkp_block table td {
  width:auto !important; background:none !important; border:0 !important;
  padding:.15rem 0 !important; text-align:left !important;
}
.pkp_structure_sidebar .pkp_block table td p { margin:0 !important; }
.pkp_structure_sidebar .pkp_block table td a {
  display:block; padding:.5rem .7rem; border-radius:var(--r-sm);
  color:var(--ink-soft) !important; font-weight:600; font-size:.88rem;
  border-left:3px solid transparent; transition:background .14s ease, border-color .14s ease, color .14s ease;
}
.pkp_structure_sidebar .pkp_block table td a:hover {
  background:#eaf5f5; color:var(--ice-700) !important; border-left-color:var(--gold-500);
}
.pkp_structure_sidebar .pkp_block img { max-width:100%; height:auto; }
.pkp_structure_sidebar .pkp_block pre {
  background:none; border:0; padding:0; margin:0; white-space:normal;
  font-family:inherit;
}
.pkp_structure_sidebar .pkp_block pre a, .pkp_structure_sidebar .pkp_block p > a {
  color:var(--ice-600); font-weight:600;
}

/* ---------- 3b-i. Accreditation card ------------------------------------- */
/* Figures are quoted verbatim from decree 355/DST/D.D1/HM.01.01/2026, annex
   entry 979 — rank 4, valid Vol. 5 No. 2 (2025) to Vol. 10 No. 1 (2030). */
.icej-accred__badge {
  background:linear-gradient(135deg, var(--ice-800) 0%, var(--ice-600) 100%);
  border:1px solid rgba(4,38,43,.2); border-radius:var(--r-md);
  padding:.85rem 1rem; text-align:center; margin-bottom:.9rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.icej-accred__badge strong {
  display:block; font-size:1.75rem; line-height:1.1; color:var(--gold-300);
  font-weight:700; letter-spacing:.02em;
}
.icej-accred__badge span {
  display:block; margin-top:.2rem; font-size:.7rem; letter-spacing:.06em;
  text-transform:uppercase; color:#dff2f0;
}
.icej-accred__meta { margin:0; padding:0; }
.icej-accred__meta dt {
  font-size:.68rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-mute); margin-top:.6rem;
}
.icej-accred__meta dt:first-child { margin-top:0; }
.icej-accred__meta dd {
  margin:.1rem 0 0; font-size:.85rem; line-height:1.45;
  color:var(--ink); font-weight:600; overflow-wrap:anywhere;
}
.icej-accred__btn {
  display:block; margin-top:.95rem; padding:.6rem .8rem; border-radius:var(--r-sm);
  background:linear-gradient(180deg, var(--gold-500) 0%, var(--gold-700) 100%);
  border:1px solid rgba(4,38,43,.25);
  color:#241d05 !important; font-weight:700; font-size:.85rem; text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), 0 2px 6px rgba(4,38,43,.18);
}
.icej-accred__btn span {
  display:block; margin-top:.15rem; font-size:.68rem; font-weight:600; opacity:.8;
}
.icej-accred__btn:hover { filter:brightness(1.06); color:#241d05 !important; }
.icej-accred__profile {
  display:block; margin-top:.7rem; padding-top:.7rem;
  border-top:1px solid var(--line);
  font-size:.82rem; font-weight:600; color:var(--ice-600);
}
.icej-accred__profile:hover { color:var(--ice-800); }

/* ---------- 3b-ii. Citedness in Scopus panel ----------------------------- */
.icej-cite__figure {
  background:linear-gradient(135deg, var(--ice-800) 0%, var(--ice-600) 100%);
  color:#fff; border-radius:var(--r-md); padding:.9rem 1rem; text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.icej-cite__figure strong {
  display:block; font-size:2.3rem; line-height:1.05; color:var(--gold-300);
  font-weight:700;
}
.icej-cite__figure span { display:block; font-size:.76rem; margin-top:.25rem; color:#dff2f0; }
.icej-cite__stats { list-style:none; margin:.85rem 0 0; padding:0; }
.icej-cite__stats li {
  display:flex; justify-content:space-between; align-items:baseline;
  padding:.4rem 0; border-bottom:1px solid var(--line); font-size:.85rem;
}
.icej-cite__stats li:last-child { border-bottom:0; }
.icej-cite__stats span { color:var(--ink-mute); }
.icej-cite__stats b { color:var(--ink); font-size:.95rem; }
.icej-cite__list { list-style:none; margin:.7rem 0 0; padding:.7rem 0 0; border-top:1px solid var(--line); }
.icej-cite__list li {
  display:flex; gap:.5rem; justify-content:space-between; align-items:baseline;
  padding:.28rem 0; font-size:.79rem; line-height:1.35;
}
.icej-cite__src { color:var(--ink-soft); }
.icej-cite__yr { color:var(--ink-mute); flex:0 0 auto; font-variant-numeric:tabular-nums; }
.icej-cite__note {
  margin:.8rem 0 0 !important; padding-top:.6rem; border-top:1px solid var(--line);
  font-size:.72rem !important; line-height:1.45 !important; color:var(--ink-mute);
}

/* ---------- 3c. homepage section order ----------------------------------- */
/* Journal Information (additionalHomeContent) is emitted after the issue TOC;
   the journal wants its identity card read first. */
.page_index_journal { display:flex; flex-direction:column; }
.page_index_journal > .additional_content { order:-1; margin-bottom:2rem; }

/* ---------- 4. main surface ---------------------------------------------- */
.pkp_structure_main {
  background:var(--surface); border-radius:var(--r-lg);
  box-shadow:inset 4px 0 0 var(--ice-600), var(--shadow-1);
  padding:1.8rem 2rem 2.4rem;
}
/* The theme paints 1px full-height column guides via these pseudo-elements.
   They are invisible on its flat background but cut straight through the card. */
.pkp_structure_main::before, .pkp_structure_main::after { display:none; }

/* The theme bleeds these rows past the container with -30px side margins so
   their top border can span a padding-less column. Inside a rounded card that
   bleed pokes 32px out of both edges as a stray hairline. */
.pkp_structure_main .row,
.pkp_structure_main .issues_archive {
  margin-left:0; margin-right:0; width:auto;
  border-top-color:var(--line);
}

/* ---------- 5. headings --------------------------------------------------- */
.pkp_structure_main h1, .pkp_structure_main h2,
.pkp_structure_main h3, .obj_article_details .page_title {
  color:var(--ink); font-weight:700; letter-spacing:-.01em;
}
.pkp_structure_main > .page > h1,
.page_index_journal section > h2,
.obj_issue_toc > h2 {
  position:relative; padding-bottom:.55rem; margin-bottom:1.2rem;
}
.pkp_structure_main > .page > h1::after,
.page_index_journal section > h2::after,
.obj_issue_toc > h2::after {
  content:""; position:absolute; left:0; bottom:0; width:62px; height:3px;
  border-radius:2px; background:var(--gold-rule);
}

/* ---------- 6. breadcrumbs ------------------------------------------------ */
.cmp_breadcrumbs {
  background:var(--canvas); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:.5rem .9rem; margin-bottom:1.4rem;
  font-size:.85rem; color:var(--ink-mute);
}
.cmp_breadcrumbs a { color:var(--ice-600); font-weight:600; }
.cmp_breadcrumbs a:hover { color:var(--ice-800); }

/* ---------- 7. current issue --------------------------------------------- */
.current_issue_title { font-size:1.15rem; font-weight:700; color:var(--ink); }
/* the markup class is .cover (not .cover_image); left unconstrained it renders
   the issue cover at ~440px tall and swamps the page */
.current_issue .cover img, .obj_issue_toc .cover img,
.obj_issue_summary .cover img, .obj_article_details .cover img {
  max-width:200px; height:auto; border-radius:var(--r-md); box-shadow:var(--shadow-2);
}
.current_issue .cover, .obj_issue_toc .cover { max-width:200px; }
/* cover + publication meta side by side instead of stacked */
.current_issue .current_issue_title + * { margin-top:.75rem; }

/* ---------- 8. article cards --------------------------------------------- */
/* .obj_article_summary is nested inside .cmp_article_list > li — styling both
   drew a card inside a card. The <li> only carries spacing. */
.cmp_article_list > li { list-style:none; margin:0 0 1rem; padding:0; border:0; background:none; }
.obj_article_summary {
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--ice-500);
  border-radius:var(--r-md); padding:1.1rem 1.25rem;
  box-shadow:var(--shadow-1); transition:transform .16s ease, box-shadow .16s ease, border-left-color .16s ease;
}
.obj_article_summary:hover {
  transform:translateY(-2px); box-shadow:var(--shadow-2); border-left-color:var(--gold-500);
}
.obj_article_summary > h3 { margin:0 0 .35rem; font-size:1.02rem; line-height:1.45; }
.obj_article_summary > h3 a { color:var(--ink); }
.obj_article_summary > h3 a:hover { color:var(--ice-600); }
.obj_article_summary .authors { color:var(--ink-mute); font-size:.88rem; }
.obj_article_summary .pages { color:var(--ink-mute); font-size:.82rem; }

/* ---------- 8b. article metrics badges ------------------------------------ */
/* Injected by ice-stats.js from stats.json (views + downloads from OJS,
   citations from OpenAlex). Kept quiet so they never compete with the title. */
.icej-stats {
  display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; align-items:center;
  margin-top:.8rem; padding-top:.7rem; border-top:1px solid var(--line);
  font-size:.82rem; color:var(--ink-mute);
}
.icej-stats__item { display:inline-flex; align-items:center; gap:.35rem; }
.icej-stats svg { width:15px; height:15px; fill:var(--ice-500); flex:0 0 auto; }
.icej-stats__value { color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }
.icej-stats__item--c svg { fill:var(--gold-500); }

/* the article page shows them as a small card in the metadata rail */
.icej-stats-block {
  margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--line);
}
.icej-stats-block__title {
  font-size:.78rem !important; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ice-700) !important; font-weight:700; margin:0 0 .2rem !important;
}
.icej-stats-block .icej-stats {
  flex-direction:column; align-items:flex-start; gap:.45rem;
  border-top:0; padding-top:.35rem; margin-top:0;
}
.icej-stats-block .icej-stats__item { width:100%; justify-content:flex-start; }
.icej-stats-block .icej-stats__label { flex:1 1 auto; }

/* ---------- 9. galley / PDF buttons — the glossy accent ------------------- */
.obj_galley_link {
  display:inline-flex; align-items:center; gap:.4rem;
  background:linear-gradient(180deg, var(--ice-500) 0%, var(--ice-700) 100%);
  color:#fff; border:1px solid rgba(4,38,43,.28); border-radius:var(--r-sm);
  padding:.42rem .95rem; font-weight:600; font-size:.85rem; letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 2px 6px rgba(4,38,43,.20);
  transition:filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.obj_galley_link:hover, .obj_galley_link:focus {
  filter:brightness(1.08); color:#fff; transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38), 0 4px 12px rgba(4,38,43,.26);
}

/* ---------- 10. article detail page -------------------------------------- */
/* The theme hard-codes 560px + 300px float widths, sized for the narrow
   with-sidebar column. At full width that left ~240px of dead space, so swap
   the floats for a flex row: body text fills, metadata keeps a fixed rail. */
.obj_article_details .row { display:flex; gap:2rem; align-items:flex-start; }
/* flex-basis 0 (not auto) so the body claims all remaining space rather than
   sizing itself from its content and staying narrow */
.obj_article_details .row > .main_entry {
  flex:1 1 0; width:auto; max-width:none; min-width:0; float:none;
}
.obj_article_details .row > .entry_details { flex:0 0 280px; width:280px; min-width:0; float:none; }
@media (max-width:1100px) {
  .obj_article_details .row { display:block; }
  .obj_article_details .row > .main_entry,
  .obj_article_details .row > .entry_details { width:auto; max-width:none; float:none; }
  .obj_article_details .row > .entry_details { margin-top:1.5rem; border-left:0; padding-left:0; }
}

/* ---------- 10a. kill the theme's stray frame rules ----------------------- */
/* These made sense on the theme's flat page but read as loose lines in a card:
   .row draws a border top AND bottom — a full-width rule right under the title
   and another under the whole article. */
.obj_article_details .row { border-top:0 !important; border-bottom:0 !important; }
/* .main_entry has a right border and .entry_details a left one. With a gap
   between the columns that is two parallel vertical lines, not one divider.
   Keep a single rule on the rail and let it own the gutter. */
.obj_article_details .row > .main_entry { border-right:0 !important; padding-right:2rem; }
.obj_article_details .row > .entry_details {
  border-left:1px solid var(--line) !important; padding-left:2rem;
}
.obj_article_details .row { gap:0; }
/* the !important above outranks the stacked-layout media query, so the divider
   and its gutter have to be cleared with the same weight once the columns stack */
@media (max-width:1100px) {
  .obj_article_details .row > .entry_details {
    border-left:0 !important; padding-left:0 !important;
  }
  .obj_article_details .row > .main_entry { padding-right:0 !important; }
}

.obj_article_details .page_title { font-size:1.6rem; line-height:1.3; }

/* ---------- 10b. tidier article metadata --------------------------------- */
/* cover art rendered at 240x383 and dominated the metadata rail; the wrapper
   the theme actually uses here is .item.cover_image (not .cover) */
.obj_article_details .item.cover_image img {
  max-width:170px; height:auto; display:block; margin:0 0 .2rem;
  border-radius:var(--r-md); box-shadow:var(--shadow-1);
}
.obj_article_details .item.cover_image { border-top:0; padding-top:0; margin-top:0; }

/* authors: name and affiliation read as one unit, not two loose paragraphs */
.obj_article_details .authors { margin:0; }
.obj_article_details .authors .author {
  padding:.55rem 0; border-bottom:1px solid var(--line);
}
.obj_article_details .authors .author:last-child { border-bottom:0; }
.obj_article_details .authors .author .name {
  display:block; font-size:.95rem; margin-bottom:.1rem;
}
.obj_article_details .authors .author .affiliation {
  display:block; font-size:.85rem; line-height:1.45; color:var(--ink-mute);
}
.obj_article_details .authors .author .orcid { font-size:.8rem; word-break:break-all; }

/* long identifiers must wrap inside a narrow rail instead of overflowing */
.obj_article_details .item.doi .value,
.obj_article_details .item.doi .value a,
.obj_article_details .entry_details a { overflow-wrap:anywhere; }

.obj_article_details .item.keywords .value,
.obj_article_details .item.subject .value { line-height:1.6; }

/* the citation box is dense text; give it room to breathe */
.obj_article_details .item.citation .value,
.obj_article_details .entry_details .citation_display .value { font-size:.85rem; line-height:1.6; }
.obj_article_details .authors .author .name { color:var(--ink); font-weight:700; }
.obj_article_details .authors .author .affiliation { color:var(--ink-mute); font-size:.9rem; }
.obj_article_details .item.doi .value a { color:var(--ice-600); font-weight:600; word-break:break-all; }
/* Every block carried a top AND a bottom border, so neighbouring items drew two
   hairlines with a sliver of gap between them. One rule per boundary. */
.obj_article_details .main_entry .item,
.obj_article_details .entry_details .item {
  border-top:1px solid var(--line); border-bottom:0 !important;
  padding-top:.9rem; padding-bottom:0; margin-top:.9rem; margin-bottom:0;
}
.obj_article_details .main_entry > .item:first-child,
.obj_article_details .entry_details > .item:first-child {
  border-top:0; padding-top:0; margin-top:0;
}
.obj_article_details .item .label {
  color:var(--ice-700); font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.06em;
}
.obj_article_details .abstract { color:var(--ink-soft); line-height:1.75; }

/* ---------- 11. archive / issue list -------------------------------------- */
.obj_issue_summary {
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:1rem 1.15rem; margin-bottom:.9rem; box-shadow:var(--shadow-1);
  transition:transform .16s ease, box-shadow .16s ease;
}
.obj_issue_summary:hover { transform:translateY(-2px); box-shadow:var(--shadow-2); }
.obj_issue_summary h2 a, .obj_issue_summary .title { color:var(--ink); font-weight:700; }
.obj_issue_summary h2 a:hover { color:var(--ice-600); }

/* ---------- 11a. Journal Information (clean markup) ----------------------- */
/* Rewritten from the original inline-styled table, so this needs no !important.
   The legacy rules below still cover the old markup if it is ever restored. */
.icej-journalinfo { margin:0 0 .5rem; }
.icej-journalinfo > h3 {
  color:var(--ink); margin:0 0 .9rem; padding-bottom:.55rem;
  position:relative; font-size:1.15rem;
}
.icej-journalinfo > h3::after {
  content:""; position:absolute; left:0; bottom:0; width:62px; height:3px;
  border-radius:2px; background:var(--gold-rule);
}
.icej-journalinfo table {
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  box-shadow:var(--shadow-1);
}
.icej-journalinfo th, .icej-journalinfo td {
  padding:.72rem 1rem; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line); font-size:.92rem; line-height:1.5;
}
.icej-journalinfo tr:last-child th, .icej-journalinfo tr:last-child td { border-bottom:0; }
.icej-journalinfo th {
  width:34%; background:#eaf5f5; color:var(--ice-700); font-weight:700;
  border-right:1px solid var(--line);
}
.icej-journalinfo td { color:var(--ink-soft); }
.icej-journalinfo a { color:var(--ice-600); font-weight:600; overflow-wrap:anywhere; text-decoration:none; }
.icej-journalinfo a:hover { color:var(--ice-800); text-decoration:underline; }
@media (max-width:767px) {
  .icej-journalinfo th, .icej-journalinfo td {
    padding:.6rem .65rem; font-size:.84rem; overflow-wrap:anywhere;
  }
  .icej-journalinfo th { width:40%; }
}

/* ---------- 11b. legacy editor-authored "Journal Information" block ------- */
/* This table lives in the journal description as raw HTML with inline styles
   (#02C7C7 mint, Georgia). Inline styles outrank stylesheets, so !important is
   the only way to bring it into the palette without editing the content.
   If the block is ever re-authored, these rules simply stop matching. */
/* theme padding + the editor div's margin + the h3's own margin stacked into
   ~90px of dead space above the first heading (worse on a phone) */
.additional_content { padding-top:0 !important; border-top:0 !important; }
.additional_content > div { font-family:inherit !important; margin:0 !important; }
.additional_content h3 {
  color:var(--ink) !important; border-bottom:0 !important; margin-top:0 !important;
  padding-bottom:.55rem !important; position:relative;
}
.additional_content h3::after {
  content:""; position:absolute; left:0; bottom:0; width:62px; height:3px;
  border-radius:2px; background:var(--gold-rule);
}
.additional_content table {
  box-shadow:var(--shadow-1) !important; border-radius:var(--r-md) !important;
  border:1px solid var(--line) !important;
}
.additional_content thead {
  background:linear-gradient(135deg, var(--ice-800) 0%, var(--ice-600) 100%) !important;
}
.additional_content thead th { font-weight:700 !important; letter-spacing:.02em !important; }
.additional_content tbody tr { border-bottom:1px solid var(--line) !important; }
.additional_content tbody tr:last-child { border-bottom:0 !important; }
.additional_content tbody td:first-child {
  background:#eaf5f5 !important; color:var(--ice-700) !important;
  font-weight:700 !important; font-size:.88rem !important;
}
.additional_content tbody td { color:var(--ink-soft) !important; }
.additional_content tbody td strong { color:var(--ink) !important; }
.additional_content a { color:var(--ice-600) !important; }

/* ---------- 11c. "View All Issues" and similar inline actions ------------- */
.read_more {
  display:inline-block; margin-top:.9rem; padding:.45rem 1.1rem;
  border:1px solid var(--ice-500); border-radius:var(--r-sm);
  color:var(--ice-700); font-weight:700; font-size:.86rem;
  transition:background .15s ease, color .15s ease;
}
.read_more:hover, .read_more:focus { background:var(--ice-600); color:#fff; }

/* ---------- 12. generic controls ----------------------------------------- */
.pkp_button, .cmp_button, button.pkp_button, input[type="submit"] {
  background:linear-gradient(180deg, var(--gold-500) 0%, var(--gold-700) 100%);
  border:1px solid rgba(4,38,43,.25); border-radius:var(--r-sm);
  color:#241d05; font-weight:700; letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), 0 2px 6px rgba(4,38,43,.18);
}
.pkp_button:hover, .cmp_button:hover, input[type="submit"]:hover {
  filter:brightness(1.06); color:#241d05;
}
a { color:var(--ice-600); }
a:hover, a:focus { color:var(--ice-800); }

/* ---------- 13. footer ---------------------------------------------------- */
.pkp_structure_footer_wrapper {
  background:linear-gradient(135deg, var(--ice-900) 0%, var(--ice-800) 55%, var(--ice-700) 100%);
  border-top:4px solid transparent; border-image:var(--gold-rule) 1;
  color:#cfe9e7;
}
.pkp_structure_footer { padding:2rem 0; }
.pkp_footer_content { color:#cfe9e7; }
.pkp_footer_content p { margin:.2rem 0; line-height:1.65; }
.pkp_footer_content strong { color:#fff; }
.pkp_footer_content a { color:var(--gold-300); }
.pkp_footer_content a:hover { color:#fff; }
/* PKP asks that the attribution stay, but does not require it; removed on
   request. The OJS/PKP credit remains in the page source and in About. */
.pkp_brand_footer { display:none; }

/* ---------- 14. responsive ------------------------------------------------ */
@media (max-width:767px) {
  /* On mobile the theme absolutely-positions .pkp_site_name inside a 40px-tall
     header. The logo plate is taller than that, so it spilled over the header
     edge and onto the first card. Put it back in normal flow beside the
     hamburger and size it to the bar. */
  .pkp_site_name { position:static !important; transform:none !important; margin:0; }
  /* the wrapper also carries a fixed 40px height, so it would not grow to the
     logo even once the logo was back in flow */
  .pkp_structure_head, .pkp_head_wrapper, .pkp_site_name_wrapper {
    height:auto !important; min-height:0 !important;
  }
  .pkp_site_name_wrapper {
    gap:.7rem; padding-top:.65rem; padding-bottom:.65rem;
    align-items:center; justify-content:flex-start;
  }
  .pkp_site_name .is_img { padding:4px; box-shadow:0 4px 14px rgba(0,0,0,.28); }
  .pkp_site_name .is_img img { max-height:46px; }
  .pkp_structure_main { padding:1.2rem 1.1rem 1.6rem; border-radius:var(--r-md); }
  .pkp_structure_content { padding:1rem .7rem 2rem; }
  .obj_article_details .page_title { font-size:1.28rem; }
  .obj_article_summary { padding:.9rem 1rem; }
  .obj_article_summary > h3 { font-size:.98rem; }
  .obj_galley_link { padding:.5rem 1rem; }          /* keep a 44px tap target */
  .cmp_breadcrumbs { font-size:.8rem; padding:.45rem .7rem; }
  .current_issue .cover img, .obj_issue_toc .cover img { max-width:150px; }
  /* The editor-authored table carries fixed pixel widths and long unbreakable
     strings (titles, emails), so on a phone it ran past the viewport and the
     right-hand column was simply cut off. Force it to wrap instead. */
  .additional_content > div { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .additional_content table {
    font-size:.84rem; table-layout:fixed !important; width:100% !important;
    min-width:0 !important;
  }
  .additional_content tbody td, .additional_content thead th {
    padding:.6rem .65rem !important;
    word-break:break-word; overflow-wrap:anywhere; hyphens:auto;
  }
  .additional_content tbody td:first-child { width:40% !important; }
  .additional_content thead th { font-size:.92rem !important; }
}

/* Stack the sidebar under the content below the two-column breakpoint. */
@media (max-width:900px) {
  .pkp_structure_content.has_sidebar:has(.pkp_structure_sidebar) { display:block; }
  .pkp_structure_content.has_sidebar:has(.pkp_structure_sidebar) .pkp_structure_sidebar {
    width:auto; flex:none; margin-top:1.5rem;
  }
}

/* Wide tables inside editor content must scroll, never widen the page. */
.pkp_structure_main .additional_content { overflow-x:auto; }

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion:reduce) {
  .obj_article_summary, .obj_issue_summary, .obj_galley_link,
  .read_more, .pkp_navigation_primary > li > a::after {
    transition:none;
  }
  .obj_article_summary:hover, .obj_issue_summary:hover,
  .obj_galley_link:hover { transform:none; }
}

/* ==========================================================================
   Journal Assistant — floating help widget (ice-assistant.js)
   ========================================================================== */
.icej-assist { position:fixed; right:1.15rem; bottom:1.15rem; z-index:9000; }

.icej-assist__launcher {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.7rem 1.1rem; border:0; border-radius:999px; cursor:pointer;
  background:linear-gradient(135deg, var(--ice-800) 0%, var(--ice-600) 100%);
  color:#fff; font-weight:700; font-size:.88rem; letter-spacing:.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 6px 20px rgba(4,38,43,.34);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.icej-assist__launcher:hover { filter:brightness(1.08); transform:translateY(-1px); }
.icej-assist__launcher:focus-visible { outline:3px solid var(--gold-300); outline-offset:2px; }
.icej-assist__launcher svg { width:19px; height:19px; fill:var(--gold-300); flex:0 0 auto; }
.icej-assist.is-open .icej-assist__launcher { display:none; }

/* the panel sets display:flex, which would otherwise beat the [hidden]
   attribute's display:none and leave it permanently open */
.icej-assist__panel[hidden] { display:none !important; }
.icej-assist__panel {
  width:min(23rem, calc(100vw - 2rem));
  max-height:min(32rem, calc(100vh - 3rem));
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 18px 48px rgba(4,38,43,.30);
}
.icej-assist__head {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.8rem 1rem; border-bottom:3px solid var(--gold-500);
  background:linear-gradient(135deg, var(--ice-800) 0%, var(--ice-600) 100%);
}
.icej-assist__head h2 {
  margin:0; color:#fff; font-size:.92rem; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase;
}
.icej-assist__close {
  background:none; border:0; color:#cfe9e7; font-size:1.5rem; line-height:1;
  cursor:pointer; padding:0 .2rem;
}
.icej-assist__close:hover { color:#fff; }

.icej-assist__body { overflow-y:auto; padding:.9rem 1rem 1rem; }
.icej-assist__intro { margin:0 0 .8rem; font-size:.8rem; color:var(--ink-mute); line-height:1.5; }
.icej-assist__topics { list-style:none; margin:0; padding:0; }
.icej-assist__topic { border-bottom:1px solid var(--line); }
.icej-assist__topic:last-child { border-bottom:0; }

.icej-assist__q {
  display:flex; align-items:flex-start; gap:.5rem; width:100%;
  background:none; border:0; cursor:pointer; text-align:left;
  padding:.6rem 0; color:var(--ink); font-weight:600; font-size:.86rem;
  line-height:1.45; font-family:inherit;
}
.icej-assist__q:hover { color:var(--ice-600); }
.icej-assist__chev {
  width:14px; height:14px; fill:var(--gold-500); flex:0 0 auto; margin-top:.15rem;
  transition:transform .16s ease;
}
.icej-assist__q[aria-expanded="true"] .icej-assist__chev { transform:rotate(90deg); }

.icej-assist__a { padding:0 0 .75rem; }
.icej-assist__a p {
  margin:0 0 .5rem; font-size:.82rem; line-height:1.6; color:var(--ink-soft);
}
.icej-assist__links { display:flex; flex-wrap:wrap; gap:.35rem; }
.icej-assist__link {
  display:inline-block; padding:.3rem .6rem; border-radius:var(--r-sm);
  background:#eaf5f5; color:var(--ice-700) !important;
  font-size:.76rem; font-weight:700; text-decoration:none;
}
.icej-assist__link:hover { background:var(--ice-600); color:#fff !important; }

.icej-assist__foot {
  display:flex; gap:.5rem; padding:.75rem 1rem;
  border-top:1px solid var(--line); background:var(--canvas);
}
.icej-assist__cta {
  flex:1 1 0; text-align:center; padding:.5rem .6rem; border-radius:var(--r-sm);
  font-size:.8rem; font-weight:700; text-decoration:none;
  border:1px solid var(--ice-500); color:var(--ice-700) !important; background:#fff;
}
.icej-assist__cta:hover { background:var(--ice-600); color:#fff !important; }
.icej-assist__cta--wa {
  background:linear-gradient(180deg, var(--gold-500) 0%, var(--gold-700) 100%);
  border-color:rgba(4,38,43,.25); color:#241d05 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42);
}
.icej-assist__cta--wa:hover { filter:brightness(1.06); color:#241d05 !important; }

@media (max-width:600px) {
  .icej-assist { right:.7rem; bottom:.7rem; left:.7rem; }
  .icej-assist__panel { width:100%; max-height:min(28rem, calc(100vh - 2rem)); }
  .icej-assist__launcher { float:right; }
  .icej-assist__launcher-text { display:none; }   /* icon-only on small screens */
  .icej-assist__launcher { padding:.8rem; }
  .icej-assist__launcher svg { width:22px; height:22px; }
}

@media (prefers-reduced-motion:reduce) {
  .icej-assist__launcher, .icej-assist__chev { transition:none; }
  .icej-assist__launcher:hover { transform:none; }
}