/* ============================================================
   Visitor Globe — the interactive globe only (no card / title).
   Centered, light/dark aware. The numeric visitor counter is kept
   but not currently rendered (see the ".vg-stats" block below).
   ============================================================ */

.vg-widget {
  --vg-accent: #1565c0;
  width: 100%;
  max-width: 100%;
  margin: -10px auto 0;
  text-align: center;
  overflow: hidden;            /* never let the globe push the page sideways */
  box-sizing: border-box;
}

.vg-globe-wrap {
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}
.vg-globe {
  position: relative;
  width: 100%;
  max-width: 182px;
  aspect-ratio: 1 / 1;
  margin: 0;
  border-radius: 50%;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.vg-globe:active { cursor: grabbing; }
.vg-globe canvas { display: block; margin: 0 auto; outline: none; max-width: 100%; }

/* On phones/tablets the sidebar stacks full-width — center the globe there. */
@media (max-width: 924px) {
  .vg-globe-wrap { justify-content: center; }
  .vg-globe { margin: 0 auto; }
  .vg-stats { margin-left: auto; margin-right: auto; }
}

/* ── Optional visitor counter (intentionally kept, not rendered) ──────────
   The globe markup currently omits the .vg-stats block, so this is dormant.
   To show a live visitor count again, add inside #visitor-globe:
     <div class="vg-stats"><span class="vg-count">0</span>
       <div class="vg-label">Visitors</div></div>
   visitor-globe.js already animates .vg-count when present. Keep these. */
.vg-stats {
  width: 182px;
  max-width: 100%;
  text-align: center;
  margin-top: 4px;
}
.vg-count {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.05em;
  font-weight: 800;
  color: var(--vg-accent);
  line-height: 1;
  letter-spacing: -0.01em;
}
.vg-label {
  font-size: 0.68em;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 3px;
}

/* If globe.gl fails to load, collapse the globe area. */
.vg-unavailable .vg-globe-wrap { display: none; }

/* ---- Dark mode ---- */
body.dark-mode .vg-count { color: #58a6ff; }
body.dark-mode .vg-label { color: #8b949e; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .vg-globe { transition: none; }
}