/*
 * Find a rep — /find-a-rep/ (page-find-a-rep.php, template-parts/rep-card.php, assets/js/rep-locator.js)
 * Every value is copied from the prototype's inline styles, lines 427–519 (page) and 1857–1905
 * (map pins and popups); the .leaflet-* rules are the prototype's global map styles (lines 59–64),
 * scoped to this route because Leaflet only ever loads here.
 *
 * Shared classes used from base.css: .section .kicker .page-title .mono-11 .mono-12 .input .select
 * .chip .tag .card .sr-only. Everything else is prefixed .rep-.
 */

/* ---------------------------------------------------------------------------
 * ZIP / state controls (prototype 431–440)
 * ------------------------------------------------------------------------ */
.rep-controls { display: flex; gap: 10px; align-items: center; margin-bottom: 32px; flex-wrap: wrap; position: relative; }
/* Two real GET forms so the page answers without JavaScript; `display:contents` keeps the prototype's
   single flex row (the controls stay siblings of the "OR" label and the products key). */
.rep-controls__form { display: contents; }
.rep-controls__zip { width: 200px; padding: 13px 14px; }
.rep-controls__state { padding: 13px 14px; min-width: 220px; }
.rep-controls__or { flex: none; }

/* Submit buttons: only reachable by keyboard / without JavaScript (the page updates as you type).
   The prototype has no buttons in this row, so revealing one must not move anything: the focused
   button stays out of flow (like the skip link) and drops just under its own control instead of
   becoming a flex item — otherwise tabbing out of the ZIP box pushed the state list 121px sideways. */
.rep-controls__go { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; background: none; }
.rep-controls__go:focus {
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	top: 100%;
	left: 0;
	z-index: 3;
	padding: 11px 16px;
	border: 1.5px solid var(--navy);
	border-radius: 2px;
	background: var(--page);
	color: var(--navy);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: normal;
	cursor: pointer;
}

.rep-key { display: flex; gap: 6px 14px; margin-left: auto; font: 11px var(--font-mono); color: var(--text-2); flex-wrap: wrap; }
.rep-key__code { color: var(--ink); }

/* ---------------------------------------------------------------------------
 * Columns (prototype 441–443, 465)
 * ------------------------------------------------------------------------ */
.rep-cols { display: flex; flex-wrap: wrap; gap: 32px 40px; align-items: flex-start; }
.rep-map-col { flex: 999 1 440px; min-width: 0; }

/* ---------------------------------------------------------------------------
 * Map (prototype 444–459)
 * ------------------------------------------------------------------------ */
