/* Colombian flag colors, exact hex (Material's "blue"/"accent" presets are just the
   closest fallback set in mkdocs.yml — these override with the real flag shades). */
:root {
  --md-primary-fg-color: #003893;
  --md-primary-fg-color--light: #1a4fa8;
  --md-primary-fg-color--dark: #002766;
  --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);
}

/* Thin stripe under the header in real flag proportions (yellow 1/2, blue 1/4, red 1/4). */
.md-header {
  position: relative;
}

.md-header::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(
    to right,
    #fcd116 0%,
    #fcd116 50%,
    #003893 50%,
    #003893 75%,
    #ce1126 75%,
    #ce1126 100%
  );
}

/* 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 experiment (docs/itinerary/wip-plan/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;
}