/* ================================================================
   JATG THEME — Custom Stylesheet for OJS Bootstrap3 Theme
   Journal of Accounting, Transparency and Governance
   Upload via: Settings > Website > Appearance > Advanced > Journal Style Sheet
   Compatible: OJS Bootstrap3 Theme (all variants)
   ================================================================ */

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

/* ================================================================
   1. GLOBAL TOKENS & RESET
   ================================================================ */
:root {
  --jatg-navy:       #042C53;
  --jatg-blue-dark:  #0C447C;
  --jatg-blue:       #185FA5;
  --jatg-blue-light: #E6F1FB;
  --jatg-text:       #1a1a1a;
  --jatg-text-2:     #4b5563;
  --jatg-text-3:     #9ca3af;
  --jatg-border:     #e5e7eb;
  --jatg-bg-alt:     #f9f8f6;
  --font-serif:      'Playfair Display', Georgia, serif;
  --font-sans:       'DM Sans', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  color: var(--jatg-text) !important;
  background: #fff !important;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--jatg-blue); }
a:hover { color: var(--jatg-blue-dark); text-decoration: none; }

/* ================================================================
   2. TOPBAR — user nav (Register / Login)
      Bootstrap3 OJS selector: #navigationUser  /  .navbar-nav (user area)
   ================================================================ */
#navigationUser,
.pkp_navigation_user {
  background: var(--jatg-navy) !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

#navigationUser .nav > li > a,
.pkp_navigation_user .nav > li > a {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  color: rgba(255,255,255,0.55) !important;
  padding: 4px 12px !important;
  border-right: 1px solid rgba(255,255,255,0.1) !important;
}

#navigationUser .nav > li > a:hover,
.pkp_navigation_user .nav > li > a:hover {
  color: #fff !important;
  background: transparent !important;
}

/* ================================================================
   3. NAVBAR — main navigation
      Bootstrap3 selectors: .navbar, .navbar-default, .navbar-inverse
   ================================================================ */
.navbar,
.navbar-default,
.navbar-inverse {
  background-color: var(--jatg-blue-dark) !important;
  border: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  min-height: 56px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
}

/* Journal title / brand */
.navbar-brand,
.navbar-default .navbar-brand,
.navbar-inverse .navbar-brand {
  font-family: var(--font-serif) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.3 !important;
  height: auto !important;
  padding: 12px 16px !important;
}

.navbar-brand:hover,
.navbar-default .navbar-brand:hover,
.navbar-inverse .navbar-brand:hover {
  color: #fff !important;
  background: transparent !important;
}

/* Nav links */
.navbar-nav > li > a,
.navbar-default .navbar-nav > li > a,
.navbar-inverse .navbar-nav > li > a {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.78) !important;
  padding: 18px 12px !important;
  border-radius: 4px !important;
  margin: 0 1px !important;
  transition: background 0.15s, color 0.15s !important;
}

.navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active > a,
.navbar-inverse .navbar-nav > li.active > a {
  background: rgba(255,255,255,0.13) !important;
  color: #fff !important;
}

/* Mobile toggle */
.navbar-toggle {
  border-color: rgba(255,255,255,0.3) !important;
  margin-top: 12px !important;
}
.navbar-toggle .icon-bar { background: rgba(255,255,255,0.8) !important; }
.navbar-toggle:hover { background: rgba(255,255,255,0.1) !important; }

/* Dropdown */
.navbar-nav .open .dropdown-menu {
  background: var(--jatg-blue-dark) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 6px !important;
}
.navbar-nav .open .dropdown-menu > li > a {
  font-size: 12px !important;
  color: rgba(255,255,255,0.75) !important;
  padding: 8px 16px !important;
}
.navbar-nav .open .dropdown-menu > li > a:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}

/* ================================================================
   4. JUMBOTRON / HERO (homepage banner)
      Bootstrap3: .jumbotron
   ================================================================ */
.jumbotron {
  background: var(--jatg-blue-dark) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  padding: 36px 0 !important;
  color: #fff !important;
}

.jumbotron h1,
.jumbotron .h1 {
  font-family: var(--font-serif) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.3 !important;
  margin-bottom: 12px !important;
}

.jumbotron p {
  font-size: 13px !important;
  color: rgba(255,255,255,0.65) !important;
  line-height: 1.7 !important;
}

