/* ================
    MOBILE FIRST
================ */

:root {
  --ff-heading: "Oswald", sans-serif;

  --clr-primary: #3b4050;
  --clr-secondary: #a59678;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  color: var(--clr-primary);
}

img {
  display: block;
  max-width: 100%;
}

/* ================
    TYPOGRAPHY
================ */

h1,
h2 {
  font-family: var(--ff-heading);
  color: var(--clr-secondary);
  margin: 0;
  line-height: 1.1;
}

p {
  line-height: 1.5;
}

.hero__body,
.primary-nav__link,
.link-btn,
.sidebar__title,
.sidebar__body,
.white {
  color: #ffffff;
}

.section-one__title,
.section-one__body,
.sidebar__title,
.sidebar__body {
  text-align: center;
}

.section-one__body {
  margin-top: 0.5em;
  margin-bottom: 2em;
}

.article__title {
  font-size: 1.875rem;
}

.footer__title {
  font-size: 2.19rem;
  color: #ffffff;
  text-align: center;
}

.footer__subtitle {
  margin-top: 1em;
}

.footer__item {
  margin-top: 1em;
}

.footer__body,
.footer__link {
  color: #b2b5bd;
}

.nav__link,
.hero__link {
  text-decoration: none;
}

.primary-nav__link,
.link-btn {
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
}

.primary-nav__link {
  font-family: var(--ff-heading);
  margin: 0.5em 0;
}

.primary-nav__item {
  text-align: center;
}

.hero__link {
  padding: 0.5em 1.5em;
  margin-top: 2.5em;
}

.link-btn {
  background-color: var(--clr-secondary);
  border-radius: 10em;
  padding: 0.25em 0.75em;
}

.last-p {
  margin-bottom: 0;
}

/* ================
    LAYOUT
================ */

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.toggle-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.toggle-btn-line {
  display: block;
  width: 1.5rem;
  height: 0.25rem;
  margin: 0.25rem;
  background-color: #ffffff;
  border-radius: 10rem;
}

.primary-nav {
  background-color: #2e323f;
  padding: 1em 0;
}

.primary-nav__list-container {
  display: none;
}

.primary-nav__list-container.active {
  display: block;
}

header,
footer,
.sidebar__widget {
  background-color: var(--clr-primary);
}

.section-one,
.section-two,
footer {
  padding: 2.5em 0;
}

.section-one {
  background-color: #f1f1f1;
}

header {
  padding: 4em 0;
}

.sidebar__widget {
  padding: 1em;
  margin-top: 1em;
}

.nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

footer {
  background-image: linear-gradient(#2e323f, var(--clr-primary));
}

/* ================
    MEDIA QUERIES
================ */

@media (min-width: 700px) {
  .row {
    display: flex;
    justify-content: space-between;
  }

  /* ================
    TYPOGRAPHY
  ================ */

  .primary-nav__link {
    margin: 0;
  }

  .hero__title {
    font-size: 3.5rem;
  }

  .hero__body,
  .hero__link {
    font-size: 1.25rem;
  }

  .section-one__title,
  .sidebar__title {
    font-size: 1.875rem;
  }

  .article__title {
    font-size: 2.25rem;
  }

  .article__body {
    font-size: 1.125rem;
  }

  .footer__subtitle {
    font-size: 1.3125rem;
  }

  .footer__title {
    font-size: 3rem;
    margin-bottom: 1em;
  }

  /* ================
    LAYOUT
  ================ */

  .toggle-btn {
    display: none;
  }

  .primary-nav__list-container {
    display: block;
  }

  .primary-nav__list {
    display: flex;
    align-items: center;
    gap: 1em;
  }

  header {
    padding-top: 2.5em;
    padding-bottom: 5em;
  }

  .hero__col {
    width: 45%;
  }

  .hero__second-col {
    align-self: flex-end;
  }

  .section-one {
    padding: 3em 0;
  }

  .section-one__col {
    width: 27.5%;
  }

  .section-two {
    padding: 4em 0;
  }

  /* ARTICLE */
  .section-two__col-main {
    width: 57.5%;
  }

  /* SIDEBAR */
  .section-two__col-side {
    width: 32.5%;
  }

  .sidebar__widget {
    padding: 1.5em;
    margin-top: 0;
    margin-bottom: 1em;
  }

  footer {
    padding: 2.5em 0;
  }

  .footer__main-col {
    width: 40%;
  }

  .footer__col {
    width: 15%;
  }
}

@media (min-width: 1000px) {
  body {
    font-size: 1.125rem;
  }

  /* ================
    TYPOGRAPHY
  ================ */

  .hero__title {
    font-size: 5.625rem;
  }

  .hero__body,
  .hero__link {
    font-size: 1.5rem;
  }

  /* ================
    LAYOUT
  ================ */

  .primary-nav__list {
    gap: 2em;
  }

  header {
    padding-top: 5em;
    padding-bottom: 10em;
  }

  .section-two {
    padding: 8em 0;
  }

  /* ARTICLE */
  .section-two__col-main {
    width: 55%;
  }

  /* SIDEBAR */
  .section-two__col-side {
    width: 35%;
  }

  footer {
    padding: 4em 0;
  }
}

@media (hover: hover) {
  a:hover,
  a:focus {
    padding-bottom: 0.25em;
    border-bottom: 1px solid;
  }
}