/* ============================================================
   OJS-UK Theme — Journal-level pages
   v2 JOURNAL board: identity panel + action box, flat article
   rows with PDF / Read links, hairline sidebar.
   ============================================================ */

/* Journal pages show the tenant nav in the navy header (v2 board);
   the journal's own menu lives in the white tab bar + mobile menu. */

.journal-main-content {
    background: transparent;
}

.journal-homepage-container {
    padding-top: 34px;
    padding-bottom: 40px;
}

/* ---------- Identity panel + action box ---------- */
.journal-identity-row {
    display: flex;
    align-items: stretch;
    gap: 22px;
    margin-bottom: 0;
}

/* Tab strip below the identity area (journal home, v2 board) */
.journal-nav-inline {
    margin: 26px 0 0;
    border-bottom: 1px solid var(--uk-border);
}

/* Content region sits directly on the page background (v2 board):
   no panel box, hairlines only */
.journal-content-panel {
    margin-top: 30px;
}

.journal-nav-inline .journal-nav-menu > li > a,
.journal-nav-inline .journal-nav-menu > li > .journal-nav-label {
    padding-left: 0;
    padding-right: 0;
    margin-right: 34px;
}

/* Identity area sits flat on the page — no box (v2 board);
   only the action rail keeps a border */
.journal-header-section {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    padding: 6px 0 0;
    display: flex;
    gap: 30px;
}

.journal-cover-section {
    flex: 0 0 auto;
}

/* Latest issue label under the cover image */
.latest-issue-info {
    margin-top: 12px;
    max-width: 200px;
    font-family: var(--uk-sans);
    font-size: 12.5px;
    color: var(--uk-text-muted);
}

.latest-issue-info strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--uk-ink);
    margin-bottom: 2px;
}

.journal-cover {
    display: inline-block;
    border: 1px solid var(--uk-border);
    background: var(--uk-navy);
}

.journal-cover img {
    display: block;
    width: 200px;
    height: auto;
}

.journal-info-section {
    flex: 1;
    min-width: 0;
}

.journal-info-section .journal-title {
    font-family: var(--uk-serif);
    font-weight: 400;
    font-size: 32px;
    line-height: 1.22;
    color: var(--uk-ink);
    margin: 0 0 14px;
}

.journal-info-section .journal-description {
    font-family: var(--uk-sans);
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--uk-navy);
    margin-bottom: 4px;
}

/* The description config is rich text (meta + scope lists + prose).
   Every list flows into responsive columns instead of one item per
   line — column count adapts to the viewport */
.journal-info-section .journal-description ul {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
    gap: 6px 28px;
}

.journal-info-section .journal-description li {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.journal-info-section .journal-description strong {
    color: var(--uk-ink);
}

.journal-info-section .journal-description img {
    display: none;
}

.journal-info-section .journal-description table,
.journal-info-section .journal-description tbody,
.journal-info-section .journal-description tr,
.journal-info-section .journal-description td {
    display: block;
    width: auto !important;
    height: auto !important;
    padding: 0;
    border: none;
    text-align: left !important;
}

.journal-info-section .journal-description [class*="col-"] {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.journal-info-section .journal-description .ml15 {
    margin-left: 0 !important;
}

/* Label-above-value meta blocks (v2 Editor-in-Chief / ISSN pattern) */
.journal-meta-rows {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.journal-meta-row {
    font-family: var(--uk-sans);
    font-size: 13px;
    color: var(--uk-text-muted);
}

.journal-meta-row strong {
    display: block;
    color: var(--uk-ink);
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 2px;
}

/* Action box — v2 right rail: solid red submit + icon links */
.journal-action-box {
    flex: 0 0 250px;
    align-self: flex-start;
    background: transparent;
    border: 1px solid var(--uk-border);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.btn-submit-manuscript {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--uk-red);
    border: 1px solid var(--uk-red);
    color: #fff;
    font-family: var(--uk-sans);
    font-size: 14px;
    font-weight: 500;
    padding: 11px 26px;
    transition: background 0.15s ease;
}

.btn-submit-manuscript:hover {
    background: var(--uk-red-dark);
    border-color: var(--uk-red-dark);
    color: #fff;
}

.journal-action-link {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--uk-sans);
    font-size: 13.5px;
    color: var(--uk-ink);
}

.journal-action-link i {
    color: var(--uk-red);
    font-size: 14px;
}

.journal-action-link:hover {
    color: var(--uk-red);
    text-decoration: underline;
}

/* ---------- Section headings ---------- */
/* Same height/hairline position as the sidebar's .sidebar-title so
   "Latest Published Articles" and "Announcements" line up */
.journal-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--uk-border);
}

