/* ===================================================================
   Flag Icons — single sprite /flags/css-flags-langs-sprite.png
   Sprite: 42×551px = 19 flags stacked vertically.
   Flag height = image height ÷ 19 = 551/19 = 29px each (42×29px).
   Row order (top→bottom, 0-based):
   ar=0 br=1 cn=2 de=3 es=4 fr=5 id=6 in=7 it=8 jp=9
   kr=10 nl=11 pl=12 ru=13 th=14 tr=15 tw=16 us=17 vn=18

   Displayed in a 20×15px box: sprite scaled to height 285px
   (19 × 15px), so flag N sits at background-position-y = -(N × 15)px.

   Language → sprite row mapping:
   en→us  vi→vn  es→es  pt→br  fr→fr  de→de  it→it  ru→ru  tr→tr
   ko→kr  ja→jp  th→th  hi→in  zh-CN→cn  zh-TW→tw  id→id  nl→nl  pl→pl

   Languages with no flag in the sprite use .lang-code-badge instead:
   ms, ar, sv, uk, ro, bn
   =================================================================== */

/* Base flag class */
.flag-icon {
    display: inline-block;
    width: 20px;
    height: 15px;
    background-image: url('/flags/css-flags-langs-sprite.png');
    background-repeat: no-repeat;
    background-size: auto 285px; /* 19 flags × 15px */
    background-position: center 0;
    border-radius: 2px;
    vertical-align: middle;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
    position: relative;
    top: -1px;
    overflow: hidden;
}

/* Sprite positions per language: y = -(row × 15)px */
.flag-en    { background-position: center -255px; }  /* us, row 17 */
.flag-vi    { background-position: center -270px; }  /* vn, row 18 */
.flag-es    { background-position: center -60px;  }  /* es, row 4  */
.flag-pt    { background-position: center -15px;  }  /* br, row 1  */
.flag-fr    { background-position: center -75px;  }  /* fr, row 5  */
.flag-de    { background-position: center -45px;  }  /* de, row 3  */
.flag-it    { background-position: center -120px; }  /* it, row 8  */
.flag-ru    { background-position: center -195px; }  /* ru, row 13 */
.flag-tr    { background-position: center -225px; }  /* tr, row 15 */
.flag-ko    { background-position: center -150px; }  /* kr, row 10 */
.flag-ja    { background-position: center -135px; }  /* jp, row 9  */
.flag-th    { background-position: center -210px; }  /* th, row 14 */
.flag-hi    { background-position: center -105px; }  /* in, row 7  */
.flag-zh-CN { background-position: center -30px;  }  /* cn, row 2  */
.flag-zh-TW { background-position: center -240px; }  /* tw, row 16 */
.flag-id    { background-position: center -90px;  }  /* id, row 6  */
.flag-nl    { background-position: center -165px; }  /* nl, row 11 */
.flag-pl    { background-position: center -180px; }  /* pl, row 12 */

/* Dark mode: slightly softer border */
@media (prefers-color-scheme: dark) {
    .flag-icon {
        box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
    }
}

/* ==============================================
   Code badge — for languages without a sprite flag
   (ms, ar, sv, uk, ro, bn)
   ============================================== */
.lang-code-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 15px;
    font-size: 9px;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 2px;
    flex-shrink: 0;
    border: 1px solid #e5e7eb;
    line-height: 1;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

@media (prefers-color-scheme: dark) {
    .lang-code-badge {
        color: #9ca3af;
        background: #374151;
        border-color: #4b5563;
    }
}