/* ============================================================
   NIGERIAN JOURNAL OF TECHNICAL EDUCATION (NJTE)
   NATIONAL BOARD FOR TECHNICAL EDUCATION (NBTE)

   Professional OJS 3.3 Theme
   Inspired by clean modern academic journal layouts
   ============================================================ */


/* ============================================================
   1. THEME VARIABLES
   ============================================================ */

:root {

    /* NBTE Institutional Colours */
    --njte-primary: #08783E;
    --njte-primary-dark: #05582E;
    --njte-primary-deep: #034322;
    --njte-primary-light: #EAF6EF;

    /* Accent */
    --njte-gold: #D7A62A;
    --njte-gold-light: #F1C75B;

    /* General */
    --njte-white: #FFFFFF;
    --njte-background: #F5F7F6;
    --njte-light: #F8FAF9;

    --njte-text: #26352D;
    --njte-muted: #66756D;

    --njte-border: #DDE6E1;

    --njte-shadow:
        0 6px 22px rgba(4, 70, 37, .08);

    --njte-shadow-hover:
        0 12px 30px rgba(4, 70, 37, .15);

    --njte-radius: 8px;
}


/* ============================================================
   2. GLOBAL
   ============================================================ */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--njte-background);
    color: var(--njte-text);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 16px;
    line-height: 1.75;
}

* {
    box-sizing: border-box;
}

a {
    color: var(--njte-primary);
    text-decoration: none;

    transition:
        color .25s ease,
        background .25s ease,
        border .25s ease;
}

a:hover,
a:focus {
    color: var(--njte-primary-dark);
}

img {
    max-width: 100%;
    height: auto;
}


/* OJS main wrapper */

.pkp_structure_page {
    background: #FFFFFF;
}


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

.pkp_head_wrapper {

    background:
        linear-gradient(
            135deg,
            var(--njte-primary-deep) 0%,
            var(--njte-primary) 70%,
            #0A9250 100%
        );

    border-bottom:
        4px solid var(--njte-gold);
}


/* ============================================================
   4. JOURNAL LOGO + JOURNAL NAME
   ============================================================ */

.pkp_site_name_wrapper {

    background:
        linear-gradient(
            135deg,
            var(--njte-primary-deep),
            var(--njte-primary)
        );

    padding: 18px 28px;
}


.pkp_site_name {

    max-width: 1300px;
    margin: 0 auto;

    display: flex !important;

    align-items: center;

    gap: 22px;
}


.pkp_site_name > a {

    display: flex !important;

    align-items: center;

    text-decoration: none;
}


/* Journal logo */

.pkp_site_name img {

    max-height: 95px;

    width: auto;

    object-fit: contain;
}


/* Add journal name beside logo */

.pkp_site_name::after {

    content:
        "Nigerian Journal of Technical Education";

    display: block;

    color: #FFFFFF;

    font-size:
        clamp(25px, 3vw, 42px);

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: .3px;
}


/* ============================================================
   5. MAIN NAVIGATION
   ============================================================ */

.pkp_navigation_primary_wrapper {

    background: #FFFFFF;

    border-bottom:
        1px solid var(--njte-border);

    box-shadow:
        0 3px 12px rgba(0,0,0,.07);
}


.pkp_navigation_primary {

    max-width: 1300px;

    margin: 0 auto;
}


/* Main menu links */

.pkp_navigation_primary > li > a {

    color:
        var(--njte-primary-deep);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .3px;

    text-transform: uppercase;

    padding-top: 18px;

    padding-bottom: 18px;

    border-bottom:
        3px solid transparent;
}


.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {

    color:
        var(--njte-primary);

    border-bottom-color:
        var(--njte-gold);
}


/* ============================================================
   6. DROPDOWN MENU
   ============================================================ */

.pkp_navigation_primary ul {

    background: #FFFFFF;

    border: none;

    border-top:
        4px solid var(--njte-gold);

    border-radius:
        0 0 6px 6px;

    box-shadow:
        0 10px 28px rgba(0,0,0,.14);
}


.pkp_navigation_primary ul a {

    color:
        var(--njte-text);

    padding:
        11px 18px;
}


.pkp_navigation_primary ul a:hover {

    background:
        var(--njte-primary-light);

    color:
        var(--njte-primary);
}


/* ============================================================
   7. USER NAVIGATION
   REGISTER / LOGIN
   ============================================================ */

.pkp_navigation_user > li > a {

    color: #FFFFFF;

    font-weight: 600;
}


.pkp_navigation_user > li > a:hover {

    color:
        var(--njte-gold-light);
}


/* ============================================================
   8. SEARCH
   ============================================================ */

