/*
=============================================================
 LONTARA LUWU — INTEC-INSPIRED CSS v3
 ------------------------------------------------------------
 Perbaikan berdasarkan screenshot terbaru:
 1) Area tengah/content dibuat TRANSPARAN/AIR.
 2) Body diberi latar lembut agar transparansi terlihat.
 3) Header/logo tetap full-width dan proporsional.
 4) User navigation dipindahkan benar-benar ke sisi kanan
    header journal, bukan mengikuti wrapper sempit OJS.
 5) Primary navbar tetap satu baris dan presisi.
=============================================================
*/

/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */
:root {
    --ll-container: 1320px;

    --ll-green-950: #043a31;
    --ll-green-900: #06473c;
    --ll-green-800: #075548;
    --ll-green-700: #0b6755;
    --ll-green-600: #15715d;

    --ll-gold-700: #9b7d21;
    --ll-gold-600: #b08f28;
    --ll-gold-500: #c1a039;
    --ll-gold-300: #ddc97d;

    /* AIR / TRANSPARENT LOOK */
    --ll-air: rgba(255,255,255,.70);
    --ll-air-soft: rgba(248,250,248,.55);
    --ll-page-bg: #edf3f0;

    --ll-white: #ffffff;
    --ll-text: #25332f;

    --ll-nav-height: 54px;
    --ll-user-height: 34px;
}


/* =========================================================
   02. PAGE / BODY
   ========================================================= */
html,
body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    min-width: 0;
}

body {
    background:
        linear-gradient(
            180deg,
            #eef4f1 0%,
            #f4f6f3 48%,
            #edf2ef 100%
        ) !important;

    color: var(--ll-text);
}

/*
   Centered journal container, similar to INTEC.
*/
.pkp_structure_page {
    display: block !important;
    width: 100% !important;
    max-width: var(--ll-container) !important;
    margin: 0 auto !important;

    background: transparent !important;

    box-shadow: 0 0 20px rgba(0,0,0,.07);
}


/* =========================================================
   03. HEADER
   ========================================================= */
.pkp_structure_head {
    position: relative !important;

    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

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

    background: #fff !important;
    border: 0 !important;
}

/*
   CRITICAL FIX:
   Do NOT make this wrapper the containing block for the
   user navigation. OJS can give this wrapper a narrower
   computed width.
*/
.pkp_head_wrapper {
    position: static !important;

    display: block !important;
    width: 100% !important;
    max-width: none !important;

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


/* =========================================================
   04. LOGO / HEADER ARTWORK
   ========================================================= */
.pkp_site_name_wrapper,
.pkp_site_name {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

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

    background: #fff !important;
    float: none !important;
}

.pkp_site_name a {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

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

    text-decoration: none !important;
}

.pkp_site_name img,
.pkp_site_name a img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

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

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

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

    transform: none !important;
}


/* =========================================================
   05. USER NAVIGATION — MOVE TO FAR RIGHT
   ========================================================= */

/*
   Because .pkp_head_wrapper is now static, this absolute
   element resolves against .pkp_structure_head.
*/
.pkp_structure_head .pkp_navigation_user_wrapper {
    position: absolute !important;

    top: 16px !important;
    right: 6px !important;
    left: auto !important;

    z-index: 200 !important;

    display: block !important;

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

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

    background: transparent !important;
}

.pkp_navigation_user {
    display: flex !important;

    align-items: center !important;
    justify-content: flex-end !important;

    width: auto !important;
    min-height: var(--ll-user-height) !important;

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

    list-style: none !important;
    background: transparent !important;
}

.pkp_navigation_user > li {
    display: block !important;

    margin: 0 0 0 3px !important;
    padding: 0 !important;
}

.pkp_navigation_user > li > a,
.pkp_navigation_user > li > button {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-height: var(--ll-user-height) !important;
    height: var(--ll-user-height) !important;

    padding: 5px 12px !important;

    color: #fff !important;
    background: rgba(0,0,0,.28) !important;

    border: 1px solid rgba(255,255,255,.20) !important;
    border-radius: 3px !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;

    text-decoration: none !important;
}

.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus,
.pkp_navigation_user > li > button:hover {
    color: #fff !important;
    background: rgba(0,0,0,.45) !important;
}


