@mixin masthead-background-containers() {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  width: auto;
  height: inherit;
}

.navbar-static-top {
  margin-bottom: 0;
}

.masthead {
  background-color: $masthead-bg;
  border-bottom: 1px solid $border-color;
  margin-bottom: $padding-large-vertical * 1.5;
  padding: 0;
  position: relative;


  .site-title {
    margin-top: $padding-large-vertical;
    padding-bottom: $padding-base-vertical / 2;
    position: relative;
    white-space: nowrap;
  }

  small {
    @extend .d-none;
    @extend .d-md-block;
    @extend .py-2;

    font-size: $h4-font-size;
  }

  .navbar {
    &:last-child {
      margin-bottom: 0;
    }
  }

  .navbar-form {
    text-align: right;
  }
}

.resource-masthead {
  .site-title {
    @extend .text-center;
  }

  .navbar {
    border-bottom: 1px solid $navbar-transparent-border;
    border-top: 0;
    margin-bottom: 0;
  }

  .navbar-nav {
    float: right;
  }

  .search-query-form {
    display: none;
  }
}

.site-title-container {
  @extend .px-4;
  @extend .py-2;

  max-height: $masthead-height - $navbar-brand-height;
}

.image-masthead {
  background-color: $black;

  .navbar {
    @extend .navbar-dark;
    background-color: $navbar-transparent-page-bg;
    text-transform: uppercase;
    .dropdown-menu {
      text-transform: none;
    }
  }

  .h2 {
    color: $white;
    text-shadow: 1px 1px 0 $gray-900;
  }

  small {
    color: $white;
  }

  // This is to add a background image to the masthead, in a way that
  // enables the site title and subtitle text to be visible above it.
  .background-container {
    @include masthead-background-containers();
    background-repeat: no-repeat;
    background-size: cover;

    // Add right border to image to hide lighter blurred edge
    border-right: 1px solid $black;

    // Add small amount of blur to help text stand out
    //filter: url(masthead/blur.svg#blur); // for older versions of FF
    -webkit-filter: blur($masthead-image-blur);
    filter: blur($masthead-image-blur);

    height: 100%;

    // Shift image slightly to hide blurred edge of image
    margin-left: -$masthead-image-blur;
    margin-top: -$masthead-image-blur;
    overflow: hidden;
  }

  // Include gradient to improve text legibility,
  // especially on light background images.
  .background-container-gradient {
    @include masthead-background-containers();
    background:
     linear-gradient(
       rgba(0, 0, 0, 0.0),
       rgba(0, 0, 0, 0.4),
       rgba(0, 0, 0, 0.5)
     );

    height: 100%;
  }
}

.col-md-4 {
  .submit-search-text {
    // hide 'search' label
    // copied from .sr-only, sadly can't seem to use @extend in a media
    // query like this, have to copy.
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
  }
}