/* =========================================================
   IJAPH — Immersion FINAL V5
   OJS 3.4.0.8 / Immersion Theme / Journal ID 6
   Publisher: PT Inovasi Multi Guna

   Final goals:
   1) Hero artwork shown completely (no top crop)
   2) /ijaph and /ijaph/Home share the same visual system
   3) Current Issue uses clean light cards
   4) Footer + license presentation is cleaner and consistent
   ========================================================= */

:root{
  --ijaph-navy:#062d54;
  --ijaph-navy2:#073b68;
  --ijaph-blue:#0b67c6;
  --ijaph-cyan:#18d6dc;
  --ijaph-cyan-soft:#9df8f3;
  --ijaph-light:#f6fbfe;
  --ijaph-light2:#eef7fb;
  --ijaph-white:#ffffff;
  --ijaph-text:#17334d;
  --ijaph-muted:#61788d;
  --ijaph-border:#d8e8f1;
  --ijaph-shadow:0 10px 30px rgba(4,45,82,.10);
}

/* =========================================================
   1. HERO — SHOW THE COMPLETE ARTWORK
   The final banner is approximately 3:1.
   ========================================================= */
#immersion_content_header{
  position:relative !important;
  width:100% !important;

  /* Let viewport width determine the correct ~3:1 hero height */
  height:clamp(480px,33.25vw,690px) !important;
  min-height:480px !important;
  max-height:690px !important;

  margin:0 0 48px 0 !important;
  padding:0 !important;

  background-size:contain !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
  background-color:var(--ijaph-navy) !important;

  overflow:visible !important;
}

/* Hide only the duplicate Immersion journal-brand overlay.
   The Home menu remains untouched because it points to /Home. */
#immersion_content_header a[href*="/index.php/ijaph/index"]{
  display:none !important;
}
#immersion_content_header .journal-title,
#immersion_content_header .journal-name,
#immersion_content_header .site-name,
#immersion_content_header .navbar-brand{
  display:none !important;
}

/* =========================================================
   2. NAVIGATION — FLOAT JUST BELOW HERO
   Exact Immersion markup from diagnosis:
   nav.navbar.navbar-expand-sm.main-header__nav
   #main-menu > #navigationPrimary
   ========================================================= */
#immersion_content_header .main-header__nav{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:-30px !important;
  top:auto !important;

  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;

  align-items:center !important;
  justify-content:center !important;

  width:100% !important;
  margin:0 !important;
  padding:0 18px !important;

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;

  z-index:1000 !important;
}

@media (min-width:576px){
  #immersion_content_header #main-menu{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;

    height:auto !important;
    overflow:visible !important;
    flex-basis:auto !important;
  }
}

#immersion_content_header #navigationPrimary{
  position:static !important;
  transform:none !important;

  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;

  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:5px !important;

  width:auto !important;
  max-width:calc(100vw - 64px) !important;

  margin:0 auto !important;
  padding:9px 12px !important;

  list-style:none !important;

  background:rgba(3,35,66,.94) !important;
  border:1px solid rgba(24,214,220,.55) !important;
  border-radius:11px !important;

  box-shadow:0 12px 30px rgba(0,0,0,.22) !important;
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}

#immersion_content_header .main-header__nav #navigationPrimary>li{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
}

#immersion_content_header .main-header__nav #navigationPrimary>li>a,
#immersion_content_header .main-header__nav #navigationPrimary>li>a.nav-link,
#immersion_content_header .main-header__nav #navigationPrimary>li>a.dropdown-toggle{
  display:block !important;

  margin:0 !important;
  padding:9px 13px !important;

  color:#fff !important;
  background:transparent !important;
  background-color:transparent !important;

  border:0 !important;
  border-color:transparent !important;
  border-radius:6px !important;

  font-size:15px !important;
  font-weight:600 !important;
  line-height:1.2 !important;

  text-decoration:none !important;
  text-shadow:none !important;
  box-shadow:none !important;
}

#immersion_content_header .main-header__nav #navigationPrimary>li>a:hover,
#immersion_content_header .main-header__nav #navigationPrimary>li>a:focus,
#immersion_content_header .main-header__nav #navigationPrimary>li>a.show{
  color:#fff !important;
  background:rgba(24,214,220,.22) !important;
}

/* Dropdowns */
#immersion_content_header #navigationPrimary .dropdown-menu{
  margin-top:6px !important;
  padding:7px !important;

  background:rgba(3,35,66,.99) !important;
  border:1px solid rgba(24,214,220,.40) !important;
  border-radius:8px !important;

  box-shadow:0 12px 28px rgba(0,0,0,.28) !important;
}