/* =========================================================
   06. PRIMARY NAVIGATION
   ========================================================= */
.pkp_navigation_primary_row {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: var(--ll-nav-height) !important;
    min-height: var(--ll-nav-height) !important;
    max-height: var(--ll-nav-height) !important;

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

    background:
        linear-gradient(
            90deg,
            var(--ll-green-950) 0%,
            var(--ll-green-700) 57%,
            var(--ll-gold-600) 100%
        ) !important;

    border: 0 !important;
}

.pkp_navigation_primary_wrapper {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;

    height: var(--ll-nav-height) !important;
    min-height: var(--ll-nav-height) !important;
    max-height: var(--ll-nav-height) !important;

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

    background: transparent !important;
}

.pkp_navigation_primary {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;

    height: var(--ll-nav-height) !important;
    min-height: var(--ll-nav-height) !important;
    max-height: var(--ll-nav-height) !important;

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

    list-style: none !important;
    background: transparent !important;

    overflow: visible !important;
}

.pkp_navigation_primary > li {
    display: flex !important;
    align-items: stretch !important;

    height: var(--ll-nav-height) !important;

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

.pkp_navigation_primary > li > a {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    height: var(--ll-nav-height) !important;
    min-height: var(--ll-nav-height) !important;
    max-height: var(--ll-nav-height) !important;

    padding: 0 15px !important;

    color: #fff !important;
    background: transparent !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    text-decoration: none !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: #fff !important;
    background: rgba(255,255,255,.12) !important;
}

.pkp_navigation_primary > li.active > a,
.pkp_navigation_primary > li > a[aria-current="page"] {
    color: #fff !important;
    background: rgba(0,0,0,.14) !important;
    box-shadow: inset 0 -3px 0 var(--ll-gold-300);
}


/* =========================================================
   07. SEARCH
   ========================================================= */
.pkp_navigation_search_wrapper {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    height: var(--ll-nav-height) !important;
    min-height: var(--ll-nav-height) !important;
    max-height: var(--ll-nav-height) !important;

    margin-left: auto !important;
    margin-top: 0 !important;

    padding: 0 !important;

    background: transparent !important;
    float: none !important;
}

.pkp_navigation_search_wrapper button,
.pkp_navigation_search_wrapper a {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    height: var(--ll-nav-height) !important;

    padding: 0 14px !important;

    color: #fff !important;
    background: transparent !important;

    border: 0 !important;
}

.pkp_navigation_search_wrapper button:hover,
.pkp_navigation_search_wrapper a:hover {
    color: #fff !important;
    background: rgba(255,255,255,.12) !important;
}


/* =========================================================
   08. AIR / TRANSPARENT CONTENT AREA
   ========================================================= */

/*
   Main page area becomes airy/transparent. The background
   underneath will remain visible instead of a solid white slab.
*/
.pkp_structure_content {
    display: block !important;

    width: 100% !important;

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

    background: var(--ll-air) !important;
}

.pkp_structure_main,
.pkp_structure_sidebar {
    background: transparent !important;
}

/*
   Remove theme blocks that force an opaque white content
   surface without touching individual cards/images.
*/
.pkp_structure_content .pkp_structure_main {
    background: transparent !important;
}

/*
   Keep normal OJS content readable with a light "glass" surface.
*/
.pkp_page_index .homepage_image,
.pkp_page_index .additional_content,
.pkp_page_index .current_issue,
.obj_issue_toc {
    background: rgba(255,255,255,.58);
}


/* =========================================================
   09. SIDEBAR
   ========================================================= */
.pkp_block {
    margin-bottom: 24px;
}

.pkp_block .title {
    color: var(--ll-green-900);
    font-weight: 800;
}

.pkp_block .content {
    color: var(--ll-text);
}


/* =========================================================
   10. FOOTER
   ========================================================= */
.pkp_structure_footer_wrapper {
    width: 100% !important;

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

    background: var(--ll-green-950) !important;
}

.pkp_structure_footer {
    width: 100% !important;

    margin: 0 !important;
    padding: 24px 28px !important;

    min-height: 0 !important;

    background: transparent !important;
}


/* =========================================================
   11. DROPDOWN
   ========================================================= */
.pkp_navigation_primary .dropdown-menu {
    min-width: 210px !important;

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

    background: #fff !important;

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

    box-shadow: 0 10px 24px rgba(0,0,0,.16) !important;
}

.pkp_navigation_primary .dropdown-menu li a {
    display: block !important;

    padding: 10px 15px !important;

    color: #29332f !important;
    background: #fff !important;

    font-size: 13px !important;
    font-weight: 600 !important;
}

.pkp_navigation_primary .dropdown-menu li a:hover {
    color: var(--ll-green-700) !important;
    background: #f1f6f3 !important;
}


/* =========================================================
   12. RESPONSIVE
   ========================================================= */
@media (max-width: 1320px) {
    .pkp_structure_page {
        max-width: 100% !important;
        box-shadow: none !important;
    }
}

@media (max-width: 900px) {
    .pkp_structure_head .pkp_navigation_user_wrapper {
        top: 10px !important;
        right: 8px !important;
    }

    .pkp_navigation_user > li > a,
    .pkp_navigation_user > li > button {
        min-height: 30px !important;
        height: 30px !important;
        padding: 4px 9px !important;
        font-size: 11.5px !important;
    }

    .pkp_navigation_primary {
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }

    .pkp_navigation_primary > li > a {
        padding: 0 11px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 600px) {
    .pkp_structure_head .pkp_navigation_user_wrapper {
        top: 7px !important;
        right: 6px !important;
    }

    .pkp_navigation_user > li > a,
    .pkp_navigation_user > li > button {
        min-height: 28px !important;
        height: 28px !important;
        padding: 3px 7px !important;
        font-size: 10px !important;
    }

    .pkp_navigation_primary > li > a {
        padding: 0 9px !important;
        font-size: 11px !important;
    }
}


/* =========================================================
   END LONTARA LUWU CSS v3
   ========================================================= */


/* =========================================================
   LONTARA LUWU — CUSTOM SIDEBAR BLOCKS
   Append this AFTER lontara-luwu-intec-style-v3.css
   ========================================================= */

/* ---------- Grouped navigation ---------- */

.ll-sideGroup {
    margin: 0 0 20px 0;
    padding: 0;

    background: rgba(255,255,255,.78);

    border: 1px solid rgba(6,71,60,.12);
    border-radius: 8px;

    overflow: hidden;

    box-shadow:
        0 5px 15px rgba(4,58,49,.06);
}

.ll-sideGroup h4 {
    position: relative;

    margin: 0;
    padding: 13px 16px;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #06473c 0%,
            #0b6755 72%,
            #b08f28 100%
        );

    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;

    letter-spacing: .35px;
    text-transform: uppercase;
}

.ll-sideGroup h4::after {
    content: "";
    position: absolute;

    left: 16px;
    bottom: 0;

    width: 42px;
    height: 3px;

    background: #ddc97d;
}

.ll-sideGroup ul {
    margin: 0;
    padding: 7px 0;

    list-style: none;
}

.ll-sideGroup li {
    margin: 0;
    padding: 0;

    border-bottom: 1px solid rgba(6,71,60,.07);
}

.ll-sideGroup li:last-child {
    border-bottom: 0;
}

.ll-sideGroup li a {
    position: relative;

    display: block;

    padding: 10px 16px 10px 31px;

    color: #29413b !important;
    background: transparent !important;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;

    text-decoration: none !important;

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

.ll-sideGroup li a::before {
    content: "›";

    position: absolute;
    left: 16px;
    top: 50%;

    transform: translateY(-50%);

    color: #b08f28;

    font-size: 17px;
    font-weight: 800;
}

.ll-sideGroup li a:hover,
.ll-sideGroup li a:focus {
    padding-left: 35px;

    color: #06473c !important;
    background: rgba(219,199,125,.12) !important;
}

.ll-sideGroup li.is-static a {
    color: #6c7672 !important;
}

.ll-sideGroup li.is-static a::before {
    color: #9da49f;
}


/* ---------- Card block ---------- */

.ll-sideCard {
    margin: 0 0 20px 0;
    padding: 0;

    background: rgba(255,255,255,.82);

    border: 1px solid rgba(6,71,60,.12);
    border-radius: 8px;

    overflow: hidden;

    box-shadow:
        0 5px 15px rgba(4,58,49,.06);
}

.ll-sideCard-title {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 42px;

    padding: 0 16px;

    color: #fff;

    background:
        linear-gradient(
            90deg,
            #06473c 0%,
            #0b6755 70%,
            #b08f28 100%
        );

    font-size: 13px;
    font-weight: 800;
    letter-spacing: .35px;
}

.ll-sideCard-title::after {
    content: "";

    position: absolute;

    left: 16px;
    bottom: 0;

    width: 42px;
    height: 3px;

    background: #ddc97d;
}

.ll-sideCard-body {
    padding: 14px 16px;
}


/* ---------- Quick links ---------- */

.ll-quickLinks {
    display: grid;
    gap: 7px;
}

.ll-quickLinks a {
    display: flex;
    align-items: center;

    min-height: 36px;

    padding: 7px 10px;

    color: #155647 !important;
    background: rgba(6,71,60,.045) !important;

    border: 1px solid rgba(6,71,60,.07);
    border-radius: 5px;

    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none !important;

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

.ll-quickLinks a:hover {
    color: #06473c !important;

    background: rgba(219,199,125,.16) !important;

    border-color: rgba(176,143,40,.25);

    transform: translateX(2px);
}


/* ---------- Tools ---------- */

.ll-toolsList {
    display: grid;
    gap: 8px;
}

.ll-toolsList a {
    display: block;

    padding: 10px 12px;

    color: #29413b !important;
    background: #f5f8f6 !important;

    border-left: 4px solid #b08f28;

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

    text-decoration: none !important;
}

.ll-toolsList a:hover {
    color: #06473c !important;
    background: #eef5f1 !important;
}


/* ---------- OJS sidebar integration ---------- */

.pkp_structure_sidebar .pkp_block_custom .content {
    padding: 0 !important;
    background: transparent !important;
}

.pkp_structure_sidebar .pkp_block_custom {
    margin-bottom: 20px !important;
    background: transparent !important;
    border: 0 !important;
}


/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .ll-sideGroup,
    .ll-sideCard {
        border-radius: 6px;
    }

    .ll-sideGroup li a,
    .ll-sideCard-body {
        font-size: 12.5px;
    }
}

@media (max-width: 600px) {
    .ll-sideGroup h4,
    .ll-sideCard-title {
        font-size: 12px;
    }

    .ll-sideGroup li a,
    .ll-quickLinks a,
    .ll-toolsList a {
        font-size: 12px;
    }
}


/* =========================================================
   LONTARA LUWU V4 — CUSTOM BLOCK COMPATIBILITY LAYER
   This section is intentionally broad enough for OJS 3.x
   Custom Blocks, which normally render as:
   .pkp_block.block_custom
   ========================================================= */

.pkp_structure_sidebar .pkp_block.block_custom {
    width: 100% !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.pkp_structure_sidebar .pkp_block.block_custom > .content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Our explicit wrapper inside the Custom Block */
#llSidebarMenu {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#llSidebarMenu .ll-sideGroup,
#llSidebarMenu .ll-sideCard {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Make the blocks look like the clean INTEC-style sidebar:
   green/gold heading, airy body, compact links. */
#llSidebarMenu .ll-sideGroup h4,
#llSidebarMenu .ll-sideCard-title {
    text-align: left !important;
}

#llSidebarMenu .ll-sideGroup ul {
    display: block !important;
}

#llSidebarMenu .ll-sideGroup li a {
    white-space: normal !important;
}

