/**
 * ================================================================
 *  MUQARIN REVIEW — Custom Style v2
 *  Jurnal Perbandingan Madzhab, Fak. Syariah & Hukum
 *  UIN Syarif Hidayatullah Jakarta
 *
 *  CARA INSTALL DI OJS 3:
 *  Dashboard → Settings → Website → Appearance
 *  → Tab "Advanced" → kolom "Custom CSS" → paste → Save
 *
 *  v2 CHANGELOG:
 *  - [FIX] Header: background gambar jurnal tidak lagi dihapus
 *  - [FIX] Layout: konten dipusatkan, ornamen hanya di margin luar
 *  - [FIX] Make a Submission: teks + area lengkap bisa diklik
 *  - [KEEP] Nav menu sejajar Search
 *  - [KEEP] Ornamen Islami bintang 8 sudut di background
 * ================================================================
 */

/* ----------------------------------------------------------------
   CSS VARIABLES
   ---------------------------------------------------------------- */
:root {
  --mr-green-900: #122e1c;
  --mr-green-800: #1a4d2e;
  --mr-green-700: #1d6133;
  --mr-green-500: #2d7a3e;
  --mr-green-400: #3a9455;
  --mr-gold-600:  #a87c10;
  --mr-gold-500:  #c9a227;
  --mr-gold-300:  #e8c35a;
  --mr-bg:        #f0ede7;
  --mr-white:     #ffffff;
  --mr-text:      #252525;
  --mr-text-mid:  #545454;
  --mr-shadow-sm: 0 1px 6px rgba(0,0,0,0.07);
  --mr-shadow-md: 0 3px 14px rgba(0,0,0,0.12);
  --mr-radius:    5px;
  --mr-ease:      0.22s ease;
}


/* ================================================================
   ORNAMEN ISLAMI — background body
   Hanya terlihat di margin kiri-kanan layout (luar area konten)
   ================================================================ */
body {
  background-color:      var(--mr-bg);
  background-image:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M42,30 L35.5,32.3 L38.5,38.5 L32.3,35.5 L30,42 L27.7,35.5 L21.5,38.5 L24.5,32.3 L18,30 L24.5,27.7 L21.5,21.5 L27.7,24.5 L30,18 L32.3,24.5 L38.5,21.5 L35.5,27.7 Z' fill='none' stroke='%231a4d2e' stroke-width='0.75' opacity='0.14'/%3E%3Crect x='27' y='27' width='6' height='6' fill='none' stroke='%231a4d2e' stroke-width='0.5' opacity='0.10' transform='rotate(45 30 30)'/%3E%3Ccircle cx='0'  cy='0'  r='2.5' fill='none' stroke='%231a4d2e' stroke-width='0.45' opacity='0.07'/%3E%3Ccircle cx='60' cy='0'  r='2.5' fill='none' stroke='%231a4d2e' stroke-width='0.45' opacity='0.07'/%3E%3Ccircle cx='0'  cy='60' r='2.5' fill='none' stroke='%231a4d2e' stroke-width='0.45' opacity='0.07'/%3E%3Ccircle cx='60' cy='60' r='2.5' fill='none' stroke='%231a4d2e' stroke-width='0.45' opacity='0.07'/%3E%3C/svg%3E");
  background-repeat:     repeat;
  background-size:       60px 60px;
  background-attachment: fixed;
  font-family: 'Georgia', 'Times New Roman', serif;
  color: var(--mr-text);
  line-height: 1.72;
}

/*
 * KUNCI LAYOUT — wrapper konten diberi background putih solid.
 * Ornamen hanya muncul di margin kiri-kanan halaman (luar wrapper),
 * TIDAK di celah antara main content dan sidebar.
 */
.pkp_structure_page,
.pkp_structure_content,
#pkp_content .pkp_structure_page {
  background-color: var(--mr-white) !important;
  max-width:  1200px;
  margin-left:  auto !important;
  margin-right: auto !important;
}
.pkp_structure_main { background-color: transparent; }


/* ================================================================
   HEADER — JANGAN override background/image tema OJS!
   Hanya tambahkan shadow dan garis aksen emas.
   ================================================================ */
.pkp_structure_head {
  /* Tidak ada 'background' di sini agar gambar "MUQARIN Review"
     dan identitas jurnal di header tetap muncul. */
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
  position:   relative;
}

