/* ======================================================================
   JURNAL RISET GIZI (JRG) - CUSTOM CSS OJS 3.3.0.21
   Poltekkes Kemenkes Semarang

   Fungsi utama:
   - Lebar halaman mengikuti lebar browser (full width)
   - Sidebar di sisi kanan dan konten utama di sisi kiri
   - Header, navigasi, homepage, current issue, artikel, dan sidebar rapi
   - Responsif untuk desktop, tablet, dan ponsel

   Pemasangan:
   OJS > Settings > Website > Appearance > Advanced > Journal Style Sheet

   CATATAN GAMBAR:
   HTML JRG yang diperiksa menggunakan logo OJS bawaan (.pkp_site_name img)
   dan gambar homepage (.homepage_image img). Class .logo-jrg dan .header-jrg
   di bagian terakhir hanya berlaku jika class tersebut benar-benar dipakai
   pada HTML. Jika mengaktifkan background-image khusus, pastikan file gambar
   ada di folder yang sama dengan styleSheet.css atau ubah URL ke URL gambar
   yang benar dan dapat diakses publik.
   ====================================================================== */

:root {
    --jrg-primary: #18576e;
    --jrg-primary-dark: #123f50;
    --jrg-accent: #1cabb1;
    --jrg-text: #25343c;
    --jrg-muted: #657780;
    --jrg-border: #dfe8ec;
    --jrg-page-bg: #f3f7f9;
    --jrg-card-bg: #ffffff;
    --jrg-radius: 10px;
    --jrg-shadow: 0 4px 16px rgba(20, 57, 72, 0.07);
}

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

html {
    width: 100%;
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-width: 320px;
    margin: 0;
    overflow-x: hidden;
    background: var(--jrg-page-bg);
    color: var(--jrg-text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.65;
}

img,
iframe,
video,
svg {
    max-width: 100%;
}

img {
    height: auto;
}

p {
    overflow-wrap: break-word;
}

a {
    color: var(--jrg-primary);
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

a:hover,
a:focus {
    color: var(--jrg-accent);
}

button,
input,
select,
textarea {
    max-width: 100%;
    font: inherit;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--jrg-accent);
    outline-offset: 2px;
}

/* ======================== FULL-WIDTH PAGE ========================= */
.pkp_structure_page {
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh;
    margin: 0 !important;
    background: #fff;
    box-shadow: none !important;
}

.pkp_structure_head,
.pkp_head_wrapper,
.pkp_structure_content,
.pkp_structure_footer_wrapper,
.pkp_structure_footer,
.pkp_footer_content {
    width: 100% !important;
    max-width: none !important;
}

.pkp_structure_head {
    margin: 0;
    background: #fff;
    border-bottom: 1px solid var(--jrg-border);
}

.pkp_head_wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================== HEADER ============================ */
.pkp_site_name_wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 !important;
}

.pkp_site_name {
    display: block;
    width: 100%;
    max-width: none !important;
    margin: 0;
    text-align: center;
}

.pkp_site_name a.is_img {
    display: block;
    max-width: 100%;
    margin: 0;
    line-height: 0;
}

/* Logo/header yang terpasang di OJS: jaga proporsi gambar aslinya. */
.pkp_site_name img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    margin: 0;
    object-fit: cover;
    object-position: center center;
}

/* ============================ NAVIGASI ============================ */
.pkp_site_nav_menu {
    width: 100%;
    margin: 0;
    padding: 0 clamp(12px, 2.2vw, 34px);
    background: var(--jrg-primary);
    border: 0;
}

.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.pkp_navigation_primary_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

