.content-page-body {
  max-width: $skin-content-body-max-width;
  margin-right: auto;
  margin-left: auto;
  video {
    max-width: 100%;
  }
}

.content-page-header {
  max-width: $skin-content-body-max-width;

  &--full-width {
    max-width: 100%;
  }

  margin-right: auto;
  margin-left: auto;
}

.content-page-header .details {
  padding: map-get($spacers, block);
  margin-bottom: map-get($spacers, block);
  background-color: $gray-100;
  &__image {
    margin-bottom: map-get($spacers, block);
  }
  .page-contact-details {
    &__content-website,
    &__content-public-email {
      display: inline;
    }
  }
}

.contact-page {
  &__content-name {
    margin-bottom: 16px;
    @include skin-typography($style: "header-1");
  }
  &__wrapper {
    display: flex;
  }
  &__image {
    $size: 160px;
    $size-small: 112px;
    width: $size-small;
    height: $size-small;
    margin-right: 20px;
    border-radius: $size-small;

    @include media-breakpoint-up(md) {
      width: $size;
      height: $size;
      border-radius: $size;
    }
  }
}
/*! purgecss start ignore */
.page-contents {
  $self: &;

  &__content-body p {

    [data-embed-type="image"][data-embed-align="right"] {
      margin-bottom: 1rem;
      @include media-breakpoint-up(md) {
        text-align: right;
      }
    }

    [data-embed-type="image"][data-embed-align="left"] {
      margin-bottom: 1rem;
      @include media-breakpoint-up(md) {
        text-align: left;
      }
    }
  }

  &__content-body h2 {
    font-size: 26px;
    @include media-breakpoint-down(sm) {
      font-size: 23px;
    }
  }

  &__content-body h3 {
    font-size: 24px;
  }

  &__content-body ol,
  &__content-body ul {
    list-style-position: initial;
  }

  .btn-transcript,
  .btn-transcript:hover {
    background-color: $gray-100;
    border-radius: 10px;
  }

  &__content-transcript-title {
    @include skin-typography($style: "article-text", $link-style: "content-body");
    font-weight: 700;
    margin-top: map-get($spacers, 2);
    margin-bottom: map-get($spacers, 2);
  }

  &__content-body {
    @include theme-content-body();

    > :last-child {
      margin-bottom: 0;
    }

    blockquote {
      display: block;
      padding: 20px;
      border-left: 8px solid #d2d2d2;
      background: #e3e3e3;
      p {
        margin-bottom: 0;
      }
    }

    .pullquote {
      position: relative;
      float: right;
      width: 50%;
      max-width: 50%;
      padding: 12px 0 12px 12px;
      margin: 6px 0 6px 12px;
      font-size: 18.75px;
      color: #6f6f6f;
      z-index: 0;
      &::before {
        position: absolute;
        left: 0;
        z-index: -1;
        font-size: 8em;
        line-height: .6em;
        content: "“";
        color: #dedede;
      }
    }

    .drop-caps {
      display: inherit;
      &::first-letter {
        float: left;
        padding: 0;
        margin: -.05em .125em 0 0;
        font-size: 115px;
        font-weight: 700;
        line-height: .8;
      }
    }

    p.footnote {
      @include theme-apply-fonts(
        $font-family: $theme-content-heading-h6-font-family,
        $font-size-sm: $theme-content-heading-h6-font-size-sm,
        $font-size: $theme-content-heading-h6-font-size,
        $font-weight: $theme-content-heading-h6-font-weight,
        $line-height-sm: $theme-content-heading-h6-line-height-sm,
        $line-height: $theme-content-heading-h6-line-height
      );
    }
  }

  &__content-sidebar {
    @include border-radius($theme-page-border-radius);
    @include theme-content-body();
    @include theme-page-body-spacing();
    padding: map-get($spacers, 4);
    background-color: $gray-100;
    border-left: 8px solid $gray-300;
  }

  &__content-body,
  &__content-profile,
  &__content-sidebar,
  &__content-transcript {
    padding-bottom: map-get($spacers, block);
    @include skin-typography($style: "article-text", $link-style: "content-body");

    &:empty {
      display: none;
    }

    .btn-primary {
      color: map-deep-get($skin-buttons, "primary", "color");
      text-decoration: none;
      &:hover {
        color: map-deep-get($skin-buttons, "primary", "hover-color");
        text-decoration: none;
      }
    }

    .btn-secondary {
      color: map-deep-get($skin-buttons, "secondary", "color");
      text-decoration: none;
      &:hover {
        color: map-deep-get($skin-buttons, "secondary", "hover-color");
        text-decoration: none;
      }
    }
    > .btn-transcript,
    > .btn-transcript:hover {
      background: transparent !important;
      background-color: transparent;
      font-weight: $font-weight-bold;
    }
    .node-list {
      &--gray-background {
        background-color: $gray-100;
      }
    }
    .section-feed-content-node {
      &__content-short-name {
        font-size: 20px;
        line-height: 1em;
      }
      &__image-wrapper {
        width: 125px;
        min-width: 125px;
        height: 83px;
        @include media-breakpoint-up(md) {
          width: 198px;
          min-width: 198px;
          height: 131px;
        }
      }
      &__image {
        width: 125px;
        height: 83px;
        @include media-breakpoint-up(md) {
          width: 198px;
          height: 131px;
        }
      }
    }

    hr {
      display: block;
      clear: both;
    }
  }

  &__content-embed-code {
    @include theme-embed-responsive($theme-primary-media-video-aspect-ratio-x, $theme-primary-media-video-aspect-ratio-y);

    iframe,
    embed,
    object,
    video {
      @include theme-embed-responsive-item();
    }
  }

  > #{ $self }__content-transcript {
    border-top: solid 3px $gray-200;
  }

  &--download-form {
    padding: 22px;
    background-color: $gray-100;
    @include media-breakpoint-up(md) {
      padding-right: 66px;
      padding-left: 66px;
    }
  }

  &--contact {
    #{ $self } {
      &__content-body {
        max-width: 790px;
      }
    }
  }

  .primary-image {
    &__image-caption,
    &__image-credit {
      display: inline;
      margin-right: .5rem;
    }
    &__image-credit::before {
      content: "Source: ";
    }
  }

  [data-embed-type] .caption,
  [data-embed-type] .credit {
    display: inline-block;
    margin-right: .5rem;
  }

  [data-embed-type] .credit::before {
    content: "Source: ";
  }
}

