/* =========================================================
   JOURNAL OF RESEARCH IN MIDWIFERY AND HEALTHCARE THEME
   Palette final: turquoise dan pink,
   dengan putih dan warna netral sebagai pendukung. Struktur class tetap mengikuti file awal.
========================================================= */

/* Logo header - responsive */
.pkp_site_name .is_img img{
  display: block;
  margin-top: 20px;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

.pkp_navigation_user>li:last-child>a {
        margin-right: 0.286rem;
    }

/* ===============================
   Centralized Header Palette
   =============================== */

:root{
  /* Main header colors */
  --exj-primary-950:#04545F;
  --exj-primary-900:#067481;
  --exj-primary-800:#0891A5;
  --exj-primary-700:#10AFC4;
  --exj-primary-600:#22C6D8;
  --exj-primary-500:#5DE5EF;
  --exj-primary-50:#EAFDFF;

  /* Pink accent */
  --exj-accent-700:#BE185D;
  --exj-accent-600:#DB2777;
  --exj-accent-500:#EC4899;
  --exj-accent-400:#F472B6;
  --exj-accent-50:#FDF2F8;

  /* Neutral system */
  --exj-white:#ffffff;
  --exj-text:#0F2530;
  --exj-muted:#5E7380;
  --exj-border:#CDEFF3;
  --exj-soft-border:#A8E8EF;

  /* Effects */
  --exj-shadow:0 12px 30px rgba(4,84,95,.14);
  --exj-shadow-strong:0 16px 36px rgba(4,84,95,.22);
  --exj-primary-shadow:rgba(16,175,196,.18);
  --exj-primary-shadow-hover:rgba(16,175,196,.28);
  --exj-accent-shadow:rgba(236,72,153,.28);
  --exj-white-alpha-25:rgba(255,255,255,.25);
  --exj-primary-alpha-10:rgba(16,175,196,.10);
  --exj-primary-alpha-12:rgba(16,175,196,.12);
  --exj-primary-alpha-18:rgba(16,175,196,.18);
  --exj-accent-alpha-25:rgba(236,72,153,.25);
}

/* Cover image */
.exj-cover img{
  width: 100% !important;
  height: auto !important;
  border-radius: 18px;
  border: 1px solid var(--exj-border);
  box-shadow: var(--exj-shadow);
  display:block;
}

/* Card container */
.content.exj-card{
  background: var(--exj-white) !important;
  border: 1px solid var(--exj-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--exj-shadow);
}

/* Title bar */
.exj-title{
  padding: 12px 12px !important;
  background: linear-gradient(135deg, var(--exj-primary-900), var(--exj-primary-600)) !important;
  border-bottom: 1px solid var(--exj-white-alpha-25) !important;
  color: var(--exj-white) !important;
  letter-spacing: .2px;
}

.exj-title strong,
.exj-title span{
  color: var(--exj-white) !important;
}

/* Buttons */
.exj-btn{
  display:block;
  border-radius: 18px !important;
  border: 1px solid var(--exj-soft-border) !important;
  background: var(--exj-white) !important;
  color: var(--exj-text) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  box-shadow: 0 10px 22px var(--exj-primary-alpha-10);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}

.exj-btn-primary{
  background: linear-gradient(135deg, var(--exj-primary-800), var(--exj-primary-500)) !important;
  color: var(--exj-white) !important;
  border: 1px solid var(--exj-primary-600) !important;
}

.exj-btn-ghost{
  background: var(--exj-white) !important;
  color: var(--exj-primary-900) !important;
}

/* Button hover */
.exj-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px var(--exj-primary-shadow-hover);
}

.exj-btn-primary:hover{
  background: linear-gradient(135deg, var(--exj-primary-900), var(--exj-accent-500)) !important;
  color: var(--exj-white) !important;
}

.exj-btn-ghost:hover{
  border-color: var(--exj-accent-500) !important;
  background: var(--exj-accent-50) !important;
  color: var(--exj-primary-900) !important;
}

/* Button row spacing fix on small screens */
.exj-btn-row{
  display:flex !important;
  gap: 12px !important;
}

@media (max-width: 420px){
  .exj-btn-row{ flex-direction: column !important; }
}

