/*
Theme Name: OneNews
Theme URI: https://fesa.one
Author: FESA ONE
Author URI: https://fesa.one
Description: Tema berita ultra-ringan, cepat, dan dioptimalkan untuk Core Web Vitals, AdSense, dan SEO.
Version: 1.2.0
License: GNU General Public License v2 or later
Text Domain: onenews
*/

/*
 * CATATAN ARSITEKTUR CSS:
 * Style kritis (header, ad-slot, grid, footer) ada di critical CSS inline (functions.php).
 * File ini berisi gaya non-kritis yang di-load async (below-fold, interaksi, detail).
 * Tidak ada duplikasi — setiap rule hanya ada di satu tempat.
 */

/* ============================================================
   VARIABEL
   ============================================================ */
:root {
    --primary:      #004a9e;
    --text:         #222222;
    --text-muted:   #555555;
    --bg:           #ffffff;
    --gray-light:   #f0f0f0;
    --border:       #e0e0e0;
}

/* ============================================================
   TIPOGRAFI TAMBAHAN
   ============================================================ */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
    line-height: 1.3;
    margin-top: 2rem;
    margin-bottom: .75rem;
}

.entry-content p {
    margin-bottom: 1.25rem;
}

.entry-content a {
    color: var(--primary);
    text-decoration: underline;
}

/* ============================================================
   HEADER — detail tambahan (di atas critical)
   ============================================================ */
.site-title a:hover {
    opacity: .85;
}

/* ============================================================
   NAVIGASI / BREADCRUMB
   ============================================================ */
.breadcrumb a:hover {
    text-decoration: none;
}

/* ============================================================
   GRID KARTU ARTIKEL — hover & detail
   ============================================================ */
.post-card {
    transition: box-shadow .15s ease;
}

.post-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

.post-card-title a:hover {
    color: var(--primary);
}

/* ============================================================
   GAMBAR
   ============================================================ */
.post-thumb {
    /* aspect-ratio & background sudah di critical CSS */
    transition: opacity .2s ease;
}

/* ============================================================
   ARTIKEL SINGLE — detail konten
   ============================================================ */
.entry-meta a {
    color: var(--primary);
    text-decoration: underline;
}

.entry-content blockquote {
    border-left: 3px solid var(--primary);
    margin: 1.5rem 0;
    padding: .75rem 1rem;
    background: var(--gray-light);
    color: var(--text-muted);
}

.entry-content img {
    border-radius: 4px;
    margin: 1rem 0;
}

/* ============================================================
   TAGS
   ============================================================ */
.post-tags {
    margin-top: 2rem;
    font-size: .9rem;
}

.post-tags a {
    color: var(--primary);
    text-decoration: underline;
}

/* ============================================================
   ARTIKEL TERKAIT
   ============================================================ */
.related-posts {
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.related-posts-heading {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 .75rem;
}

.related-posts ul {
    padding-left: 1.2rem;
    margin: 0;
}

.related-posts li {
    margin-bottom: .5rem;
}

.related-posts a {
    color: var(--primary);
    text-decoration: underline;
}

.related-posts a:hover {
    text-decoration: none;
}

/* ============================================================
   FOOTER — detail (dimensi & link sudah di critical CSS)
   ============================================================ */
.site-footer p {
    margin: .25rem 0;
}

/* ============================================================
   PAGINASI
   ============================================================ */
.nav-links {
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.nav-links a,
.nav-links span {
    padding: .4rem .75rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--primary);
    text-decoration: none;
    font-size: .9rem;
}

.nav-links .current {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ============================================================
   CONTENT VISIBILITY — percepat Speed Index untuk konten bawah
   ============================================================ */
.related-posts,
.site-footer {
    content-visibility: auto;
    contain-intrinsic-size: 0 200px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
    .single-title {
        font-size: 1.6rem;
    }

    .post-grid {
        grid-template-columns: 1fr;
    }
}