/* =========================================================
   WIDER MULTI-JOURNAL SITE INDEX
   The OJS site-index page normally sits inside a narrower
   main-content column. Open that column to use the page width.
   This affects ONLY the site index page.
   ========================================================= */
body.pkp_page_index .pkp_structure_main {
  width: 100% !important;
  max-width: none !important;
}

body.pkp_page_index .page_index_site {
  width: 94%;
  max-width: 1250px;
  margin-left: auto;
  margin-right: auto;
}

/*
 * PALAI JOURNALS — SITE INDEX STYLE SHEET
 * For the OJS multi-journal landing page:
 * https://palaijournal.stcp.ac.in/ojs/
 *
 * This stylesheet targets the OJS site-index page
 * (.page_index_site) and does NOT change the individual
 * journal stylesheet used by Palai Journal.
 */

/* =========================================================
   1. PALETTE
   ========================================================= */

:root {
    --palai-teal: #174f46;
    --palai-teal-2: #23665a;
    --palai-gold: #b58a32;
    --palai-maroon: #7b2630;
    --palai-cream: #fbf8f0;
    --palai-paper: #ffffff;
    --palai-ink: #263238;
    --palai-muted: #68747a;
    --palai-border: #ddd9cf;
    --palai-soft: #f4f7f5;
    --palai-shadow: 0 5px 22px rgba(20, 60, 52, .08);
}


/* =========================================================
   2. SITE-WIDE BASE
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--palai-ink);
    background: #ffffff;
    font-family: "Noto Sans", "Noto Sans Malayalam", "Nirmala UI",
                 "Kartika", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
}

a {
    color: var(--palai-teal-2);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--palai-maroon);
    text-decoration: underline;
}

::selection {
    background: rgba(181, 138, 50, .22);
}


/* =========================================================
   3. TOP HEADER
   ========================================================= */

/*
 * The site index currently has a very tall, bright-blue
 * header band. This gives the multi-journal portal a more
 * restrained academic identity while leaving OJS controls
 * functional.
 */

.pkp_structure_head {
    width: 100%;
    background: var(--palai-teal);
    border-bottom: 4px solid var(--palai-gold);
}

.pkp_structure_head .pkp_structure_content {
    width: 92%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Keep the institutional/user controls readable */
.pkp_navigation_user_wrapper {
    background: transparent;
}

.pkp_navigation_user {
    margin: 0;
}

.pkp_navigation_user > li > a {
    color: rgba(255,255,255,.9);
    font-size: .82rem;
}

.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
    color: #ffffff;
}


/* =========================================================
   4. SITE INDEX MAIN CONTAINER
   ========================================================= */

.page_index_site {
    width: 92%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.25rem 0 4rem;
    box-sizing: border-box;
}


/* =========================================================
   5. ABOUT / INTRODUCTION
   ========================================================= */

.page_index_site .about_site {
    max-width: 900px;
    margin: 0 auto 2.75rem;
    padding: 1.6rem 1.8rem;
    background: var(--palai-cream);
    border-left: 4px solid var(--palai-gold);
    border-radius: 0 6px 6px 0;
    box-sizing: border-box;
}

.page_index_site .about_site p:first-child {
    margin-top: 0;
}

.page_index_site .about_site p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   6. JOURNALS SECTION
   ========================================================= */

.page_index_site .journals {
    width: 100%;
}

.page_index_site .journals > h2 {
    margin: 0 0 1.5rem;
    padding-bottom: .75rem;
    color: var(--palai-teal);
    font-size: 1.9rem;
    font-weight: 650;
    line-height: 1.3;
    border-bottom: 2px solid var(--palai-gold);
}


/* Remove OJS default list styling */
.page_index_site .journals > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}


/* =========================================================
   7. JOURNAL CARDS
   ========================================================= */

.page_index_site .journals > ul > li {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 2rem;

    margin: 0 0 1.75rem;
    padding: 1.5rem;

    background: var(--palai-paper);
    border: 1px solid var(--palai-border);
    border-top: 4px solid var(--palai-teal);
    box-shadow: var(--palai-shadow);

    box-sizing: border-box;
    transition: box-shadow .2s ease, transform .2s ease;
}

.page_index_site .journals > ul > li:hover {
    box-shadow: 0 8px 28px rgba(20, 60, 52, .13);
    transform: translateY(-2px);
}


/* =========================================================
   8. JOURNAL THUMBNAIL
   ========================================================= */

.page_index_site .journals > ul > li .thumb {
    width: 180px;
    align-self: start;
}

.page_index_site .journals > ul > li .thumb img {
    display: block;
    width: 100%;
    max-width: 180px;
    height: auto;

    border: 1px solid var(--palai-border);
    box-shadow: 0 3px 12px rgba(0,0,0,.10);
    background: #ffffff;
}


