/* --- FIXING THE HEADER EDGES --- */
/* Target the exact row from the DOM screenshot to add side padding */
.upper-header.row {
    padding-left: 60px !important;  /* Pushes the logo away from the left edge */
    padding-right: 60px !important; /* Pushes the search/login away from the right edge */
    margin-left: 0 !important;      /* Removes Bootstrap's negative stretching */
    margin-right: 0 !important;
}
/* =========================================================
   1. PROFESSIONAL HEADER LAYOUT (YELLOW THEME)
   Logo (Pushed Right) | Main Menu (Center) | Login (Right)
   ========================================================= */

/* The Main Header Background (Restored to Yellow) */
.header.container-fluid {
    background-color: #ffd120 !important; 
    border-bottom: 3px solid #003366 !important;
    padding: 0 !important; 
}

/* The Flexbox Wrapper: Handles all the spacing */
.pkp_head_wrapper {
    display: flex !important;
    align-items: center !important; /* The core vertical centering command */
    justify-content: space-between !important;
    width: 100% !important; 
    min-height: 110px !important;
    padding: 0 40px 0 80px !important; 
    box-sizing: border-box !important;
}

/* --- COLUMN 1: Logo Area (Left) --- */
.pkp_site_name_wrapper {
    flex: 1 !important; 
    display: flex !important;
    align-items: center !important; /* Force vertical center */
    justify-content: flex-start !important;
    float: none !important; 
    width: auto !important; 
    margin: 0 !important; /* Kills any hidden theme margins pushing it up */
    padding: 0 !important;
}

.pkp_site_name_wrapper img {
    max-height: 85px !important; 
    width: auto !important;
    margin: 0 !important; /* Kills default image margins */
    display: block !important;
}

/* --- COLUMN 2: Main Menu Area (Center) --- */
.pkp_navigation_primary_wrapper {
    flex: 2 !important; 
    display: flex !important;
    align-items: center !important; /* Force vertical center */
    justify-content: center !important;
    float: none !important; 
    width: auto !important; 
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_primary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 40px !important; 
    margin: 0 !important; /* Kills OJS default list margins */
    padding: 0 !important;
    border: none !important;
}

.pkp_navigation_primary li {
    list-style: none !important;
    margin: 0 !important; 
    padding: 0 !important;
}

.pkp_navigation_primary a {
    color: #000000 !important; /* Solid Black for the yellow background */
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    display: block !important; /* Helps with perfect vertical alignment */
}

/* --- COLUMN 3: User Controls Area (Right) --- */
.pkp_navigation_user_wrapper {
    flex: 1 !important; 
    display: flex !important;
    align-items: center !important; /* Force vertical center */
    justify-content: flex-end !important; 
    float: none !important; 
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

#navigationUser {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#navigationUser li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

#navigationUser a {
    font-size: 0.8rem !important;
    color: #000000 !important; /* Solid Black */
    text-transform: uppercase !important;
    font-weight: 800 !important;
    display: inline-block !important;
    white-space: nowrap !important;
}

/* Search Pill */
#navigationUser a[href*="search"] {
    border: 2px solid #000000 !important;
    border-radius: 15px !important;
    padding: 4px 15px !important;
}

/* =========================================================
   2. JOURNAL & ISSUE PAGES
   ========================================================= */

/* Style the 'About' section as a professional 'Aims and Scope' box */
.container.journal_summary {
    background: #f4f4f4;
    padding: 30px;
    border-radius: 5px;
    border-left: 6px solid #003366;
    margin-bottom: 40px;
}

