//All the comments at the start indicates the file name

// This website is part of the website I'm going to create in my final project were I will be doing an app that you can chat with random people near your location.

//Here I made a preview of how the website app will look like 

//Base
:root {
  --color-primary: LimeGreen;
  --color-primary-light: #D5F3FE;
  --color-primary-dark: #66D3FA;

  --color-grey-light-1: #faf9f9;
  --color-grey-light-2: #f4f2f2;
  --color-grey-light-3: #f0eeee;
  --color-grey-light-4: #ccc;

  --color-grey-dark-1: #333;
  --color-grey-dark-2: #777;
  --color-grey-dark-3: #999;
  
  --shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3);
  --shadow-light: 0 2rem 5rem rgba(0, 0, 0, 0.06);
  
  --line: 1px solid var(--color-grey-light-2);
}

$bp-largest: 75em; //1200px (largest breackpoint)
$bp-large: 68.75em; //1100/16=68.75 1100px
$bp-medium: 56.25em; //900/16=56.25 900px
$bp-small: 37.5em; ///600/16=37.5 600px
$bp-smallest: 31.25em; ///500/16=31.25 500px

* {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%; // 1rem = 10px, 10px/16px = 62.5%
  
  @media screen and (max-width: $bp-large) {
    font-size: 50%;
  }
}

body {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-grey-dark-2);
  background-image: linear-gradient(
    to right bottom,
    var(--color-primary-light),
    var(--color-primary-dark)
  );
  background-size: cover;
  background-repeat: no-repeat;

  min-height: 100vh;
}

//Layout

.container {
  /* max-width will allow the container to shrink when the viewport is less then 120 rem */
  max-width: 120rem;
  /* center top and bottom 80pixels = 8rem. left and right auto*/
  /* this will center the container in the center of the body element */
  margin: 8rem auto;
  background-color: var(--color-grey-light-1);
  box-shadow: var(--shadow-dark);

  min-height: 50rem;
  
  @media only screen and (max-width: $bp-largest) {
    margin: 0;
    max-width: 100%;
    width: 100%;
  }
}

.header {
  font-size: 1.4rem;
  /* search tab */
  height: 7rem;
  background-color: #fff;
  border-bottom: var(--line);

  display: flex;
  /* give space to the icon, the searchbar and the notification and user-logo */
  justify-content: space-between;
  /* align items in the y axis */
  align-items: center;
  
  @media screen and (max-width: $bp-smallest) {
    flex-wrap: wrap;
    /*  align items center will verticaly align the items but will join them together */
    /* Instead, we use space around to center it but separating the elements */
    align-items: space-around;
    /* Since we are putting the search bar in a new line, we must put more space for the elements */
    height: 11rem;
  }
}

.content {
  /* make the sidebar and the hotel-view be side by side with flexbox */
  display: flex;
  
  @media only screen and (max-width: $bp-medium) {
    flex-direction: column;
  }
}

