/* "Display style: Map" for property_breakdown metrics blocks (e.g. a
   dcterms:spatial breakdown like "Títulos por localidade"). Uses Leaflet +
   leaflet-providers + leaflet.markercluster, all loaded from the Mapping
   module's bundled assets (see Site/BlockLayout/MetricsCounter.php::
   prepareRender()). Leaflet's own CSS is loaded first, so this file only
   needs to override its defaults; MarkerCluster.css is loaded for its
   generic cluster-animation transition rules only — its "Default" theme
   (the classic yellow/orange circles) is skipped since clusterIcon() in
   metrics-counter-map.js supplies fully custom markup instead. */

.metrics-counter-map {
    background-color: #eee;
    border-radius: 12px;
    height: 480px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

@media (max-width: 700px) {
    .metrics-counter-map {
        height: 360px;
    }
}

/* Leaflet's default div-icon styling is a small white square with a border
   (meant for plain content icons) — reset it since the marker below draws
   its own circular badge. */
.metrics-counter-map__marker-wrap {
    background: transparent;
    border: none;
}

.metrics-counter-map__marker {
    align-items: center;
    background-color: var(--metric-color, #333);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    color: #fff;
    display: flex;
    height: 100%;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

a.metrics-counter-map__marker:hover,
a.metrics-counter-map__marker:focus-visible {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    transform: scale(1.08);
}

/* A cluster (several different places merged at low zoom) isn't a link —
   clicking it zooms in instead — so it gets a subtle ring to read as "more
   than one place" without looking clickable-to-somewhere the way the
   colored, single-place markers do. */
.metrics-counter-map__marker--cluster {
    background-color: #555;
    box-shadow: 0 0 0 4px rgba(85, 85, 85, 0.25), 0 2px 8px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}

.metrics-counter-map__value {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
}

.leaflet-tooltip.leaflet-tooltip-top {
    border: none;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    font-size: 0.8rem;
    padding: 4px 9px;
}

/* Ctrl+scroll-to-zoom hint, shown briefly the first couple of times someone
   scrolls over the map without holding Ctrl (see setupCtrlScrollZoom() in
   metrics-counter-map.js). */
.metrics-counter-map__hint {
    background-color: rgba(0, 0, 0, 0.72);
    border-radius: 6px;
    color: #fff;
    font-size: 0.85rem;
    left: 50%;
    opacity: 0;
    padding: 8px 16px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.metrics-counter-map__hint.is-visible {
    opacity: 1;
}