/* =========================================================
   VIDEO JOURNAL OF 2ND LANGUAGE LEARNING
   PREMIUM PROFESSIONAL OJS STYLE SHEET
   HEADER SIZE: SLIGHTLY INCREASED
   THEME:
   Academic Blue + Teal + Royal Purple + White + Gold
   ========================================================= */


/* =========================================================
   COLOR SYSTEM
   ========================================================= */

:root {
    --vjl-navy: #102c4b;
    --vjl-primary: #173b63;
    --vjl-blue: #2167a5;
    --vjl-teal: #168b8b;
    --vjl-teal-dark: #0e6969;
    --vjl-purple: #6353a4;
    --vjl-purple-dark: #493d82;

    --vjl-gold: #d5a84a;
    --vjl-gold-light: #edd28a;

    --vjl-white: #ffffff;
    --vjl-light: #f4f8fc;
    --vjl-light-blue: #edf5fb;

    --vjl-border: #d9e5ef;
    --vjl-text: #26394b;
    --vjl-muted: #65788a;

    --vjl-shadow:
        0 8px 25px rgba(16,44,75,.09);
}


/* =========================================================
   GLOBAL PAGE
   ========================================================= */

html,
body {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f4f8fc 100%
        ) !important;

    color:
        var(--vjl-text) !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;
}

.pkp_structure_page {
    background:
        transparent !important;
}


/* =========================================================
   MAIN HEADER
   INCREASED HEIGHT
   ========================================================= */

.pkp_structure_head {

    position:
        relative !important;

    background:
        radial-gradient(
            circle at 8% 50%,
            rgba(22,139,139,.18) 0,
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 30%,
            rgba(99,83,164,.20) 0,
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #102c4b 0%,
            #173b63 45%,
            #2167a5 72%,
            #6353a4 100%
        ) !important;

    border-bottom:
        4px solid var(--vjl-gold) !important;

    box-shadow:
        0 10px 28px rgba(15,43,70,.22) !important;

    overflow:
        visible !important;

    min-height:
        0 !important;
}


/* =========================================================
   HEADER DECORATION
   ========================================================= */

.pkp_structure_head:before,
.pkp_structure_head:after {

    content:
        "" !important;

    position:
        absolute !important;

    border-radius:
        50% !important;

    pointer-events:
        none !important;
}


.pkp_structure_head:before {

    width:
        300px !important;

    height:
        300px !important;

    left:
        -135px !important;

    top:
        -185px !important;

    border:
        1px solid rgba(255,255,255,.11) !important;

    box-shadow:
        40px 40px 0 rgba(255,255,255,.035),
        80px 80px 0 rgba(22,139,139,.06) !important;
}


.pkp_structure_head:after {

    width:
        270px !important;

    height:
        270px !important;

    right:
        -115px !important;

    top:
        -160px !important;

    border:
        1px solid rgba(255,255,255,.11) !important;

    box-shadow:
        -40px 40px 0 rgba(255,255,255,.035),
        -80px 80px 0 rgba(99,83,164,.06) !important;
}


/* =========================================================
   HEADER WRAPPER
   INCREASED VERTICAL PADDING
   ========================================================= */

.pkp_head_wrapper {

    max-width:
        1280px !important;

    margin:
        0 auto !important;

    padding:
        22px 20px 17px !important;

    position:
        relative !important;

    z-index:
        5 !important;

    text-align:
        center !important;

    min-height:
        0 !important;
}


/* =========================================================
   JOURNAL TITLE
   LARGER SIZE
   ========================================================= */

.pkp_site_name_wrapper {

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        100% !important;

    min-height:
        0 !important;
}


.pkp_site_name a {

    color:
        #ffffff !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        32px !important;

    line-height:
        1.2 !important;

    font-weight:
        700 !important;

    letter-spacing:
        .8px !important;

    text-decoration:
        none !important;

    text-shadow:
        0 3px 14px rgba(0,0,0,.38) !important;

    transition:
        all .25s ease !important;
}


.pkp_site_name a:hover {

    color:
        #e9fbff !important;

    text-shadow:
        0 0 9px rgba(255,255,255,.70),
        0 0 20px rgba(22,201,201,.40) !important;

    text-decoration:
        none !important;
}


/* =========================================================
   JOURNAL SUBTITLE
   ========================================================= */

