/*
-----------------------------------------------------------------------
    Blog CSS
-----------------------------------------------------------------------
*/

.blog-area {
  &.blog-default-area {
    padding: 100px 0;
    @media #{$lg-device} {
      padding: 65px 0;
    }
    @media #{$xs-device} {
      padding: 65px 0 30px;
    }
    .section-title {
      @media #{$xxs-device} {
        margin-bottom: 45px;
      }
    }
  }
}

.post-item {
  margin-bottom: 30px;
  position: relative;
  .thumb {
    margin-bottom: 39px;
    overflow: hidden;
    position: relative;
    @media #{$xxs-device} {
      margin-bottom: 25px;
    }
    & > a {
      display: block;
      position: relative;
    }
    img {
      width: 100%;
      @include transition(.5s);
    }
  }
  .content {
    .inner-content {
      .title {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 18px;
        @media #{$xxs-device} {
          margin-bottom: 5px;
        }
        a {
          color: $black-333;
          &:hover {
            color: $theme-color;
          }
        }
      }
      .meta {
        margin-bottom: 13px;
        @media #{$xxs-device} {
          margin-bottom: 5px;
        }
        a {
          font-size: 12px;
          &.post-date {
            color: #928F8F;
          }
        }
      }
      p {
        line-height: 30px;
        margin-bottom: 28px;
        @media #{$xxs-device} {
          line-height: 22px;
        }
      }
      .btn-blog {
        color: $body-color;
        font-size: 14px;
        padding-left: 48px;
        position: relative;
        &:before {
        background-color: $black;
        content: "";
        height: 1px;
        left: 0;
        position: absolute;
        top: 10px;
        width: 37px;
        @include transition(.3s);
        }
        &:hover {
          color: $theme-color;
          &:before {
            background-color: $theme-color;
          }
        }
      }
    }
  }
  &:hover {
    .thumb {
      img {
        @include transform(scale(1.08) rotate(5deg));
      }
    }
  }
}

.post-items-style2 {
  .post-item {
    margin-bottom: 50px;
  }
  .pagination-area {
    margin-top: 22px;
  }
}

.blog-grid-area {
  padding: 100px 0 101px;
  @media #{$lg-device} {
    padding: 70px 0px 70px;
  }
}

.blog-details-area {
  padding: 100px 0 136px;
}

.sidebar-area {
  .widget {
    .widget-title {
      color: #333;
      font-size: 18px;
      font-weight: 600;
      margin: 0;
      text-transform: capitalize;
    }
  }

  .widget-search-box {
    .form-input-item {
      margin: 46px 0 71px 0;
      position: relative;
      input {
        background-color: transparent;
        border: 1px solid #cdcdcd;
        border-radius: 0;
        color: #262626;
        font-size: 13px;
        height: 41px;
        padding: 2px 40px 2px 10px;
        width: 100%;
        @include placeholder {
          color: #262626;
          font-size: 13px;
        }
      }
      .btn-src {
        background-color: transparent;
        border: none;
        border-radius: 0;
        color: #2f2f2f;
        font-size: 14px;
        height: 41px;
        line-height: 41px;
        position: absolute;
        right: 2px;
        top: calc(50% - 1px);
        transform: translateY(-50%);
        width: 50px;
      }
    }
  }

  .widget-blog-post {
    margin: 46px 0 71px 0;
    ul {
      margin-bottom: 0;
      li {
        border-bottom: 1px solid #dcdcdc;
        display: block;
        margin-bottom: 20px;
        padding-bottom: 20px;
        position: relative;
        .thumb {
          left: 0;
          overflow: hidden;
          position: absolute;
          top: 0;
          img {
            width: 100px;
          }
        }
        .content {
          padding-left: 120px;
          a {
            color: #333;
            display: block;
            font-size: 16px;
            font-weight: 400;
            line-height: 1.2;
            margin-bottom: 4px;
            &:hover {
              color: $theme-color;
            }
          }
          span {
            color: #2f2f2f;
            font-size: 12px;
            display: block;
            line-height: 24px;
          }
        }
        &:last-child {
          border: none;
          margin-bottom: 0;
          padding-bottom: 0;
        }
      }
    }
  }

  .widget-archive {
    margin: 51px 0 71px 0;
    .archive-date {
      font-size: 14px;
      font-weight: 700;
    }
    ul {
      margin-bottom: 0;
      margin-top: 19px;
      li {
        color: $black-333;
        font-size: 15px;
        a {
          color: $black-333;
          &:hover {
            color: $theme-color;
          }
        }
      }
    }
  }

  .widget-socials {
    a {
      color: $black;
      font-size: 24px;
      margin-right: 15px;
      &:last-child {
        margin-right: 0;
      }
      &:hover {
        color: $theme-color;
      }
    }
  }

  .widget-tags {
    margin: 51px 0 71px 0;
    ul {
      display: flex;
      margin-bottom: 0;
      li {
        margin: 0 5px 5px 0;
        a {
          border: 1px solid #e3e4e9;
          color: #828495;
          font-size: 14px;
          line-height: 1;
          padding: 10px 15px 11px;
          display: inline-block;
          &:hover {
            background-color: #333;
            border-color: #333;
            color: $white;
          }
        }
      }
    }
  }

  .widget-nav {
    margin: 42px 0 67px 0;
    ul {
      li {
        margin-bottom: 29px;
        &:last-child {
          margin-bottom: 0;
        }
        a {
          color: $black-777;
          font-size: 16px;
          display: block;
          padding-left: 36px;
          position: relative;
          &:before {
            background-color: $black-333;
            position: absolute;
            content: "";
            left: 0;
            top: 50%;
            height: 0px;
            opacity: 0;
            visibility: hidden;
            width: 5px;
            z-index: 9;
            @include transition(.3s);
            @include translate(0, -50%);
          }
          &:hover, &.active {
            color: $black-333;
            font-weight: 700;
            &:before {
              height: 45px;
              opacity: 1;
              visibility: visible;
            }
          }
        }
      }
    }
  }
}

