/* ---------------- Social Prosperity Index (map) page ---------------- */
.spi-title-banner{
  background:var(--blue-dark);
  color:var(--white-neg);
  display:flex;
  align-items:center;
  padding:16px clamp(14px, 3vw, 36px) 20px;
  gap:12px;
}
.spi-title-banner h1{
  flex:1;
  margin:0;
  text-align:center;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.4rem, 4vw, 2.5rem);
  letter-spacing:.01em;
}
.spi-banner-back{
  flex:none;
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--white-neg);
  font-weight:600;
  font-size:clamp(0.78rem, 1.6vw, 0.95rem);
  padding:7px 12px;
  border:1px solid rgba(255,255,255,0.55);
  border-radius:999px;
  white-space:nowrap;
}
.spi-banner-back:hover{ background:rgba(255,255,255,0.14); }
.spi-banner-back svg{ width:15px; height:15px; flex:none; }
.spi-banner-spacer{ flex:none; visibility:hidden; }

@media (max-width: 640px){
  .spi-title-banner{ flex-wrap:wrap; justify-content:center; }
  .spi-banner-spacer{ display:none; }
}

.map-main{
  padding:0;
  background:linear-gradient(180deg, #EAF3FB 0%, var(--blue-light) 100%);
}
.map-wrap{
  max-width:1700px;
  margin:0 auto;
  padding:22px clamp(10px, 3vw, 30px) 10px;
}
.map-wrap svg{ width:100%; height:auto; display:block; }

.map-wrap .country{
  stroke:#ffffff;
  stroke-width:0.6;
  transition:filter .12s ease, transform .12s ease;
  cursor:pointer;
}
.map-wrap .country.has-data:hover{
  filter:brightness(1.12);
}
.map-wrap .country[data-color-idx="0"]{ fill:#4E84B0; }
.map-wrap .country[data-color-idx="1"]{ fill:#F0B489; }
.map-wrap .country[data-color-idx="2"]{ fill:#6FA05A; }
.map-wrap .country[data-color-idx="3"]{ fill:#93A9C4; }
.map-wrap .country[data-color-idx="4"]{ fill:#C6835F; }
.map-wrap .country[data-color-idx="5"]{ fill:#A9C6DE; }
.map-wrap .country[data-color-idx="6"]{ fill:#DDB25C; }

.map-wrap .country.no-data{
  fill:#c6d2db !important;
  cursor:default;
  pointer-events:none;
}

.map-wrap .country:focus{ outline:none; }
.map-wrap .country:focus-visible{ outline:3px solid var(--blue-dark); outline-offset:1px; }

.map-hint{
  text-align:center;
  color:var(--blue-dark);
  font-size:0.95rem;
  font-weight:600;
  padding:6px 16px 26px;
}