/*
 * Kepala dan kaki halaman (Hari 7). HP lebih dulu, menu berderet mulai 1100px.
 * Warna, fon, dan ukuran dari sistem-desain.css.
 */

/* Teks khusus pembaca layar */
.lz-kepala .screen-reader-text, .lz-kaki .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Kepala ---------- */

/* Wadah <header id="header"> dari Blocksy yang dibuat menempel di atas. */
.lz-kepala-baru #header {
	position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50;
}
@media (max-width: 600px) {
	/* Di HP admin bar WordPress ikut tergulir, jadi kepala menempel di tepi atas */
	.lz-kepala-baru #header { top: 0; }
}

.lz-kepala {
	/* Logo asli tegak (lambang di atas, tulisan di bawah) butuh kepala lebih tinggi */
	--lz-kepala-tinggi: 76px; --lz-kepala-logo: 64px;
	position: relative; background: var(--lz-latar); border-bottom: 1px solid var(--lz-garis);
	font-family: var(--lz-fon); color: var(--lz-teks);
}
@media (min-width: 1100px) {
	.lz-kepala { --lz-kepala-tinggi: 88px; --lz-kepala-logo: 76px; }
}
.lz-kepala__isi { display: flex; align-items: center; gap: var(--lz-jarak-3); height: var(--lz-kepala-tinggi); }

.lz-merek {
	display: flex; align-items: center; gap: 10px; min-height: var(--lz-sentuh);
	margin-right: auto; color: var(--lz-hijau-tua); text-decoration: none;
}
.lz-merek:hover { color: var(--lz-hijau-tua); }
/* Logo baru (28 Oktober 2026), bentuk asli */
.lz-merek__logo { display: block; height: var(--lz-kepala-logo); width: auto; max-width: none; }

/* Ajakan donasi di kepala hanya untuk layar lebar. Di HP ada bilah donasi di bawah. */
.lz-kepala__ajakan.lz-tombol { display: none; }

.lz-kepala.lz-kepala .lz-kepala__menu {
	width: var(--lz-sentuh); height: var(--lz-sentuh); flex: none; display: grid; place-items: center;
	padding: 0; border: 0; border-radius: var(--lz-sudut-kecil); background: var(--lz-latar-abu);
	color: var(--lz-teks); cursor: pointer;
}
.lz-kepala.lz-kepala .lz-kepala__menu:hover, .lz-kepala.lz-kepala .lz-kepala__menu:focus { background: var(--lz-hijau-muda); color: var(--lz-hijau-tua); }
.lz-kepala__menu svg { width: 24px; height: 24px; }
.lz-kepala__ikon-buka { display: grid; }
.lz-kepala__ikon-tutup { display: none; }
.lz-kepala--terbuka .lz-kepala__ikon-buka { display: none; }
.lz-kepala--terbuka .lz-kepala__ikon-tutup { display: grid; }

.lz-kepala button:focus-visible, .lz-kepala a:focus-visible,
.lz-kaki a:focus-visible, .lz-bilah-donasi a:focus-visible {
	outline: 3px solid var(--lz-fokus); outline-offset: 2px;
}

/* Menu di HP: panel di bawah kepala, tergulir sendiri bila panjang */
.lz-nav {
	display: none; position: absolute; top: 100%; left: 0; right: 0;
	max-height: calc(100vh - var(--lz-kepala-tinggi)); max-height: calc(100dvh - var(--lz-kepala-tinggi)); overflow-y: auto; overscroll-behavior: contain;
	padding: var(--lz-jarak-2) var(--lz-gutter) var(--lz-jarak-6);
	background: var(--lz-latar); border-top: 1px solid var(--lz-garis);
}
.lz-kepala--terbuka .lz-nav { display: block; }
/* Halaman di belakang panel diredupkan, kepala tetap terang. Ketukan di lapisan
   ini menutup menu (kepala-kaki.js). */
.lz-kepala--terbuka::after {
	content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(7, 63, 38, .4);
}
.lz-nav ul { list-style: none; margin: 0; padding: 0; }
.lz-nav__butir { border-bottom: 1px solid var(--lz-garis); }
.lz-nav__baris { display: flex; align-items: center; }

.lz-kepala.lz-kepala .lz-nav__tautan {
	flex: 1; display: flex; align-items: center; gap: var(--lz-jarak-2); min-height: 52px;
	padding: 0; border: 0; border-radius: 8px; background: none; color: var(--lz-teks); text-align: left;
	font-family: var(--lz-fon); font-size: var(--lz-teks-dasar); font-weight: var(--lz-tebal-tebal);
	line-height: 1.3; letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer;
}
.lz-kepala.lz-kepala .lz-nav__tautan:hover, .lz-kepala.lz-kepala .lz-nav__tautan[aria-current="page"], .lz-kepala.lz-kepala .lz-nav__butir--aktif > .lz-nav__baris .lz-nav__tautan,
.lz-kepala.lz-kepala .lz-nav__butir--aktif > .lz-nav__buka-teks { color: var(--lz-hijau); }
/* Ikon panah sejajar dengan tombol submenu 52px di butir lain */
.lz-kepala.lz-kepala .lz-nav__buka-teks { width: 100%; justify-content: space-between; padding-right: 16px; }

