/*
Matsnawi OJS Default Theme - Responsive Final + Premium Submit Sidebar
Version: 2026-08-11
FULL REPLACEMENT stylesheet. Use with OJS Default Theme, not Bootstrap Theme.
- About the Journal clean: no left green/tosca border, no CSS-generated badge.
- Header, black centred menu, Current Issue, article list, sidebar, PDF buttons, and footer improved.
*/

:root {
  --matsnawi-green: #009C87;
  --matsnawi-green-dark: #007B6B;
  --matsnawi-black: #202020;
  --matsnawi-yellow: #FFD200;
  --matsnawi-text: #222222;
  --matsnawi-border: #E6E6E6;
  --matsnawi-bg: #f4f5f5;
  --matsnawi-card: #ffffff;
  --matsnawi-link: #005F8F;
  --matsnawi-shadow: 0 5px 16px rgba(0, 0, 0, 0.052);
  --matsnawi-header-max-height: 280px;
}

html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }

body {
  background: var(--matsnawi-bg) !important;
  color: var(--matsnawi-text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13.5px;
  line-height: 1.62;
  overflow-x: hidden;
}

img, video, iframe, table { max-width: 100%; }
img { height: auto; }

a { color: var(--matsnawi-link); text-decoration: none; }
a:hover, a:focus { color: var(--matsnawi-green-dark); text-decoration: underline; }
p { margin-top: 0; margin-bottom: 13px; }
strong, b { font-weight: 700; }

.pkp_structure_content, .pkp_structure_main { background: transparent !important; }
.pkp_structure_content { max-width: 1180px; margin-left: auto; margin-right: auto; }
.pkp_structure_main { padding-top: 26px; }

.pkp_page_index .page_index_journal,
.pkp_page_index .homepage_about,
.pkp_page_index .current_issue,
.pkp_page_index .sections { line-height: 1.62; }

.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_page_index .homepage_about,
.pkp_page_index .obj_article_summary { overflow-wrap: anywhere; word-break: normal; }

/* HEADER / BANNER */
.pkp_structure_head,
.pkp_structure_head .pkp_head_wrapper,
.pkp_structure_head .pkp_site_name,
.pkp_structure_head .pkp_site_name_wrapper { background: var(--matsnawi-green) !important; }
.pkp_structure_head { border-bottom: none !important; }
.pkp_structure_head .pkp_head_wrapper { padding-top: 0 !important; padding-bottom: 0 !important; }
.pkp_structure_head .pkp_site_name { margin: 0 !important; padding: 0 !important; text-align: center; }
.pkp_structure_head .pkp_site_name .is_img { display: block !important; line-height: 0 !important; width: 100% !important; background: var(--matsnawi-green) !important; }
.pkp_structure_head .pkp_site_name .is_img img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: var(--matsnawi-header-max-height) !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  background: var(--matsnawi-green) !important;
}
.pkp_structure_head .pkp_site_name > a:not(.is_img) {
  color: #ffffff !important;
  font-weight: 800;
  line-height: 1.2;
  padding: 30px 15px;
  display: block;
}