.jumbotron .btn-primary {
  background: #fff !important;
  color: var(--jatg-blue-dark) !important;
  border: none !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 8px 18px !important;
  border-radius: 5px !important;
}

.jumbotron .btn-primary:hover {
  background: var(--jatg-blue-light) !important;
  color: var(--jatg-blue-dark) !important;
}

/* ================================================================
   5. PAGE HEADER (non-homepage title bar)
   ================================================================ */
.page-header {
  font-family: var(--font-serif) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--jatg-text) !important;
  border-bottom: 2px solid var(--jatg-blue) !important;
  padding-bottom: 12px !important;
  margin-bottom: 20px !important;
}

/* ================================================================
   JOURNAL POLICIES SIDEBAR MENU
   ================================================================ */

.jp-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 4px 7px 4px !important;
  font-size: 12px !important;
  color: #374151 !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  transition:
    color 0.25s ease,
    padding-left 0.3s ease !important;
}

/* Garis biru bawah — muncul dari kiri */
.jp-link::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 1.5px !important;
  background: #185FA5 !important;
  transition: width 0.35s ease !important;
}

/* Semua efek saat hover */
.jp-link:hover {
  color: #185FA5 !important;
  padding-left: 12px !important;
  text-decoration: none !important;
}

.jp-link:hover::after {
  width: 100% !important;
}

/* Ikon segitiga */
.jp-arrow {
  color: #9ca3af !important;
  font-size: 11px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  transition:
    transform 0.25s ease,
    color 0.25s ease !important;
}

.jp-link:hover .jp-arrow {
  transform: translateX(4px) !important;
  color: #185FA5 !important;
}

/* ================================================================
   6. ARTICLE SUMMARY CARDS
      OJS Bootstrap3: .article-summary, .media, .obj_article_summary
   ================================================================ */
.article-summary,
.obj_article_summary,
.media.article-summary {
  border: 0.5px solid var(--jatg-border) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
  background: #fff !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.article-summary:hover,
.obj_article_summary:hover {
  border-color: #b0c4de !important;
  box-shadow: 0 2px 8px rgba(12,68,124,0.06) !important;
}

/* Article title */
.article-summary .title,
.obj_article_summary .title,
.article-summary h3,
.article-summary h4 {
  font-family: var(--font-serif) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--jatg-text) !important;
  line-height: 1.45 !important;
  margin-bottom: 6px !important;
}

.article-summary .title a,
.obj_article_summary .title a {
  color: var(--jatg-text) !important;
  text-decoration: none !important;
}

.article-summary .title a:hover,
.obj_article_summary .title a:hover {
  color: var(--jatg-blue) !important;
}

/* Authors */
.article-summary .authors,
.obj_article_summary .authors {
  font-size: 12px !important;
  color: var(--jatg-text-2) !important;
  margin-bottom: 6px !important;
}

/* Section label */
.article-summary .section,
.obj_article_summary .section {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  padding: 2px 9px !important;
  border-radius: 3px !important;
  background: var(--jatg-blue-light) !important;
  color: var(--jatg-blue-dark) !important;
  margin-bottom: 8px !important;
}

/* DOI */
.article-summary .doi,
.obj_article_summary .doi {
  font-family: monospace !important;
  font-size: 11px !important;
  color: var(--jatg-blue) !important;
  margin-bottom: 6px !important;
}

/* Galley / PDF buttons */
.article-summary .galleys_links a,
.obj_article_summary .galleys_links a,
.article-summary .btn,
.obj_article_summary .btn {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  padding: 4px 12px !important;
  border-radius: 4px !important;
  margin-right: 5px !important;
}

.article-summary .galleys_links a.pdf,
.obj_article_summary .galleys_links a.pdf,
.article-summary .btn-primary,
.obj_article_summary .btn-primary {
  background: var(--jatg-blue) !important;
  border-color: var(--jatg-blue) !important;
  color: #fff !important;
}

.article-summary .galleys_links a.pdf:hover,
.obj_article_summary .galleys_links a.pdf:hover {
  background: var(--jatg-blue-dark) !important;
  border-color: var(--jatg-blue-dark) !important;
}

/* ================================================================
   7. ISSUE TABLE OF CONTENTS
      OJS Bootstrap3: .issue-toc, .section, .obj_issue_summary
   ================================================================ */