.journal-heading-tools {
    display: flex;
    align-items: baseline;
    gap: 26px;
}

/* Sorting tab strip above the section heading (v2 board style):
   uppercase tabs on a full-width hairline, active tab underlined */
.research-tabs-bar {
    border-bottom: 1px solid var(--uk-border);
    margin-bottom: 22px;
}

.research-tabs {
    display: flex;
    align-items: baseline;
    gap: 34px;
}

.research-tab {
    background: none;
    border: none;
    font-family: var(--uk-sans);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--uk-text-muted);
    padding: 10px 2px 12px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
}

.research-tab:hover {
    color: var(--uk-red);
}

.research-tab.is-active {
    color: var(--uk-ink);
    border-bottom-color: var(--uk-navy);
}

.section-title {
    font-family: var(--uk-serif);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.3;
    color: var(--uk-ink);
    margin: 0;
}

.title-separator {
    width: 76px;
    height: 3px;
    background: var(--uk-teal);
    margin-bottom: 26px;
}

/* ---------- Flat article rows (v2 "Latest articles") ---------- */
.article-list-flat {
    border-top: none;
}

/* Article thumbnail — shown only when the article has one */
.article-thumb {
    flex: 0 0 auto;
    display: block;
}

.article-thumb img {
    display: block;
    width: 120px;
    height: 84px;
    object-fit: cover;
    border: 1px solid var(--uk-border);
}

.article-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 0;
    border-bottom: 1px solid #dfe2e6;
}

.article-row-main {
    min-width: 0;
    flex: 1;
}

.article-labels {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 6px;
}

.label-article {
    font-family: var(--uk-sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--uk-red);
}

.label-article-id {
    font-family: var(--uk-sans);
    font-size: 12px;
    color: var(--uk-text-muted);
}

.article-title {
    font-family: var(--uk-serif);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    margin: 0 0 5px;
}

.article-title a {
    color: var(--uk-ink);
}

.article-title a:hover {
    color: var(--uk-red);
}

.article-authors {
    font-family: var(--uk-sans);
    font-size: 13px;
    color: var(--uk-text-muted);
    margin: 0 0 4px;
}

.article-meta {
    font-family: var(--uk-sans);
    font-size: 12.5px;
    color: var(--uk-text-muted);
    margin: 0;
}

.article-meta a {
    color: var(--uk-text-muted);
    text-decoration: none;
}

.article-meta a:hover {
    color: var(--uk-red);
    text-decoration: underline;
}

.article-meta-sep {
    margin: 0 6px;
    color: #c3cad4;
}

.article-row-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 26px;
}

.pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--uk-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--uk-red);
    white-space: nowrap;
}

.pdf-link:hover {
    color: var(--uk-red-dark);
    text-decoration: underline;
}

/* Read link in navy — distinct from the red PDF link */
.read-link {
    font-family: var(--uk-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--uk-navy);
    white-space: nowrap;
}

.read-link b {
    font-weight: 400;
    margin-left: 4px;
}

.read-link:hover {
    color: var(--uk-red);
    text-decoration: underline;
}

/* ---------- Sidebar (flat, hairline-divided — v2) ---------- */
.journal-sidebar-right {
    border-left: 1px solid #dfe2e6;
}

.journal-sidebar-right .sidebar-block {
    background: none;
    border: none;
    padding: 0 0 8px;
    margin-bottom: 26px;
}

.sidebar-title {
    font-family: var(--uk-serif);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.3;
    color: var(--uk-ink);
    margin: 0 0 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--uk-border);
}

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

