/* ============================================================================
   ECTI-EEC Journal style sheet — paste this WHOLE file into:
   Website Settings > Appearance > Setup > "Journal style sheet"
   (after switching Theme to "Default Theme", Colour to #5B171E — see
   DEPLOYMENT-CHANGES.md section 1.1)

   This is the complete, current custom CSS. It's an overlay on top of
   Default Theme's own CSS, not a replacement for it — only rules that add
   to or override the stock theme are listed here.
   ============================================================================ */

/* ===== Sidebar wider, main column narrower to match =====
   Stock theme's own @sidebar-width is 380px; widened here to 400px
   (main column narrows to compensate at each breakpoint, using the
   theme's own container widths: 952px container at 992px+, 1160px
   container at 1200px+). Main stays flush-left, sidebar flush-right --
   unchanged, this only changes the split point between them. */
@media (min-width: 992px) {
  .pkp_structure_sidebar { width: 400px; }
  .pkp_structure_main { width: 552px; }
}
@media (min-width: 1200px) {
  .pkp_structure_main { width: 760px; }
}

/* ===== Main column and sidebar stretch to equal height =====
   Stock theme lays these two out with float, which never equalizes
   their height -- whichever column has less content just ends early,
   leaving the taller one visually unbalanced. Making their shared
   parent a flex container stretches both to match the taller one
   automatically (flex's default align-items:stretch): the shorter
   column keeps its real content unchanged and simply gains empty
   space at the bottom instead of ending early -- no cropping, no
   fabricated content, matches the taller side plainly. */
@media (min-width: 992px) {
  .pkp_structure_content.has_sidebar {
    display: flex;
    align-items: stretch;
  }
}

/* ===== "Quality Certified by TCI" badge (production only) =====
   This badge isn't a Custom Block -- it's injected directly into the
   sidebar by a plugin (image src is tinfo.php, a TCI-hosted badge
   generator), as a bare <a><img></a> sitting directly inside
   .pkp_structure_sidebar, not wrapped in any .pkp_block. There's no
   content field for it to edit, so it's given the card look purely via
   CSS instead, targeting it by its image's alt text. */
.pkp_structure_sidebar > a:has(img[alt="TCI Medal"]) {
  display: block;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  padding: 1.5rem;
  /* Horizontal margin matches .pkp_block's own horizontal padding exactly
     (same values, same breakpoint) -- this element sits directly in
     .pkp_structure_sidebar with no .pkp_block wrapper around it, so
     without this it's flush with the column edge while every sibling
     card is inset by that padding, making it visibly wider than them. */
  margin: 0 1.43rem 30px;
  text-align: center;
}
@media (min-width: 992px) {
  .pkp_structure_sidebar > a:has(img[alt="TCI Medal"]) {
    margin-left: 2.143rem;
    margin-right: 2.143rem;
  }
}

/* ===== Nav bar shows at tablet width instead of only 992px+ ===== */
@media (min-width: 700px) {
  .pkp_site_nav_menu { display: block; position: static; top: auto; padding: 0; }
  .pkp_site_nav_menu ul ul { padding-left: 0; }
  .pkp_site_nav_toggle { display: none; }
}

/* ===== Account-menu strip above the banner ===== */
.pkp_head_wrapper { position: relative; }
.pkp_structure_head {
  border-top: 1px solid #ddd;
  background-size: 100% auto !important;
  background-position-x: center !important;
  background-position-y: top !important;
}
@media (min-width: 700px) {
  .pkp_head_wrapper { padding-top: 33px !important; }
  .pkp_structure_head { background-position-y: 33px !important; }
}

.pkp_site_name_wrapper { height: 40px; }
@media (min-width: 700px) {
  .pkp_site_name_wrapper {
    width: 100%;
    aspect-ratio: 3600 / 373; /* update if the banner's own pixel size changes */
    height: auto;
    max-height: 450px;
  }
}
/* The banner is a CSS background-image (not an <img>), so it can never be
   clickable on its own. Reusing OJS's own site-name link instead -- same
   link, just kept invisible (text hidden via font-size:0, not
   visibility:hidden, since visibility:hidden also blocks clicks) and
   stretched to fill its box, which spans the full-width top strip of the
   banner where the journal title used to sit. Clicking that strip now goes
   to the homepage without reintroducing the overlapping text. */
.pkp_site_name {
  visibility: visible;
  height: 100%;
}
.pkp_site_name .is_text {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 0;
}

@media (min-width: 700px) {
  .pkp_navigation_user_wrapper {
    position: absolute;
    top: 0; left: 0; right: 0;
    transform: none;
    height: 33px;
    background: #5B171E;
    padding-left: 20px;
    padding-right: 20px;
    text-align: right;
    padding-top: 0;
    margin-top: 0;
    border-top: none;
    z-index: 1001;
  }
  .pkp_navigation_user {
    text-align: right;
    font-size: 0.93rem;
    padding-right: 0;
    line-height: 33px;
  }
  .pkp_navigation_user.pkp_navigation_user {
    width: auto;   /* frees it from the base theme's centered 1160px container */
    margin: 0;
    padding: 0;
    border: none;
  }
  .pkp_navigation_user a { padding-top: 0; padding-bottom: 0; line-height: 33px; }
}

