/*
 * Menu utama di nav ungu (BRIEF 9): dropdown, mega menu Warta 3 kolom, panel ponsel
 * dengan submenu akordeon, dan deretan rubrik geser di ponsel.
 * Dimuat hanya di halaman yang memakai blok Navigation.
 * Buka-tutup dropdown desktop memakai skrip bawaan blok Navigation; akordeon di panel
 * ponsel memakai assets/js/menu-akordeon.js karena core membuka semua submenu di sana.
 */

/* ---------- Item tingkat atas ---------- */

.kalawaca-nav .kalawaca-menu {
	font-size: 15px;
	font-weight: 600;
}

.kalawaca-nav .kalawaca-menu .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--4);
	align-items: center;
}

.kalawaca-nav .kalawaca-menu .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--putih);
	padding: 9px 12px;
	border-radius: var(--wp--custom--radius--pill);
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.kalawaca-nav .kalawaca-menu .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--oranye-muda);
}

/* Item halaman aktif: kapsul putih. */
.kalawaca-nav .kalawaca-menu .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
.kalawaca-nav .kalawaca-menu .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--putih);
	color: var(--wp--preset--color--ungu);
	padding-inline: 16px;
}

/* Item bersubmenu: tautan + tombol panah dalam satu kapsul. */
.kalawaca-nav .kalawaca-menu .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content {
	padding-right: 4px;
}

.kalawaca-nav .kalawaca-menu .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
	width: 28px;
	height: 44px;
	margin: 0 4px 0 0;
	padding: 0;
	color: var(--wp--preset--color--putih);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.kalawaca-nav .kalawaca-menu .wp-block-navigation__submenu-icon svg {
	width: 12px;
	height: 12px;
	stroke: currentColor;
	stroke-width: 2.5;
}

.kalawaca-nav .kalawaca-menu .wp-block-navigation__container > .has-child:hover > .wp-block-navigation__submenu-icon,
.kalawaca-nav .kalawaca-menu .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon[aria-expanded="true"] {
	color: var(--wp--preset--color--oranye-muda);
}

/* ---------- Dropdown (desktop) ---------- */

@media (min-width: 600px) {
	.kalawaca-nav .kalawaca-menu .wp-block-navigation__submenu-container {
		border: 0;
		border-radius: 18px;
		box-shadow: var(--wp--preset--shadow--menu);
		background: var(--wp--preset--color--putih);
		color: var(--wp--preset--color--tinta);
		padding: 14px;
		min-width: 240px;
		font-size: 15px;
		font-weight: 400;
		top: calc(100% + 8px);
	}

	/* Jembatan tak terlihat agar kursor tidak "jatuh" di celah 8 px antara nav dan dropdown. */
	.kalawaca-nav .kalawaca-menu .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -10px;
		height: 10px;
	}

	.kalawaca-nav .kalawaca-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 12px 14px;
		border-radius: var(--wp--custom--radius--s);
		color: var(--wp--preset--color--tinta);
	}

	.kalawaca-nav .kalawaca-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.kalawaca-nav .kalawaca-menu .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
		background: var(--wp--preset--color--latar-lembut);
		color: var(--wp--preset--color--ungu);
	}

	/*
	 * Submenu tingkat dua dan tiga (Daerah › Bogor › Bojonggede, Olahraga › Sepak Bola)
	 * ditampilkan menjorok di dalam dropdown induknya, bukan sebagai flyout ke samping.
	 * visibility: inherit mengikuti status buka-tutup dropdown induk.
	 */
	.kalawaca-nav .kalawaca-menu .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		position: static;
		visibility: inherit;
		opacity: inherit;
		width: auto;
		height: auto;
		min-width: 0;
		overflow: visible;
		padding: 0 0 0 14px;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
	}

	.kalawaca-nav .kalawaca-menu .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::before {
		display: none;
	}

	.kalawaca-nav .kalawaca-menu .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		color: var(--wp--preset--color--abu);
	}

	.kalawaca-nav .kalawaca-menu .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
		display: none;
	}

	.kalawaca-nav .kalawaca-menu .wp-block-navigation__submenu-container .has-child {
		flex-direction: column;
		align-items: stretch;
	}

	/* Header halaman dalam ("nav ringkas berlogo"): satu baris; Beranda diwakili lambang. */
	.kalawaca-nav .kalawaca-nav__isi {
		flex-wrap: nowrap;
	}

	.kalawaca-kepala:not(.kalawaca-kepala--beranda) .kalawaca-menu .wp-block-navigation__container > .wp-block-home-link {
		display: none;
	}

	/* ---------- Mega menu Warta: 3 kolom selebar nav ---------- */

	.kalawaca-nav__isi,
	.kalawaca-nav .kalawaca-nav__menu,
	.kalawaca-nav .kalawaca-menu,
	.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-container,
	.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-close,
	.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-dialog,
	.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-container-content,
	.kalawaca-nav .kalawaca-menu .wp-block-navigation__container,
	.kalawaca-nav .kalawaca-menu li.kalawaca-mega {
		position: static;
	}

	.kalawaca-nav .kalawaca-menu li.kalawaca-mega > .wp-block-navigation__submenu-container {
		left: var(--wp--preset--spacing--samping);
		right: var(--wp--preset--spacing--samping);
		top: calc(100% - 4px);
		max-width: 1192px;
		margin-inline: auto;
		padding: 28px 32px;
		border-radius: 22px;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: repeat(6, auto) 1fr;
		column-gap: 28px;
		row-gap: 2px;
		align-content: start;
	}

	/* Kolom 1: Nasional, Internasional, DKI Jakarta. */
	.kalawaca-mega > .wp-block-navigation__submenu-container > li:nth-child(1) { grid-column: 1; grid-row: 1; }
	.kalawaca-mega > .wp-block-navigation__submenu-container > li:nth-child(2) { grid-column: 1; grid-row: 2; }
	.kalawaca-mega > .wp-block-navigation__submenu-container > li:nth-child(3) { grid-column: 1; grid-row: 3; }

	/* Kolom 2: Daerah beserta anak-anaknya. */
	.kalawaca-mega > .wp-block-navigation__submenu-container > li:nth-child(4) { grid-column: 2; grid-row: 1 / -1; }

	/* Kolom 3: Topik. */
	.kalawaca-mega > .wp-block-navigation__submenu-container > li:nth-child(5) { grid-column: 3; grid-row: 1; }
	.kalawaca-mega > .wp-block-navigation__submenu-container > li:nth-child(6) { grid-column: 3; grid-row: 2; }
	.kalawaca-mega > .wp-block-navigation__submenu-container > li:nth-child(7) { grid-column: 3; grid-row: 3; }
	.kalawaca-mega > .wp-block-navigation__submenu-container > li:nth-child(8) { grid-column: 3; grid-row: 4; }
	.kalawaca-mega > .wp-block-navigation__submenu-container > li:nth-child(9) { grid-column: 3; grid-row: 5; }
	.kalawaca-mega > .wp-block-navigation__submenu-container > li:nth-child(10) { grid-column: 3; grid-row: 6; }

	/* Judul kolom Daerah bergaya label oranye-tua seperti desain. */
	.kalawaca-mega > .wp-block-navigation__submenu-container > li:nth-child(4) > .wp-block-navigation-item__content {
		font-size: var(--wp--preset--font-size--xs);
		font-weight: 800;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--wp--preset--color--oranye-tua);
	}

	.kalawaca-nav .kalawaca-menu li.kalawaca-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		margin: 0;
		padding-left: 0;
	}

	.kalawaca-nav .kalawaca-menu li.kalawaca-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		padding-left: 14px;
	}

	.kalawaca-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		color: var(--wp--preset--color--tinta);
	}

	.kalawaca-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		color: var(--wp--preset--color--abu);
	}
}

