/* ============================================================================
   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;
  }
}
.pkp_site_name { visibility: hidden; }

@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 { 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;
}
.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 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;
}