/* The language menu, the footer's language links and the notice on pages in other languages
   (voice_agent/site_i18n.py). Uses the tokens in app.css. */
.lang-switch { position: relative; }
.lang-switch summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--on-navy);
  font-weight: 700; font-size: .9rem; padding: 10px 8px; border-radius: var(--r-sm); min-height: 44px; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary .icon { width: 18px; height: 18px; }
.lang-switch summary:hover, .lang-switch[open] summary { color: var(--lime); }
.lang-switch summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.lang-switch ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 168px; margin: 0; padding: 6px; list-style: none;
  background: var(--navy-2); border: 1px solid var(--navy-line); border-radius: var(--r); box-shadow: 0 12px 32px rgb(0 0 0 / .35); }
.lang-switch li a { display: block; padding: 10px 12px; color: var(--on-navy); text-decoration: none; font-weight: 600; font-size: .95rem; border-radius: var(--r-sm); }
.lang-switch li a:hover { background: var(--navy-3); }
.lang-switch li a[aria-current] { color: var(--lime); }
@media (max-width: 380px) { .lang-switch summary span { display: none; } }

.lang-foot { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: var(--s4); }
.lang-foot a { font-weight: 600; font-size: .85rem; }

.locale-note { background: var(--navy-2); color: var(--on-navy); border-bottom: 1px solid var(--navy-line); }
.locale-note .wrap { display: flex; gap: var(--s2); align-items: flex-start; padding-top: var(--s3); padding-bottom: var(--s3); }
.locale-note p { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--on-navy-2); }
.locale-note .icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--lime); }

.guide-card .lang-tag { display: inline-block; margin-top: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: var(--muted); }
.legal-lang { margin: var(--s5) 0 0; }