/* VMSEO Dealer — list mode. Scoped under .vmsd-dealer; inherits theme type/color. */
.vmsd-dealer {
	--vmsd-accent: #d0021b;
	color: var(--vmsd-text, inherit);
	--vmsd-muted: #6b7280;
	--vmsd-border: #e5e7eb;
	--vmsd-surface: #f7f7f8;
	--vmsd-radius: 8px;
	--vmsd-gap: 16px;
}

.vmsd-dealer__title {
	margin: 0 0 0.5em;
}

/* Virtual route has no layout meta: make the content column span the container
   (the sidebar layout is also forced off in PHP). Padding is inherited from the
   theme's own .inside-article wrapper, so nothing else is overridden here. */
.vmsd-dealer-route #primary.content-area {
	width: 100%;
	float: none;
}

.vmsd-dealer__section-title {
	margin: 1.5em 0 0.75em;
	font-size: 1.15rem;
}

.vmsd-dealer__empty {
	color: var(--vmsd-muted);
	padding: 1em 0;
}

/* Card grid — equal columns that never widen to fit content. No JS, no CLS. */
.vmsd-grid {
	display: grid;
	grid-template-columns: repeat(var(--vmsd-cols, 2), minmax(0, 1fr));
	gap: var(--vmsd-gap);
	width: 100%;
}

@media (max-width: 900px) {
	.vmsd-grid {
		grid-template-columns: repeat(var(--vmsd-cols-md, 2), minmax(0, 1fr));
	}
}

/* Fallback if inline custom properties are stripped by an asset optimizer. */
.vmsd-grid--cols-1 { grid-template-columns: minmax(0, 1fr); }
.vmsd-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vmsd-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vmsd-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
	.vmsd-grid--cols-3,
	.vmsd-grid--cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.vmsd-grid,
	.vmsd-grid--cols-1,
	.vmsd-grid--cols-2,
	.vmsd-grid--cols-3,
	.vmsd-grid--cols-4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.vmsd-card {
	border: 1px solid var(--vmsd-card-border, var(--vmsd-border));
	border-radius: var(--vmsd-radius);
	padding: 16px 18px;
	background: var(--vmsd-card-bg, #fff);
	min-width: 0;
	overflow-wrap: anywhere;
}

.vmsd-card--featured {
	border-color: var(--vmsd-accent);
}

.vmsd-card__title {
	margin: 0 0 8px;
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--vmsd-accent);
	line-height: 1.35;
}

.vmsd-card__row {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 6px 0 0;
	line-height: 1.45;
	min-width: 0;
}

/* Long unbroken addresses must wrap, not stretch the grid column. */
.vmsd-card__row > span {
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.vmsd-card__title {
	overflow-wrap: anywhere;
}

.vmsd-card__row svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	fill: var(--vmsd-icon, var(--vmsd-accent));
}

.vmsd-card__phones a {
	color: inherit;
	text-decoration: none;
}

.vmsd-card__phones a:hover {
	text-decoration: underline;
}

/* Region index (overview) */
.vmsd-region {
	margin-top: 1.5em;
}

