/* =========================================================================
   Satsuma Timeline — CORE
   Baseline styles + the "anti-bleed / anti-gap" reset shared by all designs.

   WHY SO MANY RESETS?
   Themes (Elementor especially) inject margins on <ul>/<ol>/<li>/<p> and set
   `white-space: pre-wrap` on block content. Combined with Gutenberg's literal
   newlines that produces huge phantom gaps. The PHP cleaner removes the literal
   newlines; the rules below force `white-space: normal` and neutralise stray
   margins — but ONLY inside .satsuma-timeline-wrapper, so the rest of the site
   is never touched.
   ========================================================================= */

:root {
	/* ---- Brand theme: red (#c7392d) / black (#000000) / white (#ffffff) ---- */
	--satsuma-tl-accent: #c7392d;       /* brand red */
	--satsuma-tl-accent-dark: #9e2b21;  /* darker red for hovers/depth */
	--satsuma-tl-accent-soft: #f7dcd9;  /* soft red tint for fills */
	--satsuma-tl-line: #e3e3e3;         /* light neutral connector line */
	--satsuma-tl-line-strong: #000000;  /* strong black line (used by some designs) */
	--satsuma-tl-card-bg: #ffffff;      /* white card */
	--satsuma-tl-card-border: #ececec;
	--satsuma-tl-card-shadow: 0 6px 22px rgba(0, 0, 0, 0.10);
	--satsuma-tl-title: #000000;        /* black headings */
	--satsuma-tl-text: #2a2a2a;         /* near-black body for readability */
	--satsuma-tl-date-bg: #000000;      /* black date pill */
	--satsuma-tl-date-text: #ffffff;    /* white date text */
	--satsuma-tl-radius: 14px;
	--satsuma-tl-gap: 40px;
	--satsuma-tl-card-pad: 22px 24px;
	--satsuma-tl-font: inherit;
}

/* ---- Wrapper baseline ------------------------------------------------- */
.satsuma-timeline-wrapper {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	font-family: var(--satsuma-tl-font);
	color: var(--satsuma-tl-text);
	line-height: 1.55;
	position: relative;
}

.satsuma-timeline-wrapper *,
.satsuma-timeline-wrapper *::before,
.satsuma-timeline-wrapper *::after {
	box-sizing: border-box;
}

/* =========================================================================
   THE GAP FIX — scoped, never leaks out of the wrapper.
   ========================================================================= */

/* Force normal whitespace so leftover newlines never paint as blank lines. */
.satsuma-timeline-wrapper .satsuma-tl__content,
.satsuma-timeline-wrapper .satsuma-tl__content * {
	white-space: normal !important;
}

/* Kill the giant top/bottom gaps on the content block itself. */
.satsuma-timeline-wrapper .satsuma-tl__content {
	margin: 0 !important;
	padding: 0 !important;
}

/* Lists: tidy, predictable spacing regardless of theme. */
.satsuma-timeline-wrapper .satsuma-tl__content ul,
.satsuma-timeline-wrapper .satsuma-tl__content ol,
.satsuma-timeline-wrapper .satsuma-tl__content ul.wp-block-list,
.satsuma-timeline-wrapper .satsuma-tl__content ol.wp-block-list {
	margin: 10px 0 10px 1.2em !important;
	padding: 0 !important;
	list-style-position: outside !important;
}

.satsuma-timeline-wrapper .satsuma-tl__content ul li,
.satsuma-timeline-wrapper .satsuma-tl__content ol li {
	margin: 0 0 5px 0 !important;
	padding: 0 !important;
	line-height: 1.5 !important;
}

/* Paragraphs inside content: normal flow, modest spacing. */
.satsuma-timeline-wrapper .satsuma-tl__content p {
	margin: 0 0 0.7em 0 !important;
	padding: 0 !important;
}

.satsuma-timeline-wrapper .satsuma-tl__content p:last-child,
.satsuma-timeline-wrapper .satsuma-tl__content ul:last-child,
.satsuma-timeline-wrapper .satsuma-tl__content ol:last-child {
	margin-bottom: 0 !important;
}

/* A <p> wrapping only a list item shouldn't add a line — display inline. */
.satsuma-timeline-wrapper .satsuma-tl__content li p {
	margin: 0 !important;
	padding: 0 !important;
	display: inline !important;
}

