/*
===============================================================================
 JOURNAL OF SUSTAINABLE BASIC EDUCATION (JSBE)
 OJS Journal Stylesheet
 Version: 2.0 | 2026

 Visual palette: dark green dominant, white accent.
   Navy:      #062E60
   Deep Navy: #041641
   Green:     #26641F
   Leaf:      #5F9228
   Gold:      #CDA035
   Off-white: #F7F9F8

 Designed as a conservative enhancement for the standard OJS 3.x interface.
 It does not alter core layout widths or hide functional OJS elements.
===============================================================================
*/

/* ---------------------------------------------------------------------------
   1. BRAND VARIABLES
--------------------------------------------------------------------------- */

:root {
    --jsbe-navy: #062E60;
    --jsbe-deep-navy: #041641;
    --jsbe-green: #26641F;
    --jsbe-leaf: #5F9228;
    --jsbe-gold: #CDA035;
    --jsbe-off-white: #F7F9F8;
    --jsbe-light-blue: #EEF4F9;
    --jsbe-border: #D7E0E8;
    --jsbe-text: #24313F;
    --jsbe-muted: #66727F;
    --jsbe-white: #FFFFFF;
}


/* ---------------------------------------------------------------------------
   2. GLOBAL TYPOGRAPHY AND PAGE
--------------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--jsbe-white);
    color: var(--jsbe-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial,
        Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.7;
}

a {
    color: var(--jsbe-navy);
    text-decoration-color: rgba(6, 46, 96, 0.35);
    text-underline-offset: 0.15em;
}

a:hover,
a:focus {
    color: var(--jsbe-green);
    text-decoration-color: var(--jsbe-green);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--jsbe-deep-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    line-height: 1.25;
}

p {
    line-height: 1.75;
}

hr {
    border: 0;
    border-top: 1px solid var(--jsbe-border);
}


/* ---------------------------------------------------------------------------
   3. SITE HEADER
--------------------------------------------------------------------------- */

.pkp_structure_head {
    background: var(--jsbe-white);
    border-bottom: 4px solid var(--jsbe-gold);
    box-shadow: 0 2px 10px rgba(4, 22, 65, 0.08);
}

.pkp_head_wrapper {
    background: var(--jsbe-white);
}

/* Journal name when displayed as text */
.pkp_site_name .is_text,
.pkp_site_name a {
    color: var(--jsbe-deep-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.pkp_site_name a:hover,
.pkp_site_name a:focus {
    color: var(--jsbe-green);
}

/* Keep uploaded logo/header images responsive */
.pkp_site_name img {
    max-width: 100%;
    height: auto;
}


/* ---------------------------------------------------------------------------
   4. PRIMARY NAVIGATION
--------------------------------------------------------------------------- */

.pkp_navigation_primary_wrapper {
    background: var(--jsbe-navy);
}

.pkp_navigation_primary {
    background: var(--jsbe-navy);
}

.pkp_navigation_primary > li > a {
    color: var(--jsbe-white);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: #FFF3C6;
    border-color: var(--jsbe-gold);
}

.pkp_navigation_primary > li > ul {
    background: var(--jsbe-white);
    border-top: 3px solid var(--jsbe-gold);
    box-shadow: 0 6px 18px rgba(4, 22, 65, 0.16);
}

.pkp_navigation_primary > li > ul a {
    color: var(--jsbe-navy);
}

.pkp_navigation_primary > li > ul a:hover,
.pkp_navigation_primary > li > ul a:focus {
    background: var(--jsbe-light-blue);
    color: var(--jsbe-green);
}

/* User navigation */
.pkp_navigation_user > li > a {
    color: var(--jsbe-navy);
}

.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
    color: var(--jsbe-green);
}


/* ---------------------------------------------------------------------------
   5. MAIN CONTENT AREA
--------------------------------------------------------------------------- */

.pkp_structure_content {
    background: var(--jsbe-white);
}

.pkp_structure_main {
    background: var(--jsbe-white);
}

.pkp_structure_main > h1,
.page_index_journal .homepage_about h2,
.page_about h1,
.page_submissions h1,
.page_issue h1,
.page_announcements h1,
.page_search h1 {
    position: relative;
    padding-bottom: 0.45rem;
}

.pkp_structure_main > h1::after,
.page_index_journal .homepage_about h2::after,
.page_about h1::after,
.page_submissions h1::after,
.page_issue h1::after,
.page_announcements h1::after,
.page_search h1::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin-top: 0.45rem;
    background: linear-gradient(
        90deg,
        var(--jsbe-green) 0%,
        var(--jsbe-green) 62%,
        var(--jsbe-gold) 62%,
        var(--jsbe-gold) 100%
    );
}


