/* =============================================================================
   ECR — "Bringing back common sense" strip (client feedback, September 2026)
   Markup and the reason it sits inside #header-secondary-outer:
   inc/chrome/strip.php.

   Geometry is read off the mockup on p.1 of "Website feedback 11 Sept 2026":
   against the 43px top bar the band measures ~99px and the mark ~61px high,
   centred. The band colour is the one sampled from the same mockup,
   rgb(109,169,219) — within a few steps of the ECR light blue (--ecr-accent,
   #7BADDE) used elsewhere on the site.
   ========================================================================== */

/* Height of the whole fixed header at the top of a page, for content that sits
   UNDER a transparent header (css/articles.css): Salient's top bar (42px in the
   material skin) + this band + the navigation row (116px; 84px for Salient's
   mobile header below 1000px, where the top bar's own row is hidden). Kept
   beside the band's heights so the two change together (10 November 2026). */
:root {
	--ecr-header-h: 254px;
}

.ecr-strip {
	--ecr-strip-bg: #6DA9DB;
	--ecr-strip-h: 96px;
	--ecr-strip-mark: 60px;
	display: block;
	width: 100%;
	background: var(--ecr-strip-bg);
	line-height: 0;
}

.ecr-strip__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--ecr-strip-h);
	padding: 0 16px;
	box-sizing: border-box;
}

.ecr-strip__mark {
	display: block;
	height: var(--ecr-strip-mark);
	width: auto;
	max-width: 100%;
	/* The file is vector; never let a lazy-load or theme rule blur or hide it. */
	opacity: 1 !important;
	margin: 0 !important;
}

/* The top bar is a flex/float row of menu items. The band is appended AFTER its
   .container, so it spans the full width and starts a line of its own. */
#header-secondary-outer .ecr-strip {
	clear: both;
}

/* Edge to edge. Salient's material skin gives the top bar
   `border: 1px solid transparent`; a transparent border shows the element's own
   pale background, so the blue band (and the shade below it, an ::after at
   left:0 of the padding box) stopped 1px short of each window edge and read as
   a thin white frame down both sides of the header. The side and bottom
   borders go; the top one keeps Salient's geometry above the utility row. */
body.material #header-outer #header-secondary-outer.ecr-has-strip {
	border-left-width: 0;
	border-right-width: 0;
	border-bottom-width: 0;
}

/* The Customizer's Additional CSS styles EVERY image of the events archive as
   an event thumbnail (`.post-type-archive-tribe_events img { width:100%;
   height:280px; object-fit:cover }`, plus a hover zoom). That rule reached the
   mark too: 1406x280 inside a 96px band, cropped and spilling over the top bar
   and the navigation on /events/ (list, month and day views). The id-scoped
   rule outranks any class-scoped image rule, so the mark keeps its own
   proportions on every template without touching the thumbnails. */
#ecr-strip .ecr-strip__mark {
	width: auto;
	height: var(--ecr-strip-mark);
	max-width: 100%;
	max-height: none;
	object-fit: contain;
	border-radius: 0;
	transform: none;
	transition: none;
}

@media only screen and (max-width: 1299px) {
	:root {
		--ecr-header-h: 242px;
	}

	.ecr-strip {
		--ecr-strip-h: 84px;
		--ecr-strip-mark: 52px;
	}
}

/* -----------------------------------------------------------------------------
   Below 1000px Salient hides the whole top bar (utility links, social icons,
   the two CTAs) and shows the compact mobile header. The band is the one part
   of the top bar the client wants everywhere, so on those widths the top bar
   is shown again but its own row stays hidden: only the band remains. Salient
   still measures the element and still slides it away on scroll, exactly as
   on desktop.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 999px) {
	body #header-outer #header-secondary-outer.ecr-has-strip {
		display: block !important;
		height: auto !important;
		padding: 0 !important;
		border: 0 !important;
		background: var(--ecr-strip-bg, #6DA9DB);
	}

	body #header-outer #header-secondary-outer.ecr-has-strip > .container {
		display: none !important;
	}

	:root {
		--ecr-header-h: 148px;
	}

	.ecr-strip {
		--ecr-strip-h: 64px;
		--ecr-strip-mark: 38px;
	}
}

@media only screen and (max-width: 479px) {
	:root {
		--ecr-header-h: 140px;
	}

	.ecr-strip {
		--ecr-strip-h: 56px;
		--ecr-strip-mark: 32px;
	}
}