/* =========================================================
   JMCI — STEP 7
   GLOBAL FOUNDATION
   Journal of Mathematical Cognition and Instruction
   ========================================================= */


/* ---------------------------------------------------------
   01. JMCI DESIGN TOKENS
   --------------------------------------------------------- */

:root {
    /* Brand */
    --jmci-navy: #17324D;
    --jmci-teal: #168C8C;
    --jmci-teal-dark: #117373;

    /* Text */
    --jmci-graphite: #28323C;
    --jmci-slate: #667482;

    /* Surface */
    --jmci-bg: #F4F6F8;
    --jmci-surface: #FFFFFF;
    --jmci-soft: #EAF0F5;
    --jmci-border: #D8E0E6;

    /* Link */
    --jmci-link: #176F82;

    /* Layout */
    --jmci-container: 1200px;
    --jmci-sidebar: 312px;
    --jmci-gap: 24px;

    /* Spacing */
    --jmci-space-1: 4px;
    --jmci-space-2: 8px;
    --jmci-space-3: 12px;
    --jmci-space-4: 16px;
    --jmci-space-5: 24px;
    --jmci-space-6: 32px;
    --jmci-space-7: 40px;
    --jmci-space-8: 48px;
    --jmci-space-9: 64px;

    /* Radius */
    --jmci-radius: 5px;
}


/* ---------------------------------------------------------
   02. GLOBAL RESET
   --------------------------------------------------------- */

html {
    box-sizing: border-box;
    font-size: 16px;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;

    background: var(--jmci-bg);
    color: var(--jmci-graphite);

    font-family:
        Inter,
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: 16px;
    line-height: 1.7;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* ---------------------------------------------------------
   03. GLOBAL LINKS
   --------------------------------------------------------- */

a {
    color: var(--jmci-link);
    text-decoration: none;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

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


/* ---------------------------------------------------------
   04. OJS PAGE FOUNDATION
   --------------------------------------------------------- */

.pkp_structure_page {
    width: 100%;
    min-height: 100vh;
    background: var(--jmci-bg);
}


/* ---------------------------------------------------------
   05. OJS CONTENT CONTAINER
   --------------------------------------------------------- */

.pkp_structure_content.container {
    width: 100%;
    max-width: var(--jmci-container);

    margin-left: auto;
    margin-right: auto;

    padding-left: 24px;
    padding-right: 24px;
}


/* ---------------------------------------------------------
   06. MAIN CONTENT AREA
   --------------------------------------------------------- */

.pkp_structure_main {
    color: var(--jmci-graphite);
}


/* ---------------------------------------------------------
   07. MAIN CONTENT TYPOGRAPHY
   --------------------------------------------------------- */

.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main h4,
.pkp_structure_main h5 {
    color: var(--jmci-navy);

    font-family:
        Inter,
        "Helvetica Neue",
        Arial,
        sans-serif;

    line-height: 1.3;
}

.pkp_structure_main h1 {
    font-size: 32px;
    font-weight: 700;
}

.pkp_structure_main h2 {
    font-size: 26px;
    font-weight: 700;
}

.pkp_structure_main h3 {
    font-size: 21px;
    font-weight: 700;
}

.pkp_structure_main h4 {
    font-size: 17px;
    font-weight: 600;
}

.pkp_structure_main p {
    margin-top: 0;
    margin-bottom: 24px;
}


/* ---------------------------------------------------------
   08. OJS SIDEBAR FOUNDATION
   --------------------------------------------------------- */

.pkp_structure_sidebar {
    color: var(--jmci-graphite);
}


/* ---------------------------------------------------------
   09. GENERIC OJS BLOCK FOUNDATION
   --------------------------------------------------------- */

.pkp_block {
    margin-bottom: 24px;

    background: var(--jmci-surface);

    border: 1px solid var(--jmci-border);
    border-radius: var(--jmci-radius);
}


/* ---------------------------------------------------------
   10. BLOCK TITLE
   --------------------------------------------------------- */

.pkp_block .title {
    color: var(--jmci-navy);

    font-size: 15px;
    font-weight: 700;

    line-height: 1.4;

    padding: 16px 20px;

    border-bottom: 1px solid var(--jmci-border);
}


/* ---------------------------------------------------------
   11. BLOCK CONTENT
   --------------------------------------------------------- */

.pkp_block .content {
    padding: 16px 20px;
}


/* ---------------------------------------------------------
   12. LIST NORMALIZATION
   --------------------------------------------------------- */

.pkp_structure_main ul,
.pkp_structure_main ol {
    margin-top: 0;
    margin-bottom: 24px;
}

.pkp_structure_main li {
    margin-bottom: 8px;
}


/* ---------------------------------------------------------
   13. IMAGES
   --------------------------------------------------------- */

img {
    max-width: 100%;
    height: auto;
}


/* ---------------------------------------------------------
   14. BUTTON FOUNDATION
   --------------------------------------------------------- */

button,
.btn,
input[type="submit"],
input[type="button"] {
    border-radius: var(--jmci-radius);

    font-family:
        Inter,
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-weight: 600;
}


/* ---------------------------------------------------------
   15. FORM FOUNDATION
   --------------------------------------------------------- */

input,
textarea,
select {
    font-family:
        Inter,
        "Helvetica Neue",
        Arial,
        sans-serif;

    color: var(--jmci-graphite);

    border: 1px solid var(--jmci-border);
    border-radius: 4px;

    background: var(--jmci-surface);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--jmci-teal);

    outline: none;

    box-shadow:
        0 0 0 2px var(--jmci-soft);
}


/* ---------------------------------------------------------
   16. FOOTER FOUNDATION
   --------------------------------------------------------- */

footer.footer {
    margin-top: 64px;

    background: var(--jmci-navy);
    color: #FFFFFF;
}


/* ---------------------------------------------------------
   17. RESPONSIVE FOUNDATION
   --------------------------------------------------------- */

@media (max-width: 991px) {

    .pkp_structure_content.container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .pkp_structure_main h1 {
        font-size: 28px;
    }

    .pkp_structure_main h2 {
        font-size: 24px;
    }

}


@media (max-width: 767px) {

    body {
        font-size: 15.5px;
    }

    .pkp_structure_content.container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .pkp_structure_main h1 {
        font-size: 26px;
    }

    .pkp_structure_main h2 {
        font-size: 22px;
    }

    .pkp_structure_main h3 {
        font-size: 19px;
    }

}
/* =========================================================
   JMCI — STEP 8
   MASTHEAD TUNING V2
   Fix: OJS / Bootstrap header clipping
   ========================================================= */


/* ---------------------------------------------------------
   01. OUTER HEADER
   --------------------------------------------------------- */

#headerNavigationContainer {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

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

    background: #FFFFFF !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    overflow: visible !important;
}


