/* ==========================================================================
	Allstar Widgets — base component styles
	Compiled/overridden by the active child theme.
	========================================================================== */

/* --------------------------------------------------------------------------
	Card
	-------------------------------------------------------------------------- */
.allstar-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: #fff;
}

.allstar-card__image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.allstar-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem;
}

.allstar-card__title {
	margin-top: 0;
	margin-bottom: 0.75rem;
}

.allstar-card__description {
	margin-top: 0;
	margin-bottom: 1.25rem;
	flex: 1;
}

.allstar-card__button {
	display: inline-block;
	align-self: flex-start;
	padding: 0.6em 1.4em;
	text-decoration: none;
	cursor: pointer;
}

/* ==========================================================================
	Process Steps
	========================================================================== */

/*
 * Custom properties with defaults — all overridden by Elementor's generated
 * CSS via selectors on {{WRAPPER}}, except --allstar-ps-step-count which is
 * set inline by PHP/JS so it reflects the actual number of repeater rows.
 *
 * --allstar-ps-circle-size    circle width & height (px)
 * --allstar-ps-line-gradient  full linear-gradient() string (built in PHP/JS from up to 5 stops)
 * --allstar-ps-step-count     number of steps (set inline, drives line offsets)
 *
 * Per-step (set inline on .allstar-ps__step):
 * --allstar-ps-step-color    circle border, number, and label color
 *
 * Global style-tab override (set on {{WRAPPER}}):
 * --allstar-ps-label-color   when set, overrides --allstar-ps-step-color for all labels
 */
.allstar-ps {
	--allstar-ps-circle-size: 48px;
	--allstar-ps-line-gradient: linear-gradient(to right, #f5a623, #9b9b9b);
	--allstar-ps-step-count: 5;
}

/* --------------------------------------------------------------------------
	Steps row + connector line (::before pseudo-element)
	-------------------------------------------------------------------------- */
.allstar-ps__steps {
	display: flex;
	position: relative; /* establishes stacking context for ::before */
}

/*
 * The connector line is a ::before pseudo-element on the steps row.
 *
 * Circles are left-aligned within each step (align-items: initial).
 * Each step is flex: 1, so its width = 100% / N.
 * The circle sits at the left edge of the step (no left padding), so:
 *
 *   circle-1 center from left  = circle_size / 2
 *   circle-N center from right = step_width - circle_size / 2
 *                               = 100% / N - circle_size / 2
 */
.allstar-ps__steps::before {
	content: '';
	position: absolute;
	top: calc(var(--allstar-ps-circle-size) / 2);
	transform: translateY(-50%);
	left: calc(var(--allstar-ps-circle-size) / 2);
	right: calc(100% / var(--allstar-ps-step-count) - var(--allstar-ps-circle-size) / 2);
	height: 2px;
	background: var(--allstar-ps-line-gradient);
	z-index: 0;
	pointer-events: none;
}

.allstar-ps__step {
	flex: 1; /* equal width per step — required for the offset calc to be accurate */
	display: flex;
	flex-direction: column;
	align-items: initial;
	text-align: left;
	padding: 0 1rem 0 0; /* right padding only — left must be 0 for the line formula */
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
	Circle
	-------------------------------------------------------------------------- */
.allstar-ps__circle {
	width: var(--allstar-ps-circle-size);
	height: var(--allstar-ps-circle-size);
	border-radius: 50%;
	border: 2px solid var(--allstar-ps-step-color, currentColor);
	color: var(--allstar-ps-step-color, currentColor);
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
	z-index: 2; /* sits above the ::before line */
}

.allstar-ps__number {
	font-weight: 700;
	line-height: 1;
	font-size: calc(var(--allstar-ps-circle-size) * 0.42);
}

/* --------------------------------------------------------------------------
	Label
	-------------------------------------------------------------------------- */
.allstar-ps__label {
	/*
	 * Cascades: if --allstar-ps-label-color is set (style-tab override),
	 * it wins; otherwise falls back to the per-step color.
	 */
	color: var(--allstar-ps-label-color, var(--allstar-ps-step-color, inherit));
	margin-top: 1rem;
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
	Content
	-------------------------------------------------------------------------- */
.allstar-ps__content {
	margin-top: 0.75rem;
	text-align: left;
	width: 100%;
}

.allstar-ps__content ul {
	list-style-type: disc;
	padding-left: 1.25rem;
	margin: 0;
}

.allstar-ps__content li {
	margin-bottom: 0.25rem;
}

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

/* Tablet: 2-column wrap; hide the line (can't span wrapped rows correctly). */
@media (max-width: 768px) {
	.allstar-ps__steps {
		flex-wrap: wrap;
		justify-content: center;
	}

	.allstar-ps__steps::before {
		display: none;
	}

	.allstar-ps__step {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

/* Mobile: single column, step becomes a horizontal row (circle left, text right). */
@media (max-width: 480px) {
	.allstar-ps__step {
		flex: 0 0 100%;
		max-width: 100%;
		flex-direction: row;
		align-items: flex-start;
		gap: 1rem;
		text-align: left;
	}

	.allstar-ps__label {
		text-align: left;
	}
}