.issue-toc .section-header,
.issue-toc h2 {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.9px !important;
  color: var(--jatg-blue) !important;
  padding: 8px 0 6px !important;
  border-bottom: 0.5px solid var(--jatg-border) !important;
  margin-bottom: 12px !important;
}

.obj_issue_summary {
  border: 0.5px solid var(--jatg-border) !important;
  border-radius: 8px !important;
  padding: 14px !important;
  margin-bottom: 10px !important;
}

.obj_issue_summary .title {
  font-family: var(--font-serif) !important;
  font-size: 15px !important;
  color: var(--jatg-text) !important;
}

.obj_issue_summary .title a {
  color: var(--jatg-text) !important;
}

.obj_issue_summary .title a:hover {
  color: var(--jatg-blue) !important;
}

/* ================================================================
   8. ARTICLE DETAIL PAGE
      OJS Bootstrap3: .article-details, .obj_article_details
   ================================================================ */
.article-details h1,
.obj_article_details h1,
.article-details .page-header {
  font-family: var(--font-serif) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--jatg-text) !important;
  line-height: 1.35 !important;
  border-bottom: none !important;
  margin-bottom: 14px !important;
}

.article-details .authors,
.obj_article_details .authors {
  font-size: 13px !important;
  color: var(--jatg-text-2) !important;
  margin-bottom: 12px !important;
  line-height: 1.6 !important;
}

.article-details .doi,
.obj_article_details .doi {
  font-family: monospace !important;
  font-size: 12px !important;
  color: var(--jatg-blue) !important;
  margin-bottom: 16px !important;
}

/* Abstract panel */
.article-details .abstract,
.obj_article_details .abstract {
  background: #f9f8f6 !important;
  border-left: 3px solid var(--jatg-blue) !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 16px 18px !important;
  margin: 20px 0 !important;
}

.article-details .abstract h2,
.article-details .abstract h3,
.obj_article_details .abstract h2,
.obj_article_details .abstract h3 {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--jatg-blue) !important;
  margin-bottom: 8px !important;
}

.article-details .abstract p,
.obj_article_details .abstract p {
  font-size: 13.5px !important;
  color: var(--jatg-text-2) !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}

/* ================================================================
   9. SIDEBAR PANELS
      Bootstrap3: .panel, .panel-default, .pkp_block
   ================================================================ */
.panel,
.panel-default,
.pkp_block {
  background: #fff !important;
  border: 0.5px solid var(--jatg-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  margin-bottom: 16px !important;
}

.panel-heading,
.panel-default > .panel-heading {
  background: #fff !important;
  border-bottom: 0.5px solid var(--jatg-border) !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 10px 14px !important;
}

.panel-heading h3,
.panel-heading .panel-title,
.pkp_block .title {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--jatg-text-3) !important;
  margin: 0 !important;
}

.panel-body {
  padding: 12px 14px !important;
}

.panel-body ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.panel-body ul li {
  padding: 5px 0 !important;
  border-bottom: 0.5px solid #f3f4f6 !important;
  font-size: 12px !important;
  color: var(--jatg-text-2) !important;
}

.panel-body ul li:last-child { border-bottom: none !important; }

.panel-body ul li a {
  color: var(--jatg-text-2) !important;
}

.panel-body ul li a:hover {
  color: var(--jatg-blue) !important;
}

/* ================================================================
   10. BUTTONS — global overrides
   ================================================================ */
.btn {
  font-family: var(--font-sans) !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transition: background 0.15s, border-color 0.15s !important;
}

.btn-primary {
  background-color: var(--jatg-blue) !important;
  border-color: var(--jatg-blue) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--jatg-blue-dark) !important;
  border-color: var(--jatg-blue-dark) !important;
}

.btn-default {
  background: #fff !important;
  border-color: var(--jatg-border) !important;
  color: var(--jatg-text-2) !important;
}

.btn-default:hover {
  border-color: var(--jatg-blue) !important;
  color: var(--jatg-blue) !important;
}

/* Make submission button in sidebar */
.pkp_block a.btn,
.panel-body a.btn {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-bottom: 6px !important;
}

/* ================================================================
   11. FORMS
   ================================================================ */
.form-control {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  border: 1px solid var(--jatg-border) !important;
  border-radius: 5px !important;
  color: var(--jatg-text) !important;
  box-shadow: none !important;
  transition: border-color 0.15s !important;
}

