/* ==========================================================================
   StarzMeet — home hero/banner polish, mobile-first.
   Keeps the location tagline (with the current city) readable on phones and
   tidies the sidebar search. Scoped to small screens so it never fights the
   theme's desktop banner layout.
   ========================================================================== */

/* The dynamic city label — golden yellow so it stands out on the dark banner
   and matches the "current city" chip / logo star. */
.lp_auto_loc_container .lp-dyn-city {
	color: #ffc233;
	font-weight: 700;
}

@media (max-width: 767px) {
	/* Kill a tiny (~5px) horizontal scroll caused by Bootstrap `.row` negative
	   margins inside the full-width home sections (blog grid / list grid). */
	html, body { overflow-x: hidden; }

	/* Tagline: scale down from the desktop hero size and allow clean wrapping. */
	.lp-header-search-tagline-sidebar-banner {
		font-size: clamp(22px, 6.5vw, 30px);
		line-height: 1.2;
		margin-bottom: 8px;
		word-break: normal;
		overflow-wrap: break-word;
	}
	.sidebar-banner-des {
		font-size: 15px;
		line-height: 1.5;
		margin-bottom: 16px;
	}

	/* Give the hero columns breathing room and a sensible stacking order:
	   headline first, then the search box. */
	.lp_auto_loc_container {
		padding-left: 0;
		padding-right: 0;
		margin-bottom: 18px;
	}
	.lp-banner-sidebar-search {
		background: rgba(255, 255, 255, .96);
		border-radius: 12px;
		padding: 16px 14px;
		box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
	}
	/* The title/description are white for the dark desktop banner; on the white
	   mobile card they must be dark, or they vanish (white-on-white). */
	.lp-banner-sidebar-search .lp-new-search-title {
		color: #0f172a !important;
		font-size: 18px;
		line-height: 1.25;
	}
	.lp-banner-sidebar-search .lp-new-search-des {
		color: #475569 !important;
		font-size: 13.5px;
	}

	/* Category quick-links under the tagline: wrap into tidy, tappable chips. */
	.lp-header-search-cats ul {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 0;
		margin: 0 0 6px;
	}
	.lp-header-search-cats ul li { margin: 0 !important; float: none !important; }
	.lp-header-search-cats ul li a {
		display: inline-block;
		padding: 7px 13px;
		font-size: 13px;
		line-height: 1.2;
	}
}