/* ============================================================
   JIAPD — Custom Journal Stylesheet (OJS 3.3, Default Theme)
   Design: Handoff v2 (Concept 5a/6a-c)
   Palette: navy #0a2a5e + red #c41f27 + cream canvas
   Fonts:  DM Sans (UI/headings) + Source Serif 4 (prose)
   Constraint: PURE CSS via Journal Manager. No theme, no .tpl.
   Location: public/journals/1/styleSheet.css — edit & hard refresh.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&display=swap');

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Palette — source: JIAPD cover (cobalt + red + navy) */
  --nav:      #0a2a5e;   /* masthead accents, footer bg, headings on light */
  --nav2:     #071e45;   /* footer bottom bar */
  --accent:   #c41f27;   /* PRIMARY — links, buttons, rules, active */
  --accent-d: #9e141b;   /* button hover */
  --red:      #d81e27;   /* wordmark "JI", status dot */
  --band-bg:  #f7e4e2;   /* CTA band blush, blush cards */
  --band-ink: #0a2a5e;   /* text on band */
  --cream:    #f7f6f2;   /* page canvas */
  --ink:      #10233f;   /* primary text / titles */
  --body:     #28374f;   /* body text */
  --rule:     #e6e0d3;   /* hairline borders / dividers */
  --card-head:#faf8f2;   /* sidebar card header rows */
  --muted:    #8a8579;   /* meta labels, captions */
  --crumb-bg: #efeee8;   /* breadcrumb bar */
  --foot-link:#b9c6e0;   /* footer secondary text/link */
  --oa-green: #1c6b3d;   /* Open Access badge text */
  --oa-bg:    #d6ecdd;   /* Open Access badge bg */
  --jbadge:   #1255b2;   /* "Journal" tag pill text */
  --jbadge-bg:#c9d6ee;   /* "Journal" tag pill bg */
  --surface:  #ffffff;

  /* Fonts */
  --font-sans:  'DM Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* Type scale (homepage @1440) */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.8125rem;  /* 13 */
  --text-meta: 0.875rem;   /* 14 */
  --text-nav:  0.9375rem;  /* 15 */
  --text-base: 1rem;       /* 16 */
  --text-md:   1.0625rem;  /* 17 */
  --text-lg:   1.1875rem;  /* 19 subtitle */
  --text-xl:   1.25rem;    /* 20 sub-head */
  --text-2xl:  1.375rem;   /* 22 list row */
  --text-3xl:  1.75rem;    /* 28 section head */
  --text-4xl:  2.125rem;   /* 34 H1 */

  /* Line height */
  --lh-tight:   1.12;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-prose:   1.72;

  /* Spacing (4px rhythm) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;

  /* Layout */
  --container: 1320px;
  --gutter: clamp(1rem, 3vw, 40px);
  --sidebar-w: 300px;
  --layout-gap: 64px;
  --nav-gap: 2rem;   /* uniform gap: between nav items AND nav↔search */
  --header-h: 99px;  /* masthead 96px + 3px red border */
  --band-h: 75px;    /* CTA band height (desktop) */

  /* Shape */
  --radius-shell: 6px;
  --radius: 8px;
  --radius-pill: 999px;
  --shadow-card: 0 3px 10px rgba(10,30,70,.10);
  --shadow-card-h: 0 6px 18px rgba(10,30,70,.14);
  --shadow-cover: 0 6px 22px rgba(10,30,70,.22);
  --shadow-band: 0 -6px 22px rgba(10,30,70,.12);

  /* Motion */
  --ease: .18s ease;
}

/* ============================================================
   2. BASE
   ============================================================ */
html {
  font-size: 100%;   /* neutralise OJS 14px base → 16px */
  overflow-x: clip;
}
/* FOUC guard — see the matching comment on init() in custom.js. Hides
   content until the custom.js restructuring (hero, article/issue header
   bands, breadcrumb hoist) has finished, so visitors don't see the raw
   pre-move layout (cover in its original spot, soon-to-be-removed article
   info, etc.) flash before JS rearranges it. */
html.jiapd-loading .pkp_structure_content,
html.jiapd-loading .jiapd-crumb-bar,
html.jiapd-loading .jiapd-cta-band {
  visibility: hidden;
}
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--body);
  background: var(--cream);
}
*, *::before, *::after { box-sizing: border-box; }

.pkp_structure_page { background: var(--cream); max-width: none; }

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--ink);
  letter-spacing: -0.01em;
}
/* Default theme forces Noto Sans via `.pkp_structure_main h1..h4` (0,1,1).
   Re-assert DM Sans at equal specificity (our sheet loads later → wins).
   Serif headings (article/prose titles) opt back in via their own rules. */
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main h4 { font-family: var(--font-sans); }

a { color: var(--accent); text-decoration: none; }
a:hover, a:focus, a:active { color: var(--accent-d); text-decoration: none; }

/* Default theme underlines a few specific spots on hover/focus that this
   base reset (0,0,1 / 0,1,1) isn't specific enough to beat — neutralise
   them explicitly instead of chasing specificity. */
.pkp_site_name .is_text:focus,
.pkp_site_nav_menu a:hover,
.pkp_site_nav_menu a:focus,
.galley_view .galley_view_notice_message a {
  text-decoration: none;
}

/* ============================================================
   3. LAYOUT — container + grid (main | sidebar)
   Replaces default float layout (1160 fixed / main 860 / rail 300)
   with token container + CSS grid.
   ============================================================ */
.pkp_structure_content {
  width: auto;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-8) var(--gutter) 0;
}
.pkp_structure_main {
  float: none;
  width: auto;
  padding: 0;
}
/* kill default vertical border rails */
.pkp_structure_main::before,
.pkp_structure_main::after { content: none; display: none; }

@media (min-width: 992px) {
  .pkp_structure_content.has_sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
    column-gap: var(--layout-gap);
    align-items: start;
  }
  .pkp_structure_content.has_sidebar .pkp_structure_main { grid-column: 1; }
  .pkp_structure_content.has_sidebar .pkp_structure_sidebar { grid-column: 2; }
}

/* homepage: content#1 wraps ONLY the hero (custom.js splits the page into
   content#1 → CTA band → content#2). Natural height, breathing room above
   the band. */
.pkp_structure_content.jiapd-content-hero { padding-bottom: var(--space-6); }
.pkp_structure_content.jiapd-content-hero > .jiapd-hero { margin-bottom: 0; }
.pkp_structure_sidebar,
.pkp_structure_sidebar.left {
  float: none; width: auto; padding: 0; margin: 0;
}
@media (max-width: 991px) {
  /* must match the reset rule's .left variant too (0,2,0) — a bare
     .pkp_structure_sidebar (0,1,0) loses to it regardless of source order,
     since the sidebar element actually carries both classes */
  .pkp_structure_sidebar,
  .pkp_structure_sidebar.left { margin-top: var(--space-8); }
}

/* Header inner + footer share the container width */
.pkp_head_wrapper,
.has_site_logo .pkp_head_wrapper {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.pkp_structure_footer {
  width: auto;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-8) var(--gutter);
}

/* ============================================================
   4. HEADER / MASTHEAD — white 96px, 3px red bottom border
   ============================================================ */
.pkp_structure_head {
  position: relative;
  background: var(--surface);
  border-bottom: 3px solid var(--accent);
  overflow: visible;
}
/* remove old decorative motif layers */
.pkp_structure_head::before,
.pkp_structure_head::after { content: none !important; display: none !important; }

/* Site name / logo */
.pkp_structure_head .pkp_site_name .is_text,
.pkp_structure_head .pkp_site_name a.is_text {
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Primary nav rows */
.pkp_navigation_primary_row { background: transparent; }
.pkp_navigation_primary > li > a {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-nav);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li.current > a {
  color: var(--accent);
  background: transparent;
}

/* dropdown submenu */
.pkp_navigation_primary li ul {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-h);
}
.pkp_navigation_primary li ul a { color: var(--ink); font-size: var(--text-meta); }
.pkp_navigation_primary li ul a:hover { color: var(--accent); background: var(--cream); }

/* search icon */
.pkp_structure_head .pkp_search {
  color: var(--ink);
  border: 0;
  padding: .3em .5em;
  font-size: var(--text-nav);
  font-weight: 600;
}
.pkp_structure_head .pkp_search:hover { color: var(--accent); background: transparent; }
/* icon sits BEFORE the text — space goes on its right */
.pkp_structure_head .pkp_search .fa { margin-left: 0; margin-right: .45em; }

/* Register | Login — accent, pipe separator, no dot */
.pkp_navigation_user > li > a {
  color: var(--accent);
  font-weight: 600;
  font-size: var(--text-nav);
}
.pkp_navigation_user > li > a:hover { color: var(--accent-d); }

