/*
 * OJS – Liquid Frosted Theme Override (Fixed Homepage Image Scaling)
 * Based on "Thema OJS Matappa 2024.css"
 *
 * REVISION / FIX:
 * - Fixed .homepage_image & .homepage_image img scaling issue.
 * - Restored original 200px proportional width for journal cover images.
 * - Added clean float & alignment for desktop and responsive scaling for mobile.
 */

/* =========================================================
   01. LIQUID FROSTED COLOR SYSTEM
   ========================================================= */

:root {
    --lf-primary: #0a84ff;
    --lf-primary-deep: #0066cc;
    --lf-primary-soft: #5ac8fa;

    --lf-cyan: #64d2ff;
    --lf-violet: #af52de;
    --lf-pink: #ff9fbb;

    --lf-bg: #eef6fb;
    --lf-bg-soft: #f6fbff;
    --lf-surface: rgba(255, 255, 255, .68);
    --lf-surface-strong: rgba(255, 255, 255, .84);
    --lf-surface-soft: rgba(255, 255, 255, .48);

    --lf-border: rgba(255, 255, 255, .72);
    --lf-border-blue: rgba(10, 132, 255, .16);

    --lf-text: #17324d;
    --lf-text-soft: #58718a;
    --lf-text-muted: #71879b;

    --lf-shadow: 0 18px 45px rgba(30, 88, 125, .12);
    --lf-shadow-soft: 0 8px 24px rgba(30, 88, 125, .09);
    --lf-radius: 18px;
    --lf-radius-sm: 12px;

    --lf-glass-blur: blur(18px);
}

/* =========================================================
   02. GLOBAL BACKGROUND
   ========================================================= */

