/* ==========================================================
   UMSIDA PREPRINT SERVER
   Premium Frontend CSS — OPS 3.4
   Revision 2 (layout + article list + sidebar + archive page)
   ========================================================== */

:root {
    --umsida-navy: #071a52;
    --umsida-navy-2: #0b2b6f;
    --umsida-blue: #0877b5;
    --umsida-blue-soft: #eef7fc;
    --umsida-bg: #f5f7fa;
    --umsida-surface: #ffffff;
    --umsida-text: #1d2736;
    --umsida-muted: #667085;
    --umsida-line: #dde4ec;
    --umsida-line-2: #cfd8e3;
    --umsida-shadow: 0 8px 24px rgba(12, 31, 68, .07);
    --umsida-shadow-sm: 0 3px 10px rgba(12, 31, 68, .05);
    --umsida-radius: 8px;
}

/* -------------------- RESET / BASE -------------------- */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--umsida-bg) !important;
    color: var(--umsida-text);
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

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

a {
    color: var(--umsida-blue);
    text-decoration: none;
}

a:hover {
    color: var(--umsida-navy);
}

/* -------------------- GLOBAL WIDTH -------------------- */

.pkp_structure_page {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    background: var(--umsida-bg) !important;
    box-shadow: none !important;
}

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

.pkp_structure_content {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0 !important;
    background: var(--umsida-surface);
    border-left: 1px solid var(--umsida-line);
    border-right: 1px solid var(--umsida-line);
}

/* -------------------- HEADER -------------------- */

.pkp_structure_head {
    
    border: 0 !important;
    box-shadow: 0 4px 16px rgba(4, 21, 63, .16);
}

.pkp_head_wrapper {
    background: transparent !important;
}

.pkp_site_name {
    padding-top: 20px !important;
    padding-bottom: 10px !important;
    margin: 0 !important;
}

.pkp_site_name .is_text {
    color: #fff !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1.55rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: .01em;
}

/* -------------------- NAVIGATION -------------------- */

.pkp_navigation_primary_row {
    background: transparent !important;
}

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

.pkp_navigation_primary > li > a {
    margin: 0 !important;
    padding: 11px 12px 10px !important;
    color: rgba(255,255,255,.96) !important;
    border-bottom: 2px solid transparent !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: #fff !important;
    background: rgba(255,255,255,.06) !important;
    border-bottom-color: #fff !important;
}

.pkp_navigation_user {
    font-size: 12px !important;
}

.pkp_navigation_user a {
    color: rgba(255,255,255,.94) !important;
}

.pkp_navigation_user a:hover {
    color: #fff !important;
}

.pkp_navigation_search_wrapper a {
    color: #fff !important;
}

/* -------------------- MAIN / SIDEBAR LAYOUT -------------------- */

.pkp_structure_main {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 30px 30px 48px !important;
    margin: 0 !important;
}

.pkp_structure_sidebar {
    flex: 0 0 290px !important;
    width: 290px !important;
    padding: 30px 24px 44px !important;
    margin: 0 !important;
    border-left: 1px solid var(--umsida-line);
    background: #fbfcfe;
}

/* -------------------- PAGE TITLE -------------------- */

.pkp_structure_main h1,
.pkp_structure_main > h2,
.page_index_journal > h2,
.page > h1 {
    color: var(--umsida-text);
}

