/**
 * 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. PROMO
 *
 * 3. FORMATO SIGNUP/LOGIN
 *
 * 4. PIE DE PÁGINA
 */





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

/**
 * 1. Quitamos el border para que no nos moleste cuando pongamos el padding.
 * Además, es innecesario poner borders en un botón completo. :)
 *
 */

 .button {
  display:        inline-block;
  border:         .2222vh solid;
  border-radius:  24px;
  text-align:     center;
}

  .button--primary-solid {
    border:           0; /* [1] */
    background-color: #6200ea;
    color:            #ffffff;
  }

  .button--primary-solid:visited { color: #ffffff; }

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

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





/*------------------------------------*\
  #PROMO
\*------------------------------------*/

/**
 * 1. Escogimos la propiedad position para el layout del componente.
 * Posicionamos los logos y los blurbs (textos promocionales y pictogramas)
 * relativos al relative container. Si deseas aprender más sobre esta
 * técnica, lee nuestro módulo "Todo en su lugar".
 *
 * 2. Con este método, puedes centrar las cosas fácilmente.
 * Puedes encontrar más información sobre esto aquí:
 * https://www.w3schools.com/howto/howto_css_center-vertical.asp
 *
 * 3. Se necesita esta declaración de width para asegurar que el texto de los blurbs 
 *  no se rompa en una nueva línea por accidente. El media query está ahí
 * para encargarse de esto en las pantallas más pequeñas también.
 *
 * 4. Hacemos los iconos circulares con las mismas series de rulesets
 * que usamos en la página de Contacto.
 */

.promo {
  position:         relative; /* [1] */
  background-color: #6200ea;
}

  .promo__logo {
    position: absolute; /* [1] */
    top:      1.6667vh;
    left:     1.875vw;
  }

  .promo__blurb-container {
    position:  absolute; /* [1] */
    top:       50%; /* [2] */
    left:      50%; /* [2] */
    transform: translate(-50%, -50%); /* [2] */
    width:     25.6125vw; /* [3] */
  }

  @media only screen and (max-width: 1365px) {
    .promo__blurb-container {
      width: 33vw; /* [3] */
    }
  }

  .blurb { margin-bottom: 6.6667vh; }

  .blurb:last-child { margin-bottom: 0; }

    .blurb__icon-wrapper,
    .blurb__text {
      display: inline-block;
    }

    .blurb__icon-wrapper { /* [4] */
      width:            2.5vw;
      height:           2.5vw;
      padding:          .625vw;
      border-radius:    50%;
      margin-right:     1.25vw;
      background-color: #ffffff;
      text-align:       center;
    }

      .blurb__icon { /* [4] */
        color:     #6200ea;
        font-size: 2.2222vh;
      }

    .blurb__text {
      margin:    0;
      color:     #ffffff;
      font-size: 3.3333vh;
    }





/*------------------------------------*\
#FORMATO SIGNUP/LOGIN
\*------------------------------------*/

/**
 * 1. Aquí también resolveremos el problema de 
 * centrar la tarjeta con el truco absolute+relative.
 *
 * 2. Esta ruleset añade un pseudo elemento con un solo trabajo en el sitio:
 * desplegar el fondo monocromático detrás del form.
 *
 * 3. Esta declaración de width y height se necesita para mostrar
 * la tarjeta con las proporciones del design original. 
 * En pantallas pequeñas, apagamos el height.
 *
 * 4. Los inputs son elementos inline por defecto. Antes de empezar a 
 * manipular los valores de los margins, paddings, etc., debemos 
 * convertirlos en elementos block o inline-block.
 *
 * 5. Primero, debemos hacer que el border inherente del input sea cero.
 *
 * 6. Le damos al input un border bottom que es invisible por defecto.
 * Lo usaremos después para hacer que una barra morada aparezca en focus.
 * El border es invisible por defecto, por lo que sólo hay que cambiar su color,
 * y así la interfaz no se descompone como sí lo haría si le damos el border
 * al focus.
 *
 * 7. Este ruleset da formato a los botones enviar, añadiendo reglas a
 * .button, .button--primary-solid y a .button--primary-hollow.
 *
 */

.signup { position: relative; } /* [1] */

  .signup::before { /* [2] */
    content:          '';
    position:         absolute;
    top:              0;
    left:             0;
    width:            100%;
    height:           100%;
    background-image: url('../assets/bailey-zindel-396398-unsplash.jpg');
    background-size:  cover;
    filter:           grayscale(100%);
  }

  .signup__form-container {
    position:         absolute; /* [1] */
    top:              50%; /* [1] */
    left:             50%; /* [1] */
    transform:        translate(-50%, -50%); /* [1] */
    width:            33.75vw; /* [3] */
    height:           33.75vw; /* [3] */
    padding:          6.6667vh 3.75vw 7.2222vh;
    border-radius:    .9375vw;
    background-color: #ffffff;
  }

  @media only screen and (max-width: 1365px) {
    .signup__form-container {
      height: auto; /* [3] */
    }
  }

    .signup__cta { font-size: 4.4444vh; }

    .signup__input-field {
      display:          block; /* [4] */
      width:            100%;
      padding:          1.7778vh 0 1.4444vh 1.5vw;
      border:           0; /* [5] */
      border-bottom:    0.3333vh solid; /* [6] */
      border-color:     transparent; /* [6] */
      margin-bottom:    1.6667vh;
      background-color: #f4f3f5;
      outline:          none;
    }

    .signup__input-field:nth-of-type(2) { margin-bottom: 1.1111vh; }

    .signup__input-field:focus { border-bottom-color: #6200ea; }

      .signup__input-field::placeholder {
        font-weight: bold;
        opacity:     .25;
      }

    .signup__forgotten-password-container { text-align: right; }

      .signup__forgotten-password-link         { color: #6200ea; }

      .signup__forgotten-password-link:visited { color: #6200ea; }

    .signup__submit--signup,
    .signup__submit--login { /* [7] */
      width:         100%;
      padding:       2vh 0;
      margin-bottom: 1.6667vh;
    }

    .signup__submit--login {
      padding:        1.7777vh 0;
      margin-bottom:  0;
    }

    .signup__forgotten-password-link,
    .signup__submit--signup,
    .signup__submit--login { /* [7] */
      font-size:      1.3333vh;
      font-weight:    bold;
      text-transform: uppercase;
      letter-spacing: .15vw;
    }

    .signup__cta,
    .signup__forgotten-password-container {
      margin-bottom: 3.3333vh;
    }





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

.footer {
  height:           11.1111vh;
  padding:          4.7778vh 0;
  background-color: #211138;
  text-align:       center;
}

  .footer__copyright {
    color:          #b2acba;
    font-size:      1.3333vh;
    font-weight:    bold;
    text-transform: uppercase;
    letter-spacing: .15vw;
  }

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