.lz-kepala.lz-kepala .lz-nav__buka {
	width: 52px; height: 52px; flex: none; display: grid; place-items: center;
	padding: 0; border: 0; border-radius: var(--lz-sudut-kecil); background: none; color: var(--lz-teks-redup); cursor: pointer;
}
.lz-kepala.lz-kepala .lz-nav__buka:hover { background: var(--lz-latar-abu); color: var(--lz-hijau); }
.lz-nav svg { width: 20px; height: 20px; transition: transform .15s; }
.lz-nav [aria-expanded="true"] svg { transform: rotate(180deg); }

.lz-nav__sub { display: none; padding: 0 0 var(--lz-jarak-2) var(--lz-jarak-3) !important; }
.lz-nav__butir--terbuka > .lz-nav__sub { display: block; }
.lz-nav__sub a {
	display: flex; align-items: center; min-height: var(--lz-sentuh); padding: 0 var(--lz-jarak-3);
	border-left: 2px solid var(--lz-garis); color: var(--lz-teks-redup); font-weight: var(--lz-tebal-sedang); text-decoration: none;
}
.lz-nav__sub a:hover, .lz-nav__sub a[aria-current="page"] { color: var(--lz-hijau); border-left-color: var(--lz-hijau); }

/* Menu HP terbuka: halaman di belakangnya tidak ikut tergulir */
html.lz-menu-terbuka { overflow: hidden; }

/* ---------- Bilah donasi HP ---------- */

.lz-bilah-donasi {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
	display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--lz-jarak-2);
	padding: 10px var(--lz-gutter) calc(10px + env(safe-area-inset-bottom));
	background: var(--lz-latar); border-top: 1px solid var(--lz-garis); box-shadow: 0 -4px 14px rgba(0, 0, 0, .06);
}
.lz-bilah-donasi .lz-tombol.lz-tombol { padding: 0 12px; font-size: 15px; white-space: nowrap; }
@media (max-width: 359px) {
	.lz-bilah-donasi .lz-tombol.lz-tombol { padding: 0 8px; font-size: var(--lz-teks-kecil); }
}
html.lz-menu-terbuka .lz-bilah-donasi { display: none; }
/* Ruang supaya isi paling bawah tidak tertutup bilah */
body.lz-kepala-baru { padding-bottom: calc(69px + env(safe-area-inset-bottom)); }

/* ---------- Kaki ---------- */

