/* =====================================================================
 * jupiter-journal.css — STYLESHEET JURNAL JUPITER STA
 * ---------------------------------------------------------------------
 * Jurnal Pertanian Terpadu Santo Thomas Aquinas (JUPITER STA)
 * STIPER Santo Thomas Aquinas Jayapura — E-ISSN 2828-4909
 *
 * BERKAS INI BERLAKU UNTUK TIGA JALUR PEMASANGAN
 *   1. Lapis B — Appearance → Advanced → Additional Style Sheet
 *      (tempel seluruh isi berkas; tersimpan di DB, aman saat upgrade)
 *   2. Lapis C — tema anak: theme-jupiter/{3.3,3.5}/styles/jupiter.css
 *   3. Manual — <DOCROOT>/styles/jupiter-journal.css (lihat styles/README.md)
 *
 * ---------------------------------------------------------------------
 * ATURAN KERAS (dipelajari dari uji coba live di ojs.stipersta.ac.id)
 * ---------------------------------------------------------------------
 * OJS 3.3 "default" theme memakai LAYOUT GRID FIXED berbasis float:
 *   .pkp_head_wrapper, .pkp_structure_content, .pkp_structure_footer
 *     → width: 728 / 952 / 1160px per breakpoint
 *   .pkp_structure_main     → float:left;  width:652/860px; padding 0 2.143rem 6.429rem
 *   .pkp_structure_sidebar  → float:right; width:300px
 *
 * Karena itu stylesheet ini DILARANG menyentuh geometri layout:
 *   ✗ JANGAN set width / max-width / margin auto / padding pada
 *     .pkp_head_wrapper, .pkp_structure_content, .pkp_structure_main,
 *     .pkp_structure_sidebar, .pkp_structure_footer, .pkp_navigation_primary_wrapper
 *   ✗ JANGAN set display pada wadah layout (merusak float & clearfix)
 *   ✓ HANYA set warna, border, font, dan padding pada elemen DI DALAM
 *     (judul, tautan, tombol, kartu) — itu aman.
 *
 * Inilah sebab versi sebelumnya tampak "berantakan": ia memasang
 * max-width + margin auto + padding + display:flex pada wadah float
 * milik OJS, sehingga grid 652/300px dan clearfix-nya rusak.
 *
 * ATURAN LAIN
 *   - Selector HANYA yang terbukti ada di HTML live OJS 3.3.0.24.
 *   - Tanpa garis tepi atas/emas pada header (jangan ubah chrome OJS).
 *   - Tidak menyembunyikan elemen wajib (aksesibilitas & SEO aman).
 *   - Warna dari variabel :root → ubah 4 baris = seluruh situs berubah.
 *   - !important hanya untuk mengalahkan spesifisitas tema induk.
 * ===================================================================== */

/* =====================================================================
 * 01 — TOKEN DESAIN
 * Ubah blok ini untuk mengganti identitas visual seluruh jurnal.
 * SENGAJA TIDAK ada token lebar/padding wadah: geometri milik OJS.
 * ===================================================================== */
:root {
  /* --- Palet identitas STIPER Santo Thomas Aquinas --- */
  --sta-green: #1f6b3a;        /* hijau pertanian — warna utama   */
  --sta-green-dark: #16522b;   /* hover/aktif                     */
  --sta-green-light: #eaf3ec;  /* latar lembut                    */
  --sta-gold: #c9a227;         /* emas aksen                      */
  --sta-gold-light: #f7eecb;   /* latar aksen lembut              */
  --sta-ink: #22303a;          /* teks utama                      */
  --sta-ink-soft: #55636d;     /* teks sekunder                   */
  --sta-line: #dfe4e8;         /* garis / border                  */
  --sta-surface: #ffffff;      /* permukaan kartu                 */
  --sta-surface-alt: #f7f9f8;  /* permukaan alternatif            */

  /* --- Tipografi --- */
  --sta-font-body: "Noto Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sta-font-head: "Noto Serif", Georgia, "Times New Roman", serif;
  --sta-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* --- Bentuk (hanya radius & bayangan, bukan lebar) --- */
  --sta-radius: 6px;
  --sta-radius-lg: 10px;
  --sta-shadow: 0 1px 3px rgba(34, 48, 58, .10);
  --sta-shadow-lg: 0 6px 20px rgba(34, 48, 58, .12);

  /* --- Status --- */
  --sta-success: #1f6b3a;
  --sta-info: #23638f;
  --sta-warning: #8a5a00;
  --sta-danger: #a4221c;
}

