/*
Theme Name: Zona Intelektual Custom
Theme URI: https://zonaintelektual.com
Author: Zona Intelektual
Description: Tema custom portal berita, terinspirasi dari layout hedra.id (hero grid, kategori card, sidebar trending), dibangun untuk Core Web Vitals, schema.org NewsArticle, dan Google News fast-indexing.
Version: 1.4.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: zonaintelektual
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  --zi-bg: #ffffff;
  --zi-ink: #121417;
  --zi-ink-soft: #545a63;
  --zi-border: #e7e9ec;
  --zi-surface: #f6f7f9;
  --zi-brand: #1a56db;
  --zi-brand-dark: #0f3ea8;
  --zi-radius: 10px;
  --zi-max: 1180px;
  --zi-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;

  /* category accent colors — dipetakan otomatis via body class kategori */
  --cat-sepak-bola: #e11d33;
  --cat-pendidikan: #0f8b46;
  --cat-teknologi: #1a56db;
  --cat-ekonomi: #b8860b;
  --cat-esports: #7c3aed;
  --cat-default: #374151;
}

/* ==========================================================================
   2. RESET RINGAN — sengaja minimal, hindari CSS besar yang jadi render-blocking
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; max-width:100%; overflow-x:hidden; }
body{
  margin:0;
  font-family:var(--zi-font);
  color:var(--zi-ink);
  background:var(--zi-bg);
  line-height:1.5;
  font-size:16px;
  max-width:100%;
  overflow-x:hidden; /* jaring pengaman: cegah 1 elemen lebar-berlebih menggeser seluruh halaman ke samping di HP */
}
img{ max-width:100%; height:auto; display:block; }
/* Judul/teks panjang wajib bisa patah baris — tanpa ini, satu kata/link panjang
   bisa memaksa parent (flex/grid item) melebar melebihi lebar layar HP. */
h1,h2,h3,h4,figcaption,.entry-content{ overflow-wrap:break-word; word-break:break-word; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--zi-brand); }
.container{ max-width:var(--zi-max); margin:0 auto; padding:0 16px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* Skip link, aksesibilitas + baik untuk crawler */
.skip-link{
  position:absolute; left:-9999px; top:0; background:#000; color:#fff; padding:10px 16px; z-index:9999;
}
.skip-link:focus{ left:8px; top:8px; }

/* ==========================================================================
   3. HEADER — sticky, ringan, logo via <img width height> untuk cegah CLS
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--zi-bg);
  border-bottom:1px solid var(--zi-border);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
  min-width:0; /* flex row tidak boleh dipaksa melebar oleh anak-anaknya */
}
.site-logo img{ height:36px; width:auto; }
.primary-nav ul{ list-style:none; display:flex; gap:22px; margin:0; padding:0; }
.primary-nav a{ font-weight:600; font-size:14px; }
.header-actions{ display:flex; align-items:center; gap:14px; min-width:0; }
.nav-toggle{ display:none; background:none; border:0; font-size:22px; cursor:pointer; }

/* Kategori quick-link di header, di sebelah tombol pencarian */
.header-quicklinks{ display:flex; align-items:center; gap:8px; }
.header-quicklinks__item{
  position:relative; isolation:isolate; overflow:hidden;
  font-size:12px; font-weight:700; white-space:nowrap;
  padding:6px 12px; border-radius:999px;
  background:var(--zi-surface); color:var(--zi-ink-soft);
  border:1px solid var(--zi-border);
  /* PENTING: background/border-color TIDAK di-transition langsung di sini.
     Keduanya properti non-composited (memicu repaint tiap frame di main
     thread) -> penyebab audit PageSpeed "Avoid non-composited animations".
     Swap warna latar dipindah ke pseudo-element ::before yang animasinya
     hanya opacity (properti composited, jalan di GPU). Border-color diganti
     instan (tanpa transition) karena perubahannya sekejap & tidak terlihat
     sebagai "non-composited animation" oleh browser. */
  transition:color .15s ease;
}
.header-quicklinks__item::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  background:var(--cat-accent, var(--zi-brand));
  opacity:0;
  transition:opacity .15s ease;
}
.header-quicklinks__item:hover{
  color:#fff; border-color:transparent;
}
.header-quicklinks__item:hover::before{
  opacity:1;
}
/* Aksen warna per kategori mengikuti token yang sama dengan badge/internal-link */
.header-quicklinks__item.cat-sepak-bola{ --cat-accent: var(--cat-sepak-bola); }
.header-quicklinks__item.cat-pendidikan{ --cat-accent: var(--cat-pendidikan); }
.header-quicklinks__item.cat-teknologi{ --cat-accent: var(--cat-teknologi); }
.header-quicklinks__item.cat-ekonomi{ --cat-accent: var(--cat-ekonomi); }
.header-quicklinks__item.cat-esports{ --cat-accent: var(--cat-esports); }