.sidebar {
  background-color: var(--color-grey-dark-1);

  /* defining width */
  /* flex-grow, flex-shrink, flex-basis*/
  flex: 0 0 18%; // it will automatically shrink because is in percentage. If it was in pixel value you would need to shrink

  /* flex-direction to column and justify content space between, this will make the legal text to be pushed to the bottom  */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hotel-view {
  background-color: #fff;

  /* flex: 1 will allow the element to ocuppy as much width as it can */
  flex: 1;
}

.detail {
  font-size: 1.4rem;
  display: flex;
  padding: 4.5rem;
  background-color: var(--color-grey-light-1);
  border-bottom: var(--line);
  
  @media only screen and (max-width: $bp-medium) {
    padding: 3rem;
  }
  
  @media only screen and (max-width: $bp-small) {
    flex-direction: column;
  }
}

.description {
  background-color: #fff;
  box-shadow: var(--shadow-light);
  padding: 3rem;
  /* flex grow 0, flex shrink 0, and 60% of flex basis */
  flex: 0 0 60%;
  margin-right: 4.5rem;
  
  @media only screen and (max-width: $bp-medium) {
    padding: 2rem;
    margin-right: 3rem;
  }
  
  @media only screen and (max-width: $bp-small) {
    margin-right: 0;
    margin-bottom: 3rem;
  }
}

.user-reviews {
  flex: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
}


//components


///////////////////////////////////////////
/// Logo

.logo {
  height: 3.25rem;
  margin-left: 2rem;
}

///////////////////////////////////////////
/// Search

.search {
  /* Since now is a flec item due to the parent(header) is a flex */
  /* flex to grow 0, also 0 to shrink, and ocuppy 40% of the header */
  flex: 0 0 40%;

  /* display flex in order to center the element */
  display: flex;
  align-items: center;
  justify-content: center;
    
    @media only screen and (max-width: $bp-smallest) {
    order: 1;
      /* We are making the search bar wider in order for the flex container count it in a new line */
    flex: 0 0 100%;
      background-color: var(--color-grey-light-2);
  }

  &__input {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background-color: var(--color-grey-light-2);
    border: none;
    padding: 0.7rem 2rem;
    /* rounded edges */
    border-radius: 100px;
    width: 90%;
    transition: all 0.2s;
    margin-right: -3.25rem;

    &:focus {
      outline: none;
      width: 100%;
      background-color: var(--color-grey-light-3);
    }

    &::-webkit-input-placeholder {
      font-weight: 100;
      color: var(--color-grey-light-4);
    }
  }

  /* when the input is focused we will change the style of its sibling(in this case changing the style of the button) */

  &__input:focus + &__button {
    background-color: var(--color-grey-light-3);
  }

  &__button {
    border: none;
    background-color: var(--color-grey-light-2);

    &:focus {
      outline: none;
    }

    &:active {
      transform: translateY(2px);
    }
  }

  &__icon {
    height: 2rem;
    width: 2rem;
    /* change the color of the svg image */
    fill: var(--color-grey-dark-3);
  }
}

///////////////////////////////////////////
/// User Navigation

.user-nav {
  align-self: stretch;

  display: flex;
  align-items: center;

  /* selecting all direct childrens, all the icon boxes */
  & > * {
    padding: 0 2rem;
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
  }

  /* selecting all children box again but when hovered */
  & > *:hover {
    background-color: var(--color-grey-light-2);
  }

  &__icon-box {
    position: relative;
  }

  &__icon {
    height: 2.25rem;
    width: 2.25rem;
    fill: var(--color-grey-dark-2);
  }

  &__notification {
    font-size: 0.8rem;
    height: 1.75rem;
    width: 1.75rem;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: #fff;
    position: absolute;
    top: 1.5rem;
    right: 1.1rem;

    display: flex;
    justify-content: center;
    align-items: center;
  }

  &__user-photo {
    height: 3.75rem;
    border-radius: 50%;
    margin-right: 1rem;
  }
}

///////////////////////////////////////////
/// Side Navigation

.side-nav {
  font-size: 1.4rem;
  list-style: none;
  margin-top: 3.5rem;
  
  @media only screen and (max-width: $bp-medium) {
    /* out the navigation side by side */
    display: flex;
    /* eliminate blanck space in the top of the navigation */
    margin: 0;
  }

  &__item {
    position: relative;

    /* margin bottom to all the icon and text boxes except the last child */
    &:not(:last-child) {
      margin-bottom: 0.5rem;
      
      @media only screen and (max-width: $bp-medium) {
        margin: 0;
      }
      
      
    }
    @media only screen and (max-width: $bp-medium) {
      /* flex 1 will give all of this items the ability to grow as much as they can, and since all have the ame flex value. therefore they will ocuppy the same space */
      flex: 1;
    }
  }
  
  &__item::before {
    /* creating the red background that will cover the icon when hovered */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 3px;
    background-color: var(--color-primary);
    /* we will hide it with scaleY 0 so when hovered it appears */
    transform: scaleY(0);
    /* when hovered will increase in the y direction */
    transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
      background-color 0.1s;
  }

  &__item:hover::before,
  &__item--active::before {
    transform: scaleY(1);
    width: 100%;
  }

  &__item:active::before {
    background-color: var(--color-primary-light);
  }

  &__link:link,
  &__link:visited {
    color: var(--color-grey-light-1);
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    padding: 1.5rem 3rem;
    position: relative;
    z-index: 10;

    display: flex;
    align-items: center;
    
    @media only screen and (max-width: $bp-medium) {
      /* When making the navigation side by side, we center the logo and text with justify content and padding */
      justify-content: center;
      padding: 2rem;
    }
    
    @media only screen and (max-width: $bp-small) {
      flex-direction: column;
      padding: 1.5rem .5rem;
    }
  }

  &__icon {
    width: 1.75rem;
    height: 1.75rem;
    margin-right: 2rem;
    fill: currentColor;
    
    @media only screen and (max-width: $bp-small) {
      margin-right: 0;
      margin-bottom: .7rem;
      width: 1.5rem;
      height: 1.5rem;
    }
  }
}

///////////////////////////////////////////
/// Legal Text

.legal {
  font-size: 1.2rem;
  color: var(--color-grey-light-4);
  text-align: center;
  padding: 2.5rem;
  
  @media only screen and (max-width: $bp-medium) {
    /* when the navigation is side by side, the legal text disappears with display none*/

    display: none;
  }
}

///////////////////////////////////////////
/// Gallery

.gallery {
  display: flex;

  &__photo {
    width: 100%;
    display: block;
  }
}

/////////////////////////////////////////
/// Hotel Overview

.overview {
  display: flex;
  align-items: center;
  border-bottom: var(--line);

  &__heading {
    font-size: 2.25rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1.5rem 3rem;
    
    @media only screen and (max-width: $bp-small) {
      font-size: 1.8rem;
      padding: 1.25rem 2rem;
    }
  }

  &__stars {
    /* flex 1 will ocuppy all available space */
    //flex: 1;
    /* margin right will have the same result as flex 1, but margin will just ocuppy the space that the stars need */
    margin-right: auto;

    /* the icons have a default white space in the bottom of the stars */
    /* display flex will eliminate that space */
    display: flex;
  }

  &__icon-star,
  &__icon-location {
    width: 1.75rem;
    height: 1.75rem;
    fill: var(--color-primary);
  }

  &__location {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
  }

  &__icon-location {
    margin-right: 0.5rem;
  }

  &__rating {
    background-color: var(--color-primary);
    color: #fff;
    margin-left: 3rem;
    padding: 0 2.25rem;
    align-self: stretch;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    @media only screen and (max-width: $bp-small) {
      padding: 0 1.5rem;
    }
  }

  &__rating-average {
    font-size: 2.25rem;
    font-weight: 300;
    margin-bottom: -3px;
    
    @media only screen and (max-width: $bp-small) {
      font-size: 1.8rem;
    }
  }

  &__rating-count {
    font-size: 0.8rem;
    text-transform: uppercase;
  }
  
  @media only screen and (max-width: $bp-small) {
    font-size: 0.5rem;
  }
}

/////////////////////////////////////////
/// Button Inline

.btn-inline {
  border: none;
  color: var(--color-primary);
  font-size: inherit;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  display: inline-block;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s;

  & span {
    margin-left: 3px;
    transition: margin-left 0.2s;
  }

  &:hover {
    color: var(--color-grey-dark-1);

    span {
      margin-left: 8px;
    }
  }

  &:focus {
    outline: none;
    /* infinite will create an infinite animation when the click is mantained  */
    animation: pulsate 1s infinite;
  }
}

/* forever pulsate animation */
@keyframes pulsate {
  0% {
    transform: scale(1);
    box-shadow: none;
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.25);
  }

  100% {
    transform: scale(1);
    box-shadow: none;
  }
}

