/**
 * 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
 */

/* ============================================
   LOGO HEADER - Full Width Banner
   ============================================ */

/* RESET BODY & HTML */
html, body {
        font-family: "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; background: #dad9d9;
    }
    
.pkp_site_name .is_img {
    margin-top: 0rem;
    margin-bottom: 0rem;
    width: fit-content;
    }
    
.pkp_site_name .is_img img {
        max-height: fit-content;
    }

.pkp_site_name {
        padding-top: 0rem;
        padding-bottom: 0rem;
    }

.has_site_logo .pkp_site_name {
    text-align: center;
}

.pkp_site_name_wrapper {
    padding-left: 0rem;
    padding-right: 0rem;
    }

.pkp_structure_head {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .25em;
    }

/* ============================================
   HIDE DESCRIPTION - Sembunyikan Deskripsi
   ============================================ */

/* Sembunyikan deskripsi jurnal di homepage */
.site-journals .site-journal-description,
.site-journals .description,
.journals .description {
    display: none !important;
}

/* ============================================
   GRID LAYOUT - Tampilan Grid Modern
   ============================================ */

/* Container grid untuk daftar jurnal */
.site-journals-list,
.journals ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 30px !important;
    padding: 0 !important;
    list-style: none !important;
    margin: 40px 0 !important;
}

/* ============================================
   JOURNAL CARD - Styling Card Jurnal
   ============================================ */

/* Card untuk setiap jurnal */
.site-journal,
.journals ul li {
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    padding: 20px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    list-style: none !important;
}

.site-journal:hover,
.journals ul li:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}

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

/* ============================================
   THUMBNAIL - Styling Gambar
   ============================================ */

/* Wrapper thumbnail */
.site-journal-img,
.journals ul li .thumb {
    width: 100% !important;
    max-width: 200px !important;
    height: 250px !important;
    margin: 0 auto 20px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    display: block !important;
}

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

/* Hover effect pada gambar */
.site-journal-img:hover img,
.journals ul li .thumb:hover img {
    transform: scale(1.05) !important;
}

/* Placeholder jika tidak ada gambar */
.journals ul li:not(.has_thumb) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
}

/* ============================================
   TITLE - Styling Judul Jurnal
   ============================================ */

/* Judul jurnal */
.site-journal-title,
.journals ul li h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 0 20px 0 !important;
    line-height: 1.4 !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

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

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

/* ============================================
   BUTTONS - Styling Tombol
   ============================================ */

/* Container tombol */
.site-journal p.links,
.journals ul li .links {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Sembunyikan bullet list */
.journals ul li .links li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

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

/* Style semua tombol */
.site-journal p.links a,
.journals ul li .links a,
.site-journal .btn,
.journals ul li .btn {
    display: block !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
    text-align: center !important;
    width: 100% !important;
}

/* Tombol pertama - View Journal (Biru) */
.site-journal p.links a:first-child,
.journals ul li .links li.view a,
.site-journal .btn:first-child {
    background: #667eea !important;
    color: white !important;
}

.site-journal p.links a:first-child:hover,
.journals ul li .links li.view a:hover,
.site-journal .btn:first-child:hover {
    background: #5568d3 !important;
    transform: translateY(-2px) !important;
}

/* Tombol kedua - Current Issue (Hijau) */
.site-journal p.links a:last-child,
.journals ul li .links li.current a,
.site-journal .btn:last-child {
    background: #48bb78 !important;
    color: white !important;
}

.site-journal p.links a:last-child:hover,
.journals ul li .links li.current a:hover,
.site-journal .btn:last-child:hover {
    background: #38a169 !important;
    transform: translateY(-2px) !important;
}

/* ============================================
   HEADER/ABOUT SECTION (Optional)
   ============================================ */

/* About section jika ada */
.site-about,
.about_site {
    background: #f8f9fa !important;
    padding: 30px !important;
    border-radius: 10px !important;
    margin-bottom: 40px !important;
    text-align: center !important;
}

/* ============================================
   PAGINATION
   ============================================ */

.cmp_pagination {
    margin-top: 40px !important;
    text-align: center !important;
}

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

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

/* Mobile */
@media (max-width: 480px) {
    .site-journals-list,
    .journals ul {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .site-journal-img,
    .journals ul li .thumb {
        max-width: 200px !important;
        height: 250px !important;
        margin: 0 auto 15px !important;
    }
    
    .site-journal-title,
    .journals ul li h3 {
        font-size: 16px !important;
    }
}

/* ============================================
   CLEANUP - Bersihkan Style yang Tidak Perlu
   ============================================ */

/* Reset margin/padding yang tidak perlu */
.site-journals h2 {
    margin-bottom: 20px !important;
}

/* Hapus border/style default yang mengganggu */
.journals ul li {
    border: none !important;
}

/* ============================================
   ADDITIONAL TWEAKS
   ============================================ */

/* Smooth scroll untuk halaman */
html {
    scroll-behavior: smooth !important;
}

/* Improve readability */
body {
    line-height: 1.6 !important;
}

/* Konsistensi spacing */
.page-site,
.page_index_site {
    padding: 20px 0 !important;
}

/* ============================================
   NOTES - Catatan Penggunaan
   ============================================
   
   KUSTOMISASI WARNA:
   
   Untuk mengubah warna tombol, edit kode berikut:
   
   Tombol "View Journal":
   - Background: #667eea (biru)
   - Hover: #5568d3 (biru gelap)
   
   Tombol "Current Issue":
   - Background: #48bb78 (hijau)
   - Hover: #38a169 (hijau gelap)
   
   ALTERNATIF WARNA:
   - Merah: #e74c3c
   - Oranye: #f39c12
   - Ungu: #9b59b6
   - Tosca: #16a085
   - Pink: #e91e63
   
   ============================================ */
/* ==== FOOTER STYLING ==== */
/* 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;
}