ul.pkp_navigation_primary,
ul.pkp_navigation_user {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pkp_navigation_primary > li,
.pkp_navigation_user > li {
    margin: 0;
    padding: 0;
}

.pkp_navigation_primary > li > a,
.pkp_navigation_user > li > a {
    display: block;
    padding: 12px 13px;
    border-radius: 5px;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
    color: #fff !important;
    background: var(--jrg-accent);
}

.pkp_navigation_primary li {
    position: relative;
}

.pkp_navigation_primary li ul {
    z-index: 1000;
    min-width: 220px;
    margin: 0;
    padding: 6px 0;
    background: #fff;
    border: 1px solid var(--jrg-border);
    border-radius: 7px;
    box-shadow: var(--jrg-shadow);
}

.pkp_navigation_primary li ul a {
    display: block;
    padding: 9px 14px;
    color: var(--jrg-text) !important;
    text-decoration: none;
    line-height: 1.45;
}

.pkp_navigation_primary li ul a:hover,
.pkp_navigation_primary li ul a:focus {
    color: var(--jrg-primary) !important;
    background: #eef7f8;
}

.pkp_navigation_search_wrapper {
    flex: 0 0 auto;
}

.pkp_search {
    display: inline-block;
    padding: 10px 12px;
    color: #fff !important;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.pkp_search:hover,
.pkp_search:focus {
    color: #fff !important;
    background: var(--jrg-accent);
    border-radius: 5px;
}

/* ========================= LAYOUT UTAMA =========================== */
/* HTML saat ini menamai sidebar .left, tetapi CSS memindahkannya ke kanan. */
.pkp_structure_content.has_sidebar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(235px, 285px);
    align-items: start;
    gap: clamp(18px, 2vw, 30px);
    margin: 0 !important;
    padding: 24px clamp(14px, 2.3vw, 38px) 34px !important;
}

.pkp_structure_main {
    grid-column: 1;
    grid-row: 1;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_structure_sidebar.left,
.pkp_structure_sidebar.right {
    grid-column: 2;
    grid-row: 1;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_structure_content:not(.has_sidebar) {
    display: block;
    margin: 0 !important;
    padding: 24px clamp(14px, 2.3vw, 38px) 34px !important;
}

.pkp_structure_content:not(.has_sidebar) .pkp_structure_main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.page_index_journal {
    width: 100%;
    max-width: none !important;
    min-width: 0;
    margin: 0;
}

/* ========================= GAMBAR BERANDA ========================= */
.homepage_image {
    width: 100%;
    margin: 0 0 24px;
    overflow: hidden;
    background: #edf3f5;
    border-radius: var(--jrg-radius);
}

.homepage_image img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 380px;
    height: auto !important;
    margin: 0;
    object-fit: cover;
    object-position: center;
}

/* ====================== JUDUL DAN BAGIAN BERANDA ================== */
.page_index_journal h2,
.pkp_page_index .pkp_structure_main h2 {
    margin: 0 0 16px;
    padding: 0 0 10px;
    border-bottom: 2px solid var(--jrg-accent);
    color: var(--jrg-primary-dark);
    font-size: clamp(20px, 1.65vw, 25px);
    font-weight: 700;
    line-height: 1.3;
}

.page_index_journal p {
    margin-top: 0;
    margin-bottom: 14px;
}

.homepage_about,
.cmp_announcements,
.current_issue,
.additional_content {
    width: 100%;
    min-width: 0;
    margin: 0 0 26px;
}

.homepage_about,
.cmp_announcements,
.current_issue {
    padding: 21px 23px;
    background: #fff;
    border: 1px solid var(--jrg-border);
    border-radius: var(--jrg-radius);
    box-shadow: var(--jrg-shadow);
}

/* ============================ PENGUMUMAN ========================== */
.obj_announcement_summary {
    margin: 0;
    padding: 17px;
    background: #f8fbfc;
    border: 1px solid var(--jrg-border);
    border-left: 4px solid var(--jrg-accent);
    border-radius: 8px;
}

.obj_announcement_summary h3 {
    margin: 0 0 8px;
    font-size: 17px;
    line-height: 1.45;
}

.obj_announcement_summary .date {
    margin-bottom: 10px;
    color: var(--jrg-muted);
    font-size: 12px;
}

.obj_announcement_summary .summary img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 7px;
}

.obj_announcement_summary .read_more {
    margin-top: 8px;
}

/* =========================== CURRENT ISSUE ======================== */
.current_issue_title {
    margin: 0 0 18px;
    padding: 12px 15px;
    color: var(--jrg-primary-dark);
    background: #eef7f8;
    border-left: 4px solid var(--jrg-accent);
    border-radius: 6px;
    font-weight: 700;
}

.obj_issue_toc,
.obj_issue_toc .heading,
.obj_issue_toc .sections {
    width: 100%;
    max-width: none !important;
    min-width: 0;
}

.obj_issue_toc .heading {
    margin-bottom: 20px;
}

.obj_issue_toc .heading .cover img {
    display: block;
    width: auto;
    max-width: 170px;
    max-height: 230px;
    object-fit: contain;
    border-radius: 6px;
}

.obj_issue_toc .description {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Daftar artikel menjadi kartu responsif yang memanfaatkan lebar konten. */
.cmp_article_list.articles {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr));
    align-items: stretch;
    gap: 16px;
    width: 100%;
    margin: 14px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.cmp_article_list.articles > li {
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.obj_article_summary {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    padding: 15px;
    overflow-wrap: anywhere;
    background: var(--jrg-card-bg);
    border: 1px solid var(--jrg-border);
    border-radius: 9px;
    box-shadow: 0 2px 9px rgba(20, 57, 72, 0.045);
    transition: transform .18s ease, box-shadow .18s ease;
}

.obj_article_summary:hover {
    transform: translateY(-2px);
    box-shadow: var(--jrg-shadow);
}

.obj_article_summary .cover {
    margin: 0 0 12px;
    text-align: center;
}

.obj_article_summary .cover img {
    display: inline-block;
    width: auto;
    max-width: 100%;
    max-height: 145px;
    object-fit: contain;
    border-radius: 5px;
}

.obj_article_summary .title {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
}

.obj_article_summary .title a {
    color: var(--jrg-primary-dark);
    text-decoration: none;
}

.obj_article_summary .title a:hover,
.obj_article_summary .title a:focus {
    color: var(--jrg-accent);
    text-decoration: underline;
}

.obj_article_summary .meta,
.obj_article_summary .authors,
.obj_article_summary .pages {
    color: var(--jrg-muted);
    font-size: 12px;
    line-height: 1.55;
}

.obj_article_summary .galleys_links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: auto 0 0;
    padding: 12px 0 0;
    list-style: none;
}

.obj_article_summary .galleys_links a,
.galleys_links a,
a.obj_galley_link {
    display: inline-block;
    padding: 5px 10px;
    color: #fff !important;
    background: var(--jrg-primary);
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
}

.obj_article_summary .galleys_links a:hover,
.galleys_links a:hover,
a.obj_galley_link:hover {
    color: #fff !important;
    background: var(--jrg-accent);
}

.read_more {
    display: inline-block;
    margin-top: 15px;
    padding: 9px 15px;
    color: #fff !important;
    background: var(--jrg-primary);
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
}

.read_more:hover,
.read_more:focus {
    color: #fff !important;
    background: var(--jrg-accent);
}

/* ========================= ADDITIONAL CONTENT ===================== */
.additional_content {
    padding: 18px 20px;
    overflow-wrap: anywhere;
    background: #fff;
    border: 1px solid var(--jrg-border);
    border-radius: var(--jrg-radius);
    box-shadow: var(--jrg-shadow);
}

.additional_content img {
    max-width: 100%;
    height: auto;
}

.additional_content a {
    overflow-wrap: anywhere;
}

.additional_content table {
    max-width: 100%;
}

/* =============================== SIDEBAR ========================== */
.pkp_structure_sidebar .pkp_block {
    min-width: 0;
    margin: 0 0 18px !important;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--jrg-border);
    border-radius: 9px;
    box-shadow: var(--jrg-shadow);
}

