/* ================================================================
   JURNAL SESSION — POLITEKNIK NEGERI BANYUWANGI
   Production Stylesheet for OJS 3.5.x Default Theme (Public Frontend)

   Journal: SESSION (Software Development, Digital Business Intelligence,
            and Computer Engineering)
   Publisher: Politeknik Negeri Banyuwangi (Poliwangi)
   Accreditation: SINTA 5
   ISSN: 2963-9026

   Design Direction: Top-Tier Academic Journal UI
   References: IEEE Xplore, eLife, JOSS, Nature Open Access, ACM
   ================================================================ */

/* ----------------------------------------------------------------
   PEMUATAN TIPOGRAFI (wajib paling atas — aturan @import harus
   mendahului semua aturan lain). Tanpa baris ini, token
   --session-font-display / --session-font-body tidak pernah
   terpakai dan peramban jatuh ke font sistem.
   ---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');


/* ================================================================
   1. DESIGN TOKENS & VARIABLES
   ================================================================ */

:root {
    /* Brand & Academic Palette */
    --session-primary: #062b3d;
    --session-primary-dark: #031b27;
    --session-primary-light: #0d425c;
    --session-accent: #007591;
    --session-accent-hover: #005d73;
    --session-accent-subtle: #eef8fa;
    --session-accent-border: #bce3eb;
    --session-signal: #0099bb;
    --session-signal-soft: #eaf6f9;
    --session-gold: #d68c17;
    --session-gold-hover: #b57209;
    --session-gold-light: #fef9ed;
    --session-gold-border: #edd5a1;

    /* Neutrals & Text (WCAG 2.2 AA compliant >= 4.5:1) */
    --session-ink: #12242e;
    --session-ink-secondary: #2f4552;
    --session-muted: #4e6573;
    --session-muted-light: #728a96;
    --session-surface: #ffffff;
    --session-surface-subtle: #f8fafb;
    --session-canvas: #f2f5f7;
    --session-border: #d6e1e7;
    --session-border-light: #e7eef2;
    --session-focus-ring: #007591;

    /* Elevation & Shadows */
    --session-shadow-xs: 0 1px 3px rgba(6, 43, 61, 0.05);
    --session-shadow-sm: 0 2px 6px rgba(6, 43, 61, 0.07), 0 1px 2px rgba(6, 43, 61, 0.04);
    --session-shadow-md: 0 4px 14px rgba(6, 43, 61, 0.09), 0 2px 4px rgba(6, 43, 61, 0.04);
    --session-shadow-lg: 0 10px 28px rgba(6, 43, 61, 0.12), 0 3px 8px rgba(6, 43, 61, 0.06);
    --session-shadow-hover: 0 6px 20px rgba(0, 117, 145, 0.15), 0 2px 6px rgba(6, 43, 61, 0.06);

    /* Radii */
    --session-radius-xs: 4px;
    --session-radius-sm: 6px;
    --session-radius-md: 10px;
    --session-radius-lg: 14px;
    --session-radius-pill: 9999px;

    /* Typography */
    --session-font-body: "Inter", "Aptos", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans", sans-serif;
    --session-font-display: "Plus Jakarta Sans", "Avenir Next", "Segoe UI Variable Display", "Trebuchet MS", sans-serif;
    --session-font-reading: "Charter", "Merriweather", "Source Serif Pro", Cambria, Georgia, serif;
    --session-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    /* Layout & Transitions */
    --session-content-width: 1240px;
    --session-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --session-transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================================
   2. FOUNDATION & RESET
   ================================================================ */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    color: var(--session-ink);
    background-color: var(--session-canvas);
    font-family: var(--session-font-body);
    font-size: 15.5px;
    line-height: 1.68;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Universal Keyboard Focus (WCAG 2.2 AA) */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
.obj_galley_link:focus-visible {
    outline: 3px solid var(--session-focus-ring);
    outline-offset: 2px;
}

body a {
    color: var(--session-accent);
    text-decoration: none;
    transition: color var(--session-transition-fast), text-decoration-color var(--session-transition-fast);
}

body a:hover {
    color: var(--session-accent-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    margin-top: 0;
    color: var(--session-primary);
    font-family: var(--session-font-display);
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

body p {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

body img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.pkp_structure_page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

/* Clear default OJS float wrappers */
.pkp_structure_content::before,
.pkp_structure_content::after,
.pkp_structure_main::before,
.pkp_structure_main::after,
.pkp_structure_head::before,
.pkp_structure_head::after,
.pkp_structure_footer::before,
.pkp_structure_footer::after {
    display: none;
}

/* ================================================================
   3. JOURNAL MASTHEAD & INSTITUTIONAL HEADER
   ================================================================ */

.pkp_structure_head {
    position: relative;
    z-index: 100;
    border: 0;
    border-top: 4px solid var(--session-gold);
    border-bottom: 3px solid var(--session-accent);
    background: linear-gradient(180deg, var(--session-primary) 0%, var(--session-primary-dark) 100%);
    box-shadow: var(--session-shadow-md);
}

/* Institutional top accent line */
.pkp_structure_head::before {
    position: absolute;
    top: -4px;
    right: max(2rem, calc((100vw - var(--session-content-width)) / 2));
    width: clamp(100px, 15vw, 220px);
    height: 4px;
    background: var(--session-signal);
    content: "";
}

.pkp_head_wrapper {
    width: min(calc(100% - 2.5rem), var(--session-content-width));
    max-width: var(--session-content-width);
    margin-right: auto;
    margin-left: auto;
    padding: 0;
}

/* Site Name & Title */
.pkp_site_name_wrapper {
    padding-top: clamp(1.4rem, 3vw, 2.25rem);
    padding-bottom: clamp(1.2rem, 2.5vw, 1.85rem);
}

.pkp_site_name {
    margin: 0;
    padding: 0;
    text-align: left;
}

.pkp_site_name .is_text {
    display: inline-block;
    max-width: 980px;
    color: #ffffff;
    font-family: var(--session-font-display);
    font-size: clamp(1.5rem, 2.8vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.22;
    text-decoration: none;
    text-wrap: balance;
    transition: opacity var(--session-transition-fast);
}

.pkp_site_name .is_text:hover {
    color: #ffffff;
    opacity: 0.95;
    text-decoration: none;
}

/* Gold Accent bar below title */
.pkp_site_name .is_text::after {
    display: block;
    width: 64px;
    height: 3px;
    margin-top: 0.75rem;
    border-radius: var(--session-radius-xs);
    background: var(--session-gold);
    content: "";
}

.pkp_site_name .is_img img {
    max-height: 90px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

/* ================================================================
   4. DUAL-TIER NAVIGATION & SEARCH
   ================================================================ */

.pkp_site_nav_menu {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(3, 27, 39, 0.96);
}

.pkp_navigation_primary_row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    color: #ffffff;
}

.pkp_navigation_primary_wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.pkp_navigation_primary,
.pkp_navigation_user {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 0.15rem;
}

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

.pkp_navigation_primary > li > a,
.pkp_navigation_user > li > a {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0.65rem 0.95rem;
    border-bottom: 3px solid transparent;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--session-font-display);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    text-decoration: none;
    transition: all var(--session-transition-fast);
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_user > li > a:hover {
    border-bottom-color: var(--session-gold);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    text-decoration: none;
}

.pkp_navigation_primary > li > a:focus,
.pkp_navigation_user > li > a:focus {
    background: #ffffff;
    color: var(--session-primary-dark);
}

/* Badges & Task Count in Navigation (e.g. user notifications, task counters) */
.pkp_nav_list .badge,
.pkp_nav_list .task_count,
.pkp_nav_list .pkp_unread,
.pkp_navigation_user .badge,
.pkp_navigation_primary .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 0.45rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--session-accent);
    color: #ffffff;
    font-family: var(--session-font-display);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.pkp_nav_list .badge:empty,
.pkp_navigation_user .badge:empty {
    display: none !important;
}

/* Dropdown Submenus */
.pkp_nav_list ul {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    min-width: 220px;
    margin: 0;
    padding: 0.35rem 0;
    overflow: visible;
    border: 1px solid var(--session-border);
    border-top: 3px solid var(--session-accent);
    border-radius: 0 0 var(--session-radius-md) var(--session-radius-md);
    background: var(--session-surface);
    box-shadow: var(--session-shadow-lg);
    list-style: none;
    animation: sessionDropdownFade 180ms ease-out forwards;
}

@keyframes sessionDropdownFade {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pkp_nav_list li:hover > ul,
.pkp_nav_list li:focus-within > ul {
    display: block;
}

.pkp_nav_list ul li {
    margin: 0;
    padding: 0;
}

.pkp_nav_list ul a {
    display: block;
    padding: 0.6rem 1.15rem;
    border-left: 3px solid transparent;
    color: var(--session-ink);
    font-family: var(--session-font-body);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--session-transition-fast);
}

.pkp_nav_list ul a:hover,
.pkp_nav_list ul a:focus {
    border-left-color: var(--session-gold);
    background: var(--session-surface-subtle);
    color: var(--session-accent);
}

/* Search Link in Header */
.pkp_navigation_search_wrapper {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
}

.pkp_navigation_search_wrapper a.pkp_search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.35rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--session-radius-pill);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 0.84rem;
    text-decoration: none;
    transition: all var(--session-transition-fast);
}

.pkp_navigation_search_wrapper a.pkp_search:hover {
    background: var(--session-accent);
    border-color: var(--session-accent);
    color: #ffffff;
    transform: translateY(-1px);
}

/* ================================================================
   5. MAIN CONTENT LAYOUT
   ================================================================ */

.pkp_structure_content {
    width: min(calc(100% - 2.5rem), var(--session-content-width));
    max-width: var(--session-content-width);
    margin: clamp(1.5rem, 3vw, 2.75rem) auto;
    padding: 0;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.pkp_structure_main {
    min-width: 0;
    width: auto;
    float: none;
    padding: clamp(1.4rem, 3vw, 2.5rem);
    border: 1px solid var(--session-border);
    border-radius: var(--session-radius-lg);
    background: var(--session-surface);
    box-shadow: var(--session-shadow-sm);
}

/* Homepage sections already have their own editorial boundaries. Keeping the
   outer shell flat avoids a card-inside-card appearance. */
.pkp_page_index.pkp_op_index .pkp_structure_main {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Headings in Main Content */
.pkp_structure_main > .page > h1,
.pkp_structure_main > .page > h2,
.pkp_structure_main > h1,
.pkp_structure_main > h2 {
    position: relative;
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--session-border-light);
    color: var(--session-primary);
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 800;
}

.pkp_structure_main > .page > h1::after,
.pkp_structure_main > .page > h2::after,
.pkp_structure_main > h1::after,
.pkp_structure_main > h2::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 54px;
    height: 3px;
    border-radius: var(--session-radius-xs);
    background: var(--session-accent);
    content: "";
}

/* Breadcrumbs */
.cmp_breadcrumbs {
    margin: 0 0 1.5rem;
    padding: 0.6rem 0.95rem;
    border: 1px solid var(--session-border-light);
    border-radius: var(--session-radius-sm);
    background: var(--session-surface-subtle);
    color: var(--session-muted);
    font-size: 0.84rem;
}

.cmp_breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 0.35rem;
}

.cmp_breadcrumbs a {
    color: var(--session-ink-secondary);
    font-weight: 600;
}

.cmp_breadcrumbs a:hover {
    color: var(--session-accent);
}

.cmp_breadcrumbs .separator {
    color: var(--session-muted-light);
    margin: 0 0.15rem;
}

.cmp_breadcrumbs .current {
    color: var(--session-primary);
    font-weight: 700;
}

/* ================================================================
   6. HOMEPAGE & ABOUT SECTION STYLING
   ================================================================ */

.page_index_journal {
    display: flex;
    flex-direction: column;
}

.page_index_journal > .homepage_about { order: 10; }
.page_index_journal > .cmp_announcements { order: 20; }
.page_index_journal > .latest_articles,
.page_index_journal > .current_issue { order: 30; }
.page_index_journal > .additional_content { order: 40; }

/* About the Journal Card */
.homepage_about {
    margin-bottom: 2.25rem;
    padding: clamp(1.35rem, 3vw, 2rem);
    border: 1px solid var(--session-border);
    border-top: 3px solid var(--session-accent);
    border-radius: var(--session-radius-md);
    background: var(--session-surface-subtle);
}

.pkp_page_index.pkp_op_index .homepage_image {
    margin-bottom: 1.5rem;
    overflow: hidden;
    border: 1px solid var(--session-border);
    border-radius: var(--session-radius-lg);
    background: var(--session-surface);
    box-shadow: var(--session-shadow-sm);
}

.pkp_page_index.pkp_op_index .homepage_image img {
    display: block;
    width: 100%;
}

.homepage_about > h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--session-primary);
    font-size: clamp(1.3rem, 2.2vw, 1.65rem);
    font-weight: 800;
}

