/**
 *  @package michael-travels-theme
 *
 *  The travel map.
 *
 *  Leaflet brings its own stylesheet, which is loaded first as a dependency.
 *  This only settles the map into the site: the frame, the popup, and the
 *  handful of Leaflet's own controls that would otherwise arrive in default
 *  blue.
 */

.travels-map-heading {
  margin-bottom: var(--mt-space-5);
}

.travels-map-canvas {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  background: var(--mt-ground-alt);
  border: 1px solid var(--mt-line);
  border-radius: var(--mt-radius);
}

.background-dark .travels-map-canvas {
  background: var(--mt-dark-alt);
  border-color: var(--mt-line-dark);
}

.travels-map-status {
  margin: 0;
  padding: var(--mt-space-5);
  color: var(--mt-muted);
  font-size: 0.9375rem;
  text-align: center;
}

.background-dark .travels-map-status {
  color: var(--mt-on-dark-muted);
}




/*  ----------  The popup  ----------  */

.travels-map .leaflet-popup-content-wrapper {
  padding: 0;
  background: var(--mt-ground);
  border-radius: var(--mt-radius);
  box-shadow: 0 6px 24px rgba(var(--mt-dark-rgb), 0.18);
}

.travels-map .leaflet-popup-content {
  margin: 0;
  padding: var(--mt-space-4);
  font-family: var(--mt-font-body);
  line-height: 1.5;
}

.travels-map .leaflet-popup-tip {
  background: var(--mt-ground);
}

.travels-map-popup-meta {
  margin: 0 0 2px;
  color: var(--mt-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.travels-map-popup-title {
  margin: 0 0 var(--mt-space-2);
  font-family: var(--mt-font-display);
  font-size: 1.125rem;
  line-height: 1.2;
}

.travels-map-popup-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mt-space-3);
  margin: 0;
  font-size: 0.8125rem;
}




/*  ----------  Leaflet's own furniture  ----------  */

.travels-map .leaflet-container {
  width: 100%;
  height: 100%;
  background: var(--mt-ground-alt);
  font-family: var(--mt-font-body);
}

.travels-map .leaflet-bar a {
  color: var(--mt-text);
  border-bottom-color: var(--mt-line);
}

.travels-map .leaflet-bar a:hover {
  background: var(--mt-ground-alt);
}

.travels-map .leaflet-control-attribution {
  background: rgba(var(--mt-ground-rgb), 0.85);
  color: var(--mt-muted);
  font-size: 0.6875rem;
}

.travels-map .leaflet-control-attribution a {
  color: var(--mt-muted);
}

/**
 *  Thin and solid: the line is there to say what order the stops came in, not
 *  to be the subject of the map. Full strength rather than faded, because a
 *  1px line at 70% is not a line anybody can follow.
 */
.travels-map-route {
  stroke: var(--mt-route);
  stroke-dasharray: none;
}

/**
 *  The arrowheads along the route. Filled from the token rather than from
 *  context-stroke, which is newer than it needs to be here and would leave
 *  the arrows black anywhere it is not understood.
 */
.travels-map-arrowhead {
  fill: var(--mt-route);
}