/* =====================================================
   1. HEADER & NAVBAR BACKGROUND (Orange)
   ===================================================== */
.pkp_structure_head, 
#headerNavigationContainer,
.navbar-default,
.navbar {
    background-color: #F8F8F8 !important; /* Main Orange Background */
    border: none !important;
    border-radius: 0;
    margin-bottom: 0;
}

/* =====================================================
   2. LOGO SETTINGS (Centered & Scaled)
   ===================================================== */
.navbar-header {
    text-align: center;
    width: 100%;
    float: none;
}

.navbar-brand {
    display: inline-block;
    float: none;
    height: auto;
    padding: 15px;
}

.navbar-brand img,
.navbar-brand img.img-fluid {
    max-height: 200px !important; /* Adjust your logo size here */
    width: auto !important;
    margin: 0 auto;
}

/* =====================================================
   3. MAIN NAVIGATION MENU (Burgundy Text)
   ===================================================== */
.navbar-collapse {
    text-align: center; /* Centers the menu block */
}

.navbar-nav {
    display: inline-block;
    float: none;
    margin: 0 auto;
}

.navbar-default .navbar-nav > li > a {
    color: #000000 !important; /* Burgundy Text */
    font-weight: normal;
    font-size: 13px;
    text-transform: uppercase;
    padding: 10px 25px;
    transition: all 0.3s ease;
}

/* Hover & Active States (Burgundy BG, White Text) */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .open > a {
    background-color: #C45911 !important; 
    color: #000000 !important; 
    border-radius: 5px;
}

/* =====================================================
   4. DROPDOWN MENUS
   ===================================================== */
