/* Homepage safeguards for narrow viewports. */
@media (max-width: 767px) {
  body.home #primary-content {
    width: 100%;
    padding-left: 6px;
    padding-right: 6px;
    box-sizing: border-box;
  }

  /* Keep one small gutter at each content layer, rather than stacking
   * Bootstrap's column gutter with WPBakery's column-inner gutter. */
  body.home #primary-content > .row > .primary-content {
    padding-left: 0;
    padding-right: 0;
  }

  body.home #primary-content .vc_column-inner {
    padding-left: 6px;
    padding-right: 6px;
  }

  body.home #primary-content > .row,
  body.home #primary-content .wpb-content-wrapper > .vc_row {
    width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  body.home #primary-content .vc_pageable-slide-wrapper,
  body.home #primary-content .vc_grid-item {
    max-width: 100%;
    box-sizing: border-box;
  }

}

/*
 * Header 2 is the mobile header used by the site.  The theme keeps this
 * header active through 991px but gives .customize-search a fixed 260px
 * form width.  Let the search consume (and relinquish) the available space,
 * while the action controls retain their natural width.
 */
@media (max-width: 991px) {
  header.mobile-header.header-2 .mobile-header-inner {
    gap: 6px;
  }

  header.mobile-header.header-2 .mobile-logo-header {
    flex: 0 1 auto;
    min-width: 0;
  }

  header.mobile-header.header-2 .mobile-logo-header > a {
    display: block;
    min-width: 0;
  }

  header.mobile-header.header-2 .mobile-logo-header img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  header.mobile-header.header-2 .mobile-header-nav {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
    gap: 6px;
  }

  header.mobile-header.header-2 .header-customize-mobile {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    gap: 6px;
  }

  header.mobile-header.header-2 .header-customize-mobile > .customize-search {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }

  header.mobile-header.header-2 .header-customize-mobile .search-form,
  header.mobile-header.header-2 .header-customize-mobile .search-field {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  header.mobile-header.header-2 .header-customize-mobile > li:not(.customize-search),
  header.mobile-header.header-2 .mobile-header-menu {
    flex: 0 0 auto;
    margin-left: 0;
  }
}