/*
 * Leaflet Marker Clustering Styles
 * Custom styling for clustered map markers on Browse pages
 * Clusters styled to look like larger versions of regular circle markers
 */

/* Base cluster styles - mimics circle marker appearance */
/* Note: Leaflet uses inline transform for positioning, so we can't use transform for scaling */
/* Instead, the inner div handles scaling via width/height adjustments */
.marker-cluster {
    /* Outer div positioned by Leaflet - don't add visual styles here */
    cursor: pointer;
}

/* Inner div is the visible circle with all styling */
.marker-cluster div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.marker-cluster:hover div {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.marker-cluster span {
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
}

/* Organization-specific cluster styles (navy/gold brand) */
/* All clusters use same color scheme as regular markers: navy stroke, gold fill */
.marker-cluster-org div {
    background-color: var(--browse-marker-fill, #FFB200);
    border: 2px solid var(--browse-marker-stroke, #25336E);
    color: var(--browse-marker-stroke, #25336E);
}

/* Listing-specific cluster styles (orange brand) */
/* All clusters use same color scheme as regular markers: orange stroke, light orange fill */
.marker-cluster-listing div {
    background-color: var(--browse-marker-fill, #FFD56A);
    border: 2px solid var(--browse-marker-stroke, #D39400);
    /* Darker orange for better contrast against yellow background */
    color: #8B6508;
}

/* Click animation - subtle pulse effect on inner div */
@keyframes cluster-pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

.marker-cluster.clicked div {
    animation: cluster-pulse 0.3s ease-out;
}

/* Cluster highlight state when hovering over a corresponding result card */
/* Uses CSS transform scale for proportional scaling of both circle and text */
.marker-cluster.cluster-highlight {
    z-index: 1000 !important;
}

.marker-cluster.cluster-highlight div {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* Spiderfy effect styling (when clusters expand at max zoom) */
.marker-cluster-spiderfy {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
}

/* Spiderfy leg lines - brand navy for organizations */
.browse.browse--organizations .leaflet-oldie .marker-cluster-spider-leg,
.browse.browse--organizations .marker-cluster-spider-leg {
    stroke: var(--browse-marker-stroke, #25336E);
    stroke-opacity: 0.6;
    stroke-width: 2;
}

/* Spiderfy leg lines - orange for listings */
.browse.browse--listings .leaflet-oldie .marker-cluster-spider-leg,
.browse.browse--listings .marker-cluster-spider-leg {
    stroke: var(--browse-marker-stroke, #D39400);
    stroke-opacity: 0.6;
    stroke-width: 2;
}

/* Coverage polygon styling is configured via JavaScript polygonOptions */
/* See markerClusterGroup initialization in browse.html and listings/browse.html */

/* Ensure clusters work well on mobile */
@media (max-width: 768px) {
    .marker-cluster div {
        /* Slightly larger touch targets on mobile */
        border-width: 4px;
    }
}