/* ============================================================
   JURIS QUANTUM — JQJETL
   FINAL OJS MASTHEAD
   Logo + Journal Name + JQJETL + Divider + Tagline
   ============================================================ */

:root{
    --jq-navy:#062b59;
    --jq-gold:#d4af37;
    --jq-white:#ffffff;
}

/* HEADER BACKGROUND */
.pkp_structure_head{
    background:var(--jq-navy)!important;
    border-bottom:3px solid var(--jq-gold)!important;
    box-shadow:none!important;
}

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

/* ============================================================
   MASTHEAD
   ============================================================ */

.pkp_site_name{
    position:relative!important;
    display:block!important;
    width:100%!important;
    max-width:1280px!important;
    height:285px!important;
    min-height:285px!important;
    margin:0 auto!important;
    padding:0!important;
    background:var(--jq-navy)!important;
}

/* OJS logo link */
.pkp_site_name > a{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    text-decoration:none!important;
}

/* ============================================================
   EXISTING UPLOADED LOGO
   ============================================================ */

.pkp_site_name img{
    position:absolute!important;

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

    width:205px!important;
    height:205px!important;
    max-width:205px!important;
    max-height:205px!important;

    transform:translateY(-50%)!important;

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

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

    border:0!important;
    background:transparent!important;
}

/* ============================================================
   JOURNAL NAME — beside the uploaded logo
   ============================================================ */

.pkp_site_name::before{
    content:"Juris Quantum: Journal of Emerging Technology and Law"!important;

    position:absolute!important;
    z-index:20!important;

    left:285px!important;
    right:120px!important;
    top:68px!important;

    color:var(--jq-white)!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:38px!important;
    font-weight:700!important;
    line-height:1.08!important;

    text-align:center!important;
    white-space:nowrap!important;
    pointer-events:none!important;
}

/* ============================================================
   JQJETL — same title line, at the right
   ============================================================ */

.pkp_site_name::after{
    content:"(JQJETL)"!important;

    position:absolute!important;
    z-index:21!important;

    right:48px!important;
    top:76px!important;

    color:var(--jq-gold)!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:30px!important;
    font-weight:700!important;
    line-height:1!important;

    white-space:nowrap!important;
    pointer-events:none!important;
}

/* ============================================================
   GOLD DIVIDER
   ============================================================ */

.pkp_site_name > a::before{
    content:""!important;

    position:absolute!important;
    z-index:10!important;

    left:285px!important;
    right:48px!important;
    top:61%!important;

    height:2px!important;
    background:var(--jq-gold)!important;

    pointer-events:none!important;
}

/* Central dot */
.pkp_site_name > a{
    background:
        radial-gradient(
            circle at 62% 61%,
            var(--jq-gold) 0 9px,
            var(--jq-navy) 10px 14px,
            transparent 15px
        )!important;
}

/* ============================================================
   TAGLINE
   ============================================================ */

.pkp_site_name > a::after{
    content:"Bridging Law, Technology and Innovation"!important;

    position:absolute!important;
    z-index:22!important;

    left:285px!important;
    right:48px!important;
    top:69%!important;

    color:var(--jq-gold)!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:27px!important;
    font-weight:400!important;
    font-style:italic!important;
    line-height:1.2!important;

    text-align:center!important;
    white-space:nowrap!important;
    pointer-events:none!important;
}

/* ============================================================
   NAVIGATION
   ============================================================ */


   ============================================================ */

.pkp_navigation_primary_row{
    background:var(--jq-navy)!important;
    border-top:1px solid rgba(212,175,55,.25)!important;
}

.pkp_navigation_primary_wrapper{
    width:100%!important;
    max-width:1280px!important;
    margin:0 auto!important;
}

.pkp_navigation_primary{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    margin:0!important;
    padding:0 15px!important;
}

.pkp_navigation_primary > li{
    margin:0!important;
}

.pkp_navigation_primary > li > a{
    color:var(--jq-white)!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:15px!important;
    font-weight:600!important;
    padding:15px 14px!important;
    white-space:nowrap!important;
    border-bottom:2px solid transparent!important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus{
    color:var(--jq-gold)!important;
    border-bottom-color:var(--jq-gold)!important;
}

/* Search */
.pkp_navigation_search_wrapper a{
    color:var(--jq-white)!important;
}

.pkp_navigation_search_wrapper a:hover{
    color:var(--jq-gold)!important;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:900px){

    .pkp_site_name{
        height:250px!important;
        min-height:250px!important;
    }

    .pkp_site_name img{
        left:25px!important;
        width:145px!important;
        height:145px!important;
        max-width:145px!important;
        max-height:145px!important;
    }

    .pkp_site_name > a:after{
        left:190px!important;
        right:20px!important;
        top:45px!important;
        font-size:25px!important;
        line-height:1.12!important;
        white-space:normal!important;
    }

    .pkp_site_name:after{
        right:20px!important;
        top:88px!important;
        font-size:21px!important;
    }

    .pkp_site_name{
        background:var(--jq-navy)!important;
    }

    .pkp_site_name > a:before{
        left:190px!important;
        right:20px!important;
        top:61%!important;
    }

    .pkp_site_name > a::after{
        left:190px!important;
        right:20px!important;
        top:68%!important;
        font-size:20px!important;
        white-space:normal!important;
    }
}

@media(max-width:600px){

    .pkp_site_name{
        height:225px!important;
        min-height:225px!important;
    }

    .pkp_site_name img{
        left:15px!important;
        width:105px!important;
        height:105px!important;
        max-width:105px!important;
        max-height:105px!important;
    }

    .pkp_site_name > a:after{
        left:135px!important;
        right:10px!important;
        top:38px!important;
        font-size:19px!important;
    }

    .pkp_site_name:after{
        right:10px!important;
        top:86px!important;
        font-size:17px!important;
    }

    .pkp_site_name > a:before{
        left:135px!important;
        right:10px!important;
    }

    .pkp_site_name > a::after{
        left:135px!important;
        right:10px!important;
        font-size:16px!important;
    }
}