.lz-kaki {
	padding: var(--lz-jarak-12) 0 var(--lz-jarak-6); background: var(--lz-hijau-tua);
	color: rgb(255 255 255 / .82); font-family: var(--lz-fon); font-size: 15px; line-height: var(--lz-baris-dasar);
}
/* HP: Tentang dan Transparansi berdampingan, lembaga dan kontak selebar layar */
.lz-kaki__kolom { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lz-jarak-8) var(--lz-jarak-4); }
.lz-kaki__lembaga, .lz-kaki__hubungi { grid-column: 1 / -1; }
/* Satu kolom menu saja: selebar layar, tautannya dibagi dua kolom */
.lz-kaki__menu--tunggal { grid-column: 1 / -1; }
.lz-kaki__menu--tunggal ul { columns: 2; column-gap: var(--lz-jarak-4); }
.lz-kaki__menu--tunggal li { break-inside: avoid; }
.lz-kaki p { margin: var(--lz-jarak-3) 0 0; }
.lz-kaki ul { list-style: none; margin: 0; padding: 0; }
.lz-kaki a { display: inline-flex; align-items: center; gap: 10px; min-height: var(--lz-sentuh); color: #fff; text-decoration: none; }
.lz-kaki a:hover { color: var(--lz-emas); }
.lz-kaki a[aria-current="page"] { color: var(--lz-emas); }
.lz-kaki svg { width: 20px; height: 20px; flex: none; }
.lz-kaki__judul.lz-kaki__judul {
	margin: 0 0 var(--lz-jarak-1); color: #fff; font-family: var(--lz-fon);
	font-size: var(--lz-teks-dasar); font-weight: var(--lz-tebal-tebal); line-height: 1.4; letter-spacing: 0;
}
.lz-kaki__alamat { display: flex; gap: 10px; }
.lz-kaki__alamat svg { margin-top: 2px; color: var(--lz-emas); }
.lz-kaki__kontak a { word-break: break-word; }
.lz-kaki__kontak svg { color: var(--lz-emas); }
.lz-kaki__sosial { display: flex; flex-wrap: wrap; gap: var(--lz-jarak-2); margin-top: var(--lz-jarak-3) !important; }
.lz-kaki__sosial a {
	width: var(--lz-sentuh); justify-content: center; border-radius: var(--lz-sudut-bulat);
	background: rgb(255 255 255 / .1);
}
.lz-kaki__sosial a:hover { background: var(--lz-emas); color: var(--lz-hijau-tua); }

.lz-merek--terang, .lz-merek--terang:hover { color: #fff; }
/* Kaki: logo asli dalam putih, dibuat kecil supaya seimbang */
.lz-merek--terang .lz-merek__logo { height: auto; width: 116px; }
/* Nama dan izin lembaga di samping logo */
.lz-kaki__identitas { display: flex; align-items: center; gap: var(--lz-jarak-4); }
.lz-kaki__identitas .lz-merek { flex: none; }
.lz-kaki p.lz-kaki__nama { display: flex; flex-direction: column; gap: 2px; margin: 0; line-height: 1.4; }
.lz-kaki__nama strong { color: #fff; font-size: var(--lz-teks-besar); font-weight: var(--lz-tebal-judul); }
.lz-kaki__nama span { font-size: var(--lz-teks-kecil); }
@media (max-width: 599px) {
	/* HP: logo sedikit lebih kecil supaya baris SK muat satu baris di 375px */
	.lz-kaki__identitas { gap: var(--lz-jarak-3); }
	.lz-kaki__identitas .lz-merek--terang .lz-merek__logo { width: 96px; }
	.lz-kaki__nama span { font-size: var(--lz-teks-mini); }
}

.lz-kaki__bawah.lz-kaki__bawah {
	margin-top: var(--lz-jarak-8); padding-top: var(--lz-jarak-4);
	border-top: 1px solid rgb(255 255 255 / .15); font-size: var(--lz-teks-mini); color: rgb(255 255 255 / .7);
}


/* ---------- Layar lebar ---------- */

@media (min-width: 1100px) {
	.lz-kepala__isi { gap: var(--lz-jarak-4); }
	.lz-kepala.lz-kepala .lz-kepala__menu, .lz-bilah-donasi { display: none; }
	body.lz-kepala-baru { padding-bottom: 0; }
	.lz-kepala__ajakan.lz-tombol { display: inline-flex; }

	.lz-nav, .lz-kepala--terbuka .lz-nav {
		display: block; position: static; max-height: none; overflow: visible;
		padding: 0; border: 0; box-shadow: none; background: none;
	}
	.lz-nav__daftar { display: flex; align-items: center; gap: 2px; }
	.lz-nav__butir { position: relative; border: 0; }
	.lz-kepala.lz-kepala .lz-nav__tautan {
		flex: none; min-height: var(--lz-sentuh); padding: 0 10px; border-radius: 8px;
		font-size: 15px; font-weight: var(--lz-tebal-sedang); white-space: nowrap;
	}
	.lz-kepala.lz-kepala .lz-nav__butir--induk .lz-nav__baris .lz-nav__tautan { padding-right: 2px; }
	.lz-kepala.lz-kepala .lz-nav__tautan:hover, .lz-kepala.lz-kepala .lz-nav__buka-teks:hover { background: var(--lz-latar-abu); }
	.lz-kepala.lz-kepala .lz-nav__buka-teks { width: auto; gap: 6px; padding-right: 6px; }
	.lz-kepala.lz-kepala .lz-nav__buka { width: 28px; height: var(--lz-sentuh); }
	.lz-kepala.lz-kepala .lz-nav__buka:hover { background: none; }
	.lz-nav svg { width: 16px; height: 16px; }

	.lz-nav__sub {
		position: absolute; top: 100%; left: 0; z-index: 2; min-width: 260px;
		padding: var(--lz-jarak-2) !important; border: 1px solid var(--lz-garis);
		border-radius: var(--lz-sudut); background: var(--lz-latar); box-shadow: var(--lz-bayangan);
	}
	/* Submenu terbuka saat disorot, saat tautannya difokus, atau saat tombolnya ditekan */
	.lz-nav__butir--induk:hover > .lz-nav__sub,
	.lz-nav__butir--induk:focus-within > .lz-nav__sub { display: block; }
	.lz-nav__butir--tutup > .lz-nav__sub { display: none !important; }
	.lz-nav__sub a { border-left: 0; border-radius: 8px; font-size: 15px; white-space: nowrap; }
	.lz-nav__sub a:hover, .lz-nav__sub a[aria-current="page"] { background: var(--lz-hijau-muda); color: var(--lz-hijau-tua); }

	.lz-kaki { padding-top: var(--lz-jarak-18); }
	/* Tiga kolom (lembaga, satu menu, kontak), empat bila ada dua menu */
	.lz-kaki__kolom { grid-template-columns: 1.6fr 1fr 1.2fr; gap: var(--lz-jarak-12); }
	.lz-kaki__kolom:has(> :nth-child(4)) { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
	.lz-kaki__lembaga, .lz-kaki__hubungi, .lz-kaki__menu--tunggal { grid-column: auto; }
	.lz-kaki__menu--tunggal ul { columns: 1; }
}

/* Halaman Canvas (Link Bio) tanpa kepala, kaki, dan bilah donasi */
body.elementor-template-canvas.lz-kepala-baru { padding-bottom: 0; }