/* =========================================================
   JURIS SPECTRUM — OJS CUSTOM CSS
   ========================================================= */

/* =========================================================
    1. GLOBAL / WEBSITE-WIDE
   ========================================================= */

/* --------------------------------------------
   1.1 OVERALL PAGE BACKGROUND
   -------------------------------------------- */

body,
.pkp_structure_page {
    background: #F2F4F7 !important;
}

/* --------------------------------------------
   1.2 MAIN CONTENT AREA
   -------------------------------------------- */

.pkp_structure_content {
    background: transparent !important;
}

/* --------------------------------------------
   1.3 SIDEBAR
   -------------------------------------------- */

.pkp_structure_sidebar {
    background: transparent !important;
}

/* --------------------------------------------
   1.4 ARTICLE SEARCH BUTTON (HIDE)
   -------------------------------------------- */

.pkp_navigation_search_wrapper {
    display: none !important;
}

/* --------------------------------------------
   1.5 BREADCRUMB NAVIGATION
      (HIDE OJS BREADCRUMB TRAIL)
   -------------------------------------------- */

.cmp_breadcrumbs {
    display: none !important;
}

/* =========================================================
    2. HEADER (3-LAYER STRUCTURE — WORDPRESS OJS MATCH)
   ========================================================= */

/* =========================================================
    2.1 COMPLETE HEADER — 280px
   ---------------------------------------------------------
   40px  = Above Header
   190px = Primary Header
   50px  = Below Header / Primary Menu
   ========================================================= */

.pkp_structure_head {
    min-height: 280px !important;
    height: 280px !important;

    background:
        /* ABOVE HEADER + BELOW HEADER */
        linear-gradient(
            to bottom,
            #FFF9E1 0px,
            #FFF9E1 40px,
            transparent 40px,
            transparent 230px,
            #FFFAFA 230px,
            #FFFAFA 280px
        ),

        /* PRIMARY HEADER — 7 COLOUR GRADIENT */
        linear-gradient(
            110deg,
            #010024 10%,
            #050F33 20%,
            #040E49 35%,
            #241D5D 48%,
            #812828 63%,
            #7E2C0C 77%,
            #680817 90%
        ) 0 40px / 100% 190px no-repeat,

        #FFFAFA !important;

    border-bottom: none !important;
}

/* =========================================================
    2.2 HEADER INNER WRAPPER
   ---------------------------------------------------------
   Reserve 40px for the Above Header strip
   ========================================================= */

.pkp_head_wrapper {
    padding-top: 40px !important;
}

/* =========================================================
    2.3 PRIMARY HEADER / SITE TITLE & LOGO AREA
   ---------------------------------------------------------
   Height = 190px
   ========================================================= */

.pkp_site_name_wrapper {
    height: 190px !important;
    min-height: 190px !important;
}

.pkp_site_name a.is_img {
    width: 190px !important;
    height: 190px !important;
}

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

/* =========================================================
   2.4 JOURNAL BRANDING
   ========================================================= */
/* --------------------------------------------
   2.4.1 Journal Name
   -------------------------------------------- */

.pkp_site_name::before {
    content: "Juris Spectrum";
    position: absolute;
    left: 200px;
    top: 60px;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 44px !important;
    font-weight: 700 !important;
    color: #FFF9E1 !important;
    white-space: nowrap;
}

/* --------------------------------------------
   2.4.2 Tagline
   -------------------------------------------- */

.pkp_site_name::after {
    content: "International Journal of Law";
    position: absolute;
    left: 200px;
    top: 112px;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    color: #F5EAD5 !important;
    white-space: nowrap;
}

/* --------------------------------------------
   2.4.3  ISSN & DOI 
   -------------------------------------------- */

.pkp_site_name a.is_img::before {
    content: "ISSN: XXXXXXXX\A DOI: 10.xxxx/xxxxx";
    white-space: pre;
    position: absolute;
    right: 120px;
    top: 65px;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
    color: #FFF9E1 !important;
}

/* =========================================================
    2.5 PRIMARY NAVIGATION — BELOW HEADER
   ---------------------------------------------------------
   Height = 50px
   Background = #FFFAFA
   Border = 1px #D1D5DB
   Full viewport width
   ========================================================= */

.pkp_navigation_primary_row {
    height: 50px !important;
    min-height: 50px !important;
    box-sizing: border-box !important;

    background: #FFFAFA !important;

    border-top: none !important;
    border-bottom: 1px solid #D1D5DB !important;

   width: 100% !important;

    margin-left: 0 !important;
}