/* ---------------------------------------------------------
   02. HEADER CONTAINER
   --------------------------------------------------------- */

#headerNavigationContainer > .container-fluid {
    width: 100% !important;

    max-width: 1200px !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 auto !important;

    padding: 0 24px !important;
}


/* ---------------------------------------------------------
   03. MASTHEAD WRAPPER
   --------------------------------------------------------- */

#headerNavigationContainer .navbar-header {

    float: none !important;

    display: block !important;

    position: relative !important;

    width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 18px 0 14px !important;

    overflow: visible !important;

    background: #FFFFFF !important;
}


/* ---------------------------------------------------------
   04. REMOVE BOOTSTRAP CLEARFIX EFFECT
   --------------------------------------------------------- */

#headerNavigationContainer .navbar-header::before,
#headerNavigationContainer .navbar-header::after {

    display: none !important;

    content: none !important;
}


/* ---------------------------------------------------------
   05. SITE NAME
   --------------------------------------------------------- */

#headerNavigationContainer h1.site-name {

    display: block !important;

    float: none !important;

    position: relative !important;

    width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    line-height: 0 !important;

    overflow: visible !important;
}


/* ---------------------------------------------------------
   06. BRAND LINK
   --------------------------------------------------------- */

#headerNavigationContainer
h1.site-name
a.navbar-brand.navbar-brand-logo {

    display: block !important;

    float: none !important;

    position: relative !important;

    width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    line-height: 0 !important;

    overflow: visible !important;
}


/* ---------------------------------------------------------
   07. MASTHEAD IMAGE
   --------------------------------------------------------- */

#headerNavigationContainer
h1.site-name
a.navbar-brand.navbar-brand-logo
img {

    display: block !important;

    position: relative !important;

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    max-height: none !important;

    min-height: 0 !important;

    margin: 0 auto !important;

    padding: 0 !important;

    object-fit: contain !important;

    border: 0 !important;
}


/* ---------------------------------------------------------
   08. NAVIGATION SEPARATION
   --------------------------------------------------------- */

#headerNavigationContainer #nav-menu {

    clear: both !important;

    width: 100% !important;

    height: auto !important;

    min-height: 48px !important;

    margin: 0 !important;

    padding: 0 !important;

    background: #FFFFFF !important;

    border-top: 1px solid #D8E0E6 !important;

    border-bottom: 1px solid #D8E0E6 !important;
}


/* ---------------------------------------------------------
   09. NAVIGATION LIST
   --------------------------------------------------------- */

#headerNavigationContainer #nav-menu > ul {

    min-height: 48px !important;

    margin: 0 !important;

    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
}


/* ---------------------------------------------------------
   10. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    #headerNavigationContainer > .container-fluid {

        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    #headerNavigationContainer .navbar-header {

        padding: 12px 0 10px !important;
    }

    #headerNavigationContainer
    h1.site-name
    a.navbar-brand.navbar-brand-logo
    img {

        width: 100% !important;

        height: auto !important;

        max-width: 100% !important;
    }
}
/* =========================================================
   JMCI — STEP 9
   GLOBAL JOURNAL SHELL
   JDM-STYLE CONTAINER
   ========================================================= */


/* ---------------------------------------------------------
   01. OUTER PAGE
   --------------------------------------------------------- */

html,
body {

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

    background: #E9EEF2 !important;
}


/* ---------------------------------------------------------
   02. MAIN JOURNAL SHELL
   --------------------------------------------------------- */

.pkp_structure_page {

    width: 100% !important;

    max-width: 1200px !important;

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

    background: #FFFFFF !important;

    box-sizing: border-box !important;

    min-height: 100vh !important;
}


/* ---------------------------------------------------------
   03. HEADER
   --------------------------------------------------------- */

.pkp_structure_head {

    width: 100% !important;

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

    background: #FFFFFF !important;
}


/* ---------------------------------------------------------
   04. MASTHEAD AREA
   --------------------------------------------------------- */

