/* ============================================================
   KJAR — custom stylesheet for OJS 3.5 / Manuscript (Default child theme)
   Upload at: Settings > Website > Appearance > Advanced > Journal Stylesheet
   Clear the CSS cache afterwards (Administration > Clear Template Cache).
   ============================================================ */

:root {
  --kjar-navy:      #19375d;  /* sampled from the header band in the screenshot */
  --kjar-red:       #d02c30;  /* red badge in the logo */
  --kjar-heading:   #4a6a8a;  /* uppercase section / block titles */
  --kjar-link:      #19375d;
  --kjar-rule:      #dddddd;  /* thin dividers */

  /* the theme's own two stacks — Montserrat for UI, Noto Serif for prose */
  --kjar-sans:  "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  --kjar-serif: "Noto Serif", Georgia, "Times New Roman", serif;
}

/* ------------------------------------------------------------
   1. Header band
   The logo image itself carries a navy background, so this value
   must match it exactly or a seam appears at the image edge.
   ------------------------------------------------------------ */
.pkp_structure_head {
  background: var(--kjar-navy);
  border-bottom: none;
}

.pkp_head_wrapper .pkp_site_name,
.pkp_head_wrapper .pkp_site_name a {
  color: #ffffff;
}

/* ------------------------------------------------------------
   2. Main navigation — same navy as the header band.
      The theme sets .pkp_navigation_primary_row to #fff; the link
      colour is already #fff, so only the strip needs changing, but
      the colours are declared explicitly to survive theme updates.
      Dropdown panels are left alone: they sit on white and need
      dark text.
   ------------------------------------------------------------ */
.pkp_navigation_primary_row {
  background: var(--kjar-navy);
}

body .pkp_navigation_primary > li > a,
body .pkp_navigation_primary > li > a:link,
body .pkp_navigation_primary > li > a:visited,
body .pkp_navigation_primary_wrapper .pkp_navigation_primary > li > a,
body .pkp_site_nav_menu .pkp_navigation_primary > li > a,
body #navigationPrimary > li > a {
  /* the theme scopes its own nav colours inside @media (min-width:992px);
     !important keeps this consistent at every breakpoint */
  color: #ffffff !important;
}

body .pkp_navigation_primary > li > a:hover,
body #navigationPrimary > li > a:hover {
  color: #ffffff !important;
  border-color: var(--kjar-red);
}

/* submenu panels: navy, so every menu label can be white */
body .pkp_navigation_primary ul,
body #navigationPrimary ul {
  background: var(--kjar-navy);
}

body .pkp_navigation_primary ul a,
body .pkp_navigation_primary ul a:link,
body .pkp_navigation_primary ul a:visited,
body #navigationPrimary ul a {
  color: #ffffff !important;
}

body .pkp_navigation_primary ul a:hover,
body .pkp_navigation_primary ul a:focus,
body #navigationPrimary ul a:hover,
body #navigationPrimary ul a:focus {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--kjar-red);
}

.pkp_navigation_primary > li > a:focus {
  background: #ffffff;
  color: var(--kjar-navy);
}

/* ------------------------------------------------------------
   3. Red rule under section titles (main column)
      "About the Journal", "Current Issue", "Journal Information"
   ------------------------------------------------------------ */
.pkp_structure_main > h1,
.pkp_structure_main > h2,
.homepage_about h2,
.current_issue h2,
.obj_issue_toc > h2,
.page_index_journal h2 {
  color: var(--kjar-heading);
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  padding-bottom: 0.4rem;
  border-bottom: 3px solid var(--kjar-red);
  width: fit-content;      /* rule stops at the end of the text */
  max-width: 100%;         /* still wraps if the title is long */
  margin-bottom: 1.25rem;
}

/* ------------------------------------------------------------
   4. Red rule under sidebar block titles
   ------------------------------------------------------------ */
.pkp_block .title {
  color: var(--kjar-heading);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding-bottom: 0.3rem;
  border-bottom: 3px solid var(--kjar-red);
  width: fit-content;
  max-width: 100%;
  margin-bottom: 0.6rem;
}

.pkp_block {
  margin-bottom: 0.75rem;
}

/* the theme's block wrapper can carry its own trailing margin;
   zero it so the gap is set only by .pkp_block above */
.pkp_block .content > *:last-child {
  margin-bottom: 0;
}

/* body text in the blocks keeps the theme's font and size, with
   tighter leading — the theme's default reads loose in a 300px column */
.pkp_block .content,
.pkp_block .content p,
.pkp_block .content li {
  font-family: var(--kjar-sans);
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.45;
}

