/*
Theme Name: Suka News Tiga - Menara News
Theme URI: https://suka-web.com
Template: suka-news-tiga
Author: Suka Web
Description: Child theme khusus menara-news.com. Menata ulang header versi mobile: emblem bulat, wordmark dua warna, kotak pencarian, dan baris ikon sosial berwarna.
Version: 0.1.0
Text Domain: suka-news-tiga-menara
*/

/*
 * Blok brand mobile hanya tampil di bawah 900px. Di layar lebar, header bawaan
 * tema induk (baris tanggal, logo lebar, dan banner) dipakai apa adanya.
 */
.menara-mobile-brand {
	display: none;
}

/*
 * Menu memakai Warna Teks, bukan putih tetap. Menara menyetel Warna Dasar
 * menjadi putih sehingga bar menu ikut putih; teks putih bawaan tema induk
 * jadi tidak terbaca di atasnya.
 */
.primary-menu a,
.primary-menu > .current-menu-item > a,
.primary-menu > .current-menu-ancestor > a,
.primary-menu .sub-menu a,
.mobile-secondary-menu a,
.menu-toggle,
.submenu-toggle {
	color: var(--color-text, #1f2937);
}

.mobile-secondary-menu li:not(:last-child)::after {
	color: color-mix(in srgb, var(--color-text, #1f2937) 45%, transparent);
}

.submenu-toggle {
	background: color-mix(in srgb, var(--color-text, #1f2937) 8%, transparent);
}

@media (max-width: 900px) {
	/* Baris logo lebar bawaan tema diganti blok brand khusus Menara. */
	.header-branding {
		display: none;
	}

	.menara-mobile-brand {
		display: block;
		padding-block: 0.5rem 0.4rem;
		background: #fff;
	}

	.menara-mobile-brand__inner {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: 0.7rem;
	}

	.menara-mobile-brand__mark {
		display: block;
		flex: 0 0 auto;
	}

	.menara-mobile-brand__mark img {
		display: block;
		width: clamp(64px, 22vw, 96px);
		height: auto;
	}

	.menara-mobile-brand__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 0.6rem;
		min-width: 0;
	}

	.menara-wordmark {
		display: block;
		margin: 0;
		font-family: Georgia, "Times New Roman", serif;
		font-size: clamp(1.4rem, 7.2vw, 2.3rem);
		font-weight: 700;
		line-height: 1.05;
		letter-spacing: 0.02em;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.menara-wordmark__lead {
		color: var(--menara-wordmark-lead, #c1272d);
	}

	.menara-wordmark__rest {
		color: var(--menara-wordmark-rest, #f2b705);
	}

	.menara-tagline {
		display: flex;
		align-items: center;
		gap: 0;
		margin: 0.15rem 0 0;
		color: var(--menara-tagline-color, #4b5563);
		font-size: clamp(0.75rem, 3.4vw, 0.95rem);
		font-weight: 500;
		line-height: 1.3;
	}

	/* Tanda bulat bawaan dipakai selama ikon dari Customizer belum diisi. */
	.menara-tagline:not(.menara-tagline--has-icon)::before {
		margin-right: 0.35rem;
		content: "\2022";
	}

	.menara-tagline__icon {
		flex: 0 0 auto;
		width: auto;
		height: 30px;
		max-width: 60px;
		object-fit: contain;
	}

	.menara-tagline__text {
		min-width: 0;
	}

	.menara-mobile-brand__text {
		min-width: 0;
	}

	.menara-mobile-brand__search {
		width: clamp(120px, 34vw, 190px);
	}

	.menara-mobile-brand__search .search-form {
		padding: 3px;
		box-shadow: none;
		border-color: #e5e7eb;
		background: #f1f2f4;
	}

	.menara-mobile-brand__search .search-form__leading-icon {
		display: none;
	}

	.menara-mobile-brand__search .search-field {
		padding: 0.45rem 0.5rem 0.45rem 0.9rem;
		font-size: 0.85rem;
	}

	.menara-mobile-brand__search .search-submit {
		flex-basis: 32px;
		width: 32px;
		height: 32px;
	}

	.menara-mobile-brand__search .search-submit svg {
		width: 16px;
		height: 16px;
	}

	/* Baris kedua: ikon sosial di kiri, tombol menu di kanan, latar putih. */
	.header-navigation {
		border-bottom: 1px solid #e5e7eb;
		background: #fff;
	}

	.header-navigation__inner {
		align-items: center;
		gap: 0.5rem;
	}

	.header-social {
		order: 1;
		gap: 0.55rem;
		margin-right: auto;
		margin-left: 0;
	}

	.primary-navigation {
		order: 2;
		min-height: 48px;
	}

	.header-social a {
		width: 42px;
		height: 42px;
		border: 0;
		background: var(--social-color, #111827);
		color: #fff;
	}

	.header-social__link--facebook {
		background: var(--social-color, #1877f2);
	}

	.header-social__link--youtube {
		background: var(--social-color, #ff0000);
	}

	.header-social__link--instagram {
		background: var(--social-color, #111827);
	}

	.header-social__link--whatsapp {
		background: var(--social-color, #25d366);
	}

	.header-social a:hover,
	.header-social a:focus {
		border-color: transparent;
		filter: brightness(0.92);
	}

	.header-social svg {
		width: 21px;
		height: 21px;
		stroke-width: 1.7;
	}

	.menu-toggle {
		width: auto;
		padding: 0.5rem 0 0.5rem 0.5rem;
		color: var(--color-text, #1f2937);
	}

	.menu-toggle__label {
		display: none;
	}

	.menu-toggle__icon {
		gap: 6px;
		width: 30px;
	}

	.menu-toggle__icon span {
		height: 3px;
	}
}

@media (max-width: 420px) {
	.menara-mobile-brand__body {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0.4rem;
	}

	.menara-mobile-brand__search {
		width: 100%;
	}
}