/**
 * custom.css — Respobio Child Theme (Bootstrap3)
 * Warna brand: Hijau (#1a5c38) + Biru (#1a4a7c) + Merah PDF (#1a4a8c)
 * Font: Source Serif 4 (konten) + Inter (UI)
 */

/* ══════════════════════════════════════════════════════
   GOOGLE FONTS IMPORT
   ══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=Inter:wght@300;400;500;600&display=swap');

/* ══════════════════════════════════════════════════════
   CSS VARIABLES
   ══════════════════════════════════════════════════════ */
:root {
    --rb-green:      #2d5a1b;
    --rb-green-mid:  #4a8b1e;
    --rb-green-dark: #1a3d10;
    --rb-green-bg:   #f0f7e8;
    --rb-green-bdr:  #b5d48a;
    --rb-blue:       #1a4a8c;
    --rb-blue-mid:   #2d5fad;
    --rb-blue-bg:    #e8f0fa;
    --rb-blue-bdr:   #b0c8e8;
    --rb-blue-accent: #1a4a8c;
    --rb-blue-accent-dark: #0f3060;
    --rb-border:     #e0e0e0;
    --rb-muted:      #666;
    --rb-serif:      'Source Serif 4', Georgia, 'Times New Roman', serif;
    --rb-sans:       'Inter', Arial, sans-serif;
}

/* ══════════════════════════════════════════════════════
   GLOBAL FONT — semua halaman
   ══════════════════════════════════════════════════════ */
body {
    font-family: var(--rb-serif) !important;
    font-size: 14px;
    color: #1a1a1a;
    background: #f5f5f5;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--rb-serif) !important;
}

h2 small {
    font-weight: 400;
    line-height: 2;
    color: #ffffff;
    font-size: 14px;
}

.page-header small {
    display: block;
    margin-top: 0.2em;
}

/* UI elements pakai Inter */
.btn, button, input, select, textarea,
.nav, .navbar, .breadcrumb, .pagination,
.label, .badge, .alert, table, .dropdown-menu,
.list-group-item, .panel-heading {
    font-family: var(--rb-sans) !important;
}
p, li, td, th { font-family: var(--rb-serif); }

/* ══════════════════════════════════════════════════════
   NAVBAR — HANYA site_header (menu nav utama di bawah banner)
   .navbar-default di atas banner TIDAK disentuh agar banner tetap tampil
   ══════════════════════════════════════════════════════ */
.site_header .navbar-default,
.site_header .navbar {
    background-color: var(--rb-green) !important;
    border-color: var(--rb-green-dark) !important;
    border-radius: 0;
}
.site_header .navbar-nav > li > a {
    color: rgba(255,255,255,.92) !important;
    font-family: var(--rb-sans) !important;
    font-size: 12.5px;
    text-shadow: 0 1px 1px rgba(0,0,0,.15);
}
.site_header .navbar-nav > li > a:hover,
.site_header .navbar-nav > .active > a {
    background-color: rgba(255,255,255,.15) !important;
    color: #fff !important;
}
/* Search form */
.site_header .navbar-form .form-control {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.3);
    color: #fff;
    font-family: var(--rb-sans) !important;
}
.site_header .navbar-form .form-control::placeholder { color: rgba(255,255,255,.55); }
.site_header .navbar-form .btn {
    background: var(--rb-green-mid);
    border-color: var(--rb-green-mid);
    color: #fff;
}


/* ══════════════════════════════════════════════════════
   NAVBAR FORCE OVERRIDE — semua kemungkinan selector
   ══════════════════════════════════════════════════════ */