.vmsd-region__label {
	display: block;
	background: var(--vmsd-region-bg, var(--vmsd-accent));
	color: var(--vmsd-region-text, #fff);
	font-weight: 600;
	padding: 8px 14px;
	border-radius: var(--vmsd-radius) var(--vmsd-radius) 0 0;
}

.vmsd-region__provinces {
	list-style: none;
	margin: 0;
	padding: 14px;
	background: var(--vmsd-surface);
	border-radius: 0 0 var(--vmsd-radius) var(--vmsd-radius);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px 16px;
}

@media (max-width: 900px) {
	.vmsd-region__provinces {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.vmsd-region__provinces {
		grid-template-columns: 1fr;
	}
}

.vmsd-region__provinces a {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	text-decoration: none;
	color: inherit;
}

.vmsd-region__provinces svg {
	width: 14px;
	height: 14px;
	fill: var(--vmsd-icon, var(--vmsd-accent));
	flex: 0 0 auto;
}

.vmsd-region__count {
	color: var(--vmsd-muted);
	font-size: 0.85em;
}

/* Ward facet chips (province page) */
.vmsd-wards {
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.vmsd-wards a {
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid var(--vmsd-border);
	border-radius: 999px;
	text-decoration: none;
	color: inherit;
	font-size: 0.9em;
}

.vmsd-wards a:hover {
	border-color: var(--vmsd-accent);
}

/* Legacy (pending) block */
.vmsd-legacy {
	margin-top: 1.5em;
}

.vmsd-legacy__district {
	margin: 1em 0 0.5em;
	font-weight: 600;
	color: var(--vmsd-muted);
}

/* Actions / pagination */
.vmsd-actions {
	margin: 1.5em 0;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.vmsd-btn {
	display: inline-block;
	padding: 8px 18px;
	border: 1px solid var(--vmsd-btn-border, var(--vmsd-accent));
	border-radius: var(--vmsd-radius);
	background: var(--vmsd-btn-bg, transparent);
	color: var(--vmsd-btn-text, var(--vmsd-accent));
	text-decoration: none;
	font-weight: 600;
}

.vmsd-btn:hover {
	background: var(--vmsd-btn-text, var(--vmsd-accent));
	color: var(--vmsd-btn-bg-hover, #fff);
}

.vmsd-dealer a:focus-visible,
.vmsd-btn:focus-visible {
	outline: 2px solid var(--vmsd-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.vmsd-dealer * {
		transition: none !important;
	}
}

/* Filter form (shortcode) */
.vmsd-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-bottom: 1.25em;
}

.vmsd-filter select,
.vmsd-filter input {
	padding: 8px 10px;
	border: 1px solid var(--vmsd-border);
	border-radius: var(--vmsd-radius);
	min-width: 180px;
	font: inherit;
	background: #fff;
}

.vmsd-filter__search {
	position: relative;
	flex: 1 1 220px;
	min-width: 200px;
}

.vmsd-filter__search input {
	width: 100%;
	padding-right: 34px;
	min-width: 0;
}

.vmsd-filter__search svg {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	fill: var(--vmsd-muted);
	pointer-events: none;
}

.vmsd-filter__submit {
	padding: 9px 22px;
	background: var(--vmsd-submit-bg, var(--vmsd-accent));
	color: var(--vmsd-submit-text, #fff);
	border: 0;
	border-radius: var(--vmsd-radius);
	font-weight: 600;
	cursor: pointer;
}

.vmsd-filter select[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

@media (max-width: 640px) {
	.vmsd-filter {
		flex-direction: column;
		align-items: stretch;
	}
	.vmsd-filter select,
	.vmsd-filter input,
	.vmsd-filter__search {
		min-width: 0;
		width: 100%;
	}
}

/* Map layer (opt-in) — facade reserves space, so init causes no CLS */
.vmsd-map {
	position: relative;
	margin: 0 0 1.25em;
	border: 1px solid var(--vmsd-border);
	border-radius: var(--vmsd-radius);
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

@media (min-width: 900px) {
	.vmsd-map { aspect-ratio: 21 / 9; }
}

.vmsd-map__facade,
.vmsd-map__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.vmsd-map__facade {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--vmsd-surface);
	border: 0;
	cursor: pointer;
	font: inherit;
	color: var(--vmsd-muted);
}

.vmsd-map__facade svg {
	width: 22px;
	height: 22px;
	fill: var(--vmsd-accent);
}

.vmsd-map__canvas[hidden] { display: none; }

.vmsd-map .leaflet-container { font: inherit; }

/* Back link */
.vmsd-back {
	margin: 0 0 1em;
}

.vmsd-btn--ghost {
	padding: 6px 14px;
	font-weight: 500;
}

/* Directions button (opens Google Maps with the address as destination) */
.vmsd-card__actions {
	margin: 12px 0 0;
}

.vmsd-dir {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: var(--vmsd-radius);
	background: var(--vmsd-dir-bg, #1a73e8);
	color: var(--vmsd-dir-text, #fff);
	text-decoration: none;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.4;
}

.vmsd-dir:hover,
.vmsd-dir:focus {
	color: var(--vmsd-dir-text, #fff);
	filter: brightness(0.94);
}

.vmsd-dir svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	fill: currentColor;
}

.vmsd-map__actions {
	margin-top: 8px;
}

/* Leaflet styles popup links with `.leaflet-container a` (higher specificity
   than our single class), which greyed out the button label until hover. */
.leaflet-container a.vmsd-dir,
.leaflet-popup-content a.vmsd-dir {
	color: var(--vmsd-dir-text, #fff);
	background: var(--vmsd-dir-bg, #1a73e8);
	text-decoration: none;
}

.leaflet-container a.vmsd-dir:hover,
.leaflet-container a.vmsd-dir:focus,
.leaflet-popup-content a.vmsd-dir:hover,
.leaflet-popup-content a.vmsd-dir:focus {
	color: var(--vmsd-dir-text, #fff);
	text-decoration: none;
}

.leaflet-popup-content .vmsd-map__actions {
	margin-top: 10px;
}