/*
 * Sistem desain Laznas Al Washliyah (Arah A, dipilih 15 Oktober 2026).
 *
 * Satu-satunya sumber warna, fon, ukuran teks, jarak, sudut, dan bayangan.
 * Nilai yang sama ditulis ke Kit Elementor dan Blocksy lewat
 * `wp laznas terapkan-desain` (includes/sistem-desain.php). Bila mengubah
 * nilai di sini, ubah juga di laznas_token_desain() lalu jalankan ulang perintah itu.
 *
 * Semua kelas berawalan .lz- supaya tidak bentrok dengan Blocksy dan Elementor.
 * HP lebih dulu: nilai dasar untuk 375px, layar lebar diatur di bawah.
 */

/* Fon disimpan di plugin (assets/fonts, lisensi OFL di OFL.txt), tidak dari
   Google Fonts. Fon variabel: satu berkas untuk semua ketebalan 400 sampai 800.
   Rentang latin cukup untuk bahasa Indonesia, latin-ext untuk huruf beraksen. */
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* Warna */
	--lz-hijau: #0A5C36;
	--lz-hijau-tua: #073F26;
	--lz-hijau-muda: #E9F3ED;
	--lz-emas: #E9A00F;
	--lz-emas-terang: #F2B12E;
	--lz-emas-muda: #FDF3DC;
	--lz-teks: #17221C;
	--lz-teks-redup: #56635C;
	--lz-garis: #E2E8E4;
	--lz-latar: #FFFFFF;
	--lz-latar-abu: #F5F7F6;
	--lz-fokus: rgba(233, 160, 15, .35);

	/* Fon: satu keluarga, beda ketebalan */
	--lz-fon: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--lz-tebal-biasa: 400;
	--lz-tebal-sedang: 600;
	--lz-tebal-tebal: 700;
	--lz-tebal-judul: 800;

	/* Ukuran teks (HP) */
	--lz-teks-h1: 32px;
	--lz-teks-h2: 26px;
	--lz-teks-h3: 18px;
	--lz-teks-besar: 18px;   /* isi artikel, pengantar */
	--lz-teks-dasar: 16px;
	--lz-teks-kecil: 14px;
	--lz-teks-mini: 13px;    /* keterangan foto, tanggal */
	--lz-baris-judul: 1.2;
	--lz-baris-dasar: 1.6;
	--lz-baris-artikel: 1.75;

	/* Jarak, kelipatan 4 */
	--lz-jarak-1: 4px;
	--lz-jarak-2: 8px;
	--lz-jarak-3: 12px;
	--lz-jarak-4: 16px;
	--lz-jarak-5: 20px;
	--lz-jarak-6: 24px;
	--lz-jarak-8: 32px;
	--lz-jarak-12: 48px;
	--lz-jarak-18: 72px;
	--lz-bagian: 48px;       /* jarak atas bawah tiap bagian halaman */

	/* Tata letak */
	--lz-lebar: 1180px;
	--lz-lebar-baca: 720px;
	--lz-gutter: 16px;

	/* Sudut dan bayangan */
	--lz-sudut-kecil: 10px;
	--lz-sudut: 14px;
	--lz-sudut-besar: 20px;
	--lz-sudut-bulat: 999px;
	--lz-bayangan: 0 12px 40px rgba(7, 63, 38, .10);
	--lz-bayangan-kecil: 0 4px 14px rgba(0, 0, 0, .08);

	/* Ukuran sentuh minimal */
	--lz-sentuh: 44px;
	--lz-tinggi-tombol: 48px;
}

@media (max-width: 359px) {
	:root { --lz-teks-h1: 28px; }
}

@media (min-width: 768px) {
	:root {
		--lz-teks-h1: 46px;
		--lz-teks-h2: 32px;
		--lz-gutter: 24px;
		--lz-bagian: 72px;
	}
}

/* ---------- Tata letak ---------- */

.lz-wadah { max-width: var(--lz-lebar); margin-inline: auto; padding-inline: var(--lz-gutter); }
.lz-wadah--baca { max-width: calc(var(--lz-lebar-baca) + 2 * var(--lz-gutter)); }
.lz-bagian { padding-block: var(--lz-bagian); }
.lz-bagian--abu { background: var(--lz-latar-abu); }
.lz-kisi { display: grid; gap: var(--lz-jarak-3); }

