/* Graxynet JNSPS Green v2.1.17
   Mobile responsiveness hardening: no overlapping text, clean auth/account menu,
   stacked masthead/ISSN, compact tabs, and single-column content on small screens. */

/* Site index should never display the JNSPS ISSNs. */
html body.rans-site-index .jampl-issn { display: none !important; }

@media (max-width: 767px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html body *,
  html body *::before,
  html body *::after {
    box-sizing: border-box !important;
  }

  /* Reset desktop viewport-breakout rules on phones. */
  html body .pkp_structure_head {
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  html body .pkp_structure_head .pkp_head_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* ---------- utility / publisher / account area ---------- */
  html body .pkp_structure_head .jampl-utility-bar {
    width: 100% !important;
    overflow: visible !important;
  }

  html body .pkp_structure_head .jampl-utility-inner {
    width: 100% !important;
    min-height: 0 !important;
    padding: 14px 14px 12px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: center !important;
    justify-items: center !important;
    overflow: visible !important;
  }

  html body .pkp_structure_head .jampl-utility-links {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px 24px !important;
    overflow: visible !important;
  }

  html body .pkp_structure_head .jampl-utility-links > a,
  html body .pkp_structure_head .rans-publisher-toggle {
    max-width: 100% !important;
    padding: 7px 0 !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  html body .pkp_structure_head .rans-publisher-dropdown {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(310px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
  }

  /* Only the top-level auth list is flex. Nested profile menu remains a dropdown. */
  html body .pkp_structure_head .jampl-utility-user,
  html body .pkp_structure_head .pkp_navigation_user_wrapper.jampl-utility-user {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body .pkp_structure_head .jampl-utility-user > .pkp_navigation_user,
  html body .pkp_structure_head .jampl-utility-user > ul,
  html body .pkp_structure_head .pkp_navigation_user_wrapper.jampl-utility-user > .pkp_navigation_user,
  html body .pkp_structure_head .pkp_navigation_user_wrapper.jampl-utility-user > ul {
    width: auto !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  html body .pkp_structure_head .jampl-utility-user > .pkp_navigation_user > li,
  html body .pkp_structure_head .jampl-utility-user > ul > li {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  html body .pkp_structure_head .jampl-utility-user > .pkp_navigation_user > li::before,
  html body .pkp_structure_head .jampl-utility-user > ul > li::before,
  html body .pkp_structure_head .jampl-utility-user li::marker {
    content: none !important;
    display: none !important;
  }

  html body .pkp_structure_head .jampl-utility-user > .pkp_navigation_user > li > a,
  html body .pkp_structure_head .jampl-utility-user > ul > li > a,
  html body .pkp_structure_head .jampl-utility-user > .pkp_navigation_user > li > button {
    min-width: 104px !important;
    max-width: min(44vw, 180px) !important;
    min-height: 42px !important;
    padding: 9px 15px !important;
    border: 1px solid #c9ddd0 !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    color: #0f5132 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    box-shadow: 0 3px 10px rgba(15,81,50,.10) !important;
  }

  /* Logged-in profile dropdown: hidden until explicitly opened/focused. */
  html body .pkp_structure_head .jampl-utility-user .pkp_navigation_user > li.profile > ul,
  html body .pkp_structure_head .jampl-utility-user .pkp_navigation_user > li[aria-haspopup] > ul,
  html body .pkp_structure_head .jampl-utility-user li.rans-account-has-menu > ul {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(260px, calc(100vw - 28px)) !important;
    min-width: 210px !important;
    max-width: calc(100vw - 28px) !important;
    margin: 0 !important;
    padding: 8px !important;
    flex-direction: column !important;
    gap: 4px !important;
    background: #ffffff !important;
    border: 1px solid #d7e8dc !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 36px rgba(15,81,50,.18) !important;
    z-index: 10050 !important;
  }

  html body .pkp_structure_head .jampl-utility-user .pkp_navigation_user > li.profile:focus-within > ul,
  html body .pkp_structure_head .jampl-utility-user .pkp_navigation_user > li.profile:hover > ul,
  html body .pkp_structure_head .jampl-utility-user li.rans-account-has-menu.rans-account-open > ul {
    display: flex !important;
  }

  html body .pkp_structure_head .jampl-utility-user .pkp_navigation_user > li.profile > ul a,
  html body .pkp_structure_head .jampl-utility-user li.rans-account-has-menu > ul a {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 40px !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #0f5132 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  /* ---------- masthead ---------- */
  html body .pkp_structure_head .pkp_site_name_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 14px 12px 12px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
    text-align: center !important;
  }

  html body .pkp_structure_head .pkp_site_name {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
    text-align: center !important;
  }

  html body .pkp_structure_head .pkp_site_name .is_img,
  html body .pkp_structure_head .pkp_site_name .is_text {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .pkp_structure_head .pkp_site_name img,
  html body .pkp_structure_head .pkp_site_name .is_img img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(76vw, 320px) !important;
    max-height: 70px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  html body .pkp_structure_head .pkp_site_name .is_text,
  html body .pkp_structure_head .pkp_site_name .is_text a,
  html body .pkp_structure_head .pkp_site_name > a:not(.is_img) {
    max-width: 94vw !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: .2px !important;
    text-align: center !important;
    text-transform: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  html body .pkp_structure_head .jampl-issn {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: calc(100vw - 30px) !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2px 12px !important;
    border-radius: 8px !important;
    background: rgba(0,0,0,.12) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }

  html body .pkp_structure_head .jampl-issn .rans-issn-line {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  /* ---------- primary navigation ---------- */
  html body .pkp_structure_head .pkp_navigation_primary_row,
  html body .pkp_structure_head .pkp_navigation_primary_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  html body .pkp_structure_head .pkp_navigation_primary_row::-webkit-scrollbar,
  html body .pkp_structure_head .pkp_navigation_primary_wrapper::-webkit-scrollbar {
    display: none !important;
  }

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

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

  html body #navigationPrimary > li > a {
    padding: 13px 14px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  html body .pkp_search_desktop,
  html body .pkp_structure_head .pkp_search_desktop {
    display: none !important;
  }

  /* ---------- overall page layout ---------- */
  html body .pkp_structure_content,
  html body .pkp_structure_main,
  html body .pkp_structure_sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body .pkp_structure_content {
    display: block !important;
    padding: 0 6px !important;
    overflow: visible !important;
  }

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

  /* ---------- homepage tabs / about ---------- */
  html body .rans-tabs-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 24px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  html body .rans-tabs-wrapper .nav-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    padding: 8px !important;
  }

  html body .rans-tabs-wrapper .nav-tabs .nav-link {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 9px 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  html body .rans-tab-content {
    width: 100% !important;
    padding: 18px 12px !important;
    overflow: hidden !important;
  }

  html body .rans-about-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    width: 100% !important;
  }

  html body .rans-cover-card {
    width: 100% !important;
    max-width: 310px !important;
    margin: 0 auto !important;
    padding: 14px !important;
  }

  html body .rans-cover-card img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 420px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  html body .rans-about-copy,
  html body .rans-about-copy h1,
  html body .rans-about-copy h2,
  html body .rans-about-copy h3,
  html body .rans-feature-list li,
  html body .rans-faq-item,
  html body .rans-submission-box {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  /* ---------- all journals hero ---------- */
  html body .rans-all-journals,
  html body .rans-journals-intro,
  html body .rans-page-more {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body .rans-journals-intro {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 24px 18px !important;
    border-radius: 16px !important;
  }

  html body .rans-journals-intro h1 {
    font-size: clamp(30px, 9vw, 42px) !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere !important;
  }

  html body .rans-journals-intro p {
    font-size: 16px !important;
    line-height: 1.65 !important;
    overflow-wrap: anywhere !important;
  }

  html body .rans-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  html body .rans-hero-btn {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  /* ---------- article cards ---------- */
  html body .obj_issue_toc .cmp_article_list.articles,
  html body .current_issue .cmp_article_list.articles,
  html body .page_issue .cmp_article_list.articles,
  html body .rans-force-article-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body .obj_article_summary,
  html body .rans-article-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html body .obj_article_summary .title,
  html body .obj_article_summary .title a,
  html body .rans-article-card .title,
  html body .rans-article-card .authors,
  html body .rans-article-card .rans-abstract-preview,
  html body .rans-article-card .doi,
  html body .rans-article-card .pages {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  html body .obj_article_summary img,
  html body .rans-article-card img {
    max-width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 390px) {
  html body .pkp_structure_head .jampl-utility-links {
    gap: 6px 18px !important;
  }

  html body .pkp_structure_head .jampl-utility-user > .pkp_navigation_user > li > a,
  html body .pkp_structure_head .jampl-utility-user > ul > li > a {
    min-width: 96px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  html body .pkp_structure_head .pkp_site_name img,
  html body .pkp_structure_head .pkp_site_name .is_img img {
    max-width: min(72vw, 280px) !important;
    max-height: 62px !important;
  }

  html body .pkp_structure_head .jampl-issn {
    font-size: 10px !important;
    gap: 1px 8px !important;
  }

  html body .rans-tabs-wrapper .nav-tabs .nav-link {
    min-height: 62px !important;
    padding: 8px 4px !important;
    font-size: 11px !important;
  }

  html body .rans-cover-card {
    max-width: 285px !important;
  }
}