/*
Theme Name: hijo-ultra
Description: Tema hijo personalizado
Author: Javier Callejo
Template: ultra
Version: 1.0
*/

/* Esta primera configuración del h1 la hacemos para probar que el style.css funciona, ya que al principio no estab haciendo caso de los estilos que poníamos aquí. Se solucionó cambiando en function.php la parte de enqueue, para que pille los estilos del hijx y no del padre */
h1
{
	color: blue;
}

/* Esta configuración cambia las propiedades del rectángulo en el que está metido el título del blog */
.site-header .container {
	background-color: green; /* cambia el color del fondo a verde */
	height: 125px; /* La altura del rectángulo */
	margin: 0; /* Este es el margen alrededor del rectángulo, creo que es la parte que lo separa del resto de cosas */
	max-width: 100%; /* Para poder tener un rectángulo que llene el ancho entero de la paǵina hemos tenido que poner max-width, ya que con width: 100% no se rellenaba entero */
}

/* Este es el rectángulo que contiene el reproductor y el menú, para poder configurar el color y la forma de organizar los elementos que están dentro */
.site-header .reproductor {
	background-color:purple; /* el color de fondo morado */
	height:100px; /* la altura del rectángulo */
	margin: 0px; /* El margen puesto a 0 */
	position: relative; /* esto no tengo claro qué hace pero en el caso del .container en el style.css del padre lo tiene puesto. Y pasaba que al poner el botón con el reproductor dentro del div .container sí funcionaba el link, pero en .reproductor no ha funcionado hasta que se a puesto  position: relative; */
	display: flex; /* Esta es la manera de organizar los elementos que están dentro del div, no entiendo muy bien pero este permite colocar en el lado izquierdo y derecho */
	align-items: center; /* Permite alinear los elementos horizontalmente en el centro, sin esto el reproductor se queda en la parte de arriba del rectángulo */
	width: 100%; /* no funciona con max-width, con width parece que funciona. Cuando estuve probando display:block y flex dejaba de estar el ancho entero relleno asíq ue con esto parece funcionar */
}

/* Este es el menú de navegación, incluyendo el buscador, al tocar el buscador el header se desarma un poco todo así que se ha quedado todo junto a la derecha */
.main-navigation
{
	margin-left: auto; /* Esto permite colocar a la derecha el menú,  */
	padding: 20px;	/* Esto sirve para darle un poco de espacio por la derecha para que no esté al ras del límite de la página */
}

/* Esta es la imagen con el link a la radio */
.svg_boton_play
{
	padding: 0px; /* Pruebas para ver si se separa un poco del borde el botón, al aumentarlo se reduce el tamaño de la imagen del botón */
	margin: 20px; /* Pruebas para ver si se separa un poco del borde el botón, al aumentar se separa del borde derecho */
	float: left; /* se supone que deja a la izquierda al botón */
	width:75px; /* Establece el ancho del botón, como la altura no está definida me imagino que puede ser auto */
}