/**
 * NovaBP Tax Advisor — How Our Tax Advisers Work
 *
 * Figma reference: node 2047:3061 — a 202deg navy-to-blue panel holding a 520px
 * intro column beside numbered method steps (2047:3073 / 3079 / 3085). The first
 * step carries a faint fill and full opacity; the rest sit at 40%.
 *
 * The step column sits behind a hairline rail (2056:4380) whose green segment
 * (2056:4378) marks the current step — see `__steps::before` below.
 */

/*
 * Figma's gradient handles run well past the frame, so only the first ~40% of
 * the ramp is ever visible — the panel stays deep navy and the bottom-left
 * corner only lifts to about #041E62, nowhere near the end colour. CSS
 * normalises the gradient line to the box, so the stops have to overshoot
 * (32% → 193%, sampled off the Figma render at 1440×996) to reproduce it.
 * Plain `10% → 100%` paints the full ramp and washes the panel out.
 * Same gradient as `.nova-home-process` and `.nova-home-advantage__panel`; the
 * angle differs because Figma's handles are frame-relative and each frame has
 * its own aspect. 202deg holds all four pages that use this section
 * (tax-advisor, tax-planning, bookkeeping, superannuation) within 4/255 even
 * though their heights run 845–1255px.
 */
.nova-tax-process {
	background-image: linear-gradient(
		var(--nova-tax-process-angle, 202deg),
		var(--nova-tax-process-from, #021137) 32%,
		var(--nova-tax-process-to, #06319d) 193%
	);
}

/*
 * The gap arrives as a custom property so the stacked value below can override
 * it. Elementor's per-page CSS outscores this stylesheet and its nearest
 * breakpoint is 1366, so a `gap` written from the widget would hold the
 * side-by-side spacing right through the 1280 block.
 */
.nova-tax-process__inner {
	display: flex;
	align-items: flex-start;
	gap: var(--nova-tax-process-column-gap, 60px);
}

/*
 * Fixed basis with no shrink, for the same reason as FAQ and Contact: the step
 * bodies are long enough that a shrinkable intro loses most of its width.
 */
/*
 * The intro (the `--on-dark` header stack) pins while the steps scroll past it.
 * `__inner` already sets `align-items: flex-start`, which sticky needs — a
 * stretched flex item is as tall as the row and has nowhere to travel. The
 * sticky sits here rather than on `.nova-tax-header--on-dark` for the same
 * reason: the header fills this column, so pinning it inside would be inert.
 *
 * Sticky dies silently if any ancestor has `overflow` other than `visible`. If
 * this column ever stops pinning, check the Elementor container's Overflow
 * setting before anything in here.
 */
.nova-tax-process__intro {
	position: sticky;
	inset-block-start: var(--nova-tax-process-top, 120px);
	flex: 0 0 520px;
	min-width: 0;
}

/* ---------------------------------------------------------------------------
 * Intro with a footnote — Bookkeeping's variant (Figma 2179:17169)
 *
 * There the intro column runs the full height of the row and pushes a
 * reassurance line to its foot. That is the one thing sticky cannot coexist
 * with: a stretched flex item is already as tall as the row and has nowhere to
 * travel. So the modifier trades the pin for the stretch, and the pages that
 * never set a footnote keep pinning exactly as before.
 * ------------------------------------------------------------------------ */

.nova-tax-process--footnote .nova-tax-process__inner {
	align-items: stretch;
}

.nova-tax-process--footnote .nova-tax-process__intro {
	position: static;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
}

/*
 * Figma insets the line 20px from the right so it wraps a little before the
 * copy above it does, which keeps the last line off the rail.
 */
.nova-tax-process__footnote {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding-inline-end: 20px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: rgb(255 255 255 / 0.99);
}

/*
 * The badge sits in a 24px-tall box so it centres against the first line of the
 * sentence rather than the whole paragraph — 16px text at 1.5 is a 24px line.
 */
.nova-tax-process__footnote-icon {
	align-self: flex-start;
	width: 16px;
	height: 24px;
	color: var(--nova-tax-green);
}

.nova-tax-process__footnote-icon svg {
	height: 16px;
}

.nova-tax-process__footnote-em {
	font-weight: 600;
	color: var(--nova-tax-green);
}

/*
 * Figma indents the step column inside the 60px gap by the width of the rail
 * plus its own 32px gutter. Padding rather than a wider gap, so the dividing
 * space belongs to the steps and the intro keeps its 520px.
 */
.nova-tax-process__steps {
	--nova-tax-process-rail-offset: calc(var(--nova-tax-process-rail-gap, 32px) + 1px);

	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	margin: 0;
	padding: 0 0 0 var(--nova-tax-process-rail-offset);
	list-style: none;
}

/*
 * The rail. A pseudo-element rather than markup, so `render()` and
 * `content_template()` stay identical — the whole thing is decoration.
 */
.nova-tax-process__steps::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 1px;
	background-color: var(--nova-tax-process-rail, rgb(255 255 255 / 0.1));
}

/*
 * Exactly one step leads at a time, and `is-active` is the only thing that says
 * which — the widget's control sets it at first, then novabp-tax-process.js
 * moves it. Beside the intro that script hands it to whichever step is crossing
 * the middle of the viewport, so the lead walks down the list as the page
 * scrolls and back up again on the way out. Stacked, a tap moves it instead.
 *
 * Hover is deliberately not in this rule. See the pointer block further down.
 */
/*
 * Figma paints the card in three separable parts, and each is its own thing
 * here because each behaves differently:
 *
 * - the 1px hairline is full strength on **every** card, leading or not
 * - the faint top-down wash belongs to the leading card alone
 * - the 40% fall-back applies to the card's *content* — the number and the
 *   copy — not to the box
 *
 * That last point is why `opacity` is not on this element. Dimming the box
 * takes the hairline down with it, and an inactive card then reads as an
 * outline that has almost faded out.
 */
.nova-tax-process__step {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 40px;
	padding: 24px;
	border-radius: 16px;
}

/*
 * The hairline. Figma fades it 10% → 5% top to bottom, which a solid border
 * cannot express — and neither can the usual two-layer background trick, which
 * needs an opaque fill to hide the border layer across the middle of the card.
 * These cards are transparent over the section's gradient, so there is nothing
 * to hide it with.
 *
 * Hence a masked ring: the gradient paints the whole box, then the mask
 * subtracts the content box and leaves the 1px frame. `::before` is already the
 * rail marker, so the ring rides here.
 */
.nova-tax-process__step::after {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background-image: linear-gradient(
		180deg,
		rgb(255 255 255 / 0.1) 0%,
		rgb(255 255 255 / 0.05) 100%
	);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* The leading step adds the faint top-down wash Figma gives step 01. */
.nova-tax-process__step.is-active,
.nova-tax-process__step:focus-within {
	background-image: linear-gradient(
		180deg,
		rgb(255 255 255 / 0.04) 0%,
		rgb(255 255 255 / 0) 100%
	);
}

/*
 * The green segment of the rail, sitting on top of the hairline at the step
 * column's left edge. Figma draws it as a fixed 200px block beside step 01; it
 * is sized to the leading step here instead, so it still reads as "you are
 * here" when a later step leads or its copy runs longer.
 *
 * The marker box is on every step and only painted on the one leading, so it
 * cross-fades from step to step rather than appearing and disappearing.
 */
.nova-tax-process__step::before {
	content: "";
	position: absolute;
	inset-block: 0;

	inset-inline-start: calc(-1 * var(--nova-tax-process-rail-offset));
	width: 1px;
	background-color: transparent;
	transition: background-color 0.3s ease;
}

.nova-tax-process__step.is-active::before,
.nova-tax-process__step:focus-within::before {
	background-color: var(--nova-tax-process-rail-active, #09a500);
}

/* ---------------------------------------------------------------------------
 * Pointer behaviour — stacked layouts only
 *
 * Beside the intro the lead belongs to the scroll: the reader's position in the
 * list is what the marker reports, and a pointer drifting across the column
 * would keep overriding it with something that means nothing. So hover is
 * confined to the widths where the intro sits above the steps and there is no
 * scroll pairing to read — there, pointing at a step leads it and clicking pins
 * it, which is also the tap behaviour on a touch screen.
 *
 * 1280px is the same line the layout stacks at, and the same one
 * novabp-tax-process.js switches on. Keep the three in step.
 * ------------------------------------------------------------------------ */

@media (max-width: 1280px) {
	.nova-tax-process__step {
		/* Clicking a step is what pins it, but only at these widths. */
		cursor: pointer;
	}

	.nova-tax-process__step:hover {
		background-image: linear-gradient(
			180deg,
			rgb(255 255 255 / 0.04) 0%,
			rgb(255 255 255 / 0) 100%
		);
	}

	.nova-tax-process__step:hover .nova-tax-process__step-number,
	.nova-tax-process__step:hover .nova-tax-process__step-body {
		opacity: 1;
	}

	.nova-tax-process__step:hover::before {
		background-color: var(--nova-tax-process-rail-active, #09a500);
	}

	/*
	 * Pointing at any step hands it the lead, so the pinned one stands down for
	 * as long as the pointer is elsewhere in the list — otherwise two steps read
	 * as current at once and the marker would be drawn twice.
	 *
	 * The `:not()` guard is what keeps the pinned step lit when it is the one
	 * being pointed at. Source order cannot settle that: this selector scores
	 * (0,6,0) against the plain `:hover` rules' (0,2,0), so it would win the tie
	 * and the step would dim under its own pointer.
	 */
	.nova-tax-process__steps:hover .nova-tax-process__step.is-active:not(:hover):not(:focus-within) {
		background-image: none;
	}

	.nova-tax-process__steps:hover .nova-tax-process__step.is-active:not(:hover):not(:focus-within) .nova-tax-process__step-number,
	.nova-tax-process__steps:hover .nova-tax-process__step.is-active:not(:hover):not(:focus-within) .nova-tax-process__step-body {
		opacity: var(--nova-tax-process-dim, 0.4);
	}

	.nova-tax-process__steps:hover .nova-tax-process__step.is-active:not(:hover):not(:focus-within)::before {
		background-color: transparent;
	}
}

/*
 * The 40% fall-back Figma puts on the two inner frames of a step that is not
 * leading. It sits here rather than on the card so the hairline above keeps its
 * full strength on every step — see the `__step` block.
 */
.nova-tax-process__step-number,
.nova-tax-process__step-body {
	opacity: var(--nova-tax-process-dim, 0.4);
	transition: opacity 0.3s ease;
}

.nova-tax-process__step.is-active .nova-tax-process__step-number,
.nova-tax-process__step.is-active .nova-tax-process__step-body,
.nova-tax-process__step:focus-within .nova-tax-process__step-number,
.nova-tax-process__step:focus-within .nova-tax-process__step-body {
	opacity: 1;
}

/*
 * A fixed 100px column keeps every title starting on the same vertical line,
 * whether the number is "01" or "10".
 */
.nova-tax-process__step-number {
	display: flex;
	flex: 0 0 100px;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: rgb(255 255 255 / 0.99);
}

.nova-tax-process__step-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.nova-tax .nova-tax-process__step-title {
	font-family: var(--nova-tax-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: rgb(255 255 255 / 0.99);
}

.nova-tax-process__step-text {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: rgb(255 255 255 / 0.99);
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------ */

/*
 * The intro moves above the steps below 1280px: a 520px column beside step cards
 * whose bodies run six or seven lines leaves neither enough room once the
 * measure drops this far.
 */
@media (max-width: 1280px) {
	.nova-tax-process__inner {
		flex-direction: column;
		gap: 40px;
	}

	/* Stacked above the steps, there is nothing left to pin against. */
	.nova-tax-process__intro {
		position: static;
		flex: 1 1 auto;
		width: 100%;
	}

	.nova-tax-process__steps {
		flex: 1 1 auto;
		width: 100%;
		padding-inline-start: 0;
	}

	/*
	 * Once the intro sits above the steps rather than beside them the rail has
	 * nothing to run alongside, and with the indent gone it would strike through
	 * the cards' left edge.
	 */
	.nova-tax-process__steps::before,
	.nova-tax-process__step::before {
		display: none;
	}
}

@media (max-width: 1024px) {
	.nova-tax-process__step-number {
		flex-basis: 80px;
		font-size: 32px;
	}
}

@media (max-width: 767px) {
	.nova-tax-process__inner {
		gap: 32px;
	}

	/*
	 * The number moves above the copy rather than beside it — at phone width a
	 * 120px gutter leaves the body too narrow to read.
	 */
	.nova-tax-process__step {
		flex-direction: column;
		gap: 12px;
		padding: 20px;
	}

	.nova-tax-process__step-number {
		flex: 0 0 auto;
		justify-content: flex-start;
		font-size: 28px;
	}

	/*
	 * Nothing dims on a touch screen: there is no hover to bring a step back, so
	 * a 40% step would just be permanently hard to read. The stand-down selector
	 * is restated because it outscores a lone class and would otherwise dim the
	 * pinned step wherever a touch browser leaves `:hover` stuck on the list.
	 */
	.nova-tax-process__step-number,
	.nova-tax-process__step-body,
	.nova-tax-process__steps:hover .nova-tax-process__step.is-active:not(:hover):not(:focus-within) .nova-tax-process__step-number,
	.nova-tax-process__steps:hover .nova-tax-process__step.is-active:not(:hover):not(:focus-within) .nova-tax-process__step-body {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nova-tax-process__step::before,
	.nova-tax-process__step-number,
	.nova-tax-process__step-body {
		transition: none;
	}
}