/**
 * Premium Teal OJS Journal Stylesheet
 * Compatible target: OJS 3.3, 3.4, and 3.5 front-end
 * Designed for Default Theme and common Bootstrap 3 theme structures.
 *
 * Installation:
 * Settings > Website > Appearance > Advanced > Journal Style Sheet
 *
 * Notes:
 * - This file styles native OJS components immediately.
 * - Optional .journal-* components are provided for custom homepage blocks/templates.
 * - No remote fonts, scripts, or third-party assets are required.
 */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
    --journal-primary-950: #163e3b;
    --journal-primary-900: #1c4c48;
    --journal-primary-800: #255d58;
    --journal-primary-700: #2f7069;
    --journal-primary-600: #3d827a;
    --journal-primary-500: #4f948b;
    --journal-primary-100: #dcefeb;
    --journal-primary-50: #eff8f6;

    --journal-accent-700: #a97d28;
    --journal-accent-600: #c0953f;
    --journal-accent-500: #d4ae63;
    --journal-accent-300: #ead39b;
    --journal-accent-100: #f8efd8;

    --journal-ink-950: #12201f;
    --journal-ink-900: #1b2b2a;
    --journal-ink-800: #2a3b3a;
    --journal-ink-700: #425351;
    --journal-ink-600: #5d6d6b;
    --journal-ink-500: #758482;
    --journal-ink-300: #b7c2c0;
    --journal-ink-200: #d4dcda;
    --journal-ink-100: #e8edec;
    --journal-ink-50: #f5f8f7;

    --journal-white: #ffffff;
    --journal-success: #177245;
    --journal-warning: #9a6500;
    --journal-danger: #b42318;
    --journal-info: #176b87;

    --journal-body-bg: #f4f7f6;
    --journal-surface: #ffffff;
    --journal-surface-soft: #f8fbfa;
    --journal-border: #dfe7e5;

    --journal-font-sans:
        Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji",
        sans-serif;
    --journal-font-serif:
        Georgia, "Times New Roman", Times, serif;

    --journal-container: 1200px;
    --journal-content: 820px;
    --journal-sidebar: 320px;

    --journal-radius-xs: 6px;
    --journal-radius-sm: 10px;
    --journal-radius-md: 16px;
    --journal-radius-lg: 24px;
    --journal-radius-pill: 999px;

    --journal-shadow-xs: 0 1px 2px rgba(18, 32, 31, 0.05);
    --journal-shadow-sm:
        0 8px 24px rgba(18, 32, 31, 0.07),
        0 2px 8px rgba(18, 32, 31, 0.04);
    --journal-shadow-md:
        0 20px 55px rgba(18, 32, 31, 0.12),
        0 5px 16px rgba(18, 32, 31, 0.06);
    --journal-shadow-focus:
        0 0 0 4px rgba(79, 148, 139, 0.22);

    --journal-transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

/* ==========================================================================
   2. RESET AND BASE TYPOGRAPHY
   ========================================================================== */

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    background: var(--journal-body-bg);
}

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

body {
    margin: 0;
    color: var(--journal-ink-800);
    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(79, 148, 139, 0.08),
            transparent 28rem
        ),
        var(--journal-body-bg);
    font-family: var(--journal-font-sans);
    font-size: 16px;
    line-height: 1.7;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
select,
textarea {
    font-family: var(--journal-font-sans);
}

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

img {
    height: auto;
}

p {
    margin: 0 0 1.15rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    color: var(--journal-ink-950);
    font-family: var(--journal-font-sans);
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

h1 {
    font-size: clamp(2rem, 4vw, 3.35rem);
}

h2 {
    font-size: clamp(1.55rem, 2.5vw, 2.2rem);
}

h3 {
    font-size: clamp(1.25rem, 1.8vw, 1.6rem);
}

h4 {
    font-size: 1.15rem;
}

a {
    color: var(--journal-primary-700);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.17em;
    transition: var(--journal-transition);
}

a:hover {
    color: var(--journal-primary-950);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--journal-accent-500);
    outline-offset: 3px;
}

::selection {
    color: var(--journal-white);
    background: var(--journal-primary-700);
}

hr {
    height: 1px;
    margin: 2rem 0;
    border: 0;
    background: var(--journal-border);
}

blockquote {
    position: relative;
    margin: 1.75rem 0;
    padding: 1.25rem 1.4rem 1.25rem 1.6rem;
    border-left: 4px solid var(--journal-accent-500);
    border-radius: 0 var(--journal-radius-sm) var(--journal-radius-sm) 0;
    color: var(--journal-ink-700);
    background: var(--journal-accent-100);
}

code,
kbd,
pre,
samp {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

pre {
    overflow-x: auto;
    padding: 1rem;
    border: 1px solid var(--journal-border);
    border-radius: var(--journal-radius-sm);
    background: var(--journal-ink-950);
    color: #eff8f6;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

th,
td {
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--journal-border);
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--journal-white);
    background: var(--journal-primary-800);
    font-weight: 700;
}

/* ==========================================================================
   3. ACCESSIBILITY HELPERS
   ========================================================================== */

.pkp_screen_reader,
.screen-reader-text,
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.pkp_screen_reader:focus,
.screen-reader-text:focus,
.sr-only:focus {
    position: fixed !important;
    z-index: 100000 !important;
    top: 1rem !important;
    left: 1rem !important;
    width: auto !important;
    height: auto !important;
    padding: 0.75rem 1rem !important;
    margin: 0 !important;
    clip: auto !important;
    color: var(--journal-white) !important;
    background: var(--journal-primary-900) !important;
    border-radius: var(--journal-radius-sm) !important;
    box-shadow: var(--journal-shadow-md) !important;
}

/* ==========================================================================
   4. OJS PAGE SHELL
   ========================================================================== */

.pkp_structure_page {
    min-height: 100vh;
    margin: 0;
    background: transparent;
    box-shadow: none;
}

.pkp_site_name_wrapper,
.pkp_navigation_primary_wrapper,
.pkp_navigation_user,
.pkp_search_mobile,
.pkp_structure_content,
.pkp_structure_footer,
.container,
.container-fluid {
    max-width: var(--journal-container);
}

.pkp_structure_content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    width: min(calc(100% - 2rem), var(--journal-container));
    max-width: var(--journal-container);
    margin: 0 auto;
    padding: 2.5rem 0 4rem;
}

.pkp_structure_main {
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: clamp(1.2rem, 3vw, 2.4rem);
    border: 1px solid var(--journal-border);
    border-radius: var(--journal-radius-md);
    background: var(--journal-surface);
    box-shadow: var(--journal-shadow-sm);
}

.pkp_structure_main::before,
.pkp_structure_main::after,
.pkp_structure_main:first-child:last-child::before,
.pkp_structure_main:first-child:last-child::after {
    display: none;
    content: none;
}

.pkp_structure_main:first-child:last-child {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.pkp_structure_sidebar {
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
}

.page,
.pkp_page_index,
.page_about,
.page_login,
.page_register,
.page_search,
.page_issue,
.page_article,
.page_announcement,
.page_announcements,
.page_submissions {
    min-width: 0;
}

.page > .page_title,
.pkp_page_index > .page_title,
.pkp_structure_main > .page_title {
    position: relative;
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
}

.page > .page_title::after,
.pkp_page_index > .page_title::after,
.pkp_structure_main > .page_title::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 72px;
    height: 4px;
    border-radius: var(--journal-radius-pill);
    background: linear-gradient(
        90deg,
        var(--journal-accent-500),
        var(--journal-primary-600)
    );
    content: "";
}

/* ==========================================================================
   5. HEADER, BRANDING, AND NAVIGATION
   ========================================================================== */

.pkp_structure_head {
    position: relative;
    z-index: 100;
    border: 0;
    background:
        linear-gradient(
            125deg,
            rgba(22, 62, 59, 0.97),
            rgba(47, 112, 105, 0.96)
        );
    box-shadow: 0 10px 30px rgba(18, 32, 31, 0.14);
}

.pkp_structure_head::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.45;
    background-image:
        radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.16) 0 2px, transparent 3px),
        radial-gradient(circle at 88% 34%, rgba(234, 211, 155, 0.16) 0 2px, transparent 3px);
    background-size: 34px 34px, 46px 46px;
    content: "";
}

.pkp_head_wrapper {
    position: relative;
    width: min(calc(100% - 2rem), var(--journal-container));
    max-width: var(--journal-container);
    margin: 0 auto;
    padding: 1.15rem 0 0;
}

.pkp_site_name_wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 88px;
    margin: 0;
    padding: 0 0 1rem;
}

.pkp_site_name {
    position: static;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 72px;
    margin: 0;
    padding: 0;
    overflow: visible;
    white-space: normal;
    text-align: left;
}

.pkp_site_name > a,
.pkp_site_name .is_text {
    display: inline-flex;
    align-items: center;
    min-height: 62px;
    padding: 0;
    color: var(--journal-white);
    font-size: clamp(1.35rem, 3vw, 2.2rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.035em;
    text-decoration: none;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
}

.pkp_site_name .is_img {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.pkp_site_name .is_img img {
    display: block;
    width: auto;
    max-width: min(100%, 720px);
    max-height: 96px;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 5px 14px rgba(0, 0, 0, 0.12));
}

.pkp_site_nav_toggle {
    top: 1rem;
    left: auto;
    right: 0;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--journal-radius-sm);
    color: var(--journal-white);
    background: rgba(255, 255, 255, 0.12);
}

.pkp_site_nav_toggle:hover,
.pkp_site_nav_toggle:focus {
    background: rgba(255, 255, 255, 0.2);
}

.pkp_site_nav_menu {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 0;
    color: var(--journal-white);
    background: transparent;
}

.pkp_navigation_primary_row {
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(13, 45, 42, 0.34);
    backdrop-filter: blur(12px);
}

.pkp_navigation_primary_wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: none;
    min-height: 58px;
    margin: 0;
    padding: 0;
}

.pkp_nav_list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pkp_navigation_primary {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
    margin: 0;
    text-align: left;
}

.pkp_navigation_primary > li {
    position: relative;
    display: block;
}

.pkp_navigation_primary > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 58px;
    margin: 0;
    padding: 0.8rem 0.95rem;
    border: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.925rem;
    font-weight: 650;
    line-height: 1.25;
    text-decoration: none;
    transition: var(--journal-transition);
}

.pkp_navigation_primary > li > a::after {
    position: absolute;
    right: 0.95rem;
    bottom: 7px;
    left: 0.95rem;
    height: 3px;
    border-radius: var(--journal-radius-pill);
    background: var(--journal-accent-500);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 180ms ease;
    content: "";
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li > a[aria-current="page"] {
    color: var(--journal-white);
    background: rgba(255, 255, 255, 0.08);
}

.pkp_navigation_primary > li > a:hover::after,
.pkp_navigation_primary > li > a:focus::after,
.pkp_navigation_primary > li > a[aria-current="page"]::after {
    transform: scaleX(1);
}

.pkp_nav_list ul,
.pkp_navigation_primary .dropdown-menu,
.pkp_navigation_user .dropdown-menu {
    min-width: 240px;
    padding: 0.55rem;
    border: 1px solid var(--journal-border);
    border-radius: var(--journal-radius-sm);
    background: var(--journal-white);
    box-shadow: var(--journal-shadow-md);
}

.pkp_nav_list ul li,
.pkp_navigation_primary .dropdown-menu li,
.pkp_navigation_user .dropdown-menu li {
    display: block;
}

.pkp_nav_list ul a,
.pkp_navigation_primary .dropdown-menu a,
.pkp_navigation_user .dropdown-menu a {
    display: block;
    padding: 0.72rem 0.8rem;
    border: 0;
    border-radius: 7px;
    color: var(--journal-ink-800);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.pkp_nav_list ul a:hover,
.pkp_nav_list ul a:focus,
.pkp_navigation_primary .dropdown-menu a:hover,
.pkp_navigation_primary .dropdown-menu a:focus,
.pkp_navigation_user .dropdown-menu a:hover,
.pkp_navigation_user .dropdown-menu a:focus {
    color: var(--journal-primary-900);
    background: var(--journal-primary-50);
}

.pkp_navigation_user_wrapper {
    position: static;
    width: 100%;
    padding: 0;
    border: 0;
    background: rgba(9, 35, 33, 0.5);
    transform: none;
}

.pkp_navigation_user {
    display: flex;
    justify-content: flex-end;
    gap: 0.15rem;
    width: min(calc(100% - 2rem), var(--journal-container));
    max-width: var(--journal-container);
    min-height: 40px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    text-align: right;
}

.pkp_navigation_user > li {
    display: block;
}

.pkp_navigation_user > li > a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0.5rem 0.7rem;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}

.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
    color: var(--journal-white);
    background: rgba(255, 255, 255, 0.08);
}

.pkp_navigation_user .task_count {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    margin-left: 0.35rem;
    padding: 0 0.35rem;
    border-radius: var(--journal-radius-pill);
    color: var(--journal-primary-950);
    background: var(--journal-accent-300);
    font-size: 0.72rem;
    font-weight: 800;
}

.pkp_navigation_search_wrapper {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
}

.pkp_navigation_search_wrapper a {
    display: inline-flex;
    align-items: center;
    min-height: 58px;
    padding: 0.75rem 0.95rem;
    border: 0;
    color: var(--journal-white);
    text-decoration: none;
}

.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_search_wrapper a:focus {
    color: var(--journal-white);
    background: rgba(255, 255, 255, 0.1);
}

/* Bootstrap 3 navigation compatibility */

.navbar,
.navbar-default,
.navbar-inverse {
    min-height: 58px;
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.navbar-default .navbar-nav > li > a,
.navbar-inverse .navbar-nav > li > a {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 650;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: var(--journal-white);
    background: rgba(255, 255, 255, 0.08);
}

.navbar-toggle {
    border-color: rgba(255, 255, 255, 0.32);
    border-radius: var(--journal-radius-sm);
}

.navbar-toggle .icon-bar {
    background: var(--journal-white);
}

/* ==========================================================================
   6. BREADCRUMBS
   ========================================================================== */

.cmp_breadcrumbs,
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 1.5rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--journal-border);
    border-radius: var(--journal-radius-sm);
    color: var(--journal-ink-600);
    background: var(--journal-surface-soft);
    font-size: 0.82rem;
    list-style: none;
}

.cmp_breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cmp_breadcrumbs a,
.breadcrumb a {
    color: var(--journal-primary-700);
    font-weight: 650;
    text-decoration: none;
}

.cmp_breadcrumbs a:hover,
.breadcrumb a:hover {
    color: var(--journal-primary-950);
}

/* ==========================================================================
   7. BUTTONS, GALLERIES, AND BADGES
   ========================================================================== */

.cmp_button,
.cmp_form .buttons button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.btn,
.button,
a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.68rem 1rem;
    border: 1px solid var(--journal-primary-700);
    border-radius: var(--journal-radius-sm);
    color: var(--journal-white);
    background: var(--journal-primary-700);
    box-shadow: var(--journal-shadow-xs);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: var(--journal-transition);
}

.cmp_button:hover,
.cmp_form .buttons button:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.btn:hover,
.button:hover,
a.button:hover {
    border-color: var(--journal-primary-900);
    color: var(--journal-white);
    background: var(--journal-primary-900);
    box-shadow: var(--journal-shadow-sm);
    transform: translateY(-1px);
}

.cmp_button:active,
button:active,
input[type="submit"]:active,
.btn:active {
    transform: translateY(0);
}

.cmp_button_wire,
.btn-default,
.btn-secondary {
    border-color: var(--journal-border);
    color: var(--journal-primary-800);
    background: var(--journal-white);
}

.cmp_button_wire:hover,
.btn-default:hover,
.btn-secondary:hover {
    border-color: var(--journal-primary-600);
    color: var(--journal-primary-900);
    background: var(--journal-primary-50);
}

.btn-primary {
    border-color: var(--journal-primary-700);
    background: var(--journal-primary-700);
}

.obj_galley_link,
.galley-link,
.obj_article_summary .galleys_links a,
.obj_article_details .galleys_links a,
.obj_article_details .galley-link,
a.file {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin: 0.2rem 0.3rem 0.2rem 0;
    padding: 0.48rem 0.78rem;
    border: 1px solid var(--journal-primary-600);
    border-radius: var(--journal-radius-pill);
    color: var(--journal-primary-900);
    background: var(--journal-primary-50);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.025em;
    text-decoration: none;
    text-transform: uppercase;
}

.obj_galley_link:hover,
.galley-link:hover,
.obj_article_summary .galleys_links a:hover,
.obj_article_details .galleys_links a:hover,
.obj_article_details .galley-link:hover,
a.file:hover {
    border-color: var(--journal-primary-800);
    color: var(--journal-white);
    background: var(--journal-primary-800);
    transform: translateY(-1px);
}

.badge,
.label {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.58rem;
    border-radius: var(--journal-radius-pill);
    color: var(--journal-primary-900);
    background: var(--journal-primary-100);
    font-size: 0.72rem;
    font-weight: 800;
}

/* ==========================================================================
   8. FORM CONTROLS
   ========================================================================== */

label,
.cmp_form label {
    display: inline-block;
    margin-bottom: 0.4rem;
    color: var(--journal-ink-900);
    font-size: 0.9rem;
    font-weight: 700;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea,
.form-control {
    width: 100%;
    min-height: 44px;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--journal-ink-200);
    border-radius: var(--journal-radius-sm);
    color: var(--journal-ink-900);
    background: var(--journal-white);
    box-shadow: inset 0 1px 2px rgba(18, 32, 31, 0.03);
    font-size: 0.95rem;
    line-height: 1.45;
    transition: var(--journal-transition);
}

textarea {
    min-height: 140px;
    resize: vertical;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: var(--journal-primary-500);
    outline: 0;
    box-shadow: var(--journal-shadow-focus);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--journal-primary-700);
}

fieldset {
    margin: 0 0 1.5rem;
    padding: 1.2rem;
    border: 1px solid var(--journal-border);
    border-radius: var(--journal-radius-sm);
    background: var(--journal-surface-soft);
}

legend {
    padding: 0 0.4rem;
    color: var(--journal-primary-900);
    font-weight: 800;
}

.form-group,
.cmp_form .fields > div {
    margin-bottom: 1.1rem;
}

.help-block,
.description,
.form-text {
    color: var(--journal-ink-600);
    font-size: 0.82rem;
}

/* ==========================================================================
   9. NOTIFICATIONS AND STATUS MESSAGES
   ========================================================================== */

.cmp_notification,
.alert,
.pkp_notification {
    margin: 1rem 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--journal-border);
    border-left-width: 4px;
    border-radius: var(--journal-radius-sm);
    color: var(--journal-ink-800);
    background: var(--journal-surface-soft);
}

.cmp_notification.success,
.alert-success {
    border-left-color: var(--journal-success);
    color: #125433;
    background: #edf8f2;
}

.cmp_notification.warning,
.alert-warning {
    border-left-color: var(--journal-warning);
    color: #754c00;
    background: #fff8e8;
}

.cmp_notification.error,
.alert-danger {
    border-left-color: var(--journal-danger);
    color: #8f1d14;
    background: #fff1ef;
}

.alert-info {
    border-left-color: var(--journal-info);
    color: #0e586f;
    background: #eff9fc;
}

/* ==========================================================================
   10. HOMEPAGE NATIVE OJS COMPONENTS
   ========================================================================== */

.pkp_page_index .homepage_image {
    overflow: hidden;
    margin: calc(clamp(1.2rem, 3vw, 2.4rem) * -1)
        calc(clamp(1.2rem, 3vw, 2.4rem) * -1)
        2rem;
    border-radius: var(--journal-radius-md) var(--journal-radius-md) 0 0;
}

.pkp_page_index .homepage_image img {
    display: block;
    width: 100%;
    max-height: 460px;
    object-fit: cover;
}

.pkp_page_index .homepage_about {
    margin: 0 0 2.25rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--journal-primary-100);
    border-radius: var(--journal-radius-md);
    background:
        linear-gradient(
            145deg,
            var(--journal-primary-50),
            var(--journal-white)
        );
}

.pkp_page_index .homepage_about h2,
.pkp_page_index .homepage_about h3 {
    color: var(--journal-primary-950);
}

.pkp_page_index .additional_content {
    margin-top: 2.5rem;
}

.current_issue {
    position: relative;
    margin: 2rem 0 0;
    padding: clamp(1.25rem, 3vw, 2rem);
    overflow: hidden;
    border: 1px solid var(--journal-border);
    border-radius: var(--journal-radius-md);
    background: var(--journal-surface-soft);
}

.current_issue::before {
    position: absolute;
    top: -120px;
    right: -120px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(212, 174, 99, 0.2),
        rgba(212, 174, 99, 0)
    );
    content: "";
}

.current_issue > h2,
.current_issue .current_issue_title {
    position: relative;
    color: var(--journal-primary-950);
}

.current_issue .read_more {
    display: inline-flex;
    margin-top: 0.75rem;
    font-weight: 800;
    text-decoration: none;
}

/* ==========================================================================
   11. ISSUE TABLE OF CONTENTS
   ========================================================================== */

.obj_issue_toc {
    margin: 0;
    padding: 0;
}

.obj_issue_toc .heading {
    display: grid;
    grid-template-columns: minmax(150px, 230px) minmax(0, 1fr);
    gap: clamp(1.25rem, 4vw, 2.5rem);
    align-items: start;
    margin-bottom: 2.25rem;
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid var(--journal-primary-100);
    border-radius: var(--journal-radius-md);
    background:
        linear-gradient(
            145deg,
            var(--journal-primary-50),
            var(--journal-white) 62%
        );
}

.obj_issue_toc .heading .cover {
    margin: 0;
}

.obj_issue_toc .heading .cover img,
.page_issue .obj_issue_toc .cover img {
    display: block;
    width: 100%;
    border-radius: var(--journal-radius-sm);
    box-shadow: var(--journal-shadow-md);
}

.obj_issue_toc .heading .description {
    color: var(--journal-ink-700);
    font-size: 0.95rem;
}

.obj_issue_toc .published {
    display: inline-flex;
    align-items: center;
    margin: 0.4rem 0 1rem;
    padding: 0.36rem 0.7rem;
    border-radius: var(--journal-radius-pill);
    color: var(--journal-primary-900);
    background: var(--journal-primary-100);
    font-size: 0.76rem;
    font-weight: 800;
}

.obj_issue_toc .sections {
    margin: 0;
    padding: 0;
    list-style: none;
}

.obj_issue_toc .section {
    margin: 0 0 2.25rem;
}

.obj_issue_toc .section > h2,
.obj_issue_toc .section > h3,
.obj_issue_toc .section .section_title {
    position: relative;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-left: 5px solid var(--journal-accent-500);
    border-radius: 0 var(--journal-radius-sm) var(--journal-radius-sm) 0;
    color: var(--journal-primary-950);
    background: var(--journal-primary-50);
    font-size: 1.15rem;
    letter-spacing: -0.015em;
}

.obj_issue_toc .articles,
.cmp_article_list,
.page_issue .articles {
    margin: 0;
    padding: 0;
    list-style: none;
}

.obj_article_summary {
    position: relative;
    margin: 0 0 1rem;
    padding: 1.25rem 1.3rem;
    border: 1px solid var(--journal-border);
    border-radius: var(--journal-radius-sm);
    background: var(--journal-white);
    box-shadow: var(--journal-shadow-xs);
    transition: var(--journal-transition);
}

.obj_article_summary::before {
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 0;
    width: 4px;
    border-radius: 0 var(--journal-radius-pill) var(--journal-radius-pill) 0;
    background: var(--journal-primary-600);
    transform: scaleY(0.25);
    transition: transform 180ms ease;
    content: "";
}

.obj_article_summary:hover {
    border-color: var(--journal-primary-100);
    box-shadow: var(--journal-shadow-sm);
    transform: translateY(-2px);
}

.obj_article_summary:hover::before {
    transform: scaleY(1);
}

.obj_article_summary .title {
    margin: 0 0 0.55rem;
    padding: 0;
    font-size: clamp(1rem, 2vw, 1.16rem);
    font-weight: 780;
    line-height: 1.42;
}

.obj_article_summary .title a {
    color: var(--journal-ink-950);
    text-decoration: none;
}

.obj_article_summary .title a:hover,
.obj_article_summary .title a:focus {
    color: var(--journal-primary-700);
}

.obj_article_summary .authors,
.obj_article_summary .meta,
.obj_article_summary .pages {
    margin: 0.3rem 0;
    color: var(--journal-ink-600);
    font-size: 0.86rem;
    line-height: 1.55;
}

.obj_article_summary .authors {
    color: var(--journal-primary-800);
    font-weight: 650;
}

.obj_article_summary .doi {
    margin-top: 0.35rem;
    font-size: 0.82rem;
}

.obj_article_summary .galleys_links {
    margin-top: 0.8rem;
}

/* ==========================================================================
   12. ISSUE ARCHIVE CARDS
   ========================================================================== */

.cmp_issue_list,
.issues_archive {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.obj_issue_summary {
    display: grid;
    grid-template-columns: minmax(100px, 145px) minmax(0, 1fr);
    gap: 1.1rem;
    height: 100%;
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--journal-border);
    border-radius: var(--journal-radius-sm);
    background: var(--journal-white);
    box-shadow: var(--journal-shadow-xs);
    transition: var(--journal-transition);
}

.obj_issue_summary:hover {
    border-color: var(--journal-primary-100);
    box-shadow: var(--journal-shadow-sm);
    transform: translateY(-2px);
}

.obj_issue_summary .cover {
    margin: 0;
}

.obj_issue_summary .cover img {
    display: block;
    width: 100%;
    border-radius: 7px;
    box-shadow: 0 8px 20px rgba(18, 32, 31, 0.14);
}

.obj_issue_summary .title {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    line-height: 1.4;
}

.obj_issue_summary .title a {
    color: var(--journal-ink-950);
    text-decoration: none;
}

.obj_issue_summary .title a:hover {
    color: var(--journal-primary-700);
}

.obj_issue_summary .description {
    color: var(--journal-ink-600);
    font-size: 0.84rem;
}

/* ==========================================================================
   13. ARTICLE DETAIL PAGE
   ========================================================================== */

.obj_article_details {
    min-width: 0;
}

.obj_article_details > .page_title,
.obj_article_details .page_title {
    margin-bottom: 1.15rem;
    color: var(--journal-ink-950);
    font-size: clamp(1.75rem, 3vw, 2.55rem);
    line-height: 1.25;
    letter-spacing: -0.035em;
}

.obj_article_details .authors,
.obj_article_details .author {
    color: var(--journal-primary-800);
    font-weight: 700;
}

.obj_article_details .author {
    margin-bottom: 0.8rem;
}

.obj_article_details .affiliation {
    color: var(--journal-ink-600);
    font-size: 0.86rem;
    font-weight: 500;
}

.obj_article_details .orcid a {
    color: var(--journal-success);
    font-size: 0.82rem;
    font-weight: 700;
}

.obj_article_details .item {
    margin: 1.5rem 0;
    padding: 1.2rem 1.3rem;
    border: 1px solid var(--journal-border);
    border-radius: var(--journal-radius-sm);
    background: var(--journal-surface-soft);
}

.obj_article_details .item .label,
.obj_article_details .item > h2,
.obj_article_details .item > h3 {
    display: block;
    margin: 0 0 0.7rem;
    padding: 0;
    color: var(--journal-primary-950);
    background: transparent;
    font-size: 1.02rem;
    font-weight: 800;
    text-transform: none;
}

.obj_article_details .item .value {
    color: var(--journal-ink-700);
}

.obj_article_details .abstract,
.obj_article_details .references {
    color: var(--journal-ink-800);
    line-height: 1.82;
}