/* Mobile slide-out menu (navy panel) */
@media (max-width: 991px) {
  .pkp_site_nav_menu { background: var(--nav); }

  /* primary + user items: comfortable block rows, white */
  .pkp_navigation_primary > li > a,
  .pkp_navigation_user > li > a {
    display: block;
    padding: 12px var(--gutter);
    color: #fff;
    font-weight: 600;
    font-size: var(--text-nav);
  }
  .pkp_navigation_primary > li.current > a { color: #fff; }
  .pkp_navigation_primary > li > a:hover,
  .pkp_navigation_primary > li > a:focus,
  .pkp_navigation_user > li > a:hover,
  .pkp_navigation_user > li > a:focus { background: rgba(255,255,255,.08); color: #fff; }

  /* submenu: blend into the navy panel — lighter, indented rows (no white card) */
  .pkp_navigation_primary li ul {
    position: static;
    width: auto;
    background: rgba(255,255,255,.05);
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }
  .pkp_navigation_primary li ul a {
    display: block;
    padding: 11px var(--gutter) 11px calc(var(--gutter) + 18px);
    color: rgba(255,255,255,.82);
    font-weight: 500;
    font-size: var(--text-meta);
  }
  .pkp_navigation_primary li ul a:hover,
  .pkp_navigation_primary li ul a:focus { background: rgba(255,255,255,.08); color: #fff; }

  /* search row: white, block, matching the menu items */
  .pkp_navigation_search_wrapper .pkp_search {
    display: block;
    padding: 12px var(--gutter);
    color: #fff;
    font-weight: 600;
    font-size: var(--text-nav);
  }
  .pkp_navigation_search_wrapper .pkp_search:hover,
  .pkp_navigation_search_wrapper .pkp_search:focus { background: rgba(255,255,255,.08); color: #fff; }
  .pkp_navigation_search_wrapper .pkp_search .fa { margin-right: .5em; }

  /* Collapsible submenu (custom.js adds .has-submenu; toggles .jiapd-open).
     Caret sits at the right; rotates when open. */
  .pkp_navigation_primary > li.has-submenu > a { position: relative; }
  .pkp_navigation_primary > li.has-submenu > a::after {
    content: '\f107';             /* fa-angle-down */
    font-family: FontAwesome;
    font-size: 18px;
    color: rgba(255,255,255,.7);
    position: absolute;
    right: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    transition: transform .2s var(--ease);
  }
  .pkp_navigation_primary > li.has-submenu.jiapd-open > a::after {
    transform: translateY(-50%) rotate(180deg);
  }
  .pkp_navigation_primary > li.has-submenu > ul { display: none; }
  .pkp_navigation_primary > li.has-submenu.jiapd-open > ul { display: block; }

  /* logo at the far LEFT, menu toggle at the far RIGHT */
  .pkp_site_name { left: 0 !important; right: auto !important; }
  .pkp_site_nav_toggle {
    left: auto !important;
    right: 0 !important;
    box-shadow: none !important;
  }
  /* replace the 3-bar hamburger with a FontAwesome ellipsis-vertical icon */
  .pkp_site_nav_toggle > span {
    border-bottom: 0 !important;
    overflow: visible;
    width: auto; height: auto;
    font-size: 0;                 /* hide the "Open Menu" label */
    text-indent: 0 !important;    /* theme sets -9999px → hid the icon off-screen */
  }
  .pkp_site_nav_toggle > span::before {
    content: '\f142';             /* fa-ellipsis-v */
    font-family: FontAwesome;
    font-size: 22px;
    line-height: 1;
    color: var(--ink);
    position: static;
    transform: none;
    background: none;
    width: auto; height: auto;
  }
  .pkp_site_nav_toggle > span::after { content: none !important; display: none !important; }
  /* open state → close (X) icon */
  .pkp_site_nav_toggle--transform > span::before { content: '\f00d'; transform: none !important; }
}

/* Desktop single-bar layout: logo | nav (center) | search | user */
@media (min-width: 992px) {
  .pkp_structure_head .pkp_site_nav_menu { background: transparent !important; }

  .has_site_logo .pkp_head_wrapper,
  .pkp_head_wrapper {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    width: 100% !important;
    max-width: var(--container) !important;
    margin-inline: auto !important;
    padding: 0 var(--gutter) !important;
    min-height: 96px !important;
  }
  .pkp_head_wrapper:before, .pkp_head_wrapper:after,
  .has_site_logo .pkp_head_wrapper:before,
  .has_site_logo .pkp_head_wrapper:after { content: none !important; display: none !important; }

  .pkp_site_name_wrapper,
  .pkp_navigation_primary_wrapper,
  .pkp_navigation_user_wrapper,
  .pkp_navigation_search_wrapper { width: auto !important; max-width: none !important; }

  .pkp_site_name_wrapper { flex: 0 0 auto !important; position: relative !important; z-index: 2 !important; }
  /* flex+center: the inline-block logo otherwise sits on the text baseline,
     leaving descender space below → logo looks shifted up */
  .pkp_site_name {
    position: relative; left: auto; right: auto;
    white-space: nowrap; overflow: visible;
    display: flex; align-items: center;
  }
  .pkp_site_name .is_img { margin: 0; display: flex; align-items: center; }
  .pkp_site_name .is_img img { max-height: 56px; width: auto; display: block; }

  .pkp_site_nav_menu {
    display: flex !important;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    min-width: 0; width: auto;
    position: static !important;
    margin: 0; padding: 0;
  }
  .pkp_navigation_primary_row {
    display: flex !important;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-width: 0; margin: 0; padding: 0;
  }
  .pkp_navigation_primary_wrapper {
    display: flex !important;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    min-width: 0; margin: 0; padding: 0;
    order: 1;
  }
  .pkp_navigation_primary {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    margin: 0; padding: 0;
    list-style: none; text-align: center;
  }
  .pkp_navigation_primary > li { display: block; }
  .pkp_navigation_primary > li > a {
    margin: 0; padding: .5em .7em;
    white-space: nowrap; border-bottom: 0; box-shadow: none;
  }

  .pkp_navigation_search_wrapper {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    order: 2; margin: 0; padding: 0;
    width: auto !important; position: static !important; float: none !important;
  }

  .pkp_navigation_user_wrapper {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    order: 3;
    margin: 0 0 0 var(--space-3) !important;
    padding: 0 !important;
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important;
    transform: none !important; width: auto !important; z-index: auto !important; float: none !important;
  }
  .pkp_navigation_user {
    display: flex !important;
    align-items: center;
    gap: 0;
    margin: 0; padding: 0; border: none;
    text-align: right; font-size: var(--text-nav);
  }
  .pkp_navigation_user > li { display: flex; align-items: center; }
  .pkp_navigation_user > li > a { padding: .45em .7em; white-space: nowrap; line-height: 1.4; }
  /* pipe separator between Register | Login */
  .pkp_navigation_user > li + li::before {
    content: '';
    width: 1px; height: 15px;
    background: var(--rule);
    display: inline-block;
  }
  .pkp_navigation_user li ul {
    background: var(--surface);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-card-h);
  }
  .pkp_navigation_user li ul a { color: var(--ink); }
  .pkp_navigation_user li ul a:hover { color: var(--accent); background: var(--cream); }
}

/* Force desktop header layout even when default-theme weights fight back */
@media (min-width: 992px) {
  body.has_site_logo header#headerNavigationContainer.pkp_structure_head > .pkp_head_wrapper,
  header#headerNavigationContainer.pkp_structure_head > .pkp_head_wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: var(--container) !important;
    margin: 0 auto !important;
    padding: 0 var(--gutter) !important;
  }
  body.has_site_logo header#headerNavigationContainer.pkp_structure_head > .pkp_head_wrapper > .pkp_site_name_wrapper,
  header#headerNavigationContainer.pkp_structure_head > .pkp_head_wrapper > .pkp_site_name_wrapper {
    flex: 0 0 auto !important; min-width: 0 !important;
  }
  body.has_site_logo header#headerNavigationContainer.pkp_structure_head > .pkp_head_wrapper > .pkp_site_nav_menu,
  header#headerNavigationContainer.pkp_structure_head > .pkp_head_wrapper > .pkp_site_nav_menu {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important; min-width: 0 !important;
    margin: 0 !important; padding: 0 !important; position: static !important;
  }
  body.has_site_logo header#headerNavigationContainer.pkp_structure_head .pkp_navigation_primary_row,
  header#headerNavigationContainer.pkp_structure_head .pkp_navigation_primary_row {
    display: flex !important; flex: 1 1 auto !important;
    align-items: center !important; justify-content: center !important;
    width: 100% !important; min-width: 0 !important;
    margin: 0 !important; padding: 0 !important; position: relative !important;
  }
  body.has_site_logo header#headerNavigationContainer.pkp_structure_head .pkp_navigation_primary_wrapper,
  header#headerNavigationContainer.pkp_structure_head .pkp_navigation_primary_wrapper {
    display: flex !important; flex: 1 1 auto !important;
    align-items: center !important; justify-content: center !important;
    gap: var(--space-4) !important;
    width: 100% !important; min-width: 0 !important;
    margin: 0 !important; padding: 0 !important; position: relative !important;
  }
  body.has_site_logo header#headerNavigationContainer.pkp_structure_head .pkp_navigation_primary,
  header#headerNavigationContainer.pkp_structure_head .pkp_navigation_primary {
    display: flex !important; flex-wrap: nowrap !important;
    align-items: center !important; justify-content: center !important;
    gap: .35rem !important;
    margin: 0 auto !important; padding: 0 !important;
    list-style: none !important; text-align: center !important;
  }
  body.has_site_logo header#headerNavigationContainer.pkp_structure_head .pkp_navigation_search_wrapper,
  header#headerNavigationContainer.pkp_structure_head .pkp_navigation_search_wrapper {
    display: inline-flex !important; position: static !important; order: 2 !important;
    align-items: center !important; justify-content: center !important;
    margin: 0 0 0 auto !important; padding: 0 !important;
    width: auto !important; float: none !important; transform: none !important; min-width: 0 !important;
  }
  body.has_site_logo header#headerNavigationContainer.pkp_structure_head .pkp_navigation_user_wrapper,
  header#headerNavigationContainer.pkp_structure_head .pkp_navigation_user_wrapper {
    display: inline-flex !important; position: static !important; order: 3 !important;
    align-items: center !important; justify-content: center !important;
    margin: 0 0 0 var(--space-3) !important; padding: 0 !important;
    width: auto !important; float: none !important;
    top: auto !important; left: auto !important; right: auto !important;
    transform: none !important; z-index: auto !important; min-width: 0 !important;
  }
  body.has_site_logo header#headerNavigationContainer.pkp_structure_head .pkp_navigation_user,
  header#headerNavigationContainer.pkp_structure_head .pkp_navigation_user {
    display: flex !important; align-items: center !important; gap: 0 !important;
    margin: 0 !important; padding: 0 !important; border: none !important;
    text-align: right !important; font-size: var(--text-nav) !important;
  }
}

/* ---- Even 3-column masthead: logo (left) · nav+search (center) · user (right).
   display:contents promotes nav-menu children into the header flex row so the
   center cluster can be balanced by equal-flex side columns.
   Selectors carry `body.has_site_logo` to outrank the force block above. ---- */
@media (min-width: 992px) {
  body.has_site_logo header#headerNavigationContainer.pkp_structure_head > .pkp_head_wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--space-4) !important;
  }
  body.has_site_logo header#headerNavigationContainer.pkp_structure_head > .pkp_head_wrapper > .pkp_site_nav_menu {
    display: contents !important;
  }
  body.has_site_logo header#headerNavigationContainer.pkp_structure_head .pkp_site_nav_menu > a#siteNav {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: 0 !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important;
  }
  /* left third */
  body.has_site_logo header#headerNavigationContainer.pkp_structure_head > .pkp_head_wrapper > .pkp_site_name_wrapper {
    flex: 1 1 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
  }
  /* center third: nav + search as ONE evenly-spaced cluster.
     --nav-gap is used for BOTH the gap between nav items and the nav↔search
     gap, so all spacing is identical. Links drop horizontal padding so the
     visual gap equals --nav-gap exactly. */
  body.has_site_logo header#headerNavigationContainer.pkp_structure_head .pkp_navigation_primary_row {
    flex: 0 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--nav-gap) !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    position: static !important;
  }
  body.has_site_logo header#headerNavigationContainer.pkp_structure_head .pkp_navigation_primary_wrapper {
    flex: 0 1 auto !important;
    width: auto !important;
    margin: 0 !important;
  }
  body.has_site_logo header#headerNavigationContainer.pkp_structure_head .pkp_navigation_primary {
    gap: var(--nav-gap) !important;
    align-items: center !important;
  }
  body.has_site_logo header#headerNavigationContainer.pkp_structure_head .pkp_navigation_primary > li > a {
    padding: .5em 0 !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  body.has_site_logo header#headerNavigationContainer.pkp_structure_head .pkp_navigation_search_wrapper {
    flex: 0 0 auto !important;
    margin: 0 !important;
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  body.has_site_logo header#headerNavigationContainer.pkp_structure_head .pkp_navigation_search_wrapper .pkp_search {
    display: inline-flex !important;
    align-items: center !important;
    padding: .5em 0 !important;
    margin: 0 !important;   /* theme sets margin-top:.4rem → drops it 3px */
    line-height: 1.2 !important;
  }
  /* right third */
  body.has_site_logo header#headerNavigationContainer.pkp_structure_head .pkp_navigation_user_wrapper {
    flex: 1 1 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
  /* the ul must size to its content (theme squeezes it) — then the wrapper's
     flex-end lands its right edge exactly on the container corner */
  body.has_site_logo header#headerNavigationContainer.pkp_structure_head .pkp_navigation_user {
    width: max-content !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
  }
  /* li must not shrink below its content or links overflow past the edge */
  body.has_site_logo header#headerNavigationContainer.pkp_structure_head .pkp_navigation_user > li {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
  }
  /* last link: kill theme's negative margin (-0.714rem) and right padding so
     its box ends exactly on the container corner */
  body.has_site_logo header#headerNavigationContainer.pkp_structure_head .pkp_navigation_user > li:last-child > a {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }
}

