/* =========================================================
   JOURNAL OF EDUCATION AND PEDAGOGY (JEP)
   PREMIUM CUSTOM CSS
   OJS Manuscript Theme / Default Child Theme
   ========================================================= */


/* =========================================================
   1. GENERAL JEP / OJS CUSTOMIZATION
   ========================================================= */

.journals ul .body .description a {
    display: inline;
}


/* Header */
#headerNavigationContainer {
    max-height: 200% !important;
}


/* Site name / journal logo */
.pkp_site_name {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.pkp_site_name > a {
    padding-top: 0;
    padding-bottom: 0;
}

.pkp_site_name .is_img img {
    max-height: 200px !important;
}

.pkp_site_name_wrapper {
    padding-left: 0;
    padding-right: 0;
}

.pkp_site_name_wrapper a.is_img img {
    max-height: none;
}


/* User navigation */
.pkp_navigation_user_wrapper {
    top: 0;
    right: 0;
    padding-right: 30px;
}


/* Main page structure */
.pkp_structure_page {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    padding-bottom: 20px !important;
}


/* =========================================================
   2. GENERAL TYPOGRAPHY
   ========================================================= */

body {
    font-family: Tahoma, Geneva, sans-serif;
}


/* Article abstract */
.obj_article_details .abstract {
    text-align: justify;
}


/* =========================================================
   3. FOOTER
   ========================================================= */

.pkp_footer_content {
    float: left;
    width: 50%;
    padding-top: 10px;
    padding-bottom: 10px;
}

.pkp_brand_footer {
    float: right;
    width: 30%;
    padding-top: 50px;
    padding-bottom: 10px;
}

.pkp_structure_footer_wrapper {
    background: #e8ebef;
    border-bottom: 2px double #201e1f;
}


/* =========================================================
   4. JEP PREMIUM SIDEBAR
   ========================================================= */

.jep-sidebar {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    font-family: Tahoma, Geneva, sans-serif;
    color: #334155;
    line-height: 1.4;
    box-sizing: border-box;
}


/* =========================================================
   5. SIDEBAR CARD
   ========================================================= */

.jep-sidebar-card {
    width: 100%;
    margin-bottom: 15px;
    background: #ffffff;
    border: 1px solid #dce5ea;
    border-radius: 11px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 76, 92, 0.08);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
    box-sizing: border-box;
}


/* Subtle card elevation */
.jep-sidebar-card:hover {
    transform: translateY(-2px);
    border-color: #c7dce3;
    box-shadow: 0 7px 18px rgba(15, 76, 92, 0.13);
}


/* =========================================================
   6. SIDEBAR SECTION HEADER
   ========================================================= */

.jep-sidebar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 47px;
    padding: 10px 13px;
    background: #0F4C5C;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.15px;
    box-sizing: border-box;
}


/* Header icon */
.jep-sidebar-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    transition:
        transform 0.25s ease,
        background-color 0.25s ease;
}


/* Header icon animation */
.jep-sidebar-card:hover .jep-sidebar-title-icon {
    transform: rotate(-5deg) scale(1.08);
}


/* =========================================================
   7. STANDARD SIDEBAR MENU LINK
   ========================================================= */

.jep-sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 41px;
    padding: 8px 13px;
    color: #334155;
    background: #ffffff;
    text-decoration: none !important;
    font-size: 12.5px;
    border-bottom: 1px solid #edf1f3;
    box-sizing: border-box;
    transition:
        color 0.22s ease,
        background-color 0.22s ease,
        padding-left 0.22s ease,
        box-shadow 0.22s ease;
}


/* Remove border from last normal link */
.jep-sidebar-link:last-child {
    border-bottom: none;
}


/* Hover background */
.jep-sidebar-link:hover,
.jep-sidebar-link:focus {
    color: #0F4C5C !important;
    background: linear-gradient(
        90deg,
        #f0f8fa 0%,
        #ffffff 100%
    );
    padding-left: 17px;
    text-decoration: none !important;
    box-shadow: inset 3px 0 0 #0F4C5C;
}


/* Keyboard accessibility */
.jep-sidebar-link:focus-visible {
    outline: 2px solid #7bb5c4;
    outline-offset: -2px;
}


/* =========================================================
   8. MENU ICON
   ========================================================= */

.jep-sidebar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 23px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background-color 0.22s ease;
}


.jep-sidebar-link:hover .jep-sidebar-icon,
.jep-sidebar-link:focus .jep-sidebar-icon {
    transform: scale(1.12);
    box-shadow: 0 2px 6px rgba(15, 76, 92, 0.14);
}


/* =========================================================
   9. MENU TEXT
   ========================================================= */

.jep-sidebar-text {
    display: inline-block;
    flex: 1;
}


/* =========================================================
   10. FEATURED BUTTON
   ========================================================= */

