/**
 * El selector d'idioma.
 *
 * Hereta els colors del tema. Si algun dia es canvia de tema i les variables
 * --bx-* no hi són, els valors de reserva del var() mantenen el selector
 * llegible: mai es queda text invisible.
 *
 * @package BxIdiomes
 */

.bx-idiomes__llista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 2px;
}

.bx-idiomes__enllac {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44 px d'alt: la mida que un dit encerta sense fallar. */
	min-height: 44px;
	padding: 0 10px;
	font-family: var(--bx-sans, system-ui, sans-serif);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--bx-tinta-suau, #6B5D51);
	border-radius: 2px;
	transition: color .3s, background-color .3s;
}

.bx-idiomes__enllac:hover,
.bx-idiomes__enllac:focus-visible {
	color: var(--bx-terracota, #B2502B);
}

/*
 * L'idioma actiu no es marca NOMÉS amb color: qui no distingeix el terracota
 * del marró no veuria en quina llengua està. El subratllat ho diu sense color.
 */
.bx-idiomes__enllac.is-actiu {
	color: var(--bx-terracota, #B2502B);
	box-shadow: inset 0 -2px 0 currentColor;
}

/* ── A la capçalera ────────────────────────────────────────────────── */

.bx-idiomes--capcalera {
	margin-inline-start: 4px;
}

.bx-idiomes--capcalera .bx-idiomes__enllac {
	padding: 0 7px;
	font-size: 11px;
	letter-spacing: .1em;
}

/*
 * A la portada la capçalera va sobre fosc SEMPRE, tant si està en mode fix com
 * si no. Per això la regla no demana `.bx-capcalera--fixa`.
 *
 * Amb la versió antiga, qui té les animacions desactivades al sistema
 * (prefers-reduced-motion) veia la capçalera quieta i transparent sobre la foto
 * fosca del hero, i el selector d'idioma s'hi quedava en tinta: 2,7:1, il·legible.
 * Amb el moviment activat no passava perquè la capçalera està amagada a dalt,
 * i per això no es veu provant-ho de la manera normal.
 */
.bx-portada .bx-capcalera .bx-idiomes__enllac {
	color: rgba(247, 242, 233, .82);
}

.bx-portada .bx-capcalera .bx-idiomes__enllac:hover,
.bx-portada .bx-capcalera .bx-idiomes__enllac:focus-visible,
.bx-portada .bx-capcalera .bx-idiomes__enllac.is-actiu {
	color: var(--bx-terracota-clar, #E09A6E);
}

/* ── Al peu ────────────────────────────────────────────────────────── */

.bx-idiomes--peu {
	margin-top: 1.5rem;
}

.bx-idiomes--peu .bx-idiomes__llista {
	flex-wrap: wrap;
	gap: 4px 2px;
}

.bx-idiomes--peu .bx-idiomes__enllac {
	color: rgba(247, 242, 233, .7);
	padding-inline: 12px 12px;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: none;
}

.bx-idiomes--peu .bx-idiomes__enllac:hover,
.bx-idiomes--peu .bx-idiomes__enllac:focus-visible,
.bx-idiomes--peu .bx-idiomes__enllac.is-actiu {
	color: var(--bx-terracota-clar, #E09A6E);
}

/* ── Mòbil ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.bx-idiomes--capcalera {
		width: 100%;
		margin-inline-start: 0;
		padding-top: .5rem;
		border-top: 1px solid var(--bx-filet, #E3D9CB);
	}

	.bx-idiomes--capcalera .bx-idiomes__llista {
		gap: 6px;
	}

	.bx-idiomes--capcalera .bx-idiomes__enllac {
		padding: 0 12px;
		font-size: 13px;
	}
}

@media print {
	.bx-idiomes { display: none !important; }
}