/* ════════════════════════════════════════════════════════════════════
   ONHYM HISTORY TIMELINE — v2 Fully Isolated CSS
   Namespace: onhym-ht-*   CSS vars: --onhym-ht-*
   NO generic class names. all:unset on every interactive element.
   ════════════════════════════════════════════════════════════════════ */

/* ── ROOT wrapper ──────────────────────────────────────────────────── */
.onhym-ht-root {
	/* Design tokens */
	--onhym-ht-green:    #186a43;
	--onhym-ht-green-2:  #1f8a55;
	--onhym-ht-green-dk: #0f4a30;
	--onhym-ht-gold:     #d4a14a;
	--onhym-ht-ink:      #0f1a2a;
	--onhym-ht-ink-2:    #4a5564;
	--onhym-ht-line:     rgba(15, 30, 50, 0.10);
	--onhym-ht-radius:   20px;
	--onhym-ht-max:      1200px;
	--onhym-ht-font:     system-ui, -apple-system, "Segoe UI", Roboto,
	                     "Helvetica Neue", Arial, sans-serif;

	/* Isolation */
	display: block !important;
	position: relative !important;
	width: 100% !important;
	max-width: 100% !important;
	clear: both !important;
	float: none !important;
	contain: layout style;
	isolation: isolate;
	background: #ffffff !important;
	padding: 0 0 16px !important;
	margin: 0 !important;

	/* Own typography baseline */
	font-family: var(--onhym-ht-font) !important;
	font-size: 16px !important;
	line-height: 1.55 !important;
	font-weight: 400 !important;
	color: var(--onhym-ht-ink) !important;
	text-align: left !important;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box !important;
}

/* Universal box-sizing inside our scope */
.onhym-ht-root *,
.onhym-ht-root *::before,
.onhym-ht-root *::after {
	box-sizing: border-box;
}

/* Hard reset ALL buttons and links — kills any theme/Elementor overrides */
.onhym-ht-root button,
.onhym-ht-root button:hover,
.onhym-ht-root button:focus,
.onhym-ht-root button:active {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	-webkit-font-smoothing: antialiased;
}

.onhym-ht-root a {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
}

