/* Timeline container wrapper: enables horizontal scrolling */
.custom-timeline-nav-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 1.5rem;
  overflow: hidden; /* hide vertical scroll */
}

/* Scrollable timeline viewport */
.custom-timeline-wrapper {
  overflow-x: auto;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0;
  scroll-behavior: smooth; /* smooth scroll */
  -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
}

/* Inner container holding all timeline items horizontally */
.custom-timeline-scroll {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: flex-start;
}

/* Each timeline event marker */
.custom-event-marker {
  display: inline-block;
  vertical-align: top;
  background: #f5f5f5;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.1);
  margin: 0 12px;
  padding: 12px 16px;
  min-width: 180px;
  max-width: 220px;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.custom-event-marker:hover,
.custom-event-marker.current-event {
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.2);
}

/* Event title */
.custom-event-name {
  white-space: normal;      /* Allow wrapping */
  word-wrap: break-word;    /* Break long words */
  overflow-wrap: break-word;
  max-width: 150px;         /* Or any max width that fits your design */
  margin: 0 0 5px 0;
  text-align: center;
  font-weight: 600;
}

/* Event date below title */
.custom-event-date {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 10px;
}

/* Event verse link styling */
.custom-event-link {
  font-size: 0.9rem;
  color: #0073aa;
  text-decoration: none;
  display: inline-block;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
  display: inline-block; /* or inline */
  margin: 0;             /* remove default margin */
  padding: 0;            /* remove default padding */
  line-height: 0.5;      /* adjust line height if needed */
  vertical-align: baseline;
}

.custom-event-link:hover {
  border-color: #0073aa;
}

.custom-event-links {
  white-space: normal;          /* allow wrapping */
  word-wrap: break-word;        /* legacy support */
  overflow-wrap: anywhere;      /* modern browsers */
}

.custom-event-link {
  display: inline-block;        /* makes wrap cleaner */
  max-width: 100%;              /* prevents overflow */
  line-height: 1.4;             /* nicer spacing for multi-line */
      margin-top: -20px;
}
/* Scroll buttons */
.custom-timeline-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  pointer-events: none; /* allow clicks only on buttons */
}

.custom-timeline-nav.custom-left,
.custom-timeline-nav.custom-right {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #ccc;
  color: #444;
  font-size: 24px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  padding: 0 12px;
  border-radius: 3px;
  user-select: none;
  transition: background 0.3s ease;
  z-index: 10;
  line-height: 1;
}

.custom-timeline-nav.custom-left {
  left: 0;
  transform: translateY(-50%);
}

.custom-timeline-nav.custom-right {
  right: 0;
  transform: translateY(-50%);
}

.custom-timeline-nav.custom-left:hover,
.custom-timeline-nav.custom-right:hover {
  background: #0073aa;
  color: #fff;
}

/* Back to timeline link below timeline */
.custom-timeline-back-wrapper {
  text-align: center;
  margin-top: 1rem;
}

.custom-timeline-back {
  font-weight: 600;
  color: #0073aa;
  text-decoration: none;
  font-size: 1rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.custom-timeline-back:hover {
  border-color: #0073aa;
}