.pkp_search_desktop {

    color: #FFFFFF;
}


.pkp_search_desktop:hover {

    color:
        var(--njte-gold-light);
}


/* ============================================================
   9. MAIN CONTENT
   ============================================================ */

.pkp_structure_content {

    max-width: 1300px;

    margin:
        30px auto 50px;
}


.pkp_structure_main {

    padding: 30px;
}


/* ============================================================
   10. GENERAL PAGE HEADINGS
   ============================================================ */

.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3 {

    color:
        var(--njte-primary-dark);
}


.pkp_structure_main > h1 {

    position: relative;

    font-size: 32px;

    line-height: 1.3;

    font-weight: 700;

    margin-bottom: 30px;

    padding-bottom: 14px;
}


.pkp_structure_main > h1::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 75px;

    height: 4px;

    background:
        var(--njte-gold);

    border-radius: 10px;
}


/* ============================================================
   11. HOMEPAGE ABOUT JOURNAL
   ============================================================ */

.homepage_about,
.additional_content {

    background: #FFFFFF;

    padding: 30px;

    margin-bottom: 35px;

    border:
        1px solid var(--njte-border);

    border-radius:
        var(--njte-radius);

    box-shadow:
        var(--njte-shadow);
}


.homepage_about h2,
.additional_content h2 {

    color:
        var(--njte-primary-dark);

    font-size: 27px;

    font-weight: 700;

    border-left:
        5px solid var(--njte-gold);

    padding-left: 14px;
}


.homepage_about p,
.additional_content p {

    color:
        var(--njte-text);

    line-height: 1.9;
}


/* ============================================================
   12. ANNOUNCEMENTS
   ============================================================ */

.cmp_announcements {

    margin:
        40px 0;
}


.cmp_announcements > h2 {

    margin: 0;

    padding:
        14px 20px;

    background:
        var(--njte-primary);

    color:
        #FFFFFF !important;

    border-left:
        6px solid var(--njte-gold);

    font-size: 24px;
}


.cmp_announcements
.obj_announcement_summary {

    background: #FFFFFF;

    padding: 22px;

    border:
        1px solid var(--njte-border);

    border-top: none;

    transition: .25s;
}


.cmp_announcements
.obj_announcement_summary:hover {

    background:
        var(--njte-light);
}


.obj_announcement_summary
.title a {

    color:
        var(--njte-primary-dark);

    font-size: 18px;

    font-weight: 700;
}


.obj_announcement_summary
.title a:hover {

    color:
        var(--njte-primary);
}


.obj_announcement_summary
.date {

    color:
        var(--njte-muted);

    font-size: 13px;

    font-weight: 600;
}


/* ============================================================
   13. CURRENT ISSUE
   ============================================================ */

.current_issue {

    margin-top: 45px;
}


.current_issue > h2 {

    margin-bottom: 25px;

    padding:
        15px 22px;

    background:
        var(--njte-primary);

    color:
        #FFFFFF !important;

    border-left:
        6px solid var(--njte-gold);

    font-size: 25px;
}


.current_issue
.current_issue_title {

    color:
        var(--njte-primary-dark);

    font-size: 23px;

    line-height: 1.4;

    font-weight: 700;

    margin-bottom: 12px;
}


/* Issue cover */

.current_issue .cover {

    background: #FFFFFF;

    padding: 8px;

    border:
        1px solid var(--njte-border);

    box-shadow:
        var(--njte-shadow);
}


.current_issue .cover img {

    display: block;

    width: 100%;
}


/* ============================================================
   14. ISSUE DESCRIPTION
   ============================================================ */

.description {

    color:
        var(--njte-text);

    line-height: 1.85;
}


/* ============================================================
   15. ARTICLE SECTION HEADINGS
   ============================================================ */

.section > h2,
.section > h3 {

    background:
        var(--njte-primary-light);

    color:
        var(--njte-primary-dark) !important;

    padding:
        12px 18px;

    border-left:
        5px solid var(--njte-gold);

    border-radius:
        3px;

    font-weight: 700;
}


/* ============================================================
   16. ARTICLE LISTING CARDS
   ============================================================ */