.obj_article_details .keywords .value,
.obj_article_details .subjects .value {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.obj_article_details .keywords .value > *,
.obj_article_details .subjects .value > * {
    padding: 0.32rem 0.62rem;
    border: 1px solid var(--journal-primary-100);
    border-radius: var(--journal-radius-pill);
    color: var(--journal-primary-900);
    background: var(--journal-primary-50);
    font-size: 0.78rem;
    font-weight: 700;
}

.obj_article_details .citation_display {
    overflow-wrap: anywhere;
    padding: 1rem;
    border: 1px dashed var(--journal-ink-300);
    border-radius: var(--journal-radius-sm);
    color: var(--journal-ink-700);
    background: var(--journal-white);
    font-family: var(--journal-font-serif);
}

.obj_article_details .references p,
.obj_article_details .references li {
    margin-bottom: 0.75rem;
    padding-left: 0.2rem;
}

.obj_article_details .main_entry {
    min-width: 0;
}

.obj_article_details .entry_details {
    min-width: 0;
}

.obj_article_details .entry_details .item {
    background: var(--journal-white);
}

/* ==========================================================================
   14. ANNOUNCEMENTS
   ========================================================================== */

.cmp_announcements,
.announcements {
    margin: 0;
    padding: 0;
    list-style: none;
}

.obj_announcement_summary,
.announcement_summary {
    margin: 0 0 1rem;
    padding: 1.2rem 1.3rem;
    border: 1px solid var(--journal-border);
    border-radius: var(--journal-radius-sm);
    background: var(--journal-white);
    box-shadow: var(--journal-shadow-xs);
    transition: var(--journal-transition);
}

.obj_announcement_summary:hover,
.announcement_summary:hover {
    border-color: var(--journal-primary-100);
    box-shadow: var(--journal-shadow-sm);
    transform: translateY(-2px);
}

.obj_announcement_summary .date,
.announcement_summary .date {
    display: inline-flex;
    margin-bottom: 0.55rem;
    padding: 0.28rem 0.58rem;
    border-radius: var(--journal-radius-pill);
    color: var(--journal-accent-700);
    background: var(--journal-accent-100);
    font-size: 0.74rem;
    font-weight: 800;
}

.obj_announcement_summary .title,
.announcement_summary .title {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.obj_announcement_summary .title a,
.announcement_summary .title a {
    color: var(--journal-ink-950);
    text-decoration: none;
}

.obj_announcement_summary .title a:hover,
.announcement_summary .title a:hover {
    color: var(--journal-primary-700);
}

.obj_announcement_summary .description,
.announcement_summary .description {
    color: var(--journal-ink-600);
    font-size: 0.9rem;
}

/* ==========================================================================
   15. SEARCH, LOGIN, REGISTER, AND SUBMISSION PAGES
   ========================================================================== */

.page_login,
.page_register {
    max-width: 720px;
    margin-right: auto;
    margin-left: auto;
}

.page_login .cmp_form,
.page_register .cmp_form,
.page_search .cmp_form,
.page_submissions .cmp_form {
    padding: clamp(1.1rem, 3vw, 1.7rem);
    border: 1px solid var(--journal-border);
    border-radius: var(--journal-radius-md);
    background: var(--journal-surface-soft);
}

.page_search .search_results {
    margin-top: 1.75rem;
}

.page_search .obj_article_summary {
    background: var(--journal-white);
}

.submission_checklist,
.privacy_statement {
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--journal-primary-100);
    border-radius: var(--journal-radius-sm);
    background: var(--journal-primary-50);
}

.submission_checklist li {
    margin-bottom: 0.65rem;
}

/* ==========================================================================
   16. PAGINATION
   ========================================================================== */

.cmp_pagination,
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.cmp_pagination a,
.cmp_pagination span,
.pagination > li > a,
.pagination > li > span {
    display: inline-grid;
    place-items: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--journal-border);
    border-radius: var(--journal-radius-sm);
    color: var(--journal-primary-800);
    background: var(--journal-white);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

.cmp_pagination a:hover,
.pagination > li > a:hover {
    border-color: var(--journal-primary-600);
    color: var(--journal-white);
    background: var(--journal-primary-700);
}

.cmp_pagination .current,
.pagination > .active > a,
.pagination > .active > span {
    border-color: var(--journal-primary-800);
    color: var(--journal-white);
    background: var(--journal-primary-800);
}

/* ==========================================================================
   17. SIDEBAR BLOCKS
   ========================================================================== */

.pkp_structure_sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pkp_block,
.panel,
.widget {
    margin: 0;
    padding: 1.15rem;
    overflow: hidden;
    border: 1px solid var(--journal-border);
    border-radius: var(--journal-radius-sm);
    background: var(--journal-white);
    box-shadow: var(--journal-shadow-xs);
}

.pkp_block .title,
.panel-heading,
.widget-title {
    position: relative;
    display: block;
    margin: -1.15rem -1.15rem 1rem;
    padding: 0.9rem 1rem 0.9rem 1.15rem;
    border: 0;
    color: var(--journal-white);
    background:
        linear-gradient(
            110deg,
            var(--journal-primary-900),
            var(--journal-primary-700)
        );
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.pkp_block .title::after,
.panel-heading::after,
.widget-title::after {
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--journal-accent-300);
    box-shadow:
        12px 0 0 rgba(234, 211, 155, 0.68),
        24px 0 0 rgba(234, 211, 155, 0.36);
    transform: translateY(-50%);
    content: "";
}

.pkp_block .content,
.panel-body,
.widget-content {
    color: var(--journal-ink-700);
    font-size: 0.88rem;
}

.pkp_block .content ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pkp_block .content li {
    margin: 0;
    padding: 0.58rem 0;
    border-bottom: 1px solid var(--journal-ink-100);
    line-height: 1.5;
}

.pkp_block .content li:last-child {
    border-bottom: 0;
}

.pkp_block .content a {
    color: var(--journal-ink-800);
    font-weight: 620;
    text-decoration: none;
}

.pkp_block .content a:hover {
    color: var(--journal-primary-700);
}

.block_make_submission {
    border-color: var(--journal-primary-700);
    background:
        linear-gradient(
            145deg,
            var(--journal-primary-900),
            var(--journal-primary-700)
        );
}

.block_make_submission .content {
    padding: 0;
}

.block_make_submission .content a {
    display: flex;
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--journal-accent-300);
    color: var(--journal-primary-950);
    background: var(--journal-accent-300);
    box-shadow: none;
    font-size: 0.9rem;
    font-weight: 850;
}

.block_make_submission .content a:hover {
    border-color: var(--journal-white);
    color: var(--journal-primary-950);
    background: var(--journal-white);
}

.block_language_toggle a,
.block_information a,
.block_browse a {
    font-size: 0.86rem;
}

/* ==========================================================================
   18. FOOTER
   ========================================================================== */

.pkp_structure_footer_wrapper {
    position: relative;
    overflow: hidden;
    border: 0;
    color: rgba(255, 255, 255, 0.78);
    background:
        linear-gradient(
            135deg,
            var(--journal-primary-950),
            #0f2f2d 58%,
            #0a2422
        );
}

.pkp_structure_footer_wrapper::before {
    position: absolute;
    top: -140px;
    right: -100px;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(234, 211, 155, 0.15);
    border-radius: 50%;
    box-shadow:
        0 0 0 40px rgba(234, 211, 155, 0.035),
        0 0 0 90px rgba(234, 211, 155, 0.022);
    content: "";
}

.pkp_structure_footer {
    position: relative;
    width: min(calc(100% - 2rem), var(--journal-container));
    max-width: var(--journal-container);
    margin: 0 auto;
    padding: 0;
    text-align: left;
}

.pkp_footer_content {
    padding: clamp(2rem, 5vw, 4rem) 0 1.5rem;
    color: rgba(255, 255, 255, 0.78);
    text-align: left;
}

.pkp_footer_content h2,
.pkp_footer_content h3,
.pkp_footer_content h4,
.pkp_footer_content h5,
.pkp_footer_content h6 {
    color: var(--journal-white);
}

.pkp_footer_content a {
    color: var(--journal-accent-300);
}

.pkp_footer_content a:hover {
    color: var(--journal-white);
}

.pkp_brand_footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem 0 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pkp_brand_footer a {
    float: none;
    max-width: 150px;
    opacity: 0.9;
    transition: opacity 180ms ease;
}

.pkp_brand_footer a:hover {
    opacity: 1;
}

/* ==========================================================================
   19. BOOTSTRAP COMPONENT COMPATIBILITY
   ========================================================================== */

.panel {
    border-color: var(--journal-border);
    box-shadow: var(--journal-shadow-xs);
}

.panel-default > .panel-heading {
    border-color: transparent;
    color: var(--journal-white);
    background:
        linear-gradient(
            110deg,
            var(--journal-primary-900),
            var(--journal-primary-700)
        );
}

.well {
    border: 1px solid var(--journal-border);
    border-radius: var(--journal-radius-sm);
    background: var(--journal-surface-soft);
    box-shadow: none;
}

.list-group-item {
    border-color: var(--journal-border);
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    border-color: var(--journal-primary-700);
    background: var(--journal-primary-700);
}

.nav-tabs {
    border-bottom-color: var(--journal-border);
}

.nav-tabs > li > a {
    border-radius: var(--journal-radius-sm) var(--journal-radius-sm) 0 0;
    color: var(--journal-primary-800);
    font-weight: 700;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border-color: var(--journal-border) var(--journal-border) var(--journal-white);
    color: var(--journal-primary-950);
}

.modal-content {
    overflow: hidden;
    border: 0;
    border-radius: var(--journal-radius-md);
    box-shadow: var(--journal-shadow-md);
}

.modal-header {
    border-bottom: 1px solid var(--journal-border);
    color: var(--journal-white);
    background: var(--journal-primary-800);
}

.modal-title {
    color: var(--journal-white);
}

.modal-footer {
    border-top: 1px solid var(--journal-border);
    background: var(--journal-surface-soft);
}

/* ==========================================================================
   20. OPTIONAL CUSTOM HOMEPAGE COMPONENTS
   These classes require matching HTML in an Additional Content or custom
   template/block. Native OJS pages do not generate these classes automatically.
   ========================================================================== */

.journal-topbar {
    color: rgba(255, 255, 255, 0.85);
    background: var(--journal-primary-950);
    font-size: 0.78rem;
}

.journal-topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    width: min(calc(100% - 2rem), var(--journal-container));
    margin: 0 auto;
    padding: 0.55rem 0;
}

.journal-topbar__group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.2rem;
}

.journal-topbar a {
    color: var(--journal-accent-300);
    text-decoration: none;
}

.journal-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin:
        calc(clamp(1.2rem, 3vw, 2.4rem) * -1)
        calc(clamp(1.2rem, 3vw, 2.4rem) * -1)
        2.5rem;
    padding: clamp(2rem, 6vw, 4.8rem);
    border-radius: var(--journal-radius-md) var(--journal-radius-md) 0 0;
    color: rgba(255, 255, 255, 0.88);
    background:
        linear-gradient(
            115deg,
            rgba(22, 62, 59, 0.98),
            rgba(47, 112, 105, 0.92)
        );
}

.journal-hero::before {
    position: absolute;
    z-index: -2;
    inset: 0;
    background:
        radial-gradient(circle at 82% 20%, rgba(234, 211, 155, 0.28), transparent 25rem),
        linear-gradient(145deg, transparent 55%, rgba(255, 255, 255, 0.06));
    content: "";
}

.journal-hero::after {
    position: absolute;
    z-index: -1;
    right: -90px;
    bottom: -160px;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
    box-shadow:
        0 0 0 45px rgba(255, 255, 255, 0.025),
        0 0 0 100px rgba(255, 255, 255, 0.018);
    content: "";
}

.journal-hero__grid {
    display: grid;
    grid-template-columns: minmax(170px, 250px) minmax(0, 1fr);
    gap: clamp(1.5rem, 5vw, 3.5rem);
    align-items: center;
}

.journal-hero__cover {
    width: min(100%, 240px);
    margin: 0 auto;
}

.journal-hero__cover img {
    display: block;
    width: 100%;
    border: 5px solid rgba(255, 255, 255, 0.82);
    border-radius: var(--journal-radius-sm);
    box-shadow: 0 28px 65px rgba(0, 0, 0, 0.28);
}

.journal-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(234, 211, 155, 0.48);
    border-radius: var(--journal-radius-pill);
    color: var(--journal-accent-300);
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.journal-hero h1,
.journal-hero h2,
.journal-hero h3 {
    color: var(--journal-white);
}

.journal-hero__title {
    max-width: 850px;
    margin-bottom: 1rem;
    font-size: clamp(2rem, 5vw, 4.1rem);
    line-height: 1.08;
    letter-spacing: -0.05em;
}

.journal-hero__description {
    max-width: 800px;
    margin-bottom: 1.5rem;
    font-size: clamp(0.95rem, 1.5vw, 1.08rem);
    line-height: 1.75;
}

.journal-hero__meta,
.journal-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.journal-hero__meta {
    margin-bottom: 1.3rem;
}

.journal-hero__meta span {
    padding: 0.4rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--journal-radius-pill);
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.78rem;
    font-weight: 700;
}

.journal-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.72rem 1rem;
    border: 1px solid var(--journal-accent-300);
    border-radius: var(--journal-radius-sm);
    color: var(--journal-primary-950);
    background: var(--journal-accent-300);
    font-size: 0.88rem;
    font-weight: 850;
    text-decoration: none;
}

.journal-hero__button:hover {
    border-color: var(--journal-white);
    color: var(--journal-primary-950);
    background: var(--journal-white);
}

.journal-hero__button--ghost {
    color: var(--journal-white);
    background: transparent;
    border-color: rgba(255, 255, 255, 0.38);
}

.journal-hero__button--ghost:hover {
    color: var(--journal-primary-950);
    background: var(--journal-white);
}

.journal-section {
    margin: 2.5rem 0;
}

.journal-section__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.journal-section__eyebrow {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--journal-accent-700);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.journal-section__title {
    margin: 0;
    color: var(--journal-primary-950);
}

.journal-section__description {
    max-width: 680px;
    margin: 0.45rem 0 0;
    color: var(--journal-ink-600);
}

.journal-policy-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.journal-policy-card {
    position: relative;
    min-height: 175px;
    padding: 1.2rem;
    overflow: hidden;
    border: 1px solid var(--journal-border);
    border-radius: var(--journal-radius-sm);
    background: var(--journal-white);
    box-shadow: var(--journal-shadow-xs);
    transition: var(--journal-transition);
}

.journal-policy-card::after {
    position: absolute;
    right: -30px;
    bottom: -30px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--journal-primary-50);
    content: "";
}

.journal-policy-card:hover {
    border-color: var(--journal-primary-100);
    box-shadow: var(--journal-shadow-sm);
    transform: translateY(-3px);
}

.journal-policy-card__number {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: 0.9rem;
    border-radius: 10px;
    color: var(--journal-white);
    background: var(--journal-primary-700);
    font-size: 0.82rem;
    font-weight: 850;
}

.journal-policy-card__title {
    position: relative;
    z-index: 1;
    margin-bottom: 0.45rem;
    font-size: 1rem;
}

.journal-policy-card__text {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    color: var(--journal-ink-600);
    font-size: 0.84rem;
    line-height: 1.6;
}

.journal-policy-card a {
    position: absolute;
    z-index: 2;
    inset: 0;
    font-size: 0;
}

.journal-stats {
    position: relative;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: var(--journal-radius-md);
    color: rgba(255, 255, 255, 0.82);
    background:
        linear-gradient(
            120deg,
            var(--journal-primary-950),
            var(--journal-primary-700)
        );
}

.journal-stats::after {
    position: absolute;
    top: -80px;
    right: -60px;
    width: 250px;
    height: 250px;
    border: 36px solid rgba(234, 211, 155, 0.09);
    border-radius: 50%;
    content: "";
}

.journal-stats h2,
.journal-stats h3 {
    color: var(--journal-white);
}

.journal-stats__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

.journal-stat {
    padding: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--journal-radius-sm);
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(8px);
}

.journal-stat__value {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--journal-accent-300);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.journal-stat__label {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    font-weight: 650;
}

.journal-feature-grid,
.journal-training-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.journal-feature-card,
.journal-training-card {
    padding: 1.25rem;
    border: 1px solid var(--journal-border);
    border-radius: var(--journal-radius-sm);
    background: var(--journal-white);
    box-shadow: var(--journal-shadow-xs);
    transition: var(--journal-transition);
}

.journal-feature-card:hover,
.journal-training-card:hover {
    border-color: var(--journal-primary-100);
    box-shadow: var(--journal-shadow-sm);
    transform: translateY(-3px);
}

.journal-feature-card h3,
.journal-training-card h3 {
    margin-bottom: 0.55rem;
    font-size: 1.05rem;
}

.journal-feature-card p,
.journal-training-card p {
    color: var(--journal-ink-600);
    font-size: 0.86rem;
}

.journal-feature-card ul,
.journal-training-card ul {
    margin: 0.75rem 0 0;
    padding-left: 1.1rem;
    color: var(--journal-ink-700);
    font-size: 0.84rem;
}

.journal-feature-card li,
.journal-training-card li {
    margin-bottom: 0.35rem;
}

.journal-issue-highlight {
    display: grid;
    grid-template-columns: minmax(150px, 230px) minmax(0, 1fr);
    gap: clamp(1.25rem, 4vw, 2.5rem);
    align-items: center;
    padding: clamp(1.2rem, 4vw, 2rem);
    border: 1px solid var(--journal-border);
    border-radius: var(--journal-radius-md);
    background:
        linear-gradient(
            145deg,
            var(--journal-white),
            var(--journal-primary-50)
        );
}

.journal-issue-highlight__cover img {
    display: block;
    width: 100%;
    border-radius: var(--journal-radius-sm);
    box-shadow: var(--journal-shadow-md);
}

.journal-issue-highlight__badge {
    display: inline-flex;
    margin-bottom: 0.75rem;
    padding: 0.32rem 0.65rem;
    border-radius: var(--journal-radius-pill);
    color: var(--journal-accent-700);
    background: var(--journal-accent-100);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.journal-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 2rem;
}

.journal-footer-grid h3,
.journal-footer-grid h4 {
    margin-bottom: 0.8rem;
    color: var(--journal-white);
    font-size: 0.95rem;
}

.journal-footer-grid ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.journal-footer-grid li {
    margin-bottom: 0.45rem;
}

.journal-footer-grid a {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.84rem;
    text-decoration: none;
}

.journal-footer-grid a:hover {
    color: var(--journal-accent-300);
}

/* ==========================================================================
   21. RESPONSIVE BEHAVIOR
   ========================================================================== */

@media (min-width: 992px) {
    .pkp_structure_content:has(.pkp_structure_sidebar) {
        grid-template-columns:
            minmax(0, calc(var(--journal-container) - var(--journal-sidebar) - 2rem))
            minmax(270px, var(--journal-sidebar));
    }

    .pkp_structure_content > .pkp_structure_main:not(:only-child) {
        grid-column: 1;
    }

    .pkp_structure_content > .pkp_structure_sidebar {
        grid-column: 2;
    }
}

@media (max-width: 1199px) {
    .journal-policy-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .journal-stats__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .journal-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .pkp_head_wrapper {
        padding-top: 0.8rem;
    }

    .pkp_site_name_wrapper {
        min-height: 72px;
        padding-right: 58px;
    }

    .pkp_site_name {
        min-height: 58px;
    }

    .pkp_site_name > a,
    .pkp_site_name .is_text {
        min-height: 54px;
        font-size: 1.3rem;
    }

    .pkp_site_name .is_img img {
        max-height: 68px;
    }

    .pkp_site_nav_menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        background: var(--journal-primary-950);
        box-shadow: var(--journal-shadow-md);
    }

    .pkp_navigation_primary_row {
        border: 0;
        background: transparent;
        backdrop-filter: none;
    }

    .pkp_navigation_primary_wrapper {
        display: block;
        min-height: 0;
    }

    .pkp_navigation_primary {
        display: block;
    }

    .pkp_navigation_primary > li {
        display: block;
    }

    .pkp_navigation_primary > li > a {
        display: flex;
        min-height: 44px;
        padding: 0.65rem 0.75rem;
        border-radius: 7px;
    }

    .pkp_navigation_primary > li > a::after {
        display: none;
    }

    .pkp_nav_list ul,
    .pkp_navigation_primary .dropdown-menu {
        position: static;
        width: 100%;
        min-width: 0;
        margin: 0.35rem 0 0.5rem;
        padding: 0.4rem;
        box-shadow: none;
    }

    .pkp_navigation_search_wrapper {
        margin-top: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .pkp_navigation_search_wrapper a {
        min-height: 44px;
        padding: 0.65rem 0.75rem;
    }

    .pkp_navigation_user_wrapper {
        background: transparent;
    }

    .pkp_navigation_user {
        display: block;
        width: 100%;
        min-height: 0;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        text-align: left;
    }

    .pkp_navigation_user > li {
        display: block;
    }

    .pkp_navigation_user > li > a {
        min-height: 40px;
        padding: 0.55rem 0.75rem;
    }

    .obj_article_details .main_entry,
    .obj_article_details .entry_details {
        width: 100%;
        float: none;
    }

    .cmp_issue_list,
    .issues_archive {
        grid-template-columns: minmax(0, 1fr);
    }
}

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

    .pkp_structure_content {
        width: min(calc(100% - 1rem), var(--journal-container));
        gap: 1rem;
        padding: 1rem 0 2.5rem;
    }

    .pkp_structure_main {
        padding: 1rem;
        border-radius: var(--journal-radius-sm);
    }

    .pkp_head_wrapper,
    .pkp_navigation_user,
    .pkp_structure_footer {
        width: min(calc(100% - 1.25rem), var(--journal-container));
    }

    .pkp_site_name_wrapper {
        padding-right: 52px;
    }

    .pkp_site_nav_toggle {
        top: 0.75rem;
        width: 42px;
        height: 42px;
    }

    .obj_issue_toc .heading,
    .journal-hero__grid,
    .journal-issue-highlight {
        grid-template-columns: minmax(0, 1fr);
    }

    .obj_issue_toc .heading .cover,
    .journal-hero__cover,
    .journal-issue-highlight__cover {
        width: min(100%, 230px);
        margin-right: auto;
        margin-left: auto;
    }

    .obj_issue_summary {
        grid-template-columns: 100px minmax(0, 1fr);
    }

    .journal-hero {
        margin: -1rem -1rem 2rem;
        padding: 1.5rem;
        border-radius: var(--journal-radius-sm) var(--journal-radius-sm) 0 0;
    }

    .journal-hero__content {
        text-align: center;
    }

    .journal-hero__meta,
    .journal-hero__actions {
        justify-content: center;
    }

    .journal-policy-grid,
    .journal-feature-grid,
    .journal-training-grid,
    .journal-stats__grid,
    .journal-footer-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .journal-section__header {
        display: block;
    }

    .pkp_brand_footer {
        justify-content: center;
    }
}

@media (max-width: 479px) {
    .pkp_site_name > a,
    .pkp_site_name .is_text {
        font-size: 1.05rem;
    }

    .obj_issue_summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .obj_issue_summary .cover {
        width: min(100%, 170px);
        margin: 0 auto;
    }

    .obj_article_summary {
        padding: 1rem;
    }

    .cmp_breadcrumbs,
    .breadcrumb {
        padding: 0.6rem 0.7rem;
    }

    .journal-hero__button {
        width: 100%;
    }
}

/* ==========================================================================
   22. REDUCED MOTION AND PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    body {
        color: #000;
        background: #fff;
        font-size: 11pt;
    }

    .pkp_structure_head,
    .pkp_structure_sidebar,
    .pkp_structure_footer_wrapper,
    .cmp_breadcrumbs,
    .breadcrumb,
    .pkp_navigation_primary,
    .pkp_navigation_user,
    .pkp_navigation_search_wrapper,
    .obj_galley_link,
    .galley-link,
    .galleys_links,
    .journal-topbar,
    .journal-hero__actions {
        display: none !important;
    }

    .pkp_structure_content,
    .pkp_structure_main {
        display: block;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .obj_article_details .item,
    .obj_article_summary,
    .obj_issue_toc .heading {
        break-inside: avoid;
        border-color: #bbb;
        background: #fff;
        box-shadow: none;
    }

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

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        overflow-wrap: anywhere;
    }
}

/* ==========================================================================
   23. QUICK MENU INTERACTIVE BUTTONS
   Supports common OJS Custom Block identifiers and an optional .quick-menu
   class. Recommended block class: quick-menu
   ========================================================================== */

:root {
    --quick-menu-bg: #0b3188;
    --quick-menu-bg-hover: #d4ae63;
    --quick-menu-text: #ffffff;
    --quick-menu-text-hover: #163e3b;
    --quick-menu-border: #0b3188;
    --quick-menu-shadow: 0 8px 18px rgba(11, 49, 136, 0.16);
    --quick-menu-shadow-hover: 0 14px 30px rgba(22, 62, 59, 0.22);
}

/*
 * The selectors below cover:
 * - A custom block given the class "quick-menu"
 * - Common OJS custom block IDs such as customblock-quickmenu
 * - Common custom block class names such as block_quick_menu
 */
:is(
    .pkp_block.quick-menu,
    .pkp_block.block_quick_menu,
    .pkp_block.block_quickmenu,
    #customblock-quick-menu,
    #customblock-quickmenu,
    #customblock-QuickMenu,
    #customblock-quickMenu
) {
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Quick Menu heading */
:is(
    .pkp_block.quick-menu,
    .pkp_block.block_quick_menu,
    .pkp_block.block_quickmenu,
    #customblock-quick-menu,
    #customblock-quickmenu,
    #customblock-QuickMenu,
    #customblock-quickMenu
) > .title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.9rem;
    padding: 0;
    color: var(--quick-menu-bg);
    background: transparent;
    font-size: 1.05rem;
    font-weight: 850;
    letter-spacing: -0.01em;
    box-shadow: none;
}

/* Remove the generic sidebar decorative dots from this block title */
:is(
    .pkp_block.quick-menu,
    .pkp_block.block_quick_menu,
    .pkp_block.block_quickmenu,
    #customblock-quick-menu,
    #customblock-quickmenu,
    #customblock-QuickMenu,
    #customblock-quickMenu
) > .title::after {
    display: none;
}

/* Optional menu icon when the title is plain text */
:is(
    .pkp_block.quick-menu,
    .pkp_block.block_quick_menu,
    .pkp_block.block_quickmenu,
    #customblock-quick-menu,
    #customblock-quickmenu,
    #customblock-QuickMenu,
    #customblock-quickMenu
) > .title::before {
    display: inline-grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    color: var(--quick-menu-bg);
    font-size: 1.15rem;
    line-height: 1;
    content: "\2630";
}

/* Remove default content padding */
:is(
    .pkp_block.quick-menu,
    .pkp_block.block_quick_menu,
    .pkp_block.block_quickmenu,
    #customblock-quick-menu,
    #customblock-quickmenu,
    #customblock-QuickMenu,
    #customblock-quickMenu
) > .content {
    padding: 0;
    color: inherit;
    background: transparent;
}

/* Normalize common list structures */
:is(
    .pkp_block.quick-menu,
    .pkp_block.block_quick_menu,
    .pkp_block.block_quickmenu,
    #customblock-quick-menu,
    #customblock-quickmenu,
    #customblock-QuickMenu,
    #customblock-quickMenu
) :is(ul, ol) {
    display: grid;
    gap: 0.58rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

:is(
    .pkp_block.quick-menu,
    .pkp_block.block_quick_menu,
    .pkp_block.block_quickmenu,
    #customblock-quick-menu,
    #customblock-quickmenu,
    #customblock-QuickMenu,
    #customblock-quickMenu
) li {
    margin: 0;
    padding: 0;
    border: 0;
}

/*
 * Interactive buttons.
 * Works with:
 * - <ul><li><a>...</a></li></ul>
 * - Direct anchors inside .content
 * - Optional .quick-menu__link class
 */
:is(
    .pkp_block.quick-menu,
    .pkp_block.block_quick_menu,
    .pkp_block.block_quickmenu,
    #customblock-quick-menu,
    #customblock-quickmenu,
    #customblock-QuickMenu,
    #customblock-quickMenu
) :is(
    .content > a,
    li > a,
    a.quick-menu__link
) {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    width: 100%;
    min-height: 47px;
    margin: 0 0 0.58rem;
    padding: 0.72rem 0.9rem;
    overflow: hidden;
    border: 1px solid var(--quick-menu-border);
    border-radius: 3px;
    color: var(--quick-menu-text);
    background: var(--quick-menu-bg);
    box-shadow: 0 3px 8px rgba(11, 49, 136, 0.08);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: right;
    text-decoration: none;
    transform: translateX(0);
    transition:
        color 220ms ease,
        background-color 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        transform 220ms ease;
}

/* Animated background layer */
:is(
    .pkp_block.quick-menu,
    .pkp_block.block_quick_menu,
    .pkp_block.block_quickmenu,
    #customblock-quick-menu,
    #customblock-quickmenu,
    #customblock-QuickMenu,
    #customblock-quickMenu
) :is(
    .content > a,
    li > a,
    a.quick-menu__link
)::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(
            105deg,
            var(--quick-menu-bg-hover),
            #ead39b
        );
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
    content: "";
}

/* Hover and keyboard focus */
:is(
    .pkp_block.quick-menu,
    .pkp_block.block_quick_menu,
    .pkp_block.block_quickmenu,
    #customblock-quick-menu,
    #customblock-quickmenu,
    #customblock-QuickMenu,
    #customblock-quickMenu
) :is(
    .content > a,
    li > a,
    a.quick-menu__link
):is(:hover, :focus-visible) {
    border-color: var(--quick-menu-bg-hover);
    color: var(--quick-menu-text-hover);
    background: var(--quick-menu-bg-hover);
    box-shadow: var(--quick-menu-shadow-hover);
    transform: translateX(6px);
}

:is(
    .pkp_block.quick-menu,
    .pkp_block.block_quick_menu,
    .pkp_block.block_quickmenu,
    #customblock-quick-menu,
    #customblock-quickmenu,
    #customblock-QuickMenu,
    #customblock-quickMenu
) :is(
    .content > a,
    li > a,
    a.quick-menu__link
):is(:hover, :focus-visible)::before {
    transform: scaleX(1);
}

/* Pressed-state feedback */
:is(
    .pkp_block.quick-menu,
    .pkp_block.block_quick_menu,
    .pkp_block.block_quickmenu,
    #customblock-quick-menu,
    #customblock-quickmenu,
    #customblock-QuickMenu,
    #customblock-quickMenu
) :is(
    .content > a,
    li > a,
    a.quick-menu__link
):active {
    box-shadow: var(--quick-menu-shadow);
    transform: translateX(4px) scale(0.99);
}

/*
 * Icon support:
 * Font Awesome, Bootstrap glyphicons, inline SVG, images, and custom spans.
 */