.form-control:focus {
  border-color: var(--jatg-blue) !important;
  box-shadow: 0 0 0 3px rgba(24,95,165,0.1) !important;
}

/* ================================================================
   12. BREADCRUMBS
   ================================================================ */
.breadcrumb {
  background: #f9f8f6 !important;
  border-radius: 0 !important;
  border-bottom: 0.5px solid var(--jatg-border) !important;
  font-size: 11px !important;
  padding: 8px 16px !important;
  margin-bottom: 0 !important;
}

.breadcrumb > li + li::before {
  color: var(--jatg-text-3) !important;
}

.breadcrumb > .active {
  color: var(--jatg-text-2) !important;
}

/* ================================================================
   13. PAGINATION
   ================================================================ */
.pagination > li > a,
.pagination > li > span {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  color: var(--jatg-text-2) !important;
  border-color: var(--jatg-border) !important;
  padding: 5px 12px !important;
}

.pagination > li > a:hover {
  background: var(--jatg-blue-light) !important;
  border-color: var(--jatg-blue) !important;
  color: var(--jatg-blue) !important;
}

.pagination > .active > a,
.pagination > .active > span {
  background: var(--jatg-blue) !important;
  border-color: var(--jatg-blue) !important;
  color: #fff !important;
}

/* ================================================================
   14. LABELS & BADGES
   ================================================================ */
.label-primary { background-color: var(--jatg-blue) !important; }
.label-default { background-color: var(--jatg-text-3) !important; }
.badge { background-color: var(--jatg-blue) !important; }

/* Section / keyword tags */
.label,
span.label {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  padding: 3px 8px !important;
  border-radius: 3px !important;
  letter-spacing: 0.2px !important;
}

/* ================================================================
   15. FOOTER
      Bootstrap3 OJS: #main-footer, .cmp_footer, footer
   ================================================================ */
#main-footer,
.cmp_footer,
footer.footer,
.pkp_structure_footer {
  background: #111 !important;
  color: rgba(255,255,255,0.45) !important;
  padding: 32px 0 24px !important;
  border-top: none !important;
  margin-top: 0 !important;
}

#main-footer a,
.cmp_footer a,
footer.footer a {
  color: rgba(255,255,255,0.4) !important;
  font-size: 11px !important;
  transition: color 0.15s !important;
}

#main-footer a:hover,
.cmp_footer a:hover,
footer.footer a:hover {
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none !important;
}

#main-footer h4,
#main-footer h3,
.cmp_footer h4 {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: rgba(255,255,255,0.65) !important;
  margin-bottom: 10px !important;
}

/* Journal name in footer */
#main-footer .navbar-brand,
.cmp_footer .navbar-brand {
  font-family: var(--font-serif) !important;
  font-size: 14px !important;
  color: #fff !important;
  padding: 0 !important;
  display: block !important;
  margin-bottom: 8px !important;
  height: auto !important;
}

/* ================================================================
   16. MAIN CONTAINER
   ================================================================ */
#main-content,
.pkp_structure_main {
  padding-top: 0 !important;
}

