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

/*
 * NERS Jurnal Keperawatan (NJK)
 * Custom Journal Style Sheet
 *
 * Target:
 * OJS 3.3.0.17
 *
 * Website:
 * https://ners.fkep.unand.ac.id/index.php/NJK/index
 *
 * Version:
 * 1.1.0
 *
 * Changelog:
 * 1.1.0 (2026-10-05) - Section 29: content hooks (.njk-links, .njk-facts,
 *                      .njk-logos, .njk-template, .njk-cta) for the sidebar
 *                      blocks described in NJK_Panduan_Instalasi_dan_
 *                      Pekerjaan_Lanjutan_Tim_Editor.md; active-menu states
 *                      for Current, Editorial Team, Reviewers, Submissions
 *                      and Contact when they are top-level menu items.
 * 1.0.0 (2026-10-05) - Initial release.
 *
 * Implementation:
 * CSS only
 *
 * Do not modify OJS core files.
 *
 * Design direction: "NJK Clinical Scholarly"
 * Visual reference: Assests/NJK - 1..10 (mockups are visual references only;
 * no mockup content or metadata is reproduced by this file).
 *
 * Audited live markup (2026-10-05):
 * - Theme: OJS Default theme, base colour #619818 (stylesheet served by
 *   page/page/css?name=stylesheet). No previous journal style sheet.
 * - Body classes: pkp_page_{index|issue|article|about|search|login|user|
 *   announcement|aom|ethics|AimAndScope|history|Submission} + pkp_op_*.
 * - Sidebar: .pkp_structure_sidebar (rendered on the right by the theme).
 *
 * Install: Settings > Website > Appearance > Advanced > Journal style sheet
 * Upload the new homepage image (3:1, e.g. 1800 x 600) BEFORE or together
 * with this file: section 10 crops the homepage image to a 3:1 band.
 */

/* ==========================================================
   01. DESIGN TOKENS
   ========================================================== */
:root {
  --njk-teal: #155e63;
  --njk-teal-mid: #2d7d7a;
  --njk-teal-dark: #104b50;
  --njk-teal-deep: #0c3c40;

  --njk-navy: #243642;

  --njk-coral: #c96a54;
  --njk-coral-dark: #aa5443;
  --njk-coral-soft: #f7ece8;

  --njk-aqua-soft: #eaf4f3;
  --njk-aqua-line: #c9e0de;
  --njk-surface-soft: #f7f8f7;

  --njk-white: #ffffff;
  --njk-text: #252b2d;
  --njk-heading: #1d2b31;
  --njk-muted: #667174;
  --njk-border: #dce4e3;

  --njk-shadow: 0 2px 10px rgba(20, 55, 58, 0.06);
  --njk-shadow-hover: 0 8px 24px rgba(20, 55, 58, 0.10);

  --njk-radius: 6px;

  --njk-container: 1180px;
  --njk-sidebar: 300px;
  --njk-gutter: 22px;
  --njk-gap: 32px;
  --njk-content-pt: 30px;
  --njk-utility-h: 34px;
  --njk-hero-h: clamp(240px, 25vw, 360px);

  --njk-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --njk-sans: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ==========================================================
   02. GLOBAL / RESET / TYPOGRAPHY
   ========================================================== */
html {
  background: var(--njk-white);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--njk-white);
  color: var(--njk-text);
  font-family: var(--njk-serif);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* UI text (navigation, metadata, forms, sidebar, footer) uses the sans face;
   reading text inherits the serif from body. */
.pkp_structure_sidebar,
.pkp_structure_footer_wrapper,
.cmp_form,
.cmp_skip_to_content {
  font-family: var(--njk-sans);
}

/* Default theme draws a boxed 1160px page with a shadow; NJK is full width.
   overflow-x: clip contains the full-bleed homepage image (section 10). */
.pkp_structure_page {
  max-width: none;
  margin: 0;
  background: var(--njk-white);
  box-shadow: none;
  overflow-x: clip;
}

a {
  color: var(--njk-teal);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

a:hover,
a:focus {
  color: var(--njk-teal-dark);
}

.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main h4 {
  color: var(--njk-heading);
  font-family: var(--njk-serif);
  font-weight: 700;
  line-height: 1.3;
}

.pkp_structure_main h1 { font-size: 34px; margin: 0 0 22px; }
.pkp_structure_main h2 { font-size: 24px; margin: 34px 0 12px; }
.pkp_structure_main h3 { font-size: 19.5px; margin: 28px 0 10px; }
.pkp_structure_main h4 { font-size: 17px; margin: 22px 0 8px; }

.pkp_structure_main h5,
.pkp_structure_main h6 {
  margin: 18px 0 8px;
  color: var(--njk-heading);
  font-family: var(--njk-sans);
  font-size: 16px;
  font-weight: 700;
}

.pkp_structure_main p {
  margin: 0 0 14px;
  line-height: 1.7;
}

.pkp_structure_main ul,
.pkp_structure_main ol {
  line-height: 1.65;
}

.pkp_structure_main .page ul:not([class]) > li,
.pkp_structure_main .page ol:not([class]) > li {
  margin-bottom: 5px;
}

.pkp_structure_main .page ul:not([class]) > li::marker,
.pkp_structure_main .page ol:not([class]) > li::marker {
  color: var(--njk-teal-mid);
}

.pkp_structure_main img {
  max-width: 100%;
  height: auto;
}

.pkp_structure_main hr {
  margin: 22px 0;
  border: 0;
  border-top: 1px solid var(--njk-border);
}

.pkp_structure_main blockquote {
  margin: 18px 0;
  padding: 12px 18px;
  background: var(--njk-aqua-soft);
  border-left: 3px solid var(--njk-teal-mid);
  border-radius: 0 var(--njk-radius) var(--njk-radius) 0;
}

/* Tables: scroll horizontally on narrow screens instead of overflowing */
.pkp_structure_main .page table:not([class]):not([id]) {
  width: 100%;
  border-collapse: collapse;
}

.pkp_structure_main .page table:not([class]):not([id]) th,
.pkp_structure_main .page table:not([class]):not([id]) td {
  padding: 8px 10px;
  border: 1px solid var(--njk-border);
  vertical-align: top;
}

.pkp_structure_main .page table:not([class]):not([id]) th {
  background: var(--njk-aqua-soft);
  font-weight: 700;
  text-align: left;
}

/* Major page titles: serif with a short decorative teal rule */
.pkp_structure_main .page > h1,
.pkp_structure_main .page > .page_title,
.pkp_structure_main .page:not([class*="page_"]) > h2:first-child {
  position: relative;
  margin: 0 0 24px;
  padding-bottom: 14px;
  color: var(--njk-heading);
  font-family: var(--njk-serif);
  font-size: 36px;
  line-height: 1.2;
}

.pkp_structure_main .page > h1::after,
.pkp_structure_main .page > .page_title::after,
.pkp_structure_main .page:not([class*="page_"]) > h2:first-child::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--njk-teal-mid);
}

/* ==========================================================
   03. HEADER / UTILITY BAR
   ========================================================== */
.pkp_structure_head {
  position: relative;
  background: var(--njk-white);
  border-bottom: 0;
}

.pkp_structure_head .pkp_head_wrapper,
.has_site_logo .pkp_head_wrapper {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 992px) {
  /* Decorative utility band; it holds #navigationUser (Register/Login or
     the logged-in user menu when OJS places items there). No text is
     generated here. */
  .pkp_structure_head {
    padding-top: var(--njk-utility-h);
  }

  .pkp_structure_head::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--njk-utility-h);
    background: var(--njk-aqua-soft);
    border-bottom: 1px solid var(--njk-aqua-line);
  }

  .pkp_navigation_user_wrapper {
    top: calc(-1 * var(--njk-utility-h));
    right: max(var(--njk-gutter), calc((100% - var(--njk-container)) / 2));
    left: auto;
    width: auto;
    height: var(--njk-utility-h);
    padding: 0;
    transform: none;
  }

  .pkp_navigation_user_wrapper .pkp_navigation_user {
    display: flex;
    align-items: center;
    height: var(--njk-utility-h);
  }

  .pkp_navigation_user > li > a,
  .pkp_navigation_user_wrapper a {
    padding: 0 0 0 18px;
    color: var(--njk-navy);
    font-family: var(--njk-sans);
    font-size: 13.5px;
    font-weight: 600;
    line-height: var(--njk-utility-h);
  }

  .pkp_navigation_user > li > a:hover,
  .pkp_navigation_user > li > a:focus {
    background: transparent;
    color: var(--njk-teal);
  }

  .pkp_navigation_user > li:last-child > a {
    margin-right: 0;
  }

  /* When OJS renders no user-menu items (logged out, Login/Register kept in
     the primary menu), the band collapses to a thin decorative accent. */
  .pkp_structure_head:not(:has(#navigationUser > li)) {
    padding-top: 5px;
  }

  .pkp_structure_head:not(:has(#navigationUser > li))::before {
    height: 5px;
    background: var(--njk-teal-mid);
    border-bottom: 0;
  }

  .pkp_navigation_user ul {
    border-top: 3px solid var(--njk-teal);
  }

  .pkp_navigation_user ul a {
    padding: 8px 14px;
    line-height: 1.4;
  }
}

/* ==========================================================
   04. JOURNAL MASTHEAD
   ========================================================== */
.pkp_site_name_wrapper {
  width: calc(100% - (var(--njk-gutter) * 2));
  max-width: var(--njk-container);
  height: auto;
  margin: 0 auto;
  padding: 16px 0;
  background: transparent;
}

.pkp_site_name,
.has_site_logo .pkp_site_name {
  position: static;
  width: 100%;
  margin: 0;
  padding: 0;
  white-space: normal;
  overflow: visible;
  text-align: left;
}

.pkp_site_name .is_img {
  display: block;
  margin: 0;
}

/* Header image (3059 x 316 at audit time): keep intrinsic ratio, never scale */
.pkp_site_name .is_img img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  border-radius: 4px;
}

