/* var.. purple  */
/*

TABLE OF CONTENTS

  1. Global styles
  2. Hero
  3. Navigation
  4. Trips
  5. CTA
  6. Team
  7. Problem
    7a. Actions
  8. Gallery
  9. Footer
    9a. Contact
    9b. Connect
  10. Media Queries
    10a. Media Query, (min-width: 700px)
      10a-i. Hero
      10a-ii. Navigation, Large screen
      10a-iii. Trips, Large screen
      10a-iv. CTA summaries, Large screen rules
      10a-v. Team, Large screen rules
      10a-vi. Problem
      10a-vii. Actions
      10a-viii. Footer
    10b. Media Query, (min-width: 1000px)

*/

/* ############ 1. Global Styles ############ */
/* .howItWorks {
  text-align: center;
  padding-top: 10px;
  font-weight: bold;
  color: #984ab5;
} */
/* @media screen and (min-width: 490px) {
  .howItWorks {
    text-align: center;
  }
  .howItWorks h1 {
    border: solid 1px black;
    border-radius: 10px;
    padding: 5px;
    display: inline-block;
  }
} */
/* @media screen and (min-width: 490px) {
  .howItWorks h1 {
    font-size: 60px;
  }
} */

.howItWorks {
  text-align: center;
}
.howItWorks h1 {
  border: solid 1px rgb(121, 116, 116);
  background-color: rgb(237, 232, 232);
  border-radius: 10px;
  padding: 5px;
  margin: 9px 15px 0;
  display: inline-block;
  font-weight: bold;
  font-size: 30px;
  color: #6c63cf;
}