.pkp_structure_main > h2,
.page_index_journal > h2,
.latest_articles > h2,
.current_issue > h2 {
    margin: 8px 0 20px !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

/* -------------------- ARCHIVE / SEARCH HEADER -------------------- */

.archiveHeader {
    margin: 0 0 24px !important;
    padding: 18px !important;
    background: #fff !important;
    border: 1px solid var(--umsida-line) !important;
    border-radius: var(--umsida-radius) !important;
    box-shadow: var(--umsida-shadow-sm);
}

.archiveHeader_search {
    width: 100%;
}

.archiveHeader_search .pkp_search,
.archiveHeader_search form {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
}

.archiveHeader_search input[type="text"],
.archiveHeader_search input[type="search"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 8px 15px !important;
    border: 1px solid var(--umsida-line-2) !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: var(--umsida-text) !important;
    font-size: 14px !important;
    box-shadow: inset 0 1px 2px rgba(11, 35, 71, .03);
}

.archiveHeader_search input[type="text"]:focus,
.archiveHeader_search input[type="search"]:focus {
    outline: none !important;
    border-color: var(--umsida-blue) !important;
    box-shadow: 0 0 0 3px rgba(8,119,181,.11) !important;
}

.archiveHeader_search button,
.archiveHeader_search input[type="submit"] {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 17px !important;
    border: 1px solid var(--umsida-navy) !important;
    border-radius: 7px !important;
    background: var(--umsida-navy) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer;
}

.archiveHeader_search button:hover,
.archiveHeader_search input[type="submit"]:hover {
    background: var(--umsida-blue) !important;
    border-color: var(--umsida-blue) !important;
}

/* Archive filter links */
.archiveHeader ul,
.archiveHeader .filter {
    margin-top: 14px !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
}

.archiveHeader ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 7px 18px !important;
    list-style: none !important;
}

