/* ==========================================================
   HISTORIA
   Jurnal Pendidik dan Peneliti Sejarah

   OJS 3.5 PKP
   MODERN MAROON + YELLOW THEME

   LAYOUT:
   72% MAIN CONTENT
   28% SIDEBAR
========================================================== */
/* ==========================================================
   01. COLOR SYSTEM
========================================================== */

:root {

    --maroon-dark: #3A0D0D;
    --maroon: #5A1010;
    --maroon-medium: #711515;
    --maroon-light: #8A2424;

    --yellow: #F2C94C;
    --yellow-dark: #D6A928;
    --yellow-light: #F8E6A0;

    --cream: #FAF8F2;
    --white: #FFFFFF;

    --text: #333333;
    --text-light: #6B6B6B;

    --border: #E5E1D8;

    --shadow:
        0 4px 18px rgba(58,13,13,.08);

    --shadow-hover:
        0 12px 30px rgba(58,13,13,.15);
}

/* ==========================================================
   02. GLOBAL
========================================================== */

html {
    scroll-behavior: smooth;
}
body {

    font-family:
        "Inter",
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
    background: var(--cream);
    color: var(--text);
    font-size: 15px;
    line-height: 1.75;
}

a {
    color: var(--maroon);
    text-decoration: none;
    transition:
        color .25s ease,
        background .25s ease,
        transform .25s ease;
}

a:hover {
    color: var(--maroon-light);
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--maroon-dark);
    font-weight: 700;
    line-height: 1.4;
}

/* ==========================================================
   03. TOP HEADER / JOURNAL BANNER
========================================================== */
.pkp_site_name_wrapper {

    background:

        linear-gradient(
            135deg,
            var(--maroon-dark) 0%,
            var(--maroon) 55%,
            #741919 100%
        );
    border-bottom:
        5px solid var(--yellow);
    padding: 0 !important;
    margin: 0;
}

/* Container banner */