.obj_article_summary {

    background: #FFFFFF;

    border:
        1px solid var(--njte-border);

    border-left:
        4px solid var(--njte-primary);

    border-radius: 6px;

    padding:
        22px !important;

    margin-bottom:
        18px !important;

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


.obj_article_summary:hover {

    transform:
        translateY(-3px);

    border-left-color:
        var(--njte-gold);

    box-shadow:
        var(--njte-shadow-hover);
}


/* Article title */

.obj_article_summary
.title {

    margin-bottom: 8px;
}


.obj_article_summary
.title a {

    color:
        var(--njte-primary-dark);

    font-size: 18px;

    line-height: 1.45;

    font-weight: 700;
}


.obj_article_summary
.title a:hover {

    color:
        var(--njte-primary);
}


/* Author names */

.obj_article_summary
.authors {

    color:
        var(--njte-muted);

    font-size: 14px;

    line-height: 1.6;

    margin:
        8px 0;
}


/* Pages */

.obj_article_summary
.pages {

    color:
        #78857F;

    font-size: 13px;
}


/* ============================================================
   17. PDF BUTTONS
   ============================================================ */

.obj_galley_link {

    display: inline-block;

    background:
        var(--njte-primary) !important;

    border:
        1px solid
        var(--njte-primary) !important;

    border-radius: 4px;

    color:
        #FFFFFF !important;

    padding:
        8px 17px !important;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .4px;

    text-transform: uppercase;

    transition: .25s;
}


.obj_galley_link:hover {

    background:
        var(--njte-gold) !important;

    border-color:
        var(--njte-gold) !important;

    color:
        var(--njte-primary-deep) !important;
}


/* ============================================================
   18. ARCHIVE / ISSUES PAGE
   ============================================================ */

.obj_issue_summary {

    background: #FFFFFF;

    border:
        1px solid var(--njte-border);

    border-radius: 8px;

    padding: 22px;

    margin-bottom: 22px;

    box-shadow:
        0 3px 13px rgba(0,0,0,.05);

    transition: .25s;
}


.obj_issue_summary:hover {

    transform:
        translateY(-3px);

    box-shadow:
        var(--njte-shadow-hover);
}


.obj_issue_summary
.title {

    color:
        var(--njte-primary);

    font-weight: 700;
}


.obj_issue_summary
.title a {

    color:
        var(--njte-primary-dark);
}


/* ============================================================
   19. ARTICLE DETAIL PAGE
   ============================================================ */

.obj_article_details
.page_title {

    color:
        var(--njte-primary-dark);

    font-size: 30px;

    line-height: 1.4;

    font-weight: 700;
}


.obj_article_details
.authors {

    color:
        var(--njte-muted);

    margin:
        15px 0 25px;
}


/* Abstract */

.obj_article_details
.abstract {

    background:
        #F7FAF8;

    padding: 25px;

    border-left:
        5px solid var(--njte-primary);

    border-radius: 5px;

    margin-top: 25px;
}


.obj_article_details
.abstract h2 {

    color:
        var(--njte-primary-dark);
}


/* Keywords */

.obj_article_details
.keywords {

    background:
        var(--njte-primary-light);

    padding: 15px 20px;

    border-radius: 5px;
}


/* ============================================================
   20. DOI / CITATION AREA
   ============================================================ */

.obj_article_details
.item.doi {

    background:
        var(--njte-primary-light);

    padding: 12px 16px;

    border-left:
        4px solid var(--njte-primary);
}


.obj_article_details
.item.citation {

    border-top:
        1px solid var(--njte-border);

    margin-top: 25px;

    padding-top: 20px;
}


/* ============================================================
   21. SIDEBAR
   ============================================================ */

.pkp_structure_sidebar {

    padding-top: 30px;
}


.pkp_block {

    background: #FFFFFF;

    margin-bottom: 22px;

    border:
        1px solid var(--njte-border);

    border-radius: 7px;

    overflow: hidden;

    box-shadow:
        0 3px 13px rgba(0,0,0,.05);
}


.pkp_block .title {

    display: block;

    background:
        var(--njte-primary);

    color:
        #FFFFFF !important;

    padding:
        12px 17px;

    font-size: 16px;

    font-weight: 700;

    border-bottom:
        3px solid var(--njte-gold);
}


.pkp_block .content {

    padding: 17px;
}


.pkp_block a {

    color:
        var(--njte-primary-dark);
}


.pkp_block a:hover {

    color:
        var(--njte-primary);
}


/* ============================================================
   22. INFORMATION BLOCK
   ============================================================ */

.block_information ul {

    list-style: none;

    margin: 0;

    padding: 0;
}


.block_information li {

    border-bottom:
        1px solid var(--njte-border);
}


.block_information li:last-child {

    border-bottom: none;
}


.block_information a {

    display: block;

    padding:
        9px 4px;
}


/* ============================================================
   23. FORMS
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
textarea,
select {

    border:
        1px solid #CBD7D0;

    border-radius: 4px;

    background: #FFFFFF;

    padding:
        10px 12px;

    color:
        var(--njte-text);

    transition: .25s;
}


input:focus,
textarea:focus,
select:focus {

    outline: none;

    border-color:
        var(--njte-primary);

    box-shadow:
        0 0 0 3px
        rgba(8,120,62,.13);
}


/* ============================================================
   24. BUTTONS
   ============================================================ */

.cmp_button,
button,
input[type="submit"],
input[type="button"] {

    background:
        var(--njte-primary);

    border:
        1px solid
        var(--njte-primary);

    border-radius: 4px;

    color:
        #FFFFFF;

    padding:
        10px 20px;

    font-weight: 700;

    transition: .25s;
}


.cmp_button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {

    background:
        var(--njte-primary-dark);

    border-color:
        var(--njte-primary-dark);

    color: #FFFFFF;
}


/* ============================================================
   25. BREADCRUMB
   ============================================================ */

.cmp_breadcrumbs {

    color:
        var(--njte-muted);

    font-size: 13px;
}


.cmp_breadcrumbs a {

    color:
        var(--njte-primary);
}


/* ============================================================
   26. EDITORIAL TEAM
   Existing card-nbte design
   ============================================================ */

.card-nbte {

    background: #FFFFFF;

    border:
        1px solid var(--njte-border);

    border-top:
        5px solid var(--njte-primary);

    border-radius: 8px;

    overflow: hidden;

    margin-bottom: 25px;

    box-shadow:
        var(--njte-shadow);

    transition: .3s ease;
}


.card-nbte:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--njte-shadow-hover);
}


