/*
 * Header (bilah utilitas, masthead, nav ungu, Topik hangat), slot iklan, dan footer.
 * Gaya menu (dropdown, mega menu, panel ponsel) ada di blok/core-navigation.css.
 * Titik ganti ponsel 600 px, sama dengan titik ganti tombol menu blok Navigation.
 */

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

.kalawaca-kepala {
	display: flex;
	flex-direction: column;
}

.kalawaca-kepala > *,
.kalawaca-kepala p {
	margin-block: 0;
}

/* Bilah utilitas */
.kalawaca-utilitas {
	background: var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--teks-di-gelap);
	font-size: 13px;
	padding-block: var(--wp--preset--spacing--8);
}

.kalawaca-utilitas__isi {
	gap: var(--wp--preset--spacing--12);
}

.kalawaca-utilitas__menu {
	font-size: 13px;
	font-weight: 400;
}

.kalawaca-utilitas__menu .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--20);
}

.kalawaca-utilitas a,
.kalawaca-utilitas .wp-block-navigation-item__content {
	color: var(--wp--preset--color--teks-di-gelap);
}

.kalawaca-utilitas a:hover,
.kalawaca-utilitas .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--putih);
}

/* Merek: lambang + "kalawaca" (masthead, nav, footer) */
.kalawaca-merek {
	gap: var(--wp--preset--spacing--12);
}

.kalawaca-merek p {
	margin: 0;
}

.kalawaca-merek {
	flex-shrink: 0;
}

.kalawaca-merek .kalawaca-merek__lambang {
	flex: none;
	margin: 0;
}

.kalawaca-merek__lambang img {
	display: block;
	width: 54px;
	height: 54px;
}

.kalawaca-merek__teks {
	gap: var(--wp--preset--spacing--4);
}

.kalawaca-merek__nama {
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -1.5px;
	line-height: 1;
}

.kalawaca-merek__nama a {
	color: var(--wp--preset--color--ungu);
}

.kalawaca-merek__tagline {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2.4px;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wp--preset--color--abu);
}

/* Masthead beranda */
.kalawaca-masthead {
	padding-block: 22px;
}

.kalawaca-masthead__isi {
	gap: var(--wp--preset--spacing--20);
}

.kalawaca-masthead .kalawaca-iklan--leaderboard {
	flex: 0 1 728px;
	min-width: 0;
}

/* Nav ungu */
.kalawaca-nav {
	background: var(--wp--preset--color--ungu);
	color: var(--wp--preset--color--putih);
	position: relative;
	z-index: 20;
}

.kalawaca-nav__isi {
	min-height: 68px;
	gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--20);
}

.kalawaca-kepala--beranda .kalawaca-nav__isi {
	min-height: 60px;
}

.kalawaca-merek--nav {
	gap: 10px;
}

.kalawaca-merek--nav .kalawaca-merek__lambang img {
	width: 38px;
	height: 38px;
}

.kalawaca-merek--nav .kalawaca-merek__nama {
	font-size: 30px;
	letter-spacing: -1.2px;
}

.kalawaca-merek--nav .kalawaca-merek__nama a,
.kalawaca-merek--kaki .kalawaca-merek__nama a {
	color: var(--wp--preset--color--putih);
}

/* Di beranda desktop, lambang sudah ada di masthead. */
.kalawaca-kepala--beranda .kalawaca-merek--nav {
	display: none;
}

.kalawaca-nav__menu {
	flex: 1 1 auto;
	min-width: 0;
}

.kalawaca-nav__aksi {
	flex-shrink: 0;
	gap: 10px;
	padding-block: var(--wp--preset--spacing--8);
}

.kalawaca-nav__langganan {
	margin: 0;
}

.kalawaca-nav__langganan .wp-block-button__link {
	white-space: nowrap;
	min-height: 44px;
	padding: 0 18px;
	font-size: 14px;
	font-weight: 800;
}

/* Tombol Cari: ikon bulat yang membuka kolom cari (blok Search bawaan). */
.kalawaca-cari {
	margin: 0;
}

.kalawaca-cari .wp-block-search__inside-wrapper {
	border: 0;
	padding: 0;
	background: transparent;
	gap: var(--wp--preset--spacing--8);
}

.kalawaca-cari .wp-block-search__button {
	flex: none;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--custom--transparan--garis-di-ungu);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--putih);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.kalawaca-cari .wp-block-search__button svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.kalawaca-cari .wp-block-search__input {
	min-height: 44px;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	padding: 0 var(--wp--preset--spacing--16);
	background: var(--wp--preset--color--putih);
	color: var(--wp--preset--color--tinta);
	font-size: var(--wp--preset--font-size--m);
}

