/*
 * ============================================================
 *  OJS ADDITIONAL STYLESHEET — Quill Spark Journals
 *  ============================================================
 *  HOW TO USE:
 *  Upload this file via:
 *  Dashboard → Settings → Website → Appearance → Additional Stylesheet
 *
 *  Your main stylesheet.css stays untouched.
 *  This file ONLY adds what stylesheet.css doesn't already cover.
 *
 *  Based on: live analysis of https://quillspark.in
 *  ============================================================
 *
 *  QUICK COLOR CHANGE GUIDE — edit only these values:
 *
 *    Nav / Header green:    #1a5407   → search & replace
 *    Dropdown blue:         #005a95   → search & replace
 *    Accent red underline:  #e30a3a   → search & replace
 *    Footer dark green:     #123a05   → search & replace
 *
 *  ============================================================
 *
 *  SECTIONS
 *  --------
 *  A. Header band colour (green instead of blue)
 *  B. Logo — full-width banner image
 *  C. Nav bar row — green background
 *  D. Nav dropdown — white bg with green text
 *  E. User strip (Login/Register) — kept blue
 *  F. Footer — dark green background
 *  G. Abstract text — justified
 *  H. Article section labels (Abstract, Keywords…)
 *  I. Article title links — green colour
 *  J. Galley/PDF download buttons — green
 *  K. Mobile logo — full width
 * ============================================================
 */


/* ============================================================
   A. HEADER BAND COLOUR
   ─────────────────────
   Changes the header background from OJS default blue
   (#005a95) to brand green (#1a5407).
   The red bottom border matches the reference site's accent.
   ============================================================ */
.pkp_structure_head {
    background-color: #1a5407;
    border-bottom: 3px solid #e30a3a;
}


/* ============================================================
   B. LOGO — FULL-WIDTH BANNER IMAGE
   ───────────────────────────────────
   Makes the journal banner image stretch to fill the full
   header width — exactly as seen on quillspark.in.
   ============================================================ */
@media (min-width: 992px) {

    /* Expand site-name container to full width */
    .pkp_site_name {
        width: 100% !important;
        max-width: 100%;
        padding: 0px 0;
        overflow: visible;
        white-space: normal;
        text-align: center;
        padding-left: 0px;
        padding-right: 0px;
    }

    /* Remove default OJS margin on the image wrapper */
    .pkp_site_name .is_img {
        display: block;
        margin: 0;
        padding: 0;
    }

    /* The banner <img> — full-width, proportional height */
    .pkp_site_name .is_img img {
        display: block;
        width: 100%;
        /* ← full-width banner        */
        max-width: 100%;
        height: auto;
        max-height: none;
        /* remove the 80px OJS limit  */
        margin: 0 auto;
    }

    /* Remove the extra top padding OJS adds for logos */
    .pkp_head_wrapper,
    .has_site_logo .pkp_head_wrapper {
        padding-top: 0;
    }

    /* Push site-name wrapper down to clear the 33px user strip */
    .pkp_site_name_wrapper {
        margin-top: 33px;
        height: auto;
        padding-left: 0rem;
        padding-right: 0rem;
    }
}


/* ============================================================
   C. NAV BAR ROW — GREEN BACKGROUND
   ───────────────────────────────────
   The horizontal menu row (HOME | ABOUT | JOURNALS…).
   Green background with white text.
   ============================================================ */
@media (min-width: 992px) {

    /* Nav row band */
    .pkp_navigation_primary_row {
        background: #1a5407;
        padding-left: 2.143rem;
        padding-right: 2.143rem;
    }

    /* Top-level nav link text */
    #navigationPrimary>li>a {
        color: #fff;
        border-bottom-width: 3px;
        text-transform: none;
    }

    /* Hover — accent red underline */
    #navigationPrimary>li>a:hover,
    #navigationPrimary>li>a:focus {
        color: #fff;
        border-bottom-color: #e30a3a;
        background: rgba(255, 255, 255, 0.08);
        outline: 0;
    }

    /* Remove underline on parent items with submenus on hover */
    #navigationPrimary>[aria-haspopup]>a:hover,
    #navigationPrimary>[aria-haspopup]>a:focus {
        border-color: transparent;
    }
}

/* Mobile nav panel background */
.pkp_site_nav_menu {
    background: #1a5407;
}


/* ============================================================
   D. DROPDOWN MENU — WHITE BACKGROUND, GREEN TEXT
   ──────────────────────────────────────────────────
   The flyout submenu panel. White card with green links
   and red top-border accent.
   ============================================================ */
