/*************************
 * 
 *    Single Post
 *    	1. Base Style
 *      2. Only For Single Post
 *		3. Post Author Details
 *      4. Navigation
 *      5. Related Post
 *      6. Comments
 *      7. With Elementor Compatibility
 *
 *************************/

@import "../config";
@import "../mixins";
@import "../direction";

// 1. Base Style
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 2rem;
}

// 2. Only For Single Post
.single-post {
  main {
    padding-bottom: 7rem;
  }

  .comments {
    text-align: center;
    border: none;

    .commentlist {
      text-align: #{$left};
    }

    .commentlist {
      transition: 0.3s ease;

      & + .pagination {
        margin-top: 2rem;
        padding: 0;
      }

      &.loading {
        opacity: 0.5;
        pointer-events: none;
      }
    }
  }
}

.post-single {
  // Only single post information
  & > .post-wrap {
    .post-title {
      margin-bottom: 0.5rem;
      white-space: normal;
      font-size: 3rem;
      line-height: 1.5;
    }

    .post-content {
      margin-bottom: 3.5rem;

      &::after {
        content: "";
        display: block;
        visibility: hidden;
        clear: both;
        zoom: 1;
        height: 0;
      }
    }

    .post-details > :last-child {
      margin-bottom: 6rem;
    }

    .post-cats {
      color: var(--alpha-body-color);

      a {
        color: var(--alpha-dark-color);

        &:hover,
        &:focus {
          color: var(--alpha-primary-color);
        }
      }
    }

    .post-meta {
      margin-bottom: 1.7rem;
    }
  }

  .post-navigation .nav-links {
    padding-bottom: 4.5rem;
    padding-top: 4.5rem;
  }

  section > .title {
    // related post heading
    margin-bottom: 1em;
    font-size: 2.4rem;
    text-transform: capitalize;
    text-align: center;
  }

  .social-icon {
    width: auto;
    height: auto;
    margin: side-values(0.3rem 2.5rem 0.3rem 0);

    &:last-child {
      margin-#{$right}: 0;
    }
  }

  > .post-wrap article > .post-details {
    padding-top: 6.2rem;

    @include mq(xxl, max) {
      padding-top: 4.2rem;
    }
  }

  .post-details .post-author-detail:last-child {
    margin: 1rem 0 0 0;
  }

  blockquote {
    position: relative;
    padding: side-values(1rem 0.5rem 1rem 14.4rem);
    color: var(--alpha-change-color-dark-1);
    border-#{$left}: 6px solid var(--alpha-primary-color);
    background-color: transparent;
    min-height: 153px;

    p {
      margin-bottom: 0;
    }

    &:before {
      content: "\e934";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      #{$left}: 3rem;
      font-size: 8rem;
      font-family: #{$theme-font};
      color: var(--alpha-primary-color);
      opacity: 0.2;
    }

    cite {
      font-size: 1.4rem;
      margin-top: 1.3rem;
      color: var(--alpha-body-color);
    }

    @include mq(sm, "max") {
      & {
        padding: side-values(1rem 0.5rem 1rem 11.4rem);

        &:before {
          font-size: 5rem;
        }
      }
    }
  }

  .alpha-has-caption + .slider-pagination {
    bottom: 4rem;
  }
}

.list-type-check li:before {
  color: var(--alpha-primary-color);
}

.post-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  > * {
    margin-bottom: 1.5rem;
  }

  .post-tags {
    padding-#{$right}: 2rem;
    margin-#{$right}: auto;
  }
}

// 3. Post Author Details
.post-author-detail {
  display: flex;
  position: relative;
  align-items: flex-start;
  padding: 3rem 3rem 4.3rem;
  background-color: var(--alpha-change-color-light-1);
  box-shadow: 0 5px 20px 0px rgb(0 0 0 / 7%);
  z-index: 1;

  .author-content {
    line-height: 1.86;
  }
}

@include mq(sm, max) {
  .post-author-detail {
    display: block;
  }

  .author-body {
    margin-top: 2rem;
  }
}

.author-avatar {
  max-width: 12rem;
  flex: 0 0 12rem;
  height: 12rem;
  margin-#{$right}: 2.8rem;
  overflow: hidden;

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--alpha-change-light-border-color);
  }
}

.author-body {
  flex: 1;
}

.author-header {
  margin: 0.4rem 0 0.8rem;

  .author-name {
    margin-bottom: 0.4rem;
    font-size: 1.8rem;
  }

  .author-date {
    font-size: 1.3rem;
  }

  .author-link {
    display: inline-block;
    margin: 1rem 0;

    &:hover {
      color: var(--alpha-primary-color);
    }

    @include if-rtl {
      i:before {
        content: "\e97d";
      }
    }
  }
}