/* =====================================================================
 * 02 — DASAR & TIPOGRAFI
 * Hanya properti teks. Ukuran body SENGAJA tidak diubah: OJS memakai
 * rem untuk seluruh layout (width 652px, font 1rem = 16px). Mengubah
 * font-size root akan memperbesar/mengecilkan grid, bukan teks saja.
 * ===================================================================== */
body {
  color: var(--sta-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--sta-green-dark);
}

/* Tautan umum memakai warna hijau identitas */
a {
  color: var(--sta-green);
}

a:hover,
a:focus {
  color: var(--sta-green-dark);
}

/* Fokus keyboard harus selalu terlihat (aksesibilitas) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--sta-gold);
  outline-offset: 2px;
}

/* Teks bantu / keterangan kecil */
.pkp_help,
.pkp_form .description,
.cmp_notification .description {
  color: var(--sta-ink-soft);
}

/* Kutipan & kode di dalam konten artikel */
.pkp_structure_main blockquote {
  margin: 1.25rem 0;
  padding: .75rem 1.25rem;
  border-left: 4px solid var(--sta-gold);
  background: var(--sta-surface-alt);
  font-style: italic;
}

.pkp_structure_main code,
.pkp_structure_main pre {
  font-family: var(--sta-font-mono);
}

.pkp_structure_main code {
  background: var(--sta-green-light);
  color: var(--sta-green-dark);
  padding: .1rem .35rem;
  border-radius: 4px;
}

.pkp_structure_main pre {
  background: #1f2429;
  color: #f2f5f3;
  padding: 1rem 1.25rem;
  border-radius: var(--sta-radius);
  overflow-x: auto;
}

/* Gambar di dalam konten tidak boleh melebihi kolomnya */
.pkp_structure_main img {
  max-width: 100%;
  height: auto;
}

/* =====================================================================
 * 03 — HEADER & LOGO
 * TIDAK mengubah width/padding .pkp_head_wrapper (grid milik OJS).
 * Logo dibatasi tingginya saja agar proporsional di semua layar.
 * ===================================================================== */
.pkp_site_name_wrapper {
  border-bottom: 3px solid var(--sta-green);
}

.pkp_site_name .is_img img {
  max-height: 84px;
  width: auto;
}

@media (max-width: 767px) {
  .pkp_site_name .is_img img {
    max-height: 56px;
  }
}

/* Judul jurnal berbasis teks (bila logo tidak dipakai) */
.pkp_site_name {
  color: var(--sta-green-dark);
  font-family: var(--sta-font-head);
}

.pkp_site_name > a {
  color: var(--sta-green-dark);
  text-decoration: none;
}

/* Breadcrumb: garis bawah tipis, tanpa mengubah lebar */
.cmp_breadcrumbs {
  border-bottom: 1px solid var(--sta-line);
  padding-bottom: .6rem;
}

/* =====================================================================
 * 04 — NAVIGASI
 * PENTING: menu utama OJS berada di atas latar gelap (biru tema induk),
 * teksnya PUTIH. Jangan paksa warna gelap di sini — akan jadi tak terbaca.
 * Kita hanya mengganti latar bar dan warna sorotan.
 * ===================================================================== */
.pkp_navigation_primary_row {
  background: var(--sta-green-dark);
}

/* Wadah navigasi milik OJS; jangan set width/display */
.pkp_navigation_primary > li > a {
  color: #ffffff;
  border-bottom-color: transparent;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  background: transparent;
  color: var(--sta-gold);
  border-bottom-color: var(--sta-gold);
}