.container {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Sidebar background */
#sidebar,
.pkp_structure_sidebar {
  background: var(--jatg-bg-alt) !important;
  padding: 16px 12px !important;
  border-radius: 8px !important;
}

/* ================================================================
   17. ALERTS
   ================================================================ */
.alert {
  border-radius: 6px !important;
  font-size: 13px !important;
  font-family: var(--font-sans) !important;
  border-left-width: 3px !important;
}

.alert-info {
  background: var(--jatg-blue-light) !important;
  border-color: var(--jatg-blue) !important;
  color: var(--jatg-blue-dark) !important;
}

/* ================================================================
   18. HEADINGS — general
   ================================================================ */
h1, h2, h3 {
  font-family: var(--font-serif) !important;
  color: var(--jatg-text) !important;
}

h4, h5, h6 {
  font-family: var(--font-sans) !important;
  color: var(--jatg-text) !important;
}

/* ================================================================
   19. SECTION DIVIDERS
   ================================================================ */
hr {
  border-top: 0.5px solid var(--jatg-border) !important;
  margin: 20px 0 !important;
}

/* ================================================================
   20. MOBILE RESPONSIVE FIXES
   ================================================================ */
@media (max-width: 767px) {
  .navbar-nav .open .dropdown-menu > li > a {
    color: rgba(255,255,255,0.78) !important;
  }

  .navbar-collapse {
    background: var(--jatg-blue-dark) !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
  }

  .article-summary,
  .obj_article_summary {
    padding: 12px !important;
  }

  .jumbotron h1 { font-size: 20px !important; }
}

/* ================================================================
   21. NAVBAR LAYOUT — logo banner full width di atas, menu di bawah
       Berdasarkan struktur HTML aktual OJS Bootstrap3:
       header.navbar > div.container-fluid > div.navbar-header (logo)
                                           > nav.navbar-collapse (menu)
   ================================================================ */

/* Header wrapper: ubah jadi kolom vertikal */
.navbar.navbar-default {
  padding: 0 !important;
}

/* container-fluid ke-2 (pembungkus logo + menu): kolom vertikal */
.navbar-default > .container-fluid:nth-child(2) {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}

/* ── BARIS 1: navbar-header — logo banner full width ── */
.navbar-header {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  background: #042C53 !important;
  display: block !important;
}

/* Logo image — full width stretch */
.navbar-brand-logo,
.navbar-brand.navbar-brand-logo {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  float: none !important;
}

.navbar-brand-logo img,
.navbar-brand.navbar-brand-logo img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Judul teks (fallback jika tidak ada logo) */
.navbar-brand:not(.navbar-brand-logo),
.site-name .navbar-brand:not(.navbar-brand-logo) {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #fff !important;
  padding: 14px 24px !important;
  height: auto !important;
  line-height: 1.3 !important;
  float: none !important;
  display: block !important;
}

/* Mobile toggle — pojok kanan di atas logo */
.navbar-toggle {
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  z-index: 10 !important;
  margin: 0 !important;
  border-color: rgba(255,255,255,0.35) !important;
}

/* ── BARIS 2: navbar-collapse — menu nav ── */
.navbar-collapse,
.navbar-default .navbar-collapse {
  width: 100% !important;
  background: #0C447C !important;
  padding: 0 16px !important;
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  float: none !important;
  box-shadow: none !important;
}

.navbar-nav {
  float: none !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2px !important;
  padding: 6px 0 !important;
}

.navbar-nav > li { float: none !important; }

.navbar-nav > li > a,
.navbar-default .navbar-nav > li > a {
  font-size: 12px !important;
  color: rgba(255,255,255,0.78) !important;
  padding: 7px 13px !important;
  border-radius: 4px !important;
  line-height: 1.4 !important;
}

.navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:hover,
.navbar-nav > li.active > a {
  background: rgba(255,255,255,0.13) !important;
  color: #fff !important;
}

/* Dropdown */
.navbar-nav .open .dropdown-menu {
  position: absolute !important;
  background: #0C447C !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 6px !important;
  margin-top: 2px !important;
  min-width: 180px !important;
  z-index: 1000 !important;
}

.navbar-nav .open .dropdown-menu > li > a {
  font-size: 12px !important;
  color: rgba(255,255,255,0.78) !important;
  padding: 8px 16px !important;
  white-space: nowrap !important;
}

.navbar-nav .open .dropdown-menu > li > a:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}

/* Search sejajar di baris menu */
.navbar-form {
  float: none !important;
  margin: 0 0 0 auto !important;
}

.navbar-collapse {
  display: flex !important;
  align-items: center !important;
}

