/**
 * OVERVIEW
 *
 * This file describes the components that build up the site.
 * From the inner layout to the font color, etc.
 *
 * You could see it before, but now, BEM-like (Block–Element–Modifier)
 * thinking is even more apparent in the code. If you are hearing
 * about BEM for the first time, we recommend reading the following section
 * in Harry Roberts’s CSS guidelines: https://cssguidelin.es/#bem-like-naming.
 */


/**
 * TABLE OF CONTENTS
 *
 * 1. BUTTONS
 *
 * 2. HEADER
 *
 * 3. NAVIGATION
 *
 * 4. POST
 *
 * 5. CATEGORY CARD
 *
 * 6. SIDEBAR
 *
 * 7. FOOTER
 */





/*------------------------------------*\
  #BUTTONS
\*------------------------------------*/

.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; }





/*------------------------------------*\
  #HEADER
\*------------------------------------*/

/**
 * 1. These two rulesets make up the CSS hack with which we can
 * center the contents of the header. You can read more about this technique
 * in the Headers chapter of the Common components module.
 *
 * 2. We use this right margin to make the logo appear in the same place
 * as it was in the design prototype.
 */

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





/*------------------------------------*\
  #NAVIGATION
\*------------------------------------*/

/**
 * 1. This is the same trick that we used in the case of the header.
 * We need these rules to be able to center the content.
 *
 * 2. We align navigation to center horizontally as well.
 *
 * 3. This padding is needed to be able to display
 * the purple bar of the hover effect in the correct place.
 *
 * 4. We remove the unnecessary right margin from the last link
 * with this rule.
 */

.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. We need this display: block; declaration because, otherwise,
 * there will be a few pixels wide empty space between the image
 * and the rest of the content. This is caused by the fact that the img tag is
 * a special inline element by default, so the line-height property affects it.
 * To avoid this, it is easier to set the image to be a block element.
 */

.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;
}





/*------------------------------------*\
  #CATEGORY CARD
\*------------------------------------*/

/**
 * 1. With the help of this property, we can display all pictures in nice,
 * square-shaped frames, without compressing them,
 * regardless of their original proportions.
 *
 * 2. All p tags have a bottom margin by default that would be added
 * to the paddings of the cards, so the top and bottom paddings
 * wouldn’t be the same size. This rule makes the size of the margins
 * of card texts zero, solving the problem.
 *
 * 3. This modifier makes it possible for the component to appear
 * in the sidebar correctly.
 */

.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] */





/*------------------------------------*\
  #SIDEBAR
\*------------------------------------*/

.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; }



/*------------------------------------*\
  #FOOTER
\*------------------------------------*/

.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;
  }