/* ============================================================================
   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;
  }

  /* ===== 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; background: #5B171E; border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  .pkp_nav_list ul li { display: block; }
  .pkp_nav_list ul a {
    display: block; padding-left: 0.357rem; border-left: 0.357rem solid transparent; color: #fff;
  }
  .pkp_nav_list ul a:hover,
  .pkp_nav_list ul a:focus {
    outline: 0; background: rgba(255,255,255,0.12); border-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);
  }
  .pkp_navigation_primary > li:first-child a { margin-left: -0.5em; }
  .pkp_navigation_primary > li:last-child a { margin-right: -0.5em; }
  .pkp_navigation_primary > li:hover ul { left: 1rem; }
  .pkp_navigation_primary ul a { padding-top: 0.714rem; padding-bottom: 0.714rem; }
  .pkp_navigation_primary [aria-haspopup]:hover { border-color: transparent; }
  .pkp_navigation_primary .dropdown-menu a:focus,
  .pkp_navigation_primary .dropdown-menu a:hover { border-color: #fff; }
  /* 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).
   ============================================================================ */
.page_contact .contact_section { display: flex; flex-direction: column; gap: 1.43rem; }
.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;
}
.page_contact .contact h3 {
  color: #721D25;
  font-size: 1.1rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.page_contact .contact .name { font-weight: 700; }

/* ============================================================================
   "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.
   ============================================================================ */
.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;
}
/* These two pages' <h1> has no class (unlike Custom Pages' .page_title),
   so it wasn't picking up any of the card system's title styling. Made at
   least as large as the card-content h2 (1.75rem) inside them, and the
   same theme red, so the page title reads as the top of the hierarchy. */
.pkp_structure_main .page.page_editorial_team > h1,
.pkp_structure_main .page.page_contact > h1 {
  color: #721D25;
  font-size: 2rem;
  margin-top: 0;
  margin-bottom: 1rem;
}
.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;
}
.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;
}