/* Editorial image */

.card-nbte
.profile-user-img {

    width: 145px;

    height: 145px;

    object-fit: cover;

    object-position: center top;

    border-radius: 50%;

    border:
        5px solid #FFFFFF;

    box-shadow:
        0 4px 15px rgba(0,0,0,.18);

    margin-top: 20px;
}


.card-nbte
.profile-username {

    color:
        var(--njte-primary-dark);

    font-size: 20px;

    font-weight: 700;

    margin-top: 15px;
}


.card-nbte
.text-muted {

    color:
        var(--njte-primary) !important;

    font-weight: 700;

    text-transform: uppercase;

    font-size: 13px;

    letter-spacing: .5px;
}


.card-nbte hr {

    border: none;

    border-top:
        1px solid var(--njte-border);
}


/* ============================================================
   27. CUSTOM EDITORIAL BOARD
   ============================================================ */

.editorial-section {

    padding:
        50px 15px;
}


.editorial-title {

    text-align: center;

    margin-bottom: 40px;
}


.editorial-title h2 {

    color:
        var(--njte-primary-dark) !important;

    font-size: 36px;

    margin-bottom: 5px;
}


.editorial-title p {

    color:
        var(--njte-muted);
}


.editorial-grid {

    max-width: 1300px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 25px;
}


.editor-card {

    background: #FFFFFF;

    border:
        1px solid var(--njte-border);

    border-radius: 9px;

    overflow: hidden;

    box-shadow:
        var(--njte-shadow);

    transition: .3s;
}


.editor-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--njte-shadow-hover);
}


.editor-header {

    padding:
        28px 20px 20px;

    background:
        linear-gradient(
            135deg,
            var(--njte-primary-dark),
            var(--njte-primary)
        );

    text-align: center;
}


.editor-avatar {

    width: 140px;

    height: 140px;

    margin:
        0 auto 16px;
}


.editor-avatar img {

    width: 140px;

    height: 140px;

    object-fit: cover;

    object-position:
        center top;

    border-radius: 50%;

    border:
        5px solid #FFFFFF;

    box-shadow:
        0 5px 16px rgba(0,0,0,.25);
}


.editor-header h3 {

    color:
        #FFFFFF !important;

    font-size: 20px;

    line-height: 1.4;

    margin:
        8px 0;
}


.editor-role {

    color:
        var(--njte-gold-light);

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .5px;
}


.editor-body {

    padding: 20px;
}


.editor-body p {

    color:
        var(--njte-text);

    margin:
        7px 0;
}


.editor-body strong {

    color:
        var(--njte-primary-dark);
}


.badge-country {

    display: inline-block;

    background:
        var(--njte-primary-light);

    color:
        var(--njte-primary-dark);

    padding:
        5px 12px;

    border-radius: 20px;

    margin-top: 8px;

    font-size: 12px;

    font-weight: 700;
}


/* ============================================================
   28. CALL FOR PAPERS HIGHLIGHT
   ============================================================ */

.njte-call-for-papers {

    background:
        linear-gradient(
            135deg,
            var(--njte-primary-deep),
            var(--njte-primary)
        );

    color: #FFFFFF;

    padding:
        45px;

    margin:
        40px 0;

    border-radius:
        var(--njte-radius);

    border-bottom:
        5px solid var(--njte-gold);

    box-shadow:
        var(--njte-shadow-hover);
}