/* Mobile */
@media (max-width: 767px) {
  .navbar-header { position: relative !important; }

  .navbar-collapse {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .navbar-nav {
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }

  .navbar-nav .open .dropdown-menu {
    position: static !important;
    background: rgba(0,0,0,0.15) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-left: 12px !important;
  }
}

/* ================================================================
   22. SEARCH ICON — sembunyikan input, tombol jadi ikon kaca pembesar
       klik langsung ke halaman search OJS
   ================================================================ */

/* Sembunyikan input field search sepenuhnya */
.navbar-form .form-control,
.navbar-form input[type="text"],
.navbar-form input[type="search"] {
  display: none !important;
}

/* Posisikan form search sejajar di baris nav (baris 2) */
.navbar-form {
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  float: none !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

/* Tombol search → ikon kaca pembesar saja */
.navbar-form button[type="submit"],
.navbar-form .btn {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.65) !important;
  font-size: 0 !important;
  padding: 7px 10px !important;
  border-radius: 4px !important;
  line-height: 1 !important;
  transition: background 0.15s, color 0.15s !important;
  cursor: pointer !important;
}

/* Glyphicon kaca pembesar via ::before */
.navbar-form button[type="submit"]::before,
.navbar-form .btn::before {
  font-family: 'Glyphicons Halflings' !important;
  content: "\e003" !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1 !important;
  color: rgba(255,255,255,0.65) !important;
}

.navbar-form button[type="submit"]:hover::before,
.navbar-form .btn:hover::before {
  color: #fff !important;
}

.navbar-form button[type="submit"]:hover,
.navbar-form .btn:hover {
  background: rgba(255,255,255,0.13) !important;
}

/* Pastikan .navbar-nav dan .navbar-form sejajar dalam satu baris */
.navbar-collapse > .navbar-nav,
.navbar-collapse > .navbar-form {
  display: inline-flex !important;
  vertical-align: middle !important;
  align-items: center !important;
}

.navbar-collapse {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  padding: 0 16px !important;
}

/* ================================================================
   23. TOGGLE NAVIGATION — perbagus tombol hamburger
   ================================================================ */

/* Sembunyikan teks "Toggle navigation" */
.navbar-toggle .sr-only {
  display: none !important;
}

.navbar-toggle {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 4px !important;
  padding: 7px 10px !important;
  margin: 0 !important;
}

.navbar-toggle:hover,
.navbar-toggle:focus {
  background: rgba(255,255,255,0.12) !important;
  outline: none !important;
}

.navbar-toggle .icon-bar {
  background: rgba(255,255,255,0.85) !important;
  height: 2px !important;
  width: 20px !important;
  border-radius: 2px !important;
  display: block !important;
  margin: 4px 0 !important;
}

/* Mobile: search tetap sejajar di baris nav */
@media (max-width: 767px) {
  .navbar-form {
    margin: 0 !important;
    padding: 4px 0 !important;
    width: auto !important;
  }

  .navbar-collapse {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .navbar-form {
    align-self: flex-start !important;
  }
}

/* ================================================================
   25. USER NAV (Login/Register) — mengambang di atas gambar logo
       Selector: #navigationUser di dalam container-fluid pertama
   ================================================================ */

/* Sembunyikan container-fluid pertama (row wrapper user nav) */
.navbar-default > .container-fluid:first-child {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 20 !important;
  background: transparent !important;
  padding: 0 !important;
  width: auto !important;
}

.navbar-default > .container-fluid:first-child .row {
  margin: 0 !important;
}

/* User nav list — transparan, mengambang pojok kanan atas */
#navigationUser {
  background: transparent !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  float: none !important;
}

#navigationUser > li > a,
#navigationUser > li.dropdown > a {
  font-size: 11px !important;
  color: rgba(255,255,255,0.85) !important;
  padding: 4px 10px !important;
  background: rgba(0,0,0,0.25) !important;
  border-radius: 3px !important;
  transition: background 0.15s, color 0.15s !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
}

#navigationUser > li > a:hover,
#navigationUser > li.dropdown > a:hover {
  background: rgba(0,0,0,0.45) !important;
  color: #fff !important;
}

/* Badge notifikasi */
#navigationUser .badge {
  background: #378ADD !important;
  font-size: 9px !important;
}

/* Dropdown menu user nav */
#navigationUser .dropdown-menu {
  background: rgba(4, 44, 83, 0.95) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 6px !important;
  margin-top: 4px !important;
  right: 0 !important;
  left: auto !important;
}

#navigationUser .dropdown-menu > li > a {
  font-size: 12px !important;
  color: rgba(255,255,255,0.78) !important;
  padding: 7px 16px !important;
}

#navigationUser .dropdown-menu > li > a:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}

/* Pastikan navbar-header posisinya relative agar absolute child bekerja */
.navbar-default {
  position: relative !important;
}

/* Mobile: kembalikan ke posisi normal */
@media (max-width: 767px) {
  .navbar-default > .container-fluid:first-child {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    background: #042C53 !important;
  }

  #navigationUser {
    padding: 4px 12px !important;
  }

  #navigationUser > li > a,
  #navigationUser > li.dropdown > a {
    background: transparent !important;
    font-size: 11px !important;
  }
}