/* ---- Dropdown submenus (primary nav "About" + user nav "admin").
   Theme defaults: fixed 15em width, left-border hover, hugs parent's left.
   Redesign: content-sized padded card, right-aligned text, rounded hover
   rows with gaps, centered under parent, connector triangle. ---- */
@media (min-width: 992px) {
  /* container */
  .pkp_navigation_primary ul,
  .pkp_navigation_user ul,
  .pkp_nav_list ul {
    width: max-content !important;
    min-width: 9em;
    padding: 8px !important;             /* x-y gap container ↔ items */
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card-h);
    text-align: left;                     /* teks rata kiri */
    overflow: visible;
  }
  /* open state: centered under parent, 10px below (also defeats popper's
     inline positioning via !important) */
  .pkp_nav_list > li:hover > ul,
  .pkp_nav_list > li > ul.show,
  .pkp_nav_list [data-toggle="dropdown"]:hover + .dropdown-menu,
  .pkp_navigation_primary > li:hover > ul,
  .pkp_navigation_user > li:hover > ul {
    top: calc(100% + 10px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
  /* invisible bridge across the 10px gap so hover doesn't drop */
  .pkp_nav_list ul::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -12px; height: 12px;
  }
  /* connector triangle (rotated square peeking above the card) */
  .pkp_nav_list ul::before {
    content: '';
    position: absolute;
    top: -7px; left: 50%;
    width: 12px; height: 12px;
    background: var(--surface);
    border-left: 1px solid var(--rule);
    border-top: 1px solid var(--rule);
    transform: translateX(-50%) rotate(45deg);
  }
  /* items: block rows, gap between rows, rounded hover, NO left border */
  .pkp_nav_list ul li { display: block; float: none; }
  .pkp_nav_list ul li + li { margin-top: 4px; }
  .pkp_nav_list ul a,
  .pkp_navigation_primary ul a,
  .pkp_navigation_user ul a {
    /* inline-flex + width:100% keeps the row inside its li (a plain block
       with nowrap overflowed the li → uneven left/right hover gaps) */
    display: inline-flex !important;
    width: 100%;
    align-items: center;
    justify-content: flex-start;          /* teks rata kiri */
    padding: .5em .9em !important;
    border: 0 !important;                 /* kills theme border-left hover */
    border-radius: 6px;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
  }
  .pkp_nav_list ul li:first-child a,
  .pkp_nav_list ul li:last-child a { border-radius: 6px; }
  .pkp_nav_list ul a:hover,
  .pkp_nav_list ul a:focus,
  .pkp_navigation_primary .dropdown-menu a:hover,
  .pkp_navigation_primary .dropdown-menu a:focus {
    background: var(--cream);
    color: var(--accent);
    border: 0 !important;
    outline: 0;
  }

  /* ---- Notification badge (task_count) → aligned chip ---- */
  .pkp_navigation_user > li > a {
    display: inline-flex !important;
    align-items: center !important;
  }
  .pkp_navigation_user > li > a .task_count,
  .pkp_navigation_user > li > ul a .task_count {
    position: static !important;          /* theme: top:.3rem → misaligned */
    top: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 20px;
    height: 20px;
    padding: 0 7px;
    margin-left: .5em;
    border-radius: var(--radius-pill);
    background: var(--band-bg) !important;
    color: var(--accent-d) !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
  }
  .pkp_navigation_user > li > ul a:hover .task_count,
  .pkp_navigation_user > li > ul a:focus .task_count {
    background: var(--accent) !important;
    color: #fff !important;
  }
  /* dropdown rows keep chip on the same line as the label */
  .pkp_navigation_user ul a {
    display: inline-flex !important;
    width: 100%;
    align-items: center;
    justify-content: flex-start;  /* teks rata kiri */
  }
}

/* ============================================================
   5. HOMEPAGE (#5a)
   Structure: main[ homepage_image, homepage_about, current_issue ]
              sidebar[ SINTA, ISSN&DOI, Submission, Policies ]
   ============================================================ */

/* --- 5.1 Homepage stacks as one column; hero is its own full-width section
   (custom.js builds .jiapd-hero and lifts it to content level). --- */
.pkp_page_index .page_index_journal { display: block; }
.pkp_page_index .page_index_journal > section { margin: 0 0 var(--space-8); }

/* HERO section. Desktop (>=992): 3-col grid cover | identity | SINTA.
   Below 992: single-column stack with cover + SINTA centered. */
.jiapd-hero { display: block; margin: 0 0 var(--space-8); }

/* Tablet + mobile (< 992): top row = cover (left) + SINTA (right),
   identity body spans full width below. */
@media (max-width: 991px) {
  .jiapd-hero {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 24px;
    align-items: start;
  }
  .jiapd-hero .homepage_image { grid-column: 1; grid-row: 1; max-width: none; margin: 0; }
  #customblock-sinta.jiapd-hero-sinta {
    grid-column: 2; grid-row: 1;
    margin: 0; padding: 0 !important;   /* theme .pkp_block padding-top */
    align-self: start;                  /* top-aligned with the cover */
  }
  #customblock-sinta.jiapd-hero-sinta img { margin: 0 0 0 auto; max-width: 220px; }
  .jiapd-hero-body { grid-column: 1 / -1; grid-row: 2; }
}

@media (min-width: 992px) {
  .jiapd-hero {
    display: grid;
    /* SINTA column narrower than the sidebar (300px) so the identity body
       is wider; the badge shrinks, the card sidebar below is unaffected. */
    grid-template-columns: 236px minmax(0, 1fr) 200px;
    gap: 40px;
    align-items: start;   /* semua kolom hero rata atas */
  }
  .jiapd-hero .homepage_image { max-width: none; margin: 0; grid-column: 1; }
  .jiapd-hero-body { grid-column: 2; }
  .jiapd-hero > .jiapd-hero-sinta {
    grid-column: 3;
    align-self: start;
    justify-self: stretch;
    margin: 0;
    padding: 0 !important;      /* theme .pkp_block adds padding-top 2.143rem */
  }
  #customblock-sinta.jiapd-hero-sinta img { margin: 0 0 0 auto; }
}
.homepage_image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-cover);
}

/* Hero identity body (grid-column assigned per breakpoint below) */
.jiapd-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 var(--space-4);
}
.jiapd-badge {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: 4px;
  padding: .38em .7em;
  line-height: 1;
}
.jiapd-badge-journal { color: var(--jbadge); background: var(--jbadge-bg); }
.jiapd-badge-oa { color: var(--oa-green); background: var(--oa-bg); }
.jiapd-badge-oa svg { margin-top: -1px; }

.jiapd-hero-title {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.jiapd-hero-lead {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--lh-prose);
  color: var(--body);
  margin: var(--space-4) 0 0;
}

/* --- "About the Journal" section: hidden entirely. buildHero() (custom.js)
   moves its FIRST <p> into the hero as the lead line before this ever
   paints, so hiding the section doesn't touch that — only the leftover
   heading + remaining paragraphs (2nd+) are what's suppressed here. Showing
   them read like two disconnected blocks about the journal (hero lead, then
   this) since the paragraph that would've tied them together is gone. */
.pkp_page_index .homepage_about { display: none; }
.pkp_page_index .homepage_about h2 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  line-height: 1.2;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
  padding: 0 0 var(--space-3);
  border-bottom: 2px solid var(--accent);
  margin: 0 0 var(--space-5);
}
.pkp_page_index .homepage_about p {
  font-family: var(--font-serif);
  font-size: var(--text-base);   /* base 16px */
  line-height: var(--lh-prose);
  color: var(--body);
  margin: 0 0 var(--space-4);    /* full width — no max-width cap */
}

/* --- 5.1b Announcements block on homepage: section head (same treatment as
   Current Issue/About) + each announcement as a card. Theme hides this h2
   as screen-reader-only (clip-rect trick) by default — undo that so it
   reads the same as the other homepage section heads. Number of cards
   shown is controlled in Website Settings > Setup > Announcements
   ("Number of announcements to display on the homepage"), not by this CSS. */
.pkp_page_index .cmp_announcements h2 {
  /* Theme hides this with position:absolute!important + clip-rect AND a
     separate display:none rule (both !important) — matching !important is
     required here, raising specificity alone can't beat !important. */
  display: block !important;
  position: static !important;
  clip: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  line-height: 1.2;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
  padding: 0 0 var(--space-3);
  border-bottom: 2px solid var(--accent);
  margin: 0 0 var(--space-5);
}
.pkp_page_index .page_index_journal > .cmp_announcements {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0 0 var(--space-6);
  /* Theme puts a top+bottom #ddd rule directly on this section wrapper
     (leftover from its plain-list design) — the card below already has
     its own border, so this just doubles up as a stray line above/below
     the whole block. */
  border-top: none;
  border-bottom: none;
}
/* Taking the #homepageAnnouncements jump-target <a> out of flow — harmless
   either way, but NOT what was actually causing the phantom top gap (see
   next rule for the real cause). Left in as it's still more correct to
   not have an empty anchor participating in flex layout at all. */
.pkp_page_index .cmp_announcements > a[id] {
  position: absolute;
}
/* The REAL cause of the phantom gap above the heading (made the section
   sit visibly lower than the sidebar's "ISSN & DOI" card despite both
   starting at the same box top): the theme's own clearfix —
   `.cmp_announcements::before/::after { content:" "; display:table }` —
   generates a real (if invisible) flex item, since a flex container's
   generated ::before content becomes an actual flex item per spec unless
   content is suppressed. That phantom first item then had a full `gap`
   inserted after it, before the heading. The clearfix's actual job
   (`::after { clear:both }`) is also moot now that nothing inside floats
   (§ obj_announcement_summary reset to float:none above) — safe to kill
   outright rather than just neutralise. */
