/**
 * WBSL Interactive Map Styles
 * Default: No changes (SVG's black/white styling)
 * Highlighted: Solid category color
 * Hover: White overlay at 50%
 */

/* When highlighted: Apply solid category color to fill only */
.map-location.highlighted.category-stages polygon,
.map-location.highlighted.category-stages path,
.map-location.highlighted.category-stages rect,
.map-location.highlighted.category-stages circle,
.map-location.highlighted.category-stages ellipse {
    fill: #328CF0 !important;  /* Solid blue */
}

.map-location.highlighted.category-workshops polygon,
.map-location.highlighted.category-workshops path,
.map-location.highlighted.category-workshops rect,
.map-location.highlighted.category-workshops circle,
.map-location.highlighted.category-workshops ellipse {
    fill: #f82965 !important;  /* Solid pink */
}

.map-location.highlighted.category-offices polygon,
.map-location.highlighted.category-offices path,
.map-location.highlighted.category-offices rect,
.map-location.highlighted.category-offices circle,
.map-location.highlighted.category-offices ellipse {
    fill: #31c8c8 !important;  /* Solid teal */
}

.map-location.highlighted.category-support polygon,
.map-location.highlighted.category-support path,
.map-location.highlighted.category-support rect,
.map-location.highlighted.category-support circle,
.map-location.highlighted.category-support ellipse {
    fill: #263cd4 !important; /*Solid blue */
}


/* When highlighted AND hovering: Add white overlay at 50% */
.map-location.highlighted:hover polygon,
.map-location.highlighted:hover path,
.map-location.highlighted:hover rect,
.map-location.highlighted:hover circle,
.map-location.highlighted:hover ellipse {
    fill: rgba(255, 255, 255, 0.5) !important;  /* White overlay at 50% */
}

/* Force text to always be white - MUST override everything */
.map-location text,
.map-location tspan,
.map-location path.cls-26,
.map-location.highlighted text,
.map-location.highlighted tspan,
.map-location.highlighted path.cls-26,
.map-location.highlighted:hover text,
.map-location.highlighted:hover tspan,
.map-location.highlighted:hover path.cls-26,
.map-location.active-location text,
.map-location.active-location tspan,
.map-location.active-location path.cls-26,
.map-location.active-location.highlighted text,
.map-location.active-location.highlighted tspan,
.map-location.active-location.highlighted path.cls-26 {
    fill: #ffffff !important;
    stroke: none !important;
}

/* Active location (current page) - always looks like it's being hovered */
.map-location.active-location.highlighted polygon,
.map-location.active-location.highlighted path:not(.cls-26),
.map-location.active-location.highlighted rect,
.map-location.active-location.highlighted circle,
.map-location.active-location.highlighted ellipse {
    fill: rgba(255, 255, 255, 0.5) !important;  /* Same as hover - 50% white overlay */
}