.njte-call-for-papers h2 {

    color:
        #FFFFFF !important;

    font-size: 30px;
}


.njte-call-for-papers p {

    color:
        #F0FFF6 !important;
}


.njte-call-for-papers a {

    display: inline-block;

    background:
        var(--njte-gold);

    color:
        var(--njte-primary-deep) !important;

    padding:
        11px 24px;

    margin-top: 15px;

    border-radius: 4px;

    font-weight: 700;
}


.njte-call-for-papers a:hover {

    background: #FFFFFF;
}


/* ============================================================
   29. TABLES
   ============================================================ */

table {

    width: 100%;

    border-collapse: collapse;

    background: #FFFFFF;
}


table th {

    background:
        var(--njte-primary);

    color: #FFFFFF;

    padding:
        12px 14px;

    text-align: left;
}


table td {

    padding:
        12px 14px;

    border:
        1px solid var(--njte-border);
}


table tr:nth-child(even) {

    background:
        #F8FAF9;
}


/* ============================================================
   30. PAGINATION
   ============================================================ */

.cmp_pagination {

    margin-top: 30px;
}


.cmp_pagination a {

    color:
        var(--njte-primary);
}


.cmp_pagination .current {

    background:
        var(--njte-primary);

    color: #FFFFFF;

    padding:
        5px 10px;

    border-radius: 4px;
}


/* ============================================================
   31. FOOTER
   ============================================================ */

.pkp_structure_footer_wrapper {

    background:
        linear-gradient(
            135deg,
            var(--njte-primary-deep),
            var(--njte-primary-dark)
        ) !important;

    border-top:
        5px solid var(--njte-gold);

    color:
        #FFFFFF !important;
}


.pkp_structure_footer {

    max-width: 1300px;

    margin: auto;

    padding:
        35px 25px;
}


/* Force all footer text visible */

.pkp_structure_footer,
.pkp_structure_footer p,
.pkp_structure_footer span,
.pkp_structure_footer div,
.pkp_structure_footer li {

    color:
        #FFFFFF !important;
}


.pkp_structure_footer a {

    color:
        var(--njte-gold-light) !important;
}


.pkp_structure_footer a:hover {

    color:
        #FFFFFF !important;
}


/* Your custom footer */

.footer,
.njte-footer {

    background:
        linear-gradient(
            135deg,
            var(--njte-primary-deep),
            var(--njte-primary)
        );

    color:
        #FFFFFF;

    border-top:
        5px solid var(--njte-gold);
}


.footer-container {

    width: 90%;

    max-width: 1300px;

    margin: auto;

    display: grid;

    grid-template-columns:
        2fr 1fr 1fr;

    gap: 40px;

    padding:
        45px 0;
}


.footer h3,
.footer h4,
.njte-footer h3,
.njte-footer h4 {

    color:
        var(--njte-gold-light) !important;
}


.footer p,
.footer span,
.footer li,
.njte-footer p,
.njte-footer span,
.njte-footer li {

    color:
        #FFFFFF !important;
}


.footer a,
.njte-footer a {

    color:
        #FFFFFF !important;
}


.footer a:hover,
.njte-footer a:hover {

    color:
        var(--njte-gold-light) !important;
}


/* Copyright */

.footer-bottom {

    background:
        #02351B !important;

    padding:
        22px;

    border-top:
        1px solid rgba(255,255,255,.18);

    text-align: center;
}


.footer-bottom,
.footer-bottom p,
.footer-bottom span,
.footer-bottom strong {

    color:
        #FFFFFF !important;
}


/* ============================================================
   32. CUSTOM FOOTER COPYRIGHT
   ============================================================ */

.footer-bottom::selection {

    background:
        var(--njte-gold);

    color:
        var(--njte-primary-deep);
}


/* ============================================================
   33. RESPONSIVE TABLET
   ============================================================ */

@media (max-width: 992px) {

    .editorial-grid {

        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }


    .footer-container {

        grid-template-columns:
            1fr 1fr;
    }


    .pkp_structure_main {

        padding: 25px;
    }
}


/* ============================================================
   34. RESPONSIVE MOBILE
   ============================================================ */