:is(
    .pkp_block.quick-menu,
    .pkp_block.block_quick_menu,
    .pkp_block.block_quickmenu,
    #customblock-quick-menu,
    #customblock-quickmenu,
    #customblock-QuickMenu,
    #customblock-quickMenu
) :is(
    .content > a,
    li > a,
    a.quick-menu__link
) :is(
    i,
    svg,
    img,
    .fa,
    .fas,
    .far,
    .fab,
    .glyphicon,
    .quick-menu__icon
) {
    flex: 0 0 auto;
    order: -1;
    width: 1.05rem;
    min-width: 1.05rem;
    height: 1.05rem;
    color: currentColor;
    fill: currentColor;
    object-fit: contain;
    text-align: center;
    transition:
        color 220ms ease,
        fill 220ms ease,
        transform 220ms ease;
}

:is(
    .pkp_block.quick-menu,
    .pkp_block.block_quick_menu,
    .pkp_block.block_quickmenu,
    #customblock-quick-menu,
    #customblock-quickmenu,
    #customblock-QuickMenu,
    #customblock-quickMenu
) :is(
    .content > a,
    li > a,
    a.quick-menu__link
):is(:hover, :focus-visible) :is(
    i,
    svg,
    img,
    .fa,
    .fas,
    .far,
    .fab,
    .glyphicon,
    .quick-menu__icon
) {
    transform: scale(1.12) rotate(-3deg);
}

/* Optional text wrapper for more predictable right alignment */
:is(
    .pkp_block.quick-menu,
    .pkp_block.block_quick_menu,
    .pkp_block.block_quickmenu,
    #customblock-quick-menu,
    #customblock-quickmenu,
    #customblock-QuickMenu,
    #customblock-quickMenu
) .quick-menu__label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
}

/* Current/active page indicator */
:is(
    .pkp_block.quick-menu,
    .pkp_block.block_quick_menu,
    .pkp_block.block_quickmenu,
    #customblock-quick-menu,
    #customblock-quickmenu,
    #customblock-QuickMenu,
    #customblock-quickMenu
) :is(
    .content > a,
    li > a,
    a.quick-menu__link
):is(
    [aria-current="page"],
    .is-active,
    .active
) {
    border-color: var(--quick-menu-bg-hover);
    color: var(--quick-menu-text-hover);
    background:
        linear-gradient(
            105deg,
            var(--quick-menu-bg-hover),
            #ead39b
        );
    box-shadow: var(--quick-menu-shadow);
}

/* Compact touch-friendly mobile behavior */
@media (max-width: 767px) {
    :is(
        .pkp_block.quick-menu,
        .pkp_block.block_quick_menu,
        .pkp_block.block_quickmenu,
        #customblock-quick-menu,
        #customblock-quickmenu,
        #customblock-QuickMenu,
        #customblock-quickMenu
    ) :is(
        .content > a,
        li > a,
        a.quick-menu__link
    ) {
        min-height: 48px;
        padding: 0.75rem 0.82rem;
        font-size: 0.84rem;
    }

    :is(
        .pkp_block.quick-menu,
        .pkp_block.block_quick_menu,
        .pkp_block.block_quickmenu,
        #customblock-quick-menu,
        #customblock-quickmenu,
        #customblock-QuickMenu,
        #customblock-quickMenu
    ) :is(
        .content > a,
        li > a,
        a.quick-menu__link
    ):is(:hover, :focus-visible) {
        transform: translateX(3px);
    }
}

/* Avoid hover movement for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
    :is(
        .pkp_block.quick-menu,
        .pkp_block.block_quick_menu,
        .pkp_block.block_quickmenu,
        #customblock-quick-menu,
        #customblock-quickmenu,
        #customblock-QuickMenu,
        #customblock-quickMenu
    ) :is(
        .content > a,
        li > a,
        a.quick-menu__link
    ):is(:hover, :focus-visible, :active) {
        transform: none;
    }
}



/* ==========================================================================
   24. SIDEBAR CUSTOM MENU HOVER EFFECTS (customblock-menu)
   V3 Final — Biru Soft + Fade Only + Teks Dongker Peqat
   ========================================================================== */

/*
 * This section styles the OJS Custom Block with ID "customblock-menu".
 * It overrides inline styles and provides smooth FADE-ONLY hover transitions.
 * All selectors use !important to ensure priority over inline styles.
 */

#customblock-menu,
#customblock-menu.pkp_block,
.pkp_block#customblock-menu {
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Hide the default block title */
#customblock-menu > .title,
#customblock-menu.pkp_block > .title,
.pkp_block#customblock-menu > .title {
    display: none !important;
}

/* Remove default content padding */
#customblock-menu > .content,
#customblock-menu.pkp_block > .content,
.pkp_block#customblock-menu > .content {
    padding: 0 !important;
    background: transparent !important;
}

/* Reset nested content divs */
#customblock-menu .content .content {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* Style each menu paragraph as a button */
#customblock-menu p,
#customblock-menu .content p {
    margin: 0 0 0.58rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

#customblock-menu p:last-child,
#customblock-menu .content p:last-child {
    margin-bottom: 0 !important;
}

/* === MENU LINKS — BIRU SOFT + TEKS DONGKER PEKAT === */
#customblock-menu p > a,
#customblock-menu .content p > a,
#customblock-menu a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0.78rem 1rem !important;
    overflow: hidden !important;
    border: 1px solid #b8d4e8 !important;
    border-radius: 8px !important;
    color: #0a1f44 !important;
    background: #7FB3D5 !important;
    box-shadow: 0 2px 6px rgba(10, 31, 68, 0.06) !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    /* Fade in / fade out only */
    transition:
        color 350ms ease,
        background-color 350ms ease,
        border-color 350ms ease,
        box-shadow 350ms ease !important;
}

/* === HOVER STATE — BIRU GELAP TERANG, FADE ONLY === */
#customblock-menu p > a:hover,
#customblock-menu p > a:focus-visible,
#customblock-menu .content p > a:hover,
#customblock-menu .content p > a:focus-visible,
#customblock-menu a:hover,
#customblock-menu a:focus-visible {
    border-color: #0d6e9e !important;
    color: #ffffff !important;
    background: #0d6e9e !important;
    box-shadow: 0 6px 20px rgba(13, 110, 158, 0.28) !important;
}

/* === TEXT STYLING === */
#customblock-menu p > a > strong,
#customblock-menu .content p > a > strong,
#customblock-menu a > strong {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    font-weight: 800 !important;
}

#customblock-menu p > a span,
#customblock-menu .content p > a span,
#customblock-menu a span {
    position: relative !important;
    z-index: 1 !important;
    color: #0a1f44 !important;
    font-family: 'Avenir Book', 'Segoe UI', sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    transition: color 350ms ease !important;
}

#customblock-menu p > a:hover span,
#customblock-menu p > a:focus-visible span,
#customblock-menu .content p > a:hover span,
#customblock-menu .content p > a:focus-visible span,
#customblock-menu a:hover span,
#customblock-menu a:focus-visible span {
    color: #ffffff !important;
}

/* === BOTTOM ACCENT LINE — FADE IN FROM CENTER === */
#customblock-menu p > a::after,
#customblock-menu .content p > a::after,
#customblock-menu a::after {
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 0 !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: #a8dff0 !important;
    transform: translateX(-50%) !important;
    opacity: 0 !important;
    transition: width 350ms ease, opacity 350ms ease !important;
    content: "" !important;
}

#customblock-menu p > a:hover::after,
#customblock-menu p > a:focus-visible::after,
#customblock-menu .content p > a:hover::after,
#customblock-menu .content p > a:focus-visible::after,
#customblock-menu a:hover::after,
#customblock-menu a:focus-visible::after {
    width: 50% !important;
    opacity: 1 !important;
}

/* === MOBILE === */
@media (max-width: 767px) {
    #customblock-menu p > a,
    #customblock-menu .content p > a,
    #customblock-menu a {
        min-height: 48px !important;
        padding: 0.75rem 0.82rem !important;
        font-size: 0.84rem !important;
    }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    #customblock-menu p > a,
    #customblock-menu .content p > a,
    #customblock-menu a,
    #customblock-menu p > a span,
    #customblock-menu .content p > a span,
    #customblock-menu a span,
    #customblock-menu p > a::after,
    #customblock-menu .content p > a::after,
    #customblock-menu a::after {
        transition: none !important;
    }
}

/* ==========================================================================
   25. OJS HEADER ACCOUNT + ARTICLE DETAIL LAYOUT FIX
   Add this section at the END of the stylesheet.
   Targets OJS 3.x Default Theme and common Bootstrap-based OJS themes.
   ========================================================================== */

:root {
    --ojs-header-blue: #2d279c;
    --ojs-header-blue-dark: #211b83;
    --ojs-header-blue-hover: #443bc2;
    --ojs-header-accent: #6f83f3;

    --ojs-article-aside: 310px;
    --ojs-article-gap: 34px;
    --ojs-article-border: #dfe5ee;
    --ojs-article-soft: #f7f9fc;
    --ojs-article-title: #10235b;
}

/* --------------------------------------------------------------------------
   A. HEADER FIX
   1. Moves the user account row above the primary navigation.
   2. Removes the full-width grey account area.
   3. Keeps the account row compact and aligned to the right.
   -------------------------------------------------------------------------- */

.pkp_structure_head {
    border-top: 7px solid var(--ojs-header-accent) !important;
    background: var(--ojs-header-blue) !important;
}

.pkp_structure_head::before {
    display: none !important;
    content: none !important;
}

.pkp_structure_head .pkp_head_wrapper,
.pkp_structure_head .pkp_site_name_wrapper,
.pkp_structure_head .pkp_site_nav_menu,
.pkp_structure_head .pkp_navigation_primary_row,
.pkp_structure_head .pkp_navigation_user_wrapper {
    background-color: var(--ojs-header-blue) !important;
    background-image: none !important;
}

.pkp_structure_head .pkp_navigation_primary_row {
    border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

.pkp_structure_head .pkp_navigation_primary > li > a,
.pkp_structure_head .pkp_navigation_search_wrapper a {
    color: #ffffff !important;
}

.pkp_structure_head .pkp_navigation_primary > li > a:hover,
.pkp_structure_head .pkp_navigation_primary > li > a:focus,
.pkp_structure_head .pkp_navigation_primary > li > a[aria-current="page"],
.pkp_structure_head .pkp_navigation_search_wrapper a:hover,
.pkp_structure_head .pkp_navigation_search_wrapper a:focus {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.10) !important;
}