/* Menu items */
.exj-item{
  padding: 0 !important;
  background: var(--exj-white) !important;
  border-bottom: 1px solid var(--exj-border) !important;
}

.exj-link{
  display:block;
  padding: 12px 12px !important;
  color: var(--exj-primary-900) !important;
  font-weight: 800;
  text-decoration: none !important;
  position: relative;
  transition: background .15s ease, transform .15s ease, color .15s ease;
}

.exj-link:hover{
  background: var(--exj-primary-50) !important;
  color: var(--exj-primary-950) !important;
  transform: translateX(2px);
}

/* Left accent line */
.exj-link::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 4px;
  background: linear-gradient(180deg, var(--exj-primary-600), var(--exj-accent-500));
  opacity: 0;
  transition: opacity .15s ease;
}

.exj-link:hover::before{
  opacity: 1;
}

/* ===============================
   Download Section
   =============================== */

.exj-download{
  text-align: center;
  background: var(--exj-white) !important;
  border-bottom: none !important;
  padding: 18px !important;
}

.exj-download-link{
  display: inline-block;
  text-decoration: none !important;
  color: var(--exj-primary-900) !important;
  font-weight: 800;
  transition: transform .2s ease, color .2s ease;
}

.exj-download-link img{
  width: 100% !important;
  max-width: 220px;
  height: auto !important;
  border-radius: 16px;
  border: 1px solid var(--exj-border);
  box-shadow: 0 12px 25px var(--exj-primary-alpha-12);
  margin-bottom: 10px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.exj-download-link:hover{
  color: var(--exj-accent-700) !important;
}

.exj-download-link:hover img{
  transform: translateY(-3px);
  border-color: var(--exj-accent-500);
  box-shadow: 0 16px 35px var(--exj-primary-shadow-hover);
}

.exj-download-text{
  display:block;
  margin-top:4px;
  font-size: 14px;
}

/* ===============================
   Visitor Statistic
   =============================== */

.exj-visitor{
  text-align: center;
  padding: 18px !important;
  border-bottom: none !important;
}

.exj-visitor-wrap img{
  max-width: 100%;
  border-radius: 12px;
  margin-bottom: 10px;
  box-shadow: 0 8px 18px var(--exj-primary-alpha-12);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.exj-visitor-wrap img:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px var(--exj-primary-shadow-hover);
}

/* View My Stats link */
.exj-stat-link{
  display:inline-block;
  margin-top:8px;
  font-weight:800;
  color: var(--exj-primary-800) !important;
  text-decoration:none !important;
  border-bottom:2px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}

.exj-stat-link:hover{
  border-bottom:2px solid var(--exj-accent-500);
  color: var(--exj-primary-950) !important;
}

/* ===============================
   Editorial Office Footer
   =============================== */

.exj-footer-card{
  margin-top: 20px;
  padding: 22px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 10%, var(--exj-accent-alpha-25), transparent 34%),
    linear-gradient(135deg, var(--exj-primary-900), var(--exj-primary-600));
  color: var(--exj-white);
  box-shadow: var(--exj-shadow-strong);
  border-top: 4px solid var(--exj-accent-500);
}

.exj-footer-title{
  font-size: 20px;
  margin-bottom: 12px;
  color: var(--exj-white);
  letter-spacing: .3px;
}

.exj-footer-text{
  font-size: 14px;
  line-height: 1.6;
  color: var(--exj-white);
}

.exj-footer-link{
  color: var(--exj-accent-400) !important;
  text-decoration: none;
  font-weight: 800;
  border-bottom: 2px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}

.exj-footer-link:hover{
  border-bottom: 2px solid var(--exj-white);
  color: var(--exj-white) !important;
}

/* =========================================
   Premium Footer Editorial Office - JRMH
========================================= */

.exj-footer-container{
  margin-top: 24px;
  padding: 26px;
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(236,72,153,.22), transparent 28%),
    linear-gradient(135deg, var(--exj-primary-950) 0%, var(--exj-primary-800) 58%, var(--exj-primary-600) 100%);
  color: var(--exj-white);
  box-shadow: var(--exj-shadow-lg);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
}

.exj-footer-container::before{
  content:"";
  position:absolute;
  right:-70px;
  top:-70px;
  width:190px;
  height:190px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(236,72,153,.28), rgba(229,194,58,0) 70%);
  pointer-events:none;
}

