/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 02 2026 | 18:28:03 */
/* ========================================= Timeline ========================================= */
.timeline-section {
	--tl-bg: #ffffff;
	--tl-fg: #111111;
	--tl-muted: #b3b3b3;
	--tl-line: #dcdcdc;
	--tl-nav-icon: #111111;
	--tl-nav-icon-hover: #ffffff;
	--tl-nav-bg-hover: #111111;

	--tl-rail-height: 6.5rem;
	--tl-content-width: 34rem;
	--tl-content-indent: 0rem;
	--tl-body-min-height: 16rem; 

	display: flex;
	flex-direction: column;
	background-color: var(--tl-bg);
	transition: background-color 0.4s;

	.timeline-track {
		order: 1;
		position: relative;
		width: 100%;
		min-height: var(--tl-rail-height);
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			inset: calc(50% - 1px) 0 auto;
			height: 2px;
			background: var(--tl-line);
		}

		.timeline-markers {
			position: absolute;
			inset: 0;

			.timeline-marker {
				position: absolute;
				top: 50%;
				left: 0;
				width: 0;
				height: 0;
				padding: 0;
				border: 0;
				margin: 0;
				background: none;
				overflow: visible;
				cursor: pointer;
				opacity: 0;
				will-change: transform, opacity;

				.timeline-marker__dot {
					position: absolute;
					left: 0;
					top: 0;
					width: 0.875rem;
					height: 0.875rem;
					background: color-mix(in srgb, var(--tl-fg) calc(var(--p, 0) * 100%), var(--tl-muted));
					transform: translate(-50%, -50%) scale(calc(1 + var(--p, 0) * 0.65));
				}

				.timeline-marker__label {
					position: absolute;
					left: 0;
					top: 0;
					padding-bottom: 0.25rem;
					white-space: nowrap;
					font-weight: 700;
					font-size: clamp(1.1rem, 0.95rem + 0.75vw, 1.5rem);
					line-height: 1;
					color: color-mix(in srgb, var(--tl-fg) calc(var(--p, 0) * 100%), var(--tl-muted));
					transform-origin: 50% 100%;
					transform: translate(-50%, calc(-100% - 0.9rem)) scale(calc(1 + var(--p, 0) * 0.1));
				}
			}
		}
	}

	.timeline-left {
		order: 2;
		min-width: 0;
		display: flex;
		flex-direction: column;
		flex: 1;
		min-height: var(--tl-body-min-height);
		padding-block: 0 2rem;

		.timeline-content {
			display: grid;
			min-width: 0;
			text-align: left;

			width: min(var(--tl-content-width), calc(50% - 1rem));
			margin-left: calc(37.5% + var(--tl-content-indent));

			@media screen and (max-width: 991px) {
				width: 100%;
				margin-left: 0;
			}

			> .acf-innerblocks-container {
				display: contents;
			}

			.timeline-content-wrapper {
				grid-area: 1 / 1;
				min-width: 0;
				opacity: 0;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;

				&:first-child {
					opacity: 1;
				}

				&.is-active {
					opacity: 1;
				}

				.acf-innerblocks-container {
					> *:first-child {
						margin-top: 0;
					}
					> *:last-child {
						margin-bottom: 0;
					}
				}

				.wp-block-image,
				figure {
					margin: 0 0 1rem;
				}

				img {
					max-width: 100%;
					height: auto;
				}

				* {
					color: var(--tl-fg);
					transition: color 0.4s;
					font-size: 1rem;

					@media screen and (min-width: 1200px) {
						font-size: 1.1rem;
					}
				}

				.wp-element-button {
					color: #fff;
				}

				h2,
				h3 {
					font-size: clamp(2rem, 1.25rem + 3vw, 3.5rem);
					font-weight: 700;
					margin-bottom: 1.5rem;
				}
				
				a {
					text-decoration: underline !important;
					text-underline-offset: 2px;
				}
			}
		}

		.timeline-nav {
			display: flex;
			justify-content: flex-end;
			margin-top: auto;
			padding-top: 2rem;

			.timeline-nav__btn {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: auto;
				aspect-ratio: 1/1;
				padding: 0.5rem;
				border: 0;
				cursor: pointer;
				background-color: transparent;
				outline: none;
				transition: background-color 0.3s ease;

				svg {
					display: block;
					width: 2rem;
					height: auto;
					color: var(--tl-nav-icon);
					transition: color 0.3s ease;
				}

				&:focus-visible,
				&:hover {
					background-color: var(--tl-nav-bg-hover);

					svg {
						color: var(--tl-nav-icon-hover);
					}
				}
			}
		}
	}
}