#immersion_content_header #navigationPrimary .dropdown-menu a{
  color:#fff !important;
  background:transparent !important;

  border-radius:5px !important;
  padding:7px 10px !important;
}

#immersion_content_header #navigationPrimary .dropdown-menu a:hover,
#immersion_content_header #navigationPrimary .dropdown-menu a:focus{
  color:#fff !important;
  background:rgba(24,214,220,.18) !important;
}

/* Register/Login/User menu */
#immersion_content_header #navigationUser{
  position:absolute !important;
  top:12px !important;
  right:14px !important;

  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;

  gap:4px !important;
  margin:0 !important;
  padding:0 !important;

  list-style:none !important;
  z-index:1100 !important;
}

#immersion_content_header #navigationUser li{
  margin:0 !important;
  padding:0 !important;
}

#immersion_content_header #navigationUser a{
  display:inline-block !important;
  padding:6px 9px !important;

  color:#fff !important;
  background:rgba(3,35,66,.82) !important;

  border:1px solid rgba(24,214,220,.40) !important;
  border-radius:5px !important;

  font-size:13px !important;
  line-height:1.2 !important;
  text-decoration:none !important;
}

#immersion_content_header #navigationUser a:hover,
#immersion_content_header #navigationUser a:focus{
  color:#fff !important;
  background:rgba(24,214,220,.24) !important;
}

/* =========================================================
   3. CONSISTENT BODY — /ijaph + /Home
   ========================================================= */
body{
  background:#fff !important;
  color:var(--ijaph-text) !important;
}

#immersion_content_main,
.main__content{
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;

  background:#fff !important;
  color:var(--ijaph-text) !important;
}

#immersion_content_main h1,
#immersion_content_main h2,
#immersion_content_main h3,
.main__content h1,
.main__content h2,
.main__content h3{
  color:var(--ijaph-navy) !important;
}

#immersion_content_main p,
#immersion_content_main li,
.main__content p,
.main__content li{
  color:var(--ijaph-text) !important;
  line-height:1.72 !important;
}

/* Landing-page About card */
section.journal-description.section_dark{
  max-width:1180px !important;

  margin:36px auto 42px auto !important;
  padding:34px 42px !important;

  background:var(--ijaph-light) !important;
  background-color:var(--ijaph-light) !important;

  color:var(--ijaph-text) !important;

  border:1px solid #e2eef4 !important;
  border-left:5px solid var(--ijaph-cyan) !important;
  border-radius:9px !important;

  box-shadow:var(--ijaph-shadow) !important;
}

section.journal-description.section_dark h1,
section.journal-description.section_dark h2,
section.journal-description.section_dark h3{
  color:var(--ijaph-navy) !important;
  font-weight:700 !important;
}

section.journal-description.section_dark p,
section.journal-description.section_dark strong,
section.journal-description.section_dark li{
  color:var(--ijaph-text) !important;
  line-height:1.72 !important;
}

section.journal-description.section_dark .btn,
section.journal-description.section_dark .btn-primary{
  color:#fff !important;
  background:var(--ijaph-navy) !important;

  border:1px solid var(--ijaph-cyan) !important;
  border-radius:6px !important;

  padding:8px 14px !important;
  box-shadow:none !important;
}

section.journal-description.section_dark .btn:hover,
section.journal-description.section_dark .btn-primary:hover{
  background:var(--ijaph-blue) !important;
}

/* =========================================================
   4. CURRENT ISSUE — LIGHT, READABLE, CARD-BASED
   Standard OJS .current_issue plus Immersion section/article classes
   ========================================================= */
.page_index_journal .current_issue,
section.current_issue{
  max-width:1180px !important;

  margin:42px auto !important;
  padding:38px 42px !important;

  background:var(--ijaph-light2) !important;
  background-color:var(--ijaph-light2) !important;

  color:var(--ijaph-text) !important;

  border:1px solid var(--ijaph-border) !important;
  border-radius:10px !important;

  box-shadow:var(--ijaph-shadow) !important;
}

.current_issue>h2,
.current_issue .current_issue_title{
  color:var(--ijaph-navy) !important;
}

.current_issue>h2{
  margin-top:0 !important;
  margin-bottom:8px !important;

  font-size:1.15rem !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;

  color:var(--ijaph-cyan) !important;
}

.current_issue .current_issue_title{
  margin-bottom:28px !important;
  font-size:2rem !important;
  line-height:1.2 !important;
  font-weight:700 !important;
}