// prevent jwplayer style wrapper style
// This might need to be adjust base on scrapping from https://iframely.com/domains/jw-player to our db html generation
.page {
  &--content-video {
    .content-page-body {
      .page-contents__content-embed-code {
        &:has(script + div.jwplayer),
        &:has(div[style*="position:relative;overflow:hidden;padding-bottom:56.25%"]) {
          &:before {
            display: none;
          }
        }
        > :before + script + div.jwplayer,
        > div[style*="position:relative;overflow:hidden;padding-bottom:56.25%"] {
          padding-bottom: initial !important;
          position: initial !important;
          overflow: initial !important;
        }
      }
    }
  }
}

/*! purgecss end ignore */
.social-sharing {
  padding-bottom: map-get($spacers, block);
  &__button {
    margin-right: $block-spacer * 0.5;
  }
}

.content-download {
  &:not(&__link) {
    padding-bottom: map-get($spacers, block);
  }
}

.download-related {
  &__wrapper {
    & > p {
      border-top: 1px solid #ccc;
      padding-top: 1rem;
    }
  }
  &__item {
    display: flex;
    margin-bottom: .5rem;
    &:last-child {
      margin-bottom: 0;
    }
  }
  &__title {
    display: flex;
    justify-content: space-between;
  }
  &__image {
    max-width: 160px;
    margin-right: 1rem;
  }
  &__title {
    flex-direction: column;
    display: flex;
    justify-content: center;
    flex-grow: 1;
  }
  &__button {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}