/* ==========================================================================
   Blog Single -- comment listing
   --------------------------------------------------------------------------
   Styles the comment list markup output by comments.php (.cmnts-wrap >
   ul.avatar-post-wrp). Presentation only -- no template changes.

   The two rendering bugs this file works around, so the reasons survive:

   1) Stray author name inside the avatar box.
      comments.php passes comment_author() as get_avatar()'s $alt argument.
      comment_author() ECHOES rather than returns, so the author name is
      printed as a bare text node inside <div class="avt"> before the
      <img>. That text escaped the 40px box and overlapped the whole list.
      Fixed here by zeroing out the font on .avt (the text node has no
      element to target) and restoring it on the img.

   2) Avatars that never render.
      Pingback/trackback comments carry no author email, so get_avatar()
      returns nothing and .avt was left empty. .avt now carries a
      placeholder user glyph as its own background; when an <img> does
      exist it is absolutely positioned over that background.

   Colours/typography follow the Blog Single comment FORM in
   adluge-system.css (.bs-comment-form et al) so list and form read as one
   section.
   ========================================================================== */

/* ---- Section ---- */
.bs-comments-inner .cmnts-wrap,
.cmnts-wrap {
  padding-bottom: 0;
  margin-top: clamp(28px, 3.4vw, 44px);
}

/* Listing has no heading of its own in the template and sits directly under
   the "Post a Comment" card, so label it here. */
.cmnts-wrap::before {
  content: "Comments";
  display: block;
  margin-bottom: 18px;
  font: 800 clamp(20px, 2.1vw, 26px) 'Plus Jakarta Sans', -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -0.025em;
  color: #101F45;
}

/* ---- List ---- */
.cmnts-wrap ul.avatar-post-wrp {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- Comment card ---- */
.cmnts-wrap ul.avatar-post-wrp > li,
.cmnts-wrap ul.avatar-post-wrp > li + li {
  margin: 0;
  padding: clamp(18px, 2.2vw, 24px);
  list-style: none;
  border: 1px solid #E7EAEF;   /* replaces the old dotted li + li divider */
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 31, 69, .04);
  overflow-wrap: anywhere;     /* long pingback titles / bare URLs */
}

/* ---- Author row ---- */
.cmnts-wrap .cmt_auth {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* ---- Avatar ----
   font-size/line-height/color zero out the stray echoed author name (bug 1
   above); it is a text node, so there is nothing else to select. The
   background is the fallback glyph for comments with no avatar (bug 2). */
.cmnts-wrap .avatar-post-wrp .avt {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #E7EAEF;
  border-radius: 50%;
  background-color: #EDF0F4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A7B0BE'%3E%3Cpath d='M12 12.2a5.1 5.1 0 1 0 0-10.2 5.1 5.1 0 0 0 0 10.2Zm0 1.9c-4.5 0-8.1 2.3-8.1 5.1V21h16.2v-1.8c0-2.8-3.6-5.1-8.1-5.1Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  font-size: 0;
  line-height: 0;
  color: transparent;
}

/* 80px gravatar into a 44px circle; absolute so it also covers the
   placeholder background above. !important guards against the theme's
   global img{height:auto;max-width:100%} reset. */
.cmnts-wrap .avatar-post-wrp .avt img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  border-radius: 50%;
}

/* ---- Name + date ---- */
.cmnts-wrap .date-author {
  flex: 1 1 auto;
  min-width: 0;
}
.cmnts-wrap .date-author p.cmntdate {
  margin: 0;
  font: 500 14px/1.55 'Plus Jakarta Sans', -apple-system, "Segoe UI", sans-serif;
  color: #5E6877;
  overflow-wrap: anywhere;
}
.cmnts-wrap .date-author p.cmntdate span {
  font-weight: 600;
  color: #101F45;
}
.cmnts-wrap .date-author p.cmntdate a {
  font-weight: 700;
  color: #101F45;
  text-decoration: none;
}
.cmnts-wrap .date-author p.cmntdate a:hover,
.cmnts-wrap .date-author p.cmntdate a:focus {
  color: #5A9B2B;
  text-decoration: underline;
}
/* comment_author_link() emits its own <a>, which the template wraps in a
   second bare <a>; the parser unnests that into an empty anchor. */
.cmnts-wrap .date-author p.cmntdate a:empty {
  display: none;
}

/* ---- Comment body ---- */
.cmnts-wrap .avatar-post-wrp .comments {
  padding-top: 12px;
  margin-left: 58px;  /* 44px avatar + 14px gap -- aligns with the name */
  font: 400 15px/1.7 'Plus Jakarta Sans', -apple-system, "Segoe UI", sans-serif;
  color: #3F4A5C;
  overflow-wrap: break-word;
}
.cmnts-wrap .avatar-post-wrp .comments p {
  margin: 0 0 12px;
}
.cmnts-wrap .avatar-post-wrp .comments > *:last-child {
  margin-bottom: 0;
}
.cmnts-wrap .avatar-post-wrp .comments a {
  color: #5A9B2B;
  text-decoration: underline;
}
.cmnts-wrap .avatar-post-wrp .comments a:hover {
  color: #4B8523;
}
.cmnts-wrap .avatar-post-wrp .comments img {
  max-width: 100%;
  height: auto;
}
.cmnts-wrap .avatar-post-wrp .comments blockquote {
  margin: 12px 0;
  padding: 4px 0 4px 16px;
  border-left: 3px solid #7CC142;
  color: #5E6877;
}
.cmnts-wrap .avatar-post-wrp .comments pre,
.cmnts-wrap .avatar-post-wrp .comments code {
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- Small screens ---- */
@media (max-width: 600px) {
  .cmnts-wrap .avatar-post-wrp .avt {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    background-size: 19px 19px;
  }
  .cmnts-wrap .cmt_auth {
    gap: 12px;
  }
  .cmnts-wrap .date-author p.cmntdate {
    font-size: 13.5px;
  }
  /* full width on phones -- 50px of indent is too costly at 375px */
  .cmnts-wrap .avatar-post-wrp .comments {
    margin-left: 0;
    font-size: 14.5px;
  }
}