#headerNavigationContainer {

    width: 100% !important;

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

    background: #FFFFFF !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   05. MASTHEAD IMAGE CONTAINER
   --------------------------------------------------------- */

#headerNavigationContainer
.container-fluid {

    width: 100% !important;

    max-width: none !important;

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

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   06. NAVIGATION
   --------------------------------------------------------- */

#headerNavigationContainer
#nav-menu {

    width: 100% !important;

    margin: 0 !important;

    background: #FFFFFF !important;

    border-top: 1px solid #D8E0E6 !important;

    border-bottom: 1px solid #D8E0E6 !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   07. NAVIGATION INNER
   --------------------------------------------------------- */

#headerNavigationContainer
#nav-menu
> ul {

    max-width: 1200px !important;

    margin: 0 auto !important;

    padding: 0 12px !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   08. NAVIGATION LINKS
   --------------------------------------------------------- */

#headerNavigationContainer
#nav-menu
> ul
> li
> a {

    min-height: 48px !important;

    padding: 0 18px !important;

    display: flex !important;

    align-items: center !important;

    color: #173F63 !important;

    background: transparent !important;

    font-size: 14px !important;

    font-weight: 500 !important;

    text-decoration: none !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   09. NAVIGATION HOVER
   --------------------------------------------------------- */

#headerNavigationContainer
#nav-menu
> ul
> li
> a:hover {

    color: #087F91 !important;

    background: #F3F7F8 !important;

    text-decoration: none !important;
}


/* ---------------------------------------------------------
   10. ACTIVE NAVIGATION
   --------------------------------------------------------- */

#headerNavigationContainer
#nav-menu
> ul
> li.current
> a,

#headerNavigationContainer
#nav-menu
> ul
> li.active
> a {

    color: #087F91 !important;

    background: #F3F7F8 !important;

    font-weight: 600 !important;
}


/* ---------------------------------------------------------
   11. CONTENT SHELL
   --------------------------------------------------------- */

.pkp_structure_content {

    width: 100% !important;

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

    background: #FFFFFF !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   12. CONTENT CONTAINER
   --------------------------------------------------------- */

.pkp_structure_content.container {

    width: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    padding: 32px 28px 50px 28px !important;

    background: #FFFFFF !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   13. MAIN CONTENT
   --------------------------------------------------------- */

.pkp_structure_main {

    box-sizing: border-box !important;

    padding-left: 14px !important;

    padding-right: 14px !important;
}


/* ---------------------------------------------------------
   14. SIDEBAR
   --------------------------------------------------------- */

.pkp_structure_sidebar {

    box-sizing: border-box !important;

    padding-left: 14px !important;

    padding-right: 14px !important;
}


/* ---------------------------------------------------------
   15. REMOVE DEFAULT FULL-WIDTH EFFECT
   --------------------------------------------------------- */

.pkp_structure_main,
.pkp_structure_sidebar {

    background: transparent !important;
}


/* ---------------------------------------------------------
   16. FOOTER
   --------------------------------------------------------- */

.pkp_structure_footer_wrapper {

    width: 100% !important;

    margin: 0 !important;

    background: #173F63 !important;
}


.pkp_structure_footer {

    max-width: 1200px !important;

    margin: 0 auto !important;

    background: #173F63 !important;

    color: #FFFFFF !important;
}


/* ---------------------------------------------------------
   17. RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1200px) {

    .pkp_structure_page {

        max-width: 100% !important;

        margin: 0 !important;
    }
}


/* ---------------------------------------------------------
   18. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .pkp_structure_content.container {

        padding: 24px 16px 40px 16px !important;
    }

    .pkp_structure_main,
    .pkp_structure_sidebar {

        width: 100% !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
/* =========================================================
   JMCI — STEP 9B
   MODERN COGNITIVE NAVIGATION
   ========================================================= */


/* ---------------------------------------------------------
   01. NAVIGATION BAR
   --------------------------------------------------------- */

#headerNavigationContainer #nav-menu {

    width: 100% !important;

    min-height: 52px !important;

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

    background: #173F63 !important;

    border-top: 3px solid #087F91 !important;

    border-bottom: 3px solid #087F91 !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   02. NAVIGATION INNER
   --------------------------------------------------------- */

#headerNavigationContainer
#nav-menu
> ul {

    display: flex !important;

    align-items: stretch !important;

    width: 100% !important;

    min-height: 46px !important;

    margin: 0 !important;

    padding: 0 12px !important;

    box-sizing: border-box !important;

    list-style: none !important;
}


/* ---------------------------------------------------------
   03. NAVIGATION ITEM
   --------------------------------------------------------- */

#headerNavigationContainer
#nav-menu
> ul
> li {

    margin: 0 !important;

    padding: 0 !important;
}


/* ---------------------------------------------------------
   04. NAVIGATION LINK
   --------------------------------------------------------- */

#headerNavigationContainer
#nav-menu
> ul
> li
> a {

    display: flex !important;

    align-items: center !important;

    min-height: 46px !important;

    padding: 0 20px !important;

    color: #FFFFFF !important;

    background: transparent !important;

    border: none !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    letter-spacing: .2px !important;

    text-transform: uppercase !important;

    text-decoration: none !important;

    transition:
        background-color .2s ease,
        color .2s ease !important;
}


/* ---------------------------------------------------------
   05. HOVER
   --------------------------------------------------------- */

#headerNavigationContainer
#nav-menu
> ul
> li
> a:hover {

    color: #FFFFFF !important;

    background: #087F91 !important;

    text-decoration: none !important;
}


/* ---------------------------------------------------------
   06. ACTIVE ITEM
   --------------------------------------------------------- */

#headerNavigationContainer
#nav-menu
> ul
> li.current
> a,

#headerNavigationContainer
#nav-menu
> ul
> li.active
> a {

    color: #FFFFFF !important;

    background: #087F91 !important;

    font-weight: 700 !important;
}


/* ---------------------------------------------------------
   07. SEARCH AREA
   --------------------------------------------------------- */

#headerNavigationContainer
.navbar-form {

    display: flex !important;

    align-items: center !important;

    margin: 0 !important;

    padding: 7px 10px !important;
}


/* ---------------------------------------------------------
   08. SEARCH INPUT
   --------------------------------------------------------- */

#headerNavigationContainer
.navbar-form
.form-control {

    height: 34px !important;

    min-width: 180px !important;

    padding: 0 12px !important;

    background: #FFFFFF !important;

    border: 1px solid #D7E1E7 !important;

    border-radius: 4px !important;

    box-shadow: none !important;

    color: #173F63 !important;

    font-size: 13px !important;
}


/* ---------------------------------------------------------
   09. SEARCH BUTTON
   --------------------------------------------------------- */

#headerNavigationContainer
.navbar-form
button {

    height: 34px !important;

    margin-left: 6px !important;

    padding: 0 15px !important;

    background: #FFFFFF !important;

    border: 1px solid #D7E1E7 !important;

    border-radius: 4px !important;

    color: #173F63 !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    transition:
        background-color .2s ease,
        color .2s ease !important;
}


#headerNavigationContainer
.navbar-form
button:hover {

    background: #087F91 !important;

    border-color: #087F91 !important;

    color: #FFFFFF !important;
}


/* ---------------------------------------------------------
   10. NAVIGATION BOTTOM SEPARATION
   --------------------------------------------------------- */

#headerNavigationContainer #nav-menu::after {

    display: block !important;

    height: 2px !important;

    background: #12A6B8 !important;

    content: "" !important;
}


/* ---------------------------------------------------------
   11. REMOVE DEFAULT NAVBAR EFFECTS
   --------------------------------------------------------- */

#headerNavigationContainer
.navbar {

    border: none !important;

    box-shadow: none !important;
}


/* ---------------------------------------------------------
   12. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    #headerNavigationContainer
    #nav-menu {

        min-height: auto !important;

        border-top-width: 2px !important;

        border-bottom-width: 2px !important;
    }


    #headerNavigationContainer
    #nav-menu
    > ul {

        display: block !important;

        padding: 0 !important;
    }


    #headerNavigationContainer
    #nav-menu
    > ul
    > li
    > a {

        min-height: 44px !important;

        padding: 0 16px !important;
    }


    #headerNavigationContainer
    .navbar-form {

        padding: 8px 12px !important;
    }


    #headerNavigationContainer
    .navbar-form
    .form-control {

        min-width: 0 !important;

        width: 100% !important;
    }
}
/* =========================================================
   JMCI — STEP 9C
   NAVIGATION HEIGHT & ONE-LINE ALIGNMENT
   ========================================================= */


/* ---------------------------------------------------------
   01. FIX NAVIGATION HEIGHT
   --------------------------------------------------------- */

#headerNavigationContainer #nav-menu {

    height: 52px !important;

    min-height: 52px !important;

    max-height: 52px !important;

    padding: 0 !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   02. MAIN NAVIGATION
   --------------------------------------------------------- */

#headerNavigationContainer
#main-navigation {

    display: flex !important;

    align-items: center !important;

    height: 48px !important;

    min-height: 48px !important;

    margin: 0 !important;

    padding: 0 10px !important;

    list-style: none !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   03. NAVIGATION ITEMS
   --------------------------------------------------------- */

#headerNavigationContainer
#main-navigation
> li {

    height: 48px !important;

    margin: 0 !important;

    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
}


/* ---------------------------------------------------------
   04. NAVIGATION LINKS
   --------------------------------------------------------- */

#headerNavigationContainer
#main-navigation
> li
> a {

    height: 48px !important;

    min-height: 48px !important;

    display: flex !important;

    align-items: center !important;

    padding: 0 20px !important;

    white-space: nowrap !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   05. SEARCH CONTAINER
   --------------------------------------------------------- */

#headerNavigationContainer
#nav-menu
> .pull-md-right {

    height: 52px !important;

    display: flex !important;

    align-items: center !important;

    margin: 0 !important;

    padding: 0 10px !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   06. SEARCH FORM
   --------------------------------------------------------- */

#headerNavigationContainer
#nav-menu
.navbar-form {

    height: 52px !important;

    display: flex !important;

    align-items: center !important;

    margin: 0 !important;

    padding: 0 0 0 8px !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   07. SEARCH INPUT
   --------------------------------------------------------- */

#headerNavigationContainer
#nav-menu
.navbar-form
.form-control {

    width: 180px !important;

    height: 34px !important;

    margin: 0 !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   08. SEARCH BUTTON
   --------------------------------------------------------- */

#headerNavigationContainer
#nav-menu
.navbar-form
button {

    height: 34px !important;

    margin-left: 6px !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   09. REMOVE EXTRA NAVIGATION HEIGHT
   --------------------------------------------------------- */

#headerNavigationContainer
#nav-menu::after {

    height: 2px !important;

    margin: 0 !important;
}


/* ---------------------------------------------------------
   10. KEEP NAVBAR FROM WRAPPING
   --------------------------------------------------------- */

#headerNavigationContainer
#nav-menu {

    white-space: nowrap !important;
}


/* ---------------------------------------------------------
   11. DESKTOP ONLY
   --------------------------------------------------------- */

@media (min-width: 992px) {

    #headerNavigationContainer
    #nav-menu {

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;
    }

    #headerNavigationContainer
    #main-navigation {

        flex: 1 1 auto !important;
    }

    #headerNavigationContainer
    #nav-menu
    > .pull-md-right {

        flex: 0 0 auto !important;

        margin-left: auto !important;
    }
}


/* ---------------------------------------------------------
   12. MOBILE
   --------------------------------------------------------- */

@media (max-width: 991px) {

    #headerNavigationContainer
    #nav-menu {

        height: auto !important;

        max-height: none !important;

        overflow: visible !important;
    }

    #headerNavigationContainer
    #main-navigation {

        height: auto !important;

        display: block !important;
    }

    #headerNavigationContainer
    #main-navigation
    > li {

        height: auto !important;
    }
}
/* =========================================================
   JMCI — STEP 10
   MAIN CONTAINER & CONTENT SYSTEM
   ========================================================= */


/* ---------------------------------------------------------
   01. PAGE BACKGROUND
   --------------------------------------------------------- */

body {

    background: #eef2f5 !important;

    color: #173f63 !important;
}


/* ---------------------------------------------------------
   02. MASTER CONTENT CONTAINER
   --------------------------------------------------------- */

#pkp_content_main {

    max-width: 1200px !important;

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

    background: #ffffff !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   03. CONTENT AREA
   --------------------------------------------------------- */

#pkp_content_main
.container-fluid {

    max-width: 1200px !important;

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

    padding-left: 20px !important;
    padding-right: 20px !important;
}


/* ---------------------------------------------------------
   04. MAIN CONTENT COLUMN
   --------------------------------------------------------- */

main.pkP_structure_main,
main {

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   05. CONTENT TYPOGRAPHY
   --------------------------------------------------------- */

#pkp_content_main h1,
#pkp_content_main h2,
#pkp_content_main h3 {

    color: #173f63 !important;
}


/* ---------------------------------------------------------
   06. MAIN TITLE
   --------------------------------------------------------- */

#pkp_content_main h1 {

    font-weight: 700 !important;

    letter-spacing: -0.3px !important;

    line-height: 1.25 !important;

    margin-top: 0 !important;

    margin-bottom: 18px !important;
}


/* ---------------------------------------------------------
   07. BODY TEXT
   --------------------------------------------------------- */

#pkp_content_main p {

    line-height: 1.7 !important;

    color: #183b57 !important;
}


/* ---------------------------------------------------------
   08. SIDEBAR
   --------------------------------------------------------- */

#pkp_content_main
aside {

    box-sizing: border-box !important;

    padding-left: 12px !important;
}


/* ---------------------------------------------------------
   09. SIDEBAR BLOCKS
   --------------------------------------------------------- */

#pkp_content_main
aside
.pkp_block {

    background: #ffffff !important;

    border: 1px solid #d9e1e7 !important;

    border-top: 3px solid #173f63 !important;

    border-radius: 5px !important;

    margin-bottom: 18px !important;

    overflow: hidden !important;

    box-shadow: 0 2px 8px rgba(23,63,99,0.05) !important;
}


/* ---------------------------------------------------------
   10. SIDEBAR HEADINGS
   --------------------------------------------------------- */

#pkp_content_main
aside
.pkp_block
.title {

    color: #173f63 !important;

    font-weight: 700 !important;

    font-size: 16px !important;

    padding: 14px 16px !important;

    border-bottom: 1px solid #dce4e9 !important;

    background: #f7fafc !important;
}


/* ---------------------------------------------------------
   11. SIDEBAR LINKS
   --------------------------------------------------------- */

#pkp_content_main
aside
.pkp_block
ul
li {

    border-bottom: 1px solid #e5eaee !important;
}


#pkp_content_main
aside
.pkp_block
ul
li:last-child {

    border-bottom: none !important;
}


#pkp_content_main
aside
.pkp_block
a {

    color: #087f91 !important;

    transition: all .2s ease !important;
}


/* ---------------------------------------------------------
   12. SIDEBAR HOVER
   --------------------------------------------------------- */

#pkp_content_main
aside
.pkp_block
a:hover {

    color: #173f63 !important;

    padding-left: 4px !important;

    text-decoration: none !important;
}


/* ---------------------------------------------------------
   13. CONTENT / SIDEBAR SPACING
   --------------------------------------------------------- */

#pkp_content_main
.row {

    margin-left: -10px !important;

    margin-right: -10px !important;
}


#pkp_content_main
[class*="col-"] {

    padding-left: 10px !important;

    padding-right: 10px !important;
}


/* ---------------------------------------------------------
   14. MOBILE
   --------------------------------------------------------- */

@media (max-width: 991px) {

    #pkp_content_main {

        width: 100% !important;

        max-width: 100% !important;
    }

    #pkp_content_main
    .container-fluid {

        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    #pkp_content_main
    aside {

        padding-left: 0 !important;

        margin-top: 25px !important;
    }
}
/* =========================================================
   JMCI — STEP 11
   MASTER JOURNAL CONTAINER
   ========================================================= */

/* Main journal frame */
.pkp_structure_page {

    max-width: 1200px !important;

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

    background: #ffffff !important;

    box-shadow: 0 0 24px rgba(23, 63, 99, 0.08) !important;

    box-sizing: border-box !important;
}


/* Keep all major structural areas aligned */
.pkp_structure_head,
.pkp_structure_content,
.pkp_structure_footer {

    max-width: 1200px !important;

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

    box-sizing: border-box !important;
}


/* Main content surface */
.pkp_structure_content {

    background: #ffffff !important;
}


/* Give content breathing room */
.pkp_structure_main {

    padding-top: 34px !important;

    padding-bottom: 45px !important;
}


/* Keep sidebar visually aligned with content */
.pkp_structure_sidebar {

    padding-top: 0 !important;
}


/* Subtle separation between navigation and body */
.pkp_structure_content {

    border-top: 1px solid #e5ebef !important;
}


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

    .pkp_structure_page {

        border-left: 1px solid #e1e7eb !important;

        border-right: 1px solid #e1e7eb !important;
    }

}


