/* Basic styling for the wrapper */
.county-map-filter {
  max-width: 900px;
  margin: 0 auto;
  font-family: sans-serif;
}

/* Dropdown styling */
#county-select {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 1em 0;
  padding: 0.5em;
  font-size: 1rem;
}

/* SVG map container */
#county-map-wrapper {
  margin-top: 2em;
  text-align: center;
}

/* Style all county paths */
#sofa-county-map path[data-county] {
  fill: #F7FAFC;
  stroke: #666;
  stroke-width: 1;
  cursor: pointer;
  transition: fill 0.2s ease;
}

/* Counties WITH services get a different background color */
#sofa-county-map path[data-county].has-services {
  fill: #A0AEC0;
}

/* Hover effect */
#sofa-county-map path[data-county]:hover {
  fill: #EDF2F7;
}

/* Active (clicked or selected) county */
#sofa-county-map path[data-county].active {
  fill: var(--nugget-gold);
  stroke: #333;
  stroke-width: 1.5;
}

/* Optional: change stroke when not selected */
#sofa-county-map path[data-county]:not(.active) {
  stroke-opacity: 0.5;
}

.county-tooltip {
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 6px 10px;
  height: 30px;
  width: 100px;
  border-radius: 6px;
  font-size: 0.9rem;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transform: translate(10px, 10px);
}

/* Output display */
#selected-county-output {
  font-size: 1.1rem;
}
#selected-county-output strong {
  color: var(--nugget-gold);
}

/* Hide all county label groups by default */
#sofa-county-map g {
  display: none;
}

/* Show labels for counties with services */
#sofa-county-map g.has-services {
  display: block;
}

@media only screen and (min-width: 768px) {
    .county-map-filter {
      display: flex;
      column-gap: 100px;
    }
    .map-filter-info {
      width: 400px;
    }
}