/*
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;
}*/

/* Para justificar el texto dentro de la página web */
article .entry-content p,
article .entry-content ul li
{
	text-align: justify; /* justifica el texto  */
	hyphens: auto; /* esto añade separación silábica automática "En HTML, el idioma es determinado por el atributo lang y los navegadores separarán únicamente si este atributo está presente y si existe un diccionario de separación silábica adecuado" */
} 

/* 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:black; /* el color de fondo negro */
	height:40px; /* 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 */
}

/* Esta es la imagen con el link a la radio */
.boton_play
{
	display:flex; /* Parece que hay que darle display flex para intentar que se pueda alinear al centro la imagen */
	align-items: center; /* Para alinear la imagen en el centro */
	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 */
	height:80%; /* Establece el ancho del botón, como la altura no está definida me imagino que puede ser auto */
}

/* 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 */
}

/* Para configurar la imagen de emision en vivo */
.emision_vivo
{
	position: absolute; /* al poner esto no entiendo muy bien pero pasa que la imagen se queda fija, con relative al abrir el menú en el móvil se reducía la imagen */
	height: 80%; /* Establece el tamaño de la imagen. de momento está puesta en 40px porque el div en el que está metido tieen un tamaño de 45px */
	width: auto; /* esto lo pongo por si acaso, para que se ajuste el tamaño según la altura */
	top: 10%; /* Al poner esto parece que se ajusta la posición para que se quede dentro del div.reproductor  */
}

/* Para poder poner el logo centrado hayq eu decire al div que lo contiene que sea flex y que alinee al centro. además al darle un tamaño permite que la imagen tenga como altura un % del tamaño del div. Se supone que todos los elementos padre tienen que tener altura explicitada. site-branding-container la tiene se supone */
.logo_pagina
{
	height:100%; /* Así espero que el tamaño del div ocupe el total del .site-header .container que ahora son 75 px*/
	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 */
}

/* configurando el logo para que se ajuste a la pantalla */
/* Esta configuración cambia las propiedades del rectángulo en el que está metido el título del blog */



/* Para pantallas con tamaño igual o mayor que 600px. Osea ordenadores y tablets*/
@media screen and (min-width: 1000px)
{
	.site-header .container
	{
		background-color: green; /* cambia el color del fondo a verde */
		height: 75px; /* 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 */
		display: flex;
		align-items: center;
        justify-content: start;
	}
	.logo
	{
		position: absolute; /* creo que si pones absolute te asuguras que se queda en el sitio más, no lo entiendo mucho pero si lo quito se deforma antes al hacer zoom*/
		width: auto; /* He puesto este tamaño probando que cuadre con mi móvil, molaba entender mejor cómo poner algo que se ajuste a los teléfonos. Si pongo un porcentaje se desajusta al hacer zoom, no entiendo nada */
		max-height: 80%; /* Esto lo he pueso para probar que no se ajuste al tamaño. Pero ni idea de si está guay así */
	}
}
/* Para pantallas de menos de 600px. Osea móviles */
@media screen and (max-width: 1000px)
{
	.site-header .container
	{
		background-color: green; /* cambia el color del fondo a verde */
		height: 100px; /* 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 */
		display: flex;
		align-items: center;
		justify-content: center;
	}
    .logo
    {
		width: auto; /* 353.05px; /* He puesto este tamaño probando que cuadre con mi móvil, molaba entender mejor cómo poner algo que se ajuste a los teléfonos. Si pongo un porcentaje se desajusta al hacer zoom, no entiendo nada */
		height: 70%; /* Esto lo he pueso para probar que no se ajuste al tamaño. Pero ni idea de si está guay así */

    }

}

/* El menú desplegable sale muy abajo, como que hay mucha distancia desde el botón de Cnotenido Libre hasta las dos opciones que te salen al pasar el ratón por el así que le pongo en la variable top una cantidad más pequeña (originalmente estaba en 109) */
.main-navigation ul ul
{
	top: 45px; /* esto hace que al poner el ratón encima de las opciones del menú (cuando no está recogido en en menú con tres rayitas) la línea que aparece debajo se queda más cerca */
}

/* Para que se ajuste el tamaño del menú al del div donde está */
.main-navigation div > ul > li > a
{
	height: 45px;
	line-height: 45px;
}
/* Para cambiar el color del texto de los botones del menú */
.main-navigation ul li a
{
	color: #fff;
}