.pkp_site_name:after {

    content:
        "International Research Journal of Video-Based Second Language Learning" !important;

    display:
        block !important;

    margin-top:
        6px !important;

    color:
        #e2f3fa !important;

    font-size:
        10px !important;

    font-weight:
        600 !important;

    letter-spacing:
        1.7px !important;

    text-transform:
        uppercase !important;
}


/* =========================================================
   HEADER GOLD ACCENT
   ========================================================= */

.pkp_site_name_wrapper:after {

    content:
        "" !important;

    display:
        block !important;

    width:
        110px !important;

    height:
        2px !important;

    margin-top:
        11px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--vjl-gold),
            transparent
        ) !important;
}


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

.pkp_navigation_primary_row {

    position:
        relative !important;

    z-index:
        20 !important;

    background:
        #102d4a !important;

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

    border-bottom:
        3px solid var(--vjl-teal) !important;

    box-shadow:
        0 5px 16px rgba(0,0,0,.16) !important;

    min-height:
        0 !important;
}


.pkp_navigation_primary_wrapper {

    max-width:
        1280px !important;

    margin:
        0 auto !important;

    display:
        flex !important;

    justify-content:
        center !important;
}


.pkp_navigation_primary {

    display:
        flex !important;

    justify-content:
        center !important;

    flex-wrap:
        wrap !important;

    margin:
        0 !important;
}


/* =========================================================
   MENU ITEMS
   ========================================================= */

.pkp_navigation_primary > li > a {

    color:
        #ffffff !important;

    font-size:
        11.5px !important;

    font-weight:
        700 !important;

    text-transform:
        uppercase !important;

    letter-spacing:
        .35px !important;

    padding:
        8px 12px !important;

    border-right:
        1px solid rgba(255,255,255,.07) !important;

    transition:
        all .22s ease !important;
}


.pkp_navigation_primary > li > a:hover {

    background:
        var(--vjl-teal) !important;

    color:
        #ffffff !important;

    text-decoration:
        none !important;

    box-shadow:
        inset 0 -2px 0 rgba(255,255,255,.45) !important;
}


.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li > a[aria-current="page"] {

    background:
        var(--vjl-blue) !important;

    color:
        #ffffff !important;

    box-shadow:
        inset 0 -3px 0 var(--vjl-gold) !important;
}


/* =========================================================
   DROPDOWN MENU
   ========================================================= */

.pkp_navigation_primary ul {

    background:
        #173b63 !important;

    border-top:
        3px solid var(--vjl-gold) !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,.22) !important;

    min-width:
        190px !important;
}


.pkp_navigation_primary ul li a {

    color:
        #ffffff !important;

    padding:
        9px 14px !important;

    font-size:
        11.5px !important;
}


.pkp_navigation_primary ul li a:hover {

    background:
        var(--vjl-teal) !important;

    color:
        #ffffff !important;
}


/* =========================================================
   SEARCH / USER
   ========================================================= */

.pkp_navigation_search_wrapper a,
.pkp_navigation_user a {

    color:
        #ffffff !important;

    font-size:
        12px !important;

    font-weight:
        600 !important;
}


.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_user a:hover {

    color:
        #d8ffff !important;
}


/* =========================================================
   MAIN CONTENT AREA
   ========================================================= */

.pkp_structure_content.has_sidebar {

    max-width:
        1280px !important;

    margin:
        30px auto !important;

    padding:
        0 18px !important;

    display:
        flex !important;

    flex-direction:
        row !important;

    align-items:
        flex-start !important;

    gap:
        24px !important;
}


.pkp_structure_content.has_sidebar .pkp_structure_main {

    flex:
        1 1 auto !important;

    min-width:
        0 !important;
}


.pkp_structure_content.has_sidebar .pkp_structure_sidebar {

    flex:
        0 0 275px !important;

    width:
        275px !important;
}


/* =========================================================
   MAIN PAGE
   ========================================================= */

.pkp_structure_main {

    color:
        var(--vjl-text) !important;
}


.pkp_structure_main > .page {

    background:
        #ffffff !important;

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

    border-radius:
        12px !important;

    padding:
        24px !important;

    box-shadow:
        var(--vjl-shadow) !important;
}


/* =========================================================
   ARTICLE DISPLAY PAGE
   ========================================================= */

.obj_article_details {

    background:
        #ffffff !important;

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

    border-radius:
        13px !important;

    padding:
        25px !important;

    box-shadow:
        0 8px 26px rgba(16,44,75,.08) !important;

    position:
        relative !important;

    overflow:
        hidden !important;
}


