/* Overrides for the location landing pages. Loaded after theme-business.css,
   which several rules here depend on winning against. */

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
ul,
li {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.header-logo {
  .logo {
    display: inline-block;
    max-width: 207px;
    width: 100%;
    margin: 0 15px 15px 0;
  }

  .badge-partner {
    display: inline-block;
    max-width: 100px;
    width: 100%;
    margin: 0 10px 5px 5px;
  }

  .badge-cloud {
    display: inline-block;
    max-width: 100px;
    width: 100%;
    position: relative;
    top: -2px;
  }
}

/* .stroke-blurb sets font-size but no line-height, so without this the value
   would come from whichever heading element carried it. */
.stroke-blurb {
  line-height: 1.1;
}

.header-1 h1.banner-blurb {
  margin: 10px 15px 15px 0;
}

.banner-brand {
  color: #fff;
  font-weight: 800;
}

.awards-row {
  margin-bottom: 30px;

  .award {
    margin-bottom: 15px;
  }
}

/* Everything below is scoped to the body class: the theme reaches these
   elements with contextual selectors (`.header-1 h5`, `.features-3 h3`,
   `.features-2 h5,.features-3 h5`) which outrank a bare class, so an unscoped
   class silently loses its margins. */
.location-page .banner-lede {
  font-size: 22px;
  line-height: 30px;
  font-weight: 400;
  display: inline-block;
  width: 100%;
  margin-bottom: 0;
}

/* Body copy headings. Sizes live here rather than on the element so the heading
   level is free to follow the document outline. The theme drops every heading a
   step at 990px, which is why each of these has a second set of values below. */
.location-page .section-title {
  font-size: 46px;
  line-height: 54px;
  margin-bottom: 20px;

  &.spaced {
    margin-top: 40px;
  }
}

.location-page .section-heading {
  font-size: 36px;
  line-height: 44px;
  font-weight: 300;
  margin-bottom: 26.67px;
}

.location-page .feature-title {
  font-size: 22px;
  line-height: 30px;
  font-weight: 400;
  margin-bottom: 10px;
}

@media (width <= 990px) {
  .location-page .banner-lede {
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 40px;
  }

  .location-page .section-title {
    font-size: 36px;
    line-height: 40px;
  }

  .location-page .section-heading {
    font-size: 26px;
    line-height: 30px;
    margin-bottom: 20px;
  }

  .location-page .feature-title {
    font-size: 18px;
    line-height: 26px;
  }
}

/* Line-height deliberately unset: it comes from the <h2> this sits on. */
.subsection-title {
  font-size: 26px;
  font-weight: 400;
}

.lead-note {
  font-size: 22px;
  margin-bottom: 10px;
}

.full-video {
  margin-bottom: 30px;
}

/* Offsets an empty .row that is still in the markup on the SEO pages. */
.pull-up {
  margin-top: -125px;
}

.city-footer {
  .logo {
    display: block;
    max-width: 207px;
    width: 100%;
    margin: 15px auto;
  }

  .badge-row {
    text-align: center;
    margin-bottom: 15px;

    & + .badge-row {
      margin-bottom: 25px;
    }
  }

  .badge-partner {
    display: inline-block;
    max-width: 115px;
    width: 100%;
    margin: 0 10px 5px 5px;
  }

  .badge-cloud {
    display: inline-block;
    max-width: 115px;
    width: 100%;
    position: relative;
    top: -2px;
  }

  .badge-profit {
    display: inline-block;
    max-width: 90px;
    width: 100%;
    margin: 0 10px 5px 5px;
  }

  .badge-forbes {
    display: inline-block;
    max-width: 145px;
    width: 100%;
    position: relative;
    top: -2px;
  }
}

@media (width <= 500px) {
  .full-video {
    width: 350px;
  }

  .header-logo,
  .text-white {
    text-align: left;
  }
}

@media (width <= 400px) {
  .full-video {
    width: 275px;
  }
}