.pkp_site_name .is_text {
  color: var(--njk-teal-dark);
  font-family: var(--njk-serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
}

/* ==========================================================
   05. PRIMARY NAVIGATION
   ========================================================== */
@media (min-width: 992px) {
  .pkp_site_nav_menu {
    background: transparent;
  }

  .pkp_navigation_primary_row {
    padding: 0;
    background: var(--njk-teal);
    border-bottom: 3px solid var(--njk-teal-dark);
  }

  .pkp_navigation_primary_wrapper {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: calc(100% - (var(--njk-gutter) * 2));
    max-width: var(--njk-container);
    margin: 0 auto;
    padding: 0;
  }

  .pkp_navigation_primary_wrapper::before,
  .pkp_navigation_primary_wrapper::after {
    display: none;
  }

  #navigationPrimary,
  .pkp_navigation_primary.pkp_nav_list {
    display: flex;
    flex-wrap: wrap;
    max-width: none;
    margin: 0;
    text-align: left;
  }

  /* The Default theme styles these with an ID selector (#navigationPrimary a),
     so the overrides use the same ID to win on specificity. */
  #navigationPrimary > li > a,
  #navigationPrimary > li:first-child > a,
  #navigationPrimary > li:last-child > a {
    display: block;
    margin: 0;
    padding: 13px 17px;
    border: 0;
    color: #fff;
    font-family: var(--njk-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.4;
    text-transform: none;
  }

  #navigationPrimary > li > a:hover,
  #navigationPrimary > li > a:focus,
  #navigationPrimary > li:hover > a,
  #navigationPrimary > li:focus-within > a {
    background: var(--njk-teal-dark);
    color: #fff;
    outline: 0;
  }

  #navigationPrimary > li > a:focus-visible {
    box-shadow: inset 0 0 0 2px #fff;
  }

  .pkp_nav_list [aria-haspopup]::after {
    margin-left: .4em;
    border-top-color: currentColor;
  }

  /* Active item. OJS 3.3 does not mark the current menu item, so the page
     body class is matched with the menu link target. */
  .pkp_page_index #navigationPrimary > li > a[href$="/index"],
  .pkp_page_issue.pkp_op_archive #navigationPrimary > li > a[href$="/issue/archive"],
  .pkp_page_article #navigationPrimary > li > a[href$="/issue/archive"],
  .pkp_page_announcement #navigationPrimary > li > a[href$="/announcement"],
  .pkp_page_about #navigationPrimary > li > a[href$="/about"],
  .pkp_page_issue.pkp_op_view #navigationPrimary > li > a[href$="/about"],
  .pkp_page_aom #navigationPrimary > li > a[href$="/aom"],
  .pkp_page_login #navigationPrimary > li > a[href$="/login"],
  .pkp_page_user.pkp_op_register #navigationPrimary > li > a[href$="/user/register"],
  .pkp_page_issue.pkp_op_view #navigationPrimary > li > a[href$="/issue/current"],
  .pkp_page_about.pkp_op_editorialTeam #navigationPrimary > li > a[href$="/about/editorialTeam"],
  .pkp_page_about.pkp_op_submissions #navigationPrimary > li > a[href$="/about/submissions"],
  .pkp_page_about.pkp_op_contact #navigationPrimary > li > a[href$="/about/contact"],
  .pkp_page_reviewers #navigationPrimary > li > a[href$="/reviewers"],
  .pkp_page_ethics #navigationPrimary > li > a[href$="/aom"] {
    background: var(--njk-teal-mid);
    color: #fff;
  }

  /* When one of those pages has its own top-level item, About is no longer
     shown as the active parent (requires :has(); older browsers show both) */
  .pkp_page_issue.pkp_op_view #navigationPrimary:has(> li > a[href$="/issue/current"]) > li:not(:hover):not(:focus-within) > a[href$="/about"],
  .pkp_page_about.pkp_op_editorialTeam #navigationPrimary:has(> li > a[href$="/about/editorialTeam"]) > li:not(:hover):not(:focus-within) > a[href$="/about"],
  .pkp_page_about.pkp_op_submissions #navigationPrimary:has(> li > a[href$="/about/submissions"]) > li:not(:hover):not(:focus-within) > a[href$="/about"],
  .pkp_page_about.pkp_op_contact #navigationPrimary:has(> li > a[href$="/about/contact"]) > li:not(:hover):not(:focus-within) > a[href$="/about"] {
    background: transparent;
  }

  /* Dropdown */
  #navigationPrimary ul,
  .pkp_nav_list ul {
    width: 16em;
    padding: 6px 0;
    background: #fff;
    border: 1px solid var(--njk-border);
    border-top: 3px solid var(--njk-teal-mid);
    border-radius: 0 0 var(--njk-radius) var(--njk-radius);
    box-shadow: var(--njk-shadow-hover);
  }

  #navigationPrimary > li:hover ul,
  #navigationPrimary > li:focus-within ul {
    left: 0;
  }

  #navigationPrimary ul a,
  .pkp_nav_list ul a {
    padding: 9px 16px;
    border-left: 3px solid transparent;
    color: var(--njk-text);
    font-family: var(--njk-sans);
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
  }

  #navigationPrimary ul a:hover,
  #navigationPrimary ul a:focus,
  .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(--njk-aqua-soft);
    border-color: var(--njk-teal-mid);
    color: var(--njk-teal-dark);
  }

  .pkp_nav_list ul li:first-child a,
  .pkp_nav_list ul li:last-child a {
    border-radius: 0;
  }

  /* Search link */
  .pkp_navigation_search_wrapper {
    display: flex;
    float: none;
    align-items: stretch;
  }

  .pkp_navigation_search_wrapper a,
  .pkp_navigation_search_wrapper a.pkp_search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    color: #fff;
    font-family: var(--njk-sans);
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
  }

  .pkp_navigation_search_wrapper a:hover,
  .pkp_navigation_search_wrapper a:focus,
  .pkp_page_search .pkp_navigation_search_wrapper a {
    background: var(--njk-teal-dark);
    color: #fff;
  }
}

/* ==========================================================
   06. MOBILE NAVIGATION
   ========================================================== */
@media (max-width: 991px) {
  .pkp_site_name_wrapper {
    width: 100%;
    padding: 56px 14px 12px;
  }

  /* Decorative teal band that carries the native OJS menu toggle */
  .pkp_site_name_wrapper::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    background: var(--njk-teal);
    border-bottom: 3px solid var(--njk-teal-dark);
  }

  .pkp_site_nav_toggle {
    top: 0;
    left: 0;
    width: 52px;
    height: 44px;
    box-shadow: none;
  }

  .pkp_site_nav_toggle > span {
    border-bottom-color: #fff;
  }

  .pkp_site_nav_toggle > span::before,
  .pkp_site_nav_toggle > span::after {
    background: #fff;
  }

  .pkp_site_nav_toggle:focus {
    outline: 2px solid #fff;
    outline-offset: -4px;
  }

  .pkp_site_nav_menu {
    top: 44px;
    padding: 8px 16px 16px;
    background: #fff;
    border-bottom: 3px solid var(--njk-teal);
    box-shadow: 0 12px 24px rgba(12, 40, 44, 0.16);
  }

  .pkp_site_nav_menu a {
    display: block;
    min-height: 44px;
    padding: 11px 4px;
    border-bottom: 1px solid var(--njk-border);
    color: var(--njk-text);
    font-family: var(--njk-sans);
    font-size: 15.5px;
    font-weight: 600;
  }

  /* Theme ID rule (#navigationPrimary a) applies at all widths */
  #navigationPrimary a,
  .pkp_navigation_search_wrapper a,
  .pkp_navigation_user_wrapper a {
    color: var(--njk-text);
    font-family: var(--njk-sans);
    font-size: 15.5px;
    text-transform: none;
  }

  #navigationPrimary > li > a {
    padding-bottom: 11px;
    border-bottom: 1px solid var(--njk-border);
  }

  .pkp_site_nav_menu ul ul a,
  #navigationPrimary ul a {
    padding-left: 18px;
    font-weight: 400;
  }

  .pkp_site_nav_menu a:hover,
  .pkp_site_nav_menu a:focus {
    color: var(--njk-teal);
    text-decoration: none;
  }

  .pkp_navigation_search_wrapper,
  .pkp_navigation_user.pkp_navigation_user {
    margin-top: 8px;
    padding-top: 0;
    border-top: 0;
  }
}

/* ==========================================================
   07. GLOBAL PAGE LAYOUT
   ========================================================== */
.pkp_structure_content {
  width: 100%;
  padding: 20px 16px 0;
}

@media (min-width: 768px) {
  .pkp_structure_content {
    width: calc(100% - (var(--njk-gutter) * 2));
    max-width: var(--njk-container);
    padding: var(--njk-content-pt) 0 0;
  }
}

.pkp_structure_main {
  padding: 0 0 48px;
}