/* ---------------------------------------------------------------------------
   6. HOMEPAGE
--------------------------------------------------------------------------- */

.page_index_journal .homepage_image {
    margin-bottom: 1.75rem;
}

.page_index_journal .homepage_image img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 18px rgba(4, 22, 65, 0.10);
}

.page_index_journal .homepage_about {
    margin-top: 1.25rem;
}

.page_index_journal .homepage_about p {
    color: var(--jsbe-text);
}

.page_index_journal .additional_content {
    margin-top: 2rem;
}


/* ---------------------------------------------------------------------------
   7. ANNOUNCEMENTS
--------------------------------------------------------------------------- */

.obj_announcement_summary {
    border-left: 4px solid var(--jsbe-green);
    padding-left: 1rem;
    margin-bottom: 1.4rem;
}

.obj_announcement_summary h2,
.obj_announcement_summary h3,
.obj_announcement_summary .title {
    color: var(--jsbe-navy);
}

.obj_announcement_summary .date {
    color: var(--jsbe-muted);
    font-size: 0.92rem;
}


/* ---------------------------------------------------------------------------
   8. CURRENT ISSUE / ARCHIVES / ARTICLE LISTS
--------------------------------------------------------------------------- */

.obj_issue_toc {
    border-top: 4px solid var(--jsbe-navy);
    background: var(--jsbe-white);
}

.obj_issue_toc .heading {
    padding-top: 1rem;
    border-bottom: 1px solid var(--jsbe-border);
}

.obj_issue_toc .heading h2,
.obj_issue_toc .heading .title {
    color: var(--jsbe-deep-navy);
}

.obj_issue_toc .sections:not(:first-child) {
    margin-top: 1.75rem;
}

.obj_issue_toc .section h2,
.obj_issue_toc .section h3,
.obj_issue_toc .section .title {
    color: var(--jsbe-green);
    font-family: Georgia, "Times New Roman", serif;
}