.exj-footer-container::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:7px;
  height:100%;
  background: linear-gradient(180deg, var(--exj-accent-500), var(--exj-accent-800));
  pointer-events:none;
}

.exj-footer-content{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:flex-start;
  gap:28px;
  position:relative;
  z-index:2;
}

.exj-footer-brand{
  max-width:65%;
}

.exj-footer-label{
  display:inline-block;
  margin-bottom:10px;
  padding:6px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.20);
  color:#FDF2F8;
  font-size:12px;
  font-weight:800;
  letter-spacing:.4px;
  text-transform:uppercase;
}

.exj-footer-heading{
  margin:0 0 14px 0;
  font-size:22px;
  line-height:1.35;
  color:var(--exj-white);
  font-weight:900;
  letter-spacing:.2px;
  text-shadow:0 3px 14px rgba(0,0,0,.18);
}

.exj-footer-text{
  margin:0 0 9px 0;
  font-size:14px;
  line-height:1.7;
  color:rgba(255,255,255,.94);
}

.exj-footer-text strong,
.exj-license-text strong{
  color:var(--exj-white);
  font-weight:900;
}

.exj-footer-link{
  color:#FCE7F3 !important;
  text-decoration:none !important;
  font-weight:800;
  border-bottom:2px solid rgba(255,243,189,.25);
  transition:color .2s ease, border-color .2s ease;
}

.exj-footer-link:hover{
  color:#ffffff !important;
  border-bottom-color:#ffffff;
}

.exj-footer-license{
  max-width:30%;
  padding:18px;
  border-radius:20px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 30px rgba(0,0,0,.10);
  backdrop-filter:blur(8px);
}

.exj-footer-license .cc-icon{
  display:block;
  width:88px;
  height:auto;
  margin-bottom:12px;
  border-radius:6px;
  box-shadow:0 8px 18px rgba(0,0,0,.14);
}

.exj-license-text{
  margin:0;
  font-size:13px;
  line-height:1.65;
  color:rgba(255,255,255,.92);
}

/* Responsive footer */
@media (max-width: 768px){
  .exj-footer-container{
    padding:22px;
    border-radius:22px;
  }

  .exj-footer-content{
    flex-direction:column;
    gap:20px;
  }

  .exj-footer-brand,
  .exj-footer-license{
    max-width:100%;
    width:100%;
  }

  .exj-footer-heading{
    font-size:20px;
  }
}

@media (max-width: 480px){
  .exj-footer-container{
    padding:20px;
  }

  .exj-footer-heading{
    font-size:18px;
  }

  .exj-footer-text,
  .exj-license-text{
    font-size:13px;
  }
}


/* =========================================================
   PREMIUM ABOUT JOURNAL + ARTICLE LIST
   Tambahan ringan: hanya border, shadow, dan hover.
   Tidak mengubah layout/header/menu utama.
========================================================= */

/* ===============================
   About the Journal Card
================================= */
.pkp_structure_main .homepage_about{
  position: relative !important;
  margin-top: 24px !important;
  margin-bottom: 30px !important;
  padding: 28px 32px !important;
  border: 1px solid var(--exj-border) !important;
  border-left: 6px solid var(--exj-primary-700) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at top right, var(--exj-accent-alpha-25), transparent 30%),
    linear-gradient(180deg, var(--exj-white) 0%, var(--exj-primary-50) 100%) !important;
  box-shadow: 0 12px 30px var(--exj-primary-alpha-12) !important;
  overflow: hidden !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease !important;
}

.pkp_structure_main .homepage_about::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 4px !important;
  background: linear-gradient(
    90deg,
    var(--exj-primary-700),
    var(--exj-primary-500),
    var(--exj-accent-500)
  ) !important;
  opacity: .95 !important;
}

