/* Caminho.DEV — interactive Europe map (includes/europe-map.php, assets/js/europe-map.js). */

.em { position: relative; width: 100%; -webkit-tap-highlight-color: transparent; }
.em-svg {
  display: block; width: 100%; height: auto; overflow: visible;
}
/* Chrome paints a focused SVG child's focus ring around the whole map, so clicking a
   country drew a black box. The ring is off; focus is shown on the shape itself
   instead (darker outline on a country, the pin grows — see below). */
.em-svg, .em-svg :focus, .em-svg :focus-visible { outline: none; }

.em-far { fill: #eef1fb; }
.em-c {
  fill: #dfe6fb; stroke: #fff; stroke-width: 1.1; stroke-linejoin: round;
  transition: fill .2s ease, filter .2s ease; cursor: default; outline: none;
}
.em-c:hover, .em-c.is-hot { fill: #c5d2fa; }
.em-c--client { fill: #b9c9f8; }
.em-c--soon   { fill: #d4ccfb; }
.em-c--base   { fill: #6f8ff3; }
.em-c--home   { fill: #3d63ef; }
.em-c--base:hover, .em-c--base.is-hot { fill: #5a7ef2; }
.em-c--home:hover, .em-c--home.is-hot { fill: #2f55e6; }
.em-c[tabindex]:focus-visible { stroke: #1d3fd1; stroke-width: 2.4; }
.em-c--home, .em-c--base { filter: drop-shadow(0 6px 10px rgba(45, 85, 230, .25)); }

/* "Across Europe" from the card list: everything warms up a touch. */
.em.is-all .em-c:not(.em-c--home):not(.em-c--base) { fill: #ccd8fb; }

.em-route {
  fill: none; stroke: #3d63ef; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 7 8; filter: drop-shadow(0 2px 4px rgba(61, 99, 239, .35)); animation: em-march 1.1s linear infinite; pointer-events: none;
}
@keyframes em-march { to { stroke-dashoffset: -30; } }

.em-pin { cursor: pointer; outline: none; }
.em-pin-dot  { fill: #fff; stroke: #2f55e6; stroke-width: 3.5; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.em-pin-ring { fill: none; stroke: #2f55e6; stroke-width: 2; opacity: .5; transform-box: fill-box; transform-origin: center; animation: em-ping 2.4s ease-out infinite; }
.em-pin--base .em-pin-ring { animation-delay: 1.2s; }
.em-pin-glow { opacity: .8; }
.em-pin:hover .em-pin-dot, .em-pin:focus-visible .em-pin-dot, .em-pin.is-hot .em-pin-dot { transform: scale(1.35); }
@keyframes em-ping { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(2.1); opacity: 0; } }

/* Tooltip */
.em-tip {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px)); min-width: 120px; max-width: 230px;
  padding: 9px 13px 10px; border-radius: 12px; background: #fff; color: var(--mp-ink, #0f172a);
  box-shadow: 0 14px 34px -12px rgba(30, 41, 99, .35), 0 0 0 1px rgba(30, 41, 99, .06);
  font-size: .8rem; line-height: 1.4; opacity: 0; transition: opacity .15s ease;
}
.em-tip.is-on { opacity: 1; }
.em-tip::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px;
  background: #fff; transform: rotate(45deg); box-shadow: 3px 3px 6px -3px rgba(30, 41, 99, .18);
}
.em-tip b { display: block; font-size: .86rem; color: var(--mp-ink, #0f172a); }
.em-tip span { display: block; color: var(--mp-muted, #64748b); }
.em-tip span:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .em-route, .em-pin-ring { animation: none; }
}