/*
 * Elementor Tabs widget: the duplicate-title fix, plus the "stepper" look.
 *
 * Added 2026-09-20. Replaces the per-widget custom CSS that used to live in
 * page 7926's Elementor data (the old numbered-pill look), so this is in git.
 *
 * ---------------------------------------------------------------------------
 * 1. THE DUPLICATE TITLES ARE AN ELEMENTOR BUG, NOT A SETTING
 *
 * The classic Tabs widget prints EVERY title twice: once as
 * .elementor-tab-desktop-title in the tab strip, once as
 * .elementor-tab-mobile-title inside the content wrapper for the accordion.
 * widget-tabs.min.css (4.2.4) hides the mobile copy above 768px:
 *
 *     @media (min-width:768px){ .elementor-tabs .elementor-tab-mobile-title{display:none} }
 *
 * but ships NO matching rule hiding the desktop copy below 768px. So on a
 * phone both sets render and every stage name appears twice. Reported by Kirk
 * 2026-09-20 on /how-it-works/. The fix below is deliberately NOT scoped to
 * .tm-steps: any Tabs widget added anywhere later would have the same bug.
 *
 * ---------------------------------------------------------------------------
 * 2. THE STEPPER (.tm-steps)
 *
 * Add the CSS class `tm-steps` to a Tabs widget and its tab strip becomes four
 * numbered circles joined by a rail, which suits an ordered process better than
 * pills. Numbers come from a CSS counter, so adding or removing a tab in
 * Elementor renumbers everything with no code change.
 *
 * Scoped by CLASS, not by page or element id, because element ids go stale -
 * see the footer accordion, whose hardcoded ids did exactly that.
 */


/* ---- 2. the stepper ---- */
.tm-steps .elementor-tabs-wrapper{
	position:relative;
	display:grid;
	grid-auto-flow:column;
	grid-auto-columns:1fr;
	gap:0;
	border:0;
	padding-top:6px;
	counter-reset:tmstep;
}

/* The rail. Inset so it starts and ends under the first and last circle. */
.tm-steps .elementor-tabs-wrapper::before{
	content:"";
	position:absolute;
	top:25px;
	left:12.5%;
	right:12.5%;
	height:3px;
	border-radius:3px;
	background:#E1E6F5;
}

.tm-steps .elementor-tab-desktop-title{
	counter-increment:tmstep;
	/* Elementor's horizontal view sets display:table-cell; this has to win. */
	display:flex !important;
	flex-direction:column;
	align-items:center;
	gap:10px;
	padding:0 6px;
	border:0 !important;
	background:none !important;
	font-size:14px;
	font-weight:600;
	line-height:1.35;
	color:#6B7090;
	text-align:center;
	transition:color .2s ease;
}

.tm-steps .elementor-tab-desktop-title::before{
	content:counter(tmstep,decimal-leading-zero);
	position:relative;
	z-index:1;
	display:flex;
	align-items:center;
	justify-content:center;
	width:38px;
	height:38px;
	border-radius:50%;
	/*
	 * !important because the widget's own "border width: 0" setting emits
	 * .elementor-7926 .elementor-element-7569e19 .elementor-tab-title::before
	 * { border-width:0 } - Elementor decorates these same pseudo elements - and
	 * that selector outranks this one. Without it the circles vanish and the
	 * numbers float on the rail.
	 */
	border:3px solid #E1E6F5 !important;
	background:#fff;
	color:#6B7090;
	font-size:14px;
	font-weight:700;
	line-height:1;
	transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
}

/*
 * Elementor draws its active-tab pointer with BOTH pseudo elements:
 *
 *   .elementor-widget-tabs .elementor-tab-desktop-title.elementor-active::after,
 *   .elementor-widget-tabs .elementor-tab-desktop-title.elementor-active::before
 *       { content:""; display:block; position:absolute; }
 *
 * That selector carries .elementor-active, so it outranks the plain ::before
 * rule above and blanked the number on whichever step was active - the circle
 * stretched to the full width of the strip. Restate the counter here, at equal
 * specificity, and kill the ::after outright.
 */
.tm-steps .elementor-tab-desktop-title::after,
.tm-steps .elementor-tab-desktop-title.elementor-active::after{
	content:none !important;
	display:none !important;
}

.tm-steps .elementor-tab-desktop-title.elementor-active::before{
	content:counter(tmstep,decimal-leading-zero) !important;
	position:relative !important;
	width:38px !important;
	height:38px !important;
	inset:auto !important;
	border-radius:50%;
	/*
	 * Elementor's active rule also says display:block. Without restating the
	 * flex centering here the number sat at the top of the circle instead of in
	 * the middle - only on whichever step was active. Reported by Kirk.
	 */
	display:flex !important;
	align-items:center !important;
	justify-content:center !important;
	line-height:1 !important;
}