/* ================================================================
   26. AUTHOR GUIDELINES PAGE
       Target: konten halaman About > Submissions / Author Guidelines
       OJS Bootstrap3: .pkp_structure_main, .page-about, .page-submissions
   ================================================================ */

/* ── Heading h2 — section separator dengan garis biru kiri ── */
.pkp_structure_main h2,
.page-about h2,
.page-submissions h2 {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--jatg-blue-dark) !important;
  border-left: 4px solid var(--jatg-blue) !important;
  border-bottom: none !important;
  padding: 2px 0 2px 10px !important;
  margin-top: 28px !important;
  margin-bottom: 10px !important;
}

/* ── Heading h3 — sub-section ── */
.pkp_structure_main h3,
.page-about h3,
.page-submissions h3 {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--jatg-text) !important;
  margin-top: 16px !important;
  margin-bottom: 6px !important;
}

/* ── Paragraf ── */
.pkp_structure_main p {
  font-size: 13.5px !important;
  line-height: 1.8 !important;
  color: var(--jatg-text-2) !important;
  text-align: justify !important;
  margin-bottom: 10px !important;
}

/* ── List items ── */
.pkp_structure_main ol,
.pkp_structure_main ul {
  margin: 8px 0 14px 22px !important;
  padding-left: 0 !important;
}

.pkp_structure_main li {
  font-size: 13.5px !important;
  color: var(--jatg-text-2) !important;
  line-height: 1.75 !important;
  margin-bottom: 6px !important;
}

/* ── Tabel di dalam konten guidelines ── */
.pkp_structure_main table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 14px 0 !important;
  font-size: 12.5px !important;
}

.pkp_structure_main table th {
  background: var(--jatg-blue-dark) !important;
  color: #fff !important;
  padding: 8px 12px !important;
  text-align: left !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

.pkp_structure_main table td {
  padding: 7px 12px !important;
  border-bottom: 1px solid var(--jatg-border) !important;
  vertical-align: top !important;
  color: var(--jatg-text-2) !important;
}

.pkp_structure_main table tr:nth-child(even) td {
  background: var(--jatg-bg-alt) !important;
}

.pkp_structure_main table tr:hover td {
  background: #EEF5FC !important;
}

/* ── Note / callout box — class .jatg-note ── */
.jatg-note {
  background: var(--jatg-blue-light) !important;
  border-left: 4px solid var(--jatg-blue) !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 10px 14px !important;
  margin: 14px 0 !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: var(--jatg-blue-dark) !important;
}

.jatg-note a {
  color: var(--jatg-blue) !important;
  text-decoration: underline !important;
}

/* ── Example / code block box — class .jatg-example ── */
.jatg-example {
  background: var(--jatg-bg-alt) !important;
  border: 1px solid var(--jatg-border) !important;
  border-radius: 6px !important;
  padding: 12px 16px !important;
  margin: 10px 0 !important;
  font-size: 12.5px !important;
  line-height: 1.7 !important;
  color: var(--jatg-text-2) !important;
}

.jatg-example p { margin-bottom: 8px !important; text-align: left !important; }
.jatg-example p:last-child { margin-bottom: 0 !important; }

/* ── Inline code ── */
.pkp_structure_main code {
  font-family: 'Courier New', monospace !important;
  background: #f3f4f6 !important;
  padding: 1px 5px !important;
  border-radius: 3px !important;
  font-size: 12px !important;
  color: var(--jatg-text) !important;
}

/* ── Badge kecil ── */
.jatg-badge {
  display: inline-block !important;
  background: var(--jatg-blue) !important;
  color: #fff !important;
  font-size: 10px !important;
  padding: 2px 7px !important;
  border-radius: 3px !important;
  margin-left: 5px !important;
  vertical-align: middle !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
}

/* ── Strong / bold di dalam konten ── */
.pkp_structure_main strong {
  color: var(--jatg-text) !important;
  font-weight: 600 !important;
}

/* ── Em / italic ── */
.pkp_structure_main em {
  color: var(--jatg-text-2) !important;
}

/* ── Ordered list alphabetic (type=a) ── */
.pkp_structure_main ol[type="a"] {
  list-style-type: lower-alpha !important;
}

/* ── Responsive table: scroll horizontal di mobile ── */
@media (max-width: 767px) {
  .pkp_structure_main table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}