/* Default theme draws 1px column rules with pseudo-elements */
.pkp_structure_main::before,
.pkp_structure_main::after,
.pkp_structure_sidebar::before {
  display: none;
}

@media (min-width: 992px) {
  .pkp_structure_main,
  body[dir="rtl"] .pkp_structure_main {
    float: left;
    width: calc(100% - var(--njk-sidebar) - var(--njk-gap));
    padding: 0 0 64px;
  }

  .pkp_structure_sidebar,
  .pkp_structure_sidebar.left,
  body[dir="rtl"] .pkp_structure_sidebar {
    float: right;
    width: var(--njk-sidebar);
    padding-bottom: 48px;
  }

  .pkp_structure_main:first-child:last-child {
    float: none;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
  }
}

/* ==========================================================
   08. BREADCRUMBS
   ========================================================== */
.cmp_breadcrumbs {
  display: block;
  margin: 0 0 18px;
  padding: 0;
  color: var(--njk-muted);
  font-family: var(--njk-sans);
  font-size: 14px;
  text-transform: none;
}

.cmp_breadcrumbs ol,
.cmp_breadcrumbs > ol {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
}

.cmp_breadcrumbs a {
  color: var(--njk-teal);
  text-decoration: none;
}

.cmp_breadcrumbs a:hover,
.cmp_breadcrumbs a:focus {
  text-decoration: underline;
}

.cmp_breadcrumbs .separator {
  padding: 0 .45em;
  color: #a7b3b4;
  opacity: 1;
}

.cmp_breadcrumbs .current {
  color: var(--njk-muted);
}

/* ==========================================================
   09. BUTTONS / FORMS / NOTICES
   ========================================================== */
/* Primary button: deep teal */
.cmp_button,
.cmp_form .buttons button,
.page_search .submit button,
.page_lost_password .buttons button,
.pkp_button {
  display: inline-block;
  min-height: 42px;
  padding: 0 18px;
  background: var(--njk-teal);
  border: 1px solid var(--njk-teal-dark);
  border-radius: 5px;
  box-shadow: none;
  color: #fff;
  font-family: var(--njk-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 40px;
  text-decoration: none;
  text-transform: none;
}

.cmp_button:hover,
.cmp_button:focus,
.cmp_form .buttons button:hover,
.cmp_form .buttons button:focus,
.page_search .submit button:hover,
.page_search .submit button:focus,
.pkp_button:hover,
.pkp_button:focus {
  background: var(--njk-teal-dark);
  border-color: var(--njk-teal-deep);
  box-shadow: none;
  color: #fff;
}

/* Secondary button */
.cmp_button_wire {
  display: inline-block;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--njk-teal-mid);
  border-radius: 5px;
  color: var(--njk-teal);
  font-family: var(--njk-sans);
  font-weight: 600;
  line-height: 34px;
  text-decoration: none;
}

.cmp_button_wire:hover,
.cmp_button_wire:focus {
  background: var(--njk-teal);
  color: #fff;
}

/* Existing galley links (PDF). The theme's own FontAwesome file icon stays. */
.obj_galley_link {
  display: inline-block;
  min-height: 32px;
  padding: 0 13px;
  background: var(--njk-aqua-soft);
  border: 1px solid var(--njk-teal-mid);
  border-radius: 5px;
  color: var(--njk-teal-dark);
  font-family: var(--njk-sans);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 30px;
  text-decoration: none;
  text-transform: uppercase;
}

.obj_galley_link:hover,
.obj_galley_link:focus {
  background: var(--njk-teal);
  border-color: var(--njk-teal);
  color: #fff;
}

.obj_galley_link::before {
  margin-right: .4em;
}

.cmp_form input[type="text"],
.cmp_form input[type="email"],
.cmp_form input[type="password"],
.cmp_form input[type="url"],
.cmp_form input[type="tel"],
.cmp_form select,
.cmp_form textarea {
  height: 42px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid #c3cfce;
  border-radius: 5px;
  color: var(--njk-text);
  font-family: var(--njk-sans);
  font-size: 15.5px;
  line-height: 40px;
}

.cmp_form textarea {
  height: auto;
  min-height: 120px;
  padding: 10px 12px;
  line-height: 1.5;
}

.cmp_form input:focus,
.cmp_form select:focus,
.cmp_form textarea:focus {
  border-color: var(--njk-teal-mid);
  box-shadow: 0 0 0 3px rgba(45, 125, 122, 0.20);
  outline: 0;
}

.cmp_form .label,
.cmp_form legend {
  color: var(--njk-heading);
  font-family: var(--njk-sans);
  font-weight: 700;
}

.cmp_form .required {
  color: var(--njk-coral-dark);
}

.cmp_notification {
  margin: 0 0 24px;
  padding: 14px 18px;
  background: var(--njk-aqua-soft);
  border: 1px solid var(--njk-aqua-line);
  border-left: 4px solid var(--njk-teal-mid);
  border-radius: var(--njk-radius);
  font-family: var(--njk-sans);
  font-size: 15.5px;
  line-height: 1.5;
}

.cmp_notification a {
  font-weight: 700;
}

/* Pagination */
.cmp_pagination {
  margin-top: 24px;
  color: var(--njk-muted);
  font-family: var(--njk-sans);
  font-size: 14px;
}

.cmp_pagination a,
.cmp_pagination strong,
.cmp_pagination .current {
  display: inline-block;
  min-width: 34px;
  margin-left: 4px;
  padding: 0 9px;
  border: 1px solid var(--njk-border);
  border-radius: 5px;
  line-height: 32px;
  text-align: center;
  text-decoration: none;
  text-transform: none;
}

.cmp_pagination strong,
.cmp_pagination .current {
  background: var(--njk-teal);
  border-color: var(--njk-teal);
  color: #fff;
}

.cmp_pagination a:hover,
.cmp_pagination a:focus {
  background: var(--njk-aqua-soft);
  border-color: var(--njk-teal-mid);
}

/* Shared article summary (homepage, issue TOC, search results).
   Grid places the existing galley list at the right, as in the mockups. */
.obj_article_summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title galleys"
    "meta  galleys"
    "doi   galleys";
  column-gap: 18px;
  align-items: start;
}

.obj_article_summary > .cover {
  display: none;
}

.obj_article_summary > .title,
.pkp_structure_main .obj_article_summary > .title {
  grid-area: title;
  margin: 0 0 4px;
  font-family: var(--njk-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

.obj_article_summary > .title a {
  color: var(--njk-teal-dark);
  text-decoration: none;
}

.obj_article_summary > .title a:hover,
.obj_article_summary > .title a:focus {
  color: var(--njk-teal);
  text-decoration: underline;
}

.obj_article_summary .subtitle {
  display: block;
  margin-top: 2px;
  color: var(--njk-muted);
  font-size: 15px;
  font-weight: 400;
}

.obj_article_summary > .meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  padding-top: 0;
  font-family: var(--njk-sans);
  font-size: 15px;
  line-height: 1.5;
}

.obj_article_summary .authors {
  flex: 1 1 100%;
  color: #3f4a4d;
}

.obj_article_summary .pages,
.obj_article_summary .published {
  position: static;
  color: var(--njk-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Decorative label for the existing page range */
.obj_article_summary .pages::before {
  content: "pp. ";
}

.obj_article_summary .galleys_links {
  grid-area: galleys;
  margin: 2px 0 0;
  padding: 0;
}

.obj_article_summary .galleys_links li {
  display: block;
  margin: 0 0 6px;
}

.obj_article_summary > .doiInSummary,
.obj_article_summary > .doi {
  grid-area: doi;
  font-family: var(--njk-sans);
  font-size: 13.5px;
}

.cmp_article_list > li {
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--njk-border);
}

.cmp_article_list > li:last-child {
  border-bottom: 0;
}

/* ==========================================================
   10. HOMEPAGE
   ========================================================== */
/* Existing homepage image container. Presented as a 3:1 band. */
.pkp_page_index .homepage_image {
  margin: 0 0 28px;
}

.pkp_page_index .homepage_image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: var(--njk-radius);
}

/* Desktop: full-bleed band directly under the navigation (mockup 1).
   Only where :has() is supported, because the sidebar must be pushed down
   by the same height; older browsers keep the in-column image above. */
@supports selector(:has(*)) {
  @media (min-width: 992px) {
    .pkp_page_index .page_index_journal > .homepage_image:first-child {
      width: 100vw;
      margin: calc(-1 * var(--njk-content-pt)) 0 30px
        calc((min(var(--njk-container), 100vw - (var(--njk-gutter) * 2)) - 100vw) / 2);
    }

    .pkp_page_index .page_index_journal > .homepage_image:first-child img {
      height: var(--njk-hero-h);
      aspect-ratio: auto;
      border-radius: 0;
    }

    .pkp_page_index .pkp_structure_content:has(.page_index_journal > .homepage_image:first-child) > .pkp_structure_sidebar {
      margin-top: calc(var(--njk-hero-h) - var(--njk-content-pt) + 30px);
    }
  }
}

@media (max-width: 991px) {
  .pkp_page_index .page_index_journal > .homepage_image:first-child {
    margin: -20px -16px 22px;
  }

  .pkp_page_index .page_index_journal > .homepage_image:first-child img {
    border-radius: 0;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .pkp_page_index .page_index_journal > .homepage_image:first-child {
    margin: calc(-1 * var(--njk-content-pt)) 0 26px;
  }
}

/* Section panels (mockup 1: soft panels with serif headings) */
.pkp_page_index .homepage_about,
.pkp_page_index .current_issue,
.pkp_page_index .cmp_announcements {
  margin: 0 0 24px;
  padding: 20px 22px;
  background: var(--njk-surface-soft);
  border: 1px solid var(--njk-border);
  border-radius: var(--njk-radius);
}

.pkp_page_index .homepage_about h2,
.pkp_page_index .current_issue > h2,
.pkp_page_index .cmp_announcements > h2 {
  display: block;
  position: relative;
  margin: 0 0 14px;
  padding: 0 0 10px;
  border: 0;
  color: var(--njk-heading);
  font-family: var(--njk-serif);
  font-size: 26px;
  font-weight: 700;
  text-transform: none;
}

.pkp_page_index .homepage_about h2::after,
.pkp_page_index .current_issue > h2::after,
.pkp_page_index .cmp_announcements > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--njk-teal-mid);
}

