/* Jormuntl Comment Threads — comment layout.
 *
 * Written against jormuntl_comment_callback()'s actual markup:
 *
 *   li.comment-item
 *     article.comment-body
 *       footer.comment-meta
 *         div.flex                     <- row
 *           div.flex                   <- author group
 *             div.comment-author-avatar
 *             div                      <- name block
 *               div.flex               <- name + stars + chapter tag
 *               div.comment-metadata   <- time
 *       div.comment-content
 *       div.comment-actions
 *       div.comment-reply-container
 *
 * SPECIFICITY NOTE: the theme prints its own comment CSS from wp_head at
 * priority 20, which lands AFTER enqueued stylesheets. Rules that need to win
 * are therefore scoped with .comments-area (0,3,0) to outrank the theme's
 * .comment-list .children (0,2,0) without resorting to !important.
 */

/* --- the comment block ------------------------------------------------ */

.comments-area .comment-list .comment-body {
  position: relative;
  padding: .875rem 0 .875rem 3.25rem;   /* room for the floated avatar */
  border-bottom: 0;                      /* theme draws one on every comment */
}

/* One rule between top-level conversations is enough. */
.comments-area .comment-list > li.comment > .comment-body {
  border-bottom: 1px solid rgba(var(--accent-rgb, 45, 45, 45), .12);
}

.comments-area .comment-list > li.comment:last-child > .comment-body {
  border-bottom: 0;
}

/* --- avatar, lifted into its own column ------------------------------- */

.comments-area .comment-author-avatar {
  position: absolute;
  top: .875rem;
  left: 0;
  line-height: 0;
}

.comments-area .comment-author-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  object-fit: cover;
  background: rgba(var(--accent-rgb, 45, 45, 45), .1);
}

/* --- name, badges and time on one line -------------------------------- */

.comments-area .comment-meta {
  margin-bottom: .35rem;
}

/* The wrapper holding the name row and the timestamp. */
.comments-area .comment-meta .comment-author-avatar + div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25rem .625rem;
  min-width: 0;
}

/* Its first child is the name + stars + chapter tag row. */
.comments-area .comment-meta .comment-author-avatar + div > div:first-child {
  margin-bottom: 0;
}

.comments-area .comment-author-name {
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.3;
}

.comments-area .comment-author-name a {
  color: inherit;
  text-decoration: none;
}

.comments-area .comment-author-name a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.comments-area .comment-metadata {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  font-size: .75rem;
  white-space: nowrap;
}

/* Relocated from .comment-content by the script, so it reads as metadata
   rather than as part of the comment body. */
.comments-area .comment-metadata .jct-edited {
  margin-right: 0;
}

/* The author group is no longer laying out the avatar, so it should not
   reserve space for it. */
.comments-area .comment-meta > div > div:first-child {
  gap: 0;
  min-width: 0;
}

/* --- body -------------------------------------------------------------- */

.comments-area .comment-content {
  margin-bottom: .5rem;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--primary-text);
  overflow-wrap: break-word;
}

.comments-area .comment-content > *:first-child { margin-top: 0; }
.comments-area .comment-content > *:last-child { margin-bottom: 0; }

.comments-area .comment-content p {
  margin: 0 0 .6em;
}

/* --- actions ----------------------------------------------------------- */

.comments-area .comment-actions {
  gap: .25rem;
  flex-wrap: wrap;
}

/* Edit is appended to this row by the script and shares the row's styling. */
.comments-area .comment-actions .jct-edit {
  margin: 0;
}

