/* ============================================================
   RELECTIO OJS Theme v5 — Exact Reference Match
   Journal of Critical Governance and Legal Reform
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

/* === GLOBAL === */
body, html {
  font-family: 'Inter', sans-serif !important;
  background-color: #e4e3dd !important;
  color: #333 !important;
}
a { color: #1c2b4a !important; }
a:hover { color: #c9ae6a !important; text-decoration: none !important; }

/* === HEADER — large dark navy banner === */
header.navbar.navbar-default,
.navbar.navbar-default {
  background-color: #12172b !important;
  border: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* Navbar header area (brand/logo zone) */
.navbar-header {
  padding: 24px 20px !important;
  float: none !important;
  display: block !important;
}

/* Container inside header */
header.navbar.navbar-default .container,
.navbar.navbar-default > .container {
  max-width: 1180px !important;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

/* Brand / logo area */
/* Brand / logo area — FULL WIDTH BANNER MODE */
.navbar-brand,
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  display: block !important;
  float: none !important;
  margin: 0 !important;
}

/* Banner image fills full width */
.navbar-brand img,
.site-name a img,
.navbar-brand a img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  display: block !important;
  filter: none !important;
}

/* Hide text journal title — it's inside the banner image */
.navbar-brand a:not(.navbar-brand-logo),
.navbar-brand .site-name,
.navbar-brand h1.site-name {
  display: none !important;
}

/* === NAV BAR — white, clean === */
#nav-menu.navbar-collapse {
  background-color: #ffffff !important;
  border-top: 3px solid #c9ae6a !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
}

.navbar-default .navbar-nav > li > a {
  color: #444 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  padding: 14px 13px !important;
  border-radius: 0 !important;
  border-bottom: 3px solid transparent !important;
  transition: all 0.15s !important;
}

.navbar-default .navbar-nav > li > a:hover {
  background-color: transparent !important;
  color: #12172b !important;
  border-bottom-color: #c9ae6a !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  background-color: transparent !important;
  color: #12172b !important;
  border-bottom-color: #c9ae6a !important;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  background-color: transparent !important;
  color: #12172b !important;
  border-bottom-color: #c9ae6a !important;
}

/* Dropdown */
.navbar-default .dropdown-menu {
  background-color: #ffffff !important;
  border: 1px solid #dce3ed !important;
  border-top: 3px solid #c9ae6a !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important;
}
.navbar-default .dropdown-menu > li > a {
  color: #444 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
}
.navbar-default .dropdown-menu > li > a:hover {
  background-color: #f5f5f0 !important;
  color: #12172b !important;
}

/* Search in nav */
.navbar-form .form-control {
  border-radius: 3px 0 0 3px !important;
  border: 1px solid #ddd !important;
  height: 32px !important;
  font-size: 12px !important;
}
.navbar-form button,
.navbar-form .btn {
  background-color: #12172b !important;
  border: none !important;
  color: #c9ae6a !important;
  border-radius: 0 3px 3px 0 !important;
  height: 32px !important;
}

/* Mobile hamburger */
.navbar-default .navbar-toggle {
  border-color: rgba(255,255,255,0.4) !important;
  margin: 14px 15px !important;
}
.navbar-default .navbar-toggle .icon-bar { background-color: #fff !important; }

/* === BREADCRUMB === */
.breadcrumb {
  background-color: #eeede8 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #ddddd4 !important;
  padding: 8px 20px !important;
  margin: 0 !important;
  font-size: 12px !important;
}
.breadcrumb a { color: #1c2b4a !important; }

/* === PAGE BACKGROUND === */
.pkp_structure_page {
  background-color: #e4e3dd !important;
  background-image: none !important;
}

/* === MAIN CONTENT WRAPPER === */
.pkp_structure_content.container {
  max-width: 1180px !important;
  margin: 24px auto !important;
  padding: 0 15px !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* MAIN AREA — white card */
main.pkp_structure_main {
  background-color: #ffffff !important;
  padding: 28px 30px !important;
  border: 1px solid #e4e4da !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  border-radius: 0 !important;
  order: 1 !important;
  width: 66% !important;
  min-width: 0 !important;
}

/* SIDEBAR — right side */
aside.pkp_structure_sidebar {
  order: 2 !important;
  width: 32% !important;
  min-width: 0 !important;
  margin-left: 16px !important;
  float: none !important;
}

/* ============================================================
   HOMEPAGE CUSTOM SECTIONS
   ============================================================ */

/* Current Issue Row */
.rl-current-issue {
  display: flex !important;
  gap: 22px !important;
  margin-bottom: 28px !important;
  padding-bottom: 28px !important;
  border-bottom: 1px solid #e8e8e0 !important;
  align-items: flex-start !important;
}

.rl-cover {
  flex-shrink: 0 !important;
  width: 150px !important;
}

.rl-cover img {
  width: 100% !important;
  height: auto !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22) !important;
  display: block !important;
}

.rl-cover-placeholder {
  width: 150px !important;
  height: 210px !important;
  background: linear-gradient(160deg, #12172b 0%, #1c2b4a 60%, #2d4070 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
}

.rl-cover-placeholder .rl-cp-title {
  color: #c9ae6a !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 13px !important;
  text-align: center !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 0 12px !important;
}

.rl-cover-placeholder .rl-cp-sub {
  color: #7a9bc4 !important;
  font-size: 10px !important;
  margin-top: 8px !important;
  letter-spacing: 1px !important;
}

.rl-issue-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.rl-issue-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #8b3a2a !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  margin: 0 0 8px !important;
}

.rl-issue-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #12172b !important;
  margin: 0 0 4px !important;
  line-height: 1.3 !important;
}

.rl-issue-date {
  color: #999 !important;
  font-size: 13px !important;
  margin: 0 0 12px !important;
}

.rl-gold-line {
  border: none !important;
  border-top: 2px solid #c9ae6a !important;
  margin: 12px 0 16px !important;
  width: 60px !important;
}

.rl-issue-desc {
  font-size: 13px !important;
  line-height: 1.8 !important;
  color: #555 !important;
  margin-bottom: 18px !important;
}

.rl-btn-primary {
  display: inline-block !important;
  background-color: #12172b !important;
  color: #ffffff !important;
  border: 2px solid #12172b !important;
  padding: 9px 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  text-decoration: none !important;
  margin-right: 10px !important;
  transition: all 0.15s !important;
}
.rl-btn-primary:hover {
  background-color: #c9ae6a !important;
  border-color: #c9ae6a !important;
  color: #12172b !important;
}

.rl-btn-outline {
  display: inline-block !important;
  background-color: transparent !important;
  color: #12172b !important;
  border: 2px solid #12172b !important;
  padding: 9px 18px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  text-decoration: none !important;
  transition: all 0.15s !important;
}
.rl-btn-outline:hover {
  background-color: #12172b !important;
  color: #ffffff !important;
}

/* Info grid — About + Focus two columns */
.rl-info-grid {
  display: flex !important;
  gap: 32px !important;
  margin-top: 0 !important;
  padding-top: 24px !important;
}

.rl-info-col {
  flex: 1 !important;
  min-width: 0 !important;
}

.rl-section-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #8b3a2a !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #e8e8e0 !important;
}

.rl-info-col p {
  font-size: 13px !important;
  line-height: 1.8 !important;
  color: #555 !important;
  margin-bottom: 10px !important;
}

.rl-read-more {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #8b3a2a !important;
  text-decoration: none !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}
.rl-read-more:hover { color: #12172b !important; }

/* Scope list */
.rl-scope-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
}

.rl-scope-list li {
  font-size: 13px !important;
  color: #555 !important;
  padding: 6px 0 6px 18px !important;
  position: relative !important;
  border-bottom: 1px solid #f0f0e8 !important;
  line-height: 1.5 !important;
}

.rl-scope-list li::before {
  content: '›' !important;
  position: absolute !important;
  left: 0 !important;
  color: #c9ae6a !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* Indexed In */
.rl-indexed {
  margin-top: 24px !important;
}

.rl-index-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.rl-index-badge {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #444 !important;
  letter-spacing: 0.5px !important;
}

.rl-index-sep { color: #ccc !important; }

/* Ethics section */
.rl-ethics {
  margin-top: 24px !important;
}

/* ============================================================
   SIDEBAR BLOCKS
   ============================================================ */
.pkp_block {
  background-color: #ffffff !important;
  border: 1px solid #e4e4da !important;
  border-radius: 0 !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  width: 100% !important;
}

.pkp_block .title {
  background-color: #12172b !important;
  color: #c9ae6a !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  text-align: left !important;
  display: block !important;
  font-family: 'Inter', sans-serif !important;
}

.pkp_block .content {
  padding: 0 !important;
}

/* Sidebar navigation links — arrow style */
.sidebar__container .menu__group a,
.pkp_block .content .menu__group a,
.menu__link,
a.menu__link {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 9px 14px !important;
  color: #444 !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #f0f0e8 !important;
  font-size: 12.5px !important;
  text-decoration: none !important;
  transition: all 0.12s !important;
  font-family: 'Inter', sans-serif !important;
}

.sidebar__container .menu__group a::after,
.pkp_block .content .menu__group a::after,
a.menu__link::after {
  content: '›' !important;
  color: #c9ae6a !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  margin-left: 8px !important;
  line-height: 1 !important;
}

.sidebar__container .menu__group a:hover,
.pkp_block .content .menu__group a:hover,
a.menu__link:hover {
  background-color: #f5f5f0 !important;
  color: #12172b !important;
  padding-left: 18px !important;
}

/* Language toggle, indexing etc */
.pkp_block .content ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.pkp_block .content ul li a {
  display: block !important;
  padding: 8px 14px !important;
  color: #444 !important;
  font-size: 12.5px !important;
  border-bottom: 1px solid #f0f0e8 !important;
  text-decoration: none !important;
}

.pkp_block .content ul li a:hover {
  background-color: #f5f5f0 !important;
  color: #12172b !important;
}

/* Indexing images block — horizontal row */
.pkp_block .content .image-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px !important;
  align-items: center !important;
  justify-content: space-around !important;
}

.pkp_block .content .image-size {
  flex: 1 !important;
  min-width: 55px !important;
  text-align: center !important;
}

.pkp_block .content img {
  max-width: 80px !important;
  width: 100% !important;
  height: auto !important;
}

/* Open Access block text */
.rl-open-access {
  padding: 14px !important;
  font-size: 12.5px !important;
  line-height: 1.7 !important;
  color: #555 !important;
}

.rl-oa-icon {
  font-size: 28px !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* ============================================================
   ARTICLE / ISSUE TOC
   ============================================================ */
.issue-toc .heading h2,
.pkp_page_issue h2 {
  font-family: 'Playfair Display', serif !important;
  color: #12172b !important;
  font-size: 20px !important;
  border-bottom: 2px solid #c9ae6a !important;
  padding-bottom: 8px !important;
  margin-bottom: 20px !important;
}

.issue-toc .heading .thumbnail {
  border: 1px solid #dce3ed !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.14) !important;
}

.obj_article_summary {
  border-bottom: 1px solid #eaeff0 !important;
  padding: 14px 0 !important;
}

.obj_article_summary .title a {
  font-family: 'Playfair Display', serif !important;
  color: #12172b !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
}
.obj_article_summary .title a:hover { color: #c9ae6a !important; }
.obj_article_summary .authors { color: #888 !important; font-size: 13px !important; margin-top: 4px !important; }

a.galley-link.btn,
.galley_links a.btn {
  background-color: #12172b !important;
  border-color: #12172b !important;
  color: #ffffff !important;
  font-size: 11px !important;
  padding: 4px 12px !important;
  border-radius: 2px !important;
  margin-top: 8px !important;
  margin-right: 4px !important;
}
a.galley-link.btn:hover {
  background-color: #c9ae6a !important;
  color: #12172b !important;
}

/* ============================================================
   HEADINGS
   ============================================================ */
h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #12172b !important;
}

/* ============================================================
   PANELS
   ============================================================ */
.panel { border-radius: 0 !important; }
.panel-default > .panel-heading {
  background-color: #12172b !important;
  color: #ffffff !important;
  border-radius: 0 !important;
}

/* ============================================================
   FOOTER — dark navy, gold border top
   ============================================================ */
footer[role="contentinfo"],
.pkp_structure_footer {
  background-color: #12172b !important;
  color: #aabbd4 !important;
  padding: 0 !important;
  margin-top: 24px !important;
  border-top: 3px solid #c9ae6a !important;
}

.pkp_footer_content {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 22px 30px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.rl-footer-copy {
  font-size: 12px !important;
  color: #aabbd4 !important;
  line-height: 1.6 !important;
}

.rl-footer-links {
  font-size: 12px !important;
  white-space: nowrap !important;
}

.rl-footer-links a {
  color: #c9ae6a !important;
  text-decoration: none !important;
  margin-left: 14px !important;
}
.rl-footer-links a:hover { color: #ffffff !important; }

footer[role="contentinfo"] a { color: #c9ae6a; }
footer[role="contentinfo"] a:hover { color: #ffffff !important; }

/* Hide PKP "powered by" */
.pkp_page_footer > .pkp_brand_footer,
.pkp_brand_footer {
  display: none !important;
}

/* pre-footer cream: handled via pageFooter inline styles */


/* ============================================================
   SINGLE ARTICLE HEADER
   ============================================================ */
header.header_view {
  background-color: #12172b !important;
}
header.header_view a { color: #fff !important; text-decoration: none !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
  .pkp_structure_content.container {
    flex-direction: column !important;
    margin: 12px auto !important;
    padding: 0 12px !important;
  }
  main.pkp_structure_main {
    width: 100% !important;
    order: 1 !important;
    margin: 0 0 14px !important;
  }
  aside.pkp_structure_sidebar {
    width: 100% !important;
    margin-left: 0 !important;
    order: 2 !important;
  }
  .rl-current-issue { flex-direction: column !important; }
  .rl-cover, .rl-cover-placeholder { width: 160px !important; }
  .rl-info-grid { flex-direction: column !important; gap: 20px !important; }
}

@media (max-width: 767px) {
  header.navbar.navbar-default { min-height: 100px !important; }
  .navbar-brand a, .site-name a { font-size: 22px !important; letter-spacing: 2px !important; }
  .navbar-brand img, .site-name a img { height: 48px !important; }
  main.pkp_structure_main { padding: 18px 16px !important; }
  .pkp_footer_content { flex-direction: column !important; text-align: center !important; padding: 18px 16px !important; }
  .rl-footer-links { margin-top: 8px !important; }
  .rl-footer-links a { margin-left: 8px !important; margin-right: 8px !important; }
}

/* ============================================================
   HEADER BANNER IMAGE — full width, hide text behind image
   ============================================================ */
.navbar.navbar-default {
  min-height: 0 !important;
  padding: 0 !important;
}
.navbar-header {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.navbar-brand {
  width: 100% !important;
  height: 190px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  float: none !important;
}
.navbar-brand img,
.site-name img,
.navbar-brand a img {
  width: 100% !important;
  height: auto !important;
  max-height: 190px !important;
  display: block !important;
  object-fit: cover !important;
}
/* Hide text sitename when logo image is present */
.navbar-brand .sr-only,
.navbar-brand span:not([class]),
.site-name span {
  display: none !important;
}
/* Hide the separate nav-menu bar when banner image fills the header */
#nav-menu.navbar-collapse {
  background-color: #12172b !important;
  border-top: 2px solid #c9ae6a !important;
}

/* ============================================================
   REMOVE ALL WHITESPACE AROUND HEADER BANNER
   ============================================================ */
.navbar.navbar-default {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}
.navbar.navbar-default > .container,
.navbar.navbar-default > .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}
.navbar-header {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.navbar-brand,
.navbar-brand-logo {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}
.navbar-brand img,
.navbar-brand-logo img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
/* ensure html/body have no horizontal margin */
body, html {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

/* ============================================================
   MAIN BODY FULL WIDTH — no centering margin
   ============================================================ */
.pkp_structure_page {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pkp_structure_content.container,
.pkp_structure_page > .container,
div.pkp_structure_content {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

/* ============================================================
   NAV MENU — HOME aktif menyala gold, semua item lebih terang
   ============================================================ */
#nav-menu.navbar-collapse {
  background-color: #12172b !important;
  border-top: 3px solid #c9ae6a !important;
}
.navbar-default .navbar-nav > li > a {
  color: #c8cdd8 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px !important;
  padding: 14px 16px !important;
  border-bottom: 3px solid transparent !important;
}
.navbar-default .navbar-nav > li > a:hover {
  color: #c9ae6a !important;
  background: rgba(201,174,106,0.08) !important;
  border-bottom-color: #c9ae6a !important;
}
/* HOME — menyala gold */
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.current > a,
.navbar-default .navbar-nav > li:first-child > a {
  color: #c9ae6a !important;
  border-bottom-color: #c9ae6a !important;
  font-weight: 700 !important;
}
/* Search box di nav */
.navbar-default .navbar-form .form-control {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(201,174,106,0.4) !important;
  color: #fff !important;
}