//Each file is commmented first before the code

//BASE


// COLOR VARIABLES
$color-primary: #c69963;
$color-primary-dark: #b28451;

$color-secondary: #101d2c;

$color-grey-light-1: #f9f7f6;
$color-grey-light-2: #aaa;

$color-grey-dark-1: #54483a;
$color-grey-dark-2: #6d5d4b;

// FONT VARIABLES
$font-primary: "Nunito", sans-serif;
$font-display: "Josefin Sans", sans-serif;

//Global reset
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  //Smooth scrolling
  scroll-behavior: smooth;
  -webkit-scroll-behavior: smooth;
  
  box-sizing: border-box;
  font-size: 62.5%; // 10px/16px(defaultbrowser)= 62.5% -> 1rem = 10px
}

body {
  font-family: $font-primary;
  color: $color-grey-dark-2;
  //300 font weight since we specify on the link of the google fonts
  font-weight: 300;
  line-height: 1.6;
}

.container {
  display: grid;
  //Creating only one Explicit grid with only one row
  //However, min content will adapt to the content(enough space to fit the content when growing or shrinking) 
  //the 40vw to make adapt to the viewport
  grid-template-rows: 80vh min-content 40vw repeat(3, min-content);
  //we create 8 columns
  //the macimum width is 14rem but never less then the min-contentanimation-duration
  //The 8rem is for the sidebar
  //to align to the viewport the rows, we ae adding two columns one on each side for it to occupy the remaining space by using 1fr. However then we changed the one on the left for minmax(6rem, 1fr) so that when the viewport shrinks the homes or other container dont shrink or dissapear.
  //We named the columns so it is easier to style it. We dont name the rows because on an overall layout the focus is more in the columns then the rows
  grid-template-columns: [sidebar-start] 8rem [sidebar-end full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] 1fr [full-end];
  
  
  
}

//SIDEBAR
.sidebar {
  background-color: $color-primary;
  //we are placing the column only in the part named sidebar
  grid-column: sidebar-start / sidebar-end;
  //The sidebar starts in the first row and ends in the last row
  grid-row: 1 / -1;
}