.pkp_structure_sidebar .pkp_block > .title:not(.pkp_screen_reader) {
    margin: 0;
    padding: 12px 14px;
    border: 0;
    color: #fff;
    background: var(--jrg-primary);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.pkp_structure_sidebar .pkp_block > .content {
    min-width: 0;
    padding: 12px;
}

.pkp_structure_sidebar .pkp_block ul {
    margin-top: 0;
    padding-left: 18px;
}

.pkp_structure_sidebar .pkp_block li {
    margin-bottom: 7px;
}

.pkp_structure_sidebar .pkp_block img {
    max-width: 100%;
    height: auto;
}

.pkp_structure_sidebar .pkp_block table {
    width: 100%;
    max-width: 100%;
}

/* Blok HTML kustom JRG memiliki desain inline; jangan menambah padding luar. */
.pkp_structure_sidebar .pkp_block.block_custom > .content {
    padding: 0;
}

.pkp_structure_sidebar input,
.pkp_structure_sidebar select,
.pkp_structure_sidebar textarea,
.pkp_structure_sidebar button {
    max-width: 100%;
}

.pkp_structure_sidebar input,
.pkp_structure_sidebar select,
.pkp_structure_sidebar textarea {
    box-sizing: border-box;
}

/* ================================ FOOTER ========================== */
.pkp_structure_footer_wrapper {
    margin: 0 !important;
    padding: 0;
    background: #f7fafb;
    border-top: 1px solid var(--jrg-border);
}

.pkp_structure_footer {
    margin: 0 !important;
    padding: 25px clamp(14px, 2.3vw, 38px) !important;
}

.pkp_footer_content {
    margin: 0 !important;
}

.pkp_brand_footer {
    margin-top: 18px;
    text-align: center;
}

.cmp_skip_to_content a:focus {
    z-index: 10000;
}

/* ==================== KOMPONEN HEADER OPSIONAL ====================
   Kedua class ini tidak ada pada HTML OJS yang dilampirkan. Bagian ini
   hanya dipakai bila class tersebut ditambahkan ke HTML block kustom.
   URL gambar harus disesuaikan dengan lokasi file yang sebenarnya.
   ================================================================== */
.logo-jrg {
    display: inline-block;
    width: 220px;
    height: 100px;
    background-image: url('Logo-JRG-new.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.header-jrg {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 220px;
    padding: 28px;
    overflow: hidden;
    background-color: #eaf4f4;
    background-image: url('Header-JRG.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #004c54;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.header-jrg::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    content: "";
    background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.70));
    pointer-events: none;
}

.header-jrg > * {
    position: relative;
    z-index: 1;
}

.header-jrg h1 {
    margin: 0;
    color: #003f3e;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1.25;
    text-shadow: 0 2px 4px rgba(255,255,255,.6);
}

.header-jrg p {
    margin: .5rem 0 0;
    color: #004c54;
    font-size: 1rem;
    text-shadow: 0 1px 2px rgba(255,255,255,.8);
}

/* ============================== RESPONSIVE ======================= */
@media (max-width: 1100px) {
    .pkp_structure_content.has_sidebar {
        grid-template-columns: minmax(210px, 245px) minmax(0, 1fr);
        gap: 18px;
        padding-right: 18px !important;
        padding-left: 18px !important;
    }

    .pkp_site_nav_menu {
        padding-right: 12px;
        padding-left: 12px;
    }

    .pkp_navigation_primary > li > a,
    .pkp_navigation_user > li > a {
        padding: 11px 10px;
        font-size: 13px;
    }
}

@media (max-width: 780px) {
    body {
        font-size: 14px;
    }

    .pkp_site_name_wrapper {
        padding: 0 !important;
    }

    .pkp_site_name,
    .pkp_site_name a.is_img {
        width: 100%;
    }

    .pkp_site_name img {
        width: 100% !important;
        max-height: none !important;
        margin: 0 auto;
        object-position: center;
    }

    .pkp_navigation_primary_wrapper {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    ul.pkp_navigation_primary,
    ul.pkp_navigation_user {
        flex-wrap: wrap;
    }

    .pkp_structure_content.has_sidebar {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        padding: 16px 12px 25px !important;
    }

    .pkp_structure_main {
        grid-column: 1;
        grid-row: 1;
    }

    .pkp_structure_sidebar.left,
    .pkp_structure_sidebar.right {
        grid-column: 1;
        grid-row: 2;
    }

    .pkp_structure_content:not(.has_sidebar) {
        padding: 16px 12px 25px !important;
    }

    .homepage_about,
    .cmp_announcements,
    .current_issue {
        padding: 16px;
        margin-bottom: 18px;
    }

    .additional_content {
        padding: 12px;
    }

    .homepage_image {
        margin-bottom: 18px;
        border-radius: 8px;
    }

    .homepage_image img {
        max-height: 250px;
    }

    .cmp_article_list.articles {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
        gap: 12px;
    }

    .obj_article_summary {
        padding: 13px;
    }

    .pkp_structure_footer {
        padding: 20px 14px !important;
    }

    .header-jrg {
        min-height: 170px;
        padding: 20px 14px;
    }

    .logo-jrg {
        width: 160px;
        height: 80px;
    }
}

@media (max-width: 480px) {
    .cmp_article_list.articles {
        grid-template-columns: minmax(0, 1fr);
    }

    .obj_issue_toc .heading .cover img {
        max-width: 125px;
        max-height: 180px;
    }

    .pkp_navigation_primary > li > a,
    .pkp_navigation_user > li > a {
        padding: 9px 8px;
        font-size: 12px;
    }

    .homepage_about,
    .cmp_announcements,
    .current_issue {
        padding: 13px;
    }
}

/* Kurangi animasi bagi pengguna yang memilih preferensi reduced motion. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* =================== PENYESUAIAN AKHIR BERDASARKAN TAMPILAN =================== */
/* Hilangkan garis vertikal/garis pemisah tipis yang tidak diperlukan. */
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_structure_sidebar.left,
.pkp_structure_sidebar.right,
.pkp_structure_content::before,
.pkp_structure_content::after,
.pkp_structure_main::before,
.pkp_structure_main::after,
.pkp_structure_sidebar::before,
.pkp_structure_sidebar::after {
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none;
}

/* Sidebar tetap di kanan, dengan jarak rapat dari area konten utama. */
.pkp_structure_content.has_sidebar {
    grid-template-columns: minmax(0, 1fr) minmax(235px, 285px) !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
}

.pkp_structure_main {
    grid-column: 1 !important;
    min-width: 0 !important;
}

.pkp_structure_sidebar.left,
.pkp_structure_sidebar.right {
    grid-column: 2 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Homepage image: banner proporsional, lebar penuh, tidak terpotong berlebihan. */
.homepage_image {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 22px !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 10px;
    background: #f4f8fa;
}

.homepage_image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 340px !important;
    aspect-ratio: 16 / 5;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
}

/* Thumbnail artikel lebih besar dan memenuhi bidang cover di dalam kartu. */
.obj_article_summary .cover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 220px;
    margin: 0 0 14px !important;
    padding: 8px;
    overflow: hidden;
    border: 1px solid var(--jrg-border);
    border-radius: 7px;
    background: #fff;
}

.obj_article_summary .cover img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 220px !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center;
    border-radius: 3px;
}

