/* ==============================================================
   COMPLETE HEADER FIX - MOBILE, BACKGROUND, DROPDOWNS & DARK MODE
============================================================== */

/* Main header container */
.pkp_structure_head {
    background: url('https://gereview.com/public/journals/1/Blue%20Modern%20Welcome%20To%20The%20Class%20Google%20Classroom%20Header.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative !important;
    width: 100% !important;
    height: 200px !important;
    z-index: 9997 !important;
    border-bottom: none !important;
    transition: transform 0.4s ease !important;
}

/* Hide header when scrolled */
.pkp_structure_head.header-hidden {
    transform: translateY(-100%) !important;
}

/* Logo on left side */
.pkp_site_name {
    position: absolute !important;
    top: 30px !important;
    left: 30px !important;
    z-index: 2 !important;
    text-align: left !important;
}

.pkp_site_name img {
    max-height: 80px !important;
    width: auto !important;
    display: block !important;
    margin: 0 !important;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)) !important;
}

/* HIDE JOURNAL TEXT NAME */
.pkp_site_name .is_text {
    display: none !important;
}

/* Navigation container */
.pkp_navigation_primary_row {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 3 !important;
    background: linear-gradient(
        to top,
        rgba(0, 43, 67, 0.95) 0%,
        rgba(0, 43, 67, 0.7) 50%,
        rgba(0, 43, 67, 0.3) 100%
    ) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: none !important;
    margin: 0 !important;
    padding: 15px 0 !important;
    top: auto !important;
    transform: none !important;
}

