/* JR Comments List Resize + Style v1.0.1 */

#comments.comments-area,
.comments-area#comments{
  max-width:100% !important;
  box-sizing:border-box !important;
  margin: 10px auto 16px auto !important;
  padding: 0 22px !important; /* match the nav plugin spacing */
}

/* Title: "One Comment" */
#comments .comments-title,
#comments h2.comments-title{
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  margin: 0 0 12px 0 !important; /* tighter */
  color: #111 !important;
}

/* Comment list wrapper */
#comments ol.comment-list{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* Each comment as a clean card */
#comments ol.comment-list > li.comment,
#comments ol.comment-list > li{
  margin: 0 0 16px 0 !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.08) !important;
  overflow: hidden;
}

/* Ensure inner comment body doesn't add extra spacing */
#comments .comment-body{
  margin:0 !important;
  padding:0 !important;
  max-width:100% !important;
}

/* Remove common theme dividers inside comment blocks */
#comments .comment-body hr,
#comments .comment-body .comment-divider,
#comments .comment-body .comment-separator,
#comments .comment-body .comment-meta,
#comments .comment-body .comment-meta *{
  border: 0 !important;
}

/* Header layout: avatar + meta */
#comments .comment-meta{
  display:flex !important;
  gap: 12px !important;
  align-items:flex-start !important;
  margin: 0 0 8px 0 !important; /* tighter */
}

/* Avatar smaller + rounded */
#comments .comment-author .avatar{
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  flex: 0 0 auto !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Author name */
#comments .comment-author .fn,
#comments .comment-author b.fn{
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #111 !important;
}

/* "says:" */
#comments .comment-author .says{
  font-size: 14px !important;
  opacity: 0.7 !important;
  margin-left: 6px !important;
}

/* Date + edit link */
#comments .comment-metadata,
#comments .comment-metadata a{
  font-size: 13px !important;
  color: #222 !important;
  opacity: 0.85 !important;
  text-decoration: none !important;
}

/* Comment text */
#comments .comment-content{
  margin: 0 !important;
  padding: 0 !important;
}
#comments .comment-content,
#comments .comment-content p{
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #111 !important;
  margin: 0 !important; /* remove extra whitespace */
  word-break: break-word !important;
}

/* Reply link area (if enabled) */
#comments .reply{
  margin-top: 10px !important;
}
#comments .reply a{
  display:inline-block !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  background: rgba(212,106,63,0.12) !important;
  border: 1px solid rgba(212,106,63,0.25) !important;
  color: #111 !important;
  text-decoration:none !important;
  font-weight: 700 !important;
}

/* Remove any theme "divider lines" between comments */
#comments .comment-list > li:before,
#comments .comment-list > li:after,
#comments .comment-body:before,
#comments .comment-body:after{
  content:none !important;
  display:none !important;
}

/* Mobile */
@media (max-width: 720px){
  #comments.comments-area,
  .comments-area#comments{
    padding: 0 12px !important;
  }
  #comments .comments-title{
    font-size: 20px !important;
  }
  #comments ol.comment-list > li.comment,
  #comments ol.comment-list > li{
    padding: 12px 12px !important;
    border-radius: 14px !important;
  }
  #comments .comment-meta{
    gap: 10px !important;
  }
  #comments .comment-author .avatar{
    width: 38px !important;
    height: 38px !important;
  }
}