/* Submenu (Tentang Kami → Tentang Jurnal Ini, dst.) */
.pkp_navigation_primary ul {
  background: var(--sta-green-dark);
  border-color: var(--sta-green-dark);
}

.pkp_navigation_primary ul a {
  color: #ffffff;
}

.pkp_navigation_primary ul a:hover,
.pkp_navigation_primary ul a:focus {
  background: var(--sta-green);
  color: #ffffff;
}

/* Menu pengguna (Cari / Daftar / Login) — di bar atas, teks gelap */
.pkp_navigation_user a {
  color: var(--sta-ink);
}

.pkp_navigation_user a:hover,
.pkp_navigation_user a:focus {
  color: var(--sta-green);
}

/* Tombol "Open Menu" (mobile) */
.pkp_site_nav_toggle {
  border-color: var(--sta-green);
}

.pkp_site_nav_toggle:focus {
  outline: 3px solid var(--sta-gold);
}

/* =====================================================================
 * 05a — TOMBOL
 * Kelas aktif di OJS 3.3: .pkp_button, _primary, _offset, _link
 * (TIDAK ada .cmp_button di front-end 3.3 — jangan andalkan itu.)
 * ===================================================================== */
.pkp_button_primary {
  background: var(--sta-green);
  border-color: var(--sta-green);
  color: #ffffff;
  box-shadow: 0 1px 0 var(--sta-green);
}

.pkp_button_primary:hover,
.pkp_button_primary:focus {
  background: var(--sta-green-dark);
  border-color: var(--sta-green-dark);
  color: #ffffff;
}

.pkp_button:hover,
.pkp_button:focus {
  border-color: var(--sta-green);
  color: var(--sta-green-dark);
}

/* Tombol sekunder: merah pada tema induk → kita jadikan netral */
.pkp_button_offset {
  color: var(--sta-ink-soft);
}

.pkp_button_offset:hover,
.pkp_button_offset:focus {
  border-color: var(--sta-ink-soft);
  color: var(--sta-ink);
}

/* =====================================================================
 * 05b — FORM
 * Hanya warna focus; lebar input dibiarkan diatur OJS agar grid aman.
 * ===================================================================== */
.pkp_form input:focus,
.pkp_form select:focus,
.pkp_form textarea:focus {
  border-color: var(--sta-green);
  box-shadow: 0 0 0 3px var(--sta-green-light);
  outline: none;
}

.pkp_form .error,
.cmp_form .error {
  border-color: var(--sta-danger);
}

.pkp_form .error_list {
  color: var(--sta-danger);
}

/* Kotak pencarian di header */
.pkp_search input[type="search"]:focus {
  border-color: var(--sta-green);
  outline: none;
}

.pkp_search .submit {
  background: var(--sta-green);
  border-color: var(--sta-green);
}

/* =====================================================================
 * 06 — SIDEBAR
 * Kelas blok asli OJS 3.3 (dari HTML live):
 *   .pkp_block.block_web_feed     → Terbitan Terkini (ikon RSS)
 *   .pkp_block.block_information  → Informasi (Untuk Pembaca/Penulis)
 *   .pkp_block.block_language     → Bahasa
 * TIDAK menyentuh float/width .pkp_structure_sidebar (layout OJS).
 * ===================================================================== */
.pkp_block .title {
  color: var(--sta-green-dark);
  border-bottom: 2px solid var(--sta-gold);
  padding-bottom: .35rem;
}

/* Blok informasi diberi latar lembut agar menonjol */
.pkp_block.block_information {
  background: var(--sta-green-light);
}

.pkp_block.block_information .title {
  border-bottom-color: var(--sta-green);
}

/* Ikon RSS/Atom di blok web feed: jangan melebar */
.pkp_block.block_web_feed img {
  max-width: 20px;
  height: auto;
}

.pkp_block.block_web_feed ul li {
  display: inline-block;
  margin-right: .75rem;
}

/* Bahasa aktif ditandai tebal */
.pkp_block.block_language li.current a {
  font-weight: 700;
  color: var(--sta-green-dark);
}

