/* ========================================================
   OJS Custom CSS - Issue Archives & Single Issue Grid Layout
   Matches the design in the provided screenshot
   ======================================================== */

/* ==========================================
   PART 1: ARCHIVES PAGE STYLING 
   (Applied to /issue/archive)
   ========================================== */

/* 1. Header Styling */
.page_issue_archive h1 {
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
    color: #0b2447; /* Dark blue */
    margin-bottom: 30px;
    border-bottom: 2px solid #eaeaea;
    padding-bottom: 10px;
}

/* 2. Grid Layout for the Archives */
.issues_archive {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

/* 3. Issue Summary Card Styling */
.obj_issue_summary {
    display: flex;
    align-items: center;
    background-color: #e2e8ed; /* Light grayish-blue background */
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
}

.obj_issue_summary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* 4. Issue Cover Image */
.obj_issue_summary .cover {
    flex: 0 0 110px; /* Fixed width for the cover */
    margin-right: 25px;
    display: block;
}

.obj_issue_summary .cover img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 5. Issue Title and Series Styling */
.obj_issue_summary h2 {
    display: flex;
    flex-direction: column-reverse; /* Put series above title */
    margin: 0;
    font-size: 16px;
    flex-grow: 1;
}

.obj_issue_summary h2 .series {
    font-weight: normal;
    color: #444;
    margin-bottom: 5px;
    font-size: 14px;
}

.obj_issue_summary h2 .title {
    color: #111;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    display: flex;
    flex-direction: column;
}

/* 6. "Explore Issues" Button (Injected via CSS) */
.obj_issue_summary h2 .title::after {
    content: "Explore Issues";
    display: inline-block;
    background-color: #0d385a; /* Dark blue button */
    color: #ffffff;
    padding: 10px 24px;
    border-radius: 30px;
    margin-top: 15px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    width: max-content;
    transition: background-color 0.3s ease;
}

.obj_issue_summary h2 .title:hover::after {
    background-color: #165282; /* Lighter blue on hover */
}

/* Hide description on the archive page */
.page_issue_archive .obj_issue_summary .description {
    display: none;
}


/* ==========================================
   PART 2: SINGLE ISSUE PAGE STYLING 
   (Applied to /issue/view/1)
   ========================================== */

/* Make the article list full width (1 column) and reduce gap */
.obj_issue_toc .cmp_article_list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px; /* Tighter gap between articles */
    list-style: none;
    padding: 0 !important;
    margin: 0 !important; /* Force no space around the list */
}

.obj_issue_toc .cmp_article_list li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Reduce space between the top issue elements (Preview banner) and the first section */
.obj_issue_toc .heading,
.obj_issue_toc .sections,
.cmp_notification {
    margin-bottom: 5px !important;
    margin-top: 0 !important;
}

/* Reduce space between the sections (e.g., Editorial, Case Studies) */
.obj_issue_toc .sections .section {
    margin-top: 10px !important; 
    margin-bottom: 10px !important; 
    padding: 0 !important;
}

/* Section Headings (e.g. Editorial, Case Studies) */
.obj_issue_toc .sections .section h2, 
.obj_issue_toc .sections .section h3 {
    font-size: 18px !important;
    color: #0b2447;
    border-bottom: 2px solid #eaeaea;
    padding-top: 0 !important;
    padding-bottom: 2px !important;
    margin-top: 0 !important; 
    margin-bottom: 2px !important; /* Absolute minimum space */
    line-height: 1.2;
}

/* Article Summary Card Styling */
.obj_article_summary {
    display: flex;
    flex-direction: column;
    background-color: #e2e8ed; /* Matches the Archives card color */
    border-radius: 8px;
    padding: 20px;
    padding-bottom: 95px; /* Increased to prevent overlap with author text */
    margin: 0 !important; /* KILL OJS DEFAULT MARGINS */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    height: 100%;
    position: relative; /* Crucial for positioning the buttons */
}

/* Article Title */
.obj_article_summary .title {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 10px 0;
}

