/**
 * UNNPR interactive Chamber map (Harta Camerelor Notariale).
 * Self-contained styles for the reusable map fragment (see inc/chamber-map.php).
 * Brand tokens: navy #003694, red #c32833, county highlight #9cd6ff.
 */

.cmap {
  --cmap-navy: #003694;
  --cmap-red: #c32833;
  --cmap-hl: #9cd6ff;
  --cmap-line: #b9c4dd;
  --cmap-fill: #ffffff;
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}

/* On wider screens, let the map break out past the page's narrow text column so it
   reads large and impressive. Centered on the viewport; capped so it never overflows. */
@media (min-width: 1100px) {
  .cmap {
    width: min(1200px, 94vw);
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }
}

/* Stage keeps the map's 1920:1080 ratio and anchors the pin/card overlays. */
.cmap-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 850; /* cropped canvas; the renderer also sets this inline */
  border-radius: 14px;
}

.cmap-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---- Counties ---- */
.cmap-county {
  fill: var(--cmap-fill);
  stroke: var(--cmap-line);
  stroke-width: 1.4px;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: fill 0.28s ease, stroke 0.28s ease;
  pointer-events: none; /* pins drive interaction; counties are visual */
}
.cmap-county.is-dim { fill: #f4f6fb; }
.cmap-county.is-hover { fill: #d6ecff; stroke: #6aa8e6; }
.cmap-county.is-active {
  fill: var(--cmap-hl);
  stroke: var(--cmap-navy);
  stroke-width: 1.8px;
}

/* ---- Pins (HTML overlay, geo-positioned by percentage) ----
   The button is a zero-size anchor placed EXACTLY at the HQ coordinate; the dot is
   centered on that point and the chip floats to one side, so the red circle always sits
   on the city (the chip never shifts the dot off the location). */
.cmap-pins { position: absolute; inset: 0; }

.cmap-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
  transition: opacity 0.35s ease;
  -webkit-tap-highlight-color: transparent;
}

/* The marker dot — centered on the anchor point */
.cmap-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 17px;
  height: 17px;
  margin: -8.5px 0 0 -8.5px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--cmap-red);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.28s ease, box-shadow 0.28s ease;
  will-change: transform;
}

/* The navy label chip — floats beside the dot, vertically centered on the point */
.cmap-chip {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--cmap-navy);
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(9px, 0.95vw, 13px);
  letter-spacing: 0.04em;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 54, 148, 0.25);
  transition: background 0.28s ease, box-shadow 0.28s ease;
}
.cmap-pin--r .cmap-chip { left: 14px; }
.cmap-pin--l .cmap-chip { right: 14px; }

/* Hover / focus preview — gentle, not twitchy */
.cmap-pin:hover .cmap-dot,
.cmap-pin:focus-visible .cmap-dot { transform: scale(1.18); }
.cmap-pin:hover .cmap-chip,
.cmap-pin:focus-visible .cmap-chip { background: #0a4bb0; }
.cmap-pin:focus-visible { outline: none; }
.cmap-pin:focus-visible .cmap-chip { box-shadow: 0 0 0 3px rgba(0, 54, 148, 0.35); }

/* Pinned / active state — filled marker like the reference */
.cmap-pin.is-active { z-index: 5; }
.cmap-pin.is-active .cmap-dot {
  background: var(--cmap-red);
  transform: scale(1.42);
  box-shadow: 0 0 0 7px rgba(195, 40, 51, 0.16), 0 2px 8px rgba(0, 0, 0, 0.25);
}
.cmap-pin.is-active .cmap-chip { background: var(--cmap-red); box-shadow: 0 3px 10px rgba(195, 40, 51, 0.35); }

/* Dim the other pins while one is active, to focus attention */
.cmap.is-selecting .cmap-pin:not(.is-active) { opacity: 0.4; }
.cmap.is-selecting .cmap-pin:not(.is-active):hover { opacity: 1; }

/* ---- Info card (caseta) ---- */
.cmap-card {
  position: absolute;
  z-index: 20;
  width: 246px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(6, 22, 55, 0.28);
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transition: opacity 0.24s ease, transform 0.24s ease,
              left 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              top 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  font-family: 'Inter', system-ui, sans-serif;
}
.cmap-card.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.cmap-card[hidden] { display: none; }

.cmap-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--cmap-red);
  color: #fff;
  padding: 9px 12px;
}
.cmap-card__title { font-weight: 700; font-size: 15px; letter-spacing: 0.02em; }
.cmap-card__close {
  border: 0;
  background: none;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.85;
}
.cmap-card__close:hover { opacity: 1; }

.cmap-card__body { padding: 12px 14px 14px; color: #12233f; }
.cmap-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
}
.cmap-card__k { font-size: 12.5px; color: #4a5872; line-height: 1.25; }
.cmap-card__v--big { font-size: 26px; font-weight: 800; color: var(--cmap-red); font-family: 'Lora', Georgia, serif; }
.cmap-card__rule { height: 1px; background: #e6eaf2; margin: 9px 0; }
.cmap-card__meta { margin-top: 8px; }
.cmap-card__meta .cmap-card__k { display: block; font-weight: 700; color: #12233f; margin-bottom: 1px; }
.cmap-card__addr { font-size: 12.5px; color: #4a5872; line-height: 1.35; }

.cmap-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: var(--cmap-red);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-decoration: none;
}
.cmap-card__cta:hover { color: #9a1f28; }
.cmap-card__cta svg { transition: transform 0.18s ease; }
.cmap-card__cta:hover svg { transform: translateX(3px); }

/* ---- Mobile: card as a bottom sheet, smaller chips ---- */
@media (max-width: 640px) {
  .cmap-chip { font-size: 8.5px; padding: 3px 6px; }
  .cmap-dot { width: 13px; height: 13px; border-width: 2.5px; }

  .cmap-card {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto !important;
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform 0.28s ease, opacity 0.2s ease;
  }
  .cmap-card.is-open { transform: translateY(0); }
  .cmap-card__body { padding-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .cmap-county, .cmap-dot, .cmap-chip, .cmap-card, .cmap-card__cta svg { transition: none; }
}