/* Custom Content Timeline - base styles
   All colors/sizes are driven by CSS custom properties set inline per-instance,
   so every timeline on a page can have its own palette. */

.ct-timeline {
	--ct-line-color: #7c3aed;
	--ct-line-color-muted: #e5e0fa;
	--ct-line-size: 4px;
	--ct-line-left-offset: 0px;
	--ct-card-gap: 28px;

	--ct-icon-bg: #e5e0fa;
	--ct-icon-bg-active: #7c3aed;
	--ct-icon-color: #7c3aed;
	--ct-icon-color-active: #ffffff;
	--ct-bullet-size: 80px;
	--ct-icon-font-size: 32px;
	--ct-bullet-offset-top: 0px;
	--ct-bullet-offset-left: 0px;
	--ct-bullet-border-width: 0px;
	--ct-bullet-border-color: #e5e0fa;
	--ct-bullet-border-color-active: #7c3aed;

	--ct-caret-size: 8px;
	--ct-caret-position: 20px;
	--ct-caret-color: #ffffff;

	--ct-card-bg: #ffffff;
	--ct-title-color: #1a1a2e;
	--ct-text-color: #555555;
	--ct-date-color: #333333;
	--ct-title-align: left;
	--ct-excerpt-align: left;

	--ct-h-marker-size: 16px;
	--ct-h-marker-color: #facc15;
	--ct-h-marker-dot-color: #111827;
	--ct-h-icon-badge-size: 44px;
	--ct-h-tag-bg: #eef2f7;
	--ct-h-tag-text: #475569;
	--ct-h-tag-dot: #2563eb;
	--ct-h-meta-label: #0e9aa7;
	--ct-h-meta-value: #64748b;

	box-sizing: border-box;
}
.ct-timeline *,
.ct-timeline *::before,
.ct-timeline *::after {
	box-sizing: inherit;
}

.ct-timeline__icon .dashicons {
	font-size: var(--ct-icon-font-size);
	width: var(--ct-icon-font-size);
	height: var(--ct-icon-font-size);
}
.ct-timeline__icon img {
	width: var(--ct-icon-font-size);
	height: var(--ct-icon-font-size);
	border-radius: 50%;
	object-fit: cover;
}

.ct-timeline__card {
	background: var(--ct-card-bg);
	padding: 22px 24px;
	position: relative;
}
.ct-timeline--shadow .ct-timeline__card {
	box-shadow: 0 4px 24px rgba(20, 10, 50, 0.10), 0 1px 3px rgba(20, 10, 50, 0.08);
}

.ct-timeline__date {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ct-date-color);
	margin-bottom: 6px;
}

.ct-timeline__title {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.3;
	color: var(--ct-title-color);
	text-align: var(--ct-title-align);
}

.ct-timeline__excerpt {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ct-text-color);
	text-align: var(--ct-excerpt-align);
}
.ct-timeline__excerpt p:first-child { margin-top: 0; }
.ct-timeline__excerpt p:last-child { margin-bottom: 0; }

/* ---------------- Bullet / icon circle ---------------- */
.ct-timeline__icon {
	width: var(--ct-bullet-size);
	height: var(--ct-bullet-size);
	border-radius: 50%;
	background: var(--ct-icon-bg);
	color: var(--ct-icon-color);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
	border: var(--ct-bullet-border-width) solid var(--ct-bullet-border-color);
	transition: background 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	z-index: 2;
	position: relative;
	top: var(--ct-bullet-offset-top);
	left: var(--ct-bullet-offset-left);
}

.ct-timeline__item--active .ct-timeline__icon,
.ct-timeline__connector--passed .ct-timeline__icon {
	background: var(--ct-icon-bg-active);
	color: var(--ct-icon-color-active);
	border-color: var(--ct-bullet-border-color-active);
}

