/* map.css — Leaflet map container + route polyline + markers.
   Everything in this file is PRODUCT-owned (--wf-*), not tenant-themed. See css/base.css. */
#map {
  block-size: 100%;
  inline-size: 100%;
}

/* Active navigation route — a Google-Maps-style layered path (ported from the reference
   app): a faded grey "completed" trail behind the user, a white casing, and the vibrant
   blue "remaining ahead" line on top. map.js stacks three Leaflet polylines tagged with
   these classes (draw order grey → white → blue) so the look lives here rather than in JS.
   Route Blue is FIXED across every tenant: the selected route has to read as the route
   against the golden path network below, and a campus that picked a blue-ish brand colour
   would otherwise lose its own route line. Brand Guidelines v2.0 §05, and
   docs/LANDING-PAGE.md §7 — which promises customers exactly this. */
.wf-route-done {
  stroke: var(--wf-ink-300);
  stroke-width: 8;
  stroke-opacity: 0.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.wf-route-casing {
  stroke: var(--wf-paper);
  stroke-width: 14;
  stroke-opacity: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.wf-route {
  stroke: var(--wf-route);
  stroke-width: 8;
  stroke-opacity: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Live user-location ("you are here") — a pulsing Route-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: var(--wf-route);
  border: 3px solid var(--wf-paper);
  box-shadow: 0 0 0 color-mix(in srgb, var(--wf-route) 50%, transparent);
  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 var(--wf-route);
  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 color-mix(in srgb, var(--wf-route) 50%, transparent);
  }
  70% {
    box-shadow: 0 0 0 14px color-mix(in srgb, var(--wf-route) 0%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--wf-route) 0%, transparent);
  }
}

/* Campus geometry (rendered beneath the markers): building footprints + the walkable
   path network. */
.wf-building {
  fill: var(--wf-map-building);
  fill-opacity: 0.7;
  stroke: var(--wf-map-building-edge);
  stroke-width: 1.5;
}
/* Walkable path/road network — golden. Deliberately NOT --wf-warning: this line is what
   the Route-Blue polyline is read AGAINST, so its job is contrast with the route, not
   semantics. Retuning it is a route-legibility change, not a cosmetic one. */
.wf-path {
  fill: none;
  stroke: var(--wf-map-path);
  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: color-mix(in srgb, var(--wf-paper) 95%, transparent);
  border: 1px solid color-mix(in srgb, var(--wf-ink-900) 8%, transparent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--wf-ink-900);
  white-space: nowrap;
  backdrop-filter: blur(2px);
  /* Interactive tooltip → make the pill an easy, obvious tap target. */
  pointer-events: auto;
  cursor: pointer;
}
/* 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.

   Colour alone never carries the type — js/icons.js renders the type's glyph inside the
   dot, so the palette is reinforcement, not the signal (Brand Guidelines v2.0 §10). */
.wf-poi {
  --poi: var(--color-primary);
}
.wf-poi__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  background: var(--poi);
  border: 2px solid var(--wf-paper);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 0.1s ease;
}
.wf-poi__dot > svg {
  inline-size: 11px;
  block-size: 11px;
  color: var(--wf-paper);
  pointer-events: none;
}
.wf-poi__dot:hover {
  transform: scale(1.25);
}

/* Type palette. building falls through to the tenant primary (--poi default). */
.wf-poi--gate {
  --poi: var(--wf-success);
}
.wf-poi--parking {
  --poi: var(--wf-ink-500);
}
.wf-poi--amenity {
  --poi: var(--wf-warning);
}
.wf-poi--landmark {
  --poi: var(--wf-coral-300);
}
.wf-poi--department {
  --poi: var(--wf-route);
}
/* The active destination. Coral pairs with the Route-Blue line — the brand's map pairing
   (§07) — and outranks the type palette, so it wins on specificity by being last. */
.wf-poi--destination {
  --poi: var(--wf-coral-500);
}