/* Troca de idioma PT/EN sem recarregar a página.
   O JS (assets/js/lang-switch.js) adiciona .lang-hidden nos blocos
   [data-lang] que não correspondem ao idioma ativo. */

[data-lang].lang-hidden { display: none !important; }


/* ---------------------------------------------------------------------------
   Seletor PT | EN
   ---------------------------------------------------------------------------
   O visual do seletor NÃO está aqui: ele é do desenho original do tema e vive
   em assets/css/hero.css (.hero__lang) e assets/css/mobile.css
   (.hero-m__lang) — que é onde o seletor aparece, o topbar do hero no desktop
   e o canto do card do hero no mobile.

   O que sobra aqui é só a base para a classe padrão do
   template-parts/lang-switch.php, caso ele seja usado em algum lugar novo:
   mesmas medidas das regras originais, sem cor definida (herda do contexto).
--------------------------------------------------------------------------- */
.lang-switch {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.lang-switch button {
	display: grid;
	place-items: center;
	height: 35px;
	padding: 10px;
	background: transparent;
	border: 0;
	color: inherit;
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
}

.lang-switch button.is-active {
	width: 36px;
	background: hsla(0, 0%, 100%, 0.14);
	font-weight: 700;
}

/* Afordância de clique nos três seletores — o Figma é estático e não define
   hover, mas sem isso o botão inativo não dá sinal de que é clicável. */
.hero__lang button:not(.is-active):hover,
.hero-m__lang button:not(.is-active):hover,
.lang-switch button:not(.is-active):hover { opacity: 0.65; }

.hero__lang button:focus-visible,
.hero-m__lang button:focus-visible,
.lang-switch button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}