/* =========================================================================
   STJ MODERN — inner.css
   All inner pages: banner, layout, components, forms, sidebar.
   ========================================================================= */

/* ── 0. SITE INDEX — multi-journal listing ── */
.stjm-hero--site{padding:clamp(60px,9vw,110px) 24px clamp(80px,9vw,120px)}
.page_index_site .pkp_structure_main{padding:0!important}
.stjm-journals-section{padding-top:8px;margin-bottom:60px}
.about_site{margin:36px 0}
.stjm-journal-grid{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:22px;
}
/* Horizontal card: media left, body right */
.stjm-jcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-sm);
  display:grid;grid-template-columns:260px 1fr;
  transition:transform .25s ease,box-shadow .3s ease,border-color .2s;
  position:relative;
}
.stjm-jcard::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--brand),var(--brand2));
  opacity:0;transition:opacity .25s;z-index:2;
}
.stjm-jcard:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:transparent}
.stjm-jcard:hover::before{opacity:1}
.stjm-jcard__media{
  display:flex;align-items:center;justify-content:center;
  padding:26px;overflow:hidden;position:relative;
  background:linear-gradient(135deg,var(--hero-start),var(--hero-mid));
}
.stjm-jcard__media::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 70% 20%,var(--orb1),transparent 65%);opacity:.5;
}
.stjm-jcard__media img{
  position:relative;z-index:1;
  max-width:100%;width:auto;height:auto;max-height:190px;
  object-fit:contain;display:block;border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.32);
  transition:transform .4s ease;
}
.stjm-jcard:hover .stjm-jcard__media img{transform:scale(1.04)}
.stjm-jcard__placeholder{
  position:relative;z-index:1;
  font-family:var(--disp);font-weight:800;font-size:3.2rem;color:#fff;
  text-transform:uppercase;letter-spacing:.05em;
  text-shadow:0 4px 24px rgba(0,0,0,.35);
}
.stjm-jcard__body{padding:30px 34px;display:flex;flex-direction:column;justify-content:center}
.stjm-jcard__title{margin:0 0 12px;font-size:1.4rem;line-height:1.25}
.stjm-jcard__title a{font-family:var(--disp);font-weight:800;color:var(--navy);letter-spacing:-.02em}
.stjm-jcard__title a:hover{color:var(--brand)}
.stjm-jcard__desc{color:var(--muted);font-size:.96rem;line-height:1.65;margin-bottom:20px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.stjm-jcard__actions{display:flex;gap:12px;flex-wrap:wrap}
.stjm-jcard__btn{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--disp);font-weight:600;font-size:.88rem;
  padding:11px 20px;border-radius:11px;border:1.5px solid var(--line);color:var(--ink);
  transition:border-color .2s,background .2s,color .2s,transform .15s,box-shadow .2s;
}
.stjm-jcard__btn:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.stjm-jcard__btn--primary{
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff!important;border-color:transparent;
  box-shadow:0 8px 20px rgba(0,0,0,.14);
}
.stjm-jcard__btn--primary:hover{color:#fff!important;transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.2)}
@media(max-width:720px){
  .stjm-jcard{grid-template-columns:1fr}
  .stjm-jcard__media{padding:24px;min-height:150px}
  .stjm-jcard__body{padding:24px}
  .stjm-jcard__title{font-size:1.2rem}
}

/* ── 1. ALL INNER PAGES — universal rule (covers every page class) ── */
.pkp_structure_main .page{padding:0;background:transparent}

/* ── 2. MINI HERO BANNER — full-width, no 100vw trick ── */
/* Parents (.pkp_structure_content, .pkp_structure_main) are already width:100%
   so we just use width:100% — avoids scrollbar-width overflow bug */
.pkp_structure_page.stjm{overflow-x:hidden}
.cmp_breadcrumbs{
  position:relative;
  width:100%;display:block;
  background:radial-gradient(900px 320px at 80% -20%,rgba(106,92,255,.38),transparent 60%),
    radial-gradient(600px 280px at 5% 120%,rgba(34,211,238,.18),transparent 55%),
    linear-gradient(160deg,#0a0f24 0%,#111a3d 55%,#1b2655 100%);
  padding:48px 24px 38px;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.07);
  margin-bottom:48px;
}
.cmp_breadcrumbs::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
}
.cmp_breadcrumbs::after{display:none}
/* inner content max-width centering */
.cmp_breadcrumbs ol{
  list-style:none;padding:0;margin:0 0 12px;
  display:flex;flex-wrap:wrap;align-items:center;gap:4px;
  position:relative;z-index:1;
  max-width:var(--maxw);margin-left:auto;margin-right:auto;
}
.cmp_breadcrumbs ol li{display:inline-flex;align-items:center;gap:4px}
.cmp_breadcrumbs ol a{color:rgba(255,255,255,.52);font-size:.82rem;font-weight:500;transition:color .2s}
.cmp_breadcrumbs ol a:hover{color:rgba(255,255,255,.9)}
.cmp_breadcrumbs .separator{color:rgba(255,255,255,.22);font-size:.8rem}
.cmp_breadcrumbs .current{
  display:block;width:100%;max-width:var(--maxw);margin:0 auto;
  font-family:var(--disp);font-weight:800;font-size:clamp(1.6rem,3vw,2.3rem);
  letter-spacing:-.03em;line-height:1.15;color:#fff;position:relative;z-index:1;
}