/* Override Immersion black issue sections */
.current_issue .section,
.current_issue section.section,
.page_index_journal .current_issue .section{
  margin:22px 0 !important;
  padding:26px 28px !important;

  background:#fff !important;
  background-color:#fff !important;

  color:var(--ijaph-text) !important;

  border:1px solid var(--ijaph-border) !important;
  border-radius:9px !important;

  box-shadow:0 6px 20px rgba(4,45,82,.06) !important;
}

.current_issue .section h2,
.current_issue .section h3,
.current_issue .section h4{
  color:var(--ijaph-navy) !important;
}

/* Article rows/cards */
.current_issue .article-summary,
.current_issue .obj_article_summary,
.current_issue .article,
.current_issue .article-summary media{
  background:#fff !important;
  color:var(--ijaph-text) !important;
}

.current_issue .article-summary,
.current_issue .obj_article_summary,
.current_issue .article{
  margin:0 !important;
  padding:20px 0 !important;

  border-bottom:1px solid #e1edf3 !important;
}

.current_issue .article-summary:last-child,
.current_issue .obj_article_summary:last-child,
.current_issue .article:last-child{
  border-bottom:0 !important;
}

.current_issue a{
  color:var(--ijaph-navy) !important;
}

.current_issue a:hover{
  color:var(--ijaph-blue) !important;
}

.current_issue .title,
.current_issue .title a,
.current_issue h3 a,
.current_issue h4 a{
  color:var(--ijaph-navy) !important;
  font-weight:700 !important;
  line-height:1.45 !important;
}

.current_issue .authors,
.current_issue .author,
.current_issue .meta{
  color:var(--ijaph-muted) !important;
}

/* PDF / Full Text buttons */
.current_issue .article__btn,
.current_issue .galley-link,
.current_issue a.pdf,
.current_issue a[class*="pdf"]{
  display:inline-block !important;

  margin-top:8px !important;
  padding:7px 12px !important;

  color:#fff !important;
  background:var(--ijaph-navy) !important;

  border:1px solid var(--ijaph-cyan) !important;
  border-radius:6px !important;

  font-size:13px !important;
  font-weight:600 !important;
  text-decoration:none !important;
}

.current_issue .article__btn:hover,
.current_issue .galley-link:hover,
.current_issue a.pdf:hover,
.current_issue a[class*="pdf"]:hover{
  color:#fff !important;
  background:var(--ijaph-blue) !important;
}

/* View All Issues */
.current_issue .read_more{
  display:inline-block !important;

  margin-top:22px !important;
  padding:9px 15px !important;

  color:#fff !important;
  background:var(--ijaph-navy) !important;

  border:1px solid var(--ijaph-cyan) !important;
  border-radius:6px !important;

  text-decoration:none !important;
  font-weight:600 !important;
}

.current_issue .read_more:hover{
  color:#fff !important;
  background:var(--ijaph-blue) !important;
}

/* =========================================================
   5. FOOTER + LICENSE — PROFESSIONAL & CONSISTENT
   ========================================================= */
#immersion_content_footer,
.main-footer{
  position:relative !important;

  background:linear-gradient(135deg,var(--ijaph-navy),var(--ijaph-navy2)) !important;
  background-color:var(--ijaph-navy) !important;

  color:#fff !important;

  border-top:3px solid var(--ijaph-cyan) !important;
}

#immersion_content_footer::before,
.main-footer::before{
  content:"IJAPH • Open Access • Creative Commons Attribution 4.0 International (CC BY 4.0)";
  display:block;

  max-width:1180px;
  margin:0 auto;
  padding:22px 20px 10px 20px;

  color:#dffdfb;
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  text-align:center;
}

#immersion_content_footer p,
.main-footer p{
  color:#eaf7fb !important;
  line-height:1.65 !important;
}

#immersion_content_footer a,
.main-footer a{
  color:var(--ijaph-cyan-soft) !important;
}

#immersion_content_footer a:hover,
.main-footer a:hover{
  color:#fff !important;
}

/* Hide the obsolete CC BY-NC badge/link.
   The underlying OJS setting should still be corrected to CC BY 4.0. */
#immersion_content_footer a[href*="creativecommons.org/licenses/by-nc/4.0"],
.main-footer a[href*="creativecommons.org/licenses/by-nc/4.0"]{
  display:none !important;
}

