/*
 * flags.css - site-wide country flag emoji rendering
 * ---------------------------------------------------
 * Windows (Edge, Chrome, Opera ...) ships no glyphs for regional-indicator
 * flag emoji, so e.g. DE shows up as the letters "D E". This sheet loads a
 * self-hosted Twemoji flag subset font (static/fonts/TwemojiCountryFlags.woff2,
 * Twemoji CC-BY 4.0, see static/fonts/LICENSE-twemoji.txt) that is applied ONLY
 * to flag code points (unicode-range), so all other text is untouched.
 *
 * Include on every page that shows flags / a language switcher:
 *   <link rel="stylesheet" href="/static/css/flags.css?v=1">
 * (put it AFTER the page's own <style> blocks, right before </head>)
 *
 * Form controls (select / option / button) do NOT inherit font-family by
 * default and many pages set "font-family: inherit" on them, so the rules
 * below name them explicitly.
 */

@font-face {
  font-family: "Twemoji Country Flags";
  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;
  src: url("/static/fonts/TwemojiCountryFlags.woff2") format("woff2");
  font-display: swap;
}

:root {
  --flag-font-stack: "Twemoji Country Flags", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Zero-specificity default for form controls: any page rule still wins,
   but the UA default (which has no flag font) no longer applies. */
:where(select, option, optgroup, button) {
  font-family: var(--flag-font-stack);
}

/* Opt-in for pages (e.g. Tailwind pages) whose body has no own font-family:
   <body class="... flags-font"> */
.flags-font {
  font-family: var(--flag-font-stack);
}

/* Language switchers and flag elements: always carry the flag font, even if
   the page styles them with "font-family: inherit" or its own stack. */
select.lang-switcher-select,
select.lang-switcher-select option,
select.lang-switcher-select optgroup,
select.lang-select,
select.lang-select option,
select.lang-select optgroup,
select.i18n-lang-select,
select.i18n-lang-select option,
select.i18n-lang-select optgroup,
#lang-switcher-select,
#lang-switcher-select option,
#lang-select,
#lang-select option,
#langSelect,
#langSelect option,
[data-i18n-switcher] select,
[data-i18n-switcher] select option,
.lang-btn,
.lang-switcher,
.lang-switcher *,
.flag,
.card-flag,
.lzp-flag,
[class*="-flag"],
[class*="flag-"],
[class*="lang-btn"],
[class*="lang-select"],
[class*="lang-switch"] {
  font-family: var(--flag-font-stack) !important;
}