.homepage_about .description {
    color: var(--session-ink-secondary);
    font-size: 0.95rem;
    line-height: 1.72;
}

/* Journal Specification Table inside About */
.homepage_about table {
    width: 100%;
    margin: 1.25rem 0 1.5rem;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--session-border);
    border-radius: var(--session-radius-sm);
    background: #ffffff;
    overflow: hidden;
}

.homepage_about table td {
    padding: 0.65rem 0.95rem;
    border: 0;
    border-bottom: 1px solid var(--session-border-light);
    font-size: 0.9rem;
}

.homepage_about table tr:last-child td {
    border-bottom: 0;
}

.homepage_about table td:first-child {
    width: 25% !important;
    background: var(--session-surface-subtle);
    color: var(--session-primary);
    font-family: var(--session-font-display);
    font-weight: 750;
    border-right: 1px solid var(--session-border-light);
}

.homepage_about table td:last-child {
    color: var(--session-ink);
}

/* ================================================================
   7. CALL FOR PAPERS & ANNOUNCEMENTS (HERO BANNER)
   ================================================================ */

.cmp_announcements {
    margin-bottom: 2.5rem;
    overflow: hidden;
    border: 1px solid var(--session-accent-border);
    border-radius: var(--session-radius-md);
    background: var(--session-surface);
    box-shadow: var(--session-shadow-sm);
}

.cmp_announcements.highlight_first {
    display: block !important;
    position: relative;
    width: 100% !important;
}

/* Hide duplicate OJS headings */
.cmp_announcements.highlight_first > #homepageAnnouncements,
.cmp_announcements.highlight_first > h2 {
    display: none !important;
}

/* Hero Top Header Bar */
.cmp_announcements.highlight_first::before {
    display: block;
    padding: 0.8rem 1.4rem;
    background: var(--session-primary);
    color: #ffffff;
    content: "Call for Papers & Editorial Announcements";
    font-family: var(--session-font-display);
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Main Featured Announcement (Side-by-Side Hero) */
.cmp_announcements.highlight_first > .obj_announcement_summary {
    display: block !important;
    width: 100% !important;
    float: none !important;
    padding: clamp(1.35rem, 3vw, 2.25rem);
    background: #ffffff;
    box-sizing: border-box !important;
}

.cmp_announcements.highlight_first > .obj_announcement_summary::after {
    display: table;
    clear: both;
    content: "";
}

/* Floating Poster on Left (ONLY for paragraphs containing images) */
.cmp_announcements.highlight_first > .obj_announcement_summary .summary p:has(img) {
    float: left;
    width: clamp(170px, 26vw, 240px);
    margin: 0 2rem 1.25rem 0;
}

.cmp_announcements.highlight_first > .obj_announcement_summary .summary p {
    margin: 0 0 1.25rem;
    color: var(--session-ink-secondary);
    font-size: 1rem;
    line-height: 1.72;
}

.cmp_announcements.highlight_first > .obj_announcement_summary .summary img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 290px;
    border: 1px solid var(--session-border);
    border-radius: var(--session-radius-md);
    box-shadow: var(--session-shadow-sm);
    object-fit: contain;
    transition: transform var(--session-transition-fast);
}

.cmp_announcements.highlight_first > .obj_announcement_summary .summary a:hover img {
    transform: translateY(-2px);
    box-shadow: var(--session-shadow-md);
}

/* Badge on its own line */
.cmp_announcements.highlight_first > .obj_announcement_summary h3::before {
    display: block;
    width: fit-content;
    margin-bottom: 0.65rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--session-radius-xs);
    background: var(--session-gold-light);
    border: 1px solid var(--session-gold-border);
    color: var(--session-gold-hover);
    content: "Submission Open";
    font-family: var(--session-font-body);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cmp_announcements.highlight_first > .obj_announcement_summary h3 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    font-weight: 800;
    line-height: 1.3;
}

.cmp_announcements.highlight_first > .obj_announcement_summary h3 a {
    color: var(--session-primary);
    text-decoration: none;
}

.cmp_announcements.highlight_first > .obj_announcement_summary h3 a:hover {
    color: var(--session-accent);
}

.cmp_announcements.highlight_first > .obj_announcement_summary .date {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
    color: var(--session-muted);
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
}

.cmp_announcements.highlight_first > .obj_announcement_summary .read_more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 42px;
    padding: 0.6rem 1.6rem;
    border: 1px solid var(--session-accent);
    border-radius: var(--session-radius-sm);
    background: var(--session-accent);
    color: #ffffff !important;
    font-family: var(--session-font-display);
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: none !important;
    box-shadow: var(--session-shadow-xs);
    transition: all var(--session-transition-fast);
}

.cmp_announcements.highlight_first > .obj_announcement_summary .read_more:hover {
    background: var(--session-accent-hover);
    transform: translateY(-1px);
}

/* Hide .more container by default (eliminates whitespace & empty box) */
.cmp_announcements.highlight_first .more {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    float: none !important;
}

