/* Graxynet JNSPS Green v2.1.15
   Main-column partitioning and final view formatting */

:root {
  --rans-panel-bg: #ffffff;
  --rans-page-soft: #f6faf7;
  --rans-line: #dce9e0;
  --rans-green: #198754;
  --rans-green-dark: #0f5132;
}

/* ==============================================================
   1. DESKTOP PAGE PARTITION: MAIN + SIDEBAR
   ============================================================== */
@media (min-width: 992px) {
  html body .pkp_structure_content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(290px, 22vw, 340px) !important;
    gap: 22px !important;
    align-items: start !important;
    width: calc(100vw - 28px) !important;
    max-width: 1700px !important;
    margin: 0 auto 24px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html body .pkp_structure_content > .pkp_structure_main {
    grid-column: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  html body .pkp_structure_content > .pkp_structure_sidebar {
    grid-column: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  html body .pkp_structure_content > .pkp_structure_main:first-child:last-child {
    grid-column: 1 / -1 !important;
  }
}

/* Remove any remaining Manuscript-theme vertical rules. */
html body .pkp_structure_sidebar,
html body .pkp_structure_main {
  border-left: 0 !important;
  border-right: 0 !important;
}

html body .pkp_structure_sidebar::before,
html body .pkp_structure_sidebar:before,
html body .pkp_structure_main::before,
html body .pkp_structure_main:before,
html body .pkp_structure_main::after,
html body .pkp_structure_main:after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* ==============================================================
   2. LEFT-HAND SIDE: CLEAR VISUAL SECTIONS
   ============================================================== */
html body .page_index_journal,
html body .page_issue,
html body .page_issue_archive {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Soft canvas for the primary journal homepage. */
html body .page_index_journal {
  padding: 18px !important;
  background: var(--rans-page-soft) !important;
  border: 1px solid #e6efe8 !important;
  border-radius: 18px !important;
}

/* Treat the major homepage components as independent panels. */
html body .page_index_journal > .homepage_image,
html body .page_index_journal > .additional_content,
html body .page_index_journal > .rans-announcements-section,
html body .page_index_journal > .current_issue {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 0 22px !important;
  box-sizing: border-box !important;
}

html body .page_index_journal > .additional_content,
html body .page_index_journal > .rans-announcements-section,
html body .page_index_journal > .current_issue {
  background: var(--rans-panel-bg) !important;
  border: 1px solid var(--rans-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 7px 20px rgba(15,81,50,.055) !important;
}

/* Avoid double frames around the user's custom tabbed homepage content. */
html body .page_index_journal > .additional_content {
  padding: 0 !important;
  overflow: hidden !important;
}

html body .page_index_journal > .additional_content .rans-home-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

html body .page_index_journal > .additional_content .rans-tabs-wrapper {
  margin-bottom: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Announcements panel spacing. */
html body .page_index_journal > .rans-announcements-section {
  padding: 24px !important;
}

/* Current issue gets its own strong journal panel. */
html body .page_index_journal > .current_issue {
  padding: 26px !important;
  overflow: hidden !important;
}

html body .page_index_journal .current_issue > h2,
html body .page_issue > h1,
html body .page_issue .page_title {
  color: var(--rans-green-dark) !important;
}

html body .page_index_journal .current_issue > h2 {
  display: inline-block !important;
  margin: 0 0 12px !important;
  padding: 0 0 9px !important;
  border-bottom: 3px solid var(--rans-green) !important;
  background: transparent !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
}

html body .page_index_journal .current_issue_title {
  margin: 8px 0 18px !important;
  color: #24342a !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

/* ==============================================================
   3. ISSUE / ARTICLE VIEW FORMATTING
   ============================================================== */
html body .obj_issue_toc,
html body .obj_issue_toc > .sections,
html body .obj_issue_toc .section,
html body .current_issue .obj_issue_toc,
html body .page_issue .obj_issue_toc {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

html body .page_issue .obj_issue_toc {
  padding: 22px !important;
  background: var(--rans-page-soft) !important;
  border: 1px solid #e6efe8 !important;
  border-radius: 18px !important;
}

html body .page_issue .section,
html body .current_issue .section {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

html body .page_issue .section > h2,
html body .current_issue .section > h2,
html body .page_index_journal .section > h2 {
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 12px 16px !important;
  border: 1px solid #dce9e0 !important;
  border-left: 5px solid var(--rans-green) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 12px rgba(15,81,50,.045) !important;
  color: var(--rans-green-dark) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  box-sizing: border-box !important;
}

/* Reliable two-card grid in the left column. */
html body .cmp_article_list,
html body ul.cmp_article_list,
html body .obj_issue_toc .section .articles,
html body .section .articles,
html body .current_issue .articles,
html body .page_issue .articles {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  box-sizing: border-box !important;
}

html body .cmp_article_list > li,
html body .obj_issue_toc .section .articles > li,
html body .section .articles > li,
html body .current_issue .articles > li,
html body .page_issue .articles > li {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .obj_article_summary {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Keep card body proportions stable at full-width desktop sizes. */
@media (min-width: 1200px) {
  html body .obj_article_summary > .thumbnail {
    height: 180px !important;
    min-height: 180px !important;
    padding: 24px 22px 16px !important;
  }

  html body .obj_article_summary > .thumbnail img {
    height: 135px !important;
    max-height: 135px !important;
    max-width: 88% !important;
  }

  html body .obj_article_summary .title,
  html body .obj_article_summary .title > a {
    font-size: 18px !important;
    line-height: 1.36 !important;
  }
}

/* ==============================================================
   4. SIDEBAR AS A DISTINCT SECONDARY COLUMN
   ============================================================== */
html body .pkp_structure_sidebar {
  background: transparent !important;
}

html body .pkp_structure_sidebar .pkp_block {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 18px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #e2ece5 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

html body .pkp_structure_sidebar .pkp_block .title,
html body .pkp_structure_sidebar .pkp_block h2.title,
html body .pkp_structure_sidebar .pkp_block h3.title {
  margin: 0 !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
}

html body .pkp_structure_sidebar .pkp_block .content {
  padding: 12px 14px !important;
  box-sizing: border-box !important;
}

/* Let advertisement image blocks retain their natural full width. */
html body .pkp_structure_sidebar .pkp_block img {
  max-width: 100% !important;
  height: auto !important;
}

/* ==============================================================
   5. RESPONSIVE COLLAPSE
   ============================================================== */
@media (max-width: 991px) {
  html body .pkp_structure_content {
    display: block !important;
    width: calc(100vw - 14px) !important;
    max-width: none !important;
    margin: 0 auto 14px !important;
    padding: 0 !important;
  }

  html body .pkp_structure_content > .pkp_structure_main,
  html body .pkp_structure_content > .pkp_structure_sidebar {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .pkp_structure_sidebar {
    margin-top: 18px !important;
  }

  html body .page_index_journal {
    padding: 12px !important;
    border-radius: 14px !important;
  }

  html body .page_index_journal > .rans-announcements-section,
  html body .page_index_journal > .current_issue,
  html body .page_issue .obj_issue_toc {
    padding: 18px !important;
  }

  html body .cmp_article_list,
  html body ul.cmp_article_list,
  html body .obj_issue_toc .section .articles,
  html body .section .articles,
  html body .current_issue .articles,
  html body .page_issue .articles {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

@media (max-width: 767px) {
  html body .pkp_structure_content {
    width: calc(100vw - 8px) !important;
  }

  html body .page_index_journal {
    padding: 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
  }

  html body .page_index_journal > .additional_content,
  html body .page_index_journal > .rans-announcements-section,
  html body .page_index_journal > .current_issue,
  html body .page_issue .obj_issue_toc {
    border-radius: 12px !important;
  }

  html body .page_index_journal > .rans-announcements-section,
  html body .page_index_journal > .current_issue,
  html body .page_issue .obj_issue_toc {
    padding: 14px !important;
  }

  html body .page_issue .section > h2,
  html body .current_issue .section > h2,
  html body .page_index_journal .section > h2 {
    padding: 10px 12px !important;
    font-size: 17px !important;
  }

  /* Utility/header line-up */
  html body .pkp_structure_head .jampl-utility-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px 12px !important;
    padding: 9px 12px !important;
  }

  html body .pkp_structure_head .jampl-utility-links {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
    justify-content: flex-start !important;
  }

  html body .pkp_structure_head .jampl-utility-user {
    flex: 0 0 auto !important;
    position: static !important;
    margin: 0 !important;
  }

  html body .pkp_navigation_user,
  html body .pkp_navigation_user_wrapper ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .pkp_navigation_user li::before,
  html body .pkp_navigation_user_wrapper li::before {
    content: none !important;
    display: none !important;
  }

  html body .pkp_structure_head .pkp_site_name_wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 9px !important;
    min-height: 0 !important;
    padding: 14px 12px !important;
  }

  html body .pkp_structure_head .pkp_site_name {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body .pkp_structure_head .pkp_site_name img {
    width: auto !important;
    height: auto !important;
    max-width: min(86vw, 420px) !important;
    max-height: 68px !important;
    object-fit: contain !important;
  }

  html body .pkp_structure_head .jampl-issn {
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  html body .pkp_structure_head .pkp_navigation_primary_row,
  html body .pkp_navigation_primary_wrapper {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body #navigationPrimary {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    min-width: 100% !important;
    white-space: nowrap !important;
  }

  html body #navigationPrimary > li {
    flex: 0 0 auto !important;
  }

  html body #navigationPrimary > li > a,
  html body #navigationPrimary > li > a:visited {
    padding: 12px 13px !important;
    font-size: 12.5px !important;
  }
}

@media (max-width: 420px) {
  html body .pkp_structure_content {
    width: 100vw !important;
  }

  html body .page_index_journal > .rans-announcements-section,
  html body .page_index_journal > .current_issue,
  html body .page_issue .obj_issue_toc {
    padding: 12px !important;
  }

  html body .obj_article_summary .rans-card-actions {
    grid-template-columns: 1fr !important;
  }
}