/* Mobile */
@media (max-width: 991px) {

    .pkp_structure_page {

        width: 100% !important;

        max-width: 100% !important;

        box-shadow: none !important;

        border: none !important;
    }

}
/* =========================================================
   JMCI — SCHOLARLY SIDEBAR v2
   ========================================================= */

.jmci-sidebar {
    width: 100%;
    margin: 0 0 28px 0;
    background: #ffffff;
    border: 1px solid #d8e3e9;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 7px rgba(18, 59, 99, 0.06);
}

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

.jmci-sidebar .sidebar-header {
    position: relative;
    margin: 0;
    padding: 16px 20px 15px 20px;

    background: #123B63;
    color: #ffffff;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;

    letter-spacing: 0.35px;
    text-transform: uppercase;
}

/* Teal identity line */

.jmci-sidebar .sidebar-header::after {
    content: "";
    display: block;

    width: 42px;
    height: 3px;

    margin-top: 9px;

    background: #0797A8;
    border-radius: 2px;
}

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

.jmci-sidebar .sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.jmci-sidebar .sidebar-menu li {
    position: relative;

    margin: 0;
    padding: 0;

    border-bottom: 1px solid #e1e9ed;
}

.jmci-sidebar .sidebar-menu li:last-child {
    border-bottom: none;
}

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