/* Past Announcements: Bottom Multi-Card Grid (ONLY when it contains articles) */
.cmp_announcements.highlight_first .more:has(article),
.cmp_announcements.highlight_first .more:has(.obj_announcement_summary) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    width: 100% !important;
    height: auto !important;
    float: none !important;
    padding: 1.25rem 1.5rem !important;
    border-top: 1px solid var(--session-border) !important;
    border-left: 0 !important;
    background: var(--session-surface-subtle) !important;
    box-sizing: border-box !important;
}

.cmp_announcements.highlight_first .more .obj_announcement_summary {
    position: relative;
    padding: 0.95rem 1.15rem;
    border: 1px solid var(--session-border);
    border-radius: var(--session-radius-sm);
    background: #ffffff;
    box-shadow: var(--session-shadow-xs);
    transition: all var(--session-transition-fast);
}

.cmp_announcements.highlight_first .more .obj_announcement_summary:hover {
    border-color: var(--session-accent-border);
    box-shadow: var(--session-shadow-hover);
    transform: translateY(-2px);
}

.cmp_announcements.highlight_first .more .obj_announcement_summary h4 {
    margin: 0 0 0.35rem;
    font-size: 0.88rem;
    font-weight: 750;
    line-height: 1.4;
}

.cmp_announcements.highlight_first .more .obj_announcement_summary h4 a {
    color: var(--session-primary);
    text-decoration: none;
}

.cmp_announcements.highlight_first .more .obj_announcement_summary h4 a:hover {
    color: var(--session-accent);
}

.cmp_announcements.highlight_first .more .date {
    display: inline-flex;
    align-items: center;
    color: var(--session-muted);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ================================================================
   7B. ANNOUNCEMENTS LIST PAGE & FULL VIEW (/announcement)
   ================================================================ */

.page_announcements ul.cmp_announcements {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 1.5rem 0 2.5rem;
    padding: 0;
    list-style: none;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.page_announcements ul.cmp_announcements > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.page_announcements .obj_announcement_summary,
.page_announcement .obj_announcement_full {
    padding: clamp(1.35rem, 3vw, 2.25rem);
    border: 1px solid var(--session-border);
    border-radius: var(--session-radius-md);
    background: var(--session-surface);
    box-shadow: var(--session-shadow-xs);
    transition: all var(--session-transition-base);
}

.page_announcements .obj_announcement_summary:hover {
    border-color: var(--session-accent-border);
    box-shadow: var(--session-shadow-hover);
    transform: translateY(-2px);
}

.page_announcements .obj_announcement_summary h2,
.page_announcement .obj_announcement_full h2 {
    margin: 0 0 0.5rem;
    font-family: var(--session-font-display);
    font-size: clamp(1.25rem, 2.3vw, 1.55rem);
    font-weight: 800;
    line-height: 1.35;
}

.page_announcements .obj_announcement_summary h2 a {
    color: var(--session-primary);
    text-decoration: none;
}

.page_announcements .obj_announcement_summary h2 a:hover {
    color: var(--session-accent);
}

.page_announcements .obj_announcement_summary .date,
.page_announcement .obj_announcement_full .date {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.15rem;
    color: var(--session-muted);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.page_announcements .obj_announcement_summary .date::before,
.page_announcement .obj_announcement_full .date::before {
    content: "📅";
    font-size: 0.85rem;
}

.page_announcements .obj_announcement_summary .summary,
.page_announcement .obj_announcement_full .description {
    color: var(--session-ink-secondary);
    font-size: 0.94rem;
    line-height: 1.72;
}

.page_announcements .obj_announcement_summary .summary::after,
.page_announcement .obj_announcement_full .description::after {
    display: table;
    clear: both;
    content: "";
}

.page_announcements .obj_announcement_summary .summary p:has(img) {
    float: left;
    width: clamp(160px, 25vw, 220px);
    margin: 0 2rem 1.25rem 0;
}

.page_announcements .obj_announcement_summary .summary img,
.page_announcement .obj_announcement_full .description img {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 300px;
    border: 1px solid var(--session-border);
    border-radius: var(--session-radius-sm);
    box-shadow: var(--session-shadow-sm);
    object-fit: contain;
}

.page_announcements .obj_announcement_summary .read_more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 38px;
    margin-top: 0.85rem;
    padding: 0.45rem 1.35rem;
    border: 1px solid var(--session-accent);
    border-radius: var(--session-radius-sm);
    background: var(--session-accent);
    color: #ffffff !important;
    font-family: var(--session-font-display);
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none !important;
    box-shadow: var(--session-shadow-xs);
    transition: all var(--session-transition-fast);
}

.page_announcements .obj_announcement_summary .read_more:hover {
    background: var(--session-accent-hover);
    transform: translateY(-1px);
}

/* ================================================================
   8. INDEXING BADGES GRID (ADDITIONAL CONTENT)
   ================================================================ */

.additional_content {
    margin-top: 2.25rem;
    margin-bottom: 2.25rem;
    padding: clamp(1.35rem, 3vw, 2rem);
    border: 1px solid var(--session-border);
    border-radius: var(--session-radius-md);
    background: var(--session-surface-subtle);
    box-shadow: var(--session-shadow-xs);
}

.additional_content h1,
.additional_content h2,
.additional_content .page > h1 {
    position: relative;
    margin-top: 0;
    margin-bottom: 1.25rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--session-border-light);
    color: var(--session-primary);
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    font-weight: 800;
}

.additional_content h1::after,
.additional_content h2::after,
.additional_content .page > h1::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 48px;
    height: 3px;
    border-radius: var(--session-radius-xs);
    background: var(--session-accent);
    content: "";
}

.additional_content hr {
    display: none;
}

.additional_content center,
.additional_content .page {
    text-align: left;
}

/* Modern Badges Flex / Grid Container */
.additional_content .indexing_grid,
.additional_content center p,
.additional_content p:has(img),
.session_indexing_block .indexing_grid,
.pkp_block .indexing_grid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.85rem 1rem !important;
    margin: 1rem 0 0 !important;
    padding: 0 !important;
}

.additional_content a,
.additional_content .indexing_item,
.session_indexing_block a,
.pkp_block .indexing_grid a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border: 1px solid var(--session-border);
    border-radius: var(--session-radius-sm);
    background: #ffffff;
    box-shadow: var(--session-shadow-xs);
    transition: all var(--session-transition-fast);
}

.additional_content a:hover,
.additional_content .indexing_item:hover,
.session_indexing_block a:hover,
.pkp_block .indexing_grid a:hover {
    border-color: var(--session-accent-border);
    box-shadow: var(--session-shadow-sm);
    transform: translateY(-2px);
    text-decoration: none;
}

.additional_content img,
.session_indexing_block img,
.pkp_block .indexing_grid img {
    display: block;
    max-height: 46px;
    height: 44px;
    width: auto !important;
    max-width: 160px;
    object-fit: contain;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* ================================================================
   9. ISSUE TOC & SCHOLARLY ARTICLE CARDS
   ================================================================ */

/* Issue TOC Header Card */
.obj_issue_toc > .heading {
    display: block;
    margin-bottom: 2.25rem;
    padding: clamp(1.35rem, 3vw, 2.25rem);
    border: 1px solid var(--session-border);
    border-radius: var(--session-radius-md);
    background: var(--session-surface-subtle);
    box-shadow: var(--session-shadow-xs);
}

.obj_issue_toc > .heading::after {
    display: table;
    clear: both;
    content: "";
}

.obj_issue_toc > .heading .cover {
    float: left;
    width: clamp(140px, 22vw, 210px);
    max-width: 210px;
    margin: 0 2rem 1.25rem 0;
}

.obj_issue_toc > .heading .cover img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--session-border);
    border-radius: var(--session-radius-sm);
    box-shadow: var(--session-shadow-sm);
    object-fit: cover;
}

.obj_issue_toc > .heading .description {
    color: var(--session-ink-secondary);
    font-size: 0.96rem;
    line-height: 1.72;
    margin-bottom: 0.85rem;
}

.obj_issue_toc > .heading .pub_id,
.obj_issue_toc > .heading .published {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.5rem;
    margin-right: 0.75rem;
    margin-bottom: 0.5rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--session-border);
    border-radius: var(--session-radius-sm);
    background: #ffffff;
    color: var(--session-muted);
    font-size: 0.82rem;
    box-shadow: var(--session-shadow-xs);
    vertical-align: middle;
}

.obj_issue_toc > .heading .pub_id .type,
.obj_issue_toc > .heading .published .label {
    color: var(--session-primary);
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.obj_issue_toc > .heading .pub_id a {
    color: var(--session-accent);
    font-weight: 600;
}

.obj_issue_toc .section > h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    margin-bottom: 1.15rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--session-border-light);
    color: var(--session-primary);
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
}

.obj_issue_toc .section > h2::before {
    display: inline-block;
    width: 4px;
    height: 1rem;
    border-radius: var(--session-radius-xs);
    background: var(--session-accent);
    content: "";
}

.obj_issue_toc .section > .articles,
.latest_articles > .articles {
    margin: 0;
    padding: 0;
    list-style: none;
}

.obj_issue_toc .section > .articles > li,
.latest_articles > .articles > li {
    margin-bottom: 1.15rem;
}

