/*
===============================================================================
 JADINS OJS FINAL CUSTOM CSS
 Journal of AI-Driven Intelligent Systems (JADINS)
 Publisher: Universitas Lamappapoleonro
 Domain: journal.jadins.unipol.ac.id

 Recommended assets:
 - Header banner: 6000 x 300 px
 - Footer banner: 6000 x 375 px

 Main goals:
 - Header full-width and slim (230 px desktop)
 - Footer full-width and slim (proportional; ~120 px at 1920 px viewport)
 - Remove unnecessary spacing around header/footer
 - Responsive desktop/tablet/mobile layout
 - JADINS dark-blue / cyan / green visual identity
===============================================================================
*/


/* ==========================================================================
   1. JADINS COLOR VARIABLES
   ========================================================================== */

:root {
    --jadins-navy: #062654;
    --jadins-navy-dark: #031a3a;
    --jadins-blue: #0b4f9c;
    --jadins-blue-light: #1387d4;
    --jadins-cyan: #11b8c9;
    --jadins-teal: #0aa6b5;
    --jadins-green: #64b532;
    --jadins-white: #ffffff;
    --jadins-light: #f5f9fd;
    --jadins-border: #dce6f2;
    --jadins-text: #1f2f43;
}


/* ==========================================================================
   2. GLOBAL RESET / PAGE WIDTH
   ========================================================================== */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
}

body {
    color: var(--jadins-text);
    background: #ffffff;
}

.pkp_structure_page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box;
}


/* ==========================================================================
   3. OJS HEADER WRAPPER
   ========================================================================== */

.pkp_structure_head {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--jadins-navy-dark) !important;
}

.pkp_head_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================================
   4. HEADER BANNER — 230 PX DESKTOP
   Recommended source image: 6000 x 300 px
   ========================================================================== */

.pkp_site_name_wrapper {
    width: 100% !important;
    max-width: 100% !important;

    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;

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

    overflow: hidden !important;
    background: var(--jadins-navy-dark) !important;
    box-sizing: border-box !important;
}

.pkp_site_name {
    width: 100% !important;
    max-width: 100% !important;

    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;

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

    overflow: hidden !important;
    line-height: 0 !important;
    box-sizing: border-box !important;
}

.pkp_site_name .is_img,
.pkp_site_name .is_img a,
.pkp_site_name > a {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;

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

    overflow: hidden !important;
    line-height: 0 !important;
    box-sizing: border-box !important;
}

.pkp_site_name .is_img img,
.pkp_site_name img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;

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

    object-fit: cover !important;
    object-position: center center !important;
    box-sizing: border-box !important;
}


/* Remove accidental gaps around header image */
.pkp_site_name_wrapper,
.pkp_site_name,
.pkp_site_name .is_img,
.pkp_site_name .is_img a,
.pkp_site_name .is_img img {
    border: 0 !important;
}


/* ==========================================================================
   5. PRIMARY NAVIGATION
   ========================================================================== */

.pkp_navigation_primary_wrapper {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 4% !important;

    box-sizing: border-box !important;
    background: var(--jadins-blue) !important;

    border-top: 1px solid rgba(255,255,255,0.10) !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}

.pkp_navigation_primary {
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_primary > li > a {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: #d7f7fb !important;
    background: transparent !important;
}


/* Dropdown */
.pkp_navigation_primary .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid var(--jadins-border) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

.pkp_navigation_primary .dropdown-menu a {
    color: var(--jadins-text) !important;
}

.pkp_navigation_primary .dropdown-menu a:hover,
.pkp_navigation_primary .dropdown-menu a:focus {
    color: var(--jadins-blue) !important;
    background: var(--jadins-light) !important;
}


/* Search and user navigation */
.pkp_navigation_user_wrapper,
.pkp_navigation_user {
    color: #ffffff !important;
}

.pkp_navigation_user a,
.pkp_search,
.pkp_search a {
    color: #ffffff !important;
}

.pkp_navigation_user a:hover,
.pkp_navigation_user a:focus,
.pkp_search a:hover,
.pkp_search a:focus {
    color: #d7f7fb !important;
}


/* ==========================================================================
   6. CONTENT AREA
   ========================================================================== */

.pkp_structure_content {
    width: 100% !important;
    max-width: 1500px !important;

    margin: 0 auto !important;
    padding-left: 4% !important;
    padding-right: 4% !important;

    box-sizing: border-box !important;
}

.pkp_structure_main,
.pkp_structure_sidebar {
    box-sizing: border-box !important;
}


/* ==========================================================================
   7. TYPOGRAPHY / LINKS
   ========================================================================== */

a {
    color: var(--jadins-blue);
}

a:hover,
a:focus {
    color: var(--jadins-teal);
}

h1,
h2,
h3,
h4,
h5,
h6,
.page_title,
.current_issue_title,
.obj_issue_toc .heading {
    color: var(--jadins-navy);
}


/* ==========================================================================
   8. BUTTONS
   ========================================================================== */

.cmp_button,
.cmp_form .buttons button,
.pkp_button,
button,
input[type="submit"] {
    background: var(--jadins-blue) !important;
    color: #ffffff !important;

    border: 0 !important;
    border-radius: 4px !important;
}

.cmp_button:hover,
.cmp_button:focus,
.cmp_form .buttons button:hover,
.cmp_form .buttons button:focus,
.pkp_button:hover,
.pkp_button:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
    background: var(--jadins-teal) !important;
    color: #ffffff !important;
}


/* ==========================================================================
   9. SIDEBAR
   ========================================================================== */

.pkp_block {
    border: 1px solid var(--jadins-border) !important;
    border-radius: 6px !important;

    background: #ffffff !important;

    padding: 18px !important;
    margin-bottom: 20px !important;
}