.obj_article_details:before {

    content:
        "" !important;

    position:
        absolute !important;

    left:
        0 !important;

    top:
        0 !important;

    width:
        100% !important;

    height:
        5px !important;

    background:
        linear-gradient(
            90deg,
            var(--vjl-navy),
            var(--vjl-blue),
            var(--vjl-teal),
            var(--vjl-purple),
            var(--vjl-gold)
        ) !important;
}


/* =========================================================
   ARTICLE TITLE
   ========================================================= */

.obj_article_details .title {

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

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        27px !important;

    line-height:
        1.35 !important;

    font-weight:
        700 !important;

    margin-top:
        7px !important;

    margin-bottom:
        16px !important;
}


.obj_article_details .title a {

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

    text-decoration:
        none !important;
}


.obj_article_details .title a:hover {

    color:
        var(--vjl-purple) !important;
}


/* =========================================================
   AUTHORS
   ========================================================= */

.obj_article_details .authors {

    background:
        var(--vjl-light-blue) !important;

    border-left:
        4px solid var(--vjl-teal) !important;

    border-radius:
        7px !important;

    padding:
        11px 14px !important;

    margin:
        12px 0 20px !important;

    color:
        var(--vjl-primary) !important;
}


/* =========================================================
   ARTICLE SECTIONS
   ========================================================= */

.obj_article_details .item {

    color:
        var(--vjl-text) !important;
}


.obj_article_details .item h2 {

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

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        18px !important;

    border-bottom:
        2px solid var(--vjl-teal) !important;

    padding-bottom:
        7px !important;

    margin-bottom:
        12px !important;
}


/* =========================================================
   ABSTRACT
   ========================================================= */

.obj_article_details .abstract {

    background:
        #f8fbfd !important;

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

    border-left:
        4px solid var(--vjl-purple) !important;

    border-radius:
        8px !important;

    padding:
        18px !important;

    margin:
        18px 0 !important;

    line-height:
        1.75 !important;
}


/* =========================================================
   KEYWORDS
   ========================================================= */

.obj_article_details .item.keywords {

    background:
        #f8fbfd !important;

    border-radius:
        8px !important;

    padding:
        14px !important;
}


/* =========================================================
   DOWNLOAD / PDF
   ========================================================= */

.obj_article_details .download {

    display:
        inline-block !important;

    background:
        linear-gradient(
            135deg,
            var(--vjl-blue),
            var(--vjl-purple)
        ) !important;

    color:
        #ffffff !important;

    border:
        none !important;

    border-radius:
        6px !important;

    padding:
        9px 17px !important;

    font-size:
        11px !important;

    font-weight:
        700 !important;

    text-transform:
        uppercase !important;

    text-decoration:
        none !important;

    box-shadow:
        0 4px 12px rgba(33,103,165,.20) !important;

    transition:
        all .22s ease !important;
}


.obj_article_details .download:hover {

    background:
        linear-gradient(
            135deg,
            var(--vjl-teal),
            var(--vjl-blue)
        ) !important;

    color:
        #ffffff !important;

    transform:
        translateY(-1px) !important;
}


/* =========================================================
   ARTICLE CARDS
   ========================================================= */

.obj_article_summary {

    background:
        #ffffff !important;

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

    border-left:
        4px solid var(--vjl-teal) !important;

    border-radius:
        10px !important;

    padding:
        17px 18px !important;

    margin:
        13px 0 !important;

    transition:
        all .25s ease !important;

    box-shadow:
        0 4px 14px rgba(16,44,75,.045) !important;
}


.obj_article_summary:hover {

    transform:
        translateY(-2px) !important;

    border-left-color:
        var(--vjl-purple) !important;

    box-shadow:
        0 9px 24px rgba(16,44,75,.11) !important;
}


.obj_article_summary .title a {

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

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        18px !important;

    font-weight:
        700 !important;

    line-height:
        1.4 !important;

    text-decoration:
        none !important;
}


.obj_article_summary .title a:hover {

    color:
        var(--vjl-purple) !important;
}


/* =========================================================
   CURRENT ISSUE
   ========================================================= */

.current_issue {

    background:
        #ffffff !important;

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

    border-radius:
        13px !important;

    padding:
        25px !important;

    margin-bottom:
        22px !important;

    box-shadow:
        var(--vjl-shadow) !important;

    position:
        relative !important;

    overflow:
        hidden !important;
}