/* Hide the JSON boot data */
.onhym-ht-data { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   HERO  (only when show_hero="yes")
   ════════════════════════════════════════════════════════════════════ */
.onhym-ht-hero-wrap {
	display: block;
	width: 100%;
	padding: 16px 20px 0;
}
.onhym-ht-hero {
	position: relative;
	width: 100%;
	max-width: var(--onhym-ht-max);
	margin: 0 auto;
	border-radius: var(--onhym-ht-radius);
	overflow: hidden;
	background: linear-gradient(135deg, #134d2f 0%, #1a6a3f 60%, #1c8650 100%);
	color: #fff;
	isolation: isolate;
}
.onhym-ht-hero-glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.onhym-ht-glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.45;
}
.onhym-ht-glow-1 { width: 360px; height: 360px; background: #2ea162; top: -120px; left: -80px; }
.onhym-ht-glow-2 { width: 320px; height: 320px; background: #0a3d24; bottom: -120px; right: -80px; }

.onhym-ht-hero-inner {
	position: relative;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	align-items: center;
	gap: 24px;
	padding: 44px 44px 80px;
	min-height: 220px;
}
.onhym-ht-hero-text  { z-index: 2; max-width: 560px; }
.onhym-ht-hero-title {
	display: block;
	margin: 0 0 12px;
	font-family: var(--onhym-ht-font);
	font-size: clamp(28px, 4.4vw, 54px);
	line-height: 1.06;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
}
.onhym-ht-hero-sub {
	display: block;
	margin: 0;
	font-family: var(--onhym-ht-font);
	font-size: clamp(14px, 1.25vw, 17px);
	color: rgba(255,255,255,0.85);
	line-height: 1.55;
	max-width: 480px;
}
.onhym-ht-hero-art { justify-self: end; width: clamp(120px, 18vw, 200px); }
.onhym-ht-hero-art svg { display: block; width: 100%; height: auto; }

/* hero CTA — all:unset already applied above for <a> */
.onhym-ht-hero-cta {
	position: absolute;
	right: 44px;
	bottom: 28px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px 12px 22px;
	background: #fff;
	color: var(--onhym-ht-green-dk);
	font-family: var(--onhym-ht-font);
	font-weight: 600;
	font-size: 14px;
	border-radius: 999px;
	box-shadow: 0 10px 28px -10px rgba(0,0,0,0.28);
	transition: transform .25s ease, box-shadow .25s ease;
	z-index: 3;
}
.onhym-ht-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(0,0,0,0.35); }
.onhym-ht-hero-cta svg { display: inline-block; flex-shrink: 0; color: var(--onhym-ht-green); }

/* ════════════════════════════════════════════════════════════════════
   TIMELINE NAVIGATION
   ════════════════════════════════════════════════════════════════════ */
.onhym-ht-nav-wrap {
	display: block;
	width: 100%;
	padding: 20px 20px 0;
}
.onhym-ht-nav-card {
	display: block;
	width: 100%;
	max-width: 90%;
	margin: 0 auto;
	background: #ffffff;
	border-radius: var(--onhym-ht-radius);
	border: 1px solid var(--onhym-ht-line);
	box-shadow: 0 8px 32px -16px rgba(15, 50, 30, 0.14);
	padding: 28px 28px 24px;
	text-align: center;
}

.onhym-ht-active-lbl {
	display: block;
	margin: 0 0 4px;
	font-family: var(--onhym-ht-font);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--onhym-ht-ink-2);
	font-weight: 600;
}

.onhym-ht-big-year {
	display: inline-block;
	font-family: var(--onhym-ht-font);
	font-size: clamp(48px, 6.5vw, 76px);
	font-weight: 800;
	color: var(--onhym-ht-green);
	letter-spacing: -0.03em;
	line-height: 1;
	margin: 0 0 8px;
}

.onhym-ht-year-underline {
	display: block;
	width: 56px;
	height: 3px;
	border-radius: 3px;
	background: var(--onhym-ht-gold);
	margin: 0 auto 22px;
}

/* Track row: arrow | track | arrow — arrows sit OUTSIDE the rail */
.onhym-ht-track-row {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 8px 4px 6px;
}

/* ──────────────────────────────────────────────────────────────────
   PREMIUM CIRCULAR ARROWS — white pill, soft shadow, ONHYM green icon
   Custom isolated classes: .onhym-timeline-prev / .onhym-timeline-next
   ────────────────────────────────────────────────────────────────── */
.onhym-ht-root .onhym-timeline-prev,
.onhym-ht-root .onhym-timeline-next,
.onhym-ht-root .onhym-timeline-prev:hover,
.onhym-ht-root .onhym-timeline-next:hover,
.onhym-ht-root .onhym-timeline-prev:focus,
.onhym-ht-root .onhym-timeline-next:focus,
.onhym-ht-root .onhym-timeline-prev:active,
.onhym-ht-root .onhym-timeline-next:active {
	flex: 0 0 auto;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	background-color: #ffffff !important;
	background-image: none !important;
	color: var(--onhym-ht-green) !important;
	border: 1px solid rgba(15, 50, 30, 0.08) !important;
	box-shadow:
		0 1px 2px rgba(15, 50, 30, 0.06),
		0 10px 24px -12px rgba(15, 50, 30, 0.22) !important;
	opacity: 1 !important;
	visibility: visible !important;
	cursor: pointer !important;
	transition:
		transform .35s cubic-bezier(.2,.7,.2,1),
		box-shadow .35s ease,
		color .25s ease,
		background-color .25s ease !important;
	-webkit-tap-highlight-color: transparent;
}

/* premium hover lift */
.onhym-ht-root .onhym-timeline-prev:hover,
.onhym-ht-root .onhym-timeline-next:hover {
	transform: translateY(-2px) !important;
	box-shadow:
		0 2px 4px rgba(15, 50, 30, 0.08),
		0 18px 36px -14px rgba(15, 50, 30, 0.32) !important;
	color: var(--onhym-ht-green-dk) !important;
}
.onhym-ht-root .onhym-timeline-prev:active,
.onhym-ht-root .onhym-timeline-next:active {
	transform: translateY(0) scale(.96) !important;
}

/* chevron icon */
.onhym-ht-root .onhym-timeline-prev svg,
.onhym-ht-root .onhym-timeline-next svg {
	display: block !important;
	flex-shrink: 0;
	width: 18px !important;
	height: 18px !important;
	stroke: currentColor !important;
	stroke-width: 2.4;
	pointer-events: none;
}

/* focus ring (a11y) */
.onhym-ht-root .onhym-timeline-prev:focus-visible,
.onhym-ht-root .onhym-timeline-next:focus-visible {
	outline: 2px solid var(--onhym-ht-green) !important;
	outline-offset: 3px !important;
}

/* disabled (only used if loop is OFF; safe to ship now) */
.onhym-ht-root .onhym-timeline-prev[disabled],
.onhym-ht-root .onhym-timeline-next[disabled],
.onhym-ht-root .onhym-timeline-prev.is-disabled,
.onhym-ht-root .onhym-timeline-next.is-disabled {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
	transform: none !important;
	box-shadow: 0 1px 2px rgba(15, 50, 30, 0.05) !important;
}

/* mobile: a bit smaller */
@media (max-width: 600px) {
	.onhym-ht-track-row { gap: 12px; }
	.onhym-ht-root .onhym-timeline-prev,
	.onhym-ht-root .onhym-timeline-next {
		width: 36px !important;
		height: 36px !important;
	}
	.onhym-ht-root .onhym-timeline-prev svg,
	.onhym-ht-root .onhym-timeline-next svg {
		width: 15px !important;
		height: 15px !important;
	}
}

/* Track — the rail + Swiper container */
.onhym-ht-track {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	height: 64px;
	display: flex;
	align-items: center;
}

/* Horizontal line + progress fill, centered vertically */
.onhym-ht-track-line,
.onhym-ht-track-fill {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	border-radius: 2px;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 0;
}
.onhym-ht-track-line { background: var(--onhym-ht-line); }
.onhym-ht-track-fill {
	right: auto;
	width: 0;
	background: linear-gradient(90deg, var(--onhym-ht-green-2), var(--onhym-ht-green));
	transition: width .45s ease;
}

/* Years carousel — Swiper container (overflow hidden, slides have fixed width) */
.onhym-ht-years {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	overflow: hidden;
	padding: 12px 0;
}
.onhym-ht-years .swiper-wrapper {
	display: flex;
	align-items: center;
	box-sizing: content-box;
}
.onhym-ht-year-slide {
	flex-shrink: 0 !important;
	width: 92px !important;
	height: auto;
	display: flex;
    margin-top: 13px;
	align-items: center;
	justify-content: center;
}

/* Each year item — fixed width, no flex-grow */
.onhym-ht-year-btn,
.onhym-ht-year-btn:hover,
.onhym-ht-year-btn:focus,
.onhym-ht-year-btn:active,
.onhym-ht-year-btn.is-active {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
}
.onhym-ht-year-btn {
	width: 100%;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 6px 4px;
	font-family: var(--onhym-ht-font);
	font-size: 14px;
	font-weight: 600;
	color: var(--onhym-ht-ink-2);
	letter-spacing: 0.02em;
	transition: color .25s ease, transform .25s ease;
	white-space: nowrap;
	text-align: center;
	line-height: 1;
}
.onhym-ht-year-btn:hover { color: var(--onhym-ht-green); transform: none; }

.onhym-ht-year-dot {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #d6dce3;
	opacity: 0.45;
	transition: background .25s ease, transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

/* Past dots — completed years fill green to follow the progress bar */
.onhym-ht-year-btn.is-past .onhym-ht-year-dot {
	background: var(--onhym-ht-green-2);
	opacity: 0.72;
	transform: scale(1.05);
}
.onhym-ht-year-btn.is-past {
	color: var(--onhym-ht-green-2);
	opacity: 0.72;
}

.onhym-ht-year-lbl {
	display: block;
	line-height: 1;
	font-size: 14px;
	letter-spacing: 0.02em;
}

.onhym-ht-year-btn.is-active {
	color: var(--onhym-ht-green);
	font-weight: 800;
	font-size: 16px;
}
.onhym-ht-year-btn.is-active .onhym-ht-year-lbl { font-size: 16px; }
.onhym-ht-year-btn.is-active .onhym-ht-year-dot {
	background: var(--onhym-ht-green);
	transform: scale(1.4);
	box-shadow: 0 0 0 5px rgba(24, 106, 67, 0.14);
}

/* Duplicate-year slides: collapse to 1 px so visible dots are evenly spaced.
   Keeping a 1 px width (not 0) gives Swiper a real position to anchor on. */
.swiper-slide.is-dup-year {
	width: 1px !important;
	overflow: hidden;
	pointer-events: none;
}
.swiper-slide.is-dup-year .onhym-ht-year-btn {
	visibility: hidden;
	pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════
   CONTENT — premium centered card (matches nav card visual system)
   ════════════════════════════════════════════════════════════════════ */
.onhym-ht-content-wrap {
	display: block;
	width: 100%;
	padding: 20px 20px 24px;
}
.onhym-ht-stage {
	display: block;
	width: 100%;
   max-width: 90%;
	margin: 0 auto;
}

.onhym-ht-card {
	display: block;
	background: #ffffff;
	border: 1px solid var(--onhym-ht-line);
	border-radius: var(--onhym-ht-radius);
	box-shadow: 0 8px 32px -16px rgba(15, 50, 30, 0.14);
	overflow: hidden;
	opacity: 1;
	transform: none;
	transition: opacity .5s ease, transform .5s ease;
}
.onhym-ht-card.is-in { opacity: 1; transform: translateY(0); }

.onhym-ht-card-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 22px;
	padding: 56px 40px 60px;
	max-width: 820px;
	margin: 0 auto;
}

.onhym-ht-card-pill {
	display: inline-flex;
	align-self: center;
	align-items: center;
	padding: 6px 16px;
	font-family: var(--onhym-ht-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--onhym-ht-green-dk);
	background: #e8f2ec;
	border-radius: 999px;
	line-height: 1;
}

.onhym-ht-card-title {
	display: block;
	margin: 0;
	max-width: 720px;
	font-family: var(--onhym-ht-font);
	font-size: clamp(26px, 3.6vw, 42px);
	line-height: 1.18;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--onhym-ht-green);
}

.onhym-ht-card-year-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.onhym-ht-card-year {
	display: block;
	font-family: var(--onhym-ht-font);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--onhym-ht-ink-2);
}
.onhym-ht-card-year-bar {
	display: block;
	width: 56px;
	height: 2px;
	border-radius: 2px;
	background: var(--onhym-ht-gold);
}