@media (min-width: 768px) {
	.lz-kisi--2, .lz-kisi--3, .lz-kisi--4 { grid-template-columns: repeat(2, 1fr); gap: var(--lz-jarak-6); }
}
@media (min-width: 1024px) {
	.lz-kisi--3 { grid-template-columns: repeat(3, 1fr); }
	.lz-kisi--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Teks ---------- */

.lz-teks { font-family: var(--lz-fon); font-size: var(--lz-teks-dasar); line-height: var(--lz-baris-dasar); color: var(--lz-teks); }
.lz-h1, .lz-h2, .lz-h3 { font-family: var(--lz-fon); line-height: var(--lz-baris-judul); letter-spacing: -.01em; color: var(--lz-teks); margin: 0 0 .5em; }
.lz-h1 { font-size: var(--lz-teks-h1); font-weight: var(--lz-tebal-judul); }
.lz-h2 { font-size: var(--lz-teks-h2); font-weight: var(--lz-tebal-judul); }
.lz-h3 { font-size: var(--lz-teks-h3); font-weight: var(--lz-tebal-tebal); }
.lz-pengantar { font-size: var(--lz-teks-besar); color: var(--lz-teks-redup); }
.lz-redup { color: var(--lz-teks-redup); }
.lz-kecil { font-size: var(--lz-teks-kecil); }
.lz-mini { font-size: var(--lz-teks-mini); color: var(--lz-teks-redup); }

/* Judul bagian: judul di kiri, tautan "Lihat semua" di kanan */
.lz-judul-bagian { display: flex; align-items: end; justify-content: space-between; gap: var(--lz-jarak-4); margin-bottom: var(--lz-jarak-6); }
.lz-judul-bagian .lz-h2 { margin: 0; }
.lz-judul-bagian p { margin: 6px 0 0; color: var(--lz-teks-redup); }
.lz-tautan-lihat { font-weight: var(--lz-tebal-tebal); color: var(--lz-hijau); text-decoration: none; white-space: nowrap; min-height: var(--lz-sentuh); display: inline-flex; align-items: center; }

/* ---------- Tombol ---------- */

/* Kelas digandakan supaya mengalahkan gaya tombol Kit Elementor (.elementor-kit-8 button)
   dan Blocksy, yang lebih spesifik daripada satu kelas. */
.lz-tombol.lz-tombol {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--lz-jarak-2);
	min-height: var(--lz-tinggi-tombol); padding: 0 22px; border: 0; border-radius: var(--lz-sudut-bulat);
	font-family: var(--lz-fon); font-size: var(--lz-teks-dasar); font-weight: var(--lz-tebal-tebal); line-height: 1.2;
	text-decoration: none; cursor: pointer; transition: background-color .15s, box-shadow .15s;
}
.lz-tombol:focus-visible { outline: 3px solid var(--lz-fokus); outline-offset: 2px; }
.lz-tombol svg { width: 20px; height: 20px; flex: none; }
/* :focus ditulis sendiri karena Kit Elementor mewarnai semua button:focus
   hijau tua (.elementor-kit-8 button:focus), lebih kuat dari kelas ganda. */