/* Make a future correct CC BY 4.0 badge/link clean */
#immersion_content_footer a[href*="creativecommons.org/licenses/by/4.0"],
.main-footer a[href*="creativecommons.org/licenses/by/4.0"]{
  display:inline-block !important;
  padding:5px !important;

  background:#fff !important;
  border-radius:6px !important;
}

/* =========================================================
   6. RESPONSIVE
   ========================================================= */
@media (max-width:1200px){
  #immersion_content_header{
    height:clamp(430px,33.25vw,600px) !important;
    min-height:430px !important;
  }
}

@media (max-width:767px){
  #immersion_content_header{
    height:330px !important;
    min-height:330px !important;
    max-height:none !important;

    margin-bottom:54px !important;

    background-size:contain !important;
    background-position:center top !important;
  }

  #immersion_content_header .main-header__nav{
    bottom:-36px !important;
    padding:0 8px !important;
  }

  #immersion_content_header #main-menu{
    max-height:190px !important;
    overflow:auto !important;
  }

  #immersion_content_header #navigationPrimary{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;

    justify-content:flex-start !important;
    flex-wrap:nowrap !important;

    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  #immersion_content_header .main-header__nav #navigationPrimary>li>a{
    padding:8px 10px !important;
    font-size:13px !important;
    white-space:nowrap !important;
  }

  #immersion_content_header #navigationUser{
    top:6px !important;
    right:6px !important;
  }

  section.journal-description.section_dark,
  .page_index_journal .current_issue,
  section.current_issue{
    margin-left:14px !important;
    margin-right:14px !important;
    padding:24px 22px !important;
  }

  .current_issue .section,
  .current_issue section.section{
    padding:20px 18px !important;
  }
}

/* =========================================================
   7. ISSUE VIEW — DEFINITIVE NAVY PANEL PATCH (V5.3)
   OJS 3.4 / Immersion
   Scope: public Issue View only / issue summary area.
   Hero and navigation are intentionally untouched.
   ========================================================= */

/* ---- Palette local to Issue View ---- */
body.pkp_page_issue,
body[class*="pkp_page_issue"],
body[class*="page_issue"] {
  --ijaph-issue-navy-1:#062d54;
  --ijaph-issue-navy-2:#073b68;
  --ijaph-issue-navy-3:#0b4b78;
  --ijaph-issue-cyan:#18d6dc;
  --ijaph-issue-cyan-soft:#9df8f3;
  --ijaph-issue-text:#dcecf5;
}

/* ---- Catch the actual issue-summary container across OJS/Immersion variants ---- */
body.pkp_page_issue #immersion_content_main .section_dark,
body.pkp_page_issue #immersion_content_main .issue-summary,
body.pkp_page_issue #immersion_content_main .issue_summary,
body.pkp_page_issue #immersion_content_main .obj_issue_toc > .heading,
body.pkp_page_issue #immersion_content_main .obj_issue_toc > header,
body[class*="pkp_page_issue"] #immersion_content_main .section_dark,
body[class*="page_issue"] #immersion_content_main .section_dark,
#immersion_content_main .obj_issue_toc .section_dark,
#immersion_content_main .obj_issue_toc > .heading,
#immersion_content_main .obj_issue_toc > header,
#immersion_content_main .issue-summary.section_dark,
#immersion_content_main .issue_summary.section_dark {
  background-image:
    radial-gradient(circle at 88% 14%, rgba(24,214,220,.16), transparent 30%),
    linear-gradient(135deg, #062d54 0%, #073b68 58%, #0b4b78 100%) !important;
  background-color:#062d54 !important;
  background:#062d54
    radial-gradient(circle at 88% 14%, rgba(24,214,220,.16), transparent 30%) !important;

  color:#f7fbff !important;

  border:1px solid rgba(24,214,220,.32) !important;
  border-radius:16px !important;

  box-shadow:0 16px 36px rgba(4,45,82,.18) !important;

  padding:34px 38px !important;
}

/* Re-apply gradient after shorthand background fallback */
body.pkp_page_issue #immersion_content_main .section_dark,
body[class*="pkp_page_issue"] #immersion_content_main .section_dark,
body[class*="page_issue"] #immersion_content_main .section_dark,
#immersion_content_main .obj_issue_toc .section_dark,
#immersion_content_main .obj_issue_toc > .heading,
#immersion_content_main .issue-summary.section_dark,
#immersion_content_main .issue_summary.section_dark {
  background:
    radial-gradient(circle at 88% 14%, rgba(24,214,220,.16), transparent 30%),
    linear-gradient(135deg, #062d54 0%, #073b68 58%, #0b4b78 100%) !important;
}

