/**
 * Selector de idioma del header.
 *
 * Componente autocontenido:
 *   marcado  -> parts/header.html y parts/header-es.html (bloque wp:html)
 *   estilo   -> este archivo (handle goguest-lang-switcher)
 *   conducta -> assets/js/lang-switcher.js
 *
 * Vivia en la seccion 3.1 de style.css y, en una version anterior y peor,
 * dentro de los paneles CSS/JS del bloque HTML de WP 7.0 en el header.
 *
 * Medidas de diseno (escritorio): pastilla 115x50, submenu 184x135,
 * cajas 170x55, Urbanist 700 a 22px.
 *
 * Sin media queries: la escala es continua entre 480px y 1440px de viewport
 * via clamp(). Aqui no hay ningun cambio de disposicion que justifique un
 * breakpoint. Ver [[WP - Escala fluida con clamp]] en el vault.
 */

.custom-lang-switcher {
  position: relative;
  display: inline-block;

  /* Fluidos: interpolan de 480px a 1440px de viewport y se congelan fuera.
     La parte fija va en rem para no romper el tamano de fuente del usuario. */
  --lang-boton-ancho: clamp(5.75rem,  5.031rem + 2.40vw, 7.1875rem);  /*  92 -> 115 */
  --lang-boton-alto:  clamp(2.5rem,   2.188rem + 1.04vw, 3.125rem);   /*  40 ->  50 */
  --lang-menu-ancho:  clamp(9.25rem,  8.125rem + 3.75vw, 11.5rem);    /* 148 -> 184; el
                                                                          ancho de las cajas
                                                                          sale de este menos
                                                                          el padding */
  --lang-caja-alto:   clamp(2.75rem,  2.406rem + 1.15vw, 3.4375rem);  /*  44 ->  55 */
  --lang-texto:       clamp(1.125rem, 1rem     + 0.42vw, 1.375rem);   /*  18 ->  22 */
  --lang-icono:       clamp(1.125rem, 1rem     + 0.42vw, 1.375rem);   /*  18 ->  22 */

  /* Fijos: entre movil y escritorio variaban 1 o 2 px. */
  --lang-menu-pad: 7px;
  --lang-menu-gap: 8px;
  --lang-separacion: 10px;
}

/* ----------------------------
   Pastilla
   ---------------------------- */

.custom-lang-current {
  background: var(--gg-blanco);
  width: var(--lang-boton-ancho);
  height: var(--lang-boton-alto);
  border: none;
  border-radius: 30px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lang-menu-gap);
  font-family: var(--gg-font);
  font-weight: 700;
  font-style: normal;
  font-size: var(--lang-texto);
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  color: var(--gg-azul-header);
}

/* El globo lleva width/height como atributos en el marcado (18x18). Se fijan
   aqui para que escale con el resto y no dependa de ellos. */
.lang-globe {
  width: var(--lang-icono);
  height: var(--lang-icono);
  flex-shrink: 0;
}

.lang-current-label {
  line-height: 1;
}

.lang-arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.custom-lang-current[aria-expanded="true"] .lang-arrow {
  transform: rotate(180deg);
}

/* ----------------------------
   Desplegable
   ---------------------------- */

.custom-lang-dropdown {
  display: none;
  list-style: none;
  margin: var(--lang-separacion) 0 0;
  padding: var(--lang-menu-pad);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  width: var(--lang-menu-ancho);
  background: var(--gg-blanco);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
}

.custom-lang-dropdown.open {
  display: flex;
  flex-direction: column;
  gap: var(--lang-menu-gap);
}

.custom-lang-dropdown li {
  display: flex;
}

.custom-lang-dropdown li a {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: var(--lang-caja-alto);
  align-items: center;
  justify-content: center;
  gap: var(--lang-menu-gap);
  padding: 0;
  border-radius: 8px;
  text-decoration: none;
  color: var(--gg-azul);
  background: var(--gg-blanco);
  font-family: var(--gg-font);
  font-weight: 700;
  font-style: normal;
  font-size: var(--lang-texto);
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.custom-lang-dropdown li a:hover,
.custom-lang-dropdown li a.active {
  color: var(--gg-celeste);
  background: var(--gg-celeste-cta);
}

/* El bloque wp:html genera un envoltorio que por defecto crece dentro del
   flex del header. Se le quita el crecimiento para que el selector mida lo
   suyo y no empuje al resto. */
.wp-block-html:has(.custom-lang-switcher) {
  flex-grow: 0;
  flex-shrink: 0;
  width: auto;
}