/* ==========================================================================
   PASE: Journal of Contemporary Islamic Education
   Tema "Warm Gold-Brown Heritage" - untuk header gambar krem/emas/cokelat
   Asumsi: OJS 3.x tema default. Verifikasi selector dengan Inspect.
   ========================================================================== */

/* ---------- 1. TOKEN DESAIN ---------- */
:root {
  --pase-espresso: #3B2417;      /* dasar gelap: menu, judul widget, footer */
  --pase-walnut: #5A3A22;        /* pendamping: dropdown, gradasi */
  --pase-bronze: #8A5A2B;        /* tautan, aksen sekunder */
  --pase-gold: #A87A2C;          /* emas antik (agak gelap agar kontras) */
  --pase-champagne: #E6C474;     /* highlight di atas latar gelap */
  --pase-ivory: #F8F3E8;         /* latar baca */
  --pase-ivory-deep: #F0E7D3;    /* panel */
  --pase-text: #2B2420;          /* teks utama (hangat) */
  --pase-muted: #6F6155;         /* teks sekunder */
  --pase-gold-line: rgba(168, 122, 44, 0.45);
  --pase-gold-grad: linear-gradient(135deg, #9A6B24 0%, #E2BE6A 50%, #9A6B24 100%);
  --pase-dark-grad: linear-gradient(180deg, #5A3A22 0%, #3B2417 100%);
  --pase-shadow-sm: 0 1px 3px rgba(59, 36, 23, 0.12);
  --pase-shadow-md: 0 8px 22px rgba(59, 36, 23, 0.18);
  --pase-radius: 4px;
  --pase-ease: 220ms ease;
  --pase-serif: Georgia, "Times New Roman", serif;
  --pase-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Kisi geometris halus (ornamen ukiran), kontras rendah */
  --pase-pattern:
    repeating-linear-gradient(45deg, rgba(168,122,44,0.055) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(168,122,44,0.055) 0 1px, transparent 1px 22px);
}

/* ---------- 2. DASAR HALAMAN ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--pase-sans);
  color: var(--pase-text);
  line-height: 1.65;
  background-color: var(--pase-ivory);
  background-image:
    radial-gradient(ellipse at top left, rgba(138, 90, 43, 0.08), transparent 45%),
    radial-gradient(ellipse at bottom right, rgba(226, 190, 106, 0.12), transparent 45%);
  background-attachment: fixed;
}
.pkp_structure_page { background: transparent; }

a { color: var(--pase-bronze); transition: color var(--pase-ease); }
a:hover, a:focus { color: #6B4416; }

/* Fokus keyboard jelas (bukan hanya warna) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .cmp_button:focus-visible {
  outline: 3px solid #9A6B24;
  outline-offset: 2px;
}
.pkp_structure_head a:focus-visible,
.pkp_structure_footer_wrapper a:focus-visible { outline-color: var(--pase-champagne); }

/* ---------- 3. HEADER ---------- */
/* Strip di sekeliling gambar header: cokelat gelap, agar banner krem
   tampak seperti "dibingkai" emas. Ukuran gambar TIDAK diubah. */
.pkp_structure_head {
  background:
    linear-gradient(180deg, #2A170E 0%, #3B2417 100%);
  border-bottom: 0;
}
.pkp_head_wrapper { background: transparent; }
/* Banner header (resolusi tinggi) dibuat selebar kontainer, sejajar dengan
   menu di bawahnya. Tinggi mengikuti proporsi gambar sehingga tidak
   terpotong atau terdistorsi di layar kecil. */
.pkp_structure_head .pkp_site_name {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}
.pkp_structure_head .pkp_site_name .is_img,
.pkp_structure_head .pkp_site_name .is_img a { display: block; }
.pkp_structure_head .pkp_site_name .is_img img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: none;
  height: auto;
  border: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30);
}

/* Username di pojok atas */
.pkp_navigation_user_wrapper { background: transparent; }
.pkp_navigation_user > li > a {
  color: var(--pase-champagne);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus { color: #fff; }

/* ---------- 4. NAVIGASI UTAMA ---------- */
.pkp_navigation_primary_row {
  background: var(--pase-dark-grad);
  border-top: 1px solid var(--pase-gold-line);
  border-bottom: 2px solid #C79A3F;
  box-shadow: 0 4px 14px rgba(42, 23, 14, 0.30);
}

.pkp_navigation_primary > li > a {
  color: var(--pase-ivory);
  font-family: var(--pase-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.85rem 1rem;
  /* Garis emas tumbuh dari tengah. Memakai background (bukan ::after)
     karena ::after dipakai tema untuk panah dropdown. */
  background-image: linear-gradient(90deg, #B8892F, #E6C474, #B8892F);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 0% 2px;
  transition: color var(--pase-ease), background-size var(--pase-ease);
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li > a[aria-current] {
  color: var(--pase-champagne);
  background-size: 100% 2px;
}

/* Dropdown */
.pkp_navigation_primary ul {
  background: #4A2E1B;
  border: 1px solid var(--pase-gold-line);
  border-top: 2px solid #C79A3F;
  border-radius: 0 0 var(--pase-radius) var(--pase-radius);
  box-shadow: var(--pase-shadow-md);
}
.pkp_navigation_primary ul a {
  color: var(--pase-ivory);
  font-size: 0.875rem;
  transition: background-color var(--pase-ease), color var(--pase-ease), padding var(--pase-ease);
}
.pkp_navigation_primary ul a:hover,
.pkp_navigation_primary ul a:focus {
  background: rgba(230, 196, 116, 0.14);
  color: var(--pase-champagne);
  padding-left: 1.25rem;
}

.pkp_navigation_search_wrapper a, .pkp_search .search_prompt { color: var(--pase-ivory); }
.pkp_navigation_search_wrapper a:hover { color: var(--pase-champagne); }

/* ---------- 5. AREA KONTEN ---------- */
.pkp_structure_content {
  background: var(--pase-ivory);
  background-image: var(--pase-pattern);
  /* Inset shadow, BUKAN border: border menambah lebar dan membuat
     sidebar turun ke bawah. */
  box-shadow: inset 1px 0 0 var(--pase-gold-line), inset -1px 0 0 var(--pase-gold-line);
}

.cmp_breadcrumbs, .cmp_breadcrumbs a { color: var(--pase-muted); font-size: 0.8125rem; }
.cmp_breadcrumbs a:hover { color: #6B4416; }

h1, h2, .page_title {
  font-family: var(--pase-serif);
  color: var(--pase-espresso);
  line-height: 1.25;
}
.page > h1::after, .pkp_structure_main > h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 0.6rem;
  background: var(--pase-gold-grad);
}

/* ---------- 6. BERANDA ---------- */
.page_index_journal .homepage_about,
.page_index_journal .journal_description {
  position: relative;
  padding: 1.5rem 1.5rem 1.5rem 1.75rem;
  border-left: 4px solid #B8892F;
  background:
    linear-gradient(90deg, rgba(138, 90, 43, 0.07), transparent 60%),
    var(--pase-ivory-deep);
  border-radius: 0 var(--pase-radius) var(--pase-radius) 0;
}
.homepage_about::after {
  content: "";
  position: absolute;
  top: 10px; right: 10px;
  width: 28px; height: 28px;
  border: 1px solid var(--pase-gold-line);
  transform: rotate(45deg);
  opacity: 0.6;
  pointer-events: none;
}

.current_issue { margin-top: 2rem; }
.current_issue_title, .current_issue > h2 {
  font-family: var(--pase-serif);
  font-size: 1.5rem;
  color: var(--pase-espresso);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--pase-gold-line);
}

.obj_issue_toc .cover img, .obj_issue_summary .cover img {
  border: 1px solid var(--pase-gold-line);
  box-shadow: var(--pase-shadow-sm);
  transition: transform var(--pase-ease), box-shadow var(--pase-ease);
}
.obj_issue_toc .cover img:hover, .obj_issue_summary .cover img:hover {
  transform: translateY(-3px);
  box-shadow: var(--pase-shadow-md);
}

.obj_issue_toc .sections > .section > h2,
.obj_issue_toc .section h3 {
  font-family: var(--pase-serif);
  font-size: 1.125rem;
  color: var(--pase-walnut);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid #B8892F;
  display: inline-block;
}
.obj_issue_summary .title, .obj_issue_summary h2 a {
  font-family: var(--pase-serif);
  color: var(--pase-espresso);
}
.obj_issue_summary .series, .obj_issue_summary .description { color: var(--pase-muted); }

/* ---------- 7. DAFTAR ARTIKEL ---------- */
.obj_article_summary {
  padding: 1.1rem 0.75rem 1.1rem 1rem;
  margin: 0;
  border-bottom: 1px solid rgba(168, 122, 44, 0.30);
  border-left: 3px solid transparent;
  transition: background-color var(--pase-ease), border-color var(--pase-ease);
}
.obj_article_summary:nth-child(even) { background: rgba(240, 231, 211, 0.5); }
.obj_article_summary:hover {
  background: rgba(230, 196, 116, 0.16);
  border-left-color: #B8892F;
}
.obj_article_summary .title,
.obj_article_summary .title a {
  font-family: var(--pase-serif);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--pase-espresso);
}
.obj_article_summary .title a:hover { color: #7A4B14; }
.obj_article_summary .authors {
  font-size: 0.875rem;
  color: var(--pase-bronze);
  font-weight: 500;
}
.obj_article_summary .meta, .obj_article_summary .pages,
.obj_article_summary .published { font-size: 0.8125rem; color: var(--pase-muted); }
.obj_article_summary .doi a, .item.doi a, .pkp_structure_main .doi a {
  color: var(--pase-bronze);
  text-decoration: underline;
  text-decoration-color: var(--pase-gold-line);
  text-underline-offset: 3px;
}
.obj_article_summary .doi a:hover { color: #6B4416; text-decoration-color: #B8892F; }

.obj_galley_link {
  background: transparent;
  color: var(--pase-espresso);
  border: 1px solid #B8892F;
  border-radius: var(--pase-radius);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background var(--pase-ease), color var(--pase-ease), transform var(--pase-ease);
}
.obj_galley_link:hover, .obj_galley_link:focus {
  background: var(--pase-gold-grad);
  color: var(--pase-espresso);
  transform: translateY(-1px);
}

.obj_article_details .page_title { font-family: var(--pase-serif); color: var(--pase-espresso); }
.obj_article_details .item.abstract { font-size: 1rem; line-height: 1.8; }
.obj_article_details .item h2, .obj_article_details .label {
  font-family: var(--pase-serif);
  color: var(--pase-walnut);
}

/* ---------- 8. SIDEBAR ---------- */
.pkp_structure_sidebar { background: transparent; }
.pkp_block {
  background: var(--pase-ivory-deep);
  border: 1px solid var(--pase-gold-line);
  border-radius: var(--pase-radius);
  padding: 0 0 1rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.pkp_block .title {
  display: block;
  margin: 0 0 0.9rem;
  padding: 0.7rem 1rem;
  font-family: var(--pase-serif);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pase-champagne);
  background: var(--pase-dark-grad);
  border-bottom: 2px solid #C79A3F;
}
.pkp_block .content, .pkp_block ul, .pkp_block > p { padding: 0 1rem; }
.pkp_block ul { list-style: none; margin: 0; }
.pkp_block li { border-bottom: 1px dotted var(--pase-gold-line); }
.pkp_block li:last-child { border-bottom: 0; }
.pkp_block a {
  display: block;
  padding: 0.45rem 0;
  color: var(--pase-walnut);
  transition: color var(--pase-ease), padding var(--pase-ease);
}
.pkp_block a:hover, .pkp_block a:focus { color: #7A4B14; padding-left: 0.4rem; }

/* ---------- 9. TOMBOL & FORMULIR ---------- */
.cmp_button, .pkp_button, .block_make_submission a,
button.submit, input[type="submit"], .cmp_form .buttons button {
  background: var(--pase-espresso);
  color: var(--pase-ivory);
  border: 1px solid var(--pase-espresso);
  border-radius: var(--pase-radius);
  font-family: var(--pase-sans);
  font-weight: 600;
  letter-spacing: 0.03em;
  box-shadow: var(--pase-shadow-sm);
  transition: background var(--pase-ease), color var(--pase-ease),
              border-color var(--pase-ease), transform var(--pase-ease), box-shadow var(--pase-ease);
}
.cmp_button:hover, .cmp_button:focus, .pkp_button:hover,
.block_make_submission a:hover, button.submit:hover, input[type="submit"]:hover {
  background: var(--pase-gold-grad);
  color: var(--pase-espresso);
  border-color: #B8892F;
  transform: translateY(-1px);
  box-shadow: var(--pase-shadow-md);
}
.cmp_button_wire, .pkp_button_link {
  background: transparent;
  color: var(--pase-espresso);
  border: 1px solid #B8892F;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="search"], select, textarea {
  background: #fffdf8;
  border: 1px solid rgba(59, 36, 23, 0.28);
  border-radius: var(--pase-radius);
  color: var(--pase-text);
  transition: border-color var(--pase-ease), box-shadow var(--pase-ease);
}
input:focus, select:focus, textarea:focus {
  border-color: #B8892F;
  box-shadow: 0 0 0 3px rgba(230, 196, 116, 0.40);
}

/* ---------- 10. PAGINATION ---------- */
.cmp_pagination a, .cmp_pagination span {
  border: 1px solid var(--pase-gold-line);
  border-radius: var(--pase-radius);
  color: var(--pase-walnut);
  background: transparent;
  transition: background var(--pase-ease), color var(--pase-ease);
}
.cmp_pagination a:hover, .cmp_pagination a:focus {
  background: var(--pase-espresso);
  color: var(--pase-champagne);
}
.cmp_pagination .current, .cmp_pagination [aria-current] {
  background: var(--pase-gold-grad);
  color: var(--pase-espresso);
  font-weight: 700;
}

/* ---------- 11. FOOTER ---------- */
.pkp_structure_footer_wrapper {
  background:
    var(--pase-pattern),
    linear-gradient(180deg, #2A170E 0%, #4A2E1B 100%);
  border-top: 3px solid #C79A3F;
  color: var(--pase-ivory);
}
.pkp_footer_content { color: var(--pase-ivory); padding: 2rem 1rem; }
.pkp_footer_content h2, .pkp_footer_content h3, .pkp_footer_content strong {
  font-family: var(--pase-serif);
  color: var(--pase-champagne);
}
.pkp_footer_content a { color: var(--pase-champagne); }
.pkp_footer_content a:hover, .pkp_footer_content a:focus { color: #fff; text-decoration: underline; }
.pkp_brand_footer {
  border-top: 1px solid var(--pase-gold-line);
  background: rgba(42, 23, 14, 0.6);
}

/* ---------- 12. RESPONSIF ---------- */
@media (max-width: 991px) {
  .pkp_navigation_primary > li > a { padding: 0.7rem 0.85rem; }
  .pkp_structure_content { box-shadow: none; }
}
@media (max-width: 767px) {
  .pkp_navigation_primary_row { border-bottom-width: 1px; }
  .pkp_navigation_primary > li > a { font-size: 0.875rem; letter-spacing: 0.03em; }
  .obj_article_summary { padding: 0.9rem 0.5rem; }
  .pkp_block { margin-bottom: 1rem; }
  .homepage_about::after { display: none; }
}

/* ---------- 13. AKSESIBILITAS GERAK ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .cmp_button:hover, .obj_galley_link:hover,
  .obj_issue_toc .cover img:hover { transform: none; }
}