/* ---- Volume / No. / Issue title => WHITE ---- */
body.pkp_page_issue #immersion_content_main .section_dark h1,
body.pkp_page_issue #immersion_content_main .section_dark h2,
body.pkp_page_issue #immersion_content_main .section_dark h3,
body.pkp_page_issue #immersion_content_main .section_dark h4,
body.pkp_page_issue #immersion_content_main .issue-summary h1,
body.pkp_page_issue #immersion_content_main .issue-summary h2,
body.pkp_page_issue #immersion_content_main .issue-summary h3,
body.pkp_page_issue #immersion_content_main .issue-summary h4,
body[class*="pkp_page_issue"] #immersion_content_main .section_dark h1,
body[class*="pkp_page_issue"] #immersion_content_main .section_dark h2,
body[class*="pkp_page_issue"] #immersion_content_main .section_dark h3,
body[class*="page_issue"] #immersion_content_main .section_dark h1,
body[class*="page_issue"] #immersion_content_main .section_dark h2,
body[class*="page_issue"] #immersion_content_main .section_dark h3,
#immersion_content_main .obj_issue_toc .section_dark h1,
#immersion_content_main .obj_issue_toc .section_dark h2,
#immersion_content_main .obj_issue_toc .section_dark h3,
#immersion_content_main .obj_issue_toc > .heading h1,
#immersion_content_main .obj_issue_toc > .heading h2,
#immersion_content_main .obj_issue_toc > .heading h3,
#immersion_content_main .issue-summary.section_dark h1,
#immersion_content_main .issue-summary.section_dark h2,
#immersion_content_main .issue-summary.section_dark h3,
#immersion_content_main .issue_summary.section_dark h1,
#immersion_content_main .issue_summary.section_dark h2,
#immersion_content_main .issue_summary.section_dark h3,
#immersion_content_main .issue_identification,
#immersion_content_main .issue-title,
#immersion_content_main .issue_title {
  color:#ffffff !important;
  text-shadow:none !important;
}

/* ---- Published date => BRIGHT CYAN ---- */
body.pkp_page_issue #immersion_content_main .section_dark .published,
body.pkp_page_issue #immersion_content_main .section_dark .date_published,
body.pkp_page_issue #immersion_content_main .section_dark time,
body[class*="pkp_page_issue"] #immersion_content_main .section_dark .published,
body[class*="pkp_page_issue"] #immersion_content_main .section_dark .date_published,
body[class*="pkp_page_issue"] #immersion_content_main .section_dark time,
body[class*="page_issue"] #immersion_content_main .section_dark .published,
body[class*="page_issue"] #immersion_content_main .section_dark .date_published,
body[class*="page_issue"] #immersion_content_main .section_dark time,
#immersion_content_main .obj_issue_toc .published,
#immersion_content_main .obj_issue_toc .date_published,
#immersion_content_main .obj_issue_toc time {
  color:#9df8f3 !important;
  font-weight:600 !important;
}

/* Some Immersion templates render the date as a plain paragraph/small element */
body.pkp_page_issue #immersion_content_main .section_dark .published *,
body.pkp_page_issue #immersion_content_main .section_dark .date_published *,
#immersion_content_main .obj_issue_toc .published *,
#immersion_content_main .obj_issue_toc .date_published * {
  color:#9df8f3 !important;
}

/* ---- Issue description heading => WHITE ---- */
body.pkp_page_issue #immersion_content_main .section_dark .description h1,
body.pkp_page_issue #immersion_content_main .section_dark .description h2,
body.pkp_page_issue #immersion_content_main .section_dark .description h3,
body.pkp_page_issue #immersion_content_main .section_dark .issue_description h1,
body.pkp_page_issue #immersion_content_main .section_dark .issue_description h2,
body.pkp_page_issue #immersion_content_main .section_dark .issue_description h3,
#immersion_content_main .obj_issue_toc .description h1,
#immersion_content_main .obj_issue_toc .description h2,
#immersion_content_main .obj_issue_toc .description h3,
#immersion_content_main .obj_issue_toc .issue_description h1,
#immersion_content_main .obj_issue_toc .issue_description h2,
#immersion_content_main .obj_issue_toc .issue_description h3 {
  color:#ffffff !important;
  font-weight:700 !important;
}

