/*--------------------------------------------------------------
   Single Styles
--------------------------------------------------------------*/


// image and caption
.single .entry-media {
   position: relative;

   .wp-caption-text {
      position: absolute;
      bottom: 0;
      left: 0;
      margin: 0;
      font-size: 1.2rem;
      line-height: 1.4;
      text-align: right;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0,0,0,0.75) 100%);
      color: #fff;
      width: 100%;
      max-width: 100%;
      padding: 50px 20px 15px;
      @include mq('md') {
         padding: 50px 30px 30px 184px;
      }
      @include mq('lg') {
         padding: 50px 30px 30px 384px;
      }
      a {
         color: #fff;
         &:hover {
            color: var( --color-main );
         }
      }
   }
}

// Category
.entry-category {
   display: flex;
   flex-wrap: wrap;
   a {
      color: var(--color-main);
      transition: all .2s ease-in-out;
      display: flex;
      line-height: 1.6;

      &::after {
         content: "";
         display: inline-flex;
         height: 10px;
         width: 1px;
         background: var(--color-txt-025);
         margin-left: 7px;
         margin-right: 7px;
         position: relative;
         top: 4px;
      }

      &:last-child::after {
         content: none;
      }

      &:hover {
         color: var(--color-txt);
      }
   }

}

// Meta
.entry-meta {
   line-height: 1.2;
   display: flex;
   align-items: center;
   white-space: nowrap;
   .meta-item {
      display: inline-flex;
      align-items: center;
      margin-right: 10px;
      &:last-child{
         margin-right: 0;
      }
      span,
      a{
         display: inline-flex;
         align-items: center;
      }
      a {
         color: var(--color-main);
         transition: all .2s ease-in-out;
         
         &:hover {
            color: var(--color-txt);
         }
      }
   }
}
.entry-meta-border-box .meta-item:first-child{
   margin-right: auto;
}

.meta-category:before,
.meta-rtime:before,
.meta-comments a:before,
.meta-item span:before{
   font-family: 'knowledgeguru-font' !important;
   color: var(--color-main);
   font-size: 2rem;
   margin-right: 2px;
}
.meta{
   &-category:before{
      content: "\e90e";
   }
   &-author span:before{
      content: "\e910";
   }
   &-rtime:before{
      content: "\e912";
   }
   &-comments a:before{
      content: "\e911";
   }
   &-date span:before{
      content: "\e90f";
   }
}

.entry-meta-border-box{
   padding-top: 10px;
   padding-bottom: 10px;
   border-top: 1px solid rgba(0,0,0,0.1);
   border-bottom: 1px solid rgba(0,0,0,0.1);
}
.meta-category{
   max-width: 220px;
   display: inline-flex;
   flex-wrap: wrap;
   a{
      line-height: 1.6;
   }
}
// Prev - Next box
.prev-next-nav {
   a{
      transition: all .2s ease-in-out;
   }
   .kbg-card {

      h4 {
         padding: 0;
      }

   }
   .prev-label:before,
   .next-label:after{
      font-family: "knowledgeguru-font";
      font-size: 1.8rem;
      line-height: 0;
      position: relative;
      top: 3px;
   }
   .prev-label:before{
      content: "\e900";

      margin-left: -5px;
   }
   .next-label:after{
      content: "\e901";

      margin-right: -5px;
   }
}
.d-grid{
   display: grid !important;

}
.prev-next-nav{
   grid-template-columns: 1fr 1fr; 
   grid-row-gap: 15px;
   padding-top: 15px;
   border-top: 1px solid var(--color-txt-01);

   @include mq('md'){
      
      column-gap: 50px;
      padding-top: 25px;
   }
  
}
.kbg-prev-link{
   @include mq('md'){
   grid-column: 1/2;  
   }
}
.kbg-next-link{
   @include mq('md'){
   grid-column: 2/2;
   }
}
.kbg-prev-next-link{
   position: relative;


   a:hover{
      color: var(--color-main);
   }

}
.kbg-next-link{
   text-align: right;
}



// Author box
.author-item {
   text-align: center;
   @include mq('md') {
      text-align: left;
   }
   .author-avatar {
      flex: 0 0 70px;
      @include mq('md') {
         margin-right: 22px;
      }
   }
   .h2 {
      margin-bottom: 17px;
      padding: 0;
   }
   .kbg-button {
      padding: 0 18px;
   }
   a:not(.kbg-button) {
      &:hover {
         color: var( --color-main );
         @extend %animation-main;
      }
   }
   
   p {
      padding: 0;
   }
}


// Related box
.section-head {
   h3,h5 {
      padding: 0;
   }
}

.related-posts {
   article {
      display: flex;
      a {
         &:hover {
            @extend %animation-main;
         }
      }
   }
   .entry-media {
      flex: 0 0 60px;
      margin-right: 17px;
   }
}
.post-password-form{
   padding: 40px;
   background: var(--color-button-tertiary);
}