/* =========================================================
    2.6 PRIMARY NAVIGATION INNER WRAPPER
   ---------------------------------------------------------
   Menu items remain inside the normal centered content area
   ========================================================= */

.pkp_navigation_primary_wrapper {
    height: 50px !important;
    min-height: 50px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* =========================================================
    2.7 PRIMARY NAVIGATION CONTENT
   ========================================================= */

.pkp_navigation_primary {
    height: 50px !important;
}

/* =========================================================
    2.8 PRIMARY HEADER BOTTOM BORDER
   ---------------------------------------------------------
   Grey 1px border between Primary Header and Menu
   ========================================================= */

.pkp_site_name_wrapper {
    border-bottom: 1px solid #D1D5DB !important;
}

/* =====================================
    2.9 PRIMARY MENU LINKS
   ===================================== */

.pkp_navigation_primary > li > a {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    padding: 0 16px !important;
    line-height: 50px !important;

    transition: all 0.25s ease;
}

/* --------------------------------------------
   2.9.1 HOVER STATE
   -------------------------------------------- */

.pkp_navigation_primary > li > a:hover {
    color: #EFBF04 !important;
    transform: scale(1.2);
}

/* --------------------------------------------
   2.9.2 ACTIVE MENU STATE
   -------------------------------------------- */

.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li.current_page_item > a {
    color: #550000 !important;
}

/* --------------------------------------------
   2.9.3 ACTIVE / FOCUS STATE
   -------------------------------------------- */

.pkp_site_nav_menu .pkp_nav_list > li > a:focus,
.pkp_site_nav_menu .pkp_nav_list > li > a:active {
    background: transparent !important;
    color: #550000 !important;
    outline: none !important;
}

/* ===================================================
   2.10 PRIMARY NAVIGATION DROPDOWN
   =================================================== */

/* --------------------------------------------
   2.10.1A DROPDOWN CONTAINER
   -------------------------------------------- */

.dropdown-menu {
    background: #FFFFFF !important;
    border: none !important;
    margin-top: 0px !important;
    box-shadow: none !important;
}

.pkp_navigation_primary > li > .dropdown-menu {
    top: 90% !important;
    transform: none !important;
    margin-top: 0 !important;
}

/* --------------------------------------------
   2.10.1B PRIMARY MENU — HOVER BEHAVIOUR
   -------------------------------------------- */

.pkp_navigation_primary > li.show:not(:hover) > .dropdown-menu {
    display: none !important;
}

/* --------------------------------------------
   2.10.2 SUB MENU TEXT
   -------------------------------------------- */

.dropdown-menu a {
    color: #000000 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 12px 12px !important;
}

/* --------------------------------------------
   2.10.3 SUB MENU HOVER
   -------------------------------------------- */

.dropdown-menu a:hover {
    color: #EFBF04 !important;
    background: transparent !important;
}

/* --------------------------------------------
   2.10.4 SUB MENU CURRENT / ACTIVE
   -------------------------------------------- */

.dropdown-menu li.current > a {
    background: transparent !important;
}

/* --------------------------------------------
   2.10.5 SUB MENU ITEM DIVIDERS
   -------------------------------------------- */

.dropdown-menu li:not(:last-child) {
    border-bottom: 1px solid #0F2A44 !important;
}

/* --------------------------------------------
   2.10.6 REMOVE OJS DEFAULT BLUE LEFT STRIP
   -------------------------------------------- */

.dropdown-menu li,
.dropdown-menu li a {
    border-left: none !important;
}

/* ===================================================
   2.11 USER NAVIGATION
   =================================================== */

.pkp_navigation_user_wrapper,
.pkp_navigation_user_wrapper a {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000000 !important;

    transition: all 0.25s ease;
}

/* --------------------------------------------
   2.11.1 VERTICAL ALIGNMENT
   -------------------------------------------- */

.pkp_navigation_user_wrapper a {
    line-height: 26px !important;
}

/* --------------------------------------------
   2.11.2 HOVER STATE
   -------------------------------------------- */

.pkp_navigation_user_wrapper a:hover {
    color: #EFBF04 !important;
}

/* --------------------------------------------
   2.11.3 ACTIVE / FOCUS / OPEN STATE
   -------------------------------------------- */

.pkp_navigation_user_wrapper a:focus,
.pkp_navigation_user_wrapper a:active,
.pkp_navigation_user_wrapper a[aria-expanded="true"] {
    background: transparent !important;
    color: #550000 !important;
    outline: none !important;
}

.pkp_navigation_user_wrapper li.profile.show > a {
    color: #550000 !important;
}

/* ===================================================
   2.12 USER NAVIGATION DROPDOWN
   =================================================== */

/* --------------------------------------------
   2.12.1 BACKGROUND & BORDER
   -------------------------------------------- */

.pkp_navigation_user_wrapper .dropdown-menu {
    background: #FFFFFF !important;
    border: none !important;
    min-width: 170px !important;
    top: 10px !important;
}

/* --------------------------------------------
   2.12.2 DROPDOWN TEXT
   -------------------------------------------- */

.pkp_navigation_user_wrapper .dropdown-menu a {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #000000 !important;

    transition: all 0.25s ease;
}

/* --------------------------------------------
   2.12.3 DROPDOWN HOVER
   -------------------------------------------- */

.pkp_navigation_user_wrapper .dropdown-menu a:hover {
    background: transparent !important;
    color: #EFBF04 !important;
}

/* =========================================================
    3. Footer (WORDPRESS OJS STRUCTURE MATCH)
   ========================================================= */

/* --------------------------------------------
    3.1 FOOTER BACKGROUND
   -------------------------------------------- */

.pkp_structure_footer_wrapper,
.pkp_structure_footer,
.pkp_footer_content {
    background: #0F2A44 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* --------------------------------------------
    3.2 MAIN FOOTER CONTAINER
   -------------------------------------------- */

.js-footer {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #0F2A44 !important;
    color: #FFFFFF !important;
    box-sizing: border-box !important;
}

/* --------------------------------------------
    3.3 FIVE-COLUMN AREA
   -------------------------------------------- */

.js-footer-main {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 42px 30px 32px 30px !important;

    display: grid !important;
    grid-template-columns: 1.35fr 1fr 1fr 1fr 0.9fr !important;
    column-gap: 45px !important;
    align-items: start !important;

    box-sizing: border-box !important;
}

/* --------------------------------------------
    3.4 INDIVIDUAL COLUMNS
   -------------------------------------------- */

.js-footer-column {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* --------------------------------------------
    3.5 FOOTER HEADINGS
   -------------------------------------------- */

.js-footer-column h3 {
    margin: 0 0 20px 0 !important;
    padding: 0 !important;

    color: #FFFFFF !important;
    font-size: 24px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

/* --------------------------------------------
    3.6 JOURNAL IDENTITY
   -------------------------------------------- */

.js-footer-identity h3 {
    margin-bottom: 18px !important;
}

.js-footer-identity h4 {
    margin: 0 0 25px 0 !important;
    padding: 0 !important;

    color: #FFFFFF !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

.js-footer-identity p {
    margin: 0 !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
}

/* --------------------------------------------
    3.7 FOOTER TEXT
   -------------------------------------------- */

.js-footer-column p {
    margin: 0 0 11px 0 !important;
    padding: 0 !important;

    color: #FFFFFF !important;
    font-size: 17px !important;
    line-height: 1.45 !important;
}

/* --------------------------------------------
    3.8 FOOTER LINKS
   -------------------------------------------- */

.js-footer-column a {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

/* --------------------------------------------
    3.9 COPYRIGHT SECTION
   -------------------------------------------- */

.js-footer-copyright {
    width: 100% !important;
    max-width: none !important;

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

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

    color: #FFFFFF !important;
    text-align: center !important;

    font-size: 15px !important;
    line-height: 1.5 !important;

    box-sizing: border-box !important;
}

/* --------------------------------------------
    3.10 FOOTER TYPOGRAPHY
   -------------------------------------------- */

.js-footer,
.js-footer * {
    font-family: Georgia, "Times New Roman", serif !important;
}

/* --------------------------------------------
    3.11 FOOTER LINK HOVER
   -------------------------------------------- */

.js-footer a:hover {
    color: #EFBF04 !important;
    transition: all 0.25s ease;
}

/* =========================================================
    4. RESPONSIVE
   ========================================================= */
/* --------------------------------------------
    4.1 TABLET
   -------------------------------------------- */

@media (max-width: 900px) {

    .js-footer-main {
        grid-template-columns: 1fr 1fr 1fr !important;
        column-gap: 30px !important;
        row-gap: 35px !important;
    }

}

/* --------------------------------------------
    4.2 MOBILE
   -------------------------------------------- */

@media (max-width: 600px) {

    .js-footer-main {
        grid-template-columns: 1fr !important;
        padding: 35px 25px 25px 25px !important;
        row-gap: 30px !important;
    }

    .js-footer-copyright {
        padding: 18px 20px 20px 20px !important;
        font-size: 13px !important;
    }

}