/* ---- Issue description body => LIGHT BLUE-GRAY ---- */
body.pkp_page_issue #immersion_content_main .section_dark p,
body.pkp_page_issue #immersion_content_main .section_dark li,
body.pkp_page_issue #immersion_content_main .section_dark span,
body.pkp_page_issue #immersion_content_main .section_dark strong,
body[class*="pkp_page_issue"] #immersion_content_main .section_dark p,
body[class*="pkp_page_issue"] #immersion_content_main .section_dark li,
body[class*="pkp_page_issue"] #immersion_content_main .section_dark span,
body[class*="page_issue"] #immersion_content_main .section_dark p,
body[class*="page_issue"] #immersion_content_main .section_dark li,
body[class*="page_issue"] #immersion_content_main .section_dark span,
#immersion_content_main .obj_issue_toc .section_dark p,
#immersion_content_main .obj_issue_toc .section_dark li,
#immersion_content_main .obj_issue_toc .section_dark span,
#immersion_content_main .obj_issue_toc > .heading p,
#immersion_content_main .obj_issue_toc > .heading li,
#immersion_content_main .obj_issue_toc > .heading span,
#immersion_content_main .issue-summary.section_dark p,
#immersion_content_main .issue-summary.section_dark li,
#immersion_content_main .issue-summary.section_dark span,
#immersion_content_main .issue_summary.section_dark p,
#immersion_content_main .issue_summary.section_dark li,
#immersion_content_main .issue_summary.section_dark span {
  color:#dcecf5 !important;
  line-height:1.72 !important;
}

/* Description wrapper itself */
#immersion_content_main .obj_issue_toc .description,
#immersion_content_main .obj_issue_toc .issue_description,
body.pkp_page_issue #immersion_content_main .description,
body.pkp_page_issue #immersion_content_main .issue_description {
  color:#dcecf5 !important;
}

/* Links inside panel */
body.pkp_page_issue #immersion_content_main .section_dark a,
body[class*="pkp_page_issue"] #immersion_content_main .section_dark a,
body[class*="page_issue"] #immersion_content_main .section_dark a,
#immersion_content_main .obj_issue_toc .section_dark a,
#immersion_content_main .issue-summary.section_dark a,
#immersion_content_main .issue_summary.section_dark a {
  color:#9df8f3 !important;
}

body.pkp_page_issue #immersion_content_main .section_dark a:hover,
#immersion_content_main .obj_issue_toc .section_dark a:hover {
  color:#ffffff !important;
}

/* ---- KEEP COVER LARGE ---- */
body.pkp_page_issue #immersion_content_main .cover,
body.pkp_page_issue #immersion_content_main .issue_cover,
body[class*="pkp_page_issue"] #immersion_content_main .cover,
body[class*="pkp_page_issue"] #immersion_content_main .issue_cover,
body[class*="page_issue"] #immersion_content_main .cover,
body[class*="page_issue"] #immersion_content_main .issue_cover,
#immersion_content_main .obj_issue_toc .cover,
#immersion_content_main .obj_issue_toc .issue_cover {
  width:200px !important;
  max-width:200px !important;
}

body.pkp_page_issue #immersion_content_main .cover img,
body.pkp_page_issue #immersion_content_main .issue_cover img,
body[class*="pkp_page_issue"] #immersion_content_main .cover img,
body[class*="pkp_page_issue"] #immersion_content_main .issue_cover img,
body[class*="page_issue"] #immersion_content_main .cover img,
body[class*="page_issue"] #immersion_content_main .issue_cover img,
#immersion_content_main .obj_issue_toc .cover img,
#immersion_content_main .obj_issue_toc .issue_cover img,
#immersion_content_main .obj_issue_toc img[alt*="cover" i],
#immersion_content_main .obj_issue_toc img[src*="cover" i] {
  display:block !important;
  width:200px !important;
  max-width:200px !important;
  height:auto !important;
  border-radius:8px !important;
  box-shadow:0 10px 28px rgba(0,0,0,.26) !important;
}

/* ---- Article list alignment below issue panel ---- */
body.pkp_page_issue #immersion_content_main .obj_issue_toc .sections,
body.pkp_page_issue #immersion_content_main .obj_issue_toc .section,
body[class*="pkp_page_issue"] #immersion_content_main .obj_issue_toc .sections,
body[class*="pkp_page_issue"] #immersion_content_main .obj_issue_toc .section,
body[class*="page_issue"] #immersion_content_main .obj_issue_toc .sections,
body[class*="page_issue"] #immersion_content_main .obj_issue_toc .section,
#immersion_content_main .obj_issue_toc .sections,
#immersion_content_main .obj_issue_toc .section {
  max-width:1000px !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