.pkp_head_wrapper {
    position: relative !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

/* Navigation menu */
.pkp_navigation_primary {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    background: none !important;
}

.pkp_navigation_primary > li {
    position: relative !important;
}

.pkp_navigation_primary > li > a {
    color: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 2px solid transparent !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
    padding: 12px 20px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    margin: 0 5px !important;
    display: block !important;
    text-decoration: none !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: #00E4FF !important;
    border-color: #00E4FF !important;
    background: rgba(0, 228, 255, 0.25) !important;
    text-shadow: 0 0 12px rgba(0, 228, 255, 0.9) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(0, 228, 255, 0.3) !important;
}

/* ==============================================================
   UPDATED DROPDOWN FIXES - REDUCED GAP & BETTER HOVER BEHAVIOR
============================================================== */

.pkp_navigation_primary ul {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: rgba(0, 43, 67, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 8px !important;
    padding: 8px 0 !important;
    min-width: 220px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
    z-index: 1000 !important;
    margin-top: 2px !important; /* REDUCED GAP */
}

/* Show dropdown on hover and keep it visible */
.pkp_navigation_primary > li:hover ul {
    display: block !important;
}

/* Keep dropdown visible when hovering over dropdown */
.pkp_navigation_primary ul:hover {
    display: block !important;
}

.pkp_navigation_primary ul li a {
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 10px 20px !important;
    transition: all 0.2s ease !important;
    display: block !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    white-space: nowrap !important;
}

.pkp_navigation_primary ul li:last-child a {
    border-bottom: none !important;
}

.pkp_navigation_primary ul li a:hover,
.pkp_navigation_primary ul li a:focus {
    color: #00E4FF !important;
    background: rgba(0, 228, 255, 0.25) !important;
    padding-left: 25px !important;
}

/* FIX: Dark mode toggle position */
.dark-mode-switch {
    position: fixed !important;
    top: 30px !important;
    right: 20px !important;
    z-index: 9999 !important;
}

/* Remove body padding */
body {
    padding-top: 0 !important;
}
/* ==============================================================
   CSS-ONLY DROPDOWN FIX WITH POINTER EVENTS
============================================================== */

.pkp_navigation_primary > li {
    position: relative !important;
}

.pkp_navigation_primary ul {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: rgba(0, 43, 67, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 8px !important;
    padding: 8px 0 !important;
    min-width: 220px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
    z-index: 1000 !important;
    margin-top: 0 !important;
    pointer-events: none; /* Allow clicking through when hidden */
    transition: all 0.3s ease !important;
    opacity: 0;
    transform: translateY(-10px);
}

/* Show dropdown and enable pointer events */
.pkp_navigation_primary > li:hover ul {
    display: block !important;
    pointer-events: all !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Keep dropdown visible when hovering over it */
.pkp_navigation_primary ul:hover {
    display: block !important;
    pointer-events: all !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.pkp_navigation_primary ul li a {
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 10px 20px !important;
    transition: all 0.2s ease !important;
    display: block !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    white-space: nowrap !important;
    pointer-events: all !important;
}

.pkp_navigation_primary ul li:last-child a {
    border-bottom: none !important;
}

.pkp_navigation_primary ul li a:hover {
    color: #00E4FF !important;
    background: rgba(0, 228, 255, 0.25) !important;
    padding-left: 25px !important;
}
/* ==============================================================
   MOBILE FIXES
============================================================== */

@media (max-width: 768px) {
    /* Header fixes */
    .pkp_structure_head {
        height: 150px !important;
        background-size: cover !important;
        background-position: center center !important;
    }
    
    /* Logo fixes */
    .pkp_site_name {
        top: 15px !important;
        left: 15px !important;
    }
    
    .pkp_site_name img {
        max-height: 50px !important;
    }
    
    /* FIX: Mobile navigation - ensure it's visible */
    .pkp_navigation_primary_row {
        position: relative !important;
        padding: 10px 0 !important;
        background: rgba(0, 43, 67, 0.95) !important;
        backdrop-filter: none !important;
    }
    
    /* FIX: Mobile menu items */
    .pkp_navigation_primary {
        padding: 0 10px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
    }
    
    .pkp_navigation_primary > li > a {
        padding: 10px 15px !important;
        font-size: 0.9rem !important;
        margin: 2px 0 !important;
        text-align: center !important;
    }
    
    /* FIX: Mobile dropdowns - full width */
    .pkp_navigation_primary ul {
        position: static !important;
        display: none !important;
        width: 100% !important;
        margin-top: 5px !important;
        border-radius: 4px !important;
    }
    
    .pkp_navigation_primary > li:hover > ul {
        display: block !important;
    }
    
    /* FIX: Dark mode toggle for mobile */
    .dark-mode-switch {
        top: 15px !important;
        right: 15px !important;
        padding: 8px !important;
    }
    
    .toggle-track {
        width: 45px !important;
        height: 22px !important;
    }
    
    .toggle-thumb {
        width: 18px !important;
        height: 18px !important;
    }
}

/* FIX: Tablet specific */
@media (max-width: 1024px) and (min-width: 769px) {
    .pkp_structure_head {
        height: 180px !important;
    }
    
    .pkp_site_name img {
        max-height: 70px !important;
    }
    
    .pkp_navigation_primary > li > a {
        padding: 10px 16px !important;
        font-size: 0.95rem !important;
    }
}

/* Large screens */
@media (min-width: 1200px) {
    .pkp_structure_head {
        height: 220px !important;
    }
    
    .pkp_site_name {
        top: 40px !important;
        left: 40px !important;
    }
    
    .pkp_site_name img {
        max-height: 90px !important;
    }
}

/* FIX: Ensure dropdowns close when clicking elsewhere */
.pkp_navigation_primary > li:focus-within > ul {
    display: block !important;
}
/***********************************************************
 MASTER ENGINEERING JOURNAL INTERFACE
***********************************************************/

/* Base Modern Engineering Look */
html, body {
    font-family: "Roboto", "Segoe UI", Arial, sans-serif;
    background: #F5F7FA;
    color: #1A1A1A;
    scroll-behavior: smooth;
}

/* Sticky Gradient Header */
.pkp_structure_head {
    background: linear-gradient(90deg, #002B43 0%, #004F7A 100%);
    border-bottom: 2px solid #0A84A5;
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* Site Title */
.pkp_site_name .is_text {
    color: #fff !important;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.6px;
}

/* Navigation */
.pkp_navigation_primary>li>a {
    color: #fff !important;
    border-bottom: 2px solid transparent;
    transition: .25s;
    font-weight: 600;
}
.pkp_navigation_primary>li>a:hover {
    border-color: #00E4FF;
    color: #00E4FF !important;
    text-shadow: 0 0 6px rgba(0,228,255,.7);
}

/* Buttons */
.pkp_button_primary, .cmp_button, .cmp_button_wire {
    background: #00A37A;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    transition: .25s;
}
.pkp_button_primary:hover, .cmp_button:hover {
    background: #0A84A5;
}

/* Article Cards */
/* FIX (ADJUSTED): Apply visual styles ONLY to the inner summary box */
.obj_article_summary {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    padding: 1.2rem 1.4rem;
    transition: .3s;
}

/* FIX (NEW): Changed to an underline separator for article lists */
.obj_issue_toc .articles > li {
    background: none !important;
    box-shadow: none !important;
    padding: 0 0 1.5rem 0 !important; /* FIX: Add padding only to the bottom */
    border: none !important;
    border-bottom: 1px solid #dde1e5 !important; /* FIX: Add underline */
    margin-bottom: 1.5rem !important; /* FIX: Keep space between items */
}

/* This rule applies to article cards on homepage, NOT lists */
.obj_article_summary:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* Article Title */
.obj_article_summary .title a {
    color: #00304E;
    font-size: 1.3rem;
    font-weight: 700;
}
.obj_article_summary .title a:hover { color: #0A84A5; }

/* DOI Badge */
.obj_article_summary .doi {
    display: inline-block;
    background: #00304E;
    color: #fff;
    padding: .25rem .6rem;
    border-radius: 4px;
    font-size: .75rem;
    margin-top: .5rem;
    text-transform: uppercase;
}
.obj_article_summary:hover .doi { background: #0A84A5; }

/* Article Status Badges */
.badge-accepted { background: #00A37A; }
.badge-inreview { background: #FFA600; }
.badge-published { background: #00304E; }
.badge-accepted, .badge-inreview, .badge-published {
    display: inline-block;
    padding: .25rem .6rem;
    border-radius: 3px;
    font-size: .75rem;
    color: #fff;
    font-weight: 600;
}

/* Sidebar & Announcement Glass Look (SINGLE PADDING FIX) */
.pkp_block, .cmp_announcements {
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(5px);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    padding: 0 !important; /* FIX: Remove outer padding from all blocks */
    margin-bottom: 1.5rem; /* FIX: Add margin-bottom for spacing between blocks */
}

/* FIX: Add padding back ONLY to the .content of non-custom blocks */
.pkp_block:not(#journal-info-block):not(.custom-submission-block) > .content,
.cmp_announcements > .content {
    padding: 1.2rem 1.4rem !important;
}

/* Footer Gradient */
.pkp_structure_footer {
    background: linear-gradient(90deg, #002B43 0%, #003F60 50%, #002B43 100%);
    color: #e0e0e0;
    padding: 1.5rem 1rem !important; /* FIX (NEW): Reduced footer height */
    border-top: 3px solid #0A84A5;
}
.pkp_structure_footer a {
    color: #00E4FF;
    font-weight: 600;
}
.pkp_structure_footer a:hover {
    color: #00A37A;
    text-shadow: 0 0 5px rgba(0,228,255,.6);
}

/* Floating Buttons */
#cfpBtn, #scrollTopBtn {
    position: fixed;
    bottom: 2rem;
    z-index: 9999;
    border-radius: 50px;
    font-size: .9rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    transition: .25s;
}
#cfpBtn {
    left: 1.5rem;
    background: linear-gradient(135deg, #00304E, #007AAE);
    padding: .7rem 1.2rem;
    animation: pulseCFP 2s infinite;
}
#cfpBtn:hover { background: #00A37A; }
#scrollTopBtn {
    right: 1.5rem;
    background: #00A37A;
    padding: .7rem 1rem;
    display: none;
}
#scrollTopBtn:hover { background: #0A84A5; }
@keyframes pulseCFP {
    0%{transform:scale(1);}50%{transform:scale(1.05);}100%{transform:scale(1);}
}

/* Loading Spinner */
#pageLoader {
    position: fixed; top:0; left:0;
    width:100%; height:100%;
    background:#fff;
    display:flex; align-items:center; justify-content:center;
    z-index:99999;
}
#pageLoader:before {
    content:"";
    width:48px; height:48px;
    border:5px solid #00304E;
    border-top-color:transparent;
    border-radius:50%;
    animation:spinLoader .8s linear infinite;
}
@keyframes spinLoader { to {transform:rotate(360deg);} }

/* ORCID & DOI Icon Style */
.orcid-icon, .doi-icon {
    display:inline-block;
    margin-right:5px;
    vertical-align:middle;
}
.orcid-icon {
    width:18px; height:18px;
    background:#A6CE39;
    mask:url('https://orcid.org/sites/default/files/images/orcid_16x16.png') center/contain no-repeat;
}
.doi-icon {
    width:18px; height:18px;
    background:#FF6600;
    mask:url('https://www.doi.org/themes/custom/doi/images/doi_icon.svg') center/contain no-repeat;
}

/* Statistics Counter */
.counter {
    font-size:2rem;
    font-weight:700;
    color:#00304E;
    text-align:center;
}
.counter-label {
    text-align:center;
    font-size:.9rem;
    color:#555;
    margin-top:-5px;
}

/* Dark Mode */
body.dark-mode {
    background:#101820;
    color:#E0E0E0;
}
body.dark-mode .pkp_structure_head,
body.dark-mode .pkp_structure_footer {
    background:#0D1B2A;
}

/* FIX: Dark mode for default sidebar blocks */
body.dark-mode .pkp_block,
body.dark-mode .cmp_announcements {
    background: #172A3A !important; /* Match other dark cards */
    box-shadow: none !important;
}

/* FIX: Text color inside default dark-mode sidebar blocks */
body.dark-mode .pkp_block:not(#journal-info-block):not(.custom-submission-block) > .content,
body.dark-mode .cmp_announcements > .content {
    color: #E0E0E0 !important;
}

/* FIX: Links inside default dark-mode sidebar blocks */
body.dark-mode .pkp_block:not(#journal-info-block):not(.custom-submission-block) > .content a,
body.dark-mode .cmp_announcements > .content a {
    color: #00E4FF !important;
}

/* FIX: Headers inside default dark-mode sidebar blocks */
body.dark-mode .pkp_block .header h2 {
    color: #00E4FF !important;
}

body.dark-mode .obj_article_summary {
    background:#172A3A;
    color:#E0E0E0;
    box-shadow:none;
}

/* FIX (NEW): Dark mode for the new underline separator */
body.dark-mode .obj_issue_toc .articles > li {
    border-bottom-color: #2a3b4c !important; /* A subtle line for dark mode */
}

body.dark-mode a { color:#00E4FF; }

/* Dark Mode Toggle */
#darkModeToggle {
    position:fixed;
    top:1.2rem;
    right:1.2rem;
    background:#00304E;
    color:#fff;
    border:none;
    border-radius:20px;
    padding:.4rem .8rem;
    cursor:pointer;
    font-size:.8rem;
    z-index:9999;
}
#darkModeToggle:hover { background:#00A37A; }

/* Responsive */
@media (max-width:768px){
    .pkp_site_name .is_text{font-size:1.3rem;}
    .obj_article_summary{padding:1rem;}
    #cfpBtn,#scrollTopBtn{font-size:.75rem;padding:.5rem .7rem;}
}

/***********************************************************
 JOURNAL INFO BLOCK STYLES
***********************************************************/

#journal-info-block * { 
    box-sizing: border-box; 
}

#journal-info-block {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: .3s;
    position: relative;
}

#journal-info-block:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

#journal-info-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #00A37A, #0A84A5, #00304E);
}

.jib-identity-card {
    padding: 1.5rem;
    background: linear-gradient(135deg, #F5F7FA 0%, #E8ECF1 100%);
    border-bottom: 1px solid rgba(0,0,0,.1);
}

.jib-identity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.jib-oa-brand {
    display: flex;
    align-items: center;
    justify-content: center;
}

.jib-oa-logo {
    max-width: 140px;
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.1));
}

.jib-doi-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #00304E;
    color: #fff;
    padding: .5rem 1rem;
    border-radius: 4px;
    font-size: .85rem;
    font-weight: 600;
}

.jib-doi-icon {
    width: 16px;
    height: 16px;
    background: #FF6600;
    border-radius: 2px;
}

.jib-navigation-sections {
    padding: 1rem;
}

.jib-nav-section {
    margin-bottom: 1.5rem;
}

.jib-nav-section:last-child {
    margin-bottom: 0;
}

.jib-section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #00A37A;
}

.jib-section-title h3 {
    color: #00304E;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

.jib-title-icon {
    font-size: 1.2rem;
}

.jib-section-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.jib-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(0,48,78,0.05);
    border-radius: 6px;
    text-decoration: none;
    color: #1A1A1A;
    transition: all 0.25s ease;
    border: 1px solid transparent;
}

.jib-nav-link:hover {
    background: #00A37A;
    color: #fff;
    transform: translateX(5px);
    border-color: #00A37A;
    box-shadow: 0 2px 8px rgba(0,163,122,0.3);
}

.jib-nav-link:hover .jib-link-icon {
    transform: scale(1.1);
}

.jib-nav-link:hover .jib-link-arrow {
    transform: translateX(3px);
    opacity: 1;
}

.jib-link-icon {
    font-size: 1rem;
    transition: transform 0.25s ease;
}

.jib-link-text {
    flex: 1;
    font-weight: 500;
    font-size: 0.9rem;
}

.jib-link-arrow {
    opacity: 0.7;
    transition: all 0.25s ease;
}

.jib-quick-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #00304E 0%, #002B43 100%);
    border-top: 1px solid rgba(255,255,255,.1);
}

.jib-stat-item {
    text-align: center;
}

.jib-stat-counter {
    font-size: 1.8rem;
    font-weight: 700;
    color: #00E4FF;
    text-shadow: 0 0 10px rgba(0,228,255,0.5);
    display: block;
}

.jib-stat-label {
    font-size: .75rem;
    color: #fff;
    margin-top: 0.25rem;
    opacity: 0.9;
    display: block;
}

/* Responsive Design */
@media (max-width: 768px) {
    #journal-info-block {
        margin-bottom: 1rem;
    }
    
    .jib-identity-header {
        flex-direction: column;
        text-align: center;
    }
    
    .jib-oa-brand {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .jib-navigation-sections {
        padding: 0.75rem;
    }
    
    .jib-quick-stats {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 1rem;
    }
    
    .jib-stat-counter {
        font-size: 1.5rem;
    }
}

/* Dark Mode Support */
body.dark-mode #journal-info-block {
    background: #172A3A;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

body.dark-mode .jib-identity-card {
    background: linear-gradient(135deg, #1A2F3F 0%, #152635 100%);
    border-bottom-color: rgba(255,255,255,.1);
}

body.dark-mode .jib-section-title h3 {
    color: #00E4FF;
}

body.dark-mode .jib-nav-link {
    background: rgba(0,228,255,0.08);
    color: #E0E0E0;
}

body.dark-mode .jib-nav-link:hover {
    background: #0A84A5;
    color: #fff;
}

/***********************************************************
 CUSTOM SUBMISSION BLOCK STYLES
***********************************************************/

/* Submission Block Container */
.custom-submission-block {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    text-align: center;
    border-top: 3px solid #00A37A;
    transition: .3s;
}

.custom-submission-block:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

/* Submission Button */
.custom-submission-btn {
    display: inline-block;
    background: #00304E;
    color: #fff;
    padding: 1.2rem 3rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid #00304E;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
}

.custom-submission-btn:hover {
    transform: translateY(-3px);
    background: #004D7A;
    border-color: #00E4FF;
}

/* Add icon before button text */
.custom-submission-btn::before {
    content: "📨";
    margin-right: 10px;
    display: inline-block;
    transition: all 0.3s ease;
}

.custom-submission-btn:hover::before {
    content: "✈️";
    transform: scale(1.1);
}

/* Button pulse animation */
@keyframes customPulse {
    0% {
        box-shadow: 0 6px 20px rgba(0, 48, 78, 0.3);
    }
    50% {
        box-shadow: 0 6px 25px rgba(0, 228, 255, 0.6);
        border-color: #00E4FF;
    }
    100% {
        box-shadow: 0 6px 20px rgba(0, 48, 78, 0.3);
    }
}

.custom-submission-btn {
    animation: customPulse 3s ease-in-out infinite;
}

/* Features List */
.custom-submission-features {
    text-align: left;
    max-width: 300px;
    margin: 0 auto;
}

.custom-feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    background: rgba(0, 163, 122, 0.05);
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.custom-feature-item:hover {
    background: rgba(0, 163, 122, 0.1);
}

.custom-feature-bullet {
    color: #00A37A;
    font-weight: 700;
}

.custom-feature-text {
    color: #00304E;
    font-size: 0.9rem;
    font-weight: 700;
}

/* Dark Mode Support */
body.dark-mode .custom-submission-block {
    background: #172A3A;
    box-shadow: none;
}

body.dark-mode .custom-submission-block:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

body.dark-mode .custom-feature-text {
    color: #E0E0E0;
}

body.dark-mode .custom-feature-item {
    background: rgba(0, 228, 255, 0.05);
}

body.dark-mode .custom-feature-item:hover {
    background: rgba(0, 228, 255, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .custom-submission-block {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .custom-submission-btn {
        padding: 1rem 2rem;
        font-size: 1.1rem;
    }
}

/***********************************************************
 HOMEPAGE STYLES - CLEAN VERSION
***********************************************************/

/* Animation Keyframes */
@keyframes homepageFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes homepageGentlePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* Homepage Hero Section */
.homepage-hero {
    animation: homepageFadeInUp 0.8s ease-out;
}

/* Journal Info Card */
.journal-info-card {
    animation: homepageFadeInUp 0.8s ease-out 0.2s both;
}

.journal-info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.15);
}

/* Info Items inside Journal Card */
.info-item {
    transition: all 0.3s ease;
}

.info-item:hover {
    background: rgba(0, 163, 122, 0.1);
    transform: translateX(5px);
}

/* Indexing Section */
.indexing-section {
    animation: homepageFadeInUp 0.8s ease-out 0.4s both;
}

/* Indexing Cards */
.indexing-card {
    transition: all 0.3s ease;
}

.indexing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Tools Section */
.tools-section {
    animation: homepageFadeInUp 0.8s ease-out 0.6s both;
}

/* Dark Mode Support */
body.dark-mode .journal-info-card {
    background: #172A3A;
    box-shadow: none;
    border: 1px solid rgba(255,255,255,0.1);
}

body.dark-mode .indexing-card {
    background: #172A3A;
    box-shadow: none;
    border: 1px solid rgba(255,255,255,0.1);
}

body.dark-mode .info-item {
    background: rgba(0, 228, 255, 0.05);
}

body.dark-mode .info-item span:first-child {
    color: #E0E0E0;
}

body.dark-mode .info-item span:last-child {
    color: #E0E0E0;
}

body.dark-mode .indexing-card span {
    color: #E0E0E0;
}

body.dark-mode .indexing-section h2 {
    color: #00E4FF;
}

body.dark-mode .journal-info-card h3 {
    color: #00E4FF;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .journal-info-card {
        padding: 1.5rem 1rem;
    }
    
    .indexing-card {
        padding: 1rem;
    }
    
    .info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .info-item span:last-child {
        text-align: left;
    }
}

/***********************************************************
 DARK MODE FIX FOR CARDS
***********************************************************/

/* Journal Info Card Dark Mode */
body.dark-mode .journal-info-card {
    background: #172A3A !important;
    box-shadow: none !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

body.dark-mode .journal-info-card h3 {
    color: #00E4FF !important;
    border-bottom-color: #00A37A !important;
}

/* Info Items Dark Mode */
body.dark-mode .info-item {
    background: rgba(0, 228, 255, 0.05) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
}

body.dark-mode .info-item span:first-child {
    color: #E0E0E0 !important;
}

body.dark-mode .info-item span:last-child {
    color: #E0E0E0 !important;
}

body.dark-mode .info-item span[style*="color: #00A37A"] {
    color: #00A37A !important;
}

/* Indexing Cards Dark Mode */
body.dark-mode .indexing-card {
    background: #172A3A !important;
    box-shadow: none !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

body.dark-mode .indexing-card span {
    color: #E0E0E0 !important;
}

/* Section Headers Dark Mode */
body.dark-mode .indexing-section h2 {
    color: #00E4FF !important;
}

body.dark-mode .indexing-section p {
    color: #A0C4D4 !important;
}

/* Hover Effects in Dark Mode */
body.dark-mode .journal-info-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
    border-color: rgba(0, 228, 255, 0.2) !important;
}

body.dark-mode .indexing-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
    border-color: rgba(0, 228, 255, 0.2) !important;
    background: #1E2E3E !important;
}

body.dark-mode .info-item:hover {
    background: rgba(0, 228, 255, 0.1) !important;
    border-color: rgba(0, 228, 255, 0.2) !important;
}

/* =========================================================
   JOURNAL INFO BLOCK – ICON HOVER & MODERN UI EFFECTS
   (Append this at the end of stylesheet.css)
========================================================= */

/* Smooth icon hover glow */
.jib-nav-link .jib-link-icon svg {
  transition: transform 0.25s ease, fill 0.25s ease, filter 0.3s ease;
  vertical-align: middle;
}

.jib-nav-link:hover .jib-link-icon svg {
  transform: scale(1.15);
  fill: #00e4ff; /* highlight teal */
  filter: drop-shadow(0 0 6px rgba(0, 228, 255, 0.6));
}

/* Smooth text and arrow animation */
.jib-nav-link:hover .jib-link-text {
  color: #00e4ff;
  transition: color 0.3s ease;
}

.jib-nav-link:hover .jib-link-arrow {
  transform: translateX(3px);
  transition: transform 0.25s ease;
}

/* Section title icon subtle motion */
.jib-section-title .jib-title-icon svg {
  transition: transform 0.3s ease, fill 0.3s ease;
}

.jib-section-title:hover .jib-title-icon svg {
  transform: rotate(-8deg) scale(1.1);
  fill: #00A37A;
}

/* Section headers – clean underline accent */
.jib-section-title h3 {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  transition: color 0.3s ease;
}

.jib-section-title h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background: #00A37A;
  transition: width 0.3s ease;
}

.jib-section-title:hover h3::after {
  width: 100%;
}

/* Quick stats – glowing counters */
.jib-quick-stats .jib-stat-item .jib-stat-counter {
  font-weight: 600;
  color: #00A37A;
  transition: text-shadow 0.3s ease, transform 0.3s ease;
}

.jib-quick-stats .jib-stat-item:hover .jib-stat-counter {
  transform: scale(1.1);
  text-shadow: 0 0 8px rgba(0, 163, 122, 0.8);
}

/* Dark mode adjustments for icons */
body.dark-mode .jib-nav-link .jib-link-icon svg {
  fill: #00e4ff;
}

body.dark-mode .jib-nav-link:hover .jib-link-icon svg {
  fill: #00ffa1;
  filter: drop-shadow(0 0 6px rgba(0, 255, 161, 0.7));
}

body.dark-mode .jib-section-title h3::after {
  background: #00ffa1;
}

/* =========================================================
		Mobile Responsive
========================================================= */
/* Responsive Adjustment */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  .book-wrapper {
    margin-top: 2rem !important;
  }

  .book-image {
    width: 80% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
  }

  .impact-badge {
    top: -5px !important;
    right: 10px !important;
    font-size: 0.8rem !important;
  }
}

@media (max-width: 600px) {
  .book-image {
    width: 90% !important;
    max-width: 350px !important;
  }

  .journal-info-card {
    padding: 1.2rem !important;
  }

  .info-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.3rem !important;
  }

  .info-item span {
    text-align: left !important;
    width: 100% !important;
  }
}

/* ==============================================================
   REFINED GAP REMOVAL WITH PROFESSIONAL SPACING
============================================================== */

/* Remove all top spacing from main structure */
.pkp_structure_main,
.pkp_structure_content,
.pkp_page_index .pkp_structure_main,
.pkp_page_index .pkp_structure_content,
.page_index_journal,
.page_index_journal .pkp_structure_main,
.page_index_journal .pkp_structure_content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Remove gap from navigation to content */
.pkp_structure_head + .pkp_structure_main,
.pkp_structure_head + div,
.pkp_navigation + div {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure homepage hero touches navigation */
.homepage-hero {
    margin: 0 !important;
    padding-top: 3rem !important;
    border-radius: 0 0 20px 20px !important;
}

/* Remove any potential body padding */
body .pkp_structure_main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ==============================================================
   ADD ELEGANT SPACING FOR JOURNAL INFORMATION SECTION
============================================================== */

/* Add professional spacing after homepage hero */
.homepage-hero + div {
    margin-top: 3rem !important;
    padding-top: 0 !important;
}

/* Specific spacing for journal info card */
.journal-info-card {
    margin-top: 2rem !important;
    margin-bottom: 3rem !important;
}

/* Ensure the content after hero has proper breathing room */
.homepage-hero ~ *:not(.homepage-hero) {
    margin-top: 2rem !important;
}

/* Professional spacing for the journal info section */
.journal-info-card {
    margin: 2rem auto 3rem auto !important;
}

/* Optional: Add smooth transition for the spacing */
.homepage-hero + * {
    transition: margin-top 0.3s ease;
}

/* ==============================================================
   JOURNAL OF GLOBAL ENGINEERING REVIEW - ARTICLE PAGE FIXED
   Author spacing | Compact article list | Abstract justification
============================================================== */

/* --- ABSTRACT (full justification fix) --- */
.cmp_article_details .abstract,
.cmp_article_details .abstract p,
.item.abstract p {
    text-align: justify !important;
    text-justify: inter-word !important;
    line-height: 1.9 !important;
    background: #f8fafc !important;
    border-left: 5px solid #00A37A !important;
    padding: 1.8rem !important;
    margin: 2rem 0 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
}

.cmp_article_details .abstract h2 {
    color: #00304E !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    border-bottom: 2px solid #00A37A !important;
    padding-bottom: 0.5rem !important;
    text-align: left !important;
}

/* --- AUTHOR SECTION (single unified padding) --- */
.authors {
    background: rgba(0, 48, 78, 0.05) !important;
    border-left: 4px solid #00A37A !important;
    border-radius: 8px !important;
    margin: 1.5rem 0 !important;
    padding: 1rem 1.2rem !important;
}

.author {
    background: transparent !important;
    margin: 0.5rem 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

.author .name {
    display: block !important;
    font-weight: 700 !important;
    color: #00304E !important;
    font-size: 1.05rem !important;
}

.author .affiliation {
    color: #555 !important;
    font-size: 0.9rem !important;
    font-style: italic !important;
}

/* --- UNIVERSAL DOWNLOAD BUTTON (compact layout) --- */
.obj_galley_link,
.galleys_links a,
.item.galley_link,
.cmp_article_details .download a {
    display: inline-block !important;
    background: linear-gradient(135deg, #00A37A, #00E4FF) !important;
    color: #fff !important;
    padding: 0.6rem 1.5rem !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

.obj_galley_link:hover,
.galleys_links a:hover,
.item.galley_link:hover,
.cmp_article_details .download a:hover {
    background: #fff !important;
    color: #00A37A !important;
    border: 1.5px solid #00A37A !important;
    transform: translateY(-2px) !important;
}

/* --- COMPACT ARTICLE LIST (Current Issue / Archives) --- */
/* FIX (NEW): Removed card style, now just a content container */
.obj_article_summary {
    padding: 1.2rem 1rem !important;
    margin-bottom: 0 !important; 
    border-radius: 0 !important;
    background: transparent !important; /* FIX: Remove background */
    box-shadow: none !important; /* FIX: Remove shadow */
    transition: all 0.3s ease !important;
}

/* FIX (NEW): Removed card hover effect */
.obj_article_summary:hover {
    box-shadow: none !important;
    transform: none !important; 
}

.obj_article_summary .title {
    color: #00304E !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    margin-bottom: 0.5rem !important;
}

.obj_article_summary .authors {
    background: none !important;
    border: none !important;
    padding: 0.2rem 0 !important;
    margin: 0.2rem 0 !important;
}

.obj_article_summary .galleys_links {
    margin-top: 0.6rem !important;
    text-align: left !important;
}

/* --- ARTICLE BODY --- */
.article-body {
    text-align: justify !important;
    text-justify: inter-word !important;
    line-height: 1.9 !important;
    font-size: 1.1rem !important;
    color: #222 !important;
}

/* --- DARK MODE --- */
body.dark-mode .authors {
    background: rgba(0,228,255,0.05) !important;
}

body.dark-mode .cmp_article_details .abstract,
body.dark-mode .references {
    background: #172A3A !important;
    color: #E0E0E0 !important;
}

/* FIX (NEW): This applies to homepage cards */
body.dark-mode .obj_article_summary {
    background: #1E2E3E !important;
    color: #E0E0E0 !important;
}

/* FIX (NEW): This applies to article lists (Current Issue) */
body.dark-mode .obj_issue_toc .obj_article_summary {
    background: transparent !important; /* Ensure no card background */
}


/* FIX: Article title color in dark mode */
body.dark-mode .obj_article_summary .title a {
    color: #00E4FF !important;
}
body.dark-mode .obj_article_summary .title a:hover {
    color: #FFFFFF !important;
}


/* --- MOBILE OPTIMIZATION --- */
@media (max-width: 768px) {
    .cmp_article_details .abstract {
        padding: 1.2rem !important;
        margin: 1.5rem 0 !important;
    }

    .article-body {
        font-size: 1rem !important;
    }

    .authors {
        padding: 0.8rem !important;
    }

    .obj_article_summary {
        padding: 1rem !important;
    }

    .obj_galley_link {
        display: inline-block !important;
        margin-top: 0.4rem !important;
    }
}
/* ==============================================================
   FIX: Remove Double Padding in Nested Author Blocks (Article Page)
============================================================== */

/* Target nested authors inside another authors block */
.authors .authors {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Ensure only the outer authors block keeps the visual style */
.cmp_article_details .authors {
    background: rgba(0, 48, 78, 0.05) !important;
    border-left: 4px solid #00A37A !important;
    padding: 1rem 1.2rem !important;
    border-radius: 8px !important;
    margin: 1.5rem 0 !important;
}

/* Slight spacing adjustment for individual authors */
.cmp_article_details .author {
    margin: 0.3rem 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* ==============================================================
   FIX: Abstract Color Adjustment in Dark Mode
============================================================== */
body.dark-mode .cmp_article_details .abstract,
body.dark-mode .cmp_article_details .abstract p,
body.dark-mode .item.abstract p {
    background: #172A3A !important;
    color: #E0E0E0 !important;
    border-left: 5px solid #00A37A !important;
    box-shadow: 0 2px 10px rgba(0, 228, 255, 0.1) !important;
}

/* Adjust abstract heading inside dark mode */
body.dark-mode .cmp_article_details .abstract h2 {
    color: #00E4FF !important;
    border-bottom: 2px solid #00E4FF !important;
}