/* button that links to contact page */
.linkToContact {
  display: flex;
  justify-content: center;
  align-items: center;
}
.linkToContact a {
  padding: 15px;
  background-color: #61c961;
  border-radius: 5px;
  text-decoration: none;
  color: #000;
  transition: 1s background-color;
  text-align: center;

  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
  transform: scale(1);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
.linkToContact a:hover {
  background-color: #6040b9;
  transition: 1s background-color;
  color: #fff;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 100%;
}

body > * {
  font-family: "Lato", sans-serif;
  line-height: 1.4;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  font-family: "Nunito", sans-serif;
  line-height: 1;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.6rem;
}

h4 {
  font-size: 1.4rem;
}

p {
  line-height: 1.4;
}

a {
  color: #36bae6;
  font-weight: bold;
}

a:hover {
  color: #e06630;
}

i {
  padding-left: 0.5rem;
}

main.wrapper {
  max-width: 1300px;
  margin: auto;
}

/* ############ 2. Hero ############ */
.hero {
  background: url("../images/header1_sm.jpg") no-repeat center right;
  background-size: cover;
  color: #fff;
  font-size: 20px;
  text-align: center;
  display: grid;
  grid-template-columns: 10px 2fr 10px;
  grid-template-rows: 0.5fr 1fr 20px;
  grid-gap: 20px;
}

.hero img {
  margin: auto;
  padding-top: 1rem;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.hero article {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.hero h1 {
  font-size: 2rem;
  text-transform: uppercase;
}

.hero button {
  background-color: #fff;
  border: none;
  border-radius: 4px;
  color: #2abadf;
  font-size: 1rem;
  padding: 5px 10px;
  margin: 0.75rem auto 0;
}

/* Main :: */

main {
  /* padding-bottom: 90px; */
}

.home {
  padding: 1rem 2rem 2rem;
  display: grid;
  grid-template-columns: auto;
  grid-gap: 1rem;
}

.home article {
  border: 1px solid #6f3f3f;
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.home figure {
  display: grid;
  grid-template-rows: 200px 50px;
}

.home img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  /* object-fit: cover; */
  width: 100%;
  object-fit: fill;
  /*guess don't need this>> width: 100%; */
  height: 250px;
}

/* .home figcaption {
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
}

.home figcaption > h3 {
  color: white;
  padding: 0.75rem;
  font-size: 1.25rem;
} */

.home p {
  font-size: 1rem;
  line-height: 1.5;
  padding: 1rem 0.75rem;
}

/* Main :: - Media Query */
@media screen and (min-width: 800px) {
  /* .hero {
    background-position: center center;
    padding: 4em 2em;
    display: flex;
    align-items: center;
  }

  .hero p {
    flex: 1;
  } */

  .home {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}

/* ######### 9. Footer ######### */
footer {
  margin-top: 1rem;
  /* padding: 60px; */
  /* margin-bottom: 20px; */
}
/* ######### 9a. Footer > Contact ######### */
/* Contact Main Section - incl about2 and form articles */
.hours {
  background-color: #472255;
  color: #fff;
  padding: 1rem 1rem 2rem;
}

/* ######### 9b. Footer > Connect ######### */
.social,
.contactInfo {
  background-color: #8867ba;
  color: #fff;
  padding: 1rem 1rem 0;
  text-align: center;
}

.social h3 {
  border-bottom: solid 1px #333738;
  font-weight: 400;
  padding-bottom: 0.25rem;
}

.socialIcons {
  font-size: 200%;
  padding: 1rem 0;
}

.socialIcons a {
  color: #223055;
  padding: 0 0.5rem;
}

.socialIcons a:hover {
  color: #ffc107;
}

.contactInfo {
  padding-top: 0;
}
.contactInfo img {
  padding: 10px;
}

.contactInfo article {
  /* border-top: solid 1px #444b4f; */
  padding: 1rem 0;
}

.contactInfo h4 {
  font-weight: 400;
}

.contactInfo li {
  font-weight: 300;
  list-style-type: none;
}

/* ############ 10. Media Queries ############ */

/* ############ 10a. Media Query, (min-width: 700px) ############ */
@media screen and (min-width: 700px) {
  /* ######### 10a-i. HERO, Large screen rules ######### */
  header.hero {
    background: url(../images/header1_lg.jpg) no-repeat center left;
    background-size: cover;
    text-align: left;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 0.25fr 1fr 0.25fr;
    align-items: center;
  }

  .hero img {
    margin: 0 0 0 auto;
    grid-row: 2 / 3;
  }

  .hero article {
    max-width: 1000px;
    grid-column: 3 / 6;
  }

  /* ######### 10a-viii. Footer, Large screen rules ######### */
  footer {
    /* this was causing the white space below the footer area */
    /* display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 0.25fr; */
  }

  .contact {
  }

  .social h3 {
    border-bottom: none;
    /* padding: 0.5rem 1rem 0.5rem 0; */
    text-align: right;
  }

  .social article {
    height: 100%;
    /* display: grid;
    grid-template-columns: 1fr 0.5fr;
    align-items: center; */
  }

  .hours {
    display: grid;
    grid-template-columns: 1fr 4fr;
  }
  .hours article {
    grid-column: 2/3;
    text-align: center;
  }

  .social {
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-template-areas: "h3 ." "p ." "h4 .";
    padding-top: 0;
  }
  .social h3 {
    grid-area: h3;
    text-align: center;
  }
  .social p {
    grid-area: p;
  }
  .social h4 {
    grid-area: h4;
  }

  .socialIcons {
    border-left: solid #fff 1px;
    font-size: 150%;
    padding: 0.5rem 0 0.5rem 1rem;
  }

  .socialIcons a {
    display: block;
  }

  .contactInfo {
    background-color: #ccb6ff;
    color: #233156;
    padding: 1rem 0 0;
    grid-column: 1/-1;
  }
}

/* ############ 10b. Media Query, (min-width: 1000px) ############ */
@media screen and (min-width: 1000px) {
  /* ######### 10b-i. Footer, X-Large screen rules ######### */
  .contactMain {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* grid-template-columns: auto minmax(min-content, 580px); */
    grid-template-areas:
      "about ."
      ". form";
  }

  /* //:> xCUR.. */
  .about2 {
    grid-area: about;
  }

  /* //:> xCUR.. */

  .about2_1 {
    /* margin: 0 30%; */
    padding: 0 20px;
  }

  .form {
    display: grid;
    /* grid-template-columns: repeat(3, 1fr); */
    /* grid-template-columns: auto minmax(min-content, 580px); */
    grid-template-areas:
      ". h ."
      ". p ."
      ". f .";
    /* grid-area: form; */
  }

  .form h3 {
    grid-area: h;
    text-align: center;
  }

  .form p.formIntro {
    grid-area: p;
    text-align: center;
  }

  .hours {
    display: grid;
    grid-template-columns: 1fr 4fr;
  }
  .hours article {
    grid-column: 2/3;
    text-align: center;
  }

  .social {
    display: grid;
    grid-template-columns: 4fr 1fr;
    padding-top: 0;
  }
  .social article {
    grid-column: 1/2;
    text-align: center;
  }

  /* .hours {
    display: grid;
    grid-template-columns: auto minmax(min-content, 580px);
    grid-template-areas:
      ". p1"
      ". p2"
      ". p3"
      ". p4"
      ". p5";
  }
  .hours p.hours1 {
    grid-area: p1;
  }
  .hours p.hours2 {
    grid-area: p2;
  }
  .hours p.hours3 {
    grid-area: p3;
  }
  .hours p.hours4 {
    grid-area: p4;
  }
  .hours p.hours5 {
    grid-area: p5;
  } */

  /*  ########### Note viewers, I am going to place all of our new code for the 05_03 lecture here, in between these new code start/end comments. I will end up deleting these comments once we hvae finished. I just want you to be clear on what is different compared with what we had before :) ########### */
  /*  ########### NEW CODE START (05_03) ########### */
  form#contactForm {
    max-width: initial;
    grid-area: f;
    display: grid;
    /* grid-template-columns: repeat(3, 1fr); */
    grid-template-areas:
      "name ph"
      /* "ph ." */
      "email city"
      "state zip"
      "address address"
      "radio radio"
      "msg msg"
      "btn .";
    grid-gap: 1rem;
  }

  .contactForm div {
    margin-top: 0;
  }

  .contactForm div:nth-child(1) {
    grid-area: name;
    /* grid-column: 2/3; */
  }

  .contactForm div:nth-child(2) {
    grid-area: ph;
    /* grid-column: 2/3; */
  }

  .contactForm div:nth-child(3) {
    grid-area: email;
    /* grid-column: 2/3; */
  }

  .contactForm div:nth-child(4) {
    grid-area: city;
    /* grid-column: 2/3; */
  }

  .contactForm div:nth-child(5) {
    grid-area: state;
  }

  .contactForm div:nth-child(6) {
    /* margin: 1.8rem 0 0; */
    grid-area: zip;
  }

  .contactForm div:nth-child(7) {
    grid-area: address;
  }

  .contactForm div:nth-child(8) {
    grid-area: radio;
  }

  .contactForm div:nth-child(9) {
    grid-area: msg;
  }

  .contactForm button {
    width: 100%;
  }

  .contactForm textarea {
    max-width: 100%;
  }
  /*  ########### NEW CODE END (05_03) ########### */

  .social article {
    max-width: 580px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .socialIcons {
    border-left: none;
    padding-left: 0;
  }

  .socialIcons a {
    display: inline-block;
    font-size: 180%;
  }

  footer {
    /* position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center; */
  }
}

@media screen and (min-width: 1181px) {
  /* footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
  } */
}