/* ==========================================================================
   African Open Research — custom stylesheet for OJS 3.5 (Default theme)

   Upload via: Settings → Website → Appearance → Custom Stylesheet
   Applies at site level and per journal. Upload separately in each context
   where you want it.

   Palette
     #0E1F46  deep indigo   primary — header, nav, headings
                            sampled from the logo background so the
                            uploaded PNG blends into the header band
     #0A1734  indigo dark   nav bar, hover states
     #B5651D  copper        accent — links, buttons, rules
     #8F4E16  copper dark   hover states
     #F7F6F3  warm white    page background
     #FFFFFF  white         content panels
     #1A1A1A  near black    body text
     #5A6072  slate         secondary text
     #DDD9D2  bone          borders

   Verified against the compiled OJS 3.5.0.5 stylesheet on
   africanopenresearch.org — every selector below exists in the theme.
   ========================================================================== */

:root {
  --aor-primary: #0E1F46;
  --aor-primary-dark: #0A1734;
  --aor-accent: #B5651D;
  --aor-accent-dark: #8F4E16;
  --aor-surface: #F7F6F3;
  --aor-panel: #FFFFFF;
  --aor-text: #1A1A1A;
  --aor-muted: #5A6072;
  --aor-border: #DDD9D2;
  --aor-serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --aor-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   1. Foundations
   -------------------------------------------------------------------------- */

body {
  background: var(--aor-surface);
  color: var(--aor-text);
  font-family: var(--aor-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--aor-accent);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--aor-accent-dark);
  text-decoration: underline;
}

/* Visible focus ring. Required for WCAG and checked during DOAJ review. */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--aor-accent);
  outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--aor-serif);
  color: var(--aor-primary);
  font-weight: 600;
  line-height: 1.3;
}

h1 { font-size: 2rem; margin-bottom: 0.6em; }
h2 { font-size: 1.5rem; margin-bottom: 0.5em; }
h3 { font-size: 1.2rem; margin-bottom: 0.5em; }

/* --------------------------------------------------------------------------
   2. Header
   -------------------------------------------------------------------------- */

.pkp_structure_head {
  background: var(--aor-primary);
  border-bottom: 3px solid var(--aor-accent);
}

.pkp_head_wrapper {
  padding-top: 1.25rem;
  padding-bottom: 0;
}

.pkp_site_name_wrapper {
  padding: 0.5rem 0 1rem;
}

.pkp_site_name,
.pkp_site_name a,
.pkp_site_name .is_img img {
  color: #FFFFFF;
}

.pkp_site_name .is_text {
  font-family: var(--aor-serif);
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #FFFFFF;
}

.pkp_site_name .is_text:hover {
  color: #FFFFFF;
  text-decoration: none;
}

/* Constrain an uploaded logo so a large file cannot blow out the header.
   max-width matters for wide lockups — a 6:1 logo at 72px tall is ~440px
   wide, which would overflow a narrow phone without this. */