.pkp_structure_main .homepage_about:hover{
  transform: translateY(-4px) !important;
  border-color: var(--exj-soft-border) !important;
  border-left-color: var(--exj-accent-500) !important;
  background:
    radial-gradient(circle at top right, rgba(236,72,153,.28), transparent 34%),
    linear-gradient(180deg, var(--exj-white) 0%, #FDFBFF 100%) !important;
  box-shadow: 0 18px 42px var(--exj-primary-shadow-hover) !important;
}

.pkp_structure_main .homepage_about h2,
.pkp_structure_main .homepage_about h3{
  margin-top: 0 !important;
  color: var(--exj-primary-950) !important;
  font-weight: 900 !important;
  letter-spacing: .2px !important;
}

.pkp_structure_main .homepage_about p{
  color: var(--exj-text) !important;
  line-height: 1.75 !important;
}

/* ===============================
   Article List Card
   Card hanya diterapkan pada .obj_article_summary
   agar tidak muncul border dobel.
================================= */
.pkp_structure_main .cmp_article_list,
.pkp_structure_main .articles{
  padding-left: 0 !important;
  list-style: none !important;
}

/* Reset elemen list luar supaya tidak dobel */
.pkp_structure_main .cmp_article_list > li,
.pkp_structure_main .articles > li{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  list-style: none !important;
}

/* Card utama artikel */
.pkp_structure_main .obj_article_summary{
  position: relative !important;
  margin: 0 0 24px 0 !important;
  padding: 24px 26px !important;
  border: 1px solid var(--exj-border) !important;
  border-left: 6px solid var(--exj-primary-700) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at top right, rgba(236,72,153,.12), transparent 26%),
    linear-gradient(180deg, var(--exj-white) 0%, #FAFEFF 100%) !important;
  box-shadow: 0 10px 26px var(--exj-primary-alpha-10) !important;
  overflow: hidden !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease !important;
}

.pkp_structure_main .obj_article_summary::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 4px !important;
  background: linear-gradient(
    90deg,
    var(--exj-primary-700),
    var(--exj-primary-500),
    var(--exj-accent-500)
  ) !important;
  opacity: .9 !important;
}

.pkp_structure_main .obj_article_summary:hover{
  transform: translateY(-4px) !important;
  border-color: var(--exj-soft-border) !important;
  border-left-color: var(--exj-accent-500) !important;
  background:
    radial-gradient(circle at top right, rgba(236,72,153,.20), transparent 30%),
    linear-gradient(180deg, var(--exj-white) 0%, var(--exj-primary-50) 100%) !important;
  box-shadow: 0 18px 42px var(--exj-primary-shadow-hover) !important;
}

/* Judul artikel */
.pkp_structure_main .obj_article_summary .title,
.pkp_structure_main .obj_article_summary .title a{
  color: var(--exj-primary-900) !important;
  font-weight: 900 !important;
  line-height: 1.38 !important;
  text-decoration: none !important;
  transition: color .2s ease !important;
}

.pkp_structure_main .obj_article_summary:hover .title,
.pkp_structure_main .obj_article_summary:hover .title a{
  color: var(--exj-primary-950) !important;
}

/* Subtitle, author, dan metadata */
.pkp_structure_main .obj_article_summary .subtitle{
  color: var(--exj-muted) !important;
  margin-top: 6px !important;
  margin-bottom: 12px !important;
}

.pkp_structure_main .obj_article_summary .authors,
.pkp_structure_main .obj_article_summary .authors li,
.pkp_structure_main .obj_article_summary .meta,
.pkp_structure_main .obj_article_summary .doi{
  color: var(--exj-text) !important;
  line-height: 1.6 !important;
}

.pkp_structure_main .obj_article_summary .pages{
  color: var(--exj-muted) !important;
  font-weight: 800 !important;
}

/* Tombol PDF / galley */
.pkp_structure_main .obj_galley_link,
.pkp_structure_main .obj_galley_link.pdf,
.pkp_structure_main .galleys_links a,
.pkp_structure_main a.obj_galley_link{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 12px !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  border: 1px solid var(--exj-primary-700) !important;
  background: var(--exj-white) !important;
  color: var(--exj-primary-900) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px var(--exj-primary-alpha-10) !important;
  transition:
    transform .18s ease,
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;
}

.pkp_structure_main .obj_galley_link:hover,
.pkp_structure_main .obj_galley_link.pdf:hover,
.pkp_structure_main .galleys_links a:hover,
.pkp_structure_main a.obj_galley_link:hover{
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, var(--exj-primary-800), var(--exj-primary-500)) !important;
  border-color: var(--exj-primary-800) !important;
  color: var(--exj-white) !important;
  box-shadow: 0 12px 26px var(--exj-primary-shadow-hover) !important;
}

