/* Graxynet RANS Green v2.1.14
   Layout stabilization: full-width desktop, no sidebar divider,
   stable article grid, and responsive header/navigation. */

/* ==============================================================
   1. FULL-WIDTH CONTENT SHELL
   ============================================================== */
html body .pkp_structure_content {
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100vw - 24px) !important;
  max-width: 1680px !important;
  margin: 0 auto 20px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

@media (min-width: 992px) {
  html body .pkp_structure_content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 18px !important;
    align-items: start !important;
  }

  html body .pkp_structure_content > .pkp_structure_main {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  html body .pkp_structure_content > .pkp_structure_sidebar {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* When OJS renders a page without a sidebar, use all available width. */
  html body .pkp_structure_content > .pkp_structure_main:first-child:last-child {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* Remove the old Manuscript-theme sidebar separator completely. */
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;
  border: 0 !important;
}

/* ==============================================================
   2. ISSUE / ARTICLE AREA MUST USE THE MAIN COLUMN
   ============================================================== */
html body .page_index_journal,
html body .page_issue,
html body .current_issue,
html body .obj_issue_toc,
html body .obj_issue_toc > .sections,
html body .obj_issue_toc .sections,
html body .obj_issue_toc .section,
html body .page_issue .obj_issue_toc,
html body .page_index_journal .current_issue {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html body .page_index_journal .current_issue,
html body .page_issue .obj_issue_toc {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Stable article grid: two substantial cards, never a narrow center strip. */
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;
  gap: 22px !important;
  margin: 20px 0 32px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  list-style: none !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 {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

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

/* Keep cover/header/body proportions sensible at the larger width. */
@media (min-width: 1200px) {
  html body .obj_article_summary > .thumbnail {
    height: 190px !important;
    min-height: 190px !important;
    padding: 26px 24px 18px !important;
  }

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

  html body .obj_article_summary .title,
  html body .obj_article_summary .title > a {
    font-size: 19px !important;
  }
}

/* ==============================================================
   3. SIDEBAR — CLEAN, NO RULE, RESPONSIVE
   ============================================================== */
html body .pkp_structure_sidebar .pkp_block {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !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 {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ==============================================================
   4. HEADER + NAVIGATION RESPONSIVENESS
   ============================================================== */
html body .pkp_structure_head,
html body .pkp_structure_head .pkp_head_wrapper,
html body .pkp_structure_head .pkp_site_name_wrapper,
html body .pkp_structure_head .pkp_navigation_primary_row {
  box-sizing: border-box !important;
}

@media (max-width: 991px) {
  html body .pkp_structure_content {
    display: block !important;
    width: calc(100vw - 14px) !important;
    max-width: none !important;
    margin-bottom: 14px !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;
    float: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body .pkp_structure_sidebar {
    margin-top: 20px !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;
  }

  html body .page_index_journal .current_issue,
  html body .page_issue .obj_issue_toc {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 767px) {
  /* Top utility row */
  html body .pkp_structure_head .jampl-utility-inner {
    min-height: 0 !important;
    padding: 9px 12px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px 12px !important;
  }

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

  html body .pkp_structure_head .rans-publisher-toggle,
  html body .pkp_structure_head .jampl-utility-links > a,
  html body .pkp_structure_head .jampl-utility-links > a:visited {
    font-size: 13px !important;
    padding: 7px 0 !important;
  }

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

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

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

  /* Masthead */
  html body .pkp_structure_head .pkp_site_name_wrapper {
    min-height: 0 !important;
    padding: 16px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !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(82vw, 420px) !important;
    max-height: 70px !important;
    object-fit: contain !important;
  }

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

  /* Primary navigation stays usable instead of squeezing/overflowing. */
  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;
    margin: 0 !important;
    padding: 0 !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: 13px 14px !important;
    font-size: 12.5px !important;
  }

  /* Article cards */
  html body .obj_article_summary {
    border-radius: 14px !important;
  }

  html body .obj_article_summary > .thumbnail {
    height: 160px !important;
    min-height: 160px !important;
    padding: 22px 16px 14px !important;
  }

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

  html body .obj_article_summary .title,
  html body .obj_article_summary .title > a {
    font-size: 17px !important;
  }
}

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

  html body .page_index_journal .current_issue,
  html body .page_issue .obj_issue_toc {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

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