Announcement Bar not visible due to custom CSS

hi all, the announcement bar on my site is not visible. There is a black bar where the announcement bar should be but the text is not showing up. I do have some Custom CSS already on the site and I'm guessing it is to blame. But not sure what I can modify without breaking the site.

Site: https://www.marthasfarmsanctuary.org

Here's the CSS:

.Header--overlay.Header.Header--bottom {
  position: fixed;
  top: 0px;
  z-index:9999;
  width: 100%;
  background-color: #FBF7F0;
  padding-bottom: 10px;
}

.Header.Header--bottom {
  position: fixed;
  top: 0px;
  z-index:9999;
  width: 100%;
  background-color: #FBF7F0;
  padding-bottom: 10px;
}

.sqs-block-image .design-layout-poster .image-card-wrapper {
    justify-content: flex-start !important;
    align-items: flex-end !important;
    padding:40px;
}

p, h1, h2, h3 {
-webkit-hyphens: manual !important; 
-moz-hyphens: manual !important; 
-ms-hyphens: manual !important; 
hyphens: manual !important;
}

.header-menu-bg.theme-bg--primary { background: #593619; } .header-menu-nav * { color: red !important; } span.chevron.chevron--right { transform: rotate(135deg); }

.sqs-use--icon {fill:#593619!important;}
.sqs-use--mask {fill: #f89e4e!important;}

.form-wrapper input[type="submit"] {
 display: block;
 background: #f89e4e;
 color: #593619;
 border: 593619;
 padding: 10px 20px;
 -moz-border-radius: 2px;
 border-radius: 2px;
 cursor: pointer;
}

.Footer-blocks--middle h3{
  font-size: 12px;
  color: #593619 !important;
}

time.Blog-meta-item.Blog-meta-item--date {
    display: none;
}

I added some CSS and the announcement bar now shows but has a second black bar underneath it. 

What I added:

.sqs-announcement-bar {
  position: relative;
  z-index: 10000;
}

I would now like to

1) remove the second black bar entirely

2) adjust the height of the announcement bar so that it doesn't cover the navigation and the logo. Is it possible to push all content on the page down so that the announcement bar can float above the page?

ok figured out that by adding value to padding-bottom here, the second black bar went away 

.Header--overlay.Header.Header--bottom {
  position: fixed;
  top: 0px;
  z-index:9999;
  width: 100%;
  background-color: #FBF7F0;
  padding-bottom: 55px; 
}

Now the only issue is the Announcement Bar covers the header (and logo) of the site. I tried using this code below but chopped off the "x" for the announcement bar. Is there any way to shorten the height of the announcement bar OR push the header down so the site "starts" below the announcement bar?

/* reduce height */
div.sqs-announcement-bar-text {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

thank you!