.rep-map-box { border: 1px solid var(--line); background: #e6e4de; height: clamp(380px, 60vw, 560px); position: relative; }
.rep-map { position: absolute; inset: 0; }

.rep-map-key {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 1000;
	background: rgba(247, 246, 242, .95);
	border: 1px solid var(--line);
	padding: 8px 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	max-width: calc(100% - 24px);
	font: 11px var(--font-mono);
	color: var(--text-2);
	border-radius: 2px;
	pointer-events: none;
	box-sizing: border-box;
}
.rep-map-key__item { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.rep-map-key__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }

.rep-map-reset {
	position: absolute;
	right: 12px;
	top: 12px;
	z-index: 1000;
	background: var(--navy);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 8px 12px;
	border-radius: 2px;
	cursor: pointer;
	border: 0;
	font-family: inherit;
	line-height: 1.5;
}
.rep-map-reset:hover, .rep-map-reset:focus { color: #fff; }

.rep-map-hint { margin: 12px 0 0; font: 11px var(--font-mono); color: var(--muted); }

.rep-intl { margin-top: 28px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rep-intl__label { margin-right: 6px; }
.rep-intl__chip { padding: 7px 14px; }
.rep-intl__chip:hover { color: var(--navy); }
.rep-intl__chip.is-on, .rep-intl__chip.is-on:hover { color: #fff; }

/* ---------------------------------------------------------------------------
 * Results column (prototype 466–470, 488–503)
 * ------------------------------------------------------------------------ */
.rep-results { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.rep-results[data-rep-nomap] { flex: 1 1 100%; }
.rep-results__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rep-results__name { margin: 0; font: 700 30px var(--font-display); text-transform: uppercase; }
.rep-results__count { font: 11px var(--font-mono); color: var(--muted); }
.rep-results__list { display: flex; flex-direction: column; gap: 12px; }
.rep-results__list.is-empty { display: none; }
.rep-results__note { margin: 0; font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------------------
 * Office card (prototype 471–487) — mirrored by rep-locator.js card()
 * ------------------------------------------------------------------------ */
.rep-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.rep-card__head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.rep-card__name { margin: 0; font: 600 20px/1.1 var(--font-display); text-transform: uppercase; }
.rep-card__tag { align-self: flex-start; }
.rep-card__addr, .rep-card__people { font-size: 13px; color: var(--text-2); }
.rep-card__links { display: flex; gap: 6px 16px; font-size: 13px; flex-wrap: wrap; }
.rep-card__phone { font-weight: 600; }
.rep-card__email, .rep-card__email:hover { color: var(--orange-text); overflow-wrap: anywhere; }
.rep-card__web, .rep-card__web:hover { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.rep-card__actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }

.rep-btn { padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 2px; font-family: inherit; line-height: 1.5; }
.rep-btn--call { background: var(--navy); color: #fff; border: 0; }
.rep-btn--call:hover { background: var(--orange-hover); color: #fff; }
.rep-btn--email, .rep-btn--web { border: 1.5px solid var(--navy); background: transparent; color: var(--ink); }
.rep-btn--email:hover, .rep-btn--web:hover { background: var(--navy); color: #fff; }
.rep-btn--dir { border: 1.5px solid var(--line); background: transparent; color: var(--text-2); }
.rep-btn--dir:hover { border-color: var(--navy); color: var(--ink); }

/* ---------------------------------------------------------------------------
 * "We don't recognize that ZIP" (prototype 489–500)
 * ------------------------------------------------------------------------ */
.rep-empty { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.rep-empty__title { font: 600 20px/1.1 var(--font-display); text-transform: uppercase; }
.rep-empty__body { font-size: 13px; color: var(--text-2); text-wrap: pretty; }
.rep-empty__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* ---------------------------------------------------------------------------
 * Leaflet (prototype global styles, lines 59–64) and the markers / popups built
 * by rep-locator.js (prototype initMap, lines 1866–1873)
 * ------------------------------------------------------------------------ */
.rep .leaflet-tile-pane { filter: grayscale(1) contrast(.92) brightness(1.04); }
.rep .leaflet-container { isolation: isolate; background: #e6e4de; font-family: var(--font-body); }
.rep .leaflet-popup-content-wrapper { border-radius: 2px; box-shadow: 0 4px 18px rgba(0, 0, 0, .18); }
.rep .leaflet-popup-content { margin: 12px 14px; font-size: 13px; line-height: 1.45; min-width: 220px; }
.rep .leaflet-control-zoom a { border-radius: 0 !important; color: var(--navy); }
.rep .leaflet-control-attribution { font: 10px var(--font-mono); background: rgba(247, 246, 242, .85); }

.rep-pin {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--pin, #2a3340);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
	box-sizing: border-box;
	transition: transform .15s, opacity .2s;
}
.rep-pin--hq { width: 18px; height: 18px; border-width: 3px; }

.rep-pop__head { font: 600 18px/1.1 var(--font-display); text-transform: uppercase; color: var(--ink); margin-bottom: 4px; display: flex; justify-content: space-between; gap: 10px; }
.rep-pop__tag { font: 600 10px var(--font-mono); background: var(--navy); color: #fff; padding: 2px 6px; border-radius: 2px; white-space: nowrap; align-self: flex-start; }
.rep-pop__addr { color: var(--text-2); margin-bottom: 6px; }
.rep-pop__row { display: flex; gap: 12px; flex-wrap: wrap; }
.rep-pop__email { color: var(--orange); }
.rep-pop__web { margin-top: 4px; }
.rep-pop__web a, .rep-pop__web a:hover { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--orange); }
.rep-pop__serves { margin-top: 8px; font: 11px var(--font-mono); color: var(--muted-2); letter-spacing: .06em; }

@media (prefers-reduced-motion: reduce) {
	.rep-pin { transition: none; }
}

/* ---------------------------------------------------------------------------
 * Mobile (designed from the desktop language — no phone reference)
 * ------------------------------------------------------------------------ */
@media (max-width: 899.98px) {
	/* Lookup leads: controls, then the international chips, then the offices, then the map. The map
	   column dissolves (display: contents) so its children can be ordered with the results. */
	.rep-cols { flex-direction: column; align-items: stretch; gap: 24px; }
	.rep-map-col { display: contents; }
	.rep-intl { order: 1; margin-top: 0; }
	.rep-results { order: 2; flex-basis: auto; }
	.rep-map-box { order: 3; height: clamp(280px, 80vw, 420px); }
	.rep-map-hint { order: 4; margin-top: -12px; font-size: 12px; }
	.rep-key { font-size: 12px; }
	.rep-results__count, .rep-results__note { font-size: 12px; }
	/* 44px targets: Leaflet's touch controls are 30px, the reset button 34px, office buttons 38px. */
	.rep .leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 22px; }
	.rep-map-reset { min-height: 44px; display: inline-flex; align-items: center; }
	.rep-btn { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 599.98px) {
	.rep-controls { gap: 10px; }
	.rep-controls__zip { width: 100%; }
	.rep-controls__or { flex-basis: 100%; }
	.rep-controls__state { width: 100%; min-width: 0; }
	.rep-key { margin-left: 0; }
}