.obj_article_summary {
    border-bottom: 1px solid var(--jsbe-border);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.obj_article_summary .title a {
    color: var(--jsbe-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
}

.obj_article_summary .title a:hover,
.obj_article_summary .title a:focus {
    color: var(--jsbe-green);
}

.obj_article_summary .authors {
    color: var(--jsbe-muted);
}


/* ---------------------------------------------------------------------------
   9. ARTICLE PAGE
--------------------------------------------------------------------------- */

.obj_article_details .page_title,
.obj_article_details .title {
    color: var(--jsbe-deep-navy);
    font-family: Georgia, "Times New Roman", serif;
}

.obj_article_details .authors {
    color: var(--jsbe-text);
}

.obj_article_details .abstract {
    border-left: 4px solid var(--jsbe-green);
    padding-left: 1.1rem;
}

.obj_article_details .item.keywords,
.obj_article_details .item.subject {
    background: var(--jsbe-off-white);
    border-radius: 4px;
    padding: 0.85rem 1rem;
}


/* ---------------------------------------------------------------------------
   10. BUTTONS, FORMS, AND ACTION LINKS
--------------------------------------------------------------------------- */

.cmp_button,
.cmp_form .buttons button,
.pkp_button,
button,
input[type="submit"] {
    background: var(--jsbe-navy);
    border: 1px solid var(--jsbe-navy);
    border-radius: 4px;
    color: var(--jsbe-white);
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease,
        transform 0.2s ease;
}

.cmp_button:hover,
.cmp_button:focus,
.cmp_form .buttons button:hover,
.cmp_form .buttons button:focus,
.pkp_button:hover,
.pkp_button:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
    background: var(--jsbe-green);
    border-color: var(--jsbe-green);
    color: var(--jsbe-white);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select {
    border: 1px solid #B8C5D0;
    border-radius: 4px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    border-color: var(--jsbe-green);
    box-shadow: 0 0 0 3px rgba(38, 100, 31, 0.12);
    outline: none;
}


/* ---------------------------------------------------------------------------
   11. SIDEBAR / OJS BLOCKS
--------------------------------------------------------------------------- */

.pkp_structure_sidebar {
    color: var(--jsbe-text);
}

.pkp_block {
    border-top: 3px solid var(--jsbe-green);
    padding-top: 0.9rem;
    margin-bottom: 1.75rem;
}

.pkp_block .title {
    color: var(--jsbe-deep-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
}

.pkp_block a {
    color: var(--jsbe-navy);
}

.pkp_block a:hover,
.pkp_block a:focus {
    color: var(--jsbe-green);
}


/* ---------------------------------------------------------------------------
   12. BREADCRUMBS
--------------------------------------------------------------------------- */

.cmp_breadcrumbs {
    color: var(--jsbe-muted);
    font-size: 0.92rem;
}

.cmp_breadcrumbs a {
    color: var(--jsbe-navy);
}

.cmp_breadcrumbs a:hover,
.cmp_breadcrumbs a:focus {
    color: var(--jsbe-green);
}


/* ---------------------------------------------------------------------------
   13. PAGINATION
--------------------------------------------------------------------------- */

.cmp_pagination a {
    color: var(--jsbe-navy);
}

.cmp_pagination a:hover,
.cmp_pagination a:focus {
    color: var(--jsbe-green);
}

.cmp_pagination .current {
    color: var(--jsbe-white);
    background: var(--jsbe-navy);
}


/* ---------------------------------------------------------------------------
   14. TABLES
--------------------------------------------------------------------------- */

table {
    border-collapse: collapse;
    width: 100%;
}

table th {
    background: var(--jsbe-navy);
    color: var(--jsbe-white);
    font-weight: 700;
}

table th,
table td {
    border: 1px solid var(--jsbe-border);
    padding: 0.65rem 0.75rem;
}

table tbody tr:nth-child(even) {
    background: var(--jsbe-off-white);
}


/* ---------------------------------------------------------------------------
   15. QUOTATIONS / CALLOUTS
--------------------------------------------------------------------------- */

blockquote {
    margin-left: 0;
    padding: 0.8rem 1.2rem;
    border-left: 4px solid var(--jsbe-gold);
    background: #FFFDF6;
    color: var(--jsbe-text);
}


/* ---------------------------------------------------------------------------
   16. FOOTER
--------------------------------------------------------------------------- */

.pkp_structure_footer_wrapper,
.pkp_structure_footer {
    background: var(--jsbe-deep-navy);
    color: rgba(255, 255, 255, 0.90);
    border-top: 5px solid var(--jsbe-gold);
}

.pkp_structure_footer a,
.pkp_structure_footer_wrapper a {
    color: #FFFFFF;
}

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


/* ---------------------------------------------------------------------------
   17. ACCESSIBILITY
--------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--jsbe-gold);
    outline-offset: 3px;
}

/* Preserve visible OJS skip links for keyboard users */
.cmp_skip_to_content a:focus {
    background: var(--jsbe-deep-navy);
    color: var(--jsbe-white);
}


/* ---------------------------------------------------------------------------
   18. MOBILE / RESPONSIVE ADJUSTMENTS
--------------------------------------------------------------------------- */

@media (max-width: 767px) {
    body {
        font-size: 15px;
    }

    .pkp_site_name {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .pkp_navigation_primary_wrapper,
    .pkp_navigation_primary {
        background: var(--jsbe-navy);
    }

    .page_index_journal .homepage_image img {
        border-radius: 3px;
    }

    .pkp_structure_main > h1::after,
    .page_index_journal .homepage_about h2::after,
    .page_about h1::after,
    .page_submissions h1::after,
    .page_issue h1::after,
    .page_announcements h1::after,
    .page_search h1::after {
        width: 56px;
    }
}


/* ---------------------------------------------------------------------------
   19. PRINT
--------------------------------------------------------------------------- */

@media print {
    .pkp_structure_head,
    .pkp_structure_sidebar,
    .pkp_structure_footer_wrapper,
    .pkp_navigation_primary_wrapper {
        display: none !important;
    }

    body {
        color: #000;
        background: #FFF;
        font-size: 11pt;
    }

    a {
        color: #000;
        text-decoration: none;
    }
}

/* ===========================================================================
   JSBE VISUAL REFRESH — VERSION 2.0
   Dominant: Dark Green | Accent: White
   =========================================================================== */

:root {
    --jsbe-navy: #123D2A;
    --jsbe-deep-navy: #0B2E1F;
    --jsbe-green: #123D2A;
    --jsbe-leaf: #1F5B3E;
    --jsbe-gold: #FFFFFF;
    --jsbe-off-white: #F6F9F7;
    --jsbe-light-blue: #EAF2ED;
    --jsbe-border: #D5E1D9;
    --jsbe-text: #1E2A23;
    --jsbe-muted: #66736B;
    --jsbe-white: #FFFFFF;
}

/* Dark-green institutional header */
.pkp_structure_head,
.pkp_head_wrapper {
    background: var(--jsbe-green);
}

.pkp_structure_head {
    border-bottom: 4px solid var(--jsbe-white);
    box-shadow: 0 2px 12px rgba(11, 46, 31, 0.22);
}

.pkp_site_name .is_text,
.pkp_site_name a,
.pkp_navigation_user > li > a {
    color: var(--jsbe-white);
}

.pkp_site_name a:hover,
.pkp_site_name a:focus,
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
    color: var(--jsbe-white);
    opacity: 0.9;
}

/* Navigation */
.pkp_navigation_primary_wrapper,
.pkp_navigation_primary {
    background: var(--jsbe-deep-navy);
}

.pkp_navigation_primary > li > a {
    color: var(--jsbe-white);
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: var(--jsbe-white);
    border-color: var(--jsbe-white);
    background: rgba(255, 255, 255, 0.08);
}

.pkp_navigation_primary > li > ul {
    border-top-color: var(--jsbe-green);
}

.pkp_navigation_primary > li > ul a:hover,
.pkp_navigation_primary > li > ul a:focus {
    background: var(--jsbe-light-blue);
}

/* Clean green section accents */
.pkp_structure_main > h1::after,
.page_index_journal .homepage_about h2::after,
.page_about h1::after,
.page_submissions h1::after,
.page_issue h1::after,
.page_announcements h1::after,
.page_search h1::after {
    background: var(--jsbe-green);
}

/* Homepage image */
.page_index_journal .homepage_image img {
    box-shadow: 0 4px 18px rgba(11, 46, 31, 0.14);
}

/* Announcement, issue, article and sidebar accents */
.obj_announcement_summary,
.obj_article_details .abstract {
    border-left-color: var(--jsbe-green);
}

.obj_issue_toc {
    border-top-color: var(--jsbe-green);
}

.pkp_block {
    border-top-color: var(--jsbe-green);
}

.obj_article_details .item.keywords,
.obj_article_details .item.subject,
blockquote,
table tbody tr:nth-child(even) {
    background: var(--jsbe-off-white);
}

blockquote {
    border-left-color: var(--jsbe-green);
}

/* Buttons */
.cmp_button,
.cmp_form .buttons button,
.pkp_button,
button,
input[type="submit"] {
    background: var(--jsbe-green);
    border-color: var(--jsbe-green);
    color: var(--jsbe-white);
}

.cmp_button:hover,
.cmp_button:focus,
.cmp_form .buttons button:hover,
.cmp_form .buttons button:focus,
.pkp_button:hover,
.pkp_button:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
    background: var(--jsbe-deep-navy);
    border-color: var(--jsbe-deep-navy);
    color: var(--jsbe-white);
}

/* Forms */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    border-color: var(--jsbe-green);
    box-shadow: 0 0 0 3px rgba(18, 61, 42, 0.12);
}

/* Tables */
table th {
    background: var(--jsbe-green);
    color: var(--jsbe-white);
}

/* Footer */
.pkp_structure_footer_wrapper,
.pkp_structure_footer {
    background: var(--jsbe-deep-navy);
    color: var(--jsbe-white);
    border-top: 4px solid var(--jsbe-white);
}

.pkp_structure_footer a,
.pkp_structure_footer_wrapper a,
.pkp_structure_footer a:hover,
.pkp_structure_footer a:focus,
.pkp_structure_footer_wrapper a:hover,
.pkp_structure_footer_wrapper a:focus {
    color: var(--jsbe-white);
}

/* Accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--jsbe-green);
    outline-offset: 3px;
}