/* Desktop and wide tablet */
@media (min-width: 992px) {
    /*
     * The OJS user-navigation wrapper normally comes after the primary menu
     * in the HTML. CSS Grid changes the visual order without editing Twig.
     */
    .pkp_structure_head .pkp_site_nav_menu {
        position: relative !important;
        display: grid !important;
        grid-template-areas:
            "user"
            "primary" !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .pkp_structure_head .pkp_navigation_user_wrapper {
        position: relative !important;
        z-index: 30 !important;
        grid-area: user !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: var(--ojs-header-blue-dark) !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .pkp_structure_head .pkp_navigation_primary_row {
        grid-area: primary !important;
        margin: 0 !important;
        background: var(--ojs-header-blue) !important;
    }

    .pkp_structure_head .pkp_navigation_user {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0.35rem !important;
        width: min(calc(100% - 2rem), var(--journal-container, 1200px)) !important;
        max-width: var(--journal-container, 1200px) !important;
        min-height: 46px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        text-align: right !important;
    }

    .pkp_structure_head .pkp_navigation_user > li {
        position: relative !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pkp_structure_head .pkp_navigation_user > li > a {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.45rem !important;
        min-height: 36px !important;
        margin: 5px 0 !important;
        padding: 0.45rem 0.8rem !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        border-radius: 8px !important;
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.08) !important;
        box-shadow: none !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-decoration: none !important;
        transition:
            color 180ms ease,
            background-color 180ms ease,
            border-color 180ms ease !important;
    }

    .pkp_structure_head .pkp_navigation_user > li > a:hover,
    .pkp_structure_head .pkp_navigation_user > li > a:focus {
        border-color: rgba(255, 255, 255, 0.34) !important;
        color: #ffffff !important;
        background: var(--ojs-header-blue-hover) !important;
    }

    .pkp_structure_head .pkp_navigation_user .task_count {
        display: inline-grid !important;
        place-items: center !important;
        min-width: 25px !important;
        height: 25px !important;
        margin-left: 0.2rem !important;
        padding: 0 0.4rem !important;
        border-radius: 999px !important;
        color: #18205a !important;
        background: #f3dc7d !important;
        font-size: 0.72rem !important;
        font-weight: 850 !important;
    }

    .pkp_structure_head .pkp_navigation_user .dropdown-menu,
    .pkp_structure_head .pkp_navigation_user ul {
        right: 0 !important;
        left: auto !important;
    }
}

/* Mobile menu keeps OJS's collapsible flow but removes grey background */
@media (max-width: 991px) {
    .pkp_structure_head .pkp_navigation_user_wrapper {
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: var(--ojs-header-blue-dark) !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .pkp_structure_head .pkp_navigation_user {
        width: 100% !important;
        margin: 0 !important;
        padding: 0.55rem !important;
        border: 0 !important;
        background: transparent !important;
    }

    .pkp_structure_head .pkp_navigation_user > li > a {
        color: #ffffff !important;
        background: transparent !important;
    }

    .pkp_structure_head .pkp_navigation_user > li > a:hover,
    .pkp_structure_head .pkp_navigation_user > li > a:focus {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.10) !important;
    }
}

/* --------------------------------------------------------------------------
   B. ARTICLE PAGE SHELL
   Removes the general journal sidebar on ARTICLE DETAIL pages only.
   The article's own metadata column remains visible on the right.
   -------------------------------------------------------------------------- */

body.pkp_page_article .pkp_structure_content,
.pkp_page_article .pkp_structure_content {
    display: block !important;
    width: min(calc(100% - 2rem), 1280px) !important;
    max-width: 1280px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

body.pkp_page_article .pkp_structure_main,
.pkp_page_article .pkp_structure_main {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

body.pkp_page_article .pkp_structure_sidebar,
.pkp_page_article .pkp_structure_sidebar {
    display: none !important;
}

/* Clear legacy Bootstrap/OJS floats */
.pkp_page_article .obj_article_details::after,
.pkp_page_article .obj_article_details .row::after {
    display: table !important;
    clear: both !important;
    content: "" !important;
}

/* --------------------------------------------------------------------------
   C. ARTICLE DETAIL: LEFT CONTENT + RIGHT METADATA
   Left:
   - Article title
   - Authors
   - Abstract
   - References

   Right:
   - Issue/article cover
   - Publication date
   - Issue, section, DOI, licence and other publication attributes
   -------------------------------------------------------------------------- */

.pkp_page_article .obj_article_details {
    min-width: 0 !important;
}

/* Remove negative Bootstrap row margins that compress article content */
.pkp_page_article .obj_article_details > .row,
.pkp_page_article .obj_article_details .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Title: left column, justified on both edges */
.pkp_page_article .obj_article_details .page_title,
.pkp_page_article .obj_article_details > .page_title,
.pkp_page_article .obj_article_details h1.page_title {
    margin: 0 0 1.1rem !important;
    padding: 0 0 0.95rem !important;
    border-bottom: 3px solid var(--ojs-header-blue) !important;
    color: var(--ojs-article-title) !important;
    font-size: clamp(1.55rem, 2.6vw, 2.35rem) !important;
    font-weight: 800 !important;
    line-height: 1.32 !important;
    letter-spacing: -0.025em !important;
    text-align: justify !important;
    text-align-last: left !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
}

/* Common row fallback when display: contents is unavailable or DOM differs */
@media (min-width: 900px) {
    .pkp_page_article .obj_article_details > .row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--ojs-article-aside) !important;
        gap: var(--ojs-article-gap) !important;
        align-items: start !important;
    }

    /*
     * Standard OJS Default Theme has:
     * .obj_article_details > .page_title
     * .obj_article_details > .row > .main_entry + .entry_details
     *
     * display: contents lets the title occupy the left grid column while
     * entry_details begins at the same top position in the right column.
     */
    @supports (display: contents) {
        .pkp_page_article .obj_article_details {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) var(--ojs-article-aside) !important;
            grid-template-rows: auto auto !important;
            column-gap: var(--ojs-article-gap) !important;
            align-items: start !important;
        }

        .pkp_page_article .obj_article_details > .row {
            display: contents !important;
        }

        .pkp_page_article .obj_article_details > .page_title,
        .pkp_page_article .obj_article_details > h1.page_title {
            grid-column: 1 !important;
            grid-row: 1 !important;
        }

        .pkp_page_article .obj_article_details .main_entry {
            grid-column: 1 !important;
            grid-row: 2 !important;
        }

        .pkp_page_article .obj_article_details .entry_details {
            grid-column: 2 !important;
            grid-row: 1 / span 2 !important;
        }
    }

    .pkp_page_article .obj_article_details .main_entry {
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pkp_page_article .obj_article_details .entry_details {
        position: sticky !important;
        top: 1.25rem !important;
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: start !important;
    }
}

/* Authors directly under the title */
.pkp_page_article .obj_article_details .main_entry .authors,
.pkp_page_article .obj_article_details .main_entry .item.authors,
.pkp_page_article .obj_article_details .authors {
    margin: 0 0 1rem !important;
    padding: 1rem 1.1rem !important;
    border: 1px solid #dce4f3 !important;
    border-left: 5px solid var(--ojs-header-blue) !important;
    border-radius: 8px !important;
    color: #23386f !important;
    background: #f5f7ff !important;
    box-shadow: none !important;
}

.pkp_page_article .obj_article_details .authors .label,
.pkp_page_article .obj_article_details .authors > h2,
.pkp_page_article .obj_article_details .authors > h3 {
    margin: 0 0 0.55rem !important;
    padding: 0 !important;
    color: var(--ojs-article-title) !important;
    background: transparent !important;
    font-size: 0.92rem !important;
    font-weight: 850 !important;
}

.pkp_page_article .obj_article_details .author {
    margin: 0 0 0.55rem !important;
    color: #263a72 !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
    text-align: left !important;
}

.pkp_page_article .obj_article_details .affiliation {
    color: #5b6784 !important;
    font-size: 0.86rem !important;
    font-weight: 500 !important;
}

/* Main article sections */
.pkp_page_article .obj_article_details .main_entry > .item,
.pkp_page_article .obj_article_details .main_entry section.item {
    width: 100% !important;
    margin: 0 0 1.1rem !important;
    padding: 1.15rem 1.25rem !important;
    border: 1px solid var(--ojs-article-border) !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 16px rgba(20, 36, 82, 0.045) !important;
}

.pkp_page_article .obj_article_details .main_entry > .item .label,
.pkp_page_article .obj_article_details .main_entry > .item > h2,
.pkp_page_article .obj_article_details .main_entry > .item > h3 {
    display: block !important;
    margin: -1.15rem -1.25rem 1rem !important;
    padding: 0.72rem 1rem !important;
    border-radius: 9px 9px 0 0 !important;
    color: #ffffff !important;
    background: var(--ojs-header-blue) !important;
    font-size: 0.93rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
}

/* Abstract text */
.pkp_page_article .obj_article_details .abstract,
.pkp_page_article .obj_article_details .abstract .value,
.pkp_page_article .obj_article_details .abstract p {
    color: #27334a !important;
    font-size: 0.96rem !important;
    line-height: 1.8 !important;
    text-align: justify !important;
    text-align-last: left !important;
}

/* References: readable list with hanging indentation */
.pkp_page_article .obj_article_details .references,
.pkp_page_article .obj_article_details .references .value {
    color: #27334a !important;
    font-size: 0.9rem !important;
    line-height: 1.68 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
}

.pkp_page_article .obj_article_details .references p,
.pkp_page_article .obj_article_details .references li {
    margin: 0 0 0.8rem !important;
    padding-left: 1.35rem !important;
    text-indent: -1.35rem !important;
}

/* Right metadata column */
.pkp_page_article .obj_article_details .entry_details {
    border: 1px solid var(--ojs-article-border) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(20, 36, 82, 0.08) !important;
}

/* Cover at the top */
.pkp_page_article .obj_article_details .entry_details .cover_image,
.pkp_page_article .obj_article_details .entry_details .cover,
.pkp_page_article .obj_article_details .entry_details figure {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 1.1rem !important;
    border: 0 !important;
    background: #ffffff !important;
    text-align: center !important;
}

.pkp_page_article .obj_article_details .entry_details .cover_image img,
.pkp_page_article .obj_article_details .entry_details .cover img,
.pkp_page_article .obj_article_details .entry_details figure img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: 410px !important;
    margin: 0 auto !important;
    border: 1px solid #d8deea !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 28px rgba(20, 36, 82, 0.16) !important;
    object-fit: contain !important;
}

/* Metadata blocks such as Published, Issue, Section and Licence */
.pkp_page_article .obj_article_details .entry_details .item {
    width: auto !important;
    margin: 0 !important;
    padding: 1rem !important;
    border: 0 !important;
    border-top: 1px solid var(--ojs-article-border) !important;
    border-radius: 0 !important;
    color: #34415c !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.pkp_page_article .obj_article_details .entry_details .item:first-child {
    border-top: 0 !important;
}

.pkp_page_article .obj_article_details .entry_details .item .label,
.pkp_page_article .obj_article_details .entry_details .item > h2,
.pkp_page_article .obj_article_details .entry_details .item > h3 {
    display: block !important;
    width: 100% !important;
    margin: 0 0 0.65rem !important;
    padding: 0.5rem 0.7rem !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    background: var(--ojs-header-blue) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.025em !important;
    text-transform: uppercase !important;
}

.pkp_page_article .obj_article_details .entry_details .item .value,
.pkp_page_article .obj_article_details .entry_details .published,
.pkp_page_article .obj_article_details .entry_details .date_published,
.pkp_page_article .obj_article_details .entry_details time {
    color: #33415e !important;
    font-size: 0.86rem !important;
    line-height: 1.6 !important;
    overflow-wrap: anywhere !important;
}

.pkp_page_article .obj_article_details .entry_details a {
    color: #223b9d !important;
    font-weight: 700 !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 0.16em !important;
}

.pkp_page_article .obj_article_details .entry_details a:hover,
.pkp_page_article .obj_article_details .entry_details a:focus {
    color: #171168 !important;
}

/* PDF/HTML galley buttons inside the right column */
.pkp_page_article .obj_article_details .entry_details .obj_galley_link,
.pkp_page_article .obj_article_details .entry_details .galley-link,
.pkp_page_article .obj_article_details .entry_details .galleys_links a {
    display: flex !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0.35rem 0 0 !important;
    padding: 0.65rem 0.8rem !important;
    border: 1px solid var(--ojs-header-blue) !important;
    border-radius: 7px !important;
    color: #ffffff !important;
    background: var(--ojs-header-blue) !important;
    font-size: 0.78rem !important;
    font-weight: 850 !important;
    text-align: center !important;
    text-decoration: none !important;
}

.pkp_page_article .obj_article_details .entry_details .obj_galley_link:hover,
.pkp_page_article .obj_article_details .entry_details .galley-link:hover,
.pkp_page_article .obj_article_details .entry_details .galleys_links a:hover {
    border-color: var(--ojs-header-blue-hover) !important;
    color: #ffffff !important;
    background: var(--ojs-header-blue-hover) !important;
}

/* --------------------------------------------------------------------------
   D. ARTICLE RESPONSIVENESS
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
    body.pkp_page_article .pkp_structure_content,
    .pkp_page_article .pkp_structure_content {
        width: min(calc(100% - 1rem), 1280px) !important;
    }

    .pkp_page_article .obj_article_details,
    .pkp_page_article .obj_article_details > .row {
        display: block !important;
    }

    .pkp_page_article .obj_article_details .main_entry,
    .pkp_page_article .obj_article_details .entry_details {
        position: static !important;
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .pkp_page_article .obj_article_details .entry_details {
        margin-top: 1.25rem !important;
    }

    .pkp_page_article .obj_article_details .page_title {
        font-size: clamp(1.35rem, 6vw, 1.85rem) !important;
        text-align: left !important;
        text-align-last: auto !important;
        hyphens: manual !important;
    }

    .pkp_page_article .obj_article_details .entry_details .cover_image img,
    .pkp_page_article .obj_article_details .entry_details .cover img,
    .pkp_page_article .obj_article_details .entry_details figure img {
        max-height: 360px !important;
    }
}

@media (max-width: 479px) {
    .pkp_page_article .obj_article_details .main_entry > .item,
    .pkp_page_article .obj_article_details .main_entry section.item {
        padding: 1rem !important;
    }

    .pkp_page_article .obj_article_details .main_entry > .item .label,
    .pkp_page_article .obj_article_details .main_entry > .item > h2,
    .pkp_page_article .obj_article_details .main_entry > .item > h3 {
        margin: -1rem -1rem 0.85rem !important;
    }

    .pkp_page_article .obj_article_details .references p,
    .pkp_page_article .obj_article_details .references li {
        padding-left: 0 !important;
        text-indent: 0 !important;
    }
}

/* ==========================================================================
   26. ARTICLE THREE-AREA LAYOUT + ARCHIVE CARD REVISION
   Place this section at the END of the stylesheet.

   DESKTOP ARTICLE PAGE:
   [ Article content ] [ Cover + publication metadata ] [ Journal sidebar ]

   ARCHIVES:
   Two proportional issue cards per row with readable descriptions.
   ========================================================================== */

:root {
    --ojs-page-wide: 1480px;
    --ojs-journal-sidebar: 285px;
    --ojs-article-metadata: 270px;
    --ojs-layout-gap: 24px;
    --ojs-card-border: #dce4ec;
    --ojs-card-shadow: 0 7px 24px rgba(20, 37, 74, 0.07);
}

/* --------------------------------------------------------------------------
   A. ARTICLE PAGE OUTER LAYOUT
   Restores the journal sidebar on the far right.
   -------------------------------------------------------------------------- */

@media (min-width: 1180px) {
    body.pkp_page_article .pkp_structure_content,
    body.page_article .pkp_structure_content,
    body:has(.pkp_page_article) .pkp_structure_content {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            var(--ojs-journal-sidebar) !important;
        gap: var(--ojs-layout-gap) !important;
        align-items: start !important;
        width: min(calc(100% - 2rem), var(--ojs-page-wide)) !important;
        max-width: var(--ojs-page-wide) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    body.pkp_page_article .pkp_structure_main,
    body.page_article .pkp_structure_main,
    body:has(.pkp_page_article) .pkp_structure_main {
        grid-column: 1 !important;
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    body.pkp_page_article .pkp_structure_sidebar,
    body.page_article .pkp_structure_sidebar,
    body:has(.pkp_page_article) .pkp_structure_sidebar {
        display: flex !important;
        grid-column: 2 !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
}

/*
 * Between 900px and 1179px the article retains its internal two-column
 * layout, while the journal sidebar is moved below to prevent compression.
 */
@media (min-width: 900px) and (max-width: 1179px) {
    body.pkp_page_article .pkp_structure_content,
    body.page_article .pkp_structure_content,
    body:has(.pkp_page_article) .pkp_structure_content {
        display: block !important;
        width: min(calc(100% - 1.5rem), 1080px) !important;
        max-width: 1080px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    body.pkp_page_article .pkp_structure_main,
    body.page_article .pkp_structure_main,
    body:has(.pkp_page_article) .pkp_structure_main {
        width: 100% !important;
        max-width: none !important;
    }

    body.pkp_page_article .pkp_structure_sidebar,
    body.page_article .pkp_structure_sidebar,
    body:has(.pkp_page_article) .pkp_structure_sidebar {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1rem !important;
        width: 100% !important;
        margin-top: 1.5rem !important;
    }
}

/* --------------------------------------------------------------------------
   B. ARTICLE INTERNAL LAYOUT
   Title spans article content and metadata.
   Author, abstract and references stay in the left column.
   Cover, PDF, date and publication attributes stay in the middle column.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
    .pkp_page_article .obj_article_details {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            var(--ojs-article-metadata) !important;
        grid-template-rows: auto auto !important;
        column-gap: 26px !important;
        row-gap: 0 !important;
        align-items: start !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .pkp_page_article .obj_article_details > .page_title,
    .pkp_page_article .obj_article_details > h1.page_title {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        width: 100% !important;
    }

    .pkp_page_article .obj_article_details > .row {
        display: contents !important;
        margin: 0 !important;
    }

    .pkp_page_article .obj_article_details .main_entry {
        grid-column: 1 !important;
        grid-row: 2 !important;
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pkp_page_article .obj_article_details .entry_details {
        position: sticky !important;
        top: 1rem !important;
        grid-column: 2 !important;
        grid-row: 2 !important;
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: start !important;
    }
}

/* Article title remains readable and balanced */
.pkp_page_article .obj_article_details .page_title,
.pkp_page_article .obj_article_details > .page_title,
.pkp_page_article .obj_article_details h1.page_title {
    margin: 0 0 1.05rem !important;
    padding: 0 0 0.95rem !important;
    border-bottom: 3px solid #30269f !important;
    color: #07266f !important;
    font-size: clamp(1.55rem, 2.35vw, 2.25rem) !important;
    font-weight: 800 !important;
    line-height: 1.32 !important;
    letter-spacing: -0.022em !important;
    text-align: justify !important;
    text-align-last: left !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
}

/* Author panel stays directly below the title on the left */
.pkp_page_article .obj_article_details .main_entry .authors,
.pkp_page_article .obj_article_details .main_entry .item.authors {
    margin: 0 0 1rem !important;
    padding: 1rem 1.1rem !important;
    border: 1px solid #dce3f2 !important;
    border-left: 5px solid #30269f !important;
    border-radius: 8px !important;
    background: #f5f7ff !important;
    box-shadow: none !important;
}

.pkp_page_article .obj_article_details .main_entry .author {
    margin-bottom: 0.65rem !important;
    color: #0a2a6e !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
    text-align: left !important;
}

/* Main article blocks */
.pkp_page_article .obj_article_details .main_entry > .item,
.pkp_page_article .obj_article_details .main_entry section.item {
    width: 100% !important;
    margin: 0 0 1rem !important;
    padding: 1.15rem 1.2rem !important;
    border: 1px solid var(--ojs-card-border) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 15px rgba(20, 37, 74, 0.045) !important;
}

.pkp_page_article .obj_article_details .main_entry > .item .label,
.pkp_page_article .obj_article_details .main_entry > .item > h2,
.pkp_page_article .obj_article_details .main_entry > .item > h3 {
    display: block !important;
    margin: -1.15rem -1.2rem 0.95rem !important;
    padding: 0.7rem 0.95rem !important;
    border-radius: 8px 8px 0 0 !important;
    color: #ffffff !important;
    background: #30269f !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    text-transform: none !important;
}

/* Justified readable abstract and references */
.pkp_page_article .obj_article_details .abstract,
.pkp_page_article .obj_article_details .abstract .value,
.pkp_page_article .obj_article_details .abstract p {
    color: #24324a !important;
    font-size: 0.95rem !important;
    line-height: 1.8 !important;
    text-align: justify !important;
    text-align-last: left !important;
}

.pkp_page_article .obj_article_details .references,
.pkp_page_article .obj_article_details .references .value {
    color: #24324a !important;
    font-size: 0.89rem !important;
    line-height: 1.67 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
}

/* --------------------------------------------------------------------------
   C. MIDDLE ARTICLE METADATA COLUMN
   -------------------------------------------------------------------------- */

.pkp_page_article .obj_article_details .entry_details {
    overflow: hidden !important;
    border: 1px solid var(--ojs-card-border) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: var(--ojs-card-shadow) !important;
}

/* Cover at top of middle column */
.pkp_page_article .obj_article_details .entry_details .cover_image,
.pkp_page_article .obj_article_details .entry_details .cover,
.pkp_page_article .obj_article_details .entry_details figure {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.8rem !important;
    border: 0 !important;
    background: #ffffff !important;
    text-align: center !important;
}

.pkp_page_article .obj_article_details .entry_details .cover_image img,
.pkp_page_article .obj_article_details .entry_details .cover img,
.pkp_page_article .obj_article_details .entry_details figure img {
    display: block !important;
    width: 100% !important;
    max-width: 238px !important;
    height: auto !important;
    max-height: 390px !important;
    margin: 0 auto !important;
    border: 1px solid #d7deea !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 24px rgba(17, 37, 84, 0.15) !important;
    object-fit: contain !important;
}

/* Publication metadata blocks */
.pkp_page_article .obj_article_details .entry_details .item {
    width: auto !important;
    margin: 0 !important;
    padding: 0.85rem !important;
    border: 0 !important;
    border-top: 1px solid var(--ojs-card-border) !important;
    border-radius: 0 !important;
    color: #34415c !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.pkp_page_article .obj_article_details .entry_details .item .label,
.pkp_page_article .obj_article_details .entry_details .item > h2,
.pkp_page_article .obj_article_details .entry_details .item > h3 {
    display: block !important;
    width: 100% !important;
    margin: 0 0 0.55rem !important;
    padding: 0.46rem 0.58rem !important;
    border-radius: 5px !important;
    color: #ffffff !important;
    background: #30269f !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.025em !important;
    text-transform: uppercase !important;
}

.pkp_page_article .obj_article_details .entry_details .item .value,
.pkp_page_article .obj_article_details .entry_details .published,
.pkp_page_article .obj_article_details .entry_details .date_published,
.pkp_page_article .obj_article_details .entry_details time {
    color: #34415c !important;
    font-size: 0.81rem !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere !important;
}

/* PDF and HTML galley buttons */
.pkp_page_article .obj_article_details .entry_details .obj_galley_link,
.pkp_page_article .obj_article_details .entry_details .galley-link,
.pkp_page_article .obj_article_details .entry_details .galleys_links a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 39px !important;
    margin: 0.25rem 0 0 !important;
    padding: 0.58rem 0.7rem !important;
    border: 1px solid #30269f !important;
    border-radius: 5px !important;
    color: #ffffff !important;
    background: #30269f !important;
    font-size: 0.72rem !important;
    font-weight: 850 !important;
    text-align: center !important;
    text-decoration: none !important;
}

.pkp_page_article .obj_article_details .entry_details .obj_galley_link:hover,
.pkp_page_article .obj_article_details .entry_details .galley-link:hover,
.pkp_page_article .obj_article_details .entry_details .galleys_links a:hover {
    border-color: #4339c3 !important;
    color: #ffffff !important;
    background: #4339c3 !important;
}

/* --------------------------------------------------------------------------
   D. ARTICLE MOBILE STACKING
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
    .pkp_page_article .obj_article_details,
    .pkp_page_article .obj_article_details > .row {
        display: block !important;
    }

    .pkp_page_article .obj_article_details .main_entry,
    .pkp_page_article .obj_article_details .entry_details {
        position: static !important;
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .pkp_page_article .obj_article_details .entry_details {
        margin-top: 1.2rem !important;
    }

    .pkp_page_article .obj_article_details .page_title {
        text-align: left !important;
        text-align-last: auto !important;
        hyphens: manual !important;
    }

    .pkp_page_article .obj_article_details .entry_details .cover_image img,
    .pkp_page_article .obj_article_details .entry_details .cover img,
    .pkp_page_article .obj_article_details .entry_details figure img {
        width: auto !important;
        max-width: min(100%, 260px) !important;
    }
}

/* --------------------------------------------------------------------------
   E. ARCHIVE PAGE: TWO NORMAL PROPORTIONAL COLUMNS
   -------------------------------------------------------------------------- */

/* The issue list itself */
body.pkp_page_issue_archive .cmp_issue_list,
body.page_issue_archive .cmp_issue_list,
body:has(.page_issue_archive) .cmp_issue_list,
.page_issue_archive .cmp_issue_list,
.page_issue_archive .issues_archive,
.page_issues .cmp_issue_list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 1.25rem 0 0 !important;
    padding: 0 !important;
}

/* Individual issue card */
body.pkp_page_issue_archive .obj_issue_summary,
body.page_issue_archive .obj_issue_summary,
body:has(.page_issue_archive) .obj_issue_summary,
.page_issue_archive .obj_issue_summary,
.page_issues .obj_issue_summary {
    display: grid !important;
    grid-template-columns: 116px minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr !important;
    column-gap: 1rem !important;
    row-gap: 0.55rem !important;
    align-items: start !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 1rem !important;
    overflow: hidden !important;
    border: 1px solid var(--ojs-card-border) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: var(--ojs-card-shadow) !important;
}

/* Cover occupies the left side */
body.pkp_page_issue_archive .obj_issue_summary .cover,
body.page_issue_archive .obj_issue_summary .cover,
body:has(.page_issue_archive) .obj_issue_summary .cover,
.page_issue_archive .obj_issue_summary .cover,
.page_issues .obj_issue_summary .cover {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 116px !important;
    margin: 0 !important;
    align-self: start !important;
}

body.pkp_page_issue_archive .obj_issue_summary .cover img,
body.page_issue_archive .obj_issue_summary .cover img,
body:has(.page_issue_archive) .obj_issue_summary .cover img,
.page_issue_archive .obj_issue_summary .cover img,
.page_issues .obj_issue_summary .cover img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 175px !important;
    margin: 0 !important;
    border: 1px solid #d7deea !important;
    border-radius: 5px !important;
    box-shadow: 0 8px 20px rgba(18, 37, 77, 0.13) !important;
    object-fit: contain !important;
}

/* Title and issue identification */
body.pkp_page_issue_archive .obj_issue_summary .title,
body.page_issue_archive .obj_issue_summary .title,
body:has(.page_issue_archive) .obj_issue_summary .title,
.page_issue_archive .obj_issue_summary .title,
.page_issues .obj_issue_summary .title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    color: #075c63 !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

body.pkp_page_issue_archive .obj_issue_summary .title a,
body.page_issue_archive .obj_issue_summary .title a,
body:has(.page_issue_archive) .obj_issue_summary .title a,
.page_issue_archive .obj_issue_summary .title a,
.page_issues .obj_issue_summary .title a {
    color: #075c63 !important;
    text-decoration: none !important;
}

body.pkp_page_issue_archive .obj_issue_summary .title a:hover,
body.page_issue_archive .obj_issue_summary .title a:hover,
body:has(.page_issue_archive) .obj_issue_summary .title a:hover,
.page_issue_archive .obj_issue_summary .title a:hover,
.page_issues .obj_issue_summary .title a:hover {
    color: #30269f !important;
}

/* Description uses the full available width, not a narrow vertical strip */
body.pkp_page_issue_archive .obj_issue_summary .description,
body.page_issue_archive .obj_issue_summary .description,
body:has(.page_issue_archive) .obj_issue_summary .description,
.page_issue_archive .obj_issue_summary .description,
.page_issues .obj_issue_summary .description {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    color: #34415c !important;
    font-size: 0.88rem !important;
    line-height: 1.65 !important;
    text-align: justify !important;
    text-align-last: left !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
}

/* Remove legacy floats and constrained widths */
body.pkp_page_issue_archive .obj_issue_summary > *,
body.page_issue_archive .obj_issue_summary > *,
body:has(.page_issue_archive) .obj_issue_summary > *,
.page_issue_archive .obj_issue_summary > *,
.page_issues .obj_issue_summary > * {
    float: none !important;
    max-width: none;
}

/* Archive responsive behavior */
@media (max-width: 1050px) {
    body.pkp_page_issue_archive .cmp_issue_list,
    body.page_issue_archive .cmp_issue_list,
    body:has(.page_issue_archive) .cmp_issue_list,
    .page_issue_archive .cmp_issue_list,
    .page_issue_archive .issues_archive,
    .page_issues .cmp_issue_list {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 560px) {
    body.pkp_page_issue_archive .obj_issue_summary,
    body.page_issue_archive .obj_issue_summary,
    body:has(.page_issue_archive) .obj_issue_summary,
    .page_issue_archive .obj_issue_summary,
    .page_issues .obj_issue_summary {
        grid-template-columns: 88px minmax(0, 1fr) !important;
        column-gap: 0.8rem !important;
        padding: 0.85rem !important;
    }

    body.pkp_page_issue_archive .obj_issue_summary .cover,
    body.page_issue_archive .obj_issue_summary .cover,
    body:has(.page_issue_archive) .obj_issue_summary .cover,
    .page_issue_archive .obj_issue_summary .cover,
    .page_issues .obj_issue_summary .cover {
        width: 88px !important;
    }

    body.pkp_page_issue_archive .obj_issue_summary .description,
    body.page_issue_archive .obj_issue_summary .description,
    body:has(.page_issue_archive) .obj_issue_summary .description,
    .page_issue_archive .obj_issue_summary .description,
    .page_issues .obj_issue_summary .description {
        text-align: left !important;
        text-align-last: auto !important;
        hyphens: manual !important;
    }
}

/* ==========================================================================
   27. ARCHIVES SINGLE-COLUMN PLAIN LIST
   Place this section at the END of the stylesheet.

   Layout:
   [ Cover ] [ Issue title + volume + description ]

   One issue per row, arranged vertically from top to bottom.
   ========================================================================== */

/* Archive list becomes one vertical column */
body.pkp_page_issue_archive .cmp_issue_list,
body.page_issue_archive .cmp_issue_list,
body:has(.page_issue_archive) .cmp_issue_list,
.page_issue_archive .cmp_issue_list,
.page_issue_archive .issues_archive,
.page_issues .cmp_issue_list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 1.25rem 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Each issue appears as a simple horizontal row */
body.pkp_page_issue_archive .obj_issue_summary,
body.page_issue_archive .obj_issue_summary,
body:has(.page_issue_archive) .obj_issue_summary,
.page_issue_archive .obj_issue_summary,
.page_issues .obj_issue_summary {
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr !important;
    column-gap: 1.4rem !important;
    row-gap: 0.55rem !important;
    align-items: start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 1.35rem 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid #dce4ec !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition:
        background-color 180ms ease,
        border-color 180ms ease !important;
}

body.pkp_page_issue_archive .obj_issue_summary:first-child,
body.page_issue_archive .obj_issue_summary:first-child,
body:has(.page_issue_archive) .obj_issue_summary:first-child,
.page_issue_archive .obj_issue_summary:first-child,
.page_issues .obj_issue_summary:first-child {
    padding-top: 0.5rem !important;
}

body.pkp_page_issue_archive .obj_issue_summary:last-child,
body.page_issue_archive .obj_issue_summary:last-child,
body:has(.page_issue_archive) .obj_issue_summary:last-child,
.page_issue_archive .obj_issue_summary:last-child,
.page_issues .obj_issue_summary:last-child {
    border-bottom: 0 !important;
}

/* Very subtle hover, without card appearance */
body.pkp_page_issue_archive .obj_issue_summary:hover,
body.page_issue_archive .obj_issue_summary:hover,
body:has(.page_issue_archive) .obj_issue_summary:hover,
.page_issue_archive .obj_issue_summary:hover,
.page_issues .obj_issue_summary:hover {
    border-color: #bcc9d8 !important;
    background: rgba(245, 248, 252, 0.62) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Cover on the left */
body.pkp_page_issue_archive .obj_issue_summary .cover,
body.page_issue_archive .obj_issue_summary .cover,
body:has(.page_issue_archive) .obj_issue_summary .cover,
.page_issue_archive .obj_issue_summary .cover,
.page_issues .obj_issue_summary .cover {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 150px !important;
    max-width: 150px !important;
    margin: 0 !important;
    align-self: start !important;
}

body.pkp_page_issue_archive .obj_issue_summary .cover img,
body.page_issue_archive .obj_issue_summary .cover img,
body:has(.page_issue_archive) .obj_issue_summary .cover img,
.page_issue_archive .obj_issue_summary .cover img,
.page_issues .obj_issue_summary .cover img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 215px !important;
    margin: 0 !important;
    border: 1px solid #d7deea !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    box-shadow: 0 6px 16px rgba(18, 37, 77, 0.11) !important;
    object-fit: contain !important;
}

/* Issue title and volume at the top-right */
body.pkp_page_issue_archive .obj_issue_summary .title,
body.page_issue_archive .obj_issue_summary .title,
body:has(.page_issue_archive) .obj_issue_summary .title,
.page_issue_archive .obj_issue_summary .title,
.page_issues .obj_issue_summary .title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #075c63 !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
}

body.pkp_page_issue_archive .obj_issue_summary .title a,
body.page_issue_archive .obj_issue_summary .title a,
body:has(.page_issue_archive) .obj_issue_summary .title a,
.page_issue_archive .obj_issue_summary .title a,
.page_issues .obj_issue_summary .title a {
    color: #075c63 !important;
    text-decoration: none !important;
}

body.pkp_page_issue_archive .obj_issue_summary .title a:hover,
body.page_issue_archive .obj_issue_summary .title a:hover,
body:has(.page_issue_archive) .obj_issue_summary .title a:hover,
.page_issue_archive .obj_issue_summary .title a:hover,
.page_issues .obj_issue_summary .title a:hover {
    color: #30269f !important;
}

/* Description uses the full area to the right of the cover */
body.pkp_page_issue_archive .obj_issue_summary .description,
body.page_issue_archive .obj_issue_summary .description,
body:has(.page_issue_archive) .obj_issue_summary .description,
.page_issue_archive .obj_issue_summary .description,
.page_issues .obj_issue_summary .description {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #34415c !important;
    font-size: 0.92rem !important;
    line-height: 1.72 !important;
    text-align: justify !important;
    text-align-last: left !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
}

/* Remove inherited floats and narrow widths */
body.pkp_page_issue_archive .obj_issue_summary > *,
body.page_issue_archive .obj_issue_summary > *,
body:has(.page_issue_archive) .obj_issue_summary > *,
.page_issue_archive .obj_issue_summary > *,
.page_issues .obj_issue_summary > * {
    float: none !important;
    max-width: none;
}

/* Tablet */
@media (max-width: 760px) {
    body.pkp_page_issue_archive .obj_issue_summary,
    body.page_issue_archive .obj_issue_summary,
    body:has(.page_issue_archive) .obj_issue_summary,
    .page_issue_archive .obj_issue_summary,
    .page_issues .obj_issue_summary {
        grid-template-columns: 112px minmax(0, 1fr) !important;
        column-gap: 1rem !important;
        padding: 1.1rem 0 !important;
    }

    body.pkp_page_issue_archive .obj_issue_summary .cover,
    body.page_issue_archive .obj_issue_summary .cover,
    body:has(.page_issue_archive) .obj_issue_summary .cover,
    .page_issue_archive .obj_issue_summary .cover,
    .page_issues .obj_issue_summary .cover {
        width: 112px !important;
        max-width: 112px !important;
    }

    body.pkp_page_issue_archive .obj_issue_summary .cover img,
    body.page_issue_archive .obj_issue_summary .cover img,
    body:has(.page_issue_archive) .obj_issue_summary .cover img,
    .page_issue_archive .obj_issue_summary .cover img,
    .page_issues .obj_issue_summary .cover img {
        max-height: 165px !important;
    }

    body.pkp_page_issue_archive .obj_issue_summary .description,
    body.page_issue_archive .obj_issue_summary .description,
    body:has(.page_issue_archive) .obj_issue_summary .description,
    .page_issue_archive .obj_issue_summary .description,
    .page_issues .obj_issue_summary .description {
        font-size: 0.88rem !important;
    }
}

/* Mobile: cover remains left, but more compact */
@media (max-width: 520px) {
    body.pkp_page_issue_archive .obj_issue_summary,
    body.page_issue_archive .obj_issue_summary,
    body:has(.page_issue_archive) .obj_issue_summary,
    .page_issue_archive .obj_issue_summary,
    .page_issues .obj_issue_summary {
        grid-template-columns: 86px minmax(0, 1fr) !important;
        column-gap: 0.8rem !important;
        row-gap: 0.4rem !important;
        padding: 0.95rem 0 !important;
    }

    body.pkp_page_issue_archive .obj_issue_summary .cover,
    body.page_issue_archive .obj_issue_summary .cover,
    body:has(.page_issue_archive) .obj_issue_summary .cover,
    .page_issue_archive .obj_issue_summary .cover,
    .page_issues .obj_issue_summary .cover {
        width: 86px !important;
        max-width: 86px !important;
    }

    body.pkp_page_issue_archive .obj_issue_summary .cover img,
    body.page_issue_archive .obj_issue_summary .cover img,
    body:has(.page_issue_archive) .obj_issue_summary .cover img,
    .page_issue_archive .obj_issue_summary .cover img,
    .page_issues .obj_issue_summary .cover img {
        max-height: 128px !important;
    }

    body.pkp_page_issue_archive .obj_issue_summary .title,
    body.page_issue_archive .obj_issue_summary .title,
    body:has(.page_issue_archive) .obj_issue_summary .title,
    .page_issue_archive .obj_issue_summary .title,
    .page_issues .obj_issue_summary .title {
        font-size: 0.94rem !important;
        line-height: 1.4 !important;
    }

    body.pkp_page_issue_archive .obj_issue_summary .description,
    body.page_issue_archive .obj_issue_summary .description,
    body:has(.page_issue_archive) .obj_issue_summary .description,
    .page_issue_archive .obj_issue_summary .description,
    .page_issues .obj_issue_summary .description {
        font-size: 0.82rem !important;
        line-height: 1.58 !important;
        text-align: left !important;
        text-align-last: auto !important;
        hyphens: manual !important;
    }
}

/* ==========================================================================
   28. HOMEPAGE ABOUT, INDEXING, AND CURRENT ISSUE REFINEMENT
   Place this section at the END of the stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. ABOUT THE JOURNAL
   Increase body text to match the rest of the journal interface.
   -------------------------------------------------------------------------- */

.pkp_page_index .homepage_about,
.pkp_page_index .homepage_about .description,
.pkp_page_index .homepage_about .content,
.pkp_page_index .additional_content .about-journal,
.pkp_page_index .additional_content .about-the-journal {
    color: #27364b !important;
    font-size: 0.96rem !important;
    line-height: 1.72 !important;
}

.pkp_page_index .homepage_about p,
.pkp_page_index .additional_content .about-journal p,
.pkp_page_index .additional_content .about-the-journal p {
    margin-bottom: 1rem !important;
    color: #27364b !important;
    font-size: 0.96rem !important;
    line-height: 1.72 !important;
    text-align: justify !important;
    text-align-last: left !important;
}

.pkp_page_index .homepage_about h2,
.pkp_page_index .homepage_about h3,
.pkp_page_index .additional_content .about-journal h2,
.pkp_page_index .additional_content .about-journal h3,
.pkp_page_index .additional_content .about-the-journal h2,
.pkp_page_index .additional_content .about-the-journal h3 {
    margin-bottom: 0.9rem !important;
    color: #10235b !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

/* --------------------------------------------------------------------------
   B. INDEXING TABLE / INDEXING LOGO COLUMNS
   Keep the structure but make borders and cells visually subtle.
   -------------------------------------------------------------------------- */

.pkp_page_index .homepage_about table,
.pkp_page_index .additional_content table {
    width: 100% !important;
    margin: 1rem 0 !important;
    border-collapse: collapse !important;
    border: 1px solid rgba(31, 92, 99, 0.10) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.pkp_page_index .homepage_about table th,
.pkp_page_index .homepage_about table td,
.pkp_page_index .additional_content table th,
.pkp_page_index .additional_content table td {
    padding: 0.65rem 0.75rem !important;
    border: 1px solid rgba(31, 92, 99, 0.09) !important;
    color: #34415c !important;
    background: rgba(255, 255, 255, 0.34) !important;
    box-shadow: none !important;
}

.pkp_page_index .homepage_about table th,
.pkp_page_index .additional_content table th {
    color: #34415c !important;
    background: rgba(239, 246, 246, 0.46) !important;
    font-weight: 700 !important;
}

.pkp_page_index .homepage_about table img,
.pkp_page_index .additional_content table img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: 40px !important;
    margin: 0 auto !important;
    opacity: 0.92 !important;
    object-fit: contain !important;
    transition:
        opacity 180ms ease,
        transform 180ms ease !important;
}

.pkp_page_index .homepage_about table a:hover img,
.pkp_page_index .homepage_about table a:focus img,
.pkp_page_index .additional_content table a:hover img,
.pkp_page_index .additional_content table a:focus img {
    opacity: 1 !important;
    transform: translateY(-1px) !important;
}

/* Empty cells become almost invisible */
.pkp_page_index .homepage_about table td:empty,
.pkp_page_index .additional_content table td:empty {
    min-width: 18px !important;
    background: transparent !important;
    border-color: rgba(31, 92, 99, 0.055) !important;
}

/* --------------------------------------------------------------------------
   C. CURRENT ISSUE
   Plain vertical section, visually consistent with the Archives list.
   Cover on the left and issue information on the right.
   -------------------------------------------------------------------------- */

.pkp_page_index .current_issue {
    position: relative !important;
    width: 100% !important;
    margin: 2rem 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.pkp_page_index .current_issue::before,
.pkp_page_index .current_issue::after {
    display: none !important;
    content: none !important;
}

.pkp_page_index .current_issue > h2,
.pkp_page_index .current_issue .current_issue_title {
    margin: 0 0 1rem !important;
    padding: 0 0 0.65rem !important;
    border-bottom: 2px solid #30269f !important;
    color: #10235b !important;
    background: transparent !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
}

.pkp_page_index .current_issue .obj_issue_toc {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.pkp_page_index .current_issue .obj_issue_toc .heading {
    display: grid !important;
    grid-template-columns: 155px minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr !important;
    column-gap: 1.4rem !important;
    row-gap: 0.55rem !important;
    align-items: start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 1rem 0 1.35rem !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid #dce4ec !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Cover placed on the left */
.pkp_page_index .current_issue .obj_issue_toc .heading .cover {
    grid-column: 1 !important;
    grid-row: 1 / span 4 !important;
    width: 155px !important;
    max-width: 155px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: start !important;
}

.pkp_page_index .current_issue .obj_issue_toc .heading .cover img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 225px !important;
    margin: 0 !important;
    border: 1px solid #d7deea !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    box-shadow: 0 6px 16px rgba(18, 37, 77, 0.11) !important;
    object-fit: contain !important;
}

/* Issue title and description placed on the right */
.pkp_page_index .current_issue .obj_issue_toc .heading > h2,
.pkp_page_index .current_issue .obj_issue_toc .heading > h3,
.pkp_page_index .current_issue .obj_issue_toc .heading .title,
.pkp_page_index .current_issue .obj_issue_toc .heading .issue_identification {
    grid-column: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #075c63 !important;
    background: transparent !important;
    font-size: 1.06rem !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    text-align: left !important;
}

.pkp_page_index .current_issue .obj_issue_toc .heading .description {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #34415c !important;
    font-size: 0.92rem !important;
    line-height: 1.72 !important;
    text-align: justify !important;
    text-align-last: left !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
}

/* Publication date becomes a subtle inline badge */
.pkp_page_index .current_issue .obj_issue_toc .published,
.pkp_page_index .current_issue .obj_issue_toc .heading .published {
    grid-column: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    margin: 0.35rem 0 0 !important;
    padding: 0.35rem 0.7rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #1d4f58 !important;
    background: #e7f3f1 !important;
    font-size: 0.76rem !important;
    font-weight: 750 !important;
    box-shadow: none !important;
}

/* Keep the article list below the issue summary clean */
.pkp_page_index .current_issue .obj_issue_toc .sections {
    margin: 1rem 0 0 !important;
    padding: 0 !important;
}

.pkp_page_index .current_issue .obj_issue_toc .section {
    margin: 0 0 1.4rem !important;
}

.pkp_page_index .current_issue .read_more {
    display: inline-flex !important;
    margin-top: 0.85rem !important;
    padding: 0 !important;
    color: #30269f !important;
    background: transparent !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

/* Tablet */
@media (max-width: 760px) {
    .pkp_page_index .current_issue .obj_issue_toc .heading {
        grid-template-columns: 112px minmax(0, 1fr) !important;
        column-gap: 1rem !important;
    }

    .pkp_page_index .current_issue .obj_issue_toc .heading .cover {
        width: 112px !important;
        max-width: 112px !important;
    }

    .pkp_page_index .current_issue .obj_issue_toc .heading .cover img {
        max-height: 165px !important;
    }
}

/* Mobile */
@media (max-width: 520px) {
    .pkp_page_index .homepage_about,
    .pkp_page_index .homepage_about p,
    .pkp_page_index .additional_content .about-journal,
    .pkp_page_index .additional_content .about-the-journal {
        font-size: 0.9rem !important;
        line-height: 1.65 !important;
        text-align: left !important;
        text-align-last: auto !important;
    }

    .pkp_page_index .current_issue .obj_issue_toc .heading {
        grid-template-columns: 86px minmax(0, 1fr) !important;
        column-gap: 0.8rem !important;
        row-gap: 0.4rem !important;
        padding: 0.9rem 0 1rem !important;
    }

    .pkp_page_index .current_issue .obj_issue_toc .heading .cover {
        width: 86px !important;
        max-width: 86px !important;
    }

    .pkp_page_index .current_issue .obj_issue_toc .heading .cover img {
        max-height: 128px !important;
    }

    .pkp_page_index .current_issue .obj_issue_toc .heading .description {
        font-size: 0.82rem !important;
        line-height: 1.58 !important;
        text-align: left !important;
        text-align-last: auto !important;
        hyphens: manual !important;
    }

    .pkp_page_index .homepage_about table th,
    .pkp_page_index .homepage_about table td,
    .pkp_page_index .additional_content table th,
    .pkp_page_index .additional_content table td {
        padding: 0.45rem !important;
    }
}

/* ==========================================================================
   29. ISSUE DETAIL PAGE: COVER LEFT, DESCRIPTION RIGHT
   Place this section at the END of the stylesheet.

   Applies after an issue is opened from the Archives page.
   Layout:
   [ Cover ] [ Published date + description ]
   ========================================================================== */

/* Keep the issue detail page readable and proportional */
body.pkp_page_issue .pkp_structure_content,
body.page_issue .pkp_structure_content,
body:has(.page_issue) .pkp_structure_content {
    align-items: start !important;
}

body.pkp_page_issue .pkp_structure_main,
body.page_issue .pkp_structure_main,
body:has(.page_issue) .pkp_structure_main {
    min-width: 0 !important;
}

/* Main issue summary wrapper */
body.pkp_page_issue .obj_issue_toc .heading,
body.page_issue .obj_issue_toc .heading,
body:has(.page_issue) .obj_issue_toc .heading,
.page_issue .obj_issue_toc .heading {
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr !important;
    column-gap: 1.6rem !important;
    row-gap: 0.75rem !important;
    align-items: start !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 1rem 0 1.5rem !important;
    padding: 1.25rem 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-top: 1px solid #dce4ec !important;
    border-bottom: 1px solid #dce4ec !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Remove decorative layers inherited from older theme rules */
body.pkp_page_issue .obj_issue_toc .heading::before,
body.pkp_page_issue .obj_issue_toc .heading::after,
body.page_issue .obj_issue_toc .heading::before,
body.page_issue .obj_issue_toc .heading::after,
body:has(.page_issue) .obj_issue_toc .heading::before,
body:has(.page_issue) .obj_issue_toc .heading::after,
.page_issue .obj_issue_toc .heading::before,
.page_issue .obj_issue_toc .heading::after {
    display: none !important;
    content: none !important;
}

/* Cover fixed to the left */
body.pkp_page_issue .obj_issue_toc .heading .cover,
body.page_issue .obj_issue_toc .heading .cover,
body:has(.page_issue) .obj_issue_toc .heading .cover,
.page_issue .obj_issue_toc .heading .cover {
    grid-column: 1 !important;
    grid-row: 1 / span 4 !important;
    width: 180px !important;
    max-width: 180px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: start !important;
    justify-self: start !important;
}

body.pkp_page_issue .obj_issue_toc .heading .cover img,
body.page_issue .obj_issue_toc .heading .cover img,
body:has(.page_issue) .obj_issue_toc .heading .cover img,
.page_issue .obj_issue_toc .heading .cover img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 260px !important;
    margin: 0 !important;
    border: 1px solid #d7deea !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    box-shadow: 0 7px 18px rgba(18, 37, 77, 0.12) !important;
    object-fit: contain !important;
}

/* Issue title, when it exists inside the heading */
body.pkp_page_issue .obj_issue_toc .heading .title,
body.pkp_page_issue .obj_issue_toc .heading .issue_identification,
body.pkp_page_issue .obj_issue_toc .heading > h2,
body.pkp_page_issue .obj_issue_toc .heading > h3,
body.page_issue .obj_issue_toc .heading .title,
body.page_issue .obj_issue_toc .heading .issue_identification,
body.page_issue .obj_issue_toc .heading > h2,
body.page_issue .obj_issue_toc .heading > h3,
body:has(.page_issue) .obj_issue_toc .heading .title,
body:has(.page_issue) .obj_issue_toc .heading .issue_identification,
body:has(.page_issue) .obj_issue_toc .heading > h2,
body:has(.page_issue) .obj_issue_toc .heading > h3,
.page_issue .obj_issue_toc .heading .title,
.page_issue .obj_issue_toc .heading .issue_identification,
.page_issue .obj_issue_toc .heading > h2,
.page_issue .obj_issue_toc .heading > h3 {
    grid-column: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #075c63 !important;
    background: transparent !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    text-align: left !important;
}

/* Publication date at the top-right */
body.pkp_page_issue .obj_issue_toc .heading .published,
body.page_issue .obj_issue_toc .heading .published,
body:has(.page_issue) .obj_issue_toc .heading .published,
.page_issue .obj_issue_toc .heading .published {
    grid-column: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0.42rem 0.8rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #1d4f58 !important;
    background: #e7f3f1 !important;
    box-shadow: none !important;
    font-size: 0.78rem !important;
    font-weight: 750 !important;
    line-height: 1.4 !important;
}

/* Description occupies the full right column */
body.pkp_page_issue .obj_issue_toc .heading .description,
body.page_issue .obj_issue_toc .heading .description,
body:has(.page_issue) .obj_issue_toc .heading .description,
.page_issue .obj_issue_toc .heading .description {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #34415c !important;
    background: transparent !important;
    font-size: 0.94rem !important;
    line-height: 1.76 !important;
    text-align: justify !important;
    text-align-last: left !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
}

body.pkp_page_issue .obj_issue_toc .heading .description p,
body.page_issue .obj_issue_toc .heading .description p,
body:has(.page_issue) .obj_issue_toc .heading .description p,
.page_issue .obj_issue_toc .heading .description p {
    margin: 0 0 0.85rem !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    text-align: inherit !important;
}

/* Remove inherited narrow widths and floats */
body.pkp_page_issue .obj_issue_toc .heading > *,
body.page_issue .obj_issue_toc .heading > *,
body:has(.page_issue) .obj_issue_toc .heading > *,
.page_issue .obj_issue_toc .heading > * {
    float: none !important;
    max-width: none;
}

/* Keep section/article list below the issue summary clean */
body.pkp_page_issue .obj_issue_toc .sections,
body.page_issue .obj_issue_toc .sections,
body:has(.page_issue) .obj_issue_toc .sections,
.page_issue .obj_issue_toc .sections {
    width: 100% !important;
    margin-top: 1.25rem !important;
}

/* Tablet */
@media (max-width: 760px) {
    body.pkp_page_issue .obj_issue_toc .heading,
    body.page_issue .obj_issue_toc .heading,
    body:has(.page_issue) .obj_issue_toc .heading,
    .page_issue .obj_issue_toc .heading {
        grid-template-columns: 125px minmax(0, 1fr) !important;
        column-gap: 1rem !important;
        padding: 1rem 0 !important;
    }

    body.pkp_page_issue .obj_issue_toc .heading .cover,
    body.page_issue .obj_issue_toc .heading .cover,
    body:has(.page_issue) .obj_issue_toc .heading .cover,
    .page_issue .obj_issue_toc .heading .cover {
        width: 125px !important;
        max-width: 125px !important;
    }

    body.pkp_page_issue .obj_issue_toc .heading .cover img,
    body.page_issue .obj_issue_toc .heading .cover img,
    body:has(.page_issue) .obj_issue_toc .heading .cover img,
    .page_issue .obj_issue_toc .heading .cover img {
        max-height: 185px !important;
    }
}

/* Mobile */
@media (max-width: 520px) {
    body.pkp_page_issue .obj_issue_toc .heading,
    body.page_issue .obj_issue_toc .heading,
    body:has(.page_issue) .obj_issue_toc .heading,
    .page_issue .obj_issue_toc .heading {
        grid-template-columns: 88px minmax(0, 1fr) !important;
        column-gap: 0.8rem !important;
        row-gap: 0.45rem !important;
        padding: 0.9rem 0 !important;
    }

    body.pkp_page_issue .obj_issue_toc .heading .cover,
    body.page_issue .obj_issue_toc .heading .cover,
    body:has(.page_issue) .obj_issue_toc .heading .cover,
    .page_issue .obj_issue_toc .heading .cover {
        width: 88px !important;
        max-width: 88px !important;
    }

    body.pkp_page_issue .obj_issue_toc .heading .cover img,
    body.page_issue .obj_issue_toc .heading .cover img,
    body:has(.page_issue) .obj_issue_toc .heading .cover img,
    .page_issue .obj_issue_toc .heading .cover img {
        max-height: 132px !important;
    }

    body.pkp_page_issue .obj_issue_toc .heading .description,
    body.page_issue .obj_issue_toc .heading .description,
    body:has(.page_issue) .obj_issue_toc .heading .description,
    .page_issue .obj_issue_toc .heading .description {
        font-size: 0.83rem !important;
        line-height: 1.6 !important;
        text-align: left !important;
        text-align-last: auto !important;
        hyphens: manual !important;
    }

    body.pkp_page_issue .obj_issue_toc .heading .published,
    body.page_issue .obj_issue_toc .heading .published,
    body:has(.page_issue) .obj_issue_toc .heading .published,
    .page_issue .obj_issue_toc .heading .published {
        padding: 0.3rem 0.55rem !important;
        font-size: 0.7rem !important;
    }
}

/* ==========================================================================
   30. WHATSAPP, JOURNAL TEMPLATE, AND TOOLS BLOCK HOVER
   Place this section at the END of the stylesheet.

   Normal state : soft blue
   Hover state  : sidebar blue
   Transition   : smooth fade in and fade out
   ========================================================================== */

:root {
    --sidebar-media-soft-blue: #dceeff;
    --sidebar-media-soft-blue-2: #edf6ff;
    --sidebar-media-blue: #30269f;
    --sidebar-media-blue-hover: #4036bd;
    --sidebar-media-border: #bad5ef;
    --sidebar-media-duration: 340ms;
}

/*
 * Supported targeting:
 * 1. Common Custom Block IDs/classes.
 * 2. Automatic detection through image source/alt text using :has().
 */
:is(
    #customblock-whatsapp,
    #customblock-whats-app,
    #customblock-whatsapp-chat,
    #customblock-whatsappchat,
    #customblock-journal-template,
    #customblock-journaltemplate,
    #customblock-template-journal,
    #customblock-template,
    #customblock-tools,
    #customblock-tool,
    .pkp_block.block_whatsapp,
    .pkp_block.block_whatsapp_chat,
    .pkp_block.block_journal_template,
    .pkp_block.block_journaltemplate,
    .pkp_block.block_tools,
    .pkp_block.block_tool,
    .pkp_block:has(img[src*="whatsapp" i]),
    .pkp_block:has(img[alt*="whatsapp" i]),
    .pkp_block:has(img[src*="journal-template" i]),
    .pkp_block:has(img[src*="journal_template" i]),
    .pkp_block:has(img[alt*="journal template" i]),
    .pkp_block:has(img[src*="turnitin" i]),
    .pkp_block:has(img[alt*="turnitin" i]),
    .pkp_block:has(img[src*="grammarly" i]),
    .pkp_block:has(img[alt*="grammarly" i]),
    .pkp_block:has(img[src*="mendeley" i]),
    .pkp_block:has(img[alt*="mendeley" i])
) {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    margin-bottom: 1rem !important;
    padding: 0.75rem !important;
    border: 1px solid var(--sidebar-media-border) !important;
    border-radius: 8px !important;
    color: #15335f !important;
    background:
        linear-gradient(
            145deg,
            var(--sidebar-media-soft-blue-2),
            var(--sidebar-media-soft-blue)
        ) !important;
    box-shadow: 0 4px 14px rgba(34, 75, 130, 0.08) !important;
    transition:
        color var(--sidebar-media-duration) ease,
        border-color var(--sidebar-media-duration) ease,
        box-shadow var(--sidebar-media-duration) ease,
        background-color var(--sidebar-media-duration) ease !important;
}

/* Blue fade overlay */
:is(
    #customblock-whatsapp,
    #customblock-whats-app,
    #customblock-whatsapp-chat,
    #customblock-whatsappchat,
    #customblock-journal-template,
    #customblock-journaltemplate,
    #customblock-template-journal,
    #customblock-template,
    #customblock-tools,
    #customblock-tool,
    .pkp_block.block_whatsapp,
    .pkp_block.block_whatsapp_chat,
    .pkp_block.block_journal_template,
    .pkp_block.block_journaltemplate,
    .pkp_block.block_tools,
    .pkp_block.block_tool,
    .pkp_block:has(img[src*="whatsapp" i]),
    .pkp_block:has(img[alt*="whatsapp" i]),
    .pkp_block:has(img[src*="journal-template" i]),
    .pkp_block:has(img[src*="journal_template" i]),
    .pkp_block:has(img[alt*="journal template" i]),
    .pkp_block:has(img[src*="turnitin" i]),
    .pkp_block:has(img[alt*="turnitin" i]),
    .pkp_block:has(img[src*="grammarly" i]),
    .pkp_block:has(img[alt*="grammarly" i]),
    .pkp_block:has(img[src*="mendeley" i]),
    .pkp_block:has(img[alt*="mendeley" i])
)::before {
    position: absolute !important;
    z-index: -1 !important;
    inset: 0 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background:
        linear-gradient(
            145deg,
            var(--sidebar-media-blue-hover),
            var(--sidebar-media-blue)
        ) !important;
    transition: opacity var(--sidebar-media-duration) ease-in-out !important;
    content: "" !important;
}

/* Fade in on mouse hover or keyboard focus */
:is(
    #customblock-whatsapp,
    #customblock-whats-app,
    #customblock-whatsapp-chat,
    #customblock-whatsappchat,
    #customblock-journal-template,
    #customblock-journaltemplate,
    #customblock-template-journal,
    #customblock-template,
    #customblock-tools,
    #customblock-tool,
    .pkp_block.block_whatsapp,
    .pkp_block.block_whatsapp_chat,
    .pkp_block.block_journal_template,
    .pkp_block.block_journaltemplate,
    .pkp_block.block_tools,
    .pkp_block.block_tool,
    .pkp_block:has(img[src*="whatsapp" i]),
    .pkp_block:has(img[alt*="whatsapp" i]),
    .pkp_block:has(img[src*="journal-template" i]),
    .pkp_block:has(img[src*="journal_template" i]),
    .pkp_block:has(img[alt*="journal template" i]),
    .pkp_block:has(img[src*="turnitin" i]),
    .pkp_block:has(img[alt*="turnitin" i]),
    .pkp_block:has(img[src*="grammarly" i]),
    .pkp_block:has(img[alt*="grammarly" i]),
    .pkp_block:has(img[src*="mendeley" i]),
    .pkp_block:has(img[alt*="mendeley" i])
):is(:hover, :focus-within) {
    border-color: var(--sidebar-media-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 25px rgba(48, 38, 159, 0.22) !important;
}

:is(
    #customblock-whatsapp,
    #customblock-whats-app,
    #customblock-whatsapp-chat,
    #customblock-whatsappchat,
    #customblock-journal-template,
    #customblock-journaltemplate,
    #customblock-template-journal,
    #customblock-template,
    #customblock-tools,
    #customblock-tool,
    .pkp_block.block_whatsapp,
    .pkp_block.block_whatsapp_chat,
    .pkp_block.block_journal_template,
    .pkp_block.block_journaltemplate,
    .pkp_block.block_tools,
    .pkp_block.block_tool,
    .pkp_block:has(img[src*="whatsapp" i]),
    .pkp_block:has(img[alt*="whatsapp" i]),
    .pkp_block:has(img[src*="journal-template" i]),
    .pkp_block:has(img[src*="journal_template" i]),
    .pkp_block:has(img[alt*="journal template" i]),
    .pkp_block:has(img[src*="turnitin" i]),
    .pkp_block:has(img[alt*="turnitin" i]),
    .pkp_block:has(img[src*="grammarly" i]),
    .pkp_block:has(img[alt*="grammarly" i]),
    .pkp_block:has(img[src*="mendeley" i]),
    .pkp_block:has(img[alt*="mendeley" i])
):is(:hover, :focus-within)::before {
    opacity: 1 !important;
}

/* Block headings: soft blue normally, transparent blue overlay on hover */
:is(
    #customblock-whatsapp,
    #customblock-whats-app,
    #customblock-whatsapp-chat,
    #customblock-whatsappchat,
    #customblock-journal-template,
    #customblock-journaltemplate,
    #customblock-template-journal,
    #customblock-template,
    #customblock-tools,
    #customblock-tool,
    .pkp_block.block_whatsapp,
    .pkp_block.block_whatsapp_chat,
    .pkp_block.block_journal_template,
    .pkp_block.block_journaltemplate,
    .pkp_block.block_tools,
    .pkp_block.block_tool,
    .pkp_block:has(img[src*="whatsapp" i]),
    .pkp_block:has(img[alt*="whatsapp" i]),
    .pkp_block:has(img[src*="journal-template" i]),
    .pkp_block:has(img[src*="journal_template" i]),
    .pkp_block:has(img[alt*="journal template" i]),
    .pkp_block:has(img[src*="turnitin" i]),
    .pkp_block:has(img[alt*="turnitin" i]),
    .pkp_block:has(img[src*="grammarly" i]),
    .pkp_block:has(img[alt*="grammarly" i]),
    .pkp_block:has(img[src*="mendeley" i]),
    .pkp_block:has(img[alt*="mendeley" i])
) > .title {
    position: relative !important;
    z-index: 2 !important;
    margin: -0.75rem -0.75rem 0.7rem !important;
    padding: 0.62rem 0.75rem !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(32, 82, 137, 0.13) !important;
    border-radius: 7px 7px 0 0 !important;
    color: #123a75 !important;
    background: rgba(184, 218, 248, 0.72) !important;
    box-shadow: none !important;
    font-size: 0.78rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    transition:
        color var(--sidebar-media-duration) ease-in-out,
        background-color var(--sidebar-media-duration) ease-in-out,
        border-color var(--sidebar-media-duration) ease-in-out !important;
}

:is(
    #customblock-whatsapp,
    #customblock-whats-app,
    #customblock-whatsapp-chat,
    #customblock-whatsappchat,
    #customblock-journal-template,
    #customblock-journaltemplate,
    #customblock-template-journal,
    #customblock-template,
    #customblock-tools,
    #customblock-tool,
    .pkp_block.block_whatsapp,
    .pkp_block.block_whatsapp_chat,
    .pkp_block.block_journal_template,
    .pkp_block.block_journaltemplate,
    .pkp_block.block_tools,
    .pkp_block.block_tool,
    .pkp_block:has(img[src*="whatsapp" i]),
    .pkp_block:has(img[alt*="whatsapp" i]),
    .pkp_block:has(img[src*="journal-template" i]),
    .pkp_block:has(img[src*="journal_template" i]),
    .pkp_block:has(img[alt*="journal template" i]),
    .pkp_block:has(img[src*="turnitin" i]),
    .pkp_block:has(img[alt*="turnitin" i]),
    .pkp_block:has(img[src*="grammarly" i]),
    .pkp_block:has(img[alt*="grammarly" i]),
    .pkp_block:has(img[src*="mendeley" i]),
    .pkp_block:has(img[alt*="mendeley" i])
):is(:hover, :focus-within) > .title {
    border-bottom-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Remove generic decorative dots from these headings */
:is(
    #customblock-whatsapp,
    #customblock-whats-app,
    #customblock-whatsapp-chat,
    #customblock-whatsappchat,
    #customblock-journal-template,
    #customblock-journaltemplate,
    #customblock-template-journal,
    #customblock-template,
    #customblock-tools,
    #customblock-tool,
    .pkp_block.block_whatsapp,
    .pkp_block.block_whatsapp_chat,
    .pkp_block.block_journal_template,
    .pkp_block.block_journaltemplate,
    .pkp_block.block_tools,
    .pkp_block.block_tool,
    .pkp_block:has(img[src*="whatsapp" i]),
    .pkp_block:has(img[alt*="whatsapp" i]),
    .pkp_block:has(img[src*="journal-template" i]),
    .pkp_block:has(img[src*="journal_template" i]),
    .pkp_block:has(img[alt*="journal template" i]),
    .pkp_block:has(img[src*="turnitin" i]),
    .pkp_block:has(img[alt*="turnitin" i]),
    .pkp_block:has(img[src*="grammarly" i]),
    .pkp_block:has(img[alt*="grammarly" i]),
    .pkp_block:has(img[src*="mendeley" i]),
    .pkp_block:has(img[alt*="mendeley" i])
) > .title::after {
    display: none !important;
    content: none !important;
}

/* Content and links */
:is(
    #customblock-whatsapp,
    #customblock-whats-app,
    #customblock-whatsapp-chat,
    #customblock-whatsappchat,
    #customblock-journal-template,
    #customblock-journaltemplate,
    #customblock-template-journal,
    #customblock-template,
    #customblock-tools,
    #customblock-tool,
    .pkp_block.block_whatsapp,
    .pkp_block.block_whatsapp_chat,
    .pkp_block.block_journal_template,
    .pkp_block.block_journaltemplate,
    .pkp_block.block_tools,
    .pkp_block.block_tool,
    .pkp_block:has(img[src*="whatsapp" i]),
    .pkp_block:has(img[alt*="whatsapp" i]),
    .pkp_block:has(img[src*="journal-template" i]),
    .pkp_block:has(img[src*="journal_template" i]),
    .pkp_block:has(img[alt*="journal template" i]),
    .pkp_block:has(img[src*="turnitin" i]),
    .pkp_block:has(img[alt*="turnitin" i]),
    .pkp_block:has(img[src*="grammarly" i]),
    .pkp_block:has(img[alt*="grammarly" i]),
    .pkp_block:has(img[src*="mendeley" i]),
    .pkp_block:has(img[alt*="mendeley" i])
) > .content {
    position: relative !important;
    z-index: 2 !important;
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
    transition: color var(--sidebar-media-duration) ease-in-out !important;
}

:is(
    #customblock-whatsapp,
    #customblock-whats-app,
    #customblock-whatsapp-chat,
    #customblock-whatsappchat,
    #customblock-journal-template,
    #customblock-journaltemplate,
    #customblock-template-journal,
    #customblock-template,
    #customblock-tools,
    #customblock-tool,
    .pkp_block.block_whatsapp,
    .pkp_block.block_whatsapp_chat,
    .pkp_block.block_journal_template,
    .pkp_block.block_journaltemplate,
    .pkp_block.block_tools,
    .pkp_block.block_tool,
    .pkp_block:has(img[src*="whatsapp" i]),
    .pkp_block:has(img[alt*="whatsapp" i]),
    .pkp_block:has(img[src*="journal-template" i]),
    .pkp_block:has(img[src*="journal_template" i]),
    .pkp_block:has(img[alt*="journal template" i]),
    .pkp_block:has(img[src*="turnitin" i]),
    .pkp_block:has(img[alt*="turnitin" i]),
    .pkp_block:has(img[src*="grammarly" i]),
    .pkp_block:has(img[alt*="grammarly" i]),
    .pkp_block:has(img[src*="mendeley" i]),
    .pkp_block:has(img[alt*="mendeley" i])
) a {
    color: inherit !important;
    text-decoration: none !important;
}

/* Keep logos crisp on a white plate */
:is(
    #customblock-whatsapp,
    #customblock-whats-app,
    #customblock-whatsapp-chat,
    #customblock-whatsappchat,
    #customblock-journal-template,
    #customblock-journaltemplate,
    #customblock-template-journal,
    #customblock-template,
    #customblock-tools,
    #customblock-tool,
    .pkp_block.block_whatsapp,
    .pkp_block.block_whatsapp_chat,
    .pkp_block.block_journal_template,
    .pkp_block.block_journaltemplate,
    .pkp_block.block_tools,
    .pkp_block.block_tool,
    .pkp_block:has(img[src*="whatsapp" i]),
    .pkp_block:has(img[alt*="whatsapp" i]),
    .pkp_block:has(img[src*="journal-template" i]),
    .pkp_block:has(img[src*="journal_template" i]),
    .pkp_block:has(img[alt*="journal template" i]),
    .pkp_block:has(img[src*="turnitin" i]),
    .pkp_block:has(img[alt*="turnitin" i]),
    .pkp_block:has(img[src*="grammarly" i]),
    .pkp_block:has(img[alt*="grammarly" i]),
    .pkp_block:has(img[src*="mendeley" i]),
    .pkp_block:has(img[alt*="mendeley" i])
) img {
    position: relative !important;
    z-index: 3 !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0.4rem auto !important;
    padding: 0.35rem !important;
    border: 1px solid rgba(23, 66, 114, 0.10) !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(17, 46, 91, 0.06) !important;
    opacity: 0.96 !important;
    transform: scale(1) !important;
    transition:
        opacity var(--sidebar-media-duration) ease-in-out,
        transform var(--sidebar-media-duration) ease-in-out,
        box-shadow var(--sidebar-media-duration) ease-in-out !important;
}

:is(
    #customblock-whatsapp,
    #customblock-whats-app,
    #customblock-whatsapp-chat,
    #customblock-whatsappchat,
    #customblock-journal-template,
    #customblock-journaltemplate,
    #customblock-template-journal,
    #customblock-template,
    #customblock-tools,
    #customblock-tool,
    .pkp_block.block_whatsapp,
    .pkp_block.block_whatsapp_chat,
    .pkp_block.block_journal_template,
    .pkp_block.block_journaltemplate,
    .pkp_block.block_tools,
    .pkp_block.block_tool,
    .pkp_block:has(img[src*="whatsapp" i]),
    .pkp_block:has(img[alt*="whatsapp" i]),
    .pkp_block:has(img[src*="journal-template" i]),
    .pkp_block:has(img[src*="journal_template" i]),
    .pkp_block:has(img[alt*="journal template" i]),
    .pkp_block:has(img[src*="turnitin" i]),
    .pkp_block:has(img[alt*="turnitin" i]),
    .pkp_block:has(img[src*="grammarly" i]),
    .pkp_block:has(img[alt*="grammarly" i]),
    .pkp_block:has(img[src*="mendeley" i]),
    .pkp_block:has(img[alt*="mendeley" i])
):is(:hover, :focus-within) img {
    opacity: 1 !important;
    transform: scale(1.025) !important;
    box-shadow: 0 6px 16px rgba(10, 24, 87, 0.18) !important;
}

/* Smooth fade back when pointer leaves */
@media (prefers-reduced-motion: reduce) {
    :is(
        #customblock-whatsapp,
        #customblock-whats-app,
        #customblock-whatsapp-chat,
        #customblock-whatsappchat,
        #customblock-journal-template,
        #customblock-journaltemplate,
        #customblock-template-journal,
        #customblock-template,
        #customblock-tools,
        #customblock-tool,
        .pkp_block.block_whatsapp,
        .pkp_block.block_whatsapp_chat,
        .pkp_block.block_journal_template,
        .pkp_block.block_journaltemplate,
        .pkp_block.block_tools,
        .pkp_block.block_tool
    ),
    :is(
        #customblock-whatsapp,
        #customblock-whats-app,
        #customblock-whatsapp-chat,
        #customblock-whatsappchat,
        #customblock-journal-template,
        #customblock-journaltemplate,
        #customblock-template-journal,
        #customblock-template,
        #customblock-tools,
        #customblock-tool,
        .pkp_block.block_whatsapp,
        .pkp_block.block_whatsapp_chat,
        .pkp_block.block_journal_template,
        .pkp_block.block_journaltemplate,
        .pkp_block.block_tools,
        .pkp_block.block_tool
    )::before,
    :is(
        #customblock-whatsapp,
        #customblock-whats-app,
        #customblock-whatsapp-chat,
        #customblock-whatsappchat,
        #customblock-journal-template,
        #customblock-journaltemplate,
        #customblock-template-journal,
        #customblock-template,
        #customblock-tools,
        #customblock-tool,
        .pkp_block.block_whatsapp,
        .pkp_block.block_whatsapp_chat,
        .pkp_block.block_journal_template,
        .pkp_block.block_journaltemplate,
        .pkp_block.block_tools,
        .pkp_block.block_tool
    ) img {
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   31. INDIVIDUAL SIDEBAR ITEMS, GOOGLE SCHOLAR, AND FOOTER
   Place this section at the END of the stylesheet.

   Each logo/item receives:
   - its own border
   - soft-blue normal state
   - sidebar-blue hover state
   - fade-in/fade-out transition
   ========================================================================== */

:root {
    --media-item-soft: #edf6ff;
    --media-item-soft-strong: #d8ebfb;
    --media-item-border: #b9d4ec;
    --media-item-blue: #30269f;
    --media-item-blue-hover: #4339c3;
    --media-item-text: #173c70;
    --media-item-speed: 320ms;

    --footer-base: #201a83;
    --footer-base-dark: #15105f;
    --footer-card: rgba(220, 238, 255, 0.10);
    --footer-card-hover: rgba(255, 255, 255, 0.17);
    --footer-border: rgba(192, 220, 247, 0.35);
}

/* --------------------------------------------------------------------------
   A. SHARED SIDEBAR BLOCKS
   WhatsApp, Journal Template, Tools, and Google Scholar/Indexing
   -------------------------------------------------------------------------- */

:is(
    #customblock-whatsapp,
    #customblock-whats-app,
    #customblock-whatsapp-chat,
    #customblock-whatsappchat,
    #customblock-journal-template,
    #customblock-journaltemplate,
    #customblock-template-journal,
    #customblock-template,
    #customblock-tools,
    #customblock-tool,
    #customblock-indexing,
    #customblock-index,
    #customblock-google-scholar,
    #customblock-googlescholar,
    .pkp_block.block_whatsapp,
    .pkp_block.block_whatsapp_chat,
    .pkp_block.block_journal_template,
    .pkp_block.block_journaltemplate,
    .pkp_block.block_tools,
    .pkp_block.block_tool,
    .pkp_block.block_indexing,
    .pkp_block.block_google_scholar,
    .pkp_block:has(img[src*="whatsapp" i]),
    .pkp_block:has(img[alt*="whatsapp" i]),
    .pkp_block:has(img[src*="journal-template" i]),
    .pkp_block:has(img[src*="journal_template" i]),
    .pkp_block:has(img[alt*="journal template" i]),
    .pkp_block:has(img[src*="turnitin" i]),
    .pkp_block:has(img[alt*="turnitin" i]),
    .pkp_block:has(img[src*="grammarly" i]),
    .pkp_block:has(img[alt*="grammarly" i]),
    .pkp_block:has(img[src*="mendeley" i]),
    .pkp_block:has(img[alt*="mendeley" i]),
    .pkp_block:has(img[src*="google-scholar" i]),
    .pkp_block:has(img[src*="google_scholar" i]),
    .pkp_block:has(img[src*="googlescholar" i]),
    .pkp_block:has(img[alt*="google scholar" i])
) {
    padding: 0.65rem !important;
    border: 1px solid var(--media-item-border) !important;
    border-radius: 8px !important;
    background: var(--media-item-soft) !important;
    box-shadow: 0 4px 14px rgba(25, 70, 122, 0.08) !important;
}

/* Shared block titles */
:is(
    #customblock-journal-template,
    #customblock-journaltemplate,
    #customblock-template-journal,
    #customblock-template,
    #customblock-tools,
    #customblock-tool,
    #customblock-indexing,
    #customblock-index,
    #customblock-google-scholar,
    #customblock-googlescholar,
    .pkp_block.block_journal_template,
    .pkp_block.block_journaltemplate,
    .pkp_block.block_tools,
    .pkp_block.block_tool,
    .pkp_block.block_indexing,
    .pkp_block.block_google_scholar,
    .pkp_block:has(img[src*="journal-template" i]),
    .pkp_block:has(img[src*="journal_template" i]),
    .pkp_block:has(img[alt*="journal template" i]),
    .pkp_block:has(img[src*="turnitin" i]),
    .pkp_block:has(img[src*="grammarly" i]),
    .pkp_block:has(img[src*="mendeley" i]),
    .pkp_block:has(img[src*="google-scholar" i]),
    .pkp_block:has(img[src*="google_scholar" i]),
    .pkp_block:has(img[src*="googlescholar" i]),
    .pkp_block:has(img[alt*="google scholar" i])
) > .title {
    margin: -0.65rem -0.65rem 0.65rem !important;
    padding: 0.58rem 0.7rem !important;
    border-bottom: 1px solid rgba(25, 72, 125, 0.15) !important;
    border-radius: 7px 7px 0 0 !important;
    color: #ffffff !important;
    background: var(--media-item-blue) !important;
    font-size: 0.76rem !important;
    font-weight: 850 !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

/* --------------------------------------------------------------------------
   B. EACH LOGO/ITEM GETS ITS OWN BORDER
   Supports links, paragraphs, divs, list items, and direct images.
   -------------------------------------------------------------------------- */

:is(
    #customblock-journal-template,
    #customblock-journaltemplate,
    #customblock-template-journal,
    #customblock-template,
    #customblock-tools,
    #customblock-tool,
    #customblock-indexing,
    #customblock-index,
    #customblock-google-scholar,
    #customblock-googlescholar,
    .pkp_block.block_journal_template,
    .pkp_block.block_journaltemplate,
    .pkp_block.block_tools,
    .pkp_block.block_tool,
    .pkp_block.block_indexing,
    .pkp_block.block_google_scholar,
    .pkp_block:has(img[src*="journal-template" i]),
    .pkp_block:has(img[src*="journal_template" i]),
    .pkp_block:has(img[src*="turnitin" i]),
    .pkp_block:has(img[src*="grammarly" i]),
    .pkp_block:has(img[src*="mendeley" i]),
    .pkp_block:has(img[src*="google-scholar" i]),
    .pkp_block:has(img[src*="google_scholar" i]),
    .pkp_block:has(img[src*="googlescholar" i])
) > .content {
    display: grid !important;
    gap: 0.65rem !important;
    padding: 0 !important;
    background: transparent !important;
}

/*
 * Individual wrappers detected by the image they contain.
 * This separates Journal Template, Turnitin, Grammarly, Mendeley,
 * and Google Scholar even when they are inside one custom block.
 */
:is(
    #customblock-journal-template,
    #customblock-journaltemplate,
    #customblock-template-journal,
    #customblock-template,
    #customblock-tools,
    #customblock-tool,
    #customblock-indexing,
    #customblock-index,
    #customblock-google-scholar,
    #customblock-googlescholar,
    .pkp_block.block_journal_template,
    .pkp_block.block_journaltemplate,
    .pkp_block.block_tools,
    .pkp_block.block_tool,
    .pkp_block.block_indexing,
    .pkp_block.block_google_scholar
) :is(
    a:has(img),
    p:has(img),
    div:has(> img),
    li:has(img)
) {
    position: relative !important;
    isolation: isolate !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 0.65rem !important;
    overflow: hidden !important;
    border: 1px solid var(--media-item-border) !important;
    border-radius: 7px !important;
    color: var(--media-item-text) !important;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            var(--media-item-soft-strong)
        ) !important;
    box-shadow: 0 3px 10px rgba(22, 65, 115, 0.07) !important;
    text-decoration: none !important;
    transition:
        color var(--media-item-speed) ease-in-out,
        border-color var(--media-item-speed) ease-in-out,
        box-shadow var(--media-item-speed) ease-in-out,
        background-color var(--media-item-speed) ease-in-out !important;
}

/* Fade overlay for every individual item */
:is(
    #customblock-journal-template,
    #customblock-journaltemplate,
    #customblock-template-journal,
    #customblock-template,
    #customblock-tools,
    #customblock-tool,
    #customblock-indexing,
    #customblock-index,
    #customblock-google-scholar,
    #customblock-googlescholar,
    .pkp_block.block_journal_template,
    .pkp_block.block_journaltemplate,
    .pkp_block.block_tools,
    .pkp_block.block_tool,
    .pkp_block.block_indexing,
    .pkp_block.block_google_scholar
) :is(
    a:has(img),
    p:has(img),
    div:has(> img),
    li:has(img)
)::before {
    position: absolute !important;
    z-index: -1 !important;
    inset: 0 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background:
        linear-gradient(
            145deg,
            var(--media-item-blue-hover),
            var(--media-item-blue)
        ) !important;
    transition: opacity var(--media-item-speed) ease-in-out !important;
    content: "" !important;
}

:is(
    #customblock-journal-template,
    #customblock-journaltemplate,
    #customblock-template-journal,
    #customblock-template,
    #customblock-tools,
    #customblock-tool,
    #customblock-indexing,
    #customblock-index,
    #customblock-google-scholar,
    #customblock-googlescholar,
    .pkp_block.block_journal_template,
    .pkp_block.block_journaltemplate,
    .pkp_block.block_tools,
    .pkp_block.block_tool,
    .pkp_block.block_indexing,
    .pkp_block.block_google_scholar
) :is(
    a:has(img),
    p:has(img),
    div:has(> img),
    li:has(img)
):is(:hover, :focus-within) {
    border-color: var(--media-item-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 9px 22px rgba(48, 38, 159, 0.20) !important;
}

:is(
    #customblock-journal-template,
    #customblock-journaltemplate,
    #customblock-template-journal,
    #customblock-template,
    #customblock-tools,
    #customblock-tool,
    #customblock-indexing,
    #customblock-index,
    #customblock-google-scholar,
    #customblock-googlescholar,
    .pkp_block.block_journal_template,
    .pkp_block.block_journaltemplate,
    .pkp_block.block_tools,
    .pkp_block.block_tool,
    .pkp_block.block_indexing,
    .pkp_block.block_google_scholar
) :is(
    a:has(img),
    p:has(img),
    div:has(> img),
    li:has(img)
):is(:hover, :focus-within)::before {
    opacity: 1 !important;
}

/* Images remain readable inside their individual boxes */
:is(
    #customblock-journal-template,
    #customblock-journaltemplate,
    #customblock-template-journal,
    #customblock-template,
    #customblock-tools,
    #customblock-tool,
    #customblock-indexing,
    #customblock-index,
    #customblock-google-scholar,
    #customblock-googlescholar,
    .pkp_block.block_journal_template,
    .pkp_block.block_journaltemplate,
    .pkp_block.block_tools,
    .pkp_block.block_tool,
    .pkp_block.block_indexing,
    .pkp_block.block_google_scholar
) :is(
    a:has(img),
    p:has(img),
    div:has(> img),
    li:has(img)
) img {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: 82px !important;
    margin: 0 auto !important;
    padding: 0.25rem !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    object-fit: contain !important;
    transition:
        transform var(--media-item-speed) ease-in-out,
        box-shadow var(--media-item-speed) ease-in-out !important;
}

:is(
    #customblock-journal-template,
    #customblock-journaltemplate,
    #customblock-template-journal,
    #customblock-template,
    #customblock-tools,
    #customblock-tool,
    #customblock-indexing,
    #customblock-index,
    #customblock-google-scholar,
    #customblock-googlescholar,
    .pkp_block.block_journal_template,
    .pkp_block.block_journaltemplate,
    .pkp_block.block_tools,
    .pkp_block.block_tool,
    .pkp_block.block_indexing,
    .pkp_block.block_google_scholar
) :is(
    a:has(img),
    p:has(img),
    div:has(> img),
    li:has(img)
):is(:hover, :focus-within) img {
    transform: scale(1.035) !important;
    box-shadow: 0 5px 13px rgba(10, 30, 91, 0.16) !important;
}

/* --------------------------------------------------------------------------
   C. GOOGLE SCHOLAR / INDEXING BLOCK
   Included in the same bordered and hover system.
   -------------------------------------------------------------------------- */

:is(
    #customblock-indexing,
    #customblock-index,
    #customblock-google-scholar,
    #customblock-googlescholar,
    .pkp_block.block_indexing,
    .pkp_block.block_google_scholar,
    .pkp_block:has(img[src*="google-scholar" i]),
    .pkp_block:has(img[src*="google_scholar" i]),
    .pkp_block:has(img[src*="googlescholar" i]),
    .pkp_block:has(img[alt*="google scholar" i])
) {
    border-color: #9fc8ea !important;
    background:
        linear-gradient(
            145deg,
            #f2f9ff,
            #d8ecfb
        ) !important;
}

:is(
    #customblock-indexing,
    #customblock-index,
    #customblock-google-scholar,
    #customblock-googlescholar,
    .pkp_block.block_indexing,
    .pkp_block.block_google_scholar,
    .pkp_block:has(img[src*="google-scholar" i]),
    .pkp_block:has(img[src*="google_scholar" i]),
    .pkp_block:has(img[src*="googlescholar" i]),
    .pkp_block:has(img[alt*="google scholar" i])
):is(:hover, :focus-within) {
    border-color: var(--media-item-blue) !important;
    background: var(--media-item-blue) !important;
    box-shadow: 0 10px 25px rgba(48, 38, 159, 0.21) !important;
}

/* --------------------------------------------------------------------------
   D. FOOTER
   Gives existing footer content bordered sections and fade hover.
   CSS styles existing content; it does not create new footer text.
   -------------------------------------------------------------------------- */

.pkp_structure_footer_wrapper {
    border-top: 5px solid #6d83ef !important;
    color: rgba(255, 255, 255, 0.84) !important;
    background:
        linear-gradient(
            135deg,
            var(--footer-base),
            var(--footer-base-dark)
        ) !important;
}

.pkp_structure_footer {
    width: min(calc(100% - 2rem), var(--journal-container, 1200px)) !important;
    max-width: var(--journal-container, 1200px) !important;
}

.pkp_footer_content {
    color: rgba(255, 255, 255, 0.84) !important;
}

/* Optional footer grids and common direct footer sections */
:is(
    .journal-footer-grid,
    .pkp_footer_content > .footer-grid,
    .pkp_footer_content > .row,
    .pkp_footer_content > .container
) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    width: 100% !important;
}

/* Each footer section becomes bordered */
:is(
    .journal-footer-grid,
    .pkp_footer_content > .footer-grid,
    .pkp_footer_content > .row,
    .pkp_footer_content > .container
) > * {
    position: relative !important;
    isolation: isolate !important;
    min-width: 0 !important;
    padding: 1rem !important;
    overflow: hidden !important;
    border: 1px solid var(--footer-border) !important;
    border-radius: 9px !important;
    color: rgba(255, 255, 255, 0.82) !important;
    background: var(--footer-card) !important;
    box-shadow: 0 5px 16px rgba(5, 11, 52, 0.14) !important;
    transition:
        border-color var(--media-item-speed) ease-in-out,
        background-color var(--media-item-speed) ease-in-out,
        box-shadow var(--media-item-speed) ease-in-out !important;
}

:is(
    .journal-footer-grid,
    .pkp_footer_content > .footer-grid,
    .pkp_footer_content > .row,
    .pkp_footer_content > .container
) > *::before {
    position: absolute !important;
    z-index: -1 !important;
    inset: 0 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background:
        linear-gradient(
            145deg,
            rgba(109, 131, 239, 0.38),
            rgba(255, 255, 255, 0.08)
        ) !important;
    transition: opacity var(--media-item-speed) ease-in-out !important;
    content: "" !important;
}

:is(
    .journal-footer-grid,
    .pkp_footer_content > .footer-grid,
    .pkp_footer_content > .row,
    .pkp_footer_content > .container
) > *:hover {
    border-color: rgba(220, 238, 255, 0.68) !important;
    background: var(--footer-card-hover) !important;
    box-shadow: 0 11px 28px rgba(4, 10, 50, 0.23) !important;
}

:is(
    .journal-footer-grid,
    .pkp_footer_content > .footer-grid,
    .pkp_footer_content > .row,
    .pkp_footer_content > .container
) > *:hover::before {
    opacity: 1 !important;
}

.pkp_footer_content h2,
.pkp_footer_content h3,
.pkp_footer_content h4,
.pkp_footer_content h5 {
    color: #ffffff !important;
}

.pkp_footer_content a {
    color: #cfe7ff !important;
    text-decoration: none !important;
    transition: color var(--media-item-speed) ease-in-out !important;
}

.pkp_footer_content a:hover,
.pkp_footer_content a:focus {
    color: #ffffff !important;
}

/* Footer brand line */
.pkp_brand_footer {
    margin-top: 1rem !important;
    border-top: 1px solid rgba(207, 231, 255, 0.22) !important;
}

/* --------------------------------------------------------------------------
   E. RESPONSIVE RULES
   -------------------------------------------------------------------------- */

@media (max-width: 1050px) {
    :is(
        .journal-footer-grid,
        .pkp_footer_content > .footer-grid,
        .pkp_footer_content > .row,
        .pkp_footer_content > .container
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    :is(
        .journal-footer-grid,
        .pkp_footer_content > .footer-grid,
        .pkp_footer_content > .row,
        .pkp_footer_content > .container
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    :is(
        #customblock-journal-template,
        #customblock-journaltemplate,
        #customblock-template-journal,
        #customblock-template,
        #customblock-tools,
        #customblock-tool,
        #customblock-indexing,
        #customblock-index,
        #customblock-google-scholar,
        #customblock-googlescholar,
        .pkp_block.block_journal_template,
        .pkp_block.block_journaltemplate,
        .pkp_block.block_tools,
        .pkp_block.block_tool,
        .pkp_block.block_indexing,
        .pkp_block.block_google_scholar
    ) :is(
        a:has(img),
        p:has(img),
        div:has(> img),
        li:has(img)
    ) {
        min-height: 62px !important;
        padding: 0.5rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(
        #customblock-journal-template,
        #customblock-journaltemplate,
        #customblock-template-journal,
        #customblock-template,
        #customblock-tools,
        #customblock-tool,
        #customblock-indexing,
        #customblock-index,
        #customblock-google-scholar,
        #customblock-googlescholar,
        .pkp_block.block_journal_template,
        .pkp_block.block_journaltemplate,
        .pkp_block.block_tools,
        .pkp_block.block_tool,
        .pkp_block.block_indexing,
        .pkp_block.block_google_scholar
    ) :is(
        a:has(img),
        p:has(img),
        div:has(> img),
        li:has(img)
    ),
    :is(
        .journal-footer-grid,
        .pkp_footer_content > .footer-grid,
        .pkp_footer_content > .row,
        .pkp_footer_content > .container
    ) > * {
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   37. LIGHTWEIGHT INDONESIAN BATIK + PERFORMANCE OPTIMIZATION
   Place this section at the END of the stylesheet.

   Performance choices:
   - one small SVG background tile
   - no backdrop-filter or blur
   - no fixed background attachment
   - smaller shadows
   - fade-only hover, without movement
   ========================================================================== */

:root {
    --batik-light-base: #f4eee7;
    --batik-light-pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%3E%0A%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22%23f4eee7%22%2F%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22%2385583c%22%20stroke-opacity%3D%22.20%22%20stroke-width%3D%221.15%22%3E%0A%3Cellipse%20cx%3D%2260%22%20cy%3D%2230%22%20rx%3D%2218%22%20ry%3D%2229%22%2F%3E%0A%3Cellipse%20cx%3D%2260%22%20cy%3D%2290%22%20rx%3D%2218%22%20ry%3D%2229%22%2F%3E%0A%3Cellipse%20cx%3D%2230%22%20cy%3D%2260%22%20rx%3D%2229%22%20ry%3D%2218%22%2F%3E%0A%3Cellipse%20cx%3D%2290%22%20cy%3D%2260%22%20rx%3D%2229%22%20ry%3D%2218%22%2F%3E%0A%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%225%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22%23b58b5d%22%20stroke-opacity%3D%22.16%22%20stroke-width%3D%22.85%22%3E%0A%3Cpath%20d%3D%22M0%2060Q30%2030%2060%200M60%20120Q90%2090%20120%2060%22%2F%3E%0A%3Cpath%20d%3D%22M0%200Q30%2030%2060%2060T120%20120%22%2F%3E%0A%3Cpath%20d%3D%22M120%200Q90%2030%2060%2060T0%20120%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22%2385583c%22%20fill-opacity%3D%22.14%22%3E%0A%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%220%22%20r%3D%223%22%2F%3E%0A%3Ccircle%20cx%3D%220%22%20cy%3D%22120%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%22120%22%20r%3D%223%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");

    --center-glass: rgba(255, 255, 255, 0.86);
    --center-glass-strong: rgba(255, 255, 255, 0.92);
    --center-border: rgba(151, 122, 96, 0.24);

    --sidebar-solid: #f5f7fa;
    --sidebar-card-solid: #ffffff;

    --footer-soft: rgba(78, 72, 169, 0.92);
    --footer-soft-dark: rgba(65, 59, 148, 0.94);

    --light-shadow: 0 2px 9px rgba(67, 54, 43, 0.055);
}

/* --------------------------------------------------------------------------
   A. ONE LIGHTWEIGHT BATIK TILE
   -------------------------------------------------------------------------- */

html,
body {
    background-color: var(--batik-light-base) !important;
}

body {
    background-image: var(--batik-light-pattern) !important;
    background-repeat: repeat !important;
    background-position: top left !important;
    background-size: 120px 120px !important;
    background-attachment: scroll !important;
}

/* Remove expensive global pseudo layers from older versions */
body::before,
body::after {
    display: none !important;
    content: none !important;
}

/* --------------------------------------------------------------------------
   B. REMOVE HEAVY RENDERING EFFECTS
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_block,
.obj_article_summary,
.obj_issue_summary,
.obj_article_details,
.obj_issue_toc,
.current_issue,
.homepage_about {
    filter: none !important;
    will-change: auto !important;
}

/* --------------------------------------------------------------------------
   C. OUTER OJS SHELL: BATIK REMAINS VISIBLE
   -------------------------------------------------------------------------- */

.pkp_structure_page {
    background: rgba(255, 252, 248, 0.20) !important;
    box-shadow: none !important;
}

.pkp_structure_content {
    background: rgba(255, 252, 248, 0.18) !important;
    border-right: 1px solid rgba(141, 109, 82, 0.10) !important;
    border-left: 1px solid rgba(141, 109, 82, 0.10) !important;
}

/* --------------------------------------------------------------------------
   D. CENTER OJS CONTENT: MOTIF SHOWS THROUGH SOFTLY
   -------------------------------------------------------------------------- */

.pkp_structure_main,
.pkp_page_index .pkp_structure_main,
.pkp_page_issue .pkp_structure_main,
.pkp_page_article .pkp_structure_main,
.pkp_page_issue_archive .pkp_structure_main,
.page_issue .pkp_structure_main,
.page_article .pkp_structure_main,
.page_issue_archive .pkp_structure_main {
    border: 1px solid var(--center-border) !important;
    background: var(--center-glass) !important;
    box-shadow: var(--light-shadow) !important;
}

/* Inner panels are slightly more solid for readability */
.pkp_structure_main > *,
.pkp_page_index .homepage_about,
.pkp_page_index .current_issue,
.pkp_page_issue .obj_issue_toc,
.pkp_page_issue_archive .cmp_issue_list,
.pkp_page_article .obj_article_details,
.page_issue .obj_issue_toc,
.page_article .obj_article_details,
.page_issue_archive .cmp_issue_list {
    border-color: var(--center-border) !important;
    background: var(--center-glass-strong) !important;
    box-shadow: var(--light-shadow) !important;
}

.pkp_page_issue .obj_issue_toc .heading,
.page_issue .obj_issue_toc .heading,
.pkp_page_index .current_issue .obj_issue_toc .heading,
.pkp_page_article .obj_article_details .main_entry > .item,
.pkp_page_article .obj_article_details .entry_details,
.pkp_page_article .obj_article_details .main_entry .authors,
.pkp_page_issue_archive .obj_issue_summary,
.page_issue_archive .obj_issue_summary {
    border-color: rgba(151, 122, 96, 0.20) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 1px 6px rgba(67, 54, 43, 0.04) !important;
}

/* Breadcrumb remains lightly translucent */
.cmp_breadcrumbs,
.page_breadcrumbs,
.breadcrumb,
.pkp_page_index .cmp_breadcrumbs,
.pkp_page_issue .cmp_breadcrumbs,
.pkp_page_article .cmp_breadcrumbs,
.pkp_page_issue_archive .cmp_breadcrumbs {
    border-color: rgba(151, 122, 96, 0.20) !important;
    background: rgba(255, 255, 255, 0.89) !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   E. SIDEBAR: SOLID, NO BATIK SHOWING
   -------------------------------------------------------------------------- */

.pkp_structure_sidebar {
    padding: 0.55rem !important;
    background: var(--sidebar-solid) !important;
    border: 1px solid #dbe3ea !important;
    border-radius: 10px !important;
}

.pkp_structure_sidebar .pkp_block,
.pkp_structure_sidebar .panel,
.pkp_structure_sidebar .widget {
    border-color: #dbe3ea !important;
    background: var(--sidebar-card-solid) !important;
    box-shadow: 0 1px 6px rgba(45, 62, 80, 0.045) !important;
}

/* Logos and tool items remain solid */
.pkp_structure_sidebar :is(
    #customblock-journal-template,
    #customblock-journaltemplate,
    #customblock-template-journal,
    #customblock-template,
    #customblock-tools,
    #customblock-tool,
    #customblock-indexing,
    #customblock-index,
    #customblock-google-scholar,
    #customblock-googlescholar,
    .block_journal_template,
    .block_journaltemplate,
    .block_tools,
    .block_tool,
    .block_indexing,
    .block_google_scholar
) {
    background: #f4f8fc !important;
}

/* --------------------------------------------------------------------------
   F. LIGHTER HOVER EFFECTS
   Fade only, no movement or scaling.
   -------------------------------------------------------------------------- */

.pkp_block,
.pkp_block a,
.obj_article_summary,
.obj_issue_summary,
.obj_galley_link,
.galley-link,
.pkp_structure_sidebar img {
    transition:
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease,
        opacity 160ms ease,
        box-shadow 160ms ease !important;
}

.obj_article_summary:hover,
.obj_issue_summary:hover,
.pkp_block:hover,
.pkp_block a:hover,
.pkp_structure_sidebar img:hover {
    transform: none !important;
}

.pkp_structure_sidebar img,
.pkp_structure_sidebar a:hover img,
.pkp_structure_sidebar :focus-within img {
    transform: none !important;
    filter: none !important;
}

/* Reduce oversized hover shadows */
.pkp_block:hover,
.obj_article_summary:hover,
.obj_issue_summary:hover {
    box-shadow: 0 3px 10px rgba(54, 68, 83, 0.07) !important;
}

/* --------------------------------------------------------------------------
   G. FOOTER: BATIK VISIBLE VERY SOFTLY
   -------------------------------------------------------------------------- */

.pkp_structure_footer_wrapper {
    border-top: 4px solid rgba(150, 158, 235, 0.86) !important;
    background:
        linear-gradient(
            135deg,
            var(--footer-soft),
            var(--footer-soft-dark)
        ) !important;
    box-shadow: none !important;
}

.pkp_structure_footer_wrapper::before,
.pkp_structure_footer_wrapper::after {
    display: none !important;
    content: none !important;
}

.pkp_footer_content {
    background: rgba(255, 255, 255, 0.025) !important;
}

:is(
    .journal-footer-grid,
    .pkp_footer_content > .footer-grid,
    .pkp_footer_content > .row,
    .pkp_footer_content > .container
) > * {
    border-color: rgba(230, 237, 255, 0.25) !important;
    background: rgba(255, 255, 255, 0.075) !important;
    box-shadow: none !important;
}

:is(
    .journal-footer-grid,
    .pkp_footer_content > .footer-grid,
    .pkp_footer_content > .row,
    .pkp_footer_content > .container
) > *:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* --------------------------------------------------------------------------
   H. HEADER: KEEP SOLID AND FAST
   -------------------------------------------------------------------------- */

.pkp_structure_head,
.pkp_structure_head .pkp_site_nav_menu,
.pkp_structure_head .pkp_navigation_primary_row {
    background: #322ba5 !important;
    box-shadow: 0 2px 8px rgba(31, 25, 104, 0.10) !important;
}

.pkp_structure_head .pkp_navigation_user_wrapper {
    background: #292383 !important;
}

/* --------------------------------------------------------------------------
   I. MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    body {
        background-size: 96px 96px !important;
    }

    .pkp_structure_content {
        background: rgba(255, 252, 248, 0.14) !important;
    }

    .pkp_structure_main {
        background: rgba(255, 255, 255, 0.90) !important;
    }

    .pkp_structure_sidebar {
        padding: 0.4rem !important;
        border-radius: 8px !important;
    }
}

/* --------------------------------------------------------------------------
   J. REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ==========================================================================
   38. STATIC CONTENT PAGE LAYOUT FIX + SOFT BLUE ON WHITE
   Place this section at the END of the stylesheet.

   Purpose:
   - fix cropped text on static/content pages such as Focus and Scope
   - improve spacing, wrapping, and readability
   - use a soft blue on white feel
   ========================================================================== */

:root {
    --soft-page-bg: rgba(255, 255, 255, 0.94);
    --soft-page-bg-2: rgba(246, 250, 253, 0.96);
    --soft-page-border: rgba(173, 198, 222, 0.44);
    --soft-page-shadow: 0 2px 10px rgba(72, 92, 118, 0.05);
    --soft-page-text: #1e2f44;
    --soft-page-heading: #0f294f;
    --soft-page-accent: #78a7d6;
    --soft-page-accent-2: #5d92c8;
}

/* --------------------------------------------------------------------------
   A. GENERIC CONTENT / STATIC PAGE WRAPPERS
   Covers common OJS static page structures.
   -------------------------------------------------------------------------- */

.pkp_page_page .pkp_structure_main,
.pkp_page_static .pkp_structure_main,
.page_page .pkp_structure_main,
.page_static .pkp_structure_main,
.pkp_page_page .page,
.pkp_page_static .page,
.page_page .page,
.page_static .page,
.pkp_page_page .page_content,
.pkp_page_static .page_content,
.page_page .page_content,
.page_static .page_content,
.pkp_page_page .obj_announcement_full,
.pkp_page_static .obj_announcement_full {
    min-width: 0 !important;
    overflow: visible !important;
}

.pkp_page_page .page,
.pkp_page_static .page,
.page_page .page,
.page_static .page,
.pkp_page_page .page_content,
.pkp_page_static .page_content,
.page_page .page_content,
.page_static .page_content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 1.35rem 1.5rem !important;
    border: 1px solid var(--soft-page-border) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(
            180deg,
            var(--soft-page-bg),
            var(--soft-page-bg-2)
        ) !important;
    box-shadow: var(--soft-page-shadow) !important;
    box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   B. PREVENT TEXT CROP / OVERFLOW
   -------------------------------------------------------------------------- */

.pkp_page_page .page *,
.pkp_page_static .page *,
.page_page .page *,
.page_static .page *,
.pkp_page_page .page_content *,
.pkp_page_static .page_content *,
.page_page .page_content *,
.page_static .page_content * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: normal !important;
    white-space: normal !important;
}

/* paragraphs, lists, content blocks */
.pkp_page_page .page p,
.pkp_page_static .page p,
.page_page .page p,
.page_static .page p,
.pkp_page_page .page_content p,
.pkp_page_static .page_content p,
.page_page .page_content p,
.page_static .page_content p,
.pkp_page_page .page li,
.pkp_page_static .page li,
.page_page .page li,
.page_static .page li,
.pkp_page_page .page_content li,
.pkp_page_static .page_content li,
.page_page .page_content li,
.page_static .page_content li {
    margin: 0 0 1rem !important;
    color: var(--soft-page-text) !important;
    font-size: 1rem !important;
    line-height: 1.82 !important;
    text-align: justify !important;
    text-align-last: left !important;
    overflow: visible !important;
}

/* make lists cleaner */
.pkp_page_page .page ul,
.pkp_page_page .page ol,
.pkp_page_static .page ul,
.pkp_page_static .page ol,
.page_page .page ul,
.page_page .page ol,
.page_static .page ul,
.page_static .page ol,
.pkp_page_page .page_content ul,
.pkp_page_page .page_content ol,
.pkp_page_static .page_content ul,
.pkp_page_static .page_content ol,
.page_page .page_content ul,
.page_page .page_content ol,
.page_static .page_content ul,
.page_static .page_content ol {
    margin: 0 0 1rem 1.35rem !important;
    padding: 0 !important;
}

/* --------------------------------------------------------------------------
   C. PAGE TITLES AND SECTION TITLES
   -------------------------------------------------------------------------- */

.pkp_page_page .page_title,
.pkp_page_static .page_title,
.page_page .page_title,
.page_static .page_title,
.pkp_page_page h1,
.pkp_page_static h1,
.page_page h1,
.page_static h1 {
    margin: 0 0 1rem !important;
    padding: 0 0 0.85rem !important;
    border-bottom: 1px solid rgba(120, 167, 214, 0.24) !important;
    color: var(--soft-page-heading) !important;
    font-size: clamp(1.9rem, 3vw, 2.45rem) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
    overflow: visible !important;
}

.pkp_page_page h2,
.pkp_page_static h2,
.page_page h2,
.page_static h2,
.pkp_page_page h3,
.pkp_page_static h3,
.page_page h3,
.page_static h3 {
    margin: 1.8rem 0 0.75rem !important;
    color: var(--soft-page-heading) !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    overflow: visible !important;
}

.pkp_page_page h2,
.pkp_page_static h2,
.page_page h2,
.page_static h2 {
    font-size: 1.5rem !important;
}

.pkp_page_page h3,
.pkp_page_static h3,
.page_page h3,
.page_static h3 {
    font-size: 1.22rem !important;
}

/* decorative underline / accent for first page title only */
.pkp_page_page .page_title::after,
.pkp_page_static .page_title::after,
.page_page .page_title::after,
.page_static .page_title::after,
.pkp_page_page .page h1:first-of-type::after,
.pkp_page_static .page h1:first-of-type::after,
.page_page .page h1:first-of-type::after,
.page_static .page h1:first-of-type::after {
    display: block !important;
    width: 108px !important;
    height: 5px !important;
    margin-top: 0.95rem !important;
    border-radius: 999px !important;
    background:
        linear-gradient(
            90deg,
            #d2b26c,
            #7eb0da,
            #4e8f88
        ) !important;
    content: "" !important;
}

/* --------------------------------------------------------------------------
   D. IMAGES, TABLES, EMBEDS
   -------------------------------------------------------------------------- */

.pkp_page_page .page img,
.pkp_page_static .page img,
.page_page .page img,
.page_static .page img,
.pkp_page_page .page_content img,
.pkp_page_static .page_content img,
.page_page .page_content img,
.page_static .page_content img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
}

.pkp_page_page .page table,
.pkp_page_static .page table,
.page_page .page table,
.page_static .page table,
.pkp_page_page .page_content table,
.pkp_page_static .page_content table,
.page_page .page_content table,
.page_static .page_content table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    border-collapse: collapse !important;
}

.pkp_page_page .page iframe,
.pkp_page_static .page iframe,
.page_page .page iframe,
.page_static .page iframe,
.pkp_page_page .page_content iframe,
.pkp_page_static .page_content iframe,
.page_page .page_content iframe,
.page_static .page_content iframe {
    max-width: 100% !important;
}

/* --------------------------------------------------------------------------
   E. MAIN CONTENT WIDTH / SIDEBAR RELATION
   Give content room so text does not get cramped.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
    .pkp_page_page .pkp_structure_content,
    .pkp_page_static .pkp_structure_content,
    .page_page .pkp_structure_content,
    .page_static .pkp_structure_content {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 280px !important;
        gap: 1.25rem !important;
        align-items: start !important;
    }

    .pkp_page_page .pkp_structure_main,
    .pkp_page_static .pkp_structure_main,
    .page_page .pkp_structure_main,
    .page_static .pkp_structure_main {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .pkp_page_page .pkp_structure_sidebar,
    .pkp_page_static .pkp_structure_sidebar,
    .page_page .pkp_structure_sidebar,
    .page_static .pkp_structure_sidebar {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   F. MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .pkp_page_page .page,
    .pkp_page_static .page,
    .page_page .page,
    .page_static .page,
    .pkp_page_page .page_content,
    .pkp_page_static .page_content,
    .page_page .page_content,
    .page_static .page_content {
        padding: 1rem !important;
        border-radius: 10px !important;
    }

    .pkp_page_page .page_title,
    .pkp_page_static .page_title,
    .page_page .page_title,
    .page_static .page_title,
    .pkp_page_page h1,
    .pkp_page_static h1,
    .page_page h1,
    .page_static h1 {
        font-size: 1.65rem !important;
        line-height: 1.24 !important;
    }

    .pkp_page_page .page p,
    .pkp_page_static .page p,
    .page_page .page p,
    .page_static .page p,
    .pkp_page_page .page_content p,
    .pkp_page_static .page_content p,
    .page_page .page_content p,
    .page_static .page_content p,
    .pkp_page_page .page li,
    .pkp_page_static .page li,
    .page_page .page li,
    .page_static .page li,
    .pkp_page_page .page_content li,
    .pkp_page_static .page_content li,
    .page_page .page_content li,
    .page_static .page_content li {
        font-size: 0.96rem !important;
        line-height: 1.72 !important;
        text-align: left !important;
        text-align-last: auto !important;
    }
}

/* ==========================================================================
   39. FINAL REFINED LAYOUT, SOFT BLUE PANELS, TOSCA HOVER, LIGHT BATIK
   Place this section at the END of the stylesheet.
   ========================================================================== */

:root {
    --final-soft-blue: #f5f9fd;
    --final-soft-blue-2: #eef5fb;
    --final-soft-blue-border: #d8e6f1;
    --final-soft-blue-shadow: 0 4px 14px rgba(55, 82, 111, 0.075);

    --final-tosca-soft: #e7f7f4;
    --final-tosca-border: #8ccfc4;
    --final-tosca-text: #145c59;

    --final-batik-bg: #f8f3ed;
    --final-batik-pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%20viewBox%3D%220%200%20180%20180%22%3E%0A%3Crect%20width%3D%22180%22%20height%3D%22180%22%20fill%3D%22%23f8f3ed%22%2F%3E%0A%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%20%20%3Cpath%20d%3D%22M90%2018c18%2010%2028%2025%2027%2043-1%2017-12%2030-27%2039-15-9-26-22-27-39-1-18%209-33%2027-43z%22%0A%20%20%20%20%20%20%20%20stroke%3D%22%238d5f42%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%221.4%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M90%2032c10%208%2015%2018%2014%2029-1%2011-6%2020-14%2027-8-7-13-16-14-27-1-11%204-21%2014-29z%22%0A%20%20%20%20%20%20%20%20stroke%3D%22%23b7895f%22%20stroke-opacity%3D%22.20%22%20stroke-width%3D%221.1%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M36%2084c12-15%2027-21%2043-17%2015%204%2025%2016%2031%2031-11%2012-25%2018-41%2015-17-4-28-14-33-29z%22%0A%20%20%20%20%20%20%20%20stroke%3D%22%238d5f42%22%20stroke-opacity%3D%22.15%22%20stroke-width%3D%221.3%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M144%2084c-12-15-27-21-43-17-15%204-25%2016-31%2031%2011%2012%2025%2018%2041%2015%2017-4%2028-14%2033-29z%22%0A%20%20%20%20%20%20%20%20stroke%3D%22%238d5f42%22%20stroke-opacity%3D%22.15%22%20stroke-width%3D%221.3%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M90%20162c18-10%2028-25%2027-43-1-17-12-30-27-39-15%209-26%2022-27%2039-1%2018%209%2033%2027%2043z%22%0A%20%20%20%20%20%20%20%20stroke%3D%22%238d5f42%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%221.4%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M18%2090c10-18%2025-28%2043-27%2017%201%2030%2012%2039%2027-9%2015-22%2026-39%2027-18%201-33-9-43-27z%22%0A%20%20%20%20%20%20%20%20stroke%3D%22%23b7895f%22%20stroke-opacity%3D%22.14%22%20stroke-width%3D%221.1%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M162%2090c-10-18-25-28-43-27-17%201-30%2012-39%2027%209%2015%2022%2026%2039%2027%2018%201%2033-9%2043-27z%22%0A%20%20%20%20%20%20%20%20stroke%3D%22%23b7895f%22%20stroke-opacity%3D%22.14%22%20stroke-width%3D%221.1%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2290%22%20cy%3D%2290%22%20r%3D%229%22%20stroke%3D%22%237d533b%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%221.2%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M0%2035Q35%205%2070%2035T140%2035T210%2035M-30%20145Q5%20115%2040%20145T110%20145T180%20145%22%0A%20%20%20%20%20%20%20%20stroke%3D%22%23b8926b%22%20stroke-opacity%3D%22.11%22%20stroke-width%3D%221%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22%238d5f42%22%20fill-opacity%3D%22.11%22%3E%0A%20%20%3Ccircle%20cx%3D%2290%22%20cy%3D%2290%22%20r%3D%223%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%222.5%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%22180%22%20cy%3D%220%22%20r%3D%222.5%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%220%22%20cy%3D%22180%22%20r%3D%222.5%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%22180%22%20cy%3D%22180%22%20r%3D%222.5%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");
}

/* --------------------------------------------------------------------------
   A. LIGHTER INDONESIAN BATIK BACKGROUND
   -------------------------------------------------------------------------- */

html,
body {
    background-color: var(--final-batik-bg) !important;
}

body {
    background-image: var(--final-batik-pattern) !important;
    background-repeat: repeat !important;
    background-position: top left !important;
    background-size: 180px 180px !important;
    background-attachment: scroll !important;
}

/* Keep the outer page light and transparent */
.pkp_structure_page {
    background: rgba(255, 252, 248, 0.18) !important;
}

/* --------------------------------------------------------------------------
   B. SOFT BLUE FOR FORMERLY WHITE AREAS
   -------------------------------------------------------------------------- */

.pkp_structure_main,
.pkp_structure_main > *,
.pkp_page_index .homepage_about,
.pkp_page_index .current_issue,
.pkp_page_issue .obj_issue_toc,
.pkp_page_issue_archive .cmp_issue_list,
.pkp_page_article .obj_article_details,
.page_issue .obj_issue_toc,
.page_article .obj_article_details,
.page_issue_archive .cmp_issue_list,
.pkp_page_page .page,
.pkp_page_static .page,
.page_page .page,
.page_static .page,
.pkp_page_page .page_content,
.pkp_page_static .page_content,
.page_page .page_content,
.page_static .page_content {
    border-color: var(--final-soft-blue-border) !important;
    background:
        linear-gradient(
            180deg,
            rgba(248, 252, 255, 0.96),
            rgba(238, 245, 251, 0.94)
        ) !important;
    box-shadow: var(--final-soft-blue-shadow) !important;
}

/* Inner cards */
.obj_article_summary,
.obj_issue_summary,
.pkp_page_article .obj_article_details .main_entry > .item,
.pkp_page_article .obj_article_details .entry_details,
.pkp_page_article .obj_article_details .main_entry .authors,
.pkp_page_issue .obj_issue_toc .heading,
.page_issue .obj_issue_toc .heading,
.pkp_page_index .current_issue .obj_issue_toc .heading {
    border-color: var(--final-soft-blue-border) !important;
    background:
        linear-gradient(
            180deg,
            #fbfdff,
            var(--final-soft-blue)
        ) !important;
    box-shadow: 0 2px 9px rgba(55, 82, 111, 0.06) !important;
}

/* Breadcrumb */
.cmp_breadcrumbs,
.page_breadcrumbs,
.breadcrumb {
    border-color: var(--final-soft-blue-border) !important;
    background: rgba(248, 252, 255, 0.96) !important;
    box-shadow: 0 1px 5px rgba(55, 82, 111, 0.04) !important;
}

/* --------------------------------------------------------------------------
   C. ARTICLE DETAIL TITLE: IDEAL SIZE, NO HUGE WORD SPACING
   -------------------------------------------------------------------------- */

.pkp_page_article .obj_article_details .page_title,
.pkp_page_article .obj_article_details > .page_title,
.pkp_page_article .obj_article_details h1.page_title {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 1rem !important;
    padding: 0 0 0.8rem !important;
    color: #0b2d70 !important;
    font-size: clamp(1.45rem, 2vw, 1.9rem) !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.015em !important;
    text-align: left !important;
    text-align-last: auto !important;
    word-spacing: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: manual !important;
}

/* Article titles inside issue/archive lists */
.obj_article_summary .title,
.obj_article_summary .title a,
.pkp_page_issue .obj_article_summary .title,
.pkp_page_issue .obj_article_summary .title a {
    font-size: 1.03rem !important;
    line-height: 1.48 !important;
    letter-spacing: -0.008em !important;
    text-align: left !important;
    word-spacing: normal !important;
    overflow-wrap: anywhere !important;
}

/* --------------------------------------------------------------------------
   D. CURRENT ISSUE: NO CROPPING
   -------------------------------------------------------------------------- */

.pkp_page_index .current_issue {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 1.2rem !important;
}

.pkp_page_index .current_issue .obj_issue_toc {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.pkp_page_index .current_issue .obj_issue_toc .heading {
    display: grid !important;
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr) !important;
    grid-template-areas:
        "cover issue-title"
        "cover description"
        "cover published" !important;
    gap: 0.7rem 1.7rem !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 1rem !important;
    overflow: visible !important;
}

.pkp_page_index .current_issue .obj_issue_toc .heading .cover {
    grid-area: cover !important;
    width: 100% !important;
    max-width: 220px !important;
    margin: 0 !important;
}

.pkp_page_index .current_issue .obj_issue_toc .heading .cover img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 320px !important;
    object-fit: contain !important;
}

.pkp_page_index .current_issue .obj_issue_toc .heading .title,
.pkp_page_index .current_issue .obj_issue_toc .heading .issue_identification,
.pkp_page_index .current_issue .obj_issue_toc .heading > h2,
.pkp_page_index .current_issue .obj_issue_toc .heading > h3 {
    grid-area: issue-title !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
}

.pkp_page_index .current_issue .obj_issue_toc .heading .description {
    grid-area: description !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    color: #263b59 !important;
    font-size: 0.96rem !important;
    line-height: 1.75 !important;
    text-align: left !important;
    text-align-last: auto !important;
    word-spacing: normal !important;
    overflow-wrap: anywhere !important;
    hyphens: manual !important;
}

.pkp_page_index .current_issue .obj_issue_toc .heading .published {
    grid-area: published !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0.2rem 0 0 !important;
}

/* --------------------------------------------------------------------------
   E. ARTICLE CARDS IN ISSUE/ARCHIVE: SOFT TOSCA HOVER
   -------------------------------------------------------------------------- */

.obj_article_summary {
    border: 1px solid var(--final-soft-blue-border) !important;
    background:
        linear-gradient(
            180deg,
            #fbfdff,
            var(--final-soft-blue)
        ) !important;
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease !important;
}

.obj_article_summary:hover,
.obj_article_summary:focus-within {
    border-color: var(--final-tosca-border) !important;
    background: var(--final-tosca-soft) !important;
    box-shadow: 0 5px 15px rgba(38, 126, 118, 0.12) !important;
    transform: none !important;
}

.obj_article_summary:hover .title a,
.obj_article_summary:focus-within .title a,
.obj_article_summary:hover .authors,
.obj_article_summary:focus-within .authors {
    color: var(--final-tosca-text) !important;
}

/* Issue summary on archive page */
.obj_issue_summary:hover,
.obj_issue_summary:focus-within {
    border-color: var(--final-tosca-border) !important;
    background: var(--final-tosca-soft) !important;
    box-shadow: 0 5px 15px rgba(38, 126, 118, 0.10) !important;
    transform: none !important;
}

/* --------------------------------------------------------------------------
   F. SECTION LABELS AND ARTICLE CATEGORY
   -------------------------------------------------------------------------- */

.obj_issue_toc .section > h2,
.obj_issue_toc .section > h3,
.obj_issue_toc .section .section_title {
    border-left-color: #d2b56f !important;
    border-bottom: 3px solid #38aee6 !important;
    color: #123650 !important;
    background: #eef7f6 !important;
    box-shadow: 0 2px 8px rgba(55, 82, 111, 0.05) !important;
}

/* --------------------------------------------------------------------------
   G. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .pkp_page_index .current_issue .obj_issue_toc .heading {
        grid-template-columns: 135px minmax(0, 1fr) !important;
        gap: 0.65rem 1rem !important;
    }

    .pkp_page_article .obj_article_details .page_title,
    .pkp_page_article .obj_article_details > .page_title,
    .pkp_page_article .obj_article_details h1.page_title {
        font-size: 1.45rem !important;
    }
}

@media (max-width: 560px) {
    .pkp_page_index .current_issue .obj_issue_toc .heading {
        grid-template-columns: 95px minmax(0, 1fr) !important;
        grid-template-areas:
            "cover issue-title"
            "cover published"
            "description description" !important;
        padding: 0.8rem !important;
    }

    .pkp_page_index .current_issue .obj_issue_toc .heading .description {
        margin-top: 0.5rem !important;
        font-size: 0.88rem !important;
        line-height: 1.65 !important;
    }

    .pkp_page_article .obj_article_details .page_title,
    .pkp_page_article .obj_article_details > .page_title,
    .pkp_page_article .obj_article_details h1.page_title {
        font-size: 1.3rem !important;
        line-height: 1.38 !important;
    }

    .obj_article_summary .title,
    .obj_article_summary .title a {
        font-size: 0.96rem !important;
    }
}

/* ==========================================================================
   40. SUBMISSION PAGE VISIBILITY + LAYOUT RESTORATION
   Place this section at the END of the stylesheet.

   This patch can restore content that exists in the HTML but was hidden or
   collapsed by CSS. It cannot create submission content that OJS does not
   output because of journal settings, an incorrect URL, or missing sections.
   ========================================================================== */

:root {
    --submission-soft-blue: #f3f8fc;
    --submission-soft-blue-2: #eaf3fa;
    --submission-border: #d3e2ee;
    --submission-heading: #11376d;
    --submission-text: #263b55;
    --submission-accent: #5d9bc9;
    --submission-shadow: 0 4px 14px rgba(52, 82, 112, 0.07);
}

/* --------------------------------------------------------------------------
   A. PAGE SHELL
   Support common OJS body/page class variations.
   -------------------------------------------------------------------------- */

body.pkp_page_submission .pkp_structure_main,
body.pkp_page_submissions .pkp_structure_main,
body.page_submission .pkp_structure_main,
body.page_submissions .pkp_structure_main,
body:has(.page_submission) .pkp_structure_main,
body:has(.page_submissions) .pkp_structure_main {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: clamp(1rem, 2.4vw, 1.8rem) !important;
    border: 1px solid var(--submission-border) !important;
    background:
        linear-gradient(
            180deg,
            rgba(249, 252, 255, 0.97),
            rgba(239, 247, 252, 0.96)
        ) !important;
    box-shadow: var(--submission-shadow) !important;
}

/* Main page wrappers */
.page_submission,
.page_submissions,
.pkp_page_submission,
.pkp_page_submissions {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    color: var(--submission-text) !important;
}

/* Remove accidental empty oversized spacing */
.page_submission::after,
.page_submissions::after,
.pkp_page_submission::after,
.pkp_page_submissions::after {
    clear: both !important;
    display: table !important;
    content: "" !important;
}

/* --------------------------------------------------------------------------
   B. FORCE KNOWN SUBMISSION COMPONENTS TO BE VISIBLE
   -------------------------------------------------------------------------- */

:is(
    .page_submission,
    .page_submissions,
    .pkp_page_submission,
    .pkp_page_submissions
) :is(
    .cmp_notification,
    .cmp_form,
    form,
    fieldset,
    section,
    .submission_checklist,
    .author_guidelines,
    .copyright_notice,
    .privacy_statement,
    .submission_requirements,
    .submission_sections,
    .submission_section,
    .submission_actions,
    .buttons,
    .fields,
    .description,
    .content,
    .item,
    .value,
    .label,
    ul,
    ol,
    p
) {
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Block-level components */
:is(
    .page_submission,
    .page_submissions,
    .pkp_page_submission,
    .pkp_page_submissions
) :is(
    .cmp_notification,
    .cmp_form,
    form,
    fieldset,
    section,
    .submission_checklist,
    .author_guidelines,
    .copyright_notice,
    .privacy_statement,
    .submission_requirements,
    .submission_sections,
    .submission_section,
    .submission_actions
) {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Do not force inline labels/spans to block unnecessarily */
:is(
    .page_submission,
    .page_submissions,
    .pkp_page_submission,
    .pkp_page_submissions
) :is(
    a,
    span,
    strong,
    em,
    label,
    input,
    select,
    textarea,
    button
) {
    visibility: visible !important;
    opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   C. TITLE AND INTRODUCTION
   -------------------------------------------------------------------------- */

:is(
    .page_submission,
    .page_submissions,
    .pkp_page_submission,
    .pkp_page_submissions
) > .page_title,
:is(
    .page_submission,
    .page_submissions,
    .pkp_page_submission,
    .pkp_page_submissions
) h1.page_title {
    margin: 0 0 1.15rem !important;
    padding: 0 0 0.8rem !important;
    border-bottom: 1px solid var(--submission-border) !important;
    color: var(--submission-heading) !important;
    font-size: clamp(1.65rem, 2.5vw, 2.1rem) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

/* --------------------------------------------------------------------------
   D. LOGIN / REGISTER PROMPT AND NOTICES
   -------------------------------------------------------------------------- */

:is(
    .page_submission,
    .page_submissions,
    .pkp_page_submission,
    .pkp_page_submissions
) .cmp_notification {
    margin: 0 0 1.1rem !important;
    padding: 1rem 1.1rem !important;
    border: 1px solid #b9d7e9 !important;
    border-left: 5px solid var(--submission-accent) !important;
    border-radius: 8px !important;
    color: #23435e !important;
    background: #edf7fc !important;
}

/* --------------------------------------------------------------------------
   E. FORM / CHECKLIST / GUIDELINE CARDS
   -------------------------------------------------------------------------- */

:is(
    .page_submission,
    .page_submissions,
    .pkp_page_submission,
    .pkp_page_submissions
) :is(
    .cmp_form,
    form,
    .submission_checklist,
    .author_guidelines,
    .copyright_notice,
    .privacy_statement,
    .submission_requirements,
    .submission_sections,
    .submission_section
) {
    margin: 0 0 1rem !important;
    padding: 1.05rem 1.15rem !important;
    border: 1px solid var(--submission-border) !important;
    border-radius: 9px !important;
    color: var(--submission-text) !important;
    background:
        linear-gradient(
            180deg,
            #fbfdff,
            var(--submission-soft-blue)
        ) !important;
    box-shadow: 0 2px 9px rgba(52, 82, 112, 0.055) !important;
}

/* Avoid nested forms/cards gaining duplicate boxes */
:is(
    .page_submission,
    .page_submissions,
    .pkp_page_submission,
    .pkp_page_submissions
) .cmp_form form {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Section headings */
:is(
    .page_submission,
    .page_submissions,
    .pkp_page_submission,
    .pkp_page_submissions
) :is(h2, h3, h4) {
    color: var(--submission-heading) !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

:is(
    .page_submission,
    .page_submissions,
    .pkp_page_submission,
    .pkp_page_submissions
) h2 {
    margin: 1.3rem 0 0.75rem !important;
    font-size: 1.28rem !important;
}

:is(
    .page_submission,
    .page_submissions,
    .pkp_page_submission,
    .pkp_page_submissions
) h3 {
    margin: 1rem 0 0.6rem !important;
    font-size: 1.08rem !important;
}

/* Text and lists */
:is(
    .page_submission,
    .page_submissions,
    .pkp_page_submission,
    .pkp_page_submissions
) :is(p, li, .description, .value) {
    color: var(--submission-text) !important;
    font-size: 0.95rem !important;
    line-height: 1.72 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
}

:is(
    .page_submission,
    .page_submissions,
    .pkp_page_submission,
    .pkp_page_submissions
) :is(ul, ol) {
    margin: 0.6rem 0 1rem 1.25rem !important;
    padding: 0 !important;
}

:is(
    .page_submission,
    .page_submissions,
    .pkp_page_submission,
    .pkp_page_submissions
) li {
    margin-bottom: 0.55rem !important;
}

/* --------------------------------------------------------------------------
   F. BUTTONS AND LINKS
   -------------------------------------------------------------------------- */

:is(
    .page_submission,
    .page_submissions,
    .pkp_page_submission,
    .pkp_page_submissions
) :is(
    .cmp_button,
    .btn,
    button,
    input[type="submit"],
    .submission_actions a
) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 0.65rem 1rem !important;
    border: 1px solid #4d8fbd !important;
    border-radius: 7px !important;
    color: #ffffff !important;
    background: #5d9bc9 !important;
    box-shadow: none !important;
    font-weight: 750 !important;
    text-decoration: none !important;
}

:is(
    .page_submission,
    .page_submissions,
    .pkp_page_submission,
    .pkp_page_submissions
) :is(
    .cmp_button,
    .btn,
    button,
    input[type="submit"],
    .submission_actions a
):hover {
    border-color: #397aa7 !important;
    background: #4d8fbd !important;
    transform: none !important;
}

/* --------------------------------------------------------------------------
   G. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    body.pkp_page_submission .pkp_structure_main,
    body.pkp_page_submissions .pkp_structure_main,
    body.page_submission .pkp_structure_main,
    body.page_submissions .pkp_structure_main,
    body:has(.page_submission) .pkp_structure_main,
    body:has(.page_submissions) .pkp_structure_main {
        padding: 0.9rem !important;
    }

    :is(
        .page_submission,
        .page_submissions,
        .pkp_page_submission,
        .pkp_page_submissions
    ) :is(
        .cmp_form,
        form,
        .submission_checklist,
        .author_guidelines,
        .copyright_notice,
        .privacy_statement,
        .submission_requirements,
        .submission_sections,
        .submission_section
    ) {
        padding: 0.85rem !important;
    }
}

/* ==========================================================================
   42. BADAN OJS TERPUSAT
   Tempelkan bagian ini di PALING BAWAH stylesheet.

   Hasil:
   - badan OJS berada tepat di tengah layar
   - ruang kiri dan kanan seimbang
   - header, navigasi, konten, sidebar, dan footer sejajar
   - tampilan menyerupai contoh jurnal dengan satu wrapper terpusat
   ========================================================================== */

:root {
    --ojs-centered-width: 1320px;
    --ojs-centered-mobile-gap: 12px;
    --ojs-centered-shadow:
        0 0 0 1px rgba(42, 65, 90, 0.08),
        0 10px 30px rgba(31, 48, 68, 0.10);
}

/* --------------------------------------------------------------------------
   A. LATAR LUAR
   Latar tetap terlihat secara seimbang pada sisi kiri dan kanan.
   -------------------------------------------------------------------------- */

html,
body {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
}

/* --------------------------------------------------------------------------
   B. WRAPPER UTAMA OJS
   Ini adalah aturan utama yang memindahkan badan OJS ke tengah.
   -------------------------------------------------------------------------- */

.pkp_structure_page {
    position: relative !important;
    width: min(calc(100% - 32px), var(--ojs-centered-width)) !important;
    max-width: var(--ojs-centered-width) !important;
    min-width: 0 !important;

    margin-right: auto !important;
    margin-left: auto !important;

    overflow: visible !important;
    background: rgba(255, 255, 255, 0.18) !important;
    box-shadow: var(--ojs-centered-shadow) !important;
}

/* Semua bagian utama mengikuti lebar wrapper */
.pkp_structure_head,
.pkp_structure_footer_wrapper {
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* --------------------------------------------------------------------------
   C. HEADER DAN NAVIGASI SEJAJAR
   -------------------------------------------------------------------------- */

.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name,
.pkp_site_nav_menu,
.pkp_navigation_primary_row,
.pkp_navigation_user_wrapper {
    width: 100% !important;
    max-width: none !important;
}

.pkp_head_wrapper {
    margin: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/*
 * Area banner mengikuti badan OJS.
 * Gambar tidak dipaksa gepeng; hanya wadahnya yang memenuhi wrapper.
 */
.pkp_site_name_wrapper {
    margin: 0 !important;
}

.pkp_site_name {
    margin: 0 !important;
}

.pkp_site_name .is_img {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

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

/* Baris akun dan menu memakai garis batas badan yang sama */
.pkp_navigation_user,
.pkp_navigation_primary_wrapper {
    width: calc(100% - 40px) !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

/* --------------------------------------------------------------------------
   D. KONTEN DAN SIDEBAR DI TENGAH
   -------------------------------------------------------------------------- */

.pkp_structure_content {
    width: calc(100% - 40px) !important;
    max-width: none !important;
    min-width: 0 !important;

    margin-right: auto !important;
    margin-left: auto !important;

    box-sizing: border-box !important;
}

/* Pastikan grid tidak bergeser ke kiri */
@media (min-width: 992px) {
    .pkp_structure_content:has(.pkp_structure_sidebar) {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, var(--journal-sidebar, 320px)) !important;
        justify-content: center !important;
        align-items: start !important;
    }

    .pkp_structure_content > .pkp_structure_main:not(:only-child) {
        grid-column: 1 !important;
    }

    .pkp_structure_content > .pkp_structure_sidebar {
        grid-column: 2 !important;
    }
}

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

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

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

/* --------------------------------------------------------------------------
   E. FOOTER SEJAJAR DENGAN BADAN OJS
   -------------------------------------------------------------------------- */

.pkp_structure_footer {
    width: calc(100% - 40px) !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

/* --------------------------------------------------------------------------
   F. KOMPATIBILITAS BOOTSTRAP
   Mencegah .container menarik laman kembali ke sisi kiri.
   -------------------------------------------------------------------------- */

.pkp_structure_page > .container,
.pkp_structure_page > .container-fluid,
.pkp_structure_head .container,
.pkp_structure_head .container-fluid,
.pkp_structure_content.container,
.pkp_structure_content.container-fluid,
.pkp_structure_footer .container,
.pkp_structure_footer .container-fluid {
    width: 100% !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

/* --------------------------------------------------------------------------
   G. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .pkp_structure_page {
        width: calc(100% - 20px) !important;
    }

    .pkp_navigation_user,
    .pkp_navigation_primary_wrapper,
    .pkp_structure_content,
    .pkp_structure_footer {
        width: calc(100% - 24px) !important;
    }

    .pkp_head_wrapper {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }
}

@media (max-width: 767px) {
    .pkp_structure_page {
        width: calc(100% - var(--ojs-centered-mobile-gap)) !important;
        border-radius: 0 !important;
    }

    .pkp_navigation_user,
    .pkp_navigation_primary_wrapper,
    .pkp_structure_content,
    .pkp_structure_footer {
        width: calc(100% - 16px) !important;
    }

    .pkp_structure_content {
        padding-top: 16px !important;
        padding-bottom: 32px !important;
    }
}

@media (max-width: 479px) {
    .pkp_structure_page {
        width: 100% !important;
        box-shadow: none !important;
    }

    .pkp_navigation_user,
    .pkp_navigation_primary_wrapper,
    .pkp_structure_content,
    .pkp_structure_footer {
        width: calc(100% - 12px) !important;
    }
}

/* ==========================================================================
   43. BACKGROUND ELEGAN + AKUN OJS SATU BARIS + TEKS JUSTIFY RAPI
   Tempelkan bagian ini di PALING BAWAH stylesheet.

   Perubahan:
   - background luar lebih tenang, profesional, dan tidak ramai
   - menu utama, pencarian, dan akun OJS berada dalam satu baris
   - akun OJS tetap di sisi kanan dan sejajar dengan kolom sidebar
   - paragraf penting dibuat rata kiri-kanan secara aman
   ========================================================================== */

:root {
    --elegant-page-base: #f2f4f7;
    --elegant-page-warm: #f8f5f1;
    --elegant-pattern-blue: rgba(63, 87, 137, 0.045);
    --elegant-pattern-brown: rgba(145, 111, 80, 0.035);

    --elegant-nav: #332da3;
    --elegant-nav-dark: #29247f;
    --elegant-nav-line: rgba(255, 255, 255, 0.15);

    --elegant-panel: rgba(247, 251, 255, 0.95);
    --elegant-panel-strong: rgba(255, 255, 255, 0.97);
    --elegant-panel-border: #d9e5ef;
    --elegant-panel-shadow: 0 4px 15px rgba(41, 61, 84, 0.065);
}

/* --------------------------------------------------------------------------
   A. BACKGROUND LUAR YANG LEBIH ELEGAN
   Pola sangat tipis agar halaman tetap hidup, tetapi tidak mencolok.
   -------------------------------------------------------------------------- */

html,
body {
    background-color: var(--elegant-page-base) !important;
}

body {
    background-image:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.72),
            rgba(242, 245, 248, 0.82)
        ),
        radial-gradient(
            ellipse at 0 50%,
            transparent 0 31px,
            var(--elegant-pattern-brown) 31px 32px,
            transparent 32px 100%
        ),
        radial-gradient(
            ellipse at 100% 50%,
            transparent 0 31px,
            var(--elegant-pattern-brown) 31px 32px,
            transparent 32px 100%
        ),
        linear-gradient(
            45deg,
            transparent 47.5%,
            var(--elegant-pattern-blue) 48% 49%,
            transparent 49.5%
        ),
        linear-gradient(
            -45deg,
            transparent 47.5%,
            var(--elegant-pattern-blue) 48% 49%,
            transparent 49.5%
        ),
        linear-gradient(
            135deg,
            var(--elegant-page-warm),
            var(--elegant-page-base)
        ) !important;

    background-size:
        auto,
        180px 180px,
        180px 180px,
        96px 96px,
        96px 96px,
        auto !important;

    background-position:
        0 0,
        0 0,
        90px 90px,
        0 0,
        0 0,
        0 0 !important;

    background-attachment: scroll !important;
}

/* Badan OJS tetap transparan tipis agar latar terasa halus */
.pkp_structure_page {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.24),
            rgba(249, 251, 253, 0.18)
        ) !important;
}

/* Panel utama tetap mudah dibaca */
.pkp_structure_main {
    border-color: var(--elegant-panel-border) !important;
    background:
        linear-gradient(
            180deg,
            var(--elegant-panel),
            rgba(239, 246, 251, 0.94)
        ) !important;
    box-shadow: var(--elegant-panel-shadow) !important;
}

.current_issue,
.obj_issue_toc .heading,
.obj_article_summary,
.obj_issue_summary,
.homepage_about,
.cmp_breadcrumbs,
.breadcrumb {
    border-color: var(--elegant-panel-border) !important;
    background:
        linear-gradient(
            180deg,
            var(--elegant-panel-strong),
            rgba(241, 247, 252, 0.96)
        ) !important;
    box-shadow: 0 2px 9px rgba(41, 61, 84, 0.05) !important;
}

/* Sidebar tetap solid supaya logo dan menu mudah dilihat */
.pkp_structure_sidebar {
    border-color: #d8e2ea !important;
    background: #f3f6f9 !important;
}

.pkp_structure_sidebar .pkp_block,
.pkp_structure_sidebar .panel,
.pkp_structure_sidebar .widget {
    border-color: #dce5ec !important;
    background: #ffffff !important;
}

/* --------------------------------------------------------------------------
   B. MENU, SEARCH, DAN AKUN OJS DALAM SATU BARIS
   Struktur OJS standar menempatkan primary row dan user wrapper di dalam
   .pkp_site_nav_menu. Grid berikut menyatukan keduanya.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .pkp_site_nav_menu {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: minmax(64px, auto) !important;
        align-items: stretch !important;

        width: 100% !important;
        min-height: 64px !important;
        padding: 0 !important;

        border-top: 1px solid var(--elegant-nav-line) !important;
        background:
            linear-gradient(
                90deg,
                var(--elegant-nav),
                #3730ad
            ) !important;
        box-shadow: 0 3px 9px rgba(28, 24, 103, 0.12) !important;
    }

    /* Baris menu utama */
    .pkp_navigation_primary_row {
        grid-column: 1 !important;
        grid-row: 1 !important;

        display: flex !important;
        align-items: stretch !important;

        min-width: 0 !important;
        min-height: 64px !important;
        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    .pkp_navigation_primary_wrapper {
        display: flex !important;
        align-items: stretch !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 64px !important;

        margin: 0 !important;
        padding-left: clamp(22px, 3vw, 50px) !important;
    }

    .pkp_navigation_primary {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        min-width: 0 !important;
    }

    .pkp_navigation_primary > li > a,
    .pkp_navigation_search_wrapper a {
        min-height: 64px !important;
    }

    /* Akun OJS di ujung kanan pada baris yang sama */
    .pkp_navigation_user_wrapper {
        grid-column: 2 !important;
        grid-row: 1 !important;

        position: static !important;
        display: flex !important;
        align-items: center !important;

        width: auto !important;
        min-width: max-content !important;
        min-height: 64px !important;

        margin: 0 !important;
        padding: 0 clamp(22px, 2.2vw, 38px) 0 10px !important;

        border: 0 !important;
        background: transparent !important;
        transform: none !important;
    }

    .pkp_navigation_user {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        width: auto !important;
        max-width: none !important;
        min-width: max-content !important;
        min-height: 64px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        background: transparent !important;
    }

    .pkp_navigation_user > li {
        display: flex !important;
        align-items: center !important;
    }

    .pkp_navigation_user > li > a {
        display: inline-flex !important;
        align-items: center !important;

        min-height: 42px !important;
        margin: 0 !important;
        padding: 0.58rem 0.85rem !important;

        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 10px !important;
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.075) !important;
        box-shadow: none !important;
    }

    .pkp_navigation_user > li > a:hover,
    .pkp_navigation_user > li > a:focus {
        border-color: rgba(255, 255, 255, 0.33) !important;
        background: rgba(255, 255, 255, 0.14) !important;
    }

    /* Search tetap berada di sebelah kanan menu utama */
    .pkp_navigation_search_wrapper {
        display: flex !important;
        align-items: stretch !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }
}

/* --------------------------------------------------------------------------
   C. TEKS RATA KIRI-KANAN YANG RAPI
   Tidak diterapkan pada judul, label, tombol, breadcrumb, dan metadata pendek.
   -------------------------------------------------------------------------- */

.pkp_page_index .homepage_about p,
.pkp_page_index .additional_content p,
.current_issue .description,
.current_issue .description p,
.obj_issue_toc .heading .description,
.obj_issue_toc .heading .description p,
.obj_issue_summary .description,
.obj_issue_summary .description p,
.obj_article_details .abstract,
.obj_article_details .abstract p,
.obj_article_details .references,
.obj_article_details .references p,
.page_about .page_content p,
.page_page .page_content p,
.page_static .page_content p,
.page_about .page p,
.page_page .page p,
.page_static .page p {
    color: #2b4058 !important;
    line-height: 1.78 !important;

    text-align: justify !important;
    text-align-last: left !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

/* Paragraf diberi jarak yang konsisten */
.pkp_page_index .homepage_about p,
.pkp_page_index .additional_content p,
.current_issue .description p,
.obj_issue_toc .heading .description p,
.obj_issue_summary .description p,
.obj_article_details .abstract p,
.obj_article_details .references p,
.page_about .page_content p,
.page_page .page_content p,
.page_static .page_content p {
    margin-bottom: 0.95rem !important;
}

/* Deskripsi Current Issue tidak terpotong */
.current_issue,
.current_issue .obj_issue_toc,
.current_issue .obj_issue_toc .heading,
.current_issue .description,
.current_issue .description p {
    max-width: 100% !important;
    overflow: visible !important;
}

/* --------------------------------------------------------------------------
   D. RESPONSIVE
   Pada tablet dan ponsel, menu kembali ke susunan OJS mobile agar aman.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .pkp_site_nav_menu {
        display: block !important;
        min-height: 0 !important;
        background: var(--elegant-nav-dark) !important;
    }

    .pkp_navigation_primary_row,
    .pkp_navigation_user_wrapper {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .pkp_navigation_user {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }

    .pkp_navigation_user > li {
        display: block !important;
    }

    .pkp_navigation_user > li > a {
        display: flex !important;
        width: 100% !important;
        border: 0 !important;
        border-radius: 7px !important;
        background: transparent !important;
    }
}

@media (max-width: 767px) {
    .pkp_page_index .homepage_about p,
    .pkp_page_index .additional_content p,
    .current_issue .description,
    .current_issue .description p,
    .obj_issue_toc .heading .description,
    .obj_issue_toc .heading .description p,
    .obj_issue_summary .description,
    .obj_issue_summary .description p,
    .obj_article_details .abstract,
    .obj_article_details .abstract p,
    .obj_article_details .references,
    .obj_article_details .references p,
    .page_about .page_content p,
    .page_page .page_content p,
    .page_static .page_content p {
        line-height: 1.68 !important;
        text-align: left !important;
        text-align-last: auto !important;
        hyphens: manual !important;
    }
}

/* ==========================================================================
   44. NAVIGASI, LOGIN/REGISTER, DAN AKUN OJS DALAM SATU BARIS
   Tempelkan bagian ini di PALING BAWAH stylesheet.

   Hasil desktop:
   HOME | FOCUS | INDEXING | SUBMISSIONS | ARCHIVES | SEARCH | REGISTER | LOGIN
   atau:
   HOME | FOCUS | INDEXING | SUBMISSIONS | ARCHIVES | SEARCH | AKUN OJS

   Register/Login yang terlanjur ditambahkan pada Primary Menu disembunyikan,
   karena OJS sudah menampilkannya melalui User Navigation.
   ========================================================================== */

:root {
    --nav-one-row-height: 64px;
    --nav-one-row-bg-1: #342da5;
    --nav-one-row-bg-2: #2f2997;
    --nav-one-row-hover: rgba(255, 255, 255, 0.10);
    --nav-one-row-border: rgba(255, 255, 255, 0.14);
}

/* --------------------------------------------------------------------------
   A. HILANGKAN REGISTER/LOGIN GANDA DARI PRIMARY MENU
   User Navigation tetap menjadi sumber resmi Register, Login, dan akun OJS.
   -------------------------------------------------------------------------- */

.pkp_navigation_primary > li:has(> a[href*="user/register"]),
.pkp_navigation_primary > li:has(> a[href*="/register"]),
.pkp_navigation_primary > li:has(> a[href*="/login"]),
.pkp_navigation_primary > li:has(> a[href$="login"]) {
    display: none !important;
}

/* Fallback: sembunyikan tautannya apabila browser tidak memproses :has() */
.pkp_navigation_primary > li > a[href*="user/register"],
.pkp_navigation_primary > li > a[href*="/register"],
.pkp_navigation_primary > li > a[href*="/login"],
.pkp_navigation_primary > li > a[href$="login"] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   B. SATU BARIS PADA DESKTOP
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    /* Wadah menu menjadi satu flex row, bukan dua tingkat */
    .pkp_site_nav_menu {
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;

        width: 100% !important;
        max-width: none !important;
        min-height: var(--nav-one-row-height) !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        border-top: 1px solid var(--nav-one-row-border) !important;
        background:
            linear-gradient(
                90deg,
                var(--nav-one-row-bg-1),
                var(--nav-one-row-bg-2)
            ) !important;
        box-shadow: 0 3px 10px rgba(31, 26, 108, 0.12) !important;
    }

    /* Primary navigation mengisi ruang kiri */
    .pkp_navigation_primary_row {
        order: 1 !important;
        position: static !important;

        display: flex !important;
        flex: 1 1 auto !important;
        align-items: stretch !important;

        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: var(--nav-one-row-height) !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        transform: none !important;
    }

    .pkp_navigation_primary_wrapper {
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: stretch !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: var(--nav-one-row-height) !important;

        margin: 0 !important;
        padding: 0 0 0 clamp(20px, 3vw, 48px) !important;
    }

    .pkp_navigation_primary {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;

        min-width: 0 !important;
        min-height: var(--nav-one-row-height) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pkp_navigation_primary > li {
        display: flex !important;
        align-items: stretch !important;
        flex: 0 0 auto !important;
    }

    .pkp_navigation_primary > li > a {
        display: inline-flex !important;
        align-items: center !important;

        min-height: var(--nav-one-row-height) !important;
        margin: 0 !important;
        padding: 0.8rem clamp(0.65rem, 1vw, 1rem) !important;

        border: 0 !important;
        border-radius: 0 !important;
        color: rgba(255, 255, 255, 0.94) !important;
        background: transparent !important;

        font-size: clamp(0.78rem, 0.92vw, 0.93rem) !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .pkp_navigation_primary > li > a:hover,
    .pkp_navigation_primary > li > a:focus,
    .pkp_navigation_primary > li > a[aria-current="page"] {
        color: #ffffff !important;
        background: var(--nav-one-row-hover) !important;
    }

    /* Search tetap berada di sisi kanan Primary Navigation */
    .pkp_navigation_search_wrapper {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: stretch !important;

        min-height: var(--nav-one-row-height) !important;
        margin: 0 0 0 auto !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .pkp_navigation_search_wrapper a {
        display: inline-flex !important;
        align-items: center !important;

        min-height: var(--nav-one-row-height) !important;
        margin: 0 !important;
        padding: 0.8rem clamp(0.7rem, 1.15vw, 1.1rem) !important;

        border: 0 !important;
        border-radius: 0 !important;
        color: #ffffff !important;
        background: transparent !important;

        font-size: clamp(0.78rem, 0.92vw, 0.93rem) !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .pkp_navigation_search_wrapper a:hover,
    .pkp_navigation_search_wrapper a:focus {
        background: var(--nav-one-row-hover) !important;
    }

    /* User Navigation berada pada baris yang sama, di sisi paling kanan */
    .pkp_navigation_user_wrapper {
        order: 2 !important;
        position: static !important;
        inset: auto !important;

        display: flex !important;
        flex: 0 0 auto !important;
        align-items: stretch !important;

        width: auto !important;
        max-width: none !important;
        min-width: max-content !important;
        min-height: var(--nav-one-row-height) !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 clamp(18px, 2vw, 32px) 0 0 !important;

        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .pkp_navigation_user {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-end !important;

        width: auto !important;
        max-width: none !important;
        min-width: max-content !important;
        min-height: var(--nav-one-row-height) !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        background: transparent !important;
        text-align: right !important;
    }

    .pkp_navigation_user > li {
        display: flex !important;
        align-items: stretch !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    /* Login, Register, dan akun memakai gaya yang sama dengan menu utama */
    .pkp_navigation_user > li > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: var(--nav-one-row-height) !important;
        margin: 0 !important;
        padding: 0.8rem clamp(0.7rem, 1vw, 0.95rem) !important;

        border: 0 !important;
        border-radius: 0 !important;
        color: rgba(255, 255, 255, 0.94) !important;
        background: transparent !important;
        box-shadow: none !important;

        font-size: clamp(0.78rem, 0.92vw, 0.93rem) !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        text-transform: none !important;
    }

    .pkp_navigation_user > li > a:hover,
    .pkp_navigation_user > li > a:focus {
        color: #ffffff !important;
        background: var(--nav-one-row-hover) !important;
    }

    .pkp_navigation_user .task_count {
        display: inline-grid !important;
        place-items: center !important;

        min-width: 24px !important;
        height: 24px !important;
        margin-left: 0.4rem !important;
        padding: 0 0.35rem !important;

        border-radius: 999px !important;
        color: #29256f !important;
        background: #ffe27c !important;
        font-size: 0.7rem !important;
        font-weight: 850 !important;
    }

    /* Hilangkan ruang kosong dari wrapper lama */
    .pkp_site_nav_menu::before,
    .pkp_site_nav_menu::after,
    .pkp_navigation_user_wrapper::before,
    .pkp_navigation_user_wrapper::after {
        display: none !important;
        content: none !important;
    }
}

/* --------------------------------------------------------------------------
   C. HALAMAN LOGIN DAN REGISTER
   -------------------------------------------------------------------------- */

.page_login,
.page_register {
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.page_login .cmp_form,
.page_register .cmp_form {
    margin: 0 !important;
    padding: clamp(1.1rem, 3vw, 1.8rem) !important;

    border: 1px solid #d7e3ed !important;
    border-radius: 12px !important;
    background:
        linear-gradient(
            180deg,
            rgba(251, 253, 255, 0.98),
            rgba(239, 246, 251, 0.97)
        ) !important;
    box-shadow: 0 4px 14px rgba(45, 66, 90, 0.07) !important;
}

.page_login .page_title,
.page_register .page_title {
    color: #123d72 !important;
    font-size: clamp(1.55rem, 2.5vw, 2rem) !important;
}

.page_login .buttons,
.page_register .buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.65rem !important;
    align-items: center !important;
}

/* --------------------------------------------------------------------------
   D. MOBILE
   User Navigation tetap berada di dalam menu mobile dan tidak diduplikasi.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .pkp_site_nav_menu {
        display: block !important;
        min-height: 0 !important;
    }

    .pkp_navigation_primary_row,
    .pkp_navigation_user_wrapper {
        position: static !important;
        display: block !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        background: transparent !important;
        transform: none !important;
    }

    .pkp_navigation_user {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0.55rem 0 0 !important;
    }

    .pkp_navigation_user > li {
        display: block !important;
        width: 100% !important;
    }

    .pkp_navigation_user > li > a {
        display: flex !important;
        width: 100% !important;
        min-height: 44px !important;
        padding: 0.65rem 0.75rem !important;

        border: 0 !important;
        border-radius: 7px !important;
        color: #ffffff !important;
        background: transparent !important;
    }

    .pkp_navigation_user > li > a:hover,
    .pkp_navigation_user > li > a:focus {
        background: rgba(255, 255, 255, 0.10) !important;
    }
}

/* ==========================================================================
   45. FOOTER TRANSPARAN ELEGAN + AKUN OJS DI KANAN ATAS
   Tempelkan bagian ini di PALING BAWAH stylesheet.

   Desktop:
   Baris 1: Register / Login / Akun OJS di sudut kanan atas
   Baris 2: Home, Focus, Indexing, Submissions, Archives, Search

   Footer:
   - merek PKP disembunyikan
   - latar transparan
   - gradasi abu-abu ke biru dongker
   ========================================================================== */

:root {
    --top-account-height: 54px;
    --top-account-navy: rgba(28, 38, 78, 0.94);
    --top-account-navy-2: rgba(37, 47, 96, 0.92);

    --main-nav-navy: #312ba3;
    --main-nav-navy-2: #292487;

    --footer-gray: rgba(98, 106, 120, 0.88);
    --footer-navy: rgba(26, 39, 75, 0.95);
    --footer-navy-2: rgba(17, 29, 59, 0.96);
    --footer-border: rgba(218, 226, 238, 0.22);
    --footer-text: rgba(245, 248, 252, 0.92);
    --footer-link: #d9e9ff;
}

/* --------------------------------------------------------------------------
   A. USER NAVIGATION DI SUDUT KANAN ATAS
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .pkp_site_nav_menu {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Baris akun di atas */
    .pkp_navigation_user_wrapper {
        order: 1 !important;
        position: static !important;
        inset: auto !important;

        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        max-width: none !important;
        min-height: var(--top-account-height) !important;
        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.11) !important;
        background:
            linear-gradient(
                90deg,
                var(--top-account-navy),
                var(--top-account-navy-2)
            ) !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .pkp_navigation_user {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;

        width: calc(100% - 44px) !important;
        max-width: none !important;
        min-height: var(--top-account-height) !important;
        margin: 0 auto !important;
        padding: 0 !important;

        border: 0 !important;
        background: transparent !important;
        text-align: right !important;
    }

    .pkp_navigation_user > li {
        display: flex !important;
        align-items: center !important;
        margin: 0 0 0 0.45rem !important;
    }

    .pkp_navigation_user > li > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 38px !important;
        margin: 0 !important;
        padding: 0.55rem 0.82rem !important;

        border: 1px solid rgba(255, 255, 255, 0.17) !important;
        border-radius: 10px !important;
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.07) !important;
        box-shadow: none !important;

        font-size: 0.82rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        text-transform: none !important;
    }

    .pkp_navigation_user > li > a:hover,
    .pkp_navigation_user > li > a:focus {
        border-color: rgba(255, 255, 255, 0.32) !important;
        background: rgba(255, 255, 255, 0.14) !important;
    }

    .pkp_navigation_user .task_count {
        display: inline-grid !important;
        place-items: center !important;
        min-width: 24px !important;
        height: 24px !important;
        margin-left: 0.42rem !important;
        padding: 0 0.35rem !important;
        border-radius: 999px !important;
        color: #24234f !important;
        background: #ffe17b !important;
        font-size: 0.7rem !important;
        font-weight: 850 !important;
    }

    /* Baris menu utama di bawah */
    .pkp_navigation_primary_row {
        order: 2 !important;
        position: static !important;

        display: flex !important;
        align-items: stretch !important;

        width: 100% !important;
        max-width: none !important;
        min-height: 64px !important;
        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        background:
            linear-gradient(
                90deg,
                var(--main-nav-navy),
                var(--main-nav-navy-2)
            ) !important;
        box-shadow: 0 3px 10px rgba(24, 22, 80, 0.12) !important;
        backdrop-filter: none !important;
        transform: none !important;
    }

    .pkp_navigation_primary_wrapper {
        display: flex !important;
        align-items: stretch !important;
        width: calc(100% - 44px) !important;
        max-width: none !important;
        min-height: 64px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .pkp_navigation_primary {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pkp_navigation_primary > li {
        display: flex !important;
        align-items: stretch !important;
        flex: 0 0 auto !important;
    }

    .pkp_navigation_primary > li > a,
    .pkp_navigation_search_wrapper a {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 64px !important;
        padding: 0.8rem clamp(0.7rem, 1vw, 1rem) !important;
        border: 0 !important;
        border-radius: 0 !important;
        color: rgba(255, 255, 255, 0.95) !important;
        background: transparent !important;
        font-size: clamp(0.78rem, 0.92vw, 0.93rem) !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .pkp_navigation_primary > li > a:hover,
    .pkp_navigation_primary > li > a:focus,
    .pkp_navigation_primary > li > a[aria-current="page"],
    .pkp_navigation_search_wrapper a:hover,
    .pkp_navigation_search_wrapper a:focus {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.10) !important;
    }

    .pkp_navigation_search_wrapper {
        display: flex !important;
        align-items: stretch !important;
        flex: 0 0 auto !important;
        margin: 0 0 0 auto !important;
        padding: 0 !important;
        border: 0 !important;
    }
}

/* Register/Login duplikat pada Primary Menu tetap disembunyikan */
.pkp_navigation_primary > li:has(> a[href*="user/register"]),
.pkp_navigation_primary > li:has(> a[href*="/register"]),
.pkp_navigation_primary > li:has(> a[href*="/login"]),
.pkp_navigation_primary > li:has(> a[href$="login"]) {
    display: none !important;
}

/* --------------------------------------------------------------------------
   B. FOOTER ELEGAN, TRANSPARAN, ABU-ABU KE BIRU DONGKER
   -------------------------------------------------------------------------- */

.pkp_structure_footer_wrapper {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    width: 100% !important;
    border: 0 !important;
    border-top: 4px solid rgba(121, 137, 186, 0.65) !important;

    color: var(--footer-text) !important;
    background:
        linear-gradient(
            135deg,
            var(--footer-gray) 0%,
            rgba(58, 70, 102, 0.92) 38%,
            var(--footer-navy) 70%,
            var(--footer-navy-2) 100%
        ) !important;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Lapisan dekorasi sangat halus */
.pkp_structure_footer_wrapper::before {
    position: absolute !important;
    z-index: -1 !important;
    inset: 0 !important;
    pointer-events: none !important;

    background:
        radial-gradient(
            circle at 14% 22%,
            rgba(255, 255, 255, 0.09),
            transparent 26%
        ),
        radial-gradient(
            circle at 84% 78%,
            rgba(119, 145, 205, 0.12),
            transparent 30%
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025),
            transparent 45%,
            rgba(255, 255, 255, 0.02)
        ) !important;

    content: "" !important;
}

/* Hapus dekorasi lama tambahan */
.pkp_structure_footer_wrapper::after {
    display: none !important;
    content: none !important;
}

.pkp_structure_footer {
    width: calc(100% - 44px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
}

.pkp_footer_content {
    padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(1.8rem, 3vw, 2.8rem) !important;
    color: var(--footer-text) !important;
    background: transparent !important;
    text-align: center !important;
}

.pkp_footer_content,
.pkp_footer_content p,
.pkp_footer_content span,
.pkp_footer_content li {
    color: var(--footer-text) !important;
}

.pkp_footer_content h2,
.pkp_footer_content h3,
.pkp_footer_content h4,
.pkp_footer_content h5,
.pkp_footer_content h6 {
    color: #ffffff !important;
}

.pkp_footer_content a {
    color: var(--footer-link) !important;
    text-decoration: none !important;
}

.pkp_footer_content a:hover,
.pkp_footer_content a:focus {
    color: #ffffff !important;
}

/* Creative Commons tetap terlihat rapi */
.pkp_footer_content img {
    display: inline-block !important;
    max-width: 150px !important;
    height: auto !important;
    margin: 0.7rem auto !important;
    border-radius: 4px !important;
}

/* Hilangkan merek "Platform & workflow by OJS/PKP" */
.pkp_brand_footer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    opacity: 0 !important;
}

/* Jika tema memakai selector branding alternatif */
.pkp_structure_footer .pkp_brand_footer,
.pkp_structure_footer_wrapper .pkp_brand_footer,
footer .pkp_brand_footer,
footer [class*="brand_footer"] {
    display: none !important;
}

/* Garis pemisah footer menjadi lebih lembut */
.pkp_footer_content hr {
    border: 0 !important;
    height: 1px !important;
    background: var(--footer-border) !important;
}

/* --------------------------------------------------------------------------
   C. MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .pkp_site_nav_menu {
        display: block !important;
        min-height: 0 !important;
    }

    .pkp_navigation_user_wrapper,
    .pkp_navigation_primary_row {
        position: static !important;
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .pkp_navigation_user_wrapper {
        background:
            linear-gradient(
                90deg,
                var(--top-account-navy),
                var(--top-account-navy-2)
            ) !important;
    }

    .pkp_navigation_user {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0.65rem !important;
    }

    .pkp_navigation_user > li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .pkp_navigation_user > li > a {
        display: flex !important;
        width: 100% !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0.65rem 0.75rem !important;
        border: 0 !important;
        border-radius: 7px !important;
        color: #ffffff !important;
        background: transparent !important;
    }

    .pkp_navigation_user > li > a:hover,
    .pkp_navigation_user > li > a:focus {
        background: rgba(255, 255, 255, 0.10) !important;
    }

    .pkp_structure_footer {
        width: calc(100% - 24px) !important;
    }

    .pkp_footer_content {
        text-align: left !important;
    }
}


/* ==========================================================
   FINAL HEADER ONLY OVERRIDE
   Keep original design below header unchanged
   ========================================================== */

/* Full banner header */
.pkp_structure_head {
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
}

.pkp_head_wrapper,
.pkp_site_name_wrapper {
    width:100%;
    max-width:none;
    padding:0;
    margin:0;
}

/* Header image fills complete area */
.pkp_site_name {
    width:100%;
    height:220px;
    margin:0;
    padding:0;
    overflow:hidden;
    display:block;
}

.pkp_site_name .is_img,
.pkp_site_name .is_img img {
    width:100%;
    height:100%;
    display:block;
}

.pkp_site_name .is_img img {
    object-fit:cover;
    object-position:center;
    max-height:none;
}


/* Remove empty header space */
.pkp_site_name_wrapper {
    min-height:0;
}


/* Keep original navigation style */
.pkp_navigation_primary_row {
    width:100%;
}


/* Keep original content, sidebar, footer */
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_structure_footer {
    /* no modification */
}


/* User account stays according to original theme */
.pkp_navigation_user_wrapper {
    z-index:20;
}


/* Responsive */
@media(max-width:991px){
    .pkp_site_name {
        height:120px;
    }
}