/* Nash Training Map — front end */

/* Layout: map plus optional legend rail. */

.ntm-wrap {
	display: flex;
	gap: 18px;
	align-items: stretch;
}

.ntm-wrap--legend-right {
	flex-direction: row;
}

.ntm-wrap--legend-below,
.ntm-wrap--legend-off {
	flex-direction: column;
}

.ntm-wrap .ntm-map {
	flex: 1 1 auto;
	min-width: 0; /* Lets the map shrink inside a flex row. */
}

.ntm-legend {
	flex: 0 0 210px;
	align-self: flex-start;
	padding: 14px 16px;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	background: #fff;
	font-size: 14px;
	line-height: 1.35;
}

.ntm-wrap--legend-below .ntm-legend {
	flex: 1 1 auto;
	align-self: stretch;
}

/* Stack the rail under the map on narrow viewports. */
@media ( max-width: 782px ) {
	.ntm-wrap--legend-right {
		flex-direction: column;
	}

	.ntm-wrap--legend-right .ntm-legend {
		flex: 1 1 auto;
	}
}

.ntm-legend__title {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #5f6368;
}

.ntm-legend__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ntm-legend__item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 9px;
}

/*
 * Toggle rows.
 *
 * Themes style interactive elements aggressively — backgrounds, hover pills,
 * inherited white text — so these rules reset hard and set colour explicitly
 * rather than inheriting it. No hover treatment beyond the cursor: the row is
 * a control, but it should read as legend text.
 */
.ntm-legend .ntm-legend__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	background-color: transparent;
	color: #202124;
	font: inherit;
	font-size: 14px;
	line-height: 1.35;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-align: left;
	cursor: pointer;
	transition: none;
}

.ntm-legend .ntm-legend__toggle:hover,
.ntm-legend .ntm-legend__toggle:focus,
.ntm-legend .ntm-legend__toggle:active {
	background: none;
	background-color: transparent;
	color: #202124;
	box-shadow: none;
	text-decoration: none;
	transform: none;
	opacity: 1;
}

.ntm-legend .ntm-legend__toggle:focus-visible {
	outline: 2px solid #202124;
	outline-offset: 2px;
}

.ntm-legend .ntm-legend__label {
	color: inherit;
}

/* Drawn checkbox */

.ntm-legend__box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	line-height: 0;
}

.ntm-legend__box-frame {
	fill: currentColor;
	stroke: currentColor;
	stroke-width: 1.5;
}

.ntm-legend__box-tick {
	stroke: #fff;
}

/* Unchecked: hollow box, no tick. */
.ntm-legend__item--off .ntm-legend__box-frame {
	fill: none;
	stroke: #9aa0a6;
}

.ntm-legend__item--off .ntm-legend__box-tick {
	stroke: none;
}

/* Show all */

.ntm-legend .ntm-legend__reset {
	display: inline-block;
	margin-top: 12px;
	padding: 0;
	border: 0;
	background: none;
	color: #1a73e8;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.ntm-legend .ntm-legend__reset:hover,
.ntm-legend .ntm-legend__reset:focus {
	background: none;
	color: #1a73e8;
	text-decoration: underline;
}

.ntm-legend .ntm-legend__reset:focus-visible {
	outline: 2px solid #1a73e8;
	outline-offset: 2px;
}

.ntm-legend .ntm-legend__reset[hidden] {
	display: none;
}

/* Switched-off rows: grey label, faded icon, still perfectly readable. */
.ntm-legend__item--off .ntm-legend__toggle,
.ntm-legend__item--off .ntm-legend__toggle:hover {
	color: #9aa0a6;
}

.ntm-legend__item--off .ntm-legend__swatch {
	opacity: 0.35;
	filter: grayscale( 1 );
}

.ntm-legend__item--note {
	display: block;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid #eee;
	color: #5f6368;
	font-size: 13px;
	font-style: italic;
}

.ntm-legend__swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
}

.ntm-legend__swatch img,
.ntm-legend__swatch svg {
	max-width: 26px;
	max-height: 26px;
	height: auto;
}

/* Map surface */

.ntm-map {
	width: 100%;
	min-height: 320px;
	background: #e9e9e9;
	border-radius: 4px;
	z-index: 1; /* Keeps Leaflet panes below most theme headers. */
}

/* Markers */

.ntm-marker,
.leaflet-marker-icon.ntm-marker {
	background: transparent;
	border: 0;
}

/* Custom image markers: no crop, no circle mask — a cutout should keep its
   own silhouette. Sizing is driven from JS so it can track the zoom level. */
.ntm-marker--image {
	object-fit: contain;
	filter: drop-shadow( 0 2px 4px rgba( 0, 0, 0, 0.3 ) );
	/* No size transition here: Leaflet applies the new anchor offset instantly
	   while a CSS transition would animate the dimensions, so the two disagree
	   mid-zoom and the marker appears to slide off its location. */
}

.ntm-marker--active.ntm-marker--vector svg {
	animation: ntm-pulse 2.4s ease-in-out infinite;
	transform-origin: 50% 80%;
}

@keyframes ntm-pulse {
	0%,
	100% {
		transform: scale( 1 );
	}
	50% {
		transform: scale( 1.12 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ntm-marker--active.ntm-marker--vector svg {
		animation: none;
	}
}

/* Route direction chevrons */

.ntm-arrow,
.leaflet-marker-icon.ntm-arrow {
	background: transparent;
	border: 0;
}

.ntm-arrow__inner {
	width: 16px;
	height: 16px;
	line-height: 0;
}

/* Popups */

.ntm-popup {
	min-width: 170px;
	font-size: 14px;
	line-height: 1.4;
}

.ntm-popup__badge {
	display: inline-block;
	margin-bottom: 6px;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: #e8eaed;
	color: #5f6368;
}

.ntm-popup--active .ntm-popup__badge {
	background: var( --ntm-badge, #ec1c40 );
	color: #fff;
}

.ntm-popup__title {
	margin: 0 0 2px;
	font-size: 15px;
	font-weight: 700;
}

.ntm-popup__dates {
	margin: 0 0 4px;
	color: #3c4043;
}

.ntm-popup__type {
	margin: 0 0 4px;
	color: #5f6368;
	font-size: 13px;
}

.ntm-popup__link {
	font-weight: 600;
}

/* Leaflet resets some themes fight with. */

.ntm-map .leaflet-popup-content {
	margin: 12px 14px;
}

.ntm-map img.leaflet-tile {
	max-width: none;
}