/* Frontend styles for Murmurations map markers */

/* Smooth scaling on hover for both image-based and div-based markers */
.leaflet-marker-icon.dm-marker-icon,
.leaflet-marker-icon.dm-marker-icon img,
.dm-div-icon,
.dm-div-icon svg {
  transition: transform 120ms ease, filter 120ms ease;
  transform-origin: 50% 100%; /* scale from the bottom (pin tip) */
  pointer-events: auto !important;
}

/* Targeted popup width overrides to prevent theme rules from making
   popups too narrow for long names. Keep selectors specific to Leaflet
   popups and conservative in size to avoid breaking small screens. */
.leaflet-container .leaflet-popup-content-wrapper,
.leaflet-container .leaflet-popup-content {
  /* Allow reasonable growth but cap so it doesn't become huge on very wide viewports */
  max-width: min(90vw, 640px) !important;
  /* Ensure a sensible minimum so names don't wrap into multiple short lines */
  min-width: 220px !important;
  box-sizing: border-box !important;
}

.leaflet-container .leaflet-popup-content .dm-popup-title {
  /* Allow title to use the available width and wrap naturally */
  display: block !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.leaflet-marker-icon.dm-marker-icon:hover,
.leaflet-marker-icon.dm-marker-icon:hover img,
.dm-div-icon:hover,
.dm-div-icon:hover svg {
  transform: scale(1.10);
  z-index: 9999 !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.18));
}

/* Improve hit area so hover is easier on small markers */
.dm-div-icon {
  display: inline-block;
  pointer-events: auto;
}

/* Cluster marker styling */
.dm-cluster-icon {
  /* Ensure the divIcon box is centered around the anchor */
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

/* Make cluster icons animate and show the same hover treatment as individual markers */
.dm-cluster-icon,
.dm-cluster-icon .dm-cluster-count {
  transition: transform 120ms ease, filter 120ms ease;
  /* Match pin transform origin so clusters scale from the bottom (pin tip) too */
  transform-origin: 50% 100%;
}

.dm-cluster-icon:hover,
.dm-cluster-icon:hover .dm-cluster-count {
  transform: scale(1.10);
  z-index: 9999 !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.18));
}

.dm-cluster-icon .dm-cluster-count {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  /* Use the configured accent color (CSS variable) with a conservative darker fallback */
  background: linear-gradient(180deg, var(--dm-accent, #66bb6a) 0%, #2e7d32 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  line-height: 1;
}

/* Provide a CSS variable on the wrapper to allow per-shortcode accent color */
.dm-murm-wrapper { --dm-accent: var(--dm-accent, #66bb6a); }

/* Profile / View profile button uses accent color */
.dm-profile-btn {
  display:inline-block;
  padding:6px 10px;
  color:#fff;
  background: linear-gradient(180deg, var(--dm-accent, #66bb6a) 0%, #2e7d32 100%);
  border-radius:4px;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,0.15);
}

/* Watercolour-styled popups: applied when a popup has the class dm-popup--watercolour
   (the embed script adds this class via the Leaflet popup `className` option). */
.leaflet-popup.dm-popup--watercolour .leaflet-popup-content-wrapper {
  background: linear-gradient(180deg,#fffdf8 0%,#fbf6ef 100%);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  color: #222;
  padding: 0.2rem 0.4rem; /* small padding on wrapper; inner content uses its own spacing */
}

.leaflet-popup.dm-popup--watercolour .leaflet-popup-content {
  /* Ensure inner content text inherits the wrapper color and spacing looks good */
  color: inherit;
  padding: 8px 10px !important;
}

/* Style the triangular tip to be softer and mix with the paper background */
.leaflet-popup.dm-popup--watercolour .leaflet-popup-tip {
  /* Use the same soft gradient as the wrapper; fallback to a light paper color */
  background: linear-gradient(180deg, var(--dm-popup-top, #fffdf8) 0%, var(--dm-popup-bottom, #fbf6ef) 100%);
  /* border that blends with the wrapper border */
  border-left: 1px solid var(--dm-popup-border, rgba(0,0,0,0.06));
  border-top: 1px solid var(--dm-popup-border, rgba(0,0,0,0.06));
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  /* Slight vertical offset so the tip sits comfortably with rounded corners */
  transform: translateY(1px) rotate(45deg);
}

.leaflet-popup.dm-popup--watercolour .leaflet-popup-tip-container {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.06));
}

/* Buttons inside watercolour popups should use the accent-derived tints */
.leaflet-popup.dm-popup--watercolour .dm-profile-btn {
  background: var(--dm-popup-button-bg, rgba(102,187,106,0.14));
  color: var(--dm-popup-button-color, #1b1b1b);
  border: 1px solid var(--dm-popup-button-border, #66bb6a);
  box-shadow: none;
}

.leaflet-popup.dm-popup--watercolour .dm-website-link {
  background: rgba(0,0,0,0.06);
  color: var(--dm-popup-button-color, #1b1b1b);
  border: 1px solid rgba(0,0,0,0.06);
}

/* Remove the default focus/outline that browsers draw (e.g. when Alt is pressed) around
   marker icons. Keep interactions via hover/aria intact but avoid the ugly black box. */
.leaflet-marker-icon:focus,
.leaflet-marker-icon:focus-visible,
.dm-div-icon:focus,
.dm-div-icon:focus-visible,
.dm-div-icon svg:focus,
.dm-div-icon img:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Blink/WebKit-specific rendering hints (conservative) to reduce subpixel seams and
   encourage GPU compositing in Chrome/Blink without impacting Firefox.
   Matches Blink/WebKit engines via a WebKit media-query hack. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .leaflet-container,
  .leaflet-container .leaflet-pane,
  .leaflet-container .leaflet-layer,
  .leaflet-container .leaflet-tile-pane {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    will-change: transform;
  }

  .leaflet-container img,
  .leaflet-tile {
    /* Prefer crisper sampling in Blink; keep conservative set to avoid Firefox regressions */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
    /* Transparent background so we don't introduce visible boxes behind tiles */
    background-color: transparent;
  }
}