.pkp_page_index .homepage_about p {
  font-size: 16.5px;
}

.pkp_page_index .current_issue .current_issue_title {
  margin: 0 0 6px;
  color: var(--njk-teal-dark);
  font-family: var(--njk-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.pkp_page_index .current_issue .obj_issue_toc .heading .cover {
  width: 150px;
}

.pkp_page_index .current_issue .obj_issue_toc .section {
  margin: 12px 0 0;
  background: #fff;
}

.pkp_page_index .current_issue .read_more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0 16px;
  background: var(--njk-teal);
  border-radius: 5px;
  color: #fff;
  font-family: var(--njk-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 40px;
  text-decoration: none;
  text-transform: none;
}

.pkp_page_index .current_issue .read_more::after {
  position: static;
  width: auto;
  height: auto;
  content: "\2192";
  font: inherit;
  line-height: inherit;
  transform: none;
}

.pkp_page_index .current_issue .read_more:hover,
.pkp_page_index .current_issue .read_more:focus {
  background: var(--njk-teal-dark);
  color: #fff;
}

.pkp_page_index .additional_content {
  margin: 0;
  padding: 0;
  border-top: 0;
}

/* ==========================================================
   11. CURRENT ISSUE / ISSUE TOC
   ========================================================== */
.obj_issue_toc .heading {
  display: flow-root;
  margin: 0 0 22px;
  padding: 20px;
  background: var(--njk-aqua-soft);
  border: 1px solid var(--njk-aqua-line);
  border-radius: var(--njk-radius);
}

.obj_issue_toc .cover {
  float: left;
  width: 170px;
  margin: 0 24px 0 0;
}

.obj_issue_toc .cover img {
  display: block;
  width: 100%;
  max-height: none;
  border: 1px solid var(--njk-border);
  border-radius: 3px;
  box-shadow: var(--njk-shadow-hover);
}

.obj_issue_toc .description {
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.7;
}

.obj_issue_toc .heading .pub_id,
.obj_issue_toc .heading .published {
  margin: 0 0 6px;
  font-family: var(--njk-sans);
  font-size: 15px;
}

.obj_issue_toc .heading .pub_id .type,
.obj_issue_toc .heading .published .label {
  color: var(--njk-heading);
  font-weight: 700;
  text-transform: none;
}

.obj_issue_toc .heading .pub_id .id,
.obj_issue_toc .heading .published .value {
  margin-left: .35em;
  color: var(--njk-text);
}

.obj_issue_toc .heading .pub_id a {
  word-break: break-word;
}

.obj_issue_toc .sections:not(:first-child) {
  margin-top: 0;
}

.obj_issue_toc .galleys,
.obj_issue_toc .section {
  position: static;
  margin: 0 0 22px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--njk-border);
  border-radius: var(--njk-radius);
}

.obj_issue_toc .galleys::before,
.obj_issue_toc .section::before {
  display: none;
}

.obj_issue_toc .galleys > h2,
.obj_issue_toc .section > h2,
.obj_issue_toc .galleys > h3,
.obj_issue_toc .section > h3,
.pkp_structure_main .obj_issue_toc .section > h2,
.pkp_structure_main .obj_issue_toc .section > h3 {
  display: block;
  position: static;
  margin: 0;
  padding: 12px 18px;
  background: var(--njk-surface-soft);
  border-bottom: 2px solid var(--njk-teal-mid);
  border-radius: var(--njk-radius) var(--njk-radius) 0 0;
  color: var(--njk-heading);
  font-family: var(--njk-serif);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.obj_issue_toc .section .articles,
.obj_issue_toc .section .cmp_article_list {
  margin: 0;
  padding: 0 18px;
}

.obj_issue_toc .galleys_links {
  margin-top: 0;
}

.page_issue > h1 {
  font-size: 32px;
}

/* ==========================================================
   12. ARCHIVES
   ========================================================== */
.page_issue_archive .issues_archive {
  margin: 0;
  padding: 0;
}

.page_issue_archive .issues_archive > li {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

.obj_issue_summary {
  position: relative;
  display: flow-root;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--njk-border);
  border-radius: var(--njk-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.obj_issue_summary:hover,
.obj_issue_summary:focus-within {
  border-color: var(--njk-aqua-line);
  box-shadow: var(--njk-shadow);
}

.obj_issue_summary .cover {
  float: left;
  width: 92px;
  margin: 0 18px 0 0;
}

.obj_issue_summary .cover img {
  display: block;
  width: 100%;
  max-height: none;
  border: 1px solid var(--njk-border);
  border-radius: 3px;
}

/* "Vol. 22 No. 1 (2026)" (.series) leads; the issue title follows */
.obj_issue_summary h2,
.pkp_structure_main .obj_issue_summary h2 {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 3px;
  margin: 2px 0 6px;
  font-size: 16px;
  line-height: 1.3;
}

.obj_issue_summary .series {
  margin: 0;
  color: var(--njk-heading);
  font-family: var(--njk-serif);
  font-size: 20px;
  font-weight: 700;
}

.obj_issue_summary .title {
  color: var(--njk-teal);
  font-family: var(--njk-sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

/* Whole card follows the existing issue link */
.obj_issue_summary .title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.obj_issue_summary:hover .series {
  color: var(--njk-teal-dark);
}

.obj_issue_summary .description {
  color: #444f52;
  font-size: 15px;
  line-height: 1.6;
}

.obj_issue_summary .description:empty {
  display: none;
}

/* ==========================================================
   13. ARTICLE DETAIL
   ========================================================== */
.obj_article_details > .page_title,
.pkp_structure_main .obj_article_details > .page_title {
  margin: 0 0 8px;
  color: var(--njk-heading);
  font-family: var(--njk-serif);
  font-size: 32px;
  line-height: 1.25;
}

.obj_article_details > .subtitle {
  margin: 0 0 14px;
  color: var(--njk-muted);
  font-family: var(--njk-serif);
  font-size: 19px;
  line-height: 1.4;
}

/* Default theme pulls these out with negative margins and borders */
.obj_article_details .row,
.obj_article_details .entry_details {
  margin-left: 0;
  margin-right: 0;
  border: 0;
}

.obj_article_details .row {
  margin-top: 18px;
}

@media (min-width: 768px) {
  .obj_article_details .row {
    display: flex;
    align-items: flex-start;
    gap: 28px;
  }

  .obj_article_details .row::before,
  .obj_article_details .row::after {
    display: none;
  }

  .obj_article_details .main_entry,
  .obj_article_details .entry_details {
    float: none;
    margin: 0;
    border: 0;
  }

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

  .obj_article_details .entry_details {
    flex: 0 0 260px;
    width: 260px;
  }
}

.obj_article_details .main_entry .item {
  margin: 0 0 18px;
  padding: 0;
}

.obj_article_details .main_entry .item .label,
.pkp_structure_main .obj_article_details .main_entry .item .label {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 10px;
  color: var(--njk-heading);
  font-family: var(--njk-serif);
  font-size: 21px;
  font-weight: 700;
}

/* Authors and affiliations */
.obj_article_details .item.authors {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--njk-border);
}

.obj_article_details .item.authors .authors li {
  margin: 0 0 10px;
}

.obj_article_details .authors .name {
  color: var(--njk-teal-dark);
  font-family: var(--njk-sans);
  font-size: 16.5px;
  font-weight: 700;
}

.obj_article_details .authors .affiliation {
  display: block;
  color: var(--njk-muted);
  font-family: var(--njk-sans);
  font-size: 14.5px;
  line-height: 1.45;
}

.obj_article_details .authors .orcid {
  font-family: var(--njk-sans);
  font-size: 13.5px;
}

.obj_article_details .authors .orcid a {
  color: var(--njk-teal);
}

/* DOI strip (mockup 4) */
.obj_article_details .main_entry .item.doi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 9px 14px;
  background: var(--njk-aqua-soft);
  border: 1px solid var(--njk-aqua-line);
  border-radius: var(--njk-radius);
  font-family: var(--njk-sans);
  font-size: 15px;
}

.obj_article_details .main_entry .item.doi .label,
.pkp_structure_main .obj_article_details .main_entry .item.doi .label {
  display: inline-block;
  margin: 0;
  padding: 1px 7px;
  background: var(--njk-teal-dark);
  border-radius: 3px;
  color: #fff;
  font-family: var(--njk-sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
}

.obj_article_details .main_entry .item.doi a {
  word-break: break-word;
}

/* Abstract, keywords and references as quiet panels */
.obj_article_details .main_entry .item.abstract,
.obj_article_details .main_entry .item.keywords,
.obj_article_details .main_entry .item.references {
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--njk-border);
  border-radius: var(--njk-radius);
}

.obj_article_details .main_entry .item.abstract .label,
.obj_article_details .main_entry .item.references .label,
.pkp_structure_main .obj_article_details .main_entry .item.abstract .label,
.pkp_structure_main .obj_article_details .main_entry .item.references .label {
  margin: -16px -20px 14px;
  padding: 10px 20px;
  background: var(--njk-aqua-soft);
  border-bottom: 1px solid var(--njk-aqua-line);
  border-radius: var(--njk-radius) var(--njk-radius) 0 0;
}

.obj_article_details .item.abstract p {
  font-size: 16.5px;
  line-height: 1.75;
}

.obj_article_details .main_entry .item.keywords {
  font-size: 15.5px;
}

.obj_article_details .main_entry .item.keywords .label,
.pkp_structure_main .obj_article_details .main_entry .item.keywords .label {
  display: block;
  margin: 0 0 6px;
  font-size: 19px;
}

.obj_article_details .item.references .value p {
  margin: 0 0 10px;
  padding-left: 24px;
  text-indent: -24px;
  font-size: 15px;
  line-height: 1.6;
  word-break: break-word;
}

.obj_article_details .downloads_chart .label,
.usageStatsUnavailable {
  font-family: var(--njk-sans);
}

/* Metadata column cards */
.obj_article_details .entry_details .item {
  margin: 0 0 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--njk-border);
  border-radius: var(--njk-radius);
  box-shadow: none;
  font-family: var(--njk-sans);
  font-size: 15px;
  line-height: 1.5;
}

.obj_article_details .entry_details .item:last-child {
  border-bottom: 1px solid var(--njk-border);
}

.obj_article_details .entry_details .item .label,
.obj_article_details .entry_details .sub_item .label,
.obj_article_details .entry_details .item > .label,
.obj_article_details .entry_details .sub_item:first-child > .label,
.obj_article_details .entry_details .sub_item:not(:first-child) .label,
.pkp_structure_main .obj_article_details .entry_details .item .label {
  display: block;
  margin: 0 0 8px;
  padding: 0 0 6px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--njk-teal-mid);
  border-radius: 0;
  color: var(--njk-heading);
  font-family: var(--njk-serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
}

.obj_article_details .entry_details .item > .value,
.obj_article_details .entry_details .sub_item .value {
  padding: 0;
  border-radius: 0;
}

.obj_article_details .entry_details .sub_item + .sub_item {
  margin-top: 14px;
}

.obj_article_details .entry_details .item.cover_image {
  padding: 10px;
  background: var(--njk-surface-soft);
}

.obj_article_details .entry_details .item.cover_image img {
  display: block;
  max-width: 160px;
  margin: 0 auto;
  border-radius: 3px;
}

.obj_article_details .entry_details .item.galleys {
  padding: 14px 16px;
  background: var(--njk-teal-dark);
  border-color: var(--njk-teal-dark);
}

.obj_article_details .entry_details .galleys_links li {
  margin: 0 0 8px;
}

.obj_article_details .entry_details .galleys_links li:last-child {
  margin-bottom: 0;
}

.obj_article_details .entry_details .obj_galley_link {
  display: block;
  background: var(--njk-coral);
  border-color: var(--njk-coral-dark);
  color: #fff;
  font-size: 15px;
  line-height: 42px;
  text-align: center;
}

.obj_article_details .entry_details .obj_galley_link:hover,
.obj_article_details .entry_details .obj_galley_link:focus {
  background: var(--njk-coral-dark);
  color: #fff;
}

.obj_article_details .entry_details .obj_galley_link:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.obj_article_details .entry_details .item.issue .title {
  font-weight: 700;
}

.obj_article_details .entry_details .copyright {
  background: #fff;
}

.obj_article_details .entry_details .copyright p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.55;
}

.obj_article_details .citation_display .csl-entry {
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
}

.obj_article_details .citation_formats {
  margin-top: 10px;
  background: #fff;
  border: 1px solid var(--njk-teal-mid);
  border-radius: 5px;
}

.obj_article_details .citation_formats_button {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  background: #fff;
  border: 0;
  border-radius: 5px;
  color: var(--njk-teal);
  font-size: 14px;
  font-weight: 600;
  line-height: 38px;
  text-align: left;
}

.obj_article_details .citation_formats_button:hover,
.obj_article_details .citation_formats_button:focus {
  background: var(--njk-aqua-soft);
  color: var(--njk-teal-dark);
}

.obj_article_details .citation_formats_list {
  padding: 4px 12px 10px;
  font-size: 14px;
}

/* ==========================================================
   14. STATIC PAGES (About, Aim and Scope, History, Submission)
   ========================================================== */
.pkp_structure_main .page {
  font-size: 16.5px;
}

.pkp_structure_main .page > p {
  max-width: 78ch;
}

.pkp_page_about.pkp_op_index .page_about > p,
.pkp_structure_main .page:not([class*="page_"]) > p {
  max-width: none;
}

.pkp_structure_main .page > h2:not(:first-child),
.pkp_structure_main .page > h3 {
  color: var(--njk-teal-dark);
}

.pkp_structure_main .page > h2:not(:first-child) {
  padding-top: 18px;
  border-top: 1px solid var(--njk-border);
}

/* Bold-only paragraphs used as sub-headings in the static pages */
.pkp_structure_main .page > p > strong:only-child {
  color: var(--njk-heading);
}

/* Inline-styled "Article Template" <button> inside a link on /Submission.
   !important is required to override the green inline style. */
.pkp_structure_main .page a > button[style] {
  min-height: 38px;
  padding: 0 14px !important;
  background-color: var(--njk-teal) !important;
  border-radius: 5px !important;
  color: #fff !important;
  font-family: var(--njk-sans);
  font-size: 15px;
  font-weight: 700;
}

.pkp_structure_main .page a > button[style]:hover,
.pkp_structure_main .page a:focus > button[style] {
  background-color: var(--njk-teal-dark) !important;
}

/* ==========================================================
   15. POLICY PAGES (Publication Ethics and Policies, Ethics)
   ========================================================== */
.pkp_page_aom .page > h3,
.pkp_page_ethics .page > h3 {
  margin: 30px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--njk-border);
  color: var(--njk-teal-dark);
  font-size: 20px;
}

.pkp_page_aom .page > h2 + p + h3,
.pkp_page_aom .page > h2 + h3 {
  border-top: 0;
  padding-top: 0;
}

.pkp_page_aom .page > p > strong:only-child,
.pkp_page_ethics .page > p > strong:only-child {
  font-family: var(--njk-sans);
}

/* ==========================================================
   16. EDITORIAL TEAM
   ========================================================== */
/* A. The ".njk-*" HTML block already present on the live page. */
.njk-editorial {
  margin: 0 0 26px;
  font-family: var(--njk-sans);
}

.njk-editorial-header,
.njk-header-line,
.njk-title-accent {
  display: none;
}

.njk-title {
  margin: 0 0 18px;
  padding: 16px 20px;
  background: var(--njk-aqua-soft);
  border: 1px solid var(--njk-aqua-line);
  border-left: 4px solid var(--njk-teal-mid);
  border-radius: var(--njk-radius);
}

.njk-kicker,
.njk-label,
.njk-person-content small {
  display: block;
  color: var(--njk-teal-mid);
  font-family: var(--njk-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
}

.pkp_structure_main .njk-title h2 {
  margin: 4px 0 2px;
  font-size: 24px;
}

.njk-title p,
.njk-info p,
.njk-person-content p {
  margin: 0;
  color: var(--njk-muted);
  font-size: 14.5px;
  line-height: 1.5;
}

.njk-section-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 24px 0 10px;
  padding: 0 0 8px;
  border-bottom: 2px solid var(--njk-teal-mid);
  color: var(--njk-teal-mid);
  font-family: var(--njk-sans);
  font-size: 14px;
  font-weight: 700;
}

.pkp_structure_main .njk-section-title h3 {
  margin: 0;
  color: var(--njk-heading);
  font-size: 21px;
}

.njk-chief,
.njk-person {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--njk-border);
  border-radius: var(--njk-radius);
}