/* NAVIGATION */
.pkp_structure_head .pkp_navigation_primary_row {
  background: var(--matsnawi-black) !important;
  margin-top: 0 !important;
  border: none !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.20);
}
.pkp_structure_head .pkp_navigation_primary_wrapper {
  background: var(--matsnawi-black) !important;
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 42px;
}
.pkp_structure_head .pkp_navigation_primary {
  background: var(--matsnawi-black) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  float: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  width: auto !important;
  max-width: calc(100% - 120px);
  text-align: center !important;
}
.pkp_structure_head .pkp_navigation_primary > li { float: none !important; display: inline-flex !important; align-items: center !important; }
.pkp_structure_head .pkp_navigation_primary > li > a,
.pkp_structure_head .pkp_navigation_primary > li > a:link,
.pkp_structure_head .pkp_navigation_primary > li > a:visited {
  color: #ffffff !important;
  background: var(--matsnawi-black) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  white-space: nowrap;
}
.pkp_structure_head .pkp_navigation_primary > li > a:hover,
.pkp_structure_head .pkp_navigation_primary > li > a:focus,
.pkp_structure_head .pkp_navigation_primary > li > a:active { color: var(--matsnawi-yellow) !important; background: var(--matsnawi-black) !important; }
.pkp_structure_head .pkp_navigation_search_wrapper {
  color: #ffffff !important;
  background: var(--matsnawi-black) !important;
  position: absolute !important;
  right: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.pkp_structure_head .pkp_navigation_search_wrapper a,
.pkp_structure_head .pkp_navigation_search_wrapper a:link,
.pkp_structure_head .pkp_navigation_search_wrapper a:visited { color: #ffffff !important; background: var(--matsnawi-black) !important; font-weight: 700 !important; }
.pkp_structure_head .pkp_navigation_search_wrapper a:hover,
.pkp_structure_head .pkp_navigation_search_wrapper a:focus { color: var(--matsnawi-yellow) !important; }

.pkp_structure_head .pkp_navigation_primary .dropdown-menu,
.pkp_structure_head .pkp_navigation_primary ul { background: #ffffff !important; border: 1px solid var(--matsnawi-border) !important; box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.pkp_structure_head .pkp_navigation_primary .dropdown-menu a,
.pkp_structure_head .pkp_navigation_primary ul a { color: #222222 !important; background: #ffffff !important; }
.pkp_structure_head .pkp_navigation_primary .dropdown-menu a:hover,
.pkp_structure_head .pkp_navigation_primary ul a:hover { color: #000000 !important; background: #f2f2f2 !important; }

/* ABOUT THE JOURNAL / SUMMARY — CLEAN, NO LEFT LINE */
.pkp_page_index .homepage_about {
  background: var(--matsnawi-card);
  border: 1px solid #edf1f1;
  padding: 24px 28px;
  margin-bottom: 42px;
  box-shadow: var(--matsnawi-shadow);
  border-radius: 3px;
}
.pkp_page_index .homepage_about::before,
.pkp_page_index .homepage_about::after { content: none !important; display: none !important; }
.pkp_page_index .homepage_about h2 {
  color: var(--matsnawi-black);
  font-size: 24px;
  font-weight: 800;
  margin-top: 0;
  margin-bottom: 14px;
  line-height: 1.22;
  letter-spacing: -0.25px;
}
.pkp_page_index .homepage_about h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  background: var(--matsnawi-yellow);
  margin-top: 9px;
  border-radius: 4px;
}
.pkp_page_index .homepage_about p { font-size: 13.25px; line-height: 1.62; color: #222222; text-align: left; margin-bottom: 12px; max-width: 900px; }
.pkp_page_index .homepage_about p:last-child { margin-bottom: 0; }
.pkp_page_index .homepage_about strong { font-weight: 700; }

/* CURRENT ISSUE + ARTICLES */
.pkp_page_index .current_issue { margin-top: 6px; margin-bottom: 46px; }
.pkp_page_index .current_issue h2 {
  color: var(--matsnawi-black);
  font-size: 27px;
  font-weight: 800;
  margin-bottom: 22px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--matsnawi-green);
  letter-spacing: -0.2px;
}
.pkp_page_index .current_issue .current_issue_title,
.pkp_page_index .current_issue h3 { color: var(--matsnawi-black); font-weight: 700; line-height: 1.34; }
.pkp_page_index .current_issue .obj_issue_toc { background: transparent; }
.pkp_page_index .current_issue .cover { margin-right: 25px; }
.pkp_page_index .current_issue .cover img,
.pkp_page_index .obj_issue_toc .cover img { border: 1px solid var(--matsnawi-border); box-shadow: 0 7px 18px rgba(0,0,0,0.14); border-radius: 2px; max-width: 210px; }
.pkp_page_index .obj_issue_toc .sections { margin-top: 24px; }
.pkp_page_index .obj_issue_toc .section { margin-bottom: 18px; }
.pkp_page_index .obj_issue_toc .section h3 { border-bottom: 1px solid var(--matsnawi-border); padding-bottom: 8px; color: var(--matsnawi-black); font-weight: 800; }
.pkp_page_index .obj_article_summary { padding: 17px 10px; border-bottom: 1px solid #e8e8e8; border-radius: 3px; transition: background .2s ease; }
.pkp_page_index .obj_article_summary:hover { background: #fbfdfd; }
.pkp_page_index .obj_article_summary .title { font-size: 14.4px; line-height: 1.42; font-weight: 700; }
.pkp_page_index .obj_article_summary .title a { color: var(--matsnawi-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pkp_page_index .obj_article_summary .title a:hover { color: var(--matsnawi-green-dark); }
.pkp_page_index .obj_article_summary .authors,
.pkp_page_index .obj_article_summary .meta { color: #333333; font-size: 12.5px; line-height: 1.48; }

.pkp_page_index .obj_article_summary .galleys_links a,
.pkp_page_index .galleys_links a,
.pkp_page_index a.obj_galley_link {
  border: 1px solid var(--matsnawi-link) !important;
  color: var(--matsnawi-link) !important;
  background: #ffffff !important;
  border-radius: 4px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 5px 10px !important;
  box-shadow: 0 2px 5px rgba(0,111,166,0.06);
}
.pkp_page_index .obj_article_summary .galleys_links a:hover,
.pkp_page_index .galleys_links a:hover,
.pkp_page_index a.obj_galley_link:hover { background: var(--matsnawi-link) !important; color: #ffffff !important; text-decoration: none !important; }
.pkp_page_index .current_issue .read_more,
.pkp_page_index .current_issue .read_more a { font-weight: 700; }

/* SIDEBAR */
.pkp_structure_sidebar .block { border: 1px solid var(--matsnawi-border); background: #ffffff; margin-bottom: 22px; box-shadow: 0 4px 13px rgba(0,0,0,0.045); border-radius: 2px; overflow: hidden; }
.pkp_structure_sidebar .block .title { background: var(--matsnawi-green); color: #ffffff !important; padding: 10px 12px; margin: 0 !important; font-size: 13.5px; font-weight: 700; text-transform: uppercase; border-bottom: none; }
.pkp_structure_sidebar .block ul { margin: 0; padding: 0; list-style: none; }
.pkp_structure_sidebar .block li { border-top: 1px solid #e8e8e8; }
.pkp_structure_sidebar .block li:first-child { border-top: none; }
.pkp_structure_sidebar .block a { display: block; padding: 9.5px 12px; color: #333333; font-weight: 400; font-size: 12.8px; }
.pkp_structure_sidebar .block a:hover { color: var(--matsnawi-green-dark); background: #f7fbfa; text-decoration: none; }
.pkp_structure_sidebar img { max-width: 100%; height: auto; }
.pkp_structure_sidebar .block_custom { background: transparent; }

/* FOOTER */
.pkp_structure_footer_wrapper,
.pkp_structure_footer { background: #dcdcdc !important; }
.pkp_structure_footer { color: #222222; line-height: 1.6; font-size: 12.2px; }
.pkp_structure_footer a { color: var(--matsnawi-link); }

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 1100px) {
  .pkp_structure_content { padding-left: 18px; padding-right: 18px; }
  .pkp_structure_head .pkp_navigation_primary > li > a { padding-left: 13px !important; padding-right: 13px !important; font-size: 12.8px !important; }
}

@media (max-width: 992px) {
  :root { --matsnawi-header-max-height: 220px; }
  body { font-size: 13.2px; }
  .pkp_structure_main { padding-top: 22px; }
  .pkp_page_index .homepage_about { padding: 22px 24px; margin-bottom: 34px; }
  .pkp_page_index .homepage_about h2 { font-size: 23px; }
  .pkp_page_index .homepage_about p { font-size: 13.1px; }
  .pkp_page_index .current_issue h2 { font-size: 25px; }
  .pkp_structure_head .pkp_navigation_primary { max-width: calc(100% - 90px); }
}

@media (max-width: 768px) {
  :root { --matsnawi-header-max-height: 185px; }
  .pkp_structure_content { padding-left: 14px; padding-right: 14px; }
  .pkp_structure_head .pkp_navigation_primary_wrapper { display: block !important; text-align: center !important; padding-top: 4px; padding-bottom: 5px; }
  .pkp_structure_head .pkp_navigation_primary { display: flex !important; width: 100% !important; max-width: 100% !important; justify-content: center !important; flex-wrap: wrap !important; }
  .pkp_structure_head .pkp_navigation_primary > li { display: inline-flex !important; }
  .pkp_structure_head .pkp_navigation_primary > li > a { font-size: 12.3px !important; padding: 8px 10px !important; }
  .pkp_structure_head .pkp_navigation_search_wrapper { position: static !important; transform: none !important; display: block !important; text-align: center !important; padding: 4px 0 2px 0 !important; }
  .pkp_page_index .homepage_about { padding: 20px 18px; }
  .pkp_page_index .current_issue .cover,
  .pkp_page_index .obj_issue_toc .cover { float: none !important; margin: 0 0 18px 0 !important; text-align: center; }
  .pkp_page_index .current_issue .cover img,
  .pkp_page_index .obj_issue_toc .cover img { max-width: 180px; }
  .pkp_structure_sidebar { margin-top: 28px; }
}

@media (max-width: 600px) {
  :root { --matsnawi-header-max-height: 150px; }
  body { font-size: 13px; line-height: 1.58; }
  .pkp_structure_content { padding-left: 12px; padding-right: 12px; }
  .pkp_structure_main { padding-top: 18px; }
  .pkp_structure_head .pkp_site_name .is_img img { width: 100% !important; height: auto !important; }
  .pkp_structure_head .pkp_navigation_primary > li > a { font-size: 12px !important; padding: 7px 8px !important; }
  .pkp_page_index .homepage_about { padding: 18px 16px; margin-bottom: 30px; box-shadow: 0 3px 10px rgba(0,0,0,0.045); }
  .pkp_page_index .homepage_about h2 { font-size: 22px; margin-bottom: 12px; }
  .pkp_page_index .homepage_about h2::after { width: 56px; height: 3px; }
  .pkp_page_index .homepage_about p { font-size: 13px; line-height: 1.58; margin-bottom: 11px; }
  .pkp_page_index .current_issue h2 { font-size: 24px; margin-bottom: 18px; }
  .pkp_page_index .current_issue .cover img,
  .pkp_page_index .obj_issue_toc .cover img { max-width: 155px; }
  .pkp_page_index .obj_article_summary { padding: 15px 8px; }
  .pkp_page_index .obj_article_summary .title { font-size: 13.8px; }
  .pkp_page_index .obj_article_summary .authors,
  .pkp_page_index .obj_article_summary .meta { font-size: 12.2px; }
  .pkp_page_index .obj_article_summary .galleys_links a,
  .pkp_page_index .galleys_links a,
  .pkp_page_index a.obj_galley_link { font-size: 11px !important; padding: 4px 8px !important; }
  .pkp_structure_sidebar .block .title { font-size: 13px; }
  .pkp_structure_sidebar .block a { font-size: 12.6px; }
}

@media (max-width: 420px) {
  :root { --matsnawi-header-max-height: 125px; }
  .pkp_structure_content { padding-left: 10px; padding-right: 10px; }
  .pkp_structure_head .pkp_navigation_primary > li > a { font-size: 11.5px !important; padding: 6px 7px !important; }
  .pkp_page_index .homepage_about { padding: 16px 14px; }
  .pkp_page_index .homepage_about h2 { font-size: 20px; }
  .pkp_page_index .homepage_about p { font-size: 12.8px; }
  .pkp_page_index .current_issue h2 { font-size: 22px; }
}

/* ==================================================
   9. PREMIUM HERO SUBMIT SIDEBAR BLOCK
   ==================================================

   HTML snippet for the sidebar custom block:

   <div class="matsnawi-submit-premium-sidebar">
     <div class="label">Open Access Journal</div>
     <h3>Submit Your Paper</h3>
     <p>Publish your work in tasawwuf, Islamic psychotherapy, Sufi psychology, and psychospiritual studies.</p>
     <ul>
       <li>Peer-reviewed</li>
       <li>Open Access</li>
       <li>Published twice a year</li>
     </ul>
     <a class="btn" href="https://journal2.uinssc.ac.id/index.php/matsnawi/submission">Start Submission</a>
   </div>
*/

.matsnawi-submit-premium-sidebar {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  padding: 18px 16px;
  color: #ffffff !important;
  background:
    radial-gradient(circle at right top, rgba(255, 210, 0, .24), transparent 36%),
    linear-gradient(145deg, #005f53 0%, #009C87 58%, #007B6B 100%) !important;
  box-shadow: 0 8px 20px rgba(0,156,135,.18);
  margin: 0 0 20px 0;
}

.matsnawi-submit-premium-sidebar::before {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
}

.matsnawi-submit-premium-sidebar::after {
  content: "";
  position: absolute;
  left: -42px;
  bottom: -42px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: rgba(255,255,255,.055);
}

.matsnawi-submit-premium-sidebar .label {
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  margin-bottom: 14px;
  color: #ffffff !important;
  line-height: 1.35;
}

.matsnawi-submit-premium-sidebar h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  font-size: 24px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.2px;
  color: #ffffff !important;
  font-weight: 800 !important;
  text-transform: none !important;
  border: 0 !important;
  background: transparent !important;
}

.matsnawi-submit-premium-sidebar p {
  position: relative;
  z-index: 1;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  font-size: 12.8px !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,.94) !important;
}

.matsnawi-submit-premium-sidebar ul {
  position: relative;
  z-index: 1;
  margin: 0 0 18px 16px !important;
  padding: 0 !important;
  color: rgba(255,255,255,.92) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  list-style: disc !important;
}

.matsnawi-submit-premium-sidebar li {
  margin-bottom: 3px !important;
  padding: 0 !important;
  color: rgba(255,255,255,.92) !important;
  border: 0 !important;
  background: transparent !important;
}

.matsnawi-submit-premium-sidebar .btn,
.matsnawi-submit-premium-sidebar a.btn {
  position: relative;
  z-index: 1;
  display: block !important;
  text-align: center;
  background: #ffffff !important;
  color: #006d5f !important;
  padding: 10px 12px !important;
  border-radius: 4px;
  text-decoration: none !important;
  font-weight: 800 !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  border: 0 !important;
}

.matsnawi-submit-premium-sidebar .btn:hover,
.matsnawi-submit-premium-sidebar a.btn:hover {
  background: #f7f7f7 !important;
  color: #00574c !important;
  text-decoration: none !important;
}

/* Keep the Premium Hero compact on mobile */
@media (max-width: 600px) {
  .matsnawi-submit-premium-sidebar {
    padding: 16px 14px;
  }

  .matsnawi-submit-premium-sidebar h3 {
    font-size: 22px !important;
  }

  .matsnawi-submit-premium-sidebar p {
    font-size: 12.5px !important;
  }
}

/* ==================================================
   10. MINIMAL INTERNATIONAL WHATSAPP SIDEBAR BLOCK
   ==================================================

   HTML snippet for sidebar custom block:

   <div class="matsnawi-whatsapp-minimal">
     <div class="bar"></div>
     <div class="content">
       <div class="small">Need Assistance?</div>
       <h3>WhatsApp Contact</h3>
       <p>Contact the editorial office for submission-related enquiries.</p>
       <a class="btn" href="https://wa.me/6282130305179" target="_blank" rel="noopener">Message Us</a>
     </div>
   </div>
*/

.matsnawi-whatsapp-minimal {
  background: #ffffff;
  border: 1px solid var(--matsnawi-border, #e6e6e6);
  border-radius: 5px;
  overflow: hidden;
  margin: 0 0 20px 0;
  box-shadow: 0 4px 13px rgba(0,0,0,0.045);
}

.matsnawi-whatsapp-minimal .bar {
  height: 7px;
  background: linear-gradient(90deg, #25D366, #009C87, #202020);
}

.matsnawi-whatsapp-minimal .content {
  padding: 17px 16px;
}

.matsnawi-whatsapp-minimal .small {
  font-size: 10.5px;
  font-weight: 700;
  color: #128C7E;
  text-transform: uppercase;
  margin-bottom: 8px;
  line-height: 1.35;
  letter-spacing: 0.2px;
}

.matsnawi-whatsapp-minimal h3 {
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  font-size: 20px !important;
  line-height: 1.15 !important;
  color: #202020 !important;
  font-weight: 800 !important;
  text-transform: none !important;
  border: 0 !important;
  background: transparent !important;
}

.matsnawi-whatsapp-minimal p {
  margin: 0 0 15px 0 !important;
  padding: 0 !important;
  font-size: 12.7px !important;
  line-height: 1.55 !important;
  color: #444444 !important;
}

.matsnawi-whatsapp-minimal .btn,
.matsnawi-whatsapp-minimal a.btn {
  display: block !important;
  text-align: center;
  background: #202020 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 10px 12px !important;
  border-radius: 4px;
  font-weight: 800 !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  border: 0 !important;
}

.matsnawi-whatsapp-minimal .btn:hover,
.matsnawi-whatsapp-minimal a.btn:hover {
  background: #009C87 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

@media (max-width: 600px) {
  .matsnawi-whatsapp-minimal .content {
    padding: 15px 14px;
  }

  .matsnawi-whatsapp-minimal h3 {
    font-size: 19px !important;
  }

  .matsnawi-whatsapp-minimal p {
    font-size: 12.5px !important;
  }
}

/* ==================================================
   11. LEGACY WHATSAPP BLOCK UPGRADE
   ==================================================

   This section styles the existing old WhatsApp HTML block,
   so you do not have to fully rebuild the sidebar immediately.

   It targets the existing WhatsApp image link:
   <a href="https://wa.me/..."><img alt="Contact on WhatsApp"></a>
*/

/* Remove excessive spacing around the old WhatsApp paragraph */
.pkp_structure_sidebar p:has(a[href*="wa.me"]),
.pkp_structure_sidebar .block_custom p:has(a[href*="wa.me"]) {
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
}

/* Transform the old WhatsApp image link into a cleaner card container */
.pkp_structure_sidebar a[href*="wa.me"],
.pkp_structure_sidebar .block_custom a[href*="wa.me"] {
  display: block !important;
  position: relative;
  overflow: hidden;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  border: 1px solid var(--matsnawi-border, #e6e6e6);
  border-radius: 5px;
  background: #ffffff !important;
  box-shadow: 0 4px 13px rgba(0,0,0,0.045);
  text-decoration: none !important;
}

/* Add a minimal international top bar */
.pkp_structure_sidebar a[href*="wa.me"]::before,
.pkp_structure_sidebar .block_custom a[href*="wa.me"]::before {
  content: "";
  display: block;
  height: 7px;
  background: linear-gradient(90deg, #25D366, #009C87, #202020);
}

/* Replace the heavy yellow image feeling with a cleaner visual treatment */
.pkp_structure_sidebar a[href*="wa.me"] img,
.pkp_structure_sidebar .block_custom a[href*="wa.me"] img,
.pkp_structure_sidebar img[alt*="WhatsApp"],
.pkp_structure_sidebar img[alt*="Whatsapp"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  padding: 16px 16px 14px 16px !important;
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Add a cleaner CTA line under the old image */
.pkp_structure_sidebar a[href*="wa.me"]::after,
.pkp_structure_sidebar .block_custom a[href*="wa.me"]::after {
  content: "Message Us";
  display: block;
  margin: 0 16px 16px 16px;
  padding: 10px 12px;
  border-radius: 4px;
  background: #202020;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

/* Optional: make the old green WhatsApp title block less dominant when it remains above the image */
.pkp_structure_sidebar div[style*="background-color: #009c85"],
.pkp_structure_sidebar div[style*="background-color:#009c85"],
.pkp_structure_sidebar div[style*="background-color: #009C85"],
.pkp_structure_sidebar div[style*="background-color:#009C85"] {
  background: #009C87 !important;
}

/* Mobile refinement */
@media (max-width: 600px) {
  .pkp_structure_sidebar a[href*="wa.me"] img,
  .pkp_structure_sidebar .block_custom a[href*="wa.me"] img,
  .pkp_structure_sidebar img[alt*="WhatsApp"],
  .pkp_structure_sidebar img[alt*="Whatsapp"] {
    padding: 14px 14px 12px 14px !important;
  }

  .pkp_structure_sidebar a[href*="wa.me"]::after,
  .pkp_structure_sidebar .block_custom a[href*="wa.me"]::after {
    margin: 0 14px 14px 14px;
    font-size: 12.3px;
  }
}

/* ==================================================
   12. LEGACY TOOLS BLOCK UPGRADE
   ==================================================

   This section improves the existing Tools block that currently uses:
   - Turnitin image
   - Zotero image (alt="Reference Manager")
   - Mendeley image (alt="Academic Tool")

   It keeps the existing HTML but makes the block cleaner and more consistent.
*/

/* Tool logo links become neat white cards */
.pkp_structure_sidebar a:has(img[alt="Turnitin"]),
.pkp_structure_sidebar a:has(img[alt="Reference Manager"]),
.pkp_structure_sidebar a:has(img[alt="Academic Tool"]),
.pkp_structure_sidebar .block_custom a:has(img[alt="Turnitin"]),
.pkp_structure_sidebar .block_custom a:has(img[alt="Reference Manager"]),
.pkp_structure_sidebar .block_custom a:has(img[alt="Academic Tool"]) {
  display: block !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  background: #ffffff !important;
  border-top: 1px solid #ececec !important;
  text-align: center !important;
  text-decoration: none !important;
}

/* First tool card should not look separated by an extra border if it is right after the heading */
.pkp_structure_sidebar img[alt="Turnitin"],
.pkp_structure_sidebar img[alt="Reference Manager"],
.pkp_structure_sidebar img[alt="Academic Tool"],
.pkp_structure_sidebar .block_custom img[alt="Turnitin"],
.pkp_structure_sidebar .block_custom img[alt="Reference Manager"],
.pkp_structure_sidebar .block_custom img[alt="Academic Tool"] {
  display: block !important;
  margin: 0 auto !important;
  width: auto !important;
  max-width: 88% !important;
  height: auto !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Give the dark Mendeley image a bit more breathing room */
.pkp_structure_sidebar img[alt="Academic Tool"],
.pkp_structure_sidebar .block_custom img[alt="Academic Tool"] {
  max-width: 92% !important;
}

/* Remove stray <br> spacing between the tools */
.pkp_structure_sidebar .block_custom br {
  display: none !important;
}

/* If tool images are not wrapped in anchors, still make them feel like cards */
.pkp_structure_sidebar img[alt="Academic Tool"] {
  padding: 14px 16px !important;
  background: #ffffff !important;
  border-top: 1px solid #ececec !important;
}

/* Hover effect for linked tools */
.pkp_structure_sidebar a:has(img[alt="Turnitin"]):hover,
.pkp_structure_sidebar a:has(img[alt="Reference Manager"]):hover,
.pkp_structure_sidebar a:has(img[alt="Academic Tool"]):hover,
.pkp_structure_sidebar .block_custom a:has(img[alt="Turnitin"]):hover,
.pkp_structure_sidebar .block_custom a:has(img[alt="Reference Manager"]):hover,
.pkp_structure_sidebar .block_custom a:has(img[alt="Academic Tool"]):hover {
  background: #f7fbfa !important;
}

/* Small mobile refinement */
@media (max-width: 600px) {
  .pkp_structure_sidebar a:has(img[alt="Turnitin"]),
  .pkp_structure_sidebar a:has(img[alt="Reference Manager"]),
  .pkp_structure_sidebar a:has(img[alt="Academic Tool"]),
  .pkp_structure_sidebar .block_custom a:has(img[alt="Turnitin"]),
  .pkp_structure_sidebar .block_custom a:has(img[alt="Reference Manager"]),
  .pkp_structure_sidebar .block_custom a:has(img[alt="Academic Tool"]) {
    padding: 12px 12px !important;
  }

  .pkp_structure_sidebar img[alt="Turnitin"],
  .pkp_structure_sidebar img[alt="Reference Manager"],
  .pkp_structure_sidebar img[alt="Academic Tool"],
  .pkp_structure_sidebar .block_custom img[alt="Turnitin"],
  .pkp_structure_sidebar .block_custom img[alt="Reference Manager"],
  .pkp_structure_sidebar .block_custom img[alt="Academic Tool"] {
    max-width: 92% !important;
  }
}

/* ==================================================
   13. MINIMAL INTERNATIONAL TOOLS SIDEBAR BLOCK
   ==================================================

   Replace the old Tools block HTML with:

   <div class="matsnawi-tools-card">
     <div class="matsnawi-tools-title">Tools</div>
     <a class="matsnawi-tool-item" href="https://www.turnitin.com/" target="_blank" rel="noopener">
       <img src="..." alt="Turnitin">
     </a>
     <a class="matsnawi-tool-item" href="https://www.zotero.org/" target="_blank" rel="noopener">
       <img src="..." alt="Zotero">
     </a>
     <a class="matsnawi-tool-item" href="https://www.mendeley.com/" target="_blank" rel="noopener">
       <img src="..." alt="Mendeley">
     </a>
   </div>
*/

.matsnawi-tools-card {
  background: #ffffff;
  border: 1px solid var(--matsnawi-border, #e6e6e6);
  border-radius: 6px;
  overflow: hidden;
  margin: 20px 0;
  box-shadow: 0 4px 13px rgba(0,0,0,0.045);
}

.matsnawi-tools-title {
  background: linear-gradient(135deg, #008f7c 0%, #009C87 100%);
  color: #ffffff;
  padding: 18px 20px;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.matsnawi-tool-item,
.matsnawi-tool-item:link,
.matsnawi-tool-item:visited {
  display: block !important;
  margin: 16px 16px 0 16px !important;
  padding: 20px 18px !important;
  background: #ffffff !important;
  border: 1px solid #dedede !important;
  border-radius: 8px !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: 0 2px 7px rgba(0,0,0,0.035);
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.matsnawi-tool-item:last-child {
  margin-bottom: 16px !important;
}

.matsnawi-tool-item:hover,
.matsnawi-tool-item:focus {
  background: #fbfdfd !important;
  border-color: rgba(0,156,135,.35) !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 13px rgba(0,0,0,0.07);
  text-decoration: none !important;
}

.matsnawi-tool-item img {
  display: block !important;
  width: auto !important;
  max-width: 92% !important;
  height: auto !important;
  max-height: 92px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Turnitin image is usually taller; let it breathe but keep it controlled */
.matsnawi-tool-item img[alt="Turnitin"] {
  max-height: 112px !important;
}

/* Zotero and Mendeley should stay visually balanced */
.matsnawi-tool-item img[alt="Zotero"],
.matsnawi-tool-item img[alt="Mendeley"] {
  max-height: 78px !important;
}

/* Remove legacy br spacing if it remains near the tools */
.matsnawi-tools-card br {
  display: none !important;
}

@media (max-width: 600px) {
  .matsnawi-tools-title {
    padding: 15px 16px;
    font-size: 20px;
  }

  .matsnawi-tool-item,
  .matsnawi-tool-item:link,
  .matsnawi-tool-item:visited {
    margin-left: 14px !important;
    margin-right: 14px !important;
    padding: 17px 14px !important;
  }

  .matsnawi-tool-item img {
    max-width: 94% !important;
  }
}

/* =========================================================
   Matsnawi - Landing Page Titles + Full Replacement Add-on
   Added: 2026-08-11
   Purpose: restore prominent page titles on static/custom pages
   such as Editorial Board, Reviewer, Peer Review Process,
   Retraction Policy, Plagiarism Policy, Publication Ethics,
   Author Fees, Contact, and similar landing pages.
   ========================================================= */

/* Main page titles generated by OJS */
.pkp_structure_main .page > h1,
.pkp_structure_main .page > .page_title,
.pkp_structure_main .page_title,
.pkp_structure_main h1.page_title,
.pkp_structure_main .obj_article_details > h1,
.pkp_structure_main .cmp_breadcrumbs + h1,
.pkp_structure_main .cmp_breadcrumbs + .page_title {
  display: block !important;
  font-size: 30px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  color: #111111 !important;
  margin-top: 0 !important;
  margin-bottom: 22px !important;
  letter-spacing: -0.25px !important;
}

/* If a static page title is manually placed as the first H2/H3 inside content */
.pkp_structure_main .page > h2:first-child,
.pkp_structure_main .page > h3:first-child,
.pkp_structure_main .page .page_content > h2:first-child,
.pkp_structure_main .page .page_content > h3:first-child,
.pkp_structure_main .page .entry_details > h2:first-child,
.pkp_structure_main .page .entry_details > h3:first-child {
  display: block !important;
  font-size: 30px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  color: #111111 !important;
  margin-top: 0 !important;
  margin-bottom: 22px !important;
  letter-spacing: -0.25px !important;
}

/* Accent underline for main title only */
.pkp_structure_main .page > h1::after,
.pkp_structure_main .page > .page_title::after,
.pkp_structure_main .page_title::after,
.pkp_structure_main h1.page_title::after,
.pkp_structure_main .cmp_breadcrumbs + h1::after,
.pkp_structure_main .cmp_breadcrumbs + .page_title::after,
.pkp_structure_main .page > h2:first-child::after,
.pkp_structure_main .page > h3:first-child::after,
.pkp_structure_main .page .page_content > h2:first-child::after,
.pkp_structure_main .page .page_content > h3:first-child::after,
.pkp_structure_main .page .entry_details > h2:first-child::after,
.pkp_structure_main .page .entry_details > h3:first-child::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  background: #009C87;
  margin-top: 12px;
  border-radius: 4px;
}

/* Internal headings in static pages */
.pkp_structure_main .page h2:not(:first-child),
.pkp_structure_main .page h3:not(:first-child),
.pkp_structure_main .page .page_content h2:not(:first-child),
.pkp_structure_main .page .page_content h3:not(:first-child) {
  font-size: 20px !important;
  line-height: 1.35 !important;
  font-weight: 750 !important;
  color: #111111 !important;
  margin-top: 28px !important;
  margin-bottom: 12px !important;
}

/* Keep article titles readable but do not force policy-page styling too aggressively */
.pkp_structure_main .obj_article_details > h1 {
  font-size: 28px !important;
  line-height: 1.28 !important;
}

/* Desktop height balancing for the premium submit sidebar card */
@media (min-width: 993px) {
  .pkp_page_index .matsnawi-submit-premium-sidebar {
    min-height: 455px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .pkp_page_index .matsnawi-submit-premium-sidebar .label,
  .pkp_page_index .matsnawi-submit-premium-sidebar h3,
  .pkp_page_index .matsnawi-submit-premium-sidebar p,
  .pkp_page_index .matsnawi-submit-premium-sidebar ul,
  .pkp_page_index .matsnawi-submit-premium-sidebar .btn {
    flex: 0 0 auto;
  }

  .pkp_page_index .matsnawi-submit-premium-sidebar p {
    margin-bottom: 18px !important;
  }

  .pkp_page_index .matsnawi-submit-premium-sidebar ul {
    margin-top: auto !important;
    margin-bottom: 26px !important;
  }
}

@media (min-width: 993px) and (max-width: 1300px) {
  .pkp_page_index .matsnawi-submit-premium-sidebar {
    min-height: 430px;
  }
}

@media (max-width: 992px) {
  .pkp_page_index .matsnawi-submit-premium-sidebar {
    min-height: 0;
    display: block;
  }
}

@media (max-width: 768px) {
  .pkp_structure_main .page > h1,
  .pkp_structure_main .page > .page_title,
  .pkp_structure_main .page_title,
  .pkp_structure_main h1.page_title,
  .pkp_structure_main .cmp_breadcrumbs + h1,
  .pkp_structure_main .cmp_breadcrumbs + .page_title,
  .pkp_structure_main .page > h2:first-child,
  .pkp_structure_main .page > h3:first-child,
  .pkp_structure_main .page .page_content > h2:first-child,
  .pkp_structure_main .page .page_content > h3:first-child,
  .pkp_structure_main .page .entry_details > h2:first-child,
  .pkp_structure_main .page .entry_details > h3:first-child {
    font-size: 24px !important;
    margin-bottom: 18px !important;
  }

  .pkp_structure_main .obj_article_details > h1 {
    font-size: 22px !important;
  }
}