/* ==========================================================
   LITERAPEDIA PORTAL PRIME
   OJS 3.x Main Portal Custom CSS
   File name: literapedia-portal-prime.css
   Target look: branded publisher portal with hero, about card,
   journal cards, top-right Register/Login, responsive mobile.
   ========================================================== */

/* ==========================================================
   1. DESIGN TOKENS
   ========================================================== */
:root {
    --lpp-navy: #082f66;
    --lpp-navy-2: #0a3f78;
    --lpp-blue: #0f5f8f;
    --lpp-green: #2f9b63;
    --lpp-green-dark: #1f7d49;
    --lpp-green-soft: #eaf6ee;

    --lpp-text: #1f2937;
    --lpp-muted: #667085;
    --lpp-border: #e3e8ee;
    --lpp-soft: #f7fafc;
    --lpp-white: #ffffff;

    --lpp-max: 1180px;

    --lpp-shadow-sm: 0 5px 16px rgba(15, 23, 42, .06);
    --lpp-shadow-md: 0 10px 28px rgba(15, 23, 42, .10);
}

/* ==========================================================
   2. RESET
   ========================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;

    background: #eef3f6;
    color: var(--lpp-text);

    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.7;

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

a {
    color: var(--lpp-blue);
    text-decoration: none;
    transition: .2s ease;
}

a:hover,
a:focus {
    color: var(--lpp-green);
    text-decoration: none;
}

img,
svg,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* ==========================================================
   3. PAGE SHELL
   ========================================================== */
.pkp_structure_page {
    width: 100% !important;
    max-width: var(--lpp-max) !important;
    margin: 0 auto !important;
    padding: 0 !important;

    background: #ffffff !important;
    border: 0 !important;

    box-shadow: 0 0 26px rgba(15, 23, 42, .08);
}

/* ==========================================================
   4. REMOVE DEFAULT OJS CONTENT LINES
   ========================================================== */
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_page_index_site,
.pkp_page_index_site .pkp_structure_content,
.pkp_page_index_site .pkp_structure_main,
.pkp_page_index_site .about_site,
.pkp_page_index_site .homepage_about,
.pkp_page_index_site .additional_content {
    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    outline: 0 !important;
    box-shadow: none;
}

.pkp_structure_content::before,
.pkp_structure_content::after,
.pkp_structure_main::before,
.pkp_structure_main::after,
.pkp_page_index_site::before,
.pkp_page_index_site::after {
    content: none !important;
    display: none !important;
}

/* ==========================================================
   5. HEADER
   ========================================================== */
.pkp_structure_head {
    position: relative !important;
    display: block !important;

    width: 100% !important;

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

    background: #ffffff !important;

    border: 0 !important;
    border-top: 3px solid var(--lpp-green) !important;

    z-index: 100;
}