.pkp_page_index .cmp_announcements::before,
.pkp_page_index .cmp_announcements::after {
  content: none;
}
/* Theme floats each summary at 65% width (reserving 35% beside it for a
   sidebar-style "more" column) and draws that split as a 1px vertical
   line via ::before on the summary and another ::before on .more —
   neither makes sense once this is a full-width stacked card list, so
   both get killed outright rather than just visually hidden. */
.pkp_page_index .obj_announcement_summary::before,
.pkp_page_index .obj_announcement_summary::after,
.pkp_page_index .cmp_announcements .obj_announcement_summary::before,
.pkp_page_index .cmp_announcements .obj_announcement_summary::after,
.pkp_page_index .cmp_announcements .more::before,
.pkp_page_index .cmp_announcements .more::after {
  content: none;
}
.pkp_page_index .cmp_announcements .obj_announcement_summary {
  float: none;
  width: 100%;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.pkp_page_index .obj_announcement_summary h3 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  font-weight: 600;
  margin: 0;
}
.pkp_page_index .obj_announcement_summary h3 a { color: var(--accent); text-decoration: none; }
.pkp_page_index .obj_announcement_summary h3 a:hover,
.pkp_page_index .obj_announcement_summary h3 a:focus { color: var(--accent-d); }
.pkp_page_index .obj_announcement_summary .date {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: 4px;
}
.pkp_page_index .obj_announcement_summary .summary p {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--lh-prose);
  color: var(--body);
  margin: var(--space-3) 0 0;
}
/* Read More: match .jiapd-cta-btn ("Submit Manuscript") exactly, not the
   generic .read_more/.cmp_button pill used elsewhere (§5.5) — that one
   reserves asymmetric right-padding for a theme chevron ::after and runs
   a touch bigger/looser than the CTA button this is meant to mirror. */
.pkp_page_index .obj_announcement_summary .read_more {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-top: var(--space-4);
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  padding: .7em 1.5em;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: var(--lh-normal);
  text-decoration: none;
  transition: background var(--ease);
}
.pkp_page_index .obj_announcement_summary .read_more::after {
  content: none;
}
.pkp_page_index .obj_announcement_summary .read_more:hover,
.pkp_page_index .obj_announcement_summary .read_more:focus {
  background: var(--accent-d);
  color: #fff;
  text-decoration: none;
}

/* --- 5.2 Current Issue block on homepage: section head (red + rule) --- */
.pkp_page_index .current_issue > h2 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  line-height: 1.2;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
  padding: 0 0 var(--space-3);
  border-bottom: 2px solid var(--accent);
  margin: 0 0 var(--space-5);
}
/* Issue heading: cover (left) + [ Vol title, Published ] stacked (right).
   custom.js moves .current_issue_title into .heading. */
.obj_issue_toc .heading { overflow: hidden; }   /* contain the floated cover */
.obj_issue_toc .heading .cover {
  float: left;
  width: 150px;
  margin: 0 var(--space-5) var(--space-4) 0;
}
.obj_issue_toc .heading .cover img {
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: var(--radius-shell);
  box-shadow: var(--shadow-card);
}
.current_issue .obj_issue_toc .heading .current_issue_title {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.current_issue .obj_issue_toc .heading .published {
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  color: var(--body);
}
.current_issue .obj_issue_toc .heading .published .label { font-weight: 700; color: var(--ink); }

/* "Articles" section label in TOC. Theme wraps it as a fieldset legend:
   .section has negative side margins + a full-width ::before rule, and the
   <h3> floats on a white chip. Neutralise all of it and give the label a
   divider that matches the article rows' width. */
.obj_issue_toc .galleys,
.obj_issue_toc .section {
  margin: 0 !important;
  padding: 0 !important;
}
.obj_issue_toc .galleys::before,
.obj_issue_toc .section::before { content: none !important; }
.obj_issue_toc .section > h2,
.obj_issue_toc h2.section_title,
.obj_issue_toc .section > h3,
.obj_issue_toc .galleys > h3 {
  display: block;
  position: static;
  left: 0;
  background: transparent;
  padding: 0 0 var(--space-3);
  margin: 0 0 var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);            /* point 2: more contrast */
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--rule);   /* same width as row dividers */
}
.obj_issue_toc .sections:not(:first-child) { margin-top: var(--space-5); }

/* --- 5.3 Article summary rows (TOC list): hairline dividers, tight rhythm.
   Border sits on the <li> — each .obj_article_summary is its li's only child,
   so :last-child on the summary would match every row. --- */
.obj_issue_toc .cmp_article_list { padding-top: var(--space-4); }
.obj_issue_toc .cmp_article_list > li {
  margin: 0;
  border-bottom: 1px solid var(--rule);
}
.obj_issue_toc .cmp_article_list > li:last-child { border-bottom: 0; }
.obj_article_summary {
  padding: var(--space-5) 0;
  margin: 0;
  border-bottom: 0;
}
.obj_article_summary .title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  font-weight: 600;
  margin: 0;
}
.obj_article_summary .title a { color: var(--accent); text-decoration: none; }
.obj_article_summary .title a:hover { color: var(--accent-d); text-decoration: none; }
/* meta row: authors (left) + pages (right) on ONE baseline, tight under title.
   Theme floats pages absolute top:0 → they drift above the authors line. */
.obj_article_summary .meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding-top: 0;
  margin-top: 6px;
}
.obj_article_summary .authors {
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  color: var(--body);
  margin: 0;
  padding-right: 0;            /* theme reserves 5em for the absolute pages */
}
.obj_article_summary .pages {
  position: static;
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.4;
  white-space: nowrap;
}
.obj_article_summary .galleys_links { margin-top: 8px; }

/* --- 5.4 PDF chip / galley links --- */
.obj_galley_link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--rule);
  border-radius: var(--radius-shell);
  padding: .3em .8em;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--ease), color var(--ease);
}
.obj_galley_link:hover, .obj_galley_link:focus {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;                /* text + FontAwesome icon (currentColor) → white */
  text-decoration: none;
}
.obj_galley_link.pdf::before {
  content: '\f1c1';
  font-family: FontAwesome;
  font-weight: 400;
}

/* --- 5.5 "View All Issues" / read_more button.
   Theme puts the chevron (FontAwesome \f054) as an absolute ::after at
   right:0 — with our compact button padding it collided with the label.
   Reserve room on the right and vertically centre the chevron there. --- */
.read_more,
.pkp_page_index .current_issue .read_more,
.cmp_button {
  display: inline-block;
  position: relative;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: .6em 2.6em .6em 1.4em;
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background var(--ease);
}
.read_more::after,
.pkp_page_index .current_issue .read_more::after {
  top: 50% !important;
  right: 1.1em !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
}
.read_more:hover, .read_more:focus,
.pkp_page_index .current_issue .read_more:hover,
.pkp_page_index .current_issue .read_more:focus,
.cmp_button:hover {
  background: var(--accent-d);
  color: #fff;
  text-decoration: none;
}

/* ============================================================
   6. SIDEBAR CARDS (global)
   ============================================================ */
.pkp_structure_sidebar .pkp_block {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 0;
  margin-bottom: 22px;
  overflow: hidden;
}
.pkp_structure_sidebar .pkp_block .title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink);
  background: var(--card-head);
  border-bottom: 1px solid var(--rule);
  padding: .8rem 1.1rem;
  margin: 0;
}
.pkp_structure_sidebar .pkp_block .content { padding: 1rem 1.1rem; }

/* SINTA badge — transparent, no card chrome */
#customblock-sinta.pkp_block {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
#customblock-sinta .title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#customblock-sinta .content { padding: 0; }
#customblock-sinta .content p { margin: 0; }
#customblock-sinta img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0;
  border-radius: var(--radius);
  transition: transform var(--ease);
}
#customblock-sinta a:hover img { transform: scale(1.02); }

/* ISSN & DOI — label left / value right rows */
#customblock-issn-doi .content { padding: 0; }
#customblock-issn-doi .content p {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  margin: 0;
  padding: .7rem 1.1rem;
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
}
#customblock-issn-doi .content p:last-child { border-bottom: 0; }
#customblock-issn-doi .content a,
#customblock-issn-doi .content strong {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
#customblock-issn-doi .content a:hover { color: var(--accent); }

/* --- Submission + Journal Policies cards. Styling is STRUCTURAL (by block id
   + link position) so it survives a re-save through the Custom Block Manager
   UI, which strips class/style attributes AND wraps content in <p> via
   allowed_html/TinyMCE. Two robustness points, learned the hard way:
   (1) `.content a` uses the descendant combinator + `a:last-child` matches
       the last <a> element inside its parent — so it works whether the links
       are direct children of .content (raw DB HTML) or wrapped in a <p> (what
       the OJS UI editor produces). VERIFIED: <p> wrapper does NOT break this.
   (2) The selector matches the block by ID *prefix* + a .pkp_block specificity
       boost, so it styles the block no matter what singular/plural name the
       user types in Custom Block Manager — `submission` OR `submissions`,
       `journal-policies` OR `journal-policy`. (A one-letter name difference
       between localhost and the live site was silently leaving the block
       unstyled; the id, not the <p>, was the culprit.) --- */
.pkp_block[id^="customblock-submission"] .content,
.pkp_block[id^="customblock-journal-polic"] .content { padding: 0; }

/* link rows */
.pkp_block[id^="customblock-submission"] .content a,
.pkp_block[id^="customblock-journal-polic"] .content a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 1.1rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  transition: background var(--ease), color var(--ease);
}
.pkp_block[id^="customblock-submission"] .content a:last-child,
.pkp_block[id^="customblock-journal-polic"] .content a:last-child { border-bottom: 0; }
.pkp_block[id^="customblock-submission"] .content a::after,
.pkp_block[id^="customblock-journal-polic"] .content a::after {
  content: '\203A';            /* › chevron */
  flex: 0 0 auto;
  color: var(--accent);
  font-weight: 700;
}
.pkp_block[id^="customblock-submission"] .content a:hover,
.pkp_block[id^="customblock-submission"] .content a:focus,
.pkp_block[id^="customblock-journal-polic"] .content a:hover,
.pkp_block[id^="customblock-journal-polic"] .content a:focus {
  background: var(--cream);
  color: var(--accent);
}

/* Submit button = the LAST link of the Submission block (full-width, up-arrow).
   Matched by position so it works even if the .side-btn class is stripped. */