.jep-sidebar-feature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 10px 12px;
    padding: 10px 8px;
    min-height: 42px;
    background: linear-gradient(
        135deg,
        #155E75 0%,
        #0F4C5C 100%
    );
    color: #ffffff !important;
    text-decoration: none !important;
    text-align: center;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.15px;
    box-shadow: 0 3px 8px rgba(15, 76, 92, 0.16);
    box-sizing: border-box;
    transition:
        transform 0.23s ease,
        box-shadow 0.23s ease,
        background 0.23s ease;
}


.jep-sidebar-feature:hover,
.jep-sidebar-feature:focus {
    background: linear-gradient(
        135deg,
        #0F4C5C 0%,
        #083b48 100%
    );
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(15, 76, 92, 0.25);
}


.jep-sidebar-feature:active {
    transform: translateY(0);
}


/* Feature icon */
.jep-sidebar-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #dceff5;
    color: #155e75;
    font-size: 13px;
    transition: transform 0.25s ease;
}


.jep-sidebar-feature:hover .jep-sidebar-feature-icon {
    transform: scale(1.1) rotate(8deg);
}


/* =========================================================
   11. SIDEBAR CONTENT AREA
   ========================================================= */

.jep-sidebar-content {
    padding: 12px;
    box-sizing: border-box;
}


/* =========================================================
   12. DOWNLOAD TEMPLATE
   ========================================================= */

.jep-template-image-link {
    display: block;
    text-align: center;
    padding: 4px;
    border-radius: 8px;
    transition:
        transform 0.25s ease,
        background-color 0.25s ease;
}


.jep-template-image-link:hover {
    background: #f3f9fa;
    transform: scale(1.025);
}


.jep-template-image {
    display: block;
    width: auto;
    max-width: 150px;
    height: auto;
    margin: 0 auto 10px auto;
}


.jep-template-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 7px;
    background: #eef6f8;
    color: #0f4c5c !important;
    text-decoration: none !important;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 700;
    transition:
        background-color 0.23s ease,
        color 0.23s ease,
        transform 0.23s ease,
        box-shadow 0.23s ease;
}


.jep-template-download:hover,
.jep-template-download:focus {
    background: #dceff5;
    color: #083b48 !important;
    text-decoration: none !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(15, 76, 92, 0.12);
}


.jep-template-download-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 21px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #d9edf2;
    color: #286779;
    transition: transform 0.23s ease;
}


.jep-template-download:hover .jep-template-download-icon {
    transform: translateY(2px);
}


/* =========================================================
   13. E-ISSN
   ========================================================= */

.jep-issn-image-link {
    display: block;
    text-align: center;
    padding: 3px;
    border-radius: 8px;
    transition:
        background-color 0.23s ease,
        transform 0.23s ease;
}


.jep-issn-image-link:hover {
    background: #f3f8fa;
    transform: scale(1.02);
}


.jep-issn-image {
    display: block;
    width: 100%;
    max-width: 210px;
    height: auto;
    margin: 0 auto;
}


.jep-issn-number {
    display: block;
    margin-top: 7px;
    color: #0f4c5c !important;
    text-decoration: none !important;
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
    transition: color 0.2s ease;
}


.jep-issn-number:hover {
    color: #155E75 !important;
    text-decoration: underline !important;
}


/* =========================================================
   14. COLLABORATION
   ========================================================= */

.jep-collaboration-link {
    display: block;
    text-align: center;
    padding: 4px;
    border-radius: 8px;
    transition:
        background-color 0.23s ease,
        transform 0.23s ease;
}


.jep-collaboration-link:hover {
    background: #f6f1f8;
    transform: scale(1.025);
}


.jep-collaboration-image {
    display: block;
    width: 100%;
    max-width: 180px;
    height: auto;
    margin: 0 auto;
}


/* =========================================================
   15. INDEXED BY
   ========================================================= */

.jep-indexed-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 9px;
    box-sizing: border-box;
}


.jep-indexed-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 62px;
    padding: 5px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    box-sizing: border-box;
    text-decoration: none !important;
    overflow: hidden;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}


.jep-indexed-item:hover,
.jep-indexed-item:focus {
    background: #f8fcfd;
    border-color: #9fc5d0;
    transform: translateY(-3px);
    box-shadow: 0 5px 12px rgba(15, 76, 92, 0.14);
    text-decoration: none !important;
}


.jep-indexed-item img {
    display: block;
    max-width: 94%;
    max-height: 45px;
    width: auto;
    height: auto;
    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}


.jep-indexed-item:hover img {
    transform: scale(1.07);
}


/* =========================================================
   16. STATISTICS
   ========================================================= */

.jep-statistics-link {
    display: block;
    padding: 4px;
    border-radius: 8px;
    transition:
        background-color 0.23s ease,
        transform 0.23s ease;
}


.jep-statistics-link:hover {
    background: #f4f9fa;
    transform: scale(1.015);
}