.pkp_block .content p {
  margin: 0 0 0.5rem;
}

.pkp_block .content p:last-child {
  margin-bottom: 0;
}

.pkp_block .content ul,
.pkp_block .content ol {
  margin: 0;
  padding-left: 1.1rem;
}

.pkp_block .content li {
  margin-bottom: 0.25rem;
}

.pkp_block a {
  color: var(--kjar-link);
}

.pkp_block a:hover {
  color: var(--kjar-red);
}

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

/* ------------------------------------------------------------
   5. Links, buttons, article entries in the main column
   ------------------------------------------------------------ */
.pkp_structure_main a {
  color: var(--kjar-link);
}

.pkp_structure_main a:hover {
  color: var(--kjar-red);
}

.obj_article_summary > .title a {
  color: var(--kjar-navy);
}

.obj_article_summary > .title a:hover {
  color: var(--kjar-red);
}

.cmp_button,
.pkp_structure_main a.cmp_button,
.pkp_structure_main a.obj_galley_link,
.pkp_structure_main a.obj_galley_link:link,
.pkp_structure_main a.obj_galley_link:visited {
  background: var(--kjar-navy);
  border-color: var(--kjar-navy);
  color: #ffffff;
}

.cmp_button:hover,
.pkp_structure_main a.cmp_button:hover,
.pkp_structure_main a.obj_galley_link:hover,
.pkp_structure_main a.obj_galley_link:focus {
  background: var(--kjar-red);
  border-color: var(--kjar-red);
  color: #ffffff;
}

/* ------------------------------------------------------------
   6. Journal sidebar — kept on the right, as the theme already
      places it. Manuscript sets fixed pixel widths here
      (.pkp_structure_main 652/860px, .pkp_structure_sidebar 300px),
      so no width is declared: percentages overflow the boxed layout
      and drop the sidebar below the content.
   ------------------------------------------------------------ */
@media (min-width: 992px) {
  /* keep the sidebar on the right in Kurdish/Arabic (RTL) locales too */
  body[dir="rtl"] .pkp_structure_main    { float: left;  }
  body[dir="rtl"] .pkp_structure_sidebar { float: right; }
}

/* ------------------------------------------------------------
   7. OPTIONAL — split the single sidebar into two columns
      OJS 3.x provides only one sidebar region. This makes the
      blocks flow into two columns so it reads as two sidebars.
      Uses pixel widths, not percentages, for the same reason as
      section 6. Delete this section if you do not want it.
   ------------------------------------------------------------ */
/*
@media (min-width: 1200px) {
  .pkp_structure_content.has_sidebar .pkp_structure_main    { width: 700px; }
  .pkp_structure_content.has_sidebar .pkp_structure_sidebar {
    width: 460px;
    column-count: 2;
    column-gap: 2rem;
  }
  .pkp_block {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}
*/

/* ------------------------------------------------------------
   8. Justified body text: abstract and references
   ------------------------------------------------------------ */
.obj_article_details .item.abstract,
.obj_article_details .item.abstract p,
.obj_article_details .item.references,
.obj_article_details .item.references .value,
.obj_article_details .item.references .value p,
.obj_article_details .item.references .value div {
  text-align: justify;
  text-justify: inter-word;
}

/* headings inside those blocks stay left-aligned (right in RTL) */
.obj_article_details .item.abstract .label,
.obj_article_details .item.references .label {
  text-align: start;
}

/* optional: soften the large word gaps justification can create
.obj_article_details .item.abstract p,
.obj_article_details .item.references .value {
  hyphens: auto;
}
*/

/* ------------------------------------------------------------
   8b. References: shorten the page.

   Option A (active, CSS only): clamp the list and scroll inside it.
   Comment out this rule if you install the script for Option B.
   ------------------------------------------------------------ */
.obj_article_details .item.references .value {
  max-height: 24em;
  overflow-y: auto;
  padding-right: 1rem;
}

/* Option B: styling for a <details> wrapper added by the script.
   Harmless if the script is not installed. */
details.kjar_references > summary {
  cursor: pointer;
  list-style: none;
  color: var(--kjar-heading);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: 0.4rem;
  margin-bottom: 1.25rem;
  border-bottom: 3px solid var(--kjar-red);
  width: fit-content;
  max-width: 100%;
}

details.kjar_references > summary::-webkit-details-marker {
  display: none;
}

details.kjar_references > summary::after {
  content: " +";
  color: var(--kjar-red);
  font-weight: 700;
}

details.kjar_references[open] > summary::after {
  content: " \2212";
}

