/*
 * Rotating page-header banner (the theme's own "entry-header" title bar,
 * not a plugin element) — matches the look the theme already produces on
 * pages like About Us (400px tall, white text, cover photo background),
 * but with the background photo swapped every 10s via JS instead of a
 * single static image.
 *
 * Shared across every sparkmls-* page (listings grid/detail, map, market
 * intelligence) via sparkmls_enqueue_hero_header_assets() in
 * sparkmls-listings.php, rather than duplicated per page — #site-header and
 * .entry-header are theme-wide elements, but this only has any visible
 * effect on pages where this stylesheet is actually enqueued.
 */
.entry-header {
	position: relative;
	height: 400px;
	background-size: cover;
	background-position: center;
	transition: background-image 1s ease-in-out;
	overflow: hidden;
}

.entry-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
}

.entry-header .inner {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * The theme's page-header-image mode (class "main" on .entry-header) injects
 * its own inline <style> block with
 * "header.entry-header.main * { color: #191919 !important; }" — higher
 * specificity than a plain ".entry-header .entry-title" rule, so it was
 * winning the cascade and showing dark text on some pages. The "body" prefix
 * here isn't decorative — it's what pushes our specificity above theirs so
 * this wins regardless of theme state or stylesheet load order.
 */
body .entry-header .entry-title,
body .entry-header.main .entry-title,
body .entry-header .inner,
body .entry-header .title {
	color: #fff !important;
}

/*
 * Nav bar transparent over the photo (matching the About Us page), instead
 * of the theme's normal solid-white nav sitting above the hero image.
 */
body #site-header {
	background: transparent !important;
	position: absolute !important;
	box-shadow: none !important;
	width: 100%;
	z-index: 999;
}

body #site-header .main-nav ul li,
body #site-header .main-nav ul li a,
body #site-header .main-nav ul li span,
body #site-header #logo .site-title,
body #site-header #logo a {
	color: #fff !important;
}