/* Garis aksen emas sebagai border bawah header */
.pkp_structure_head::after {
  content:  '';
  display:  block;
  height:   3px;
  background: linear-gradient(
    to right,
    transparent        0%,
    var(--mr-gold-300) 15%,
    var(--mr-gold-500) 50%,
    var(--mr-gold-300) 85%,
    transparent        100%
  );
}


/* ================================================================
   [1] FIX NAVIGASI — menu sejajar Search
   ================================================================ */

.pkp_navigation_primary_row {
  display:          flex   !important;
  flex-direction:   row    !important;
  align-items:      center !important;
  flex-wrap:        nowrap !important;
  background-color: var(--mr-green-800);
  padding:          0 20px;
  min-height:       44px;
}

/* Hilangkan efek "kolom" pada div wrapper di dalam nav row */
.pkp_navigation_primary_row > div:not([class*="search"]):not(.pkp_search) {
  display: contents;
}

nav.pkp_navigation_primary,
nav#navigationPrimary { flex: 1 1 auto; overflow: visible; }

nav.pkp_navigation_primary > ul,
nav#navigationPrimary > ul,
#navigationPrimary > ul {
  display:         flex   !important;
  flex-direction:  row    !important;
  align-items:     center !important;
  flex-wrap:       nowrap;
  list-style: none; margin: 0; padding: 0;
}

.pkp_navigation_primary li > a,
#navigationPrimary li > a {
  display:         block;
  color:           rgba(255,255,255,0.88) !important;
  text-decoration: none;
  padding:         11px 15px;
  font-family:     Georgia, serif;
  font-size:       0.87rem;
  white-space:     nowrap;
  border-bottom:   2px solid transparent;
  transition:      color var(--mr-ease), border-color var(--mr-ease),
                   background-color var(--mr-ease);
}
.pkp_navigation_primary li > a:hover,
#navigationPrimary li > a:hover,
.pkp_navigation_primary li.current > a,
#navigationPrimary li.current > a {
  color:               var(--mr-gold-300) !important;
  border-bottom-color: var(--mr-gold-500);
  background-color:    rgba(255,255,255,0.07);
}

/* Search ke kanan */
.pkp_navigation_primary_row .pkp_search,
.pkp_navigation_primary_row form[role="search"],
.pkp_navigation_primary_row .search_form { flex: 0 0 auto; margin-left: auto; }

.pkp_navigation_primary_row input[type="search"],
.pkp_navigation_primary_row input[type="text"],
.pkp_navigation_primary_row .pkp_search input {
  background:    rgba(255,255,255,0.13);
  border:        1px solid rgba(255,255,255,0.28);
  border-radius: 20px;
  color:         #fff;
  padding:       5px 14px;
  font-size:     0.83rem;
  outline:       none;
  min-width:     130px;
  transition:    all var(--mr-ease);
}
.pkp_navigation_primary_row input[type="search"]:focus,
.pkp_navigation_primary_row input[type="text"]:focus {
  background: rgba(255,255,255,0.22);
  border-color: var(--mr-gold-500);
  min-width: 175px;
}
.pkp_navigation_primary_row input::placeholder { color: rgba(255,255,255,0.52); }


/* ================================================================
   [2] MAKE A SUBMISSION — SELURUH AREA BISA DIKLIK (v2)
   ================================================================
   Solusi:
   - Block diberi background hijau + position:relative
   - h2.title = teks judul (z-index:1, pointer-events:none)
   - .read_more atau > a = di-stretch ke inset:0 (z-index:5)
     dengan color:transparent agar teks h2 tetap terlihat
   ---------------------------------------------------------------- */

.pkp_block_make_submission {
  position:      relative;
  cursor:        pointer;
  overflow:      hidden;
  border-radius: var(--mr-radius) !important;
  background:    var(--mr-green-700) !important;
  transition:    background var(--mr-ease);
}
.pkp_block_make_submission:hover { background: var(--mr-green-400) !important; }

/* Anchor: perluas ke seluruh area blok */
.pkp_block_make_submission .read_more,
.pkp_block_make_submission > a[href] {
  position:        absolute !important;
  inset:           0        !important;
  z-index:         5;
  display:         flex    !important;
  align-items:     center;
  justify-content: flex-end;
  padding-right:   14px;
  font-size:       1.3rem;
  color:           rgba(255,255,255,0.6) !important;
  text-decoration: none;
}

