/* The maps on the public "Find your home" screens.
 *
 * Two of them, and this covers both: the map the address screen is drawn on —
 * panned, zoomed and pressed, see find_home_map_controller.js — and the still
 * one behind the second screen's form, see map_background_controller.js.
 *
 * Short, because almost everything on these screens is Tailwind: the pins, the
 * bubbles a zoomed-out screen is drawn with, and the card a pressed pin opens
 * are the only things here Leaflet needs talking out of its own styling.
 *
 * Loaded only by those screens, because they are the only public pages that
 * pull Leaflet in, and everything here exists to override Leaflet's own
 * stylesheet rather than to style anything of ours. Everything else on the
 * screens is Tailwind. Same arrangement as property_map.css, which does this
 * job for the admin map.
 *
 * Loaded after leaflet.css and matching it for specificity, so source order is
 * what carries these. Keep the pair in that order in the link tag.
 */

/* --- The still map behind the second screen --- */

.map-background {
  /* Leaflet paints its container grey for the moment before the tiles land.
     That is right for a map somebody is reading and wrong for one behind a
     form: what belongs under this type is the emerald the rest of the public
     site sits on, whether the tiles are a moment away or — no token, an origin
     off the allowlist — never coming. The section's own background shows
     through instead. */
  background: transparent;

  /* Inert. Every handler is off in map_background_controller.js, but a
     background should not be swallowing a tap or a drag meant for the page
     either, and there is nothing in there to click: the credit is printed under
     the form rather than drawn into the corner of the map. */
  pointer-events: none;
}

/* --- The map the address screen is drawn on --- */

/* Bubbles standing in for the buildings a zoomed-out screen holds too many of
   to draw. The section's own emerald rather than Leaflet's blue, and darker
   than the admin map's so the count on it reads white.

   leaflet.css loads first and sets `display: block` on .leaflet-marker-icon, so
   this is qualified with that class to outrank it — a bare .map-cluster loses
   on source order and the count lands in the corner instead of the middle. */
.leaflet-marker-icon.map-cluster {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: rgb(4 120 87 / 85%); /* emerald-700 */
  box-shadow: 0 0 0 4px rgb(4 120 87 / 20%);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

/* A building, drawn as the thing it is: the glyph out of
   find_home_map_controller.js in a circle, in the section's own eggplant
   against the emerald the bubbles wear, so the two never read as the same kind
   of mark. Dark enough for the glyph to be white on it, and ringed in the same
   colour so a pin standing on a dark building footprint still has an edge.

   Qualified with .leaflet-marker-icon for the reason the bubbles are: leaflet
   .css loads first and sets `display: block` on it, which would leave the glyph
   in the corner rather than the middle.

   The size is written onto each pin by Leaflet, from iconSize — the glyph is a
   share of whatever that turns out to be. */
.leaflet-marker-icon.map-pin {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: #553A47; /* eggplant-700 */
  box-shadow: 0 0 0 2px rgb(36 25 31 / 35%), 0 1px 3px rgb(36 25 31 / 40%); /* eggplant-900 */
  cursor: pointer;
}

.map-pin svg {
  width: 58%;
  height: 58%;
  fill: #ffffff;
}

/* Hovered on something with a pointer: the one about to be pressed lifts out of
   the crowd around it. Transform rather than a size change, so nothing reflows
   and the pin stays anchored where the building is. */
.leaflet-marker-icon.map-pin:hover,
.leaflet-marker-icon.map-pin:focus-visible {
  background-color: #3d2933; /* eggplant-800 */
  z-index: 1000 !important; /* Leaflet writes a per-marker z-index inline. */
}

/* Pressing a pin shows the card a building's own page opens with, plus the
   button that opens it — see buildings/_hero, and pinCard() in
   find_home_map_controller.js, which writes the lines inside it in the page's
   own Tailwind classes.

   Ours rather than a Leaflet tooltip, and that is the whole reason it is here:
   Leaflet draws a tooltip inside the map's own pane, which is transformed on
   every pan — and a transformed element is a stacking context, so nothing in
   there can be painted over the panel floating above the map however its
   z-index is written. This card is a sibling of the panel instead, one step
   above it. */
.map-tip {
  /* The point given to it is the pin: the card hangs above that point, centred
     on it, and #showCard shifts it sideways near an edge of the map. */
  transform: translate(-50%, -100%);
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem;
  background-color: #f7edde; /* ecru-100 */
  color: #022c22; /* emerald-950 */
  /* Lifted off the map the way the page's own card is lifted off its
     photograph, in the same emerald rather than in grey. */
  box-shadow: 0 10px 20px -6px rgb(2 44 34 / 45%);
  /* Wide enough that the line of facts under the address fits on one, since it
     is the same handful of words on nearly every building, and capped so a long
     address becomes two lines rather than a banner across the map. */
  width: max-content;
  max-width: 18rem;
}

/* Under the pin instead, for a pin with no room above it: the section clips
   what runs past its own top edge, and a card cut off up there is a button
   nobody can reach rather than a caption half read. #showCard measures and
   decides. */
.map-tip--below {
  transform: translate(-50%, 0);
}

/* The tail, and the point of hanging the card off the pin rather than beside
   it: it lands on the building the card is about. `--tail` is where along the
   card that is, which is the middle until the card has been held back from an
   edge of the map — see #showCard. */
.map-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--tail, 50%);
  margin-left: -0.375rem;
  border: 0.375rem solid transparent;
  border-bottom: 0;
  border-top-color: #f7edde; /* ecru-100 */
}

/* And the same tail on the other edge, for a card hanging below its pin. */
.map-tip--below::after {
  top: auto;
  bottom: 100%;
  border-top: 0;
  border-bottom: 0.375rem solid #f7edde; /* ecru-100 */
}