/* Bila thumbnail dibungkus tautan, tautan ikut memenuhi area cover. */
.obj_article_summary .cover a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

@media (max-width: 1100px) and (min-width: 781px) {
    .pkp_structure_content.has_sidebar {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 255px) !important;
        column-gap: 10px !important;
    }
}

@media (max-width: 780px) {
    .pkp_structure_content.has_sidebar {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    .pkp_structure_sidebar.left,
    .pkp_structure_sidebar.right {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .homepage_image img {
        aspect-ratio: 16 / 7;
        max-height: 250px !important;
    }

    .obj_article_summary .cover {
        min-height: 190px;
    }

    .obj_article_summary .cover img {
        height: 190px !important;
    }
}

/* ===================== REVISI TAMBAHAN: NAVIGASI & PEMBATAS ===================== */

/* Hilangkan garis vertikal/pembatas dekoratif pada area konten dan sidebar. */
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_structure_sidebar.left,
.pkp_structure_sidebar.right,
.pkp_structure_main::before,
.pkp_structure_main::after,
.pkp_structure_sidebar::before,
.pkp_structure_sidebar::after {
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* Konten dan sidebar tetap berdampingan tanpa celah atau garis pemisah yang mengganggu. */
.pkp_structure_content.has_sidebar {
    column-gap: 10px !important;
    border: 0 !important;
}

.pkp_structure_main,
.pkp_structure_sidebar {
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Menu Announcements dibuat lebih kecil dan rata tengah secara vertikal. */
.pkp_navigation_primary a[href*="announcement"],
.pkp_navigation_primary a[href*="Announcement"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    padding: 10px 13px !important;
    white-space: nowrap;
}

/* Samakan tinggi dan perataan semua item navigasi agar menu tampak seimbang. */
.pkp_navigation_primary > li,
.pkp_navigation_primary > li > a {
    align-items: center !important;
    vertical-align: middle !important;
}

.pkp_navigation_primary > li > a {
    display: inline-flex !important;
    justify-content: center !important;
    min-height: 38px;
}

/* Hilangkan garis pembatas antar-item navigasi dan panel header yang tidak diperlukan. */
.pkp_navigation_primary > li,
.pkp_navigation_primary > li + li,
.pkp_site_nav_menu,
.pkp_site_name_wrapper,
.pkp_navigation_user_wrapper,
.pkp_search {
    border-left: 0 !important;
    border-right: 0 !important;
}

/* Beranda: gambar mengikuti lebar kotak tanpa menimbulkan garis tepi tambahan. */
.homepage_image,
.homepage_image figure,
.homepage_image img {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.homepage_image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 auto !important;
}

@media (max-width: 780px) {
    .pkp_navigation_primary a[href*="announcement"],
    .pkp_navigation_primary a[href*="Announcement"] {
        font-size: 12px !important;
        padding: 8px 10px !important;
        white-space: normal;
    }
}



/* ================= REVISI LANJUTAN: HEADER & ANNOUNCEMENTS =================
   Header diberi ruang di sisi kiri/kanan dan tidak lagi memenuhi layar.
   Judul dan isi Announcements dibuat lebih ringkas.
   ========================================================================== */

/* Header/banner: beri ruang putih di sekeliling gambar */
.pkp_site_name_wrapper {
    display: block !important;
    width: 100% !important;
    padding: 14px clamp(14px, 2.4vw, 34px) 12px !important;
    background: #fff !important;
}

.pkp_site_name {
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.pkp_site_name a.is_img {
    display: block !important;
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    overflow: hidden;
    border: 1px solid #e5e9ec;
    border-radius: 3px;
    line-height: 0 !important;
    background: #fff;
}

.pkp_site_name img {
    display: block !important;
    width: 100% !important;
    max-width: 1600px !important;
    height: auto !important;
    max-height: 260px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Pengumuman: judul lebih kecil dan tidak memakan banyak ruang */
.cmp_announcements {
    padding: 13px 15px !important;
    margin-bottom: 20px !important;
    border: 0 !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}

.cmp_announcements > h2 {
    margin: 0 0 12px !important;
    padding: 8px 12px !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    text-align: center !important;
    background: #f1f6f8 !important;
    color: var(--jrg-primary-dark) !important;
    border: 0 !important;
    border-radius: 4px !important;
}

.obj_announcement_summary {
    padding: 12px 14px !important;
    border: 1px solid #e4eaed !important;
    border-left: 3px solid var(--jrg-accent) !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}

.obj_announcement_summary h3 {
    margin: 0 0 6px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
}

.obj_announcement_summary .date {
    margin-bottom: 7px !important;
    font-size: 11px !important;
}

.obj_announcement_summary .summary p {
    margin: 7px 0 !important;
}

.obj_announcement_summary .summary img {
    max-height: 300px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

@media (max-width: 780px) {
    .pkp_site_name_wrapper {
        padding: 9px 10px !important;
    }

    .pkp_site_name img {
        max-height: 150px !important;
    }

    .cmp_announcements {
        padding: 10px !important;
    }

    .cmp_announcements > h2 {
        font-size: 14px !important;
        padding: 7px 9px !important;
    }

    .obj_announcement_summary {
        padding: 10px !important;
    }
}

/* ================= FINAL FIX: HEADER MEMENUHI LEBAR AREA =================
   Gambar header memiliki rasio asli 4:1. Jangan batasi tinggi gambar karena
   batas tinggi membuat gambar mengecil dan menyisakan ruang kosong di kiri-kanan.
   ========================================================================== */
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.pkp_site_name_wrapper {
    padding: 10px 16px !important;
}

.pkp_site_name {
    margin: 0 auto !important;
    padding: 0 !important;
}

.pkp_site_name a.is_img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    line-height: 0 !important;
}

.pkp_site_name a.is_img img,
.pkp_site_name img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: fill !important;
    object-position: center !important;
}

@media (max-width: 780px) {
    .pkp_site_name_wrapper {
        padding: 7px 8px !important;
    }
}

/* ================= HEADER FULL WIDTH + BORDER TIPIS =================
   Header mengisi hampir seluruh lebar halaman; bingkai tipis tetap terlihat.
   ====================================================================== */
.pkp_structure_head .pkp_head_wrapper,
.pkp_structure_head .pkp_site_name_wrapper {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.pkp_structure_head .pkp_site_name_wrapper {
    padding: 4px 8px !important;
}

.pkp_structure_head .pkp_site_name {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.pkp_structure_head .pkp_site_name a.is_img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #d9e0e5 !important;
    border-radius: 2px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    line-height: 0 !important;
}

.pkp_structure_head .pkp_site_name a.is_img img,
.pkp_structure_head .pkp_site_name img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 780px) {
    .pkp_structure_head .pkp_site_name_wrapper {
        padding: 4px 5px !important;
    }
}

/* ==========================================================
   JRG STICKY MAIN NAVIGATION
   Default: menu tetap di bawah header. Saat JavaScript menambahkan
   .jrg-nav-is-fixed, menu menempel di atas viewport saat scroll.
   Warna, tab aktif, hover, dan animasi tema tetap dipertahankan.
   ========================================================== */
.pkp_structure_head,
.pkp_head_wrapper {
    overflow: visible !important;
}

.pkp_structure_head .pkp_site_nav_menu {
    position: relative !important;
    width: 100% !important;
    z-index: 99999 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.pkp_structure_head .pkp_site_nav_menu a {
    box-sizing: border-box !important;
}

.pkp_structure_head .pkp_navigation_primary_row,
.pkp_structure_head .pkp_navigation_primary_wrapper,
.pkp_structure_head .pkp_navigation_user_wrapper {
    box-sizing: border-box !important;
}

/* Class ini ditambahkan oleh JavaScript saat menu mencapai atas viewport. */
.pkp_structure_head .pkp_site_nav_menu.jrg-nav-is-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 99999 !important;
}

/* Spacer mencegah konten meloncat ketika menu berubah menjadi fixed. */
.jrg-nav-spacer {
    display: block !important;
    width: 100% !important;
    height: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

@media (max-width: 780px) {
    .pkp_structure_head .pkp_site_nav_menu.jrg-nav-is-fixed {
        top: 0 !important;
    }
}


/* ==========================================================
   JRG PATCH: REMOVE UNWANTED GRAY VERTICAL DIVIDER
   Remove only structural separator lines around the page/content
   layout; preserve borders on inputs, buttons, article cards, etc.
   ========================================================== */
.pkp_structure_page,
.pkp_structure_body,
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_structure_sidebar.left,
.pkp_structure_sidebar.right,
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name_wrapper {
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
}

.pkp_structure_content::before,
.pkp_structure_content::after,
.pkp_structure_main::before,
.pkp_structure_main::after,
.pkp_structure_sidebar::before,
.pkp_structure_sidebar::after {
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
}

/* Keep a clean layout on mobile as well. */
@media (max-width: 780px) {
    .pkp_structure_page,
    .pkp_structure_body,
    .pkp_structure_content,
    .pkp_structure_main,
    .pkp_structure_sidebar {
        border-left: 0 !important;
        border-right: 0 !important;
        box-shadow: none !important;
    }
}


/* ==========================================================
   JRG FINAL PATCH: FULL-BROWSER WIDTH + PROFESSIONAL OUTER EDGE
   - Use nearly all browser width with a small, even outer gutter.
   - Keep a subtle border around the overall journal page.
   - Remove the divider between main content and sidebar.
   - Preserve individual card, form, and navigation styling.
   ========================================================== */
html,
body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.pkp_structure_page {
    width: calc(100% - 16px) !important;
    max-width: none !important;
    margin: 8px auto !important;
    box-sizing: border-box !important;
    border: 1px solid #dfe4e8 !important;
    border-radius: 2px !important;
    box-shadow: 0 1px 4px rgba(25, 35, 45, 0.06) !important;
    background: #fff !important;
}

.pkp_structure_page .pkp_structure_content {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Remove only the vertical boundary between content and sidebar. */
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_structure_sidebar.left,
.pkp_structure_sidebar.right {
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

.pkp_structure_content.has_sidebar {
    column-gap: 12px !important;
    gap: 12px !important;
}

/* Ensure no pseudo-element draws a separator between the columns. */
.pkp_structure_content.has_sidebar::before,
.pkp_structure_content.has_sidebar::after,
.pkp_structure_main::before,
.pkp_structure_main::after,
.pkp_structure_sidebar::before,
.pkp_structure_sidebar::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 780px) {
    .pkp_structure_page {
        width: calc(100% - 8px) !important;
        margin: 4px auto !important;
        border: 1px solid #dfe4e8 !important;
        box-shadow: none !important;
    }

    .pkp_structure_content.has_sidebar {
        column-gap: 0 !important;
        gap: 0 !important;
    }
}

/* ==========================================================
   JRG PATCH: LOGIN / REGISTER DI SEBELAH SEARCH
   Memanfaatkan tautan Login/Register bawaan OJS; tidak membuat
   tautan palsu. Mendukung wrapper user navigation standar OJS
   maupun wrapper header pada tema kustom.
   ========================================================== */

/* Baris header: search dan akun berada sejajar bila keduanya ada di sini. */
.pkp_site_name_wrapper,
.pkp_site_name_wrapper .header-tools,
.pkp_site_name_wrapper .header-search-user {
    gap: 12px;
}

/* Wrapper akun OJS dibuat ringkas dan sejajar secara horizontal. */
.pkp_navigation_user_wrapper,
#navigationUserWrapper,
.pkp_site_name_wrapper .pkp_navigation_user_wrapper,
.pkp_site_name_wrapper #navigationUserWrapper {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 0 0 10px !important;
    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background: transparent !important;
}

/* Login/Register tidak lagi tampil sebagai daftar vertikal. */
.pkp_navigation_user_wrapper ul,
#navigationUserWrapper ul,
ul.pkp_navigation_user,
#navigationUser {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.pkp_navigation_user_wrapper li,
#navigationUserWrapper li,
ul.pkp_navigation_user > li,
#navigationUser > li {
    display: block !important;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_user_wrapper a,
#navigationUserWrapper a,
ul.pkp_navigation_user > li > a,
#navigationUser > li > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px;
    padding: 8px 12px !important;
    border: 1px solid var(--jrg-primary) !important;
    border-radius: 5px !important;
    background: var(--jrg-primary) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.pkp_navigation_user_wrapper a:hover,
.pkp_navigation_user_wrapper a:focus,
#navigationUserWrapper a:hover,
#navigationUserWrapper a:focus,
ul.pkp_navigation_user > li > a:hover,
ul.pkp_navigation_user > li > a:focus,
#navigationUser > li > a:hover,
#navigationUser > li > a:focus {
    border-color: var(--jrg-accent) !important;
    background: var(--jrg-accent) !important;
    color: #fff !important;
}

/* Search dan akun dirapatkan, tetapi tidak menutupi logo/header. */
.pkp_navigation_search_wrapper {
    display: inline-flex !important;
    flex: 0 1 auto;
    align-items: center !important;
    margin-left: auto !important;
}

.pkp_navigation_search_wrapper + .pkp_navigation_user_wrapper,
.pkp_navigation_search_wrapper + #navigationUserWrapper {
    margin-left: 8px !important;
}

/* Jika tema menaruh Search dan akun di area navigasi utama, letakkan di ujung kanan. */
.pkp_navigation_primary_wrapper {
    flex-wrap: nowrap;
}

.pkp_navigation_primary_wrapper .pkp_navigation_search_wrapper {
    margin-left: auto !important;
}

@media (max-width: 780px) {
    .pkp_site_name_wrapper {
        flex-wrap: wrap !important;
        row-gap: 8px !important;
    }

    .pkp_navigation_user_wrapper,
    #navigationUserWrapper {
        padding-left: 0 !important;
    }

    .pkp_navigation_user_wrapper a,
    #navigationUserWrapper a,
    ul.pkp_navigation_user > li > a,
    #navigationUser > li > a {
        min-height: 32px;
        padding: 7px 9px !important;
        font-size: 12px !important;
    }

    .pkp_navigation_primary_wrapper {
        flex-wrap: wrap !important;
    }
}


/* =====================================================================
   ADD-ON: ARTICLE GALLERY MARQUEE + LOGIN/REGISTER DI SEBELAH SEARCH
   Untuk OJS 3.3.0.21. Tambahkan jrg-article-gallery.js melalui tema/plugin
   yang mendukung JavaScript kustom agar tautan dan galeri dibuat otomatis.
   ===================================================================== */

/* Search dan tombol akun dalam satu baris */
.pkp_navigation_primary_wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}
.pkp_navigation_search_wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
}
.pkp_navigation_auth_links {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
}
.pkp_navigation_auth_links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 5px;
    color: #fff !important;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.pkp_navigation_auth_links a:hover,
