/* ==================================================================
   Niagara Transit: numbered steps, "numbered rail"         v1.0.0
   Owner pick 2026-11-07 (option A). Restyles Salient's numbered icon
   list (.nectar-icon-list, data-icon_type="numerical") used on the
   Safety, Rider Guide, Accessibility, Brock, Customer Service,
   Microtransit, Niagara Transit Plus and Transit Connections pages:
   solid square number badges (the route-badge shape) joined by a rail.
   Light: #07495F badge, white number. Dark: #8FD0DE badge, ink number
   (the --ntc-btn-* tokens, so it follows the site's button colours).
   Builds on style.css "Icon list: no line under the last item" (one line
   per item, badge to next badge; the solid next badge covers its end).
   Mockup: Web Page Drafts/dark-mode/numbered-steps-options.html
   ================================================================== */

/* Scope: numbered lists only (other icon lists keep Salient's look). */
.nectar-icon-list:has(.list-icon-holder[data-icon_type="numerical"]) {
	--nt-steps-badge: 48px;
	--nt-steps-gap: 40px;     /* space between steps */
	--nt-steps-indent: 70px;  /* badge + 22px */
	--nt-steps-rail: #C9D1D4;
}
html[data-nt-theme="dark"] .nectar-icon-list:has(.list-icon-holder[data-icon_type="numerical"]) {
	--nt-steps-rail: #3A474D;
}

.nectar-icon-list:has(.list-icon-holder[data-icon_type="numerical"]) .nectar-icon-list-item {
	padding-left: var(--nt-steps-indent) !important;
	margin-bottom: var(--nt-steps-gap) !important;
	min-height: var(--nt-steps-badge);
}
.nectar-icon-list:has(.list-icon-holder[data-icon_type="numerical"]) .nectar-icon-list-item:last-child { margin-bottom: 0 !important; }

/* The badge. Salient puts background-color: #fff inline on the holder. */
.nectar-icon-list:has(.list-icon-holder[data-icon_type="numerical"]) .list-icon-holder[data-icon_type="numerical"] {
	width: var(--nt-steps-badge) !important;
	height: var(--nt-steps-badge) !important;
	border: 0 !important;
	border-radius: 6px !important;
	background-color: var(--ntc-btn-bg, #07495F) !important;
	color: var(--ntc-btn-text, #ffffff) !important;
	box-shadow: none !important;
}
.nectar-icon-list:has(.list-icon-holder[data-icon_type="numerical"]) .list-icon-holder[data-icon_type="numerical"] span {
	display: block !important;
	width: var(--nt-steps-badge) !important;
	height: var(--nt-steps-badge) !important;
	margin: 0 !important;
	line-height: var(--nt-steps-badge) !important;
	text-align: center !important;
	font-size: 22px !important;
	font-weight: 800 !important;
	font-variant-numeric: tabular-nums;
	color: var(--ntc-btn-text, #ffffff) !important;
}

/* The rail: from this badge's centre to the next badge (covered by it). */
.nectar-icon-list:has(.list-icon-holder[data-icon_type="numerical"]) .nectar-icon-list-item:not(:last-child)::after {
	width: 2px !important;
	left: calc(var(--nt-steps-badge) / 2 - 1px) !important;
	top: calc(var(--nt-steps-badge) / 2) !important;
	height: calc(100% + var(--nt-steps-gap)) !important;
	background-color: var(--nt-steps-rail) !important;
	border-radius: 2px;
}

/* Heading sits on the badge's centre line; bullets in the heading colour. */
.nectar-icon-list:has(.list-icon-holder[data-icon_type="numerical"]) .content > h3:first-child {
	margin: 0 !important;
	padding-top: calc((var(--nt-steps-badge) - 1.2em) / 2);
	line-height: 1.2 !important;
}
.nectar-icon-list:has(.list-icon-holder[data-icon_type="numerical"]) .content li::marker { color: var(--ntc-heading, #07495F); }

/* Phones: smaller badge and indent (replaces style.css MOB-14 sizes). */
@media only screen and (max-width: 690px) {
	.nectar-icon-list:has(.list-icon-holder[data-icon_type="numerical"]) {
		--nt-steps-badge: 40px;
		--nt-steps-gap: 32px;
		--nt-steps-indent: 54px;
	}
	.nectar-icon-list:has(.list-icon-holder[data-icon_type="numerical"]) .list-icon-holder[data-icon_type="numerical"] span { font-size: 19px !important; }
}