/*
 * Overrides sobre el style-v1.6.css del CDN (que no tocamos: lo comparte el
 * polo viejo). Se carga DESPUÉS de él en web/base.html.twig.
 */

/*
 * STICKY FOOTER universal (todas las páginas de web/base, salvo el stage
 * html.no-footer, que oculta el footer y calcula alturas propias).
 *
 * El CDN posiciona el footer en absolute (bottom:1px en .subscription/.access)
 * y eso provoca dos bugs simétricos:
 *  - página larga + viewport 901-1080px: el footer pisa el contenido sin scroll
 *  - página corta: el footer queda a media pantalla (o pegado al contenido)
 * Solución: body en columna flex de alto mínimo un viewport y el footer
 * empujado al fondo con margin-top:auto. Siempre abajo del todo, nunca pisa.
 */
html:not(.no-footer) body {
	box-sizing: border-box; /* el padding-top de la navbar fija no debe sumar al 100vh */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
html:not(.no-footer) footer {
	position: relative !important; /* pisa el absolute del CDN (.subscription/.access) */
	left: auto;
	bottom: auto;
	margin-top: auto;
	flex-shrink: 0;
}

/*
 * Navbar fija en las páginas de web/base (login, subscribe, galería, panel de
 * usuario...). Se compensa su altura (62px) con padding en el body. El stage
 * (html.no-footer) queda FUERA: su layout de vídeo/chat calcula alturas con
 * calc() propias y la navbar fija lo descuadraría.
 */
html:not(.no-footer) .navbar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
}
html:not(.no-footer) body {
	padding-top: 62px;
}

/*
 * Hover de los enlaces del navbar: misma raya que la landing de deslogueados
 * (custom.css del CDN, .main-nav-landing): línea blanca de 1px que crece de
 * derecha a izquierda en 0.3s; el enlace activo la lleva fija en azul.
 * Excluidos: el botón azul (SUBSCRIBE/nombre de usuario) y los puntos (copa).
 */
.navbar .links > ul > li:not(.points) > a:not(.btn-blue) {
	position: relative;
}
.navbar .links > ul > li:not(.points) > a:not(.btn-blue):before {
	content: "";
	width: 0;
	height: 1px;
	background: #fff;
	position: absolute;
	bottom: -4px;
	left: auto;
	right: 0;
	transition: all 0.3s ease-in-out;
}
.navbar .links > ul > li:not(.points) > a:not(.btn-blue):hover:before {
	width: 100%;
	left: 0;
	right: auto;
}
.navbar .links > ul > li:not(.points) > a.active:before {
	background: var(--blue-color, #0FB7CE);
	width: 100%;
	left: 0;
	right: auto;
}