#immersion_content_main .obj_issue_toc .section > h2,
#immersion_content_main .obj_issue_toc .section > h3,
#immersion_content_main .obj_issue_toc .section .section_title {
  color:#062d54 !important;
  font-weight:800 !important;
  margin:30px 0 18px !important;
  padding-bottom:10px !important;
  border-bottom:2px solid #d8e8f1 !important;
}

#immersion_content_main .obj_issue_toc .articles,
#immersion_content_main .obj_issue_toc .section > ul {
  width:100% !important;
  padding-left:0 !important;
  margin-left:0 !important;
  list-style:none !important;
}

#immersion_content_main .obj_issue_toc .obj_article_summary {
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 0 18px !important;
  padding:20px 22px !important;

  background:#fff !important;
  color:#17334d !important;

  border:1px solid #d8e8f1 !important;
  border-radius:10px !important;

  box-shadow:0 5px 16px rgba(4,45,82,.06) !important;
}

#immersion_content_main .obj_issue_toc .obj_article_summary .title,
#immersion_content_main .obj_issue_toc .obj_article_summary .authors,
#immersion_content_main .obj_issue_toc .obj_article_summary .pages,
#immersion_content_main .obj_issue_toc .obj_article_summary .galleys {
  margin-left:0 !important;
  padding-left:0 !important;
  width:auto !important;
  max-width:100% !important;
}

/* ---- Mobile ---- */
@media (max-width:767px){
  body.pkp_page_issue #immersion_content_main .section_dark,
  body[class*="pkp_page_issue"] #immersion_content_main .section_dark,
  body[class*="page_issue"] #immersion_content_main .section_dark,
  #immersion_content_main .obj_issue_toc .section_dark,
  #immersion_content_main .obj_issue_toc > .heading,
  #immersion_content_main .issue-summary.section_dark,
  #immersion_content_main .issue_summary.section_dark {
    padding:22px 18px !important;
    border-radius:12px !important;
  }

  body.pkp_page_issue #immersion_content_main .cover,
  body.pkp_page_issue #immersion_content_main .issue_cover,
  body.pkp_page_issue #immersion_content_main .cover img,
  body.pkp_page_issue #immersion_content_main .issue_cover img,
  #immersion_content_main .obj_issue_toc .cover,
  #immersion_content_main .obj_issue_toc .issue_cover,
  #immersion_content_main .obj_issue_toc .cover img,
  #immersion_content_main .obj_issue_toc .issue_cover img {
    width:150px !important;
    max-width:150px !important;
  }
}


/* =========================================================
   IJAPH ISSUE VIEW — DEFINITIVE READABILITY HOTFIX V1
   Target: OJS 3.4 / Immersion public issue page only
   Does NOT modify #immersion_content_header or navigation.
   ========================================================= */

/* 1) Keep the issue page itself light */
#immersion_content_main .page.page_issue {
    background: #ffffff !important;
    color: #17334d !important;
}

/* 2) Issue identification (Volume / No.) becomes the top half of one navy card */
#immersion_content_main .page.page_issue > h1 {
    margin: 0 !important;
    padding: 36px 40px 12px !important;

    background:
        radial-gradient(circle at 88% 10%, rgba(24,214,220,.15), transparent 30%),
        linear-gradient(135deg, #062d54 0%, #073b68 58%, #0b4b78 100%) !important;
    background-color: #062d54 !important;

    color: #ffffff !important;
    border: 1px solid rgba(24,214,220,.28) !important;
    border-bottom: 0 !important;
    border-radius: 16px 16px 0 0 !important;

    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-shadow: none !important;
}

/* 3) OJS standard Issue TOC intro area */
#immersion_content_main .page.page_issue .obj_issue_toc > .heading {
    margin: 0 0 36px !important;
    padding: 14px 40px 38px !important;

    background:
        radial-gradient(circle at 88% 10%, rgba(24,214,220,.15), transparent 30%),
        linear-gradient(135deg, #062d54 0%, #073b68 58%, #0b4b78 100%) !important;
    background-color: #062d54 !important;

    color: #dcecf5 !important;
    border: 1px solid rgba(24,214,220,.28) !important;
    border-top: 0 !important;
    border-radius: 0 0 16px 16px !important;

    box-shadow: 0 16px 36px rgba(4,45,82,.16) !important;
}