.jmci-sidebar .sidebar-menu li a {
    position: relative;

    display: block;

    padding: 12px 18px 12px 20px;

    background: #ffffff;
    color: #245474;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;

    text-decoration: none;

    transition:
        background-color .18s ease,
        color .18s ease,
        padding-left .18s ease;
}

/* Teal vertical marker */

.jmci-sidebar .sidebar-menu li a::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background: transparent;

    transition: background-color .18s ease;
}

/* ================= HOVER ================= */

.jmci-sidebar .sidebar-menu li a:hover {
    background: #EEF4F7;
    color: #123B63;

    padding-left: 25px;
}

.jmci-sidebar .sidebar-menu li a:hover::before {
    background: #0797A8;
}

/* ================= ACTIVE ================= */

.jmci-sidebar .sidebar-menu li.active a,
.jmci-sidebar .sidebar-menu li a.active {
    background: #EEF4F7;
    color: #123B63;

    font-weight: 700;
}

.jmci-sidebar .sidebar-menu li.active a::before,
.jmci-sidebar .sidebar-menu li a.active::before {
    background: #0797A8;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 991px) {

    .jmci-sidebar {
        margin-top: 24px;
    }

    .jmci-sidebar .sidebar-header {
        padding: 15px 18px 14px 18px;
    }

    .jmci-sidebar .sidebar-menu li a {
        padding: 11px 16px 11px 18px;
    }

}

