/**
 * plugins/themes/elis/styles/custom.css
 *
 * Stylesheet kustom untuk Tema ELIS.
 * Menggunakan skema warna hijau gelap #013324, emas, dan putih.
 */

/* ==========================================================================
   Variables & Reset overrides
   ========================================================================== */
:root {
    --elis-green: #013324;
    --elis-green-dark: #012117;
    --elis-green-light: #e6ecea;
    --elis-gold: #d4af37;
    --elis-gold-hover: #b38e21;
    --elis-text-dark: #333333;
    --elis-text-light: #666666;
    --elis-white: #ffffff;
    --elis-font-serif: "Georgia", "Times New Roman", serif;
    --elis-font-sans: "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   Header & Top Bar Styles
   ========================================================================== */

/* Top Bar */
.elis_top_bar {
    background-color: var(--elis-green);
    color: var(--elis-white);
    font-family: var(--elis-font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    z-index: 99;
}

.elis_top_bar_container {
    max-width: 1360px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.elis_top_bar_container .fa-solid:before,
.elis_top_bar_container .icon-separator {
    color: var(--elis-gold);
}

.elis_top_bar_left {
    text-transform: uppercase;
}

.elis_top_bar_right a {
    color: var(--elis-white);
    text-decoration: none;
    transition: color 0.2s ease;
    margin: 0 4px;
}

.elis_top_bar_right a:hover {
    color: var(--elis-gold);
}

.elis_user_welcome {
    margin-right: 5px;
    color: var(--elis-gold);
    text-transform: capitalize;
}

/* Main Header */
.elis_header {
    background-color: var(--elis-white);
    border-bottom: 1px solid #e1e8e5;
    padding: 15px 20px;
    position: sticky;
    top: 52px;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.elis_header_container {
    max-width: 1360px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo */
.elis_logo_wrapper {
    width: 30%;
}

.elis_logo_wrapper a {
    text-decoration: none;
    display: inline-block;
}

.elis_logo_wrapper img {
    height: auto;
    width: 100%;
    max-width: 350px;
    display: block;
}

.elis_default_logo {
    font-family: var(--elis-font-serif);
    font-size: 32px;
    font-weight: 800;
    color: var(--elis-green);
    letter-spacing: 2px;
}

/* Nav Wrapper */
.elis_nav_wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 80%;
    max-width: 650px;
}

/* Menu Toggle for Mobile */
.elis_menu_toggle {
    display: none;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--elis-green);
    cursor: pointer;
    padding: 5px;
}

/* OJS Navigation Override */
.elis_nav_menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.elis_nav_menu li a {
    font-family: var(--elis-font-sans);
    font-size: 12px;
    font-weight: 700;
    color: var(--elis-green);
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    padding: 8px 10px;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
}

.elis_nav_menu li a:hover {
    color: var(--elis-gold);
    border-bottom-color: var(--elis-gold);
}

#focus-and-scope,
#peer-review-process,
#publication-ethics,
#open-access-policy,
#copyright-notice {
    scroll-margin-top: 150px;
}

/* Submit Button */
.elis_submit_btn {
    background-color: var(--elis-green);
    color: var(--elis-white) !important;
    font-family: var(--elis-font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 20px;
    border-radius: 0;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.elis_submit_btn:hover {
    background-color: var(--elis-green-dark);
    transform: translateY(-1px);
}

/* Hide OJS Core Header elements to prevent duplicates */
.pkp_structure_head {
    display: none !important;
}

/* ==========================================================================
   Homepage Elements
   ========================================================================== */

.elis_pkp_structure_content {
    padding: 0;
    width: 100%;
}

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

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

.pkp_page_index .elis_pkp_structure_content .homepage_image {
    margin: 0;
}

.elis_homepage {
    font-family: var(--elis-font-sans);
    color: var(--elis-text-dark);
    background-color: #fafbfc;
}

/* 1. Hero Section */


.elis_hero {
    color: var(--elis-white);
    position: relative;
    overflow: hidden;
}

.elis_hero_img {
    max-width: 1360px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* 2. Feature Cards Section */
.elis_features_container {
    max-width: 1360px;
    padding: 30px 20px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background-color: #f7f6f2;
}

.elis_feature_card {
    background: transparent;
    padding: 20px 40px;
    border: none;
    box-shadow: none;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    transition: none;
}

.elis_feature_card:hover {
    transform: none;
    box-shadow: none;
}

.elis_feature_card:not(:last-child) {
    border-right: 1px solid #e2dfd8;
    /* Vertical separators */
}

.elis_feature_icon {
    width: 64px;
    height: 64px;
    background-color: var(--elis-green);
    /* Dark green circle */
    color: #cbb27a;
    /* Gold icon */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.elis_feature_content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.elis_feature_content h3 {
    font-family: var(--elis-font-sans);
    font-size: 19px;
    font-weight: 600;
    margin: 0;
    color: #1a1a1a;
}

.elis_feature_content p {
    font-family: var(--elis-font-serif);
    font-size: 13.5px;
    line-height: 1.55;
    color: #4a4a4a;
    margin: 0;
}

.elis_feature_link {
    font-family: var(--elis-font-sans);
    font-size: 14px;
    font-weight: 700;
    color: var(--elis-green);
    text-decoration: none;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    transition: color 0.2s ease;
}

.elis_feature_link:hover {
    color: var(--elis-gold);
}

.elis_feature_link span {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.elis_feature_link:hover span {
    transform: translateX(4px);
}

/* 3. Three Column Main Layout */
.elis_main_grid_container {
    max-width: 1360px;
    padding: 40px 20px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.elis_homepage .elis_section_title {
    font-family: var(--elis-font-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--elis-green);
    margin: 0 0 25px 0;
    padding-left: 12px;
    border-left: 4.5px solid var(--elis-gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.elis_grid_col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 35px;
}

.elis_grid_col:first-child {
    padding-left: 0;
}

.elis_grid_col:last-child {
    padding-right: 0;
}

.elis_grid_col:not(:last-child) {
    border-right: 1px solid #e2dfd8;
}

.elis_about_text p,
.elis_about_text {
    font-family: var(--elis-font-serif);
    font-size: 13.5px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0 0 15px 0;
}

.elis_about_text strong,
.elis_about_text b {
    font-weight: 700;
    color: #1a1a1a;
}

.elis_col_btn {
    border: 1px solid var(--elis-green);
    color: var(--elis-green);
    font-family: var(--elis-font-sans);
    font-size: 11px;
    font-weight: 700;
    padding: 12px 24px;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: 25px;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
}

.elis_col_btn:hover {
    background-color: var(--elis-green);
    color: var(--elis-white);
}

/* Kolom 2: Current Issue */
.elis_current_issue_identification {
    font-family: var(--elis-font-serif);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 20px;
}

.elis_current_issue_identification a {
    color: var(--elis-green);
    text-decoration: none;
    transition: color 0.2s ease;
}

.elis_current_issue_identification a:hover {
    color: var(--elis-gold);
}

.elis_current_issue_box {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
}

.elis_issue_cover {
    width: 50%;
}

.elis_issue_cover img {
    max-width: 100%;
    height: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: block;
}

.elis_issue_right_content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

.elis_issue_desc {
    font-family: var(--elis-font-serif);
    font-size: 13.5px;
    line-height: 1.55;
    color: #4a4a4a;
}

.elis_issue_btn {
    margin-top: auto;
}

/* Kolom 3: Announcements */
.elis_announcements_list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.elis_announcement_item {
    display: flex;
    gap: 20px;
    border-bottom: none;
    padding-bottom: 0;
}

.elis_announcement_date {
    background: transparent;
    color: var(--elis-text-dark);
    padding: 0 20px 0 0;
    text-align: center;
    min-width: 60px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-right: 1px solid #e2dfd8;
    height: fit-content;
}

.elis_date_month {
    font-family: var(--elis-font-sans);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #666666;
    line-height: 1;
}

.elis_date_day {
    font-family: var(--elis-font-serif);
    font-size: 26px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
    margin: 4px 0;
}

.elis_date_year {
    font-family: var(--elis-font-sans);
    font-size: 10px;
    font-weight: 600;
    color: #666666;
    line-height: 1;
}

.elis_announcement_body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.elis_announcement_body h4 {
    margin: 0;
    font-family: var(--elis-font-serif);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.elis_announcement_body h4 a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.2s ease;
}

.elis_announcement_body h4 a:hover {
    color: var(--elis-green);
}

.elis_announcement_summary_text {
    font-family: var(--elis-font-serif);
    font-size: 13.5px;
    color: #4a4a4a;
    margin: 0;
    line-height: 1.5;
}

.elis_read_more {
    font-family: var(--elis-font-sans);
    font-size: 11px;
    font-weight: 700;
    color: var(--elis-green);
    text-decoration: none;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
    margin-top: 4px;
}

.elis_read_more:hover {
    color: var(--elis-gold);
}

/* 4. Sub-sections: Global Reach & Why Publish */
.elis_sub_sections_container {
    background-color: #f7f6f2;
    max-width: 1360px;
    padding: 40px 20px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 50px;
}

.elis_global_reach_box {
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.elis_svg_map {
    flex: 1;
    min-width: 250px;
}

.elis_flag_counter {
    background-color: var(--elis-white);
    border: 1px solid #e1e8e5;
    padding: 15px 20px;
    min-width: 250px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    font-family: var(--elis-font-sans);
    border-radius: 4px;
}

.elis_fc_title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #555555;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 6px;
    margin-bottom: 12px;
}

.elis_fc_grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.elis_fc_item {
    display: flex;
    align-items: center;
    font-size: 11px;
    color: #333333;
    line-height: 1.5;
}

.elis_flag {
    margin-right: 8px;
    font-size: 15px;
}

.elis_fc_country {
    font-weight: 700;
    margin-right: auto;
}

.elis_fc_count {
    color: #666666;
    font-weight: 600;
}

/* Why Publish checklist */
.elis_why_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.elis_why_list li {
    display: flex;
    gap: 15px;
}

.elis_check_icon {
    width: 25px;
    height: 25px;
    background-color: var(--elis-green-light);
    color: var(--elis-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 3px;
}

.elis_why_text strong {
    font-size: 15px;
    color: var(--elis-green);
    display: block;
    margin-bottom: 3px;
}

.elis_why_text p {
    font-size: 13px;
    color: var(--elis-text-light);
    margin: 0;
    line-height: 1.4;
}

/* 5. Indexing & Recommended Tools logos */
.elis_logos_container {
    max-width: 1360px;
    padding: 40px 20px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 50px;
}

.elis_logos_block h3 {
    font-family: var(--elis-font-serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--elis-green);
    margin: 0 0 15px 0;
    letter-spacing: 0.5px;
}

.elis_logos_block p {
    font-size: 13px;
    color: var(--elis-text-light);
    margin: 0 0 20px 0;
}

.elis_logos_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.elis_logo_item {
    background-color: var(--elis-white);
    border: 1px solid #e1e8e5;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 48px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.01);
}

.elis_logo_text {
    font-weight: 700;
    font-size: 12px;
    color: #777777;
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

/* Specific styling to mock logos */
.google_scholar {
    color: #4285F4;
    font-family: var(--elis-font-serif);
}

.sinta {
    color: #1e70bf;
    font-weight: 800;
    text-transform: uppercase;
}

.doaj {
    color: #f58220;
    font-weight: 800;
    text-transform: uppercase;
}

.garuda {
    color: #b71c1c;
    font-style: italic;
}

.dimensions {
    color: #2c3e50;
}

.crossref {
    color: #3eb5e5;
    font-weight: 800;
}

.mendeley {
    color: #9c0000;
    font-weight: 800;
    text-transform: uppercase;
}

.zotero {
    color: #cc292b;
    font-family: var(--elis-font-serif);
    font-weight: 800;
}

.turnitin {
    color: #0076a3;
    font-style: italic;
}

/* ==========================================================================
   Footer Styles
   ========================================================================== */

.elis_footer {
    background-color: var(--elis-green-dark);
    color: #c4d4cf;
    font-family: var(--elis-font-sans);
    padding: 0;
    border-top: 3px solid var(--elis-gold);
    margin-top: 40px;
}

.elis_footer_container {
    max-width: 1360px;
    padding: 40px 20px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.8fr 1.2fr;
    gap: 40px;
}

.elis_footer_col:not(:last-child) {
    border-right: 1px solid var(--elis-gold);
    padding-right: 20px;
}

.elis_footer_col h3 {
    font-family: var(--elis-font-sans);
    font-size: 13px;
    font-weight: 700;
    color: var(--elis-white);
    margin: 0 0 25px 0;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 10px;
}

.elis_footer_col h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 2px;
    background-color: var(--elis-gold);
}

/* Col 1 Logo Fallback */
.elis_footer_publisher_title {
    font-family: var(--elis-font-serif);
    font-size: 20px;
    font-weight: 800;
    color: var(--elis-white);
    letter-spacing: 1px;
}

.elis_footer_publisher_subtitle {
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--elis-gold);
    margin-top: -2px;
    font-weight: 700;
}

/* Logo image dari pengaturan jurnal */
.elis_footer_logo_img {
    max-width: 160px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Link wrapper fallback nama jurnal */
.elis_footer_publisher_name_link {
    text-decoration: none;
}

.elis_footer_publisher_name_link:hover .elis_footer_publisher_title {
    color: var(--elis-gold);
    transition: color 0.2s ease;
}

.elis_footer_desc {
    font-size: 13px;
    line-height: 1.5;
    margin: 20px 0;
    opacity: 0.8;
}

.elis_footer_socials {
    display: flex;
    gap: 12px;
}

.elis_footer_socials a {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c4d4cf;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.elis_footer_socials a:hover {
    background-color: var(--elis-gold);
    color: var(--elis-green-dark);
    border-color: var(--elis-gold);
    transform: translateY(-2px);
}

/* Links */
.elis_footer_col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.elis_footer_col ul li a {
    color: #c4d4cf;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s ease;
}

.elis_footer_col ul li a:hover {
    color: var(--elis-gold);
}

/* Contact Col */
.elis_footer_col_contact p {
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 15px 0;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.elis_footer_col_contact p span {
    color: var(--elis-gold);
    margin-top: 3px;
}

.elis_footer_col_contact a {
    color: #c4d4cf;
    text-decoration: none;
}

.elis_footer_col_contact a:hover {
    color: var(--elis-gold);
}

/* Footer Bottom */
.elis_footer_bottom {
    background-color: var(--elis-green-dark);
    padding: 10px;
    border-top: 1px solid var(--elis-gold);
}

.elis_footer_bottom_container {
    max-width: 1360px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: #ffffff;
}

.elis_footer_brand a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.elis_footer_brand a:hover {
    color: var(--elis-gold);
}

/* ==========================================================================
   Responsive adjustments (Media Queries)
   ========================================================================== */

@media (max-width: 991px) {
    .elis_main_grid_container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .elis_grid_col {
        padding: 0;
    }

    .elis_grid_col:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid #e2dfd8;
        padding-bottom: 30px;
    }

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

    .elis_logos_container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

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

@media (max-width: 768px) {

    /* Responsive margins/paddings */
    .elis_top_bar_container,
    .elis_header_container,
    .elis_hero_container,
    .elis_features_container,
    .elis_main_grid_container,
    .elis_sub_sections_container,
    .elis_logos_container,
    .elis_footer_container,
    .elis_footer_bottom_container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .elis_header_container {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    .elis_logo_wrapper {
        width: 100%;
        text-align: center;
    }

    .elis_logo_wrapper a {
        display: inline-block;
    }

    .elis_menu_toggle {
        display: block;
        background: none;
        border: none;
        font-size: 24px;
        color: var(--elis-green);
        cursor: pointer;
        padding: 5px;
        margin: 0 auto;
    }

    .elis_nav_wrapper {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .elis_nav_menu {
        display: none;
        width: 100%;
        margin-top: 10px;
    }

    .elis_nav_menu.elis_nav_menu_active {
        display: block;
    }

    .elis_nav_menu ul {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 10px;
        max-width: 100%;
    }

    .elis_nav_menu li {
        width: 100%;
        text-align: center;
    }

    .elis_nav_menu li a {
        display: block;
        padding: 10px;
        font-size: 13px;
        border-bottom: 1px solid #eef2f0;
    }

    .elis_submit_wrapper {
        width: 100%;
        text-align: center;
        margin-top: 15px;
    }

    .elis_submit_btn {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .elis_hero {
        padding: 40px 15px;
    }

    .elis_hero_container {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .elis_hero_left {
        max-width: 100%;
    }

    .elis_hero_left h1 {
        font-size: 28px;
    }

    .elis_hero_left p {
        font-size: 14px;
        margin-bottom: 25px;
    }

    .elis_hero_right {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .elis_hero_img {
        max-width: 320px;
        width: 100%;
    }

    .elis_hero_bg_text {
        display: none;
    }

    .elis_features_container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .elis_feature_card {
        padding: 20px 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }

    .elis_feature_card:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid #e2dfd8;
        padding-bottom: 30px;
    }

    .elis_feature_link {
        justify-content: center;
    }

    .elis_current_issue_box {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }

    .elis_issue_cover img {
        max-width: 140px;
        margin: 0 auto;
    }

    /* Global Reach Map stack */
    .elis_global_reach_box {
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }

    .elis_svg_map {
        width: 100%;
        max-width: 450px;
    }

    .elis_flag_counter {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Logos block adjustments */
    .elis_logos_grid {
        justify-content: center;
    }

    .elis_logos_block h2,
    .elis_logos_block p {
        text-align: center;
    }

    /* Login/Register responsive sizes */
    .page_login,
    .page_register {
        max-width: 100% !important;
        margin: 20px 15px !important;
        padding: 25px 20px !important;
    }

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

/* ==========================================================================
   Design Mockup Alignment Overrides & Additions
   ========================================================================== */

/* Hero Image & Map adjustments */





/* Header Alignment Optimization */
.elis_nav_wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 25px;
    width: auto;
    max-width: none;
    flex-grow: 1;
}

.elis_nav_menu {
    display: flex;
    justify-content: flex-end;
    flex-grow: 1;
}

.elis_nav_menu ul {
    justify-content: end;
    gap: 10px 15px;
    max-width: 590px;
}

/* Responsive Footer borders reset */
@media (max-width: 991px) {
    .elis_footer_col:not(:last-child) {
        border-right: none !important;
        padding-right: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 25px;
        margin-bottom: 10px;
    }
}

/* ==========================================================================
   Page-Specific Styling: Login, Register, Forms & Content Pages
   ========================================================================== */

/* Inner Page main container layouts */
body:not(.pkp_page_index) .elis_pkp_structure_content:not(.has_sidebar) {
    background-color: #fafbfc;
    padding: 50px 0;
}

body:not(.pkp_page_index) .elis_pkp_structure_content {
    background-color: #fafbfc;
}

body:not(.pkp_page_index) .pkp_structure_main {
    max-width: 1360px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Breadcrumbs style */
.cmp_breadcrumbs {
    font-family: var(--elis-font-sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    color: #ffffff;
    margin-bottom: 20px;
    width: 100%;
    background-color: var(--elis-green);
    padding: 0 20px;
}

.cmp_breadcrumbs ol {
    margin: 0;
}

.cmp_breadcrumbs a {
    color: var(--elis-gold);
    text-decoration: none;
    transition: color 0.2s ease;
}

.cmp_breadcrumbs a:hover {
    color: var(--elis-gold);
}

.cmp_breadcrumbs .separator {
    margin: 0 8px;
    color: #cccccc;
}

.cmp_breadcrumbs .current {
    color: #ffffff;
    text-transform: none;
}

/* Content page title */
body:not(.pkp_page_index) .page h1 {
    font-family: var(--elis-font-serif);
    font-size: 32px;
    font-weight: 700;
    color: var(--elis-green);
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--elis-gold);
}

/* Centered Form Cards for Login and Register */
.page_login,
.page_register {
    max-width: 550px !important;
    margin: 40px auto 60px auto !important;
    padding: 40px !important;
    background: var(--elis-white);
    border: 1px solid #e1e8e5;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    box-sizing: border-box;
}

.page_login h1,
.page_register h1 {
    font-family: var(--elis-font-serif) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--elis-green) !important;
    text-align: center;
    margin-bottom: 12px !important;
    border-bottom: 2px solid var(--elis-gold) !important;
    padding-bottom: 15px !important;
}

.page_login>p,
.page_register>p {
    font-size: 13px;
    color: var(--elis-text-light);
    text-align: center;
    margin-bottom: 30px;
}

/* Forms styling in ELIS theme */
.cmp_form .fields {
    border: none;
    padding: 0;
    margin: 0;
}

.cmp_form .fields fieldset {
    border: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.cmp_form label {
    display: block;
    margin-bottom: 20px;
}

.cmp_form label .label,
.cmp_form .label {
    display: block;
    font-family: var(--elis-font-sans);
    font-size: 11px;
    font-weight: 700;
    color: #333333;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.cmp_form input[type="text"],
.cmp_form input[type="password"],
.cmp_form input[type="email"] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d9d5;
    border-radius: 0;
    background: #fafbfc;
    font-size: 14px;
    color: var(--elis-text-dark);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.cmp_form input[type="text"]:focus,
.cmp_form input[type="password"]:focus,
.cmp_form input[type="email"]:focus {
    border-color: var(--elis-green);
    background: var(--elis-white);
    outline: none;
    box-shadow: 0 0 0 3px rgba(1, 51, 36, 0.08);
}

.cmp_form .password a {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--elis-green);
    text-decoration: none;
    font-weight: 600;
}

.cmp_form .password a:hover {
    color: var(--elis-gold);
}

/* Checkbox alignment */
.cmp_form .optin,
.cmp_form .remember {
    margin-bottom: 15px;
}

.cmp_form .optin label,
.cmp_form .remember label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--elis-text-dark);
}

.cmp_form .optin input[type="checkbox"],
.cmp_form .remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--elis-green);
    margin: 0;
    cursor: pointer;
}

/* Form Action Buttons */
.cmp_form .buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.cmp_form button.submit {
    background-color: var(--elis-green);
    color: var(--elis-white);
    font-family: var(--elis-font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 12px 28px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.cmp_form button.submit:hover {
    background-color: var(--elis-green-dark);
    transform: translateY(-1px);
}

.cmp_form .buttons a.register,
.cmp_form .buttons a.login {
    font-family: var(--elis-font-sans);
    font-size: 12px;
    font-weight: 700;
    color: var(--elis-green);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cmp_form .buttons a.register:hover,
.cmp_form .buttons a.login:hover {
    color: var(--elis-gold);
}

/* Form Errors */
.pkp_form_error,
.cmp_form .error {
    background-color: #fdf2f2;
    border: 1px solid #f8b4b4;
    color: #9b1c1c;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 13.5px;
    border-radius: 4px;
}

/* ==========================================================================
   About Page Layout & Banner
   ========================================================================== */

.elis_page_header_banner {
    background-color: var(--elis-green);
    background-image: linear-gradient(135deg, var(--elis-green) 0%, var(--elis-green-dark) 100%);
    padding: 25px 0;
    position: relative;
    overflow: hidden;
}

.elis_page_header_container {
    max-width: 1360px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.elis_page_header_left h1 {
    font-family: var(--elis-font-serif);
    font-size: 24px;
    font-weight: 700;
    color: var(--elis-white);
    margin: 0 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.elis_breadcrumbs {
    font-family: var(--elis-font-sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #a3b8b0;
}

.elis_breadcrumbs a {
    color: #a3b8b0;
    text-decoration: none;
    transition: color 0.2s ease;
}

.elis_breadcrumbs a:hover {
    color: var(--elis-gold);
}

.elis_bc_sep {
    color: var(--elis-gold);
    margin: 0 4px;
}

.elis_bc_current {
    color: var(--elis-white);
}

.elis_page_header_right {
    position: relative;
}

.elis_page_header_bg_text {
    font-family: var(--elis-font-serif);
    font-size: 80px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.04);
    line-height: 1;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 2px;
}



.elis_about_section_title {
    font-family: var(--elis-font-serif);
    font-size: 20px;
    font-weight: 700;
    color: var(--elis-green);
    margin: 0 0 25px 0;
    padding-left: 12px;
    border-left: 4.5px solid var(--elis-gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.elis_about_body_text {
    font-family: var(--elis-font-serif);
    font-size: 14px;
    line-height: 1.65;
    color: #333333;
}

.elis_about_body_text p {
    margin-bottom: 20px;
}

.elis_about_list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
}

.elis_about_list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-family: var(--elis-font-serif);
    font-size: 14px;
    color: #333333;
}

.elis_about_list li::before {
    content: "*";
    color: var(--elis-gold);
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

.elis_about_nav_links {
    margin-top: 35px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.elis_about_nav_item {
    font-family: var(--elis-font-serif);
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    padding-left: 12px;
    border-left: 4px solid var(--elis-gold);
    text-transform: uppercase;
    line-height: 1.2;
}

.elis_about_nav_item a {
    color: var(--elis-green);
    text-decoration: none;
    transition: color 0.2s ease;
}

.elis_about_nav_item a:hover {
    color: var(--elis-gold);
}

/* ==========================================================================
   Native OJS Sidebar Layout & Block Styling
   ========================================================================== */

/* Main layout wrapper when sidebar is present */
@media (min-width: 992px) {
    body:not(.pkp_page_index) .pkp_structure_content.has_sidebar {
        display: grid;
        grid-template-columns: 1fr 400px;
        gap: 40px;
        max-width: 1360px;
        margin: 0 auto;
        padding: 0px;
        box-sizing: border-box;
        background-color: unset;
    }

    body:not(.pkp_page_index) .pkp_structure_content.has_sidebar:before,
    body:not(.pkp_page_index) .pkp_structure_content.has_sidebar:after {
        display: none;
    }

    body:not(.pkp_page_index) .pkp_structure_main:before,
    body:not(.pkp_page_index) .pkp_structure_main:after {
        display: none;
    }

    body:not(.pkp_page_index) .pkp_structure_content.has_sidebar .page h1 {
        padding: 0 10px 10px;
    }

    /* Force main content on left, sidebar on right */
    body:not(.pkp_page_index) .pkp_structure_content.has_sidebar .pkp_structure_main {
        grid-column: 1;
        min-width: 0;
        padding: 0;
        width: 100%;
    }

    body:not(.pkp_page_index) .pkp_structure_content.has_sidebar .pkp_structure_sidebar {
        grid-column: 2;
        padding: 30px 0 0;
        min-width: 0;
        background: #FDFBF8;
        width: 400px;
    }

    body:not(.pkp_page_index) .pkp_structure_content.has_sidebar section {
        padding: 0 20px;
    }

    body:not(.pkp_page_index) .pkp_structure_content.has_sidebar section h2 {
        margin: 0;
        padding-left: 10px;
        border-left: 4px solid var(--elis-gold);
    }
}

@media (max-width: 991px) {
    body:not(.pkp_page_index) .pkp_structure_content.has_sidebar {
        display: flex;
        flex-direction: column;
        padding: 30px 15px;
        gap: 40px;
        box-sizing: border-box;
    }

    body:not(.pkp_page_index) .pkp_structure_content.has_sidebar .pkp_structure_sidebar {
        border-top: 1px solid #eef2f0;
        padding-top: 40px;
        width: 100%;
        box-sizing: border-box;
    }
}

/* Style Native Sidebar Block Cards */
.pkp_structure_sidebar .pkp_block {
    background-color: var(--elis-white);
    border: 1px solid #e1e8e5;
    border-radius: 6px;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    margin-bottom: 35px;
    box-sizing: border-box;
}

.pkp_structure_sidebar .pkp_block:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
    border-color: #d1d9d5;
}

/* Sidebar block title styling with gold border */
.pkp_structure_sidebar .pkp_block .title,
.pkp_structure_sidebar .pkp_block h2,
.pkp_structure_sidebar .pkp_block h3 {
    font-family: var(--elis-font-serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--elis-green);
    border-left: 4px solid var(--elis-gold) !important;
    padding-left: 12px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}

/* Content adjustments within sidebar blocks */
.pkp_structure_sidebar .pkp_block .content {
    font-size: 13.5px;
    color: var(--elis-text-dark);
    line-height: 1.6;
}

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

.pkp_structure_sidebar .pkp_block li {
    border-bottom: 1px dashed #e1e8e5;
    padding: 10px 0;
    transition: padding-left 0.2s ease;
}

.pkp_structure_sidebar .pkp_block li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pkp_structure_sidebar .pkp_block li a {
    color: var(--elis-green);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.pkp_structure_sidebar .pkp_block li a:hover {
    color: var(--elis-gold);
}

/* ==========================================================================
   About Journal Collapsible Sections
   ========================================================================== */
.about-journal-section {
    margin-bottom: 30px;
    box-sizing: border-box;
}

.about-journal-section .section-header {
    user-select: none;
    transition: color 0.2s ease;
}

.about-journal-section .section-header:hover {
    color: var(--elis-gold);
}

.about-journal-section .section-header h2 {
    font-family: var(--elis-font-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--elis-green);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.about-journal-section .section-toggle-icon {
    color: var(--elis-gold);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.about-journal-section.is-expanded .section-toggle-icon {
    transform: rotate(180deg);
}

.about-journal-section .section-body {
    margin-top: 15px;
    font-family: var(--elis-font-serif);
    font-size: 14px;
    line-height: 1.6;
    color: var(--elis-text-dark);
}

.about-journal-section .section-body p {
    margin: 0 0 15px 0;
}

.about-journal-section .section-body p:last-child {
    margin-bottom: 0;
}

.about-journal-section .topic-list {
    margin: 10px 0 20px 20px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px 25px;
}

.about-journal-section .topic-list li {
    font-size: 13.5px;
    color: var(--elis-text-light);
    line-height: 1.4;
}