/**
 * Halaman Legal — Styling
 *
 * CSS untuk templates/page-legal.php: syarat & ketentuan, kebijakan privasi,
 * dan halaman legal lain yang menyusul. SATU berkas untuk semuanya — itulah
 * sebabnya blok <style> yang dulu diketik di dalam konten tiap halaman
 * dilepas (lihat tools/bersihkan-legal.py): aturan yang sama disalin empat
 * kali berarti empat tempat yang harus disunting setiap kali berubah.
 *
 * Semua kelas berawalan .la-legal- dan tidak dipakai halaman lain mana pun.
 * SATU kekecualian yang disengaja: dropdown pemilih halaman di layar sempit
 * memakai .la-aff-custom-select — komponen bersama yang juga menggerakkan
 * filter di halaman Daftar Kelas. Disalin ke sini justru akan membuat
 * keduanya perlahan berbeda; berkas courses.css ikut dimuat di halaman ini
 * (lihat inc/enqueue.php) khusus untuk komponen itu.
 *
 * Isi halaman ditulis di editor WordPress sebagai HTML polos — h2, h3, p,
 * ul, ol, tabel. Semua penataannya ada di bagian ISI KONTEN di bawah, jadi
 * penulis konten tidak perlu memikirkan tampilan sama sekali.
 *
 * @package Lisanularab
 * @since 1.0.0
 */

/* =====================================================
   HEADER
   =====================================================
   Meniru hero /affiliate-program: navbar publik ber-position:fixed melayang
   di atas section ini, dan padding-top besar itulah yang menjaga judul tidak
   tertutup navbar saat halaman baru dibuka. */

.la-legal-header {
	background: rgb(9, 26, 220);
	padding: 150px 0 64px;
	text-align: center;
}

.la-legal-header__wrap {
	width: 100%;
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 80px;
	padding-right: 80px;
}

.la-legal-header__judul {
	font-size: var(--font-size-3xl);
	font-weight: 500;
	color: #fff;
	letter-spacing: -0.03em;
	line-height: var(--line-height-vercel);
	margin: 0 0 16px;
}

.la-legal-header__sub {
	font-size: var(--font-size-18);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.5;
	letter-spacing: -0.005em;
	/* Dibatasi lalu ditengahkan: baris sepanjang 1440px melelahkan dibaca,
	   dan sub ini memang cuma satu-dua kalimat. */
	max-width: 720px;
	margin: 0 auto;
}

@media (max-width: 900px) {
	.la-legal-header {
		padding: 120px 0 48px;
	}

	.la-legal-header__wrap {
		max-width: 540px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.la-legal-header__judul {
		font-size: var(--font-size-32);
		line-height: var(--line-height-vercel-2);
		letter-spacing: var(--space-vercel-2);
	}
}

/* =====================================================
   KERANGKA DUA KOLOM
   =====================================================
   Kolom kiri dipatok 360px, bukan pecahan lebar: daftarnya berisi judul
   yang panjangnya sudah diketahui, dan lebar tetap membuatnya tidak ikut
   memuai di layar sangat lebar sementara kolom kanan yang butuh ruang. */

.la-legal-isi {
	display: grid;
	grid-template-columns: 360px minmax(0, 1fr);
	column-gap: 24px;
	align-items: start;

	width: 100%;
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
	padding: 48px 80px;
	box-sizing: border-box;
}

@media (max-width: 900px) {
	.la-legal-isi {
		display: block;
		max-width: 540px;
		padding: 32px 16px;
	}
}

/* =====================================================
   KOLOM KIRI — DAFTAR HALAMAN
   ===================================================== */

.la-legal-samping {
	min-width: 360px;
	padding: 24px;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	box-sizing: border-box;
}

.la-legal-samping__daftar {
	list-style: none;
	margin: 0;
	padding: 0;
}

.la-legal-samping__butir {
	margin-bottom: 12px;
}

/* Jarak antar butir, bukan setelah butir terakhir — sisa margin di bawah
   akan terbaca sebagai padding kotak yang tidak rata. */
.la-legal-samping__butir:last-child {
	margin-bottom: 0;
}

.la-legal-samping__tautan {
	display: block;
	font-size: var(--font-size-md);
	font-weight: 500;
	color: var(--color-text-1);
	line-height: 1.5;
	text-decoration: none;
	transition: color 0.15s ease;
}

.la-legal-samping__tautan:hover {
	color: var(--color-primary);
}

/* Halaman yang sedang dibuka. Warna DAN garis bawah dipakai bersama, bukan
   warna saja: pengunjung yang sulit membedakan warna tetap bisa melihat
   mana yang aktif. */
.la-legal-samping__tautan.is-aktif {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Daftar samping digantikan dropdown di layar sempit. */
@media (max-width: 900px) {
	.la-legal-samping {
		display: none;
	}
}

/* =====================================================
   KOLOM KANAN
   ===================================================== */

/* --- Kotak pengutamaan versi bahasa Indonesia --- */

.la-legal-disclaimer {
	padding: 24px;
	background: #f4f9ff;
	border: 1px solid var(--color-border);
	border-radius: 4px;
}

.la-legal-disclaimer__teks {
	font-size: var(--font-size-md);
	font-weight: 500;
	color: var(--color-text-1);
	line-height: 1.7;
	margin: 0;
}

@media (max-width: 900px) {
	.la-legal-disclaimer {
		padding: 20px;
	}
}

/* --- Dropdown pemilih halaman (hanya layar sempit) ---
   Bentuk & warnanya diwarisi utuh dari .la-aff-custom-select di
   courses.css; yang diatur di sini hanya kapan ia tampil dan jaraknya. */

.la-legal-pilih {
	display: none;
	margin-top: 20px;
}

@media (max-width: 900px) {
	.la-legal-pilih {
		display: block;
	}
}

/* =====================================================
   ISI KONTEN
   =====================================================
   Semua aturan diikat ke .la-legal-konten, tidak pernah ke h2/p/ul telanjang
   — kalau tidak, ia akan menjangkau seluruh situs. Isinya ditulis sebagai
   HTML polos di editor, jadi penataan di sini yang menanggung semuanya. */

.la-legal-konten {
	margin-top: 32px;
	font-size: var(--font-size-md);
	color: var(--color-text-1);
	line-height: 1.7;
}

.la-legal-konten > *:first-child {
	margin-top: 0;
}

.la-legal-konten > *:last-child {
	margin-bottom: 0;
}

.la-legal-konten h2 {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--color-text-1);
	line-height: 1.4;
	letter-spacing: -0.01em;
	margin: 54px 0 12px;
}

/* h2 pembuka tidak perlu jarak 54px — jarak itu gunanya memisahkan satu
   pasal dari pasal sebelumnya, dan di sini tidak ada pasal sebelumnya.
   Yang ada di atasnya hanya baris "Terakhir diperbarui", yang justru
   bagian dari pembuka yang sama.

   Baris tanggal itu dikenali dari POSISINYA — paragraf pertama konten —
   bukan dari isi teksnya, yang memang tidak bisa dipilih CSS. Itu berlaku
   di keempat halaman legal: WordPress selalu membungkusnya jadi
   <p><em>…</em></p> lewat wpautop, termasuk yang di editor ditulis sebagai
   <em> telanjang tanpa <p>.

   `em + h2` disertakan sebagai jaring pengaman untuk halaman legal baru
   yang mungkin ditulis dengan <em> yang lolos dari wpautop. */
.la-legal-konten h2:first-child,
.la-legal-konten p:first-child + h2,
.la-legal-konten em + h2 {
	margin-top: 24px;
}

.la-legal-konten h3 {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--color-text-1);
	line-height: 1.4;
	margin: 28px 0 8px;
}