@media (max-width: 768px) {

    .pkp_site_name_wrapper {

        padding:
            15px;
    }


    .pkp_site_name {

        flex-direction:
            column;

        gap: 10px;

        text-align:
            center;
    }


    .pkp_site_name img {

        max-height:
            75px;
    }


    .pkp_site_name::after {

        font-size:
            24px;

        text-align:
            center;
    }


    .pkp_structure_main {

        padding:
            18px;
    }


    .pkp_structure_content {

        margin-top:
            15px;
    }


    .editorial-grid {

        grid-template-columns:
            1fr;
    }


    .footer-container {

        grid-template-columns:
            1fr;

        text-align:
            center;
    }


    .current_issue > h2,
    .cmp_announcements > h2 {

        font-size:
            20px;
    }


    .obj_article_summary {

        padding:
            17px !important;
    }


    .obj_article_summary
    .title a {

        font-size:
            16px;
    }


    .njte-call-for-papers {

        padding:
            30px 22px;
    }


    .njte-call-for-papers h2 {

        font-size:
            25px;
    }
}


/* ============================================================
   35. VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    body {

        font-size:
            15px;
    }


    .pkp_site_name::after {

        font-size:
            21px;
    }


    .pkp_structure_main > h1 {

        font-size:
            26px;
    }


    .editor-avatar,
    .editor-avatar img {

        width:
            120px;

        height:
            120px;
    }
}
/* ==========================================================
   NJTE ADDITIONAL HOMEPAGE CONTENT
   ========================================================== */

.njte-additional-content {
    max-width: 1300px;
    margin: 50px auto;
    padding: 0 18px;
    font-family: "Segoe UI", Arial, sans-serif;
}


/* ============================
   GENERAL FEATURE PANELS
   ============================ */

.njte-feature {
    position: relative;
    overflow: hidden;
    margin-bottom: 35px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(3, 67, 34, .12);
}

.njte-feature-inner {
    position: relative;
    z-index: 2;
    padding: 55px;
}

.njte-call {
    background:
        linear-gradient(
            120deg,
            rgba(3,67,34,.98),
            rgba(8,120,62,.94)
        );
    color: #fff;
}

.njte-call::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -160px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 70px solid rgba(255,255,255,.035);
}

.njte-feature h2 {
    margin: 12px 0 18px;
    font-size: clamp(28px,4vw,43px);
    line-height: 1.2;
}

.njte-call h2,
.njte-call p {
    color: #fff !important;
}

.njte-call p {
    max-width: 940px;
    font-size: 17px;
    line-height: 1.8;
}

.njte-badge,
.njte-small-label {
    display: inline-block;
    color: #08783E;
    background: #F1C75B;
    padding: 7px 15px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .8px;
}


/* ============================
   CALL INFORMATION
   ============================ */

.njte-call-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
    max-width: 900px;
    margin: 28px 0;
}

.njte-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 6px;
}

.njte-info-icon {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #D7A62A;
    color: #034322;
    border-radius: 50%;
    font-weight: 900;
}


/* ============================
   BUTTONS
   ============================ */

.njte-primary-btn,
.njte-secondary-btn,
.njte-gold-btn {
    display: inline-block;
    text-decoration: none !important;
    padding: 13px 25px;
    border-radius: 5px;
    font-weight: 800;
    transition: .25s ease;
}

.njte-primary-btn {
    background: #D7A62A;
    color: #034322 !important;
}

.njte-primary-btn:hover {
    background: #fff;
    color: #08783E !important;
    transform: translateY(-2px);
}


/* ============================
   WHY PUBLISH
   ============================ */

.njte-why {
    background: #fff;
    border: 1px solid #DDE6E1;
}

.njte-why h2 {
    color: #05582E !important;
}

.njte-why > .njte-feature-inner > p {
    color: #66756D;
    max-width: 950px;
    font-size: 17px;
}

.njte-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px;
    margin: 30px 0;
}

.njte-benefit {
    position: relative;
    background: #F8FAF9;
    padding: 23px;
    border: 1px solid #E2E9E5;
    border-top: 4px solid #08783E;
    border-radius: 7px;
    transition: .25s ease;
}

.njte-benefit:hover {
    transform: translateY(-5px);
    border-top-color: #D7A62A;
    box-shadow: 0 8px 22px rgba(3,67,34,.10);
}

.njte-benefit-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
    border-radius: 50%;
    background: #08783E;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
}

.njte-benefit h3 {
    color: #05582E !important;
    font-size: 18px;
    margin: 0 0 8px;
}

.njte-benefit p {
    color: #66756D;
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
}

.njte-secondary-btn {
    background: #08783E;
    color: #fff !important;
}

.njte-secondary-btn:hover {
    background: #05582E;
    color: #fff !important;
}


/* ============================
   JOURNAL INFORMATION
   ============================ */

.njte-journal-details {
    background: #F2F7F4;
    margin-bottom: 35px;
    padding: 45px;
    border-radius: 10px;
    border-left: 6px solid #08783E;
}

