/* ==========================================================================
   IDIOMAS — euskera y castellano
   --------------------------------------------------------------------------
   CÓMO FUNCIONA

   El idioma activo vive en el atributo lang del <html>: lang="eu" o lang="es".
   En la página escribes cada cosa DOS VECES, una en cada idioma, y marcas
   cada versión. Este fichero se limita a esconder la que no toca.

   Hay dos formas de marcar, y las dos valen:

   1) CON UNA CLASE (la cómoda, desde el editor de WordPress)
      Seleccionas el bloque > barra lateral > Avanzado > Clases CSS
      adicionales > escribes  lang-eu  o  lang-es

   2) CON UN ATRIBUTO (para HTML escrito a mano)
      <p data-idioma="eu">Kaixo</p>
      <p data-idioma="es">Hola</p>

   Se esconde el idioma que NO está activo, en vez de enseñar el que sí lo
   está. Es a propósito: así no se rompen los bloques que necesitan
   display:flex o display:grid, que es lo que pasaría al forzarles un valor.
   ========================================================================== */

html[lang="eu"] .lang-es,
html[lang="eu"] [data-idioma="es"],
html[lang="es"] .lang-eu,
html[lang="es"] [data-idioma="eu"]{
	display:none !important;
}

/* Mientras el navegador decide el idioma, no se enseña nada a medias */
html:not([lang]) .lang-es,
html:not([lang]) [data-idioma="es"]{ display:none !important; }


/* ==========================================================================
   EL SELECTOR DE IDIOMA
   --------------------------------------------------------------------------
   Los colores salen de la paleta del tema, así que si cambias los colores en
   Apariencia > Editor > Estilos, el selector cambia con ellos.
   ========================================================================== */
.selector-idioma{
	display:inline-flex;
	gap:4px;
}

.selector-idioma button{
	font-family:inherit;
	font-size:13px;
	letter-spacing:.12em;
	text-transform:uppercase;
	line-height:1;
	padding:8px 12px;
	cursor:pointer;
	border-radius:100px;
	background:transparent;
	color:var(--wp--preset--color--ti-fg, #1F2127);
	border:1px solid var(--wp--preset--color--ti-fg, #1F2127);
	opacity:.55;
	transition:opacity .2s ease;
}

.selector-idioma button:hover{ opacity:1; }

.selector-idioma button[aria-pressed="true"]{
	opacity:1;
	background:var(--wp--preset--color--ti-accent, #1D1F25);
	color:var(--wp--preset--color--ti-fg-alt, #FFFFFF);
	border-color:var(--wp--preset--color--ti-accent, #1D1F25);
}

.selector-idioma button:focus-visible{
	outline:3px solid var(--wp--preset--color--ti-accent, #1D1F25);
	outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
	.selector-idioma button{ transition:none; }
}

/* Versión flotante: sale abajo a la derecha SOLO si no has puesto el
   selector en ningún sitio de la página. En cuanto lo pongas, desaparece. */
.selector-idioma--flotante{
	position:fixed;
	right:16px;
	bottom:16px;
	z-index:9000;
	padding:6px;
	border-radius:100px;
	background:var(--wp--preset--color--ti-bg, #ECE6DC);
	box-shadow:0 2px 14px rgba(0,0,0,.18);
}