// Centered page, post titles and subtitles
//-------------------------------

.page-title-container,
.post-title-container {
    width: 100%;
    margin-bottom: 6rem;
    height: 20rem;

    text-align: center;
    position: relative;

    h1 {
      font-weight: $base-font-weight-bold;
      font-size: $post-title-size;
      border: 0; // reset
      a {
        display: block; // slide border needs to cover the whole heading
        @include border-slide(left)
      }
    }

    // heading container
    .heading-container {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }

}

//  Post meta under post title
.post-meta {
  font-weight: $base-font-weight;
  font-size: 22px;
  color: var(--text-color-light);

  span {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.85em;

    a {
      color: var(--text-color-light);
      text-transform: lowercase;
      margin: .2em .25em;
    }
  }

}

@media (max-width: 48rem) {
    .page-title,
    .post-title {
        height: 10rem;
        margin-bottom: 2rem;

        h1 {
          font-size: 2.5rem;
        }
    }
    .post-meta {
      font-size: $mobile-font-size;
    }
}

// Hero layout off - blog post titles
//-------------------------------
.post-title-container-nohero {
    margin-bottom: 4rem;
    text-align: center;

    h1 {
    margin: 0;
    font-size: $blog-title-size;
    }
}

.post-meta-nohero {
  margin-top: 0.5rem;
  color: var(--text-color-light);
  font-weight: $base-font-weight;
  font-size: 0.75em;

  a {
    color: var(--text-color-light);
    margin: 0 .25em;
    text-transform: lowercase;
    }
}

.post-meta-link-nohero {
  margin: 0 .5em 0 .5em;
}

.no-hero-margin {
    margin-bottom: 0rem; // margin reset
}

@media (max-width: 48rem) {
    .post-title-container-nohero h1 {
      font-size: 2rem;
      }
    }