/*------------------------------------
styles for all single posts in the blog
------------------------------------*/

@media (max-width: 576px) {
  #post-right-column {
    padding: 0 1.5rem;
  }
}

/*
@@@@@@ بسیار مهم
تنها کار مورد نیاز
برای عکس اصلی درون هر مقاله
for post-featured-image, download images which their width is minimum 1500px.
if their width was 2000px or more, in windows resize their width to 1500px
rendered width willl be about 900px

برای عکس های فرعی درون هر مقاله
for each post-content-image, download images which their width is minimum 1000px.
if their width was 1500px or more, in windows resize their width to 1000px
rendered width willl be about 600px
*/

/*
بسیار مهم  بسیار مهم  بسیار مهم
writing margin-bottom,text-align,... in this file, is better than, in each post html codes,writing class="text-center & mb-5 & ..", later must change in 100 places
*/
.post-featured-image-container {
  margin-bottom: 2rem;
  text-align: center;
}

/*
رول زیر اختیاری است
رول زیر برای زمانی اگر بخواهیم در تمام مقالات، عرض عکس اصلی مقاله را درون کانتینرش
مقداری کاهش دهیم
one rule to decrease the width of post-featured-image inside its div in each post
*/
@media (min-width: 768px) {
  .post-featured-image-container img {
    max-width: 90% !important;
  }
}

/* برای عکس های درون مقالات در صفحات موبایل
styles-images.css عرض زیر از فایل
اعمال می شود:
img {
  max-width: 100%;
  height: auto;
  max-height: 100%;
}
*/

/* assiging this rule is better than assigning mb-3 class in 100 places */
.post-content-image-container { margin-bottom: 1.25rem; }


/* رول بسیار مهم و تنظیم کننده عکس ها در تمام مقالات */
/* note: the width of .post-content-image-container in large screens is about 900px
note: DONT write 600px instead of below 60% because will cause overflow-x in mobile screens
*/
@media (min-width: 768px) {
  .post-content-image-container img {
    max-width: 60%;
  }
}

/* برای عکس های درون مقالات در صفحات موبایل
styles-images.css عرض زیر از فایل
اعمال می شود:
img {
  max-width: 100%;
  height: auto;
  max-height: 100%;
}
*/

/* ************************************************************************** */

/* only are for posts */

/* #main-wrapper-posts table { border: 1px solid rgba(0, 0, 0, .1); }

#main-wrapper-posts table td { border: 1px solid #ccc; } */

#main-wrapper-posts p { text-align: justify }

#main-wrapper-posts .h1-container {margin-bottom: 3rem;}

#main-wrapper-posts h2 {
  color:#007bff;
  padding-top: 1rem;
  margin-bottom: 1.125rem;
}

#main-wrapper-posts h1,
#main-wrapper-posts h2,
#main-wrapper-posts h3 {
  font-family: vazir-medium,  Tahoma, Arial;
}

/* ********* post infobox top ************ */
#post-info-box-top { margin-bottom: 1rem; }

/* orange posts badge in posts info bar top*/
#posts-badge-mobile, #posts-badge-md-lg{
  color: #fff !important;
  background-color: #ffa31a;
  border-radius: 50px;
  padding: 0 10px;
}

#posts-badge-mobile { font-size: .813rem; }

#posts-badge-md-lg { font-size: .938rem; }

#post-info-box-top .fa-heart {
   font-size: 1rem;
   color: #ec406a;
   animation: heart-pulse-animation 1s infinite;
  }

#post-info-box-till-768px {
  padding: 5px 10px;
  border-radius: 5px;
  font-size: .938rem;  /* 15px */
  background-color: #edf1f8;
}

#post-info-box-from-768px {
  padding: 5px 10px;
  border-radius: 5px;
  font-size: .875rem;
  color: #6c727a;
  background-color: #edf1f8;
}

#post-info-box-top i { margin-left: .25rem; }

/* ************************************************************************** */

/*   margin: 0 0 2.5rem; */
section { margin: 0 0 2rem; position: relative; }

/* ********* post bottom ************ */

.like-heart-post-bottom {
  font-size: 1rem;
  color: #FF9E98;
  cursor: pointer;
  animation: heart-pulse-animation 1s infinite;
}

.post-like-toast-container, .post-like-toast-container span {
  transition: all 0.4s ease-out;
  /* transition: opacity 0.4s ease-out; */
}

#post-copyright p {
  background-color:#efefef;
  border-radius: 3px;
  padding:.25rem 1rem !important;
}

#related-posts-aside {width:50%}
#related-posts-div { border-radius: 5px; }
.related-posts-rows a {text-align: right;}


/* ********* post sidebar ************ */

/* ‘fixed’ position sets the position of the HTML element according to the viewport,
but ‘sticky’ position sets the position according to the parent element. */
/* warning: must not position fixed on #posts-sidebar-column itself */
#posts-sidebar-column aside {
  position: sticky;
  top:65px;
  padding-bottom: 6rem;
  overflow: auto;
  scrollbar-width: none;
}

#posts-sidebar-column aside::-webkit-scrollbar
{ display: none; }
/*
posts sidebar position sticky doesnt work :

assigning height to outer div element is necessary for postion sticky on child divs to work
#posts-sidebar-column {
  height: 300px;
}
#post-sidebar-div1 { top:10px; }

#post-sidebar-div1 { top:40px; }

#post-sidebar-div1, #posts-sidebar-div2 {
  position: sticky;
}
*/

/* for example Sidebar of each post of blog */
#post-sidebar-div1 {
  border: 1px solid #e5e8f3;
  background: #f2f5fb;
  padding: 1.563rem 1.75rem 1.563rem;
  border-radius: 0.4rem;
  margin-bottom: 24px;
}

/* ************************************************************************** */

.post-comment-avatar {
  width: 2.5rem !important; /* 40px; */
  height: auto;
  padding-right:.25rem;
  padding-top:.25rem
}

.comment-created-at-farsi {
  font-family: iranyekanfanum, vazir !important;
}