/**
 * ESTMJS Member Map.
 *
 * Layout and interaction states only - typography (font-family, heading
 * sizes) is deliberately left to Astra's Customizer cascade, matching the
 * convention already established in the Members (CPT) plugin's stylesheets.
 *
 * Colours are exposed as CSS custom properties on .estmjs-member-map so
 * they're easy to re-tune to the exact brand palette from one place.
 */

.estmjs-member-map {
  --estmjs-map-empty-fill:         #E3E6E5;
  --estmjs-map-empty-fill-hover:   #CFD3D1;
  --estmjs-map-members-fill:       #AEE0CD;
  --estmjs-map-members-fill-hover: #82CBAE;
  --estmjs-map-active-fill:        #1F7A5C;
  --estmjs-map-stroke:             #FFFFFF;
  --estmjs-map-stroke-width:       0.6;
  --estmjs-map-pin-fill:           #D1495B;
  --estmjs-map-panel-bg:           #FFFFFF;
  --estmjs-map-panel-border:       #E1E4E3;
  --estmjs-map-text:               #1F2D27;
  --estmjs-map-text-muted:         #5B6B64;

  display:                         flex;
  flex-wrap:                       wrap;
  align-items:                     flex-start;
  gap:                             2rem;
  position:                        relative;
}

/* ==========================================================================
   Map stage
   ========================================================================== */

.estmjs-member-map__stage {
  flex:      1 1 420px;
  min-width: 280px;
  position:  relative;
}

.estmjs-europe-map {
  display: block;
  width:   100%;
  height:  auto;
}

.estmjs-country {
  fill:         var(--estmjs-map-empty-fill);
  stroke:       var(--estmjs-map-stroke);
  stroke-width: var(--estmjs-map-stroke-width);
  cursor:       pointer;
  transition:   fill 120ms ease-in-out;
}

.estmjs-country.has-members {
  fill: var(--estmjs-map-members-fill);
}

.estmjs-country:hover,
.estmjs-country.is-hovered {
  fill: var(--estmjs-map-empty-fill-hover);
}

.estmjs-country.has-members:hover,
.estmjs-country.has-members.is-hovered {
  fill: var(--estmjs-map-members-fill-hover);
}

.estmjs-country.is-active {
  fill: var(--estmjs-map-active-fill);
}

.estmjs-country:focus-visible {
  outline:        2px solid var(--estmjs-map-active-fill);
  outline-offset: 1px;
}

.estmjs-map-pin {
  fill:           var(--estmjs-map-pin-fill);
  stroke:         #FFFFFF;
  stroke-width:   0.4;
  pointer-events: none;
}

/* Member-count badge (Settings: Member country markers = Member count).
   Sizes come from inline attributes set by member-map.js, so only the
   colours and text treatment live here. The badge uses the body text
   colour so it reads clearly on both the members fill and the active fill. */
.estmjs-member-count {
  pointer-events: none;
}

.estmjs-member-count__badge {
  fill:           var(--estmjs-map-text);
  stroke:         #FFFFFF;
  stroke-width:   0.4;
}

.estmjs-member-count__label {
  fill:                #FFFFFF;
  font-family:         inherit;
  font-weight:         600;
  text-anchor:         middle;
  dominant-baseline:   central;
}

/* ==========================================================================
   Hover tooltip
   ========================================================================== */

.estmjs-member-map__tooltip {
  position:       absolute;
  top:            0;
  left:           0;
  transform:      translate(12px, 12px);
  background:     var(--estmjs-map-text);
  color:          #FFFFFF;
  padding:        0.25rem 0.6rem;
  border-radius:  4px;
  font-size:      0.8125rem;
  line-height:    1.4;
  white-space:    nowrap;
  pointer-events: none;
  z-index:        2;
}

.estmjs-member-map__tooltip[hidden] {
  display: none;
}

/* ==========================================================================
   Side panel
   ========================================================================== */

.estmjs-member-map__panel {
  position:      absolute;
  top:           1rem;
  left:          1rem;
  width:         300px;
  max-width:     calc(100% - 2rem);
  max-height:    calc(100% - 2rem);
  overflow-y:    auto;
  background:    var(--estmjs-map-panel-bg);
  border:        1px solid var(--estmjs-map-panel-border);
  border-radius: 6px;
  box-shadow:    0 4px 16px rgba(0, 0, 0, 0.15);
  padding:       1.25rem;
  z-index:       3;
}

.estmjs-member-map__panel[hidden] {
  display: none;
}

.estmjs-member-map__panel-close {
  position:    absolute;
  top:         0.5rem;
  right:       0.5rem;
  background:  transparent;
  border:      0;
  font-size:   1.5rem;
  line-height: 1;
  padding:     0.25rem 0.5rem;
  cursor:      pointer;
  color:       var(--estmjs-map-text-muted);
}

.estmjs-member-map__panel-close:hover,
.estmjs-member-map__panel-close:focus-visible {
  color: var(--estmjs-map-text);
}

.estmjs-member-map__panel-title {
  margin: 0 1.5rem 1rem 0;
  color:  var(--estmjs-map-text);
}

.estmjs-member-map__panel-list {
  list-style:     none;
  margin:         0;
  padding:        0;
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
}

.estmjs-member-map__panel-member {
  display:         flex;
  align-items:     center;
  gap:             0.75rem;
  text-decoration: none;
  color:           var(--estmjs-map-text);
}

.estmjs-member-map__panel-member:hover,
.estmjs-member-map__panel-member:focus-visible {
  color: var(--estmjs-map-active-fill);
}

.estmjs-member-map__panel-photo {
  width:         40px;
  height:        40px;
  border-radius: 50%;
  object-fit:    cover;
  flex-shrink:   0;
  background:    var(--estmjs-map-empty-fill);
}

.estmjs-member-map__panel-name {
  font-weight: 600;
}

.estmjs-member-map__panel-empty {
  color:  var(--estmjs-map-text-muted);
  margin: 0;
}

/* ==========================================================================
   Legend
   ========================================================================== */

.estmjs-member-map__legend {
  flex-basis:      100%;
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             1.5rem;
  color:           var(--estmjs-map-text-muted);
  font-size:       0.875rem;
}

.estmjs-member-map__legend-item {
  display:     inline-flex;
  align-items: center;
  gap:         0.5rem;
}

.estmjs-member-map__legend-swatch {
  width:         14px;
  height:        14px;
  border-radius: 3px;
  display:       inline-block;
}

.estmjs-member-map__legend-swatch--members {
  background: var(--estmjs-map-members-fill);
}

.estmjs-member-map__legend-swatch--empty {
  background: var(--estmjs-map-empty-fill);
}

/* ==========================================================================
   Copyright / map data credit
   ========================================================================== */

.estmjs-member-map__copyright {
  flex-basis: 100%;
  margin:     0;
  color:      var(--estmjs-map-text-muted);
  font-size:  0.75rem;
  text-align: center;
}

.estmjs-member-map__copyright a {
  color: inherit;
}

/* ==========================================================================
   Responsive: stack the legend/copyright below the map on narrow viewports
   (the panel is an overlay - see above - so it needs no stacking rule here)
   ========================================================================== */

@media ( max-width: 768px ) {

  .estmjs-member-map {
    flex-direction: column;
  }
}