/**
 * PB Map Block Styles
 * Styles for both editor and frontend
 */

/* Block container */
.pb-map {
    margin: var(--spacing-md) 0;
}

/* Map container */
.pb-map-container {
    border: 1px solid var(--color-light-grey);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Ensure Leaflet controls are properly styled */
.pb-map-container .leaflet-control-zoom {
    border: none;
    border-radius: var(--border-radius);
}

.pb-map-container .leaflet-control-zoom a {
    background-color: var(--color-white);
    color: var(--colour--text);
    border: 1px solid var(--color-light-grey);
}

.pb-map-container .leaflet-control-zoom a:hover {
    background-color: var(--color-light-grey);
}

/* Attribution styling */
.pb-map-container .leaflet-control-attribution {
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
}

.pb-map-container .leaflet-control-attribution a {
    color: var(--color-primary);
}

/* Error states */
.pb-map-error {
    padding: var(--spacing-md);
    background-color: var(--color-light-grey);
    border: 1px solid var(--color-light-grey);
    border-radius: var(--border-radius);
    color: var(--colour--text);
    text-align: center;
    font-style: italic;
}

/* Editor-specific styles */
.block-editor-block-list__layout .pb-map {
    /* Ensure block is properly spaced in editor */
    margin: var(--spacing-md) 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .pb-map {
        margin: var(--spacing-sm) 0;
    }
    
    .pb-map-container {
        min-height: 250px;
    }
}

/* Wide and full alignment support */
.pb-map.alignwide {
    max-width: var(--content-width-wide, 1200px);
    margin-left: auto;
    margin-right: auto;
}

.pb-map.alignfull {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.pb-map.alignfull .pb-map-container {
    border-radius: 0;
}