.comments-area .comment-like-btn,
.comments-area .comment-reply-btn,
.comments-area .jct-edit {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .55rem;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.2;
  border: 0;
  border-radius: .375rem;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.comments-area .comment-like-btn:hover:not(:disabled),
.comments-area .comment-reply-btn:hover,
.comments-area .jct-edit:hover {
  color: var(--accent);
  background: rgba(var(--accent-rgb, 45, 45, 45), .1);
}

.comments-area .comment-like-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.comments-area .comment-like-btn[data-liked="1"] {
  color: var(--accent);
}

.comments-area .comment-like-btn svg,
.comments-area .comment-reply-btn svg {
  width: .875rem;
  height: .875rem;
  flex: none;
}

.comments-area .like-count:empty {
  display: none;
}

/* --- nesting ----------------------------------------------------------- */

/*
 * The theme indents 2rem and adds a 2px border at every level. Five levels of
 * that leaves the innermost replies in a narrow gutter behind a ladder of
 * lines. Indentation stops increasing after the second level instead; the
 * avatar column and the rail carry the relationship from there.
 */
.comments-area .comment-list .children {
  position: relative;
  margin-left: 0;
  margin-top: 0;
  padding-left: 1.75rem;
  border-left: 0;
  list-style: none;
}

.comments-area .comment-list .children .children {
  padding-left: 1.25rem;
}

.comments-area .comment-list .children .children .children,
.comments-area .comment-list .children .children .children .children {
  padding-left: 0;
}

/* A single rail, drawn only where indentation exists. */
.comments-area .comment-list .children::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: .875rem;
  left: .45rem;
  width: 2px;
  border-radius: 2px;
  background: rgba(var(--accent-rgb, 45, 45, 45), .18);
  transition: background-color .15s ease;
}

.comments-area .comment-list .children .children .children::before {
  display: none;
}

.comments-area .comment-list .children:hover::before {
  background: rgba(var(--accent-rgb, 45, 45, 45), .32);
}

.comments-area .comment-list .children.jct-collapsed::before {
  display: none;
}

/* --- collapse toggle --------------------------------------------------- */

.comments-area .jct-toggle {
  margin: 0 0 .5rem 3.25rem;   /* aligns with the body text, not the avatar */
}

/* --- reply form -------------------------------------------------------- */

.comments-area .comment-reply-container:not(.hidden) {
  margin-top: .75rem;
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: rgba(var(--accent-rgb, 45, 45, 45), .04);
}

/* --- awaiting moderation ---------------------------------------------- */

.comments-area .comment-awaiting-moderation {
  margin-top: .5rem;
  font-size: .75rem;
}

/* --- narrow screens ---------------------------------------------------- */

@media (max-width: 640px) {
  .comments-area .comment-list .comment-body {
    padding-left: 2.75rem;
  }

  .comments-area .comment-author-avatar img {
    width: 32px;
    height: 32px;
  }

  /* Indent once, then stop — anything more is unreadable on a phone. */
  .comments-area .comment-list .children {
    padding-left: .875rem;
  }

  .comments-area .comment-list .children .children,
  .comments-area .comment-list .children .children .children,
  .comments-area .comment-list .children .children .children .children {
    padding-left: 0;
  }

  .comments-area .comment-list .children .children::before {
    display: none;
  }

  .comments-area .jct-toggle {
    margin-left: 2.75rem;
  }

  .comments-area .comment-metadata {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .comments-area .comment-list .children::before,
  .comments-area .comment-like-btn,
  .comments-area .comment-reply-btn,
  .comments-area .jct-edit {
    transition: none;
  }
}

/* --- the shared composer, mounted inside a comment -------------------- */

/*
 * When editing, the composer from Jormuntl Comment Images is mounted inside
 * .jct-body. This sheet prints after that plugin's stylesheet, so the comment
 * rules above would otherwise bleed into the editor. These restore it.
 */

.comments-area .jct-body .jci-composer {
  margin: .25rem 0 0;
}

.comments-area .jct-body .jci-editor {
  min-height: 4.5rem;
  font-size: .9375rem;
  line-height: 1.65;
}

/* Editing a posted comment has no star rating to place, so the slot would
   just add dead space at the end of the toolbar. */
.comments-area .jct-body .jci-rating-slot:empty {
  display: none;
}

/* The comment-content rules set their own paragraph rhythm; the editor keeps
   the composer's. */
.comments-area .jct-body .jci-editor p {
  margin: 0 0 .75em;
}

.comments-area .jct-body .jci-editor > *:first-child { margin-top: 0; }
.comments-area .jct-body .jci-editor > *:last-child { margin-bottom: 0; }

/* Save/Cancel sit under the composer, not inside it. */
.comments-area .jct-body .jct-actions {
  margin-top: .5rem;
}