/* mapchicago/css/mapchicago.css */

#map-chicago-container {
    position: relative;
    width: 100%;
    max-width: 800px; /* Adjust this max-width if your map is larger or smaller */
    margin: 0 auto;
    overflow: hidden;
}

#map-chicago-container svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Base style for all path elements within the SVG */
/* These styles will be overridden by inline 'fill'/'stroke' attributes if present in the SVG. */
/* If your map appears unstyled or with wrong colors, you MUST remove inline fill/stroke from your chicago_neighborhoods.svg paths. */
#map-chicago-container svg path {
    fill: var(--mapchicago-bg-color, #cccccc); /* Default fill color for areas, set by JS below */
    stroke: var(--mapchicago-border-color, #ffffff); /* Border color, set by JS below */
    stroke-width: 1px;
    cursor: pointer; /* Ensure cursor is a pointer */
    transition: fill 0.2s ease-in-out; /* Smooth transition for hover effect */
    user-select: none; /* Prevent text selection */
}

/* Style for the pop-up neighborhood name display */
#neighborhood-name-display {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none; /* Allows mouse events to pass through to the map */
    font-size: 14px;
    line-height: 1;
    box-sizing: border-box;
}

/* Specific styles for name display positions (controlled by JS adding classes) */
#map-chicago-container.name-top #neighborhood-name-display {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

#map-chicago-container.name-bottom #neighborhood-name-display {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}