/* Navbar teks - pastikan putih dengan semua selector kemungkinan */
.site_header .navbar-nav > li > a,
.site_header #main-navigation li a,
.site_header ul.pkp_navigation_primary li a {
    color: rgba(255,255,255,.92) !important;
    font-family: var(--rb-sans) !important;
    font-size: 12.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.site_header .navbar-nav > li > a:hover,
.site_header .navbar-nav > .active > a,
.site_header .navbar-nav > .active > a:hover,
.site_header #main-navigation li a:hover {
    background-color: rgba(255,255,255,.15) !important;
    color: #fff !important;
}
/* Navbar brand/title */
.site_header .navbar-brand {
    color: #fff !important;
    font-family: var(--rb-sans) !important;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
/* Dropdown caret */
.site_header .navbar-nav > .dropdown > a .caret {
    border-top-color: rgba(255,255,255,.8) !important;
    border-bottom-color: rgba(255,255,255,.8) !important;
}
/* Pastikan navbar background hijau */
/* Hanya site_header navbar yang dihijaukan — BUKAN header banner */
.site_header .navbar,
.site_header .navbar-default {
    background-color: var(--rb-green) !important;
    border-color: var(--rb-green-dark) !important;
}
/* Toggle button mobile */
.site_header .navbar-toggle {
    border-color: rgba(255,255,255,.3) !important;
}
.site_header .navbar-toggle .icon-bar { background-color: #fff !important; }
.site_header .navbar-toggle:hover,
.site_header .navbar-toggle:focus {
    background-color: rgba(255,255,255,.1) !important;
}
/* Dropdown menu navbar */
.site_header .dropdown-menu {
    background-color: var(--rb-green) !important;
    border-color: var(--rb-green-mid) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.2) !important;
}
.site_header .dropdown-menu > li > a {
    color: rgba(255,255,255,.88) !important;
    font-family: var(--rb-sans) !important;
    font-size: 12px;
}
.site_header .dropdown-menu > li > a:hover {
    background-color: rgba(255,255,255,.12) !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════════════════
   HEADER AREA
   ══════════════════════════════════════════════════════ */
.pkp_structure_head {
    background: #fff;
    border-bottom: 3px solid var(--rb-green);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* ══════════════════════════════════════════════════════
   ARTIKEL TOC — card style baru (rb-article-card)
   ══════════════════════════════════════════════════════ */
.rb-article-card {
    border: .5px solid var(--rb-border);
    border-radius: 6px;
    padding: 13px 15px;
    margin-bottom: 10px;
    background: #fff;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    transition: border-color .15s, background .15s;
}
.rb-article-card:hover {
    border-color: var(--rb-green-bdr);
    background: var(--rb-green-bg);
}
.rb-cover { flex-shrink: 0; }
.rb-cover img { width: 80px; border-radius: 3px; }
.rb-body { flex: 1; min-width: 0; }

/* Judul — biru */
.rb-title {
    font-family: var(--rb-serif) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    margin: 0 0 5px !important;
    color: var(--rb-blue) !important;
}
.rb-title a {
    color: var(--rb-blue) !important;
    text-decoration: none !important;
}
.rb-title a:hover { color: var(--rb-blue-mid) !important; text-decoration: underline !important; }
.rb-subtitle {
    display: block;
    font-size: 12px;
    color: var(--rb-muted);
    font-weight: 400;
    margin-top: 2px;
}

/* Authors */
.rb-authors {
    font-family: var(--rb-sans) !important;
    font-size: 11.5px;
    color: var(--rb-muted);
    font-style: italic;
    margin-bottom: 8px;
}

/* Meta row */
.rb-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

/* Badges */
.rb-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--rb-sans) !important;
    font-size: 10px;
    padding: 2px 9px;
    border-radius: 10px;
    white-space: nowrap;
    border: .5px solid;
}
.rb-green {
    background: var(--rb-green-bg);
    border-color: var(--rb-green-bdr);
    color: var(--rb-green);
}
.rb-blue {
    background: var(--rb-blue-bg);
    border-color: var(--rb-blue-bdr);
    color: var(--rb-blue);
}
.rb-blue a { color: var(--rb-blue) !important; text-decoration: none !important; font-size: 10px; }
.rb-blue a:hover { text-decoration: underline !important; }
.rb-gray {
    background: #f5f5f5;
    border-color: #ddd;
    color: #444;
    font-weight: 600;
}

/* Buttons — kanan */
.rb-btns { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; }
.rb-btns .btn { font-size: 10.5px !important; padding: 3px 10px !important; font-family: var(--rb-sans) !important; }

/* Hapus hr bawaan Bootstrap3 antar artikel */
.article-summary + hr,
.rb-article-card + hr { display: none !important; }

/* Galley link PDF — tetap merah */
.rb-btns .btn-danger,
.rb-btns a.galley_link { font-family: var(--rb-sans) !important; }

/* ══════════════════════════════════════════════════════
   TOC COUNTS (statistik) — badge hijau
   ══════════════════════════════════════════════════════ */
.toc_counts {
    margin-top: 8px;
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}
.toc_counts > div {
    display: inline-flex !important;
    align-items: center;
    gap: 3px;
    font-family: var(--rb-sans) !important;
    font-size: 10px !important;
    color: var(--rb-green) !important;
    background: var(--rb-green-bg);
    padding: 2px 9px;
    border-radius: 10px;
    border: .5px solid var(--rb-green-bdr);
    margin: 0 !important;
    white-space: nowrap;
}
.toc_counts img { vertical-align: middle; height: 12px; width: auto; }
/* DOI badge — biru */
.toc_counts .doi-badge,
.toc_counts > div.doi {
    color: var(--rb-blue) !important;
    background: var(--rb-blue-bg) !important;
    border-color: var(--rb-blue-bdr) !important;
}
.toc_counts a { color: var(--rb-blue) !important; text-decoration: none !important; word-break: break-all; }
.toc_counts a:hover { text-decoration: underline !important; }

/* ══════════════════════════════════════════════════════
   SECTION HEAD (Articles / Review) — hijau
   ══════════════════════════════════════════════════════ */
.section_title,
.pkp_helpers_align_left h2,
.issue_toc .section_title h2 {
    background: var(--rb-green) !important;
    color: #fff !important;
    font-family: var(--rb-sans) !important;
    font-size: 10px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 5px 13px !important;
    border-radius: 3px !important;
    margin-bottom: 10px !important;
    border: none !important;
}

/* ══════════════════════════════════════════════════════
   BUTTONS — global
   ══════════════════════════════════════════════════════ */
/* btn-primary → hijau */
.btn-primary {
    background-color: var(--rb-green) !important;
    border-color: var(--rb-green) !important;
    color: #fff !important;
    font-family: var(--rb-sans) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--rb-green-dark) !important;
    border-color: var(--rb-green-dark) !important;
    color: #fff !important;
}
/* btn-default → outline hijau */
.btn-default {
    color: var(--rb-green) !important;
    border-color: var(--rb-green-bdr) !important;
    background: #fff !important;
    font-family: var(--rb-sans) !important;
}
.btn-default:hover {
    background: var(--rb-green-bg) !important;
    border-color: var(--rb-green) !important;
    color: var(--rb-green-dark) !important;
}
/* PDF/action button — biru brand */
.btn-danger, .galley_link.pdf, a.btn[href*="download"], a.btn[href*="galley"] {
    background-color: #1a4a8c !important;
    border-color: #1a4a8c !important;
    color: #fff !important;
    font-family: var(--rb-sans) !important;
    font-size: 11px !important;
}
.btn-danger:hover { background-color: #0f3060 !important; border-color: #0f3060 !important; }
/* btn-success, btn-info → hijau */
.btn-success, .btn-info {
    background-color: var(--rb-green) !important;
    border-color: var(--rb-green) !important;
    color: #fff !important;
    font-family: var(--rb-sans) !important;
}
.btn-success:hover, .btn-info:hover {
    background-color: var(--rb-green-dark) !important;
    border-color: var(--rb-green-dark) !important;
}
/* Abstract button — outline biru */
a.btn.btn-primary[href*="article/view"]:not([href*="download"]) {
    background: #fff !important;
    color: var(--rb-blue-mid) !important;
    border-color: var(--rb-blue-mid) !important;
}
a.btn.btn-primary[href*="article/view"]:not([href*="download"]):hover {
    background: var(--rb-blue-bg) !important;
}

/* ══════════════════════════════════════════════════════
   LINKS — global
   ══════════════════════════════════════════════════════ */
a { color: var(--rb-blue); }
a:hover { color: var(--rb-blue-mid); }
a:visited { color: var(--rb-blue); }

/* ══════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════ */
.pkp_block {
    background: #fff;
    border: .5px solid #e8e8e8;
    border-radius: 6px;
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.pkp_block .title {
    background: var(--rb-green) !important;
    color: #fff !important;
    font-family: var(--rb-sans) !important;
    font-size: 10px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 7px 13px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: block;
}
.pkp_block .content {
    padding: 10px 13px;
    font-family: var(--rb-sans) !important;
    font-size: 12px;
}
.pkp_block .content a {
    color: var(--rb-blue) !important;
    text-decoration: none;
    display: block;
    padding: 3px 0;
    border-bottom: .5px solid #f5f5f5;
    font-size: 12px;
    transition: color .12s, padding-left .12s;
}
.pkp_block .content a:last-child { border-bottom: none; }
.pkp_block .content a:hover { color: var(--rb-green) !important; padding-left: 4px; }

/* Make a Submission */
.pkp_block_make_submission {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
.pkp_block_make_submission .content { padding: 4px 0 !important; }
.pkp_block_make_submission .block_make_submission_link {
    display: block !important;
    text-align: center !important;
    padding: 10px 16px !important;
    background: var(--rb-green) !important;
    color: #fff !important;
    border-radius: 4px !important;
    font-family: var(--rb-sans) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: 2px solid var(--rb-green) !important;
    transition: background .15s !important;
}
.pkp_block_make_submission .block_make_submission_link:hover {
    background: var(--rb-green-dark) !important;
    border-color: var(--rb-green-dark) !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════════════════════ */
.breadcrumb {
    background: transparent;
    padding: 4px 0;
    font-family: var(--rb-sans) !important;
    font-size: 12px;
}
.breadcrumb > li + li::before { color: #aaa; content: "›\00a0"; }
.breadcrumb a { color: var(--rb-green) !important; text-decoration: none; }
.breadcrumb a:hover { color: var(--rb-green-dark) !important; }
.breadcrumb > .active { color: #666; }

/* ══════════════════════════════════════════════════════
   FORM CONTROLS
   ══════════════════════════════════════════════════════ */
.form-control:focus {
    border-color: var(--rb-green) !important;
    box-shadow: 0 0 0 2px rgba(26,92,56,.12) !important;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked { accent-color: var(--rb-green); }

/* ══════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════ */
.pagination > .active > a,
.pagination > .active > span {
    background-color: var(--rb-green) !important;
    border-color: var(--rb-green) !important;
    color: #fff !important;
}
.pagination > li > a { color: var(--rb-green) !important; font-family: var(--rb-sans) !important; }
.pagination > li > a:hover { background: var(--rb-green-bg) !important; border-color: var(--rb-green-bdr) !important; }

/* ══════════════════════════════════════════════════════
   ALERT / INFO BOX
   ══════════════════════════════════════════════════════ */
.alert-info {
    background: var(--rb-green-bg) !important;
    border-color: var(--rb-green-bdr) !important;
    color: var(--rb-green-dark) !important;
    font-family: var(--rb-sans) !important;
}
.alert-info a { color: var(--rb-blue) !important; font-weight: 600; }

/* ══════════════════════════════════════════════════════
   TABS
   ══════════════════════════════════════════════════════ */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--rb-green) !important;
    border-color: var(--rb-green-bdr) var(--rb-green-bdr) #fff !important;
    font-family: var(--rb-sans) !important;
}
.nav-tabs > li > a { color: #666 !important; font-family: var(--rb-sans) !important; }
.nav-tabs > li > a:hover { color: var(--rb-green) !important; }

/* ══════════════════════════════════════════════════════
   ISSUE TOC — card cover issue
   ══════════════════════════════════════════════════════ */
.cover-image img, .issue_cover img {
    border-radius: 4px;
    border: .5px solid var(--rb-green-bdr);
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

/* ══════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════ */
.pkp_structure_footer, footer.footer {
    background: var(--rb-green) !important;
    color: rgba(255,255,255,.8) !important;
    font-family: var(--rb-sans) !important;
    font-size: 11px;
}
footer.footer a { color: rgba(255,255,255,.85) !important; }
footer.footer a:hover { color: #fff !important; }

/* ══════════════════════════════════════════════════════
   MONTHLY STATS CHART
   ══════════════════════════════════════════════════════ */
.monthly-stats-container { margin-top: 15px; margin-bottom: 20px; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════
   SIDEBAR CUSTOM BLOCKS — icon grid horizontal (berdampingan)
   Struktur Download: masing-masing icon dalam <p> TERPISAH
   Struktur Tools: semua icon dalam satu <p>
   ══════════════════════════════════════════════════════ */

/* Download: .content jadi flex container, tiap <p> jadi item */
#customblock-download .content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 10px 8px !important;
    align-items: flex-start !important;
}
#customblock-download .content p {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    max-width: 70px !important;
}

/* Tools: <p> jadi flex row */
#customblock-tools .content {
    padding: 10px 8px !important;
}
#customblock-tools .content p {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ukuran semua icon */
#customblock-download .content img,
#customblock-tools .content img {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    display: block !important;
    transition: opacity .15s, transform .15s !important;
}
#customblock-download .content img:hover,
#customblock-tools .content img:hover {
    opacity: .85 !important;
    transform: scale(1.05) !important;
}
/* Label teks di bawah icon Download */
#customblock-download .content span,
#customblock-download .content small {
    font-size: 9px !important;
    font-family: var(--rb-sans) !important;
    text-align: center !important;
    color: #555 !important;
    line-height: 1.3 !important;
    margin-top: 3px !important;
    display: block !important;
}

/* ══════════════════════════════════════════════════════
   REGISTER / LOGIN BUTTON — visible shading
   ══════════════════════════════════════════════════════ */
/* Navbar atas area Register & Login */
.pkp_navigation_user > li > a,
#navigationUser > li > a,
ul.pkp_navigation_user > li > a {
    background: rgba(255,255,255,.15) !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    border-radius: 4px !important;
    padding: 4px 14px !important;
    margin: 6px 4px !important;
    color: #070707 !important;
    font-family: var(--rb-sans) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.2) !important;
    transition: background .15s, border-color .15s !important;
    display: inline-block !important;
}
.pkp_navigation_user > li > a:hover,
#navigationUser > li > a:hover,
ul.pkp_navigation_user > li > a:hover {
    background: rgba(255,255,255,.28) !important;
    border-color: rgba(255,255,255,.6) !important;
    color: #fff !important;
    text-decoration: none !important;
}
/* Register/Login di header banner — pill button hitam */
header#headerNavigationContainer .pkp_navigation_user > li > a,
.pkp_structure_head .pkp_navigation_user > li > a,
.navbar-header .pkp_navigation_user > li > a,
.pkp_navigation_user > li > a {
    border: 1.5px solid rgba(0,0,0,.35) !important;
    border-radius: 20px !important;
    padding: 4px 14px !important;
    margin: 4px 3px !important;
    font-family: var(--rb-sans) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #111 !important;
    text-shadow: none !important;
    background: rgba(255,255,255,.75) !important;
    backdrop-filter: blur(4px) !important;
    transition: background .15s, border-color .15s !important;
}
header#headerNavigationContainer .pkp_navigation_user > li > a:hover,
.pkp_structure_head .pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:hover {
    background: rgba(255,255,255,.95) !important;
    border-color: rgba(0,0,0,.5) !important;
    color: #000 !important;
    text-decoration: none !important;
}

/* ══════════════════════════════════════════════════════
   ARTICLE TOC CARD — rb-article-item
   ══════════════════════════════════════════════════════ */
.rb-article-item {
    border: .5px solid #e0e0e0;
    border-radius: 6px;
    padding: 13px 15px;
    margin-bottom: 10px;
    background: #fff;
    transition: border-color .15s, background .15s;
}
.rb-article-item:hover {
    border-color: #a8d5be;
    background: #edf7f2;
}
.rb-title {
    font-family: 'Source Serif 4', Georgia, serif !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 4px;
}
.rb-title a { color: #1a4a7c !important; text-decoration: none !important; }
.rb-title a:hover { color: #2d6db5 !important; text-decoration: underline !important; }
.rb-subtitle { display: block; font-size: 12px; color: #666; font-style: italic; margin-top: 3px; }
.rb-authors { font-family: 'Inter', Arial, sans-serif !important; font-size: 11.5px; color: #666; font-style: italic; margin-bottom: 8px; }
.rb-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.rb-badge { display: inline-flex; align-items: center; gap: 4px; font-family: 'Inter', Arial, sans-serif !important; font-size: 10px; padding: 2px 9px; border-radius: 10px; white-space: nowrap; }
.rb-badge img { vertical-align: middle; }
.rb-badge-green { background: #edf7f2; border: .5px solid #a8d5be; color: #1a5c38; }
.rb-badge-blue { background: #e8f0fa; border: .5px solid #b0c8e8; color: #1a4a7c; }
.rb-badge-blue a { color: #1a4a7c !important; text-decoration: none !important; word-break: break-all; }
.rb-badge-blue a:hover { text-decoration: underline !important; }
.rb-badge-gray { background: #f5f5f5; border: .5px solid #ddd; color: #444; font-weight: 600; }
.rb-btn-row { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════
   PDF BUTTON DI TOC CARD — kecil dan proporsional
   ══════════════════════════════════════════════════════ */
.rb-article-item .btn-group .btn,
.rb-article-item .download .btn,
.rb-article-item a.galley_link,
.rb-article-item .galley_link {
    font-size: 10.5px !important;
    padding: 3px 10px !important;
    font-family: var(--rb-sans) !important;
    font-weight: 500 !important;
    border-radius: 3px !important;
    line-height: 1.4 !important;
}
.rb-article-item a.galley_link.pdf,
.rb-article-item .btn-danger {
    background-color: var(--rb-blue) !important;
    border-color: var(--rb-blue) !important;
    color: #fff !important;
    font-size: 10.5px !important;
    padding: 3px 10px !important;
}
.rb-article-item a.galley_link.pdf:hover,
.rb-article-item .btn-danger:hover {
    background-color: var(--rb-blue-accent-dark) !important;
    border-color: var(--rb-blue-accent-dark) !important;
}
.rb-btn-row .btn-group,
.rb-btn-row { margin-left: auto; }

/* ══════════════════════════════════════════════════════
   SIDEBAR vs MAIN CONTENT — background berbeda
   ══════════════════════════════════════════════════════ */
/* Main content area — putih bersih */
.pkp_structure_main {
    background: #ffffff !important;
    padding: 20px !important;
}
/* Sidebar — abu sangat muda */
.pkp_structure_sidebar {
    background: #f5f6f7 !important;
    padding: 0px 12px !important;
}
/* Seluruh page background sedikit abu */
.pkp_structure_content {
    background: #f0f1f3 !important;
}

/* ══════════════════════════════════════════════════════
   SECTION HEADERS — dengan background hijau
   ══════════════════════════════════════════════════════ */
/* Section header artikel details — background style */
.rb-det-sh {
    font-family: 'Inter', Arial, sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #fff !important;
    background: var(--rb-green) !important;
    padding: 5px 10px !important;
    border-radius: 3px !important;
    margin-bottom: 12px !important;
    border-bottom: none !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* Section header TOC (Articles / Review) */
.section_title h2,
.pkp_helpers_align_left h2,
.section h2 {
    background: var(--rb-green) !important;
    color: #fff !important;
    font-family: 'Inter', Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
    padding: 5px 13px !important;
    border-radius: 3px !important;
    margin-bottom: 10px !important;
    border: none !important;
    display: block !important;
}

/* ══════════════════════════════════════════════════════
   ARTICLE INFO CARD HEADER — sedikit lebih kecil
   ══════════════════════════════════════════════════════ */
.rb-det-card-hd {
    background: var(--rb-green) !important;
    color: #fff;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 6px 12px;
}
.rb-det-row {
    font-size: 11px;
    padding: 4px 12px;
}
.rb-det-lbl {
    color: #888;
    min-width: 68px;
    flex-shrink: 0;
    font-size: 10.5px;
}

/* ══════════════════════════════════════════════════════
   MOBILE RESPONSIVE NAVBAR — hamburger toggle
   ══════════════════════════════════════════════════════ */



/* navbar-header: default Bootstrap */
/* ══════════════════════════════════════════════════════
   MOBILE — Bootstrap3 handles toggle, kita hanya styling
   ══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Pastikan site_header tetap tampil */
    .site_header { display: block !important; }

    /* Warna navbar saat collapse */
    .site_header .navbar-collapse.in,
    .site_header .navbar-collapse.collapsing {
        background: var(--rb-green) !important;
        border-top: 1px solid rgba(255,255,255,.15) !important;
        padding: 0 !important;
    }

    /* Nav items vertikal */
    .site_header .navbar-nav > li > a {
        padding: 10px 15px !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }

    /* Dropdown mobile */
    .site_header .navbar-nav .open .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        background: rgba(0,0,0,.18) !important;
        border: none !important;
        box-shadow: none !important;
    }
    .site_header .navbar-nav .open .dropdown-menu > li > a {
        color: rgba(255,255,255,.88) !important;
        padding: 9px 25px !important;
    }

    /* Search form */
    .site_header .navbar-form {
        margin: 6px 0 !important;
        padding: 6px 15px !important;
    }

    /* Content layout */
    .toc_counts { flex-direction: column; align-items: flex-start; }
    .rb-meta { flex-direction: column; align-items: flex-start; }
    .rb-btn-row { margin-left: 0 !important; margin-top: 6px; }
}

/* ══════════════════════════════════════════════════════
   MOBILE — sembunyikan banner image, tampilkan navbar hijau
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .navbar {
        background-image: none !important;
        background-color: var(--rb-green) !important;
        min-height: auto !important;
        padding: 0 !important;
    }
    #headerNavigationContainer {
        min-height: auto !important;
    }
}