/* Pilgrimage trails: the line on a map, the numbered stops, the stop list on a
 * trail page, and the "stop 7 of 21" band on a site page.
 *
 * Loaded by both the interactive map and a trail page, which is why it is its
 * own file rather than an appendix to map.css (a trail page has no reason to
 * carry the category legend) or to catalog.css (a site page has no reason to
 * carry Leaflet marker styles). Line colors are never written here -- they
 * arrive per trail from catalog.models.TRAIL_COLORS and are set inline.
 */

/* ---------- Numbered stop markers ---------- */
.trail-stop-icon { background: none; border: 0; }
.trail-stop-dot {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%;
  border: 2px solid var(--ivory);
  box-shadow: 0 4px 12px -4px rgba(3, 37, 83, .6);
  font-family: var(--sans); font-size: 12px; font-weight: 700; line-height: 1;
  color: var(--ivory);
}

.trail-popup .trail-popup-kicker {
  display: block; font-family: var(--sans); font-size: 11px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 6px;
}

/* No trail legend on the interactive map, by choice. The five categories are
   a fixed set, so their legend is a fixed size; trails are editorial and the
   list only grows. A row per trail would have taken the map over. The lines
   introduce themselves through their own popups instead. */

/* ---------- Trail page ---------- */
.trail-map {
  height: min(60vh, 520px);
  border: 1px solid var(--gold-soft); border-radius: 16px;
}
.trail-route { padding-top: 30px; }
.trail-route h2 {
  font-family: var(--serif-display); font-weight: 600; font-size: 26px;
  color: var(--navy); margin: 0 0 14px;
}
.trail-map-hint {
  font-family: var(--sans); font-size: 13px; color: var(--stone);
  margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
}
.trail-quickcard { margin-top: 26px; }

.trail-stop-list { list-style: none; margin: 6px 0 0; padding: 0; }
.trail-stop {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--gold-soft);
}
.trail-stop:last-child { border-bottom: 0; }
.trail-stop-number {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  color: var(--ivory); margin-top: 2px;
}
.trail-stop--waypoint .trail-stop-number { opacity: .55; }
.trail-stop-body { min-width: 0; }
.trail-stop-title {
  font-family: var(--serif-display); font-size: 20px; font-weight: 600;
  color: var(--navy); margin: 0 0 2px;
}
.trail-stop-title a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--gold-soft); }
.trail-stop-title a:hover { color: var(--gold); border-color: var(--gold); }
.trail-stop-meta {
  font-family: var(--sans); font-size: 12.5px; color: var(--stone); margin: 0 0 6px;
}
.trail-stop-note { font-size: 15.5px; line-height: 1.6; color: #2f3a52; margin: 0; }
.trail-stop-foot {
  font-family: var(--sans); font-size: 12.5px; color: var(--stone);
  margin: 18px 0 0; font-style: italic;
}

/* ---------- "Stop 7 of 21" band on a site page ---------- */
.trail-band {
  margin-top: 22px; padding: 12px 16px;
  background: var(--parchment); border: 1px solid var(--gold-soft); border-radius: 12px;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  align-items: baseline; justify-content: space-between;
}
.trail-band-kicker {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--navy); margin: 0; display: flex; align-items: center; gap: 8px;
}
.trail-band-kicker a { color: var(--navy); border-bottom: 1px solid var(--gold-soft); }
.trail-band-kicker a:hover { color: var(--gold); border-color: var(--gold); }
.trail-band-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.trail-band-links {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-family: var(--sans); font-size: 13px; color: var(--stone);
}
.trail-band-link a { color: var(--stone); }
.trail-band-link a:hover { color: var(--gold); }

@media (max-width: 720px) {
  .trail-stop { gap: 10px; }
  .trail-stop-title { font-size: 18px; }
}