.post-details-content {
  .post-details-body {
    .content {
      margin-bottom: 51px;
      .thumb {
        img {}
      }
      h4 {
        font-size: 28px;
        font-weight: 400;
        margin: 37px 0 0;
      }
      .meta {
        margin: 15px 0 10px;
        li {
          color: #928f8f;
          display: inline-block;
          font-size: 12px;
          margin-right: 2px;
        }
        .date {
        }
        .author {
          color: #928f8f;
        }
      }
      p {
        color: $black-333;
        font-size: 14px;
        line-height: 24px;
      }
      .blockquote-area {
        .blockquote-style {
          border-left: 1px solid #e5e5e5;
          padding: 15px 26px 15px 31px;
          color: $black-333;
          font-size: 15.75px;
          font-style: italic;
          line-height: 1.45;
          margin-bottom: 16px;
        }
      }
      .category-social-content {
        align-items: center;
        border-bottom: 1px solid #d8d8d8;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        margin-top: 43px;
        padding-bottom: 5px;
        @media #{$sm-device} {
          display: block;
        }
        .category-items {
          span {
            color: #2f2f2f;
            font-size: 14px;
            line-height: 24px;
            margin-right: -1px;
          }
          a {
            color: #2f2f2f;
            font-size: 14px;
            line-height: 24px;
            margin-right: -4px;
            &:last-child {
              margin-right: 0;
            }
            &:hover {
              color: $theme-color;
            }
          }
        }
        .social-items {
          span {
            color: #333;
            font-size: 14px;
            margin-top: 3px;
          }
          a {
            color: #333;
            font-size: 14px;
            margin-left: 6px;
            &:hover {
              color: $theme-color;
            }
          }
        }
      }
      .page-next-prev {
        border-bottom: 1px solid #d8d8d8;
        display: flex;
        justify-content: space-between;
        padding-bottom: 17px;
        .nav-item {
          color: $black-333;
          font-size: 14px;
          line-height: 24px;
          a {
            color: $black-333;
          }
        }
      }
    }
  }
}

.comment-area {
  .title {
    color: #2f2f2f;
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 7px;
  }
  .comment-content {
    margin-bottom: 56px;
    .single-comment {
      .author-info {
        display: flex;
        @media #{$sm-device} {
          display: block;
        }
        .thumb {
          margin-right: 28px;
          @media #{$sm-device} {
            margin-bottom: 20px;
          }
          img {
            border-radius: 50%;
            min-width: 123px;
            width: 123px;
          }
        }
        .author-details {
          .name {
            font-size: 16px;
            font-weight: 500;
          }
          .comment-date {
            margin: 6px 0 8px;
          }
        }
      }
    }
  }
  .comment-form {
    p {
      font-size: 13px;
      color: #707070;
      margin: 0 0 44px;
    }
  }
}