/* Responsive */
@media (max-width: 768px){
  .pkp_structure_main .homepage_about,
  .pkp_structure_main .obj_article_summary{
    padding: 20px 20px !important;
    border-radius: 18px !important;
  }
}

@media (max-width: 480px){
  .pkp_structure_main .homepage_about,
  .pkp_structure_main .obj_article_summary{
    padding: 18px 16px !important;
    border-radius: 16px !important;
  }
}


/* =========================================================
   USER NAVIGATION BUTTON COLOR + HOVER
   Untuk tombol user navigation OJS seperti Login, Register,
   Dashboard, atau menu user di bagian atas.
========================================================= */

.pkp_navigation_user a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  margin-top: 10px;
  padding-top: .357rem !important;
  padding-bottom: .357rem !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  line-height: 1.43rem !important;

  border-radius: 999px !important;
  border: 1px solid var(--exj-primary-600) !important;
  background: linear-gradient(135deg, var(--exj-primary-800), var(--exj-primary-500)) !important;
  color: var(--exj-white) !important;

  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px var(--exj-primary-alpha-18) !important;

  transition:
    transform .18s ease,
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    filter .18s ease !important;
}

.pkp_navigation_user a:hover,
.pkp_navigation_user a:focus{
  transform: translateY(-2px) !important;
  border-color: var(--exj-accent-500) !important;
  background: linear-gradient(135deg, var(--exj-primary-950), var(--exj-accent-500)) !important;
  color: var(--exj-white) !important;
  box-shadow: 0 12px 26px var(--exj-primary-shadow-hover) !important;
  filter: brightness(1.04) !important;
}

/* Jarak antar tombol user navigation */
.pkp_navigation_user li{
  margin-left: 8px !important;
}

/* Jika ada dropdown pada menu user, tetap rapi */
.pkp_navigation_user ul a{
  width: 100% !important;
  justify-content: flex-start !important;
  border-radius: 12px !important;
  background: var(--exj-white) !important;
  color: var(--exj-primary-900) !important;
  border: 1px solid var(--exj-border) !important;
  box-shadow: none !important;
}

.pkp_navigation_user ul a:hover,
.pkp_navigation_user ul a:focus{
  background: var(--exj-primary-50) !important;
  color: var(--exj-primary-950) !important;
  border-color: var(--exj-accent-500) !important;
  transform: translateX(3px) !important;
}

/* Mobile */
@media (max-width: 768px){
  .pkp_navigation_user a{
    min-height: 34px !important;
    padding-left: .85rem !important;
    padding-right: .85rem !important;
    font-size: 13px !important;
  }

  .pkp_navigation_user li{
    margin-left: 5px !important;
  }
}


/* =========================================================
   FINAL TURQUOISE + PINK OVERRIDE
   Memastikan tombol dan hover memakai kombinasi turquoise-pink.
========================================================= */

.pkp_navigation_user a,
.exj-btn-primary,
.pkp_structure_main .obj_galley_link:hover,
.pkp_structure_main .obj_galley_link.pdf:hover,
.pkp_structure_main .galleys_links a:hover,
.pkp_structure_main a.obj_galley_link:hover{
  background: linear-gradient(135deg, var(--exj-primary-800), var(--exj-primary-500)) !important;
  border-color: var(--exj-primary-700) !important;
  color: var(--exj-white) !important;
}

.pkp_navigation_user a:hover,
.pkp_navigation_user a:focus,
.exj-btn-primary:hover{
  background: linear-gradient(135deg, var(--exj-primary-900), var(--exj-accent-500)) !important;
  border-color: var(--exj-accent-500) !important;
  color: var(--exj-white) !important;
  box-shadow: 0 12px 28px rgba(236,72,153,.26) !important;
}

.exj-title,
.exj-footer-card,
.exj-footer-container{
  background:
    radial-gradient(circle at top right, rgba(236,72,153,.22), transparent 32%),
    linear-gradient(135deg, var(--exj-primary-950), var(--exj-primary-600)) !important;
}

.exj-link::before,
.pkp_structure_main .homepage_about::before,
.pkp_structure_main .obj_article_summary::before,
.exj-footer-container::after{
  background: linear-gradient(90deg, var(--exj-primary-600), var(--exj-accent-500)) !important;
}