.header-quicklinks--mobile{
  display:none;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:10px 16px; gap:8px;
  border-top:1px solid var(--zi-border);
}
.header-quicklinks--mobile .header-quicklinks__item{ flex:0 0 auto; }

/* Tombol + panel pencarian — sebelumnya cuma <a href="/?s="> kosong yang
   tidak melakukan apa-apa; sekarang tombol beneran membuka form pencarian. */
.search-toggle-wrap{ position:relative; }
.search-toggle{
  background:none; border:0; font-size:18px; line-height:1; cursor:pointer;
  padding:6px; border-radius:6px;
}
.search-toggle:hover, .search-toggle:focus-visible{ background:var(--zi-surface); }

.search-panel{
  position:absolute; top:calc(100% + 10px); right:0;
  width:300px; max-width:80vw;
  background:var(--zi-bg); border:1px solid var(--zi-border); border-radius:var(--zi-radius);
  box-shadow:0 8px 24px rgba(18,20,23,.12);
  padding:12px; z-index:200;
}
.search-panel[hidden]{ display:none; }

.zi-search-form{ display:flex; gap:6px; }
.zi-search-form__input{
  flex:1; min-width:0; padding:9px 10px; font-size:14px;
  border:1px solid var(--zi-border); border-radius:8px;
}
.zi-search-form__input:focus{ outline:2px solid var(--zi-brand); outline-offset:1px; }
.zi-search-form__submit{
  border:0; border-radius:8px; background:var(--zi-brand); color:#fff;
  font-size:15px; padding:0 12px; cursor:pointer;
}
.zi-search-form__submit:hover{ background:var(--zi-brand-dark); }

@media (max-width:860px){
  .primary-nav{ display:none; }
  .nav-toggle{ display:block; }
  .header-quicklinks:not(.header-quicklinks--mobile){ display:none; }
  .header-quicklinks--mobile{ display:flex; }
  .search-panel{ right:auto; left:0; width:auto; }
}

/* ==========================================================================
   4. HERO GRID — terinspirasi grid "Sorotan Hari Ini" hedra/zonaintelektual
   ========================================================================== */
.hero-grid{
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap:20px;
  margin:24px 0;
}
.hero-main{ position:relative; border-radius:var(--zi-radius); overflow:hidden; }
.hero-main img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.hero-main figcaption{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(0deg, rgba(0,0,0,.82), rgba(0,0,0,0));
  color:#fff; padding:22px 18px 16px;
}
.hero-side{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.hero-side .card{ display:flex; gap:12px; min-width:0; }
.hero-side .card img{ width:110px; height:74px; object-fit:cover; border-radius:8px; flex:none; }
/* Ini penyebab utama bug "halaman geser ke samping di HP": div judul di
   sebelah gambar adalah flex item tanpa min-width, jadi judul artikel yang
   panjang (mis. "Prediksi Mark Zuckerberg: Miliaran Orang Bakal Punya Agen AI...")
   memaksa flex item ini (dan seluruh baris di atasnya) melebar melebihi lebar
   layar — ini yang membuat SEMUA baris di halaman ikut tergeser ke kiri. */
.hero-side .card > div{ min-width:0; }
.hero-main{ min-width:0; }

@media (max-width:760px){
  .hero-grid{ grid-template-columns:1fr; }
}

/* Rasio hero-main 16:9 di HP kecil memotong cukup banyak bagian foto
   (mis. wajah di foto potret jadi hilang). Dibuat sedikit lebih tinggi
   (4:3) khusus di layar sempit supaya area foto yang terlihat lebih luas. */
@media (max-width:480px){
  .hero-main img{ aspect-ratio:4/3; }
  .hero-side .card img{ width:88px; height:64px; }
}

/* ==========================================================================
   5. KATEGORI BADGE — pewarnaan otomatis per kategori
   ========================================================================== */
.badge{
  display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; padding:4px 9px; border-radius:5px; color:#fff;
  background:var(--cat-default);
}
.cat-sepak-bola .badge{ background:var(--cat-sepak-bola); }
.cat-pendidikan .badge{ background:var(--cat-pendidikan); }
.cat-teknologi .badge{ background:var(--cat-teknologi); }
.cat-ekonomi .badge{ background:var(--cat-ekonomi); }
.cat-esports .badge{ background:var(--cat-esports); }

/* ==========================================================================
   6. SECTION KATEGORI — grid 3 kolom ala hedra "Artikel Terbaru"
   ========================================================================== */
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin:36px 0 14px;
}
.section-head h2{ font-size:20px; margin:0; }
.section-head a{ font-size:13px; font-weight:700; color:var(--zi-brand); }

