/* Font */
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');

/* Colors */
$background: #996600;
$primary-01: #993333;
$primary-02: #CC9933;
$secondary-01: #663333;
$secondary-02: #F58446;
$txt-dark: #222222;
$txt-light: #EEEEEE;
$caption: rgba(238, 238, 238, 0.6);

/* Generic styles */
html {
    box-sizing: border-box;
}

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

body { 
  font-family: 'Nunito', Helvetica, sans-serif;
  color: $txt-dark;
  background-color: $background;
  margin: 0;
  padding: 0;
}

header, 
section, 
aside, 
footer {
  border-radius: 10px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;  
}

figure {
  margin: 0;
  padding: 0;
}

span {
  width: 100%;
  padding: 0 1vw;
}

.wrapper {
  display: grid;
  gap: 0.5%;
  width: 90vw;
  max-width: 1200px;
  margin: 0.5rem auto;
}

/* Custom styles - mobile first */

/* header with navigation */
.hdr {
  display: grid;
  grid-template-columns: 35vw 45vw;
  background-color: $primary-01;
  color: $txt-light;
  padding: 1rem;
}

.main-heading { 
  grid-column: 1/2;
  
  &__content {
    font-size: 12vw;
    writing-mode: vertical-rl;
    margin: 1rem;
    
    & strong {
      display: block;
      font-size: 40%;
      opacity: 0.85;
    }
  }
}

.nav {
  grid-column: 2/3;
  padding: 1rem 2rem 1rem 0;
  
  &-list {
    display: grid;
    gap: 1rem;
    
    &__item {
      display: grid;
      grid-template-columns: minmax(10px, 1fr);
      gap: 5px;
      justify-items: center;
      text-align: center;
      
      &-icon {
        width: 66%;
        transition: transform .7s ease-in-out;

        &:hover {
          transform: rotate(360deg);
          cursor: pointer;
        }        
      }
    }
  }
}

/* sections */
.bowling-section, .rug-section {
  background-color: $secondary-01;
  color: $txt-light;
  transition: transform .2s ease-in-out;
  padding: 1rem;
  
  &:hover {
    cursor: pointer;
    transform: scale(1.01);  
  }
}
  
.bowling-feature, .rug-feature {
  display: grid;
  grid-template-columns: minmax(10px, 1fr);
  grid-template-rows: repeat(3, auto);  
    
  &__img {
    grid-column: 1/2;
    grid-row: 1/3;
    width: 100%;
    border-radius: 10px;
  }

  &__caption {
    grid-column: 1/2;
    grid-row: 2/3;
    background-color: $caption;
    font-size: 1.4rem;
    margin: 0;
    padding: 0;
    border-radius: 0 0 10px 10px;

    &-txt {
      display: block;
      color: $txt-dark;
      text-decoration: none;
      padding: 01rem;       
    }
  }
}

.opinion-section {
  background-color: $primary-02;
  padding: 1rem;
}

/* aside */
.the-dude-abides {
  background-color: $secondary-02; 
  padding: 1rem;
}

/* footer */
.visit-the-dude {
  display: grid;
  grid-template-columns: 55% 45%;
  place-items: center;
  background-color: $primary-01;
  color: $txt-light; 
  text-align: center;
  padding: 1rem;
}
  
.full-name, .address {
  margin: 0.5rem 0;
}

.bowling-icon {
  width: 50%;
  margin: 1rem 0;
}
  
.social {
  grid-column: span 2;
  margin: 2rem 0;

  &__list {
    display: grid;
    grid-auto-flow: column;
    align-content: center;
  }

  &__icon {
    width: 50%;
    transition: transform .7s ease-in-out;

    &:hover{
      transform: rotate(360deg);
      cursor: pointer;
    }
  }
}

/* Media queries */
@media (min-width: 550px) {
  /* header with navigation */
  .hdr {  
    grid-template-columns: minmax(10px, 1fr);
  }
  
  .main-heading { 
    grid-column: auto;
    
    &__content {
      font-size: 2.6rem;
      writing-mode: initial;
    }
  }
  
  .nav {
    grid-column: auto;
    padding: 0;
    
    &-list {
      grid-template-columns: repeat(3,  minmax(10px, 1fr));
      
      &__item-icon {
        width: 80%;
      }
    }
  }
    
  /* footer */
  .visit-the-dude {
    grid-template-columns: repeat(3,  minmax(10px, 1fr));
    padding: 0 1rem;
  } 
  
  .bowling-icon {
    width: 50%;    
  }
  
  .social {
    grid-column: auto;
    
    &__icon {
      width: 70%;
    }
  }
}

@media(min-width: 768px) {
  .wrapper {
    grid-template-columns: 45% 55%;
    grid-template-rows: auto;
    grid-template-areas:
      "hdr      hdr"
      "abides   abides"
      "bowling  opinion"
      "rug      opinion"
      "visit    visit";
    gap: 1.5%;
  }
  
  /* header with navigation */
  .hdr {
    grid-area: hdr;
    background-color: transparent;
    padding: 0;
  }
  
  .nav-list {
    margin: 0;  
    
    &__item {
      grid-template-columns: 33% 66%;
      place-items: center;
      place-content: start;
      background-color: $primary-01;
      margin: 1vw 0;
      padding: 1vw;
      border-radius: 1rem;
      text-align: inherit;
    
      &:hover {
        cursor: pointer;
        background-color: $secondary-01;
        transition: all 0.4s;
        transform: scale(1.03);      
      }
      
      &-icon {
        max-width: 48px;
      }
    }
  }

  /* sections */
  .opinion-section {
    grid-area: opinion;
  }

  .bowling-section {
    grid-area: bowling;
    padding: 1vw;
  }

  .rug-section {
    grid-area: rug;
    padding: 1vw;
  }

  /* aside */
  .the-dude-abides {
    grid-area: abides;    
  }

  /* footer */
  .visit-the-dude {
    grid-area: visit;
  } 
}

@media (min-width: 1080px) {
  .wrapper {
    grid-template-columns: repeat(3,  minmax(10px, 1fr));
    grid-template-areas:
      "hdr      hdr      hdr"
      "opinion  bowling  abides"
      "opinion  rug      abides"
      "visit    visit    visit";
    gap: 1.5%;
  }
  
  /* header with navigation */
  .hdr {
    grid-template-columns: repeat(3,  minmax(10px, 1fr));
    grid-template-areas:
      "nav nav main-heading";
    align-items: center;
    gap: 1.5%;
  }
  
  .main-heading {
    grid-area: main-heading;
    
    &__content {
      font-size: 2.4rem;
      margin: 0;
    }
  }
  
  .nav {
    grid-area: nav;
    
    &-list__item {
      margin: 0;
    }
  }
  
  /* footer */
  .visit-the-dude {
    padding: 0 1vw;
  }
  
  .bowling-icon {
    max-width: inherit;
  }
    
  .social {
    margin: 0;
    
    &__list {
      max-width: 50%;
      margin: 0 auto;
    }
    
    &__icon {
      width: 100%;
      padding: 0 0.5rem;
    }
  }
}