/* --- TimelineJS Color Customization for Zuidendijk --- */
#timeline-embed {
  position: absolute;
  bottom: 5vh;
  left: 5vw;
  width: 90vw;
  height: 75vh;
  border-radius: 1vh;
}

.tl-slider-background {
  background: #f0f8f4 !important;
}

.tl-attribution {
  opacity: 0.2 !important;
}

/* Main timeline background */
.timeline {
  background: #f0f8f4 !important;
}

/* Event (slide) background */
.tl-slide-content-container,
.tl-slide-background {
  opacity: 0.9 !important;
}

/* Date bar and navigation */
.tl-menubar {
  background: #88b04b !important; /* Zuidendijk green */
}

/* Date text and title accents */
.tl-date,
.tl-time {
  color: #4c6e44 !important;
}
.tl-slide-title,
.tl-headline {
  color: #2c5222 !important;
}

/* Navigation arrows */
.tl-slidenav-next,
.tl-slidenav-previous {
  background: transparent !important;
  color: #fff !important;
}
*/

/* Timeline progress bar */
/*.tl-timenav-slider-background {
  background: #88b04b !important;
}

/* Timeline progress marker */
.tl-timenav-marker {
  background: #3b6e41 !important;
}

.tl-timenav {
  transform: scale(1.25);
  transform-origin: bottom left; /* or 'center' for different effect */
  /* Prevent overflow cropping at the bottom */
  margin-bottom: 50px;
  z-index: 100;
}

@media (max-width: 400px) {
  #timeline-embed {
    top: 30vh;
    height: 68vh !important;
    bottom: auto;
  }
}

@media (max-width: 700px) {
  #timeline-embed {
    bottom: 2vh;
    left: 2vw;
    width: 96vw !important;
  }
}

@media (max-width: 1400px) {
  .tl-timenav {
    transform: scale(1.0);
  }
}

  @media (min-aspect-ratio: 10/5) {
    #timeline-embed {
      top: 30vh;
      height: 68vh !important;
    }
    .tl-timenav {
      transform: scale(1.0);
    }
  }

/* Prevent any font overrides from breaking layout */