/* Basic reset for container */
.image-hotspots {
  position: relative;
  max-width: 1000px;
  margin: 2rem auto;
}

.image-hotspots img {
  display: block;
  width: 100%;
  height: auto;
}

/* Layer that holds absolute-positioned links */
.hotspots-layer {
  position: absolute;
  inset: 0;
}

/* Each hotspot is an anchor for accessibility and native navigation */
.hotspot {
  position: absolute;
  display: block;
  outline: none;
  border: 2px solid transparent;
  border-radius: 6px;
}

/* Visible focus state for keyboard users */
.hotspot:focus-visible {
  border-color: #2563eb; /* blue-600 */
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25);
}

/* Optional hover highlight. Remove if you want invisible areas. */
.hotspot:hover::after,
.hotspot:focus-visible::after {
  content: attr(aria-label);
  position: absolute;
  left: 50%;
  top: -0.5rem;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}

/* If you want always-visible debug boxes around hotspots, uncomment: */
/*
.hotspot {
  background: rgba(37, 99, 235, 0.18);
  border-color: rgba(37, 99, 235, 0.6);
}
*/

/* Temporary selection box for debug mode */
.hotspot-debug-box {
  position: absolute;
  border: 2px dashed rgba(37, 99, 235, 0.9);
  background: rgba(37, 99, 235, 0.15);
  border-radius: 6px;
  pointer-events: none;
}