/* Comet Signal — dealers template (templates/dealers-signal.php)
   USA map with pulsating logo pins (click = filter), search, card grid.
   Tokens come from signal.css. */

.signal-dealers { font-family: var(--sg-font); color: var(--sg-ink); }

/* ---------- Hero ------------------------------------------------------------ */
.sd-eyebrow {
	margin: 0;
	font: 700 12px/1 var(--sg-narrow);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--sg-red);
}
.sd-hero { border-bottom: 1px solid #eeeef1; }
.sd-hero > .signal-container { padding-top: var(--sg-sect-sm); padding-bottom: 34px; }
.sd-hero__title {
	margin: 14px 0 0;
	font: 900 clamp(30px, 3.6vw, 50px)/1.03 var(--sg-font);
	letter-spacing: -.028em;
	text-wrap: balance;
}
.sd-hero__text {
	margin: 14px 0 0;
	font: 400 16.5px/1.65 var(--sg-font);
	color: var(--sg-mut);
}

/* ---------- Map -------------------------------------------------------------- */
.sd-map-wrap { background: #fafafa; border-bottom: 1px solid #eeeef1; }
.sd-map-wrap > .signal-container { padding-top: 34px; padding-bottom: 34px; }
.sd-map { display: block; width: 100%; height: auto; }
.sd-map__states path {
	fill: #e9e9ec;
	stroke: #fff;
	stroke-width: 1.5;
	transition: fill .15s;
}
.sd-map__states path.is-active { fill: #d9d9de; }

/* pins */
.sd-pin { cursor: pointer; }
.sd-pin:focus { outline: none; }
.sd-pin__pulse {
	fill: var(--sg-red);
	opacity: .35;
	transform-origin: center;
	transform-box: fill-box;
	animation: sdPulse 2.4s ease-out infinite;
}
@keyframes sdPulse {
	0%   { transform: scale(.55); opacity: .45; }
	70%  { transform: scale(1.5); opacity: 0; }
	100% { transform: scale(1.5); opacity: 0; }
}
.sd-pin__disc {
	fill: #fff;
	stroke: var(--sg-red);
	stroke-width: 1.5;
	transition: stroke-width .15s;
}
.sd-pin:hover .sd-pin__disc,
.sd-pin:focus-visible .sd-pin__disc,
.sd-pin.is-active .sd-pin__disc { stroke-width: 3; }
.sd-pin.is-active .sd-pin__pulse { animation-duration: 1.2s; }
.sd-pin__hit { fill: transparent; }
@media (prefers-reduced-motion: reduce) {
	.sd-pin__pulse { animation: none; opacity: .2; transform: scale(1.1); }
}

/* ---------- Controls ----------------------------------------------------------- */
.sd-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
}
.sd-search {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 280px;
	max-width: 420px;
	height: 48px;
	padding: 0 16px;
	background: #fff;
	border: 1px solid #dcdce1;
	border-radius: 3px;
	transition: border-color .15s;
}
.sd-search:focus-within { border-color: var(--sg-ink); }
.sd-search svg { width: 17px; height: 17px; flex: none; color: var(--sg-red); }
.sd-search input,
.signal-dealers .sd-search input[type="text"] {
	flex: 1;
	border: none;
	padding: 0;
	background: none;
	outline: none;
	font: 500 15px/1.4 var(--sg-font);
	color: var(--sg-ink);
	width: auto;
	min-width: 0;
}
.sd-clear {
	border: none;
	background: var(--sg-ink);
	color: #fff;
	height: 48px;
	padding: 0 18px;
	border-radius: 3px;
	font: 800 12px/1 var(--sg-font);
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s;
}
.sd-clear:hover { background: var(--sg-red); }
.sd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.sd-chip {
	display: inline-flex;
	align-items: center;
	height: 48px;
	padding: 0 16px;
	border: 1px solid #dcdce1;
	border-radius: 3px;
	background: #fff;
	font: 700 13px/1 var(--sg-font);
	color: var(--sg-ink) !important;
	text-decoration: none;
	transition: border-color .15s, background .15s, color .15s;
}
.sd-chip:hover,
.sd-chip.is-active { border-color: var(--sg-ink); background: var(--sg-ink); color: #fff !important; }

/* ---------- Groups + cards ------------------------------------------------------- */
.sd-list {
	/* filtered scroll lands with the count clear of the sticky header */
	scroll-margin-top: 90px;
}
.sd-list > .signal-container { padding-top: 40px; padding-bottom: var(--sg-sect); }
.sd-count {
	margin: 0 0 22px;
	font: 600 11px/1 var(--sg-narrow);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sg-dim);
}
.sd-group { margin-bottom: 38px; }
.sd-group__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	padding: 0;
	font: 800 12.5px/1 var(--sg-narrow);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--sg-ink);
}
.sd-group__title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e7e7ea;
}
.sd-group__count {
	font: 700 10.5px/1 var(--sg-narrow);
	letter-spacing: .08em;
	color: var(--sg-dim);
	border: 1px solid #e4e4e8;
	border-radius: 999px;
	padding: 4px 8px;
}
.sd-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
}
.sd-card {
	display: flex;
	flex-direction: column;
	gap: 9px;
	background: #fff;
	border: 1px solid #e4e4e8;
	border-radius: 3px;
	padding: 20px 20px 18px;
	transition: border-color .15s, box-shadow .15s;
}
.sd-card:hover {
	border-color: var(--sg-ink);
	box-shadow: 0 4px 16px rgba(16, 16, 18, .08);
}
.sd-card__name {
	margin: 0 0 2px;
	padding: 0;
	font: 800 16.5px/1.25 var(--sg-font);
	letter-spacing: -.01em;
}
.sd-card__row {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	font: 400 13.5px/1.55 var(--sg-font);
	color: var(--sg-mut);
}
.sd-card__row svg {
	width: 15px;
	height: 15px;
	flex: none;
	margin-top: 3px;
	color: var(--sg-red);
}
.sd-card__row a { color: var(--sg-mut); text-decoration: none; }
.sd-card__row a:hover { color: var(--sg-red); }
.sd-card__site {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid #eeeef1;
	font: 800 12px/1 var(--sg-font);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--sg-red) !important;
	text-decoration: none;
	transition: color .15s;
}
.sd-card__site svg { width: 15px; height: 15px; }
.sd-card__site:hover { color: var(--sg-ink) !important; }
.sd-none {
	margin: 10px 0 0;
	font: 500 15px/1.6 var(--sg-font);
	color: var(--sg-mut);
}

/* ---------- Responsive -------------------------------------------------------------- */
@media (max-width: 767px) {
	.sd-map-wrap > .signal-container { padding-top: 22px; padding-bottom: 24px; }
	.sd-search { max-width: none; }
	.sd-chips { margin-left: 0; width: 100%; }
	.sd-chip { flex: 1; justify-content: center; }
	.sd-list > .signal-container { padding-top: 28px; }
}