/* Para que el menú desplegable tenga opción de replegarse parace que esto sirve*/
@media (min-width: 720px)
.main-navigation {
    display: block;
}


/* Para que el menú al ser colapsable no tape la X que te permite cerrarlo he apañado lo siguiente para que se mueva hacia abajo */

.responsive-menu .main-navigation.toggled ul 
{
	position: absolute;
	top: 50px;
	right: 0px;
	width: 220px;
}

/* Añadido símbolo del copyleft para poder usarlo en el pie de página */
.copy-left {
display: inline-block;
text-align: right;
margin: 0px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}

/*fondo */

.site-content {
  background: #080808;
  padding: 3.57143em 0 3.57143em;
    padding-top: 3.57143em;
}

/* Para el interlineado de la lista de webs chulas */
.webs_chulas
{
	line-height:1.5; /* dándole 1 de interlineado al texto de "hay muchos más servidores ..." */
	margin-bottom: 1em; /* Por defecto venía 23.2142 así que le pongo un poco menos. En este caso 1em que son 13px */
}

/* Para poder gestionar cómo se ve la lista de web chulas */
.lista_webs_chulas
{
	margin-bottom: 1em; /* Originalmente venía con 23.2142 yo le pongo 3em que creo que es el tamaño de ancho que tiene la letra m en la tipografía escogida. En este caso parece que 1em son 13px*/
}

/* Para poder gestionar cómo se ve el título de cada sección de las webs chulas */
.titulo_web_chula
{
	margin-bottom: 0px; /* Estaba originalmente en 12.5 */
	margin-top: 5px; /* PAra reducir de 12.5 px a 5px la distancia que deja por arriba*/
}

/* Para los elementos de la lista, cada uno de los enlaces a las webs chulas*/
.web_chula
{
	text-indent: 10px; /* esto hace que tenga un poco de sangría. */
	height: 20px; /* esto es para que haya menos espacio entre los elementos de la lista */
}

/* Para cambiar el trozo donde pone radioxfri o la paǵina que se esté mirando */
.blog .page-header
{
	background: #8adf82; /* el color del fondo del rectángulo */
}

/* Para personalizar la letra del sitio */
body, button, input, select, textarea
{
	color: white; /* pone color blanco body, button, input, select, textarea */
	font-family: monospace, sans-serif; /* esto hace que se elija fuente de la familia monospace, y si no está disponible entonces pilla fuentes de la familia sans-serif */
	font-size: 16px; /* establece el tamaño de la fuente, al cambiarlo cambia el tamaño que toman las medidas em (que son las medidas relativas) */
	font-weight: 400; /* le pone a la fuente un grueso de 400, que es el equivalente a estar sin negrita */
	line-height: 1.7857; /* Le da un interlineaje de 1.7857 líneas */
	text-align: justify; /* justifica el texto, se lo pongo para que todo el texto esté no solo lo que esté dentro de las entradas  */
	hyphens: auto; /* esto añade separación silábica automática "En HTML, el idioma es determinado por el atributo lang y los navegadores separarán únicamente si este atributo está presente y si existe un diccionario de separación silábica adecuado" */
}

/* Para cambiarles el color a los títulos*/
h1, h2, h3, h4, h5, h6
{
	color: white; /* puesto color blanco */
}

/* para el título de la página hay que ponerlo en un color oscuro porque si no no se ve con el fondo blanco */
h1.page-title, h1.entry-title
{
	color:black; /* puesto de negro apra que se lea sobre fondo blanco */
}
/* Para los de las entradas, como son links parece que hay que hacer esto */
.entry-header .entry-title a, .entry-header .page-title a, .page-header .entry-title a, .page-header .page-title a
{
	color:white; /* blanco por defecto */
}
/* Para cambiarles el color a los títulos cuando se pasa por encima*/
.entry-header .entry-title a, .entry-header .page-title a, .page-header .entry-title a, .page-header .page-title a
{
	color:white; /* como el resto de links en verde al pasar por encima */
}
.entry-header .entry-title a:hover, .entry-header .page-title a, .page-header .entry-title a, .page-header .page-title a
{
	color:green; /* como el resto de links en verde al pasar por encima */
}