/* Scholarly Article Card */
.obj_article_summary {
    position: relative;
    padding: 1.35rem 1.5rem;
    border: 1px solid var(--session-border);
    border-radius: var(--session-radius-md);
    background: var(--session-surface);
    box-shadow: var(--session-shadow-xs);
    transition: all var(--session-transition-base);
}

.obj_article_summary:hover {
    border-color: var(--session-accent-border);
    box-shadow: var(--session-shadow-hover);
    transform: translateY(-2px);
}

.obj_article_summary::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    border-radius: var(--session-radius-md) 0 0 var(--session-radius-md);
    background: var(--session-accent);
    opacity: 0;
    transition: opacity var(--session-transition-fast);
    content: "";
}

.obj_article_summary:hover::before {
    opacity: 1;
}

.obj_article_summary > .title {
    margin: 0 0 0.45rem;
    font-family: var(--session-font-display);
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    font-weight: 750;
    line-height: 1.4;
}

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

.obj_article_summary > .title a:hover {
    color: var(--session-accent);
    text-decoration: underline;
}

.obj_article_summary .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--session-border-light);
    color: var(--session-muted);
    font-size: 0.84rem;
}

.obj_article_summary .meta .authors {
    color: var(--session-ink-secondary);
    font-weight: 600;
}

.obj_article_summary .meta .pages {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--session-border-light);
    border-radius: var(--session-radius-xs);
    background: var(--session-surface-subtle);
    font-variant-numeric: tabular-nums;
    font-size: 0.76rem;
    font-weight: 700;
}

.obj_article_summary .galleys_links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
}

.obj_galley_link,
.obj_galley_link.pdf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0.45rem 1.15rem;
    border: 1px solid var(--session-accent);
    border-radius: var(--session-radius-sm);
    background: var(--session-accent);
    color: #ffffff !important;
    font-family: var(--session-font-display);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: var(--session-shadow-xs);
    transition: all var(--session-transition-fast);
}

.obj_galley_link::before,
.obj_galley_link.pdf::before {
    content: "📄";
    font-size: 0.95rem;
}

.obj_galley_link:hover,
.obj_galley_link.pdf:hover {
    background: var(--session-primary-dark);
    border-color: var(--session-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--session-shadow-sm);
}

/* ================================================================
   10. ARTICLE DETAIL PAGE (HIGH-IMPACT SCHOLARLY VIEW)
   ================================================================ */

.page_article .page_title,
.obj_article_details .page_title {
    margin-bottom: 1.25rem;
    color: var(--session-primary-dark);
    font-family: var(--session-font-display);
    font-size: clamp(1.45rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1.28;
    text-wrap: balance;
}

/* Ensure no 3-column squeeze on article page with sidebar */
.obj_article_details .row {
    display: block !important;
    width: 100% !important;
}

.obj_article_details .main_entry {
    width: 100%;
}

/* Author Section */
.obj_article_details .item.authors {
    margin-bottom: 1.5rem;
}

.obj_article_details .authors ul.authors {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    margin: 0 0 0.85rem;
    padding: 0;
    list-style: none;
}

.obj_article_details .authors ul.authors > li {
    margin: 0;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--session-border-light);
    border-radius: var(--session-radius-xs);
    background: var(--session-surface-subtle);
}

.obj_article_details .authors .name {
    color: var(--session-primary);
    font-family: var(--session-font-display);
    font-size: 0.98rem;
    font-weight: 750;
}

.obj_article_details .authors .affiliation {
    display: block;
    margin-top: 0.15rem;
    color: var(--session-muted);
    font-size: 0.82rem;
}

.obj_article_details .authors a[href*="ror.org"],
.obj_article_details .authors a[href*="orcid.org"] {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 0.25rem;
}

.obj_article_details .authors svg {
    display: inline-block;
    height: 13px;
    width: auto;
    max-width: 16px;
    max-height: 13px;
    vertical-align: middle;
}

/* Full-Width Modular Action & Metadata Section (.entry_details) */
.obj_article_details .entry_details {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 2.5rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    gap: 1.5rem !important;
}

/* Hide duplicate floating cover on article view */
.obj_article_details .entry_details .item.cover_image {
    display: none !important;
}

/* Publication Date & Issue Context Cards */
.obj_article_details .entry_details .item.published,
.obj_article_details .entry_details .item.issue {
    display: block;
    width: 100%;
    margin-bottom: 0;
    padding: 0.85rem 1.25rem;
    border: 1px solid var(--session-border);
    border-radius: var(--session-radius-sm);
    background: var(--session-surface-subtle);
}

.obj_article_details .entry_details .item.published .label,
.obj_article_details .entry_details .item.issue .label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--session-primary);
    font-family: var(--session-font-display);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.obj_article_details .entry_details .item.published .value,
.obj_article_details .entry_details .item.issue .value {
    color: var(--session-ink);
    font-size: 0.9rem;
    font-weight: 600;
}

.obj_article_details .entry_details .galleys_links {
    margin: 0;
    padding: 0;
}

.obj_article_details .entry_details .galleys_links .obj_galley_link {
    display: inline-flex;
    min-height: 44px;
    padding: 0.65rem 1.5rem;
    font-size: 0.88rem;
    font-weight: 800;
}

/* How to Cite Card (Full Width) */
.obj_article_details .entry_details .item.citation {
    width: 100% !important;
    margin: 0 !important;
    padding: 1.35rem 1.65rem !important;
    border: 1px solid var(--session-gold-border) !important;
    border-radius: var(--session-radius-md) !important;
    background: var(--session-gold-light) !important;
    box-shadow: var(--session-shadow-xs) !important;
}

.obj_article_details .entry_details .item.citation h2.label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0;
    margin-bottom: 0.85rem;
    color: var(--session-primary);
    font-family: var(--session-font-display);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.obj_article_details .entry_details .item.citation #citationOutput {
    margin-bottom: 1rem;
    color: var(--session-ink);
    font-size: 0.92rem;
    line-height: 1.68;
}

.obj_article_details .entry_details .item.citation .citation_formats_button {
    min-height: 36px;
    padding: 0.4rem 0.95rem;
    border: 1px solid var(--session-accent);
    border-radius: var(--session-radius-sm);
    background: var(--session-surface);
    color: var(--session-accent);
    font-family: var(--session-font-display);
    font-size: 0.82rem;
    font-weight: 750;
    cursor: pointer;
    transition: all var(--session-transition-fast);
}

.obj_article_details .entry_details .item.citation .citation_formats_button:hover {
    background: var(--session-accent);
    color: #ffffff;
}

.obj_article_details .entry_details .item.citation .citation_formats_list {
    margin-top: 0.85rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--session-border);
    border-radius: var(--session-radius-sm);
    background: #ffffff;
}

.obj_article_details .entry_details .item.citation .citation_formats_styles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.obj_article_details .entry_details .item.citation .citation_formats_styles a {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--session-border-light);
    border-radius: var(--session-radius-xs);
    background: var(--session-surface-subtle);
    color: var(--session-ink-secondary);
    font-size: 0.8rem;
    font-weight: 650;
    text-decoration: none;
}

.obj_article_details .entry_details .item.citation .citation_formats_styles a:hover {
    border-color: var(--session-accent);
    background: var(--session-accent-subtle);
    color: var(--session-accent);
}

/* Copyright & License Card (Full Width) */
.obj_article_details .entry_details .item.copyright {
    width: 100% !important;
    margin: 0 !important;
    padding: 1.35rem 1.65rem !important;
    border: 1px solid var(--session-border) !important;
    border-radius: var(--session-radius-md) !important;
    background: var(--session-surface-subtle) !important;
    color: var(--session-ink-secondary);
    font-size: 0.86rem;
    line-height: 1.65;
}

.obj_article_details .entry_details .item.copyright h2.label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: var(--session-primary);
    font-family: var(--session-font-display);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.obj_article_details .entry_details .item.copyright img {
    margin: 0.5rem 0;
    vertical-align: middle;
}

.obj_article_details .entry_details .item.copyright ol,
.obj_article_details .entry_details .item.copyright ul {
    margin: 0.75rem 0;
    padding-left: 1.35rem;
}

.obj_article_details .entry_details .item.copyright li {
    margin-bottom: 0.45rem;
}

.obj_article_details .entry_details .item.copyright h2:not(.label) {
    font-size: 0.92rem;
    margin: 0.85rem 0 0.4rem;
    color: var(--session-primary);
}

/* DOI & Metadata strip in Main Entry */
.obj_article_details .item.doi {
    margin-bottom: 1.25rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--session-border-light);
    border-radius: var(--session-radius-xs);
    background: var(--session-surface-subtle);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.84rem;
}

.obj_article_details .item.doi .label {
    color: var(--session-primary);
    font-weight: 800;
    text-transform: uppercase;
}

.obj_article_details .item.doi .value a {
    color: var(--session-accent);
    font-family: var(--session-font-mono);
    font-size: 0.82rem;
    font-weight: 600;
}

/* Abstract Box */
.obj_article_details .item.abstract {
    margin-bottom: 2rem;
}

