/* TDG Locations Map. Colours and fonts follow the site's Elementor variables, with fallbacks. */

.tdg-map {
	position: relative;
	width: 100%;
	height: 600px;
	background: var(--color-surface, #F5F3EE);
	font-family: var(--font-body, "Montserrat"), Arial, sans-serif;
}

@media (max-width: 1024px) {
	.tdg-map {
		height: 460px;
	}
}

@media (max-width: 767px) {
	.tdg-map {
		height: 400px;
	}
}

.tdg-map--compact {
	height: 520px;
}

@media (max-width: 1024px) {
	.tdg-map--compact {
		height: 400px;
	}
}

@media (max-width: 767px) {
	.tdg-map--compact {
		height: 340px;
	}
}

/* Pins: a 28px hit area around a 16px brand dot. MapLibre positions the button, so only the dot animates. */
.tdg-map__pin {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.tdg-map__dot {
	display: block;
	width: 16px;
	height: 16px;
	background: var(--color-accent, #00843D);
	border: 2px solid var(--color-bg, #FFFFFF);
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(30, 29, 26, 0.35);
	transition: transform 160ms ease, background-color 160ms ease;
}

.tdg-map__pin:hover .tdg-map__dot,
.tdg-map__pin:focus-visible .tdg-map__dot {
	background: var(--color-accent-hover, #006B32);
	transform: scale(1.35);
}

/* Forever Furniture, part of the Dufresne network: purple. The card label uses a darker purple for small-text contrast. */
.tdg-map__pin--forever .tdg-map__dot,
.tdg-map__legend .tdg-map__legend-dot--forever {
	background: #7B4FB0;
}

.tdg-map__pin--forever:hover .tdg-map__dot,
.tdg-map__pin--forever:focus-visible .tdg-map__dot {
	background: #633A96;
}

.tdg-map__card--forever .tdg-map__brand {
	color: #5E3591;
}

.tdg-map__card--forever .tdg-map__link {
	border-bottom-color: #7B4FB0;
}

/* dRSG member stores: the yellow from the dRSG logo. Yellow text is unreadable on white, so the card label uses a dark amber. */
.tdg-map__pin--drsg .tdg-map__dot,
.tdg-map__legend .tdg-map__legend-dot--drsg {
	background: #FBB040;
}

.tdg-map__pin--drsg:hover .tdg-map__dot,
.tdg-map__pin--drsg:focus-visible .tdg-map__dot {
	background: #E39A22;
}

.tdg-map__card--drsg .tdg-map__brand {
	color: #8A5A00;
}

.tdg-map__card--drsg .tdg-map__link {
	border-bottom-color: #FBB040;
}

/* TDG's own pins draw above the many dRSG member pins where they share a town. */
.tdg-map__pin {
	z-index: 1;
}

.tdg-map__pin--drsg {
	z-index: 0;
}

/* Ashley Canada: Ashley orange. The card label uses a darker orange so it stays readable on white. */
.tdg-map__pin--ashley .tdg-map__dot,
.tdg-map__legend .tdg-map__legend-dot--ashley {
	background: #F48120;
}

.tdg-map__pin--ashley:hover .tdg-map__dot,
.tdg-map__pin--ashley:focus-visible .tdg-map__dot {
	background: #D96A0E;
}

.tdg-map__card--ashley .tdg-map__brand {
	color: #B4560B;
}

.tdg-map__card--ashley .tdg-map__link {
	border-bottom-color: #F48120;
}

/* Distribution centres: blue. The card label uses a darker blue for small-text contrast. */
.tdg-map__pin--dc .tdg-map__dot,
.tdg-map__legend .tdg-map__legend-dot--dc {
	background: #2D6CA2;
}

.tdg-map__pin--dc:hover .tdg-map__dot,
.tdg-map__pin--dc:focus-visible .tdg-map__dot {
	background: #1F5585;
}

.tdg-map__card--dc .tdg-map__brand {
	color: #245A8A;
}

/* Dufresne stores: the darker green of the Dufresne house logo. */
.tdg-map__pin--dufresne .tdg-map__dot,
.tdg-map__legend .tdg-map__legend-dot--dufresne {
	background: var(--color-brand-dufresne, #00594F);
}

.tdg-map__pin--dufresne:hover .tdg-map__dot,
.tdg-map__pin--dufresne:focus-visible .tdg-map__dot {
	background: #00433B;
}

.tdg-map__card--dufresne .tdg-map__brand {
	color: var(--color-brand-dufresne, #00594F);
}

.tdg-map__card--dufresne .tdg-map__link {
	border-bottom-color: var(--color-brand-dufresne, #00594F);
}

/* Home office: a larger pin in TDG green that sits above nearby store pins. Its card keeps the default green label. */
.tdg-map__pin--office {
	z-index: 2;
}

.tdg-map__pin--office .tdg-map__dot {
	width: 18px;
	height: 18px;
}

.tdg-map__pin:focus-visible {
	outline: 2px solid var(--color-accent, #00843D);
	outline-offset: 2px;
}

/* Hover card, styled like the site's brand cards. It sits above every pin, including the raised home office pin. */
.tdg-map .tdg-map__popup {
	z-index: 10;
}

.tdg-map__popup .maplibregl-popup-content {
	padding: 16px 20px;
	background: var(--color-bg, #FFFFFF);
	border: 1px solid var(--color-line, #DCD5C8);
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(30, 29, 26, 0.12);
}

.tdg-map__popup .maplibregl-popup-tip {
	display: none;
}

.tdg-map__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 200px;
	font-family: var(--font-body, "Montserrat"), Arial, sans-serif;
}

.tdg-map__brand {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent, #00843D);
}

.tdg-map__brand::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	background: currentColor;
	border-radius: 50%;
}

.tdg-map__name {
	margin: 0;
	font-family: var(--font-display, "Florian Black"), Georgia, serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.1;
	text-transform: lowercase;
	color: var(--color-text, #1E1D1A);
}

.tdg-map__address {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-muted, #4D4943);
}

.tdg-map__phone {
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-muted, #4D4943);
}

.tdg-map__link {
	align-self: flex-start;
	margin-top: 4px;
	padding-bottom: 2px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-text, #1E1D1A);
	border-bottom: 2px solid var(--color-accent, #00843D);
}

.tdg-map__phone:hover,
.tdg-map__link:hover {
	color: var(--color-accent-hover, #006B32);
}

/* Key: a small card in the map's corner listing the pin colours on show. */
.tdg-map__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 4px;
	margin: 0;
	padding: 6px 8px;
	list-style: none;
	background: var(--color-bg, #FFFFFF);
	border: 1px solid var(--color-line, #DCD5C8);
	border-radius: 12px;
	font-family: var(--font-body, "Montserrat"), Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text, #1E1D1A);
}

.tdg-map__legend-item {
	display: flex;
	margin: 0;
}

/* Key entries are filter toggles. The theme styles every button, so each property is set here. */
.tdg-map__legend-button,
.tdg-map__legend-reset {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 4px 8px;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	line-height: inherit;
	color: inherit;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 160ms, border-color 160ms, opacity 160ms;
}

.tdg-map__legend-button:hover,
.tdg-map__legend-reset:hover {
	color: inherit;
	background: var(--color-surface, #F5F3EE);
}

.tdg-map__legend-button[aria-pressed="true"] {
	background: var(--color-surface, #F5F3EE);
	border-color: var(--color-text, #1E1D1A);
}

/* While a filter is on, the types not shown fade back. */
.is-filtered .tdg-map__legend-button[aria-pressed="false"] {
	opacity: 0.45;
}

.is-filtered .tdg-map__legend-button[aria-pressed="false"]:hover {
	opacity: 1;
}

.tdg-map__legend-reset {
	color: var(--color-accent, #00843D);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tdg-map__legend-reset[hidden] {
	display: none;
}

.tdg-map__legend-button:focus-visible,
.tdg-map__legend-reset:focus-visible {
	outline: 2px solid var(--color-accent, #00843D);
	outline-offset: 1px;
}

.tdg-map__legend-dot {
	flex: none;
	width: 10px;
	height: 10px;
	background: var(--color-accent, #00843D);
	border-radius: 50%;
}

/* Keep the key clear of the zoom buttons on narrow maps. */
.tdg-map .maplibregl-ctrl-top-left {
	max-width: calc(100% - 56px);
}

@media (max-width: 767px) {
	.tdg-map__legend {
		gap: 0 2px;
		padding: 4px 6px;
		font-size: 10px;
	}

	.tdg-map__legend-button,
	.tdg-map__legend-reset {
		gap: 6px;
		padding: 4px 6px;
	}

	.tdg-map__legend-dot {
		width: 8px;
		height: 8px;
	}
}

/* Map controls, softened to match. */
.tdg-map .maplibregl-ctrl-group {
	border: 1px solid var(--color-line, #DCD5C8);
	border-radius: 12px;
	box-shadow: none;
	overflow: hidden;
}

.tdg-map .maplibregl-ctrl-attrib {
	font-size: 11px;
}

.tdg-map .maplibregl-cooperative-gesture-screen {
	font-family: var(--font-body, "Montserrat"), Arial, sans-serif;
	font-size: 16px;
	background: rgba(30, 29, 26, 0.55);
}

/* No-JavaScript fallback: a plain list of locations. */
.tdg-map__fallback {
	margin: 0;
	padding: 24px 24px 24px 44px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-muted, #4D4943);
}