/* Progress reveal
 *
 * Builder utility class `cna-progress`. Put it on the container of a sequence of steps and,
 * once the container scrolls into view, each step turns brand blue in turn, left to right,
 * top to bottom. Editors build the steps exactly as they should look *before* the reveal
 * (the first one may already be blue); this file only supplies the "done" state, in Divi's
 * primary colour with white text, so it follows the palette.
 *
 * Two shapes are recognised:
 *  - an Icon List module with the class: each item's icon fills blue   (home page pathways)
 *  - a column with the class whose direct children are Module Groups, each holding a
 *    number badge (Text) and a card (Module Group): badge and card fill blue, text white
 *    (Career Pathways progression steps)
 *
 * assets/js/progress-reveal.js adds `cna-progress--on` when the container is in view and
 * numbers the steps with --cna-step for the stagger. Reduced motion: colours still change
 * on scroll, without the transition.
 */

.cna-progress {
	/* Everything that changes colour, in both shapes. Kept at the same specificity as the
	 * flat selectors so it still beats Divi's own hover transitions on these modules. */
	& .et_pb_icon_list_item .et-pb-icon,
	& > .et_pb_group > :is(.et_pb_text, .et_pb_group),
	& > .et_pb_group .et_pb_text_inner {
		transition: background-color 0.45s ease, color 0.45s ease;
		transition-delay: calc(var(--cna-step, 0) * 160ms);

		@media (prefers-reduced-motion: reduce) {
			transition: none;
		}
	}

	&.cna-progress--on {
		/* Icon List: one class deeper than Divi's per-item rule so this wins on specificity. */
		&.et_pb_icon_list .et_pb_icon_list_item .et-pb-icon {
			background-color: var(--gcid-primary-color, #007cad);
			color: #fff;
		}

		/* Step groups: badge + card backgrounds, text to white. */
		> .et_pb_group {
			> :is(.et_pb_text, .et_pb_group) {
				background-color: var(--gcid-primary-color, #007cad);
			}

			/* !important: Divi sets each Text module's colour on .et_pb_text_inner with !important. */
			.et_pb_text_inner {
				color: #fff !important;
			}
		}
	}
}