/* =====================================================================
 * 07 — DAFTAR ARTIKEL & ISI EDISI
 * Struktur asli (HTML live):
 *   .obj_issue_toc .heading            → judul edisi + tanggal terbit
 *   .obj_issue_toc .sections .section  → bagian (h3 "Artikel")
 *   ul.cmp_article_list.articles > li > .obj_article_summary
 *     .title (h4) > a
 *     .meta > .authors + .pages
 *     ul.galleys_links > li > a.obj_galley_link.pdf
 * JANGAN beri display/margin besar pada .obj_article_summary —
 * tema induk memakai float untuk .cover dan posisi absolut .pages.
 * ===================================================================== */

/* Judul edisi di beranda */
.obj_issue_toc .heading .title {
  color: var(--sta-green-dark);
}

.obj_issue_toc .heading .published .label {
  color: var(--sta-ink-soft);
}

/* Judul bagian ("Artikel") — h3 di dalam .section */
.obj_issue_toc .sections .section > h3 {
  color: var(--sta-green-dark);
  border-bottom: 3px solid var(--sta-gold);
  padding-bottom: .35rem;
}

/* Judul artikel */
.obj_article_summary > .title a {
  color: var(--sta-green-dark);
}

.obj_article_summary > .title a:hover,
.obj_article_summary > .title a:focus {
  color: var(--sta-green);
}

/* Baris penulis */
.obj_article_summary .meta .authors {
  color: var(--sta-ink-soft);
}

/* Nomor halaman */
.obj_article_summary .meta .pages {
  color: var(--sta-ink-soft);
}

/* Tombol galley (PDF) — dijadikan lencana kecil, tidak mengubah layout */
.obj_article_summary .galleys_links .obj_galley_link {
  display: inline-block;
  padding: .15rem .7rem;
  background: var(--sta-green-light);
  border: 1px solid var(--sta-green);
  border-radius: var(--sta-radius);
  color: var(--sta-green-dark);
  font-weight: 700;
  text-decoration: none;
}

.obj_article_summary .galleys_links .obj_galley_link:hover,
.obj_article_summary .galleys_links .obj_galley_link:focus {
  background: var(--sta-green);
  border-color: var(--sta-green);
  color: #ffffff;
}

/* Arsip edisi */
.obj_issue_summary .title a {
  color: var(--sta-green-dark);
}

.obj_issue_summary .series,
.obj_issue_summary .published {
  color: var(--sta-ink-soft);
}

/* Pengumuman */
.cmp_announcements .title,
.obj_announcement_summary .title a {
  color: var(--sta-green-dark);
}

/* =====================================================================
 * 08 — HALAMAN DETAIL ARTIKEL
 * Kelas asli: .obj_article_details .page_title / .authors / .item
 * Tema induk meratakan .authors sebagai daftar tanpa bullet; kita hanya
 * mengubah warna & memberi panel pada abstrak (tanpa ubah lebar).
 * ===================================================================== */
.obj_article_details .page_title {
  color: var(--sta-green-dark);
}

.obj_article_details .authors .name {
  color: var(--sta-ink);
  font-weight: 700;
}

.obj_article_details .authors .affiliation {
  color: var(--sta-ink-soft);
}

.obj_article_details .item .label {
  color: var(--sta-green-dark);
}

/* Panel abstrak: hanya padding & latar, TIDAK mengubah lebar */
.obj_article_details .item.abstract {
  padding: 1rem 1.25rem;
  background: var(--sta-surface-alt);
  border-left: 4px solid var(--sta-green);
  border-radius: 0 var(--sta-radius) var(--sta-radius) 0;
}

/* Kata kunci */
.obj_article_details .item.keywords .value a {
  color: var(--sta-green-dark);
}

/* Kotak sitasi */
.obj_article_details .item.citation {
  padding: .75rem 1rem;
  background: var(--sta-green-light);
  border: 1px solid #cfe0d5;
  border-radius: var(--sta-radius);
}

/* Tombol galley di halaman artikel */
.obj_article_details .galleys_links .obj_galley_link {
  display: inline-block;
  padding: .25rem .85rem;
  background: var(--sta-green-light);
  border: 1px solid var(--sta-green);
  border-radius: var(--sta-radius);
  color: var(--sta-green-dark);
  font-weight: 700;
  text-decoration: none;
}

