/*
 * Bandierine dei paesi (.jo-flag) — usate dalla tabella "Top Click per Paese"
 * di Analytics & Ads (tab Search Console).
 *
 * Windows non ha i glifi delle bandiere: Chrome/Edge disegnano l'emoji
 * 🇮🇹 come le due lettere indicatore regionale, quindi al posto della
 * bandierina si legge "IT". Il font Twemoji Country Flags contiene SOLO
 * quel range Unicode (U+1F1E6-1F1FF): applicarlo non tocca nessun altro
 * carattere, e la unicode-range lo rende innocuo anche se ereditato.
 *
 * Font: public/fonts/TwemojiCountryFlags.woff2, preso da npm
 * country-flag-emoji-polyfill@0.1.8. Grafica Twemoji © Twitter, CC-BY 4.0.
 * Servito da public/ come gli altri asset (niente Vite/npm nel deploy).
 */
@font-face {
    font-family: 'Twemoji Country Flags';
    src: url('/fonts/TwemojiCountryFlags.woff2') format('woff2');
    font-display: swap;
    unicode-range: U+1F1E6-1F1FF;
}

/* Cella "Paese": bandierina, sigla ISO e nome su una riga, ben distanziati. */
.jo-flag-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.jo-flag {
    font-family: 'Twemoji Country Flags', sans-serif;
    font-size: 1.15em;
    line-height: 1;
}

/* Sigla ISO: colore ereditato e smorzato, così regge light e dark mode. */
.jo-flag-code {
    opacity: 0.55;
    font-size: 0.85em;
    letter-spacing: 0.04em;
}

/*
 * Stesso fix ovunque nel pannello: ogni emoji bandiera (picker nazionalita',
 * audience, tabelle) passa dal font Twemoji. La unicode-range sopra limita
 * l'effetto ai soli indicatori regionali, quindi il resto del testo continua
 * a usare il font del tema — qui viene solo anteposto allo stack di Filament
 * (vedi --font-family iniettata nel layout base).
 */
.fi-body,
.fi-body .font-sans {
    font-family: 'Twemoji Country Flags', var(--font-family, ui-sans-serif), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}