/**
 * RESUMEN
 *
 * Este archivo describe los elementos que componen el sitio.
 * Desde el layout interno hasta el color de las fuentes, etc.
 *
 * Lo viste antes, pero ahora, pensar en BEM (Block–Element–Modifier)
 * es incluso más aparente en el código. Si esta es la primera vez
 * que escuchas sobre el BEM, te recomendamos leer la siguiente sección
 * en las CSS guidelines de Harry Roberts: https://cssguidelin.es/#bem-like-naming.
 */


/**
 * TABLA DE CONTENIDOS 
 *
 * 1. BOTONES
 *
 * 2. ENCABEZADO
 *
 * 3. NAVEGACIÓN
 *
 * 4. POST
 *
 * 5. CATEGORÍA DE TARJETA
 *
 * 6. BARRA LATERAL
 *
 * 7. PIE DE PÁGINA
 */





/*------------------------------------*\
  #BOTONES
\*------------------------------------*/

.button {
  display:    	inline-block;
  width:      	11.429rem;
  padding:    	.928rem 0;
  border:     	2px solid;
  border-radius:  1.786rem;
  text-align: 	center;
}

  .button--primary-hollow {
	border-color: 	#6200ea;
	color:        	#6200ea;
	background-color: transparent;
  }

  .button--primary-hollow:visited { color: #6200ea; }

  .button--secondary-solid {
	border:       	0;
	color:        	#6200ea;
	background-color: #ffffff;
  }

  .button--secondary-solid:visited { color: #6200ea; }

  .button--secondary-hollow {
	border-color: 	#ffffff;
	color:        	#ffffff;
	background-color: transparent;
  }

  .button--secondary-hollow:visited { color: #ffffff; }





/*------------------------------------*\
  #ENCABEZADO
\*------------------------------------*/

/**
 * 1. Estos dos rulesets preparan el CSS hack con el que podemos
 * centrar los contenidos del encabezado. Puedes leer más sobre esta técnica
 * en el capítulo Encabezados del módulo Componentes comunes.
 *
 * 2. Usamos este right margin para que el logo aparezca en el mismo lugar
 * que estaba en el prototipo de diseño.
 */

.header {
  height:       	80px;
  background-color: #6200ea;
}

  .header__wrapper { /* [1] */
	display:  table;
	height:   100%;
  }

	.header__content { /* [1] */
    display:    	table-cell;
    vertical-align: middle;
	}

  .header__subscribe,
  .logo {
    float: left;
  }

  .header__subscribe {
    	margin-right: 27.477%; /* [2] */
  }





/*------------------------------------*\
  #NAVEGACIÓN
\*------------------------------------*/

/**
 * 1. Este es el mismo truco que usamos en el caso del encabezado.
 * Necesitamos estas reglas para centrar el contenido.
 *
 * 2. Alineamos la navegación al centro horizontalmente también.
 *
 * 3. Este padding se necesita para mostrar
 * la barra morada del efecto hover en el lugar correcto.
 *
 * 4. Removemos el margin derecho innecesario del último enlace
 * con esta regla.
 */

.navigation {
  height:       	80px;
  background-color: #ffffff;
}

  .navigation__wrapper { /* [1] */
	display:  table;
	height:   100%;
  }

	.navigation__link-container { /* [1] */
    display:    	table-cell;
  	height:     	100%;
  	vertical-align: middle;
  	text-align: 	center; /* [2] */
	}

  	.navigation__link {
    	padding-bottom: 2.1rem; /* [3] */
    	margin-right:   5%;
    	color:      	#211138;
  	}

  	a.navigation__link:last-child { margin-right: 0; } /* [4] */

  	.navigation__link:visited { color: #211138; }

  	.navigation__link:hover {
    	border-bottom:  solid;
    	border-color:   #6200ea;
    	color:      	#6200ea;
  	}





/*------------------------------------*\
  #POST
\*------------------------------------*/

/**
 * 1. Necesitamos esta declaración display: block; porque, de otra manera,
 * habría un espacio vacío de unos pixeles de ancho entre la imagen
 * y el resto del contenido. Esto se debe al hecho de que la tag img es un
 * elemento inline especial por defecto, así que la propiedad line-height le afecta.
 * Para evitar esto, es más fácil establecer que la imagen sea un elemento block.
 */

.post {
  border-radius:	1.071rem;
  background-color: #ffffff;
  padding:      	4.286rem 4.286rem 3.751rem 4.286rem;
}

  .post__metadata { color: #b2acba; }

  .post__lede { font-size: 1.429rem; }

  .post__image {
	display:   	block; /* [1] */
	width:     	100%;
	height:    	320px;
	object-fit:	cover;
	border-radius: 1.071rem 1.071rem 0 0;
  }

.post--w-cover { border-radius: 0 0 1.071rem 1.071rem; }

.post--featured {
  color:        	#ffffff;
  background-image: url('../assets/blog_posts/roberto-nickson-5ui0tfMC5ts-unsplash.jpg');
  background-size:  cover;
}





/*------------------------------------*\
  #CATEGORÍA DE LA TARJETA
\*------------------------------------*/

/**
 * 1. Con la ayuda de esta property, podemos mostrar todas las imágenes,
 * en bonitos marcos cuadrados, sin tener que comprimirlos,
 * sin importar sus proporciones originales.
 *
 * 2. Todas las tags p tienen un margin bottom por defecto que se le añadiría
 * a los paddings de las tarjetas; entonces,los paddings top y bottom 
 * no serían del mismo tamaño. Esta regla hace que el tamaño de los margins
 * de las tarjetas sea cero, resolviendo así el problema.
 *
 * 3. Este modifier hace posible que el contenido aparezca
 * en la barra lateral correctamente.
 */

.category-card {
  padding:      	1.429rem;
  border-radius:	1.071rem;
  background-color: #ffffff;
}

  .category-card__image {
	float:      	left;
	width:      	8.571rem;
	height:     	8.571rem;
	margin-right:   1.429rem;
	border-radius:  .714rem;
	object-fit: 	cover; /* [1] */
  }

  .category-card__name { color: #6200ea; }

  .category-card__text { margin-bottom: 0; } /* [2] */

.category-card--nested { border-radius: 0; } /* [3] */





/*------------------------------------*\
  #BARRA LATERAL
\*------------------------------------*/

.sidebar-element { border-radius: 1.071rem; }

  .sidebar-element__header {
	padding:      	1.643rem 0 1.571rem 0;
	border-radius:	1.071rem 1.071rem 0 0;
	text-align:   	center;
	color:        	#ffffff;
	background-color: #6200ea;
  }

	.sidebar-element__title { margin-bottom: 0; }

  .sidebar-element__call-to-action {
	padding:      	1.571rem 0 1.643rem 0;
	border-top:   	.071rem solid;
	border-radius:	0 0 1.071rem 1.071rem;
	border-color: 	#f4f3f5;
	text-align:   	center;
	background-color: #ffffff;
  }

	.sidebar-element__cta-link     	{ color: #b2acba; }
	.sidebar-element__cta-link:visited { color: #b2acba; }

  .sidebar-element__list {
	list-style-type:  none;
	padding:      	0;
  }

	.sidebar-element__list-item {
  	padding:      	1.214rem 2.143rem 1.286rem 2.143rem;
  	border-bottom:	1px solid;
  	border-color: 	#f4f3f5;
  	background-color: #ffffff;
	}

	.sidebar-element__list:last-child { border-bottom: 0; }

  	.sidebar-element__category-link     	{ color: #211138; }
  	.sidebar-element__category-link:visited { color: #211138; }



/*------------------------------------*\
  #PIE DE PÁGINA
\*------------------------------------*/

.footer {
  height:       	100px;
  padding:      	3.071rem 0 3rem 0;
  text-align:   	center;
  background-color: #211138;
}

  .footer__copyright {
	text-transform: uppercase;
	font-size:  	.857rem;
	font-weight:	bold;
	letter-spacing: .171rem;
	color:      	#b2acba;
  }

  .footer__brand-name,
  .footer__student-name {
	color: #6200ea;
  }