/* ---------- Panel menu ponsel ---------- */

/* Tombol menu: hanya di ponsel (core menyembunyikannya di >= 600 px). */
@media (max-width: 599px) {
	.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-container-open {
		width: 44px;
		height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: var(--wp--preset--color--putih);
	}
}

.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-container-open svg,
.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-container-close svg {
	width: 26px;
	height: 26px;
}

.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--samping) var(--wp--preset--spacing--40);
	font-size: 17px;
}

.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-container-close {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--tinta);
}

.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--56);
	align-items: stretch;
}

.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	align-items: stretch;
	width: 100%;
}

.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--garis);
}

.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content {
	grid-column: 1;
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 8px 0;
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--tinta);
	font-weight: 700;
}

.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ungu);
}

/* Akordeon: tombol panah tampil di panel (minimal 44 px). */
.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon,
.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
	grid-column: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	color: var(--wp--preset--color--ungu);
	border-radius: 50%;
}

.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
	width: 14px;
	height: 14px;
	transition: transform 0.15s;
}

.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-container.is-menu-open .kalawaca-terbuka > .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg);
}

.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0 0 8px 16px;
	gap: 0;
}

/* Submenu tertutup sampai tombolnya ditekan (kelas diatur assets/js/menu-akordeon.js). */
.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-container.is-menu-open .has-child:not(.kalawaca-terbuka) > .wp-block-navigation__submenu-container {
	display: none;
}

.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 0;
}

.kalawaca-nav .kalawaca-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-weight: 500;
	min-height: 44px;
}

/* ---------- Rubrik geser (ponsel) ---------- */

.kalawaca-nav .kalawaca-rubrik-geser {
	display: none;
}

@media (max-width: 599px) {
	.kalawaca-nav .kalawaca-rubrik-geser {
		display: block;
		overflow-x: auto;
		scrollbar-width: none;
		margin: 0 calc(-1 * var(--wp--preset--spacing--samping));
		padding: 6px var(--wp--preset--spacing--samping) 12px;
		font-size: 14px;
		font-weight: 600;
	}

	.kalawaca-nav .kalawaca-rubrik-geser::-webkit-scrollbar {
		display: none;
	}

	.kalawaca-nav .kalawaca-rubrik-geser .wp-block-navigation__container {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: var(--wp--preset--spacing--4);
	}

	.kalawaca-nav .kalawaca-rubrik-geser .wp-block-navigation-item {
		flex: none;
	}

	.kalawaca-nav .kalawaca-rubrik-geser .wp-block-navigation-item__content {
		display: inline-flex;
		align-items: center;
		min-height: 36px;
		padding: 8px 12px;
		border-radius: var(--wp--custom--radius--pill);
		color: var(--wp--preset--color--putih);
		white-space: nowrap;
	}

	.kalawaca-nav .kalawaca-rubrik-geser .current-menu-item > .wp-block-navigation-item__content {
		background: var(--wp--preset--color--putih);
		color: var(--wp--preset--color--ungu);
		padding-inline: 14px;
	}
}