/* ---------------- Caret (speech-bubble pointer toward the line) ---------------- */
.ct-timeline__card--caret-right::before,
.ct-timeline__card--caret-left::before {
	content: '';
	position: absolute;
	top: var(--ct-caret-position);
	width: 0;
	height: 0;
	pointer-events: none;
}
.ct-timeline__card--caret-right::before {
	right: calc(-1 * var(--ct-caret-size));
	border-width: var(--ct-caret-size) 0 var(--ct-caret-size) var(--ct-caret-size);
	border-style: solid;
	border-color: transparent transparent transparent var(--ct-caret-color);
}
.ct-timeline__card--caret-left::before {
	left: calc(-1 * var(--ct-caret-size));
	border-width: var(--ct-caret-size) var(--ct-caret-size) var(--ct-caret-size) 0;
	border-style: solid;
	border-color: transparent var(--ct-caret-color) transparent transparent;
}

/* ---------------- Button (optional, per item) ---------------- */
.ct-timeline__button {
	display: inline-block;
	margin-top: 12px;
	padding: 8px 18px;
	border-radius: 6px;
	background: var(--ct-icon-bg-active);
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============ Scroll-fade entrance for cards ============ */
.ct-timeline__card {
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Hidden pre-entrance state is applied by JS, not by default here. This way,
   if the entrance script fails to run for any reason (a conflicting plugin
   script erroring out earlier on the page, aggressive caching, a blocker),
   the card content stays visible instead of vanishing. */
.ct-timeline--scroll-fx .ct-timeline__card.ct-timeline__card--pre-entrance {
	opacity: 0;
	transform: translateY(14px);
	will-change: opacity, transform;
}
.ct-timeline--scroll-fx .ct-timeline__item--in-view .ct-timeline__card {
	opacity: 1;
	transform: translateY(0);
}
/* FIX BUG 8: Horizontal cards use opacity-only entrance — no translateY,
   which would stack with the position:relative;top offset set by PHP for
   the zigzag card positions and produce a double-displaced initial render. */
.ct-timeline--scroll-fx.ct-timeline--horizontal .ct-timeline__card.ct-timeline__card--pre-entrance {
	transform: none; /* remove the inherited translateY from the vertical rule */
}
.ct-timeline--scroll-fx.ct-timeline--horizontal .ct-timeline__card.ct-timeline__card--pre-entrance-h {
	opacity: 0;
	will-change: opacity;
}
.ct-timeline--scroll-fx.ct-timeline--horizontal .ct-timeline__item--in-view .ct-timeline__card--pre-entrance-h {
	opacity: 1;
}

/* ============ VERTICAL (zigzag, center alignment) ============ */
.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__list {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr var(--ct-bullet-size) 1fr;
	column-gap: var(--ct-card-gap);
	row-gap: 30px;
}

.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__line-base,
.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__line-fill {
	position: absolute;
	top: 0;
	left: calc(50% + var(--ct-line-left-offset));
	width: var(--ct-line-size);
	transform: translateX(-50%);
}
.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__line-base {
	bottom: 0;
	background: var(--ct-line-color-muted);
	z-index: 1;
}
.ct-timeline--vertical .ct-timeline__line-fill {
	height: 0;
	background: var(--ct-line-color);
	z-index: 1;
	transition: height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	pointer-events: none;
}
.ct-timeline--vertical.ct-timeline--no-scroll-fx .ct-timeline__line-base {
	background: var(--ct-line-color);
}
.ct-timeline--vertical.ct-timeline--no-scroll-fx .ct-timeline__line-fill {
	display: none;
}

.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__item {
	display: contents;
}

.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__connector {
	grid-column: 2;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	position: relative;
	z-index: 2;
	padding-top: 4px;
}

.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__item--left .ct-timeline__card {
	grid-column: 1;
}
.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__item--right .ct-timeline__card {
	grid-column: 3;
}
.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__item--left .ct-timeline__date--aside {
	grid-column: 3;
	text-align: left;
}
.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__item--right .ct-timeline__date--aside {
	grid-column: 1;
	text-align: right;
}
.ct-timeline--vertical .ct-timeline__date--aside {
	align-self: flex-start;
}

@media (max-width: 767px) {
	.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__list {
		grid-template-columns: 44px 1fr;
		column-gap: 16px;
	}
	.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__line-base,
	.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__line-fill {
		left: 22px;
		transform: none;
	}
	.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__connector {
		grid-column: 1;
	}
	.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__item--left .ct-timeline__card,
	.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__item--right .ct-timeline__card {
		grid-column: 2;
	}
	.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__date--aside {
		display: none;
	}
	.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__card .ct-timeline__date {
		display: inline-block !important;
	}
	.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__card--caret-left::before,
	.ct-timeline--vertical.ct-timeline--align-center .ct-timeline__card--caret-right::before {
		display: none; /* caret only makes sense pointing at a line that sits beside the card */
	}
}

/* ============ VERTICAL (left / right alignment, single column) ============ */
.ct-timeline--vertical.ct-timeline--align-left .ct-timeline__list,
.ct-timeline--vertical.ct-timeline--align-right .ct-timeline__list {
	position: relative;
	max-width: 700px;
	margin: 0 auto;
}
.ct-timeline--vertical.ct-timeline--align-left .ct-timeline__line-base,
.ct-timeline--vertical.ct-timeline--align-right .ct-timeline__line-base,
.ct-timeline--vertical.ct-timeline--align-left .ct-timeline__line-fill,
.ct-timeline--vertical.ct-timeline--align-right .ct-timeline__line-fill {
	position: absolute;
	top: 0;
	left: calc( ( var(--ct-bullet-size) / 2 ) + var(--ct-line-left-offset) );
	width: var(--ct-line-size);
	transform: translateX(-50%);
}
.ct-timeline--vertical.ct-timeline--align-left .ct-timeline__line-base,
.ct-timeline--vertical.ct-timeline--align-right .ct-timeline__line-base {
	bottom: 0;
	background: var(--ct-line-color-muted);
}
.ct-timeline--vertical.ct-timeline--align-left .ct-timeline__item,
.ct-timeline--vertical.ct-timeline--align-right .ct-timeline__item {
	display: flex;
	align-items: flex-start;
	position: relative;
	margin-bottom: 28px;
}
.ct-timeline--vertical.ct-timeline--align-left .ct-timeline__connector,
.ct-timeline--vertical.ct-timeline--align-right .ct-timeline__connector {
	position: relative;
	z-index: 2;
}
.ct-timeline--vertical.ct-timeline--align-left .ct-timeline__card,
.ct-timeline--vertical.ct-timeline--align-right .ct-timeline__card {
	margin-left: var(--ct-card-gap);
	flex: 1;
}

@media (max-width: 767px) {
	.ct-timeline--vertical .ct-timeline__date--aside {
		display: none;
	}
}

/* ============ HORIZONTAL (scrollable) — three-row layout ============
   Structure (identical to Essential Addons pattern):
     .ct-timeline__scroll          overflow wrapper
       .ct-timeline__track         horizontal flex column (column-direction flex)
         .ct-timeline__row--above  flex row: above-line cards + placeholders
         .ct-timeline__row--middle flex row: all connectors + the line
         .ct-timeline__row--below  flex row: below-line cards + placeholders

   Within each row, items are .ct-timeline__h-col — every col has the same
   width (--ct-h-item-width, default 280px) so columns align perfectly
   across all three rows without any JS.
   ====================================================================== */

.ct-timeline--horizontal .ct-timeline__scroll {
	position: relative;
	width: 100%;
}

.ct-timeline--horizontal .ct-timeline__track {
	display: flex;
	flex-direction: column;    /* rows stack vertically: above → middle → below */
	overflow-x: auto;
	scroll-behavior: auto;
	position: relative;
	scrollbar-width: thin;
	scrollbar-color: rgba(0,0,0,.15) transparent;
	padding: 10px;
}
.ct-timeline--horizontal .ct-timeline__track::-webkit-scrollbar       { height: 4px; }
.ct-timeline--horizontal .ct-timeline__track::-webkit-scrollbar-track { background: transparent; }
.ct-timeline--horizontal .ct-timeline__track::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 2px; }
.ct-timeline--drag-enabled .ct-timeline__track  { cursor: grab; }
.ct-timeline__track--dragging                   { cursor: grabbing; user-select: none; }
.ct-timeline--rtl .ct-timeline__track          { direction: rtl; }

/* ── Each row is a horizontal flex line of equal-width columns ── */
.ct-timeline--horizontal .ct-timeline__row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: var(--ct-card-gap);
	width: max-content;      /* shrink-wraps to content so the track can scroll */
	min-width: 100%;
}

