/**
 * CSS-Only Homepage Customization untuk OJS
 * Hanya perlu file CSS ini, TIDAK perlu ubah file .tpl
 * 
 * Cara pakai:
 * 1. Upload file ini ke folder: plugins/themes/[nama-tema]/styles/
 * 2. Tambahkan link di header.tpl atau via Custom CSS di dashboard OJS
 * 3. Clear cache
 */

/* ============================================
   GLOBAL & RESET
   ============================================ */
html, body {
    font-family: "Inter", "Roboto", "Segoe UI", "Helvetica Neue", sans-serif !important;
    background-color: #f4f7f6 !important;
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 0 12 C 30 30, 30 -6, 60 12 C 90 30, 90 -6, 120 12' fill='none' stroke='%23e2e8f0' stroke-width='1.5'/%3E%3C/svg%3E") !important;
    background-repeat: repeat !important;
    scroll-behavior: smooth !important;
    line-height: 1.6 !important;
    color: #334155 !important;
}

/* ============================================
   LOGO HEADER - Full Width Banner
   ============================================ */
.pkp_structure_head {
    position: relative;
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    padding: 0 !important; /* Dibuat 0 agar full size */
}

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

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

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

/* ============================================
   HIDE DESCRIPTION - Sembunyikan Deskripsi
   ============================================ */
.site-journals .site-journal-description,
.site-journals .description,
.journals .description {
    display: none !important;
}

/* ============================================
   GRID LAYOUT - Tampilan Grid Modern
   ============================================ */
.site-journals-list,
.journals ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 30px !important;
    padding: 0 !important;
    list-style: none !important;
    margin: 40px auto !important;
    max-width: 1200px !important;
}

/* ============================================
   JOURNAL CARD - Styling Card Jurnal
   ============================================ */
.site-journal,
.journals ul li {
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04), 0 10px 25px rgba(0,0,0,0.02) !important;
    padding: 24px !important;
    text-align: center !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    list-style: none !important;
    height: 100% !important; /* Fix overlapping/uneven heights */
    border: 1px solid rgba(0,0,0,0.02) !important;
    
    /* FIX OVERLAPPING */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

.site-journal *,
.journals ul li * {
    box-sizing: border-box !important;
}

.site-journal:hover,
.journals ul li:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04) !important;
}

/* Body jurnal */
.site-journal-body,
.journals ul li .body {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex-grow: 1 !important; /* Take remaining space */
}

/* ============================================
   THUMBNAIL - Styling Gambar
   ============================================ */
.site-journal-img,
.journals ul li .thumb {
    width: 100% !important;
    max-width: 180px !important;
    aspect-ratio: 3/4 !important; /* Fixed dimension without forcing absolute height */
    margin: 0 auto 24px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: #f8fafc !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

.site-journal-img img,
.journals ul li .thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
}

.site-journal-img:hover img,
.journals ul li .thumb:hover img {
    transform: scale(1.08) !important;
}

.journals ul li:not(.has_thumb) {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%) !important;
    color: white !important;
}

/* ============================================
   TITLE - Styling Judul Jurnal
   ============================================ */
.site-journal-title,
.journals ul li h3 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin: 0 0 20px 0 !important;
    line-height: 1.5 !important;
    display: block !important;
    text-align: center !important;
    color: #1e293b !important;
}

.site-journal-title a,
.journals ul li h3 a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.site-journal-title a:hover,
.journals ul li h3 a:hover {
    color: #4f46e5 !important;
}

/* ============================================
   BUTTONS - Styling Tombol
   ============================================ */
.site-journal p.links,
.journals ul li .links {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    margin: auto 0 0 0 !important; /* Push buttons to the very bottom */
    padding: 0 !important;
    list-style: none !important;
}

.journals ul li .links li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
}

.journals ul li .links li:hover {
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Style semua tombol */
.site-journal p.links a,
.journals ul li .links a,
.site-journal .btn,
.journals ul li .btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 12px 24px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
    cursor: pointer !important;
    width: 100% !important;
    letter-spacing: 0.5px !important;
}

/* Tombol pertama - View Journal (Primary) */
.site-journal p.links a:first-child,
.journals ul li .links li.view a,
.site-journal .btn:first-child {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3) !important;
}

.site-journal p.links a:first-child:hover,
.journals ul li .links li.view a:hover,
.site-journal .btn:first-child:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4) !important;
}

/* Tombol kedua - Current Issue (Secondary) */
.site-journal p.links a:last-child,
.journals ul li .links li.current a,
.site-journal .btn:last-child {
    background: #ffffff !important;
    color: #4f46e5 !important;
    border: 2px solid #e0e7ff !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
}

.site-journal p.links a:last-child:hover,
.journals ul li .links li.current a:hover,
.site-journal .btn:last-child:hover {
    background: #e0e7ff !important;
    color: #3730a3 !important;
    border-color: #c7d2fe !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 6px 15px rgba(79, 70, 229, 0.1) !important;
}

/* ============================================
   HEADER/ABOUT SECTION
   ============================================ */
.site-about,
.about_site {
    background: #ffffff !important;
    padding: 40px !important;
    border-radius: 16px !important;
    margin-bottom: 40px !important;
    text-align: center !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
}

/* ============================================
   PAGINATION
   ============================================ */
.cmp_pagination {
    margin-top: 50px !important;
    text-align: center !important;
    padding-bottom: 30px !important;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
    .site-journals-list,
    .journals ul {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
        gap: 20px !important;
        padding: 0 15px !important;
    }
    
    .site-journal-img,
    .journals ul li .thumb {
        max-width: 150px !important;
    }
}

@media (max-width: 480px) {
    .site-journals-list,
    .journals ul {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    
    .site-journal-img,
    .journals ul li .thumb {
        max-width: 180px !important;
        margin: 0 auto 20px !important;
    }
}

/* ============================================
   CLEANUP & TWEAKS
   ============================================ */
.site-journals h2 {
    margin-bottom: 30px !important;
    text-align: center !important;
    font-size: 2rem !important;
    color: #1e293b !important;
}

.page-site,
.page_index_site {
    padding: 40px 0 !important;
}

/* Hapus garis vertikal pembatas (border) dari template bawaan OJS */
.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_main,
.page_site {
    border-left: none !important;
    border-right: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hide PKP/OJS logo in footer */
.pkp_brand_footer,
.pkp_footer_content a[href*="pkp.sfu.ca"],
a[href*="pkp.sfu.ca"] img {
    display: none !important;
}