/////////////////////////////////////////
// Paragraph
/* last type indicates that only he last paragraph does not need margin in the bottom */
.paragraph:not(:last-of-type) {
  margin-bottom: 2rem;
}

/////////////////////////////////////////
/// List

.list {
  list-style: none;
  margin: 3rem 0;
  padding: 3rem 0;
  border-top: var(--line);
  border-bottom: var(--line);

  display: flex;
  /* wrap will make the elements be side by side */
  flex-wrap: wrap;

  &__item {
    /* this will create the list making it be seen like columns */
    flex: 0 0 50%;
    margin-bottom: 0.7rem;
  }

  /* we are using the before pseudo element in order to create and put the icon next to the list item */
  &__item::before {
    content: "";
    display: inline-block;
    height: 1rem;
    width: 1rem;
    margin-right: 0.7rem;

    //Older browsers
    //background-image: url(../img/chevron-thin-right.svg);
    //background-size: cover;

    //Newer browsers - masks
    background-color: var(--color-primary);
    -webkit-mask-image: url(../img/chevron-thin-right.svg);
    -webkit-mask-size: cover;

    /* in the future the ones below will work with no webkit */
    mask-image: url(../img/chevron-thin-right.svg);
    mask-size: cover;
  }
}

/////////////////////////////////////////
/// Recommend