/* Teks judul tetap terlihat */
.pkp_block_make_submission .title,
.pkp_block_make_submission h2.title {
  position:       relative;
  z-index:        1;
  pointer-events: none;
  color:          #ffffff !important;
  margin:         0;
  padding:        13px 52px 13px 18px;
  font-family:    Georgia, serif;
  font-size:      0.9rem;
  font-weight:    700;
}

/* Jika link ada di dalam h2.title */
.pkp_block_make_submission .title a,
.pkp_block_make_submission h2.title a {
  color:   #ffffff !important;
  display: block;
  margin:  -13px -52px -13px -18px;
  padding: 13px 52px 13px 18px;
}

/* Panah kanan */
.pkp_block_make_submission .title::after,
.pkp_block_make_submission h2.title::after {
  content:         '›';
  position:        absolute;
  right: 0; top: 0; bottom: 0;
  width:           44px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(0,0,0,0.20);
  font-size:       1.45rem;
  font-weight:     300;
  transition:      background var(--mr-ease);
}
.pkp_block_make_submission:hover .title::after,
.pkp_block_make_submission:hover h2.title::after { background: rgba(0,0,0,0.30); }


/* ================================================================
   SIDEBAR BLOCKS
   ================================================================ */

.pkp_structure_sidebar .pkp_block {
  background:    var(--mr-white);
  border-radius: var(--mr-radius);
  box-shadow:    var(--mr-shadow-sm);
  margin-bottom: 14px;
  overflow:      hidden;
  border-top:    3px solid var(--mr-green-500);
  transition:    box-shadow var(--mr-ease), transform var(--mr-ease);
}
.pkp_structure_sidebar .pkp_block:hover {
  box-shadow: var(--mr-shadow-md);
  transform:  translateY(-2px);
}

.pkp_structure_sidebar .pkp_block .title {
  background:     var(--mr-green-800);
  color:          #ffffff !important;
  padding:        10px 42px 10px 16px;
  font-family:    Georgia, serif;
  font-size:      0.83rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin:         0;
  position:       relative;
  display:        block;
}

.pkp_structure_sidebar .pkp_block .title .toggler,
.pkp_structure_sidebar .pkp_block .title .arrow,
.pkp_structure_sidebar .pkp_block h2 > a.toggler {
  position:        absolute;
  right: 0; top: 0; bottom: 0;
  width:           38px;
  background:      rgba(0,0,0,0.22);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #fff !important;
  text-decoration: none;
  font-size:       1.1rem;
  transition:      background var(--mr-ease);
}