.njk-avatar,
.njk-person-avatar {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--njk-teal);
  color: #fff;
  font-family: var(--njk-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 46px;
  text-align: center;
}

.njk-avatar {
  width: 58px;
  height: 58px;
  font-size: 18px;
  line-height: 58px;
}

.pkp_structure_main .njk-info h2,
.pkp_structure_main .njk-person-content h3 {
  margin: 2px 0 2px;
  color: var(--njk-heading);
  font-family: var(--njk-serif);
  font-size: 18px;
}

.pkp_structure_main .njk-info h2 {
  font-size: 21px;
}

.njk-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 1px 9px;
  background: var(--njk-aqua-soft);
  border: 1px solid var(--njk-aqua-line);
  border-radius: 4px;
  color: var(--njk-teal-dark);
  font-size: 12.5px;
  font-weight: 600;
}

/* Two-column grid on desktop, one column on mobile (also usable for a
   future Reviewers page built with the same .njk-grid / .njk-person HTML) */
.njk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* B. Legacy table markup that follows the .njk block on the same page.
   Section headings are tables whose cell has class "drag". */
.page_editorial_team table {
  width: 100% !important;
  margin: 0 0 6px;
  border-collapse: collapse;
  font-family: var(--njk-sans);
  font-size: 15px;
}

.page_editorial_team table td {
  padding: 10px 10px 10px 0;
  border: 0;
  border-bottom: 1px solid var(--njk-border);
  vertical-align: top;
  line-height: 1.5;
}