.archiveHeader ul a {
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* -------------------- ARTICLE LIST -------------------- */

.cmp_article_list,
.pkp_structure_main .cmp_article_list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.cmp_article_list > li {
    margin: 0 0 16px !important;
    padding: 0 !important;
}

.obj_article_summary {
    position: relative;
    display: block !important;
    margin: 0 !important;
    padding: 18px 19px !important;
    overflow: visible !important;
    background: #fff !important;
    border: 1px solid var(--umsida-line) !important;
    border-radius: var(--umsida-radius) !important;
    box-shadow: var(--umsida-shadow-sm) !important;
    color: var(--umsida-text) !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.obj_article_summary:hover {
    border-color: #c7d4e0 !important;
    box-shadow: var(--umsida-shadow) !important;
    transform: translateY(-1px);
}

/* Title */
.obj_article_summary > .title,
.obj_article_summary .title {
    margin: 0 0 5px !important;
    padding: 0 !important;
    border: 0 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.38 !important;
}

.obj_article_summary .title a {
    color: #075f91 !important;
    text-decoration: none !important;
}

.obj_article_summary .title a:hover {
    color: var(--umsida-navy) !important;
}

/* Subtitle */
.obj_article_summary .subtitle {
    display: block !important;
    margin: 3px 0 7px !important;
    color: #667085 !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

/* Meta / authors */
.obj_article_summary .meta {
    position: static !important;
    padding-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
}

.obj_article_summary .authors {
    padding-right: 0 !important;
    margin-bottom: 5px !important;
    color: #202938 !important;
    font-size: 12px !important;
}

.obj_article_summary .pages,
.obj_article_summary .published {
    position: static !important;
    color: var(--umsida-muted) !important;
    font-size: 11px !important;
}

/* -------------------- KEYWORDS / TAGS -------------------- */

.obj_article_summary .keywords,
.obj_article_summary .tags,
.obj_article_summary ul.keywords,
.obj_article_summary ul.tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.obj_article_summary .keywords li,
.obj_article_summary .tags li {
    margin: 0 !important;
    padding: 0 !important;
}

.obj_article_summary .keywords a,
.obj_article_summary .tags a,
.obj_article_summary .keyword {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 3px 9px !important;
    border: 1px solid #cbd5df !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #344054 !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

/* -------------------- GALLEY BUTTONS -------------------- */

/* Important override: OPS/OJS default theme uses nowrap */
.obj_article_summary .galleys_links,
.obj_article_summary ul.galleys_links,
.galleys_links {
    display: flex !important;
    flex-flow: row wrap !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 11px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.obj_article_summary .galleys_links > li,
.galleys_links > li {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.obj_article_summary .obj_galley_link,
.obj_article_summary .cmp_button_wire,
.galleys_links .obj_galley_link,
.galleys_links .cmp_button_wire,
.obj_galley_link,
.cmp_button_wire {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 32px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 6px 11px !important;
    border: 1px solid #2384b7 !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #076b9e !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;
    box-shadow: none !important;
}

.obj_article_summary .obj_galley_link:hover,
.obj_article_summary .cmp_button_wire:hover,
.galleys_links .obj_galley_link:hover,
.galleys_links .cmp_button_wire:hover {
    background: var(--umsida-blue) !important;
    border-color: var(--umsida-blue) !important;
    color: #fff !important;
}

/* File icon spacing */
.obj_galley_link .fa,
.obj_galley_link [class*="fa-"],
.cmp_button_wire .fa {
    margin-right: 5px !important;
}

/* -------------------- HOMEPAGE ABOUT -------------------- */

.homepage_about,
.additional_content {
    margin: 28px 0 0 !important;
    padding: 22px 24px !important;
    background: #fbfcfe !important;
    border: 1px solid var(--umsida-line) !important;
    border-radius: var(--umsida-radius) !important;
}

.homepage_about h2,
.additional_content h2 {
    margin-top: 0 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1.3rem !important;
}

.homepage_about p,
.additional_content p {
    margin: 0 0 12px !important;
    color: #475467 !important;
    line-height: 1.75 !important;
}

/* -------------------- ANNOUNCEMENTS -------------------- */

.cmp_announcements,
.announcements {
    margin-top: 28px !important;
}

.cmp_announcements > h2,
.announcements > h2 {
    margin-bottom: 15px !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

.obj_announcement_summary {
    margin-bottom: 12px !important;
    padding: 16px 18px !important;
    background: #fff !important;
    border: 1px solid var(--umsida-line) !important;
    border-radius: var(--umsida-radius) !important;
}

/* -------------------- SIDEBAR BLOCKS -------------------- */

.pkp_block {
    margin: 0 0 22px !important;
    padding: 0 !important;
}

.pkp_block .title {
    display: block !important;
    position: relative;
    margin: 0 0 12px !important;
    padding: 0 0 8px !important;
    color: #111827 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.pkp_block .title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42px;
    height: 3px;
    border-radius: 3px;
    background: var(--umsida-blue);
}

.pkp_block .content {
    font-size: 12px !important;
}

/* Custom Department menu */
.menu-item {
    margin: 0 !important;
    padding: 0 !important;
}

.menu-item a {
    display: block !important;
    padding: 8px 3px !important;
    border-bottom: 1px solid #e6ebf1 !important;
    color: #056b9e !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    transition: background-color .18s ease, padding-left .18s ease, color .18s ease;
}

.menu-item a:hover {
    padding-left: 9px !important;
    background: #f1f6fa !important;
    color: var(--umsida-navy) !important;
}

/* -------------------- SOCIAL BUTTONS -------------------- */

.social-buttons {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.social-buttons li {
    margin: 0 0 7px !important;
    padding: 0 !important;
}

.social-buttons li a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 36px !important;
    padding: 6px 9px 6px 35px !important;
    border: 1px solid !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    background-repeat: no-repeat !important;
    background-position: 9px center !important;
    background-size: 18px 18px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
}

.social-buttons .x a {
    color: #111 !important;
    border-color: #333 !important;
    background-image: url("/public/x.png") !important;
}

.social-buttons .facebook a {
    color: #3B5998 !important;
    border-color: #3B5998 !important;
    background-image: url("/public/facebook.png") !important;
}

.social-buttons .whatsapp a {
    color: #17a34a !important;
    border-color: #25D366 !important;
    background-image: url("/public/whatsapp.png") !important;
}

.social-buttons .email a {
    color: #d92020 !important;
    border-color: #e33737 !important;
    background-image: url("/public/email.png") !important;
    background-size: 19px 14px !important;
}

.social-buttons .youtube a {
    color: #e00000 !important;
    border-color: #f42424 !important;
    background-image: url("/public/youtube.png") !important;
}

.social-buttons .instagram a {
    color: #c42961 !important;
    border-color: #E1306C !important;
    background-image: url("/public/instagram.png") !important;
}

.social-buttons li a:hover {
    filter: brightness(.97);
    background-color: #f8fafc !important;
}

/* -------------------- FACULTY TABLE -------------------- */

.faculty {
    width: 100% !important;
    margin: 20px auto !important;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--umsida-line);
    border-radius: var(--umsida-radius);
    box-shadow: var(--umsida-shadow-sm);
}

.faculty-header {
    padding: 14px 16px !important;
    background: #f7f9fc !important;
    border-bottom: 1px solid var(--umsida-line) !important;
    color: var(--umsida-text) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}

.faculty table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.faculty th,
.faculty td {
    padding: 10px 11px !important;
    border: 0 !important;
    border-bottom: 1px solid #e6ebf1 !important;
    text-align: left !important;
    vertical-align: top !important;
}

.faculty th {
    background: #fafbfd !important;
    color: #344054 !important;
    font-size: 12px !important;
}

/* -------------------- FOOTER -------------------- */

.pkp_structure_footer_wrapper {
    background: #f1f4f8 !important;
    border-top: 1px solid var(--umsida-line) !important;
}

.pkp_structure_footer {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    color: #667085 !important;
    font-size: 12px !important;
}

/* -------------------- RESPONSIVE -------------------- */

@media (max-width: 1024px) {
    .pkp_head_wrapper,
    .pkp_structure_content,
    .pkp_structure_footer {
        width: calc(100% - 28px) !important;
    }

    .pkp_structure_sidebar {
        flex-basis: 250px !important;
        width: 250px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .pkp_structure_main {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }
}

@media (max-width: 768px) {
    .pkp_head_wrapper,
    .pkp_structure_content,
    .pkp_structure_footer {
        width: 100% !important;
        max-width: none !important;
    }

    .pkp_structure_content {
        display: block !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }

    .pkp_structure_main {
        width: 100% !important;
        padding: 20px 15px 32px !important;
    }

    .pkp_structure_sidebar {
        width: 100% !important;
        padding: 24px 15px 30px !important;
        border-top: 1px solid var(--umsida-line) !important;
        border-left: 0 !important;
    }

    .pkp_site_name {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .archiveHeader_search .pkp_search,
    .archiveHeader_search form {
        flex-wrap: wrap !important;
    }

    .archiveHeader_search input[type="text"],
    .archiveHeader_search input[type="search"] {
        flex-basis: 100% !important;
    }

    .obj_article_summary {
        padding: 15px !important;
    }

    .obj_article_summary .galleys_links,
    .galleys_links {
        gap: 6px !important;
    }
}

@media (max-width: 480px) {
    .obj_article_summary .obj_galley_link,
    .obj_article_summary .cmp_button_wire,
    .galleys_links .obj_galley_link,
    .galleys_links .cmp_button_wire {
        width: 100% !important;
    }

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


/* ==========================================================
   REMOVE VERTICAL DIVIDER BETWEEN MAIN CONTENT AND SIDEBAR
   OPS/OJS 3.4 default theme adds the divider with ::before
   ========================================================== */

.pkp_structure_content {
    border-left: 0 !important;
    border-right: 0 !important;
}

.pkp_structure_sidebar {
    border-left: 0 !important;
    box-shadow: none !important;
}

.has_sidebar > .pkp_structure_sidebar::before,
.pkp_structure_content.has_sidebar > .pkp_structure_sidebar::before,
.pkp_structure_sidebar::before {
    content: none !important;
    display: none !important;
    border: 0 !important;
    border-left: 0 !important;
    width: 0 !important;
    background: transparent !important;
}

/* Ensure the main column itself does not draw a divider */
.has_sidebar > .pkp_structure_main,
.pkp_structure_main {
    border-right: 0 !important;
    box-shadow: none !important;
}


/* ==========================================================
   V4 FIX — REMOVE ALL DEFAULT OPS 3.4 COLUMN DIVIDERS
   Default theme can draw vertical lines using pseudo-elements
   on both .pkp_structure_main and .pkp_structure_sidebar.
   ========================================================== */

.has_sidebar > .pkp_structure_main::before,
.has_sidebar > .pkp_structure_main::after,
.pkp_structure_content.has_sidebar > .pkp_structure_main::before,
.pkp_structure_content.has_sidebar > .pkp_structure_main::after,
.pkp_structure_main::before,
.pkp_structure_main::after,
.has_sidebar > .pkp_structure_sidebar::before,
.has_sidebar > .pkp_structure_sidebar::after,
.pkp_structure_sidebar::before,
.pkp_structure_sidebar::after,
.pkp_structure_content::before,
.pkp_structure_content::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

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