/* JFA custom style sheet — RSHI brand guide (Treadaway Co., 07.24.2020 v1.0) */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* Typography: Poppins per brand guide */
body,
input,
select,
textarea,
button {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Charcoal for body copy (brand guide primary text color) */
body {
  color: #2C2D2D;
}

/* Ocean (already used as theme header colour) reinforced for links */
a {
  color: #1F5972;
}
a:hover,
a:focus {
  color: #9D2D23; /* Crimson on hover, per brand accent usage */
}

/* Headings in Charcoal, Poppins, semi-bold per brand guide */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: #2C2D2D;
}

/* Primary buttons: Ocean background, Crimson on hover */
.pkp_button_primary,
.cmp_button.isPrimary {
  background-color: #1F5972;
  border-color: #1F5972;
}
.pkp_button_primary:hover,
.cmp_button.isPrimary:hover {
  background-color: #9D2D23;
  border-color: #9D2D23;
}

/* Fix: default theme floats the "Abstract" label left, so the abstract
   text runs onto the same line instead of wrapping below it. Force the
   label onto its own line, matching the Section/Published headings. */
.obj_article_details .item.abstract > .label {
  display: block;
  float: none;
  margin-bottom: 0.5em;
}

/* Tighten the References list: each citation renders as its own <p>,
   and default paragraph margins/line-height leave too much space below
   the header and between/within entries. Bring it in line with the
   Abstract's tighter spacing. */
.obj_article_details .item.references .label {
  margin-bottom: 0.5em;
}
.obj_article_details .item.references .value p {
  margin: 0 0 0.75em 0;
  line-height: 1.5;
}
.obj_article_details .item.references .value p:first-child {
  margin-top: 0;
}

/* Archives page grid: hide the cover thumbnail entirely and show a plain
   text list of issues instead. */
.obj_issue_summary .cover {
  display: none !important;
}
/* With the cover hidden, the theme's per-issue spacing (sized to make
   room for a floated cover thumbnail: <li><div class="obj_issue_summary">
   <h2>title</h2><div class="description">...</div></div></li>) leaves
   large gaps around what's now just two lines of text. Tighten it down
   to a compact list. */
ul.issues_archive > li {
  /* Theme rule is `.page_issue_archive .issues_archive > li { padding:
     2.143rem .714rem; ... }` — the shorthand sets padding-top to 2.143rem
     (~30px) and nothing here was overriding that specific side, so a
     big gap remained above each entry even after padding-bottom was
     fixed. Override all four sides explicitly this time. */
  padding: 0.25em 0.714rem !important;
  margin: 0 !important;
  border-bottom: 1px solid #e0e0e0;
}
.obj_issue_summary {
  margin: 0 !important;
  min-height: 0 !important;
}
.obj_issue_summary h2 {
  margin-top: 0 !important;
  margin-bottom: 0.25em !important;
}
/* Keep the Archives list to a compact title-only list — the issue
   description (now populated per-volume to mirror RSHI's site) is
   meant to show on each issue's own page, not clutter this summary
   list where most other volumes don't have one yet. */
.obj_issue_summary .description {
  display: none !important;
}

/* Show the journal title in the header bar (Ocean blue), in white,
   using the same Poppins semi-bold treatment as the homepage title.
   The default theme only renders EITHER a logo OR a text title in the
   header, never both — since a logo is configured, the title text isn't
   in the markup at all, so it's added here as generated content next to
   the logo rather than requiring a template change. */
.pkp_site_name_wrapper .pkp_site_name {
  display: flex;
  align-items: center;
  gap: 0.85em;
  flex-wrap: wrap;
}
.pkp_site_name_wrapper .pkp_site_name::after {
  /* Explicit line break (rather than relying on natural wrap at some
     container width) so "Theory and Practice" always lands on its own
     line regardless of screen size. \A + pre-line forces it. */
  content: "Journal of Formal Axiology:\A Theory and Practice";
  white-space: pre-line;
  display: inline-block;
  text-align: center;
  /* Matches the serif title baked into the cover artwork (not a live
     element, so no computed font-family to inspect — using a classic
     book-serif system stack rather than the sans-serif Poppins used
     elsewhere on the site, since that's what the cover art itself uses). */
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: 700;
  color: #ffffff;
  font-size: 2.4rem;
  line-height: 1.2;
}
/* The single-issue landing page (Vol. 12's own page, breadcrumb ARCHIVES >
   Vol. 12) uses a separate template/class from the Archives grid above.
   Broadened selector set + higher specificity, since a narrower rule
   wasn't taking effect (widening the net in case this theme's actual
   markup differs slightly from stock OJS). */
.obj_issue_toc .heading .cover img,
.obj_issue_toc .cover img,
.page_issue .cover img,
.page_issue img.cover,
div.obj_issue_toc div.heading div.cover img {
  width: 500px !important;
  /* NOTE: max-width must be an absolute px cap, not 100% — the heading's
     cover column is a narrow (~200px) flex/grid item, so max-width:100%
     resolved against THAT container and silently clamped width:500px
     right back down to ~200px. Confirmed via dev-tools computed box
     model showing 200 x 258.983px despite the 500px rule "winning" in
     the Rules panel. */
  max-width: 500px !important;
  height: auto !important;
  display: block !important;
}
/* The cover image is wrapped in <a class="cover">; size the anchor too
   so it isn't clipping the enlarged image back down via its own
   (narrower) box, and let it grow rather than stay pinned to the old
   column width. */
.obj_issue_toc .heading a.cover,
.obj_issue_toc .heading .cover {
  width: 500px !important;
  max-width: 500px !important;
  height: auto !important;
  overflow: visible !important;
  display: block !important;
}
/* The heading row is a flex layout with the cover as one column and the
   issue title/description as another; forcing the cover column from
   ~200px to 500px needs the row to be allowed to wrap, or the title
   text will get squeezed into too little space alongside it. */
.obj_issue_toc .heading {
  flex-wrap: wrap !important;
}
.obj_article_details .item.cover_image img {
  width: 100%;
  max-width: 320px;
  height: auto;
}

/* Contact page: Principal Contact and Support Contact
   (<div class="contact_section"><div class="contact primary">...
   <div class="contact support">...) render staggered — different left
   offsets and vertical positions — under the default theme's own
   layout. Lay them out explicitly as a top-aligned row instead of
   relying on whatever float/margin rules the theme has. */
.page_contact .contact_section {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 3em;
}
.page_contact .contact_section > .address {
  flex-basis: 100%;
}
.page_contact .contact_section > .contact.primary,
.page_contact .contact_section > .contact.support {
  flex: 1 1 240px;
  margin: 0 !important;
  float: none !important;
}