.recommend {
  font-size: 1.3rem;
  color: var(--color-grey-dark-3);

  display: flex;
  align-items: center;

  &__count {
    margin-right: auto;
  }

  &__friends {
    display: flex;
  }

  &__photo {
    /* Since the friends picture decrease in size with the white border, we will use box-sizing to fix the images */
    /*  content box will make the border be added on top of the height and the width*/
    box-sizing: content-box;
    /* create circle picture */
    height: 4rem;
    width: 4rem;
    border-radius: 50%;
    border: 3px solid #fff;

    &:not(:last-child) {
      margin-right: -1.5rem;
    }
  }
}

/////////////////////////////////////////
/// Reviews

.review {
  background-color: #fff;
  box-shadow: var(--shadow-light);
  padding: 3rem;
  margin-bottom: 3.5rem;
  position: relative;
  /* hidden overflow will make the " be in the back of the text */
  overflow: hidden;
  
  @media only screen and (max-width: $bp-medium) {
    padding: 2rem;
    margin-bottom: 3rem;
  }

  &__text {
    margin-bottom: 2rem;
    z-index: 10;
    position: relative;
  }

  &__user {
    display: flex;
    align-items: center;
  }

  &__photo {
    height: 4.5rem;
    width: 4.5rem;
    border-radius: 50%;
    margin-right: 1.5rem;

  }

  &__user-box {
    margin-right: auto;
  }

  &__user-name {
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.4rem;

  }

  &__user-date {
    font-size: 1rem;
    color: var(--color-grey-dark-3);

  }

  &__rating {
    color: var(--color-primary);
    font-size: 2.2rem;
    font-weight: 300;
  }

  &::before {
    content: "\0394";
    position: absolute;
    top: -2.75rem;
    left: -1rem;
    line-height: 1;
    font-size: 20rem;
    color: var(--color-grey-light-2);
    font-family: sans-serif;
    z-index: 1;
    
    @media only screen and (max-width: $bp-small) {
    left: 50rem;
      top: -4rem;
  }
  }
}

/////////////////////////////////////////
/// Call to action

.cta {
  padding: 3.5rem 0;
  text-align: center;
  
  @media only screen and (max-width: $bp-medium) {
    padding: 2.5rem 0;
  }

  &__book-now {
    font-size: 2rem;
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: 2.5rem;
  }
}

/////////////////////////////////////////
/// Call to action

.btn {
  font-size: 1.5rem;
  font-weight: 300;
  text-transform: uppercase;
  border-radius: 100px;
  border: none;
  background-image: linear-gradient(
    to right,
    var(--color-primary-light),
    var(--color-primary-dark)
  );
  color: #fff;
  position: relative;
  /* in order to hide the invisible part we use overflow hidden */
  /* Since the invisible part is outside the button */
  overflow: hidden;
  cursor: pointer;

  & > * {
    /* inline-block to give it a padding */
    display: inline-block;
    height: 100%;
    width: 100%;
    transition: all 0.2s;
  }

  &__visible {
    padding: 2rem 7.5rem;
  }

  &__invisible {
    position: absolute;
    padding: 2rem 0;
    left: 0;
    top: -100%;
  }

  &:hover &__visible {
    transform: translateY(100%);
  }

  &:hover &__invisible {
    top: 0;
  }
}

//Dropdown menu

.dropdown-menu {
  font-size: 1.4rem;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 12rem;
  z-index: 99;
  display: flex;
  flex-direction: column;
  top: 6rem;
  
  
  //hiding the links
  visibility: hidden;
  
  
}

.dropdown-menu a{
  font-size: inherit;
  text-decoration: none;
  color: black;
  width: 100%;
  padding: 1.2rem 1.2rem;
  
  
}

.dropdown-menu a:hover {
  background-color: var(--color-primary);
  color: white;
  
}


.menu-button:hover .dropdown-menu{
  visibility: visible;
  
}