/* ==========================================================================
   IMMERSION — the Q&A thread (WordPress comments)

   Karel: "style the Q&A section like the rest of the site."

   The live /qa/ page is an ordinary page whose Q&A is WordPress comments, so
   the markup here is WordPress's own — .commentlist, .comment-body,
   .comment-respond — not the theme's. This dresses that markup in the same
   language as templates/qa.php: a card per message, Karel's answers in the
   teal wash that means "Karel's voice" everywhere else on the site, and the
   ask box as a panel.

   Selectors are scoped to .imm-qa-thread (the wrapper in comments.php) so
   nothing here can reach a comment list rendered by anything else.
   ========================================================================== */

.imm-qa-thread {
  max-width: var(--imm-content-max);
  margin: var(--imm-s-11) auto 0;
}

/* --- Ask box ---------------------------------------------------------------
   First in the thread, so it reads as an invitation rather than an afterthought.
   -------------------------------------------------------------------------- */

.imm-qa-thread .comment-respond {
  margin: 0 0 var(--imm-s-9);
  padding: var(--imm-s-7);
  background: var(--imm-canvas);
  border: 1px solid var(--imm-line);
  border-radius: var(--imm-r-panel);
}

.imm-qa-thread .comment-reply-title {
  margin: 0 0 var(--imm-s-4);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: var(--imm-track-h1);
  color: var(--imm-text);
}

/* WordPress puts "Cancel reply" inside the heading, where it inherits the
   heading's size and reads like part of the title. */
.imm-qa-thread .comment-reply-title small {
  display: inline-block;
  margin-left: var(--imm-s-3);
  font-size: 13px;
  font-weight: 600;
}

.imm-qa-thread .comment-reply-title small a {
  color: var(--imm-link);
  text-decoration: none;
}

.imm-qa-thread .logged-in-as,
.imm-qa-thread .required-field-message,
.imm-qa-thread .comment-notes {
  margin: 0 0 var(--imm-s-4);
  font-size: 13px;
  color: var(--imm-faint);
}

.imm-qa-thread .logged-in-as a,
.imm-qa-thread .comment-notes a { color: var(--imm-link); text-decoration: none; }

.imm-qa-thread .comment-form-comment { margin: 0 0 var(--imm-s-5); }
.imm-qa-thread .comment-form-comment label { display: none; }

.imm-qa-thread textarea {
  width: 100%;
  min-height: 120px;
  padding: var(--imm-s-4) var(--imm-s-5);
  background: var(--imm-paper);
  border: 1px solid var(--imm-line-2);
  border-radius: var(--imm-r-input);
  font-family: var(--imm-font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--imm-text);
  resize: vertical;
}

.imm-qa-thread textarea:focus {
  border-color: var(--imm-link);
  outline: 2px solid var(--imm-teal);
  outline-offset: 1px;
}

.imm-qa-thread .form-submit { margin: 0; }

/* --- The thread ------------------------------------------------------------ */

.imm-qa-thread__title {
  margin: 0 0 var(--imm-s-6);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--imm-track-label);
  text-transform: uppercase;
  color: var(--imm-faint);
}

.imm-qa-thread .commentlist,
.imm-qa-thread .children {
  margin: 0;
  padding: 0;
  list-style: none;
}

.imm-qa-thread .commentlist > li { margin-bottom: var(--imm-s-6); }

/* A reply sits under the question it answers, stepped in with a rule to carry
   the eye down. */
.imm-qa-thread .children {
  margin-top: var(--imm-s-5);
  padding-left: var(--imm-s-7);
  border-left: 2px solid var(--imm-line);
}

.imm-qa-thread .children > li { margin-top: var(--imm-s-5); }

.imm-qa-thread .comment-body {
  padding: var(--imm-s-5) var(--imm-s-6);
  background: var(--imm-paper);
  border: 1px solid var(--imm-line);
  border-radius: var(--imm-r-card);
}

/* Karel's answers, in the teal wash that means his voice site-wide.
   .bypostauthor is WordPress's own class for the page author.

   The accent edge is not decoration: in dark mode two washes sit only a few
   values apart, and a tint alone stops telling you who is speaking. The border
   carries the distinction in both themes. */
.imm-qa-thread .bypostauthor > .comment-body {
  background: var(--imm-teal-wash);
  border-color: var(--imm-teal-wash-line);
  border-left: 3px solid var(--imm-teal);
}

.imm-qa-thread .comment-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--imm-s-2) var(--imm-s-3);
  margin-bottom: var(--imm-s-3);
}

.imm-qa-thread .comment-author {
  display: inline-flex;
  align-items: center;
  gap: var(--imm-s-3);
  font-style: normal;
}

.imm-qa-thread .comment-author .avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--imm-r-pill);
  background: var(--imm-line-4);
}

.imm-qa-thread .comment-author .fn {
  font-size: 14px;
  font-weight: 700;
  font-style: normal;
  color: var(--imm-text);
}

/* "says:" is boilerplate from WordPress's walker and adds nothing here. */
.imm-qa-thread .comment-author .says { display: none; }

.imm-qa-thread .comment-metadata,
.imm-qa-thread .comment-metadata a {
  font-size: 12px;
  color: var(--imm-faint);
  text-decoration: none;
}

.imm-qa-thread .comment-metadata a:hover { color: var(--imm-link); }
.imm-qa-thread .edit-link { margin-left: var(--imm-s-3); }

.imm-qa-thread .comment-content {
  font-size: 15px;
  line-height: 1.7;
  color: var(--imm-body);
}

.imm-qa-thread .comment-content p { margin: 0 0 var(--imm-s-4); }
.imm-qa-thread .comment-content p:last-child { margin-bottom: 0; }
.imm-qa-thread .comment-content a { color: var(--imm-link); }

.imm-qa-thread .reply { margin-top: var(--imm-s-4); }

.imm-qa-thread .comment-reply-link {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--imm-line-2);
  border-radius: var(--imm-r-nav);
  font-size: 13px;
  font-weight: 600;
  color: var(--imm-muted);
  text-decoration: none;
  transition: border-color var(--imm-t-btn), color var(--imm-t-btn);
}

.imm-qa-thread .comment-reply-link:hover {
  border-color: var(--imm-link);
  color: var(--imm-link);
}

.imm-qa-thread .comment-awaiting-moderation {
  display: block;
  margin-bottom: var(--imm-s-3);
  font-size: 13px;
  color: var(--imm-magenta);
}

.imm-qa-thread__closed {
  margin: var(--imm-s-6) 0 0;
  font-size: 14px;
  color: var(--imm-faint);
}

/* When you hit Reply, WordPress moves the whole ask box inside that comment. */
.imm-qa-thread .children .comment-respond,
.imm-qa-thread .commentlist .comment-respond {
  margin: var(--imm-s-5) 0 0;
  padding: var(--imm-s-6);
}

@media (max-width: 700px) {
  .imm-qa-thread .comment-body { padding: var(--imm-s-4) var(--imm-s-5); }
  .imm-qa-thread .children { padding-left: var(--imm-s-5); }
  .imm-qa-thread .comment-respond { padding: var(--imm-s-5); }
}