.page_editorial_team table td:first-child {
  color: var(--njk-heading);
  font-weight: 700;
}

.page_editorial_team table td:not(:first-child) {
  color: #48565a;
}

/* Inline font-size: 2em on the heading <strong>; !important overrides it */
.page_editorial_team td.drag,
.page_editorial_team table td.drag {
  padding: 22px 0 8px;
  border-bottom: 2px solid var(--njk-teal-mid);
}

.page_editorial_team td.drag strong,
.page_editorial_team td.drag em,
.page_editorial_team > p > strong > em > strong[style] {
  color: var(--njk-heading);
  font-family: var(--njk-serif);
  font-size: 21px !important;
  font-style: normal;
  font-weight: 700;
}

/* Decorative <hr> separators inside the table cells */
.page_editorial_team table td hr {
  display: none;
}

.page_editorial_team > hr:first-of-type {
  display: none;
}

/* ==========================================================
   17. REVIEWERS
   ========================================================== */
/* NJK has no separate reviewer page at audit time (/reviewer returns 404);
   reviewers are listed in the Editorial Team tables (section 16 B).
   A future static page whose body uses .njk-grid > .njk-person receives the
   two-column card layout from section 16 A automatically. */
.njk-person .njk-person-content a {
  font-size: 13.5px;
  word-break: break-word;
}

/* ==========================================================
   18. SUBMISSIONS
   ========================================================== */
.page_submissions > h2,
.page_submissions .submission_checklist > h2,
.page_submissions .author_guidelines > h2,
.page_submissions .copyright_notice > h2,
.page_submissions .privacy_statement > h2,
.page_submissions .section_policy > h2,
.pkp_structure_main .page_submissions h2 {
  position: relative;
  margin: 34px 0 14px;
  padding: 0 0 10px;
  border: 0;
  color: var(--njk-heading);
  font-size: 24px;
}

.pkp_structure_main .page_submissions h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--njk-teal-mid);
}

.page_submissions .submission_checklist {
  padding: 18px 20px;
  background: var(--njk-surface-soft);
  border: 1px solid var(--njk-border);
  border-radius: var(--njk-radius);
  line-height: 1.65;
}

.pkp_structure_main .page_submissions .submission_checklist > h2 {
  margin-top: 0;
}

.page_submissions .submission_checklist ul {
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  font-size: 15.5px;
  list-style: none;
}

.page_submissions .submission_checklist li,
.page_submissions .submission_checklist ul li {
  position: relative;
  margin: 0 0 8px;
  padding: 11px 14px 11px 46px;
  background: #fff;
  border: 1px solid var(--njk-aqua-line);
  border-radius: 5px;
  line-height: 1.55;
}

.page_submissions .submission_checklist li .fa,
.page_submissions .submission_checklist ul li .fa {
  position: absolute;
  top: 12px;
  left: 13px;
  width: 21px;
  height: 21px;
  background: var(--njk-teal-mid);
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  line-height: 21px;
  text-align: center;
  transform: none;
}

.page_submissions .author_guidelines h3 {
  color: var(--njk-teal-dark);
}

.page_submissions .author_guidelines > p > strong:only-child {
  color: var(--njk-heading);
}

/* ==========================================================
   19. ANNOUNCEMENTS
   ========================================================== */
.cmp_announcements {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmp_announcements > li {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

.obj_announcement_summary,
.page_announcement .obj_announcement_full {
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--njk-border);
  border-left: 4px solid var(--njk-teal-mid);
  border-radius: 0 var(--njk-radius) var(--njk-radius) 0;
}

.obj_announcement_summary::before {
  display: none;
}

.obj_announcement_summary h2,
.obj_announcement_summary h3,
.obj_announcement_summary h4,
.pkp_structure_main .obj_announcement_summary h2 {
  margin: 0 0 4px;
  font-family: var(--njk-serif);
  font-size: 19.5px;
  line-height: 1.35;
}

.obj_announcement_summary h2 a,
.obj_announcement_summary h3 a,
.obj_announcement_summary h4 a {
  color: var(--njk-teal-dark);
  text-decoration: none;
}

.obj_announcement_summary h2 a:hover,
.obj_announcement_summary h3 a:hover,
.obj_announcement_summary h4 a:hover {
  text-decoration: underline;
}

.cmp_announcements .date,
.obj_announcement_summary .date,
.obj_announcement_full .date {
  margin: 0 0 8px;
  color: var(--njk-coral-dark);
  font-family: var(--njk-sans);
  font-size: 13.5px;
  font-weight: 600;
}

.obj_announcement_summary .summary p {
  margin: 0 0 8px;
  font-size: 15.5px;
}

.obj_announcement_summary .read_more {
  display: inline-block;
  padding: 0;
  color: var(--njk-teal);
  font-family: var(--njk-sans);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.6;
  text-transform: none;
}

.obj_announcement_summary .read_more::after {
  position: static;
  width: auto;
  height: auto;
  margin-left: 6px;
  content: "\2192";
  font: inherit;
  line-height: inherit;
  transform: none;
}

/* ==========================================================
   20. SEARCH
   ========================================================== */
.page_search .search_input {
  margin-bottom: 12px;
}

.page_search .search_input .query {
  width: 100%;
  max-width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid #c3cfce;
  border-radius: 5px;
  font-family: var(--njk-sans);
  font-size: 17px;
  line-height: 44px;
}

.page_search .search_input .query:focus {
  border-color: var(--njk-teal-mid);
  box-shadow: 0 0 0 3px rgba(45, 125, 122, 0.20);
  outline: 0;
}

.page_search .search_advanced {
  margin: 0 0 14px;
  padding: 0 18px 16px;
  background: var(--njk-aqua-soft);
  border: 1px solid var(--njk-aqua-line);
  border-radius: var(--njk-radius);
}

.page_search .search_advanced > legend {
  padding: 3px 10px;
  background: #fff;
  border: 1px solid var(--njk-aqua-line);
  border-radius: 4px;
  color: var(--njk-teal-dark);
  font-family: var(--njk-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
}

.page_search .search_advanced fieldset {
  margin: 10px 0 0;
  padding: 0;
  border: 0;
}

.page_search .search_advanced fieldset legend {
  margin-bottom: 4px;
  padding: 0;
  font-family: var(--njk-sans);
  font-size: 14px;
  font-weight: 700;
}

.page_search .search_advanced label {
  margin: 0 4px 0 0;
  color: var(--njk-muted);
  font-family: var(--njk-sans);
  font-size: 13.5px;
}

.page_search .search_advanced select {
  width: auto;
  height: 36px;
  margin-right: 8px;
  padding: 0 6px;
  line-height: 34px;
}

.page_search .search_advanced .author input {
  max-width: 100%;
}

/* Search button: theme renders a FontAwesome icon in ::after */
.page_search .submit button {
  min-width: 140px;
  padding: 0 22px 0 46px;
  border: 1px solid var(--njk-teal-dark);
  line-height: 44px;
}

.page_search .submit button::after {
  top: 0;
  bottom: 0;
  left: 0;
  width: 40px;
  height: auto;
  background: var(--njk-teal-dark);
  border: 0;
  border-radius: 5px 0 0 5px;
  box-shadow: none;
  color: #fff;
  line-height: 44px;
}

.page_search .submit button:hover::after,
.page_search .submit button:focus::after {
  background: var(--njk-teal-deep);
  box-shadow: none;
}

.page_search .search_results {
  margin: 24px 0 0;
  padding: 0;
  border-top: 2px solid var(--njk-teal-mid);
  list-style: none;
}

.page_search .search_results > li {
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--njk-border);
}

.page_search .obj_article_summary .published::before {
  content: "\00b7\00a0";
}

.page_search .cmp_pagination {
  text-align: right;
}

/* ==========================================================
   21. CONTACT
   ========================================================== */
.page_contact .contact_section {
  display: grid;
  gap: 14px;
}

@media (min-width: 768px) {
  .page_contact .contact_section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page_contact .contact_section .address {
    grid-column: 1 / -1;
  }
}

.page_contact .contact_section .address,
.page_contact .contact_section .contact,
.page_contact .contact_section .contact.primary,
.page_contact .contact_section .contact.support {
  float: none;
  width: auto;
  margin: 0;
  padding: 16px 18px;
  background: var(--njk-surface-soft);
  border: 1px solid var(--njk-border);
  border-radius: var(--njk-radius);
  font-family: var(--njk-sans);
  font-size: 15.5px;
  line-height: 1.6;
}

.page_contact .contact_section .address {
  border-left: 4px solid var(--njk-teal-mid);
}

.page_contact .contact_section h3,
.pkp_structure_main .page_contact .contact_section h3 {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--njk-teal-mid);
  color: var(--njk-heading);
  font-family: var(--njk-serif);
  font-size: 17px;
}

.page_contact .contact_section .name {
  color: var(--njk-heading);
  font-weight: 700;
}

.page_contact .contact_section .label {
  margin-right: .35em;
  font-weight: 700;
}

.page_contact .contact_section .email:empty {
  display: none;
}

/* ==========================================================
   22. SIDEBAR BLOCKS
   ========================================================== */
.pkp_structure_sidebar .pkp_block {
  margin: 0 0 18px;
  padding: 16px 18px;
  background: var(--njk-white);
  border: 1px solid var(--njk-border);
  border-radius: var(--njk-radius);
  font-family: var(--njk-sans);
  font-size: 15px;
  line-height: 1.5;
}

