/**
 * Project page: "მდებარეობა" — address heading over a Leaflet map.
 *
 * Frame and heading come from base.css (.deka-section, .deka-section-head).
 * Here: a square, hairline-bordered frame (22rem on phones → 36rem on wide
 * screens), grey tiles so the map reads in the page's palette, and Leaflet's
 * own controls and popup squared off to match. The pin and popup text rules
 * repeat about-map.css on purpose: that file only loads on the About page; they
 * stay single-class so the brand layer's .deka-map__* rules still win.
 *
 * Specificity: leaflet.css is enqueued by the partial, after this file, so it
 * prints later and wins ties. Every rule that overrides Leaflet is therefore
 * scoped under .deka-project-map to stay one class ahead of it (including its
 * .leaflet-touch .leaflet-bar a:first-child radius and .leaflet-div-icon box).
 */

.deka-project-map__frame {
  position: relative;
  border: 1px solid var(--deka-divider);
  border-radius: 0;
  background: var(--deka-surface-sunken); /* holds the space while tiles load */
}

.deka-project-map__canvas {
  height: clamp(22rem, 45vw, 36rem); /* 352 → 576 */
}

/* Leaflet paints its panes at z-index 400+; contain them so the header, the
   menu and the floating picker still sit above the map. Its own #ddd ground is
   swapped for the frame's. */
.deka-project-map .deka-project-map__canvas.leaflet-container {
  isolation: isolate;
  z-index: 0;
  background: transparent;
  font-family: var(--deka-font-body);
}

.deka-project-map .deka-project-map__canvas:focus-visible {
  outline: 2px solid var(--deka-focus-ring);
  outline-offset: 2px;
}

/* Only the tile pane: the marker and popup panes are siblings, so the pin
   keeps its colour on the grey streets. */
.deka-project-map .leaflet-tile-pane {
  filter: grayscale(1) contrast(0.95) brightness(1.03);
}

/* --- Leaflet controls ------------------------------------------------------ */

.deka-project-map .deka-project-map__canvas.leaflet-container .leaflet-bar {
  border: 1px solid var(--deka-divider);
  border-radius: 0;
  box-shadow: none;
}

.deka-project-map .deka-project-map__canvas.leaflet-container .leaflet-bar a {
  width: 2.25rem; /* 36 — a comfortable tap target */
  height: 2.25rem;
  line-height: 2.25rem;
  border-radius: 0;
  border-bottom-color: var(--deka-divider);
  background: var(--deka-surface-page);
  color: var(--deka-text);
  font-weight: var(--deka-weight-regular);
  transition: background-color var(--deka-duration-fast) var(--deka-ease-out);
}

.deka-project-map .deka-project-map__canvas.leaflet-container .leaflet-bar a:last-child {
  border-bottom: 0;
}

.deka-project-map .deka-project-map__canvas.leaflet-container .leaflet-bar a:hover {
  background: var(--deka-surface-control);
}

.deka-project-map .deka-project-map__canvas.leaflet-container .leaflet-bar a.leaflet-disabled {
  color: var(--deka-text-subtle);
  background: var(--deka-surface-page);
}

.deka-project-map .deka-project-map__canvas.leaflet-container .leaflet-control-attribution {
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem; /* 10 */
  color: var(--deka-text-muted);
  background: color-mix(in srgb, var(--deka-surface-page) 85%, transparent);
}

.deka-project-map .deka-project-map__canvas.leaflet-container .leaflet-control-attribution a {
  color: inherit;
}

/* --- Popup ----------------------------------------------------------------- */

.deka-project-map .leaflet-popup-content-wrapper,
.deka-project-map .leaflet-popup-tip {
  border: 1px solid var(--deka-divider);
  border-radius: 0;
  background: var(--deka-surface-page);
  color: var(--deka-text);
  box-shadow: none;
}

.deka-project-map .leaflet-popup-content {
  margin: 0.875rem 1.75rem 0.875rem 1rem;
  line-height: 1.4;
}

/* --- Marker (see about-map.css) -------------------------------------------- */

/* Leaflet gives divIcons a white box with a grey border by default. */
.deka-project-map .deka-map__marker {
  background: none;
  border: 0;
}

.deka-map__pin {
  display: grid;
  place-items: center;
  width: 2.75rem; /* 44 */
  height: 2.75rem;
  background: var(--deka-action);
  /* Round on three corners, square on the fourth; rotating -45deg turns that
     corner into the point, giving the teardrop without an image. */
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  /* A light ring keeps the pin legible where it lands on dark roads. */
  box-shadow: 0 0 0 2px var(--deka-surface-page);
}

.deka-map__pin svg {
  width: 1.375rem;
  height: 1.375rem;
  color: var(--deka-action-text);
  transform: rotate(45deg); /* upright inside the rotated pin */
}

.deka-map__name {
  display: block;
  font-family: var(--deka-font-display);
  font-size: 1rem;
  font-weight: var(--deka-weight-semibold);
  color: var(--deka-text);
}

.deka-map__place {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.875rem;
  color: var(--deka-text-muted);
}