.pkp_block[id^="customblock-submission"] .content a:last-child {
  justify-content: center;
  gap: 9px;
  padding: 14px 1.1rem;
  background: var(--accent);
  color: #fff;
  font-size: var(--text-nav);
}
.pkp_block[id^="customblock-submission"] .content a:last-child::after { content: none; }  /* no chevron */
.pkp_block[id^="customblock-submission"] .content a:last-child::before {
  content: '';
  width: 15px; height: 15px;
  background: currentColor;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E");
}
.pkp_block[id^="customblock-submission"] .content a:last-child:hover,
.pkp_block[id^="customblock-submission"] .content a:last-child:focus { background: var(--accent-d); color: #fff; }

/* Download Template = the link right BEFORE the Submit button (2nd-to-last).
   Position-based like the button (`:last-child`) so it survives TinyMCE
   class-stripping. Download icon on the LEFT + no chevron — signals a
   download, not navigation; pairs visually with the icon-left Submit button
   below it. `:nth-last-of-type(2)` (not -child) so a stray trailing node
   can't shift the count. */
.pkp_block[id^="customblock-submission"] .content a:nth-last-of-type(2) {
  justify-content: flex-start;
  gap: 9px;
}
.pkp_block[id^="customblock-submission"] .content a:nth-last-of-type(2)::after { content: none; }
.pkp_block[id^="customblock-submission"] .content a:nth-last-of-type(2)::before {
  content: '';
  flex: 0 0 auto;
  width: 15px; height: 15px;
  background: var(--accent);
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-4-4m4 4 4-4M5 21h14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-4-4m4 4 4-4M5 21h14'/%3E%3C/svg%3E");
}

/* --- Tools card. User enters partner/tool logos via Custom Block Manager
   as <ul><li><img></li></ul> (the UI's list format). Match the sidebar card
   rhythm: each logo its own divider-separated row, centered, capped to a
   consistent height so different logo proportions carry equal visual weight.
   Handles both the <li> structure and a <p>-per-logo reflow, and the logos
   later being wrapped in links. Prefix id-match (see the note above) so it
   works whatever the user names the block. --- */
.pkp_block[id^="customblock-tools"] .content { padding: 0; text-align: center; }
.pkp_block[id^="customblock-tools"] .content ul { margin: 0; padding: 0; list-style: none; }
.pkp_block[id^="customblock-tools"] .content li,
.pkp_block[id^="customblock-tools"] .content p {
  margin: 0;
  padding: 16px 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.pkp_block[id^="customblock-tools"] .content li:last-child,
.pkp_block[id^="customblock-tools"] .content p:last-child { border-bottom: 0; }
.pkp_block[id^="customblock-tools"] .content img {
  display: inline-block;
  max-height: 32px;
  max-width: 85%;
  width: auto;
  height: auto;
  vertical-align: middle;
}
.pkp_block[id^="customblock-tools"] .content a {
  display: inline-block;
  transition: opacity var(--ease);
}
.pkp_block[id^="customblock-tools"] .content a:hover,
.pkp_block[id^="customblock-tools"] .content a:focus { opacity: .6; }

/* --- Statistics card. Content = a StatCounter beacon link (wrapping a
   tracking <img>) + a plain "Statistics" text link. Hide the beacon but
   keep it in the DOM/loading (analytics), and style the text link as a
   sidebar link-row like Journal Policies — but with a bar-chart icon in the
   chevron slot on the right. `:has(img)` splits beacon vs text link so it
   works regardless of link count/order. Prefix id-match like the others. */
.pkp_block[id^="customblock-statistics"] .content { padding: 0; }
.pkp_block[id^="customblock-statistics"] .content p { margin: 0; }
/* beacon: out of sight, still rendered so the tracking pixel fires */
.pkp_block[id^="customblock-statistics"] .content a:has(img) {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
/* the visible "Statistics" link → row + stats icon (right, accent) */
.pkp_block[id^="customblock-statistics"] .content a:not(:has(img)) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 1.1rem;
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  transition: background var(--ease), color var(--ease);
}
.pkp_block[id^="customblock-statistics"] .content a:not(:has(img)):hover,
.pkp_block[id^="customblock-statistics"] .content a:not(:has(img)):focus {
  background: var(--cream);
  color: var(--accent);
}
.pkp_block[id^="customblock-statistics"] .content a:not(:has(img))::after {
  content: '';
  flex: 0 0 auto;
  width: 16px; height: 16px;
  background: var(--accent);
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M6 21V11M12 21V5M18 21v-8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M6 21V11M12 21V5M18 21v-8'/%3E%3C/svg%3E");
}

/* ============================================================
   7. FOOTER — navy. Content lives in Website Settings > Page Footer
   (rendered raw inside .pkp_footer_content); styled here.
   ============================================================ */
.pkp_structure_footer_wrapper {
  background: var(--nav);
  color: var(--foot-link);
  border-top: 0;
  margin-top: var(--space-10);
  font-family: var(--font-sans);
}
/* the OJS inner wrapper is full-width; each row centers itself.
   Also zero the theme's padding on .pkp_footer_content (2.143rem bottom). */
.pkp_structure_footer_wrapper .pkp_structure_footer,
.pkp_structure_footer_wrapper .pkp_footer_content {
  max-width: none;
  width: auto;
  margin: 0;
  padding: 0;
}

/* --- footer container (tightened top space) --- */
.pkp_footer_content .jiapd-footer {
  max-width: var(--container);
  margin-inline: auto;
  padding: 28px var(--gutter) 16px;
}

/* Publisher: IPDN logo chip + "Published by / IPDN" */
.jiapd-publisher {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.jiapd-publisher img {
  width: 44px;
  height: 44px;
  flex: none;
  background: #fff;
  border-radius: 6px;
  padding: 3px;
  object-fit: contain;
}
.jiapd-pub-text {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  line-height: 1.4;
  color: #dbe4f5;
}
.jiapd-pub-text span { opacity: .7; }
.jiapd-pub-text strong { font-weight: 700; color: #fff; }
.jiapd-address {
  font-size: 14px;
  line-height: 1.65;
  color: var(--foot-link);
}

/* License line: official CC BY-NC icons (linked) + linked license text.
   NOT using `gap` on .jiapd-license itself — the sentence after the icon
   link is raw text mixed with an inline <a> (can't wrap it in <span>, OJS's
   Website Settings > Footer strips tags TinyMCE doesn't allow), and each
   text run becomes its own anonymous flex item. `gap` applies to EVERY pair
   of flex items including those, so it was injecting an extra 10px on top
   of the sentence's own spaces wherever text met a link. Spacing between
   the icon and the sentence comes from margin on .jiapd-cc instead — that
   doesn't care how many flex items the sentence itself breaks into. */
.jiapd-license {
  display: flex;
  align-items: center;
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--foot-link);
}
.jiapd-cc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 10px;
  flex: none;
}
.jiapd-cc img { width: 22px; height: 22px; display: block; }
.jiapd-cc:hover img, .jiapd-cc:focus img { opacity: .85; }
.jiapd-license a {
  color: #fff;
  text-decoration: none;
  text-underline-offset: 2px;
}
/* TinyMCE (Website Settings > Footer) keeps eating the single space typed
   right before this link — a known editor quirk with whitespace sitting at
   a text/inline-element boundary, confirmed after 2 failed re-save attempts.
   Fixed spacing here instead of fighting the editor: this doesn't care
   whether the saved text has "a Creative" or "aCreative". */
.jiapd-license a:not(.jiapd-cc) { margin-left: 0.3em; }
.jiapd-license a:hover, .jiapd-license a:focus { color: var(--foot-link); }

/* Bottom bar: OJS/PKP attribution (left) + Customized by (right) */
.jiapd-footer-bottom {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px;
}
.jiapd-footer-bottom a { color: var(--foot-link); text-decoration: none; }
.jiapd-footer-bottom a:hover,
.jiapd-footer-bottom a:focus { color: #fff; }
.jiapd-footer-bottom .jiapd-cust { margin-left: auto; }

/* Original OJS/PKP brand block removed — replaced by the text link above */
.pkp_brand_footer { display: none; }

/* ============================================================
   7b. CTA BAND (injected by custom.js between hero and page body)
   Full-bleed blush strip that closes the hero — NOT sticky; it sits
   at the viewport bottom on load because the hero height is tuned.
   ============================================================ */
.jiapd-cta-band {
  background: var(--band-bg);
}
.jiapd-cta-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.jiapd-cta-text { display: flex; flex-direction: column; gap: 2px; }
.jiapd-cta-text strong {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--nav);
  line-height: 1.3;
}
.jiapd-cta-text span {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--band-ink);
  opacity: .72;
}
.jiapd-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  background: var(--accent);
  color: #fff !important;
  border-radius: var(--radius);
  padding: .7em 1.5em;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--ease);
}
.jiapd-cta-btn:hover, .jiapd-cta-btn:focus {
  background: var(--accent-d);
  color: #fff;
  text-decoration: none;
}

/* ============================================================
   8. BREADCRUMB — hoisted to a page-level, full-bleed bar by
   hoistBreadcrumb() in custom.js (same technique as the CTA band:
   moved out of `.pkp_structure_main` so its background can span the
   full viewport width while its content stays container-width).
   Falls back to plain inline styling if JS hasn't run yet.
   ============================================================ */
.jiapd-crumb-bar {
  background: var(--crumb-bg);
  border-bottom: 1px solid var(--rule);
}
.jiapd-crumb-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-3) var(--gutter);
}
.cmp_breadcrumbs {
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  color: var(--muted);
}
/* Theme's <ol> carries a UA-ish list margin/padding (~34px bottom margin +
   vertical padding) that puffs the bar out well past one text line. */
.cmp_breadcrumbs ol { margin: 0; padding: 0; list-style: none; }
.cmp_breadcrumbs a { color: var(--accent); text-decoration: none; }
.cmp_breadcrumbs a:hover { text-decoration: none; }
.cmp_breadcrumbs .separator { font-size: 0; }
.cmp_breadcrumbs .separator::before {
  content: '\203A';
  font-size: var(--text-meta);
  color: var(--muted);
}

/* ============================================================
   9. ARTICLE PAGE (#6a)
   DOM (article_details.tpl): h1.page_title, .row > .main_entry
   (authors, doi, keywords, abstract, references) + .entry_details
   (cover_image, galleys, published, citation, issue, pubid,
   copyright). buildArticleHeader() in custom.js lifts title/authors/
   DOI into a full-width band above the grid (mirrors buildHero());
   buildArticleInfoCard() merges published/issue/copyright into one
   sidebar-style card; pillifyKeywords() splits the comma-list value
   into chips. All three degrade gracefully if JS hasn't run: base
   typography below still applies to the elements in their original
   template position.
   ============================================================ */

/* --- Title: styled whether still inline (.obj_article_details) or
   lifted into the header band (.jiapd-article-head) --- */
.obj_article_details .page_title,
.jiapd-article-head .page_title {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  line-height: 1.22;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--space-4);
}
/* Fallback context only (JS hasn't moved it next to a cover float) — caps
   line length for readability. In the header, it wraps beside the cover
   and should fill the rest of that row right out to the wrapper edge. */
.obj_article_details .page_title { max-width: 1000px; }

/* --- Header band (full-width content wrapper, no sidebar — same
   pattern as .jiapd-content-hero) --- */
/* Content wrapper's own top padding (§3) is dropped — .jiapd-article-head
   supplies the gap to the breadcrumb bar itself, so it isn't doubled. */