.onhym-ht-card-desc {
	max-width: 680px;
	font-family: var(--onhym-ht-font);
	font-size: 16px;
	line-height: 1.8;
	font-weight: 400;
	color: var(--onhym-ht-ink-2);
}
.onhym-ht-card-desc p { display: block; margin: 0 0 14px; }
.onhym-ht-card-desc p:last-child { margin-bottom: 0; }

/* Mobile spacing */
@media (max-width: 720px) {
	.onhym-ht-content-wrap { padding: 16px 14px 20px; }
	.onhym-ht-card-body    { padding: 40px 22px 44px; gap: 18px; }
	.onhym-ht-card-title   { font-size: clamp(22px, 6vw, 30px); line-height: 1.22; }
	.onhym-ht-card-desc    { font-size: 15px; line-height: 1.72; }
	.onhym-ht-card-year    { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════════════
   STATS BAR  (opt-in)
   ════════════════════════════════════════════════════════════════════ */
.onhym-ht-stats-wrap {
	display: block;
	width: 100%;
	padding: 16px 20px 28px;
}
.onhym-ht-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	width: 100%;
	max-width: var(--onhym-ht-max);
	margin: 0 auto;
	background: linear-gradient(135deg, #134d2f 0%, #1a6a3f 100%);
	border-radius: var(--onhym-ht-radius);
	padding: 22px 24px;
	color: #ffffff;
	box-shadow: 0 22px 54px -28px rgba(15, 50, 30, 0.38);
}
.onhym-ht-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 8px;
}
.onhym-ht-stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,0.12);
	color: #ffffff;
	margin-bottom: 4px;
}
.onhym-ht-stat-icon svg { display: block; width: 22px; height: 22px; }
.onhym-ht-stat-value {
	display: block;
	font-family: var(--onhym-ht-font);
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 800;
	color: #ffffff;
	line-height: 1.15;
}
.onhym-ht-stat-lbl {
	display: block;
	font-family: var(--onhym-ht-font);
	font-size: 12px;
	color: rgba(255,255,255,0.8);
	line-height: 1.35;
}