@media (min-width: 992px) {

    /* Dropdown panel */
    #navigationPrimary ul {
        background: #ffffff !important;
        border-top: 3px solid #e30a3a;
        border-radius: 0 0 4px 4px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    /* Dropdown links */
    #navigationPrimary ul a {
        color: #1a5407 !important;
        text-transform: none;
        font-weight: 600;
        border-left: 3px solid transparent;
    }

    /* Dropdown hover */
    #navigationPrimary ul a:hover,
    #navigationPrimary ul a:focus {
        color: #123a05 !important;
        background: #f0f8ee;
        border-left-color: #f68e10;
        outline: 0;
    }
}


/* ============================================================
   E. USER STRIP (Login / Register)
   ──────────────────────────────────
   The top bar showing account links.
   Kept blue (#005a95) — matches quillspark.in exactly.
   stylesheet.css already handles most of this; this section
   only ensures the background colour is explicitly set.
   ============================================================ */
@media (min-width: 992px) {
    .pkp_navigation_user_wrapper {
        background: transparent !important;
        position: absolute !important;
        top: 0;
        right: 0;
        z-index: 10;
    }

    .pkp_site_name_wrapper {
        position: relative;
    }

    #navigationUser>li>a {
        color: #fff !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    }
}


/* ============================================================
   F. FOOTER — DARK GREEN BACKGROUND
   ───────────────────────────────────
   The full-width footer band. Dark green with red top border.
   ============================================================ */
.pkp_structure_footer_wrapper {
    background: #123a05;
    border-top: 3px solid #e30a3a;
    border-bottom: 0rem;
}

/* Footer text is already white in stylesheet.css — just confirm */
.pkp_footer_content {
    color: rgba(255, 255, 255, 0.9);
}

.pkp_footer_content a {
    color: #ffffff;
}

.pkp_footer_content a:hover {
    color: rgba(255, 255, 255, 0.75);
}


/* ============================================================
   G. ABSTRACT TEXT — JUSTIFIED
   ──────────────────────────────
   Justifies the abstract and main article body text.
   stylesheet.css already justifies .pkp_structure_main p —
   this extends it specifically to the abstract value block.
   ============================================================ */
.obj_article_details .item.abstract .value,
.obj_article_details .item.abstract p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    line-height: 1.85;
}


/* ============================================================
   H. ARTICLE SECTION LABELS
   ───────────────────────────
   The "Abstract", "Keywords", "References" headings inside
   each article page. Red accent underline.
   ============================================================ */
.obj_article_details .main_entry .item .label {
    display: inline-block;
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #123a05;
    padding-bottom: 0.3rem;
    border-bottom: 3px solid #e30a3a;
    margin-bottom: 0.8rem;
}

/* DOI and Keywords — inline, no underline */
.obj_article_details .main_entry .item.doi .label,
.obj_article_details .main_entry .item.keywords .label {
    font-size: 0.93rem;
    border-bottom: none;
    padding-bottom: 0;
    text-transform: none;
    display: inline;
    color: #1a5407;
}

/* Sidebar entry detail labels */
.obj_article_details .entry_details .sub_item .label {
    color: #1a5407;
    font-weight: 700;
}

.obj_article_details .entry_details .sub_item:not(:first-child) .label {
    border-bottom: 3px solid #e30a3a;
}