/* Kolom cari terbuka sebagai panel di bawah bilah ungu, rata kanan dengan tepi konten, agar
   tidak mendorong menu atau menabrak lambang. Posisinya dihitung dari .kalawaca-nav. */
.kalawaca-nav .kalawaca-cari,
.kalawaca-nav .kalawaca-cari .wp-block-search__inside-wrapper {
	position: static;
}

.kalawaca-nav .kalawaca-cari .wp-block-search__input {
	position: absolute;
	top: calc(100% + var(--wp--preset--spacing--8));
	right: max(var(--wp--preset--spacing--samping), calc((100% - var(--wp--style--global--wide-size, 1240px)) / 2));
	z-index: 30;
	min-height: 52px;
	box-shadow: var(--wp--preset--shadow--menu);
}

.kalawaca-nav .kalawaca-cari:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
	width: min(420px, calc(100% - 2 * var(--wp--preset--spacing--samping)));
	padding: 0 var(--wp--preset--spacing--20);
}

.kalawaca-nav .kalawaca-cari.wp-block-search__searchfield-hidden .wp-block-search__input {
	box-shadow: none;
}

/* Tombol Cari tampak aktif selama kolomnya terbuka. */
.kalawaca-nav .kalawaca-cari:not(.wp-block-search__searchfield-hidden) .wp-block-search__button {
	border-color: var(--wp--preset--color--putih);
	background: var(--wp--preset--color--putih);
	color: var(--wp--preset--color--ungu);
}

/* Topik hangat */
.kalawaca-topik {
	border-bottom: 1px solid var(--wp--preset--color--garis);
}

.kalawaca-topik__isi {
	padding-block: var(--wp--preset--spacing--12);
}

.kalawaca-topik__baris {
	gap: var(--wp--preset--spacing--8) 10px;
	font-size: 13px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-block: 7px;
}

.kalawaca-topik__baris::-webkit-scrollbar {
	display: none;
}

.kalawaca-topik__judul {
	flex: none;
	margin: 0 4px 0 0;
	font-weight: 800;
	color: var(--wp--preset--color--ungu);
}

.kalawaca-topik .kalawaca-topik__daftar {
	gap: var(--wp--preset--spacing--8);
	margin: 0;
	padding: 0;
	flex-wrap: nowrap;
}

.kalawaca-topik__daftar > li {
	flex: none;
	margin: 0;
}

.kalawaca-topik__label {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.kalawaca-topik__label a {
	position: relative;
	display: inline-block;
	padding: 6px 12px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--latar-lembut);
	color: var(--wp--preset--color--tinta);
	white-space: nowrap;
}

/* Area sentuh 44 px tanpa memperbesar kapsul. */
.kalawaca-topik__label a::after {
	content: "";
	position: absolute;
	inset: -7px 0;
}

.kalawaca-topik__label a:hover {
	background: var(--wp--preset--color--ungu-lembut);
	color: var(--wp--preset--color--ungu);
}

/* ---------- Slot iklan: ruang disisakan agar tata letak tidak bergeser (CLS) ---------- */

.kalawaca-iklan__isi--leaderboard {
	min-height: 90px;
}

.kalawaca-iklan__isi--medium-rectangle {
	min-height: 250px;
	max-width: 300px;
}

.kalawaca-iklan__isi--billboard {
	min-height: 250px;
	max-width: 970px;
}

.kalawaca-iklan__isi--half-page {
	min-height: 600px;
	max-width: 300px;
}

.kalawaca-iklan__isi--dalam-artikel {
	min-height: 90px;
}

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

footer.wp-block-template-part {
	margin-block-start: var(--wp--preset--spacing--72);
}

.kalawaca-kaki {
	background: var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--teks-di-gelap);
	font-size: 14px;
}

.kalawaca-kaki a,
.kalawaca-kaki .wp-block-navigation-item__content {
	color: var(--wp--preset--color--teks-di-gelap);
}

.kalawaca-kaki a:hover,
.kalawaca-kaki .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--putih);
}

.kalawaca-kaki .kalawaca-kaki__kolom {
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--56) var(--wp--preset--spacing--40);
}

.kalawaca-kaki__kolom > *,
.kalawaca-kaki__kolom .wp-block-group > * {
	margin-block: 0;
}

.kalawaca-merek--kaki {
	gap: 10px;
}

.kalawaca-merek--kaki .kalawaca-merek__lambang img {
	width: 40px;
	height: 40px;
}

.kalawaca-merek--kaki .kalawaca-merek__nama {
	font-size: 32px;
	letter-spacing: -1.2px;
}

.kalawaca-kaki .kalawaca-kaki__deskripsi {
	line-height: 1.7;
	max-width: 340px;
	margin-block: 14px;
}

.kalawaca-kaki .kalawaca-kaki__judul {
	margin: 0 0 var(--wp--preset--spacing--12);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--wp--preset--color--putih);
}