html,
body {
    background:
        radial-gradient(circle at 8% 5%, rgba(100,210,255,.26), transparent 30%),
        radial-gradient(circle at 92% 12%, rgba(175,82,222,.16), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(10,132,255,.12), transparent 36%),
        linear-gradient(135deg, #eef8fd 0%, #f7fbff 48%, #edf6fc 100%) !important;

    background-attachment: fixed !important;
    color: var(--lf-text) !important;
}

html body {
    background-image:
        radial-gradient(circle at 8% 5%, rgba(100,210,255,.26), transparent 30%),
        radial-gradient(circle at 92% 12%, rgba(175,82,222,.16), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(10,132,255,.12), transparent 36%),
        linear-gradient(135deg, #eef8fd 0%, #f7fbff 48%, #edf6fc 100%) !important;
}

/* =========================================================
   03. OJS HEADER – FROSTED GLASS & FULL WIDTH LOGO
   ========================================================= */

.pkp_structure_head {
    padding: 0 !important; 
    background:
        linear-gradient(
            135deg,
            rgba(10,132,255,.90),
            rgba(100,210,255,.76) 55%,
            rgba(175,82,222,.68)
        ) !important;

    border-bottom: 1px solid rgba(255,255,255,.35) !important;
    box-shadow: 0 10px 35px rgba(10,84,130,.16);
}

.pkp_head_wrapper {
    position: relative;
    padding: 0 !important;
    max-width: 100% !important; 
}

.pkp_site_name_wrapper {
    background: rgba(255,255,255,.08) !important;
    border-bottom: 1px solid rgba(255,255,255,.18);
    width: 100% !important;
    margin: 0 !important;
}

.pkp_site_name,
.pkp_site_name a,
.pkp_site_name .is_text {
    color: #ffffff !important;
    text-shadow: 0 2px 14px rgba(0,35,70,.20);
}

.pkp_site_name {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_site_name .is_img {
    width: 100% !important;
    margin: 0 !important;
    display: block !important;
}

.pkp_site_name .is_img img {
    width: 100% !important;
    max-height: none !important;
    height: auto !important;
    display: block;
    object-fit: cover;
}

/* =========================================================
   04. PRIMARY NAVIGATION
   ========================================================= */

.pkp_navigation_primary_wrapper {
    background: rgba(255,255,255,.12) !important;
    border-top: 1px solid rgba(255,255,255,.16);
    border-bottom: 1px solid rgba(255,255,255,.18);
    backdrop-filter: var(--lf-glass-blur);
    -webkit-backdrop-filter: var(--lf-glass-blur);
    padding-left: 15px;
    padding-right: 15px;
}

.pkp_navigation_primary > li > a {
    color: rgba(255,255,255,.96) !important;
    background: transparent !important;
    border-radius: 12px;
    transition:
        background .22s ease,
        color .22s ease,
        transform .18s ease;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: #ffffff !important;
    background: rgba(255,255,255,.18) !important;
    transform: translateY(-1px);
}

.pkp_navigation_primary > li.is_active > a,
.pkp_navigation_primary > li > a[aria-current="page"] {
    color: #ffffff !important;
    background: rgba(255,255,255,.24) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.20);
}

/* =========================================================
   05. USER NAVIGATION
   ========================================================= */

.pkp_navigation_user > li > a {
    color: rgba(255,255,255,.96) !important;
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    transition: all .22s ease;
}

.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
    color: #ffffff !important;
    background: rgba(255,255,255,.22) !important;
}

/* =========================================================
   06. SEARCH
   ========================================================= */

.pkp_head_wrapper .pkp_search,
.pkp_search_mobile {
    color: var(--lf-text) !important;
}

.pkp_head_wrapper .pkp_search input[type="text"] {
    background: rgba(255,255,255,.76) !important;
    color: var(--lf-text) !important;
    border: 1px solid rgba(255,255,255,.75) !important;
    border-radius: 14px !important;
    box-shadow: var(--lf-shadow-soft);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.pkp_head_wrapper .pkp_search input[type="text"]:focus {
    outline: none;
    border-color: rgba(10,132,255,.38) !important;
    box-shadow:
        0 0 0 4px rgba(10,132,255,.10),
        var(--lf-shadow-soft);
}

/* =========================================================
   07. MAIN CONTENT – FROSTED SURFACES
   ========================================================= */

.pkp_structure_content {
    position: relative;
}

.pkp_structure_main {
    color: var(--lf-text) !important;
}

.pkp_structure_main:before,
.pkp_structure_main:after {
    background: rgba(10,132,255,.08) !important;
}

.pkp_structure_sidebar {
    color: var(--lf-text) !important;
}

/* Generic content surfaces */
.pkp_page_index .journals > ul > li,
.pkp_page_index .cmp_announcements > .obj_announcement_summary,
.cmp_notification,
.obj_issue_summary,
.obj_article_summary,
.obj_monograph_summary {
    background: var(--lf-surface) !important;
    border: 1px solid var(--lf-border) !important;
    border-radius: var(--lf-radius) !important;
    box-shadow: var(--lf-shadow-soft);
    backdrop-filter: var(--lf-glass-blur);
    -webkit-backdrop-filter: var(--lf-glass-blur);
}

/* =========================================================
   08. HOMEPAGE & COVER IMAGE FIX (PROPORTIONAL SIZE)
   ========================================================= */

/* Container homepage image */
.homepage_image {
    max-width: 220px !important;
    width: 100% !important;
    margin: 0 auto 25px auto !important;
    text-align: center !important;
    display: block !important;
}

/* Gambar cover dibuat proporsional (max-width 200px - 220px) */
.homepage_image img {
    max-width: 200px !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: var(--lf-radius) !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    box-shadow: var(--lf-shadow) !important;
    display: inline-block !important;
}

/* Jika pada tampilan desktop ingin gambar di sebelah kiri dan deskripsi di kanan: */
@media (min-width: 768px) {
    .page_index_journal .homepage_image {
        float: right !important;
        margin: 0 25px 20px 0 !important;
        text-align: right !important;
    }

    .page_index_journal .homepage_about {
        overflow: hidden !important; /* Mencegah teks menabrak gambar float */
    }
}

.homepage_about {
    color: var(--lf-text) !important;
}

.homepage_about p {
    color: var(--lf-text-soft) !important;
}

/* =========================================================
   09. HEADINGS & LINKS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.pkp_page_title {
    color: var(--lf-text) !important;
}

a {
    color: var(--lf-primary-deep);
    transition: color .18s ease;
}

a:hover,
a:focus {
    color: var(--lf-violet);
}

/* =========================================================
   10. BUTTONS – LIQUID BLUE
   ========================================================= */

.cmp_manuscript_button,
.block_make_submission a,
.obj_galley_link {
    background:
        linear-gradient(
            135deg,
            var(--lf-primary),
            var(--lf-primary-soft)
        ) !important;

    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.30) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 20px rgba(10,132,255,.20);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.cmp_manuscript_button:hover,
.cmp_manuscript_button:focus,
.block_make_submission a:hover,
.block_make_submission a:focus,
.obj_galley_link:hover,
.obj_galley_link:focus {
    background:
        linear-gradient(
            135deg,
            var(--lf-primary-deep),
            var(--lf-primary)
        ) !important;

    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(10,132,255,.25);
}

/* =========================================================
   11. BREADCRUMBS
   ========================================================= */

.cmp_breadcrumbs {
    color: var(--lf-text-muted) !important;
}

.cmp_breadcrumbs a {
    color: var(--lf-primary-deep) !important;
}

.cmp_breadcrumbs .separator {
    color: rgba(23,50,77,.28);
}

/* =========================================================
   12. SIDEBAR BLOCKS
   ========================================================= */

.pkp_block {
    width: 300px;
    background: var(--lf-surface) !important;
    border: 1px solid var(--lf-border) !important;
    border-radius: var(--lf-radius) !important;
    box-shadow: var(--lf-shadow-soft);
    backdrop-filter: var(--lf-glass-blur);
    -webkit-backdrop-filter: var(--lf-glass-blur);
    color: var(--lf-text) !important;
}

.pkp_block .title,
.pkp_block h2,
.pkp_block h3 {
    color: var(--lf-text) !important;
}

.block_browse .current a {
    border-left-color: var(--lf-primary) !important;
    color: var(--lf-primary-deep) !important;
}

/* =========================================================
   13. ANNOUNCEMENTS
   ========================================================= */

.cmp_announcements {
    border: none !important;
}

.cmp_announcements > li {
    border-bottom: none !important;
}

.cmp_announcements .date:before {
    color: var(--lf-primary) !important;
}

/* =========================================================
   14. FORMS / INPUTS
   ========================================================= */

input,
textarea,
select {
    background: rgba(255,255,255,.74) !important;
    color: var(--lf-text) !important;
    border: 1px solid rgba(10,132,255,.14) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 2px rgba(30,88,125,.04);
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

input:focus,
textarea:focus,
select:focus {
    background: rgba(255,255,255,.90) !important;
    border-color: rgba(10,132,255,.42) !important;
    box-shadow:
        0 0 0 4px rgba(10,132,255,.09),
        0 8px 20px rgba(30,88,125,.07) !important;
    outline: none !important;
}

/* =========================================================
   15. TABLES
   ========================================================= */

table {
    background: rgba(255,255,255,.60) !important;
    border-collapse: separate !important;
    border-spacing: 0;
    border: 1px solid var(--lf-border) !important;
    border-radius: var(--lf-radius-sm);
    overflow: hidden;
    box-shadow: var(--lf-shadow-soft);
}

thead th {
    background:
        linear-gradient(
            135deg,
            rgba(10,132,255,.92),
            rgba(100,210,255,.78)
        ) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.20) !important;
}

tbody tr:nth-child(even) {
    background: rgba(255,255,255,.42) !important;
}

tbody tr:hover {
    background: rgba(100,210,255,.10) !important;
}

/* =========================================================
   16. PAGINATION
   ========================================================= */

.cmp_pagination a {
    color: var(--lf-primary-deep) !important;
}

.cmp_pagination a:hover,
.cmp_pagination a:focus,
.cmp_pagination .current {
    color: #ffffff !important;
    background: var(--lf-primary) !important;
    border-radius: 10px;
}

/* =========================================================
   17. NOTIFICATIONS
   ========================================================= */

.cmp_notification {
    background: rgba(255,255,255,.78) !important;
    border-color: rgba(10,132,255,.14) !important;
    color: var(--lf-text) !important;
}

/* =========================================================
   18. FOOTER
   ========================================================= */

.pkp_structure_footer_wrapper {
    background:
        linear-gradient(
            135deg,
            rgba(10,132,255,.92),
            rgba(100,210,255,.78),
            rgba(175,82,222,.72)
        ) !important;

    border-top: 1px solid rgba(255,255,255,.28);
}

.pkp_structure_footer,
.pkp_footer_content,
.pkp_brand_footer {
    color: rgba(255,255,255,.92) !important;
}

.pkp_structure_footer a,
.pkp_footer_content a,
.pkp_brand_footer a {
    color: #ffffff !important;
}

.pkp_structure_footer a:hover,
.pkp_footer_content a:hover,
.pkp_brand_footer a:hover {
    color: #e7f8ff !important;
}

/* =========================================================
   19. GLASS EFFECT FOR COMMON OJS PANELS
   ========================================================= */

.obj_article_summary,
.obj_issue_summary,
.obj_galley_link,
.block_make_submission,
.cmp_notification,
.pkp_block {
    isolation: isolate;
}

/* =========================================================
   20. ACCESSIBILITY / FOCUS
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(10,132,255,.30) !important;
    outline-offset: 3px;
}

/* =========================================================
   21. MOBILE RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {
    .pkp_navigation_primary_wrapper {
        background: rgba(255,255,255,.16) !important;
    }

    .pkp_block {
        width: 100%;
        box-sizing: border-box;
    }

    .homepage_image {
        max-width: 200px !important;
        float: none !important;
        margin: 0 auto 20px auto !important;
    }

    .homepage_image img {
        max-width: 100% !important;
        width: auto !important;
        margin: 0 auto !important;
    }

    .homepage_about {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .pkp_structure_head {
        box-shadow: 0 8px 24px rgba(30,88,125,.12);
    }

    .pkp_site_name_wrapper {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .pkp_structure_main {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .pkp_block,
    .pkp_page_index .journals > ul > li,
    .cmp_notification,
    .obj_issue_summary,
    .obj_article_summary {
        border-radius: 14px !important;
    }
}

/* =========================================================
   22. REDUCE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}