.obj_article_details .entry_details .item>.label,
.obj_article_details .entry_details .sub_item:first-child>.label {
    background: #f0f8ee;
    color: #123a05;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* ============================================================
   I. ARTICLE TITLE LINKS — GREEN COLOUR
   ───────────────────────────────────────
   Turns the default blue article title links to brand green.
   ============================================================ */
.obj_article_summary>.title a {
    color: #1a5407;
    text-transform: none;
    text-decoration: none;
}

.obj_article_summary>.title a:hover,
.obj_article_summary>.title a:focus {
    color: #2a7a0b;
    text-decoration: underline;
}

.obj_article_details>.page_title {
    color: #123a05;
}

/* General link colour override — green instead of OJS default blue */
a {
    color: #1a5407;
}

a:hover,
a:focus {
    color: #2a7a0b;
}


/* ============================================================
   J. GALLEY / PDF DOWNLOAD BUTTONS
   ──────────────────────────────────
   The PDF, HTML format buttons on article pages.
   stylesheet.css sets these to #005a95 (blue) — override
   to brand green to match the rest of the journal.
   ============================================================ */
.cmp_manuscript_button,
.block_make_submission a,
.obj_galley_link {
    background: #1a5407 !important;
    border-color: #123a05 !important;
    color: #ffffff !important;
}

.cmp_manuscript_button:hover,
.cmp_manuscript_button:focus,
.block_make_submission a:hover,
.block_make_submission a:focus,
.obj_galley_link:hover,
.obj_galley_link:focus {
    background: #2a7a0b !important;
    color: #ffffff !important;
}


/* ============================================================
   K. MOBILE LOGO — FULL WIDTH
   ─────────────────────────────
   Shows the full banner image on phones/tablets without
   OJS compressing it into a small strip.
   ============================================================ */
@media (max-width: 991px) {

    .pkp_navigation_primary_wrapper {
        padding-top: 0 !important;
    }

    .pkp_site_name {
        position: relative !important;
        display: block !important;
        text-align: center !important;
        left: auto !important;
        right: auto !important;
        overflow: visible !important;
        white-space: normal !important;
        padding: 0px 0 !important;
    }

    .pkp_site_name .is_img {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pkp_site_name .is_img img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        display: block !important;
    }
}

/* ============================================================
   L. PARAGRAPH TEXT — JUSTIFIED SITEWIDE
   ============================================================ */
.pkp_structure_main p,
.pkp_block p,
.homepage_about p,
.pkp_page_about p,
.pkp_page_content p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}


/* ============================================================
   M. JOURNAL LISTING — CARDS + 3D BUTTONS
   ─────────────────────────────────────────
   Exact HTML confirmed:
     div.journals > ul > li > div.body > h3
     div.journals > ul > li > div.body > ul.links > li.view > a
     div.journals > ul > li > div.body > ul.links > li.current > a
   ============================================================ */

/* Override OJS negative margins */
@media (min-width: 768px) {
    .journals > ul > li {
        margin: 0 0 1rem 0 !important;
        padding: 0 !important;
        border-top: none !important;
    }
}
@media (min-width: 992px) {
    .journals > ul > li {
        margin: 0 0 1rem 0 !important;
        padding: 0 !important;
    }
}

/* Stack vertically */
.journals > ul {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 1rem 0 !important;
    list-style: none !important;
}

/* Card */
.journals > ul > li {
    background: #ffffff;
    border: 1px solid #d0d7de !important;
    border-radius: 8px;
    padding: 0 !important;
    margin: 0 0 1rem 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 6px 20px rgba(0,0,0,0.09);
    transition: box-shadow 0.2s, transform 0.2s;
    list-style: none !important;
    box-sizing: border-box;
    overflow: hidden;
}

.journals > ul > li:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.08), 0 16px 36px rgba(0,0,0,0.13);
    transform: translateY(-2px);
}