.pkp_site_name .is_img img {
  max-height: 84px;
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

/* MOBILE HEADER — read this before changing any value below.

   The default theme sets, under 768px:
     .pkp_site_name_wrapper { height: 2.857rem }   fixed, 40px
     .pkp_site_name         { position: absolute } escapes normal flow
     .pkp_site_name .is_img img { max-height: 2.143rem }   30px
     .pkp_site_name > a     { padding: .714rem 0 }  10px top and bottom

   Because the wrapper's height is FIXED and the logo is ABSOLUTE, enlarging
   the image alone makes it hang below the header band — the wrapper will
   never grow to contain it, and overflow:hidden cannot help because the
   overflow is happening past a height the theme has hard-coded.

   So: raise the wrapper height first, then size the image to fit inside it.
     wrapper 72px = 6px margin + 60px image + 6px margin, anchor padding zeroed
   At 4.78:1 a 60px-tall logo is ~287px wide, which fits the space left of
   the hamburger on a 360px screen.

   BREAKPOINT: 991px, not 767px. The theme keeps this absolute-positioned
   header all the way up to 991px and only switches to the desktop layout at
   min-width:992px. A 767px query leaves tablets and small laptop windows
   using the broken layout. */
@media (max-width: 991px) {
  .pkp_site_name_wrapper {
    height: 72px;
  }

  .pkp_site_name > a {
    padding-top: 0;
    padding-bottom: 0;
  }

  .pkp_site_name .is_img {
    margin-top: 6px;
    margin-bottom: 6px;
  }

  .pkp_site_name .is_img img {
    max-height: 60px;
    max-width: 100%;
    width: auto;
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   3. Navigation
   -------------------------------------------------------------------------- */

.pkp_navigation_primary_wrapper {
  background: var(--aor-primary-dark);
  margin: 0 -1rem;
  padding: 0 1rem;
}

.pkp_navigation_primary > li > a,
.pkp_nav_list > li > a {
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--aor-sans);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.85rem 1rem;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_nav_list > li > a:hover,
.pkp_nav_list > li > a:focus {
  background: var(--aor-accent);
  color: #FFFFFF;
  text-decoration: none;
}

/* Dropdown submenus */
.pkp_navigation_primary li ul {
  background: var(--aor-primary-dark);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.pkp_navigation_primary li ul a {
  color: rgba(255, 255, 255, 0.88);
  text-transform: none;
  letter-spacing: 0;
}

/* Register / Login */
.pkp_navigation_user > li > a {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pkp_navigation_user > li > a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

.pkp_site_nav_toggle {
  background: var(--aor-primary-dark);
  color: #FFFFFF;
}

.pkp_navigation_search_wrapper a {
  color: rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   4. Content area
   -------------------------------------------------------------------------- */

.pkp_structure_content {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.pkp_structure_main {
  background: var(--aor-panel);
  border: 1px solid var(--aor-border);
  border-radius: 3px;
  padding: 2rem 2.25rem;
}

.cmp_breadcrumbs {
  font-size: 0.85rem;
  color: var(--aor-muted);
  margin-bottom: 1.5rem;
}

.cmp_breadcrumbs a {
  color: var(--aor-muted);
}

.cmp_breadcrumbs a:hover {
  color: var(--aor-accent);
}

/* Page title with a copper rule beneath */
.pkp_structure_main > h1:first-child,
.page_index_journal h1,
.pkp_page_index h1 {
  border-bottom: 2px solid var(--aor-accent);
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
}

/* --------------------------------------------------------------------------
   5. Sidebar
   -------------------------------------------------------------------------- */

.pkp_structure_sidebar {
  padding-left: 2rem;
}

.pkp_block {
  background: var(--aor-panel);
  border: 1px solid var(--aor-border);
  border-top: 3px solid var(--aor-primary);
  border-radius: 3px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.pkp_block .title {
  font-family: var(--aor-serif);
  font-size: 1rem;
  color: var(--aor-primary);
  margin-bottom: 0.75rem;
  text-transform: none;
}

/* --------------------------------------------------------------------------
   6. Article listings and issue tables of contents
   -------------------------------------------------------------------------- */

.cmp_article_list > li {
  border-bottom: 1px solid var(--aor-border);
  padding: 1.35rem 0;
}

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

.obj_article_summary > .title {
  font-family: var(--aor-serif);
  font-size: 1.15rem;
  line-height: 1.4;
  margin-bottom: 0.35rem;
}

.obj_article_summary > .title a {
  color: var(--aor-primary);
}

.obj_article_summary > .title a:hover {
  color: var(--aor-accent);
  text-decoration: none;
}

.obj_article_summary .meta,
.obj_article_summary .authors {
  color: var(--aor-muted);
  font-size: 0.9rem;
}

.obj_issue_toc .section > h2 {
  font-size: 1.05rem;
  color: var(--aor-primary);
  border-bottom: 1px solid var(--aor-border);
  padding-bottom: 0.4rem;
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   7. Article landing page
   -------------------------------------------------------------------------- */

.obj_article_details .page_title {
  font-family: var(--aor-serif);
  font-size: 1.75rem;
  line-height: 1.3;
  color: var(--aor-primary);
}

.obj_article_details .authors .name {
  font-weight: 600;
  color: var(--aor-text);
}

.obj_article_details .authors .affiliation,
.obj_article_details .authors .orcid {
  color: var(--aor-muted);
  font-size: 0.9rem;
}

.obj_article_details .abstract {
  font-size: 1.02rem;
  line-height: 1.75;
}

.obj_article_details .abstract h2 {
  font-size: 1.1rem;
  border-bottom: 1px solid var(--aor-border);
  padding-bottom: 0.4rem;
}

/* PDF / full-text download buttons */
.obj_galley_link {
  background: var(--aor-accent);
  border-color: var(--aor-accent);
  color: #FFFFFF;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.obj_galley_link:hover,
.obj_galley_link:focus {
  background: var(--aor-accent-dark);
  border-color: var(--aor-accent-dark);
  color: #FFFFFF;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   8. Buttons and forms
   -------------------------------------------------------------------------- */

.pkp_button,
.cmp_button {
  background: var(--aor-primary);
  border: 1px solid var(--aor-primary);
  color: #FFFFFF;
  font-family: var(--aor-sans);
  font-weight: 600;
  border-radius: 3px;
  padding: 0.6rem 1.4rem;
}

.pkp_button:hover,
.cmp_button:hover,
.pkp_button:focus,
.cmp_button:focus {
  background: var(--aor-primary-dark);
  border-color: var(--aor-primary-dark);
  color: #FFFFFF;
  text-decoration: none;
}

.pkp_button_primary {
  background: var(--aor-accent);
  border-color: var(--aor-accent);
}

.pkp_button_primary:hover,
.pkp_button_primary:focus {
  background: var(--aor-accent-dark);
  border-color: var(--aor-accent-dark);
}

.cmp_button_wire {
  background: transparent;
  border: 1px solid var(--aor-accent);
  color: var(--aor-accent);
}

.cmp_button_wire:hover,
.cmp_button_wire:focus {
  background: var(--aor-accent);
  color: #FFFFFF;
}

.cmp_form .label {
  font-weight: 600;
  color: var(--aor-primary);
}

.cmp_form input[type="text"],
.cmp_form input[type="email"],
.cmp_form input[type="password"],
.cmp_form input[type="url"],
.cmp_form select,
.cmp_form textarea {
  border: 1px solid var(--aor-border);
  border-radius: 3px;
  padding: 0.55rem 0.7rem;
  font-family: var(--aor-sans);
  font-size: 0.95rem;
}

.cmp_form input:focus,
.cmp_form select:focus,
.cmp_form textarea:focus {
  border-color: var(--aor-accent);
}

.cmp_form .required {
  color: #A32B2B;
}

.pkp_form_error,
.pkp_form_error_list {
  color: #A32B2B;
}

/* --------------------------------------------------------------------------
   9. Announcements and pagination
   -------------------------------------------------------------------------- */

.cmp_announcements > li {
  border-left: 3px solid var(--aor-accent);
  padding-left: 1rem;
  margin-bottom: 1.5rem;
}

.cmp_pagination {
  margin-top: 2rem;
  color: var(--aor-muted);
  font-size: 0.9rem;
}

.cmp_pagination a {
  color: var(--aor-accent);
}

/* --------------------------------------------------------------------------
   10. Site-level journal index
   -------------------------------------------------------------------------- */

.pkp_page_index .journals > li {
  background: var(--aor-panel);
  border: 1px solid var(--aor-border);
  border-left: 4px solid var(--aor-accent);
  border-radius: 3px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.pkp_page_index .journals .title a {
  font-family: var(--aor-serif);
  font-size: 1.25rem;
  color: var(--aor-primary);
}

.pkp_page_index .journals .title a:hover {
  color: var(--aor-accent);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   10b. Site index prose

   The site-level "About the Site" editor allows only bold, italic and links —
   no headings, no lists, no source view. So the content arrives as plain
   paragraphs and has to be styled structurally rather than by class.

   First paragraph becomes the lead. Bold lead-ins inside later paragraphs
   are picked up and coloured so they read as pseudo-headings.
   -------------------------------------------------------------------------- */

.pkp_page_index p {
  max-width: 42em;
  margin-bottom: 1.2rem;
  line-height: 1.7;
}

/* REMOVED — a blanket lead-paragraph rule used to live here:

     .pkp_page_index p:first-of-type { serif, 1.55rem, indigo,
                                       copper border-bottom }

   It was written when the site homepage was plain prose. Once both
   homepages moved to .aor-hero markup it had nothing useful to style, and
   it actively broke the journal hero: it caught the hero's first paragraph
   and painted it indigo on an indigo panel, leaving what looked like a
   blank gap with a stray copper rule floating in it.

   Specificity made it hard to override. .pkp_page_index p:first-of-type
   and .aor-hero p:first-of-type are both (0,2,1), so the winner was
   decided by which stylesheet OJS loaded last — the site one or the
   journal one. That is not something to build on. Deleting the rule
   removes the conflict rather than papering over it.

   Do not reinstate this without scoping it away from .aor-hero. */

/* NEUTRALISER — deleting the rule from this file was not enough.

   The identical rule still exists in the SITE stylesheet, which OJS loads
   after this one and which cannot be replaced through the admin interface
   while the install has a single journal. So it keeps applying.

   And it applies far more widely than the hero. `p:first-of-type` matches
   the first <p> inside EVERY parent element on the page, not just the first
   paragraph of the page. On the journal homepage that catches any loose
   paragraph that happens to open its container — for example the "This list
   is indicative, not exhaustive" line under What we publish — and renders it
   as a 1.55rem indigo serif lead with a copper rule beneath. It looks like a
   heading that has lost its section.

   This resets those paragraphs to body text at (0,3,1), which outranks the
   stale rule's (0,2,1).

   ORDER MATTERS. This sits BEFORE the .aor-hero / .aor-callout / .aor-cols
   overrides below, which are also (0,3,1) and therefore win the tie on
   source order. Move this after them and the hero lead goes flat. */
.pkp_page_index.pkp_page_index p:first-of-type {
  font-family: var(--aor-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--aor-text);
  max-width: 68ch;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 1.1rem;
}

/* Bold lead-ins at the start of a paragraph.

   SCOPED TO .pkp_structure_main ON PURPOSE. .pkp_page_index is a class OJS
   puts on <body>, not on the content div, so an unscoped version of this rule
   also caught the footer — turning the bold publisher name indigo on the
   indigo footer band, where it vanished. Restricting it to the content area
   keeps it doing the job it was written for. */
.pkp_page_index .pkp_structure_main p > strong:first-child {
  color: var(--aor-primary);
  font-family: var(--aor-serif);
  font-size: 1.05em;
}

/* "There are no journals available" and similar system messages */
.pkp_page_index .pkp_structure_main > p:last-of-type {
  color: var(--aor-muted);
  font-style: italic;
  border-top: 1px solid var(--aor-border);
  padding-top: 1.25rem;
  margin-top: 2rem;
}

/* IMPORTANT — the lead rule above targets the first paragraph on any index
   page. That is right for the site homepage, which is plain prose, but it
   also catches the first paragraph inside a hero or callout block on the
   journal homepage, rendering indigo text on an indigo panel with a stray
   copper rule under it. These overrides put those paragraphs back. */

/* In the hero, keep the lead treatment but make it legible: large white
   serif with the copper rule beneath. The site-index rule sets indigo,
   which is invisible on an indigo panel. Turning it white makes the
   opening sentence the strongest thing on the page, which is where it
   belongs. */
/* WHY THE CLASS IS REPEATED — .aor-hero.aor-hero

   This is not a typo. Repeating a class raises specificity without
   resorting to !important. One .aor-hero is (0,2,1), the same weight as
   the old .pkp_page_index p:first-of-type rule, so a tie was broken by
   stylesheet load order. OJS serves TWO custom stylesheets — one at site
   level, one at journal level — and on this install the SITE one loads
   last. The site file cannot be replaced through the admin interface once
   a single journal exists, so it still carries the old rule.

   Doubling the class makes this (0,3,1). It wins on specificity, so load
   order stops mattering and the stale site file cannot override it. */
/* The rule under the LEAD PARAGRAPH stays. It separates the one-sentence
   statement of what the journal is from the operational detail beneath it.
   The rule that had to go was the one under the h2 — see the reset in
   section 15. */
.aor-hero.aor-hero p:first-of-type {
  font-family: var(--aor-serif);
  font-size: 1.35rem;
  line-height: 1.5;
  color: #FFFFFF;
  border-bottom: 2px solid var(--aor-accent);
  padding-bottom: 1.35rem;
  margin-bottom: 1.5rem;
  max-width: 38em;
}

/* Callouts and columns sit on light panels — plain body text there.
   Classes doubled for the same reason as the hero above. */
.aor-callout.aor-callout p:first-of-type,
.aor-cols.aor-cols p:first-of-type {
  font-family: var(--aor-sans);
  font-size: 1rem;
  line-height: 1.7;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 1rem;
  max-width: 46em;
  color: var(--aor-text);
}

@media (max-width: 767px) {
  .aor-hero.aor-hero p:first-of-type {
    font-size: 1.15rem;
    max-width: none;
    padding-bottom: 1rem;
    margin-bottom: 1.15rem;
  }

  .aor-callout.aor-callout p:first-of-type,
  .aor-cols.aor-cols p:first-of-type {
    font-size: 1rem;
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   10c. Long policy pages — About, Submissions, Privacy

   These are a single long run of headed sections. OJS gives them no visual
   structure, so on a desktop they read as an unbroken white wall with lines
   around 140 characters long. Typographic research puts comfortable reading
   at roughly 45-75 characters; past that the eye loses its place returning
   to the start of the next line, which is what makes a page like this feel
   heavy regardless of how good the writing is.

   Two changes carry most of the improvement: a measured line length, and
   headings that visibly start a new section rather than sitting in the flow.

   PLACEMENT MATTERS. This block sits BEFORE section 15 deliberately. The
   selectors here are (0,1,1) — the same weight as the .aor- component rules
   in section 15 — so on a tie the later block wins and the homepage keeps
   its own styling. Do not move this below section 15.
   -------------------------------------------------------------------------- */

.pkp_structure_main h2 {
  font-size: 1.3rem;
  color: var(--aor-primary);
  border-bottom: 2px solid var(--aor-accent);
  padding-bottom: 0.45rem;
  margin: 3rem 0 1.1rem;
}

/* The page's own <h1> is immediately followed by the first <h2>; without
   this the two collide with 3rem of dead space between them. */
.pkp_structure_main h2:first-of-type {
  margin-top: 1.75rem;
}

/* On the Privacy Statement, h3 is the only heading level — those sections are
   top-level, not subordinate to anything. A hairline in bone gives them
   definition without letting them compete with the copper rule under an h2.
   The hierarchy stays legible if the two ever appear on the same page, which
   they do on the Submissions page where the privacy text is appended. */
.pkp_structure_main h3 {
  font-size: 1.08rem;
  color: var(--aor-primary);
  border-bottom: 1px solid var(--aor-border);
  padding-bottom: 0.35rem;
  margin: 2rem 0 0.7rem;
}

.pkp_structure_main p {
  max-width: 68ch;
  margin-bottom: 1.1rem;
}

/* :not([class]) IS LOAD-BEARING — do not simplify to `.pkp_structure_main ul`.

   Some lists in the content area are prose and want a reading measure. Others
   are layout: .aor-tiles is a four-across flex row, .aor-steps is the numbered
   sequence. A bare `.pkp_structure_main ul` is (0,1,1), which outranks
   .aor-tiles at (0,1,0), so it clamped the tile row to 68ch — roughly 550px —
   and forced four tiles to wrap into a 2x2 block with dead space beside it.

   Excluding lists that carry a class keeps the measure on prose and leaves
   every layout component alone. */
.pkp_structure_main ul:not([class]),
.pkp_structure_main ol:not([class]) {
  max-width: 68ch;
  margin-bottom: 1.35rem;
}

.pkp_structure_main ul:not([class]) > li,
.pkp_structure_main ol:not([class]) > li {
  margin-bottom: 0.4rem;
  line-height: 1.65;
}

/* Bold lead-ins such as "Geographic focus." or "Appeals." are doing the job
   of sub-headings. Colouring them makes them scannable without asking you to
   restructure the content. */
.pkp_structure_main p > strong:first-child {
  color: var(--aor-primary);
}

/* GUARD — do not remove.

   The rule above paints bold lead-ins indigo. That is right on a white page
   and wrong on the indigo hero, where it would produce exactly the invisible
   text that left a blank gap on the homepage before. There is no <strong> in
   the hero today, so this changes nothing now. It exists so that adding one
   later cannot silently reintroduce the bug.

   Classes doubled to (0,3,2) so it wins wherever it sits in the file. */
.aor-hero.aor-hero p > strong:first-child {
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.pkp_structure_footer_wrapper {
  background: var(--aor-primary);
  border-top: 3px solid var(--aor-accent);
  margin-top: 3rem;
}

.pkp_structure_footer,
.pkp_footer_content {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pkp_footer_content a {
  color: #FFFFFF;
  text-decoration: underline;
}

.pkp_footer_content a:hover {
  color: var(--aor-accent);
}

/* The "Platform & workflow by OJS/PKP" mark. Keep it — attribution is a
   condition of the licence.

   PKP ships this artwork in near-black, which is illegible on a dark
   footer band and reads as a smudge. The filter converts it to pure white
   so it sits as a quiet white mark rather than a dirty patch. Dimming
   opacity alone makes a dark-on-dark logo worse, not subtler. */
.pkp_brand_footer {
  padding: 1.25rem 0 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 1.5rem;
}

.pkp_brand_footer img {
  max-height: 38px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.5;
}

.pkp_brand_footer a:hover img,
.pkp_brand_footer a:focus img {
  opacity: 0.85;
}

/* Trim the dead space under the footer text */
.pkp_structure_footer,
.pkp_footer_content {
  padding-bottom: 1rem;
}

/* GUARD — everything in the footer band stays white, whatever else matches.
   The footer sits on indigo, so any rule that sets a dark colour on text in
   here makes it disappear rather than merely look wrong. */
.pkp_footer_content strong,
.pkp_footer_content b,
.pkp_footer_content p > strong:first-child {
  color: #FFFFFF;
  font-family: inherit;
  font-size: inherit;
}

/* Publisher mark in the footer. The logo's own background is #0E1F46,
   identical to the footer band, so it sits flush with no visible edge. */
.aor-footer-logo {
  margin: 0 0 1.25rem;
}

.aor-footer-logo img {
  display: block;
  max-width: 260px;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .aor-footer-logo img {
    max-width: 200px;
  }
}

/* --------------------------------------------------------------------------
   12. Accessibility helpers
   -------------------------------------------------------------------------- */

.cmp_skip_to_content a {
  background: var(--aor-accent);
  color: #FFFFFF;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
}

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .pkp_structure_sidebar {
    padding-left: 0;
    padding-top: 2rem;
  }
}

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

  .pkp_structure_main {
    padding: 1.25rem;
  }

  .pkp_site_name .is_text {
    font-size: 1.35rem;
  }

  .pkp_navigation_primary_wrapper {
    margin: 0;
    padding: 0;
  }

  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }
}

/* --------------------------------------------------------------------------
   14. Print — matters more than it looks. Readers print articles, and a
   default OJS print output wastes ink on navigation chrome.
   -------------------------------------------------------------------------- */

@media print {
  .pkp_structure_head,
  .pkp_structure_sidebar,
  .pkp_structure_footer_wrapper,
  .pkp_navigation_primary_wrapper,
  .cmp_breadcrumbs,
  .obj_galley_link {
    display: none !important;
  }

  body {
    background: #FFFFFF;
    font-size: 11pt;
  }

  .pkp_structure_main {
    border: none;
    padding: 0;
  }

  a {
    color: #000000;
    text-decoration: underline;
  }

  .aor-hero,
  .aor-cta-row,
  .aor-callout {
    display: none !important;
  }
}

/* ==========================================================================
   15. Homepage components

   These style the HTML blocks pasted into:
     Site    → Administration → Site Settings → Site Setup → About the site
     Journal → Settings → Website → Appearance → Setup → Additional Content

   All classes are prefixed aor- so they cannot collide with theme classes.
   ========================================================================== */

/* --- Hero band ----------------------------------------------------------- */

.aor-hero {
  background: var(--aor-primary);
  color: #FFFFFF;
  padding: 2.75rem 2.25rem;
  border-radius: 3px;
  border-left: 5px solid var(--aor-accent);
  margin-bottom: 2.5rem;
}

/* Doubling the class makes this (0,2,1). That beats .pkp_structure_main h2
   at (0,1,1) outright, and TIES .pkp_structure_main h2:first-of-type at
   (0,2,1) — a tie this wins only because section 15 comes after section 10c
   in this file. That ordering is load-bearing and is flagged in 10c too.

   Without the explicit border-bottom and padding-bottom below, the hero
   heading silently inherited the copper rule intended for About-page
   sections, putting a divider directly under "Peer-reviewed social science,
   from and about Africa". A rule you never declare is a rule you cannot
   override — the property has to be named here to be beaten.

   margin is restated for the same reason: :first-of-type was adding 1.75rem
   above the heading and pushing it away from the kicker. */
.aor-hero.aor-hero h2 {
  color: #FFFFFF;
  font-family: var(--aor-serif);
  font-size: 1.9rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
  border-bottom: none;
  padding-bottom: 0;
}

.aor-hero .aor-kicker {
  display: block;
  font-family: var(--aor-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aor-accent);
  margin-bottom: 0.9rem;
}

.aor-hero p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.08rem;
  line-height: 1.7;
  max-width: 46em;
  margin: 0 0 1rem;
}

.aor-hero p:last-child {
  margin-bottom: 0;
}

/* --- Call-to-action buttons ---------------------------------------------- */

.aor-cta-row {
  margin-top: 1.75rem;
}

.aor-cta {
  display: inline-block;
  background: var(--aor-accent);
  color: #FFFFFF;
  font-family: var(--aor-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.75rem 1.6rem;
  border-radius: 3px;
  margin: 0 0.6rem 0.6rem 0;
  border: 2px solid var(--aor-accent);
}

.aor-cta:hover,
.aor-cta:focus {
  background: var(--aor-accent-dark);
  border-color: var(--aor-accent-dark);
  color: #FFFFFF;
  text-decoration: none;
}

.aor-cta-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #FFFFFF;
}

.aor-cta-ghost:hover,
.aor-cta-ghost:focus {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--aor-primary);
}

/* --- Promise tiles ------------------------------------------------------- */

/* Grid rather than flex-wrap. With flex, a row that wraps leaves the last
   line stretched to different widths than the first, and the basis has to be
   guessed with calc(). auto-fit + minmax gives equal columns that fill the
   row exactly, equal heights for free, and drops to fewer columns on its own
   as the screen narrows — four across on a laptop, two on a tablet, one on a
   phone, with no breakpoint to maintain. */
.aor-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
}

/* Explicit column counts, not auto-fit.

   auto-fit sizes by CONTAINER width, and this content column is narrower than
   four 190px tracks plus gaps — so it settled on three and left the fourth
   tile alone on its own row. Lowering the minmax floor far enough to force
   four would also allow five or six tracks on a wide screen, which is wrong
   for a fixed set of four.

   There are exactly four tiles and there always will be, so state the counts:
   one column on a phone, two on a small tablet, four from tablet up. */
@media (min-width: 480px) {
  .aor-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .aor-tiles {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Four across is tighter than two, so give the text back some room. */
  .aor-tiles li {
    padding: 1rem 0.9rem;
  }
}

.aor-tiles li {
  background: var(--aor-surface);
  border: 1px solid var(--aor-border);
  border-top: 3px solid var(--aor-accent);
  border-radius: 3px;
  padding: 1.25rem;
}

.aor-tiles strong {
  display: block;
  font-family: var(--aor-serif);
  font-size: 1.05rem;
  color: var(--aor-primary);
  margin-bottom: 0.35rem;
}

.aor-tiles span {
  display: block;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--aor-muted);
}

/* --- Callout box --------------------------------------------------------- */

.aor-callout {
  background: var(--aor-surface);
  border: 1px solid var(--aor-border);
  border-left: 4px solid var(--aor-accent);
  border-radius: 3px;
  padding: 1.5rem 1.75rem;
  margin: 0 0 2.5rem;
}

/* Same leak as the hero heading: .pkp_structure_main h3 in section 10c adds a
   bone hairline, and this rule never named border-bottom so it inherited one.
   The callout already has a border round it and does not need a divider
   inside as well. */
.aor-callout.aor-callout h3 {
  margin-top: 0;
  margin-bottom: 0.6rem;
  border-bottom: none;
  padding-bottom: 0;
}

.aor-callout p:last-child {
  margin-bottom: 0;
}

/* --- Section heading with copper rule ------------------------------------ */

/* Qualified with h3 so it matches the (0,1,1) weight of the policy-page
   heading rule in section 10c and wins on source order. A bare
   .aor-section-title would be (0,1,0) and lose. */
h3.aor-section-title {
  font-family: var(--aor-serif);
  font-size: 1.35rem;
  color: var(--aor-primary);
  border-bottom: 2px solid var(--aor-accent);
  padding-bottom: 0.5rem;
  margin: 2.5rem 0 1.25rem;
}

/* --- Two and three column text ------------------------------------------- */

.aor-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
}

.aor-cols > div {
  flex: 1 1 260px;
}

.aor-cols h4 {
  font-family: var(--aor-serif);
  font-size: 1.05rem;
  color: var(--aor-primary);
  margin: 0 0 0.5rem;
}

.aor-cols ul {
  margin: 0;
  padding-left: 1.1rem;
}

.aor-cols li {
  font-size: 0.94rem;
  line-height: 1.6;
  margin-bottom: 0.3rem;
}

/* --- Numbered steps ------------------------------------------------------ */

.aor-steps {
  counter-reset: aor-step;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

.aor-steps li {
  counter-increment: aor-step;
  position: relative;
  padding-left: 3.25rem;
  margin-bottom: 1.25rem;
  min-height: 2.25rem;
}

.aor-steps li::before {
  content: counter(aor-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  line-height: 2.25rem;
  text-align: center;
  background: var(--aor-primary);
  color: #FFFFFF;
  font-family: var(--aor-serif);
  font-size: 1.05rem;
  border-radius: 50%;
}

.aor-steps strong {
  display: block;
  color: var(--aor-primary);
  margin-bottom: 0.15rem;
}

/* --- Fine print ---------------------------------------------------------- */

.aor-fineprint {
  font-size: 0.88rem;
  color: var(--aor-muted);
  border-top: 1px solid var(--aor-border);
  padding-top: 1.25rem;
  margin-top: 2.5rem;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 767px) {
  .aor-hero {
    padding: 1.75rem 1.25rem;
  }

  /* Doubled to match the (0,3,1) base rule above, otherwise this loses and
     the heading stays at desktop size on a phone. */
  .aor-hero.aor-hero h2 {
    font-size: 1.45rem;
  }

  .aor-hero p {
    font-size: 1rem;
  }

  /* Keep both calls to action on one row on a phone. Full-width stacked
     buttons push the tiles below the fold and make the second option look
     like an afterthought rather than an alternative.

     flex: 1 1 0 with a zero basis divides the row into two equal halves
     regardless of label length, so the buttons match width. Labels are free
     to wrap inside; flex stretches both to the taller one, so they stay
     level either way. */
  .aor-cta-row {
    display: flex;
    gap: 0.6rem;
  }

  .aor-cta {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    padding: 0.7rem 0.5rem;
    font-size: 0.85rem;
    line-height: 1.3;
  }

  /* The tile grid needs no mobile rule now — minmax(190px, 1fr) collapses to
     a single column on its own once the content area drops below ~400px. */

  .aor-cols {
    gap: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   16. Homepage block order

   indexJournal.tpl hard-codes the sequence on the journal index page:

     highlights → homepage image → journal description → announcements
     → current issue → Additional Content

   The whole marketing block (hero, tiles, call for papers, scope, how to
   submit) lives in Additional Content, so it sits BELOW the table of
   contents as soon as an issue is published. There is no setting for this;
   it is the template.

   .page_index_journal is the direct parent of both sections, so making it a
   flex column and giving the marketing block a negative order moves it above
   the issue without touching any content.

   ACCESSIBILITY NOTE. Flexbox order changes the visual order only. Screen
   readers and keyboard tabbing still follow the document order, so a
   keyboard user reaches the article list before the hero. The mismatch is
   mild here because the hero holds two links, but it is real. Remove this
   block to go back to the template order.

   TO REVERT: delete this section. Nothing else depends on it.
   -------------------------------------------------------------------------- */

.page_index_journal {
  display: flex;
  flex-direction: column;
}

.page_index_journal > .additional_content {
  order: -1;
}

/* The current issue section gets a little air once it sits below the hero. */
.page_index_journal > .current_issue {
  margin-top: 0.5rem;
}