/*
Theme Name: FeLa News
Theme URI: https://felanews.id
Author: FeLa News
Description: Tema portal berita felanews.id. Tampilan disalin dari situs lama felanews.id (AI Builder) agar sama persis.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: felanews
*/

/*
 * Tampilan utama ada di assets/css/fela.css (salinan tampilan situs lama).
 * File ini hanya berisi tambahan kecil yang dibutuhkan WordPress.
 */

/* Bagian yang disembunyikan/ditampilkan oleh skrip (menu lengkap, pencarian HP). */
.fx-menu[hidden],
.fx-search-m[hidden],
.fx-listen[hidden] { display: none !important; }

/* Teks khusus pembaca layar. */
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.screen-reader-text:focus {
	clip: auto; width: auto; height: auto; z-index: 100000; top: 8px; left: 8px;
	padding: 10px 14px; background: #fff; color: #102941;
}

/* Tombol halaman berikutnya/sebelumnya di bawah daftar berita. */
.fela-halaman { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
a.fx-more { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* Tombol bagikan berupa tautan <a> (situs lama memakai <button>). */
a.fx-share-btn { display: inline-flex; align-items: center; justify-content: center; }

/*
 * Iklan banner di beranda (atas, tengah, akhir) selebar isi halaman:
 * sejajar tepi kiri foto berita utama dan tepi kanan Berita Populer.
 * Di HP otomatis selebar layar dikurangi jarak tepi (16px).
 */
.fx-dark > .fx-ad-banner .fx-ad-body { max-width: none; }
.fx-dark > .fx-ad-banner a,
.fx-dark > .fx-ad-banner picture,
.fx-dark > .fx-ad-banner img { width: 100%; }
.fx-dark > .fx-ad-banner img { border-radius: 6px; }

/* Paragraf berita rapat tanpa jarak, sama seperti situs lama. */
body .fx-dark .article-prose p { margin: 0; }

/* Gambar & keterangan gambar di dalam isi berita (dari editor WordPress). */
.article-prose figure { margin: 22px 0; }
.article-prose img { max-width: 100%; height: auto; border-radius: 6px; display: block; }
.article-prose figcaption,
.article-prose .wp-caption-text { font-size: 13px; opacity: .75; margin-top: 6px; }
.article-prose .aligncenter { margin-left: auto; margin-right: auto; }
.article-prose iframe { max-width: 100%; }
/* Galeri foto dari formulir berita: foto memenuhi kotak, keterangan tidak memudar. */
.article-prose figure.article-gallery { margin: 30px 0; }
.article-prose .article-gallery-item img { width: 100%; height: 100%; border-radius: 0; }
.article-prose .article-gallery figcaption.fx-gcap { opacity: 1; margin-top: 0; }
/* Layar foto besar galeri di atas bilah admin (saat redaksi sedang masuk). */
.gallery-lightbox { z-index: 100000; }
/* Lokasi berita = tautan ke kategori daerahnya. */
.fx-byline-row > a.fx-lokasi { display: inline-flex; gap: 6px; align-items: center; color: inherit; text-decoration: none; }
.fx-byline-row > a.fx-lokasi:hover { color: var(--f-accent, #f59332); text-decoration: underline; }

/* Pesan "Tautan berita disalin" setelah menekan tombol bagikan */
.fx-pesan-salin { position: fixed; left: 50%; bottom: 24px; z-index: 1000; max-width: calc(100% - 32px); width: max-content; padding: 12px 16px; border-radius: 10px; background: #0f2a4a; color: #fff; font-size: 14px; line-height: 1.4; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .2s, transform .2s; }
.fx-pesan-salin.tampil { opacity: 1; transform: translate(-50%, 0); }

/* Tombol tema terang/gelap di bar atas, di kanan jam (tampilan komputer). */
.fx-top-tema { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #ffffff2e; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background-color .15s ease; }
.fx-top-tema:hover,
.fx-top-tema:focus-visible { background: #ffffff4d; color: #ffd89a; }
.fx-top-tema svg { width: 16px; height: 16px; }
/* Tombol menu lengkap (garis tiga) di kiri menu rubrik. */
.fx-nav-menu-kiri { border: 0; cursor: pointer; padding: 0; }
.fx-nav-menu-kiri svg { width: 20px; height: 20px; }
/* Bar atas tetap satu baris di layar sedang (setelah tombol tema pindah ke sini). */
.fx-top a,
.fx-top-date > span { white-space: nowrap; }
@media (max-width: 1100px) {
	.fx-top { padding: 0 20px; letter-spacing: .03em; }
	.fx-top-links,
	.fx-top-date { gap: 10px; }
}

/* Footer (permintaan pemilik, 1 Okt 2026).
 * Komputer: kolom logo + identitas | Rubrik & Ketentuan. Rubrik & Ketentuan sejajar satu sama lain,
 * berada di tengah (tegak) antara atas logo dan bawah ikon media sosial; jarak antarkolom sama besar.
 * HP: Ketentuan dulu, lalu logo & media sosial di tengah, tanpa Rubrik. */
/* Kolom ke-4 kosong (lebar 0) di tepi kanan: jarak identitas–Rubrik, Rubrik–Ketentuan, dan
 * Ketentuan–tepi kanan sama besar, sehingga Ketentuan tidak menempel ke tepi. */
.fx-footer-grid { grid-template-columns: minmax(0, 420px) max-content max-content 0; justify-content: space-between; column-gap: 32px; padding-top: 0; }
.fx-footer-info .fx-footer-logo { align-self: flex-start; margin-bottom: 14px; }
/* Rubrik & Ketentuan memakai kolom ke-2 dan ke-3 footer (subgrid), sehingga jarak identitas–Rubrik
 * sama dengan jarak Rubrik–Ketentuan; keduanya tetap sejajar dan di tengah tinggi kolom logo. */
.fx-footer-navs { grid-column: 2 / 4; align-self: stretch; display: grid; grid-template-columns: subgrid; align-items: stretch; }
/* Komputer: Rubrik & Ketentuan setinggi kolom logo — judul sejajar batas atas logo, baris terakhir
 * sejajar batas bawah ikon media sosial. Jarak antarbaris merenggang menyesuaikan; baris Rubrik &
 * Ketentuan tetap sejajar karena memakai jumlah baris (--baris) dan tinggi baris yang sama. */
@media (min-width: 861px) {
	.fx-footer-navs > nav { display: flex; flex-direction: column; }
	.fx-footer-navs .fx-footer-links,
	.fx-footer-navs .fx-footer-rubrik { flex: 1; display: grid; grid-template-rows: repeat(var(--baris, 7), 22px); align-content: space-between; align-items: center; }
	/* Rubrik diisi turun per kolom: kolom kiri setinggi Ketentuan (7), sisanya di kolom kanan. */
	.fx-footer-navs .fx-footer-rubrik { grid-auto-flow: column; }
}
.fx-footer-navs .fx-footer-rubrik { grid-template-columns: repeat(2, max-content); column-gap: 32px; }
@media (max-width: 860px) {
	.fx-footer-grid { grid-template-columns: 1fr; }
	.fx-footer-navs { grid-column: auto; order: -1; display: block; }
	.fx-footer-info .fx-footer-logo { align-self: center; }
	.fx-footer-nav-rubrik { display: none; }
	.fx-footer .fx-social { justify-content: center; }
	/* Seluruh isi footer HP rata tengah: Ketentuan, identitas penerbit, kontak, dan baris hak cipta. */
	.fx-footer-grid { text-align: center; }
	.fx-footer-links { align-items: center; }
	.fx-footer-info { align-items: center; }
	.fx-footer-info li { display: block; }
	.fx-footer-info li svg { display: inline-block; vertical-align: -2px; margin: 0 6px 0 0; }
	.fx-footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
}
.fx-footer-links a:before { content: none; } /* Tanpa tanda "–" di depan daftar Ketentuan. */

/* ---------- Foto berita dalam bingkai tetap + latar buram (seperti tema domain sementara TV Online Tidore) ----------
   Foto dimuat utuh (contain); sisa ruang diisi foto yang sama versi buram (--fx-foto dari felanews_gambar).
   Foto yang bentuknya hampir sama dengan bingkai diberi kelas "pas" oleh fela.js lalu dibuat penuh (cover). */
.fx-foto { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; isolation: isolate; }
.fx-foto::before { content: ""; position: absolute; inset: -24px; z-index: -1; background: var(--fx-foto, none) center / cover no-repeat; filter: blur(20px) brightness(.72) saturate(1.1); transform: scale(1.08); }
.fx-foto > .fx-img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.fx-foto.pas > .fx-img { object-fit: cover; }
.fx-foto.pas::before { display: none; }
/* Halaman berita: foto utama dalam bingkai 16:9 (dulu tinggi mengikuti foto, maks. 620 px lalu terpotong). */
.fx-figure-img { aspect-ratio: 16 / 9; }
.fx-figure-img .fx-foto > .fx-img { max-height: none; }

/* ---------- Iklan dalam bingkai tetap + latar buram ----------
   Banner 970×250 (HP 320×100), kotak 300×250. Gambar iklan dimuat utuh; sisa ruang diisi gambar yang
   sama versi buram, jadi iklan bergambar tinggi tidak memakan tempat. Iklan yang bentuknya pas tampil penuh. */
.fx-ad a { width: 100%; }
.fx-ad .fx-ad-foto { width: 100%; aspect-ratio: 970 / 250; border-radius: 6px; }
.fx-ad-kotak .fx-ad-foto { aspect-ratio: 300 / 250; }
.fx-ad .fx-ad-foto > .fx-img { border-radius: 0; }
/* Latar buram iklan lebih ringan dari foto berita (permintaan pemilik): blur lebih tipis, tidak terlalu gelap. */
.fx-ad .fx-ad-foto::before { inset: -12px; filter: blur(8px) brightness(.9) saturate(1.05); transform: scale(1.04); }
@media (max-width: 640px) {
	.fx-ad-banner .fx-ad-foto { aspect-ratio: 320 / 100; }
	.fx-ad-foto[style*="--fx-foto-hp"]::before { background-image: var(--fx-foto-hp); }
}

/* Ikon bilah admin & ikon WordPress (dashicons) tetap memakai huruf ikon. fela.css memaksa semua elemen
   memakai "Source Sans 3" (!important), sehingga ikon "+ Baru" dan "Pembaruan" di bilah admin situs depan
   tampil sebagai kotak/garis. Hanya elemennya yang diatur; ikon plugin yang punya huruf sendiri (mis. LiteSpeed) tetap memakai hurufnya. */
#wpadminbar .ab-icon,
.dashicons { font-family: dashicons !important; }