/* =========================================================
   HISTOGRAM: Jurnal Pendidikan Matematika
   Custom style for the default OJS "Make a Submission" block
   Theme identity: Cambria + HISTOGRAM green + gold accent
========================================================= */

.pkp_block.block_make_submission {
    margin-bottom: 18px !important;
    font-family: Cambria, Georgia, "Times New Roman", serif !important;
}

.pkp_block.block_make_submission .content {
    padding: 0 !important;
}

.pkp_block.block_make_submission .block_make_submission_link {
    display: block !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;

    padding: 14px 42px 14px 46px !important;

    background: #266338 !important;
    color: #ffffff !important;

    border: 1px solid #1f542f !important;
    border-top: 5px solid #d3a62e !important;
    border-radius: 8px !important;

    box-shadow: 0 3px 8px rgba(0,0,0,.12) !important;

    font-family: Cambria, Georgia, "Times New Roman", serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;

    text-align: left !important;
    text-decoration: none !important;
    text-transform: none !important;

    transition: background .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

.pkp_block.block_make_submission .block_make_submission_link::before {
    content: "\270E";
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    font-family: Cambria, Georgia, "Times New Roman", serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    color: #f4d264 !important;
}

.pkp_block.block_make_submission .block_make_submission_link::after {
    content: "\25B8";
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    font-family: Cambria, Georgia, "Times New Roman", serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    color: #f4d264 !important;
}

.pkp_block.block_make_submission .block_make_submission_link:hover,
.pkp_block.block_make_submission .block_make_submission_link:focus {
    background: #1f542f !important;
    color: #ffffff !important;
    text-decoration: none !important;

    box-shadow: 0 4px 10px rgba(0,0,0,.16) !important;
    transform: translateY(-1px) !important;
}

.pkp_block.block_make_submission .block_make_submission_link:focus {
    outline: 2px solid #d3a62e !important;
    outline-offset: 2px !important;
}

/* Keep the block visually compact on smaller screens */
@media (max-width: 767px) {
    .pkp_block.block_make_submission .block_make_submission_link {
        padding: 13px 40px 13px 44px !important;
        font-size: 15px !important;
    }
}


/* =========================================================
   HISTOGRAM - HEADER FINAL SAFE
   ORIGINAL BANNER ONLY — NO CROP, NO STRETCH, NO EXTRA GRAPHICS
   IMPORTANT: .pkp_head_wrapper is intentionally NOT resized.
========================================================= */

.pkp_structure_head {
    background: #266338 !important;
    border-bottom: 0 !important;
}

/* Banner container: stay inside the native OJS header grid */
.pkp_site_name {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14px 0 10px 0 !important;
    background: transparent !important;
    overflow: visible !important;
    text-align: left !important;
}

/* Link that wraps the uploaded banner */
.pkp_site_name .is_img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Preserve the complete original banner and its aspect ratio */
.pkp_site_name .is_img img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: center center !important;

    border-radius: 5px !important;
    box-shadow: 0 2px 7px rgba(0,0,0,.08) !important;
}

/* Absolutely no artificial banner decoration */
.pkp_site_name::before,
.pkp_site_name::after {
    content: none !important;
    display: none !important;
}

/* =========================================================
   TOP NAVIGATION
   Visual refinement only — no width/position/layout overrides.
========================================================= */

.pkp_navigation_primary_wrapper {
    border-top: 1px solid rgba(255,255,255,.10) !important;
}