.pkp_structure_sidebar .pkp_block .title,
.pkp_block .title {
  display: block;
  margin: -16px -18px 12px;
  padding: 11px 18px 9px;
  background: var(--njk-aqua-soft);
  border: 0;
  border-bottom: 2px solid var(--njk-teal-mid);
  border-radius: var(--njk-radius) var(--njk-radius) 0 0;
  color: var(--njk-heading);
  font-family: var(--njk-serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}

/* Keep screen-reader-only block titles hidden */
.pkp_block .title.pkp_screen_reader,
.pkp_block .pkp_screen_reader {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.pkp_block .content ul li {
  padding: 0;
}

.pkp_block a {
  color: var(--njk-teal);
}

.pkp_block img {
  max-width: 100%;
  height: auto;
}

/* Make a Submission: coral CTA on a deep-teal card (mockups 1-10) */
.pkp_structure_sidebar .pkp_block.block_make_submission {
  padding: 14px;
  background: var(--njk-teal-dark);
  border-color: var(--njk-teal-dark);
}

.block_make_submission a,
.pkp_structure_sidebar .block_make_submission a,
.pkp_structure_sidebar .block_make_submission a:hover,
.pkp_structure_sidebar .block_make_submission a:focus {
  display: block;
  min-height: 48px;
  padding: 0 16px;
  background: var(--njk-coral);
  border: 1px solid var(--njk-coral-dark);
  border-radius: 5px;
  box-shadow: none;
  color: #fff;
  font-family: var(--njk-sans);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 46px;
  text-align: center;
  text-decoration: none;
  text-transform: none;
}

.pkp_structure_sidebar .block_make_submission a:hover,
.pkp_structure_sidebar .block_make_submission a:focus {
  background: var(--njk-coral-dark);
}

.pkp_structure_sidebar .block_make_submission a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Information block + generic link lists */
.block_information .content li a,
.block_language .content li a,
.block_browse .content li a {
  display: block;
  position: relative;
  padding: 8px 20px 8px 0;
  border-bottom: 1px solid var(--njk-border);
  color: var(--njk-text);
  text-decoration: none;
}

.block_information .content li:last-child a,
.block_language .content li:last-child a,
.block_browse .content li:last-child a {
  border-bottom: 0;
}

.block_information .content li a::after,
.block_browse .content li a::after {
  content: "\203A";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-55%);
  color: #9fb0b1;
  font-size: 19px;
}

.block_information .content li a:hover,
.block_information .content li a:focus,
.block_browse .content li a:hover,
.block_browse .content li a:focus {
  color: var(--njk-teal);
}

/* Web feed icons */
.block_web_feed .content ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* NJK custom block "ADDITIONAL MENU": a TinyMCE table with inline green
   cell backgrounds and white text. Inline styles can only be overridden
   with !important; selectors match the existing inline colour values
   (#198200 = group heading cells, #619818 = link cells). */
.pkp_structure_sidebar .block_custom table {
  float: none;
  width: 100% !important;
  margin: 0 !important;
  border-collapse: collapse;
}

.pkp_structure_sidebar .block_custom td {
  height: auto !important;
  padding: 0 !important;
  background-color: transparent !important;
  border-bottom: 0 !important;
  text-align: left !important;
  vertical-align: middle;
}

.pkp_structure_sidebar .block_custom td span[style*="color"] {
  color: inherit !important;
}

.pkp_structure_sidebar .block_custom td[style*="#198200"] {
  padding: 18px 0 7px !important;
  border-bottom: 2px solid var(--njk-teal-mid) !important;
  color: var(--njk-heading);
  font-family: var(--njk-serif);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: .01em;
}

.pkp_structure_sidebar .block_custom tr:first-child td[style*="#198200"] {
  padding-top: 0 !important;
}

.pkp_structure_sidebar .block_custom td[style*="#198200"] strong {
  font-weight: 700;
}

.pkp_structure_sidebar .block_custom td[style*="#198200"] a {
  color: var(--njk-heading);
}

.pkp_structure_sidebar .block_custom td[style*="#619818"] a {
  display: block;
  position: relative;
  padding: 8px 22px 8px 2px;
  border-bottom: 1px solid var(--njk-border);
  color: var(--njk-text);
  text-decoration: none;
}

.pkp_structure_sidebar .block_custom td[style*="#619818"] a::after {
  content: "\203A";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-55%);
  color: #9fb0b1;
  font-size: 19px;
}

.pkp_structure_sidebar .block_custom td[style*="#619818"] a:hover,
.pkp_structure_sidebar .block_custom td[style*="#619818"] a:focus {
  background: var(--njk-aqua-soft);
  color: var(--njk-teal-dark);
  box-shadow: inset 3px 0 0 var(--njk-teal-mid);
}

/* Link cells without href (e.g. "Archiving") stay plain text */
.pkp_structure_sidebar .block_custom td[style*="#619818"] a:not([href]) {
  color: var(--njk-muted);
  cursor: default;
}

.pkp_structure_sidebar .block_custom td[style*="#619818"] a:not([href])::after {
  display: none;
}

/* Indexing logos (existing images; width/height attributes are 400 x 130) */
.pkp_structure_sidebar .block_custom td p {
  margin: 0;
}

.pkp_structure_sidebar .block_custom td p:has(> a > img) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 10px;
}

.pkp_structure_sidebar .block_custom td p > a:has(> img) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--njk-border);
  border-radius: 5px;
}

.pkp_structure_sidebar .block_custom td p > a:has(> img):hover,
.pkp_structure_sidebar .block_custom td p > a:has(> img):focus {
  border-color: var(--njk-aqua-line);
  box-shadow: var(--njk-shadow);
}

.pkp_structure_sidebar .block_custom td img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 40px;
}

/* Tool logos placed directly in table cells */
.pkp_structure_sidebar .block_custom td > img {
  display: block;
  margin: 8px auto 0;
  max-height: 44px;
}

.pkp_structure_sidebar .block_custom iframe {
  display: block;
  max-width: 100%;
  border-radius: 5px;
}

.pkp_structure_sidebar .block_custom > .content > div > p {
  text-align: center;
}

/* ==========================================================
   23. LOGIN / REGISTER / USER FORMS
   ========================================================== */
.page_login .cmp_form,
.page_register .cmp_form,
.page_lost_password .cmp_form,
.page_reset_password .cmp_form {
  max-width: 600px;
  padding: 22px 24px;
  background: var(--njk-surface-soft);
  border: 1px solid var(--njk-border);
  border-radius: var(--njk-radius);
}

.page_login .cmp_form .fields > div,
.page_register .cmp_form .fields > div,
.page_lost_password .cmp_form .fields > div {
  margin-bottom: 14px;
}

.page_login .cmp_form input[type="text"],
.page_login .cmp_form input[type="password"],
.page_register .cmp_form input[type="text"],
.page_register .cmp_form input[type="email"],
.page_register .cmp_form input[type="password"],
.page_register .cmp_form select,
.page_lost_password .cmp_form input[type="email"] {
  max-width: 100%;
}

.page_login .password a,
.page_login .buttons .register,
.page_register .buttons .login {
  font-family: var(--njk-sans);
  font-size: 14.5px;
  font-weight: 600;
}

.page_login .buttons,
.page_register .buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.page_register fieldset {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.page_register fieldset legend {
  margin-bottom: 8px;
  font-family: var(--njk-serif);
  font-size: 19px;
}

/* ==========================================================
   24. FOOTER
   ========================================================== */
.pkp_structure_footer_wrapper {
  margin-top: 30px;
  background: var(--njk-teal-dark);
  border-top: 4px solid var(--njk-teal-mid);
  border-bottom: 0;
  color: #e3eeed;
  font-family: var(--njk-sans);
  font-size: 15px;
}

.pkp_structure_footer {
  width: 100%;
  padding: 28px 16px 22px;
  text-align: left;
}

@media (min-width: 768px) {
  .pkp_structure_footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 30px;
    width: calc(100% - (var(--njk-gutter) * 2));
    max-width: var(--njk-container);
    padding: 32px 0 26px;
  }

  .pkp_structure_footer::before,
  .pkp_structure_footer::after {
    display: none;
  }

  .pkp_footer_content {
    flex: 1 1 520px;
  }
}

.pkp_footer_content {
  padding: 0;
  color: #e3eeed;
  line-height: 1.6;
}

/* Inline text-align: center in the current footer HTML; left aligns better
   with the multi-column journal layout */
.pkp_footer_content p[style*="text-align"] {
  text-align: left !important;
}

.pkp_footer_content p {
  margin: 0 0 10px;
}

.pkp_footer_content img {
  display: inline-block;
  margin-bottom: 6px;
  vertical-align: middle;
}

