/*--------------------------------------------------------------
# Classic Polo — store locator
#
# A directory first. 82 stores across 9 states, so the job is to let
# someone find their city fast: a search box, state chips, and stores
# grouped under their state.
#
# Tokens come from .cp-sec in cp-sections.css; the shortcode is wrapped
# in a .cp-sec container on the page.
--------------------------------------------------------------*/

.cp-st {
	--cp-navy  : var( --e-global-color-primary, #0F2A5F );
	--cp-blue  : var( --e-global-color-secondary, #1F4ED8 );
	--cp-gold  : var( --e-global-color-accent, #F2B705 );
	--cp-ink   : var( --e-global-color-text, #1C1C1C );
	--cp-muted : #5B6472;
	--cp-rule  : #E5E7EB;
	--cp-wash  : #F4F6FA;
}

/* Controls ---------------------------------------------------------- */

.cp-st__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 18px;
	border-bottom: 2px solid var( --cp-ink );
}

.cp-st__searchwrap {
	flex: 1 1 320px;
	max-width: 460px;
}

.cp-st__search {
	width: 100%;
	padding: 13px 16px;
	font-family: inherit;
	font-size: 0.9375rem;
	color: var( --cp-ink );
	background: #fff;
	border: 1px solid var( --cp-rule );
	border-radius: 0;
}

.cp-st__search:focus {
	outline: 2px solid var( --cp-gold );
	outline-offset: 1px;
	border-color: var( --cp-navy );
}

.cp-st__count {
	font-family: var( --monofont );
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var( --cp-muted );
	margin: 0;
	font-variant-numeric: tabular-nums;
}

/* State chips ------------------------------------------------------- */

.cp-st__states {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 20px 0 8px;
}

.cp-st__state {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 9px 14px;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
	color: var( --cp-ink );
	background: #fff;
	border: 1px solid var( --cp-rule );
	border-radius: 0;
	cursor: pointer;
	transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.cp-st__state span {
	font-family: var( --monofont );
	font-size: 0.6875rem;
	color: var( --cp-muted );
	font-variant-numeric: tabular-nums;
}

.cp-st__state:hover {
	border-color: var( --cp-navy );
}

.cp-st__state.is-active {
	background: var( --cp-navy );
	border-color: var( --cp-navy );
	color: #fff;
}

.cp-st__state.is-active span {
	color: var( --cp-gold );
}

.cp-st__state:focus-visible {
	outline: 3px solid var( --cp-gold );
	outline-offset: 2px;
}

/* The list ---------------------------------------------------------
   Two columns of stores under a full-width state heading, so the eye
   scans states first and addresses second. */

.cp-st__list {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	column-gap: 0;
	margin-top: 26px;
}

.cp-st__group {
	grid-column: 1 / -1;
	margin: 30px 0 0;
	padding-bottom: 10px;
	border-bottom: 2px solid var( --cp-ink );
	font-family: var( --monofont );
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var( --cp-muted );
}

.cp-st__group:first-child {
	margin-top: 0;
}

.cp-st__item {
	padding: 22px 32px 22px 0;
	border-bottom: 1px solid var( --cp-rule );
}

.cp-st__item:nth-child( even ) {
	padding-left: 32px;
	padding-right: 0;
	border-left: 1px solid var( --cp-rule );
}

.cp-st__name {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var( --cp-ink );
	margin: 0 0 6px;
}

.cp-st__addr {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var( --cp-muted );
	margin: 0 0 12px;
	max-width: 46ch;
}

.cp-st__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

.cp-st__phone {
	font-family: var( --monofont );
	font-size: 0.8125rem;
	font-weight: 500;
	color: var( --cp-ink );
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.cp-st__phone:hover {
	color: var( --cp-blue );
}

.cp-st__dir {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var( --cp-blue );
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}

.cp-st__dir:hover {
	color: var( --cp-navy );
}

/* Empty states ------------------------------------------------------ */

.cp-st__none,
.cp-st-empty {
	margin: 40px 0 0;
	padding: 28px;
	border: 2px dashed var( --cp-rule );
	text-align: center;
	font-size: 0.9375rem;
	color: var( --cp-muted );
}

/* Responsive -------------------------------------------------------- */

@media screen and ( max-width: 860px ) {
	.cp-st__list {
		grid-template-columns: 1fr;
	}

	.cp-st__item,
	.cp-st__item:nth-child( even ) {
		padding: 20px 0;
		border-left: 0;
	}
}

/* Map ---------------------------------------------------------------
   Leaflet on OpenStreetMap tiles. Pins are drawn in CSS so they carry
   the brand colours and need no image assets. */

.cp-st__map {
	height: clamp( 320px, 46vw, 520px );
	margin-bottom: 28px;
	border: 1px solid var( --cp-rule );
	background: var( --cp-wash );
	z-index: 0;               /* keep tiles under the site header */
}

.cp-st-pin span {
	display: block;
	width: 14px;
	height: 14px;
	background: var( --cp-navy );
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba( 15, 42, 95, 0.5 );
	transform: rotate( 45deg );
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.cp-st-pin:hover span,
.cp-st-pin:focus span {
	background: var( --cp-gold );
	transform: rotate( 45deg ) scale( 1.25 );
}

/* Leaflet's popup, brought onto the site's type and shape. */
.cp-st__map .leaflet-popup-content-wrapper {
	border-radius: 0;
	box-shadow: 0 10px 28px rgba( 15, 42, 95, 0.2 );
	border-top: 2px solid var( --cp-gold );
}

.cp-st__map .leaflet-popup-content {
	margin: 14px 16px;
	font-family: inherit;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var( --cp-muted );
}

.cp-st__map .leaflet-popup-content strong {
	display: block;
	margin-bottom: 4px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var( --cp-ink );
}

.cp-st__map .leaflet-popup-tip {
	box-shadow: none;
}

.cp-st__map .leaflet-container a.leaflet-popup-close-button {
	color: var( --cp-muted );
}

.cp-st__map .leaflet-control-attribution {
	font-size: 10px;
	background: rgba( 255, 255, 255, 0.85 );
}

/* A store selected from either side. */
.cp-st__item {
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.cp-st__item.is-active {
	background: var( --cp-wash );
}

/* Stores with no coordinates yet still appear in the list. */
.cp-st__item[data-lat=""] .cp-st__name::after {
	content: "";
}