.card-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.article-card img{ border-radius:var(--zi-radius); aspect-ratio:16/9; object-fit:cover; }
.article-card h3{ font-size:16px; margin:10px 0 6px; line-height:1.35; }
.article-card .meta{ font-size:12px; color:var(--zi-ink-soft); }
.article-card p{ font-size:13.5px; color:var(--zi-ink-soft); margin:6px 0 0; }

@media (max-width:900px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .card-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   7. LAYOUT KONTEN + SIDEBAR (single & archive)
   ========================================================================== */
.content-layout{
  display:grid; grid-template-columns: minmax(0,2.1fr) minmax(0,1fr); gap:32px; align-items:start;
}
.sidebar .widget{
  border:1px solid var(--zi-border); border-radius:var(--zi-radius);
  padding:16px; margin-bottom:20px; background:var(--zi-surface);
}
.sidebar .widget h3{ font-size:15px; margin:0 0 12px; }
.trending-item{ display:flex; gap:10px; margin-bottom:12px; min-width:0; }
.trending-item .rank{ font-weight:800; font-size:20px; color:var(--zi-border); width:22px; flex:none; }
.trending-item > div{ min-width:0; }

@media (max-width:900px){ .content-layout{ grid-template-columns:1fr; } }

/* ==========================================================================
   8. ARTIKEL SINGLE
   ========================================================================== */
.single-article h1{ font-size:clamp(24px,4vw,34px); line-height:1.25; margin:14px 0 8px; }
.single-article .article-meta{ font-size:13px; color:var(--zi-ink-soft); margin-bottom:16px; }
.single-article .featured-image img{ border-radius:var(--zi-radius); width:100%; aspect-ratio:16/9; object-fit:cover; }
.single-article .entry-content{ font-size:16.5px; line-height:1.75; }
.single-article .entry-content p{ margin:0 0 1.1em; }
.single-article .entry-content img{ border-radius:8px; margin:1em 0; }
.breadcrumb{ font-size:12.5px; color:var(--zi-ink-soft); margin-bottom:10px; }
.breadcrumb a{ color:var(--zi-ink-soft); }

/* Tabel di dalam artikel (mis. klasemen/standings seperti "Perolehan Poin Dan
   Selisih Gol"). Tabel TIDAK bisa reflow seperti teks, jadi kalau kolomnya
   banyak di layar sempit, dibuat scroll horizontal HANYA pada tabelnya
   (dibungkus .zi-table-wrap oleh inc/toc.php), bukan menggeser seluruh halaman. */
.zi-table-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:1.2em 0; border:1px solid var(--zi-border); border-radius:8px;
}
.entry-content table{
  width:100%; border-collapse:collapse; font-size:14.5px; min-width:420px;
}
.entry-content th, .entry-content td{
  padding:9px 12px; border-bottom:1px solid var(--zi-border); text-align:left; white-space:nowrap;
}
.entry-content thead th{ background:var(--zi-surface); font-weight:800; }
.entry-content tbody tr:last-child td{ border-bottom:0; }

