/* Neutral placeholder palette — recolor deliberately per trip (e.g. a flag's colors), the
   same way the original Colombia site used Colombian flag shades here. */
:root {
  --md-primary-fg-color: #1a4fa8;
  --md-primary-fg-color--light: #3a68c0;
  --md-primary-fg-color--dark: #0f3480;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-accent-fg-color: #ce1126;
  --md-accent-fg-color--transparent: rgba(206, 17, 38, 0.1);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: rgba(255, 255, 255, 0.7);
}

/* Hotlinked example photos inside ??? tip "Example photos" collapsibles */
.example-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.25rem 0 0.75rem;
}

.example-photos a {
  display: block;
  flex: 1 1 140px;
  max-width: 220px;
}

.example-photos img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 0.25rem;
}

/* Legend under the MapLibre route-map scaffold (docs/itinerary/route-map.md) */
.route-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0.5rem 0 1rem;
  font-size: 0.85rem;
}

.route-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.route-map-legend i {
  display: inline-block;
  width: 1.5rem;
  height: 3px;
  border-radius: 2px;
}