/* Your dropdown box styling */
.navbar-nav .dropdown-menu {
    background-color: #C45911 !important; /* Orange Background */
    border: 2px solid #C45911 !important; /* Added the Burgundy color code here */
    border-radius: 5px;
    padding: 5px 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Centering the dropdown box (Desktop only) */
@media (min-width: 768px) {
    .navbar-nav > .dropdown > .dropdown-menu {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
}

.navbar-nav .dropdown-menu > li > a {
    color: #ffffff !important; /* Burgundy Text */
    font-weight: bold;
    padding: 10px 20px;
    text-align: center;
    transition: all 0.3s ease;
}

/* Dropdown Hover */
.navbar-nav .dropdown-menu > li > a:hover,
.navbar-nav .dropdown-menu > li > a:focus {
    background-color: #b9bb9c !important; 
    color: #000000 !important; 
}

/* Make Dropdowns open on Hover (Desktop) */
@media (min-width: 768px) {
    .navbar-nav > li.dropdown:hover > .dropdown-menu {
        display: block;
    }
}

/* =====================================================
   5. MOBILE MENU TOGGLE BUTTON (Hamburger icon)
   ===================================================== */
.navbar-default .navbar-toggle {
    border-color: #a4121f;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #a4121f; /* Burgundy lines */
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #a4121f !important;
}

.navbar-default .navbar-toggle:hover .icon-bar {
    background-color: #ffffff; /* White lines on hover */
}

/* =====================================================
   7. MOBILE RESPONSIVE FIXES (Phones & Small Screens)
   ===================================================== */
@media (max-width: 767px) {
    
    /* 1. Header Bar: Set a fixed height for vertical centering */
    .navbar-header {
        min-height: 80px; 
        position: relative; /* This acts as the anchor for the logo and button */
    }

    /* 2. Logo: Anchored Left, Perfectly Vertically Centered */
    .navbar-brand {
        position: absolute !important;
        left: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important; /* The magic code for vertical centering */
        margin: 0 !important;
        padding: 0 !important;
        z-index: 10;
    }

    .navbar-brand img,
    .navbar-brand img.img-fluid {
        max-height: 55px !important; /* Mobile logo size */
        width: auto !important;
    }

    /* 3. Hamburger Button: Anchored Right, Perfectly Vertically Centered */
    .navbar-default .navbar-toggle {
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important; /* Matches the logo's vertical center */
        margin: 0 !important;
        z-index: 20;
    }

    /* 4. Hamburger Menu Content (Main Nav + Register/Login) */
    .navbar-collapse {
        background-color: #C45911 !important; 
        border-top: 2px solid #a4121f !important;
    }

    .navbar-nav {
        margin: 0 !important;
    }

    .navbar-nav > li {
        text-align: left !important; /* Aligns main menu text to the left */
    }

    .navbar-nav > li > a {
        padding: 12px 15px !important;
    }

    /* Force User Nav (Login/Register) to stack like normal menu items */
    #navigationUser,
    .pkp_navigation_user {
        display: block !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #navigationUser > li,
    .pkp_navigation_user > li {
        display: block !important;
        float: none !important;
        text-align: left !important; 
    }

    /* Style Login/Register to match the other Burgundy links */
    #navigationUser > li > a,
    .pkp_navigation_user > li > a {
        display: block !important;
        color: #a4121f !important;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 15px;
        padding: 12px 15px !important;
        border-top: 1px solid rgba(89, 7, 14, 0.2); /* Adds a faint line above Login/Register to separate them slightly */
    }

    #navigationUser > li > a:hover,
    .pkp_navigation_user > li > a:hover {
        background-color: #a4121f !important;
        color: #ffffff !important;
    }
    
    /* 5. Force the Container to be Full-Width */
    .pkp_structure_head .container,
    .navbar-default .container,
    .pkp_structure_page .container,
    .pkp_structure_main {
        width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
}
/* =====================================================
   8. MOBILE MENU WORKAROUND (Hide Default User Nav)
   ===================================================== */
@media (max-width: 767px) {
    #navigationUser, 
    .pkp_navigation_user {
        display: none !important; 
    }
}
/* =====================================================
   9. HIDE MANUAL LOGIN/REGISTER ON DESKTOP
   ===================================================== */
@media (min-width: 768px) {
    /* Targets any main menu link containing the word "login" or "register" */
    .navbar-nav > li > a[href*="login"],
    .navbar-nav > li > a[href*="register"] {
        display: none !important;
    }
}
/* =====================================================
   10. CUSTOM SIDEBAR BUTTONS (Author Guidelines)
   ===================================================== */
.btn-ijb {
    display: block; /* Makes the button fill the width of the sidebar */
    background-color: #b9bb9c; /* Burgundy background */
    color: #184622 !important; /* White text */
    padding: 10px 15px;
    margin-bottom: 8px !important; /* Space between buttons */
    border-radius: 4px; /* Slightly rounded corners */
    text-decoration: none !important;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    transition: background-color 0.3s ease;
    border-left: 4px solid #b9bb9c; /* Adds a nice orange accent line on the left */
}

/* Hover state when the mouse is over the button */
.btn-ijb:hover,
.btn-ijb:focus {
    background-color: #184622; /* Changes to Orange */
    color: #ffffff !important;
    border-left: 4px solid #184622; /* Accent line changes to Burgundy */
}

/* Ensure the icons have a little space next to the text */
.btn-ijb .fa {
    margin-right: 8px;
    font-size: 16px;
}
/* =====================================================
   11. CURRENT ISSUE HEADING FONT (Corrected)
   ===================================================== */
.current_issue h2,
.issue-current h2,
.homepage_issue h2 {
    font-family: "Georgia", "Times New Roman", serif !important; /* <-- Change your font here */
    font-weight: normal !important;
    color: #C45911 !important; /* Your Burgundy color */
    font-size: 27px !important; 
}
/* Change the color of the 'Articles' small heading */
.section h2 small {
    color: #C45911 !important; /* Change to your preferred hex code */
    font-weight: bold; /* Optional: makes it stand out more */
}
/* =====================================================
   12. JUSTIFY JOURNAL SUMMARY / ABOUT TEXT
   ===================================================== */
.journal-description p,
.homepage-journal-description p,
.about-journal p,
.pkp_about_journal p {
    text-align: justify !important;
    text-justify: inter-word !important;
}
/* =====================================================
   15. RESIZE CURRENT ISSUE TITLE
   ===================================================== */
.current_issue_title.lead {
    font-size: 13px !important; /* Change this number to make it bigger or smaller */
    font-weight: normal !important; /* Optional: Makes it bold. Change to 'normal' if you want it plain */
    margin-bottom: 13px !important; /* Adjusts the space below the text */
    color: #000000 !important; /* Optional: Keeps it in your Burgundy branding */
}
/* =====================================================
   16. ARTICLE TITLE LINKS (Fixed for Media Object)
   ===================================================== */
/* Targets the article titles in the new image-left layout */
.article-summary .media-heading a,
.media-body .media-heading a {
    color: #000000 !important; /* Your Burgundy color */
    font-weight: normal !important;
    font-size: 16px !important; 
    line-height: 1.4 !important;
    text-decoration: none !important; /* Starts with no underline */
    transition: all 0.3s ease !important; /* Makes the transition smooth */
}

/* The hover effect when the mouse touches the title */
.article-summary .media-heading a:hover,
.media-body .media-heading a:hover {
    color: #000000 !important; /* Stays Burgundy on hover */
    text-decoration: underline !important; /* Adds the underline */
}

/* The hover effect when the mouse touches the title */
.article-summary-title a:hover,
.obj_article_summary .title a:hover,
.cmp_article_list .title a:hover {
    color: #000000 !important; /* Changes to your Orange color */
}
/* =====================================================
   17. PDF / GALLEY BUTTON COLORS
   ===================================================== */
/* The main button style */
a.galley-link.btn,
a.obj_galley_link.btn {
    background-color: #C45911 !important; /* Burgundy background */
    border-color: #C45911 !important; /* Burgundy border */
    color: #000000 !important; /* White text */
    font-weight: normal;
    border-radius: 4px; /* Slightly rounded corners */
    transition: all 0.3s ease; /* Makes the color change smooth */
}

/* The hover effect when the mouse touches the button */
a.galley-link.btn:hover,
a.galley-link.btn:focus,
a.obj_galley_link.btn:hover,
a.obj_galley_link.btn:focus {
    background-color: #e4b99c !important; /* Changes to Orange */
    border-color: #e4b99c !important; /* Changes border to Orange */
    color: #000000 !important; /* Keeps the text white */
}
/* =====================================================
   19. "VIEW ALL ISSUES" BUTTON (The Nuclear Option)
   ===================================================== */
/* Forcing the highest possible priority from the top level */
body .pkp_structure_main a.btn.btn-primary.read-more,
body a.btn.btn-primary.read-more {
    background-color: #C45911 !important; /* Your Burgundy */
    border-color: #e4b99c !important; 
    color: #000000 !important; 
    font-weight: bold !important;
    border-radius: 4px !important; 
    transition: all 0.3s ease !important; 
}

/* The hover and click effects */
body .pkp_structure_main a.btn.btn-primary.read-more:hover,
body a.btn.btn-primary.read-more:hover {
    background-color: #e4b99c !important; /* Your Orange */
    border-color: #e4b99c !important;
    color: #000000 !important; 
}

/* Ensure the little arrow icon stays white too */
body a.btn.btn-primary.read-more .glyphicon {
    color: #ffffff !important;
}
/* =====================================================
   21. HIDE HEADER SEARCH BAR
   ===================================================== */
header .navbar-form,
.pkp_structure_head .navbar-form,
.navbar .navbar-form[role="search"] {
    display: none !important;
}
/* =====================================================
   22. FORCE MAIN CONTENT TO FULL WIDTH 
   ===================================================== */
main.pkp_structure_main,
.pkp_structure_main.col-md-8 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important; 
}
/* =====================================================
   23. CUSTOM HOMEPAGE HERO BANNER
   ===================================================== */
/* The main box holding everything together */
.custom-hero-banner {
    position: relative; /* Image dictates width, text dictates height */
    background-color: #F8F8F8 !important; 
    color: #000000;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    display: flex; /* Back to flex for alignment */
    transition: all 0.5s ease; /* Makes the box grow smoothly */
}

/* 2. Style the image on the left (FULL IMAGE NO CROP) */
.hero-image {
    flex: 0 0 40%; /* Locks image section to 40% width */
    max-width: 40%;
    /* This ensures that any "bars" around the image match the banner background color */
    background-color: #F8F8F8; 
    
    /* These three lines keep the text next to the image aligned perfectly */
    display: flex;
    justify-content: center;
    align-items: center; 
}

.hero-image img {
    width: 80%;
    height: auto;
    object-fit: contain; /* <--- THE MAGIC LINE: Shows full image without cropping! */
    padding: 10px; /* Optional: Adds a nice little 'frame' padding around the whole image */
}

/* 3. Let the text completely control the height of the banner */
.hero-content {
    /* No margin-left needed with display: flex */
    flex: 1; /* Takes remaining 60% width */
    padding: 30px;
}

/* Typography inside the banner */
.hero-content h2 {
    color: #000000 !important;
    margin-top: 0;
    font-size: 28px;
    border-bottom: 1px solid rgba(220, 212, 212, 0.2);
    padding-bottom: 10px;
}
.hero-intro {
    font-size: 15px;
    margin-top: 15px;
    text-align: justify;
}
.issn-info a, .hero-links a {
    color: #000000 !important;
    text-decoration: underline !important;
}
.issn-info a:hover, .hero-links a:hover {
    color: #000000 !important;
    text-decoration: underline !important;
}

/* The "Show More" Dropdown Toggle */
.about-details {
    margin: 10px 0 20px 0;
}
.about-details summary {
    cursor: pointer;
    font-weight: bold;
    color: #000000 !important; /* Orange to stand out against Burgundy */
    outline: none;
    font-size: 16px;
}
.about-details summary:hover {
    text-decoration: underline;
}
.about-text {
    background-color: #000000; /* Darkens the background slightly for the expanded text */
    padding: 15px;
    border-radius: 4px;
    margin-top: 10px;
    font-size: 14px;
}

/* The Submit Button */
.btn.btn-submit {
    background-color: #C45911 !important; /* Your Orange color */
    border: none !important;
    color: #000000 !important;
    padding: 10px 25px !important;
    font-weight: bold !important;
    border-radius: 4px !important;
    display: inline-block;
    transition: all 0.3s ease !important;
}
.btn.btn-submit:hover {
    background-color: #e4b99c !important; /* Flips to white on hover */
    color: #000000 !important; /* Text becomes Burgundy on hover */
}

/* The Bottom Links */
.hero-links {
    margin-top: 25px;
    font-size: 14px;
    border-top: 1px solid #000000;
    padding-top: 15px;
}

/* MOBILE FIX (keep it from Turn 14 or use this updated one) */
@media (max-width: 767px) {
    .custom-hero-banner {
        flex-direction: column;
    }
    .hero-image {
        width: 100%;
        max-width: 100%;
        height: 350px; 
    }
}
/* =====================================================
   24. PURE CSS "SHOW MORE / HIDE" TOGGLE
   ===================================================== */
/* 1. Hide the actual checkbox so no one sees it */
.toggle-checkbox {
    display: none !important;
}

/* 2. Hide the extra paragraph text by default */
.toggle-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden; /* Keeps the text from spilling out while squished */
    margin-top: 0;
    transition: max-height 0.6s ease-in-out, opacity 0.5s ease-in-out, margin-top 0.4s ease;
}

/* 3. When the checkbox is "checked" (clicked), show the extra text! */
.toggle-checkbox:checked ~ .toggle-content {
    max-height: 800px; /* A safe maximum height for the text to expand into */
    opacity: 1;
    margin-top: 10px;
}

/* 4. Style the Label to look like a clickable link */
.toggle-label {
    color: #000000 !important; /* Your Orange color */
    cursor: pointer;
    font-weight: bold;
    font-size: 15px;
    display: inline-block;
    margin-top: 10px;
}
.toggle-label:hover {
    text-decoration: underline;
}

/* 5. Set the default text of the label to "Show More" */
.toggle-label::after {
    content: "Show More";
}

/* 6. When the text is expanded, change the label text to "Hide" */
.toggle-checkbox:checked ~ .toggle-label::after {
    content: "Hide";
}
/* =====================================================
   Control the text inside the "Show More" hidden area
   ===================================================== */
.toggle-content p {
    font-size: 15px !important; /* <--- Change this number to make it bigger or smaller */
    line-height: 1.6 !important; /* Increases the breathing room between lines of text */
    color: #000000 !important; /* Keeps the text white */
    text-align: justify !important; /* Optional: Makes the left and right edges perfectly flat */
    margin-bottom: 10px !important; /* Adds a little space if you have multiple paragraphs */
}
/* =====================================================
   25. MOVE HERO BANNER TO THE TOP
   ===================================================== */
/* 1. Turn the homepage wrapper into a flexible column */
.page_index_journal {
    display: flex !important;
    flex-direction: column !important;
}

/* 2. Force the banner (and its wrapper) to jump to the very top */
.custom-hero-banner,
.additional_content {
    order: -1 !important; /* -1 tells the browser "Put this before everything else!" */
    width: 100% !important;
    margin-bottom: 40px !important; /* Gives some nice breathing room before the next section starts */
}

/* 3. Ensure the rest of the homepage stays in order below it */
.journal-description {
    order: 1 !important;
}
.current_issue {
    order: 2 !important;
}
/* =====================================================
   27. CENTER THE CURRENT ISSUE COVER
   ===================================================== */
/* 1. Force the row to use Flexbox to center everything */
.current_issue .heading.row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* 2. Remove the Bootstrap side-by-side column rules */
.current_issue .heading .thumbnail.col-md-4,
.current_issue .heading .issue-details.col-md-8 {
    width: 100% !important;
    max-width: 400px !important; /* Prevents the cover from stretching too massively on desktop */
    float: none !important; /* Stops it from floating to the left */
    margin: 0 auto 20px auto !important; /* Centers the box and adds space below */
}

/* 3. Center the actual image inside the box and remove the ugly default border */
.current_issue .thumbnail {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.current_issue .thumbnail img {
    margin: 0 auto !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Optional: Adds a nice elegant shadow to your cover */
}
/* Style the title once it is moved under the cover image */
.thumbnail.col-md-4 .current_issue_title.lead {
    margin-top: 15px;
    font-size: 16px;
    font-weight: bold;
    text-align: center; /* Centers the text under the image */
    color: #333; /* Change this to match your journal's color */
}
/* 1. Completely hide that empty description paragraph so it takes up zero space */
.issue-details .description {
    display: none !important;
}

/* 2. Reduce the bottom margin of the Volume/Issue title */
.thumbnail .current_issue_title.lead {
    margin-bottom: 5px !important; /* Adjust this to make the gap smaller or larger */
    font-size: 16px; /* Optional: adjust size if 'lead' is making it too big */
}

/* 3. Pull the Published date upward so it sits flush */
.issue-details .published {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Mobile Fix: Ensure the gap isn't too big when stacked on small screens */
@media (max-width: 767px) {
    .issue-details {
        margin-top: -10px !important; /* Pulls the date closer to the title on phones */
    }
}
/* 1. The Main Container (The Card) */
.article-summary.media {
    border: 1px solid #eaeaef;
    border-radius: 8px;
    padding: 20px;
    background-color: #ffffff;
    transition: all 0.3s ease-in-out;
    display: flex; 
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}

/* 2. The Hover Effect */
.article-summary.media:hover {
    border-color: #a4121f; /* Burgundy border on hover */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); /* Soft shadow drop */
    transform: translateY(-3px); /* Lifts the card up slightly */
}

/* 3. Cover Image Styling */
.article-summary.media .cover.media-left {
    padding-right: 0; /* Overrides default Bootstrap padding */
    flex-shrink: 0;
    width: 140px; /* Keeps cover images uniform */
}

.article-summary.media .cover img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 4. Text and Title Styling */
.article-summary.media .media-body {
    flex-grow: 1;
    width: auto;
}

.article-summary.media .media-heading a {
    color: #222222;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Changes title color to burgundy when hovering over the whole card */
.article-summary.media:hover .media-heading a {
    color: #a4121f; 
}

.article-summary.media .meta .authors {
    color: #555555;
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 12px;
}

/* 5. PDF Button Styling */
.article-summary.media .galley-link.btn-primary.pdf {
    background-color: #a4121f;
    border-color: #a4121f;
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
    padding: 6px 16px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.article-summary.media .galley-link.btn-primary.pdf:hover {
    background-color: #8a0f19; /* Slightly darker on hover */
    border-color: #8a0f19;
}

/* 6. Mobile Responsiveness */
@media (max-width: 767px) {
    .article-summary.media {
        flex-direction: column; /* Stacks image on top of text */
        align-items: center;
        text-align: center;
        padding: 15px;
    }
    
    .article-summary.media .cover.media-left {
        width: 100%;
        max-width: 180px; /* Prevents image from getting too massive */
        margin-bottom: 15px;
    }
}