/* h3 yang langsung menempel di bawah h2 tidak perlu jarak atasnya sendiri.
   Margin keduanya memang saling meniadakan — yang berlaku hanya yang
   terbesar, 28px milik h3 — tapi justru itu masalahnya: jarak h2 ke
   sub-judul pertamanya jadi 28px, lebih lebar dari 12px yang dipakai h2
   ke paragraf biasa, sehingga sub-judul terbaca lepas dari induknya.
   Dinolkan agar yang berlaku margin-bottom h2 (12px).

   Berlaku juga untuk h3 yang jadi elemen pertama — tidak ada apa pun di
   atasnya untuk dijauhi. */
.la-legal-konten h2 + h3,
.la-legal-konten h3:first-child {
	margin-top: 0;
}

.la-legal-konten p {
	margin: 0 0 16px;
	font-size: var(--font-size-md);
}

.la-legal-konten ul,
.la-legal-konten ol {
	margin: 0 0 16px;
	padding-left: 24px;
}

.la-legal-konten ul {
	list-style: disc;
}

.la-legal-konten ol {
	list-style: decimal;
}

.la-legal-konten li {
	margin-bottom: 8px;
	line-height: 1.5;
}

.la-legal-konten li:last-child {
	margin-bottom: 0;
}

.la-legal-konten strong {
	font-weight: 600;
	color: var(--color-text-1);
}

/* Dipakai untuk baris "Terakhir diperbarui" di awal tiap halaman. */
.la-legal-konten em {
	font-style: normal;
	color: var(--color-text-secondary);
	font-size: var(--font-size-15);
}

.la-legal-konten a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.la-legal-konten a:hover {
	opacity: 0.8;
}

/* Tabel bisa lebih lebar dari kolomnya di layar sempit; wadah bergulir
   sendiri supaya yang bergeser hanya tabelnya, bukan seluruh halaman. */
.la-legal-konten table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	margin: 0 0 16px;
}

.la-legal-konten th,
.la-legal-konten td {
	padding: 10px 14px;
	border: 1px solid var(--color-border);
	text-align: left;
	vertical-align: top;
}

.la-legal-konten th {
	background: var(--color-bg-secondary);
	font-weight: 600;
	color: var(--color-text-1);
	white-space: nowrap;
}

@media (max-width: 900px) {
	.la-legal-konten {
		margin-top: 28px;
	}

	.la-legal-konten h2 {
		font-size: 1.1875rem;
		/* margin-top: 32px; */
	}

	.la-legal-konten h3 {
		margin-top: 24px;
	}
}