/* language-switcher.css — v1.0.0 — SINGLE SOURCE OF TRUTH for DeltaStrike's
   "🌐 <Language>" language-switcher pill (globe + current-language NAME).

   Every page that shows a STANDALONE language switcher loads this ONE
   stylesheet, so the pill is visually IDENTICAL everywhere:
     - The landing page's own dropdown — markup from
       web-templates/components/language_switcher.html.tmpl
       ("language_switcher_dropdown"), interaction from
       assets/language-switcher-dropdown.js.
     - The conversion-funnel pages (login/welcome/welcome-choose-premium-
       path/deltastrikeSubscribeViaTribute) — same component, reused via
       components/conversion_funnel_navbar_and_footer.html.tmpl's
       "conversion_funnel_header".
     - Every other page's globe dropdown injected at runtime by
       shared/nav.js's buildLanguageDropdownContainer() (faq/help/privacy/
       terms/recommended-tools, and any dashboard/terminal page that falls
       back to the standalone globe when #profileMenu is missing).

   Do NOT duplicate any of these rules elsewhere (landing-spike.css, an
   inline <style> block, etc.) — if you find a second copy, delete it and
   point here instead, or the two will drift and the CEO will be angry
   again. Tokens (--foreground, --card, --border, --radius, ...) are the
   canonical shadcn-dark set already shared by every stylesheet on the
   site; --faint-foreground has a literal fallback below because one
   consumer (shared/landing.css, used by faq/help/privacy/terms) doesn't
   define that particular token.

   Two independent, unrelated JS implementations toggle the menu's open/
   closed visual state, and the rules below intentionally support BOTH,
   so the pill looks and animates identically no matter which one drives
   it on a given page:
     1. assets/language-switcher-dropdown.js (landing + conversion-funnel
        pages) toggles the `.language-switcher.open` class on the OUTER
        CONTAINER.
     2. shared/nav.js's attachDropdownOpenCloseHandlers (every nav.js-
        driven page — the same shared handler used for the Market Tools /
        Resources dropdowns) toggles `.lp-nav-dropdown-menu-panel-visible`
        directly on the `.language-switcher-menu` element instead. */

.language-switcher {
  position: relative;
}

.language-switcher-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--muted-foreground);
  padding: 7px 11px;
  border-radius: calc(var(--radius) - 2px);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.language-switcher-toggle:hover {
  color: var(--foreground);
  border-color: var(--faint-foreground, #71717a);
}

.language-switcher-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring, rgba(212, 212, 216, 0.2));
}

/* The globe glyph is a plain emoji character (matches the landing
   template's literal "🌐"), not an inline SVG — nav.js used to render an
   SVG globe here; that's gone as of the markup unification. */
.language-switcher-globe {
  line-height: 1;
}

.language-switcher-current-label {
  white-space: nowrap;
}

.language-switcher-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 160px;
  max-height: 320px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
  z-index: 100;
}

/* Both open/close mechanisms described above resolve to this same
   visible state — see the file header comment. */
.language-switcher.open .language-switcher-menu,
.language-switcher-menu.lp-nav-dropdown-menu-panel-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.language-switcher-menu li {
  list-style: none;
}

.language-switcher-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: calc(var(--radius) - 4px);
  font-size: 13.5px;
  color: var(--muted-foreground);
  text-decoration: none;
}

.language-switcher-menu a:hover {
  background: var(--muted);
  color: var(--foreground);
}

.language-switcher-menu a:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--focus-ring, rgba(212, 212, 216, 0.2));
}

.language-switcher-menu a[aria-current="true"] {
  color: var(--foreground);
  font-weight: 600;
}

@media (max-width: 480px) {
  .language-switcher-toggle {
    padding: 6px 9px;
    font-size: 12px;
  }
}