/**
 * Selector de idioma en el header.
 *
 * El problema que resuelve: con un solo idioma visible y su nombre completo,
 * el item se leia como una categoria mas del menu, al lado de Portfolio o
 * Demos. Ahora se muestran los dos codigos con el activo destacado, mas chicos
 * que el menu y con una barra fina entre ellos, para que se lea como un
 * control y no como contenido.
 *
 * El archivo esta partido en dos:
 *
 *   1. COLORES Y TIPOGRAFIA - sin acotar al contenedor, porque Enfold arma el
 *      menu movil por JavaScript colgando de otra estructura. Las reglas
 *      acotadas a '#top .av-main-nav' funcionaban en escritorio pero no
 *      llegaban al overlay del burger, y ahi los dos idiomas quedaban del
 *      mismo color.
 *
 *   2. DISPOSICION HORIZONTAL - solo en el header, porque las barras
 *      verticales y el aire lateral no tienen sentido en una lista apilada.
 */

/* ═══ 1. Colores y tipografia: header Y burger ═══ */

#top .lang-item > a .avia-menu-text,
.av-burger-overlay .lang-item > a .avia-menu-text {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	color: #969696;
	transition: color .2s ease;
}

/* El idioma actual, en el amarillo de marca. */
#top .lang-item.current-lang > a .avia-menu-text,
.av-burger-overlay .lang-item.current-lang > a .avia-menu-text {
	color: #ffe11b;
}

#top .lang-item > a:hover .avia-menu-text,
#top .lang-item > a:focus .avia-menu-text,
.av-burger-overlay .lang-item > a:hover .avia-menu-text,
.av-burger-overlay .lang-item > a:focus .avia-menu-text {
	color: #fff;
}

/* El activo no se aclara al pasar por encima: ya estas en ese idioma. */
#top .lang-item.current-lang > a:hover .avia-menu-text,
.av-burger-overlay .lang-item.current-lang > a:hover .avia-menu-text {
	color: #ffe11b;
}

/* Enfold dibuja un subrayado animado en los items del menu; en un control de
   idioma sobra y refuerza justamente la lectura de "categoria". */
#top .lang-item > a .avia-menu-fx,
.av-burger-overlay .lang-item > a .avia-menu-fx {
	display: none;
}

#top .lang-item > a:focus-visible,
.av-burger-overlay .lang-item > a:focus-visible {
	outline: 2px solid #ffe11b;
	outline-offset: -2px;
}

/* ═══ 2. Disposicion horizontal: solo el header ═══ */

#top .av-main-nav > li.lang-item {
	position: relative;
}

/* Aire a la izquierda: despega el bloque de idioma del ultimo item del menu. */
#top .av-main-nav > li.lang-item.lang-item-first {
	margin-left: 22px;
}

/* Separador antes del bloque. */
#top .av-main-nav > li.lang-item.lang-item-first::before {
	content: '';
	position: absolute;
	top: 50%;
	left: -12px;
	width: 1px;
	height: 14px;
	margin-top: -7px;
	background: #4a4a4a;
}

#top .av-main-nav > li.lang-item > a {
	padding-left: 7px !important;
	padding-right: 7px !important;
}

/* Barra entre los dos codigos. */
#top .av-main-nav > li.lang-item + li.lang-item::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 10px;
	margin-top: -5px;
	background: #4a4a4a;
}

/* ═══ 3. Menu movil ═══
   El overlay lo inyecta Enfold por JavaScript y puede colgar del body, no de
   #top, asi que estas reglas no llevan ese prefijo. Ahi el bloque va con aire
   arriba y separado por una linea, en vez de las barras verticales que solo
   tienen sentido en horizontal. */

@media only screen and (max-width: 989px) {
	.av-burger-overlay .lang-item.lang-item-first {
		margin-left: 0;
		margin-top: 18px;
		padding-top: 18px;
		border-top: 1px solid #333;
	}

	.av-burger-overlay .lang-item::before {
		display: none;
	}

	.av-burger-overlay .lang-item > a .avia-menu-text {
		font-size: 13px;
	}
}