/*
 * [cr_top_bar] – the property page's sky-blue trust bar (client design, Oct 21 2026).
 *
 * Full width of its container (never wider: it sits inside the template's framed section),
 * sky background, 1px ink rule underneath, uppercase Work Sans items (12px, smaller to stay on one
 * line) with thin rules between them; sticky at the top of the viewport while the page scrolls. Tokens follow the
 * site's Elementor globals; defaults sit on :where() so a site rule always wins.
 */
:where(.cr-topbar) {
	--cr-sky: var(--e-global-color-accent, #C1D8DB);
	--cr-ink: var(--e-global-color-c9d9ea6, #443B27);
	--cr-font: var(--e-global-typography-text-font-family, "Work Sans"), "Helvetica Neue", Arial, sans-serif;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	background: var(--cr-sky);
	border-bottom: 1px solid var(--cr-ink);
	color: var(--cr-ink);
	font-family: var(--cr-font);
}

.cr-topbar.cr-topbar--sticky {
	position: sticky;
	top: 0;
	z-index: 80; /* under the search bar's popovers (90) and the floating seal */
}

.cr-topbar *,
.cr-topbar *::before,
.cr-topbar *::after {
	box-sizing: border-box;
}

/*
 * One line at every width down to 340px (client, Nov 5 2026): the text scales to the bar. The shortcode
 * puts the bar's character and item counts on it (--cr-topbar-chars / --cr-topbar-n); Work Sans 600
 * caps measure --cr-topbar-advance em per character at the given letter-spacing (0.73 at .14em,
 * 0.67 at .08em, 0.63 at .04em, measured on every home's line), so the size that fits is
 * (bar width - padding - rules) / (characters x advance + gaps). Capped at --cr-topbar-max, never under
 * 7px. Each rule has the same space on both sides (--cr-topbar-gapn em). No container queries: 12px.
 */
.cr-topbar {
	container-type: inline-size;
}

.cr-topbar .cr-topbar__list {
	--cr-topbar-pad: 16px;
	--cr-topbar-gapn: 1.6;
	--cr-topbar-advance: .74;
	--cr-topbar-max: 12px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0 var(--cr-topbar-pad);
	list-style: none;
}

.cr-topbar .cr-topbar__caps {
	font-size: 12px;
	font-size: clamp(7px, calc((100cqw - 2 * var(--cr-topbar-pad) - (var(--cr-topbar-n, 3) - 1) * 1px) / (var(--cr-topbar-chars, 60) * var(--cr-topbar-advance) + (var(--cr-topbar-n, 3) - 1) * 2 * var(--cr-topbar-gapn))), var(--cr-topbar-max));
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.cr-topbar .cr-topbar__item {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	margin: 0;
	padding: 12px 0;
}

.cr-topbar .cr-topbar__item + .cr-topbar__item::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 1px;
	height: 1em;
	margin: 0 calc(var(--cr-topbar-gapn) * 1em);
	background: var(--cr-ink);
	opacity: .5;
}

@media (max-width: 767px) {
	.cr-topbar .cr-topbar__list {
		--cr-topbar-pad: 12px;
		--cr-topbar-gapn: 1.2;
		--cr-topbar-advance: .68;
		--cr-topbar-max: 11px;
	}

	.cr-topbar .cr-topbar__caps {
		letter-spacing: .08em;
	}

	.cr-topbar .cr-topbar__item {
		padding: 10px 0;
	}
}

@media (max-width: 480px) {
	.cr-topbar .cr-topbar__list {
		--cr-topbar-pad: 8px;
		--cr-topbar-gapn: .9;
		--cr-topbar-advance: .64;
	}

	.cr-topbar .cr-topbar__caps {
		letter-spacing: .04em;
	}
}

/* Narrower than any phone the client targets: let the items wrap rather than shrink below 7px. */
@media (max-width: 339px) {
	.cr-topbar .cr-topbar__list {
		flex-wrap: wrap;
		row-gap: 2px;
	}
}