details.kjar_references .value {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

/* ------------------------------------------------------------
   8c. Article body headings (Abstract, References) — same
       treatment as the sidebar and details-column titles.
       The theme uses its own orange-red (#ed403b) here.
   ------------------------------------------------------------ */
.obj_article_details .main_entry > .item > .label,
.obj_article_details .main_entry .item.abstract .label,
.obj_article_details .main_entry .item.references .label,
.obj_article_details .main_entry .item.keywords .label,
details.kjar_references > summary {
  display: inline-block;
  color: var(--kjar-heading);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 0 0.4rem;
  margin: 0 0 1.25rem;
  border-bottom: 3px solid var(--kjar-red);
  width: fit-content;
  max-width: 100%;
}

/* Keywords: label on its own line, list beneath it */
.obj_article_details .main_entry .item.keywords .label {
  display: block;
  margin-bottom: 0.8rem;
}

/* DOI stays inline — the value sits on the same line as the label */
.obj_article_details .main_entry .item.doi .label {
  display: inline;
  border-bottom: none;
  padding: 0;
  margin: 0;
  width: auto;
  text-transform: none;
  letter-spacing: normal;
  font-size: 1rem;
}

/* ------------------------------------------------------------
   9. Article page: details column (cover image, Crossmark, How to
      Cite, downloads) moved to the LEFT, article text to the right.

      The Manuscript theme sizes these two columns in fixed pixels
      (main_entry 428/352/560px, entry_details 300/240px) inside a
      boxed layout. Do NOT set widths here — percentage widths
      overflow the container and push the second column below the
      first. Only the float direction and the gap are changed.
   ------------------------------------------------------------ */
@media (min-width: 768px) {
  .obj_article_details .main_entry {
    float: right;
    border-left: none;
    border-right: none;
  }

  .obj_article_details .entry_details {
    float: left;
    /* padding, not margin, so the theme's fixed pixel width is
       preserved — border-box absorbs it instead of widening the box */
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 15px;
    padding-left: 2.143rem;
    padding-right: 2.143rem;
    /* the single divider, between the details column and the body */
    border-left: none;
    border-right: 1px solid var(--kjar-rule);
  }

  .obj_article_details:after {
    content: "";
    display: table;
    clear: both;
  }

  [dir="rtl"] .obj_article_details .main_entry {
    float: left;
  }

  [dir="rtl"] .obj_article_details .entry_details {
    float: right;
    margin-right: 0;
    margin-left: 15px;
    padding-left: 2.143rem;
    padding-right: 2.143rem;
    border-right: none;
    border-left: 1px solid var(--kjar-rule);
  }
}

/* Widen the details column to 300px so it matches the right sidebar
   (.pkp_structure_sidebar is 300px at >=992px), and size main_entry
   to the exact remainder so no float leftover appears as a gap
   between the divider and the body text.
     >=1200px: container 860 - 300 - 15 = 545
     >= 992px: container 652 - 240 - 15 = 397  */
@media (min-width: 992px) {
  .obj_article_details .main_entry { width: 397px; }
}

@media (min-width: 1200px) {
  .obj_article_details .entry_details { width: 300px; }
  .obj_article_details .main_entry    { width: 545px; }
}

/* ------------------------------------------------------------
   9c. Details column: flat panels, single left edge.
       Manuscript gives each .item a grey fill, a shadow and its own
       internal 1.43rem padding, while the cover image is centred
       with auto margins. Both are removed so every element —
       Crossmark, cover, PDF, Published, Issue, License — starts on
       the same left edge, matching the journal sidebar blocks.
   ------------------------------------------------------------ */
.obj_article_details .entry_details .item {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  border-bottom: none;
  padding: 0;
  /* tighter than .pkp_block in the sidebar: these panels hold one or
     two lines each, so the sidebar's 2.25rem rhythm reads as gaps */
  margin: 0 0 0.9rem;
}

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

/* labels styled exactly like .pkp_block .title in the right sidebar */
.obj_article_details .entry_details .item > .label,
.obj_article_details .entry_details .sub_item > .label,
.obj_article_details .entry_details .sub_item:first-child > .label,
.obj_article_details .entry_details .sub_item:not(:first-child) .label {
  background: transparent;
  color: var(--kjar-heading);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 0 0.3rem;
  margin: 0 0 0.4rem;
  border-radius: 0;
  border-bottom: 3px solid var(--kjar-red);
  width: fit-content;
  max-width: 100%;
  display: block;
}

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

/* Issue and Section sit inside one item; give them a small gap */
.obj_article_details .entry_details .sub_item + .sub_item {
  margin-top: 0.9rem;
}

/* cover image: left-aligned with the rest instead of centred */
.obj_article_details .entry_details .cover_image img {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------
   9b. Crossmark "Check for updates" badge.
       The Crossref widget renders as:
         <a data-target="crossmark"><img src="…crossmark-cdn…svg"></a>
       with no id or class, so it is matched by attribute.
   ------------------------------------------------------------ */
.entry_details a[data-target="crossmark"] {
  display: block;
  margin-bottom: 1.25rem;
}

/* Crossmark and the cover both fill the column's content width, so
   their left and right edges align. Safe because .entry_details is a
   fixed-width border-box column — see section 9. */
.obj_article_details .entry_details a[data-target="crossmark"] img,
.obj_article_details .entry_details img[src*="crossmark-cdn"],
.obj_article_details .entry_details .item.cover_image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* ------------------------------------------------------------
   11. Typography: one sans stack everywhere except the paper itself.
       Montserrat carries all chrome — navigation, headings, labels,
       sidebar blocks, the details column, breadcrumbs, footer.
       Noto Serif is reserved for the article's own text, where a
       serif aids sustained reading.
   ------------------------------------------------------------ */
.pkp_block,
.pkp_block .title,
.pkp_structure_sidebar,
.obj_article_details .entry_details,
.obj_article_details .entry_details .label,
.obj_article_details .entry_details .value,
.obj_article_details .main_entry .label,
.pkp_structure_main > h1,
.pkp_structure_main > h2,
.homepage_about h2,
.current_issue h2,
.obj_issue_toc > h2,
.cmp_breadcrumbs,
.obj_article_details .page_title,
.cmp_button,
.obj_galley_link,
.pkp_structure_footer_wrapper,
details.kjar_references > summary {
  font-family: var(--kjar-sans);
}

/* the paper: abstract, references, authors, affiliations, citation */
.obj_article_details .main_entry .item .value,
.obj_article_details .main_entry .item.abstract,
.obj_article_details .main_entry .item.abstract p,
.obj_article_details .main_entry .item.references .value,
.obj_article_details .main_entry .item.references .value p,
.obj_article_details .main_entry .item.authors,
.obj_article_details .entry_details .csl-bib-body,
.obj_article_details .entry_details .csl-entry {
  font-family: var(--kjar-serif);
}

/* ------------------------------------------------------------
   12. Homepage: hide the current-issue cover thumbnail.
       The cover already appears in the About block at the top of
       the page, so the theme's copy under "Current Issue" is a
       duplicate. Scoped to .pkp_page_index so the issue landing
       page and the archive keep their covers. The image is only
       hidden — the file and the issue record are untouched.
   ------------------------------------------------------------ */
.pkp_page_index .current_issue .obj_issue_toc .heading .cover {
  display: none;
}

/* with the cover hidden, close the gaps the theme left around it */
.pkp_page_index .current_issue .current_issue_title {
  margin-bottom: 0.4rem;
}

.pkp_page_index .current_issue .obj_issue_toc .heading {
  margin-bottom: 0.6rem;
  padding-bottom: 0;
}

.pkp_page_index .current_issue .obj_issue_toc .heading .published {
  margin: 0;
  padding: 0;
}

.pkp_page_index .current_issue .obj_issue_toc .sections .section > h3 {
  margin-top: 0.6rem;
  margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------
   13. Homepage: relabel "Current Issue" as "Latest papers".
       The string comes from a locale key with no admin setting, so
       it is swapped visually: the heading's own text is collapsed
       to zero and replaced by a pseudo-element. Note the accessible
       name in the markup is still "Current Issue" — screen readers
       and the skip link will announce the original wording.
   ------------------------------------------------------------ */
.pkp_page_index .current_issue > h2 {
  font-size: 0;
  letter-spacing: 0;
}

.pkp_page_index .current_issue > h2::after {
  content: "Latest papers";
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--kjar-heading);
  font-family: var(--kjar-sans);
}

/* ------------------------------------------------------------
   10. Footer
   ------------------------------------------------------------ */
.pkp_structure_footer_wrapper {
  background: var(--kjar-navy);
  color: #ffffff;
}

/* the black licence bar is set inside the footer HTML; remove the
   wrapper's bottom padding so it can sit flush to the page edge */
.pkp_structure_footer_wrapper .pkp_footer_content {
  padding-bottom: 0;
}

/* the theme's OJS/PKP brand image, in .pkp_brand_footer */
.pkp_structure_footer_wrapper .pkp_brand_footer {
  display: none;
}

.pkp_structure_footer_wrapper a {
  color: #ffffff;
  text-decoration: none;
}

.pkp_structure_footer_wrapper a:hover {
  color: var(--kjar-red);
  text-decoration: underline;
}