.jiapd-content-articlehead { padding-top: 0; padding-bottom: 0; }
.jiapd-article-head {
  overflow: hidden; /* clearfix for the floated cover */
  padding: var(--space-6) 0 var(--space-5);
  border-bottom: 2px solid var(--accent);
}
/* Cover + Download PDF, moved here from .entry_details by
   buildArticleHeader() — floats as one column beside the badge/title/
   authors/meta text (smaller than .jiapd-issue-heading's cover: this is a
   supporting reference here, not the page's primary subject). */
.jiapd-article-cover-col {
  float: left;
  width: 200px;
  margin: 0 var(--space-5) var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.jiapd-article-cover-col .item.cover_image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-shell);
  box-shadow: var(--shadow-cover);
}
.jiapd-badge-section {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--nav);
  background: var(--jbadge-bg);
  border-radius: 4px;
  padding: .38em .7em;
  line-height: 1;
}
.jiapd-article-head .item.authors { margin: 0 0 var(--space-2); }
.jiapd-article-head ul.authors {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
  padding: 0;
}
.jiapd-article-head ul.authors .name { font-weight: 700; color: var(--ink); }
.jiapd-article-head ul.authors .affiliation {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
}
.jiapd-article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5em;
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  color: var(--body);
  margin: 0 0 var(--space-3);
}
.jiapd-article-meta .item.doi,
.jiapd-article-meta .item.doi .value { display: inline; }
.jiapd-article-meta .item.doi .label {
  display: inline;
  font: inherit;
  color: inherit;
  text-transform: none;
  letter-spacing: normal;
  margin: 0;
}
.jiapd-article-meta .item.doi .value a { color: var(--accent); text-decoration: none; }
.jiapd-article-meta .item.doi .value a:hover { text-decoration: none; }
.jiapd-article-meta-sep { color: var(--muted); }

/* --- Body grid: main_entry (abstract/keywords/references) + entry_details
   (280px card column). Sits inside the outer main|sidebar grid (§3), giving
   the visual 1fr / 280px / 300px three columns from the mock. --- */
.obj_article_details > .row {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  align-items: start;
  /* theme adds a #ddd top+bottom border and ~34px top/-1.43rem side margin
     here (plain-list divider pattern) — the red rule above already closes
     the header */
  margin: 0;
  border-top: 0;
  border-bottom: 0;
}
/* buildArticleHeader() adds this when .entry_details ends up empty (cover,
   Download PDF and the Published/Issue/Section/License items all moved out
   or dropped as redundant) — main_entry then runs the full column width
   instead of leaving a dead 280px gap. */
.obj_article_details > .row.jiapd-row-single {
  grid-template-columns: 1fr;
}
/* Theme also clearfixes .row with generated ::before/::after (content:"";
   display:table) — as grid items with no explicit placement, auto-flow
   drops each into its own empty row (row-gap before AND after the real
   content row), staircasing main_entry/entry_details 40px below the
   sidebar. Same class of bug as .pkp_structure_main's clearfix in §3. */
.obj_article_details > .row::before,
.obj_article_details > .row::after {
  content: none;
  display: none;
}
/* Theme floats + fixes widths on these at 428/352/560px depending on
   breakpoint (see cache/1-stylesheet-*.css) — same leftover-float gotcha
   as §3; neutralise and place explicitly rather than trust auto-placement. */
.obj_article_details > .row > .main_entry,
.obj_article_details > .row > .entry_details {
  float: none;
  width: auto;
  margin: 0;
  border: 0;
}
.obj_article_details > .row > .main_entry { grid-column: 1; }
.obj_article_details > .row > .entry_details { grid-column: 2; }
/* Template renders Keywords before Abstract (DOI, Keywords, Abstract,
   References, in that source order) — flex+order flips Keywords below
   Abstract to match the design without moving anything via JS. */
.obj_article_details .main_entry {
  display: flex;
  flex-direction: column;
}
.obj_article_details .item.abstract { order: 1; }
.obj_article_details .item.keywords { order: 2; }
.obj_article_details .item.references { order: 3; }
/* Theme pads every .item 1.43–2.143rem on all sides (plain-list rhythm) —
   same double-spacing gotcha as entry_details below, but here it's what
   was pushing Abstract's heading down out of line with the cover/sidebar
   despite the boxes themselves being top-aligned. Reset first so the more
   specific rules below (keywords' own margin, etc.) still win. */
.obj_article_details .main_entry > .item {
  padding: 0;
  border-bottom: 0;
  margin: 0;
}
/* Theme also hard-codes h2{line-height:2.143rem} regardless of font-size —
   every .label in this section is an <h2>, so it needs an explicit reset. */
.obj_article_details h2.label { line-height: var(--lh-normal); }

/* Abstract / References: uppercase label + bottom rule (section head) */
.obj_article_details .item.abstract .label,
.obj_article_details .item.references .label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 10px;
  margin: 0 0 18px;
}
.obj_article_details .item.abstract {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--lh-prose);
  color: var(--body);
}
.obj_article_details .item.abstract p { margin: 0 0 16px; }
.obj_article_details .item.abstract p:last-child { margin-bottom: 0; }

/* Keywords: plain (non-uppercase) label + pill chips built by
   pillifyKeywords(); degrades to a plain comma list if JS hasn't run. */
.obj_article_details .item.keywords {
  margin: 26px 0 34px;
  font-family: var(--font-sans);
}
.obj_article_details .item.keywords .label,
.obj_article_details .main_entry .item.keywords .label {
  display: block;
  font-size: var(--text-meta);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
}
.obj_article_details .item.keywords .value {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  font-size: var(--text-sm);
  color: var(--body);
}
.obj_article_details .item.keywords .jiapd-kw-pill {
  display: inline-flex;
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}

/* References: hanging indent per citation paragraph */
.obj_article_details .item.references .value p {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--body);
  padding-left: 26px;
  text-indent: -26px;
  margin: 0 0 14px;
}
.obj_article_details .item.references .value p:last-child { margin-bottom: 0; }

/* --- entry_details column: 280px card stack, 22px gap (matches sidebar) --- */
.obj_article_details .entry_details {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.obj_article_details .entry_details .item.cover_image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-cover);
}
/* Theme pads/border-divides every .item in .entry_details (1.43–2.143rem +
   border-bottom, a plain-list pattern) — zero it so the card borders/
   padding defined below are the only spacing in play. */
.obj_article_details .entry_details > .item {
  padding: 0;
  border-bottom: 0;
  margin: 0;
}

/* Download PDF button (galley link) */
/* .item.galleys normally lives in .entry_details (under .obj_article_details)
   but buildArticleHeader() moves it into .jiapd-article-cover-col, beside
   the cover — style both locations so the button still looks right if JS
   hasn't run yet. */
.obj_article_details .item.galleys .value.galleys_links,
.jiapd-article-cover-col .item.galleys .value.galleys_links {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Theme sets li{display:inline-block;margin-right:1em} (content-hugging,
   side-by-side galleys) — same leftover-theme gotcha as §3/main_entry;
   this design wants one full-width stacked Download button. */
.obj_article_details .item.galleys .value.galleys_links li,
.jiapd-article-cover-col .item.galleys .value.galleys_links li {
  display: block;
  margin: 0 0 10px;
}
.obj_article_details .item.galleys .value.galleys_links li:last-child,
.jiapd-article-cover-col .item.galleys .value.galleys_links li:last-child { margin-bottom: 0; }
.obj_article_details .item.galleys .obj_galley_link.pdf,
.jiapd-article-cover-col .item.galleys .obj_galley_link.pdf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-nav);
  line-height: 1.35;
  padding: 14px 1.1rem;
  border-radius: var(--radius);
  text-decoration: none;
}
.obj_article_details .item.galleys .obj_galley_link.pdf:hover,
.obj_article_details .item.galleys .obj_galley_link.pdf:focus,
.jiapd-article-cover-col .item.galleys .obj_galley_link.pdf:hover,
.jiapd-article-cover-col .item.galleys .obj_galley_link.pdf:focus {
  background: var(--accent-d);
  color: #fff;
}
.obj_article_details .item.galleys .obj_galley_link.pdf::before,
.jiapd-article-cover-col .item.galleys .obj_galley_link.pdf::before {
  content: '';
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-4-4m4 4 4-4M5 21h14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-4-4m4 4 4-4M5 21h14'/%3E%3C/svg%3E");
}
/* Override the shared 14px padding above just for the header column — at
   200px wide, full padding read as "fat"; the entry_details fallback
   (sized to match the sidebar's Submit button) keeps the original value. */
.jiapd-article-cover-col .item.galleys .obj_galley_link.pdf {
  padding: 8px 1.1rem;
}

/* How to Cite — own card, styled directly (no merge needed, the
   template already wraps it in one .sub_item) */
.obj_article_details .item.citation {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.obj_article_details .item.citation .sub_item { padding: 18px; }
.obj_article_details .item.citation .label {
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  font-weight: 700;
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
  margin: 0 0 10px;
}
.obj_article_details .item.citation .value {
  font-family: var(--font-serif);
  font-size: var(--text-meta);
  line-height: 1.6;
  color: var(--body);
}
.obj_article_details .item.citation .citation_formats { margin-top: 12px; }
.obj_article_details .item.citation .citation_formats_button {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}

/* License — own card (copyright statement + CC badge image + license
   sentence, all straight from OJS's own markup, not scoped/merged). */
.obj_article_details .item.copyright {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: 18px;
}
.obj_article_details .item.copyright .label {
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  font-weight: 700;
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
  margin: 0 0 10px;
}
.obj_article_details .item.copyright p {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--body);
  margin: 0 0 10px;
}
.obj_article_details .item.copyright p:last-child { margin-bottom: 0; }
.obj_article_details .item.copyright img { display: block; margin: 4px 0 10px; }
.obj_article_details .item.copyright a { color: var(--accent); }
/* In the header (moved below the authors line by buildArticleHeader) it's
   secondary/incidental info like the Published line, not a featured
   card — strip the card chrome, hide the redundant "License" label (the
   CC badge + sentence already say what it is), full width, meta-sized. */
