/* ==========================================================================
   [voyamore_country_cloud]

   Wrapping cloud of country pills. The wrapper is layout-transparent — no
   padding, no max-width, no background — so the Oxygen section around it
   owns the spacing, same as every other feature stylesheet here.

   Ported from .country-cloud / .country in Redesigned/About.html, with the
   mockup's --color-* variables swapped for the plugin's --vym-* tokens so
   it follows dark mode along with everything else.
   ========================================================================== */

.vym-country-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vym-country {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--vym-bg-soft);
  border: 1px solid var(--vym-border);
  border-radius: var(--vym-radius-pill, 999px);
  font-family: var(--vym-font-ui);
  font-size: 14px;
  line-height: 1.2;
  color: var(--vym-text);
  text-decoration: none;
  /* Not a link unless `link="yes"`, so the default cursor stays the
     text/arrow default rather than implying something to click. */
  cursor: default;
  transition:
    transform 0.2s var(--vym-ease),
    background 0.2s var(--vym-ease),
    border-color 0.2s var(--vym-ease),
    color 0.2s var(--vym-ease);
}

/* Only the anchor form is interactive. */
a.vym-country { cursor: pointer; }

.vym-country:hover {
  transform: translateY(-2px);
  border-color: var(--vym-accent);
}
a.vym-country:focus-visible {
  outline: 2px solid var(--vym-accent);
  outline-offset: 2px;
}

.vym-country__flag {
  font-size: 16px;
  line-height: 1;
  filter: saturate(1.1);
}

/* WordPress core swaps emoji for Twemoji <img> on platforms with no glyph for
   them — which is every flag on Windows, so this is the common case here, not
   an edge one. Core already sizes those images to 1em, so the only thing worth
   changing is its 0 .07em side margin, which double-spaces the flag on top of
   the pill's own flex gap.

   !important because core's emoji rules carry it on every declaration; a
   normal rule at any specificity loses to them. */
.vym-country__flag img.emoji {
  margin: 0 !important;
}

.vym-country__badge {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--vym-accent);
  background: rgba(15, 175, 203, 0.10);
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 4px;
  white-space: nowrap;
}

/* Tint from whatever the accent actually is, rather than the hard-coded
   cyan above, wherever color-mix is supported. */
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .vym-country__badge {
    background: color-mix(in srgb, var(--vym-accent) 12%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vym-country { transition: none; }
  .vym-country:hover { transform: none; }
}