// Adding styles for the whole theme
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

header#masthead {
  margin-bottom: 1.5rem;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

  .menu-logo-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .site-branding {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0rem;

    .site-description {
      display: none;
    }

    .nav-menu {
      flex-wrap: wrap;
    }

    .site-title a {
      color: $main !important;
      font-size: 1.8rem;
      text-transform: uppercase;
      margin-right: 8px;

      &:hover {
        text-decoration: none;
      }
    }

    img.custom-logo {
      max-width: 180px;
      height: auto;
    }
  }

  // Adding styles to the main menu
  .main-navigation ul {
    flex-wrap: wrap;
  }

  .menu {
    justify-content: center;
    flex-wrap: wrap;

    a {
      padding: .75rem 1rem;
      color: $main;

      &:hover {
        text-decoration: none;
        color: $menu-color;
      }
    }
  }
}

// Adding dropdown symbol to the menu
.menu-item-has-children:after {
  content: '⮟';
  top: 50%;
  right: 2%;
  margin-top: -5px;
  font-size: 12px;
  position: absolute;
}

// Adding styles to the current menu item
.current-menu-item {
  border-bottom: solid 2px $main;
  color: $menu-color;
}

// Adding styles to sub-menu
.main-navigation ul ul {
  display: inline-block;

  a {
    background-color: #eeee;
  }
}

// Adding styles to the menu toggle
.menu-toggle {
  background: none;
  border: none;
  position: absolute;
  top: 10%;
  right: 2rem;

  img {
    width: 1.5rem;
    height: auto;
  }
}