.pkp_head_wrapper {
    position: relative !important;

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

    min-height: 150px;

    margin: 0 !important;
    padding: 18px 30px 16px !important;

    background:
        radial-gradient(circle at 88% 15%, rgba(47,155,99,.09), transparent 27%),
        linear-gradient(135deg, #ffffff 0%, #ffffff 58%, #f3faf6 100%) !important;

    overflow: visible !important;
}

/* ==========================================================
   6. SITE LOGO / HEADER IMAGE
   ========================================================== */
.pkp_site_name_wrapper,
.pkp_site_name,
.pkp_site_name .is_img {
    position: relative !important;

    display: block !important;

    width: 100% !important;

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

.pkp_site_name {
    min-height: 112px;
}

.pkp_site_name .is_text {
    display: inline-block;

    max-width: 760px;

    margin-top: 24px;

    color: var(--lpp-navy) !important;

    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.15;
    font-weight: 800;
}

.pkp_site_name .is_img img {
    display: block !important;

    width: auto !important;
    max-width: 760px !important;
    max-height: 112px !important;

    height: auto !important;

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

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

    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;
}

/* ==========================================================
   7. REGISTER / LOGIN - FORCE TOP RIGHT
   ========================================================== */
.pkp_navigation_user_wrapper {
    position: absolute !important;

    top: 13px !important;
    right: 22px !important;

    left: auto !important;
    bottom: auto !important;

    width: auto !important;

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

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

    z-index: 999999 !important;
}

.pkp_navigation_user,
.pkp_head_wrapper .pkp_navigation_user,
.pkp_structure_head .pkp_navigation_user {
    position: absolute !important;

    top: 13px !important;
    right: 22px !important;

    left: auto !important;
    bottom: auto !important;

    display: flex !important;

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

    gap: 7px !important;

    width: auto !important;

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

    float: none !important;
    transform: none !important;

    background: transparent !important;

    z-index: 999999 !important;
}

.pkp_navigation_user > li {
    display: inline-block !important;

    width: auto !important;

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

    float: none !important;

    list-style: none !important;
}

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

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

    min-height: 32px;

    padding: 5px 11px !important;

    color: var(--lpp-green-dark) !important;
    background: rgba(255,255,255,.96) !important;

    border: 1px solid #cfe2d5 !important;
    border-radius: 7px !important;

    box-shadow: 0 2px 6px rgba(0,0,0,.04);

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
    color: #ffffff !important;
    background: var(--lpp-green) !important;
    border-color: var(--lpp-green) !important;
}

/* ==========================================================
   8. PRIMARY NAVIGATION
   ========================================================== */
.pkp_navigation_primary_wrapper {
    position: relative !important;

    width: 100% !important;

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

    background:
        linear-gradient(
            90deg,
            var(--lpp-navy) 0%,
            #0a3a72 64%,
            var(--lpp-green-dark) 100%
        ) !important;

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

    box-shadow: 0 3px 8px rgba(0,0,0,.09);

    z-index: 50;
}

.pkp_navigation_primary {
    margin: 0 !important;
    padding: 0 !important;
}

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

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

    padding: 15px 18px !important;

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

    border: 0 !important;
    border-bottom: 3px solid transparent !important;

    font-size: 14px !important;
    font-weight: 700 !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: #ffffff !important;

    background: rgba(255,255,255,.08) !important;

    border-bottom-color: #9fe0a7 !important;
}

.pkp_navigation_primary > li > ul {
    overflow: hidden;

    background: #ffffff !important;

    border: 1px solid var(--lpp-border) !important;
    border-radius: 8px !important;

    box-shadow: var(--lpp-shadow-md);
}

.pkp_navigation_primary > li > ul a {
    display: block;

    padding: 11px 15px;

    color: var(--lpp-text) !important;
    background: #ffffff !important;
}

.pkp_navigation_primary > li > ul a:hover {
    color: var(--lpp-blue) !important;
    background: var(--lpp-soft) !important;
}

.pkp_search,
.pkp_head_wrapper .pkp_search {
    color: #ffffff !important;
}

/* ==========================================================
   9. CONTENT WRAPPER
   ========================================================== */
