/* =========================================================
   JEEE / OJS 3.3 - Custom Journal Portal Stylesheet
   Journal of Educational Engineering and Environment
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
    --primary: #052359;
    --primary-dark: #8f174f;
    --primary-light: #f8e8f0;
    --accent: #d94b8b;
    --text: #263238;
    --muted: #66737b;
    --border: #e3e7ea;
    --surface: #ffffff;
    --surface-soft: #f7f8fa;
    --page: #f2f4f6;
    --shadow: 0 8px 24px rgba(28, 36, 42, .07);
    --radius: 10px;
    --radius-sm: 7px;
    --content-max: 1240px;
}

/* ---------- Base ---------- */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--page);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.65;
}

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

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

a {
    color: var(--primary);
    text-decoration: none;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

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

button,
input,
select,
textarea {
    font: inherit;
}

::selection {
    background: var(--primary);
    color: #fff;
}

/* ---------- Accessibility ---------- */
.pkp_screen_reader,
.pkp_screen_reader *,
.cmp_skip_to_content {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cmp_skip_to_content:focus {
    position: fixed;
    z-index: 99999;
    top: 12px;
    left: 12px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 10px 14px;
    clip: auto;
    background: #111;
    color: #fff;
    border-radius: 6px;
}

/* ---------- Main page shell ---------- */
.pkp_structure_page {
    min-height: 100vh;
    background: var(--surface);
}

.pkp_head_wrapper,
.pkp_structure_content,
.pkp_structure_footer {
    width: min(100% - 32px, var(--content-max));
    margin-inline: auto;
}

/* ---------- Header / logo ---------- */
.pkp_structure_head {
    background: #fff;
    border-bottom: 1px solid var(--border);
}

.pkp_site_name_wrapper {
    position: relative;
    padding: 18px 0 14px;
}

.pkp_site_name {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.pkp_site_name img {
    display: block;
    width: 100%;
    max-height: 170px;
    object-fit: contain;
    object-position: center;
}

/* ---------- Navigation ---------- */
.pkp_site_nav_menu {
    border-top: 1px solid var(--border);
    background: var(--primary);
}

.pkp_navigation_primary_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 52px;
}

.pkp_navigation_primary_wrapper {
    flex: 1;
    min-width: 0;
}

.pkp_navigation_primary,
.pkp_navigation_user {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pkp_navigation_primary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.pkp_navigation_primary > li > a {
    display: block;
    padding: 14px 16px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li.current > a {
    background: var(--primary-dark);
    color: #fff;
}

.pkp_navigation_search_wrapper {
    flex: 0 0 auto;
}

.pkp_search_desktop {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
}

.pkp_search_desktop:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
}

.pkp_navigation_user_wrapper {
    position: absolute;
    top: 18px;
    right: 0;
    z-index: 20;
}

.pkp_navigation_user > li > a {
    display: block;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

.pkp_navigation_user > li > ul {
    position: absolute;
    right: 0;
    display: none;
    min-width: 170px;
    margin: 7px 0 0;
    padding: 7px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

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

.pkp_navigation_user > li > ul a {
    display: block;
    padding: 8px 14px;
    color: var(--text);
}

.pkp_navigation_user > li > ul a:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
}

/* ---------- Content layout ---------- */
.pkp_structure_content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 285px;
    gap: 28px;
    padding-top: 28px;
    padding-bottom: 36px;
}

.pkp_structure_main {
    min-width: 0;
}

.pkp_structure_sidebar {
    min-width: 0;
}

/* ---------- Homepage hero/accreditation image ---------- */
.homepage_image {
    margin-bottom: 28px;
    overflow: hidden;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
}

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

/* ---------- Section headings ---------- */
.current_issue > h2,
.page_index_journal h2 {
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--primary);
    color: var(--text);
    font-size: 24px;
    line-height: 1.25;
}

.current_issue_title {
    margin: 0 0 18px;
    padding: 14px 16px;
    background: var(--primary-light);
    border-left: 4px solid var(--primary);
    color: var(--primary-dark);
    font-size: 18px;
    font-weight: 700;
}

/* ---------- Current issue ---------- */
.obj_issue_toc {
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
}

.obj_issue_toc .heading {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.obj_issue_toc .cover {
    display: block;
    overflow: hidden;
    border-radius: 7px;
    background: var(--surface-soft);
    box-shadow: 0 4px 12px rgba(0,0,0,.10);
}

.obj_issue_toc .cover img {
    display: block;
    width: 100%;
}

.obj_issue_toc .description {
    color: var(--muted);
    font-size: 14px;
}

.obj_issue_toc .description p {
    margin-top: 0;
}

.obj_issue_toc .published {
    margin-top: 15px;
    font-size: 13px;
}

.obj_issue_toc .published .label {
    font-weight: 700;
    color: var(--text);
}

.obj_issue_toc .published .value {
    color: var(--muted);
}

.galleys h3 {
    margin: 22px 0 9px;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.galleys_links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.obj_galley_link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.obj_galley_link:hover {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

/* ---------- Article list ---------- */
.sections {
    margin-top: 28px;
}

.section > h3 {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-left: 4px solid var(--primary);
    background: var(--surface-soft);
    font-size: 17px;
}

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

.obj_article_summary {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 17px;
    margin-bottom: 14px;
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

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

.obj_article_summary .cover {
    overflow: hidden;
    border-radius: 6px;
    background: var(--surface-soft);
}

.obj_article_summary .cover img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

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

.obj_article_summary .title a {
    color: var(--text);
}

.obj_article_summary .title a:hover {
    color: var(--primary);
}

.obj_article_summary .meta {
    color: var(--muted);
    font-size: 13px;
}

.obj_article_summary .authors {
    margin-bottom: 3px;
}

.obj_article_summary .pages {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
}

.read_more {
    display: inline-flex;
    margin-top: 7px;
    padding: 9px 15px;
    border-radius: 6px;
    background: var(--primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.read_more:hover {
    background: var(--primary-dark);
    color: #fff;
}

/* ---------- Sidebar blocks ---------- */
.pkp_structure_sidebar .pkp_block {
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 4px 14px rgba(28, 36, 42, .045);
}

.pkp_structure_sidebar .pkp_block > .content {
    padding: 12px;
}

.pkp_structure_sidebar .pkp_block .page {
    margin: 0 0 10px;
}

.pkp_structure_sidebar .pkp_block table {
    width: 100% !important;
    border-collapse: collapse;
    margin: 0;
}

.pkp_structure_sidebar .pkp_block td {
    padding: 0 !important;
    border: 0 !important;
}

.pkp_structure_sidebar .pkp_block table a {
    display: block;
    padding: 10px 12px;
    background: var(--primary);
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.pkp_structure_sidebar .pkp_block table a:hover {
    background: var(--primary-dark);
}

.pkp_structure_sidebar .pkp_block p {
    margin: 9px 0;
    text-align: center;
}

.pkp_structure_sidebar .pkp_block p:last-child {
    margin-bottom: 0;
}

.pkp_structure_sidebar .pkp_block p a {
    display: inline-block;
}

.pkp_structure_sidebar .pkp_block p img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

/* Specific sidebar image normalization */
#customblock-menubar img {
    width: 100%;
    max-height: 145px;
    object-fit: contain;
}

#customblock-manuscript img {
    max-width: 170px;
}

#customblock-kerjasama img,
#customblock-crossreff img,
#customblock-referencemanagementsofware img,
#customblock-index img {
    max-width: 165px;
    max-height: 65px;
}

#customblock-statcounter img,
#customblock-flagcounter img {
    max-width: 100%;
}

/* WhatsApp / contact area */
#customblock-menubar > .content > div:last-child {
    padding: 10px;
    border-top: 1px solid var(--border);
    background: #fff;
}

#customblock-menubar > .content > div:last-child img {
    max-width: 46px;
}

/* ---------- Footer ---------- */
.pkp_structure_footer_wrapper {
    margin-top: 0;
    background: #20262b;
    color: #dfe5e8;
}

.pkp_structure_footer {
    padding: 34px 0 18px;
}

.pkp_footer_content {
    font-size: 13px;
    line-height: 1.7;
}

.pkp_footer_content > div {
    margin-bottom: 18px;
    text-align: center;
}

.pkp_footer_content a {
    color: #fff;
    font-weight: 600;
}

.pkp_footer_content a:hover {
    color: #f1a4c7;
}

.pkp_footer_content iframe {
    display: block;
    width: 100%;
    max-width: 900px;
    height: 250px;
    margin: 18px auto 0;
    border: 0;
    border-radius: 8px;
}

.pkp_brand_footer {
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.12);
    text-align: center;
}

.pkp_brand_footer img {
    max-width: 150px;
    opacity: .8;
}

/* ---------- OJS forms / generic components ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
    width: 100%;
    max-width: 100%;
    padding: 9px 11px;
    border: 1px solid #ccd4d9;
    border-radius: 6px;
    background: #fff;
    color: var(--text);
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid rgba(181,31,104,.18);
    border-color: var(--primary);
}

button,
.pkp_button,
input[type="submit"] {
    padding: 9px 15px;
    border: 1px solid var(--primary);
    border-radius: 6px;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

button:hover,
.pkp_button:hover,
input[type="submit"]:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* ---------- Tables ---------- */
table {
    max-width: 100%;
}

.pkp_structure_main table {
    border-collapse: collapse;
}

.pkp_structure_main th,
.pkp_structure_main td {
    padding: 9px 11px;
    border: 1px solid var(--border);
}

.pkp_structure_main th {
    background: var(--surface-soft);
    font-weight: 700;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .pkp_structure_content {
        grid-template-columns: minmax(0, 1fr);
    }

    .pkp_structure_sidebar {
        order: 2;
    }

    .pkp_navigation_primary_row {
        align-items: stretch;
        flex-direction: column;
        gap: 0;
    }

    .pkp_navigation_primary {
        justify-content: center;
    }

    .pkp_navigation_search_wrapper {
        padding: 8px 0 12px;
        text-align: center;
    }

    .pkp_navigation_user_wrapper {
        top: 14px;
    }
}

@media (max-width: 700px) {
    .pkp_head_wrapper,
    .pkp_structure_content,
    .pkp_structure_footer {
        width: min(100% - 20px, var(--content-max));
    }

    .pkp_site_name_wrapper {
        padding: 12px 0 10px;
    }

    .pkp_site_name img {
        max-height: 105px;
    }

    .pkp_navigation_user_wrapper {
        position: static;
        padding: 0 0 10px;
        text-align: right;
    }

    .pkp_navigation_user > li > ul {
        right: 10px;
    }

    .pkp_navigation_primary {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .pkp_navigation_primary > li > a {
        padding: 11px 8px;
        border-bottom: 1px solid rgba(255,255,255,.15);
        text-align: center;
        font-size: 12px;
    }

    .pkp_structure_content {
        padding-top: 18px;
    }

    .obj_issue_toc {
        padding: 15px;
    }

    .obj_issue_toc .heading {
        grid-template-columns: 1fr;
    }

    .obj_issue_toc .cover {
        max-width: 190px;
        margin: 0 auto;
    }

    .obj_article_summary {
        grid-template-columns: 75px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
    }

    .obj_article_summary .title {
        font-size: 15px;
    }

    .current_issue > h2,
    .page_index_journal h2 {
        font-size: 21px;
    }

    .current_issue_title {
        font-size: 15px;
    }
}

@media (max-width: 430px) {
    .pkp_navigation_primary {
        grid-template-columns: 1fr;
    }

    .obj_article_summary {
        grid-template-columns: 1fr;
    }

    .obj_article_summary .cover {
        max-width: 100px;
    }

    .obj_article_summary .cover img {
        aspect-ratio: 3 / 4;
    }

    .pkp_structure_sidebar .pkp_block {
        border-radius: 7px;
    }
}

/* ---------- Print ---------- */
@media print {
    body {
        background: #fff;
        color: #000;
    }

    .pkp_site_nav_menu,
    .pkp_navigation_user_wrapper,
    .pkp_structure_sidebar,
    .pkp_brand_footer {
        display: none !important;
    }

    .pkp_structure_content {
        display: block;
        width: 100%;
    }

    .pkp_structure_footer_wrapper {
        background: #fff;
        color: #000;
    }

    a {
        color: #000;
    }
}

/* =========================================================
   Responsive hardening / OJS 3.3 layout compatibility
   Added to neutralize inherited theme widths, floats and
   paddings that can create horizontal overflow or push the
   main content away from the viewport.
   ========================================================= */

@media screen {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .pkp_structure_page {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: clip;
    }

    .pkp_head_wrapper,
    .pkp_structure_content,
    .pkp_structure_footer {
        width: calc(100% - 32px) !important;
        max-width: var(--content-max) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Reset OJS/theme layout rules that may still apply */
    .pkp_structure_content {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(240px, 285px) !important;
        gap: clamp(18px, 2.2vw, 28px) !important;
        align-items: start !important;
        position: relative !important;
        float: none !important;
        left: auto !important;
        right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .pkp_structure_main {
        grid-column: 1 !important;
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        float: none !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }

    .pkp_structure_sidebar {
        grid-column: 2 !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 285px !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        float: none !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
    }

    /* Prevent children from forcing the whole page wider */
    .pkp_structure_main,
    .pkp_structure_main > *,
    .pkp_structure_sidebar,
    .pkp_structure_sidebar > * {
        min-width: 0;
        box-sizing: border-box;
    }

    .pkp_structure_main .page,
    .pkp_structure_main .page_about,
    .pkp_structure_main .page_contact,
    .pkp_structure_main .obj_issue_toc,
    .pkp_structure_main .obj_article_details,
    .pkp_structure_main .cmp_article_list {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .pkp_structure_main p,
    .pkp_structure_main li,
    .pkp_structure_main a,
    .pkp_structure_sidebar p,
    .pkp_structure_sidebar li,
    .pkp_structure_sidebar a {
        overflow-wrap: anywhere;
        word-break: normal;
    }

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

    .pkp_structure_main pre,
    .pkp_structure_main code {
        max-width: 100%;
    }

    .pkp_structure_main pre {
        overflow-x: auto;
        white-space: pre;
    }

    /* Tables scroll inside content instead of expanding the body */
    .pkp_structure_main table {
        width: 100% !important;
        max-width: 100% !important;
    }

    .pkp_structure_main .table-responsive,
    .pkp_structure_main .cmp_table {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Navigation must not create horizontal overflow */
    .pkp_navigation_primary_row,
    .pkp_navigation_primary_wrapper,
    .pkp_navigation_primary,
    .pkp_navigation_search_wrapper {
        min-width: 0;
        max-width: 100%;
    }

    .pkp_navigation_primary > li,
    .pkp_navigation_primary > li > a {
        max-width: 100%;
    }
}

/* Medium desktop / tablet */
@media screen and (max-width: 1100px) {
    .pkp_structure_content {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 260px) !important;
        gap: 22px !important;
    }

    .pkp_structure_sidebar {
        max-width: 260px !important;
    }
}

/* Tablet and smaller: stack main + sidebar */
@media screen and (max-width: 980px) {
    .pkp_structure_content {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 22px !important;
    }

    .pkp_structure_main,
    .pkp_structure_sidebar {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .pkp_structure_sidebar {
        order: 2;
    }

    .pkp_navigation_primary_row {
        width: 100%;
    }
}

/* Mobile */
@media screen and (max-width: 700px) {
    .pkp_head_wrapper,
    .pkp_structure_content,
    .pkp_structure_footer {
        width: calc(100% - 20px) !important;
    }

    .pkp_structure_content {
        gap: 18px !important;
    }

    .pkp_structure_main,
    .pkp_structure_sidebar {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .pkp_navigation_primary {
        width: 100%;
    }

    .pkp_navigation_primary > li {
        min-width: 0;
    }

    .pkp_navigation_primary > li > a {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .pkp_search_desktop {
        max-width: 100%;
    }

    .obj_issue_toc,
    .obj_article_summary,
    .pkp_structure_sidebar .pkp_block {
        max-width: 100%;
    }
}

/* Small phones */
@media screen and (max-width: 430px) {
    .pkp_head_wrapper,
    .pkp_structure_content,
    .pkp_structure_footer {
        width: calc(100% - 16px) !important;
    }

    body {
        font-size: 14px;
    }

    .pkp_structure_content {
        padding-top: 14px;
        padding-bottom: 24px;
    }

    .pkp_navigation_primary > li > a {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* =========================================================
   FIX v3 — STATIC PAGE WIDTH WITHOUT ARTIFICIAL INNER BORDERS
   Removes the extra frame introduced in v2. OJS/theme can keep
   its outer structural frame, while the content remains fully
   contained and responsive.
   ========================================================= */

@media screen {
    /* Pages without a sidebar should use the whole content area. */
    .pkp_structure_content:not(.has_sidebar) {
        display: block !important;
        width: calc(100% - 32px) !important;
        max-width: var(--content-max) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* IMPORTANT: no extra left/right border here. */
    .pkp_structure_content:not(.has_sidebar) .pkp_structure_main {
        display: block !important;
        float: none !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 28px 30px 36px !important;
        border-left: 0 !important;
        border-right: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Keep static-page wrappers inside the main content box. */
    .pkp_structure_content:not(.has_sidebar) .cmp_breadcrumbs,
    .pkp_structure_content:not(.has_sidebar) .page,
    .pkp_structure_content:not(.has_sidebar) .page_about,
    .pkp_structure_content:not(.has_sidebar) .page_contact,
    .pkp_structure_content:not(.has_sidebar) .pkp_structure_main > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Long text/URLs must wrap instead of forcing overflow. */
    .pkp_structure_content:not(.has_sidebar) .pkp_structure_main p,
    .pkp_structure_content:not(.has_sidebar) .pkp_structure_main li,
    .pkp_structure_content:not(.has_sidebar) .pkp_structure_main h1,
    .pkp_structure_content:not(.has_sidebar) .pkp_structure_main h2,
    .pkp_structure_content:not(.has_sidebar) .pkp_structure_main h3,
    .pkp_structure_content:not(.has_sidebar) .pkp_structure_main h4,
    .pkp_structure_content:not(.has_sidebar) .pkp_structure_main h5,
    .pkp_structure_content:not(.has_sidebar) .pkp_structure_main h6,
    .pkp_structure_content:not(.has_sidebar) .pkp_structure_main a {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    /* Preserve two-column layout only when OJS really has a sidebar. */
    .pkp_structure_content.has_sidebar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(240px, 285px) !important;
        gap: clamp(18px, 2.2vw, 28px) !important;
        align-items: start !important;
    }

    .pkp_structure_content.has_sidebar > .pkp_structure_main {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }

    .pkp_structure_content.has_sidebar > .pkp_structure_sidebar {
        grid-column: 2 !important;
        width: 100% !important;
        max-width: 285px !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
}

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

    .pkp_structure_content.has_sidebar > .pkp_structure_main,
    .pkp_structure_content.has_sidebar > .pkp_structure_sidebar {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .pkp_structure_content:not(.has_sidebar) .pkp_structure_main {
        padding: 24px 24px 32px !important;
    }
}

@media screen and (max-width: 700px) {
    .pkp_structure_content:not(.has_sidebar) {
        width: calc(100% - 20px) !important;
    }

    .pkp_structure_content:not(.has_sidebar) .pkp_structure_main {
        padding: 20px 16px 28px !important;
    }
}

@media screen and (max-width: 430px) {
    .pkp_structure_content:not(.has_sidebar) {
        width: calc(100% - 16px) !important;
    }

    .pkp_structure_content:not(.has_sidebar) .pkp_structure_main {
        padding: 16px 10px 24px !important;
    }
}

/* =========================================================
   FIX v4 — CLEAN BORDER + BALANCED CONTENT PADDING
   Target: pages with a right sidebar (Archives, Search, etc.)
   - one clean outer frame
   - one divider between main content and sidebar
   - comfortable inner spacing
   - no text touching borders
   ========================================================= */

@media screen and (min-width: 981px) {
    /* Create one clean frame aligned with the navigation width. */
    .pkp_structure_content.has_sidebar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 340px !important;
        gap: 0 !important;
        align-items: stretch !important;
        padding: 0 !important;
        border-left: 1px solid var(--border) !important;
        border-right: 1px solid var(--border) !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    /* Main column: remove inherited OJS frame and add balanced padding. */
    .pkp_structure_content.has_sidebar > .pkp_structure_main {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 30px 32px 38px !important;
        border: 0 !important;
        border-right: 1px solid var(--border) !important;
        box-shadow: none !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    /* Sidebar: align its cards to the same visual rhythm as the main text. */
    .pkp_structure_content.has_sidebar > .pkp_structure_sidebar {
        grid-column: 2 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 30px 28px 38px !important;
        border: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    /* OJS default theme draws the divider with sidebar::before.
       Disable it because v4 owns the divider on .pkp_structure_main. */
    .pkp_structure_content.has_sidebar > .pkp_structure_sidebar::before {
        display: none !important;
        content: none !important;
        border: 0 !important;
    }

    /* Remove any inherited decorative vertical lines from the main column. */
    .pkp_structure_content.has_sidebar > .pkp_structure_main::before,
    .pkp_structure_content.has_sidebar > .pkp_structure_main::after {
        display: none !important;
        content: none !important;
        border: 0 !important;
    }

    /* Breadcrumb and page body should follow the new inner padding, not add
       their own horizontal offsets. */
    .pkp_structure_content.has_sidebar .cmp_breadcrumbs,
    .pkp_structure_content.has_sidebar .pkp_structure_main > .page,
    .pkp_structure_content.has_sidebar .pkp_structure_main > .page_archive,
    .pkp_structure_content.has_sidebar .pkp_structure_main > .page_search {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Sidebar blocks fill the available column without extra side offsets. */
    .pkp_structure_content.has_sidebar .pkp_structure_sidebar .pkp_block {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Tablet: stack columns and turn the divider into a horizontal separator. */
@media screen and (max-width: 980px) {
    .pkp_structure_content.has_sidebar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
        padding: 0 !important;
        border-left: 1px solid var(--border) !important;
        border-right: 1px solid var(--border) !important;
        background: #fff !important;
    }

    .pkp_structure_content.has_sidebar > .pkp_structure_main {
        grid-column: 1 !important;
        padding: 26px 24px 30px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--border) !important;
        box-shadow: none !important;
    }

    .pkp_structure_content.has_sidebar > .pkp_structure_sidebar {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .pkp_structure_content.has_sidebar > .pkp_structure_sidebar::before,
    .pkp_structure_content.has_sidebar > .pkp_structure_main::before,
    .pkp_structure_content.has_sidebar > .pkp_structure_main::after {
        display: none !important;
        content: none !important;
        border: 0 !important;
    }
}

/* Mobile: remove the outer vertical frame to maximize usable width. */
@media screen and (max-width: 700px) {
    .pkp_structure_content.has_sidebar {
        border-left: 0 !important;
        border-right: 0 !important;
    }

    .pkp_structure_content.has_sidebar > .pkp_structure_main {
        padding: 20px 16px 24px !important;
    }

    .pkp_structure_content.has_sidebar > .pkp_structure_sidebar {
        padding: 18px 16px 24px !important;
    }
}

@media screen and (max-width: 430px) {
    .pkp_structure_content.has_sidebar > .pkp_structure_main {
        padding: 16px 12px 22px !important;
    }

    .pkp_structure_content.has_sidebar > .pkp_structure_sidebar {
        padding: 16px 12px 22px !important;
    }
}

/* =========================================================
   FIX v5 — RESPONSIVE OJS JOURNAL HEADER / LOGO BANNER
   Target: uploaded journal logo/header image in .pkp_site_name
   - force the logo area to use the full journal container width
   - prevent the OJS default theme from shrinking the image
   - crop only excessive blank top/bottom space on desktop
   - keep the complete banner visible on small screens
   ========================================================= */

/* Keep the journal header aligned with the navigation/content width. */
.pkp_structure_head .pkp_head_wrapper {
    width: min(calc(100% - 32px), var(--content-max)) !important;
    max-width: var(--content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Remove inherited spacing that can make the masthead look tiny/floating. */
.pkp_site_name_wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 0 12px !important;
}

.pkp_site_name {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

/* OJS often gives the image-link an intrinsic/auto width. Override it. */
.pkp_site_name a,
.pkp_site_name a.is_img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

/* Desktop masthead: fill the available width and crop only excess whitespace. */
.pkp_site_name img,
.pkp_site_name a.is_img img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
    height: clamp(190px, 18vw, 245px) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    border: 0 !important;
}

/* Navigation should sit directly below the header, without an accidental gap. */
.pkp_site_nav_menu {
    margin-top: 0 !important;
}

/* Medium screens: retain a strong banner presence without becoming too tall. */
@media screen and (max-width: 980px) {
    .pkp_structure_head .pkp_head_wrapper {
        width: min(calc(100% - 24px), var(--content-max)) !important;
    }

    .pkp_site_name_wrapper {
        padding: 8px 0 10px !important;
    }

    .pkp_site_name img,
    .pkp_site_name a.is_img img {
        height: clamp(155px, 20vw, 195px) !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}

/* Phones: show the whole banner so neither journal nor university logo is cut. */
@media screen and (max-width: 700px) {
    .pkp_structure_head .pkp_head_wrapper {
        width: calc(100% - 16px) !important;
    }

    .pkp_site_name_wrapper {
        padding: 6px 0 8px !important;
    }

    .pkp_site_name img,
    .pkp_site_name a.is_img img {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}

@media screen and (max-width: 430px) {
    .pkp_structure_head .pkp_head_wrapper {
        width: calc(100% - 12px) !important;
    }

    .pkp_site_name_wrapper {
        padding: 4px 0 6px !important;
    }
}

/* OPTIONAL:
   The large image below the navigation in the homepage is .homepage_image,
   which is separate from the journal header/logo. If the same artwork is
   displayed twice and you want ONLY the top masthead, uncomment this block:

.homepage_image {
    display: none !important;
}
*/

/* =========================================================
   FIX v6 — FLEXIBLE DASHBOARD-DRIVEN NAVIGATION + FLUID FRAME
   OJS controls which menu items exist. CSS only lays out whatever
   OJS renders, so adding/removing/reordering menu items in the
   Dashboard does not require editing this stylesheet.
   ========================================================= */

:root {
    --layout-gutter: clamp(12px, 2.4vw, 32px);
    --content-pad-x: clamp(18px, 2.6vw, 34px);
    --content-pad-y: clamp(22px, 2.7vw, 34px);
    --sidebar-pad-x: clamp(18px, 2.2vw, 30px);
    --sidebar-width: clamp(270px, 25vw, 340px);
    --frame-border: 1px solid var(--border);
    --nav-item-pad-x: clamp(11px, 1.35vw, 18px);
    --nav-item-pad-y: 13px;
}

/* ---------- One fluid journal width shared by header/nav/content/footer ---------- */
.pkp_structure_head .pkp_head_wrapper,
.pkp_head_wrapper,
.pkp_structure_content,
.pkp_structure_footer {
    width: min(calc(100% - var(--layout-gutter) - var(--layout-gutter)), var(--content-max)) !important;
    max-width: var(--content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---------- Navigation: render ALL items supplied by OJS Dashboard ---------- */
.pkp_site_nav_menu {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
}

.pkp_navigation_primary_row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    min-height: 52px !important;
    height: auto !important;
    padding: 0 !important;
}

.pkp_navigation_primary_wrapper {
    display: block !important;
    flex: 1 1 680px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
}

.pkp_navigation_primary {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    overflow: visible !important;
}

/* Never hard-code a number of navigation columns/items. */
.pkp_navigation_primary > li {
    position: relative !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_primary > li > a {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    min-height: 52px !important;
    max-width: 100% !important;
    padding: var(--nav-item-pad-y) var(--nav-item-pad-x) !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    border: 0 !important;
}

/* Native OJS dropdowns remain attached to whichever Dashboard item owns them. */
.pkp_navigation_primary > li > ul {
    position: absolute !important;
    z-index: 1000 !important;
    top: 100% !important;
    left: 0 !important;
    display: none;
    min-width: 210px !important;
    max-width: min(320px, 92vw) !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    list-style: none !important;
    background: #fff !important;
    border: var(--frame-border) !important;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
    box-shadow: var(--shadow) !important;
}

.pkp_navigation_primary > li:hover > ul,
.pkp_navigation_primary > li:focus-within > ul {
    display: block !important;
}

.pkp_navigation_primary > li > ul > li,
.pkp_navigation_primary > li > ul > li > a {
    width: 100% !important;
    max-width: 100% !important;
}

.pkp_navigation_primary > li > ul > li > a {
    display: block !important;
    padding: 10px 14px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    color: var(--text) !important;
}

.pkp_navigation_primary > li > ul > li > a:hover,
.pkp_navigation_primary > li > ul > li > a:focus {
    background: var(--primary-light) !important;
    color: var(--primary-dark) !important;
}

/* Search remains on the right when space exists, and automatically drops when not. */
.pkp_navigation_search_wrapper {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    margin-left: auto !important;
    padding: 6px 8px 6px 10px !important;
    text-align: right !important;
}

.pkp_search_desktop {
    white-space: nowrap !important;
}

/* ---------- Flexible border + padding: pages WITH sidebar ---------- */
@media screen and (min-width: 981px) {
    .pkp_structure_content.has_sidebar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--sidebar-width) !important;
        gap: 0 !important;
        align-items: stretch !important;
        padding: 0 !important;
        border-left: var(--frame-border) !important;
        border-right: var(--frame-border) !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
        background: #fff !important;
    }

    .pkp_structure_content.has_sidebar > .pkp_structure_main {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: var(--content-pad-y) var(--content-pad-x) clamp(30px, 3vw, 42px) !important;
        border: 0 !important;
        border-right: var(--frame-border) !important;
        box-shadow: none !important;
        background: #fff !important;
    }

    .pkp_structure_content.has_sidebar > .pkp_structure_sidebar {
        grid-column: 2 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: var(--content-pad-y) var(--sidebar-pad-x) clamp(30px, 3vw, 42px) !important;
        border: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
    }
}

/* ---------- Flexible border + padding: pages WITHOUT sidebar ---------- */
.pkp_structure_content:not(.has_sidebar) {
    display: block !important;
    padding: 0 !important;
    border-left: var(--frame-border) !important;
    border-right: var(--frame-border) !important;
    background: #fff !important;
}

.pkp_structure_content:not(.has_sidebar) > .pkp_structure_main {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: var(--content-pad-y) var(--content-pad-x) clamp(30px, 3vw, 42px) !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Keep all common OJS page wrappers aligned to the fluid inner padding. */
.pkp_structure_main > .cmp_breadcrumbs,
.pkp_structure_main > .page,
.pkp_structure_main > .page_about,
.pkp_structure_main > .page_archive,
.pkp_structure_main > .page_search,
.pkp_structure_main > .page_contact,
.pkp_structure_main > .obj_issue_toc,
.pkp_structure_main > .obj_article_details {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Avoid duplicate vertical lines created by the default OJS theme. */
.pkp_structure_content.has_sidebar > .pkp_structure_sidebar::before,
.pkp_structure_content.has_sidebar > .pkp_structure_main::before,
.pkp_structure_content.has_sidebar > .pkp_structure_main::after {
    display: none !important;
    content: none !important;
    border: 0 !important;
}

/* ---------- Tablet ---------- */
@media screen and (max-width: 980px) {
    :root {
        --layout-gutter: clamp(10px, 2.2vw, 20px);
        --content-pad-x: clamp(16px, 3vw, 24px);
        --content-pad-y: clamp(18px, 3vw, 26px);
    }

    .pkp_navigation_primary_row {
        align-items: stretch !important;
    }

    .pkp_navigation_primary_wrapper {
        flex: 1 1 100% !important;
    }

    .pkp_navigation_primary {
        justify-content: flex-start !important;
    }

    .pkp_navigation_primary > li > a {
        min-height: 48px !important;
        padding: 12px 13px !important;
        white-space: normal !important;
    }

    .pkp_navigation_search_wrapper {
        flex: 1 1 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        padding: 7px 10px 10px !important;
        text-align: right !important;
    }

    .pkp_structure_content.has_sidebar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
        padding: 0 !important;
        border-left: var(--frame-border) !important;
        border-right: var(--frame-border) !important;
        background: #fff !important;
    }

    .pkp_structure_content.has_sidebar > .pkp_structure_main {
        grid-column: 1 !important;
        padding: var(--content-pad-y) var(--content-pad-x) 30px !important;
        border: 0 !important;
        border-bottom: var(--frame-border) !important;
    }

    .pkp_structure_content.has_sidebar > .pkp_structure_sidebar {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: var(--content-pad-y) var(--content-pad-x) 30px !important;
        border: 0 !important;
    }
}

/* ---------- Phones ---------- */
@media screen and (max-width: 700px) {
    :root {
        --layout-gutter: 8px;
        --content-pad-x: clamp(14px, 4vw, 18px);
        --content-pad-y: 18px;
    }

    .pkp_navigation_primary {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: wrap !important;
    }

    .pkp_navigation_primary > li {
        flex: 1 1 auto !important;
    }

    .pkp_navigation_primary > li > a {
        justify-content: center !important;
        width: 100% !important;
        min-height: 44px !important;
        padding: 10px 12px !important;
        text-align: center !important;
        white-space: normal !important;
        border-bottom: 1px solid rgba(255,255,255,.12) !important;
    }

    /* Dropdown becomes part of normal flow on narrow screens, avoiding off-screen menus. */
    .pkp_navigation_primary > li > ul {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .pkp_structure_content.has_sidebar,
    .pkp_structure_content:not(.has_sidebar) {
        border-left: 0 !important;
        border-right: 0 !important;
    }
}

/* Very small phones: one menu item per row only when the viewport truly needs it. */
@media screen and (max-width: 430px) {
    .pkp_navigation_primary > li {
        flex: 1 1 100% !important;
    }

    .pkp_navigation_search_wrapper {
        text-align: center !important;
    }
}

/* =========================================================
   FIX v7 — COMPACT, CONTENT-FIT NAVIGATION
   Keeps Dashboard-driven menu items flexible, but removes the
   oversized empty vertical area. Search stays on the same row
   whenever room exists; extra menu items wrap only when needed.
   ========================================================= */

:root {
    --nav-height: 46px;
    --nav-pad-x: clamp(10px, 1.15vw, 15px);
    --nav-pad-y: 8px;
}

/* The navy navigation bar should be only as tall as its content. */
.pkp_site_nav_menu {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pkp_navigation_primary_row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: var(--nav-height) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

/* Main menu takes the remaining horizontal room, not a hard-coded basis. */
.pkp_navigation_primary_wrapper {
    display: flex !important;
    align-items: stretch !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_primary {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    align-content: stretch !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_primary > li {
    display: flex !important;
    align-items: stretch !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_primary > li > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-height: var(--nav-height) !important;
    height: auto !important;
    margin: 0 !important;
    padding: var(--nav-pad-y) var(--nav-pad-x) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Keep Search compact and on the same desktop row. */
.pkp_navigation_search_wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    align-self: stretch !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: var(--nav-height) !important;
    margin: 0 0 0 auto !important;
    padding: 5px 8px !important;
    text-align: right !important;
}

.pkp_search_desktop {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Dropdown still anchors exactly under its owning Dashboard item. */
.pkp_navigation_primary > li > ul {
    top: 100% !important;
}

/* Medium screens: allow a second compact line only when genuinely necessary. */
@media screen and (max-width: 980px) {
    :root {
        --nav-height: 44px;
        --nav-pad-x: 11px;
        --nav-pad-y: 8px;
    }

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

    .pkp_navigation_primary_wrapper {
        flex: 1 1 calc(100% - 110px) !important;
    }

    .pkp_navigation_primary > li > a {
        min-height: var(--nav-height) !important;
        padding: var(--nav-pad-y) var(--nav-pad-x) !important;
    }

    .pkp_navigation_search_wrapper {
        flex: 0 0 auto !important;
        width: auto !important;
        min-height: var(--nav-height) !important;
        margin-left: auto !important;
        padding: 5px 7px !important;
    }
}

/* Phones: compact wrapping; do not force a huge full-width search row. */
@media screen and (max-width: 700px) {
    :root {
        --nav-height: 42px;
    }

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

    .pkp_navigation_primary_wrapper {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    .pkp_navigation_primary {
        width: 100% !important;
    }

    .pkp_navigation_primary > li {
        flex: 0 1 auto !important;
    }

    .pkp_navigation_primary > li > a {
        width: auto !important;
        min-height: var(--nav-height) !important;
        padding: 8px 10px !important;
        text-align: left !important;
        white-space: normal !important;
    }

    .pkp_navigation_search_wrapper {
        flex: 0 0 auto !important;
        width: auto !important;
        min-height: 40px !important;
        margin-left: auto !important;
        padding: 4px 7px 6px !important;
    }

    .pkp_search_desktop {
        min-height: 32px !important;
        padding: 5px 9px !important;
    }
}

/* Very narrow phones: items may use full rows, but remain compact. */
@media screen and (max-width: 430px) {
    .pkp_navigation_primary > li {
        flex: 1 1 auto !important;
    }

    .pkp_navigation_primary > li > a {
        justify-content: center !important;
        text-align: center !important;
    }
}

/* =========================================================
   FIX v8 — RESTORE OJS USER NAVIGATION IN HEADER
   Keeps Register / Login / profile menu controlled by OJS
   Dashboard while positioning it safely at the top-right of
   the journal masthead. Does not hard-code menu item names.
   ========================================================= */

/* Make the header wrapper the positioning context for user navigation. */
.pkp_structure_head .pkp_head_wrapper {
    position: relative !important;
    overflow: visible !important;
}

/* Restore the OJS user navigation wrapper. */
.pkp_navigation_user_wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: clamp(8px, 1.1vw, 14px) !important;
    right: clamp(8px, 1.2vw, 16px) !important;
    left: auto !important;
    width: auto !important;
    max-width: calc(100% - 24px) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 5000 !important;
    text-align: right !important;
    pointer-events: auto !important;
}

/* OJS decides which top-level user items exist. CSS only lays them out. */
.pkp_navigation_user {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.pkp_navigation_user > li {
    position: relative !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Compact glass-like buttons that stay readable over the header image. */
.pkp_navigation_user > li > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 6px 11px !important;
    border: 1px solid rgba(8, 43, 92, .20) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .92) !important;
    color: #082b5c !important;
    box-shadow: 0 2px 8px rgba(8, 43, 92, .08) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
    background: #082b5c !important;
    border-color: #082b5c !important;
    color: #fff !important;
    outline: none !important;
}

/* Account/profile dropdown: right aligned so it stays inside the page. */
.pkp_navigation_user > li > ul {
    position: absolute !important;
    z-index: 6000 !important;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    left: auto !important;
    display: none !important;
    width: max-content !important;
    min-width: 190px !important;
    max-width: min(300px, calc(100vw - 24px)) !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    list-style: none !important;
    background: #fff !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow) !important;
}

.pkp_navigation_user > li:hover > ul,
.pkp_navigation_user > li:focus-within > ul {
    display: block !important;
}

.pkp_navigation_user > li > ul > li,
.pkp_navigation_user > li > ul > li > a {
    width: 100% !important;
    max-width: 100% !important;
}

.pkp_navigation_user > li > ul > li > a {
    display: block !important;
    padding: 9px 13px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: var(--text) !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    white-space: normal !important;
}

.pkp_navigation_user > li > ul > li > a:hover,
.pkp_navigation_user > li > ul > li > a:focus {
    background: var(--primary-light) !important;
    color: var(--primary-dark) !important;
}

/* Tablet: keep the user menu in the upper-right, but slightly tighter. */
@media screen and (max-width: 980px) {
    .pkp_navigation_user_wrapper {
        top: 8px !important;
        right: 8px !important;
        max-width: calc(100% - 16px) !important;
    }

    .pkp_navigation_user {
        gap: 5px !important;
    }

    .pkp_navigation_user > li > a {
        min-height: 30px !important;
        padding: 5px 9px !important;
        font-size: 11.5px !important;
    }
}

/* Phones: show user navigation as a compact row above the primary nav.
   This avoids covering the journal/university logos on the narrow banner. */
@media screen and (max-width: 700px) {
    .pkp_navigation_user_wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 5px 7px !important;
        background: #fff !important;
        text-align: right !important;
        z-index: 5000 !important;
    }

    .pkp_navigation_user {
        justify-content: flex-end !important;
    }

    .pkp_navigation_user > li > ul {
        right: 0 !important;
        left: auto !important;
    }
}