.pkp_footer_content hr {
  margin: 14px 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.pkp_footer_content center {
  text-align: left;
}

.pkp_structure_footer_wrapper a {
  color: #bfe3df;
  text-decoration: underline;
  text-decoration-color: rgba(191, 227, 223, 0.45);
}

.pkp_structure_footer_wrapper a:hover,
.pkp_structure_footer_wrapper a:focus {
  color: #fff;
  text-decoration-color: #fff;
}

/* OJS/PKP brand stays visible; recoloured for the dark background */
.pkp_brand_footer {
  padding: 0;
}

.pkp_brand_footer a {
  float: none;
  display: block;
  max-width: 130px;
}

.pkp_brand_footer img {
  display: block;
  width: 100%;
  filter: brightness(0) invert(1);
  opacity: .85;
}

/* ==========================================================
   25. RESPONSIVE
   ========================================================== */
@media (max-width: 991px) {
  .pkp_structure_sidebar {
    margin-top: 8px;
    padding-top: 22px;
    border-top: 1px solid var(--njk-border);
  }

  .pkp_structure_main .page > h1,
  .pkp_structure_main .page > .page_title,
  .pkp_structure_main .page:not([class*="page_"]) > h2:first-child,
  .obj_article_details > .page_title,
  .pkp_structure_main .obj_article_details > .page_title {
    font-size: 29px;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 15.5px;
  }

  .pkp_structure_main h1,
  .pkp_structure_main .page > h1,
  .pkp_structure_main .page > .page_title,
  .pkp_structure_main .page:not([class*="page_"]) > h2:first-child,
  .obj_article_details > .page_title,
  .pkp_structure_main .obj_article_details > .page_title {
    font-size: 26px;
  }

  .pkp_page_index .homepage_about,
  .pkp_page_index .current_issue,
  .pkp_page_index .cmp_announcements {
    padding: 16px;
  }

  .pkp_page_index .homepage_about h2,
  .pkp_page_index .current_issue > h2 {
    font-size: 23px;
  }

  /* Galley link moves below the metadata on narrow screens */
  .obj_article_summary {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "meta"
      "doi"
      "galleys";
  }

  .obj_article_summary .galleys_links {
    margin-top: 8px;
  }

  .obj_article_summary .galleys_links li {
    display: inline-block;
    margin: 0 8px 0 0;
  }

  .obj_issue_toc .heading {
    padding: 16px;
  }

  .obj_issue_toc .cover {
    float: none;
    width: 140px;
    margin: 0 0 14px;
  }

  .obj_issue_toc .section .articles,
  .obj_issue_toc .section .cmp_article_list {
    padding: 0 14px;
  }

  .obj_issue_summary .cover {
    width: 72px;
    margin-right: 14px;
  }

  .obj_issue_summary .series {
    font-size: 18px;
  }

  .obj_article_details .entry_details {
    margin-top: 6px;
  }

  .obj_article_details .main_entry .item.abstract,
  .obj_article_details .main_entry .item.keywords,
  .obj_article_details .main_entry .item.references {
    padding: 14px 16px;
  }

  .obj_article_details .main_entry .item.abstract .label,
  .obj_article_details .main_entry .item.references .label,
  .pkp_structure_main .obj_article_details .main_entry .item.abstract .label,
  .pkp_structure_main .obj_article_details .main_entry .item.references .label {
    margin: -14px -16px 12px;
    padding: 10px 16px;
  }

  .njk-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Legacy editorial tables stack name / affiliation / identifier */
  .page_editorial_team table,
  .page_editorial_team tbody,
  .page_editorial_team tr,
  .page_editorial_team td {
    display: block;
    width: 100% !important;
  }

  .page_editorial_team tr {
    padding: 8px 0;
    border-bottom: 1px solid var(--njk-border);
  }

  .page_editorial_team table td {
    padding: 2px 0;
    border-bottom: 0;
  }

  .page_editorial_team td.drag,
  .page_editorial_team table td.drag {
    padding: 18px 0 8px;
    border-bottom: 2px solid var(--njk-teal-mid);
  }

  /* Wide tables in static pages scroll inside their own box */
  .pkp_structure_main .page:not(.page_editorial_team) table:not([class]):not([id]) {
    display: block;
    overflow-x: auto;
  }

  .page_search .search_advanced select {
    margin-bottom: 6px;
  }

  .pkp_footer_content {
    margin-bottom: 14px;
  }
}

/* ==========================================================
   26. ACCESSIBILITY / REDUCED MOTION
   ========================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.obj_galley_link:focus-visible {
  outline: 2px solid var(--njk-coral-dark);
  outline-offset: 2px;
}

.pkp_structure_footer_wrapper a:focus-visible {
  outline-color: #fff;
}

.cmp_skip_to_content a:focus {
  background: var(--njk-teal-dark);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================
   27. PRINT
   ========================================================== */
@media print {
  .pkp_structure_head,
  .pkp_structure_sidebar,
  .pkp_structure_footer_wrapper,
  .cmp_breadcrumbs,
  .homepage_image,
  .obj_article_details .entry_details .galleys,
  .citation_formats {
    display: none !important;
  }

  .pkp_structure_main {
    float: none !important;
    width: 100% !important;
  }

  body {
    font-size: 12pt;
  }

  a {
    color: #000;
  }
}

/* ==========================================================
   28. OJS 3.3.0.17 COMPATIBILITY FIXES
   ========================================================== */
/* Default theme article summary positions .pages absolutely */
.obj_article_summary .meta {
  position: relative;
}

/* Default theme issue TOC section headings sit on a pseudo-rule with a
   white background; neutralised in section 11. Its .obj_issue_toc .heading
   clearfix pseudo-elements are kept (display: flow-root also contains the
   floated cover). */

/* Default theme RTL helpers are retained; layout rules above include
   body[dir="rtl"] counterparts where floats are set. */

/* Default theme hides .pkp_navigation_user_wrapper borders only at >=992px */
@media (max-width: 991px) {
  .pkp_navigation_user_wrapper {
    border-top: 0;
  }
}

/* ==========================================================
   29. CONTENT HOOKS FOR EDITOR-BUILT BLOCKS (v1.1.0)
   ----------------------------------------------------------
   Classes the editorial team can use in Custom Blocks or
   static pages (see the installation guide). They only style
   content typed into OJS; no text is generated here.
   ========================================================== */

/* Link list with chevrons: <ul class="njk-links"><li><a href>...</a></li></ul> */
ul.njk-links,
.pkp_block .content ul.njk-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pkp_block .content ul.njk-links > li,
ul.njk-links > li {
  margin: 0;
  padding: 0;
}

ul.njk-links > li > a {
  display: block;
  position: relative;
  padding: 8px 22px 8px 2px;
  border-bottom: 1px solid var(--njk-border);
  color: var(--njk-text);
  font-family: var(--njk-sans);
  line-height: 1.45;
  text-decoration: none;
}

ul.njk-links > li:last-child > a {
  border-bottom: 0;
}

ul.njk-links > li > a::after {
  content: "\203A";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-55%);
  color: #9fb0b1;
  font-size: 19px;
}

ul.njk-links > li > a:hover,
ul.njk-links > li > a:focus {
  background: var(--njk-aqua-soft);
  color: var(--njk-teal-dark);
  box-shadow: inset 3px 0 0 var(--njk-teal-mid);
}

/* Label / value list: <ul class="njk-facts"><li><strong>E-ISSN</strong> <span>...</span></li></ul> */
ul.njk-facts,
.pkp_block .content ul.njk-facts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pkp_block .content ul.njk-facts > li,
ul.njk-facts > li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px solid var(--njk-border);
  font-family: var(--njk-sans);
  font-size: 14.5px;
  line-height: 1.45;
}

ul.njk-facts > li:last-child,
.pkp_block .content ul.njk-facts > li:last-child {
  border-bottom: 0;
}

ul.njk-facts > li > strong {
  color: var(--njk-heading);
  font-weight: 700;
}

ul.njk-facts > li > span {
  min-width: 0;
  word-break: break-word;
}

/* Logo grid: <div class="njk-logos"><a href><img></a> ...</div> */
.njk-logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.njk-logos > a,
.njk-logos > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--njk-border);
  border-radius: 5px;
}

.njk-logos > a:hover,
.njk-logos > a:focus {
  border-color: var(--njk-aqua-line);
  box-shadow: var(--njk-shadow);
}

.njk-logos img {
  width: auto !important;  /* TinyMCE writes width/height attributes and inline sizes */
  height: auto !important;
  max-width: 100%;
  max-height: 40px;
}

/* Template download row: <div class="njk-template"><p>...</p><a class="njk-cta">...</a></div> */
.njk-template {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.njk-template p,
.pkp_structure_sidebar .block_custom .njk-template p {
  flex: 1 1 140px;
  text-align: left;
  margin: 0;
  color: var(--njk-muted);
  font-family: var(--njk-sans);
  font-size: 14.5px;
  line-height: 1.45;
}

.njk-template img {
  flex: 0 0 auto;
  width: 48px !important;  /* overrides TinyMCE size attributes/inline sizes */
  height: auto !important;
}

/* Teal call-to-action link: <a class="njk-cta" href>Download</a> */
a.njk-cta,
.pkp_block a.njk-cta,
.pkp_structure_main a.njk-cta {
  display: inline-block;
  min-height: 40px;
  padding: 0 16px;
  background: var(--njk-teal);
  border: 1px solid var(--njk-teal-dark);
  border-radius: 5px;
  color: #fff;
  font-family: var(--njk-sans);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 38px;
  text-decoration: none;
}

a.njk-cta:hover,
a.njk-cta:focus,
.pkp_block a.njk-cta:hover,
.pkp_block a.njk-cta:focus {
  background: var(--njk-teal-dark);
  color: #fff;
}

/* Small helper text: <p class="njk-note">...</p> */
.njk-note {
  color: var(--njk-muted);
  font-family: var(--njk-sans);
  font-size: 14px;
  line-height: 1.5;
}

/* Identifier links inside .njk-person cards (Editorial Team, Reviewers) */
.njk-person-content .njk-ids,
.njk-info .njk-ids {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 4px;
  font-family: var(--njk-sans);
  font-size: 13.5px;
}