/*
 * TimelineJS theme — single source of truth for /timeline and /en/timeline.
 * Overrides Knight Lab defaults (loaded at runtime AFTER this file,
 * hence the !important flags). Palette driven by CSS variables.
 */

:root {
  --tl-bg: #ffffff;               /* timeline base */
  --tl-slider-bg: #ffffff;        /* story slide area */
  --tl-nav-bg: #f1f5f9;           /* bottom navigation strip */
  --tl-text: #0f172a;             /* headlines & body */
  --tl-text-muted: #475569;       /* captions, credits, marker titles */
  --tl-date: #2563eb;             /* dates (site accent blue) */
  --tl-band-bg: #e2e8f0;          /* group bands */
  --tl-band-text: #0f172a;
  --tl-marker-bg: #f8fafc;
  --tl-marker-border: #cbd5e1;
  --tl-marker-hover-bg: #dbeafe;
  --tl-marker-active-bg: #ffffff;
  --tl-marker-active-border: #2563eb;
  --tl-axis: #64748b;             /* time axis ticks */
  --tl-icon: #334155;             /* slide nav arrows */
  --tl-border: #e2e8f0;
}

.dark {
  --tl-bg: #111827;
  --tl-slider-bg: #1f2937;
  --tl-nav-bg: #111827;
  --tl-text: #f9fafb;
  --tl-text-muted: #d1d5db;
  --tl-date: #93c5fd;
  --tl-band-bg: #374151;
  --tl-band-text: #f3f4f6;
  --tl-marker-bg: #374151;
  --tl-marker-border: #4b5563;
  --tl-marker-hover-bg: #1e3a5f;
  --tl-marker-active-bg: #1f2937;
  --tl-marker-active-border: #60a5fa;
  --tl-axis: #9ca3af;
  --tl-icon: #e5e7eb;
  --tl-border: #374151;
}

/* ── Base ─────────────────────────────────────────────── */
.tl-timeline {
  background-color: var(--tl-bg) !important;
  color: var(--tl-text) !important;
}
.tl-storyslider .tl-slider-background {
  background-color: var(--tl-slider-bg) !important;
}
.tl-timenav {
  background-color: var(--tl-nav-bg) !important;
  border-top-color: var(--tl-border) !important;
}

/* ── Text ─────────────────────────────────────────────── */
.tl-text,
.tl-text p,
.tl-text h2.tl-headline {
  color: var(--tl-text) !important;
}
.tl-headline-date,
.tl-text h3.tl-headline-date {
  color: var(--tl-date) !important;
}
.tl-caption { color: var(--tl-text-muted) !important; }
.tl-credit  { color: var(--tl-text-muted) !important; }

/* ── Group bands (EARLY CAREER, CLOUD, LEADERSHIP…) ───── */
.tl-timegroup {
  background-color: var(--tl-band-bg) !important;
}
.tl-timegroup-message {
  color: var(--tl-band-text) !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}

/* ── Time axis ────────────────────────────────────────── */
.tl-timeaxis-background {
  background-color: var(--tl-nav-bg) !important;
  border-top-color: var(--tl-border) !important;
}
.tl-timeaxis .tl-timeaxis-content-container .tl-timeaxis-major .tl-timeaxis-tick {
  color: var(--tl-axis) !important;
}
.tl-timeaxis .tl-timeaxis-content-container .tl-timeaxis-minor .tl-timeaxis-tick {
  color: var(--tl-axis) !important;
}

/* ── Markers ──────────────────────────────────────────── */
.tl-timemarker .tl-timemarker-line-left,
.tl-timemarker .tl-timemarker-line-right {
  border-left-color: var(--tl-marker-border) !important;
}
.tl-timemarker .tl-timemarker-content-container {
  background-color: var(--tl-marker-bg) !important;
  border-color: var(--tl-marker-border) !important;
}
.tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline {
  color: var(--tl-text-muted) !important;
}
.tl-timemarker:hover .tl-timemarker-timespan {
  background-color: transparent !important;
}
.tl-timemarker:hover .tl-timemarker-content-container {
  background-color: var(--tl-marker-hover-bg) !important;
}
.tl-timemarker:hover .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline {
  color: var(--tl-text) !important;
}
.tl-timemarker.tl-timemarker-active .tl-timemarker-content-container {
  background-color: var(--tl-marker-active-bg) !important;
  border-color: var(--tl-marker-active-border) !important;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.25) !important;
}
.tl-timemarker.tl-timemarker-active .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline {
  color: var(--tl-text) !important;
}

/* ── Slide navigation arrows ──────────────────────────── */
.tl-slidenav-next .tl-slidenav-icon,
.tl-slidenav-previous .tl-slidenav-icon {
  color: var(--tl-accent, var(--tl-date)) !important;
}
.tl-slidenav-next .tl-slidenav-title,
.tl-slidenav-previous .tl-slidenav-title,
.tl-slidenav-next .tl-slidenav-description,
.tl-slidenav-previous .tl-slidenav-description,
.tl-slidenav-next .tl-slidenav-content-container .tl-slidenav-description,
.tl-slidenav-previous .tl-slidenav-content-container .tl-slidenav-description,
.tl-slidenav-next .tl-slidenav-content-container.tl-slidenav-inverted .tl-slidenav-title,
.tl-slidenav-previous .tl-slidenav-content-container.tl-slidenav-inverted .tl-slidenav-title {
  color: var(--tl-text-muted) !important;
  text-shadow: none !important;
  opacity: 0.75 !important;
}

/* ── Loading message ──────────────────────────────────── */
.tl-message,
.tl-message .tl-message-container .tl-message-content .tl-message-content-text,
.tl-message .tl-message-container .tl-message-content .tl-message-content-text h2 {
  color: var(--tl-text) !important;
}

/* ── Attribution badge ────────────────────────────────── */
.tl-timenav .tl-attribution {
  background-color: transparent !important;
}
.tl-timenav .tl-attribution a {
  color: var(--tl-axis) !important;
}