/* =========================================================
   IJFANS - OJS 3.4.0.10
   COMPLETE RESPONSIVE CUSTOM CSS
   ========================================================= */


/* =========================================================
   1. DESKTOP NAVIGATION
   ========================================================= */

@media (min-width: 992px) {

    /* Full-width green navigation bar */
    .pkp_navigation_primary_row {
        position: relative !important;

        left: 50% !important;
        width: 100vw !important;

        transform: translateX(-50%) !important;

        overflow: visible !important;

        background: #4d9504 !important;

        box-shadow: none !important;
        clip-path: none !important;
    }


    /* Keep navigation contents aligned with desktop container */
    .pkp_navigation_primary_wrapper {
        position: relative !important;

        width: 952px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        overflow: visible !important;

        background: #4d9504 !important;
    }


    /* Allow dropdowns to extend outside navigation */
    .pkp_navigation_primary,
    .pkp_navigation_primary > li,
    .pkp_navigation_primary > li > ul {
        overflow: visible !important;
    }


    /* Desktop dropdown */
    .pkp_navigation_primary > li {
        position: relative !important;
    }


    .pkp_navigation_primary > li > ul,
    .pkp_navigation_primary .dropdown-menu {
        position: absolute !important;

        z-index: 20000 !important;

        overflow: visible !important;
    }
}


/* =========================================================
   2. LARGE DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

    .pkp_navigation_primary_wrapper {
        width: 1160px !important;
    }
}


/* =========================================================
   3. HEADER LAYER
   ========================================================= */

.pkp_structure_head {
    position: relative !important;

    z-index: 10000 !important;

    overflow: visible !important;
}


/* Desktop only */
@media (min-width: 992px) {

    .pkp_head_wrapper,
    .pkp_site_nav_menu,
    .pkp_navigation_primary_row,
    .pkp_navigation_primary_wrapper,
    .pkp_navigation_primary {
        overflow: visible !important;
    }
}


/* =========================================================
   4. KEEP PAGE CONTENT BELOW HEADER
   ========================================================= */

.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_structure_footer_wrapper {
    position: relative;

    z-index: 1;
}


/* =========================================================
   5. MOBILE HEADER
   Below 992px
   ========================================================= */

