/**
 * Encabezado del sitio.
 *
 * Dos cosas, las dos alrededor del menú fijo que vive en la plantilla
 * del tema: el desplegable de "Perfil" y el sitio que hay que dejarle
 * al menú para que no se le monte encima al contenido.
 */

/* ------------------------------------------------------------------ */
/* Desplegable de Perfil                                               */
/* ------------------------------------------------------------------ */

/*
 * El aspecto sale de la plantilla del encabezado: el shortcode pinta
 * las mismas clases que "Contacto" (nav-dropdown arriba,
 * mobile-dropdown en el celular), así que hereda sus estilos y aquí
 * solo queda lo que es propio suyo.
 */

/*
 * Perfil es el último del menú, y un desplegable centrado bajo el
 * último se sale por el borde derecho de la pantalla. Este se alinea
 * al botón por la derecha.
 */
/*
 * Clase repetida a propósito. El CSS del encabezado vive en un <style>
 * dentro de la página, o sea después de esta hoja, y su regla
 * `.nav-dropdown.is-open .nav-dropdown__menu` pesa exactamente lo mismo
 * que la de aquí: al empatar gana la última, y su translate(-50%) movía
 * el menú media anchura a la izquierda al abrirlo. Se veía colgando de
 * "Contacto" en vez de "Perfil".
 */
.nav-dropdown.nav-dropdown--perfil .nav-dropdown__menu {
	left: auto;
	right: 0;
	transform: translate( 0, -8px );
	width: 215px;

	/*
	 * Repetido de la plantilla a propósito. Es lo que decide que el
	 * menú esté cerrado, y si el shortcode se usa en una página donde
	 * ese CSS no cargó, el desplegable se quedaría abierto para
	 * siempre en mitad del encabezado.
	 */
	opacity: 0;
	position: absolute;
	top: calc( 100% + 18px );
	visibility: hidden;
}

.nav-dropdown.nav-dropdown--perfil.is-open .nav-dropdown__menu {
	opacity: 1;
	transform: translate( 0, 0 );
	visibility: visible;
}

/* "Ir al panel de usuario" no se parte en dos líneas. */
.nav-dropdown.nav-dropdown--perfil .nav-dropdown__menu a {
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Con sesión o sin ella                                               */
/* ------------------------------------------------------------------ */

/*
 * Cuando el menú se arma a mano en la plantilla, el HTML lleva las
 * cuatro opciones y es el CSS el que enseña las dos que tocan.
 * WordPress marca el <body> con `logged-in`, así que no hace falta
 * PHP en el encabezado.
 *
 * Se esconde lo del usuario por defecto y no al revés: si algo fallara,
 * lo que queda a la vista es "Iniciar sesión", que no le hace daño a
 * nadie.
 */
.perfil-usuario {
	display: none !important;
}

body.logged-in .perfil-invitado {
	display: none !important;
}

body.logged-in .perfil-usuario {
	display: flex !important;
}

/* Cerrar sesión se distingue: no es una opción más de navegación. */
.rio360-perfil__salir {
	color: #c0392b !important;
}

.nav-dropdown--perfil .rio360-perfil__salir:hover {
	background: #fdecea;
	color: #a5301f !important;
}

/*
 * En el celular el submenú se abre con max-height, y el de la
 * plantilla da para dos opciones justas. Perfil puede llevar dos y el
 * botón de salir, así que se le deja aire de sobra: el valor solo es
 * el techo de la animación, no el alto real.
 */
.mobile-dropdown.mobile-dropdown--perfil .mobile-dropdown__menu {
	max-height: 0;
	overflow: hidden;
}

.mobile-dropdown.mobile-dropdown--perfil.is-open .mobile-dropdown__menu {
	max-height: 240px;
	overflow: visible;
}

/* El contenedor tiene que ser el ancla del menú de escritorio. */
.nav-dropdown.nav-dropdown--perfil {
	position: relative;
}

/* ------------------------------------------------------------------ */
/* Sitio para el menú fijo                                             */
/* ------------------------------------------------------------------ */

/*
 * El menú del encabezado es fijo y transparente arriba del todo, y la
 * primera sección de cada página se sube 78px para que su fondo corra
 * por debajo. Eso es lo buscado —el fondo del hero asomando tras el
 * menú— pero arrastraba también al contenido: el título y los botones
 * quedaban tapados.
 *
 * Se le devuelve al contenido el espacio que el fondo se llevó: el
 * relleno compensa la subida y además deja libre el alto del menú. El
 * fondo sigue pasando por debajo, que era la gracia.
 */
:root {
	--rio360-nav-h: 90px;
	--rio360-hero-pull: 78px;
}

/*
 * Solo la primera sección del CONTENIDO. La plantilla del encabezado
 * también dibuja secciones de Divi, y darle este relleno a esa la
 * inflaba 200px y empujaba la página entera hacia abajo.
 */
.et-l--post .et_builder_inner_content > .et_pb_section:first-of-type,
.et-l--body .et_builder_inner_content > .et_pb_section:first-of-type {
	padding-top: calc( var( --rio360-nav-h ) + var( --rio360-hero-pull ) + 30px ) !important;
}

/* En pantallas chicas el menú se pliega y ocupa bastante menos. */
@media ( max-width: 980px ) {

	:root {
		--rio360-nav-h: 80px;
	}
}