.author-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  a {
    color: var(--alpha-change-color-dark-2);
  }

  .author-link i {
    font-size: 1.25em;
    vertical-align: -0.15em;
  }
}

.author-link {
  margin-top: 1.5rem;
}

@supports (-moz-appearance: none) {
  .post-single .author-avatar img {
    max-width: calc(100% + 2px);
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    margin: -1px;
  }
}

.post-content .title {
  margin-bottom: 0;
}

// 4. Navigation
.post-navigation {
  position: relative;

  .label {
    color: var(--alpha-body-color);
    font-size: 1.2rem;
    text-transform: uppercase;
  }

  .nav-links {
    display: flex;
    position: relative;
    align-items: center;
    width: 100%;

    a {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      flex: 0 0 100%;
      max-width: 100%;
      width: 100%;
      color: var(--alpha-change-color-dark-1);
    }

    i {
      position: absolute;
      top: 50%;
      right: 0;
      line-height: 0;
      font-size: 1.5rem;
      transition: inherit;

      &:before {
        padding: 0.9rem;
        border: 1px solid var(--alpha-change-light-border-color);
      }
    }
  }

  .nav-previous {
    a {
      text-align: $left;
      padding-#{$left}: 5.5rem;
      padding-#{$right}: 2rem;
    }

    i {
      #{$left}: 0;
    }
  }

  .nav-next {
    border-top: none;

    &:first-child {
      width: 50%;
      margin-#{$left}: auto;
    }

    a {
      align-items: flex-end;
      text-align: $right;
      padding-#{$left}: 2rem;
      padding-#{$right}: 5.5rem;
    }

    i {
      #{$right}: 0;
    }
  }

  .nav-previous,
  .nav-next {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .pager-link-title {
    &::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      display: inline-block;
      width: 100%;
      border-bottom: 2px solid;
      transform: scale(0, 1);
      transition: transform 0.3s;
    }
  }

  a:hover,
  a:focus {
    .pager-link-title::after {
      transform: scale(1);
    }
  }
}

.navigation .post-nav-blog {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  padding: 1rem;
  transform: translate(-50%, -50%);
  font-size: 1.6rem;
  color: var(--alpha-body-color);

  &:hover {
    color: var(--alpha-primary-color);
  }
}

.pager-link-title {
  display: inline-block;
  position: relative;
  flex: 0 0 auto;
  max-width: 100%;
  overflow: hidden;
  color: var(--alpha-change-color-dark-1);
  font-size: 1.6rem;
  line-height: 1.32;
  font-weight: 500;
  text-transform: none;
  text-overflow: ellipsis;
  transition: 0.35s;
  white-space: nowrap;
}

.widget-posts-nav .posts-nav li.active a {
  color: var(--alpha-primary-color);
}

@include mq(sm, max) {
  .post-single .post-author-detail,
  .post-single .author-header {
    display: block;
  }

  .post-single .author-avatar {
    margin-#{$right}: 1.5rem;
    margin-bottom: 2rem;
  }

  .post-navigation .pager-link-title {
    display: none;
  }
}

@include mq(xs, max) {
  .post-single .post-author-detail {
    padding: 2rem;
  }

  .post-navigation .nav-links .label {
    display: none;
  }
}

// 5. Related Post
.related-posts {
  padding-top: 9.5rem;

  &.slider-container {
    position: relative;
  }

  &.slider-nav-top .slider-button {
    top: 7rem;
  }

  .post-default {
    margin-bottom: 1rem;
  }

  @include mq(xxl, max) {
    padding-top: 7.5rem;
  }
}

// 6. Comments
.single-post {
  .comments {
    margin: 4rem 0 0;

    .comment-respond {
      margin: 0 0 5.5rem;
    }
  }

  .related-posts + .comments {
    margin-top: 3rem;

    @include mq(xxl, max) {
      margin-top: 1rem;
    }
  }

  .comment-reply-title small {
    display: inline-block;
    margin-#{$left}: auto;
    font-size: 1.3rem;
    text-transform: uppercase;
  }

  .comments h3:first-child:last-child {
    margin-bottom: 0;
  }
}

.comment-respond {
  .form-control,
  textarea {
    padding: 1.5rem 2rem;
  }
  .comments .comment + & {
    margin-top: 4rem;
  }
}

// no comments
.no-comments {
  margin: 2.5rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--alpha-change-light-border-color);
  text-align: $right;
  color: var(--alpha-change-color-light-4);
}

.sidebar .no-comments {
  border: none;
  text-align: $left;
}

// Attachment
.attachment.type-attachment .post-details {
  padding-top: 0;
}

// 7. With Elementor Compatibility
.elementor .elementor-widget {
  .post-author-detail figure.author-avatar {
    margin-#{$right}: 3rem;
  }

  .comment figure.comment-avatar {
    margin-#{$right}: 3rem;
  }
}