/* HejMap Map Engine — base styles for the MapLibre container.
   Import this alongside your page CSS.
   The engine reads --hejmap-* variables if defined; falls back to HejMap defaults. */

/* ── MapLibre canvas fills its container exactly ── */
.hejmap-map,
.hejmap-map .maplibregl-canvas-container,
.hejmap-map .maplibregl-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* ── Inherit cursor from JS hover logic ── */
.hejmap-map .maplibregl-canvas { outline: none; }

/* ── Attribution ── */
.hejmap-map .maplibregl-ctrl-attrib {
  font-size: 9px;
  opacity: 0.5;
  background: transparent;
  color: var(--ink-faint, #7ca5c0);
}
.hejmap-map .maplibregl-ctrl-attrib a { color: inherit; }
html[data-theme="dark"] .hejmap-map .maplibregl-ctrl-attrib { color: var(--ink-faint, #3d6888); }

/* ── Zoom controls (optional — MapLibre adds these if you addControl) ── */
.hejmap-map .maplibregl-ctrl-group {
  background: var(--paper, #fff);
  border: 1px solid var(--rule, #bfd6e8);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(26,58,92,0.08);
}
.hejmap-map .maplibregl-ctrl-group button {
  color: var(--ink, #1a3a5c);
  background: none;
  border: none;
  cursor: pointer;
}
.hejmap-map .maplibregl-ctrl-group button:hover { background: var(--bg-warm, #e4f0f8); }
html[data-theme="dark"] .hejmap-map .maplibregl-ctrl-group {
  background: var(--paper, #112238);
  border-color: var(--rule, #1c3d58);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ── Small dot markers for island nations / points of interest ── */
.hejmap-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--map-base, #8ec4d8);
  border: 1.5px solid var(--bg, #f2f8fd);
  pointer-events: none;
  transition: background 0.3s, transform 0.2s;
}
.hejmap-dot.highlight  { background: var(--map-hi, #e8634a); transform: scale(1.35); }
.hejmap-dot.focused    { background: var(--map-hi, #e8634a); transform: scale(1.6); border-width: 2px; }

/* ── CountryTooltip — cursor-following country name + link ── */
.hejmap-ctip {
  position: absolute;
  pointer-events: auto;
  background: var(--popup-bg, #fff);
  border: 1px solid var(--accent, #e8634a);
  border-radius: 10px;
  padding: 10px 16px;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 16px;
  color: var(--ink, #1a3a5c);
  box-shadow: 0 8px 24px -8px rgba(26,58,92,0.16);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
  line-height: 1.4;
  cursor: default;
}
.hejmap-ctip.visible { opacity: 1; }

.hejmap-ctip__name {
  font-weight: 700;
  display: block;
}
.hejmap-ctip__link {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent, #e8634a);
  text-decoration: none;
  margin-top: 3px;
}
.hejmap-ctip__link:hover { text-decoration: underline; }

html[data-theme="dark"] .hejmap-ctip {
  background: var(--popup-bg, #112238);
  border-color: var(--accent, #f07460);
  color: var(--ink, #c8dff0);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.4);
}
html[data-theme="dark"] .hejmap-ctip__link { color: var(--accent, #f07460); }

/* ── Hover name chip — follows cursor, shows on mouseover before click ── */
.hejmap-hover-label {
  position: absolute;
  pointer-events: none;
  z-index: 20;
  background: var(--popup-bg, #fff);
  border: 1.5px solid var(--accent, #e8634a);
  border-radius: 8px;
  padding: 5px 12px;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink, #1a3a5c);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.1s;
  box-shadow: 0 4px 14px rgba(26,58,92,0.14);
  letter-spacing: -0.01em;
}
.hejmap-hover-label.visible { opacity: 1; }
html[data-theme="dark"] .hejmap-hover-label {
  background: var(--popup-bg, #112238);
  border-color: var(--accent, #f07460);
  color: var(--ink, #e4f2fa);
}

/* ── MapLibre popup — matches HejMap card style ── */
.hejmap-map .maplibregl-popup-content {
  background: var(--popup-bg, #fff);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink, #1a3a5c);
  box-shadow: var(--popup-shadow, 0 20px 60px -20px rgba(26,58,92,0.18));
  border: 1px solid var(--rule, #bfd6e8);
}
.hejmap-map .maplibregl-popup-tip { display: none; }
.hejmap-map .maplibregl-popup-close-button {
  color: var(--ink-faint, #7ca5c0);
  font-size: 16px;
  padding: 4px 8px;
}