.navigation {
  &__checkbox {
    display: none;
    
  }
  
  &__button{
    background-color: #c69963;
    height: 7rem;
    width: 7rem;
    position: fixed;
    top: 2.5rem;
    left: 0.5rem;
    border-radius: 50%;
    z-index:2000;
    box-shadow: 0 1rem 3rem rgba(black,.1);
    text-align: center;
    cursor: pointer;
    
  }
  
  &__background {
    height: 6rem;
    width: 6rem;
    border-radius: 50%;
    position: fixed;
    top: 3rem;
    left: 1rem;
    background-image: radial-gradient(#c69963, #b0895a);
    z-index: 1000;
    transition: transform .8s cubic-bezier(0.86, 0, 0.07, 1);
    
    //transform: scale(80);
  }

  &__nav {
    height: 100vh;
    
    position:fixed;
    top: 0;
    left: 0;
    z-index:1500;

    
    
    width: 0;
    opacity: 0;
    transition: all .8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  
  &__list{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    list-style: none;
    text-align: center;
    width: 100%;
  }
  
  &__item{
    margin: 2rem;
  }
  
  &__link {
    &:link,
    &:visited{
      display: inline-block;
       font-size: 1.6rem;
    font-weight: 300;
    padding: 1rem 2rem;
    color: #fff;
    text-decoration: none;
    
    text-transform:uppercase;
    background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
    background-size: 220%;
      transition: all .4s;
    }
    
    &:hover,
    &:active {
      background-position: 100%;
      color: $color-primary;
      transform: translateX(1rem);
    }
  }
  
  //Functionality
  &__checkbox:checked ~ &__background {
    transform: scale(80);
  }
  
  &__checkbox:checked ~ &__nav {
    width: 100%;
    opacity: 1;
    
  }
  
  //Icon 
  &__icon {
    position: relative;
    margin-top: 3.5rem;
    
    &,
    &::before,
    &::after {
      width: 3rem;
      height: 2px;
      background-color:  #383838;
      display: inline-block;
      
    }
    
    &::before,
    &::after {
      content: "";
      position: absolute;
      left: 0;
      transition: all .2s;
      
    }
    
    &::before {
      top:-.8rem;
    }
    
    &::after{
      top: .8rem;
    }
  }
  
  &__button:hover &__icon::before {
    top: -1rem;
  }
  
  &__button:hover &__icon::after {
    top: 1rem;
  }
  
  &__checkbox:checked + &__button &__icon {
    background-color: transparent;
  } 
  
  &__checkbox:checked + &__button &__icon::before {
    top: 0;
    transform: rotate(135deg);
  } 
  
  &__checkbox:checked + &__button &__icon::after {
    top:0;
    transform: rotate(-135deg);
  } 
  
  
}

//HEADER

.header {
  background-color: $color-grey-dark-1;
  grid-column: full-start / col-end 6;
  background-image: linear-gradient(
      rgba($color-secondary, 0.73),
      rgba($color-secondary, 0.73)
    ),
    url(https://images.unsplash.com/photo-1521630577300-682ef19ee886?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
  background-size: cover;
  background-position: center;
  padding: 8rem;
  padding-top: 4rem;

  display: grid;
  grid-template-rows: 1fr min-content minmax(6rem, min-content) 1fr;

  grid-template-columns: minmax(min-content, max-content);
  grid-row-gap: 1.5rem;

  justify-content: center;

  &__logo {
    height: 5rem;
    width: 8rem;
    justify-self: center;
  }

  &__btn {
    align-self: start;
    justify-self: start;
  }

  &__seenon-text {
  }

  &__seenon-logos {
    img {
      max-height: 2.5rem;
      max-width: 100%;
      filter: brightness(70%);
    }
  }
}

//REALTORS

.realtors {
  background-color: $color-secondary;
  grid-column: col-start 7 / full-end;
  padding: 3rem;
  
  display: grid;
  align-content: center;
  justify-content: center;
  justify-items: center;
  grid-row-gap: 2rem;
  
  
  &__list {
    display: grid;
    grid-template-columns: min-content max-content;
    grid-column-gap: 2rem;
    grid-row-gap: 5vh;
    align-items: center;
  }
  
  &__img {
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    display: block;
  }
  
  &__sold{
    text-transform: uppercase;
    color: $color-grey-light-2;
    margin-top:-3px;
  }
}

//FEATURES

.features {
  //The features section is from the begining to the end  of the 8 column grids(in the center)
  grid-column: center-start / center-end;
  
  margin: 15rem 0;
  
  display: grid;
  
  //grid-template-columns: repeat(3, 1fr);
  
  //When the viewport shrinks make the features adjust to the viewport 
  //the trick is with autofit(creates as many tracks as can fit based on the width that we define, in this case with minmax function that we will be  defining). The width of each of the traks should stay between 25rem and 1fr
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  
  //We give 6rem space to each feature
  grid-gap: 6rem;
  
  //Some text are small making the paragrph and the subtitle have a large gap of space, so with alignitems in the container we will move all the way to the top

  align-items: start;
}

.feature {
  
  display: grid;
  grid-template-columns: min-content 1fr;
  //space for the columns and rows
  grid-row-gap: 1.5rem;
  grid-column-gap: 2.5rem;
  
  &__icon {
    fill: $color-primary;
    width: 4.5rem;
    height: 4.5rem;
    //Since we want the text below the subtitle, the icon will ocuppy the whole column by expaning its row
    grid-row: 1 / span 2;
    
    //center the icon inside the grid box by translating it down
    transform: translateY(-1rem);
  }
  
  &__text {
    font-size: 1.7rem;
  }
}

//STORY

.story {
  &__pictures {
    background-color: $color-primary;
    grid-column: full-start / col-end 4;
    background-image: linear-gradient(rgba($color-primary, .5), rgba($color-primary, .5)), url(https://images.unsplash.com/photo-1551468307-8c1e3c78013c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
    
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: repeat(6, 1fr);
    
    align-items: center;
    
  }
  
  &__img--1 {
    width: 100%;
    grid-row: 2 / 6;
    grid-column: 2 / 6;
    box-shadow: 0 2rem 5rem rgba(#000, .1);
  }
  
  &__img--2 {
    //We set 115 in order for the second image to go out the container a little bit
    width: 115%;
    grid-row: 4 / 6;
    grid-column: 4 / 7;
    z-index: 20;
    box-shadow: 0 2rem 5rem rgba(#000, .2);
  }

  &__content {
    border-color: $color-grey-light-1;
    grid-column: col-start 5 / full-end;
    
    //Since when shrinking the viewport it makes the content not have enough space
    //Instead of hard coding the left and right padding, we can set them as a percentage of the viewport
    padding: 6rem 8vw;
    
    //aligning the story content with flexbox
    /*
    //in order for the content inside the story be centered we use flexbox and justify content
    display: flex;
    flex-direction: column;
    justify-content: center;
    // the align item's default is stretch so the button is horizontally stretched. therefore we use align items to flex-start so that it is not stretched
    align-items: flex-start;
    */
    
    //aligning the story content with grid
    
    display: grid;
    align-content: center;
    justify-items: start;
  }
  
  
  &__text {
    font-size: 1.5rem;
    font-style: italic;
    margin-bottom: 4rem;
  }
}

//HOMES

.homes {
  
  grid-column: center-start / center-end;
  margin: 15rem 0;
  
  
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  grid-gap: 7rem;
}

.home {
  background-color: $color-grey-light-1;
  
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  //In order to give space to the textile information we use row gap 
  grid-row-gap: 3.5rem;
  
  &__img {
    width: 100%;
    
    //make th images cover the two columnsalign-content
    //is a 2x2 grid so it will cover a whole row 
    grid-row: 1/ 2;
    grid-column: 1 / -1;
    z-index: 1;
  }
  
  &__like {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    fill: $color-primary;
    height: 2.5rem;
    width: 2.5rem;
    z-index: 2;
    justify-self: end;
    margin: 1rem;
    
    
  }
  
  &__name {
    //We will overlap the image 
    grid-row: 1 / 2;
    //and put a z index to make sure that it is above the image 
    align-self: end;
    z-index: 3;
    //After aligning to the end of the image we have to move it down a little bit
    transform: translateY(50%);
    
    
    //make the name cover the two columnsalign-content
    //is a 2x2 grid so it will cover a whole row 
    grid-column: 1 / -1;
    justify-self: center;
    //the name of each textile is 80%
    width: 80%;
    
    font-family: $font-display;
    font-size: 1.6rem;
    text-align: center;
    padding: 1.25rem;
    background-color: $color-secondary;
    color: #fff;
    font-weight: 400;
    
  }
  
  &__location,
  &__rooms {.homes {
  
  grid-column: center-start / center-end;
  margin: 15rem 0;
  
  
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  grid-gap: 7rem;
}

.home {
  background-color: $color-grey-light-1;
  
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  //In order to give space to the textile information we use row gap 
  grid-row-gap: 3.5rem;
  
  &__img {
    width: 100%;
    
    //make th images cover the two columnsalign-content
    //is a 2x2 grid so it will cover a whole row 
    grid-row: 1/ 2;
    grid-column: 1 / -1;
    z-index: 1;
  }
  
  &__like {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    fill: $color-primary;
    height: 2.5rem;
    width: 2.5rem;
    z-index: 2;
    justify-self: end;
    margin: 1rem;
    
    
  }
  
  &__name {
    //We will overlap the image 
    grid-row: 1 / 2;
    //and put a z index to make sure that it is above the image 
    align-self: end;
    z-index: 3;
    //After aligning to the end of the image we have to move it down a little bit
    transform: translateY(50%);
    
    
    //make the name cover the two columnsalign-content
    //is a 2x2 grid so it will cover a whole row 
    grid-column: 1 / -1;
    justify-self: center;
    //the name of each textile is 80%
    width: 80%;
    
    font-family: $font-display;
    font-size: 1.6rem;
    text-align: center;
    padding: 1.25rem;
    background-color: $color-secondary;
    color: #fff;
    font-weight: 400;
    
  }
  
  &__location,
  &__rooms {
    margin-top: 2.5rem;
  }
  
  &__location,
  &__rooms,
  &__area,
  &__price {
    
    font-size: 1.5rem;
    margin-left: 2rem;
    
    //in order for the items in the textile be side by side and centered we use flexbox
    display: flex;
    align-items: center;
    
    svg {
      fill: $color-primary;
      height: 2rem;
      width: 2rem;
      margin-right: 1rem;
    }
    
  }
  
  
  &__btn {
    grid-column: 1 / -1;
  }
  
}

    margin-top: 2.5rem;
  }
  
  &__location,
  &__rooms,
  &__area,
  &__price {
    
    font-size: 1.5rem;
    margin-left: 2rem;
    
    //in order for the items in the textile be side by side and centered we use flexbox
    display: flex;
    align-items: center;
    
    svg {
      fill: $color-primary;
      height: 2rem;
      width: 2rem;
      margin-right: 1rem;
    }
    
  }
  
  
  &__btn {
    grid-column: 1 / -1;
  }
  
}


//FOOTER

.footer {
  background-color: $color-secondary;
  grid-column: full-start / full-end;
  padding: 8rem;
}

.nav{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 2rem;
  align-items: center;
  
  &__link:link,
  &__link:visited {
    font-size: 1.4rem;
    color:#fff;
    text-decoration: none;
    font-family:$font-display;
    text-transform: uppercase;
    text-align: center;
    padding:1.5rem;
    //in order for the padding to work we set display block 
    display: block;
    transition: all .2s;
    
    
  }
  
   &__link:hover,
  &__link:active{
    background-color: rgba(#fff, .05);
    transform: translateY(-3px);
  }
  
  
}

.copyright {
  font-size: 1.4rem;
  color: $color-grey-light-2;
  margin-top: 6rem;
  margin-right:auto;
  margin-left: auto;
  text-align: center;
  width: 70%;
}

//GALLERY

.gallery {
  background-color: $color-grey-light-1;
  grid-column: full-start / full-end;
  
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  //We use vw (viewport width) in order for the grid height to not change when the viewport shrinks
  grid-template-rows: repeat(7, 5vw);
  
  grid-gap: 1.5rem;
  padding: 1.5rem;
  
  &__item {
    &--1 {
      grid-row: 1 /  3;
      grid-column: 1 / 3;
    }
    
    &--2 {
      grid-row: 1 / 4;
      grid-column: 3 / 6;
    }
    
    &--3 {
      grid-row: 1 / 3;
      grid-column: 6 / 7;
    }
    
    &--4 {
      grid-row: 1 / 3;
      grid-column: 7 / 9;
    }
    
    &--5 {
      grid-row: 3 / 6;
      grid-column: 1 / 3;
    }
    
    &--6 {
      grid-row: 4 / 6;
      grid-column: 3 / 5;
    }
    
    &--7 {
      grid-row: 4 / 5;
      grid-column: 5 / 6;
    }
    
    &--8 {
      grid-row: 3 / 5;
      grid-column: 6 / 8;
    }
    
    &--9 {
      grid-row: 3 / 6;
      grid-column: 8 / 9;
    }
    
    &--10 {
      grid-row: 6 / 8;
      grid-column: 1 / 2;
    }
    
    &--11{
      grid-row: 6 / 8;
      grid-column: 2 / 4;
    }
    
    &--12 {
      grid-row: 6 / 8;
      grid-column: 4 / 5;
    }
    
    &--13 {
      grid-row: 5 / 8;
      grid-column: 5 / 8;
    }
    
    &--14 {
      grid-row: 6 / 8;
      grid-column: 8 / 9;
    }
    
  }
  
  &__img {
    //we put 100% for the width of the images in order for the images dont ocuppy the whole grid and only a grid cell.
    width: 100%;
    height: 100%;
    // object fit is in order for the image not to overflow, but for object fit to work we have to manually se the width and height of the image
    object-fit: cover;
    display: block;
  }
  
  
}

//TYPOGRAPHY

//The extend works different then the mixing, all the headings 1-4 are copied to heading
%heading {
  font-family: $font-display;
  font-weight: 400;
  
}

.heading-1 {
  @extend %heading;
  font-size: 4.5rem;
  color: $color-grey-light-1;
  line-height: 1;
  
}

.heading-2 {
  @extend %heading;
  font-size: 4rem;
  font-style: italic;
  line-height: 1;
  
  &--light{
    color: $color-grey-light-1;
  }
  
  &--dark {
    color: $color-grey-dark-1;
  }
  
}

.heading-3 {
  @extend %heading;
  font-size: 1.6rem;
  color: $color-primary;
  text-transform: uppercase;
}

.heading-4 {
  @extend %heading;
  font-size: 1.9rem;
  
  &--light{
    color: $color-grey-light-1;
  }
  
  &--dark {
    color: $color-grey-dark-1;
  }
  
}

.btn {
  background-color: $color-primary;
  color: #fff;
  border: none;
  border-radius: 0;
  font-family: $font-display;
  font-size: 1.5rem;
  text-transform: uppercase;
  padding: 1.8rem 3rem;
  cursor: pointer;
  transition: all .2s;
  
  &:hover {
    background-color: $color-primary-dark;
  }
}

.mb-sm {
  margin-bottom: 2rem;
}
.mb-md {
  margin-bottom: 3rem;
}
.mb-lg {
  margin-bottom: 4rem;
}
.mb-hg {
  margin-bottom: 8rem;
}

/* This js code will allow the navigation scroll and close de the navigation tab when clicked a link */

const link1 = document.querySelector(".link1");
const link2 = document.querySelector(".link2");
const link3 = document.querySelector(".link3");


const cajita = document.querySelector(".navigation__checkbox");
link1.addEventListener("click", function (event) {
  cajita.checked = false;
});

link2.addEventListener("click", function (event) {
  cajita.checked = false;
});

link3.addEventListener("click", function (event) {
  cajita.checked = false;
});