.jiapd-article-head .item.copyright {
  max-width: none;
  margin-top: var(--space-5);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.jiapd-article-head .item.copyright .label { display: none; }
.jiapd-article-head .item.copyright p,
.jiapd-article-head .item.copyright a {
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  color: var(--body);
}
.jiapd-article-head .item.copyright p { margin: 0 0 4px; }
.jiapd-article-head .item.copyright img { margin: 2px 0 4px; }
/* Self-hosted cc/by/nc icon trio (swapLicenseIcon() swaps in the same
   assets/sizing as the footer's .jiapd-cc), placed after the paragraphs. */
.jiapd-article-head .item.copyright .jiapd-cc { margin-top: 6px; }

/* DOI fallback if it's still inline in .main_entry (JS hasn't moved it) */
.obj_article_details .main_entry > .item.doi {
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  color: var(--body);
  margin: 0 0 var(--space-4);
}
.obj_article_details .main_entry > .item.doi .label {
  font-weight: 600;
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
}

/* ============================================================
   10. ISSUE / ARCHIVE
   Current Issue (#6b, issue_toc.tpl) reuses almost everything the
   homepage's mini "Current Issue" widget already established, since both
   render the same partial: .obj_issue_toc .heading (cover float + published)
   and .obj_article_summary rows are already generic (§5.2/5.3, not scoped
   to .current_issue) — no extra work needed for the article list itself.
   What's added here is specific to the FULL page: hoisting .heading into
   its own full-width band (buildIssueHeader(), same technique as the
   article header) and styling the bare page <h1> that moveIssueHeading()
   relocates next to the cover (homepage's equivalent is
   .current_issue_title, a different element — no overlap).
   ============================================================ */
.jiapd-content-issuehead { padding-top: 0; padding-bottom: 0; }
.jiapd-issue-heading {
  overflow: hidden; /* clearfix for the floated cover, same as §5.2 */
  padding: var(--space-6) 0;
  border-bottom: 2px solid var(--accent);
}
.jiapd-issue-heading .cover {
  float: left;
  width: 180px;
  margin: 0 var(--space-6) var(--space-4) 0;
}
.jiapd-issue-heading .cover img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-shell);
  box-shadow: var(--shadow-cover);
}
.jiapd-issue-heading h1 {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  line-height: 1.2;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.jiapd-issue-heading .published {
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  color: var(--body);
  margin: 0 0 var(--space-2);
}
.jiapd-issue-heading .published .label { font-weight: 700; color: var(--ink); }
.jiapd-issue-heading .description {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--lh-prose);
  color: var(--body);
  max-width: 720px;
  margin: var(--space-2) 0;
}
.jiapd-issue-heading .pub_id {
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  color: var(--body);
  margin: 0 0 var(--space-2);
}
.jiapd-issue-heading .pub_id .type { font-weight: 600; color: var(--ink); }
.jiapd-issue-heading .pub_id .id a { color: var(--accent); text-decoration: none; }
.jiapd-issue-heading .pub_id .id a:hover { color: var(--accent-d); text-decoration: none; }

/* Archives (#6c, issue_archive.tpl): full-width "Archives" title band
   (buildArchivesHeader() hoists the bare page <h1> the same way the
   article/issue headers do) + a 3-col grid of issue covers in the main
   column, sidebar unchanged (§3's main|sidebar grid already handles it). */
.jiapd-content-archiveshead { padding-top: 0; padding-bottom: 0; }
.jiapd-archives-head {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  padding: var(--space-6) 0 var(--space-5);
  border-bottom: 2px solid var(--accent);
}

/* Theme gives .issues_archive negative side margins + a top border, and
   >li 2.143rem padding + a bottom border (plain-list divider pattern —
   same gotcha as §5.3/§9's article rows). Reset for a clean grid. */
.issues_archive,
.page_issue_archive .issues_archive {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8) var(--space-6);
  margin: 0;
  padding: 0;
  border-top: 0;
}
.issues_archive > li,
.page_issue_archive .issues_archive > li {
  margin: 0;
  padding: 0;
  border-bottom: 0;
}
/* Theme also clearfixes .obj_issue_summary AND floats .cover at a fixed
   25% width with its own margin — same class of leftover-float bug as
   §3/§9; neutralise both. */
.obj_issue_summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.obj_issue_summary::before,
.obj_issue_summary::after { content: none; display: none; }
.obj_issue_summary .cover {
  display: block;
  float: none;
  width: auto;
  margin: 0;
}
.obj_issue_summary .cover img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: var(--radius-shell);
  box-shadow: var(--shadow-card);
}
.obj_issue_summary h2 { margin: 0; }
.obj_issue_summary .title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--ink);
  text-decoration: none;
}
.obj_issue_summary .title:hover { color: var(--accent); }
.obj_issue_summary .series {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--muted);
  margin-top: 4px;
}
/* Mock keeps each grid cell to cover + title + series only */
.obj_issue_summary .description { display: none; }

/* ============================================================
   10b. EDITORIAL TEAM — buildEditorialTeam() groups the flat masthead
   <p>s into per-person cards (+ role headings + avatars) inside
   .jiapd-ed-grid. Full-width title band reuses the archives-head look.
   ============================================================ */
.jiapd-content-edhead { padding-top: 0; padding-bottom: 0; }
.jiapd-ed-head {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  padding: var(--space-6) 0 var(--space-5);
  border-bottom: 2px solid var(--accent);
}

.jiapd-ed-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-2);
  align-items: start;  /* grid items stretch to the row's tallest sibling by
                           default — cards with less content (fewer badges/
                           icons) were being stretched taller than their own
                           content, leaving a big empty gap below the icon
                           row. This sizes each card to its own content. */
}
/* role labels ("Advisory Board", "Editor-in-Chief"…) span the whole grid */
.jiapd-ed-heading {
  grid-column: 1 / -1;
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
  padding: 0 0 var(--space-2);
  border-bottom: 2px solid var(--accent);
  margin: var(--space-5) 0 0;
}
.jiapd-ed-heading:first-child { margin-top: 0; }

/* Horizontal card, two zones from a FLAT DOM (photo, name, meta[affiliation],
   meta[id]…, link…) — pure CSS, no JS restructure. The photo FLOATS left; the
   name + field + affiliation flow beside it (zone 1). The first ID/link line
   clears the float to drop full-width below, carrying the divider; the rest
   follow full-width (zone 2). Sibling combinators split "affiliation" (the
   first meta) from the id/link lines. Assumes each person has an affiliation
   line right after the name (true for all current entries). */
/* NB: selectors carry the .jiapd-ed-card prefix so they outrank the theme's
   `.pkp_structure_main p { margin: 1.43rem 0 }` (0,1,1) — without it every
   line got ~20px of stray vertical margin. */
.jiapd-ed-card {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}
.jiapd-ed-card::after { content: ''; display: block; clear: both; }  /* contain the float */
/* kill the theme's `.pkp_structure_main p { margin: 1.43rem 0 }` on every
   line (esp. the margin-BOTTOM the per-element rules below don't touch) */
.jiapd-ed-card p { margin: 0; }
.jiapd-ed-card .jiapd-ed-photo {
  float: left;
  width: 72px;
  height: 72px;
  margin: 2px 14px 4px 0;
  padding: 3px;           /* inner frame gap */
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.jiapd-ed-card .jiapd-ed-photo img,
.jiapd-ed-card .jiapd-ed-photo svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.jiapd-ed-card .jiapd-ed-name {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 0 86px;  /* fixed indent (photo 72px + 14px gap), not float-wrap —
                          keeps wrapped lines flush with line 1 instead of
                          expanding full-width once they clear the float */
}
.jiapd-ed-card .jiapd-ed-name strong { font-weight: 700; }
.jiapd-ed-card .jiapd-ed-meta {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--muted);
  margin: 0;
}
/* affiliation = the first meta, sits right under the name beside the photo.
   Fixed margin-left (not float-wrap) keeps wrapped lines flush — see the
   matching comment on .jiapd-ed-name above. */
.jiapd-ed-card .jiapd-ed-name + .jiapd-ed-meta { margin: 3px 0 0 86px; }
/* spacing between stacked footer id lines (plain-text IDs) */
.jiapd-ed-card .jiapd-ed-meta + .jiapd-ed-meta { margin-top: 3px; }

/* Discipline badges — one pill per comma-separated value (a plain "A, B"
   line reads oddly once someone lists more than one field); same indent as
   name/affiliation, sits right under whichever of those is last. */
.jiapd-ed-card .jiapd-ed-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 5px 0 0 86px;
}
.jiapd-ed-card .jiapd-ed-badge {
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  line-height: 1.3;
}

/* Divider before the ID/link row: a real element custom.js inserts right
   after whichever of name/affiliation/badges ends up last (badges are
   skipped when there's no field text, so this can't be hardcoded to one
   selector). MUST be a real element, not a ::after on that element — when
   the last one is .jiapd-ed-badges (a flex container), a pseudo-element
   generated inside it becomes a flex item itself: clear:both is ignored,
   and an empty flex item collapses to ~0 width, so it silently rendered as
   an invisible sliver instead of a full-width line. */
.jiapd-ed-card .jiapd-ed-divider {
  clear: both;
  margin-top: 16px;  /* NOT indented like name/meta/badges — this is a direct
                         child of .jiapd-ed-card, not nested inside them, so
                         it already starts at the card's true left edge.
                         Gap below the line comes from .jiapd-ed-link's own
                         margin-top (same 16px) — kept here at 0 so the two
                         don't stack into an unbalanced top/bottom gap. */
  border-top: 1px solid #c9c3b5;  /* between --rule (too faint on the card's
                                      own white bg) and --muted (too heavy) */
  font-size: 0;    /* OJS's inline-edit affordance (visible when logged in
                        as manager, e.g. on live) pads empty elements in
                        editable content zones with &nbsp; so they don't
                        collapse to zero height for the edit-click target —
                        that text would otherwise inflate this div to a full
                        text line instead of a hairline. font-size:0 keeps
                        the height pinned to the border regardless. */
  line-height: 0;
  overflow: hidden;
}

/* Icon-only ID/link row: every .jiapd-ed-link used to be its own stacked
   block line (each individually centered = still one-per-row); switching
   to inline-flex lets them all sit side by side as one horizontal row.
   Centered as a GROUP via text-align on the card — name/meta/badges opt
   back OUT to stay left-aligned since they'd otherwise inherit the new
   default. */
.jiapd-ed-card { text-align: center; }
.jiapd-ed-card .jiapd-ed-name,
.jiapd-ed-card .jiapd-ed-meta,
.jiapd-ed-card .jiapd-ed-badges {
  text-align: left;
}
/* Icon-only ID/link rows: the icon is the only visible content; the link
   text (ID/URL) is hidden but stays in the DOM for accessibility and as
   the tooltip source (::after reads it straight from `href`, no markup
   change needed). The <a> is stretched to cover the whole row so the icon
   itself is clickable even though it isn't nested inside it. */
.jiapd-ed-card .jiapd-ed-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 16px 8px 0 0;  /* gap below the divider, matches divider's own
                             margin-top above it so both sides are even */
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.35;
}
.jiapd-ed-card .jiapd-ed-link:last-child { margin-right: 0; }
.jiapd-ed-card .jiapd-ed-link img { width: 17px; height: 17px; flex: none; }
.jiapd-ed-card .jiapd-ed-link a {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  color: var(--accent);
  text-decoration: none;
  word-break: break-word;
}
.jiapd-ed-card .jiapd-ed-link a:hover,
.jiapd-ed-card .jiapd-ed-link a:focus { text-decoration: none; }