.obj_article_details .item.abstract h2,
.obj_article_details .item.abstract .label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
    color: var(--session-primary);
    font-family: var(--session-font-display);
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
}

.obj_article_details .item.abstract h2::before {
    display: inline-block;
    width: 4px;
    height: 1rem;
    border-radius: var(--session-radius-xs);
    background: var(--session-accent);
    content: "";
}

.obj_article_details .abstract,
.obj_article_details .item.abstract .value {
    padding: 1.35rem 1.65rem;
    border: 1px solid var(--session-border);
    border-left: 4px solid var(--session-accent);
    border-radius: var(--session-radius-md);
    background: var(--session-surface-subtle);
    color: var(--session-ink);
    font-family: var(--session-font-reading);
    font-size: 1.02rem;
    line-height: 1.8;
}

.obj_article_details .abstract p:last-child,
.obj_article_details .item.abstract .value p:last-child {
    margin-bottom: 0;
}

/* Keywords Strip */
.obj_article_details .item.keywords {
    margin-bottom: 2rem;
}

.obj_article_details .item.keywords .label,
.obj_article_details .item.keywords h2 {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--session-primary);
    font-family: var(--session-font-display);
    font-size: 0.86rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.obj_article_details .keywords .value {
    color: var(--session-ink-secondary);
    font-size: 0.92rem;
    line-height: 1.65;
}

/* References Section */
.obj_article_details .item.references {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--session-border-light);
}

.obj_article_details .item.references h2,
.obj_article_details .item.references .label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1.25rem;
    color: var(--session-primary);
    font-family: var(--session-font-display);
    font-size: 1.15rem;
    font-weight: 800;
    text-transform: uppercase;
}

.obj_article_details .item.references h2::before {
    display: inline-block;
    width: 4px;
    height: 1.1rem;
    border-radius: var(--session-radius-xs);
    background: var(--session-accent);
    content: "";
}

.obj_article_details .references .value p {
    margin-bottom: 0.85rem;
    padding-left: 1.85rem;
    text-indent: -1.85rem;
    font-size: 0.88rem;
    line-height: 1.68;
    color: var(--session-ink-secondary);
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ================================================================
   10B. OJS PDF VIEWER & IN-BROWSER PREVIEW READER
   ================================================================ */

/* PDF Reader Top Navigation Bar */
.page_pdf .header_view,
.pkp_op_view .header_view {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.75rem;
    background: var(--session-primary-dark);
    color: #ffffff;
    border-bottom: 3px solid var(--session-gold);
    box-shadow: var(--session-shadow-md);
}

.page_pdf .header_view a,
.pkp_op_view .header_view a {
    color: #ffffff;
    font-family: var(--session-font-display);
    font-weight: 750;
    text-decoration: none;
}

.page_pdf .header_view .return,
.pkp_op_view .header_view .return {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--session-radius-xs);
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.84rem;
    transition: all var(--session-transition-fast);
}

.page_pdf .header_view .return:hover,
.pkp_op_view .header_view .return:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
}

.page_pdf .header_view .download,
.pkp_op_view .header_view .download {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 1.25rem;
    border: 1px solid var(--session-gold);
    border-radius: var(--session-radius-xs);
    background: var(--session-gold);
    color: var(--session-primary-dark) !important;
    font-weight: 800;
    font-size: 0.86rem;
    box-shadow: var(--session-shadow-xs);
    transition: all var(--session-transition-fast);
}

.page_pdf .header_view .download:hover,
.pkp_op_view .header_view .download:hover {
    background: #ffffff;
    border-color: #ffffff;
    transform: translateY(-1px);
}

/* PDF Canvas Frame */
#pdfCanvasContainer,
.pdfCanvasContainer {
    width: 100%;
    height: calc(100vh - 65px);
    min-height: 720px;
    border: 0;
    background: #525659;
}

/* ================================================================
   11. SIDEBAR BLOCKS & CUSTOM MENU / LOGIN FORM
   ================================================================ */

.pkp_structure_sidebar {
    align-self: start;
    min-width: 0;
    width: auto;
    float: none;
    padding: 0;
    border: 0;
    background: transparent;
}

.pkp_structure_sidebar .pkp_block {
    margin: 0 0 1.5rem;
    padding: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--session-border);
    border-radius: var(--session-radius-md);
    background: var(--session-surface);
    box-shadow: var(--session-shadow-xs);
}

.pkp_structure_sidebar .pkp_block .title {
    display: block;
    margin: -1.25rem -1.25rem 1.15rem;
    padding: 0.8rem 1.25rem;
    border: 0;
    border-bottom: 2px solid var(--session-accent);
    background: var(--session-surface-subtle);
    color: var(--session-primary);
    font-family: var(--session-font-display);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Sidebar Custom Menu Table (Informasi Jurnal) */
#customblock-menu .hoverTable,
.pkp_block .hoverTable,
.pkp_block table:not(#sidebarUser table) {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    border: 0;
    background: transparent;
}

#customblock-menu .hoverTable tr,
.pkp_block .hoverTable tr {
    background: transparent !important;
}

#customblock-menu .hoverTable td,
.pkp_block .hoverTable td {
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--session-border-light);
}

#customblock-menu .hoverTable tr:last-child td,
.pkp_block .hoverTable tr:last-child td {
    border-bottom: 0;
}

#customblock-menu .hoverTable a,
.pkp_block .hoverTable a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.5rem;
    color: var(--session-ink-secondary);
    font-family: var(--session-font-display);
    font-size: 0.88rem;
    font-weight: 650;
    text-decoration: none;
    border-radius: var(--session-radius-xs);
    transition: all var(--session-transition-fast);
}

#customblock-menu .hoverTable a::after,
.pkp_block .hoverTable a::after {
    color: var(--session-muted-light);
    font-size: 0.95rem;
    content: "›";
    transition: transform var(--session-transition-fast);
}

#customblock-menu .hoverTable a:hover,
.pkp_block .hoverTable a:hover {
    background: var(--session-accent-subtle);
    color: var(--session-accent);
    padding-left: 0.75rem;
}

#customblock-menu .hoverTable a:hover::after,
.pkp_block .hoverTable a:hover::after {
    color: var(--session-accent);
    transform: translateX(3px);
}

/* Sidebar Custom Login Form (#sidebarUser) */
#sidebarUser {
    margin: 0;
    padding: 0;
}

#sidebarUser table {
    width: 100%;
    margin: 0;
    border: 0 !important;
    border-collapse: collapse;
    background: transparent !important;
}

#sidebarUser tr {
    background: transparent !important;
}

#sidebarUser td {
    display: block;
    width: 100% !important;
    padding: 0 0 0.65rem 0 !important;
    border: 0 !important;
}

#sidebarUser label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--session-primary);
    font-family: var(--session-font-display);
    font-size: 0.82rem;
    font-weight: 750;
}

#sidebarUser input.textField {
    width: 100%;
    min-height: 38px;
    height: 38px;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--session-border);
    border-radius: var(--session-radius-sm);
    background: #ffffff;
    color: var(--session-ink);
    font-size: 0.88rem;
}

#sidebarUser input.textField:focus {
    border-color: var(--session-accent);
    box-shadow: 0 0 0 2px rgba(0, 117, 145, 0.2);
    outline: none;
}

#sidebarUser a {
    color: var(--session-accent);
    font-size: 0.82rem;
    font-weight: 600;
}

#sidebarUser input[type="checkbox"] {
    margin-right: 0.4rem;
    vertical-align: middle;
}

#sidebarUser input.button {
    display: block;
    width: 100%;
    min-height: 40px;
    margin-top: 0.35rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--session-accent);
    border-radius: var(--session-radius-sm);
    background: var(--session-accent);
    color: #ffffff;
    font-family: var(--session-font-display);
    font-size: 0.86rem;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--session-transition-fast);
}

#sidebarUser input.button:hover {
    background: var(--session-accent-hover);
    border-color: var(--session-accent-hover);
}

/* Sidebar Custom Images (ISSN, SINTA, Flag Counter) */
#customblock-sidenew img,
#customblock-sinta-information img,
#customblock-visitor img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--session-border);
    border-radius: var(--session-radius-sm);
    box-shadow: var(--session-shadow-xs);
    background: #ffffff;
    padding: 0.35rem;
    transition: transform var(--session-transition-fast);
}

#customblock-sidenew img:hover,
#customblock-sinta-information img:hover {
    transform: translateY(-2px);
    box-shadow: var(--session-shadow-sm);
}

/* Sidebar Language Block */
.pkp_block.block_language ul {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pkp_block.block_language li a {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--session-border-light);
    border-radius: var(--session-radius-sm);
    background: var(--session-surface-subtle);
    color: var(--session-ink-secondary);
    font-size: 0.86rem;
    font-weight: 650;
    text-decoration: none;
}

.pkp_block.block_language li.current a {
    border-color: var(--session-accent);
    background: var(--session-accent-subtle);
    color: var(--session-accent);
    font-weight: 800;
}

/* ================================================================
   12. STANDARD OJS FORMS (LOGIN, REGISTER, SEARCH)
   ================================================================ */

.page_login,
.page_register {
    max-width: 100%;
}

