/* ============================================================
   Parkwellness — Values Bar
   Sits directly below the hero. A horizontally scrollable track —
   on desktop the 4 items fit the viewport so it just reads as a
   normal centered row; on narrow mobile widths the same track
   overflows and becomes a native swipe carousel, with arrows that
   only reveal themselves once assets/js/values-bar.js detects that
   overflow. Same mechanism as Jersey Jump's trust bar.
   ============================================================ */
.pw-values-bar {
	background-color: var(--color-cream-250);
	min-height: 130px;
	padding-block: 24px;
	display: flex;
	align-items: center;
}

.pw-values-bar-row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
}

/* Scroll area — flex:1 + min-width:0 so it can shrink and actually
   scroll instead of forcing the row wider than the viewport. */
.pw-values-bar-viewport {
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.pw-values-bar-viewport::-webkit-scrollbar {
	display: none;
}

.pw-values-bar-track {
	display: flex;
	/* flex-start, not center — the 4 items already flex-grow to fill 100%
	   on desktop (nothing left to center), and centering overflowing
	   content on mobile pushes it equally past BOTH edges, clipping the
	   first item beyond scrollLeft:0 with no way to scroll back to it. */
	justify-content: flex-start;
	align-items: stretch;
	width: max-content;
	min-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pw-values-bar-item {
	display: flex;
	align-items: center; /* centers the text block vertically in the column */
	justify-content: center; /* centers the text block horizontally in the column — text-align below is separate: it's how the two lines align to EACH OTHER inside that centered block */
	flex: 1 0 200px; /* grows to share the bar's full width evenly on desktop; won't shrink below 200px, so on mobile the track overflows into the swipeable scroller instead of cramming */
	padding-inline: 32px;
	white-space: nowrap;
	color: var(--color-dark-400);
	font-family: var(--font-accent);
	font-weight: 500;
	font-size: clamp(13px, 1.4vw, 15px);
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: left;
}

/* Separator between each pair — none on the outer edges */
.pw-values-bar-item + .pw-values-bar-item {
	border-inline-start: 1px solid var(--color-taupe-200);
}

/* Arrows — hidden by default; JS unhides them only when the track
   actually overflows the viewport. */
.pw-values-bar-arrow {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--overlay-black-16);
	color: var(--color-dark-400);
	cursor: pointer;
}

.pw-values-bar-arrow svg {
	width: 18px;
	height: 18px;
}

.pw-values-bar-arrow:disabled {
	opacity: 0.4;
	cursor: default;
}

.pw-values-bar-arrow[hidden] {
	display: none;
}