/*
Theme Name: TV Online Tidore
Theme URI: https://tvonlinetidore.net
Author: TV Online Tidore
Description: Tema portal berita tvonlinetidore.net. Tampilan disalin dari felanews.id (cetak biru portal berita).
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: tvot
*/

/*
 * Tampilan utama ada di assets/css/tvot.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: #24262d;
}

/* Tombol halaman berikutnya/sebelumnya di bawah daftar berita. */
.tvot-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, #e5424a); 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: #272a32; 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); }

/*
 * Logo tvonlinetidore.net (paket logo 30 Sep 2026): logo horizontal tanpa potongan.
 * Slogan "ONE BORERO" sudah ada di dalam logo.
 * - Bagian atas: logo di tengah ruang antara Lokasi (batas kiri) dan kotak Cari (batas kanan).
 * - Kaki halaman: kiri di komputer, tengah di HP.
 */
.fx-brand-tag { display: none; }
.fx-brand { --logo-h: 60px; max-width: 100%; }
.fx-brand-mark { width: auto; height: auto; max-width: 100%; overflow: visible; }
.fx-brand-mark img,
.fx-logo .fx-brand-mark img,
.fx-footer-logo .fx-brand-mark img { height: var(--logo-h); width: auto; max-width: 100%; margin: 0; object-fit: contain; }
.fx-head { grid-template-columns: auto minmax(0, 1fr) auto; }
.fx-logo { justify-self: center; min-width: 0; max-width: 100%; }
.fx-brand-foot { --logo-h: 46px; }
@media (max-width: 1100px) { .fx-brand { --logo-h: 50px; } }
@media (max-width: 860px) {
	.fx-head { grid-template-columns: 88px minmax(0, 1fr) 88px; }
	.fx-brand { --logo-h: 36px; }
	.fx-brand-foot { --logo-h: 40px; }
}
@media (max-width: 360px) { .fx-brand { --logo-h: 30px; } }

/*
 * Palet brand tvonlinetidore.net: Hitam Pers #111318 sebagai warna utama (bar atas, menu,
 * latar luar), Merah Siaran #D91E28 sebagai aksen (label rubrik, TERKINI, garis menu).
 */
:root,
html[data-fx-theme=light] { --f-grad: linear-gradient(90deg, #111318, #1c1f26); }
.fx-page { background: #111318; }
.fx-nav { box-shadow: inset 0 -3px 0 #d91e28; }

/*
 * Motif "titik siaran" dari logo (lingkaran + titik + dua busur) menggantikan motif matahari
 * FeLa News di bar menu, kotak Kirim Informasi, gambar pengganti foto, dan kaki halaman.
 */
.fx-nav {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='56'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.1' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='30' cy='28' r='7'/%3E%3Cpath d='M30 15a13 13 0 0 1 13 13M30 41a13 13 0 0 1-13-13'/%3E%3C/g%3E%3Ccircle cx='30' cy='28' r='2.4' fill='%23fff' fill-opacity='.1'/%3E%3C/svg%3E") 0 0 / 110px 56px repeat, var(--f-grad);
}
.fx-cta {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='56'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.13' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='30' cy='28' r='7'/%3E%3Cpath d='M30 15a13 13 0 0 1 13 13M30 41a13 13 0 0 1-13-13'/%3E%3C/g%3E%3Ccircle cx='30' cy='28' r='2.4' fill='%23fff' fill-opacity='.13'/%3E%3C/svg%3E") 0 0 / 110px 56px repeat, linear-gradient(150deg, #ab171f, #dd1e28);
}
.fx-item-img,
.fx-rubrik-img,
.fx-related-img,
.fx-hero {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='56'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.1' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='30' cy='28' r='7'/%3E%3Cpath d='M30 15a13 13 0 0 1 13 13M30 41a13 13 0 0 1-13-13'/%3E%3C/g%3E%3Ccircle cx='30' cy='28' r='2.4' fill='%23fff' fill-opacity='.1'/%3E%3C/svg%3E") 0 0 / 110px 56px repeat, #282b33;
}
.fx-footer {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='420'%3E%3Cg fill='none' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='470' cy='330' r='70' stroke='%23fff' stroke-opacity='.05'/%3E%3Cpath d='M470 200a130 130 0 0 1 130 130M470 460a130 130 0 0 1-130-130' stroke='%23e75057' stroke-opacity='.16'/%3E%3C/g%3E%3Ccircle cx='470' cy='330' r='24' fill='%23e75057' fill-opacity='.1'/%3E%3C/svg%3E") right bottom / 600px 420px no-repeat, #101114;
}

/* Ikon bilah admin & ikon WordPress (dashicons) tetap memakai huruf ikon (cetak biru bagian 13 no. 7).
   tvot.css memaksa semua elemen memakai "Plus Jakarta Sans" (!important), sehingga ikon "+ Baru" dan
   "Pembaruan" di bilah admin situs depan tampil sebagai kotak/garis. Hanya elemennya yang diatur (bukan
   ::before), jadi ikon plugin yang punya huruf sendiri (mis. LiteSpeed) tetap memakai hurufnya.
   Pemilih .dashicons dibuat sama kuat dengan aturan tvot.css ("body *:not(...)") supaya menang. */
#wpadminbar .ab-icon,
body .dashicons:not(pre):not(code):not(kbd):not(samp) { font-family: dashicons !important; }

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