/* 4) Fallback: override any Immersion inline black background inside the issue intro */
#immersion_content_main .page.page_issue .obj_issue_toc > .heading[style*="background"],
#immersion_content_main .page.page_issue .obj_issue_toc > .heading [style*="background-color:#000"],
#immersion_content_main .page.page_issue .obj_issue_toc > .heading [style*="background-color: #000"],
#immersion_content_main .page.page_issue .obj_issue_toc > .heading [style*="background-color: rgb(0, 0, 0)"] {
    background:
        radial-gradient(circle at 88% 10%, rgba(24,214,220,.15), transparent 30%),
        linear-gradient(135deg, #062d54 0%, #073b68 58%, #0b4b78 100%) !important;
    background-color: #062d54 !important;
}

/* 5) Published date = bright cyan */
#immersion_content_main .page.page_issue .obj_issue_toc > .heading .published,
#immersion_content_main .page.page_issue .obj_issue_toc > .heading .published *,
#immersion_content_main .page.page_issue .obj_issue_toc > .heading .date_published,
#immersion_content_main .page.page_issue .obj_issue_toc > .heading .date_published *,
#immersion_content_main .page.page_issue .obj_issue_toc > .heading time {
    color: #9df8f3 !important;
    font-weight: 600 !important;
}

/* 6) Issue description heading = white */
#immersion_content_main .page.page_issue .obj_issue_toc > .heading .description h1,
#immersion_content_main .page.page_issue .obj_issue_toc > .heading .description h2,
#immersion_content_main .page.page_issue .obj_issue_toc > .heading .description h3,
#immersion_content_main .page.page_issue .obj_issue_toc > .heading .issue_description h1,
#immersion_content_main .page.page_issue .obj_issue_toc > .heading .issue_description h2,
#immersion_content_main .page.page_issue .obj_issue_toc > .heading .issue_description h3 {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* 7) Description/body copy = light blue-gray.
      This specifically overrides the broad V5 dark-text rules. */
#immersion_content_main .page.page_issue .obj_issue_toc > .heading p,
#immersion_content_main .page.page_issue .obj_issue_toc > .heading li,
#immersion_content_main .page.page_issue .obj_issue_toc > .heading span,
#immersion_content_main .page.page_issue .obj_issue_toc > .heading strong,
#immersion_content_main .page.page_issue .obj_issue_toc > .heading .description,
#immersion_content_main .page.page_issue .obj_issue_toc > .heading .issue_description {
    color: #dcecf5 !important;
    line-height: 1.72 !important;
}

/* Re-assert the Published date after the generic span rule above */
#immersion_content_main .page.page_issue .obj_issue_toc > .heading .published,
#immersion_content_main .page.page_issue .obj_issue_toc > .heading .published span,
#immersion_content_main .page.page_issue .obj_issue_toc > .heading .published .label,
#immersion_content_main .page.page_issue .obj_issue_toc > .heading .published .value {
    color: #9df8f3 !important;
}

/* 8) Links in the dark card */
#immersion_content_main .page.page_issue .obj_issue_toc > .heading a {
    color: #9df8f3 !important;
}
#immersion_content_main .page.page_issue .obj_issue_toc > .heading a:hover {
    color: #ffffff !important;
}

/* 9) Keep issue cover large */
#immersion_content_main .page.page_issue .obj_issue_toc > .heading .cover {
    width: 200px !important;
    max-width: 200px !important;
}
#immersion_content_main .page.page_issue .obj_issue_toc > .heading .cover img {
    display: block !important;
    width: 200px !important;
    max-width: 200px !important;
    height: auto !important;

    border-radius: 8px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.26) !important;
}

/* 10) Ensure article sections below the issue intro return to the light IJAPH system */
#immersion_content_main .page.page_issue .obj_issue_toc .sections,
#immersion_content_main .page.page_issue .obj_issue_toc .section {
    background: #ffffff !important;
    color: #17334d !important;
}

#immersion_content_main .page.page_issue .obj_issue_toc .section > h2,
#immersion_content_main .page.page_issue .obj_issue_toc .section > h3,
#immersion_content_main .page.page_issue .obj_issue_toc .section > h4 {
    color: #062d54 !important;
}

/* 11) Mobile */
@media (max-width: 767px) {
    #immersion_content_main .page.page_issue > h1 {
        padding: 24px 20px 10px !important;
        border-radius: 12px 12px 0 0 !important;
    }

    #immersion_content_main .page.page_issue .obj_issue_toc > .heading {
        padding: 12px 20px 26px !important;
        border-radius: 0 0 12px 12px !important;
    }

    #immersion_content_main .page.page_issue .obj_issue_toc > .heading .cover,
    #immersion_content_main .page.page_issue .obj_issue_toc > .heading .cover img {
        width: 150px !important;
        max-width: 150px !important;
    }
}