@media (max-width: 575px) {

    .jmci-sidebar {
        border-radius: 3px;
        box-shadow: none;
    }

    .jmci-sidebar .sidebar-header {
        font-size: 15px;
    }

    .jmci-sidebar .sidebar-menu li a {
        font-size: 13.5px;
    }
}
/* =========================================================
   JMCI — CONTENT ALIGNMENT
   STEP: Navigation → Main Content
   ========================================================= */

/* Main content container */
.pkp_structure_content.container {
    padding-top: 32px !important;
    padding-bottom: 40px !important;
}

/* Main column — remove excessive default top spacing */
.pkp_structure_main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Sidebar — start at exactly the same vertical level */
.pkp_structure_sidebar {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Keep the two columns visually aligned */
.pkp_structure_content .row {
    align-items: flex-start !important;
}

/* First element inside main content */
.pkp_structure_main > *:first-child {
    margin-top: 0 !important;
}

/* First JMCI philosophy block */
.jmci-wrapper {
    margin-top: 0 !important;
}

/* Philosophy box */
.jmci-philosophy,
.jmci-philosophy-box {
    margin-top: 0 !important;
}

/* Prevent sidebar from being pushed downward */
.pkp_structure_sidebar > *:first-child {
    margin-top: 0 !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {

    .pkp_structure_content.container {
        padding-top: 24px !important;
    }

    .pkp_structure_main,
    .pkp_structure_sidebar {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}
/* =========================================================
   JMCI — TEMPLATE CARD
   FINAL TUNING
   ========================================================= */

/* Outer sidebar card */
.template-sidebar {
    background: #ffffff;
    border: 1px solid #d9e2e8;
    border-radius: 4px;
    overflow: hidden;
}

/* Header tetap tegas */
.template-sidebar .sidebar-header {
    background: #123f67;
    color: #ffffff;
    padding: 16px 20px;

    font-size: 16px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;

    border-bottom: 3px solid #0797a8;
}

/* Area isi */
.template-sidebar .template-wrapper {
    padding: 18px;
    background: #ffffff;
}

/* =========================================================
   TEMPLATE INNER CARD
   ========================================================= */

.template-sidebar .template-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    box-sizing: border-box;

    padding: 18px 14px 16px;

    background: #f7fafb;

    border: 1px solid #d8e3e8;
    border-left: 3px solid #0797a8;

    border-radius: 4px;

    text-decoration: none;

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

/* =========================================================
   WORD IMAGE — CONTROLLED SIZE
   ========================================================= */

.template-sidebar .template-cta img.template-icon {
    display: block !important;

    width: 78px !important;
    height: 78px !important;

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

    min-width: 78px !important;
    min-height: 78px !important;

    object-fit: contain !important;

    padding: 8px !important;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #d8e3e8;
    border-radius: 5px;

    margin: 0 0 14px 0 !important;
}

/* =========================================================
   TEMPLATE TITLE
   ========================================================= */

.template-sidebar .template-text {
    display: block;

    width: 100%;

    color: #123f67;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.45;

    text-align: center;

    text-decoration: none;
}

/* Arrow */
.template-sidebar .template-text::after {
    content: " ↗";

    color: #0797a8;
    font-weight: 700;
}

/* =========================================================
   HOVER
   ========================================================= */

.template-sidebar .template-cta:hover {
    background: #eef6f8;

    border-color: #b9d5dc;
    border-left-color: #123f67;

    box-shadow: 0 4px 12px rgba(18, 63, 103, .08);

    text-decoration: none;
}

.template-sidebar .template-cta:hover .template-icon {
    border-color: #0797a8;
}

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

@media (max-width: 575px) {

    .template-sidebar .template-wrapper {
        padding: 14px;
    }

    .template-sidebar .template-cta {
        padding: 16px 12px;
    }

    .template-sidebar .template-cta img.template-icon {
        width: 68px !important;
        height: 68px !important;

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

        min-width: 68px !important;
        min-height: 68px !important;
    }
}
/* =========================================================
   JMCI — CENTER CONTENT FOR SIDEBAR CARDS
   ========================================================= */

.jmci-sidebar .template-cta {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Icon / symbol */
.jmci-sidebar .template-cta > div {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Text */
.jmci-sidebar .template-text {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

/* Visitor content */
.jmci-sidebar .visitor-sidebar .template-wrapper,
.visitor-sidebar .template-wrapper {
    text-align: center !important;
}

.visitor-sidebar .template-wrapper img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* =========================================================
   JMCI — CENTER ICON INSIDE CONTACT & RECRUITMENT CARDS
   ========================================================= */

.jmci-sidebar .template-cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Container ikon */
.jmci-sidebar .template-cta > div:first-child {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;

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

/* Ikon */
.contact-sidebar .template-cta > div:first-child,
.recruitment-sidebar .template-cta > div:first-child {
    text-align: center !important;
}

/* Teks */
.jmci-sidebar .template-text {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* =====================================================
   JMCI — HIDE DEFAULT OJS / PKP BRANDING
   ===================================================== */

footer.footer img[src*="ojs_brand.png"] {
    display: none !important;
}

footer.footer .col-md-2:has(img[src*="ojs_brand.png"]) {
    display: none !important;
}
/* =========================================================
   JMCI — COMPACT ARTICLE LIST
   Scholarly / Minimal / Academic
   ========================================================= */

/* ARTICLE ITEM */
.obj_article_summary {
    padding: 13px 0 15px 0 !important;
    margin: 0 !important;
    text-align: left !important;
}

/* ARTICLE TITLE */
.obj_article_summary h3,
.obj_article_summary h3.title,
.obj_article_summary .title {
    font-size: 15px !important;
    line-height: 1.38 !important;
    font-weight: 650 !important;
    margin: 0 0 6px 0 !important;
    color: #086b83 !important;
}

/* AUTHOR */
.obj_article_summary .authors,
.obj_article_summary .author {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    color: #475569 !important;
    margin: 0 0 2px 0 !important;
}

/* PAGES */
.obj_article_summary .pages {
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: #64748b !important;
    margin: 0 0 9px 0 !important;
}

/* PDF BUTTON */
.obj_article_summary .btn,
.obj_article_summary a.btn {
    font-size: 11px !important;
    line-height: 1.2 !important;
    padding: 5px 12px !important;
    border-radius: 4px !important;
    margin-top: 2px !important;
}

/* ARTICLE SEPARATOR */
.obj_article_summary + .obj_article_summary {
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 15px !important;
}

/* ARTICLES HEADING */
.current_issue .articles h2,
.current_issue h2 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #173f63 !important;
    margin-bottom: 8px !important;
}

/* ARTICLE LIST CONTAINER */
.current_issue .obj_article_summary {
    max-width: 100% !important;
}

/* KEEP PDF BUTTON COMPACT */
.obj_article_summary .galley-link,
.obj_article_summary .galley-link.btn {
    font-size: 11px !important;
    padding: 5px 12px !important;
}
/* JMCI ABSTRACT — SCHOLARLY TYPOGRAPHY */

.article-main .article-summary .article-abstract {
    text-align: justify !important;
}

.article-main .article-summary .article-abstract p {
    text-align: justify !important;
    text-justify: inter-word !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: #334155 !important;
    margin: 0 !important;
}
/* =========================================================
   JMCI — HEADER / MASTHEAD FINAL FIX
   Desktop + Mobile
   ========================================================= */

/* ---------- HEADER WRAPPER ---------- */

#headerNavigationContainer {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

#headerNavigationContainer > .container-fluid {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ---------- NAVBAR HEADER ---------- */

#headerNavigationContainer .navbar-header {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ---------- SITE NAME / MASTHEAD ---------- */

#headerNavigationContainer .site-name {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    float: none !important;
    display: block !important;
}


/* ---------- LOGO LINK ---------- */

#headerNavigationContainer .site-name > a.navbar-brand,
#headerNavigationContainer .site-name > a.navbar-brand-logo {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    min-height: 0 !important;

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

    float: none !important;

    line-height: 0 !important;

    box-sizing: border-box !important;
}


/* ---------- JMCI MASTHEAD IMAGE ---------- */

#headerNavigationContainer .site-name > a.navbar-brand img,
#headerNavigationContainer .site-name > a.navbar-brand-logo img {
    display: block !important;

    width: 100% !important;
    height: auto !important;

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

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

    object-fit: contain !important;

    box-sizing: border-box !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 768px) {

    #headerNavigationContainer .site-name {
        width: 100% !important;
        height: auto !important;
    }

    #headerNavigationContainer .site-name > a.navbar-brand,
    #headerNavigationContainer .site-name > a.navbar-brand-logo {
        width: 100% !important;
        height: auto !important;
    }

    #headerNavigationContainer .site-name > a.navbar-brand img,
    #headerNavigationContainer .site-name > a.navbar-brand-logo img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

}


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

@media (max-width: 767px) {

    #headerNavigationContainer .site-name {
        width: auto !important;
        height: auto !important;
    }

    #headerNavigationContainer .site-name > a.navbar-brand,
    #headerNavigationContainer .site-name > a.navbar-brand-logo {
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
    }

    #headerNavigationContainer .site-name > a.navbar-brand img,
    #headerNavigationContainer .site-name > a.navbar-brand-logo img {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 70px !important;
    }

}
/* =========================================================
   JMCI — STEP 8E
   MOBILE MASTHEAD STRUCTURE FIX
   ========================================================= */