.njte-details-heading {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 30px;
}

.njte-details-heading h2 {
    color: #05582E !important;
    margin: 12px 0 8px;
    font-size: 31px;
}

.njte-details-heading p {
    color: #66756D;
}

.njte-details-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 18px;
}

.njte-detail-card {
    background: #fff;
    text-align: center;
    padding: 24px 15px;
    border-radius: 7px;
    border: 1px solid #DDE6E1;
    box-shadow: 0 4px 12px rgba(3,67,34,.05);
}

.njte-detail-label {
    display: block;
    margin-bottom: 7px;
    color: #6A7971;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.njte-detail-card strong {
    color: #08783E;
    font-size: 19px;
}


/* ============================
   PUBLICATION TIMELINE
   ============================ */

.njte-timeline-section {
    background: #fff;
    border: 1px solid #DDE6E1;
    border-radius: 10px;
    padding: 45px;
    margin-bottom: 35px;
}

.njte-section-heading {
    max-width: 850px;
    margin: 0 auto 35px;
    text-align: center;
}

.njte-section-heading h2 {
    color: #05582E !important;
    font-size: 32px;
    margin: 12px 0 8px;
}

.njte-section-heading p {
    color: #66756D;
}

.njte-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 20px;
}

.njte-timeline::before {
    content: "";
    position: absolute;
    top: 52px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: #DDE6E1;
    z-index: 0;
}

.njte-timeline-card {
    position: relative;
    z-index: 1;
    background: #fff;
    text-align: center;
    padding: 20px;
}

.njte-time {
    width: 70px;
    height: 70px;
    margin: 0 auto 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #08783E;
    color: #fff;
    border: 6px solid #EAF6EF;
    border-radius: 50%;
    font-size: 27px;
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(8,120,62,.18);
}

.njte-time-unit {
    color: #D19A12;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.njte-timeline-card p {
    margin: 10px 0 0;
    color: #405047;
    font-weight: 600;
    line-height: 1.5;
}

.njte-timeline-note {
    margin-top: 30px;
    padding: 15px 20px;
    background: #F7FAF8;
    border-left: 4px solid #D7A62A;
    color: #5B6961;
    font-size: 14px;
}


/* ============================
   FINAL CALL TO ACTION
   ============================ */

.njte-final-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    padding: 45px;
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(
            120deg,
            #034322,
            #08783E
        );
    border-bottom: 5px solid #D7A62A;
}

.njte-final-cta h2 {
    color: #fff !important;
    margin: 10px 0;
    font-size: 30px;
}

.njte-final-cta p {
    max-width: 750px;
    margin: 0;
    color: #EAF6EF !important;
}

.njte-light-label {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: #F1C75B;
}

.njte-gold-btn {
    flex: 0 0 auto;
    background: #D7A62A;
    color: #034322 !important;
    white-space: nowrap;
}

.njte-gold-btn:hover {
    background: #fff;
    color: #08783E !important;
    transform: translateY(-2px);
}


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

@media (max-width: 992px) {

    .njte-benefits-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .njte-details-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .njte-timeline {
        grid-template-columns: repeat(2,1fr);
    }

    .njte-timeline::before {
        display: none;
    }

    .njte-final-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}


@media (max-width: 768px) {

    .njte-additional-content {
        padding: 0 10px;
        margin-top: 30px;
    }

    .njte-feature-inner,
    .njte-journal-details,
    .njte-timeline-section,
    .njte-final-cta {
        padding: 30px 22px;
    }

    .njte-call-info,
    .njte-benefits-grid,
    .njte-details-grid,
    .njte-timeline {
        grid-template-columns: 1fr;
    }

    .njte-feature h2 {
        font-size: 28px;
    }

    .njte-timeline-card {
        border-bottom: 1px solid #E3E9E6;
    }

    .njte-gold-btn {
        white-space: normal;
    }
}
/* =========================================================
   NJTE POLICY PAGES
   Nigerian Journal of Technical Education
   digitalnjte.org
   ========================================================= */

.njte-policy-page {
    max-width: 1100px;
    margin: 45px auto;
    padding: 0 20px;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    color: #26352d;
    line-height: 1.8;
}

/* Hero */

.njte-policy-hero {
    position: relative;
    overflow: hidden;
    padding: 50px 45px;
    margin-bottom: 30px;
    background: linear-gradient(135deg, #034322, #08783E);
    color: #ffffff;
    border-radius: 12px;
    border-bottom: 5px solid #D7A62A;
    box-shadow: 0 12px 30px rgba(3, 67, 34, .14);
}

.njte-policy-hero::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border: 45px solid rgba(255,255,255,.04);
    border-radius: 50%;
    right: -80px;
    top: -100px;
}

