/* map.css — Leaflet map container + route polyline + markers. */
#map {
  block-size: 100%;
  inline-size: 100%;
}

/* Route polyline — white-labelled stroke driven by the tenant primary colour
   (set as a CSS var at runtime in main.js applyTheme). map.js tags the Leaflet
   path with .wf-route so the colour lives here rather than in JS. */
.wf-route {
  stroke: var(--color-primary);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Live user-location ("you are here") — a pulsing blue dot with a directional heading
   cone (Google-Maps-style puck). The cone only shows once a compass heading is known
   (parent gets .wf-user--has-heading during live navigation). */
.wf-user {
  position: relative;
}
.wf-user-dot {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  background: #1a73e8;
  border: 3px solid #fff;
  box-shadow: 0 0 0 rgba(26, 115, 232, 0.5);
  animation: wf-gps-pulse 1.8s ease-out infinite;
}
/* Heading chevron: a solid arrowhead pointing in the direction of travel, pivoting around
   the dot like a compass needle. Rotated by the --wf-heading CSS var (travel heading + the
   map's current bearing, set in map.js) so it stays correct even as the map rotates
   heading-up; eased at 0.15s to match the reference puck. Hidden until a heading is known. */
.wf-user-heading {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 0;
  block-size: 0;
  border-inline: 9px solid transparent;
  border-block-end: 18px solid #1a73e8;
  transform-origin: 50% 100%;
  translate: -50% -100%;
  rotate: calc(var(--wf-heading, 0) * 1deg);
  transition: rotate 0.15s ease-out;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  opacity: 0;
  pointer-events: none;
}
.wf-user--has-heading .wf-user-heading {
  opacity: 1;
}
.wf-user--has-heading .wf-user-dot {
  inline-size: 12px;
  block-size: 12px;
}
@keyframes wf-gps-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.5);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(26, 115, 232, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(26, 115, 232, 0);
  }
}

/* Campus geometry (rendered beneath the markers). Building footprints + the walkable
   path network, styled here so the look is white-label-tunable. */
.wf-building {
  fill: #cfd8dc;
  fill-opacity: 0.7;
  stroke: #b0bec5;
  stroke-width: 1.5;
}
/* Walkable path/road network — golden, matching the demo ("unselected route" yellow). */
.wf-path {
  fill: none;
  stroke: #f0c040;
  stroke-width: 4;
  stroke-opacity: 0.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Permanent place labels (one per POI) — frosted white pill, matching the demo. */
.leaflet-tooltip.wf-poi-label {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #1f2d3d;
  white-space: nowrap;
  backdrop-filter: blur(2px);
}
/* Kill Leaflet's default tooltip arrow for the pill look. */
.leaflet-tooltip.wf-poi-label::before {
  display: none;
}

/* POI markers — CSS dots (divIcons), coloured by location type. No image sprite, so
   they render reliably offline. The dot is a coloured disc with a white ring + shadow;
   `--poi` is set per type below and defaults to the tenant primary colour. */
.wf-poi {
  --poi: var(--color-primary);
}
.wf-poi__dot {
  display: block;
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  background: var(--poi);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 0.1s ease;
}
.wf-poi__dot:hover {
  transform: scale(1.25);
}

/* Type palette. building falls through to the tenant primary (--poi default). */
.wf-poi--gate {
  --poi: #34a853;
}
.wf-poi--parking {
  --poi: #5f6368;
}
.wf-poi--amenity {
  --poi: #f29900;
}
.wf-poi--landmark {
  --poi: #a142f4;
}
.wf-poi--department {
  --poi: #12b5cb;
}