.pkp_site_name {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

/* Banner / journal logo */

.pkp_site_name img {
    display: block;
    width: 100% !important;
    max-width: 1500px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto;
    object-fit: contain;
}

/* Jika nama jurnal berupa teks */

.pkp_site_name a {
    color: #FFFFFF !important;
    font-weight: 700;
    letter-spacing: .5px;
}

/* ==========================================================
   04. NAVIGATION
========================================================== */
.pkp_navigation_primary_wrapper {
    background: var(--white);
    border-bottom:
        1px solid var(--border);
    box-shadow:
        0 3px 12px rgba(0,0,0,.06);
    position: sticky;
    top: 0;
    z-index: 9999;
}

.pkp_navigation_primary {
    max-width: 1500px;
    margin: 0 auto;
}

.pkp_navigation_primary > li > a {
    color: var(--maroon-dark);
    font-size: 14px;
    font-weight: 600;
    padding:
        16px 17px;
    border-bottom:
        3px solid transparent;
}

.pkp_navigation_primary > li > a:hover {
    color: var(--maroon);
    background:
        rgba(242,201,76,.10);
    border-bottom-color:
        var(--yellow);
}

/* Active menu */

.pkp_navigation_primary > li.current > a {
    color: var(--maroon);
    border-bottom-color:
        var(--yellow);
}

/* ==========================================================
   05. SEARCH
========================================================== */
.pkp_search {

    margin-left: 10px;
}

.pkp_search input[type="text"] {
    border:
        1px solid #D8D4CA;
    border-radius: 30px;
    padding:
        10px 18px;
    background:
        #FFFFFF;
}

.pkp_search button {

    background:
        var(--maroon);
    color:
        #FFFFFF;
    border:
        none;
    border-radius:
        30px;
    padding:
        10px 18px;
    font-weight:
        600;
}

.pkp_search button:hover {
    background:
        var(--maroon-light);
}

/* ==========================================================
   06. MAIN WEBSITE CONTAINER
========================================================== */
.pkp_structure_main {
    max-width:
        1500px;
    margin:
        0 auto;
    padding:
        35px 30px;
}

/* ==========================================================
   07. HOMEPAGE — TWO COLUMN
========================================================== */
.page_index_journal .pkp_structure_main {
    display:
        grid;
    grid-template-columns:
        minmax(0, 72%)
        minmax(280px, 28%);
    gap:
        35px;
    align-items:
        start;
}

/* ==========================================================
   08. MAIN CONTENT
========================================================== */
.page_index_journal .additional_content,
.page_index_journal .cmp_announcements,
.page_index_journal .current_issue {

    background:
        var(--white);
    border-radius:
        12px;
    padding:
        28px;
    margin-bottom:
        25px;
    border:
        1px solid var(--border);
    border-top:
        4px solid var(--yellow);
    box-shadow:
        var(--shadow);
}

/* Section headings */

.page_index_journal
.additional_content h2,

.page_index_journal
.cmp_announcements h2,

.page_index_journal
.current_issue h2 {
    color:
        var(--maroon);
    font-size:
        1.35rem;
    font-weight:
        700;
    padding-bottom:
        12px;
    margin-bottom:
        20px;
    border-bottom:
        2px solid var(--yellow);
}

/* ==========================================================
   09. ADDITIONAL CONTENT
========================================================== */
.page_index_journal
.additional_content {

    border-top:
        4px solid var(--maroon);
}

/* ==========================================================
   10. ANNOUNCEMENTS
========================================================== */
.page_index_journal
.cmp_announcements article {

    background:
        #FCFAF5;
    border-left:
        4px solid var(--yellow);
    border-radius:
        8px;
    padding:
        18px;
    margin-bottom:
        15px;
}

.page_index_journal
.cmp_announcements article:hover {
    background:
        #FFF9E7;
}

.cmp_announcements
.title a {
    color:
        var(--maroon);
    font-weight:
        700;
}

/* ==========================================================
   11. CURRENT ISSUE — HERO STYLE
========================================================== */

.page_index_journal
.current_issue {
    background:
        linear-gradient(
            135deg,
            #FFFFFF,
            #FCF8EA
        );
    border-top:
        5px solid var(--maroon);
}

/* Cover */

.current_issue .cover {
    text-align:
        center;
}

.current_issue .cover img {
    max-width:
        280px;
    width:
        100%;
    border-radius:
        8px;
    box-shadow:
        0 12px 30px rgba(0,0,0,.18);
}

.current_issue .cover img:hover {
    transform:
        translateY(-5px);
    box-shadow:
        0 18px 35px rgba(0,0,0,.22);
}

/* Issue title */

.current_issue
.title {
    color:
        var(--maroon-dark);
    font-weight:
        700;
}

/* ==========================================================
   12. ARTICLE CARDS
========================================================== */
.obj_article_summary {
    background:
        var(--white);
    border:
        1px solid var(--border);
    border-left:
        4px solid var(--maroon);
    border-radius:
        10px;
    padding:
        22px;
    margin-bottom:
        18px;
    box-shadow:
        0 3px 12px rgba(0,0,0,.05);
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.obj_article_summary:hover {
    transform:
        translateY(-3px);
    box-shadow:
        var(--shadow-hover);
}

.obj_article_summary
.title a {
    color:
        var(--maroon-dark);
    font-size:
        1.08rem;
    font-weight:
        700;
    line-height:
        1.5;
}

.obj_article_summary
.title a:hover {
    color:
        var(--maroon-light);
}

/* ==========================================================
   13. PDF / GALLEY BUTTON
========================================================== */
.obj_galley_link {
    display:
        inline-block;
    background:
        var(--maroon) !important;
    color:
        #FFFFFF !important;
    border:
        none;
    border-radius:
        6px;
    padding:
        9px 16px;
    font-size:
        13px;
    font-weight:
        600;
    transition:
        all .25s ease;
}

.obj_galley_link:hover {
    background:
        var(--maroon-light) !important;
    transform:
        translateY(-2px);
}

/* ==========================================================
   14. SIDEBAR
========================================================== */
.pkp_sidebar {
    align-self:
        start;
    position:
        sticky;
    top:
        90px;
}

/* Sidebar blocks */

.pkp_block {
    background:
        var(--white);
    border:
        1px solid var(--border);
    border-radius:
        10px;
    padding:
        20px;
    margin-bottom:
        20px;
    box-shadow:
        var(--shadow);
}

/* Sidebar heading */

.pkp_block
.title {
    color:
        var(--maroon);
    font-size:
        1rem;
    font-weight:
        700;
    padding-bottom:
        10px;
    margin-bottom:
        15px;
    border-bottom:
        2px solid var(--yellow);
}


/* Sidebar links */

.pkp_block a {
    color:
        var(--maroon);
    font-weight:
        500;
}

.pkp_block a:hover {
    color:
        var(--maroon-light);
}

/* ==========================================================
   15. INDEXING / TOOLS BLOCK
========================================================== */
.pkp_block img {
    max-width:
        100%;
    height:
        auto;
    margin:
        8px auto;
    display:
        block;
}

/* Logos indexing */

.pkp_block
img[src*="scopus"],
.pkp_block
img[src*="sinta"],
.pkp_block
img[src*="crossref"],
.pkp_block
img[src*="dimensions"] {
    max-width:
        150px;
    object-fit:
        contain;
}

/* ==========================================================
   16. JOURNAL METRICS
========================================================== */
.journal-metrics {
    display:
        grid;
    grid-template-columns:
        repeat(2, 1fr);
    gap:
        12px;
    margin:
        10px 0;
}

.journal-metric {
    background:
        var(--cream);
    border:
        1px solid var(--border);
    border-radius:
        8px;
    text-align:
        center;
    padding:
        15px;
}

.journal-metric strong {
    display:
        block;
    font-size:
        1.5rem;
    color:
        var(--maroon);
    font-weight:
        700;
}

.journal-metric span {
    display:
        block;
    font-size:
        12px;
    color:
        var(--text-light);
}

/* ==========================================================
   17. SUBMISSION BUTTON
========================================================== */
.block_make_submission
a,
a.block_make_submission_link {
    display:
        block;
    width:
        100%;
    box-sizing:
        border-box;
    text-align:
        center;
    background:
        var(--maroon);
    color:
        #FFFFFF !important;
    padding:
        13px 18px;
    border-radius:
        7px;
    font-weight:
        700;
    border:
        2px solid var(--maroon);
}

.block_make_submission
a:hover,
a.block_make_submission_link:hover {
    background:
        var(--yellow);
    color:
        var(--maroon-dark) !important;
    border-color:
        var(--yellow);
}

/* ==========================================================
   18. BREADCRUMBS
========================================================== */
.cmp_breadcrumbs {
    background:
        var(--white);
    border:
        1px solid var(--border);
    border-left:
        4px solid var(--yellow);
    border-radius:
        7px;
    padding:
        12px 18px;
    margin-bottom:
        25px;
    box-shadow:
        0 2px 8px rgba(0,0,0,.04);
}

/* ==========================================================
   19. ARTICLE DETAIL PAGE
========================================================== */
.page_article
.main_entry {
    background:
        var(--white);
    border:
        1px solid var(--border);
    border-radius:
        12px;
    padding:
        35px;
    box-shadow:
        var(--shadow);
}

.page_article
.title {
    color:
        var(--maroon-dark);
    font-weight:
        700;
    line-height:
        1.35;
}

.page_article
.authors {
    color:
        var(--text-light);
    border-bottom:
        1px solid var(--border);
    padding-bottom:
        15px;
}

/* ==========================================================
   20. TABLE
========================================================== */
table {
    width:
        100%;
    border-collapse:
        collapse;
    background:
        #FFFFFF;
}

table th {
    background:
        var(--maroon);
    color:
        #FFFFFF;
    padding:
        12px;
    text-align:
        left;
}

table td {
    padding:
        10px 12px;
    border:
        1px solid var(--border);
}

table tr:nth-child(even) {
    background:
        #FCFAF5;
}

/* ==========================================================
   21. FORM ELEMENTS
========================================================== */
input,
select,
textarea {
    border:
        1px solid #D7D3C9;
    border-radius:
        6px;
    padding:
        10px 12px;
}

input:focus,
select:focus,
textarea:focus {
    border-color:
        var(--yellow);
    outline:
        none;
    box-shadow:
        0 0 0 3px
        rgba(242,201,76,.18);
}

/* ==========================================================
   22. BUTTONS
========================================================== */
button,
.button,
[type="submit"] {
    background:
        var(--maroon);
    color:
        #FFFFFF;
    border:
        none;
    border-radius:
        6px;
    padding:
        10px 18px;
    font-weight:
        600;
}

button:hover,
.button:hover,
[type="submit"]:hover {
    background:
        var(--maroon-light);
}

/* ==========================================================
   23. FOOTER
========================================================== */
.pkp_structure_footer_wrapper {
    margin-top:
        50px;
    background:
        linear-gradient(
            135deg,
            var(--maroon-dark),
            var(--maroon)
        );
    color:
        #FFFFFF;
    border-top:
        5px solid var(--yellow);
}

.pkp_structure_footer {
    max-width:
        1500px;
    margin:
        0 auto;
    padding:
        45px 30px;
    color:
        #FFFFFF;
}

.pkp_structure_footer h2,
.pkp_structure_footer h3 {
    color:
        var(--yellow);
}

.pkp_structure_footer a {
    color:
        var(--yellow-light);
}

.pkp_structure_footer a:hover {
    color:
        #FFFFFF;
}

/* ==========================================================
   24. COPYRIGHT
========================================================== */
.pkp_brand_footer {
    border-top:
        1px solid
        rgba(255,255,255,.12);
    padding-top:
        20px;

    margin-top:
        25px;
}

/* ==========================================================
   25. SCROLLBAR
========================================================== */
::-webkit-scrollbar {
    width:
        9px;
}

::-webkit-scrollbar-track {
    background:
        #EEE9DE;
}

::-webkit-scrollbar-thumb {
    background:
        var(--maroon);
    border-radius:
        20px;
}

::-webkit-scrollbar-thumb:hover {
    background:
        var(--yellow-dark);
}

/* ==========================================================
   26. SELECTION
========================================================== */
::selection {
    background:
        var(--yellow);
    color:
        var(--maroon-dark);
}

/* ==========================================================
   27. RESPONSIVE TABLET
========================================================== */
@media (max-width: 1100px) {
    .page_index_journal
    .pkp_structure_main {
        grid-template-columns:
            minmax(0, 68%)
            minmax(250px, 32%);
        gap:
            25px;
    }
}

/* ==========================================================
   28. RESPONSIVE MOBILE
========================================================== */
@media (max-width: 900px) {
    .page_index_journal
    .pkp_structure_main {
        display:
            block;
        padding:
            20px 15px;
    }
    .pkp_sidebar {
        position:
            relative;
        top:
            auto;
        margin-top:
            30px;
    }
    .pkp_site_name img {
        width:
            100% !important;
        max-width:
            100% !important;
        height:
            auto !important;
    }
    .current_issue
    .cover img {
        max-width:
            240px;
    }
}

/* ==========================================================
   29. SMALL MOBILE
========================================================== */
@media (max-width: 600px) {
    body {
        font-size:
            14px;
    }

    .pkp_structure_main {
        padding:
            15px 12px;
    }
    .page_index_journal
    .additional_content,

    .page_index_journal
    .cmp_announcements,

    .page_index_journal
    .current_issue {
        padding:
            20px;
    }
    .pkp_site_name img {
        width:
            100% !important;
    }
    .journal-metrics {
        grid-template-columns:
            1fr 1fr;
    }
    .obj_article_summary {
        padding:
            18px;
    }
}

/* ==========================================================
   30. ACCESSIBILITY
========================================================== */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline:
        3px solid
        rgba(242,201,76,.45);
    outline-offset:
        2px;
}