.container.journal_summary h2 {
    margin-top: 0;
    color: #003366;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Fix the Current Issue Header */
.current_issue header {
    border-bottom: 2px solid #eee;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.current_issue_label {
    display: block;
    color: #888;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: bold;
}

.current_issue_identification {
    font-size: 2.2rem;
    font-weight: 800;
    color: #222;
}

/* Style the publication date as metadata */
.current_issue header .published {
    font-size: 0.85rem;
    color: #666;
    margin-top: -10px;
    margin-bottom: 20px;
    font-weight: 500;
}

.current_issue header .published:before {
    content: "📅 "; 
    font-size: 0.8rem;
    margin-right: 5px;
}

/* Force the description and icon onto one line */
.flex_container.description_cover {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 40px;
}

.description_cover .description {
    flex: 1;
}

.description_cover .issue_cover_block {
    flex: 0 0 100px;
    text-align: right;
}

.description_cover .issue_cover_block img {
    width: 100px !important;
    height: auto;
    box-shadow: none;
}

/* =========================================================
   3. ARTICLE LISTINGS (Table of Contents)
   ========================================================= */

/* Clean List View for Articles */
.article_summary {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    display: block !important;
    border-bottom: 1px solid #eee;
    padding: 20px 0;
    margin-bottom: 15px;
    clear: both;
}

.article_summary .title {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

.article_summary .title a {
    font-weight: 700 !important;
    color: #003366 !important;
    text-decoration: none;
}

.article_summary .authors {
    font-size: 0.95rem;
    color: #555;
    margin-top: 5px;
}

.article_summary .list {
    display: flex;
    justify-content: flex-start;
}

/* Transform PDF links into professional buttons */
.article_summary .obj_galley_link.pdf,
.btn.galley-link.pdf {
    background-color: #d9534f !important;
    color: white !important;
    padding: 5px 12px;
    border-radius: 3px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8rem;
    transition: 0.3s;
    display: inline-block;
    text-decoration: none !important;
}

.btn.galley-link.pdf {
   padding: 10px 20px !important;
   font-size: 0.85rem;
}

.article_summary .obj_galley_link.pdf:hover,
.btn.galley-link.pdf:hover {
    background-color: #c9302c !important;
    text-decoration: none;
}

.pdf-download-button {
    display: none;
}

/* Styling the sidebar search button */
.pkp_block.block_search input[type="submit"] {
    background-color: #003366;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
}

/* =========================================================
   4. ARTICLE LANDING PAGE (Abstract)
   ========================================================= */

.obj_article_details .article_title {
    color: #003366 !important;
    font-weight: 800 !important;
    font-size: 2.2rem !important;
    margin-bottom: 20px !important;
}

.obj_article_details .article_header_wrapper {
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.row.article_main_data {
    display: flex !important;
    flex-direction: row !important;
    gap: 40px;
}

.article_abstract_block.col-md-8 {
    order: 1 !important;
    flex: 1 !important;
    max-width: 75% !important;
}

.article_abstract_block .abstract h2 {
    font-size: 1.5rem !important;
    color: #003366;
    border-bottom: 2px solid #003366;
    display: inline-block;
    margin-bottom: 15px;
}

.main_entry.col-md-4 {
    order: 2 !important;
    flex: 0 0 120px !important;
    max-width: 120px !important;
}

.article_cover_wrapper img {
    width: 100% !important;
    height: auto;
    opacity: 0.9;
}

/* --- NEW HERO BANNER SECTION (FOR HOMEPAGE) --- */

/* 1. Create a 400px tall empty space at the top of the main content area */
.page_index_journal {
    position: relative !important;
    padding-top: 400px !important; /* Pushes the 'About' section down to make room */
    display: block !important;
}

/* --- CENTERING THE HERO BANNER TEXT --- */

/* The Image and Main Title */
.page_index_journal::before {
    content: "Shaping Belize's Future." !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 400px !important;
    
    background-color: #6a3d77 !important; 
    background-image: url("https://ojs.ub.edu.bz/public/site/images/slide3.jpg") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    /* Text Centering Updates */
    padding-top: 130px !important; /* Pushes text down from the top */
    text-align: center !important; /* Perfectly centers the main title */
    
    color: #ffffff !important;
    font-size: 3.5rem !important;
    font-weight: 800 !important;
    font-family: 'Open Sans', sans-serif !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
}

/* The Subtitle */
.page_index_journal::after {
    content: "OJS publishes student theses from the University of Belize, advancing knowledge across disciplines." !important;
    position: absolute !important;
    top: 210px !important; /* Sits neatly below the title */
    
    /* Subtitle Centering Updates */
    left: 50% !important; 
    transform: translateX(-50%) !important; /* CSS trick to perfectly center absolute items */
    text-align: center !important;
    width: 90% !important; /* Prevents text from touching the screen edges on mobile */
    
    color: #ffffff !important;
    font-size: 1.15rem !important;
    font-weight: 400 !important;
    max-width: 600px !important;
    line-height: 1.6 !important;
    font-family: 'Open Sans', sans-serif !important;
    z-index: 2 !important;
}
/* =========================================================
   MOBILE RESPONSIVENESS FIXES (Screens under 768px)
   ========================================================= */
/* Fix horizontal stretching for the abstract on mobile */
/* Force Classic Theme abstract to wrap on mobile */

@media (max-width: 768px) {
/* --- 1. Clean up the Login & Search Row --- */
    /* Forces the wrapper to take full width so flexbox works properly */
    #user-nav-wraper {
        width: 100% !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* Centers the buttons and adds a clean, standard gap between them */
    #navigationUser.pkp_navigation_user {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 25px !important; /* The space between Login and Search */
        border-bottom: none !important; /* Removes Bootstrap's default tab line if present */
        margin: 0 !important;
        padding: 0 !important;
    }

    #navigationUser .nav-item {
        margin: 0 !important;
        list-style: none !important;
    }

    /* --- 2. Fix the Off-Screen Dropdown Menu --- */
    /* Prevents the 'About' dropdown from expanding off the right side of the screen */
    #navigationPrimary > li:last-child > ul,
    #navigationPrimary > li.dropdown:last-child .dropdown-menu,
    #navigationPrimary > li.has-submenu:last-child > ul {
        right: 0 !important;         /* Pins the menu to the right side of its parent */
        left: auto !important;       /* Overrides the default left-alignment */
        width: max-content !important; 
        max-width: 85vw !important;  /* Ensures it never exceeds the screen width */
        white-space: normal !important; /* Allows long menu items to wrap to a new line */
    }
        /* 1. Force the main wrapper to stack everything vertically */
    #articleMainData {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 15px !important; /* Adds a little breathing room on the edges */
    }

    /* 2. Shrink the clipboard image */
    .article_cover_wrapper img {
        max-width: 100px !important; /* Adjust this number if you want it bigger/smaller */
        height: auto !important;
        margin-bottom: 10px !important;
    }

    /* 3. Align the Published Date to the left, under the image */
    #articleMainData > p {
        text-align: left !important;
        margin-bottom: 15px !important;
        font-weight: bold; /* Optional: makes the date stand out */
    }

    /* 4. Force the abstract to take full width and wrap properly */
    #articleMainData .abstract {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        padding: 0 !important;
    }
    /* --- 1. HEADER MOBILE FIXES --- */
    .upper-header.row {
        padding-left: 15px !important; 
        padding-right: 15px !important;
        display: flex !important;
        flex-direction: column !important; /* Stacks the logo and buttons vertically */
        align-items: center !important;
    }
    
    .logo-wrapper img {
        max-height: 65px !important; /* Shrinks the logo so it isn't overwhelming */
        margin-bottom: 15px !important; /* Adds breathing room below the logo */
    }
    
    #navigationUser {
        justify-content: center !important; /* Centers the Login/Search buttons */
        margin-bottom: 10px !important;
    }

    /* --- 2. HERO BANNER MOBILE FIXES --- */
    /* Adjusting the Main Title */
    .page_index_journal::before {
        font-size: 2.2rem !important; /* Shrinks the giant 3.5rem font */
        padding-top: 70px !important; /* Pushes it up a bit higher */
        line-height: 1.2 !important; /* Tightens the spacing between lines */
    }
    
    /* Adjusting the Subtitle */
    .page_index_journal::after {
        top: 220px !important; /* Pushes this safely below the wrapped title */
        font-size: 1rem !important; /* Slightly smaller text */
        width: 90% !important; /* Gives it room on the edges */
        padding: 0 10px !important;
    }
}

/* Mobile Layout Fix based on custom DOM structure */
@media (max-width: 768px) {

}