.cmp_form,
.page_login .cmp_form,
.page_register .cmp_form {
    max-width: 520px;
    margin: 1.5rem 0;
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    border: 1px solid var(--session-border);
    border-radius: var(--session-radius-md);
    background: var(--session-surface);
    box-shadow: var(--session-shadow-md);
    box-sizing: border-box;
}

.cmp_form fieldset,
.cmp_form .fields {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    box-sizing: border-box;
}

.cmp_form .fields > div {
    margin-bottom: 1.35rem;
    width: 100%;
    box-sizing: border-box;
}

.cmp_form label {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
}

.cmp_form label .label {
    display: block !important;
    margin-bottom: 0.45rem;
    color: var(--session-primary);
    font-family: var(--session-font-display);
    font-size: 0.88rem;
    font-weight: 750;
}

.cmp_form input[type="text"],
.cmp_form input[type="email"],
.cmp_form input[type="password"],
.cmp_form select,
.cmp_form textarea {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px;
    padding: 0.6rem 0.95rem;
    border: 1.5px solid var(--session-border);
    border-radius: var(--session-radius-sm);
    background: #ffffff;
    color: var(--session-ink);
    font-size: 0.94rem;
    box-sizing: border-box !important;
    transition: all var(--session-transition-fast);
}

.cmp_form input:focus,
.cmp_form select:focus,
.cmp_form textarea:focus {
    border-color: var(--session-accent);
    box-shadow: 0 0 0 3px rgba(0, 117, 145, 0.18);
    outline: none;
}

/* Password field & Forgot Password link */
.cmp_form .password label {
    position: relative;
}

.cmp_form .password a {
    display: inline-block !important;
    margin-top: 0.45rem;
    color: var(--session-accent);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}

.cmp_form .password a:hover {
    text-decoration: underline;
}

/* Remember me Checkbox */
.cmp_form .remember.checkbox label {
    display: flex !important;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
}

.cmp_form .remember.checkbox input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    accent-color: var(--session-accent);
    cursor: pointer;
}

.cmp_form .remember.checkbox .label {
    display: inline-block !important;
    margin-bottom: 0 !important;
    color: var(--session-ink-secondary);
    font-family: var(--session-font-body);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Recaptcha */
.cmp_form .recaptcha_wrapper {
    margin: 1.25rem 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow-x: auto;
}

.cmp_form .recaptcha_wrapper .g-recaptcha {
    margin: 0 !important;
    display: block;
}

/* Form Action Buttons */
.cmp_form .buttons {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--session-border-light);
}

.cmp_form .buttons button.submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.65rem 2rem;
    border: 1px solid var(--session-accent);
    border-radius: var(--session-radius-sm);
    background: var(--session-accent);
    color: #ffffff !important;
    font-family: var(--session-font-display);
    font-size: 0.94rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    cursor: pointer;
    box-shadow: var(--session-shadow-xs);
    transition: all var(--session-transition-fast);
}

.cmp_form .buttons button.submit:hover {
    background: var(--session-accent-hover);
    border-color: var(--session-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--session-shadow-sm);
}

.cmp_form .buttons .register {
    display: inline-flex;
    align-items: center;
    color: var(--session-accent);
    font-family: var(--session-font-display);
    font-size: 0.92rem;
    font-weight: 750;
    text-decoration: none;
}

.cmp_form .buttons .register:hover {
    color: var(--session-primary-dark);
    text-decoration: underline;
}

/* ================================================================
   13. INSTITUTIONAL FOOTER
   ================================================================ */