.pkp_block .title {
    color: var(--jadins-navy) !important;
    font-weight: 700 !important;

    border-bottom: 2px solid var(--jadins-cyan) !important;

    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
}


/* ==========================================================================
   10. ARTICLE / ISSUE LIST
   ========================================================================== */

.obj_article_summary {
    padding-top: 18px !important;
    padding-bottom: 18px !important;

    border-bottom: 1px solid var(--jadins-border) !important;
}

.obj_article_summary .title a {
    color: var(--jadins-navy) !important;
    font-weight: 700 !important;
}

.obj_article_summary .title a:hover,
.obj_article_summary .title a:focus {
    color: var(--jadins-teal) !important;
}


/* PDF / Galley buttons */
.obj_galley_link,
.obj_galley_link.pdf {
    background: var(--jadins-blue) !important;
    color: #ffffff !important;

    border: 0 !important;
    border-radius: 4px !important;
}

.obj_galley_link:hover,
.obj_galley_link:focus,
.obj_galley_link.pdf:hover,
.obj_galley_link.pdf:focus {
    background: var(--jadins-teal) !important;
}


/* ==========================================================================
   11. FOOTER WRAPPER — FULL WIDTH / NO EXTRA SPACE
   Recommended source image: 6000 x 375 px
   At ~1920px viewport the natural proportional height is about 120px.
   ========================================================================== */

.pkp_structure_footer_wrapper {
    width: 100% !important;
    max-width: 100% !important;

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

    min-height: 0 !important;

    background: var(--jadins-navy-dark) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.pkp_structure_footer {
    width: 100% !important;
    max-width: 100% !important;

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

    min-height: 0 !important;

    background: var(--jadins-navy-dark) !important;
    box-sizing: border-box !important;
}

.pkp_footer_content,
.pkp_structure_footer .pkp_footer_content {
    width: 100% !important;
    max-width: 100% !important;

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

    min-height: 0 !important;

    line-height: 0 !important;
    font-size: 0 !important;

    background: var(--jadins-navy-dark) !important;
    box-sizing: border-box !important;
}


/* Remove editor-generated paragraph/div spacing */
.pkp_footer_content p,
.pkp_footer_content div,
.pkp_structure_footer p,
.pkp_structure_footer div {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ==========================================================================
   12. FOOTER IMAGE
   This keeps 6000 x 375 px image proportional and full-width.
   ========================================================================== */

.pkp_footer_content img,
.pkp_structure_footer img,
.jadins-footer-banner,
.jadins-footer-banner img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    max-height: none !important;

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

    border: 0 !important;

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

    box-sizing: border-box !important;
}


/* ==========================================================================
   13. REMOVE OJS/PKP BRAND FOOTER AREA
   This removes the large "Platform & workflow by OJS/PKP" space.
   ========================================================================== */

.pkp_brand_footer {
    display: none !important;
}


/* ==========================================================================
   14. REMOVE EXTRA FOOTER GAPS / PSEUDO ELEMENTS
   ========================================================================== */

.pkp_structure_footer_wrapper::before,
.pkp_structure_footer_wrapper::after,
.pkp_structure_footer::before,
.pkp_structure_footer::after,
.pkp_footer_content::before,
.pkp_footer_content::after {
    content: none !important;

    display: none !important;

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


/* ==========================================================================
   15. RESPONSIVE HEADER
   ========================================================================== */

/* Tablet / small laptop */
@media (max-width: 992px) {

    .pkp_site_name_wrapper,
    .pkp_site_name,
    .pkp_site_name .is_img,
    .pkp_site_name .is_img a,
    .pkp_site_name > a {
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
    }

    .pkp_site_name .is_img img,
    .pkp_site_name img {
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;

        object-fit: cover !important;
    }

    .pkp_navigation_primary_wrapper {
        padding-left: 3% !important;
        padding-right: 3% !important;
    }

    .pkp_structure_content {
        padding-left: 3% !important;
        padding-right: 3% !important;
    }
}


/* Tablet portrait / mobile */
@media (max-width: 768px) {

    .pkp_site_name_wrapper,
    .pkp_site_name,
    .pkp_site_name .is_img,
    .pkp_site_name .is_img a,
    .pkp_site_name > a {
        height: 140px !important;
        min-height: 140px !important;
        max-height: 140px !important;
    }

    .pkp_site_name .is_img img,
    .pkp_site_name img {
        height: 140px !important;
        min-height: 140px !important;
        max-height: 140px !important;

        object-fit: cover !important;
    }

    .pkp_navigation_primary_wrapper {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .pkp_structure_content {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .pkp_block {
        padding: 14px !important;
    }
}


/* Small mobile */
@media (max-width: 480px) {

    .pkp_site_name_wrapper,
    .pkp_site_name,
    .pkp_site_name .is_img,
    .pkp_site_name .is_img a,
    .pkp_site_name > a {
        height: 105px !important;
        min-height: 105px !important;
        max-height: 105px !important;
    }

    .pkp_site_name .is_img img,
    .pkp_site_name img {
        height: 105px !important;
        min-height: 105px !important;
        max-height: 105px !important;

        object-fit: cover !important;
    }

    .pkp_structure_content {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}


/* ==========================================================================
   16. ACCESSIBILITY
   ========================================================================== */

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--jadins-cyan) !important;
    outline-offset: 2px !important;
}


/* ==========================================================================
   17. FINAL GAP CLEANUP
   ========================================================================== */

.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name,
.pkp_site_name .is_img,
.pkp_site_name .is_img a,
.pkp_site_name .is_img img,
.pkp_structure_footer_wrapper,
.pkp_structure_footer,
.pkp_footer_content,
.pkp_footer_content img {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ==========================================================================
   END OF JADINS FINAL OJS CSS
   ========================================================================== */