.announcements-list li {
    padding: 13px 0;
    border-bottom: 1px solid #e1e4e8;
}

.announcements-list li:last-child {
    border-bottom: none;
}

.announcements-list li a {
    display: block;
    font-family: var(--uk-serif);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--uk-ink);
    margin-bottom: 4px;
}

.announcements-list li a:hover {
    color: var(--uk-red);
}

.announcement-date,
.view-count {
    font-family: var(--uk-sans);
    font-size: 12px;
    color: var(--uk-text-muted);
}

/* Most read — numbered list (v2) */
.most-viewed-list {
    counter-reset: mostread;
}

.most-viewed-list li {
    counter-increment: mostread;
    display: flex;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid #e1e4e8;
}

.most-viewed-list li:last-child {
    border-bottom: none;
}

.most-viewed-list li::before {
    content: counter(mostread);
    font-family: var(--uk-sans);
    font-size: 12.5px;
    color: var(--uk-text-muted);
    flex-shrink: 0;
    min-width: 14px;
    padding-top: 2px;
}

.most-viewed-list li a {
    font-family: var(--uk-serif);
    font-size: 14px;
    line-height: 1.5;
    color: var(--uk-ink);
}

.most-viewed-list li a:hover {
    color: var(--uk-red);
}

.most-viewed-list .view-count {
    display: none;
}

.indexing-logos img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

/* ---------- Legacy boxed article cards (kept for safety) ---------- */
.article-item {
    background: transparent;
    border: 1px solid var(--uk-border);
    padding: 24px 28px;
    margin-bottom: 20px;
}

.article-thumbnail img {
    width: 100%;
    height: auto;
    border: 1px solid var(--uk-border);
}

.article-abstract {
    font-family: var(--uk-serif);
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--uk-text);
    margin-bottom: 14px;
}

.article-metrics,
.article-metrics-below-image {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-family: var(--uk-sans);
    font-size: 12.5px;
    color: var(--uk-text-muted);
    margin-bottom: 12px;
}

.metric-item i {
    margin-right: 4px;
    color: #a8b1bd;
}

.article-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 4px;
}

.btn-view-pdf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--uk-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--uk-red);
    border: 1px solid var(--uk-red);
    padding: 6px 16px;
    transition: background 0.15s ease, color 0.15s ease;
}

.btn-view-pdf:hover {
    background: var(--uk-red);
    color: #fff;
}

.btn-read-more {
    font-family: var(--uk-sans);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--uk-red);
}

.btn-read-more:hover {
    color: var(--uk-red-dark);
    text-decoration: underline;
}

/* ---------- View all issues (legacy button) ---------- */
.view-all-issues-section {
    text-align: center;
    margin-top: 30px;
}

.btn-view-all-issues {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--uk-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--uk-navy);
    border: 1px solid var(--uk-navy);
    background: transparent;
    padding: 10px 30px;
    transition: background 0.15s ease, color 0.15s ease;
}

.btn-view-all-issues:hover {
    background: var(--uk-navy);
    color: #fff;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .journal-identity-row {
        flex-direction: column;
    }

    .journal-action-box {
        flex: none;
        width: 100%;
    }

    .journal-sidebar-right {
        border-left: none;
        margin-top: 10px;
    }
}

@media (max-width: 767px) {
    .journal-header-section {
        flex-direction: column;
        padding: 22px 18px;
        gap: 18px;
    }

    .journal-cover-section {
        text-align: center;
    }

    .journal-info-section .journal-title {
        font-size: 26px;
    }

    .journal-homepage-container {
        padding-top: 22px;
    }

    .article-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .article-row-actions {
        gap: 20px;
    }

    /* Fit the three sort tabs on one line */
    .research-tabs {
        gap: 18px;
    }

    .research-tab {
        font-size: 11px;
        letter-spacing: 0.06em;
        padding: 10px 0 12px;
    }

    .journal-section-heading {
        gap: 6px 14px;
    }

    .section-title {
        font-size: 20px;
    }

    .journal-cover img {
        width: 168px;
    }
}