.pkp_structure_footer_wrapper {
    position: relative;
    margin-top: clamp(3rem, 6vw, 5.5rem);
    overflow: hidden;
    border-top: 4px solid var(--session-gold);
    background: linear-gradient(180deg, var(--session-primary-dark) 0%, #02121b 100%);
    color: rgba(255, 255, 255, 0.82);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
}

.pkp_structure_footer {
    width: min(calc(100% - 2.5rem), var(--session-content-width));
    max-width: var(--session-content-width);
    margin: 0 auto;
    padding: 0;
    text-align: left;
}

.pkp_footer_content {
    padding: clamp(2.25rem, 5vw, 4rem) 0 1.5rem;
    font-size: 0.92rem;
    line-height: 1.7;
}

.pkp_structure_footer_wrapper a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pkp_structure_footer_wrapper a:hover {
    color: var(--session-signal);
}

.pkp_brand_footer {
    padding: 1.25rem 0 2.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.pkp_brand_footer img {
    opacity: 0.85;
    filter: brightness(0) invert(1);
}

/* ================================================================
   14. TOP PROGRESS LOADING BAR & SMOOTH PAGE TRANSITIONS
   ================================================================ */

/* Radiant Top Progress Loading Bar (YouTube / GitHub / High-Impact Style) */
body::before {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5px;
    background: linear-gradient(90deg, var(--session-accent) 0%, #00a0c6 30%, var(--session-gold) 70%, #38bdf8 100%);
    background-size: 200% 100%;
    box-shadow: 0 0 12px rgba(0, 117, 145, 0.85), 0 0 6px rgba(212, 160, 23, 0.65);
    z-index: 9999999;
    pointer-events: none;
    content: "";
    animation: sessionTopLoader 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards,
               sessionLoaderGlow 1.1s linear infinite;
}

@keyframes sessionTopLoader {
    0% {
        width: 0%;
        opacity: 1;
    }
    45% {
        width: 68%;
        opacity: 1;
    }
    85% {
        width: 96%;
        opacity: 1;
    }
    99% {
        width: 100%;
        opacity: 1;
    }
    100% {
        width: 100%;
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes sessionLoaderGlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Subtle entrance without transforming the page coordinate system. */
.pkp_structure_page {
    animation: sessionPageFadeIn 0.36s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes sessionPageFadeIn {
    0% {
        opacity: 0.65;
    }
    100% {
        opacity: 1;
    }
}

/* ================================================================
   15. RESPONSIVE MEDIA QUERIES
   ================================================================ */

@media (min-width: 992px) {
    .pkp_structure_content.has_sidebar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
        align-items: start;
    }

    .pkp_structure_content.has_sidebar .pkp_structure_main,
    .pkp_structure_content.has_sidebar .pkp_structure_sidebar {
        width: auto;
        float: none;
    }

    .pkp_structure_sidebar {
        position: static;
        top: auto;
    }
}

@media (max-width: 991px) {
    .pkp_structure_content {
        display: block;
    }

    .pkp_structure_main,
    .pkp_structure_sidebar {
        width: 100%;
        float: none;
    }

    .pkp_structure_sidebar {
        margin-top: 2rem;
    }

    /* OJS positions the long journal title absolutely beside the hamburger.
       A compact wordmark keeps the header in normal flow on phones/tablets. */
    .pkp_structure_head,
    .pkp_head_wrapper {
        min-height: 68px;
    }

    .pkp_site_name_wrapper {
        display: flex;
        align-items: center;
        min-height: 64px;
        height: auto;
        padding: 0 1rem 0 3.5rem;
    }

    .pkp_site_name {
        position: static;
        width: 100%;
        height: auto;
        max-height: none;
        overflow: visible;
        text-align: left;
    }

    .pkp_site_name .is_text {
        display: block;
        width: 100%;
        max-width: none;
        padding: 0;
        font-size: 0;
        line-height: 1;
    }

    .pkp_site_name .is_text::before {
        display: inline-block;
        color: #f7fbfd;
        content: "SESSION";
        font-family: var(--session-font-display);
        font-size: 1.2rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        line-height: 1.2;
    }

    .pkp_site_name .is_text::after {
        display: none;
    }

    .pkp_site_nav_toggle {
        display: inline-flex;
        top: 50%;
        transform: translateY(-50%);
    }

    .pkp_site_nav_menu {
        padding: 0.5rem 0;
        background: var(--session-primary-dark);
    }

    .pkp_navigation_primary,
    .pkp_navigation_user {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .pkp_navigation_primary > li,
    .pkp_navigation_user > li {
        width: 100%;
    }

    .pkp_navigation_primary > li > a,
    .pkp_navigation_user > li > a {
        min-height: 44px;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .pkp_nav_list ul {
        position: static;
        display: block;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.05);
        border-radius: var(--session-radius-sm);
        box-shadow: none;
        padding: 0;
    }

    .pkp_nav_list ul a {
        padding: 0.65rem 1.5rem;
        border: 0;
        color: rgba(255, 255, 255, 0.86);
    }

    .pkp_nav_list ul a:hover,
    .pkp_nav_list ul a:focus {
        padding-left: 1.75rem;
        background: rgba(255, 255, 255, 0.09);
        color: #f7fbfd;
    }

}

@media (max-width: 767px) {
    body {
        font-size: 15px;
    }

    .pkp_head_wrapper,
    .pkp_structure_content,
    .pkp_structure_footer {
        width: min(calc(100% - 1.5rem), var(--session-content-width));
    }

    .pkp_structure_main {
        padding: 1.2rem;
    }

    /* Keep ordinary announcement copy aligned with the title and actions. */
    .cmp_announcements.highlight_first > .obj_announcement_summary .summary p {
        float: none;
        width: 100%;
        max-width: none;
        margin: 0 0 1.25rem;
    }

    /* Only poster/image paragraphs are centered and width-limited. */
    .cmp_announcements.highlight_first > .obj_announcement_summary .summary p:has(img) {
        width: 100%;
        max-width: 220px;
        margin: 0 auto 1.25rem;
    }

    .cmp_announcements.highlight_first .more {
        grid-template-columns: 1fr;
    }

    .obj_article_summary {
        padding: 1.15rem;
    }

    .obj_issue_toc > .heading .cover {
        float: none;
        width: min(160px, 50%);
        margin: 0 auto 1.25rem;
    }

    .homepage_about table,
    .homepage_about tbody,
    .homepage_about tr,
    .homepage_about td {
        display: block;
        width: 100%;
    }

    .homepage_about table td:first-child {
        width: 100% !important;
        border-right: 0;
    }
}

/* Accessibility & Print */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media print {
    body { background: #ffffff !important; color: #000000 !important; font-size: 12pt; }
    .pkp_structure_head, .pkp_structure_sidebar, .pkp_structure_footer_wrapper,
    .pkp_navigation_primary, .pkp_navigation_user, .pkp_navigation_search_wrapper,
    .obj_galley_link { display: none !important; }
    .pkp_structure_content, .pkp_structure_main {
        display: block !important; width: 100% !important; max-width: none !important;
        margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important;
    }
}


/* ================================================================
   16. v2 REFINEMENTS
   Penyempurnaan tampilan: masthead, navigasi, hero beranda, footer.
   Ditulis sebagai override di akhir berkas agar mudah ditinjau.
   ================================================================ */

/* ----------------------------------------------------------------
   16.1  MASTHEAD — nama pendek jurnal sebagai penanda
   Nama resmi jurnal panjang (tiga bidang keilmuan). Menambahkan label
   "SESSION" di atasnya memberi penanda singkat yang mudah dikenali.
   ---------------------------------------------------------------- */
.pkp_site_name .is_text::before {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--session-signal);
    font-family: var(--session-font-display);
    font-size: clamp(0.72rem, 1.05vw, 0.88rem);
    font-weight: 800;
    letter-spacing: 0.3em;
    line-height: 1;
    content: "SESSION";
}

/* Judul jurnal: rapatkan sedikit agar dua baris terlihat mantap */
.pkp_site_name .is_text {
    letter-spacing: -0.018em;
    text-wrap: pretty;
}

/* Garis emas di bawah judul diselaraskan dengan label */
.pkp_site_name .is_text::after {
    width: 76px;
    height: 4px;
    margin-top: 0.85rem;
    background: linear-gradient(90deg, var(--session-gold), var(--session-gold-hover));
}

/* ----------------------------------------------------------------
   16.2  NAVIGASI — tombol ajakan mengirim naskah
   Tautan menuju halaman Submission diberi tampilan tombol agar
   penulis langsung melihat langkah pertama. Pemilih memakai atribut
   href supaya tidak bergantung pada kelas bawaan OJS.
   ---------------------------------------------------------------- */
.pkp_navigation_primary > li > a[href*="/about/submissions"],
.pkp_navigation_primary > li > a[href*="/submission"] {
    margin-left: 0.4rem;
    padding: 0.5rem 1.05rem;
    border: 1px solid var(--session-gold);
    border-radius: var(--session-radius-pill);
    background: linear-gradient(135deg, var(--session-gold), var(--session-gold-hover));
    color: #2a1c02;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 8px rgba(214, 140, 23, 0.3);
}

.pkp_navigation_primary > li > a[href*="/about/submissions"]:hover,
.pkp_navigation_primary > li > a[href*="/submission"]:hover {
    border-color: var(--session-gold-hover);
    background: var(--session-gold-hover);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(214, 140, 23, 0.42);
}

/* Tautan aktif diberi penanda bawah yang tegas */
.pkp_navigation_primary > li > a[aria-current="page"],
.pkp_navigation_primary > li > a.is-current {
    color: #ffffff;
    box-shadow: inset 0 -3px 0 var(--session-signal);
}

/* ----------------------------------------------------------------
   16.3  HERO BERANDA — gambar banner sudah membawa desainnya sendiri
   (latar, sudut, garis emas). Bingkai tambahan dari templat dihapus
   agar tidak terjadi bingkai ganda.
   ---------------------------------------------------------------- */
.pkp_page_index.pkp_op_index .homepage_image {
    border: 0;
    border-radius: var(--session-radius-lg);
    background: transparent;
    box-shadow: var(--session-shadow-md);
}

.pkp_page_index.pkp_op_index .homepage_image img {
    border-radius: var(--session-radius-lg);
}

/* ----------------------------------------------------------------
   16.4  KETERBACAAN — perbaikan kecil yang berdampak besar
   ---------------------------------------------------------------- */

/* Angka pada tabel & statistik sejajar kolom */
.pkp_block,
.pkp_structure_content table {
    font-variant-numeric: tabular-nums;
}

/* Paragraf penjelas tidak melebar berlebihan di layar besar */
.homepage_about .description p {
    max-width: 78ch;
}

/* Fokus keyboard tetap terlihat jelas (syarat aksesibilitas) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--session-focus-ring);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------
   16.5  FOOTER — pemisah lebih jelas dan tautan lebih mudah dibaca
   ---------------------------------------------------------------- */
.pkp_structure_footer_wrapper {
    border-top: 3px solid var(--session-gold);
}

.pkp_structure_footer a {
    text-underline-offset: 3px;
}

.pkp_structure_footer a:hover {
    color: var(--session-signal);
}

/* ================================================================
   17. PENYERAGAMAN TOMBOL & IKON
   Tema bawaan OJS menempelkan ikon FontAwesome lewat ::after pada
   beberapa tautan, termasuk "Read More". Ikon itu punya kotak tetap
   30x30 px dan diwarisi ketebalan huruf tombol, sehingga tampil
   kegemukan dan tidak seimbang dengan label di sebelahnya.
   Bagian ini menggambar ulang tanda panah dengan CSS murni supaya
   ketebalan garis dan ukurannya bisa diatur persis.
   ================================================================ */

/* ----------------------------------------------------------------
   17.1  Tanda panah pada tautan "Read More"
   Berlaku untuk tombol di beranda, daftar pengumuman, dan tautan
   "View All Issues" — semuanya memakai kelas .read_more.
   ---------------------------------------------------------------- */
.read_more {
    position: relative;
}

/* Teks khusus pembaca layar harus keluar dari aliran flex supaya
   tidak ikut menyumbang jarak antar-item. */
.read_more .pkp_screen_reader {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* Panah digambar dari dua sisi kotak yang diputar 45 derajat.
   Penting: tema menempatkan ikon ini dengan position:absolute; top:2px;
   right:0. Kotak lama 30x30 px membuatnya tampak hampir setinggi tombol
   sehingga terlihat di tengah. Begitu kotaknya diperkecil, ikon itu
   menempel di sudut kanan atas. Karena itu posisinya dikembalikan ke
   aliran normal agar sejajar tengah lewat align-items:center. */
.read_more::after {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: 0.46em !important;
    height: 0.46em !important;
    margin: 0 0 0 0.6rem !important;
    border: 0 !important;
    border-top: 1.6px solid currentColor !important;
    border-right: 1.6px solid currentColor !important;
    border-radius: 1px;
    background: none !important;
    font-size: inherit !important;
    line-height: 1 !important;
    content: "" !important;
    transform: rotate(45deg) !important;
    opacity: 0.85;
}

/* Panah ikut bergeser halus saat tombol disorot */
.read_more:hover::after {
    transform: rotate(45deg) translate(1px, -1px) !important;
    opacity: 1;
}

/* ================================================================
   18. PERBAIKAN HASIL SISIR SELURUH HALAMAN
   Temuan dari pemeriksaan otomatis 15 halaman publik pada lebar
   1440 px (desktop) dan 390 px (ponsel). Desktop sudah bersih.
   Perbaikan di bawah menyasar masalah nyata di layar sempit dan
   merapikan bilah samping.
   ================================================================ */

/* ----------------------------------------------------------------
   18.1  DOI panjang pada halaman artikel
   Nilai DOI adalah satu kata panjang tanpa spasi. Wadahnya bersifat
   inline-flex sehingga tidak menyusut mengikuti lebar kolom, lalu
   mendorong lebar halaman (geser horizontal 32 px di ponsel).
   Solusi: izinkan wadah menyusut dan izinkan DOI dipotong di tengah
   kata bila memang tidak muat.
   ---------------------------------------------------------------- */
.obj_article_details .item {
    min-width: 0;
}

.obj_article_details .item.doi {
    max-width: 100%;
    flex-wrap: wrap;
}

.obj_article_details .item .value,
.obj_article_details .item .value a {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ----------------------------------------------------------------
   18.2  Tombol "Submit a Manuscript" di bilah samping
   Tautan pada blok "Journal at a Glance" diberi tampilan tombol agar
   sejajar dengan tombol "Kirim Naskah" di navigasi utama.
   Pemilih memakai AKHIR alamat (/user/register) supaya tidak mengenai
   tautan "Register" pada blok Login yang berakhiran "?source=".
   ---------------------------------------------------------------- */
.pkp_structure_sidebar .pkp_block a[href$="/user/register"] {
    display: block;
    margin-top: 0.35rem;
    padding: 0.7rem 1.1rem;
    border: 1px solid var(--session-gold);
    border-radius: var(--session-radius-pill);
    background: linear-gradient(135deg, var(--session-gold), var(--session-gold-hover));
    color: #2a1c02 !important;
    font-family: var(--session-font-display);
    font-size: 0.86rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(214, 140, 23, 0.3);
    transition: all var(--session-transition-fast);
}

.pkp_structure_sidebar .pkp_block a[href$="/user/register"]:hover {
    border-color: var(--session-gold-hover);
    background: var(--session-gold-hover);
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(214, 140, 23, 0.42);
}

/* ----------------------------------------------------------------
   18.3  Sasaran sentuh pada layar sentuh
   Tautan daftar di bilah samping dan footer ditinggikan agar mudah
   ditekan dengan jari (pedoman aksesibilitas menyarankan 44 px).
   ---------------------------------------------------------------- */
@media (max-width: 640px) {
    .pkp_structure_sidebar .pkp_block a,
    .pkp_structure_footer a,
    .pkp_navigation_user a {
        display: inline-block;
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
        line-height: 1.5;
    }

    /* tautan di dalam paragraf blok ditumpuk agar jaraknya konsisten */
    .pkp_structure_sidebar .pkp_block p a {
        display: block;
    }
}

/* ================================================================
   19. HALAMAN EDITORIAL MASTHEAD
   Halaman ini DIHASILKAN OTOMATIS oleh OJS dari data pengguna
   (grup kepengurusan pada setelan mastheadUserGroupIds). Tidak ada
   kolom teks yang bisa diisi dari dasbor, sehingga penataan dan
   informasi pelengkap di bawah ini dilakukan lewat CSS.

   Markup aslinya:
     <div class="page page_masthead">
       <nav class="cmp_breadcrumbs">…</nav>
       <h1>Editorial Masthead</h1>
       <h2>Journal editor</h2>
       <ul class="user_listing"> <li><span class="name">…</span>
           <span class="affiliation">…</span></li> … </ul>
       <h2>Section editor</h2>
       <ul class="user_listing">…</ul>
       <p>View <a>Editorial History</a></p>
       <hr>
       <h2>Peer Reviewers in Previous Year</h2>
       <p>…</p>
       <ul class="user_listing">…</ul>
     </div>

   CATATAN PEMELIHARAAN: pengantar halaman, keterangan tiap peran, dan
   kartu kantor redaksi ditulis sebagai pseudo-element karena tidak
   tersedia kolomnya di dasbor OJS. Bila suatu saat templat tema bisa
   disunting, pindahkan teks-teks ini ke templat agar lebih mudah dirawat.
   ================================================================ */

/* ----------------------------------------------------------------
   19.1  Judul halaman + pengantar
   ---------------------------------------------------------------- */
.page_masthead h1 {
    margin-bottom: 0.4rem;
}

.page_masthead h1::after {
    display: block;
    max-width: 76ch;
    margin-top: 1.1rem;
    color: var(--session-muted);
    font-family: var(--session-font-body);
    font-size: 0.97rem;
    font-weight: 400;
    line-height: 1.72;
    letter-spacing: normal;
    content: "SESSION is managed by an editorial team based at the Department of Business and Informatics, Politeknik Negeri Banyuwangi, supported by section editors and an independent panel of peer reviewers. Every research manuscript is evaluated through double-blind peer review before a decision is taken.";
}

/* ----------------------------------------------------------------
   19.2  Judul tiap peran
   ---------------------------------------------------------------- */
.page_masthead > h2 {
    position: relative;
    margin: 2.75rem 0 1.1rem;
    padding: 0 0 0.7rem 1.15rem;
    border-bottom: 1px solid var(--session-border);
    color: var(--session-primary);
    font-family: var(--session-font-display);
    font-size: 1.16rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

/* batang aksen di kiri judul */
.page_masthead > h2::before {
    position: absolute;
    top: 0.16em;
    left: 0;
    width: 5px;
    height: 1.1em;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--session-accent), var(--session-signal));
    content: "";
}

/* garis pemisah bawaan tidak lagi diperlukan */
.page_masthead > hr {
    display: none;
}

/* ----------------------------------------------------------------
   19.3  Daftar orang menjadi kisi kartu
   Sebelumnya daftar tegak satu kolom sehingga halaman sangat panjang
   dan sulit dipindai.
   ---------------------------------------------------------------- */
.page_masthead .user_listing {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: 0.7rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

.page_masthead .user_listing li {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    margin: 0;
    padding: 0.9rem 1.05rem;
    border: 1px solid var(--session-border);
    border-radius: var(--session-radius-md);
    background: var(--session-surface);
    box-shadow: var(--session-shadow-xs);
    transition: border-color var(--session-transition-fast), box-shadow var(--session-transition-fast);
}

.page_masthead .user_listing li:hover {
    border-color: var(--session-accent-border);
    box-shadow: var(--session-shadow-sm);
}

.page_masthead .user_listing .name {
    color: var(--session-primary);
    font-family: var(--session-font-display);
    font-size: 0.97rem;
    font-weight: 700;
    line-height: 1.35;
}

.page_masthead .user_listing .affiliation {
    color: var(--session-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

/* ----------------------------------------------------------------
   19.4  Keterangan singkat tiap peran
   Ditempelkan sebagai anak pertama daftar lalu dibentangkan penuh
   satu baris kisi, sehingga TIDAK mengotori teks judul (penting untuk
   pembaca layar dan SEO).
   ---------------------------------------------------------------- */
.page_masthead > ul.user_listing::before {
    grid-column: 1 / -1;
    margin-bottom: 0.15rem;
    color: var(--session-muted);
    font-family: var(--session-font-body);
    font-size: 0.92rem;
    line-height: 1.65;
}

.page_masthead > ul.user_listing:nth-of-type(1)::before {
    content: "The journal editors set the editorial direction of SESSION, oversee the review process, and take the final decision on every manuscript.";
}

.page_masthead > ul.user_listing:nth-of-type(2)::before {
    content: "Section editors manage manuscripts within a subject area, recommend qualified reviewers, and prepare a recommendation for the journal editors.";
}

/* ----------------------------------------------------------------
   19.5  Daftar penelaah — lebih rapat karena jumlahnya banyak
   ---------------------------------------------------------------- */
.page_masthead > ul.user_listing:nth-of-type(3) {
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: 0.5rem;
}

.page_masthead > ul.user_listing:nth-of-type(3) li {
    padding: 0.7rem 0.9rem;
}

.page_masthead > ul.user_listing:nth-of-type(3) .name {
    font-size: 0.9rem;
}

.page_masthead > ul.user_listing:nth-of-type(3) .affiliation {
    font-size: 0.79rem;
}

/* ----------------------------------------------------------------
   19.6  Tautan "Editorial History"
   ---------------------------------------------------------------- */
.page_masthead > p {
    margin: 1.5rem 0 0;
    color: var(--session-muted);
    font-size: 0.92rem;
}

.page_masthead > p a {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.05rem;
    border: 1px solid var(--session-accent-border);
    border-radius: var(--session-radius-pill);
    background: var(--session-accent-subtle);
    color: var(--session-accent);
    font-family: var(--session-font-display);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: all var(--session-transition-fast);
}

.page_masthead > p a:hover {
    border-color: var(--session-accent);
    background: var(--session-accent);
    color: #ffffff;
}

/* ----------------------------------------------------------------
   19.7  Kartu kantor redaksi (informasi pelengkap di akhir halaman)
   ---------------------------------------------------------------- */
.page_masthead::after {
    display: block;
    margin-top: 2.75rem;
    padding: 1.4rem 1.6rem;
    border: 1px solid var(--session-accent-border);
    border-left: 4px solid var(--session-accent);
    border-radius: var(--session-radius-md);
    background: var(--session-accent-subtle);
    color: var(--session-ink-secondary);
    font-family: var(--session-font-body);
    font-size: 0.92rem;
    line-height: 1.7;
    white-space: pre-line;
    content: "Editorial office — Department of Business and Informatics, Politeknik Negeri Banyuwangi. Jl. Raya Jember Km. 13, Labanasem, Kabat, Banyuwangi, East Java 68461, Indonesia.\A E-mail: session@poliwangi.ac.id  ·  Phone: (0333) 636780\A\A Reviewers and authors are welcome to contact the editorial office with any question about the editorial process. SESSION follows the Committee on Publication Ethics (COPE) principles and applies a double-blind peer review model.";
}

@media (max-width: 640px) {
    .page_masthead .user_listing,
    .page_masthead > ul.user_listing:nth-of-type(3) {
        grid-template-columns: 1fr;
    }
}