/* Additional custom styles added after custom.css was generated */

/** Subscribe Page **/
.page-subscribe .gform_fields {
  list-style: none;
  padding: 0;
}
.page-subscribe .gform_fields label {
  display: none;
}
.page-subscribe .gform_fields input[type="text"] {
  border: solid 1px #dadada;
}
.page-subscribe .gform_footer .gform_button {
  border: none;
  color: #ffff;
  font-weight: normal;
  padding-top: 10px;
  padding-bottom: 10px;
}
.page-subscribe .gform_submission_error,
.page-subscribe .validation_message {
  font-size: .9em;
}

@media screen and (min-width: 768px) {
  .page-subscribe form {
    display: flex;
  }
  .page-subscribe .gform_body {
    width: 75%;
  }
  .page-subscribe .gform_footer {
    width: 24%;
    margin-left: 14px;
  }
}

@media screen and (max-width: 767px) {
  .page-subscribe .gform_footer .gform_button {
    margin-top: 10px;
    float: right;
  }
}

/** Typography **/
body.elementor-page .larger-titles article .elementor-post__title a,
body.elementor-page .larger-titles article .elementor-post__card .elementor-post__title, 
body.elementor-page .larger-titles article .elementor-post__card .elementor-post__title a {
  text-transform: unset !important;
  font-family: var( --e-global-typography-dfc40a0-font-family ), Sans-serif !important;
  font-family: var( --e-global-typography-dfc40a0-font-family ), Sans-serif !important;
  font-size: var( --e-global-typography-dfc40a0-font-size ) !important;
  font-weight: var( --e-global-typography-dfc40a0-font-weight ) !important;
  line-height: var( --e-global-typography-dfc40a0-line-height ) !important;
  letter-spacing: var( --e-global-typography-dfc40a0-letter-spacing ) !important;
  word-spacing: var( --e-global-typography-dfc40a0-word-spacing );
}


.home-hero .elementor-heading-title,
.home-hero .elementor-heading-title * {
  /* Add shadow for contrast against background image. It may be overridden per-element in Elementor. */
  text-shadow: 0px 2px 8px rgb(0 0 0 / 85%);
}

body.single-post .page-content h5 {
  font-family: 'Founders Grotesk',sans-serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  line-height: 28px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #183C23 !important;
}

body.single-recipe h3 {
  padding-top: 20px;
}

/** Search Products Dropdown (depends on and overrides search_bar.css) **/
/* Hide initial select. It looks wrong and is of no use. */
select.search-bar__select {
  display: none;
}

.search-bar__select {
  width: 100%;
  float: right; /* align right next to the log in button */
  font-size: 14px;
}

.search-bar__select .ts-control {
  line-height: 22px;
}

.search-bar__select .ts-control::after,
.search-bar__select .ts-dropdown .create:before {
  /* WP site uses a different FA */
  font-family: "Font Awesome 5 Free";
  content: "\f002";
}

.search-bar__select .ts-control::after {
  /* Didn't quite line up right, maybe because we have a different FA */
  margin-top: 4px;
}

/* Smaller screens: hide until activated */
@media (max-width: 920px) {
  #search_bar_col {
    position: absolute;
    margin: 0;
    bottom: -4rem; /* relative to height of this element */
    left: -0.625rem;
    right: -0.625rem;
    padding: 0.625rem;
    background-color: #e8e8e4;
    z-index: 1;
  }
}
@media (min-width: 768px) and (max-width: 920px) {
  .elementor-element.header-menu-wrap {
    flex-grow: 1; /* fill available gap */
  }

  #search_bar_col {
    bottom: -3.4rem; /* relative to height of this element */
  }
}

/* Larger screens: show without button */
@media (min-width: 921px) {
  #search_bar_btn {
    display: none;
  }

  #search_bar_col {
    flex-grow: 1; /* fill available gap */
    flex-shrink: 1; /* but don't force others to shrink */
    margin-left: 1em;

    white-space: nowrap;
  }

  #search_bar_col[aria-hidden] {
    display: initial; /* unhide for desktop */
  }

  #search_bar_col .elementor-widget-wrap {
    height: 100%; /* ensure vertical alignment */
  }

  .search-bar__select {
    max-width: 20em;
    float: right; /* align right next to the log in button */
    border-color: var(--e-global-color-primary);
  }
}

/** Toggle button **/
/* Show close icon when expanded */
.toggle-btn[aria-expanded=true] .fas::before {
  content: "\e87f";
  font-family: eicons;
}

.toggle-expandable[aria-hidden=true] {
  display: none;
}

@media (max-width: 1130px) {
  /* hide on smaller screens */
  .sign-in-btn {
    display: none;
  }
}

/**
 * Buttons
 * are generally set up in Elementor, but sometimes you just need a class
 */
/* Secondary button */
.btn-secondary .elementor-button,
.btn-secondary .elementor-button:hover {
  line-height: 18px;
  color: #40853F;
  background-color: transparent;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #40853F;
  border-radius: 2px 2px 2px 2px;
  padding: 10px;
  min-width: 40px;
}
.btn-secondary .elementor-button:active {
  background-color: #40853F;
  color: white;
}

.btn-icon-only .elementor-button-text {
  display: none;
}
.btn-icon-only .elementor-button-icon {
  margin: 0;
}