/* Clean timeline design (updated) — scoped to avoid leaking to the site */
/* Loaded for Trip Timeline plugin (clean is the only style) */

/* Layout wrapper when map is present */
.timeline-map-wrap { display: grid; grid-template-columns: 1fr 400px; gap: 24px; align-items: start; max-width: 900px;
  margin: 0 auto;}
.timeline-map-wrap .timeline-col { min-width: 0; }
.timeline-map { width: 100%; height: 400px; border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden;
    z-index: 1; position: relative }

/* Container */
.timeline-container {
  /* Provide a safe default for the accent to avoid missing variable issues */
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

/* Individual item */
.timeline-item {
  position: relative;
  padding-left: 40px; /* adjusted for 30px icon */
  margin-bottom: 20px;
  animation: tt-fadeInUp 0.6s ease-out;
}
.timeline-item:last-child { margin-bottom: 0; }

/* Vertical connector for each item; last is hidden */
.timeline-item::before {
  content: '';
  position: absolute;
  left: 14px; /* center of 30px icon */
  top: 30px;  /* starts just below the 30px icon */
  bottom: -50px;
  width: 1px;
  background:var(--accent);
}

.timeline-item:last-of-type::before { display: none; }

/* Icon circle */
.timeline-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border: 1px solid var(--accent);
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
}
/* Support our icon types */
.timeline-icon .dashicons { font-size: 16px; line-height: 1; color: inherit; display: flex;
    justify-content: center;
    align-content: center;
    align-items: center; }
.timeline-icon img { max-width: 60%; max-height: 60%; border-radius: 4px; display: block; }
.timeline-icon .tt-marker-dot { width: 8px; height: 8px; background: currentColor; border-radius: 50%; }

.timeline-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 0;
}

.timeline-content p {
    font-size: 16px;
}

.timeline-title a { color: inherit; text-decoration: none; }
.timeline-title a:hover { text-decoration: underline; }

.timeline-subtitle {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}

/* Popup styles for map markers */
.leaflet-popup-content .tt-popup-title {
  font-size: 14px;
  font-weight: 800; /* thicker title */
  color: #222;
  margin: 0 0 2px 0;
}
.leaflet-popup-content .tt-popup-subtitle {
  font-size: 13px;
  color: #555;
  line-height: 1.4;
  margin: 0;
}

/* Optional date badge retained for future use (not output by PHP now) */
.timeline-date {
  display: inline-block;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  padding: 6px 15px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* Animation */
@keyframes tt-fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
/* Legend styles */
.timeline-legend { margin-top: 10px; font-size: 14px; color: #333; }
.timeline-legend-list { list-style: none; margin: 8px 0 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 16px; }
.timeline-legend-item { display: inline-flex; align-items: center; gap: 8px; }
.timeline-legend-pin svg { display: block; width: 16px; height: 16px; }
.timeline-legend-title { line-height: 1; }

@media (max-width: 900px) {
  .timeline-map-wrap { grid-template-columns: 1fr; padding: 15px; }
  .timeline-map { height: 300px; }
    .timeline-map-wrap .map-col { margin-top: 0; }
}
@media (max-width: 600px) {
  .timeline-item::before { left: 14px; }
  .timeline-icon { width: 30px; height: 30px; font-size: 16px; }
  .timeline-title { font-size: 18px; }
  .timeline-subtitle { font-size: 14px; }
}