/* ----[ General Page Styles ]---- */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  background: #f5f5f5;
}

/* Header Style */
header {
  text-align: center;
  padding: 1em 0;
  font-size: 2em;
  background: #e0e4ee;
  color: #444;
  letter-spacing: 1px;
  box-shadow: 0 2px 8px -4px #aaa;
}

/* Timeline Container */
.timeline-container {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* ----[ Timeline JS Styles ]---- */

/* Ensure iframe is full-height */
.timeline-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Change the background of the Timeline frame */
iframe {
  background: #fff;
}

/* ----[ Customize Timeline JS Internals ]---- */
/* These selectors target Timeline JS's main classes inside the iframe
   If self-hosting or editing Timeline JS CSS, use these: */

/* Timeline Event Slide Background (default for all events) */
.tl-slide-content-container {
  background: #fcfcfc !important;
  border-radius: 12px;
  box-shadow: 0 1px 16px -5px #bbb;
}

/* Timeline Event Slide Headline */
.tl-headline {
  font-size: 1.6em !important;
  color: #234;
  font-weight: bold;
  margin-bottom: 0.5em;
  font-family: 'Georgia', serif;
}

/* Timeline Event Description Text */
.tl-text-content {
  font-size: 1.07em !important;
  color: #495656;
  line-height: 1.6;
}

/* Timeline Navigation Strip (dots/thumbnails at bottom) */
.tl-timeaxis {
  background: #f5faff !important;
  border-top: 1px solid #aedcff;
}

/* Timeline Event Dots */
.tl-timenav-item {
  border: 2px solid #5599ff !important;
  background: #e0eeff !important;
}

/* Timeline Active Dot */
.tl-timenav-item-active {
  border-color: #2255dd !important;
  background: #aacef7 !important;
}

/* Timeline Group Band (Requires group names, can be further customized) */
.tl-timemarker-group-yourgroupname .tl-timemarker-content-container {
  background: #e6ffe6 !important; /* Example: green band for the group "yourgroupname" */
}

/* Timeline JS Era Band */
.tl-erasera {
  background: #ffe9bb !important;
  opacity: 0.4 !important;
}

/* Timeline Media Area (Images, Video, Maps) */
.tl-media-content {
  background: #eef6fc !important;
  border-radius: 7px;
}

/* ----[ Responsive Styling ]---- */
@media (max-width: 600px) {
  header {
    font-size: 1.25em;
    padding: 0.6em 0;
  }
  .tl-headline {
    font-size: 1.1em !important;
  }
  .tl-text-content {
    font-size: 0.97em !important;
  }
  .tl-slide-content-container {
    border-radius: 6px;
  }
}

/* ----[ Miscellaneous Enhancements ]---- */

/* Selection for accessibility */
::selection { background: #afe9ff; }