.kalawaca-kaki__menu {
	font-size: 14px;
	font-weight: 400;
}

.kalawaca-kaki__menu .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--12);
}

/* Ikon media sosial: lingkaran 44 px bertepi. */
.kalawaca-kaki .kalawaca-sosmed {
	gap: 10px;
	margin-top: 6px;
	padding: 0;
}

.kalawaca-kaki .kalawaca-sosmed .wp-social-link {
	width: 44px;
	height: 44px;
	margin: 0;
	border: 1px solid var(--wp--preset--color--tinta-garis);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--putih);
}

.kalawaca-kaki .kalawaca-sosmed .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	color: var(--wp--preset--color--putih);
}

.kalawaca-kaki .kalawaca-sosmed .wp-social-link svg {
	width: 18px;
	height: 18px;
}

.kalawaca-kaki .kalawaca-sosmed .wp-social-link:hover {
	border-color: var(--wp--preset--color--teks-di-gelap);
	transform: none;
}

.kalawaca-kaki__bawah {
	border-top: 1px solid var(--wp--preset--color--tinta-garis);
	padding-block: 18px;
	font-size: 13px;
}

.kalawaca-kaki__bawah p {
	margin: 0;
}

/* ---------- Tablet ---------- */

@media (max-width: 781px) {
	.kalawaca-kaki .kalawaca-kaki__kolom {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--24) var(--wp--preset--spacing--20);
		padding-block: var(--wp--preset--spacing--32) var(--wp--preset--spacing--24);
	}

	.kalawaca-kaki__merek {
		grid-column: 1 / -1;
	}

	footer.wp-block-template-part {
		margin-block-start: var(--wp--preset--spacing--40);
	}
}

/* ---------- Ponsel ---------- */

@media (max-width: 599px) {
	/* Urutan di ponsel: nav ungu, Topik hangat, lalu iklan Leaderboard (320 × 100). */
	.kalawaca-utilitas {
		display: none;
	}

	.kalawaca-kepala .kalawaca-nav {
		order: 1;
	}

	.kalawaca-kepala .kalawaca-topik {
		order: 2;
	}

	.kalawaca-kepala .kalawaca-masthead {
		order: 3;
		padding-block: 14px 0;
	}

	.kalawaca-masthead .kalawaca-merek {
		display: none;
	}

	.kalawaca-masthead .kalawaca-iklan--leaderboard {
		flex-basis: 100%;
	}

	.kalawaca-iklan__isi--leaderboard {
		min-height: 100px;
	}

	.kalawaca-iklan--billboard {
		display: none;
	}

	.kalawaca-iklan__isi--dalam-artikel {
		min-height: 250px;
	}

	/* Baris atas: tombol menu, lambang, Cari. Baris kedua: rubrik yang bisa digeser. */
	.kalawaca-nav__isi,
	.kalawaca-kepala--beranda .kalawaca-nav__isi {
		min-height: 0;
		gap: 0;
		padding-block: var(--wp--preset--spacing--8) var(--wp--preset--spacing--4);
	}

	.kalawaca-nav .kalawaca-nav__menu {
		display: contents;
	}

	.kalawaca-nav .kalawaca-menu {
		order: 0;
	}

	.kalawaca-kepala .kalawaca-merek--nav {
		display: flex;
		order: 1;
		flex: 1 1 auto;
		justify-content: center;
		gap: 8px;
	}

	.kalawaca-merek--nav .kalawaca-merek__lambang img {
		width: 32px;
		height: 32px;
	}

	.kalawaca-merek--nav .kalawaca-merek__nama {
		font-size: 26px;
		letter-spacing: -1px;
	}

	.kalawaca-nav__aksi {
		order: 2;
		padding: 0;
	}

	.kalawaca-nav .kalawaca-nav__aksi .kalawaca-nav__langganan {
		display: none;
	}

	/* Tombol Cari lebih kecil (36 px, ikon 20 px) agar tidak berimpit dengan lambang; kolomnya
	   tetap panel di bawah bilah ungu, lebih pendek. Huruf tetap 16 px agar iOS tidak memperbesar layar. */
	.kalawaca-cari .wp-block-search__button {
		width: 36px;
		height: 36px;
		border: 0;
	}

	.kalawaca-cari .wp-block-search__button svg {
		width: 20px;
		height: 20px;
	}

	.kalawaca-nav .kalawaca-cari .wp-block-search__input {
		min-height: 44px;
	}

	.kalawaca-nav .kalawaca-cari:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
		padding: 0 var(--wp--preset--spacing--16);
	}

	.kalawaca-nav .kalawaca-rubrik-geser {
		order: 3;
		flex: 0 0 100%;
	}
}