/* ============================================================
   3DFurler Dealer Map. Everything is scoped under .fdm and built on the
   theme.json tokens (with the same values as fallbacks, so it still reads
   right if the theme is ever switched off).
   ============================================================ */

.fdm {
	--fdm-hull: var(--wp--preset--color--hull, #0a1a26);
	--fdm-deep: var(--wp--preset--color--deep, #123449);
	--fdm-polymer: var(--wp--preset--color--polymer, #23282b);
	--fdm-steel: var(--wp--preset--color--steel, #7d8f9c);
	--fdm-steel-dim: var(--wp--preset--color--steel-dim, #b9c4cb);
	--fdm-gelcoat: var(--wp--preset--color--gelcoat, #f1f3f2);
	--fdm-paper: var(--wp--preset--color--paper, #ffffff);
	--fdm-signal: var(--wp--preset--color--signal, #ff5a1f);
	--fdm-signal-dark: var(--wp--preset--color--signal-dark, #d9430d);
	--fdm-rule: rgba(10, 26, 38, 0.14);
	--fdm-mono: var(--wp--preset--font-family--mono, 'IBM Plex Mono', ui-monospace, monospace);
	--fdm-display: var(--wp--preset--font-family--display, Archivo, system-ui, sans-serif);
	--fdm-body: var(--wp--preset--font-family--body, 'IBM Plex Sans', system-ui, sans-serif);

	font-family: var(--fdm-body);
	color: var(--fdm-hull);
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--40, 2.5rem);
}

/* Wide, even inside the normal page template, whose text column is 760px:
   centre on the column and widen to the theme's wide size (1240px), never
   wider than the window minus the theme's side gutter. */
.wp-site-blocks .fdm.alignwide,
.fdm.alignwide {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: min(var(--wp--style--global--wide-size, 1240px), calc(100vw - 2 * clamp(1.25rem, 4vw, 3.5rem)));
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.fdm *,
.fdm *::before,
.fdm *::after { box-sizing: border-box; }
.fdm [hidden] { display: none !important; }

.fdm-heading { margin: 0 0 0.5rem; }
.fdm-intro { margin: 0 0 1.5rem; color: var(--fdm-polymer); }

.fdm-admin-note {
	margin: 0 0 1rem;
	padding: 0.6rem 0.9rem;
	background: #fff8e5;
	border-left: 4px solid #dba617;
	font-size: 0.85rem;
}

/* ---------- the drawing panel ---------- */

.fdm-panel {
	border: 1px solid var(--fdm-rule);
	background: var(--fdm-gelcoat);
	border-radius: 2px;
}

.fdm-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem 1.25rem;
	padding: 0.7rem 1rem;
	background: var(--fdm-paper);
	border-bottom: 1px solid var(--fdm-rule);
}

.fdm-tally {
	margin: 0;
	font-family: var(--fdm-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fdm-steel);
}
.fdm-tally span {
	color: var(--fdm-hull);
	font-weight: 500;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
}
.fdm-tally i {
	font-style: normal;
	color: var(--fdm-signal);
	margin: 0 0.35rem;
}

.fdm-filter {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.fdm-filter label {
	font-family: var(--fdm-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fdm-steel);
}
.fdm-select {
	font-family: var(--fdm-mono);
	font-size: 0.9rem;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--fdm-rule);
	border-radius: 2px;
	background: var(--fdm-paper);
	color: var(--fdm-hull);
	min-width: 12rem;
	max-width: 100%;
}
.fdm-select:focus,
.fdm-reset:focus-visible {
	outline: 2px solid var(--fdm-signal);
	outline-offset: 1px;
}
.fdm-reset {
	font-family: var(--fdm-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: none;
	border: 0;
	padding: 0.4rem 0.2rem;
	color: var(--fdm-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.fdm-reset:hover { color: var(--fdm-signal); }

/* Map area: a faint drawing-sheet grid behind the states. */
.fdm-map {
	position: relative;
	aspect-ratio: 1036 / 612;
	margin: clamp(0.75rem, 2.5vw, 1.75rem);
	background-image:
		linear-gradient(to right, rgba(10, 26, 38, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(10, 26, 38, 0.05) 1px, transparent 1px);
	background-size: 40px 40px;
}
.fdm-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	-webkit-tap-highlight-color: transparent;
}

.fdm-st {
	fill: var(--fdm-steel-dim);
	fill-opacity: 0.6;
	stroke: var(--fdm-paper);
	stroke-width: 0.8;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	cursor: pointer;
	transition: fill 0.15s ease, fill-opacity 0.15s ease;
}
.fdm-st:hover { fill-opacity: 1; }
.fdm-st.is-dealer { fill: var(--fdm-deep); fill-opacity: 1; }
.fdm-st.is-dealer:hover { fill: var(--fdm-hull); }
.fdm-st.is-selected {
	fill: var(--fdm-steel);
	fill-opacity: 1;
	stroke: var(--fdm-signal);
	stroke-width: 1.5;
}
.fdm-st.is-dealer.is-selected { fill: var(--fdm-hull); }

.fdm-inset {
	fill: none;
	stroke: var(--fdm-steel);
	stroke-width: 1;
	stroke-dasharray: 5 4;
	vector-effect: non-scaling-stroke;
}
.fdm-label {
	position: absolute;
	font-family: var(--fdm-mono);
	font-size: 0.62rem;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fdm-steel);
	pointer-events: none;
}

.fdm-pin { cursor: pointer; }
.fdm-pin__dot {
	fill: var(--fdm-signal);
	stroke: var(--fdm-paper);
	stroke-width: 1.75;
	vector-effect: non-scaling-stroke;
	transition: fill 0.15s ease;
}
.fdm-pin:hover .fdm-pin__dot,
.fdm-pin.is-on .fdm-pin__dot { fill: var(--fdm-signal-dark); }
.fdm-pin.is-on .fdm-pin__dot { stroke-width: 2.5; }
.fdm-pin.is-dim .fdm-pin__dot { fill: var(--fdm-steel-dim); }
.fdm-pin.is-dim .fdm-pin__n { fill: var(--fdm-hull); }
.fdm-pin__n {
	fill: #fff;
	font-family: var(--fdm-mono);
	font-weight: 500;
	text-anchor: middle;
	pointer-events: none;
}
.fdm-pin__hit { fill: transparent; }

.fdm-tip {
	position: absolute;
	z-index: 3;
	transform: translate(-50%, calc(-100% - 14px));
	max-width: 22rem;
	padding: 0.4rem 0.6rem;
	background: var(--fdm-hull);
	color: var(--fdm-gelcoat);
	font-family: var(--fdm-mono);
	font-size: 0.72rem;
	line-height: 1.35;
	border-radius: 2px;
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fdm-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.5rem;
	margin: 0;
	padding: 0.6rem 1rem;
	border-top: 1px solid var(--fdm-rule);
	font-family: var(--fdm-mono);
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fdm-steel);
}
.fdm-key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	margin-left: 0.75rem;
}
.fdm-key:first-child { margin-left: 0; }
.fdm-key--pin {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--fdm-signal);
	box-shadow: 0 0 0 1.5px var(--fdm-paper);
}
.fdm-key--state {
	width: 14px;
	height: 10px;
	background: var(--fdm-deep);
}
.fdm-key--many {
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--fdm-signal);
	color: #fff;
	font-size: 0.6rem;
	letter-spacing: 0;
	box-shadow: 0 0 0 1.5px var(--fdm-paper);
}

/* Without JavaScript (or if states.json can't load), the list is the page. */
.fdm:not(.fdm--js) .fdm-filter,
.fdm:not(.fdm--js) .fdm-map,
.fdm:not(.fdm--js) .fdm-legend,
.fdm--nomap .fdm-map,
.fdm--nomap .fdm-legend { display: none; }

/* ---------- the list ---------- */

.fdm-status {
	margin: 1.5rem 0 0.75rem;
	font-size: 0.95rem;
	color: var(--fdm-polymer);
}
.fdm-status:empty { display: none; }

.fdm-empty {
	margin: 1.25rem 0;
	padding: 1rem 1.25rem;
	background: var(--fdm-gelcoat);
	border-left: 3px solid var(--fdm-signal);
}

.fdm .fdm-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fdm .fdm-card {
	display: flex;
	flex-direction: column;
	margin: 0 -1px -1px 0;
	padding: 1.25rem 1.25rem 1.1rem;
	background: var(--fdm-paper);
	border: 1px solid var(--fdm-rule);
	list-style: none;
}
.fdm .fdm-card::before,
.fdm .fdm-card::marker { content: none; }
.fdm-card.is-on { box-shadow: inset 3px 0 0 var(--fdm-signal); }

.fdm-card p { margin: 0; }
.fdm-card__where {
	font-family: var(--fdm-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fdm-steel);
	margin-bottom: 0.45rem !important;
}
.fdm .fdm-card__name {
	margin: 0 0 0.55rem;
	font-family: var(--fdm-display);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--fdm-hull);
}
.fdm-card__addr {
	font-size: 0.92rem;
	line-height: 1.45;
	color: var(--fdm-polymer);
}
.fdm-card__note {
	margin-top: 0.5rem !important;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--fdm-steel);
}
.fdm-card__phone {
	margin-top: 0.55rem !important;
	font-family: var(--fdm-mono);
	font-size: 0.9rem;
}
.fdm-card__phone a {
	color: var(--fdm-deep);
	text-decoration: none;
}
.fdm-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1rem;
	margin-top: auto !important;
	padding-top: 0.85rem;
	font-size: 0.85rem;
}
.fdm-card__links a,
.fdm-empty a {
	color: var(--fdm-deep);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}
.fdm-card a:hover,
.fdm-empty a:hover { color: var(--fdm-signal); }

/* ---------- become a dealer ---------- */

.fdm-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	margin-top: 2rem;
	padding: 1.25rem 1.5rem;
	background: var(--fdm-hull);
	color: var(--fdm-gelcoat);
	border-radius: 2px;
}
.fdm-cta p {
	margin: 0;
	font-family: var(--fdm-display);
	font-size: 1.15rem;
	font-weight: 600;
}
.fdm .fdm-cta__btn,
.fdm .fdm-cta__btn:visited {
	color: #fff;
	text-decoration: none;
}

/* ---------- phones ---------- */

@media (max-width: 600px) {
	.fdm-bar { padding: 0.65rem 0.75rem; }
	.fdm-filter { width: 100%; }
	.fdm-select { flex: 1; min-width: 0; }
	.fdm-map { margin: 0.5rem 0.4rem; }
	.fdm-legend { padding: 0.55rem 0.75rem; }
	.fdm-tip { display: none; }
	.fdm-cta { padding: 1.1rem 1.15rem; }
}