/*
 * Course map on the race pages (includes/nhm-course-map.php).
 * Uses the redesign's --nhm-* tokens when present; the fallbacks are the live
 * site's colours, so it reads the same on the current design.
 * Visual language matches the spectator guide (assets/css/nhm-spectators.css).
 */

.nhm-cm {
	--cm-ink: var(--nhm-ink, #222);
	--cm-dark: var(--nhm-navy, #394a53);
	--cm-accent: var(--nhm-gold, #ffc120);
	--cm-accent-ink: var(--nhm-gold-ink, #8a5b0c);
	--cm-soft: var(--nhm-cream, #f7f7f4);
	--cm-line: var(--nhm-line, #e2e2dc);
	--cm-muted: var(--nhm-steel-ink, #5b6870);
	--cm-r: var(--nhm-r-lg, 10px);
	margin: 8px 0 26px;
	color: var(--cm-ink);
}

/* Spacing guard. Mai gives every content paragraph 24px below
   (.entry-content p, 0,1,1) and the redesign adds more selectors on top; that
   rhythm would fall inside this block. Two classes clears them, and the rules
   below that want spacing carry at least the same weight and come later, so
   they keep it. */
.nhm-cm.nhm-cm > * { margin: 0; }

/* Wraps the map so the Fit-course pill has something of its own to sit on.
   It is not .nhm-cm: absolute with no offsets stays at the element's static
   position, which is *below* the map, on top of the facts row (screenshot,
   2026-11-05). Offsets from this box put it on the map, where it belongs. */
.nhm-cm__stage {
	position: relative;
}

.nhm-cm__map {
	position: relative;
	height: min(78vw, 480px);
	min-height: 320px;
	border: 1px solid var(--cm-line);
	border-radius: var(--cm-r);
	z-index: 0; /* keep Leaflet's panes under the sticky header */
	background: #dfe8ea;
}

.nhm-cm [hidden] { display: none !important; }

/* Fit-course pill, on the map's top-right: Leaflet's own zoom control owns the
   top-left, the attribution the bottom-right.

   The extra class in the selector is weight, not style: the redesign styles
   every button on the page (min-height 48px, .8em 1.65em, navy, !important),
   which turned this control into a 143x49 slab. It is excluded there by name —
   see the :not(.nhm-cm__fit) in assets/css/nhm-redesign.css — and the doubled
   class here keeps Mai's own `button { padding: 14px 20px }` off it too, so no
   !important is needed on this side. If the pill ever grows back, look there. */
.nhm-cm .nhm-cm__stage .nhm-cm__fit.nhm-cm__fit {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 500;
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 8px 14px;
	border: 1px solid var(--cm-line);
	border-radius: 999px;
	background: #fff;
	color: var(--cm-dark);
	font: 700 .82em/1 var(--nhm-text, system-ui, sans-serif);
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	touch-action: manipulation;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

.nhm-cm .nhm-cm__stage .nhm-cm__fit.nhm-cm__fit:hover { background: var(--cm-soft); }

.nhm-cm .nhm-cm__stage .nhm-cm__fit.nhm-cm__fit:focus-visible { outline: 3px solid var(--cm-accent); outline-offset: 2px; }
.nhm-cm__map[hidden] + .nhm-cm__fit { display: none; }

/* ---------- facts + actions + note ---------- */

.nhm-cm.nhm-cm .nhm-cm__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	margin: 12px 0 0;
}

.nhm-cm .nhm-cm__fact {
	margin: 0;
	font-size: .95em;
	color: var(--cm-muted);
}

.nhm-cm .nhm-cm__fact-k {
	display: inline-block;
	margin-right: 6px;
	font-size: .78em;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cm-muted);
}

.nhm-cm.nhm-cm .nhm-cm__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 12px 0 0;
}

.nhm-cm .nhm-cm__btn {
	display: inline-block;
	padding: 9px 16px;
	border: 2px solid var(--cm-dark);
	border-radius: 999px;
	background: var(--cm-dark);
	color: #fff;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .15s, color .15s, border-color .15s;
}

.nhm-cm .nhm-cm__btn:hover {
	background: var(--cm-soft);
	border-color: var(--cm-dark);
	color: var(--cm-dark);
}

.nhm-cm .nhm-cm__btn--ghost {
	background: transparent;
	color: var(--cm-dark);
}

.nhm-cm .nhm-cm__btn--ghost:hover {
	background: var(--cm-dark);
	color: #fff;
}

.nhm-cm .nhm-cm__btn:focus-visible {
	outline: 3px solid var(--cm-accent);
	outline-offset: 2px;
}

.nhm-cm.nhm-cm .nhm-cm__note {
	margin: 10px 0 0;
	max-width: 68ch;
	font-size: .88em;
	color: var(--cm-muted);
}

.nhm-cm .nhm-cm__note a { color: inherit; text-decoration: underline; }

.nhm-cm.nhm-cm noscript p {
	margin: 0 0 8px;
	font-size: .9em;
	color: var(--cm-muted);
}

/* ---------- map contents ---------- */

.nhm-cm .leaflet-container { font: inherit; font-size: 14px; }
.nhm-cm .leaflet-container a.leaflet-popup-close-button { box-shadow: none; }

.nhm-cm .nhm-cm-course { stroke: var(--cm-dark); }

.nhm-cm-mile {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	border: 1.5px solid var(--cm-dark);
	border-radius: 50%;
	background: #fff;
	color: var(--cm-dark);
	font: 700 10px/1 var(--nhm-text, system-ui, sans-serif);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

/* Crowded: a marker whose digit has no room loses the digit and keeps the ring,
   so the mile ticks still show where the miles are. Set by nhm-course-map.js per
   marker, on load and on every zoom. Leaflet writes the icon's width/height
   inline, so shrinking the ring here would fight that; fading it does not, and a
   marathon's 26 quiet ticks then read as a chain of marks over the course instead
   of 26 holes punched in the map. */
.nhm-cm-mile.nhm-cm-mile--quiet span { display: none; }
.nhm-cm-mile.nhm-cm-mile--quiet {
	opacity: .62;
	border-width: 1.5px;
	background: rgba(255, 255, 255, .72);
}

.leaflet-marker-icon.nhm-cm-flag {
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	font: 700 11px/1 var(--nhm-text, system-ui, sans-serif);
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--cm-ink);
	text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}

.leaflet-marker-icon.nhm-cm-flag.nhm-cm-flag--turn { color: var(--cm-accent-ink); }

.leaflet-marker-icon.nhm-cm-flag:hover { color: var(--cm-dark); }

.nhm-cm-flag::before {
	content: "";
	position: absolute;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	box-sizing: border-box;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--cm-accent);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

/* A dot on the point, the label hung to its left (start) or right (finish). */
.nhm-cm-flag--start { padding-right: 10px; translate: -100% -50%; }
.nhm-cm-flag--start::before { right: -6px; }
.nhm-cm-flag--finish { padding-left: 10px; translate: 0 -50%; }
.nhm-cm-flag--finish::before { left: -6px; background: var(--cm-ink); }
.nhm-cm-flag--turn { padding-left: 10px; translate: 0 -50%; }
.nhm-cm-flag--turn::before { left: -6px; border-radius: 2px; }

.nhm-cm__pop strong { display: block; margin-bottom: 4px; font-size: 1.05em; }
.nhm-cm__pop p { margin: 0 0 6px !important; }
.nhm-cm__pop a { font-weight: 700; }