/* ==========================================================================
   Journey Timeline — frontend styles
   All visual values are CSS custom properties, scoped per instance by a
   generated <style> block. Fallbacks below match the plugin defaults.
   ========================================================================== */

.ajt-journey {
	box-sizing: border-box;
	margin: 0 0 1.5em;
}

.ajt-journey *,
.ajt-journey *::before,
.ajt-journey *::after {
	box-sizing: inherit;
}

.ajt-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ----- Item layout + connector line ----- */

.ajt-item {
	position: relative;
	margin: 0;
	padding-inline-start: calc(var(--ajt-icon-size, 56px) + 30px);
	padding-bottom: var(--ajt-item-gap, 48px);
}

.ajt-item:last-child {
	padding-bottom: 4px;
}

.ajt-item::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-start: calc((var(--ajt-icon-size, 56px) - var(--ajt-line-width, 2px)) / 2);
	width: var(--ajt-line-width, 2px);
	background: var(--ajt-line-color, #5b3ea6);
}

.ajt-item:first-child::before {
	top: calc(var(--ajt-icon-size, 56px) / 2);
}

/* Default: the line ends at the last node — nothing below the last icon. */
.ajt-item:last-child::before {
	bottom: auto;
	height: calc(var(--ajt-icon-size, 56px) / 2);
}

/* No line at all when a journey has a single item. */
.ajt-item:first-child:last-child::before {
	display: none;
}

/* Opt-in via Settings → "Connector line ending: Extend below the last item". */
.ajt-line-extend .ajt-item:last-child::before {
	bottom: 0;
	height: auto;
}

.ajt-line-extend .ajt-item:first-child:last-child::before {
	display: block;
}

/* ----- Icon marker ----- */

.ajt-marker {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ajt-icon-size, 56px);
	height: var(--ajt-icon-size, 56px);
	border-radius: 999px;
	background: var(--ajt-icon-bg, #46278f);
	color: var(--ajt-icon-color, #ffffff);
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.ajt-marker svg {
	display: block;
	width: calc(var(--ajt-icon-size, 56px) * var(--ajt-icon-glyph, 0.45));
	height: calc(var(--ajt-icon-size, 56px) * var(--ajt-icon-glyph, 0.45));
	fill: currentColor;
}

.ajt-item:hover .ajt-marker,
.ajt-item:focus-within .ajt-marker {
	background: var(--ajt-icon-hover-bg, #2d1a66);
	color: var(--ajt-icon-hover-color, #ffffff);
	transform: scale(1.08);
	box-shadow: 0 10px 22px rgba(17, 24, 39, 0.18);
}

/* ----- Typography ----- */

.ajt-subtitle {
	margin: 0 0 2px;
	padding: 0;
	color: var(--ajt-subtitle-color, #6b7280);
	font-size: var(--ajt-subtitle-size, 14px);
	font-weight: var(--ajt-subtitle-weight, 400);
	font-family: var(--ajt-subtitle-family, inherit);
	line-height: 1.3;
}

.ajt-title {
	margin: 0 0 10px;
	padding: 0;
	color: var(--ajt-title-color, #111827);
	font-size: var(--ajt-title-size, 24px);
	font-weight: var(--ajt-title-weight, 700);
	font-family: var(--ajt-title-family, inherit);
	line-height: 1.25;
}

.ajt-content {
	color: var(--ajt-content-color, #6b7280);
	font-size: var(--ajt-content-size, 16px);
	font-weight: var(--ajt-content-weight, 400);
	font-family: var(--ajt-content-family, inherit);
	line-height: 1.65;
	background: var(--ajt-content-bg, transparent);
	padding: var(--ajt-content-padding, 0);
	border-radius: var(--ajt-content-radius, 8px);
}

.ajt-content p {
	margin: 0 0 1em;
	font: inherit;
	color: inherit;
}

.ajt-content p:last-child {
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.ajt-item {
		padding-inline-start: calc(var(--ajt-icon-size, 56px) + 18px);
	}
}

/* ----- Scroll-reveal animations -----
   JS adds .ajt-ready to the wrapper, then .ajt-in to each item as it
   enters the viewport. Without JS nothing is hidden. */

.ajt-ready .ajt-item {
	opacity: 0;
	transition: opacity var(--ajt-anim-duration, 600ms) ease, transform var(--ajt-anim-duration, 600ms) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ajt-ready.ajt-anim-fade-up .ajt-item {
	transform: translateY(26px);
}

.ajt-ready.ajt-anim-slide-right .ajt-item {
	transform: translateX(-34px);
}

[dir="rtl"] .ajt-ready.ajt-anim-slide-right .ajt-item {
	transform: translateX(34px);
}

.ajt-ready.ajt-anim-zoom-in .ajt-item {
	transform: scale(0.92);
	transform-origin: 0 50%;
}

.ajt-ready .ajt-item.ajt-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ajt-ready .ajt-item {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}