/* Keep the sidebar itself aligned and airy */
@media (min-width: 901px) {
    .pkp_structure_sidebar {
        background: transparent !important;
    }

    .pkp_structure_sidebar .pkp_block {
        background: transparent !important;
    }
}


/* =========================================================
   V4 -> V4.1 : ONLY SIDEBAR INSET
   Do NOT replace the V4 layout.
   ========================================================= */

@media (min-width: 901px) {
    .pkp_structure_sidebar {
        box-sizing: border-box !important;
        padding-top: 18px !important;
        padding-right: 22px !important;
        padding-bottom: 24px !important;
        padding-left: 22px !important;
        background: transparent !important;
    }

    .pkp_structure_sidebar .pkp_block,
    .pkp_structure_sidebar .pkp_block.block_custom,
    .pkp_structure_sidebar .pkp_block_custom {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        background: transparent !important;
    }

    .pkp_structure_sidebar .pkp_block.block_custom > .content,
    .pkp_structure_sidebar .pkp_block_custom > .content,
    #llSidebarMenu {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background: transparent !important;
    }
}

@media (max-width: 900px) {
    .pkp_structure_sidebar {
        padding: 16px !important;
    }
}

@media (max-width: 600px) {
    .pkp_structure_sidebar {
        padding: 12px !important;
    }
}

