/* CR Province Map - Costa Rica Realtor brand palette */

.cr-map-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* Costa Rica sits between two oceans — float the landmass on sea-glass water
     (muted teal that complements the earthy brand, not a clashing bright blue). */
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  padding: 2.5rem 1rem 2rem;
  /* Costa Rica between two oceans: a clear coastal sea, lighter near the top
     "shore" and deepening toward the open water at the edges. */
  background:
    radial-gradient(120% 90% at 50% 18%, #cdeef0 0%, #8fd0da 38%, #54aac0 78%, #3d93af 100%);
}
/* drifting wave crests across the whole sea */
.cr-map-wrap::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(118deg, transparent 0 26px, rgba(255,255,255,.16) 26px 29px),
    repeating-linear-gradient(118deg, transparent 0 52px, rgba(8,70,90,.10) 52px 54px),
    radial-gradient(50% 36% at 16% 80%, rgba(255,255,255,.35), transparent 62%),
    radial-gradient(48% 34% at 86% 72%, rgba(255,255,255,.28), transparent 62%);
  pointer-events: none;
}
/* breaking-surf band along the bottom */
.cr-map-wrap::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  background:
    repeating-linear-gradient(118deg, transparent 0 14px, rgba(255,255,255,.45) 14px 17px);
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent);
          mask-image: linear-gradient(to top, #000 10%, transparent);
  pointer-events: none;
}
.cr-map-wrap > * { position: relative; z-index: 1; }
/* lift the landmass off the water a little more */
.cr-map-svg { filter: drop-shadow(0 6px 22px rgba(11,52,66,.30)); }

.cr-map-svg {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 4px 24px rgba(22,53,43,.18));
}

/* Province fills */
.cr-prov { transition: filter .18s ease, opacity .18s ease; cursor: pointer; }
.cr-prov path { stroke: #F6F2E9; stroke-width: 3; stroke-linejoin: round; transition: fill .18s ease; }

/* individual fills */
.cr-prov--guanacaste path { fill: #C16A43; }
.cr-prov--alajuela    path { fill: #2E6B4F; }
.cr-prov--heredia     path { fill: #FFC531; }
.cr-prov--san-jose    path { fill: #1E4D3E; }
.cr-prov--cartago     path { fill: #8BAF9A; }
.cr-prov--limon       path { fill: #4A8B6B; }
.cr-prov--puntarenas  path { fill: #7BB8A0; }

/* hover — province brightens, cursor points */
.cr-prov:hover { filter: brightness(1.15) drop-shadow(0 2px 10px rgba(0,0,0,.25)); }
.cr-prov:hover path { fill: #C16A43; }          /* terra on hover */
.cr-prov--guanacaste:hover path { fill: #A8542F; }  /* terrad for already-terra */

/* focus-visible ring around the whole group */
.cr-prov:focus { outline: none; }
.cr-prov:focus-visible { outline: 3px solid #FFC531; outline-offset: 2px; border-radius: 2px; }

/* Label pills */
.cr-label { pointer-events: none; }
.cr-label-bg {
  fill: rgba(22,53,43,.72);
}
.cr-label-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  fill: #F6F2E9;
  dominant-baseline: central;
  text-anchor: middle;
  letter-spacing: .4px;
}

/* Icon glyphs (inline SVG groups) */
.cr-icon { pointer-events: none; }

/* Subtitle strip below map */
.cr-map-hint {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .78rem;
  color: #1c2b25;
  opacity: .55;
  margin-top: .5rem;
  text-align: center;
}

@media (max-width: 480px) {
  .cr-label-text { font-size: 9px; }
}

/* The SVG labels scale below readable size on phones; give each province a full-size link. */
.cr-map-mobile-links{display:none}
@media(max-width:1023px){
  .cr-map-mobile-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
    width:100%;max-width:720px;margin-top:12px}
  .cr-map-mobile-links a{display:flex;align-items:center;justify-content:center;min-height:44px;
    padding:8px 10px;border-radius:8px;background:rgba(246,242,233,.94);color:#1e4d3e;
    font:600 14px/1.25 'Inter',system-ui,sans-serif;text-align:center;text-decoration:none}
  .cr-map-mobile-links a:focus-visible{outline:3px solid #ffc531;outline-offset:2px}
}