/*
 * RGABGeo controls (shared/js/rgab-geo.js): country select and phone field.
 *
 * SOURCE OF TRUTH. The portal, client portal and public site each send a strict Content-Security-Policy
 * (style-src 'self', font-src 'self'), so a stylesheet or font on another host cannot load. Each host therefore
 * serves its own copy from assets/css/ and assets/fonts/. node scripts/sync-geo-assets.js copies this file and the
 * font; scripts/check-rgab-geo.js fails when a copy has drifted.
 *
 * Brand tokens come from the host page (--navy, --gold-text, --font-body, --sage-text / --charcoal). The three hosts
 * define the same names; the fallbacks keep the controls readable if one is missing. None of the three has a dark
 * theme today, so there is no dark block; colours here are inherited or token-based so a future one just works.
 */

/* Flags. Chrome and Edge on Windows draw a flag emoji as two letters. This font holds only the flag glyphs and the
   unicode-range limits it to regional indicators, so nothing is downloaded unless a flag is shown. */
@font-face {
  font-family: "RGAB Flags";
  src: url("../fonts/TwemojiCountryFlags.woff2") format("woff2");
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  font-display: swap;
}

/* element + class so the rule beats the host's `.form-row select` (0,1,1) whatever the stylesheet order. */
select.rgab-geo-select,
select.rgab-geo-cc {
  font-family: "RGAB Flags", var(--font-body, "Manrope"), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 44px;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Native select with the same look as the text input it replaced (the host's own input rules still apply). */
select.rgab-geo-select { width: 100%; }

.rgab-geo-note,
.rgab-geo-msg {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--sage-text, var(--charcoal, #545454));
}
.rgab-geo-note[hidden],
.rgab-geo-msg[hidden] { display: none; }
.rgab-geo-msg.is-error { color: #a3312c; }

/* Country code select on the left, national number on the right; stacked below 360 px. */
.rgab-geo-phone {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}
.rgab-geo-phone .rgab-geo-cc {
  /* An explicit width matters: a select's intrinsic width is its LONGEST option, which would push the whole form wider than a phone. */
  flex: 0 1 9.5rem;
  width: 9.5rem;
  min-width: 7.5rem;
  margin: 0;
}
.rgab-geo-phone .rgab-geo-num {
  flex: 1 1 6.5rem;
  width: 6.5rem;
  min-width: 0;
  min-height: 44px;
  margin: 0;
}
.rgab-geo-phone .rgab-geo-msg { flex: 1 0 100%; margin-top: 0; }
.rgab-geo-phone .rgab-geo-num[aria-invalid="true"] { border-color: #a3312c; }

@media (max-width: 359px) {
  .rgab-geo-phone { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .rgab-geo-phone .rgab-geo-cc,
  .rgab-geo-phone .rgab-geo-num { flex: 0 0 auto; width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rgab-geo-select, .rgab-geo-cc, .rgab-geo-num { transition: none; }
}