/* Tombol Bagikan (share) — teks/emoji ringan, tanpa icon-font eksternal. */
.zi-share{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.zi-share__label{ font-size:12.5px; font-weight:700; color:var(--zi-ink-soft); }
.zi-share__btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:30px; padding:0 10px;
  border-radius:7px; font-size:12px; font-weight:800; letter-spacing:.02em;
  color:#fff; border:0; cursor:pointer;
}
.zi-share__btn--wa{ background:#25D366; }
.zi-share__btn--fb{ background:#1877F2; }
.zi-share__btn--x{ background:#111318; }
.zi-share__btn--tg{ background:#229ED9; }
.zi-share__btn--copy{ background:var(--zi-surface); color:var(--zi-ink); border:1px solid var(--zi-border); }
.zi-share__btn--copy.is-copied{ background:#0f8b46; color:#fff; border-color:transparent; }
.zi-share__btn:hover{ filter:brightness(1.08); }

/* Tombol "Ikuti di Google News" — CTA khusus karena traffic Discover/Google News
   sensitif terhadap follower publisher, jadi sengaja dibuat menonjol (bukan cuma
   ikon kecil di footer). */
.zi-gnews-follow{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1.5px solid var(--zi-brand);
  color:var(--zi-brand); font-weight:800; font-size:13.5px;
  padding:9px 14px; border-radius:999px; margin-bottom:16px;
}
.zi-gnews-follow:hover{ background:var(--zi-brand); color:#fff; }
.zi-gnews-follow__icon{ font-size:15px; }
.sidebar .widget .zi-gnews-follow{ width:100%; box-sizing:border-box; justify-content:center; margin-bottom:0; }

/* Box internal link otomatis di tengah artikel — desain khas situs ini:
   aksen warna KIRI mengikuti kategori artikel yang di-link (pakai variabel
   warna yang sama dengan badge kategori), plus chip nama kategori di body. */
.zi-internal-link{
  border-left:4px solid var(--cat-default);
  background:var(--zi-surface);
  border-radius:8px;
  margin:1.4em 0;
}
.zi-internal-link.cat-sepak-bola{ border-left-color:var(--cat-sepak-bola); }
.zi-internal-link.cat-pendidikan{ border-left-color:var(--cat-pendidikan); }
.zi-internal-link.cat-teknologi{ border-left-color:var(--cat-teknologi); }
.zi-internal-link.cat-ekonomi{ border-left-color:var(--cat-ekonomi); }
.zi-internal-link.cat-esports{ border-left-color:var(--cat-esports); }

.zi-internal-link__inner{
  display:flex; align-items:center; gap:14px;
  padding:12px 16px;
  min-width:0;
}
.zi-internal-link__inner:hover .zi-internal-link__title{ color:var(--zi-brand); text-decoration:underline; }
.zi-internal-link__thumb{ flex:none; width:84px; height:84px; border-radius:8px; overflow:hidden; }
.zi-internal-link__thumb img{ width:100%; height:100%; object-fit:cover; border-radius:8px; }
.zi-internal-link__body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.zi-internal-link__cat{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--zi-ink-soft); }
.zi-internal-link__title{ font-size:15.5px; line-height:1.35; color:var(--zi-ink); font-weight:700; }
.zi-internal-link__meta{ font-size:12px; color:var(--zi-ink-soft); }

@media (max-width:480px){
  .zi-internal-link__thumb{ width:66px; height:66px; }
  .zi-internal-link__title{ font-size:14px; }
}

/* Daftar Isi (Table of Contents) — dibangun otomatis dari heading H2 (inc/toc.php).
   Ditaruh sebelum sub-judul pertama, bisa dilipat (collapsible) via JS. */
.zi-toc{
  border:1px solid var(--zi-border);
  background:var(--zi-surface);
  border-radius:var(--zi-radius);
  margin:1.2em 0 1.6em;
  overflow:hidden;
}
.zi-toc__toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:0; cursor:pointer;
  font-size:14.5px; font-weight:800; color:var(--zi-ink);
  padding:12px 16px;
}
.zi-toc__chevron{ transition:transform .15s ease; font-size:13px; color:var(--zi-ink-soft); }
.zi-toc[data-collapsed="true"] .zi-toc__chevron{ transform:rotate(-90deg); }
.zi-toc[data-collapsed="true"] .zi-toc__list{ display:none; }
.zi-toc__list{
  list-style:none; counter-reset:none;
  margin:0; padding:2px 16px 14px;
  display:flex; flex-direction:column; gap:6px;
}
.zi-toc__list a{ font-size:14px; color:var(--zi-brand); font-weight:600; }
.zi-toc__list a:hover{ text-decoration:underline; }

/* "Berita Terkait" — list related-posts di AKHIR artikel (beda dari box
   internal link di tengah artikel), fokus 1 kategori supaya topical relevance
   makin kuat. Mengikuti pola referensi terkini24.id. */
.zi-related-section{
  margin:2.4em 0 0;
  padding-top:1.6em;
  border-top:1px solid var(--zi-border);
}
.zi-related-section__title{ font-size:18px; margin:0 0 14px; }
.zi-related-section__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.zi-related-section__link{ display:flex; gap:12px; align-items:center; min-width:0; }
.zi-related-section__link:hover .zi-related-section__headline{ color:var(--zi-brand); text-decoration:underline; }
.zi-related-section__thumb{ flex:none; width:64px; height:64px; border-radius:8px; overflow:hidden; }
.zi-related-section__thumb img{ width:100%; height:100%; object-fit:cover; border-radius:8px; }
.zi-related-section__body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.zi-related-section__meta{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--zi-ink-soft); }
.zi-related-section__headline{ font-size:14.5px; line-height:1.35; color:var(--zi-ink); font-weight:700; }

/* ==========================================================================
   8b. GUTENBERG BLOCKS & EMBED — gambar/tabel/video lebar (alignwide/alignfull),
   gallery, columns, code block. Sebelumnya tidak ada rule khusus untuk ini,
   jadi kalau penulis menyisipkan blok lebar atau embed video, kontennya bisa
   meluber keluar kolom artikel dan efeknya terlihat seperti "kepotong" oleh
   sidebar/grid di sebelahnya. Di layout 2 kolom (artikel + sidebar) kita TIDAK
   bisa bikin full-bleed sungguhan tanpa embel-embel breakout kompleks, jadi
   di sini alignwide/alignfull dibatasi rapi selebar kolom artikel saja —
   lebih lebar dari teks biasa, tapi tetap penuh & tidak terpotong.
   ========================================================================== */
.entry-content .alignwide,
.entry-content .alignfull{ width:100%; max-width:100%; }
.entry-content .wp-block-image img,
.entry-content .wp-block-gallery img,
.entry-content figure img{ max-width:100%; height:auto; }
.entry-content .wp-block-columns{
  display:flex; flex-wrap:wrap; gap:16px;
}
.entry-content .wp-block-column{ flex:1 1 240px; min-width:0; }
.entry-content .wp-block-gallery{
  display:flex; flex-wrap:wrap; gap:8px;
}
.entry-content .wp-block-gallery .wp-block-image{ flex:1 1 140px; min-width:0; max-width:100%; }

/* Video/oEmbed (YouTube, dsb.) — dipaksa rasio 16:9 responsif supaya iframe
   bawaan (yang defaultnya punya width/height tetap dalam piksel dari provider)
   tidak melebar keluar kolom artikel di HP. */
.entry-content iframe,
.entry-content video,
.entry-content .wp-embed-responsive iframe{
  max-width:100%;
}
.entry-content .wp-block-embed__wrapper,
.entry-content .wp-embed-responsive .wp-block-embed__wrapper{
  position:relative; width:100%; padding-top:56.25%; height:0; overflow:hidden;
}
.entry-content .wp-block-embed__wrapper iframe,
.entry-content .wp-embed-responsive .wp-block-embed__wrapper iframe{
  position:absolute; top:0; left:0; width:100%; height:100%;
}

/* Blok kode — cuplikan kode/URL panjang tanpa spasi TIDAK bisa word-wrap
   seperti teks biasa, jadi dibuat scroll horizontal khusus di blok itu saja. */
.entry-content pre,
.entry-content code{
  max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.entry-content pre{ padding:12px 14px; background:var(--zi-surface); border-radius:8px; }

/* Indikator visual "bisa digeser" pada tabel — perbaikan UX: tabel klasemen
   SUDAH bisa discroll (lihat .zi-table-wrap di atas), tapi tanpa tanda visual,
   di HP (terutama Safari yang menyembunyikan scrollbar) orang mengira kolom
   kanan hilang/kepotong padahal tinggal digeser. JS (main.js) menambah class
   "is-scrollable"/"at-end" untuk menampilkan/menyembunyikan gradasi ini. */
.zi-table-wrap{ position:relative; }
.zi-table-wrap.is-scrollable::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:28px;
  background:linear-gradient(90deg, rgba(255,255,255,0), var(--zi-bg));
  pointer-events:none; transition:opacity .15s ease;
}
.zi-table-wrap.is-scrollable.at-end::after{ opacity:0; }

/* ==========================================================================
   9. FOOTER
   ========================================================================== */
.site-footer{ background:var(--zi-surface); border-top:1px solid var(--zi-border); margin-top:48px; padding:32px 0; font-size:13px; color:var(--zi-ink-soft); }
.footer-links{ display:flex; flex-wrap:wrap; gap:16px; list-style:none; padding:0; margin:0 0 14px; }
.footer-social{ display:flex; gap:14px; list-style:none; padding:0; margin:0 0 14px; }

/* ==========================================================================
   10. UTIL — cegah layout shift dari iklan/embed
   ========================================================================== */
.ad-slot{ min-height:250px; display:flex; align-items:center; justify-content:center; background:var(--zi-surface); border-radius:8px; }