/* ── Column unit — same width in every row, keeping vertical alignment ── */
.ct-timeline--horizontal .ct-timeline__h-col {
	flex: 0 0 var(--ct-h-item-width, 280px);
	width: var(--ct-h-item-width, 280px);
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ── Placeholder: empty column so below-row aligns with above-row ── */
.ct-timeline--horizontal .ct-timeline__h-placeholder {
	flex: 0 0 var(--ct-h-item-width, 280px);
	width: var(--ct-h-item-width, 280px);
}

/* ── Above row: cards sit at the bottom of the column (touching the line) ── */
.ct-timeline--horizontal .ct-timeline__row--above .ct-timeline__h-col--card {
	justify-content: flex-end;   /* card sticks to the bottom — closest to the line */
}

/* ── Below row: cards sit at the top of the column (touching the line) ── */
.ct-timeline--horizontal .ct-timeline__row--below .ct-timeline__h-col--card {
	justify-content: flex-start; /* card sticks to the top — closest to the line */
}

/* ── Middle row: connectors are centred on the line ── */
.ct-timeline--horizontal .ct-timeline__row--middle {
	position: relative;
	align-items: center;         /* connectors sit on the line */
	z-index: 1;
}

/* ── Card fills its column ── */
.ct-timeline--horizontal .ct-timeline__card {
	width: 100%;
}
/* No carets on horizontal cards */
.ct-timeline--horizontal .ct-timeline__card--caret-left::before,
.ct-timeline--horizontal .ct-timeline__card--caret-right::before {
	display: none;
}

/* ── Min-height on above/below rows so there is always room ── */
.ct-timeline--horizontal .ct-timeline__row--above,
.ct-timeline--horizontal .ct-timeline__row--below {
	min-height: var(--ct-h-row-min-height, 200px);
}

/* ── The line lives inside the middle row, stretches full width ── */
.ct-timeline--horizontal .ct-timeline__line-base--h,
.ct-timeline--horizontal .ct-timeline__line-fill--h {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: var(--ct-line-size);
	z-index: 0;
}
.ct-timeline--horizontal .ct-timeline__line-base--h {
	right: 0;
	background: var(--ct-line-color-muted);
}
.ct-timeline--horizontal .ct-timeline__line-fill--h {
	width: 0;
	background: var(--ct-line-color);
	transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	pointer-events: none;
}
.ct-timeline--horizontal.ct-timeline--no-scroll-fx .ct-timeline__line-base--h {
	background: var(--ct-line-color);
}
.ct-timeline--horizontal.ct-timeline--no-scroll-fx .ct-timeline__line-fill--h {
	display: none;
}

/* ── Connector sits above the line z-index ── */
.ct-timeline--horizontal .ct-timeline__connector {
	position: relative;
	z-index: 2;
	flex-shrink: 0;
}

/* ── Scroll-fx entrance: horizontal cards fade in only (no translateY
       since cards are now in their own row and have no transform conflict) ── */
.ct-timeline--scroll-fx.ct-timeline--horizontal .ct-timeline__card.ct-timeline__card--pre-entrance {
	transform: none;
}
.ct-timeline--scroll-fx.ct-timeline--horizontal .ct-timeline__card.ct-timeline__card--pre-entrance-h {
	opacity: 0;
	will-change: opacity;
}
.ct-timeline--scroll-fx.ct-timeline--horizontal .ct-timeline__item--in-view .ct-timeline__card--pre-entrance-h,
.ct-timeline--scroll-fx.ct-timeline--horizontal .ct-timeline__h-col--card.ct-timeline__item--in-view .ct-timeline__card--pre-entrance-h {
	opacity: 1;
}

/* ============ HORIZONTAL "Modern" card style ============
   Icon lives inside the card as a badge; the line only carries a small
   marker (square + dot) at each item's position, matching the reference
   design. Only active when both Layout = Horizontal and Horizontal Card
   Style = Modern are selected; otherwise these rules simply don't match
   anything (the classic markup/classes are untouched). */
.ct-timeline--h-modern .ct-timeline__h-marker-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* The general horizontal rule above positions the line using
   --ct-bullet-size, which is correct for the Classic connector (a full-size
   icon bullet) but wrong for Modern, where the connector is the small
   marker instead. Re-anchor the line to the marker's own size here so it
   passes exactly through the marker's centre rather than at whatever
   height an (unrelated, much larger) bullet size implies -- that mismatch
   is what made the line look like disconnected floating dashes instead of
   one continuous bar running through each marker. */
.ct-timeline--h-modern .ct-timeline__line-base--h,
.ct-timeline--h-modern .ct-timeline__line-fill--h {
	top: 50%; /* Centre in track — same anchor as classic connectors */
}
.ct-timeline--h-modern .ct-timeline__h-marker {
	width: var(--ct-h-marker-size);
	height: var(--ct-h-marker-size);
	border-radius: 5px;
	background: var(--ct-h-marker-color);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.ct-timeline--h-modern .ct-timeline__h-marker-dot {
	width: 35%;
	height: 35%;
	border-radius: 50%;
	background: var(--ct-h-marker-dot-color);
}

.ct-timeline--h-modern .ct-timeline__card {
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.ct-timeline--h-modern .ct-timeline__h-icon-badge {
	width: var(--ct-h-icon-badge-size);
	height: var(--ct-h-icon-badge-size);
	margin-bottom: 10px;
}
/* The badge reuses .ct-timeline__icon (same var-driven background/color/
   border-radius as the classic connector bullet); only size is overridden
   here since the badge has its own dedicated size control. */

/* Scroll-progressive highlight: the marker (sibling, rendered first) gets
   `--passed` toggled by JS as the visitor scrolls the track. Since the
   badge now lives inside the card instead of inside the connector, this
   general-sibling rule lets the badge still react to that same state. */
.ct-timeline--h-modern .ct-timeline__connector--passed ~ .ct-timeline__card .ct-timeline__h-icon-badge {
	background: var(--ct-icon-bg-active);
	color: var(--ct-icon-color-active);
	border-color: var(--ct-bullet-border-color-active);
}

.ct-timeline--h-modern .ct-timeline__h-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 12px;
	border-radius: 999px;
	margin-bottom: 10px;
	background: var(--ct-h-tag-bg);
	color: var(--ct-h-tag-text);
}
.ct-timeline--h-modern .ct-timeline__h-tag::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ct-h-tag-dot);
	flex-shrink: 0;
}

.ct-timeline--h-modern .ct-timeline__h-meta {
	font-size: 13px;
	margin-top: 10px;
	color: var(--ct-h-meta-value);
}
.ct-timeline--h-modern .ct-timeline__h-meta strong {
	color: var(--ct-h-meta-label);
	font-weight: 700;
}

/* ── ACCESSIBILITY ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.ct-timeline__card,
	.ct-timeline__line-fill,
	.ct-timeline__icon,
	.ct-timeline__button {
		transition: none !important;
		animation: none !important;
	}
	.ct-timeline__card--pre-entrance {
		opacity: 1 !important;
		transform: none !important;
	}
}