/* Nuke any empty paragraph the editor left behind. */
.satsuma-timeline-wrapper p:empty,
.satsuma-timeline-wrapper p.wp-block-paragraph:empty,
.satsuma-timeline-wrapper .satsuma-tl__content br {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* -------------------------------------------------------------------------
   VISIBILITY FIX
   Dark/coloured themes (like HCM Global) force list & paragraph text to a light
   colour and strip bullet markers. On a white card that makes the body text
   invisible — the card looks tall but "empty". Force readable colours and real
   list markers, scoped to the card content only.
   ---------------------------------------------------------------------- */
.satsuma-timeline-wrapper .satsuma-tl__content {
	display: block !important;
	color: var(--satsuma-tl-text) !important;
}

.satsuma-timeline-wrapper .satsuma-tl__content p,
.satsuma-timeline-wrapper .satsuma-tl__content li,
.satsuma-timeline-wrapper .satsuma-tl__content span,
.satsuma-timeline-wrapper .satsuma-tl__content strong,
.satsuma-timeline-wrapper .satsuma-tl__content b,
.satsuma-timeline-wrapper .satsuma-tl__content em,
.satsuma-timeline-wrapper .satsuma-tl__content i,
.satsuma-timeline-wrapper .satsuma-tl__content h2,
.satsuma-timeline-wrapper .satsuma-tl__content h3,
.satsuma-timeline-wrapper .satsuma-tl__content h4,
.satsuma-timeline-wrapper .satsuma-tl__content h5,
.satsuma-timeline-wrapper .satsuma-tl__content h6 {
	color: var(--satsuma-tl-text) !important;
}

/* Links keep the accent colour so they stay recognisable. */
.satsuma-timeline-wrapper .satsuma-tl__content a {
	color: var(--satsuma-tl-accent) !important;
	text-decoration: underline;
}

/* Force real bullet / number markers even if the theme set list-style:none. */
.satsuma-timeline-wrapper .satsuma-tl__content ul,
.satsuma-timeline-wrapper .satsuma-tl__content ul.wp-block-list {
	list-style: disc outside !important;
}
.satsuma-timeline-wrapper .satsuma-tl__content ol,
.satsuma-timeline-wrapper .satsuma-tl__content ol.wp-block-list {
	list-style: decimal outside !important;
}
.satsuma-timeline-wrapper .satsuma-tl__content li {
	display: list-item !important;
	list-style-position: outside !important;
}

/* Images in content stay responsive. */
.satsuma-timeline-wrapper img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ---- Shared visual pieces -------------------------------------------- */
.satsuma-tl__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.satsuma-tl__card {
	background: var(--satsuma-tl-card-bg);
	border: 1px solid var(--satsuma-tl-card-border);
	border-radius: var(--satsuma-tl-radius);
	box-shadow: var(--satsuma-tl-card-shadow);
	padding: var(--satsuma-tl-card-pad);
}

.satsuma-tl__date {
	display: inline-block;
	background: var(--satsuma-tl-date-bg);
	color: var(--satsuma-tl-date-text);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 6px 12px;
	border-radius: 999px;
	margin: 0 0 10px 0;
}

.satsuma-tl__title {
	margin: 0 0 10px 0 !important;
	padding: 0 !important;
	font-size: 20px;
	line-height: 1.25;
	color: var(--satsuma-tl-title);
	font-weight: 800;
}

.satsuma-tl__media {
	margin: 0 0 12px 0;
	border-radius: 10px;
	overflow: hidden;
}

.satsuma-tl__media img {
	border-radius: 10px;
}

.satsuma-tl--empty p {
	margin: 0;
	padding: 16px;
	color: #888;
	font-style: italic;
}

/* =========================================================================
   SHARED ANIMATION LAYER (progressive enhancement)
   Beautiful, lightweight scroll effects that users love: fade + directional
   slide + gentle scale on reveal, a line that "fills" as you scroll, pulsing
   nodes, a date-marker pop, and a hover lift on cards. Everything is added by
   timeline.js (the `.is-animated` flag) so pages degrade gracefully without JS
   and fully respect prefers-reduced-motion.
   ========================================================================= */

.satsuma-tl__item {
	opacity: 1;
}

/* Base hidden state once JS marks the timeline animated. */
.satsuma-tl.is-animated .satsuma-tl__item {
	opacity: 0;
	transform: translateY(34px) scale(0.97);
	transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform;
}

/* Revealed state — !important so per-design directional starts always reset. */
.satsuma-tl.is-animated .satsuma-tl__item.is-visible {
	opacity: 1 !important;
	transform: none !important;
}

/* ---- Directional reveal per design ----------------------------------- */
/* Alternating verticals: slide in from their own side. */
.satsuma-tl--vertical.is-animated .satsuma-tl__item--left,
.satsuma-tl--vertical-flat.is-animated .satsuma-tl__item--left {
	transform: translateX(-52px) scale(0.97);
}
.satsuma-tl--vertical.is-animated .satsuma-tl__item--right,
.satsuma-tl--vertical-flat.is-animated .satsuma-tl__item--right {
	transform: translateX(52px) scale(0.97);
}

/* Single-side / story: glide up from the left. */
.satsuma-tl--vertical-single.is-animated .satsuma-tl__item,
.satsuma-tl--classic-compact.is-animated .satsuma-tl__item {
	transform: translateX(-38px) scale(0.98);
}

/* Horizontal bottom: rise up into place. */
.satsuma-tl--horizontal-bottom.is-animated .satsuma-tl__item {
	transform: translateY(40px) scale(0.97);
}

/* Horizontal alternating + highlighted: top cards drop, bottom cards rise. */
.satsuma-tl--horizontal.is-animated .satsuma-tl__item:nth-child(odd),
.satsuma-tl--horizontal-highlighted.is-animated .satsuma-tl__item:nth-child(odd) {
	transform: translateY(-34px) scale(0.97);
}
.satsuma-tl--horizontal.is-animated .satsuma-tl__item:nth-child(even),
.satsuma-tl--horizontal-highlighted.is-animated .satsuma-tl__item:nth-child(even) {
	transform: translateY(34px) scale(0.97);
}

/* Roadmap: gentle fade + scale (cards are absolutely positioned). */
.satsuma-tl--roadmap.is-animated .satsuma-tl__item {
	transform: scale(0.96);
}

/* ---- "Line draw" — accent fill that grows as you scroll -------------- */
.satsuma-tl--vertical .satsuma-tl__line,
.satsuma-tl--vertical-single .satsuma-tl__line,
.satsuma-tl--vertical-flat .satsuma-tl__line,
.satsuma-tl--classic-compact .satsuma-tl__line {
	overflow: hidden;
}
.satsuma-tl--vertical .satsuma-tl__progress,
.satsuma-tl--vertical-single .satsuma-tl__progress,
.satsuma-tl--vertical-flat .satsuma-tl__progress,
.satsuma-tl--classic-compact .satsuma-tl__progress {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 0;
	background: linear-gradient(180deg, var(--satsuma-tl-accent), var(--satsuma-tl-accent-dark));
	border-radius: inherit;
	transition: height 0.12s linear;
	z-index: 1;
}

/* ---- Pulsing nodes once revealed ------------------------------------- */
@keyframes satsuma-tl-dot-pulse {
	0%   { box-shadow: 0 0 0 2px var(--satsuma-tl-accent), 0 0 0 0 rgba(199, 57, 45, 0.45); }
	70%  { box-shadow: 0 0 0 2px var(--satsuma-tl-accent), 0 0 0 12px rgba(199, 57, 45, 0); }
	100% { box-shadow: 0 0 0 2px var(--satsuma-tl-accent), 0 0 0 0 rgba(199, 57, 45, 0); }
}
.satsuma-tl--vertical.is-animated .satsuma-tl__item.is-visible .satsuma-tl__dot,
.satsuma-tl--vertical-single.is-animated .satsuma-tl__item.is-visible .satsuma-tl__dot,
.satsuma-tl--horizontal.is-animated .satsuma-tl__item.is-visible .satsuma-tl__dot,
.satsuma-tl--horizontal-bottom.is-animated .satsuma-tl__item.is-visible .satsuma-tl__dot {
	animation: satsuma-tl-dot-pulse 2.6s ease-out infinite;
}

/* ---- Highlighted date marker "pop" ----------------------------------- */
.satsuma-tl--horizontal-highlighted.is-animated .satsuma-tl__marker {
	transform: scale(0.5);
	opacity: 0;
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s,
		opacity 0.4s ease 0.12s;
}
.satsuma-tl--horizontal-highlighted.is-animated .satsuma-tl__item.is-visible .satsuma-tl__marker {
	transform: scale(1);
	opacity: 1;
}

/* ---- Hover lift on cards (micro-interaction) ------------------------- */
.satsuma-tl--vertical .satsuma-tl__card,
.satsuma-tl--vertical-single .satsuma-tl__card,
.satsuma-tl--vertical-flat .satsuma-tl__card,
.satsuma-tl--horizontal .satsuma-tl__card,
.satsuma-tl--horizontal-highlighted .satsuma-tl__card,
.satsuma-tl--horizontal-bottom .satsuma-tl__card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.satsuma-tl--vertical .satsuma-tl__card:hover,
.satsuma-tl--vertical-single .satsuma-tl__card:hover,
.satsuma-tl--vertical-flat .satsuma-tl__card:hover,
.satsuma-tl--horizontal .satsuma-tl__card:hover,
.satsuma-tl--horizontal-highlighted .satsuma-tl__card:hover,
.satsuma-tl--horizontal-bottom .satsuma-tl__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(199, 57, 45, 0.16);
}

@media (prefers-reduced-motion: reduce) {
	.satsuma-tl.is-animated .satsuma-tl__item {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.satsuma-tl .satsuma-tl__dot,
	.satsuma-tl .satsuma-tl__marker,
	.satsuma-tl .satsuma-tl__node {
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
	.satsuma-tl .satsuma-tl__card:hover {
		transform: none !important;
	}
}