.obj_article_summary .title a {
    color: #111;
    text-decoration: none;
    position: static; /* Ensure ::after positions relative to .obj_article_summary */
}

/* MAGIC: Create the "View Abstract" button out of the title link! */
.obj_article_summary .title a::after {
    content: "View Abstract";
    position: absolute;
    bottom: 45px;
    left: 155px; /* Position it next to the Download button on the left */
    background-color: #206a77; /* Teal color from video */
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px; /* Fixed height for perfect alignment */
    box-sizing: border-box;
    transition: background-color 0.3s ease;
}

.obj_article_summary .title a:hover::after {
    background-color: #174d57;
}

/* Hide the "View Abstract" button for the first two sections (Editorial and Introduction) */
.obj_issue_toc .sections .section:nth-child(1) .obj_article_summary .title a::after,
.obj_issue_toc .sections .section:nth-child(2) .obj_article_summary .title a::after {
    display: none;
}

/* Author info */
.obj_article_summary .meta {
    font-size: 14px;
    color: #444;
    margin-bottom: 5px;
    flex-grow: 1;
}

/* PDF/Galley button styling (Renamed to Download PDF) */
.obj_article_summary .galleys_links {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
    position: absolute;
    bottom: 45px;
    left: 20px; /* Left aligned */
    display: flex;
    align-items: center;
}

.obj_article_summary .galleys_links li {
    display: inline-flex;
}

.obj_article_summary .galleys_links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #e67e22; /* Orange color from video */
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-decoration: none !important;
    height: 28px; /* Fixed height to match View Abstract */
    box-sizing: border-box;
    transition: background-color 0.3s ease;
}

.obj_article_summary .galleys_links a:hover {
    background-color: #d35400;
}

/* Change 'PDF' to 'Download PDF' text using ::before */
.obj_article_summary .galleys_links a.pdf {
    font-size: 0 !important; /* Hide the original 'PDF' text */
    line-height: 0;
    color: transparent !important;
}

.obj_article_summary .galleys_links a.pdf::before {
    content: "Download PDF";
    font-size: 12px;
    color: #ffffff;
    line-height: 1;
}

/* ==========================================
   OPTIONAL: Tiny Badge Styling (DOI/Crossref)
   If you enable these plugins, they will look like the video!
   ========================================== */
.obj_article_summary .custom_badges {
    position: absolute;
    bottom: 15px;
    left: 20px;
    display: flex;
    gap: 8px;
}

.obj_article_summary .custom_badges span,
.obj_article_summary .custom_badges a {
    font-size: 10px;
    padding: 3px 8px;
    color: white;
    border-radius: 2px;
    font-weight: bold;
    text-decoration: none;
}