/* ── CONTENT WRAPPER — universal max-width for ALL inner pages ── */
/* Every direct child of any .page (except breadcrumb banner) gets centred */
.pkp_structure_main .page>*:not(.cmp_breadcrumbs){
  max-width:var(--maxw);
  margin-left:auto;margin-right:auto;
  padding-left:24px;padding-right:24px;
}
/* bottom spacing */
.pkp_structure_main .page>*:last-child{padding-bottom:56px}
/* Article: obj_article_details manages its own layout via .row */
.page_article>*:not(.cmp_breadcrumbs){
  max-width:100%;padding-left:0;padding-right:0;
}
@media(max-width:767px){
  .cmp_breadcrumbs{padding:32px 20px 26px;margin-bottom:32px}
}

/* ── 3. ISSUE ARCHIVE GRID ── */
.issues_archive{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  list-style:none;padding:0;margin:0;
}
.issues_archive li{list-style:none}
.obj_issue_summary{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden;box-shadow:var(--sh-sm);
  transition:transform .22s ease,box-shadow .25s ease;
  display:flex;flex-direction:column;
}
.obj_issue_summary:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.obj_issue_summary .cover{
  display:block;width:100%;background:var(--bg);
  padding:12px 12px 0;
}
.obj_issue_summary .cover img{
  width:100%;height:auto;display:block;
  object-fit:contain;border-radius:6px;
  transition:transform .35s ease;
}
.obj_issue_summary:hover .cover img{transform:scale(1.02)}
.obj_issue_summary .title{
  display:block;font-family:var(--disp);font-weight:700;color:var(--navy);
  font-size:1rem;line-height:1.3;padding:16px 16px 4px;
  transition:color .2s;
}
.obj_issue_summary .title:hover{color:var(--brand)}
.obj_issue_summary .series{
  color:var(--soft);font-size:.82rem;padding:0 16px 8px;
}
.obj_issue_summary .description{display:none}
@media(max-width:860px){.issues_archive{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.issues_archive{grid-template-columns:1fr}}

/* ── 4. ISSUE CURRENT / TOC PAGE HEADER ── */
.page_issue .issue_identify{
  display:flex;align-items:flex-start;gap:28px;margin-bottom:32px;
  padding-bottom:28px;border-bottom:1px solid var(--line);
}
.page_issue .issue_identify .cover img{
  width:140px;height:auto;border-radius:var(--r-sm);box-shadow:var(--sh);
}
.page_issue .issue_identify .description h1,.page_issue .issue_identify .description h2{
  font-size:clamp(1.4rem,2.5vw,1.9rem);margin:0 0 8px;
}
.page_issue .issue_identify .description .series,.page_issue .issue_identify .description .published{
  color:var(--muted);font-size:.9rem;margin:4px 0;
}

/* ── 5. CONTACT PAGE ── */
.contact_section{display:flex;flex-direction:column;gap:20px}
.contact_section .address{
  background:linear-gradient(135deg,var(--navy),#111a3d);
  color:#c8d2f2;border-radius:var(--r-sm);padding:24px 26px;
  position:relative;overflow:hidden;
}
.contact_section .address::before{
  content:'';position:absolute;top:0;left:0;width:4px;height:100%;
  background:linear-gradient(180deg,var(--brand),var(--brand2));
}
.contact_section .address p,.contact_section .address div{color:#c8d2f2;margin:4px 0}
.contact_section .address strong{color:#fff}
.contact.primary,.contact.support{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:20px 22px;box-shadow:var(--sh-sm);
  display:grid;grid-template-columns:auto 1fr;gap:0 16px;align-items:start;
}
.contact .name{font-family:var(--disp);font-weight:700;color:var(--navy);grid-column:1/-1;margin-bottom:8px}
.contact .email a,.contact .phone .value{color:var(--brand)}
.contact .label{color:var(--soft);font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}

/* ── 6. LOGIN & REGISTER — centered narrow card ── */
.pkp_page_login .pkp_structure_main,
.pkp_page_user .pkp_structure_main{max-width:500px;margin:0 auto}
/* login form */
.cmp_form.login,.cmp_form.register{display:flex;flex-direction:column;gap:0}
.cmp_form fieldset.fields,.cmp_form .fields{
  border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:16px;
}
.cmp_form .username,.cmp_form .password,
.cmp_form .given_name,.cmp_form .family_name,
.cmp_form .affiliation,.cmp_form .country,
.cmp_form .email,.cmp_form .username2,
.cmp_form .password2,.cmp_form .interests{
  display:flex;flex-direction:column;gap:6px;
}
.cmp_form label,.cmp_form .label{
  font-family:var(--disp);font-weight:600;color:var(--navy);font-size:.92rem;
}
.cmp_form input[type=text],.cmp_form input[type=email],
.cmp_form input[type=password],.cmp_form input[type=url],
.cmp_form select,.cmp_form textarea{
  border:1.5px solid var(--line);border-radius:10px;padding:11px 14px;
  font-size:1rem;background:#fff;transition:border-color .2s,box-shadow .2s;
}
.cmp_form input:focus,.cmp_form select:focus,.cmp_form textarea:focus{
  border-color:var(--brand);box-shadow:0 0 0 3px rgba(79,124,255,.14);outline:none;
}
.cmp_form .remember.checkbox{display:flex;align-items:center;gap:10px;font-size:.9rem}
.cmp_form .remember input{width:auto}
.cmp_form .buttons{
  margin-top:20px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;
}
.cmp_form .buttons .submit,.cmp_form button[type=submit]{
  flex:1;background:linear-gradient(135deg,var(--brand),var(--brand2))!important;
  color:#fff!important;border:0!important;border-radius:12px!important;
  padding:13px 24px!important;font-family:var(--disp)!important;font-weight:700!important;
  font-size:1.05rem!important;box-shadow:0 8px 20px rgba(79,124,255,.35);
  transition:transform .18s,box-shadow .25s;cursor:pointer;
}
.cmp_form .buttons .submit:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(79,124,255,.5)}
.cmp_form .buttons a.register,.cmp_form .buttons a{
  color:var(--brand);font-weight:600;font-size:.92rem;
}
abbr.required{color:var(--brand);text-decoration:none}
.pkp_form_success{
  background:linear-gradient(135deg,#0f4c2a,#1a6b3d);color:#fff;
  border-radius:var(--r-sm);padding:16px 20px;margin-bottom:20px;
}

/* ── 7. REGISTRATION form section titles ── */
.cmp_form .identity,.cmp_form .contact,.cmp_form.register fieldset{
  border:0;padding:0;margin:0;
}
.cmp_form legend{
  font-family:var(--disp);font-weight:800;color:var(--navy);font-size:1.1rem;
  padding:24px 0 14px;display:block;border-bottom:2px solid var(--line);margin-bottom:20px;width:100%;
}

/* ── 8. SEARCH FORM ── */
.page_search .cmp_form{max-width:100%}
.page_search h1,.page_search h2.search_results_heading{
  font-family:var(--disp);font-weight:800;color:var(--navy);
  font-size:clamp(1.2rem,2vw,1.6rem);margin:0 0 20px;
}
.search_input{display:flex;gap:10px;margin-bottom:24px}
.search_input .query input{
  width:100%;min-width:300px;font-size:1.05rem;padding:14px 18px;
  border:1.5px solid var(--line);border-radius:12px 0 0 12px;
  border-right:0;background:#fff;transition:border-color .2s;
}
.search_input .query input:focus{border-color:var(--brand);outline:none}
.search_input .submit button{
  background:linear-gradient(135deg,var(--brand),var(--brand2))!important;
  color:#fff!important;border:0!important;border-radius:0 12px 12px 0!important;
  padding:14px 22px!important;font-family:var(--disp)!important;font-weight:700!important;
  cursor:pointer;white-space:nowrap;
}
.search_advanced{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:20px 22px;margin-top:12px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 20px;
}
.search_advanced .date_range{grid-column:1/-1;display:flex;gap:12px;flex-wrap:wrap}
.search_advanced label{font-weight:600;color:var(--navy);font-size:.88rem;margin-bottom:4px;display:block}
.search_results_list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
/* search result items = article summaries — already styled */

/* ── 9. ABOUT PAGES — typography & sections ── */
.page_about .pkp_page_content,.page_submissions .pkp_page_content,
.page_information .pkp_page_content,.page_privacy .pkp_page_content{
  line-height:1.8;font-size:1.04rem;color:var(--ink);
}
.page_about h2,.page_submissions h2,.page_information h2,.page_privacy h2,
.page_editorial_team h2{
  font-family:var(--disp);font-size:1.35rem;color:var(--navy);
  margin:32px 0 12px;padding-bottom:10px;
  border-bottom:2px solid var(--line);
}
.page_about h2:first-child,.page_editorial_team h2:first-child{margin-top:0}
.page_about h3,.page_submissions h3{
  font-family:var(--disp);font-size:1.1rem;color:var(--brand);margin:20px 0 8px;
}
.page_about p,.page_submissions p,.page_information p{margin:0 0 14px}

/* Editorial team — member list if rendered as items */
.cmp_editorial_team .group{margin-bottom:32px}
.cmp_editorial_team .group .title{
  font-family:var(--disp);font-weight:700;color:var(--brand);font-size:.95rem;
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 14px;
  padding-bottom:8px;border-bottom:2px solid var(--line);
}
.cmp_editorial_team .member{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px 16px;display:flex;align-items:center;gap:14px;margin-bottom:10px;
  box-shadow:var(--sh-sm);transition:box-shadow .2s;
}
.cmp_editorial_team .member:hover{box-shadow:var(--sh)}
.cmp_editorial_team .name{font-family:var(--disp);font-weight:700;color:var(--navy)}
.cmp_editorial_team .affiliation{color:var(--muted);font-size:.88rem;margin-top:2px}
.cmp_editorial_team .orcid a{color:var(--brand);font-size:.82rem}

/* ── 10. SIDEBAR — hidden globally (full-width layout) ── */
/* Sidebar blocks are not shown; kept for reference only */

/* ── 11. ANNOUNCEMENTS ── */
.page_announcements h1,.page_announcements h2.page_title{
  font-family:var(--disp);font-weight:800;color:var(--navy);
}
.obj_announcement_full,.obj_announcement_summary{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  border-left:4px solid var(--brand);padding:20px 22px;margin-bottom:16px;box-shadow:var(--sh-sm);
}
.obj_announcement_summary .title{margin:0 0 6px}
.obj_announcement_summary .title a{font-family:var(--disp);font-weight:700;color:var(--navy)}
.obj_announcement_summary .title a:hover{color:var(--brand)}
.obj_announcement_summary .date{color:var(--soft);font-size:.82rem;margin-bottom:8px}
.obj_announcement_summary .summary{color:var(--muted);font-size:.95rem}

/* ── 12. ARTICLE DETAILS — more polish ── */
/* Article page: remove card padding since breadcrumb banner is used now */
.page_article .obj_article_details{width:100%;display:block;overflow:hidden}
/* page_title sits outside .row — give it the same centred max-width */
.obj_article_details .page_title{
  max-width:var(--maxw);margin:0 auto;
  padding:36px 24px 0;
  font-size:clamp(1.4rem,2.8vw,2.2rem);
  line-height:1.25;word-break:break-word;overflow-wrap:break-word;
}
.obj_article_details .row{
  max-width:var(--maxw);margin:0 auto;
  padding:24px 24px 56px;
  width:100%;box-sizing:border-box;
}
@media(max-width:767px){.obj_article_details .row{padding:24px 20px 40px}}

/* section labels */
.obj_article_details .item .label{
  font-family:var(--disp);font-weight:700;color:var(--navy);font-size:.82rem;
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;display:block;
}
/* author list */
.obj_article_details .authors ul.authors{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.obj_article_details li.author{display:flex;flex-direction:column}
.obj_article_details .author .name{font-weight:700;color:var(--navy)}
.obj_article_details .author .affiliation{color:var(--muted);font-size:.88rem}
.obj_article_details .author .orcid a{font-size:.82rem;color:var(--brand)}
/* keywords */
.obj_article_details .keywords .value{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.obj_article_details .keywords .keyword{
  display:inline-block;background:rgba(79,124,255,.08);color:var(--brand);
  border:1px solid rgba(79,124,255,.2);padding:4px 12px;border-radius:999px;font-size:.82rem;font-weight:600;
}
/* abstract */
.obj_article_details .item.abstract{
  background:linear-gradient(180deg,#f7f9ff,#f2f5ff);
  border:1px solid rgba(79,124,255,.12);border-radius:var(--r-sm);
  padding:24px 26px;margin:22px 0;font-size:1.05rem;line-height:1.85;
}
.obj_article_details .item.abstract h2{
  font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--brand);
  margin-bottom:12px;font-family:var(--disp);font-weight:700;
}
/* usage stats — hide default ugly charts */
.usageStatsUnavailable{display:none}
/* citation + references: prevent links/URLs overflowing */
.obj_article_details .citation_display .value,
.obj_article_details .item.citation,
.obj_article_details .item.references .value,
.obj_article_details .csl-bib-body,
.obj_article_details .csl-entry{
  overflow-wrap:break-word;word-break:break-word;word-wrap:break-word;
  overflow:hidden;
}
.obj_article_details .citation_display .value{
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;font-size:.88rem;color:var(--ink);line-height:1.65;
}
.obj_article_details .citation_display .value a,
.obj_article_details .item.references a,
.obj_article_details .csl-entry a{
  overflow-wrap:break-word;word-break:break-all;display:inline;
}
/* downloads chart section */
.item.downloads_chart{display:none}/* hide empty chart area */

/* ── 13. PAGINATION ── */
.cmp_pagination{
  display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:32px;
}
.cmp_pagination a,.cmp_pagination .current{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;
  border-radius:10px;border:1px solid var(--line);
  font-weight:600;font-size:.9rem;transition:border-color .2s,background .2s;
}
.cmp_pagination a:hover{border-color:var(--brand);color:var(--brand);background:rgba(79,124,255,.06)}
.cmp_pagination .current{background:var(--brand);color:#fff!important;border-color:var(--brand)}

/* ── 14. NOTIFICATION / ALERTS ── */
.pkp_notification{
  border-radius:var(--r-sm);padding:14px 18px;margin-bottom:20px;font-size:.95rem;
}
.pkp_notification.notifySuccess{background:#e6f7ee;border:1px solid #6fcf97;color:#1a5c36}
.pkp_notification.notifyWarning{background:#fff8e6;border:1px solid #f5b942;color:#7a5000}
.pkp_notification.notifyError{background:#fdecea;border:1px solid #e0564f;color:#7a1c19}
.pkp_notification.notifyInfo{background:#e8f0fe;border:1px solid var(--brand);color:#1a3a8a}

/* ── 15. RESPONSIVE FIXES ── */
@media(max-width:980px){
  .obj_article_details .row{grid-template-columns:1fr!important;gap:20px}
  .obj_article_details .entry_details{flex-direction:row;flex-wrap:wrap}
  .obj_article_details .entry_details .item{flex:1 1 200px}
}
@media(max-width:767px){
  .search_advanced{grid-template-columns:1fr}
  .contact.primary,.contact.support{grid-template-columns:1fr}
  .cmp_breadcrumbs .current{font-size:1.35rem}
}