Fix emoji flag rendering

Author: aborruso

website/src/pages/index.astro

@@ -507,7 +507,7 @@ const baseUrl = '/ckan-mcp-server';
             class="portal-card bg-white p-6 border border-gray-200"
           >
             <div class="flex items-center gap-3 mb-3">
-              <span class="text-3xl">🇮🇹</span>
+              <span class="text-3xl emoji-flag">🇮🇹</span>
               <h3 class="display-font text-xl font-semibold text-navy">dati.gov.it</h3>
             </div>
             <p class="text-sm text-gray-600">Italian National Open Data Portal</p>
@@ -520,7 +520,7 @@ const baseUrl = '/ckan-mcp-server';
             class="portal-card bg-white p-6 border border-gray-200"
           >
             <div class="flex items-center gap-3 mb-3">
-              <span class="text-3xl">🇺🇸</span>
+              <span class="text-3xl emoji-flag">🇺🇸</span>
               <h3 class="display-font text-xl font-semibold text-navy">data.gov</h3>
             </div>
             <p class="text-sm text-gray-600">United States Open Data</p>
@@ -533,7 +533,7 @@ const baseUrl = '/ckan-mcp-server';
             class="portal-card bg-white p-6 border border-gray-200"
           >
             <div class="flex items-center gap-3 mb-3">
-              <span class="text-3xl">🇨🇦</span>
+              <span class="text-3xl emoji-flag">🇨🇦</span>
               <h3 class="display-font text-xl font-semibold text-navy">open.canada.ca</h3>
             </div>
             <p class="text-sm text-gray-600">Canada Open Government</p>
@@ -546,7 +546,7 @@ const baseUrl = '/ckan-mcp-server';
             class="portal-card bg-white p-6 border border-gray-200"
           >
             <div class="flex items-center gap-3 mb-3">
-              <span class="text-3xl">🇬🇧</span>
+              <span class="text-3xl emoji-flag">🇬🇧</span>
               <h3 class="display-font text-xl font-semibold text-navy">data.gov.uk</h3>
             </div>
             <p class="text-sm text-gray-600">United Kingdom Open Data</p>
@@ -559,7 +559,7 @@ const baseUrl = '/ckan-mcp-server';
             class="portal-card bg-white p-6 border border-gray-200"
           >
             <div class="flex items-center gap-3 mb-3">
-              <span class="text-3xl">🇪🇺</span>
+              <span class="text-3xl emoji-flag">🇪🇺</span>
               <h3 class="display-font text-xl font-semibold text-navy">data.europa.eu</h3>
             </div>
             <p class="text-sm text-gray-600">European Union Open Data Portal</p>
@@ -572,7 +572,7 @@ const baseUrl = '/ckan-mcp-server';
             class="portal-card bg-white p-6 border border-gray-200"
           >
             <div class="flex items-center gap-3 mb-3">
-              <span class="text-3xl">🌍</span>
+              <span class="text-3xl emoji-flag">🌍</span>
               <h3 class="display-font text-xl font-semibold text-navy">demo.ckan.org</h3>
             </div>
             <p class="text-sm text-gray-600">Official CKAN Demo Portal</p>

website/src/styles/global.css

@@ -7,3 +7,12 @@
     @apply text-gray-900;
   }
 }
+
+@layer utilities {
+  .emoji-flag {
+    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", "Segoe UI Symbol",
+      sans-serif;
+    font-variant-emoji: emoji;
+    line-height: 1;
+  }
+}