.obj_article_details .galleys_links .obj_galley_link:hover,
.obj_article_details .galleys_links .obj_galley_link:focus {
  background: var(--sta-green);
  color: #ffffff;
}

/* =====================================================================
 * 09 — FOOTER
 * Struktur asli: .pkp_structure_footer_wrapper > .pkp_structure_footer
 *                  > .pkp_brand_footer > a > img
 * CATATAN: .pkp_footer_content TIDAK ADA di tema 3.3 (hanya di 3.5) —
 * jangan bergantung padanya. Jangan set padding/width di sini.
 * ===================================================================== */
.pkp_structure_footer_wrapper {
  background: var(--sta-green-dark);
}

.pkp_structure_footer_wrapper,
.pkp_structure_footer_wrapper a {
  color: #e6efe9;
}

.pkp_structure_footer_wrapper a:hover,
.pkp_structure_footer_wrapper a:focus {
  color: var(--sta-gold);
}

/* Logo OJS/PKP di footer aslinya PNG biru; beri latar putih agar rapi */
.pkp_brand_footer img {
  background: #ffffff;
  padding: 6px 10px;
  border-radius: var(--sta-radius);
}

/* =====================================================================
 * 10 — UI UMUM: NOTIFIKASI, LENCANA, TABEL, PAGINASI
 * Semua hanya warna/border/radius. TIDAK ada width atau display
 * pada wadah — itu yang menyebabkan layout rusak pada versi lama.
 * ===================================================================== */

/* Notifikasi */
.cmp_notification {
  border-left-width: 5px;
}

.cmp_notification.success {
  border-left-color: var(--sta-success);
  background: var(--sta-green-light);
}

.cmp_notification.info {
  border-left-color: var(--sta-info);
}

.cmp_notification.warning {
  border-left-color: var(--sta-warning);
  background: var(--sta-gold-light);
}

.cmp_notification.error {
  border-left-color: var(--sta-danger);
}

/* Label "Diterbitkan:" dsb. di tema induk abu-abu → beri warna aksen */
.obj_issue_toc .heading .published .label,
.obj_article_details .item .label {
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* Tabel (daftar di halaman informasi/admin) */
.pkp_table th,
.cmp_table th {
  background: var(--sta-green-light);
  color: var(--sta-green-dark);
  border-bottom: 2px solid var(--sta-green);
}

/* Paginasi */
.cmp_pagination .current {
  background: var(--sta-green);
  border-color: var(--sta-green);
  color: #ffffff;
}

.cmp_pagination a:hover,
.cmp_pagination a:focus {
  border-color: var(--sta-green);
}

/* =====================================================================
 * 10b — RESPONSIVE
 * HANYA penyesuaian tipografi/logo di layar kecil.
 * Layout kolom (float 652/300px) sepenuhnya diserahkan ke OJS.
 * ===================================================================== */
@media (max-width: 767px) {
  .obj_issue_toc .sections .section > h3 {
    font-size: 1.1rem;
  }

  .obj_article_details .item.abstract {
    padding: .85rem 1rem;
  }
}

/* Hormati preferensi pengguna yang mengurangi animasi */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =====================================================================
 * 10c — CETAK (halaman artikel / abstrak)
 * ===================================================================== */
@media print {
  .pkp_structure_head,
  .pkp_navigation_primary_row,
  .pkp_navigation_user,
  .pkp_structure_sidebar,
  .pkp_structure_footer_wrapper,
  .pkp_button {
    display: none !important;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .obj_article_details .item.abstract {
    background: none;
    border-left: 2px solid #000;
    page-break-inside: avoid;
  }
}

/* =====================================================================
 * AKHIR BERKAS — jupiter-journal.css
 * Diverifikasi terhadap HTML & CSS live https://ojs.stipersta.ac.id/
 * (OJS 3.3.0.24, tema "default") pada 2026-11-07.
 * ===================================================================== */