.obj_article_summary .custom_badges .google { background-color: #f39c12; }
.obj_article_summary .custom_badges .crossref { background-color: #e74c3c; }
.obj_article_summary .custom_badges .citations { background-color: #34495e; }

/* ==========================================
   PART 3: RESPONSIVE DESIGN (Mobile Friendly)
   ========================================== */
@media (max-width: 768px) {
    .issues_archive,
    .obj_issue_toc .cmp_article_list {
        grid-template-columns: 1fr; /* Stack into 1 column on smaller screens */
    }
}

/* Hides the horizontal line */
.obj_issue_toc .section:before,
.obj_issue_toc .galleys:before {
    display: none !important;
}

/* Hides the section title text */
.obj_issue_toc .section > h2,
.obj_issue_toc .section > h3 {
    display: none !important;
}
/* Change the background of every EVEN article box to light peach */
.obj_issue_toc .sections .section:nth-child(even) .obj_article_summary {
    background-color: #ffe8d6 !important; /* Light peach color */
}

/* Optional: explicitly set the ODD boxes to your light gray, 
   just in case you need to enforce it */
.obj_issue_toc .sections .section:nth-child(odd) .obj_article_summary {
    background-color: #e9ecef !important; /* Replace with your exact gray hex code if needed */
}
/* 1. Hide ALL original text inside the orange PDF button */
.obj_article_summary .galleys_links a.pdf {
    font-size: 0 !important;
}

/* 2. Remove any existing prefix text or icons from the theme */
.obj_article_summary .galleys_links a.pdf::before {
    display: none !important;
    content: none !important;
}

/* 3. Inject just the word "Download" with the correct font size */
.obj_article_summary .galleys_links a.pdf::after {
    content: "Download" !important;
    font-size: 12px !important; /* Matches the 12px you set on the button */
    color: #ffffff !important;
}
/* Change the orange Download button on the Issue page to Dark Blue */
.obj_article_summary .galleys_links a.pdf {
    background-color: #0A2540 !important; /* Premium Dark Blue */
    border: 1px solid #0A2540 !important; /* Matches the background */
    color: #ffffff !important; /* White text */
}

/* Add a nice hover effect */
.obj_article_summary .galleys_links a.pdf:hover {
    background-color: #123C69 !important; /* Slightly lighter blue when hovered */
    border-color: #123C69 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(10, 37, 64, 0.3);
}
/* 1. Turn the main button into an invisible wrapper */
.obj_article_details .galleys_links a.pdf {
    position: relative !important;
    display: inline-flex !important;
    gap: 15px !important; /* Space between the two new buttons */
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: 0 !important; /* Hides original 'PDF' text */
    color: transparent !important;
    box-shadow: none !important;
    line-height: normal !important;
}



/* 3. Create the second button (PDF in Light Blue) using ::after */
.obj_article_details .galleys_links a.pdf::after {
    content: "PDF" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #023455 !important; /* Light Blue */
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: bold !important;
    padding: 10px 24px !important;
    border-radius: 6px !important;
    box-shadow: 0 3px 8px rgba(77, 184, 255, 0.3) !important;
    transition: background-color 0.3s ease !important;
}

/* 4. Add the Hover Effects */
.obj_article_details .galleys_links a.pdf:hover::before {
    background-color: #4db8ff !important; /* Download turns Light Blue */
}

.obj_article_details .galleys_links a.pdf:hover::after {
    background-color: #0056b3 !important; /* PDF turns Thick Blue */
}
/* --- Article Page Improvements --- */

/* 1. Reduce space between sections (Abstract, Keywords, etc.) */
.obj_article_details .item {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

/* Tighter spacing specifically for DOI and Keywords */
.obj_article_details .item.doi,
.obj_article_details .item.keywords {
    padding-top: 5px !important;
}

/* 2. Light Peach Background for the Sidebar (Entry Details) */
.obj_article_details .entry_details {
    background-color: #fff4e6 !important; /* Light Peach Color */
    padding: 25px !important;
    border-radius: 12px;
    margin-top: 20px;
    border: 1px solid #ffe0cc;
    box-shadow: 0 4px 15px rgba(255, 224, 204, 0.3);
}

/* Clean up borders and padding inside the sidebar */
.obj_article_details .entry_details .item {
    padding: 12px 0 !important;
    border-bottom: 1px solid #ffe0cc;
}

.obj_article_details .entry_details .item:last-child {
    border-bottom: none;
}

/* Reduce the gap at the top of the content row */
.obj_article_details .row {
    margin-top: 1rem !important;
}
/* --- Article Page Improvements --- */

/* 1. Reduce space between sections (Abstract, Keywords, etc.) */
.obj_article_details .item {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

/* 2. Light Peach Background for the entire Sidebar */
.obj_article_details .entry_details {
    background-color: #fff4e6 !important; /* Light Peach Color */
    padding: 25px !important;
    border-radius: 12px;
    
    /* REMOVED margin-top to fill the space at the top */
    margin-top: 0 !important; 
    
    border: 1px solid #ffe0cc;
    box-shadow: 0 4px 15px rgba(255, 224, 204, 0.3);
}

/* 3. Ensure the main row starts higher up to align with the title */
.obj_article_details .row {
    margin-top: 0 !important;
    display: flex; /* Ensures columns align properly */
    align-items: flex-start;
}

/* Clean up borders and padding inside the sidebar */
.obj_article_details .entry_details .item {
    padding: 12px 0 !important;
    border-bottom: 1px solid #ccfff8;
}

.obj_article_details .entry_details .item:last-child {
    border-bottom: none;
}
/* Reduce space between the last author and the Keywords section */
.obj_article_details .item.authors {
    padding-bottom: 5px !important; /* Reduces bottom gap of author section */
}

.obj_article_details .item.authors ul.authors li:last-child {
    margin-bottom: 0 !important; /* Removes extra margin from the last author */
}

.obj_article_details .item.keywords {
    padding-top: 5px !important; /* Reduces top gap of keywords section */
}

/* Adjusting the keywords label to be closer to the values */
.obj_article_details .item.keywords .label {
    margin-right: 5px;
}
/* Unify spacing for all sections: Authors, Keywords, Abstract, and References */
.obj_article_details .main_entry .item {
    padding-top: 10px !important;    /* Tightens the top of each section */
    padding-bottom: 10px !important; /* Tightens the bottom of each section */
}

/* Specific fix for Abstract and References headers */
.obj_article_details .main_entry .item .label {
    margin-top: 0 !important;
    margin-bottom: 8px !important; /* Brings the heading closer to its content */
}

/* Ensure the last author doesn't add extra padding */
.obj_article_details .item.authors ul.authors li:last-child {
    margin-bottom: 0 !important;
}

/* Final tightening for specific metadata blocks */
.obj_article_details .item.keywords,
.obj_article_details .item.abstract,
.obj_article_details .item.references {
    border-top: none !important; /* Removes any accidental borders between sections */
}
/* --- Sidebar Styling Updates --- */

.obj_article_details .entry_details {
    background-color: #fff4e6 !important; /* Light Peach Color */
    padding: 25px !important;
    
    /* Remove the curves and shadows for a flat, solid look */
    border-radius: 0 !important; 
    box-shadow: none !important;
    
    /* Force the sidebar to the top and remove extra borders */
    margin-top: 0 !important;
    border: none !important;
    border-left: 1px solid #ffe0cc !important; /* Optional: subtle vertical divider */
    
    /* Ensure it fills the full height of the row */
    height: 100%;
}

/* Ensure the parent row starts at the very top of the content area */
.obj_article_details .row {
    margin-top: 0 !important;
    border-top: none !important;
}

/* Align breadcrumbs and title closer to the top to match the sidebar */
.cmp_breadcrumbs {
    margin-bottom: 10px !important;
}
/* --- Mobile View Alignment (for phones and small tablets) --- */
@media (max-width: 767px) {
    
    /* 1. Stack the main content and sidebar vertically */
    .obj_article_details .row {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. Make both sections full width */
    .obj_article_details .main_entry,
    .obj_article_details .entry_details {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 3. Adjust the Peach Sidebar for mobile */
    .obj_article_details .entry_details {
        margin-top: 40px !important; /* Add space between article text and sidebar */
        padding: 20px 15px !important; /* Slightly tighter padding for mobile */
        border-left: none !important;
        border-top: 1px solid #ffe0cc !important; /* Add a top border instead of side */
    }

    /* 4. Center align the cover image and buttons on mobile */
    .obj_article_details .entry_details .item.cover_image,
    .obj_article_details .entry_details .item.galleys {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 5. Ensure the Download/PDF buttons take up more space or stay side-by-side */
    .obj_article_details .entry_details .galleys_links {
        justify-content: center;
        gap: 10px;
    }

    /* 6. Tighten the overall page margins for mobile */
    .obj_article_details .page_title {
        font-size: 1.5rem !important; /* Slightly smaller title for small screens */
        padding: 0 10px;
    }
}
/* --- DOI Injection for specific authors in the 'Case Studies' section --- */

/* 1. SOUVIK & ADRIJA (The Maharajah's...) - Article 1 in Section 3 */
.obj_issue_toc .sections .section:nth-child(3) .obj_article_summary:nth-child(1) .authors::after {
    content: "\A DOI: https://doi.org/10.66244/105392080";
    display: block;
    white-space: pre;
    color: #206a77;
    font-size: 13px;
    margin-top: 5px;
}

/* 2. SANIYA (Introducing the TEI...) - Article 2 in Section 3 */
.obj_issue_toc .sections .section:nth-child(3) .obj_article_summary:nth-child(2) .authors::after {
    content: "\A DOI: https://doi.org/10.66244/105392071";
    display: block;
    white-space: pre;
    color: #206a77;
    font-size: 13px;
    margin-top: 5px;
}

/* 3. PRAVAT (The Tyranny of the Tool...) - Article 3 in Section 3 */
.obj_issue_toc .sections .section:nth-child(3) .obj_article_summary:nth-child(3) .authors::after {
    content: "\A DOI: https://doi.org/10.66244/105392060";
    display: block;
    white-space: pre;
    color: #206a77;
    font-size: 13px;
    margin-top: 5px;
}

/* 4. VARDAAN (I'd Rather Become...) - Article 4 in Section 3 */
.obj_issue_toc .sections .section:nth-child(3) .obj_article_summary:nth-child(4) .authors::after {
    content: "\A DOI: https://doi.org/10.66244/105392090";
    display: block;
    white-space: pre;
    color: #206a77;
    font-size: 13px;
    margin-top: 5px;
}

/* 5. PRATISHRUTHI (Posthumanism and Identity...) - Article 5 in Section 3 */
.obj_issue_toc .sections .section:nth-child(3) .obj_article_summary:nth-child(5) .authors::after {
    content: "\A DOI: https://doi.org/10.66244/105392010";
    display: block;
    white-space: pre;
    color: #206a77;
    font-size: 13px;
    margin-top: 5px;
}
/* =========================================
   ARTICLE LIST & SIDEBAR STYLING (CSS ONLY)
   ========================================= */

/* 1. SECTION SPACING (Tighten gaps to 1/2 inch) */
.obj_article_details .item {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

/* 2. SIDEBAR STYLING (Peach Background & Flat Edges) */
.obj_article_details .entry_details {
    background-color: #fff4e6 !important;
    padding: 25px !important;
    border-radius: 0 !important; /* Square edges as requested */
    margin-top: 0 !important;
    box-shadow: none !important;
    border-left: 1px solid #ffe0cc !important;
}

/* 3. DOI INJECTION (Visual Only) */
/* Targets articles by their position in the Case Studies section */

/* Souvik & Adrija */
.obj_issue_toc .sections .section:nth-child(3) .obj_article_summary:nth-child(1) .authors::after {
    content: "\A DOI: https://doi.org/10.66244/105392080";
    display: block; white-space: pre; color: #206a77; font-size: 13px; margin-top: 5px;
}
/* Saniya */
.obj_issue_toc .sections .section:nth-child(4) .obj_article_summary:nth-child(1) .authors::after {
    content: "\A DOI: https://doi.org/10.66244/105392070";
    display: block; white-space: pre; color: #206a77; font-size: 13px; margin-top: 5px;
}
/* Pravat */
.obj_issue_toc .sections .section:nth-child(5) .obj_article_summary:nth-child(1) .authors::after {
    content: "\A DOI: https://doi.org/10.66244/105392060";
    display: block; white-space: pre; color: #206a77; font-size: 13px; margin-top: 5px;
}
/* Vardaan */
.obj_issue_toc .sections .section:nth-child(6) .obj_article_summary:nth-child(1) .authors::after {
    content: "\A DOI: https://doi.org/10.66244/105392090";
    display: block; white-space: pre; color: #206a77; font-size: 13px; margin-top: 5px;
}
/* Pratishruthi */
.obj_issue_toc .sections .section:nth-child(7) .obj_article_summary:nth-child(1) .authors::after {
    content: "\A DOI: https://doi.org/10.66244/105392010";
    display: block; white-space: pre; color: #206a77; font-size: 13px; margin-top: 5px;
}

/* 4. MOBILE VIEW ALIGNMENT */
@media (max-width: 767px) {
    .obj_article_details .row { display: flex !important; flex-direction: column !important; }
    .obj_article_details .main_entry, .obj_article_details .entry_details { width: 100% !important; margin: 0 !important; }
    .obj_article_details .entry_details { margin-top: 30px !important; border-top: 1px solid #ffe0cc !important; border-left: none !important; }
}
/* --- Sidebar Styling Update (Light Blue) --- */

.obj_article_details .entry_details {
    /* Changed from peach to a very subtle light blue */
    background-color: #f0f8ff !important; /* AliceBlue - a very clean, "just visible" light blue */
    padding: 25px !important;
    border-radius: 0 !important; 
    margin-top: 0 !important;
    box-shadow: none !important;
    
    /* Subtle blue border to match the new theme */
    border-left: 1px solid #d1e8ff !important;
    height: 100%;
}

/* Also update the mobile view border to match */
@media (max-width: 767px) {
    .obj_article_details .entry_details {
        border-top: 1px solid #d1e8ff !important;
        border-left: none !important;
    }
}
/* --- Hiding Specific Sections --- */


/* Optional: If there is any extra white space left over after hiding, this will clean it up */
.obj_article_details .main_entry {
    padding-bottom: 0 !important;
}
/* CHANGE: Even lighter medium grey (#8e8e8e) */
.obj_issue_toc .sections .section:nth-child(even) .obj_article_summary {
    background-color: #8e8e8e !important; /* Medium Grey */
    border: 1px solid #7a7a7a;
}

/* CHANGE: Switched text back to Black/Dark Grey for better readability */
.obj_issue_toc .sections .section:nth-child(even) .obj_article_summary .title a,
.obj_issue_toc .sections .section:nth-child(even) .obj_article_summary .authors,
.obj_issue_toc .sections .section:nth-child(even) .obj_article_summary .author-doi {
    color: #111111 !important; /* Back to dark text */
}
/* --- Ultra-Light "Cambridge" Abstract Box --- */

.obj_article_details .item.abstract {
    background-color: #f8f9fa !important; /* Extremely light grey/white smoke */
    padding: 30px !important;
    border: 1px solid #e9ecef; /* Thin, elegant border */
    border-radius: 2px; /* Subtle sharp corners for a modern look */
    margin: 25px 0 !important;
    box-shadow: none; /* Removed shadow for the "lighter" feel */
}

/* Style the "Abstract" Label inside the box */
.obj_article_details .item.abstract .label {
    display: block;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111111 !important; /* Solid black for the title */
    margin-bottom: 15px !important;
    border-bottom: 1px solid #dee2e6; /* Line under the "Abstract" word */
    padding-bottom: 5px;
    width: fit-content;
}

/* Style the Abstract text content */
.obj_article_details .item.abstract .value {
    color: #444444;
    line-height: 1.8; /* Increased line height for airy feel */
    font-size: 15px;
    text-align: left;
}
/* --- EXACT Cambridge Core Button Style --- */

/* 1. Turn the single link into a row of white buttons */
.obj_article_details .galleys_links a.pdf {
    display: flex !important;
    flex-direction: row !important; /* Horizontal row */
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: 0 !important;
}

/* 2. Common Style for ALL 3 Buttons (White background, grey border) */
.obj_article_details .galleys_links a.pdf::before,
.obj_article_details .galleys_links a.pdf::after {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #d1d1d1 !important;
    padding: 6px 12px !important;
    border-radius: 2px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: background 0.2s;
}

/* --- Professional Adobe PDF Button --- */

.obj_article_details .galleys_links a.pdf::before {
    content: "Save PDF" !important;
    
    /* Reliable Adobe Icon Link */
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/8/87/PDF_file_icon.svg') !important;
    
    /* Size and Position */
    background-size: 20px !important;
    background-repeat: no-repeat !important;
    background-position: 10px center !important;
    
    /* Padding to make room for the icon on the left */
    padding: 8px 15px 8px 40px !important;
    
    /* Button Style */
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #d1d1d1 !important;
    border-radius: 2px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Hover effect to match Cambridge style */
.obj_article_details .galleys_links a.pdf:hover::before {
    background-color: #f8f8f8 !important;
    border-color: #aaaaaa !important;
}

/* 4. BUTTON 2: Share (with Icon) */
.obj_article_details .galleys_links a.pdf::after {
    content: "\27A4  Share" !important; /* Share Icon */
}

/* 5. Hover Effects (Matches the image) */
.obj_article_details .galleys_links a.pdf:hover::before,
.obj_article_details .galleys_links a.pdf:hover::after {
    background-color: #f8f8f8 !important;
    border-color: #aaaaaa !important;
}

/* 6. Mobile Adjustment (Stack them if too wide for sidebar) */
@media (max-width: 1024px) {
    .obj_article_details .galleys_links a.pdf {
        flex-direction: column !important;
    }
}
/* --- Add Open Access Image Above Buttons --- */

/* 1. Target the container of the buttons */
.obj_article_details .item.galleys {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* 2. Inject your Open Access Image */
.obj_article_details .item.galleys::before {
    content: "" !important;
    display: block !important;
    width: 200px; /* Increased width for your specific image */
    height: 70px; 
    background-image: url('https://th.bing.com/th/id/OIP.uqe4giGh3Kr72pgQNutcEQHaCr?w=350&h=126&c=7&r=0&o=7&pid=1.7&rm=3') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    margin-bottom: 15px !important;
}

/* 3. Spacing adjustment */
.obj_article_details .galleys_links {
    margin: 0 !important;
    padding: 0 !important;
}
/* --- Open Access Image (Background Removed) --- */

.obj_article_details .item.galleys::before {
    content: "" !important;
    display: block !important;
    width: 200px;
    height: 70px; 
    background-image: url('https://th.bing.com/th/id/OIP.uqe4giGh3Kr72pgQNutcEQHaCr?w=350&h=126&c=7&r=0&o=7&pid=1.7&rm=3') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    
    /* THE TRICK: This removes the white background of the image */
    mix-blend-mode: multiply !important; 
    
    margin-bottom: 15px !important;
}

/* Hide Keywords and References ONLY on this page (Editorial) */

.obj_article_details:has(a[href*="/view/29/"]) .item.keywords,
.obj_article_details:has(a[href*="/view/29/"]) .item.references {
    display: none !important;
}
/* Change alternating rows from dark grey to a clean light grey */
.obj_issue_toc .sections .section:nth-child(even) .obj_article_summary {
    background-color: #f2f2f2 !important; /* This is a very light, clean grey */
    border: 1px solid #e1e1e1 !important; /* Soft border to match */
}

/* Ensure the text remains dark and readable on the light background */
.obj_issue_toc .sections .section:nth-child(even) .obj_article_summary .title a,
.obj_issue_toc .sections .section:nth-child(even) .obj_article_summary .authors {
    color: #111111 !important;
}
/* 1. MOVE "VIEW ABSTRACT" TO THE LEFT (First Position) */
.obj_article_summary .title a::after {
    content: "View Abstract";
    position: absolute;
    bottom: 45px;
    left: 20px; /* Changed from 155px to 20px */
    background-color: #206a77;
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    box-sizing: border-box;
    transition: background-color 0.3s ease;
}

/* 2. MOVE "DOWNLOAD" TO THE RIGHT (Second Position) */
.obj_article_summary .galleys_links {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
    position: absolute;
    bottom: 45px;
    left: 135px; /* Changed from 20px to 135px to sit next to View Abstract */
    display: flex;
    align-items: center;
}
/* 1. ENABLE "VIEW ABSTRACT" FOR ALL SECTIONS (Editorial & Introduction) */
.obj_issue_toc .sections .section .obj_article_summary .title a::after {
    display: inline-flex !important; /* Ensure it is visible everywhere */
    content: "View Abstract";
    position: absolute;
    bottom: 45px;
    left: 20px;
    background-color: #206a77;
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    height: 28px;
    box-sizing: border-box;
    transition: background-color 0.3s ease;
}

/* 2. POSITION DOWNLOAD BUTTON WITH 1/2 INCH GAP */
.obj_article_summary .galleys_links {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
    position: absolute;
    bottom: 45px;
    /* Calculated: 20px (start) + ~110px (button width) + 15px (1/2 inch gap) */
    left: 145px; 
    display: flex;
    align-items: center;
}

/* 3. REMOVE ANY PREVIOUS RULES THAT HID THE BUTTONS ON EDITORIAL */
.obj_issue_toc .sections .section:nth-child(1) .obj_article_summary .title a::after,
.obj_issue_toc .sections .section:nth-child(2) .obj_article_summary .title a::after {
    display: inline-flex !important; /* Forces them to show */
}
/* Hide References only on the Introduction page (ID 28) */
.obj_article_details:has(a[href*="/view/28/"]) .item.references {
    display: none !important;
}

/* 
   Custom CSS for Article Details Page 
   1. Reduce spacing between sections
   2. Add light peach background to the sidebar (entry_details)
*/

/* Adjust spacing between sections in article details */
.obj_article_details .item {
    padding-top: 15px !important; /* Reduced from default (~23px) */
    padding-bottom: 15px !important; /* Reduced from default (~23px) */
}

/* Specific spacing for DOI and Keywords to match user's request for tighter layout */
.obj_article_details .item.doi,
.obj_article_details .item.keywords {
    padding-top: 5px !important;
}

/* Background for the entry_details (sidebar) section */
.obj_article_details .entry_details {
    background-color: #fff4e6 !important; /* Light Peach Color */
    padding: 20px !important;
    border-radius: 8px;
    margin-top: 20px;
    border: 1px solid #ffe0cc; /* Subtle border to define the section */
}

/* Ensure the sidebar items have less padding to fit the new layout */
.obj_article_details .entry_details .item {
    padding: 10px 0 !important;
    border-bottom: 1px solid #ffe0cc;
}

.obj_article_details .entry_details .item:last-child {
    border-bottom: none;
}

/* Ensure the sidebar items have less padding to fit the new layout */
.obj_article_details .entry_details .item {
    padding: 10px 0 !important;
    border-bottom: 1px solid #ffe0cc;
}

.obj_article_details .entry_details .item:last-child {
    border-bottom: none;
}
/* Background for the entry_details (sidebar) section */
.obj_article_details .entry_details {
    background-color: #f0f8ff !important; /* Very Light Blue */
    padding: 20px !important;
    border-radius: 8px;
    margin-top: 20px;
    border: 1px solid #d1e8ff; /* Soft blue border */
}

/* Updated item dividers for the new theme */
.obj_article_details .entry_details .item {
    padding: 10px 0 !important;
    border-bottom: 1px solid #d1e8ff;
}
/* Shared styling for Abstract and Keywords */
.obj_article_details .item.abstract,
.obj_article_details .item.keywords {
    background-color: #f8f9fa !important;
    padding: 25px !important;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    margin: 20px 0 !important;
}
.obj_article_summary .author-doi a {
    color: #206a77;
    text-decoration: none;
    font-weight: 500;
}
/* Styling for the Clickable DOI Link (Matches your request) */
.author-doi {
    display: block;
    color: #206a77;
    font-size: 13px; /* As requested */
    margin-top: 5px; /* As requested */
}

.author-doi a {
    color: #206a77 !important;
    text-decoration: none;
    font-weight: 500;
}

.author-doi a:hover {
    text-decoration: underline;
}

/* Force hide the old non-clickable DOI text from OJS settings */
.obj_article_summary .authors::after {
    display: none !important;
    content: none !important;
}