/* Utama: ajakan donasi, hanya satu per layar */
.lz-tombol.lz-tombol--emas, .lz-tombol.lz-tombol--emas:visited, .lz-tombol.lz-tombol--emas:focus { background: var(--lz-emas); color: var(--lz-hijau-tua); }
.lz-tombol.lz-tombol--emas:hover { background: var(--lz-emas-terang); color: var(--lz-hijau-tua); }
/* Kedua: aksi biasa */
.lz-tombol.lz-tombol--hijau, .lz-tombol.lz-tombol--hijau:visited, .lz-tombol.lz-tombol--hijau:focus { background: var(--lz-hijau); color: #fff; }
.lz-tombol.lz-tombol--hijau:hover { background: var(--lz-hijau-tua); color: #fff; }
/* Ketiga: pilihan lain, misalnya salin nomor rekening */
.lz-tombol.lz-tombol--garis, .lz-tombol.lz-tombol--garis:visited, .lz-tombol.lz-tombol--garis:focus { background: #fff; color: var(--lz-hijau); box-shadow: inset 0 0 0 2px var(--lz-garis); }
.lz-tombol.lz-tombol--garis:hover { background: #fff; color: var(--lz-hijau-tua); box-shadow: inset 0 0 0 2px var(--lz-hijau); }
.lz-tombol.lz-tombol--kecil { min-height: var(--lz-sentuh); padding: 0 18px; font-size: 15px; }
.lz-tombol.lz-tombol--penuh { width: 100%; }

/* ---------- Kartu ---------- */

.lz-kartu {
	display: block; padding: 18px; border-radius: var(--lz-sudut); background: #fff;
	border: 1px solid var(--lz-garis); color: var(--lz-teks); text-decoration: none;
}
a.lz-kartu { min-height: var(--lz-sentuh); transition: border-color .15s; }
a.lz-kartu:hover { border-color: var(--lz-hijau); }
.lz-kartu .lz-h3 { margin: 0 0 4px; }
.lz-kartu p { margin: 0; font-size: 15px; color: var(--lz-teks-redup); }
.lz-kartu--baris { display: flex; align-items: center; gap: var(--lz-jarak-4); }
.lz-kartu--hijau { background: var(--lz-hijau-muda); border-color: transparent; }
.lz-kartu--menonjol { border-radius: var(--lz-sudut-besar); box-shadow: var(--lz-bayangan); }
.lz-ikon {
	width: 52px; height: 52px; flex: none; display: grid; place-items: center;
	border-radius: var(--lz-sudut); background: var(--lz-hijau-muda); color: var(--lz-hijau);
}
.lz-ikon svg { width: 26px; height: 26px; }

/* Kartu artikel: gambar di kiri pada HP, di atas pada layar lebar */
.lz-kartu-artikel { display: grid; grid-template-columns: 112px 1fr; gap: 14px; color: var(--lz-teks); text-decoration: none; }
.lz-kartu-artikel img { width: 112px; height: 84px; object-fit: cover; border-radius: var(--lz-sudut-kecil); }
.lz-kartu-artikel .lz-h3 { font-size: var(--lz-teks-dasar); line-height: 1.35; margin: 0 0 6px; }
.lz-kartu-artikel time { font-size: var(--lz-teks-mini); color: var(--lz-teks-redup); }
.lz-kartu-artikel:hover .lz-h3 { color: var(--lz-hijau); }
.lz-kartu-artikel .lz-h3 { display: block; overflow-wrap: anywhere; }
.lz-kartu-artikel__kategori { display: block; margin-bottom: 4px; font-size: var(--lz-teks-mini); font-weight: var(--lz-tebal-tebal); color: var(--lz-hijau); }
.lz-kartu-artikel__kosong { display: block; width: 112px; height: 84px; border-radius: var(--lz-sudut-kecil); background: var(--lz-hijau-muda); }
@media (min-width: 768px) {
	.lz-kartu-artikel { grid-template-columns: 1fr; }
	.lz-kartu-artikel__kosong { width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: var(--lz-sudut); }
	.lz-kartu-artikel img { width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: var(--lz-sudut); }
	.lz-kartu-artikel .lz-h3 { font-size: var(--lz-teks-h3); }
}

/* ---------- Penanda kecil ---------- */

.lz-lencana {
	display: inline-flex; align-items: center; gap: var(--lz-jarak-2); padding: 6px 12px;
	border-radius: var(--lz-sudut-bulat); background: var(--lz-hijau-muda); color: var(--lz-hijau);
	font-size: var(--lz-teks-kecil); font-weight: var(--lz-tebal-sedang);
}
/* Lencana yang bisa diklik (kategori) harus setinggi area sentuh */
a.lz-lencana { min-height: var(--lz-sentuh); padding: 0 12px; font-weight: var(--lz-tebal-tebal); text-decoration: none; }
.lz-sorot { padding: 14px 16px; border-radius: 12px; background: var(--lz-emas-muda); }

/* ---------- Isian formulir ---------- */

.lz-label { display: block; margin: 0 0 var(--lz-jarak-2); font-size: 15px; font-weight: var(--lz-tebal-tebal); }
.lz-isian {
	width: 100%; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--lz-garis); border-radius: 12px;
	background: #fff; color: var(--lz-teks); font-family: var(--lz-fon);
	font-size: var(--lz-teks-besar); /* minimal 16px supaya HP tidak memperbesar layar */
}
.lz-isian:focus { outline: 3px solid var(--lz-fokus); border-color: var(--lz-emas); }
.lz-pilihan { display: flex; flex-wrap: wrap; gap: var(--lz-jarak-2); }
.lz-pilihan button[type="button"] {
	min-height: var(--lz-sentuh); padding: 0 14px; border: 1.5px solid var(--lz-garis); border-radius: var(--lz-sudut-kecil);
	background: #fff; color: var(--lz-teks); font-family: var(--lz-fon); font-size: 15px; font-weight: var(--lz-tebal-sedang); cursor: pointer;
}
.lz-pilihan button[type="button"]:hover, .lz-pilihan button[type="button"]:focus { background: #fff; color: var(--lz-teks); border-color: var(--lz-hijau); }
.lz-pilihan button[type="button"]:focus-visible { outline: 3px solid var(--lz-fokus); outline-offset: 2px; }
.lz-pilihan button[type="button"][aria-pressed="true"] { border-color: var(--lz-hijau); background: var(--lz-hijau-muda); color: var(--lz-hijau-tua); }

/* ---------- Penyaring dan nomor halaman (daftar artikel, Galeri Aksi) ---------- */

/* Penyaring: digeser ke samping di dalam bilahnya sendiri di HP, halaman tetap tidak bergeser */
.lz-penyaring {
	display: flex; gap: var(--lz-jarak-2); overflow-x: auto; scrollbar-width: none;
	margin: 0 calc(-1 * var(--lz-gutter)); padding: 4px var(--lz-gutter);
}
.lz-penyaring::-webkit-scrollbar { display: none; }
.lz-penyaring a {
	flex: none; display: inline-flex; align-items: center; min-height: var(--lz-sentuh); padding: 0 16px;
	border-radius: var(--lz-sudut-bulat); border: 1.5px solid var(--lz-garis); background: #fff;
	color: var(--lz-teks); font-family: var(--lz-fon); font-size: 15px; font-weight: var(--lz-tebal-sedang); text-decoration: none; white-space: nowrap;
}
.lz-penyaring a:hover { border-color: var(--lz-hijau); color: var(--lz-hijau); }
.lz-penyaring a[aria-current="page"] { background: var(--lz-hijau); border-color: var(--lz-hijau); color: #fff; }

.lz-halaman { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--lz-jarak-2); margin-top: var(--lz-jarak-8); }
.lz-halaman .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: var(--lz-sentuh); min-height: var(--lz-sentuh); padding: 0 14px;
	border-radius: var(--lz-sudut-bulat); border: 1.5px solid var(--lz-garis); background: #fff;
	color: var(--lz-teks); font-family: var(--lz-fon); font-weight: var(--lz-tebal-sedang); text-decoration: none;
}
.lz-halaman a.page-numbers:hover { border-color: var(--lz-hijau); color: var(--lz-hijau); }
.lz-halaman .page-numbers.current { background: var(--lz-hijau); border-color: var(--lz-hijau); color: #fff; }
.lz-halaman .page-numbers.dots { border-color: transparent; min-width: auto; padding: 0 4px; }

/* HP sempit: nomor tengah disembunyikan supaya muat satu baris */
@media (max-width: 400px) {
	.lz-halaman .page-numbers:not(.prev):not(.next):not(.current) { display: none; }
}
@media (min-width: 768px) {
	.lz-penyaring { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
}

/* ---------- Kotak cari ---------- */

.lz-cari { display: flex; gap: var(--lz-jarak-2); max-width: 560px; margin-bottom: var(--lz-jarak-4); }
.lz-cari .lz-isian { flex: 1; min-width: 0; font-size: var(--lz-teks-dasar); }
.lz-cari .lz-tombol { flex: none; min-height: 52px; }