/* ==========================================================================
   Component · Language picker — globe button + glass dropdown in the nav
   ========================================================================== */

.lang-picker {
  position: relative;
}

/* Botão do seletor — código do idioma + globo.
   Antes era só o globo num círculo de 44px. O globo diz "tem idiomas aqui",
   mas não diz QUAL está ativo; quem cai numa página em espanhol por detecção
   automática não descobria o motivo sem abrir o menu. O código resolve isso
   sem custo de espaço relevante. */
.lang-picker__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding-inline: 14px;
  border: 1px solid var(--color-hairline);
  background: transparent;
  color: var(--color-text-primary);
  transition:
    background-color var(--duration-fast) var(--ease-gentle),
    border-color var(--duration-fast) var(--ease-gentle),
    transform var(--duration-fast) var(--ease-spring);
}

.lang-picker__toggle:hover {
  background: var(--color-tile-hover);
  border-color: var(--color-border-strong);
}

/* Tabular-nums e largura mínima: alternar EN ↔ PT-BR não pode fazer a nav
   inteira dançar. O mínimo cabe o código de duas letras; os de cinco
   (PT-BR, ZH-CN) crescem, e só eles. */
.lang-picker__code {
  min-width: 1.5em;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  /* Tracking baixo de propósito: com 0.04em o hífen de PT-BR ganhava ar dos
     dois lados e o código lia como "PT - BR". */
  letter-spacing: 0.015em;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.lang-picker__toggle svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.lang-picker__menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  /* 13.5rem cabe "Português (Portugal)", o nome mais longo dos 10, numa
     linha só. Sem isso ele quebra e desalinha a lista inteira. */
  min-width: 13.5rem;
  max-height: min(32rem, calc(100vh - 6rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  margin: 0;
  list-style: none;
  background: var(--color-menu-bg);
  border: 1px solid var(--color-nav-border);
  border-radius: 18px;
  box-shadow: var(--shadow-nav);
  opacity: 0;
  translate: 0 -6px;
  visibility: hidden;
  transition:
    opacity var(--duration-fast) var(--ease-gentle),
    translate var(--duration-fast) var(--ease-gentle),
    visibility 0s linear var(--duration-fast);
}

.lang-picker.is-open .lang-picker__menu {
  opacity: 1;
  translate: 0 0;
  visibility: visible;
  transition:
    opacity var(--duration-fast) var(--ease-gentle),
    translate var(--duration-fast) var(--ease-gentle);
}

.lang-picker__option {
  display: block;
  width: 100%;
  padding: 9px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: 0.9375rem;
  text-align: start;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-gentle),
    color var(--duration-fast) var(--ease-gentle);
}

.lang-picker__option:hover {
  background: var(--color-tile-hover);
  color: var(--color-text-primary);
}

.lang-picker__option[aria-selected="true"] {
  color: var(--color-accent);
  font-weight: 600;
}

@media (max-width: 45.9375em) {
  .lang-picker__toggle {
    height: 38px;
    padding-inline: 11px;
    gap: 6px;
  }

  .lang-picker__toggle svg {
    width: 16px;
    height: 16px;
  }

  .lang-picker__menu {
    min-width: 12.5rem;
    max-height: 60vh;
    overflow-y: auto;
  }
}

/* ---- Sugestão de idioma na raiz -----------------------------------------
   Só aparece em `/`, e só quando o idioma do visitante difere do servido ali.
   É uma OFERTA, não um redirecionamento: o Googlebot rastreia dos EUA, e
   redirecionar por idioma faria ele ver sempre a mesma versão — as outras
   nove deixariam de ranquear, que é justamente o contrário do objetivo. */
.lang-hint {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 42px;
  padding-inline: 1.125rem;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  background: var(--color-nav-glass-solid);
  backdrop-filter: blur(18px);
  color: var(--color-text-primary);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: var(--shadow-nav);
  transition:
    border-color var(--duration-fast) var(--ease-gentle),
    transform var(--duration-fast) var(--ease-spring);
}

.lang-hint:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}