.pkp_structure_sidebar .pkp_block .content {
  padding: 10px 14px;
  font-size: 0.86rem;
  line-height: 1.65;
}
.pkp_structure_sidebar .pkp_block .content ul { list-style: none; padding: 0; margin: 0; }
.pkp_structure_sidebar .pkp_block .content li {
  padding: 5px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.pkp_structure_sidebar .pkp_block .content li:last-child { border-bottom: none; }
.pkp_structure_sidebar .pkp_block .content a {
  color: var(--mr-green-700) !important;
  text-decoration: none;
  transition: color var(--mr-ease), padding-left var(--mr-ease);
}
.pkp_structure_sidebar .pkp_block .content a:hover {
  color: var(--mr-gold-500) !important;
  padding-left: 4px;
}


/* ================================================================
   HEADING & MAIN CONTENT
   ================================================================ */
.pkp_structure_main h1,
.pkp_structure_main h2.sectionTitle {
  color: var(--mr-green-800);
  font-family: Georgia, serif;
  font-size: 1.5rem;
  border-bottom: 2px solid var(--mr-gold-500);
  padding-bottom: 8px;
  margin-bottom: 20px;
}
.pkp_structure_main h2:not(.sectionTitle) {
  color: var(--mr-green-700);
  font-size: 1.15rem;
}
.pkp_structure_main a { color: var(--mr-green-700); transition: color var(--mr-ease); }
.pkp_structure_main a:hover { color: var(--mr-gold-600); }


/* ================================================================
   DAFTAR ARTIKEL
   ================================================================ */
.obj_article_summary {
  border:        1px solid rgba(0,0,0,0.07);
  border-left:   4px solid var(--mr-green-500);
  border-radius: var(--mr-radius);
  padding:       14px 18px;
  margin-bottom: 10px;
  box-shadow:    var(--mr-shadow-sm);
  transition:    all var(--mr-ease);
}
.obj_article_summary:hover {
  border-left-color: var(--mr-gold-500);
  box-shadow:        var(--mr-shadow-md);
  transform:         translateX(3px);
}
.obj_article_summary h3.title a,
.obj_article_summary .title a {
  color:           var(--mr-green-800) !important;
  font-weight:     700;
  font-size:       0.98rem;
  font-family:     Georgia, serif;
  text-decoration: none;
  transition:      color var(--mr-ease);
}
.obj_article_summary .title a:hover { color: var(--mr-gold-600) !important; }
.obj_article_summary .authors {
  font-size:  0.84rem;
  color:      var(--mr-text-mid);
  font-style: italic;
  margin:     4px 0 8px;
}
.obj_article_summary .galleys_links a, a.pdf {
  background:      var(--mr-green-800) !important;
  color:           #fff !important;
  border-radius:   14px;
  padding:         4px 14px;
  font-size:       0.79rem;
  text-decoration: none;
  display:         inline-block;
  transition:      all var(--mr-ease);
  margin-top:      6px;
}
.obj_article_summary .galleys_links a:hover, a.pdf:hover {
  background: var(--mr-gold-500) !important;
  transform:  translateY(-1px);
  box-shadow: 0 3px 10px rgba(201,162,39,0.38);
}


/* ================================================================
   COVER JURNAL
   ================================================================ */
.obj_issue_summary .cover img,
.pkp_structure_main .cover img {
  border-radius: var(--mr-radius);
  box-shadow:    var(--mr-shadow-md);
  transition:    all var(--mr-ease);
  max-width:     100%;
}
.obj_issue_summary .cover img:hover {
  box-shadow: 0 7px 24px rgba(0,0,0,0.22);
  transform:  scale(1.03);
}


/* ================================================================
   TABEL
   ================================================================ */
.pkp_structure_main table {
  width: 100%; border-collapse: collapse;
  box-shadow: var(--mr-shadow-sm);
  margin: 16px 0; font-size: 0.88rem;
  border-radius: var(--mr-radius); overflow: hidden;
}
.pkp_structure_main table th {
  background: var(--mr-green-800); color: #fff;
  padding: 8px 14px; text-align: left;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.3px;
}
.pkp_structure_main table td {
  padding: 8px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  vertical-align: top;
}
.pkp_structure_main table td:first-child { font-weight: 600; color: var(--mr-green-700); }
.pkp_structure_main table tr:nth-child(even) td { background: rgba(29,97,51,0.035); }
.pkp_structure_main table tr:hover td { background: rgba(201,162,39,0.06); }


/* ================================================================
   TOMBOL, BREADCRUMB, FOOTER
   ================================================================ */
a { color: var(--mr-green-700); transition: color var(--mr-ease); }
a:hover { color: var(--mr-gold-600); }

.btn, .cmp_button, input[type="submit"] {
  background: var(--mr-green-700); color: #fff !important;
  border: none; border-radius: 20px; padding: 7px 20px;
  font-size: 0.87rem; cursor: pointer; text-decoration: none;
  display: inline-block; transition: all var(--mr-ease);
}
.btn:hover, .cmp_button:hover, input[type="submit"]:hover {
  background: var(--mr-gold-500); transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(201,162,39,0.42);
}

.cmp_breadcrumbs, .pkp_breadcrumbs {
  background: rgba(29,97,51,0.06); border-left: 3px solid var(--mr-green-500);
  border-radius: 0 var(--mr-radius) var(--mr-radius) 0;
  padding: 7px 12px; font-size: 0.81rem; margin-bottom: 18px;
}
.cmp_breadcrumbs a, .pkp_breadcrumbs a { color: var(--mr-green-700) !important; }

.pkp_structure_footer {
  background: var(--mr-green-900); color: rgba(255,255,255,0.75);
  padding: 26px 0 16px; margin-top: 40px;
  border-top: 3px solid var(--mr-gold-500); font-size: 0.84rem;
}
.pkp_structure_footer a { color: var(--mr-gold-300) !important; text-decoration: none; transition: color var(--mr-ease); }
.pkp_structure_footer a:hover { color: #fff !important; text-decoration: underline; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--mr-gold-500); outline-offset: 2px;
}


/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 992px) {
  .pkp_navigation_primary_row { flex-wrap: wrap !important; }
  nav.pkp_navigation_primary > ul, #navigationPrimary > ul { flex-wrap: wrap !important; }
}
@media (max-width: 768px) {
  .pkp_navigation_primary li > a, #navigationPrimary li > a { padding: 9px 10px; font-size: 0.82rem; }
  body { background-size: 45px 45px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; background-attachment: scroll !important; }
}