/* ============================================================================
   Caminho.DEV — flags for the language switcher

   Replaces flag-icons from jsdelivr. That package is 27.9KB of render-blocking CSS
   describing 534 flags, and each flag it then shows is a further request to the CDN:
   opening the switcher fetched 100KB of SVG, 91KB of which was Spain's coat of arms.
   Rendered at 20x15px, none of that detail is resolvable.

   Class names match flag-icons exactly (.fi + .fi-xx), so no markup changed. If a
   flag ever needs to come back in full detail, dropping the flag-icons <link> back
   into includes/header.php AFTER this file is all it takes — same class names.

   ADDING A LANGUAGE
     1. Add a .fi-xx rule below and the code to Language::getLanguageFlag().
     2. The value is an inline SVG in a data: URL. Two encoding rules matter:
        '#' must be written %23 (a raw # ends the URL), and attributes use single
        quotes so the whole value can sit inside double quotes.
     3. Draw it 4:3. Every .fi box is 4:3 and background-size is `contain`, so a
        flag with a different ratio letterboxes and the fallback tile shows through
        — which is exactly what the true 2:1 Union Jack did on the first attempt.
     A code with no rule falls back to the neutral tile rather than a blank gap.

   Spain's arms and Portugal's armillary sphere are simplified on purpose: at 20px
   neither is resolvable, and drawing them faithfully was the entire 91KB.
   ============================================================================ */

.fi, .fib {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
}
.fi {
  position: relative;
  display: inline-block;
  width: 1.333333em;
  line-height: 1em;
  /* Visible only when no .fi-xx matched — a missing flag should look deliberate
     rather than like a broken image. */
  background-color: #e7ebf5;
  border-radius: 1px;
}
.fi:before { content: " "; }
.fi.fis { width: 1em; }
.fi-gb { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 45'><clipPath id='b'><path d='M30 22.5h30V45zV45H30zH0V22.5zV0h30z'/></clipPath><path fill='%23012169' d='M0 0h60v45H0z'/><path stroke='%23fff' stroke-width='9' d='m0 0 60 45m0-45L0 45'/><path stroke='%23C8102E' stroke-width='6' clip-path='url(%23b)' d='m0 0 60 45m0-45L0 45'/><path stroke='%23fff' stroke-width='15' d='M30 0v45M0 22.5h60'/><path stroke='%23C8102E' stroke-width='9' d='M30 0v45M0 22.5h60'/></svg>"); }
.fi-pt { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'><path fill='%23da291c' d='M0 0h640v480H0z'/><path fill='%23046a38' d='M0 0h256v480H0z'/><circle cx='256' cy='240' r='88' fill='none' stroke='%23ffe900' stroke-width='24'/><circle cx='256' cy='240' r='50' fill='%23fff' stroke='%23da291c' stroke-width='16'/></svg>"); }
.fi-es { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'><path fill='%23aa151b' d='M0 0h640v480H0z'/><path fill='%23f1bf00' d='M0 120h640v240H0z'/></svg>"); }
.fi-fr { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'><path fill='%23fff' d='M0 0h640v480H0z'/><path fill='%23002654' d='M0 0h213v480H0z'/><path fill='%23ce1126' d='M427 0h213v480H427z'/></svg>"); }
.fi-it { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'><path fill='%23fff' d='M0 0h640v480H0z'/><path fill='%23009246' d='M0 0h213v480H0z'/><path fill='%23ce2b37' d='M427 0h213v480H427z'/></svg>"); }
.fi-nl { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'><path fill='%23fff' d='M0 0h640v480H0z'/><path fill='%23ae1c28' d='M0 0h640v160H0z'/><path fill='%2321468b' d='M0 320h640v160H0z'/></svg>"); }