/* =========================================================
   9. JOURNAL INFORMATION
   ========================================================= */

.page_index_site .journals > ul > li .body {
    min-width: 0;
}

.page_index_site .journals > ul > li .body h3 {
    margin: 0 0 .65rem;
    color: var(--palai-teal);
    font-size: 1.35rem;
    line-height: 1.35;
    font-weight: 650;
}

.page_index_site .journals > ul > li .body h3 a {
    color: var(--palai-teal);
}

.page_index_site .journals > ul > li .body h3 a:hover,
.page_index_site .journals > ul > li .body h3 a:focus {
    color: var(--palai-maroon);
    text-decoration: none;
}

.page_index_site .journals > ul > li .description {
    color: #46545a;
    font-size: .96rem;
    line-height: 1.7;
}

.page_index_site .journals > ul > li .description p:first-child {
    margin-top: 0;
}

.page_index_site .journals > ul > li .description p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   10. JOURNAL LINKS
   ========================================================= */

.page_index_site .journals > ul > li .links {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
}

.page_index_site .journals > ul > li .links li {
    margin: 0;
    padding: 0;
}

.page_index_site .journals > ul > li .links a {
    display: inline-block;
    padding: .48rem .9rem;

    color: var(--palai-teal);
    background: #ffffff;
    border: 1px solid var(--palai-teal);
    border-radius: 4px;

    font-size: .86rem;
    font-weight: 650;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.page_index_site .journals > ul > li .links a:hover,
.page_index_site .journals > ul > li .links a:focus {
    color: #ffffff;
    background: var(--palai-teal);
    border-color: var(--palai-teal);
    text-decoration: none;
}

.page_index_site .journals > ul > li .links .current a {
    background: var(--palai-gold);
    border-color: var(--palai-gold);
    color: #ffffff;
}

.page_index_site .journals > ul > li .links .current a:hover,
.page_index_site .journals > ul > li .links .current a:focus {
    background: var(--palai-maroon);
    border-color: var(--palai-maroon);
}


/* =========================================================
   11. EMPTY / SINGLE-JOURNAL STATES
   ========================================================= */

.page_index_site .journals > p,
.page_index_site .journals .empty {
    padding: 1.5rem;
    background: var(--palai-soft);
    border: 1px solid var(--palai-border);
}


/* =========================================================
   12. FOOTER
   ========================================================= */

.pkp_structure_footer_wrapper {
    width: 100%;
    background: var(--palai-teal);
    border-top: 4px solid var(--palai-gold);
}

.pkp_structure_footer {
    width: 92%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 0;
    color: rgba(255,255,255,.82);
}

.pkp_structure_footer a {
    color: #f4dfaa;
}

.pkp_structure_footer a:hover,
.pkp_structure_footer a:focus {
    color: #ffffff;
}

.pkp_brand_footer {
    opacity: .75;
}


/* =========================================================
   13. ACCESSIBILITY
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(181,138,50,.6);
    outline-offset: 2px;
}


/* =========================================================
   14. TABLET
   ========================================================= */

@media (max-width: 900px) {

    .page_index_site {
        width: 94%;
        padding-top: 1.75rem;
    }

    .page_index_site .journals > ul > li {
        grid-template-columns: 145px minmax(0, 1fr);
        gap: 1.5rem;
    }

    .page_index_site .journals > ul > li .thumb,
    .page_index_site .journals > ul > li .thumb img {
        width: 145px;
        max-width: 145px;
    }
}


/* =========================================================
   15. MOBILE
   ========================================================= */

@media (max-width: 650px) {

    body {
        font-size: 15px;
    }

    .page_index_site {
        width: 94%;
        padding: 1.25rem 0 2.5rem;
    }

    .page_index_site .about_site {
        padding: 1.2rem 1.25rem;
        margin-bottom: 1.75rem;
    }

    .page_index_site .journals > h2 {
        font-size: 1.55rem;
    }

    .page_index_site .journals > ul > li {
        display: block;
        padding: 1.2rem;
    }

    .page_index_site .journals > ul > li .thumb {
        width: 140px;
        margin-bottom: 1rem;
    }

    .page_index_site .journals > ul > li .thumb img {
        width: 140px;
        max-width: 140px;
    }

    .page_index_site .journals > ul > li .body h3 {
        font-size: 1.2rem;
    }

    .page_index_site .journals > ul > li .links a {
        width: auto;
    }

    .pkp_structure_footer {
        width: 94%;
        padding: 2rem 0;
    }
}


/* =========================================================
   16. VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 420px) {

    .page_index_site {
        width: 92%;
    }

    .page_index_site .journals > ul > li .links {
        display: block;
    }

    .page_index_site .journals > ul > li .links li {
        margin-bottom: .5rem;
    }

    .page_index_site .journals > ul > li .links a {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
}