.tm-steps .elementor-tab-desktop-title:hover{color:#283071;}
.tm-steps .elementor-tab-desktop-title:hover::before{border-color:#C9D3EF;}

.tm-steps .elementor-tab-desktop-title.elementor-active{color:#283071;}
.tm-steps .elementor-tab-desktop-title.elementor-active::before{
	background:#F57B20;
	border:3px solid #F57B20 !important;
	color:#fff;
	/*
	 * A SYMMETRIC HALO, NOT A DROP SHADOW (2026-09-20).
	 *
	 * This circle was measured centred twice - the painted text box sits dead
	 * on the circle centre, and the digits themselves are 0.5px high, which is
	 * invisible. It still read as "number not centred" to Kirk, twice.
	 *
	 * The cause was the old 0 6px 16px shadow: it hangs orange mass BELOW the
	 * disc, so the eye reads the disc as lower than it is and the digits as
	 * high. Only the active step had it, which is the one that was reported
	 * both times. A halo with no vertical offset removes the illusion.
	 *
	 * The 1px padding also pushes the digits down by half a pixel, cancelling
	 * the measured 0.5px. Confirmed by eye before shipping - do not "simplify"
	 * this back to a drop shadow.
	 */
	/* !important: the widget's own box-shadow setting zeroes this, same fight as the borders above. */
	box-shadow:0 0 0 5px rgba(245,123,32,.14) !important;
	padding-top:1px;
}

.tm-steps .elementor-tab-desktop-title:focus-visible::before{
	outline:3px solid rgba(245,123,32,.35);
	outline-offset:2px;
}

/* ---- the content panel ---- */
.tm-steps .elementor-tabs-content-wrapper{border:0;}

.tm-steps .elementor-tab-content{
	border:0;
	border-left:4px solid #F57B20;
	border-radius:0 12px 12px 0;
	background:#F3F4F7;
	padding:26px 30px;
	margin-top:22px;
}

/* ---- phones: the rail is replaced by an accordion ---- */
@media (max-width:767px){
	.tm-steps .elementor-tabs-wrapper{display:none;}

	.tm-steps .elementor-tabs-content-wrapper{counter-reset:tmacc;}

	.tm-steps .elementor-tab-mobile-title{
		counter-increment:tmacc;
		display:flex;
		align-items:center;
		gap:11px;
		margin-top:10px;
		padding:14px 15px;
		border:1px solid #E1E6F5 !important;  /* same border-width:0 fight as the circles */
		border-radius:10px;
		background:#fff;
		font-size:15px;
		font-weight:600;
		color:#283071;
		transition:background .18s ease,color .18s ease,border-color .18s ease;
	}

	.tm-steps .elementor-tab-mobile-title::before{
		content:counter(tmacc,decimal-leading-zero);
		display:flex;
		align-items:center;
		justify-content:center;
		flex:0 0 auto;
		width:24px;
		height:24px;
		border-radius:50%;
		background:#F3F4F7;
		color:#6B7090;
		font-size:12px;
		font-weight:700;
		line-height:1;
	}

	/* Chevron, drawn rather than typed so no font can mangle it. */
	.tm-steps .elementor-tab-mobile-title::after{
		content:"";
		width:8px;
		height:8px;
		margin-left:auto;
		margin-top:-4px;
		border-right:2px solid currentColor;
		border-bottom:2px solid currentColor;
		transform:rotate(45deg);
		transition:transform .2s ease;
	}

	.tm-steps .elementor-tab-mobile-title.elementor-active{
		background:#283071;
		border-color:#283071 !important;
		/*
		 * !important: the widget's Active Color setting is navy (it colours the
		 * rail labels on desktop) and its page-level selector outranks this one,
		 * which put navy text on the navy open row - the label vanished.
		 */
		color:#fff !important;
		border-radius:10px 10px 0 0;
	}
	.tm-steps .elementor-tab-mobile-title.elementor-active::before{
		background:#F57B20;
		color:#fff;
	}
	.tm-steps .elementor-tab-mobile-title.elementor-active::after{
		margin-top:4px;
		transform:rotate(-135deg);
	}

	.tm-steps .elementor-tab-content{
		margin-top:0;
		border-radius:0 0 10px 10px;
		border-left:4px solid #F57B20;
		padding:16px 16px 18px;
	}
}

/*
 * ---- 1. THE DUPLICATE-TITLE FIX (kept LAST on purpose) ----
 *
 * .tm-steps .elementor-tab-desktop-title sets display:flex !important, and this
 * selector has the same specificity, so whichever comes last wins. It has to be
 * this one, or a .tm-steps widget would still print both sets of titles on a
 * phone. Do not move it back to the top of the file.
 */
@media (max-width:767px){
	.elementor-widget-tabs .elementor-tab-desktop-title{
		display:none !important;
	}
}