@media (max-width: 991px) {

    /* Green mobile header */
    .pkp_structure_head {
        background: #4d9504 !important;

        overflow: visible !important;

        z-index: 10000 !important;
    }


    /* Mobile header row */
    .pkp_site_name_wrapper {
        position: relative !important;

        width: 100% !important;

        height: 64px !important;
        min-height: 64px !important;

        background: #4d9504 !important;
    }


    /* =====================================================
       6. PROPER OJS HAMBURGER BUTTON
       ===================================================== */

    .pkp_site_nav_toggle {
        display: block !important;

        position: absolute !important;

        top: 0 !important;
        left: 0 !important;

        width: 64px !important;
        height: 64px !important;

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

        border: 0 !important;

        background: #4d9504 !important;

        box-shadow:
            1px 0 0 rgba(255,255,255,0.20),
            -1px 0 0 rgba(255,255,255,0.20) !important;

        z-index: 10001 !important;

        cursor: pointer !important;

        outline: none !important;
    }


    /*
       IMPORTANT:
       OJS uses ONE span to create the hamburger.

       We make the span transparent and use:
       - border-bottom
       - ::before
       - ::after

       to create exactly THREE lines.
    */

    .pkp_site_nav_toggle > span {

        position: absolute !important;

        top: 50% !important;
        left: 50% !important;

        transform: translate(-50%, -50%) !important;

        display: block !important;

        width: 28px !important;
        height: 20px !important;

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

        background: transparent !important;

        border: 0 !important;

        border-bottom: 3px solid #ffffff !important;

        text-indent: -9999px !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /*
       Top and middle hamburger lines
    */

    .pkp_site_nav_toggle > span::before,
    .pkp_site_nav_toggle > span::after {

        content: "" !important;

        position: absolute !important;

        left: 0 !important;

        display: block !important;

        width: 28px !important;

        height: 3px !important;

        margin: 0 !important;

        padding: 0 !important;

        background: #ffffff !important;

        border: 0 !important;

        border-radius: 1px !important;
    }


    /* Top line */
    .pkp_site_nav_toggle > span::before {
        top: 0 !important;
    }


    /* Middle line */
    .pkp_site_nav_toggle > span::after {
        top: 8px !important;
    }


    /*
       Button interaction
    */

    .pkp_site_nav_toggle:hover,
    .pkp_site_nav_toggle:focus,
    .pkp_site_nav_toggle:active {
        background: #438203 !important;

        outline: none !important;
    }


    /* =====================================================
       7. MOBILE LOGO
       ===================================================== */

    .pkp_site_name {
        position: absolute !important;

        top: 0 !important;

        left: 64px !important;
        right: 8px !important;

        width: auto !important;

        height: 64px !important;

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

        display: flex !important;

        align-items: center !important;

        background: transparent !important;

        overflow: hidden !important;

        white-space: nowrap !important;

        z-index: 10000 !important;
    }


    .pkp_site_name .is_img {
        display: inline-block !important;

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

        max-width: 100% !important;
    }


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

        width: auto !important;

        height: auto !important;

        max-width: 100% !important;

        max-height: 54px !important;
    }


    /* =====================================================
       8. MOBILE NAVIGATION MENU
       ===================================================== */

    /*
       IMPORTANT:
       Do NOT set display:block here.

       OJS JavaScript automatically controls:
       .pkp_site_nav_menu--isOpen

       This keeps the normal OJS open/close behavior.
    */

    .pkp_site_nav_menu {

        position: absolute !important;

        top: 100% !important;

        left: 0 !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 15px 20px !important;

        background: #4d9504 !important;

        z-index: 9999 !important;

        overflow: visible !important;
    }


    /* =====================================================
       9. MOBILE PRIMARY MENU
       ===================================================== */

    .pkp_site_nav_menu .pkp_navigation_primary {

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        text-align: left !important;
    }


    .pkp_site_nav_menu .pkp_navigation_primary > li {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    .pkp_site_nav_menu .pkp_navigation_primary > li > a {

        display: block !important;

        width: 100% !important;

        padding: 13px 5px !important;

        margin: 0 !important;

        color: #ffffff !important;

        border-bottom: 1px solid rgba(255,255,255,0.22) !important;

        text-decoration: none !important;

        font-size: 18px !important;

        line-height: 1.4 !important;
    }


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

        color: #ffffff !important;

        background: rgba(255,255,255,0.10) !important;

        text-decoration: none !important;
    }


    /* =====================================================
       10. MOBILE SUBMENU
       ===================================================== */

    .pkp_site_nav_menu .pkp_navigation_primary ul {

        width: 100% !important;

        margin: 0 !important;

        padding: 0 0 0 15px !important;

        background: transparent !important;

        box-shadow: none !important;
    }


    .pkp_site_nav_menu .pkp_navigation_primary ul li {

        display: block !important;

        width: 100% !important;
    }


    .pkp_site_nav_menu .pkp_navigation_primary ul a {

        display: block !important;

        padding: 9px 5px !important;

        color: #ffffff !important;

        font-size: 16px !important;

        line-height: 1.4 !important;

        background: transparent !important;

        text-decoration: none !important;
    }


    .pkp_site_nav_menu .pkp_navigation_primary ul a:hover,
    .pkp_site_nav_menu .pkp_navigation_primary ul a:focus {

        color: #ffffff !important;

        background: rgba(255,255,255,0.08) !important;
    }


    /* =====================================================
       11. MOBILE SEARCH
       ===================================================== */

    .pkp_site_nav_menu .pkp_navigation_search_wrapper {

        width: 100% !important;

        margin: 12px 0 0 !important;

        padding: 12px 0 0 !important;

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


    .pkp_site_nav_menu .pkp_search {

        display: block !important;

        width: 100% !important;

        padding: 10px 5px !important;

        color: #ffffff !important;

        font-size: 18px !important;

        text-decoration: none !important;
    }


    .pkp_site_nav_menu .pkp_search:hover,
    .pkp_site_nav_menu .pkp_search:focus {

        color: #ffffff !important;

        text-decoration: underline !important;
    }


    /* =====================================================
       12. MOBILE USER NAVIGATION
       Register / Login
       ===================================================== */

    .pkp_site_nav_menu .pkp_navigation_user_wrapper {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    .pkp_site_nav_menu .pkp_navigation_user {

        width: 100% !important;

        margin: 12px 0 0 !important;

        padding: 12px 0 0 !important;

        border-top: 1px solid rgba(255,255,255,0.25) !important;

        text-align: left !important;
    }


    .pkp_site_nav_menu .pkp_navigation_user li {

        display: block !important;

        width: 100% !important;
    }


    .pkp_site_nav_menu .pkp_navigation_user a {

        display: block !important;

        padding: 9px 5px !important;

        color: #ffffff !important;

        font-size: 17px !important;

        text-decoration: none !important;
    }


    .pkp_site_nav_menu .pkp_navigation_user a:hover,
    .pkp_site_nav_menu .pkp_navigation_user a:focus {

        color: #ffffff !important;

        text-decoration: underline !important;
    }


    /* =====================================================
       13. REMOVE DESKTOP NAVIGATION TRANSFORMATION ON MOBILE
       ===================================================== */

    .pkp_navigation_primary_row {

        position: static !important;

        left: auto !important;

        width: auto !important;

        transform: none !important;

        background: transparent !important;

        box-shadow: none !important;

        clip-path: none !important;
    }


    .pkp_navigation_primary_wrapper {

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        background: transparent !important;
    }
}


/* =========================================================
   14. SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .pkp_site_name_wrapper {

        height: 60px !important;

        min-height: 60px !important;
    }


    .pkp_site_nav_toggle {

        width: 60px !important;

        height: 60px !important;
    }


    .pkp_site_nav_toggle > span {

        width: 27px !important;

        height: 20px !important;
    }


    .pkp_site_nav_toggle > span::before,
    .pkp_site_nav_toggle > span::after {

        width: 27px !important;
    }


    .pkp_site_name {

        left: 60px !important;

        height: 60px !important;

        right: 5px !important;
    }


    .pkp_site_name .is_img img {

        max-height: 50px !important;

        max-width: 100% !important;
    }


    .pkp_site_nav_menu {

        padding: 12px 15px !important;
    }
}