.njte-policy-hero h1 {
    position: relative;
    z-index: 2;
    margin: 0 0 12px;
    color: #ffffff !important;
    font-size: 38px;
    line-height: 1.25;
}

.njte-policy-hero p {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0;
    color: #edf8f2 !important;
    font-size: 17px;
}

/* Main content */

.njte-policy-content {
    background: #ffffff;
    padding: 40px;
    border: 1px solid #dde6e1;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(3,67,34,.06);
}

.njte-policy-content h2 {
    margin: 35px 0 15px;
    padding: 12px 16px;
    color: #05582E !important;
    background: #eaf6ef;
    border-left: 5px solid #D7A62A;
    border-radius: 4px;
    font-size: 24px;
}

.njte-policy-content h2:first-child {
    margin-top: 0;
}

.njte-policy-content h3 {
    margin: 25px 0 10px;
    color: #08783E !important;
    font-size: 19px;
}

.njte-policy-content p {
    margin: 0 0 16px;
    color: #37483f;
}

.njte-policy-content strong {
    color: #034322;
}

.njte-policy-content ul,
.njte-policy-content ol {
    margin: 12px 0 22px 25px;
}

.njte-policy-content li {
    margin-bottom: 9px;
    padding-left: 5px;
}

/* Highlight box */

.njte-policy-highlight {
    margin: 25px 0;
    padding: 20px 22px;
    background: #f3f9f6;
    border-left: 5px solid #08783E;
    border-radius: 5px;
}

.njte-policy-highlight h3 {
    margin-top: 0;
}

/* Warning */

.njte-policy-warning {
    margin: 25px 0;
    padding: 20px 22px;
    background: #fff8e7;
    border-left: 5px solid #D7A62A;
    border-radius: 5px;
    color: #594715;
}

/* Lists with checks */

.njte-check-list {
    list-style: none;
    margin-left: 0 !important;
    padding-left: 0;
}

.njte-check-list li {
    position: relative;
    padding: 10px 15px 10px 42px;
    margin-bottom: 8px;
    background: #f8faf9;
    border: 1px solid #e1e8e4;
    border-radius: 5px;
}

.njte-check-list li::before {
    content: "✓";
    position: absolute;
    left: 14px;
    top: 9px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #08783E;
    color: #ffffff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
}

/* Process steps */

.njte-process {
    counter-reset: njte-step;
    margin: 25px 0;
}

.njte-process-step {
    position: relative;
    margin-bottom: 18px;
    padding: 18px 20px 18px 65px;
    background: #f8faf9;
    border: 1px solid #dde6e1;
    border-radius: 7px;
}

.njte-process-step::before {
    counter-increment: njte-step;
    content: counter(njte-step);
    position: absolute;
    left: 18px;
    top: 18px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #08783E;
    color: #ffffff;
    border-radius: 50%;
    font-weight: 800;
}

/* Policy cards */

.njte-policy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
    margin: 25px 0;
}

.njte-policy-card {
    padding: 22px;
    background: #f8faf9;
    border: 1px solid #dde6e1;
    border-top: 4px solid #08783E;
    border-radius: 7px;
}

.njte-policy-card h3 {
    margin-top: 0;
}

/* Contact box */

.njte-policy-contact {
    margin-top: 35px;
    padding: 28px;
    background: linear-gradient(135deg, #034322, #05582E);
    color: #ffffff;
    border-radius: 8px;
    border-bottom: 4px solid #D7A62A;
}

.njte-policy-contact h2,
.njte-policy-contact h3 {
    padding: 0;
    margin-top: 0;
    background: transparent;
    border: 0;
    color: #F1C75B !important;
}

.njte-policy-contact p,
.njte-policy-contact strong {
    color: #ffffff !important;
}

.njte-policy-contact a {
    color: #F1C75B !important;
    font-weight: 700;
}

/* Metadata */

.njte-policy-meta {
    margin-top: 25px;
    padding-top: 18px;
    border-top: 1px solid #dde6e1;
    color: #6a7971;
    font-size: 13px;
    font-style: italic;
}

/* Responsive */

@media (max-width: 768px) {

    .njte-policy-page {
        margin: 25px auto;
        padding: 0 10px;
    }

    .njte-policy-hero {
        padding: 35px 25px;
    }

    .njte-policy-hero h1 {
        font-size: 29px;
    }

    .njte-policy-content {
        padding: 25px 20px;
    }

    .njte-policy-content h2 {
        font-size: 21px;
    }

    .njte-policy-grid {
        grid-template-columns: 1fr;
    }
}