.jep-statistics-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}


/* =========================================================
   17. SPECIAL ICON COLORS
   ========================================================= */


/* Main menu */
.jep-icon-home {
    background: #e7f3f7;
    color: #0f4c5c;
}


/* About */
.jep-icon-about-title {
    background: #f1e6f8;
    color: #70458a;
}

.jep-icon-about {
    background: #e6f4f1;
    color: #27796b;
}

.jep-icon-scope {
    background: #fff2d9;
    color: #a86d08;
}

.jep-icon-owner {
    background: #e5eefb;
    color: #426fa8;
}

.jep-icon-editorial {
    background: #f8e8e8;
    color: #a94b4b;
}

.jep-icon-reviewer {
    background: #e9f5df;
    color: #55843d;
}

.jep-icon-history {
    background: #eee9f8;
    color: #6c5790;
}


/* Submission */
.jep-icon-submission-title {
    background: #f8e8d8;
    color: #9a6332;
}

.jep-icon-author {
    background: #e9f2fb;
    color: #4675a5;
}


/* Publication */
.jep-icon-publication-title {
    background: #f2e8d9;
    color: #806333;
}

.jep-icon-ethics {
    background: #f5ead6;
    color: #87632c;
}

.jep-icon-review {
    background: #e5f1f4;
    color: #286b7a;
}

.jep-icon-types {
    background: #eeeaf7;
    color: #66518d;
}

.jep-icon-authorship {
    background: #f7e8ee;
    color: #9b4963;
}

.jep-icon-conflict {
    background: #fff1df;
    color: #a86619;
}

.jep-icon-plagiarism {
    background: #e3f3e8;
    color: #36814d;
}

.jep-icon-ai {
    background: #e6eef8;
    color: #41698f;
    font-size: 11px;
    font-weight: 700;
}

.jep-icon-misconduct {
    background: #f6e3e3;
    color: #a74747;
}

.jep-icon-retraction {
    background: #fff0d9;
    color: #ad701c;
}

.jep-icon-postpublication {
    background: #e8f1f5;
    color: #3e7281;
}

.jep-icon-openaccess {
    background: #e2f4e9;
    color: #398052;
}

.jep-icon-copyright {
    background: #e5eef8;
    color: #416d98;
}

.jep-icon-licensing {
    background: #eee9f7;
    color: #69518d;
}

.jep-icon-archiving {
    background: #e6f0f2;
    color: #39717c;
}

.jep-icon-schedule {
    background: #fff0d8;
    color: #a16a19;
}

.jep-icon-apc {
    background: #f5e5bd;
    color: #80601d;
}


/* Information */
.jep-icon-information-title {
    background: #dceff5;
    color: #2b7182;
}

.jep-icon-contact {
    background: #e7eef8;
    color: #456f9b;
}


/* Download */
.jep-icon-download-title {
    background: #e6f2e8;
    color: #4b7d54;
}


/* E-ISSN */
.jep-icon-issn-title {
    background: #e5edf7;
    color: #416b95;
}


/* Collaboration */
.jep-icon-collaboration-title {
    background: #f2e7f6;
    color: #76538e;
}


/* Indexed */
.jep-icon-indexed-title {
    background: #f4e8c8;
    color: #927127;
}


/* Statistics */
.jep-icon-statistics-title {
    background: #e3f1f5;
    color: #3d7482;
}


/* =========================================================
   18. PREMIUM HOVER ACCENT FOR ALL MENU ITEMS
   ========================================================= */

.jep-sidebar-link::after {
    content: "›";
    position: absolute;
    right: 10px;
    opacity: 0;
    color: #0F4C5C;
    font-size: 16px;
    font-weight: 700;
    transform: translateX(-5px);
    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}


.jep-sidebar-link:hover::after,
.jep-sidebar-link:focus::after {
    opacity: 1;
    transform: translateX(0);
}


/* =========================================================
   19. MOBILE / RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .jep-sidebar {
        max-width: 100%;
    }

    .jep-sidebar-card {
        margin-bottom: 12px;
    }

    .jep-sidebar-link {
        font-size: 12.5px;
        min-height: 42px;
    }

    .jep-indexed-grid {
        gap: 6px;
    }

    .jep-indexed-item {
        height: 58px;
    }

    .jep-indexed-item img {
        max-height: 42px;
    }
}


/* =========================================================
   20. ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .jep-sidebar-card,
    .jep-sidebar-link,
    .jep-sidebar-icon,
    .jep-sidebar-title-icon,
    .jep-sidebar-feature,
    .jep-sidebar-feature-icon,
    .jep-template-image-link,
    .jep-template-download,
    .jep-template-download-icon,
    .jep-issn-image-link,
    .jep-collaboration-link,
    .jep-indexed-item,
    .jep-indexed-item img,
    .jep-statistics-link {
        transition: none !important;
    }
}