.current_issue:before {

    content:
        "" !important;

    position:
        absolute !important;

    left:
        0 !important;

    top:
        0 !important;

    width:
        100% !important;

    height:
        5px !important;

    background:
        linear-gradient(
            90deg,
            var(--vjl-navy),
            var(--vjl-blue),
            var(--vjl-teal),
            var(--vjl-purple),
            var(--vjl-gold)
        ) !important;
}


.current_issue h2 {

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

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        25px !important;

    font-weight:
        700 !important;
}


.current_issue_title {

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

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        20px !important;

    font-weight:
        700 !important;

    border-bottom:
        2px solid var(--vjl-teal) !important;

    padding-bottom:
        9px !important;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.pkp_structure_sidebar .pkp_block {

    background:
        #ffffff !important;

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

    border-radius:
        11px !important;

    margin-bottom:
        17px !important;

    padding:
        17px !important;

    box-shadow:
        0 6px 20px rgba(16,44,75,.065) !important;

    position:
        relative !important;

    overflow:
        hidden !important;
}


.pkp_structure_sidebar .pkp_block:before {

    content:
        "" !important;

    display:
        block !important;

    height:
        4px !important;

    width:
        52px !important;

    background:
        linear-gradient(
            90deg,
            var(--vjl-teal),
            var(--vjl-purple)
        ) !important;

    border-radius:
        8px !important;

    margin-bottom:
        11px !important;
}


.pkp_structure_sidebar .pkp_block .title {

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

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        17px !important;

    font-weight:
        700 !important;

    margin-bottom:
        9px !important;
}


/* =========================================================
   LINKS
   ========================================================= */

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


a:hover {
    color:
        var(--vjl-purple);
}


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

button,
.button,
.btn {

    border-radius:
        6px !important;

    font-weight:
        600 !important;
}


.button,
.btn {

    background:
        var(--vjl-blue) !important;

    color:
        #ffffff !important;

    border:
        none !important;
}


.button:hover,
.btn:hover {

    background:
        var(--vjl-teal) !important;

    color:
        #ffffff !important;
}


/* =========================================================
   FOOTER
   SAME THEME AS HEADER
   ========================================================= */

.pkp_structure_footer_wrapper {

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(22,139,139,.18),
            transparent 27%
        ),
        radial-gradient(
            circle at 90% 25%,
            rgba(99,83,164,.20),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #102c4b 0%,
            #173b63 42%,
            #2167a5 70%,
            #493d82 100%
        ) !important;

    border-top:
        4px solid var(--vjl-gold) !important;

    color:
        #ffffff !important;

    padding:
        25px 18px !important;

    position:
        relative !important;

    overflow:
        hidden !important;
}


.pkp_structure_footer_wrapper:before {

    content:
        "" !important;

    position:
        absolute !important;

    left:
        0 !important;

    right:
        0 !important;

    top:
        0 !important;

    height:
        2px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--vjl-teal),
            var(--vjl-purple),
            var(--vjl-gold),
            transparent
        ) !important;
}


.pkp_structure_footer {

    max-width:
        1280px !important;

    margin:
        0 auto !important;

    position:
        relative !important;

    z-index:
        2 !important;
}


/* =========================================================
   FOOTER TEXT
   ========================================================= */

.pkp_structure_footer,
.pkp_structure_footer p,
.pkp_structure_footer a {

    color:
        #ffffff !important;
}


.pkp_structure_footer a:hover {

    color:
        var(--vjl-gold-light) !important;

    text-decoration:
        none !important;
}


.pkp_brand_footer {

    color:
        #e5f3fa !important;

    text-align:
        center !important;

    font-size:
        12px !important;

    line-height:
        1.7 !important;
}


/* =========================================================
   FOOTER JOURNAL IDENTITY
   ========================================================= */

.pkp_structure_footer .pkp_brand_footer:after {

    content:
        "VIDEO JOURNAL OF 2ND LANGUAGE LEARNING  •  INTERNATIONAL RESEARCH JOURNAL" !important;

    display:
        block !important;

    text-align:
        center !important;

    margin-top:
        12px !important;

    padding-top:
        10px !important;

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

    color:
        rgba(255,255,255,.72) !important;

    font-size:
        8.5px !important;

    letter-spacing:
        1.3px !important;

    font-weight:
        600 !important;
}


