/* Hide left sidebar only on homepage */
.page_index_journal .pkp_structure_sidebar.left {
    display: none;
}
/* ==================== Top small login/register bar ==================== */
.header-bar {
    background: #f2f2f2;
    padding: 4px 0;
    font-size: 13px;
    text-align: right;
}
.header-bar .header-links a {
    margin-left: 12px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
}
.header-bar .header-links a:hover {
    color: #004080;
    text-decoration: underline;
}

/* ==================== Logo row ==================== */
.header-top {
    padding: 8px 0;
}
.header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.pkp_site_name img {
    max-height: 120px;
    width: auto;
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 10px;
}
.search-form {
    display: flex;
    align-items: center;
}
.search-form input {
    padding: 5px 8px;
    font-size: 13px;
    border: 1px solid #cfcfcf;
    border-radius: 3px 0 0 3px;
}
.search-form button {
    padding: 6px 9px;
    font-size: 13px;
    background: #004080;
    color: #fff;
    border: none;
    border-radius: 0 3px 3px 0;
    cursor: pointer;
}
.search-form button:hover { background: #003366; }
.submit-btn {
    padding: 6px 12px;
    background: #cc0000;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
}
.submit-btn:hover { background: #a30000; }

/* ==================== Navigation menu ==================== */
.pkp_site_nav_menu {
    background: #004080;
    padding: 16px 0; /* double the previous padding */
    position: relative;
    z-index: 200;
}

.pkp_navigation_primary {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pkp_navigation_primary > li {
    position: relative;
    margin: 0;
}
.pkp_navigation_primary > li > a {
    color: #fff !important;
    text-decoration: none;
    font-size: 14px;
    padding: 8px 10px;
    display: block;
    text-transform: capitalize;
    white-space: nowrap;
}
.pkp_navigation_primary > li > a:hover {
    background: rgba(0,0,0,0.12);
    border-radius: 3px;
}
.pkp_navigation_primary li ul {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #0d4a6a;
    min-width: 190px;
    padding: 6px 0;
    margin: 0;
    box-shadow: 0 6px 14px rgba(0,0,0,0.25);
    z-index: 9999;
}
.pkp_navigation_primary li:hover > ul { display: block; }
.pkp_navigation_primary li ul li a {
    color: #fff !important;
    padding: 8px 15px;
    display: block;
    font-size: 13px;
}
.pkp_navigation_primary li ul li a:hover { background: rgba(0,0,0,0.12); }

/* Responsive menu adjustments */
@media (max-width: 900px) {
    .pkp_navigation_primary { flex-wrap: wrap; gap: 6px; }
    .pkp_navigation_primary > li > a { font-size: 13px; padding: 7px 8px; }
}
@media (max-width: 480px) {
    .header-flex { flex-direction: column; align-items: flex-start; }
    .header-actions { width: 100%; justify-content: flex-start; gap: 8px; }
    .search-form input { width: 70%; }
    .submit-btn { margin-left: 6px; }
}

/* ==================== Homepage Styles ==================== */
.page_index_journal {
    width: 100%;
}

/* Homepage banner */
.page_index_journal .homepage_banner {
    width: 100%;
    overflow: hidden;
    margin-top: 0;
}
.page_index_journal .homepage_banner img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
}

/* Wrapper for left + right sections */
.page_index_journal .homepage_content_wrapper {
    display: flex;
    gap: 20px;
    margin: 30px auto;
    max-width: 1200px;
}

/* Left section: Sidebar */
.page_index_journal .left_sidebar {
    flex: 1;
    min-width: 250px;
}

/* Right section: Main content */
.page_index_journal .main_content {
    flex: 3;
    min-width: 60%;
}

/* About + Latest Articles spacing */
.page_index_journal .homepage_about,
.page_index_journal .latest_articles {
    margin-bottom: 30px;
}

/* ==================== Current Issue box ==================== */
.page_index_journal .current_issue {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}
.page_index_journal .current_issue h2,
.page_index_journal .current_issue h3 {
    margin-top: 0;
}
.page_index_journal .current_issue_title {
    font-weight: 600;
    margin-bottom: 10px;
}

/* Quick Links */
.page_index_journal .quick_links {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}
.page_index_journal .quick_links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.page_index_journal .quick_links ul li {
    margin-bottom: 10px;
}
.page_index_journal .quick_links ul li a {
    color: #0056b3;
    text-decoration: none;
    font-weight: 500;
}
.page_index_journal .quick_links ul li a:hover {
    text-decoration: underline;
}

/* About Section */
.page_index_journal .homepage_about {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
}

/* Latest Articles Section */
.page_index_journal .latest_articles {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
}

/* Latest Articles TOC adjustments */
.page_index_journal .latest_articles .obj_issue_toc .heading {
    display: flex !important;
    gap: 0;
    padding: 0;
    align-items: center;
}

/* Hide cover image and published in Latest Articles TOC */
.page_index_journal .latest_articles .obj_issue_toc .cover img {
    display: none !important;
}
.page_index_journal .latest_articles .obj_issue_toc .published {
    display: none !important;
}

/* Latest Articles article list */
.page_index_journal .latest_articles .cmp_article_list li {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}
.page_index_journal .latest_articles .cmp_article_list .title a {
    font-weight: 600;
    color: #004080;
    text-decoration: none;
}
.page_index_journal .latest_articles .cmp_article_list .title a:hover {
    text-decoration: underline;
}
.page_index_journal .latest_articles .cmp_article_list .meta {
    font-size: 13px;
    color: #555;
    margin-top: 3px;
}

/* New User Login Box */
.page_index_journal .new_user_login {
    background: #fff9e6; /* light yellow/orange */
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}
.page_index_journal .new_user_login h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 600;
    color: #004080;
}
.page_index_journal .new_user_login ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.page_index_journal .new_user_login ul li {
    margin-bottom: 10px;
}
.page_index_journal .new_user_login ul li a {
    color: #0056b3;
    text-decoration: none;
    font-weight: 500;
}
.page_index_journal .new_user_login ul li a:hover {
    text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width:768px) {
    .page_index_journal .homepage_content_wrapper {
        flex-direction: column;
    }
    .page_index_journal .left_sidebar,
    .page_index_journal .main_content {
        min-width: 100%;
    }
    .page_index_journal .latest_articles .obj_issue_toc .heading {
        flex-direction: column;
        align-items: flex-start;
    }
    .page_index_journal .latest_articles .obj_issue_toc .cover img {
        max-width: 100%;
    }
}

/* ==================== Homepage remains untouched ==================== */
.page_index_journal {
    width: 100%;
}

/* ==================== Inner pages content centralized ==================== */
:not(.page_index_journal) .page {
    max-width: 1200px;       /* central content width */
    margin: 0 auto;           /* center horizontally */
    padding: 0 20px;          /* optional side padding */
    box-sizing: border-box;
}

.custom_footer_wrapper {
    background: #004080;  /* same as top menu */
    color: #fff;
    padding: 15px 20px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.custom_footer_wrapper a {
    color: #fff;
    text-decoration: underline;
}

.custom_footer_wrapper a:hover {
    color: #ffcc00; /* optional hover color */
}

.footer_top,
.footer_issn,
.footer_license_links {
    margin-bottom: 5px;
}

.footer_license_links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.footer_license {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer_license img {
    display: block;
    max-height: 40px;
    width: auto;
}

.footer_links {
    text-align: right;
    font-size: 13px;
}

/* Responsive: Stack footer items on small screens */
@media (max-width: 768px) {
    .custom_footer_wrapper {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .footer_license_links {
        align-items: flex-start;
    }
    .footer_links {
        text-align: left;
    }
}

/* Breadcrumbs centralization */
:not(.page_index_journal) nav.cmp_breadcrumbs {
    max-width: 1200px;
    margin: 0 auto 20px auto;  /* center + bottom spacing */
    padding: 0 20px;
}

/* Optional: centralize sections like forms/articles */
:not(.page_index_journal) section,
:not(.page_index_journal) article,
:not(.page_index_journal) form {
    max-width: 800px;
    margin: 0 auto;
}

/* Header stays full width */
.header-bar,
.header-top,
.pkp_site_nav_menu {
    width: 100%;
    margin: 0;
    padding: 0;
}
/* ==================== Top Header Bar ==================== */
.header-bar {
    background: #f2f2f2;        /* bar background color */
    padding: 12px 0;            /* increase height */
    font-size: 14px;            /* font size */
}

.header-bar .container {
    display: flex;              
    justify-content: flex-end;  /* align links to right */
    align-items: center;        /* vertical center */
    padding-right: 20px;        /* extra right spacing */
}

.header-bar .header-links a {
    margin-left: 15px;          /* space between links */
    color: #333;
    text-decoration: none;
    font-weight: 500;
}

.header-bar .header-links a:hover {
    color: #004080;
    text-decoration: underline;
}

.header-bar .header-links .separator {
    margin: 0 5px;              /* space around "|" */
    color: #333;
}

/* Responsive for small screens */
@media (max-width: 480px) {
    .header-bar .container {
        justify-content: center; /* center links on mobile */
        flex-wrap: wrap;
        padding-right: 10px;
    }
    .header-bar .header-links a,
    .header-bar .header-links .separator {
        margin: 5px 5px 0 5px;
    }
}

/* ==================== Mobile header & hamburger fix ==================== */
@media (max-width: 768px) {
    /* Hide logo completely */
    .pkp_site_name {
        display: none !important;
    }

    /* Show the hamburger menu toggle (OJS default) */
    .pkp_navigation_primary {
        display: block !important;       /* ensure menu container shows */
        width: 100%;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Stack top bar + actions */
    .header-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .header-actions {
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
        margin-left: 0;
    }

    /* Ensure menu items are vertical */
    .pkp_navigation_primary > li {
        display: block;
        width: 100%;
    }

    .pkp_navigation_primary > li > a {
        display: block;
        padding: 12px 16px;
        font-size: 14px;
        color: #fff !important;
        background: #004080;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .pkp_navigation_primary li ul {
        display: none; /* hidden by default, OJS JS will toggle */
        position: static;
        background: #0d4a6a;
        width: 100%;
        padding-left: 15px;
        box-shadow: none;
    }

    .pkp_navigation_primary li:hover > ul {
        display: block; /* optional fallback if JS fails */
    }

    .pkp_navigation_primary li ul li a {
        padding: 10px 16px;
        color: #fff !important;
    }

    /* Hamburger icon position */
    .pkp_nav_menu_toggle {
        display: block !important;
        cursor: pointer;
        font-size: 22px;
        color: #fff;
        background: #004080;
        padding: 10px 15px;
        border-radius: 3px;
        text-align: left;
    }

    /* Hide horizontal flex for menu on mobile */
    .pkp_navigation_primary {
        flex-direction: column !important;
        gap: 0;
    }
}

/* Extra for very small screens */
@media (max-width: 480px) {
    .header-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 5px;
    }

    .pkp_nav_menu_toggle {
        font-size: 20px;
        padding: 8px 12px;
    }
}
/* Hide logo on mobile */
@media (max-width: 768px) {
    .pkp_site_name {
        display: none !important;
    }

    /* Ensure nav shows */
    .pkp_site_nav_menu {
        display: block !important;
    }

    /* Optional: make toggle visible if still hidden */
    .pkp_nav_menu_toggle {
        display: block !important;
        cursor: pointer;
        font-size: 22px;
        color: #fff;
        background: #004080;
        padding: 10px 15px;
        border-radius: 3px;
        margin-bottom: 5px;
    }
}