/* a todo lo que tenga un link, que se usa el elemento ancla a tendráestas configuraciones */
a
{
	color: #00FF00; /* Le pone un color verde a los links */
}

/* lo que se pone a continuación hace que al pasar el ratón por encima cambie el color y se le ponga una línea debajo */
a:hover
{
	color: green; /* Le pone verde al pasar el ratón por encima */
	text-decoration: underline; /* se le pone una línea debajo al pasar el ratón por encima */
}

/* Los links del lado funcionan distinto por algún motivo */
#secondary .widget a:not(.button):hover
{
	color: green; /* hay links que se ponen de color oscuro, para cambiarlo a verde */
}
/* lo siguiente cambia lo que pasa cuando el link se ha visitado, en este caso que tenga un color más oscuro */
a:visited
{
	color: lightgreen; /* color más oscuro para que se vea que el link ha sido visitado */
}

/* Las propiedades de los elementos del menú se configuran aquí */
.main-navigation ul li a
{
	color: white; /* pone blanco el color del texto del menú */
}
/* Para elegir el color que se pone en el fondo cuando se pasa el ratón por encima del submenú desplegable */

.main-navigation ul li:hover
{
	color: green; 
}
/* cuando estás sobre el submenú se pone blanco*/
.main-navigation ul li:hover > a
{
	color:white; /* establece el color del menú principal (SOBRE RADIOXFRI) de color blanco cuando se pasa el ratón sobre los elementos del submenú (CONTENIDO LIBRE, etc) */
}

/* se configura lo que pasa cuando se pasa el ratón por encima */
.main-navigation ul li a:hover
{
	color: #00FF00; /* cuando en el submenú se pasar el ratón por encima de los elementos cambia el color del texto */
}

/* Para los menús que son desplegables se configura aquí el CSS */
.main-navigation ul ul
{
	border-top: 3px none transparent; /* Pone verde la línea de debajo de las opciones del menú, se pone top aquí porque es la líne que sale arriba del submenú desplegable */
}

/* Para los menús que no son desplegables se configura aquí el CSS */
.main-navigation div > ul > li > a:hover
{
	border-bottom: 3px none transparent; /* Pone verde la línea de debajo de las opciones del menú */
}
/* Para elegir el color que tiene el menú en el que estás cuando seleccionas uno */
.main-navigation .current-menu-item > a, .main-navigation .current a
{
	color: lightgreen; /* pone de color verde el menú que ha sido seleccionado */
}

/* Para ponerle al texto de los submenús el color blanco al texto */
.main-navigation ul ul li a
{
	color: white; /* pone de color blanco el texto del submenú */
}
/* Para elegir el color de fondo de los elementos del menú desplegables */
.main-navigation ul ul
{
	background-color: #000000; /* pone de color negro el color de fondo del submenú */
}

/* Para elegir el color que se pone en el fondo cuando se pasa el ratón por encima del submenú desplegable */
.main-navigation ul ul li:hover > a
{
background-color: darkgreen; /* Pone de color verde el fondo del submneú sobre el que se está pasando el ratón */
	border-color: #00FF00; /* El color del borde también porque estaba en azul*/
}
/* Para hacer lo mismo que arriba cuando el menú está despelgable (con el menú de las tres rayitas y que se despliega) */
.responsive-menu .main-navigation.toggled ul li a
{
	color: white; /* pone blanco el color del texto del menú */ 
	background: black; /* pone negro el color del fondo del desplegable*/
}

/* Para poner el color verde cuando se pase por encima del elemento del menú */
.responsive-menu .main-navigation.toggled ul li a:hover
{
	color: white; /* el color verde para el texto del elemetno del menú sobre el que se pasa el ratón */
	background-color: darkgreen; /* se le pone un color oscuro para que resalte el verde  */
}

/* Para que el menú seleccionado se sepa cuál es se queda el verde claro */
.responsive-menu .main-navigation.toggled .current-menu-item > a, .main-navigation .current a
{
	color: lightgreen; /* pone de color verde el menú que ha sido seleccionado */
}

.responsive-menu .main-navigation.toggled ul ul li:hover > a
{
	color: white; /* por si acaso lo pongo blanco el texto */
	background-color: darkgreen; /* pone el fondo de color verde oscuro */
}