/* =========================================================
   FOOTER BLOCKS
   ========================================================= */

.pkp_structure_footer .pkp_block {

    color:
        #ffffff !important;
}


.pkp_structure_footer .pkp_block .title {

    color:
        #ffffff !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        16px !important;
}


/* =========================================================
   INPUTS
   ========================================================= */

input,
textarea,
select {

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

    border-radius:
        6px !important;

    background:
        #ffffff !important;

    color:
        var(--vjl-text) !important;
}


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

    border-color:
        var(--vjl-teal) !important;

    box-shadow:
        0 0 0 2px rgba(22,139,139,.12) !important;

    outline:
        none !important;
}


/* =========================================================
   TABLES
   ========================================================= */

table {

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

    background:
        #ffffff !important;
}


table th {

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

    color:
        #ffffff !important;

    font-weight:
        700 !important;
}


table td {

    border-color:
        var(--vjl-border) !important;
}


table tr:hover td {

    background:
        #f2f8fc !important;
}


/* =========================================================
   NOTIFICATIONS
   ========================================================= */

.notification {

    border-radius:
        8px !important;

    border-left:
        4px solid var(--vjl-teal) !important;

    background:
        #f4fafb !important;
}


/* =========================================================
   DESKTOP
   EXTRA HEADER SIZE
   ========================================================= */

@media (min-width: 901px) {

    .pkp_head_wrapper {

        padding-top:
            22px !important;

        padding-bottom:
            17px !important;
    }

    .pkp_site_name a {

        font-size:
            32px !important;
    }

    .pkp_site_name:after {

        font-size:
            10px !important;

        margin-top:
            6px !important;
    }

    .pkp_site_name_wrapper:after {

        width:
            110px !important;

        margin-top:
            11px !important;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .pkp_head_wrapper {

        padding:
            20px 14px 15px !important;
    }

    .pkp_site_name a {

        font-size:
            25px !important;
    }

    .pkp_site_name:after {

        font-size:
            8.8px !important;

        letter-spacing:
            1px !important;
    }

    .pkp_navigation_primary {

        justify-content:
            center !important;
    }

    .pkp_navigation_primary > li > a {

        padding:
            8px 9px !important;

        font-size:
            10.5px !important;
    }

    .pkp_structure_content.has_sidebar {

        flex-direction:
            column !important;

        gap:
            20px !important;

        padding:
            0 13px !important;

        margin-top:
            24px !important;
    }

    .pkp_structure_content.has_sidebar .pkp_structure_main,
    .pkp_structure_content.has_sidebar .pkp_structure_sidebar {

        width:
            100% !important;

        max-width:
            100% !important;

        flex-basis:
            auto !important;
    }

    .obj_article_details {

        padding:
            20px !important;
    }

    .obj_article_details .title {

        font-size:
            23px !important;
    }
}


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

@media (max-width: 560px) {

    .pkp_head_wrapper {

        padding:
            17px 10px 12px !important;
    }

    .pkp_site_name a {

        font-size:
            21px !important;

        letter-spacing:
            .2px !important;
    }

    .pkp_site_name:after {

        font-size:
            7.5px !important;

        letter-spacing:
            .6px !important;
    }

    .pkp_site_name_wrapper:after {

        width:
            80px !important;

        margin-top:
            8px !important;
    }

    .pkp_navigation_primary > li > a {

        padding:
            7px 7px !important;

        font-size:
            9.5px !important;
    }

    .current_issue {

        padding:
            19px !important;
    }

    .current_issue h2 {

        font-size:
            22px !important;
    }

    .obj_article_summary {

        padding:
            14px !important;
    }

    .obj_article_details {

        padding:
            16px !important;
    }

    .obj_article_details .title {

        font-size:
            21px !important;
    }

    .pkp_structure_footer_wrapper {

        padding:
            20px 12px !important;
    }
}


/* =========================================================
   FINAL OJS POLISH
   ========================================================= */

.pkp_structure_head *,
.pkp_navigation_primary_row *,
.pkp_structure_footer_wrapper * {

    box-sizing:
        border-box !important;
}


.pkp_site_name,
.pkp_site_name_wrapper {

    position:
        relative !important;

    z-index:
        10 !important;
}


.pkp_structure_head,
.pkp_structure_footer_wrapper {

    min-height:
        0 !important;
}


a,
button,
.button,
.btn,
.obj_article_summary {

    transition:
        all .22s ease !important;
}