/* map.css — DROP-IN REPLACEMENT
	Fixes:
	- DO NOT override Mapbox marker positioning (position/transform on .mapboxgl-marker)
	- Your .mb-marker-host IS the Mapbox marker element (Mapbox adds mapboxgl-marker + inline transform)
	- Keep all styling/transform effects on CHILDREN only
*/

/* ------------------------------
	Map container sizing (desktop)
------------------------------ */
@media (min-width: 992px) {
    .map-section {
        position: sticky;
        top: var(--nav-h);
        height: calc(100vh - var(--nav-h));
        overflow: hidden;
    }

    #leafletMap {
        height: 100% !important;
    }
}

/* ------------------------------
	Mapbox container hardening
------------------------------ */
#leafletMap {
    position: relative;
}

    #leafletMap,
    #leafletMap * {
        -webkit-user-select: none;
        user-select: none;
    }

        #leafletMap .mapboxgl-canvas {
            z-index: 0 !important;
            outline: none;
        }

        /* IMPORTANT: never touch position or transform here */
        #leafletMap .mapboxgl-marker {
            z-index: 600;
            pointer-events: auto;
            overflow: visible !important;
        }

/* ==========================================================================
   PURE MAPBOX CLUSTERS (NO DOM MARKERS)
   Drop-in replacement for old .mb-marker / .mb-cluster DOM styles
   ========================================================================== */

/* --- If you had DOM marker styles, neutralize them (safe even if not present) --- */
.mb-marker-host,
.mb-marker,
.mb-pin,
.mb-icon,
.mb-shadow,
.mb-cluster,
.mb-cluster-count {
    display: none !important;
}

/* --- Better pointer cursor behavior for Mapbox interactive layers --- */
.mapboxgl-canvas {
    cursor: grab;
}

    .mapboxgl-canvas:active {
        cursor: grabbing;
    }

/* --- Make Mapbox attribution not steal focus / feel glitchy in split layout --- */
.mapboxgl-ctrl-attrib,
.mapboxgl-ctrl-bottom-right,
.mapboxgl-ctrl-bottom-left {
    user-select: none;
}

/* --- Optional: keep labels readable over imagery --- */
.mapboxgl-popup-content {
    font-family: inherit;
}

/* --- Optional: your business card highlight can stay; included here only if missing --- */
#businessListContainer.has-highlight article.is-highlighted {
    outline: 2px solid rgba(239, 68, 68, 0.55);
    outline-offset: 2px;
}

/* If you use pulsing class elsewhere, keep it smooth */
#businessListContainer article.is-pulsing {
    animation: bizPulse 650ms ease-out 1;
}

@keyframes bizPulse {
    0% {
        transform: translateZ(0) scale(1);
    }

    45% {
        transform: translateZ(0) scale(1.01);
    }

    100% {
        transform: translateZ(0) scale(1.01);
    }
}

/* During region transitions, reduce list paint contention */
body.region-transitioning #businessListContainer img {
    content-visibility: auto;
    contain-intrinsic-size: 300px 225px;
}

/* Debug control */
.map-debug-control {
    background: rgba(0,0,0,.65);
    color: #fff;
    padding: .5rem .6rem;
    border-radius: .5rem;
    font-size: 12px;
    line-height: 1.25;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    max-width: 380px;
}

    .map-debug-control b {
        font-weight: 700;
    }