/* ===== Nav bar hover: white underline only, no highlight ===== */
@media (min-width: 700px) {
  .pkp_navigation_primary > li > a { border-bottom: 2px solid transparent; color: #fff; }
  .pkp_navigation_primary > li > a:hover,
  .pkp_navigation_primary > li > a:focus {
    color: #fff; outline: 0; border-color: #fff; background: transparent;
    transition: border-color .15s ease;
  }
  .pkp_navigation_search_wrapper a { border-bottom: 2px solid transparent; color: #fff; }
  .pkp_navigation_search_wrapper a:hover,
  .pkp_navigation_search_wrapper a:focus {
    color: #fff; outline: 0; border-color: #fff; background: transparent; text-decoration: none;
  }

  /* THE root cause of the dropdown misalignment reported repeatedly this
     session: the stock theme's own ".pkp_nav_list li { position:relative }"
     rule (needed so the dropdown, which is position:absolute, anchors to
     ITS OWN <li> instead of some distant positioned ancestor) is gated
     behind the stock theme's 992px breakpoint on production. This
     overlay switches the nav bar to its horizontal desktop layout
     starting at 700px instead (see @media above) -- so between 700px and
     991px wide, the nav LOOKS like the desktop layout already, but the
     positioning anchor every dropdown depends on hasn't activated yet,
     and the dropdown box ends up positioned relative to the wrong
     ancestor entirely. Repeating it here at the same 700px breakpoint
     closes that gap.

     ">" (direct child), not a plain descendant selector -- this must
     match ONLY the top-level items (About the journal, Articles &
     Issues, etc.), not the nested <li> inside their dropdowns too. A
     descendant version briefly shipped here and, despite
     ".pkp_nav_list ul li { display:block }" elsewhere looking more
     specific on paper, the dropdown items ended up inline-block and
     centered (inheriting text-align:center from .pkp_navigation_primary)
     instead -- shrunk to their own text width and centered in the
     15em box rather than filling it. Direct-child sidesteps that fight
     entirely instead of relying on winning it. */
  .pkp_nav_list > li {
    position: relative;
    display: inline-block;
  }

  /* ===== Dropdown submenus (Articles & Issues, etc.) -- this block was missing
     entirely before, which is why submenus showed as a plain unstyled white
     box instead of the dark dropdown card ===== */
  .pkp_nav_list ul {
    position: absolute; top: 100%; left: -9999px; z-index: 1000; width: 15em;
    margin: 0; padding: 0 0 0 3px; background: #5B171E; border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  /* Background painted here too, not just on the <a> inside -- fractional
     (rem-based) pixel widths mean the browser can round the <li> and its
     <a> child's boxes a device-pixel apart, leaving a hairline gap where
     the white page background behind shows through as a thin vertical
     line. Matching backgrounds on both means that gap (if it renders at
     all) shows the same color on both sides, so it's invisible. */
  .pkp_nav_list ul li { display: block; background: #5B171E; }
  .pkp_nav_list ul a {
    display: block; padding-left: 0.357rem; border-left: 0.357rem solid transparent; color: #fff;
  }
  /* The hover accent bar (border-left, colored white below) used to sit
     flush against the dropdown box's own left edge with no gap, reading
     as a white sliver escaping the box instead of a contained accent bar
     like the other dropdowns. The 3px left padding added to the ul above
     insets every item (and this border) that same 3px in from the box's
     true edge, so the accent bar now renders as a highlight INSIDE the
     box, matching how it looks everywhere else, instead of touching the
     edge exactly. */
  .pkp_nav_list ul a:hover,
  .pkp_nav_list ul a:focus {
    outline: 0; background: rgba(255,255,255,0.12); border-left-color: #fff; color: #fff;
  }
  .pkp_nav_list ul li:first-child a { border-top-left-radius: 3px; border-top-right-radius: 3px; }
  .pkp_nav_list ul li:last-child a { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }
  .pkp_nav_list > li:hover ul { left: 0; }
  .pkp_nav_list [aria-haspopup]:after {
    position: relative; display: inline-block; content: ""; width: 0; height: 0;
    margin-left: 0.25em; border-top: 4px solid; border-right: 4px solid transparent;
    border-left: 4px solid transparent; vertical-align: middle; overflow: hidden;
  }
  .pkp_navigation_primary { text-align: center; }
  .pkp_navigation_primary > li > a {
    margin: 0.357rem 0.5em 0; padding: 0.357rem 0.5em calc(0.714rem - 2px);
  }
  /* ">" (direct child), not a descendant selector -- the original
     (descendant) version matched every <a> inside these <li>, including
     every item nested inside their dropdown <ul>, shifting the whole
     dropdown box's items left by the same -0.5em meant only for the
     top-level button. */
  .pkp_navigation_primary > li:first-child > a { margin-left: -0.5em; }
  .pkp_navigation_primary > li:last-child > a { margin-right: -0.5em; }
  /* Aligns the dropdown's left edge with the parent button's own box
     (was a fixed 1rem, which shifted every dropdown further right than
     the button that opens it). */
  .pkp_navigation_primary > li:hover ul { left: 0; }
  /* The very first button ("About the journal") has its OWN -0.5em
     margin-left above (so its text lines up with the page's left edge),
     which shifts the button 0.5em to the left of its <li>'s own box --
     the dropdown's left:0 above aligns with the <li> box, not with
     where the button's text actually renders, leaving the dropdown
     0.5em short of the button's true left edge. Shifting the dropdown
     left by that same amount, only for this one item, closes that gap. */
  .pkp_navigation_primary > li:first-child:hover ul { left: -0.5em; }
  /* margin-left reverted back to 0 per request -- back to the shared
     base padding-left (0.357rem, from ".pkp_nav_list ul a" below) with
     no extra nudge. */
  .pkp_navigation_primary > li:first-child ul a { margin-left: 0; padding-left: 0.357rem; }
  /* Left-aligned (overrides the centered text inherited from
     .pkp_navigation_primary). Justify was tried for the multi-line items
     but looked bad (over-stretched spacing on short wrapped lines), so
     plain left-align for all of them instead. */
  .pkp_nav_list ul a { text-align: left; }
  .pkp_navigation_primary ul a { padding-top: 0.714rem; padding-bottom: 0.714rem; }
  .pkp_navigation_primary [aria-haspopup]:hover { border-color: transparent; }
  /* Force the submenu hover state to the theme's own maroon look --
     stock Bootstrap-compatibility CSS still shipped with the theme
     applies a blue (#006798) hover/focus style to dropdown items that
     this overlay wasn't beating on production. */
  .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: rgba(255,255,255,0.15) !important;
    border-left-color: #fff !important;
    color: #fff !important;
  }
}

/* ===== Remove the base theme's decorative lines flanking the main column ===== */
.pkp_structure_main:before,
.pkp_structure_main:after { content: none; }

/* ===== Hide the "Home / Page Name" breadcrumb trail site-wide ===== */
.cmp_breadcrumbs { display: none; }

/* ===== Homepage: native Current Issue / About sections hidden; Announcements
   is NOT hidden -- styled to match the hand-composed cards instead, so it
   shows the real live announcements rather than a hand-typed copy that
   needs updating in two places whenever a new one is posted. ===== */
.pkp_page_index .current_issue,
.pkp_page_index .homepage_about,
.pkp_page_index .cmp_announcements { display: none; }

/* Flex column so Announcements (native DOM order: before Additional
   Content) can be moved to render after it instead, via order below. */
.pkp_page_index .page_index_journal { display: flex; flex-direction: column; }
.pkp_page_index .additional_content { order: 1; }

/* Native Announcements section, styled to match the hand-written cards
   around it. Moved to the end (after Additional Content's own cards)
   via the order property above/below -- native DOM order puts this
   section BEFORE Additional Content, so without this it would render
   first, not last. */
.pkp_page_index .cmp_announcements {
  order: 2;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  padding: 1.5rem;
  margin-bottom: 30px;
  border-top: none;
}
.pkp_page_index .cmp_announcements h2 {
  /* An earlier round made this heading screen-reader-only
     (position:absolute; left:-9999px) back when this section was hidden
     and unstyled -- it needs to come back into normal flow now that it's
     a visible card, not just get new colors while staying off-screen. */
  position: static !important;
  left: auto !important;
  color: #721D25;
  font-size: 1.75rem;
  margin-top: 0;
  margin-bottom: 0.75rem;
}
.pkp_page_index .cmp_announcements .obj_announcement_summary { padding: 0; }
.pkp_page_index .cmp_announcements .obj_announcement_summary h3 {
  font-size: 1.1rem;
  margin: 0 0 0.25rem;
}
.pkp_page_index .cmp_announcements .obj_announcement_summary h3 a {
  color: rgba(0,0,0,0.87);
  text-decoration: none;
}
.pkp_page_index .cmp_announcements .date {
  color: rgba(0,0,0,0.54);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}
.pkp_page_index .cmp_announcements .summary {
  font-size: 1rem;
  line-height: 1.6;
}
.pkp_page_index .cmp_announcements .read_more {
  color: #721D25;
  font-weight: 700;
  text-decoration: none;
}

/* Cards in "Additional content" (and .homepage_image, if used) extend past
   .pkp_structure_main's own padding so they line up flush with the nav
   bar's left/right edges instead of sitting inset an extra 20-30px. */
.pkp_page_index .homepage_image,
.pkp_page_index .additional_content {
  margin-left: -0.714rem;
  margin-right: -0.714rem;
}
@media (min-width: 480px) {
  .pkp_page_index .homepage_image,
  .pkp_page_index .additional_content { margin-left: -1.43rem; margin-right: -1.43rem; }
}
@media (min-width: 992px) {
  .pkp_page_index .homepage_image,
  .pkp_page_index .additional_content { margin-left: -2.143rem; margin-right: -2.143rem; }
}
.pkp_page_index .additional_content {
  /* Zero padding, not just no top padding: the old 30px top padding was
     meant to space this away from the native Announcements/Current
     Issue sections above it, which are hidden now -- keeping it just
     pushed the first card (About the Journal) 30px below the sidebar's
     first card (TCI badge), even though their outer columns start at
     the same height (confirmed live: both columns' own top edges match
     exactly, only the first-card offset differed). */
  padding: 0;
  /* Overriding, not just omitting: on production this stylesheet is an
     OVERLAY on top of the stock theme's own compiled CSS, not a
     replacement of it (unlike localhost, where the border-top was
     deleted directly from the theme's own LESS source, so there was
     nothing left to override). The stock theme's own border-top on this
     element is still there underneath and needs to be explicitly
     cancelled, not just left unmentioned. */
  border-top: none;
}
.pkp_page_index .additional_content > p:first-child { margin-top: 0; }
.pkp_page_index .additional_content > p:last-child { margin-bottom: 0; }

/* Every OTHER page (Editorial Team, Contact, any nav-menu page -- anything
   rendered inside a plain <div class="page">) gets the same edge-flush
   treatment as the homepage's Additional Content above. */
.page { margin-left: -0.714rem; margin-right: -0.714rem; }
@media (min-width: 480px) {
  .page { margin-left: -1.43rem; margin-right: -1.43rem; }
}
@media (min-width: 992px) {
  .page { margin-left: -2.143rem; margin-right: -2.143rem; }
}

/* ============================================================================
   Shared card typography -- every hand-written card uses class="card-content"
   (Home's 4 cards, Editorial Team's cards). Top-level heading uses the
   journal's accent red; nested lists get a different bullet marker per depth
   so a 3-level list (category > sub-field > person name) reads as a
   hierarchy without extra heading tags at every level.
   ============================================================================ */
.card-content h2 {
  color: #721D25;
  font-size: 1.75rem;
  margin-top: 0 !important; /* beats the base theme's own ~40px pre-heading gap */
  margin-bottom: 0.75rem;
}
.card-content h3 {
  color: rgba(0,0,0,0.87);
  font-size: 1.25rem;
  margin-top: 1rem !important;
  margin-bottom: 0.5rem;
}
.card-content ul {
  padding-left: 1.25rem;
  margin: 0.5rem 0;
  list-style-type: square;
  font-size: 1.15rem;
  font-weight: 700;
}
.card-content ul ul {
  margin-top: 0.25rem;
  list-style-type: disc;
  font-size: 1rem;
  font-weight: 400;
}
.card-content ul ul ul {
  list-style-type: '▸  ';
  font-size: 1rem; /* same size as level 2 -- marker shape alone signals the deeper level */
  font-weight: 400;
}
/* Explicit "this is a person/name entry" marker -- always the triangle
   bullet regardless of actual nesting depth. Needed because some branches
   skip the sub-field level and go straight from category to names, so
   depth-based styling alone can't tell that case apart from a sub-field. */
.card-content li.name {
  list-style-type: '▸  ' !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
}
/* Plain list modifier -- for ordinary item lists (e.g. Aims and Scope) that
   aren't a category/sub-field/name hierarchy, so they don't inherit the
   bold, oversized top-level style meant for that other pattern. Add
   class="list-plain" on the <ul>. */
.card-content ul.list-plain {
  list-style-type: disc;
  font-size: 1rem;
  font-weight: 400;
}
.card-content ol {
  padding-left: 1.25rem;
  margin: 0.5rem 0;
  font-size: 1rem;
  font-weight: 400;
}
.card-content li { margin-bottom: 0.35rem; line-height: 1.6; }
.card-content li::marker { color: #721D25; }
.card-content p { line-height: 1.6; font-size: 1rem; font-weight: 400; }

/* "Read more" collapsible section -- native <details>/<summary>, no
   JavaScript (survives HTMLPurifier on save). Flex column with the content
   at order:1 and the trigger at order:2 relocates the trigger BELOW the
   content once open -- the browser's own open/closed visibility rule is
   untouched, this only reorders items that are already visible. */
.card-content details {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}
.card-content details > summary { order: 2; }
.card-content details > ul,
.card-content details > p { order: 1; margin-bottom: 0.75rem; }
.card-content summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #721D25;
  font-weight: 700;
  font-size: 1rem;
  outline: none;
  width: fit-content;
}
.card-content summary::-webkit-details-marker { display: none; }
.card-content summary .label-less { display: none; }
/* Border-corner chevron instead of a Unicode arrow character -- glyphs sit
   on the text baseline, which lands at a different height per font, so it
   never lines up with the label text. This is centered by the flex
   container instead, independent of any font's metrics. */
.card-content summary .chevron {
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.card-content details[open] summary .label-more { display: none; }
.card-content details[open] summary .label-less { display: inline; }
.card-content details[open] summary .chevron { transform: rotate(-135deg); }

/* ============================================================================
   Contact page (native template -- markup isn't editable without Site
   Admin, so it's styled entirely via CSS to match the card look used
   everywhere else).
   ============================================================================ */
/* Grid layout instead of a single column, so Principal Contact and
   Support Contact can sit side by side in row 1 (grid-column below),
   with Address moved to row 2 spanning both columns. (First tried this
   with flex + calc()-based flex-basis: the math landed right at the edge
   of the container's width once the stock theme's own padding-right on
   .primary and the flex gap were both accounted for, so it wrapped one
   item early instead of fitting two per row. Grid's own column tracks
   don't have that rounding/gap interaction problem.) Grid rows default
   to equal-height content within the same row, so the two row-1 cards
   automatically match each other's height as well as width. */
.page_contact .contact_section { display: grid; grid-template-columns: 1fr 1fr; gap: 1.43rem; width: 100%; box-sizing: border-box; }
.page_contact .address,
.page_contact .contact {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  padding: 2.143rem;
}
/* Native markup order is Address, Principal, Support -- explicit grid
   placement overrides that visually without needing to touch the
   (uneditable) template. width:100% cancels the stock theme's own
   leftover "width:50%" from its old float-based layout -- that 50% now
   resolves against this grid CELL (already half the row) instead of the
   row itself, shrinking each card to a quarter of the row's width
   instead of filling its column. Grid's default stretch behavior only
   applies when no width is set at all, so an explicit width has to win
   it back. */
.page_contact .contact.primary { grid-column: 1; grid-row: 1; width: 100%; padding-right: 2.143rem; }
.page_contact .contact.support { grid-column: 2; grid-row: 1; width: 100%; }
.page_contact .address { grid-column: 1 / -1; grid-row: 2; }
.page_contact .contact h3 {
  color: #721D25;
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.page_contact .contact .name { font-weight: 700; }
/* Indent the detail lines (name/affiliation/phone/email) below each h3. */
.page_contact .contact .name,
.page_contact .contact .affiliation,
.page_contact .contact .phone,
.page_contact .contact .email {
  padding-left: 0.75rem;
}
/* All regular weight -- the :first-line bold-the-org-name idea only
   covered the first WRAPPED line, not the whole name (it runs onto a
   second line), and the Mailing Address field doesn't accept HTML tags
   to mark just the name (typed <strong> shows up literally, escaped),
   so there's no reliable way to bold only the name. Plain weight for the
   whole block instead of a half-bold result. */
.page_contact .address {
  font-weight: 400;
}

/* ============================================================================
   "Make a Submission" sidebar card -- native block, fixed markup (can't be
   edited without Site Admin), styled via CSS to match the TCI/CiteScore
   cards next to it.

   IMPORTANT: the background/shadow/radius are on .content, NOT on
   .pkp_block itself. The TCI/CiteScore cards' visible white card is an
   INNER div, inset from the sidebar column edge by the base theme's own
   .pkp_block padding (20px, or 30px at desktop width -- that padding is
   invisible chrome around their card). Painting the background directly on
   .pkp_block instead skips that inset entirely -- a background fills its
   own full border-box regardless of that box's own padding -- so the red
   card would render a full padding-width wider on each side than its
   siblings' actual visible edge. Putting it on .content instead makes it
   inset the same way the siblings' inner div is.

   Vertical padding is explicitly zeroed: the base theme's .pkp_block
   padding is @triple top/bottom too (not just left/right), and inheriting
   that stacks a second ~30px gap on top of the margin-bottom rhythm that
   already spaces every sidebar card apart, doubling the visual gap above
   and below this card. Horizontal-only padding here keeps the width fix
   above without that doubled vertical gap.
   ============================================================================ */
/* Hidden per request: its label ("Make a Submission") and link target
   (always about/submissions) both come from the plugin's own template and
   locale string -- neither is editable via Settings or overridable with
   CSS (CSS can't change an href, and this text isn't in any Content
   field). Replaced with a hand-written Custom Block instead (Settings >
   Website > Custom Blocks), which CAN have any text/link a Journal
   Manager wants, assigned to the same sidebar position. */
.pkp_block.block_make_submission {
  display: none;
}
.block_make_submission {
  margin: 0 0 2.143rem !important;
  padding: 0 1.43rem !important;
  text-align: center;
}
@media (min-width: 992px) {
  .block_make_submission { padding: 0 2.143rem !important; }
}
.block_make_submission .content {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  padding: 0.357rem; /* deliberately tight -- one short button, not a big empty card */
  margin: 0;
}
.block_make_submission a {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  background: #721D25 !important;
  border-color: #721D25 !important;
  color: #fff !important;
}
.block_make_submission a:hover,
.block_make_submission a:focus {
  background: #51151a !important; /* ~8% darker */
  border-color: #51151a !important;
  color: #fff !important;
}

/* ============================================================================
   Custom Page "floating card" -- covers every page created via Navigation
   Menu > "Create a custom page" (Aim and Scope, Reviewing Procedure,
   Publication Ethics, Publication Information, Plagiarism Policy, and any
   future custom page). OJS wraps ALL of them in the SAME generic
   <div class="page"> regardless of which one it is, so this one rule styles
   every custom page consistently without needing per-page CSS.
   ============================================================================ */
.pkp_structure_main .page {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  padding: 1.5rem;
  /* No margin-top: .pkp_structure_content's own padding-top (30px) already
     gives Main and Sidebar the same starting offset -- adding margin here
     on top of that pushed this card 30px below the sidebar's first card,
     same bug as the homepage's .additional_content had before that was
     zeroed out. */
}
@media (min-width: 992px) {
  .pkp_structure_main .page { padding: 2.143rem; }
}
.pkp_structure_main .page .page_title {
  color: #721D25;
  margin-top: 0;
}
/* Editorial Team and Contact already have their own inner cards (hand-
   written .card-content divs on Editorial Team; .address/.contact boxes
   styled elsewhere in this file on Contact) -- the generic outer card
   above was wrapping those in a second, redundant card. Keep the padding
   (still gives the title breathing room from the edges) but drop the
   outer background/shadow so only the inner cards read as cards. */
.pkp_structure_main .page.page_editorial_team,
.pkp_structure_main .page.page_contact {
  background: none;
  box-shadow: none;
  /* Also zero the outer padding, not just the background -- the inner
     cards (.card-content / .address / .contact) have no bleed-to-edge
     margin of their own, so as long as .page kept its own 2.143rem inset
     they rendered narrower than every other page's card (which reaches
     the nav bar's edges via .page's negative margins). Zeroing this makes
     the inner cards fill that same full-bleed width instead. The title
     gets its own padding below so it isn't left flush at the very edge. */
  padding: 0;
  /* Anchor point for the "Edit" link below, now that the page's own <h1>
     it used to sit beside is hidden. */
  position: relative;
}
/* The "Edit" link (pencil icon, editLink.tpl) used to sit inline right
   next to the <h1> -- with that heading now hidden, it was the only
   visible thing left in the flow at the top of the page, and being
   float:right (not absolutely positioned), the following card(s) still
   had to clear its full height, pushing the first card down by the
   link's own ~40px instead of lining up flush with the sidebar's first
   card like every other page. Taking it out of flow entirely (absolute,
   anchored to .page above) fixes both that push-down AND lets it sit
   inset from the edge instead of touching it exactly. */
.pkp_structure_main .page.page_editorial_team .cmp_edit_link,
.pkp_structure_main .page.page_contact .cmp_edit_link {
  position: absolute;
  top: 0;
  right: 1.5rem;
  float: none;
  margin: 0;
}
@media (min-width: 992px) {
  .pkp_structure_main .page.page_editorial_team .cmp_edit_link,
  .pkp_structure_main .page.page_contact .cmp_edit_link {
    right: 2.143rem;
  }
}
/* Editorial Team's and Contact's own <h1> title text removed per request
   -- the cards below make clear what each page is without repeating it
   as a heading. */
.pkp_structure_main .page.page_editorial_team > h1,
.pkp_structure_main .page.page_contact > h1 {
  display: none;
}
/* Announcements page title -- same no-class-<h1> situation as Editorial
   Team/Contact, but this page keeps the default outer card (no card-in-
   card issue here), so no padding override is needed. */
.pkp_structure_main .page.page_announcements > h1 {
  color: #721D25;
  font-size: 2rem;
  margin-top: 0;
  margin-bottom: 1rem;
}
/* Same "Edit" link treatment as Editorial Team/Contact -- taken out of
   flow (absolute) and inset from the edge, instead of the stock
   float:right that pushes the content below it down by the link's own
   height. */
.pkp_structure_main .page.page_announcements {
  position: relative;
}
.pkp_structure_main .page.page_announcements .cmp_edit_link {
  position: absolute;
  /* Correction: an absolutely positioned child's inset properties
     (top/right/etc.) resolve against the PADDING BOX of its containing
     block, whose outer edge sits at the border, NOT inset by the
     padding -- so top:0;right:0 actually landed flush with .page's outer
     edge here, same as if it had no padding at all, not lined up with
     where the padding places the heading text like the comment here used
     to (incorrectly) assume. Explicit values instead, matching the same
     inset used on Editorial Team/Contact. */
  top: 1.5rem;
  right: 1.5rem;
  float: none;
  margin: 0;
}
@media (min-width: 992px) {
  .pkp_structure_main .page.page_announcements .cmp_edit_link {
    top: 2.143rem;
    right: 2.143rem;
  }
}
/* The native announcement list (.cmp_announcements) picked up the disc
   bullet AND the 1.5rem left padding meant for hand-written content lists
   (see ".page ul, .page ol" below), since it's a <ul> inside .page too.
   Stock theme gives it no bullet at all (list-style:none) -- that
   1.5rem-left-only padding is also what broke the card's left/right
   symmetry (21px inset on the left, 0 on the right). Reset both, then add
   a custom triangle marker with just a small, deliberate gap before the
   title instead of relying on the browser's own marker box. */
.pkp_structure_main .page.page_announcements .cmp_announcements {
  list-style: none;
  padding-left: 0;
  /* Stock theme bleeds this list's negative margin out to the FULL column
     edge, then pads each <li> back in by the same amount -- meant for a
     plain (non-card) layout, where that trick makes the divider lines
     reach the column's outer edge. Inside our card that bleed lines the
     divider up with the card's own visual edge instead (text still looks
     fine because its inset happens to net out the same either way, but
     the border-bottom line has no such second inset to counteract it).
     Canceling both here so the only inset left is .page's own padding --
     same source for both the text AND the divider line, so they land at
     the same distance from the card's edge instead of the line reaching
     further out than the text does. */
  margin-left: 0;
  margin-right: 0;
}
.pkp_structure_main .page.page_announcements .cmp_announcements > li {
  padding-left: 0;
  padding-right: 0;
}
/* Triangle bullet removed per request. */
/* Calendar icon before the date -- theme red at ~30% opacity instead of
   the stock light gray. */
.pkp_structure_main .page.page_announcements .obj_announcement_summary .date:before {
  color: rgba(114, 29, 37, 0.3);
}

/* ============================================================================
   Issue view page (issue/view/xxx) -- Vol/No/Year table of contents
   ============================================================================ */
/* Issue title (e.g. "Vol. 24 No. 2 (2026): Regular Issue") -- no class on
   this <h1> (same situation as Editorial Team/Contact/Announcements), made
   bigger per request and theme red to match every other page title. */
.pkp_structure_main .page.page_issue > h1 {
  color: #721D25;
  font-size: 2rem;
  margin-top: 0;
  margin-bottom: 1rem;
}
/* The article list and each article's PDF/galley links are both native
   <ul> elements inside .page, so they picked up the disc bullet AND the
   1.5rem left padding meant for hand-written content lists (same bug
   fixed earlier for Submissions/Announcements). That stray 21px padding
   on .galleys_links is also why the PDF button sat to the right of the
   paper title/author instead of lining up flush with them. */
.pkp_structure_main .page.page_issue .cmp_article_list,
.pkp_structure_main .page.page_issue .galleys_links {
  list-style: none;
  padding-left: 0;
}
/* PDF button -- solid theme red with a slight shadow for a "raised" look,
   white bold text (the icon inherits the same white via `color`), and
   uppercase via text-transform (the visible "pdf" text comes from each
   galley's own Label field, set per-article in Production -- changing it
   for every existing article would be tedious, so this reads as "PDF"
   everywhere without touching that data). Hover switches to a dark matte
   instead of the stock theme's blue. */
.pkp_structure_main .page.page_issue .obj_galley_link.pdf {
  background: #721D25;
  border-color: #721D25;
  box-shadow: 0 2px 3px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.15);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
}
.pkp_structure_main .page.page_issue .obj_galley_link.pdf:hover,
.pkp_structure_main .page.page_issue .obj_galley_link.pdf:focus {
  background: #2b2b2b;
  border-color: #2b2b2b;
  color: #fff;
}
/* Extra breathing room between articles (roughly 1.5 lines beyond the
   generic .page li margin). Paper titles left at their original size
   (already bold by default). */
.pkp_structure_main .page.page_issue .cmp_article_list > li {
  margin-bottom: 2rem;
}
/* Section/category heading (e.g. "Electrical Power Systems") -- bigger
   and bold; stock theme renders it at plain body size (16px, weight 400),
   barely distinguishable from the article titles below it. */
.pkp_structure_main .page.page_issue .sections .section > h2 {
  font-size: 1.5rem;
  font-weight: 700;
}

.pkp_structure_main .page h2,
.pkp_structure_main .page h3 {
  color: #721D25;
}
.pkp_structure_main .page ul,
.pkp_structure_main .page ol {
  padding-left: 1.5rem;
}

/* ============================================================================
   All Issues page (issue/archive)
   ============================================================================ */
/* Page title "Archives" (or "Archives - Page N" on page 2+, a DIFFERENT
   locale string for the same heading) -> "All issues" on every page --
   this text is a system locale string, not stored in any Content field,
   so it can't be edited via Settings (would need Site Admin access to
   override the language file), and CSS can't parse the real page number
   out of that text to re-insert it either. Hiding the ORIGINAL text
   (font-size:0, not display:none, so the heading still reserves its
   layout height) and substituting fixed text via ::after instead -- same
   trick already used for the site banner's link label -- sidesteps that:
   it doesn't care what the hidden text says, so "All issues" shows
   consistently on every page, including page 2+, rather than only
   matching by coincidence on page 1. The Prev/Next buttons and the
   "X-Y of Z" count already convey which page you're on. Same size/color
   as Announcements' page title for consistency. */
.pkp_structure_main .page.page_issue_archive > h1 {
  font-size: 0;
  margin-top: 0;
  margin-bottom: 1rem;
}
.pkp_structure_main .page.page_issue_archive > h1::after {
  content: 'All issues';
  display: block;
  font-size: 2rem;
  color: #721D25;
}
/* Same bug as Submissions/Announcements/Issue view: this native <ul> got
   the disc bullet AND the padding-left meant for hand-written content
   lists, and its own negative-margin bleed (meant to reach the FULL
   column edge in a non-card layout) made the divider lines between
   issues touch the card's own edges instead of sitting inset like the
   text. Canceling all three leaves .page's own padding as the single,
   symmetric source of inset for both text and dividers -- same fix as
   Announcements. */
.pkp_structure_main .page.page_issue_archive .issues_archive {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
  margin-right: 0;
}
.pkp_structure_main .page.page_issue_archive .issues_archive > li {
  padding-left: 0;
  padding-right: 0;
}
/* Prev/Next pagination links -- same solid theme-red "button" recipe as
   the PDF galley button (raised shadow, white bold text, dark matte on
   hover) instead of the stock theme's plain blue text links. */
.pkp_structure_main .page.page_issue_archive .cmp_pagination a.prev,
.pkp_structure_main .page.page_issue_archive .cmp_pagination a.next {
  display: inline-block;
  padding: 0 1em;
  background: #721D25;
  border: 1px solid #721D25;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.15);
  color: #fff;
  font-weight: 700;
  line-height: 2rem;
  text-decoration: none;
}
.pkp_structure_main .page.page_issue_archive .cmp_pagination a.prev:hover,
.pkp_structure_main .page.page_issue_archive .cmp_pagination a.next:hover,
.pkp_structure_main .page.page_issue_archive .cmp_pagination a.prev:focus,
.pkp_structure_main .page.page_issue_archive .cmp_pagination a.next:focus {
  background: #2b2b2b;
  border-color: #2b2b2b;
  color: #fff;
}
/* Remove the stock arrow icons (long-arrow-left/right) -- the button
   styling above already makes these read as clickable buttons on their
   own. */
.pkp_structure_main .page.page_issue_archive .cmp_pagination a.prev:before,
.pkp_structure_main .page.page_issue_archive .cmp_pagination a.next:after {
  content: none;
}

/* ============================================================================
   Submissions page (about/submissions)
   ============================================================================ */
/* Page title "Submissions" -> "Submit Article" -- same locale-string
   situation as the Announcements/All Issues titles (can't be edited via
   Settings), same hide-original/substitute-via-::after trick. Sized and
   colored to match Announcements' page title. */
.pkp_structure_main .page.page_submissions > h1 {
  font-size: 0;
  margin-top: 0;
  margin-bottom: 1rem;
}
.pkp_structure_main .page.page_submissions > h1::after {
  content: 'Submit Article';
  display: block;
  font-size: 2rem;
  color: #721D25;
}
/* "Make a new submission or view your pending submissions" notice -- left
   accent bar was the stock theme's blue (@primary); switched to theme red. */
.pkp_structure_main .page.page_submissions .cmp_notification {
  border-left-color: #721D25;
}
/* Submission Preparation Checklist box -- rounded corners to match the
   card look used everywhere else, and the check-mark icon recolored from
   stock green to theme red. overflow:hidden clips the list items' own
   square corners to the box's new rounded ones.

   The stock theme leaves ul's own border-bottom:none (it relies on the
   LAST li's own border-bottom to close the box) -- combined with
   border-radius + overflow:hidden that left the rounded bottom corners
   with no border there at all, reading as a "cut off" edge. Giving ul its
   own full border (including bottom) fixes that; the last item's own
   border-bottom is then redundant and removed to avoid a doubled line.

   Divider lines between items also used to span the FULL box width,
   touching the box's own left/right edges -- replaced with a custom
   ::after line inset from both edges instead, same idea as the
   Announcements page's divider fix, and applied to both this list and
   the section-policy list next to it (same native structure). */
.pkp_structure_main .page.page_submissions .submission_checklist ul,
.pkp_structure_main .page.page_submissions .submission_sections ul {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #ddd;
}
.pkp_structure_main .page.page_submissions .submission_checklist li,
.pkp_structure_main .page.page_submissions .submission_sections li {
  border-bottom: none;
  position: relative;
}
.pkp_structure_main .page.page_submissions .submission_checklist li:not(:last-child)::after,
.pkp_structure_main .page.page_submissions .submission_sections li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 0;
  height: 1px;
  background: #ddd;
}
.pkp_structure_main .page.page_submissions .submission_checklist .fa {
  color: #721D25;
}
/* "Author Guidelines" section heading hidden per request -- the content
   itself still displays, same pattern as Editorial Team's title. */
.pkp_structure_main .page.page_submissions .author_guidelines > h2 {
  display: none;
}
/* Copyright Notice / Privacy Statement hidden here -- their text was
   copied to the Publication Information custom page instead (this
   section's fixed position in the native template can't be moved, only
   duplicated elsewhere and hidden here). */
.pkp_structure_main .page.page_submissions .copyright_notice,
.pkp_structure_main .page.page_submissions .privacy_statement {
  display: none;
}
.pkp_structure_main .page li {
  margin-bottom: 0.5rem;
}
.pkp_structure_main .page p:last-child {
  margin-bottom: 0;
}
.pkp_structure_main .page p,
.pkp_structure_main .page li {
  text-align: justify;
}
/* Bullet shape: disc (circle) by default. Add class="bullet-triangle" on
   a <ul> in the Content HTML for a triangle instead. Color applies to
   every shape either way, since it targets the marker, not the shape. */
.pkp_structure_main .page ul {
  list-style-type: disc;
}
.pkp_structure_main .page ul.bullet-triangle {
  list-style-type: '▸  ';
}
.pkp_structure_main .page li::marker {
  color: #721D25;
}
.pkp_structure_main .page ol li::marker {
  color: rgba(0,0,0,0.87);
}
/* Exception: OJS's own Submissions page (about/submissions) also renders
   inside class="page" -- but its Submission Preparation Checklist and
   Section policy lists use a check-mark icon (.fa-check) instead of a
   bullet, and the stock theme already sets list-style:none for them. The
   generic disc rule above was overriding that back to a visible bullet
   sitting next to the check mark. Restore none for just these lists. */
.pkp_structure_main .page .submission_checklist ul,
.pkp_structure_main .page .submission_sections ul {
  list-style: none;
}
.pkp_structure_main .page a {
  color: #721D25;
}
.pkp_structure_main .page a:hover,
.pkp_structure_main .page a:focus {
  color: #51151a;
}