/* ═══════════════════════════════════════════════ Maryland Places Directory — Language Switcher Place this in your after Bootstrap ═══════════════════════════════════════════════ */ /* ── Switcher group container ── */ .lang-switcher { display: inline-flex; align-items: center; gap: 2px; background: rgba(0, 0, 0, 0.12); border-radius: 6px; padding: 3px; } /* ── Individual language button ── */ .lang-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s; line-height: 1; white-space: nowrap; } .lang-btn:hover { background: rgba(255, 255, 255, 0.18); } .lang-btn.active { background: #fff; color: #1a3a5c; /* adapt to your navbar color */ border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 1px 3px rgba(0,0,0,0.15); } .lang-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; } /* ── Flag emoji ── */ .lang-flag { font-size: 14px; line-height: 1; } /* ── Code text ── */ .lang-code { font-family: inherit; } /* ── Dark navbar variant (default above works for dark navbars) For light navbar, add class .lang-switcher--light ── */ .lang-switcher--light { background: rgba(0, 0, 0, 0.06); } .lang-switcher--light .lang-btn { color: #333; } .lang-switcher--light .lang-btn.active { background: #1a3a5c; color: #fff; } .lang-switcher--light .lang-btn:hover { background: rgba(0, 0, 0, 0.10); } /* ── Mobile: smaller padding ── */ @media (max-width: 480px) { .lang-btn { padding: 4px 7px; } .lang-flag { font-size: 13px; } .lang-code { font-size: 11px; } }