/* ============================================================ lang-switcher.css — drop-in styles for the language picker. The component is built by i18n.buildSwitcher() and uses the same CSS variables as the rest of the project so it adapts to dark/light themes automatically. ============================================================ */ .lang-switcher{position:relative;display:inline-flex;align-items:center;} .lang-switcher .lang-btn{ display:inline-flex;align-items:center;gap:6px; background:none;border:1px solid var(--border, rgba(255,255,255,.1)); color:var(--text2, #8892b0); border-radius:8px;padding:6px 10px;cursor:pointer; font-family:inherit;font-size:.78rem;font-weight:600; letter-spacing:1px;line-height:1; transition:.2s; } .lang-switcher .lang-btn:hover{border-color:var(--cyan,#00d4ff);color:var(--cyan,#00d4ff);} .lang-switcher .lang-btn .bi-globe2{font-size:1rem;} .lang-switcher .lang-btn .lang-caret{font-size:.6rem;opacity:.6;} .lang-switcher .lang-current{font-weight:700;} /* NOTE: .lang-menu rules are NOT nested under .lang-switcher. The JS moves the menu element into on first open so that it escapes any ancestor stacking context (e.g. a `#container` with position:relative + z-index that traps even fixed descendants). Once moved, a nested selector like `.lang-switcher .lang-menu` would stop matching — so all menu styling must use a bare class. */ .lang-menu{ position:fixed; z-index:2147483000; min-width:170px; background:var(--card, rgba(11,15,26,.96)); border:1px solid var(--border, rgba(255,255,255,.1)); border-radius:10px; padding:4px; box-shadow:0 12px 40px rgba(0,0,0,.4); backdrop-filter:blur(16px); font-family:'JetBrains Mono', monospace; } .lang-menu[hidden]{display:none !important;} .lang-item{ display:flex;align-items:center;gap:10px; padding:8px 10px;border-radius:6px;cursor:pointer; font-size:.8rem;color:var(--text1,#f0f4ff); transition:background .15s; user-select:none; } .lang-item:hover{background:rgba(0,212,255,.08);} .lang-item.active{ background:rgba(0,255,136,.1); color:var(--green,#00ff88); } .lang-item .lang-flag{font-size:1.05rem;line-height:1;} .lang-item .lang-native{flex:1;} .lang-item .lang-code{ font-size:.65rem;letter-spacing:1px;opacity:.6;font-weight:700; } /* Mobile sizing tweak */ @media (max-width: 600px){ .lang-switcher .lang-btn{padding:5px 8px;font-size:.72rem;} .lang-menu{min-width:160px;} }