.pkp_structure_content {
    position: relative !important;

    display: block !important;

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

    margin: 0 !important;
    padding: 0 34px 44px !important;

    clear: both !important;

    background:
        linear-gradient(180deg, #f8fbfc 0%, #ffffff 20%, #ffffff 100%) !important;

    border: 0 !important;
    box-shadow: none !important;

    z-index: 1 !important;
}

.pkp_structure_main {
    position: relative !important;

    display: block !important;

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

    min-width: 0 !important;

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

    float: none !important;

    border: 0 !important;
    box-shadow: none !important;
}

.pkp_structure_sidebar {
    border: 0 !important;
    box-shadow: none !important;
}

/* ==========================================================
   10. CUSTOM HERO
   ========================================================== */
.lp-hero {
    position: relative;

    width: calc(100% + 68px);

    margin: 0 -34px 30px;

    padding: 46px 34px 40px;

    overflow: hidden;

    background:
        radial-gradient(circle at 88% 38%, rgba(47,155,99,.11), transparent 24%),
        radial-gradient(circle at 5% 28%, rgba(15,95,143,.10), transparent 28%),
        linear-gradient(135deg, #eef8fb 0%, #ffffff 50%, #f0f9f2 100%);

    border-bottom: 1px solid #e3e9ed;
}

.lp-hero::before {
    content: "";

    position: absolute;

    top: -140px;
    right: -70px;

    width: 320px;
    height: 320px;

    border: 1px solid rgba(47,155,99,.12);
    border-radius: 50%;
}

.lp-hero::after {
    content: "";

    position: absolute;

    left: -120px;
    bottom: -160px;

    width: 300px;
    height: 300px;

    border: 1px solid rgba(15,95,143,.10);
    border-radius: 50%;
}

.lp-hero-inner {
    position: relative;

    z-index: 2;

    max-width: 860px;

    margin: 0 auto;

    text-align: center;
}

.lp-hero-label {
    display: inline-block;

    margin-bottom: 13px;
    padding: 6px 14px;

    color: #ffffff;
    background: var(--lpp-green);

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.lp-hero h1 {
    margin: 0 0 14px !important;

    color: var(--lpp-navy) !important;

    font-size: clamp(25px, 3vw, 34px) !important;
    line-height: 1.28 !important;
    font-weight: 800 !important;

    text-align: center !important;
    text-transform: uppercase;
}

.lp-hero h1 span {
    display: block;

    color: var(--lpp-green-dark);
}

.lp-hero p {
    max-width: 790px;

    margin: 0 auto !important;

    color: #475467;

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

    text-align: center !important;
}

/* ==========================================================
   11. DEFAULT ABOUT THE SITE
   ========================================================== */
.pkp_page_index_site .about_site,
.pkp_page_index_site .homepage_about {
    width: 100%;

    margin: 28px 0 34px !important;

    padding: 26px 28px !important;

    background:
        linear-gradient(135deg, #ffffff 0%, #f8fcf9 55%, #f6fafc 100%);

    border: 0 !important;
    border-left: 4px solid var(--lpp-green) !important;
    border-radius: 13px !important;

    box-shadow: var(--lpp-shadow-sm) !important;
}

.pkp_page_index_site .about_site::before,
.pkp_page_index_site .homepage_about::before {
    content: "ABOUT THE SITE";

    display: inline-block;

    margin-bottom: 13px;
    padding: 5px 11px;

    color: #ffffff;
    background: var(--lpp-green);

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .7px;
}

/* ==========================================================
   12. JUSTIFIED TEXT
   ========================================================== */
.pkp_page_index_site .about_site p,
.pkp_page_index_site .homepage_about p,
.pkp_page_index_site .additional_content p,
.pkp_page_index_site .obj_journal_summary p,
.lp-about-content p,
.lp-journal-info p {
    text-align: justify !important;
    text-justify: inter-word !important;

    line-height: 1.76 !important;
}

/* ==========================================================
   13. CUSTOM ABOUT CARD
   ========================================================== */
.lp-about-card {
    display: flex;

    align-items: center;

    gap: 22px;

    width: 100%;

    margin: 0 0 36px;

    padding: 23px 25px;

    background: #ffffff;

    border: 1px solid var(--lpp-border);
    border-radius: 14px;

    box-shadow: var(--lpp-shadow-md);
}

.lp-about-icon {
    flex: 0 0 70px;

    display: flex;

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

    width: 70px;
    height: 70px;

    color: var(--lpp-green-dark);
    background: var(--lpp-green-soft);

    border-radius: 50%;

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

.lp-about-content {
    flex: 1;
    min-width: 0;
}

.lp-about-content h2 {
    margin: 0 0 7px !important;

    color: var(--lpp-green-dark) !important;

    font-size: 19px !important;
    font-weight: 800 !important;

    text-transform: uppercase;
}

.lp-about-content p {
    margin: 0 !important;

    color: #344054;

    font-size: 14px;
}

/* ==========================================================
   14. JOURNAL SECTION TITLE
   ========================================================== */
.lp-section-title,
.pkp_page_index_site .journals > h2 {
    display: flex;

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

    gap: 12px;

    margin: 36px 0 24px !important;

    color: var(--lpp-navy) !important;

    font-size: 23px !important;
    font-weight: 800 !important;

    text-align: center !important;
    text-transform: uppercase;
}

.lp-section-title::before,
.lp-section-title::after,
.pkp_page_index_site .journals > h2::before,
.pkp_page_index_site .journals > h2::after {
    content: "";

    display: block;

    width: 58px;
    height: 2px;

    background: var(--lpp-green);
}

/* ==========================================================
   15. CUSTOM JOURNAL GRID
   ========================================================== */
.lp-journal-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px;

    width: 100%;
}

/* ==========================================================
   16. CUSTOM JOURNAL CARD
   ========================================================== */
.lp-journal-card {
    display: flex;

    gap: 18px;

    min-width: 0;

    padding: 18px;

    background: #ffffff;

    border: 1px solid var(--lpp-border);
    border-radius: 14px;

    box-shadow: 0 7px 20px rgba(15,23,42,.07);

    transition: transform .2s ease, box-shadow .2s ease;
}

.lp-journal-card:hover {
    transform: translateY(-3px);

    box-shadow: var(--lpp-shadow-md);
}

.lp-journal-cover {
    position: relative;
    flex: 0 0 135px;
    width: 135px;
    height: 190px;
    min-height: 190px;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    border: 1px solid var(--lpp-border);
    border-radius: 9px;
    box-shadow: 0 4px 12px rgba(15,23,42,.12);
}

.lp-ljcs-cover {
    background-image: url("https://jurnal.penerbitliterapedia.com/public/journals/1/cover_issue_1_en.png") !important;
}

.lp-ljce-cover {
    background-image: url("https://jurnal.penerbitliterapedia.com/public/journals/2/cover_issue_2_en.png") !important;
}

.lp-journal-code {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.lp-journal-cover img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center top !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.lp-journal-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.lp-journal-info h3 {
    margin: 0 0 8px !important;

    color: var(--lpp-navy) !important;

    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
}

.lp-journal-info h3 span {
    display: block;

    margin-top: 2px;

    color: var(--lpp-green-dark);
}

.lp-journal-info p {
    margin: 0 !important;

    color: #475467;

    font-size: 13px;
    line-height: 1.68 !important;
}

/* ==========================================================
   17. CUSTOM BUTTONS
   ========================================================== */
.lp-journal-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: auto;
    padding-top: 14px;
}

.lp-btn {
    display: inline-flex;

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

    min-height: 34px;

    padding: 7px 13px;

    border-radius: 7px;

    font-size: 12px;
    font-weight: 700;
}

.lp-btn-primary {
    color: #ffffff !important;
    background: var(--lpp-navy);

    border: 1px solid var(--lpp-navy);
}

.lp-btn-primary:hover {
    color: #ffffff !important;
    background: var(--lpp-green);

    border-color: var(--lpp-green);
}

.lp-btn-outline {
    color: var(--lpp-green-dark) !important;
    background: #ffffff;

    border: 1px solid var(--lpp-green);
}

.lp-btn-outline:hover {
    color: #ffffff !important;
    background: var(--lpp-green);
}

/* ==========================================================
   18. DEFAULT OJS JOURNAL CARDS
   ========================================================== */
.obj_journal_summary {
    position: relative;

    overflow: hidden;

    width: 100%;

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

    background: #ffffff !important;

    border: 1px solid var(--lpp-border) !important;
    border-radius: 13px;

    box-shadow: var(--lpp-shadow-sm);

    transition: transform .2s ease, box-shadow .2s ease;
}

.obj_journal_summary::before {
    content: "";

    position: absolute;

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

    width: 4px;

    background:
        linear-gradient(
            180deg,
            var(--lpp-blue),
            var(--lpp-green)
        );
}

.obj_journal_summary:hover {
    transform: translateY(-2px);

    box-shadow: var(--lpp-shadow-md);
}

.obj_journal_summary h3,
.obj_journal_summary .title {
    margin: 0 0 10px !important;

    color: var(--lpp-navy) !important;

    font-size: 20px !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
}

.obj_journal_summary h3 a,
.obj_journal_summary .title a {
    color: var(--lpp-navy) !important;
}

.obj_journal_summary .description,
.obj_journal_summary .description p {
    color: #344054;

    font-size: 14px;
    line-height: 1.75 !important;

    text-align: justify !important;
    text-justify: inter-word !important;
}

.obj_journal_summary .cover,
.obj_journal_summary .thumb {
    overflow: hidden;

    border-radius: 8px;

    box-shadow: 0 4px 12px rgba(15,23,42,.10);
}

.obj_journal_summary .cover img,
.obj_journal_summary .thumb img {
    display: block;

    max-width: 175px;

    height: auto;
}

.obj_journal_summary .links,
.obj_journal_summary .actions {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 15px;
}

.obj_journal_summary .links a {
    display: inline-flex;

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

    padding: 8px 14px;

    color: #ffffff !important;
    background: var(--lpp-navy);

    border: 1px solid var(--lpp-navy);
    border-radius: 7px;

    font-size: 12px;
    font-weight: 700;
}

.obj_journal_summary .links a:hover {
    color: #ffffff !important;
    background: var(--lpp-green);

    border-color: var(--lpp-green);
}

/* ==========================================================
   19. ADDITIONAL CONTENT
   ========================================================== */
.pkp_page_index_site .additional_content {
    width: 100%;

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

    border: 0 !important;
}

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

    margin: 0 !important;

    background:
        linear-gradient(
            135deg,
            #062f5b 0%,
            #0a3d72 65%,
            #175f4c 100%
        ) !important;

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

    border: 0 !important;
    border-top: 4px solid var(--lpp-green) !important;
}

.pkp_structure_footer {
    width: 100% !important;
    max-width: var(--lpp-max) !important;

    margin: 0 auto !important;
    padding: 28px 32px 22px !important;

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

    border: 0 !important;
}

.pkp_structure_footer p {
    color: rgba(255,255,255,.90) !important;
}

.pkp_structure_footer a {
    color: #dff8fb !important;
}

.pkp_structure_footer a:hover {
    color: #ffffff !important;
}

/* ==========================================================
   21. HIDE OJS / PKP BRANDING
   ========================================================== */
.pkp_brand_footer,
.pkp_structure_footer .pkp_brand_footer,
.pkp_structure_footer_wrapper .pkp_brand_footer,
.pkp_structure_footer img[src*="ojs"],
.pkp_structure_footer img[src*="pkp"],
.pkp_structure_footer_wrapper img[src*="ojs"],
.pkp_structure_footer_wrapper img[src*="pkp"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;

    width: 0 !important;
    height: 0 !important;

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

/* ==========================================================
   22. LAPTOP
   ========================================================== */
@media screen and (max-width: 1199px) {
    .pkp_structure_page {
        width: calc(100% - 24px) !important;
        max-width: 1080px !important;
    }

    .pkp_structure_content {
        padding: 0 28px 40px !important;
    }

    .lp-hero {
        width: calc(100% + 56px);

        margin: 0 -28px 28px;
    }
}

/* ==========================================================
   23. TABLET
   ========================================================== */
@media screen and (max-width: 991px) {
    .pkp_structure_page {
        width: calc(100% - 16px) !important;
        max-width: none !important;
    }

    .pkp_head_wrapper {
        min-height: 132px;

        padding: 16px 20px !important;
    }

    .pkp_site_name .is_img img {
        max-width: 600px !important;
    }

    .pkp_structure_content {
        padding: 0 20px 36px !important;
    }

    .lp-hero {
        width: calc(100% + 40px);

        margin: 0 -20px 26px;

        padding: 38px 24px;
    }

    .lp-journal-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   24. MOBILE
   ========================================================== */
@media screen and (max-width: 767px) {
    html,
    body {
        width: 100%;
        max-width: 100%;

        background: #ffffff;

        overflow-x: hidden;
    }

    .pkp_structure_page {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        box-shadow: none !important;
    }

    /* HEADER */
    .pkp_structure_head,
    .pkp_head_wrapper {
        position: relative !important;

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

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

        overflow: visible !important;
    }

    .pkp_head_wrapper {
        padding: 12px 12px 12px !important;
    }

    .pkp_site_name {
        min-height: 90px;

        padding-right: 112px !important;
    }

    .pkp_site_name .is_img img {
        width: 100% !important;
        max-width: 470px !important;
        max-height: 88px !important;

        object-position: left center !important;
    }

    .pkp_site_name .is_text {
        display: block;

        max-width: calc(100% - 105px);

        margin-top: 15px;

        font-size: 20px;
        line-height: 1.2;
    }

    /* Register/Login remains top-right on mobile */
    .pkp_navigation_user_wrapper {
        position: absolute !important;

        top: 9px !important;
        right: 8px !important;

        left: auto !important;

        width: auto !important;

        z-index: 999999 !important;
    }

    .pkp_navigation_user,
    .pkp_head_wrapper .pkp_navigation_user,
    .pkp_structure_head .pkp_navigation_user {
        position: absolute !important;

        top: 9px !important;
        right: 8px !important;

        left: auto !important;

        display: flex !important;

        gap: 4px !important;

        width: auto !important;

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

        background: transparent !important;
    }

    .pkp_navigation_user > li > a {
        min-height: 27px;

        padding: 4px 7px !important;

        font-size: 10px !important;

        border-radius: 5px !important;
    }

    /* Navigation */
    .pkp_navigation_primary_wrapper {
        position: relative !important;

        width: 100% !important;

        clear: both !important;

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

    /* Content */
    .pkp_structure_content {
        position: relative !important;

        display: block !important;

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

        clear: both !important;

        margin: 0 !important;
        padding: 0 14px 30px !important;

        overflow: hidden;

        border: 0 !important;
    }

    .pkp_structure_main {
        width: 100% !important;
        max-width: 100% !important;

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

        border: 0 !important;
    }

    /* Hero */
    .lp-hero {
        width: calc(100% + 28px);

        margin: 0 -14px 24px;

        padding: 30px 16px 27px;
    }

    .lp-hero h1 {
        font-size: 21px !important;
    }

    .lp-hero p {
        font-size: 13px;

        text-align: center !important;
    }

    /* About */
    .pkp_page_index_site .about_site,
    .pkp_page_index_site .homepage_about {
        margin: 22px 0 24px !important;

        padding: 18px !important;

        border-left: 4px solid var(--lpp-green) !important;
        border-radius: 10px;
    }

    .pkp_page_index_site .about_site p,
    .pkp_page_index_site .homepage_about p,
    .pkp_page_index_site .additional_content p {
        font-size: 13px;

        line-height: 1.72 !important;

        text-align: justify !important;
        text-justify: inter-word !important;
    }

    /* Custom About */
    .lp-about-card {
        display: block;

        margin-bottom: 26px;
        padding: 17px;
    }

    .lp-about-icon {
        margin: 0 auto 14px;
    }

    .lp-about-content h2 {
        text-align: center;
    }

    /* Journal section */
    .lp-section-title,
    .pkp_page_index_site .journals > h2 {
        gap: 8px;

        font-size: 19px !important;
    }

    .lp-section-title::before,
    .lp-section-title::after,
    .pkp_page_index_site .journals > h2::before,
    .pkp_page_index_site .journals > h2::after {
        width: 28px;
    }

    .lp-journal-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .lp-journal-card {
        display: block;

        width: 100%;

        padding: 16px;
    }

    .lp-journal-cover {
        width: 145px;
        height: 205px;
        min-height: 205px;

        margin: 0 auto 17px;
    }

    .lp-journal-info h3 {
        text-align: center;

        font-size: 17px !important;
    }

    .lp-journal-info p {
        font-size: 13px;

        line-height: 1.7 !important;
    }

    .lp-journal-actions {
        justify-content: center;
    }

    /* Default OJS journal */
    .obj_journal_summary {
        width: 100%;

        padding: 17px !important;
    }

    .obj_journal_summary h3,
    .obj_journal_summary .title {
        font-size: 17px !important;
    }

    .obj_journal_summary .description,
    .obj_journal_summary .description p {
        font-size: 13px;

        line-height: 1.7 !important;
    }

    .obj_journal_summary .cover,
    .obj_journal_summary .thumb {
        display: block;

        width: fit-content;

        margin: 0 auto 15px;
    }

    .obj_journal_summary .links,
    .obj_journal_summary .actions {
        justify-content: center;
    }

    .pkp_structure_footer {
        width: 100% !important;
        max-width: 100% !important;

        padding: 24px 15px 18px !important;
    }
}

/* ==========================================================
   25. SMALL MOBILE
   ========================================================== */
@media screen and (max-width: 420px) {
    body {
        font-size: 13px;
    }

    .pkp_head_wrapper {
        padding: 10px !important;
    }

    .pkp_site_name {
        min-height: 82px;

        padding-right: 103px !important;
    }

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

    .pkp_navigation_user,
    .pkp_head_wrapper .pkp_navigation_user,
    .pkp_structure_head .pkp_navigation_user {
        top: 7px !important;
        right: 6px !important;
    }

    .pkp_navigation_user > li > a {
        padding: 4px 6px !important;

        font-size: 9px !important;
    }

    .pkp_structure_content {
        padding: 0 10px 25px !important;
    }

    .lp-hero {
        width: calc(100% + 20px);

        margin: 0 -10px 22px;

        padding: 25px 13px;
    }

    .lp-hero h1 {
        font-size: 19px !important;
    }

    .lp-hero p {
        font-size: 12px;
    }

    .lp-about-card,
    .lp-journal-card {
        padding: 14px;
    }

    .lp-journal-info p {
        font-size: 12px;
    }
}

/* ==========================================================
   26. VERY SMALL MOBILE
   ========================================================== */
@media screen and (max-width: 360px) {
    .pkp_site_name {
        padding-right: 94px !important;
    }

    .pkp_navigation_user > li > a {
        padding: 3px 5px !important;

        font-size: 8px !important;
    }

    .lp-journal-actions {
        display: block;
    }

    .lp-btn {
        display: flex;

        width: 100%;

        margin-bottom: 7px;
    }
}

/* ==========================================================
   FINAL FORCE HIDE
   DEFAULT OJS JOURNAL DIRECTORY ON PORTAL HOMEPAGE
   LETAKKAN PALING BAWAH CSS
   ========================================================== */

/*
   OJS main-site journal directory
*/
.pkp_page_index_site .journals,
.pkp_structure_main .journals,
main .journals,
div.journals {
    display: none !important;
    visibility: hidden !important;

    width: 0 !important;
    height: 0 !important;

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

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

    border: 0 !important;

    overflow: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* ==========================================================
   HIDE JOURNAL LIST ITEMS INSIDE DEFAULT OJS DIRECTORY
   ========================================================== */

.pkp_page_index_site .journals > ul,
.pkp_page_index_site .journals > ul > li,

.pkp_structure_main .journals > ul,
.pkp_structure_main .journals > ul > li,

main .journals > ul,
main .journals > ul > li {
    display: none !important;

    visibility: hidden !important;

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

    width: 0 !important;
    height: 0 !important;

    overflow: hidden !important;
}


/* ==========================================================
   HIDE DEFAULT OJS JOURNAL SUMMARY
   ONLY WHEN IT IS INSIDE .journals
   ========================================================== */

.journals .obj_journal_summary,
.journals .obj_journal_summary *,
.pkp_page_index_site .journals .obj_journal_summary,
.pkp_page_index_site .journals .obj_journal_summary * {
    display: none !important;
    visibility: hidden !important;
}


/* ==========================================================
   CUSTOM PORTAL CONTENT MUST REMAIN VISIBLE
   ========================================================== */

.lp-home {
    display: block !important;
    visibility: visible !important;

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

    opacity: 1 !important;
}


.lp-hero,
.lp-about-card,
.lp-section-title {
    visibility: visible !important;

    width: auto !important;
    height: auto !important;

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

    opacity: 1 !important;
}


.lp-journal-grid {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 20px !important;

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

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

    visibility: visible !important;
    opacity: 1 !important;
}


.lp-journal-card {
    display: flex !important;

    visibility: visible !important;

    width: auto !important;
    height: auto !important;

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

    opacity: 1 !important;

    overflow: visible !important;

    pointer-events: auto !important;
}


.lp-journal-card * {
    visibility: visible !important;
}


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

@media screen and (max-width: 991px) {

    .lp-journal-grid {
        display: grid !important;

        grid-template-columns:
            1fr !important;
    }

}


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

@media screen and (max-width: 767px) {

    .lp-journal-grid {
        display: grid !important;

        grid-template-columns:
            1fr !important;

        gap: 16px !important;
    }


    .lp-journal-card {
        display: block !important;

        width: 100% !important;
    }

}


/* ==========================================================
   END FINAL OJS JOURNAL DIRECTORY HIDE
   ========================================================== */
/* ==========================================================
   END LITERAPEDIA PORTAL PRIME
   ========================================================== */