/* =========================================================
   END V4.1 SIDEBAR INSET
   ========================================================= */



/* =========================================================
   LONTARA LUWU — V4.3
   FINAL TWO-COLUMN OJS SIDEBAR PATCH
   ---------------------------------------------------------
   IMPORTANT:
   - Restores OJS's native float-based 2-column scaffold.
   - Does NOT use display:flex on .pkp_structure_content.
   - Main content is wider.
   - Sidebar is narrower.
   - Keeps the existing V4.1 visual design intact.
   ========================================================= */

@media (min-width: 901px) {

    /* Restore native OJS two-column behavior */
    .pkp_structure_content {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
    }

    /* Main content: ~78% */
    .pkp_structure_main {
        float: left !important;

        width: calc(100% - 300px) !important;
        max-width: none !important;
        min-width: 0 !important;

        box-sizing: border-box !important;

        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 28px !important;
        padding-bottom: 90px !important;

        background: transparent !important;
    }

    /* Divider follows the new main-column edge */
    .pkp_structure_main:after {
        left: calc(100% - 300px) !important;
    }

    /* Sidebar: compact ~300px */
    .pkp_structure_sidebar {
        float: right !important;

        width: 300px !important;
        max-width: 300px !important;
        min-width: 300px !important;

        box-sizing: border-box !important;

        padding-top: 18px !important;
        padding-right: 18px !important;
        padding-bottom: 24px !important;
        padding-left: 18px !important;

        background: transparent !important;

        border-left: 0 !important;
    }

    /* Custom blocks fit inside the narrower sidebar */
    .pkp_structure_sidebar .pkp_block,
    .pkp_structure_sidebar .pkp_block.block_custom,
    .pkp_structure_sidebar .pkp_block_custom,
    .pkp_structure_sidebar .pkp_block_custom > .content,
    #llSidebarMenu {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #llSidebarMenu .ll-sideGroup,
    #llSidebarMenu .ll-sideCard {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Large desktop: slightly narrower sidebar */
@media (min-width: 1450px) {
    .pkp_structure_main {
        width: calc(100% - 290px) !important;
    }

    .pkp_structure_main:after {
        left: calc(100% - 290px) !important;
    }

    .pkp_structure_sidebar {
        width: 290px !important;
        max-width: 290px !important;
        min-width: 290px !important;
    }
}

/* Tablet/mobile: restore normal stacked OJS behavior */
@media (max-width: 900px) {

    .pkp_structure_content {
        display: block !important;
    }

    .pkp_structure_main,
    .pkp_structure_sidebar {
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

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

        border-left: 0 !important;
    }

    .pkp_structure_main:after {
        display: none !important;
    }

    .pkp_structure_sidebar {
        padding-top: 16px !important;
        padding-bottom: 20px !important;
    }
}

@media (max-width: 600px) {
    .pkp_structure_main,
    .pkp_structure_sidebar {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .pkp_structure_sidebar {
        padding-top: 12px !important;
    }
}

/* =========================================================
   END V4.3
   ========================================================= */



/* =========================================================
   V4.4 — SMALL MAIN CONTENT INSET
   Only shifts the main text slightly inward.
   Does not change header, navbar, sidebar width, or columns.
   ========================================================= */

@media (min-width: 901px) {
    .pkp_structure_main {
        box-sizing: border-box !important;
        padding-left: 18px !important;
        padding-right: 28px !important;
    }
}

@media (max-width: 900px) {
    .pkp_structure_main {
        box-sizing: border-box !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* =========================================================
   END V4.4
   ========================================================= */