/* Dropdown-style tooltip (full URL) + connecting triangle, below the icon.
   Hover-only by design — on mobile (no real hover) it just never shows,
   which is fine since the icon alone is the intended mobile treatment. */
.jiapd-ed-card .jiapd-ed-link a::after {
  content: attr(href);
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 220px;
  background: var(--ink);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  padding: 6px 10px;
  border-radius: var(--radius-shell);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s var(--ease), visibility .15s;
  z-index: 5;
}
.jiapd-ed-card .jiapd-ed-link a::before {
  content: '';
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s var(--ease), visibility .15s;
  z-index: 5;
}
.jiapd-ed-card .jiapd-ed-link a:hover::after,
.jiapd-ed-card .jiapd-ed-link a:focus::after,
.jiapd-ed-card .jiapd-ed-link a:hover::before,
.jiapd-ed-card .jiapd-ed-link a:focus::before {
  opacity: 1;
  visibility: visible;
}

/* ============================================================
   12. INDEXING PAGE (static page, plugins/generic/staticPages,
   path "indexing") — card grid of indexing databases/directories.
   Content lives in static_page_settings (baked via PHP/PDO, not
   TinyMCE — same reasoning as Editorial Team, see JIAPD-NEXT-
   SESSION.md §7: TinyMCE strips class/div attributes on save).
   ============================================================ */
.jiapd-idx-intro {
  max-width: 62ch;
  margin: 0 0 28px;
  color: var(--body);
}
.jiapd-idx-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.jiapd-idx-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 22px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  transition: box-shadow .15s, border-color .15s;
}
.jiapd-idx-card:hover,
.jiapd-idx-card:focus {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(10, 42, 94, .08);
}
/* Each source logo has a very different natural aspect ratio (Google
   Scholar's wordmark is ~6:1, Crossref's landscape mark ~3:1) — a shared
   fixed HEIGHT alone leaves the wide ones reading much bigger than the
   compact ones (measured: 143px vs 62px rendered width for the same
   24px height). Fix: give every logo the same fixed BOX and let
   object-fit:contain scale each one to fit within it — bounding-box
   size ends up comparable regardless of internal aspect ratio, which
   reads as "proportional" the way varying-height-only doesn't. */
.jiapd-idx-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 40px;
}
.jiapd-idx-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.jiapd-idx-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--body);
  margin: 0;
}

/* ============================================================
   13b. ANNOUNCEMENTS LISTING PAGE (/announcement) — card grid, same
   visual language as the Indexing page card (§12), but 2 columns
   instead of 3 (announcement summaries are full paragraphs, not short
   logo+one-liner cards, so 3-across would be cramped). Uses
   auto-fit/minmax instead of a fixed 2-column track + a manual mobile
   breakpoint: below ~2×360px+gap of available width the second track
   has nowhere to go and the grid collapses to one column on its own —
   exactly the "2 across, but 1 if that's too tight" behaviour asked
   for, without hand-picking a breakpoint width.
   Scoped to .page_announcements, NOT .pkp_page_index — this is a
   different template (raw <ul><li><article>) from the homepage
   announcements widget (§13's plain <article> siblings), so none of
   that section's fixes (phantom clearfix flex-item, float:65%, divider
   ::before) automatically carry over; checked directly, none of them
   are actually present here regardless.
   ============================================================ */
.page_announcements ul.cmp_announcements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--space-5);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}
.page_announcements ul.cmp_announcements > li {
  margin: 0;
  padding: 0;
  border-bottom: none;
}
.page_announcements .obj_announcement_summary {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.page_announcements .obj_announcement_summary h2 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  font-weight: 600;
  margin: 0;
}
.page_announcements .obj_announcement_summary h2 a { color: var(--accent); text-decoration: none; }
.page_announcements .obj_announcement_summary h2 a:hover,
.page_announcements .obj_announcement_summary h2 a:focus { color: var(--accent-d); }
.page_announcements .obj_announcement_summary .date {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: 4px;
}
.page_announcements .obj_announcement_summary .summary {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.page_announcements .obj_announcement_summary .summary p {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--lh-prose);
  color: var(--body);
  margin: var(--space-3) 0 0;
}
/* Same treatment as the homepage widget's Read More (§13) — matches
   .jiapd-cta-btn exactly, not the theme's default pill. margin-top:auto
   pins it to the card's bottom edge regardless of summary length, so
   two cards side by side in the same row keep their buttons aligned. */
.page_announcements .obj_announcement_summary .read_more {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  align-self: flex-start;
  /* Was margin-top:auto (pins to card bottom) — but that means "however
     much space happens to be left", which collapses to 0 the moment the
     summary text is long enough to nearly fill the card (exactly what
     happened with real announcement text). A fixed, generous gap is what
     was actually asked for; card-bottom alignment across an uneven row
     was a bonus that isn't worth reintroducing that failure mode for. */
  margin-top: var(--space-5);
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  padding: .7em 1.5em;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: var(--lh-normal);
  text-decoration: none;
  transition: background var(--ease);
}
.page_announcements .obj_announcement_summary .read_more::after {
  content: none;
}
.page_announcements .obj_announcement_summary .read_more:hover,
.page_announcements .obj_announcement_summary .read_more:focus {
  background: var(--accent-d);
  color: #fff;
  text-decoration: none;
}

/* ============================================================
   13. INDEXED-IN BAND — full-bleed strip between the homepage body
   and the footer, injected by custom.js buildIndexerBand() (hoisted
   to page level the same way as the CTA band, since Custom Blocks
   only render in the sidebar and Additional Content only renders in
   the main column — neither can produce a full-bleed band). Homepage
   only, per user decision (not site-wide like the footer itself).
   ============================================================ */
html.jiapd-loading .jiapd-indexed-band {
  visibility: hidden;
}
.jiapd-indexed-band {
  background: var(--band-bg);
}
.jiapd-indexed-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 32px var(--gutter);
  text-align: center;
}
.jiapd-indexed-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 36px;
}
.jiapd-indexed-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}
.jiapd-indexed-logos a.jiapd-indexed-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 40px;
  opacity: .8;
  transition: opacity .15s;
}
.jiapd-indexed-logos a.jiapd-indexed-logo:hover,
.jiapd-indexed-logos a.jiapd-indexed-logo:focus {
  opacity: 1;
}
.jiapd-indexed-more {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.jiapd-indexed-more:hover,
.jiapd-indexed-more:focus {
  color: var(--accent-d);
}
/* Same fixed-box + object-fit:contain fix as .jiapd-idx-logo-box on the
   Indexing page (see comment there) — the box lives on the <a> here
   since there's no separate wrapper element. */
.jiapd-indexed-logos img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ============================================================
   11. RESPONSIVE — homepage (tablet + mobile). Header collapses to
   the default-theme hamburger below 992px; these rules refine the
   homepage content flow at narrow widths.
   ============================================================ */

/* Tablet + mobile (< 992): sidebar already stacks below main via §3 */
@media (max-width: 991px) {
  /* section heads a touch smaller */
  .pkp_page_index .homepage_about h2,
  .pkp_page_index .current_issue > h2 { font-size: var(--text-2xl); }

  /* Article page: entry_details (Download PDF / Article Info / How to
     Cite) stacks below main_entry instead of a cramped 280px column. */
  .obj_article_details > .row {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .obj_article_details > .row > .entry_details { grid-column: 1; }

  /* Article header: tablet keeps the desktop layout (badges/title/authors
     wrapping beside the cover) — just one scale step smaller across the
     board so it isn't as cramped beside a fixed 200px float. */
  .jiapd-article-head .page_title { font-size: var(--text-3xl); }
  .jiapd-article-head ul.authors .name { font-size: var(--text-nav); }
  .jiapd-article-head ul.authors .affiliation,
  .jiapd-article-meta,
  .jiapd-article-head .item.copyright p,
  .jiapd-article-head .item.copyright a {
    font-size: var(--text-sm);
  }

  /* Archives: sidebar's own margin-top (§3, shared with every page) reads
     as too tight once the last cover's title/series is right above it —
     padding (not margin, so it can't collapse away) adds real breathing
     room without touching that shared rule. */
  .issues_archive { padding-bottom: var(--space-10); }

  /* Indexing page: 3 → 2 columns, same step as Archives' cover grid. */
  .jiapd-idx-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Small screens: CTA band stacks, button full-width */
@media (max-width: 640px) {
  /* Editorial Team: single column on a phone; smaller photo so the text
     beside it isn't squeezed into awkward mid-word wraps. */
  .jiapd-ed-grid { grid-template-columns: 1fr; }
  .jiapd-ed-card .jiapd-ed-photo { width: 60px; height: 60px; margin-right: 12px; }

  .jiapd-cta-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .jiapd-cta-btn { justify-content: center; }
  .jiapd-cta-text strong { font-size: 17px; }

  /* Article header: badges + Published move above the cover (not enough
     width left beside a 200px float on a phone screen). Cover+PDF (one
     unit — buildArticleHeader() already stacks them together) center
     themselves; title/authors/license stay left-aligned like everything
     else in the column. */
  .jiapd-article-head {
    display: flex;
    flex-direction: column;
  }
  .jiapd-article-head .jiapd-badges { order: 1; }
  .jiapd-article-head .jiapd-article-meta { order: 2; }
  .jiapd-article-cover-col {
    order: 3;
    float: none;
    align-self: center;
    margin: 0 0 var(--space-4);
  }
  .jiapd-article-head .page_title { order: 4; }
  .jiapd-article-head .item.authors { order: 5; }
  .jiapd-article-head .item.copyright { order: 6; }

  /* Archives: 3 columns is still fine on tablet (sidebar already stacks
     below main at <992px, per §3, so the grid has the full width) but
     drops to ~90px per cover by phone width — two columns first. */
  .issues_archive { grid-template-columns: repeat(2, 1fr); }

  /* Indexing page: single column on a phone. */
  .jiapd-idx-grid { grid-template-columns: 1fr; }

  /* Indexed-in band: smaller boxes so logos wrap cleanly (2 per row)
     on a narrow screen instead of overflowing at full desktop size. */
  .jiapd-indexed-logos { gap: 20px 24px; }
  .jiapd-indexed-logos a.jiapd-indexed-logo { width: 140px; height: 32px; }
}

/* Mobile: stack the issue-TOC heading (cover above title) */
@media (max-width: 540px) {
  .obj_issue_toc .heading .cover,
  .jiapd-issue-heading .cover {
    float: none;
    width: 140px;
    margin: 0 0 16px;
  }
  /* footer bottom bar: keep "Customized by" pushed to the far right.
     Tighter gap so both labels fit on one row at narrow widths (375px:
     text widths sum to ~328px, container is 343px — 16px gap wrapped it
     by 1px; 10px fits with room to spare). */
  .jiapd-footer-bottom { gap: 8px 10px; }
  /* license icons + text wrap gracefully */
  .jiapd-license { align-items: flex-start; }

  /* Archives: down to one column on phone width */
  .issues_archive { grid-template-columns: 1fr; }
}