/* Main navigation */
.pkp_navigation_primary > li > a {
    font-family: Cambria, Georgia, "Times New Roman", serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Search */
.pkp_navigation_search_wrapper a {
    font-family: Cambria, Georgia, "Times New Roman", serif !important;
    font-size: 16px !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* User menu in the upper-right corner */
.pkp_navigation_user > li > a {
    font-family: Cambria, Georgia, "Times New Roman", serif !important;
    color: #ffffff !important;
}

/* Gold hover accent only */
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_search_wrapper a:focus,
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
    color: #d3a62e !important;
}

/* Mobile: preserve the complete original image */
@media (max-width: 767px) {
    .pkp_site_name {
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px 0 !important;
    }

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

    .pkp_site_name .is_img img {
        object-fit: contain !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}

/* =========================================================
   HISTOGRAM — ABOUT THE JOURNAL / CARD GRID VERSION
   Kognitif-inspired structure, HISTOGRAM identity.
   Requires 10 separate NORMAL paragraphs in Journal Summary.
========================================================= */

.homepage_about {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 245px repeat(3, minmax(0,1fr)) !important;
    gap: 10px !important;

    margin: 0 0 30px 0 !important;
    padding: 0 22px 22px !important;

    background: #fff !important;
    border: 1px solid #d9e4dc !important;
    border-top: 5px solid #266338 !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.065) !important;

    font-family: Cambria, Georgia, "Times New Roman", serif !important;
}

.homepage_about > #homepageAbout {
    position: absolute !important;
    top: -10px !important;
}

/* Heading */
.homepage_about > h2 {
    grid-column: 1 / -1 !important;
    margin: 0 -22px 0 !important;
    padding: 14px 18px !important;

    background: #f1f7f3 !important;
    border-bottom: 1px solid #dce7df !important;

    color: transparent !important;
    font-size: 0 !important;
}
.homepage_about > h2::before {
    content: "\24D8" !important;
    margin-right: 9px !important;
    color: #d3a62e !important;
    font-size: 17px !important;
}
.homepage_about > h2::after {
    content: "ABOUT THE JOURNAL" !important;
    color: #266338 !important;
    font: 700 17px/1.2 Cambria, Georgia, "Times New Roman", serif !important;
    letter-spacing: .35px !important;
}

/* Cover card */
.homepage_about::before {
    content: "CURRENT ISSUE\A Vol. 10 No. 2 (2026)" !important;
    white-space: pre !important;

    grid-column: 1 !important;
    grid-row: 2 / span 7 !important;

    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;

    width: 225px !important;
    min-height: 430px !important;
    padding: 15px 10px !important;

    background: #fff url("https://journal.matappa.ac.id/public/journals/1/cover_issue_150_id.jpg") no-repeat center 18px / 190px auto !important;
    border: 1px solid #d7e2da !important;
    border-radius: 8px !important;
    box-shadow: 0 7px 16px rgba(0,0,0,.08) !important;

    color: #627268 !important;
    font: 700 11px/1.5 Cambria, Georgia, "Times New Roman", serif !important;
    letter-spacing: .7px !important;
    text-align: center !important;
}

/* Reset */
.homepage_about > p,
.homepage_about > p * {
    box-sizing: border-box !important;
    font-family: Cambria, Georgia, "Times New Roman", serif !important;
}

/* TOP SMALL CARDS — 1 to 6 */
.homepage_about > p:nth-of-type(-n+6) {
    position: relative !important;
    display: flex !important;
    align-items: center !important;

    min-height: 48px !important;
    margin: 0 !important;
    padding: 10px 12px 10px 38px !important;

    border: 1px solid #d5e2d8 !important;
    border-radius: 7px !important;
    background: #f7fbf8 !important;

    color: #2e4435 !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.035) !important;
}
.homepage_about > p:nth-of-type(-n+6)::before {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    color: #d3a62e !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

.homepage_about > p:nth-of-type(1) { grid-column: 2 !important; grid-row: 2 !important; }
.homepage_about > p:nth-of-type(2) { grid-column: 3 !important; grid-row: 2 !important; }
.homepage_about > p:nth-of-type(3) { grid-column: 4 !important; grid-row: 2 !important; }
.homepage_about > p:nth-of-type(4) { grid-column: 2 !important; grid-row: 3 !important; }
.homepage_about > p:nth-of-type(5) { grid-column: 3 !important; grid-row: 3 !important; }
.homepage_about > p:nth-of-type(6) { grid-column: 4 !important; grid-row: 3 !important; }

.homepage_about > p:nth-of-type(1)::before { content: "\2691" !important; }
.homepage_about > p:nth-of-type(2)::before { content: "\25A5" !important; }
.homepage_about > p:nth-of-type(3)::before { content: "\25A5" !important; }
.homepage_about > p:nth-of-type(4)::before { content: "\2605" !important; }
.homepage_about > p:nth-of-type(5)::before { content: "\25F7" !important; }
.homepage_about > p:nth-of-type(6)::before { content: "\2713" !important; }

.homepage_about > p:nth-of-type(2),
.homepage_about > p:nth-of-type(3) {
    background: #eef8fb !important;
    border-color: #c3dfeb !important;
    color: #2f6785 !important;
}
.homepage_about > p:nth-of-type(4) {
    background: #fff8e4 !important;
    border-color: #ead27b !important;
    color: #85671d !important;
}
.homepage_about > p:nth-of-type(5) {
    background: #f6f2f8 !important;
    border-color: #decfea !important;
    color: #705590 !important;
}
.homepage_about > p:nth-of-type(6) {
    background: #eef8f5 !important;
    border-color: #c6e0d8 !important;
    color: #316e65 !important;
}

/* LOWER HIGHLIGHT CARDS — 7 to 9 */
.homepage_about > p:nth-of-type(7),
.homepage_about > p:nth-of-type(8),
.homepage_about > p:nth-of-type(9) {
    position: relative !important;
    display: block !important;

    min-height: 100px !important;
    margin: 0 !important;
    padding: 42px 14px 14px !important;

    background: #fff !important;
    border: 1px solid #dce5df !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 7px rgba(0,0,0,.04) !important;

    color: #465149 !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

.homepage_about > p:nth-of-type(7) { grid-column: 2 !important; grid-row: 4 !important; }
.homepage_about > p:nth-of-type(8) { grid-column: 3 !important; grid-row: 4 !important; }
.homepage_about > p:nth-of-type(9) { grid-column: 4 !important; grid-row: 4 !important; }

.homepage_about > p:nth-of-type(7)::before,
.homepage_about > p:nth-of-type(8)::before,
.homepage_about > p:nth-of-type(9)::before {
    position: absolute !important;
    top: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;

    background: #eef6f0 !important;
    border: 1px solid #cfe0d3 !important;

    color: #266338 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.homepage_about > p:nth-of-type(7)::before { content: "\25C9" !important; } /* Access */
.homepage_about > p:nth-of-type(8)::before { content: "\25A3" !important; } /* Publisher */
.homepage_about > p:nth-of-type(9)::before { content: "\2694" !important; } /* Collaboration */

/* Focus and scope = full-width card */
.homepage_about > p:nth-of-type(10) {
    grid-column: 2 / 5 !important;
    grid-row: 5 !important;

    position: relative !important;
    display: block !important;

    margin: 0 !important;
    padding: 14px 16px 14px 46px !important;

    background: #fbfcfb !important;
    border: 1px solid #dce5df !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.03) !important;

    color: #404b43 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}
.homepage_about > p:nth-of-type(10)::before {
    content: "\2630" !important;
    position: absolute !important;
    left: 14px !important;
    top: 14px !important;
    color: #d3a62e !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

/* Bottom metric strip */
.homepage_about::after {
    content: "2 ISSUES / YEAR   •   DOUBLE-BLIND PEER REVIEW   •   OPEN ACCESS   •   SINTA 4" !important;

    grid-column: 2 / 5 !important;
    grid-row: 6 !important;

    padding: 12px 14px !important;

    background: #f7faf8 !important;
    border: 1px dashed #cfdcd3 !important;
    border-radius: 7px !important;

    color: #526159 !important;
    font: 700 10.5px/1.4 Cambria, Georgia, "Times New Roman", serif !important;
    letter-spacing: .55px !important;
    text-align: center !important;
}

/* Links */
.homepage_about a:not(#homepageAbout) {
    color: #266338 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
.homepage_about a:not(#homepageAbout):hover,
.homepage_about a:not(#homepageAbout):focus {
    color: #9d7615 !important;
    text-decoration: underline !important;
}

/* Tablet */
@media (max-width: 950px) {
    .homepage_about {
        grid-template-columns: 190px repeat(2, minmax(0,1fr)) !important;
    }

    .homepage_about::before {
        width: 175px !important;
        min-height: 350px !important;
        background-size: 150px auto !important;
    }

    .homepage_about > p:nth-of-type(1),
    .homepage_about > p:nth-of-type(3),
    .homepage_about > p:nth-of-type(5) { grid-column: 2 !important; }
    .homepage_about > p:nth-of-type(2),
    .homepage_about > p:nth-of-type(4),
    .homepage_about > p:nth-of-type(6) { grid-column: 3 !important; }

    .homepage_about > p:nth-of-type(1),
    .homepage_about > p:nth-of-type(2) { grid-row: 2 !important; }
    .homepage_about > p:nth-of-type(3),
    .homepage_about > p:nth-of-type(4) { grid-row: 3 !important; }
    .homepage_about > p:nth-of-type(5),
    .homepage_about > p:nth-of-type(6) { grid-row: 4 !important; }

    .homepage_about > p:nth-of-type(7) { grid-column: 2 !important; grid-row: 5 !important; }
    .homepage_about > p:nth-of-type(8) { grid-column: 3 !important; grid-row: 5 !important; }
    .homepage_about > p:nth-of-type(9) { grid-column: 2 / 4 !important; grid-row: 6 !important; }
    .homepage_about > p:nth-of-type(10) { grid-column: 2 / 4 !important; grid-row: 7 !important; }
    .homepage_about::after { grid-column: 2 / 4 !important; grid-row: 8 !important; }
}

/* Mobile */
@media (max-width: 640px) {
    .homepage_about {
        display: block !important;
        padding: 0 15px 16px !important;
    }

    .homepage_about > h2 {
        margin: 0 -15px 16px !important;
    }

    .homepage_about::before {
        display: flex !important;
        width: 220px !important;
        min-height: 380px !important;
        margin: 0 auto 18px !important;
        background-size: 185px auto !important;
    }

    .homepage_about > p {
        width: 100% !important;
        margin: 0 0 9px !important;
    }

    .homepage_about::after {
        display: block !important;
        margin-top: 8px !important;
        line-height: 1.65 !important;
    }
}

/* =========================================================
   CLICKABLE ABOUT CARDS
   Add hyperlinks in Journal Summary using the normal link button.
========================================================= */

.homepage_about > p {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

/* Keep linked text visually integrated with the card */
.homepage_about > p a {
    color: inherit !important;
    font-family: Cambria, Georgia, "Times New Roman", serif !important;
    font-weight: inherit !important;
    text-decoration: none !important;
}

/* If the whole line is linked, make the link fill the card content */
.homepage_about > p > a:only-child {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: inherit !important;
    color: inherit !important;
    text-decoration: none !important;
}

/* Clear visual feedback that the card is clickable */
.homepage_about > p:has(a) {
    cursor: pointer !important;
}

.homepage_about > p:has(a):hover {
    transform: translateY(-2px) !important;
    border-color: #d3a62e !important;
    box-shadow: 0 5px 12px rgba(0,0,0,.09) !important;
}

.homepage_about > p:has(a):hover a {
    color: #266338 !important;
    text-decoration: none !important;
}

/* Multiple links inside Collaboration or other cards */
.homepage_about > p a + a {
    margin-left: 6px !important;
}

.homepage_about > p a:not(:only-child) {
    border-bottom: 1px dotted currentColor !important;
}

.homepage_about > p a:not(:only-child):hover {
    color: #9b7415 !important;
    border-bottom-style: solid !important;
}

/* Keyboard focus */
.homepage_about > p a:focus {
    outline: 2px solid #d3a62e !important;
    outline-offset: 2px !important;
    border-radius: 3px !important;
}


/* =========================================================
   COVER CARD REFINEMENT
   Make the current-issue cover look more natural and less stretched
========================================================= */

.homepage_about::before {
    width: 250px !important;
    min-height: 465px !important;
    padding: 18px 14px 22px !important;

    background-color: #ffffff !important;
    background-repeat: no-repeat !important;
    background-position: center 22px !important;
    background-size: 170px auto !important;

    align-items: flex-end !important;
    justify-content: center !important;

    border-radius: 10px !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.07) !important;
}

/* Slightly softer label under the cover */
.homepage_about::before {
    color: #6d786f !important;
    letter-spacing: .6px !important;
}

/* Mobile / narrower screens */
@media (max-width: 920px) {
    .homepage_about::before {
        width: 240px !important;
        min-height: 425px !important;
        background-position: center 20px !important;
        background-size: 160px auto !important;
        margin: 0 auto 18px !important;
    }
}

/* =========================================================
   COVER CARD — COMPACT FIX
   Fixes the long white empty container behind the journal cover.
   The journal cover image itself is NOT stretched.
========================================================= */

.homepage_about::before {
    /* Stop the pseudo-element from stretching to the full height
       of all grid rows on the right. */
    align-self: start !important;
    justify-self: start !important;
    box-sizing: border-box !important;

    /* Compact card dimensions */
    width: 245px !important;
    min-height: 0 !important;
    height: 395px !important;
    padding: 14px 12px 16px !important;

    /* Cover placement */
    background-color: #ffffff !important;
    background-position: center 14px !important;
    background-size: 205px auto !important;

    /* Keep issue label close to the cover */
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;

    border-radius: 8px !important;
    box-shadow: 0 5px 12px rgba(0,0,0,.065) !important;
}

/* Do not let the card become tall again on medium screens */
@media (max-width: 950px) {
    .homepage_about::before {
        width: 190px !important;
        height: 330px !important;
        min-height: 0 !important;
        background-size: 160px auto !important;
        background-position: center 12px !important;
    }
}

/* Mobile: compact but readable */
@media (max-width: 640px) {
    .homepage_about::before {
        width: 220px !important;
        height: 365px !important;
        min-height: 0 !important;
        margin: 0 auto 18px !important;
        background-size: 185px auto !important;
        background-position: center 12px !important;
    }
}

/* =========================================================
   HISTOGRAM — CURRENT ISSUE V2
   Safer layout based on the actual OJS Current Issue structure.
   Keeps the approved About section, sidebar, SINTA, header,
   navigation, and Make a Submission block unchanged.
========================================================= */

.current_issue,
.current_issue * {
    box-sizing: border-box !important;
    font-family: Cambria, Georgia, "Times New Roman", serif !important;
}

.current_issue {
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 1px solid #d9e4dc !important;
    border-top: 5px solid #266338 !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.06) !important;
}

/* CURRENT ISSUE section header */
.current_issue > h2 {
    margin: 0 !important;
    padding: 14px 18px !important;
    background: #f1f7f3 !important;
    border-bottom: 1px solid #dce7df !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1.2 !important;
}

.current_issue > h2::before {
    content: "\25A3" !important;
    display: inline-block !important;
    margin-right: 9px !important;
    color: #d3a62e !important;
    font-size: 17px !important;
    vertical-align: middle !important;
}

.current_issue > h2::after {
    content: "CURRENT ISSUE" !important;
    color: #266338 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: .35px !important;
    vertical-align: middle !important;
}

/* Issue title */
.current_issue .current_issue_title {
    margin: 18px 20px 0 !important;
    padding: 12px 15px !important;
    background: #fbfcfb !important;
    border: 1px solid #dce5df !important;
    border-left: 4px solid #d3a62e !important;
    border-radius: 7px !important;
    color: #266338 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

/* Remove default TOC borders/margins */
.current_issue .obj_issue_toc {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* =========================================================
   ISSUE INFORMATION
========================================================= */

.current_issue .obj_issue_toc > .heading {
    display: grid !important;
    grid-template-columns: 185px minmax(0,1fr) !important;
    grid-auto-rows: auto !important;
    gap: 10px 18px !important;
    align-items: start !important;

    margin: 18px 20px 24px !important;
    padding: 16px !important;

    min-height: 0 !important;
    height: auto !important;

    background: #ffffff !important;
    border: 1px solid #dce5df !important;
    border-radius: 8px !important;
}

/* Make the issue cover clearly visible, not miniature */
.current_issue .obj_issue_toc > .heading > .cover {
    grid-column: 1 !important;
    grid-row: 1 / span 4 !important;
    align-self: start !important;

    float: none !important;
    width: 170px !important;
    max-width: 170px !important;
    min-width: 170px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 10px !important;

    background: #f8faf8 !important;
    border: 1px solid #dfe7e1 !important;
    border-radius: 7px !important;
    text-align: center !important;
}

.current_issue .obj_issue_toc > .heading > .cover img {
    display: block !important;
    float: none !important;

    width: 148px !important;
    max-width: 148px !important;
    min-width: 148px !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 auto !important;

    object-fit: contain !important;
    border-radius: 2px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.08) !important;
}

/* All metadata goes in the second column */
.current_issue .obj_issue_toc > .heading > *:not(.cover) {
    grid-column: 2 !important;
    min-width: 0 !important;
    float: none !important;
    width: auto !important;
}

/* DOI and publication date cards */
.current_issue .obj_issue_toc .pub_id,
.current_issue .obj_issue_toc .published {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 8px !important;

    margin: 0 !important;
    padding: 11px 13px !important;

    min-height: 46px !important;

    background: #f7faf8 !important;
    border: 1px solid #dce5df !important;
    border-radius: 6px !important;

    color: #455148 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.current_issue .obj_issue_toc .pub_id .type,
.current_issue .obj_issue_toc .published .label {
    color: #266338 !important;
    font-weight: 700 !important;
}

.current_issue .obj_issue_toc .pub_id a {
    color: #2e718f !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    overflow-wrap: anywhere !important;
}

.current_issue .obj_issue_toc .pub_id a:hover {
    color: #9b7415 !important;
    text-decoration: underline !important;
}

.current_issue .obj_issue_toc .description {
    margin: 0 !important;
    padding: 10px 0 0 !important;
    color: #4f5b53 !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
}

/* =========================================================
   ARTICLES HEADING
========================================================= */

.current_issue .obj_issue_toc .section {
    margin: 0 !important;
    padding: 0 20px 20px !important;
}

/* Catch OJS variations: h2, h3, or direct title */
.current_issue .obj_issue_toc .section > h2:first-child,
.current_issue .obj_issue_toc .section > h3:first-child,
.current_issue .obj_issue_toc .section > .title:first-child {
    display: block !important;
    margin: 0 0 14px !important;
    padding: 11px 14px !important;

    background: #266338 !important;
    border-left: 5px solid #d3a62e !important;
    border-radius: 6px !important;

    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: .2px !important;
}

/* =========================================================
   ARTICLE CARDS
========================================================= */

.current_issue .articles,
.current_issue .cmp_article_list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.current_issue .articles > li,
.current_issue .cmp_article_list > li {
    margin: 0 0 12px !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Stable two-column article card:
   thumbnail | article information */
.current_issue .obj_article_summary {
    display: grid !important;
    grid-template-columns: 185px minmax(0,1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 8px 18px !important;
    align-items: start !important;

    position: relative !important;

    margin: 0 !important;
    padding: 16px !important;

    min-height: 0 !important;
    height: auto !important;

    background: #ffffff !important;
    border: 1px solid #dce5df !important;
    border-left: 4px solid #d3a62e !important;
    border-radius: 8px !important;

    box-shadow: 0 2px 6px rgba(0,0,0,.035) !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

.current_issue .obj_article_summary:hover {
    transform: translateY(-2px) !important;
    border-left-color: #266338 !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.07) !important;
}

/* Article thumbnail */
.current_issue .obj_article_summary > .cover {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    align-self: start !important;

    float: none !important;
    width: 175px !important;
    max-width: 175px !important;
    height: 125px !important;

    margin: 0 !important;
    padding: 8px !important;

    background: #f8faf8 !important;
    border: 1px solid #dfe7e1 !important;
    border-radius: 6px !important;
    text-align: center !important;
    overflow: hidden !important;
}

.current_issue .obj_article_summary > .cover img {
    display: block !important;
    width: 100% !important;
    max-width: 157px !important;
    height: 107px !important;
    max-height: 107px !important;
    margin: 0 auto !important;

    object-fit: contain !important;
}

/* Article title */
.current_issue .obj_article_summary > .title,
.current_issue .obj_article_summary .title {
    grid-column: 2 !important;
    grid-row: 1 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #266338 !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    line-height: 1.42 !important;
}

.current_issue .obj_article_summary .title a {
    color: #266338 !important;
    text-decoration: none !important;
}

.current_issue .obj_article_summary .title a:hover,
.current_issue .obj_article_summary .title a:focus {
    color: #9b7415 !important;
    text-decoration: none !important;
}

/* Authors / page metadata */
.current_issue .obj_article_summary > .meta,
.current_issue .obj_article_summary .meta {
    grid-column: 2 !important;
    grid-row: 2 !important;

    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 12px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #68736b !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
}

.current_issue .obj_article_summary .authors {
    color: #68736b !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
}

.current_issue .obj_article_summary .pages {
    display: inline-block !important;

    margin: 0 !important;
    padding: 4px 8px !important;

    background: #f3f7f4 !important;
    border: 1px solid #d9e4dc !important;
    border-radius: 5px !important;

    color: #536158 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
}

/* PDF buttons: normal flow, so they never overlap page numbers */
.current_issue .obj_article_summary > .galleys_links,
.current_issue .obj_article_summary > .galleys,
.current_issue .obj_article_summary .galleys_links,
.current_issue .obj_article_summary .galleys {
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: end !important;

    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;

    margin: 2px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.current_issue .obj_article_summary .galleys_links li,
.current_issue .obj_article_summary .galleys li {
    display: inline-block !important;
    margin: 0 0 0 6px !important;
    padding: 0 !important;
    list-style: none !important;
}

.current_issue .obj_article_summary .obj_galley_link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 92px !important;
    padding: 8px 12px !important;

    background: #266338 !important;
    border: 1px solid #1f542f !important;
    border-top: 3px solid #d3a62e !important;
    border-radius: 6px !important;

    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;

    box-shadow: 0 2px 5px rgba(0,0,0,.08) !important;
}

.current_issue .obj_article_summary .obj_galley_link:hover,
.current_issue .obj_article_summary .obj_galley_link:focus {
    background: #1f542f !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {
    .current_issue .obj_issue_toc > .heading {
        grid-template-columns: 155px minmax(0,1fr) !important;
    }

    .current_issue .obj_issue_toc > .heading > .cover {
        width: 145px !important;
        min-width: 145px !important;
        max-width: 145px !important;
    }

    .current_issue .obj_issue_toc > .heading > .cover img {
        width: 123px !important;
        min-width: 123px !important;
        max-width: 123px !important;
    }

    .current_issue .obj_article_summary {
        grid-template-columns: 150px minmax(0,1fr) !important;
    }

    .current_issue .obj_article_summary > .cover {
        width: 140px !important;
        max-width: 140px !important;
    }
}

@media (max-width: 640px) {
    .current_issue .current_issue_title {
        margin: 14px 14px 0 !important;
        font-size: 15px !important;
    }

    .current_issue .obj_issue_toc > .heading {
        display: block !important;
        margin: 14px !important;
        padding: 14px !important;
    }

    .current_issue .obj_issue_toc > .heading > .cover {
        width: 170px !important;
        min-width: 170px !important;
        max-width: 170px !important;
        margin: 0 auto 14px !important;
    }

    .current_issue .obj_issue_toc > .heading > .cover img {
        width: 148px !important;
        min-width: 148px !important;
        max-width: 148px !important;
    }

    .current_issue .obj_issue_toc .pub_id,
    .current_issue .obj_issue_toc .published {
        margin-bottom: 8px !important;
    }

    .current_issue .obj_issue_toc .section {
        padding: 0 14px 14px !important;
    }

    .current_issue .obj_article_summary {
        display: block !important;
        padding: 14px !important;
    }

    .current_issue .obj_article_summary > .cover {
        width: 100% !important;
        max-width: 230px !important;
        height: auto !important;
        margin: 0 auto 13px !important;
    }

    .current_issue .obj_article_summary > .cover img {
        width: 100% !important;
        max-width: 210px !important;
        height: auto !important;
        max-height: 150px !important;
    }

    .current_issue .obj_article_summary .title,
    .current_issue .obj_article_summary .meta,
    .current_issue .obj_article_summary .galleys_links,
    .current_issue .obj_article_summary .galleys {
        margin-top: 10px !important;
    }

    .current_issue .obj_article_summary .galleys_links,
    .current_issue .obj_article_summary .galleys {
        text-align: right !important;
    }
}

/* =========================================================
   HISTOGRAM — FUTURE-PROOF ABOUT CARD
   IMPORTANT:
   - No issue-specific cover image
   - No hardcoded volume/issue number
   - Current Issue section below remains fully dynamic from OJS
========================================================= */

.homepage_about::before {
    content:
        "HISTOGRAM\A"
        "Jurnal Pendidikan Matematika\A\A"
        "MATHEMATICS EDUCATION\A\A"
        "p-ISSN 2549-6700\A"
        "e-ISSN 2549-6719" !important;

    white-space: pre-line !important;

    align-self: start !important;
    justify-self: start !important;
    box-sizing: border-box !important;

    width: 245px !important;
    min-height: 0 !important;
    height: 305px !important;

    margin: 0 !important;
    padding: 34px 20px 24px !important;

    background-color: #f7faf8 !important;
    background-image: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid #d9e4dc !important;
    border-top: 5px solid #d3a62e !important;
    border-radius: 9px !important;

    box-shadow: 0 5px 12px rgba(0,0,0,.055) !important;

    color: #266338 !important;
    font-family: Cambria, Georgia, "Times New Roman", serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
    letter-spacing: .35px !important;
    text-align: center !important;
}

/* Small neutral footer band inside the identity card feel */
.homepage_about::before {
    text-shadow: none !important;
}

/* Current Issue is always sourced from OJS itself.
   Do not inject issue-specific text or images through CSS. */
.current_issue .current_issue_title,
.current_issue .obj_issue_toc > .heading > .cover,
.current_issue .obj_issue_toc > .heading > .cover img,
.current_issue .obj_issue_toc .pub_id,
.current_issue .obj_issue_toc .published {
    /* intentionally no content overrides */
}

/* Responsive About identity card */
@media (max-width: 950px) {
    .homepage_about::before {
        width: 190px !important;
        height: 270px !important;
        padding: 26px 15px 20px !important;
        font-size: 12.5px !important;
    }
}

@media (max-width: 640px) {
    .homepage_about::before {
        width: 220px !important;
        height: 285px !important;
        margin: 0 auto 18px !important;
        padding: 28px 18px 22px !important;
        font-size: 13px !important;
    }
}

/* =========================================================
   HISTOGRAM — ARTICLE CARD ENRICHMENT HOOKS
   These rules activate automatically AFTER IT adds the matching
   HTML classes to the OJS article summary template.
========================================================= */

.current_issue .obj_article_summary .histogram-affiliation {
    grid-column: 2 !important;
    margin-top: 2px !important;
    color: #7a847d !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
}

.current_issue .obj_article_summary .histogram-metrics {
    grid-column: 2 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 6px !important;
}

.current_issue .obj_article_summary .histogram-metric {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 9px !important;
    background: #f4f8f5 !important;
    border: 1px solid #d8e4db !important;
    border-radius: 6px !important;
    color: #526158 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

.current_issue .obj_article_summary .histogram-metric strong {
    color: #266338 !important;
    font-weight: 700 !important;
}

.current_issue .obj_article_summary .histogram-doi {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    background: #eef9f2 !important;
    border: 1px solid #bfe0c9 !important;
    border-radius: 6px !important;
    color: #266338 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    overflow-wrap: anywhere !important;
}

.current_issue .obj_article_summary .histogram-doi:hover,
.current_issue .obj_article_summary .histogram-doi:focus {
    background: #e7f4eb !important;
    border-color: #d3a62e !important;
    color: #1f542f !important;
    text-decoration: none !important;
}

.current_issue .obj_article_summary .histogram-extra-row {
    grid-column: 2 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-top: 6px !important;
    padding-top: 10px !important;
    border-top: 1px solid #e3e9e5 !important;
}

@media (max-width: 640px) {
    .current_issue .obj_article_summary .histogram-affiliation,
    .current_issue .obj_article_summary .histogram-metrics,
    .current_issue .obj_article_summary .histogram-extra-row {
        width: 100% !important;
        margin-top: 8px !important;
    }
}

/* =========================================================
   ABOUT THE JOURNAL — RESTORE CURRENT ISSUE COVER
   Keep a real journal cover visible in the left card.
   Caption stays generic so volume text is not hardcoded.
========================================================= */

.homepage_about::before {
    content: "CURRENT ISSUE" !important;
    white-space: normal !important;

    align-self: start !important;
    justify-self: start !important;
    box-sizing: border-box !important;

    width: 245px !important;
    min-height: 0 !important;
    height: 395px !important;

    margin: 0 !important;
    padding: 14px 12px 16px !important;

    background-color: #ffffff !important;
    background-image: url("https://journal.matappa.ac.id/public/journals/1/cover_issue_150_id.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center 14px !important;
    background-size: 205px auto !important;

    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;

    border: 1px solid #d9e4dc !important;
    border-top: 5px solid #d3a62e !important;
    border-radius: 9px !important;

    box-shadow: 0 5px 12px rgba(0,0,0,.06) !important;

    color: #627268 !important;
    font-family: Cambria, Georgia, "Times New Roman", serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: .7px !important;
    text-align: center !important;
    text-shadow: none !important;
}

/* Medium screens */
@media (max-width: 950px) {
    .homepage_about::before {
        width: 190px !important;
        height: 330px !important;
        background-size: 160px auto !important;
        background-position: center 12px !important;
        padding: 12px 10px 14px !important;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .homepage_about::before {
        width: 220px !important;
        height: 365px !important;
        margin: 0 auto 18px !important;
        background-size: 185px auto !important;
        background-position: center 12px !important;
        padding: 12px 10px 14px !important;
    }
}