/*
 * NEMRA Blocks — Social Proof Bar widget.
 * Single-line tagline that sits above the Impact Stats row on home / reps /
 * manufacturers pages. Layout + structural styles only; colors come from
 * widget controls (with brand-token fallbacks via :root in the child theme).
 */

.nemra-social-proof-bar {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	/*
	 * Section padding is the container's job. This block sits under the hero on
	 * six pages and the comp gives it 80/64/0/64 there — a bottom of 0, not 80.
	 * Keeping a vertical value here made every one of those sections the sum of
	 * two paddings, which no single number on screen explains.
	 */
	padding: 0;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	box-sizing: border-box;
	text-align: left;
}

.nemra-social-proof-bar--align-center {
	text-align: center;
}

.nemra-social-proof-bar--align-left {
	text-align: left;
}

.nemra-social-proof-bar__text {
	margin: 0;
	/* V2 comps set the tagline in the serif display face. */
	font-family: var(--nemra-font-heading, 'Libre Baskerville', Georgia, serif);
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
	color: var(--nemra-muted, #6b6b6b);
}

.nemra-social-proof-bar__sep {
	display: inline-block;
	margin: 0 0.5em;
	color: #ababab;
}

.nemra-social-proof-bar__link {
	color: var(--nemra-blue, #2173B3);
	text-decoration: none;
	transition: color 0.15s ease-in-out;
}

.nemra-social-proof-bar__link:focus-visible {
	outline: 2px solid var(--nemra-blue, #2173B3);
	outline-offset: 2px;
}

/* --- V2 UPS band: dark theme + trust-stats row ------------------------- */

/* Dark theme: navy band, white lead, muted trailing phrase. The lead color
 * still comes from the text_color control; here we recolor the trailing
 * phrase, separators, captions and dividers for a navy background. */
.nemra-social-proof-bar--theme-dark .nemra-social-proof-bar__sep,
.nemra-social-proof-bar--theme-dark .nemra-social-proof-bar__trailing,
.nemra-social-proof-bar--theme-dark .nemra-social-proof-bar__link {
	/* WCAG AA: dim via color alpha, not opacity — opacity would multiply
	 * with per-instance link_color alphas and land below 4.5:1 on navy. */
	color: rgba(252, 253, 253, 0.56);
	opacity: 1;
}

/* Resting state is the dimmed light phrase above (comp node 2:505 renders it
 * at ~32% white — we hold 56% for WCAG AA). Hover brings in the brand blue;
 * no underline in either state. */
.nemra-social-proof-bar--theme-dark .nemra-social-proof-bar__link:hover,
.nemra-social-proof-bar--theme-dark .nemra-social-proof-bar__link:focus-visible {
	color: var(--nemra-blue, #2173B3);
}

.nemra-social-proof-bar--theme-dark .nemra-social-proof-bar__text,
.nemra-social-proof-bar--stats .nemra-social-proof-bar__text {
	/* Heading/H5 is Libre Baskerville REGULAR. The family only ships 400/700,
	   so 500 resolved to 400 and looked fine — but it would have snapped to a
	   heavier face the moment a 500 weight was added to the font request. */
	font-weight: 400;
	letter-spacing: -0.5px;
	line-height: 1.2;
	/* The comp's 760px text box breaks the lead after "professionals", but in
	 * Figma the trailing phrase is an absolutely-positioned overlay that hangs
	 * ~40px past that box. In flow there is no width that both breaks after
	 * "professionals" (needs < 765px) and keeps "are already here · Explore …"
	 * on one line (needs ≥ 799px) — 800px keeps it to the comp's two lines,
	 * one word later in the rag. Going narrower produced three lines. */
	max-width: 800px;
	margin-inline: auto;
}

/* Keep the trailing phrase ("Explore NEMRA Lighting Membership") on a single
 * line so it reads as one unit after the bullet — matching the comp where the
 * phrase is an un-wrapping overlay, while the lead text wraps within 760px. */
.nemra-social-proof-bar--theme-dark .nemra-social-proof-bar__trailing,
.nemra-social-proof-bar--theme-dark .nemra-social-proof-bar__link,
.nemra-social-proof-bar--stats .nemra-social-proof-bar__trailing,
.nemra-social-proof-bar--stats .nemra-social-proof-bar__link {
	white-space: nowrap;
}

/* On the stats band the comp hangs the trailing phrase past the 760px lead
 * box ("are already here · Explore …" share line 2). The default 0.5em sep
 * margins push that nowrap unit a few px past the box and it drops to its own
 * line — tighten them so the pair fits as in the comp. */
.nemra-social-proof-bar--stats .nemra-social-proof-bar__sep {
	margin: 0 0.2em;
}

/* Light-theme UPS band (Reps): trailing phrase was dark @ 32% per Figma —
 * raised to 64% alpha for WCAG AA (2.03:1 → 5.2:1). Alpha lives in the
 * color so per-instance link_color settings compose predictably. */
.nemra-social-proof-bar--theme-light .nemra-social-proof-bar__sep,
.nemra-social-proof-bar--theme-light .nemra-social-proof-bar__trailing,
.nemra-social-proof-bar--theme-light.nemra-social-proof-bar--stats .nemra-social-proof-bar__link {
	color: rgba(23, 23, 26, 0.64);
	opacity: 1;
}

/* Hover mirrors the dark band: dimmed resting phrase, brand blue on hover.
 * The 4-class compound keeps this above the resting rule AND the mobile
 * 48%-dim rule below, which share (0,3,0) specificity. */
.nemra-social-proof-bar--theme-light.nemra-social-proof-bar--stats .nemra-social-proof-bar__link:hover,
.nemra-social-proof-bar--theme-light.nemra-social-proof-bar--stats .nemra-social-proof-bar__link:focus-visible {
	color: var(--nemra-blue, #2173B3);
}

/* Trust-stats row */
.nemra-social-proof-bar__stats {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 80px;
	margin-top: 64px;
}

.nemra-social-proof-bar__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.nemra-social-proof-bar__avatars {
	display: flex;
	align-items: center;
}

.nemra-social-proof-bar__avatar {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	margin-left: -16px;
	box-shadow: 0 0 0 2px var(--nemra-blue-dark, #042a48);
}

.nemra-social-proof-bar__avatar:first-child {
	margin-left: 0;
}

.nemra-social-proof-bar__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nemra-social-proof-bar__avatar--placeholder {
	background: linear-gradient(135deg, var(--nemra-blue, #2173b3), var(--nemra-blue-vibrant, #0074cf));
}

.nemra-social-proof-bar__caption {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--nemra-light, #fcfdfd);
}

.nemra-social-proof-bar--theme-light .nemra-social-proof-bar__caption {
	color: var(--nemra-dark, #17171a);
}

/* On the light band the overlap ring matches the light-grey section bg. */
.nemra-social-proof-bar--theme-light .nemra-social-proof-bar__avatar {
	box-shadow: 0 0 0 2px #f6f6f6;
}

/* Comp 571:21292 has no hairlines between the trust clusters. */
.nemra-social-proof-bar__stat-divider {
	display: none;
}

.nemra-social-proof-bar--theme-light .nemra-social-proof-bar__stat-divider {
	background: var(--nemra-dark, #17171a);
	opacity: 0.12;
}

/* Mobile (V2 comp, node 571:21326) — navy band, heading wraps centered, and
 * the 3 trust clusters arrange in a compact 2-up staggered grid: two clusters
 * share the top row, the third centers on its own row below. Avatars shrink to
 * 32px and captions become tight 10px labels constrained to ~120px. */
@media (max-width: 768px) {
	/* Mobile comp 797:21384 keeps the lead on Heading/H5, whose mobile mode
	   is 24 — the box measures 4 lines of 28.8 (24 × 1.2) in a 352 column. */
	.nemra-social-proof-bar__text {
		font-size: var(--nemra-t-h5-size, 24px);
	}

	/* Comp shows the trailing phrase directly after the lead with no bullet. */
	.nemra-social-proof-bar__sep {
		display: none;
	}

	/* The desktop single-line rule overflows a 390px viewport — let the
	 * trailing phrase wrap on mobile. */
	.nemra-social-proof-bar__trailing,
	.nemra-social-proof-bar__link {
		white-space: normal !important;
	}

	/* The mobile comps dim the trailing phrase further than desktop so it
	 * reads as a set-off highlight after the dark lead (797:21921 draws it
	 * at 48% dark vs the desktop rule's 64%). 48% is only 3.1:1 on the
	 * #f6f6f6 ground, which passes WCAG AA solely because the phrase sits
	 * on the H5 mobile size — 24px = 18pt = large text (3:1 floor). If the
	 * mobile size ever drops below 24px this must go back up. */
	.nemra-social-proof-bar--theme-light .nemra-social-proof-bar__trailing,
	.nemra-social-proof-bar--theme-light.nemra-social-proof-bar--stats .nemra-social-proof-bar__link {
		color: rgba(23, 23, 26, 0.48);
	}

	/* 2-up wrap grid instead of the desktop single row. Clusters keep their
	 * natural ~120px width so two fit per row and the third centers below. */
	.nemra-social-proof-bar__stats {
		flex-wrap: wrap;
		gap: 32px;
		margin-top: 32px;
	}

	.nemra-social-proof-bar__stat {
		gap: 12px;
	}

	.nemra-social-proof-bar__avatar {
		width: 32px;
		height: 32px;
		margin-left: -12px;
	}

	.nemra-social-proof-bar__caption {
		font-size: 10px;
		line-height: 1.3;
		width: 120px;
		text-align: center;
	}
}

@media (max-width: 480px) {
	/* Hairline dividers are a desktop-row affordance; the wrap grid drops them. */
	.nemra-social-proof-bar__stat-divider {
		display: none;
	}
}

@media (max-width: 600px) {
	.nemra-social-proof-bar {
		/* Container owns section padding at every breakpoint — see the root rule. */
		padding: 0;
	}
}