.pkp_navigation_auth_links a:focus {
    color: var(--jrg-primary-dark) !important;
    background: #fff;
    border-color: #fff;
}
.pkp_navigation_auth_links .jrg-register-link {
    color: var(--jrg-primary-dark) !important;
    background: #fff;
    border-color: #fff;
}
.pkp_navigation_auth_links .jrg-register-link:hover,
.pkp_navigation_auth_links .jrg-register-link:focus {
    color: #fff !important;
    background: var(--jrg-accent);
    border-color: var(--jrg-accent);
}

/* Layout pengumuman dan galeri berdampingan */
.jrg-announcement-gallery-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
    align-items: stretch;
    gap: 18px;
    width: 100%;
    margin: 0 0 26px;
}
.jrg-announcement-gallery-row > .cmp_announcements {
    min-width: 0;
    margin: 0 !important;
}
.jrg-article-gallery {
    min-width: 0;
    overflow: hidden;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--jrg-border);
    border-radius: var(--jrg-radius);
    box-shadow: var(--jrg-shadow);
}
.jrg-article-gallery__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 14px;
    padding: 0 0 10px;
    color: var(--jrg-primary-dark);
    border-bottom: 2px solid var(--jrg-accent);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
}
.jrg-article-gallery__tag {
    flex: 0 0 auto;
    padding: 4px 7px;
    color: #fff;
    background: var(--jrg-primary);
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.jrg-article-gallery__viewport {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.jrg-article-gallery__track {
    display: flex;
    align-items: stretch;
    gap: 12px;
    width: max-content;
    animation: jrg-gallery-marquee 34s linear infinite;
    will-change: transform;
}
.jrg-article-gallery:hover .jrg-article-gallery__track,
.jrg-article-gallery:focus-within .jrg-article-gallery__track {
    animation-play-state: paused;
}
.jrg-article-gallery__card {
    display: flex;
    flex: 0 0 210px;
    flex-direction: column;
    overflow: hidden;
    width: 210px;
    min-height: 210px;
    color: var(--jrg-text) !important;
    background: #fff;
    border: 1px solid var(--jrg-border);
    border-radius: 8px;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease;
}
.jrg-article-gallery__card:hover,
.jrg-article-gallery__card:focus {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(20,57,72,.14);
}
.jrg-article-gallery__image {
    display: block;
    width: 100%;
    height: 112px;
    object-fit: cover;
    background: #eef3f5;
}
.jrg-article-gallery__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--jrg-primary);
    background: linear-gradient(135deg, #e6f2f3, #f7f8f8);
    font-size: 30px;
}
.jrg-article-gallery__title {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    padding: 10px 11px 12px;
    color: var(--jrg-primary-dark);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}
.jrg-article-gallery__note {
    margin: 10px 0 0;
    color: var(--jrg-muted);
    font-size: 11px;
    line-height: 1.45;
}
@keyframes jrg-gallery-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (max-width: 900px) {
    .jrg-announcement-gallery-row {
        grid-template-columns: minmax(0, 1fr);
    }
    .jrg-article-gallery__card {
        flex-basis: 190px;
        width: 190px;
    }
}
@media (max-width: 700px) {
    .pkp_navigation_primary_wrapper {
        flex-wrap: wrap !important;
    }
    .pkp_navigation_search_wrapper {
        margin-left: 0 !important;
        flex-wrap: wrap;
    }
    .pkp_navigation_auth_links a {
        min-height: 32px;
        padding: 7px 9px;
        font-size: 12px;
    }
    .jrg-article-gallery {
        padding: 14px;
    }
    .jrg-article-gallery__heading {
        font-size: 14px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .jrg-article-gallery__track {
        animation: none;
    }
}


/* ================================================================
   CSS-ONLY ADDITIONS / FALLBACKS
   Catatan: CSS hanya menata elemen yang sudah ada di HTML OJS.
   CSS tidak dapat membuat galeri, mengambil artikel, atau membuat tautan akun.
   ================================================================ */

/* Auth links: styles apply if Login/Register links already exist in the nav DOM. */
.pkp_navigation_search_wrapper .pkp_navigation_auth_links,
.pkp_navigation_primary_wrapper .pkp_navigation_auth_links {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin-left: 10px;
    flex: 0 0 auto;
}
.pkp_navigation_auth_links a,
a.jrg-login-link,
a.jrg-register-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid #18576e;
    border-radius: 3px;
    background: #18576e;
    color: #fff !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.pkp_navigation_auth_links a:hover,
a.jrg-login-link:hover,
a.jrg-register-link:hover {
    background: #124253;
    border-color: #124253;
    color: #fff !important;
}
.pkp_navigation_search_wrapper {
    align-items: center;
}

/* Gallery styles apply only when gallery markup is supplied by a block/plugin/template. */
.jrg-announcement-gallery-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 18px;
    margin: 20px 0 26px;
}
.jrg-announcement-gallery-row > .cmp_announcements,
.jrg-announcement-gallery-row > .jrg-article-gallery {
    min-width: 0;
    margin: 0;
}
.jrg-article-gallery__viewport {
    overflow: hidden;
    width: 100%;
}
.jrg-article-gallery__track {
    display: flex;
    width: max-content;
    animation: jrg-gallery-marquee 35s linear infinite;
    will-change: transform;
}
.jrg-article-gallery:hover .jrg-article-gallery__track,
.jrg-article-gallery:focus-within .jrg-article-gallery__track {
    animation-play-state: paused;
}
@media (max-width: 900px) {
    .jrg-announcement-gallery-row {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 700px) {
    .pkp_navigation_search_wrapper {
        flex-wrap: wrap;
        gap: 6px;
    }
    .pkp_navigation_search_wrapper .pkp_navigation_auth_links,
    .pkp_navigation_primary_wrapper .pkp_navigation_auth_links {
        margin-left: 0;
    }
}