/**
 * Estilos para la página de inicio
 */
body > header {
	height: 10vh;
}

body > main {
	padding: 0 !important;
	height: 80vh;
}

body > footer {
	height: 10vh;
}

/**
 * Menú
 */ 
#uhl-home-navigation {
	position: fixed;
	top: 50%;
	transform: translateY( -50% );
	right: var( --uhl-margins-side );
	z-index: 1;
	display: none;
}

#uhl-home-navigation li {
	padding: 0.5em 0;
	text-align: right;
}

#uhl-home-navigation a, #uhl-audio-sound-permissions p, #uhl-audio-sound-permissions button {
	font-size: var( --uhl-font-size-xxl );
}

#uhl-home-navigation a, #uhl-audio-sound-permissions button {
	opacity: 0.5;
}

#uhl-home-navigation a:hover, #uhl-audio-sound-permissions button:hover {
	opacity: 1;
}

/**
 * Video
 */
.wp-block-video {
	overflow: hidden;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
}

.wp-block-video video {
	height: 80vh;
	width: auto;
	filter: saturate( 1.25 );
	opacity: 0;
	transition: opacity 1s;
}

/**
 * Audio
 */
#uhl-audio-sound-permissions {
    position: absolute;
    left: var( --uhl-margins-side );
    top: 50%;
    transform: translateY( -50% );
    text-align: center;
}

#uhl-audio-sound-permissions button {
    padding: 0.5em;
    width: 100%;
}

/*
 * Otras pantallas
 */
@media ( orientation: portrait ) {
	#uhl-audio-sound-permissions {
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX( -50% );
		width: 60%;
	}

	#uhl-audio-sound-permissions p, #uhl-audio-sound-permissions button {
		font-size: var( --uhl-font-size-xl );
	}
}

@media ( orientation: landscape ) {
	body {
		max-height: 100vh;
		overflow: hidden;
	}

	.uhl-main-content {
		height: 100%;
	}

	.wp-block-video {
	    position: fixed;
	    top: 0;
	    left: 0;
	    height: 100vh;
	    width: 100vw;
	    z-index: -1;
	}

	.wp-block-video video {
	    height: auto;
	    width: 100%;
        object-fit: cover;
	}

	#uhl-home-navigation {
	    right: calc( var( --uhl-margins-side ) * 2 );
	}

	#uhl-home-navigation li {
	    padding: 1em 0;
	    text-align: left;
	}

	.uhl-footer p {
	    margin: 0;
	}
}