@media (max-width: 767px) {

    /* 1. Restore collapsed site-name */
    .site-name {
        height: 50px !important;
        min-height: 50px !important;
        overflow: visible !important;
    }

    /* 2. Restore brand structure */
    .site-name > a,
    .navbar-brand {
        height: 50px !important;
        min-height: 50px !important;
        padding: 15px !important;
        margin: 0 !important;
        display: block !important;
        float: left !important;
        box-sizing: border-box !important;
    }

    /* 3. Keep logo at its CURRENT size */
    .site-name > a img,
    .navbar-brand img {
        display: block !important;
        width: 60px !important;
        height: 20px !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
    }

}
/* =========================================================
   JMCI — RESTORE TEXT JUSTIFICATION
   ========================================================= */

/* Issue Overview / issue description */
.obj_issue_toc .description,
.obj_issue_toc .description p {
    text-align: justify !important;
    text-justify: inter-word;
}


/* General article/content paragraphs */
.page_issue .description,
.page_issue .description p,
.obj_article_details .abstract,
.obj_article_details .abstract p,
.article-summary,
.article-summary p {
    text-align: justify !important;
    text-justify: inter-word;
}


/* Homepage / journal descriptive text */
.pkp_page_index .description,
.pkp_page_index .description p {
    text-align: justify !important;
    text-justify: inter-word;
}


/* Keep headings and metadata LEFT aligned */
.obj_issue_toc h1,
.obj_issue_toc h2,
.obj_issue_toc h3,
.obj_issue_toc h4,
.obj_issue_toc .title,
.obj_article_summary .title,
.obj_article_summary .meta {
    text-align: left !important;
}
/* =========================================================
   JMCI — COPYRIGHT / LICENSE
   CLEAN JUSTIFIED TEXT
   ========================================================= */

.article-more-details .panel.copyright .panel-body p {
    text-align: justify !important;
    text-justify: auto !important;
    line-height: 1.7;
    letter-spacing: 0;
    word-spacing: normal;
    margin-top: 0;
    margin-bottom: 18px;
}

/* Copyright paragraph */
.article-more-details .panel.copyright .panel-body p:nth-of-type(2) {
    text-align: left !important;
}

/* License logo */
.article-more-details .panel.copyright .panel-body > a {
    display: block;
    margin-bottom: 12px;
}

.article-more-details .panel.copyright .panel-body > a img {
    max-width: 90px;
    height: auto;
}

/* Last paragraph */
.article-more-details .panel.copyright .panel-body p:last-child {
    margin-bottom: 0;
}