/* Coloured left border per journal */
.journals > ul > li:nth-child(5n+1) { border-left: 5px solid #1a5407 !important; }
.journals > ul > li:nth-child(5n+2) { border-left: 5px solid #0a3d6b !important; }
.journals > ul > li:nth-child(5n+3) { border-left: 5px solid #b34a00 !important; }
.journals > ul > li:nth-child(5n+4) { border-left: 5px solid #5b2d8e !important; }
/* Fallback for 5th journal onwards — teal */
.journals > ul > li:nth-child(5n+5) { border-left: 5px solid #00838f !important; }

/* Body padding */
.journals > ul > li .body {
    padding: 1.4rem 1.6rem 1.2rem;
}

/* Title */
.journals > ul > li .body h3 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin: 0 0 0.9rem 0 !important;
    line-height: 1.4;
}

.journals > ul > li:nth-child(5n+1) .body h3 a { color: #1a5407 !important; text-decoration: none !important; }
.journals > ul > li:nth-child(5n+2) .body h3 a { color: #0a3d6b !important; text-decoration: none !important; }
.journals > ul > li:nth-child(5n+3) .body h3 a { color: #b34a00 !important; text-decoration: none !important; }
.journals > ul > li:nth-child(5n+4) .body h3 a { color: #5b2d8e !important; text-decoration: none !important; }
.journals > ul > li:nth-child(5n+5) .body h3 a { color: #00838f !important; text-decoration: none !important; }
.journals > ul > li .body h3 a:hover         { text-decoration: none !important; }

/* ul.links — horizontal, no bullets, no underlines */
.journals .links {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.7rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-wrap: wrap;
}

.journals .links a {
    text-decoration: none !important;
}

.journals .links a:hover {
    text-decoration: none !important;
}

/* Shared pill base */
.journals .links li a {
    display: inline-block !important;
    padding: 0.42rem 1.25rem !important;
    border-radius: 50px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap;
    position: relative;
    top: 0;
    transition: top 0.1s, box-shadow 0.1s;
    line-height: 1.4;
}

/* ── li.view — solid 3D pill per journal colour ── */
.journals > ul > li:nth-child(5n+1) .links li.view a {
    background: linear-gradient(to bottom, #2d8a0e, #1a5407) !important;
    color: #ffffff !important;
    border: 1px solid #123a05 !important;
    box-shadow: 0 4px 0 #0d2b03, 0 5px 10px rgba(26,84,7,0.30) !important;
}
.journals > ul > li:nth-child(5n+2) .links li.view a {
    background: linear-gradient(to bottom, #1a6bbf, #0a3d6b) !important;
    color: #ffffff !important;
    border: 1px solid #062040 !important;
    box-shadow: 0 4px 0 #031425, 0 5px 10px rgba(10,61,107,0.30) !important;
}
.journals > ul > li:nth-child(5n+3) .links li.view a {
    background: linear-gradient(to bottom, #d45c00, #b34a00) !important;
    color: #ffffff !important;
    border: 1px solid #7a3000 !important;
    box-shadow: 0 4px 0 #4a1d00, 0 5px 10px rgba(179,74,0,0.30) !important;
}
.journals > ul > li:nth-child(5n+4) .links li.view a {
    background: linear-gradient(to bottom, #7b3dbe, #5b2d8e) !important;
    color: #ffffff !important;
    border: 1px solid #3d1d6b !important;
    box-shadow: 0 4px 0 #2a1050, 0 5px 10px rgba(91,45,142,0.30) !important;
}
.journals > ul > li:nth-child(5n+5) .links li.view a {
    background: linear-gradient(to bottom, #00a0af, #00838f) !important;
    color: #ffffff !important;
    border: 1px solid #005f6b !important;
    box-shadow: 0 4px 0 #003d47, 0 5px 10px rgba(0,131,143,0.30) !important;
}

/* ── li.current — white 3D pill with coloured border ── */
.journals > ul > li:nth-child(5n+1) .links li.current a {
    background: linear-gradient(to bottom, #ffffff, #f0f7ee) !important;
    color: #1a5407 !important;
    border: 1px solid #1a5407 !important;
    box-shadow: 0 4px 0 #123a05, 0 5px 10px rgba(26,84,7,0.15) !important;
}
.journals > ul > li:nth-child(5n+2) .links li.current a {
    background: linear-gradient(to bottom, #ffffff, #eef3f9) !important;
    color: #0a3d6b !important;
    border: 1px solid #0a3d6b !important;
    box-shadow: 0 4px 0 #062040, 0 5px 10px rgba(10,61,107,0.15) !important;
}
.journals > ul > li:nth-child(5n+3) .links li.current a {
    background: linear-gradient(to bottom, #ffffff, #fdf0e8) !important;
    color: #b34a00 !important;
    border: 1px solid #b34a00 !important;
    box-shadow: 0 4px 0 #7a3000, 0 5px 10px rgba(179,74,0,0.15) !important;
}
.journals > ul > li:nth-child(5n+4) .links li.current a {
    background: linear-gradient(to bottom, #ffffff, #f5eeff) !important;
    color: #5b2d8e !important;
    border: 1px solid #5b2d8e !important;
    box-shadow: 0 4px 0 #3d1d6b, 0 5px 10px rgba(91,45,142,0.15) !important;
}
.journals > ul > li:nth-child(5n+5) .links li.current a {
    background: linear-gradient(to bottom, #ffffff, #e8f7f8) !important;
    color: #00838f !important;
    border: 1px solid #00838f !important;
    box-shadow: 0 4px 0 #005f6b, 0 5px 10px rgba(0,131,143,0.15) !important;
}

/* ── Press effect on hover ── */
.journals .links li a:hover { top: 3px !important; }

.journals > ul > li:nth-child(5n+1) .links li.view a:hover    { box-shadow: 0 1px 0 #0d2b03, 0 2px 5px rgba(26,84,7,0.2) !important; }
.journals > ul > li:nth-child(5n+2) .links li.view a:hover    { box-shadow: 0 1px 0 #031425, 0 2px 5px rgba(10,61,107,0.2) !important; }
.journals > ul > li:nth-child(5n+3) .links li.view a:hover    { box-shadow: 0 1px 0 #4a1d00, 0 2px 5px rgba(179,74,0,0.2) !important; }
.journals > ul > li:nth-child(5n+4) .links li.view a:hover    { box-shadow: 0 1px 0 #2a1050, 0 2px 5px rgba(91,45,142,0.2) !important; }
.journals > ul > li:nth-child(5n+5) .links li.view a:hover  { box-shadow: 0 1px 0 #003d47, 0 2px 5px rgba(0,131,143,0.2) !important; }
.journals > ul > li:nth-child(5n+1) .links li.current a:hover { box-shadow: 0 1px 0 #123a05, 0 2px 5px rgba(26,84,7,0.1) !important; }
.journals > ul > li:nth-child(5n+2) .links li.current a:hover { box-shadow: 0 1px 0 #062040, 0 2px 5px rgba(10,61,107,0.1) !important; }
.journals > ul > li:nth-child(5n+3) .links li.current a:hover { box-shadow: 0 1px 0 #7a3000, 0 2px 5px rgba(179,74,0,0.1) !important; }
.journals > ul > li:nth-child(5n+4) .links li.current a:hover { box-shadow: 0 1px 0 #3d1d6b, 0 2px 5px rgba(91,45,142,0.1) !important; }
.journals > ul > li:nth-child(5n+5) .links li.current a:hover { box-shadow: 0 1px 0 #005f6b, 0 2px 5px rgba(0,131,143,0.1) !important; }

@media (max-width: 640px) {
    .journals > ul > li .body { padding: 1.1rem; }
}


/* ============================================================
   N. LOGIN / REGISTER — REMOVE FOCUS BOX SHADOW
   ============================================================ */
#navigationUser > li > a:focus,
#navigationUser > li > button:focus,
.pkp_navigation_user a:focus,
.pkp_navigation_user button:focus {
    outline: none !important;
    box-shadow: none !important;
}


/* ============================================================
   O. SEARCH LINK — WHITE TEXT TO MATCH NAV ITEMS
   ────────────────────────────────────────────────
   .pkp_navigation_search_wrapper a sits inside the green
   nav bar but inherits a dark colour. Force white to match
   Current / Archives / About links.
   No !important — journal colour files can override if needed.
   ============================================================ */
.pkp_navigation_search_wrapper a,
.pkp_search.pkp_search_desktop {
    color: #fff;
    text-decoration: none;
}

.pkp_navigation_search_wrapper a:hover,
.pkp_search.pkp_search_desktop:hover {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
}


/* ============================================================
   P. JOURNAL CARD THUMBNAIL IMAGE
   ─────────────────────────────────
   5px gap on all sides around image.
   Image and body content vertically centered.
   ============================================================ */

/* Card with thumb — flex row, center vertically */
.journals > ul > li.has_thumb {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 0 !important;
    overflow: hidden;
}

/* Thumb column — override OJS float:left, width:25%, padding-right */
.journals > ul > li .thumb,
.pkp_page_index .journals .thumb {
    float: none !important;
    width: 77px !important;        /* 110px × 0.7 = 77px — 30% smaller */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px !important;       /* 5px gap all sides, no padding-right */
    padding-right: 5px !important;
    margin: 0;
    box-sizing: border-box;
    line-height: 0;
    align-self: center;
}

.journals > ul > li .thumb a {
    display: block;
    line-height: 0;
}

/* Image fills the thumb column exactly */
.journals > ul > li .thumb img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 0;
    padding: 0;
}

/* Body — vertically centered, restore padding */
.journals > ul > li.has_thumb .body {
    flex: 1;
    padding: 1.2rem 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Mobile — stack */
@media (max-width: 640px) {
    .journals > ul > li.has_thumb {
        flex-direction: column;
        align-items: flex-start;
    }
    .journals > ul > li .thumb,
    .pkp_page_index .journals .thumb {
        width: 100% !important;
        padding: 5px 5px 0 5px !important;
    }
    .journals > ul > li .thumb img {
        border-radius: 4px;
    }
}

/* Override OJS breakpoint rules that set float/width/padding on .thumb */
@media (min-width: 768px) {
    .pkp_page_index .journals .thumb {
        float: none !important;
        width: 77px !important;
        padding-right: 5px !important;
    }
}
@media (min-width: 992px) {
    .pkp_page_index .journals .thumb {
        float: none !important;
        width: 77px !important;
        padding-right: 5px !important;
    }
}