{# ── Language switcher ──────────────────────────────────────────────────────
   Two ways to switch, because the two halves of the site carry the language
   differently:
   * a public page HAS a translated URL (/es/pricing) → link straight to it, so
     the visitor lands on the indexable URL for that language;
   * anywhere else (login, onboarding, the app) there is no such URL → go
     through /lang/<code>, which stores the choice and comes back.
   <details> keeps this JS-free, and scales to the remaining languages without
   turning the header into a row of codes.
   ────────────────────────────────────────────────────────────────────────── #}
<details class="relative">
  <summary class="list-none cursor-pointer flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors select-none">
    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M3.6 9h16.8M3.6 15h16.8M12 3a15 15 0 010 18M12 3a15 15 0 000 18"/></svg>
    <span class="uppercase font-medium">{{ current_language }}</span>
  </summary>
  <div class="absolute right-0 mt-2 py-1 min-w-[9rem] rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg z-50">
    {% for code, label in LANGUAGES.items() %}
    <a href="{{ alternate_url(code) or url_for('set_language', lang_code=code, next=request.full_path) }}"
       hreflang="{{ code }}"
       class="block px-3 py-1.5 text-sm {% if code == current_language %}font-semibold text-brand-600 dark:text-brand-400{% else %}text-gray-700 dark:text-gray-300{% endif %} hover:bg-gray-50 dark:hover:bg-gray-700/60 transition-colors">
      {{ label }}
    </a>
    {% endfor %}
  </div>
</details>