/* ════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ════════════════════════════════════════════════════════════════════ */
.onhym-ht-empty-wrap {
	display: block;
	width: 100%;
	padding: 24px 20px;
}
.onhym-ht-empty {
	display: block;
	max-width: var(--onhym-ht-max);
	margin: 0 auto;
	padding: 40px 24px;
	text-align: center;
	font-family: var(--onhym-ht-font);
	color: var(--onhym-ht-ink-2);
	background: #ffffff;
	border-radius: var(--onhym-ht-radius);
	border: 1px solid var(--onhym-ht-line);
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — viewport polish only (structure = container queries)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
	.onhym-ht-hero-wrap,
	.onhym-ht-nav-wrap,
	.onhym-ht-content-wrap,
	.onhym-ht-stats-wrap { padding-left: 14px; padding-right: 14px; }
	.onhym-ht-stats { grid-template-columns: repeat(4, 1fr); padding: 18px 14px; gap: 8px; }
	.onhym-ht-stat-icon { width: 38px; height: 38px; }
}

@media (max-width: 720px) {
	.onhym-ht-hero-inner {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 30px 22px 80px;
	}
	.onhym-ht-hero-art { display: none; }
	.onhym-ht-big-year { font-size: clamp(40px, 12vw, 58px); }
	.onhym-ht-btn-arrow { width: 34px; height: 34px; }
	.onhym-ht-track { height: 52px; }
	.onhym-ht-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.onhym-ht-hero-wrap,
	.onhym-ht-nav-wrap,
	.onhym-ht-content-wrap,
	.onhym-ht-stats-wrap { padding-left: 10px; padding-right: 10px; }
	.onhym-ht-nav-card { padding: 20px 14px 18px; }
	.onhym-ht-track-row { gap: 8px; }
	.onhym-ht-year-btn  { padding: 4px 8px; font-size: 12px; }
	.onhym-ht-year-slide { width: 72px !important; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.onhym-ht-card,
	.onhym-ht-card-img,
	.onhym-ht-btn-arrow,
	.onhym-ht-card-cta,
	.onhym-ht-track-fill { transition: none !important; }
}