/**
 * Comment list + comment form (comments.php). Self-contained, on-brand
 * replacement for the original Mato theme's comment styling — dark
 * treatment to match the rest of the single-post page (see letterboxd.css
 * / author.css's header comments for why: no light-scheme override on
 * this page, so it inherits the site's dark default).
 */

.rt-comments {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.rt-comments__title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 var(--space-6);
  color: var(--color-white);
}

.rt-comments__title--form {
  /* was var(--space-10) — not a defined token, which silently zeroed
     this margin (an unresolved var() invalidates the whole declaration). */
  margin-top: var(--space-12);
}

/* ---- comment list ---- */
.rt-comments__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rt-comment {
  /* was var(--space-5) — not a defined token, see note above. */
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.rt-comment:first-child { padding-top: 0; }

/* Threaded replies (WordPress nests a <ul class="children"> inside the
   parent <li>) — indent and give the thread a visible spine. */
.rt-comment .children {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0 0 0 var(--space-6);
  border-left: 2px solid rgba(255, 255, 255, 0.1);
}

.rt-comment .children .rt-comment {
  border-bottom: none;
  padding-bottom: 0;
}

.rt-comment__row {
  display: flex;
  gap: var(--space-4);
}

.rt-comment__avatar img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}

.rt-comment__body {
  flex: 1;
  min-width: 0;
}

.rt-comment__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.rt-comment__name {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-white);
}

.rt-comment__date {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.rt-comment__text {
  margin-top: var(--space-2);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}

.rt-comment__text p:first-child { margin-top: 0; }
.rt-comment__text p:last-child { margin-bottom: 0; }

.rt-comment__reply {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  text-decoration: none;
}

.rt-comment__reply:hover {
  color: var(--color-accent-dark);
}

.rt-comments__pagination {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-3);
  font-size: 13px;
}

.rt-comments__pagination a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

.rt-comments__pagination a:hover {
  color: var(--color-white);
}

.rt-comments__closed {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

/* ---- comment form ---- */
.rt-comment-form-wrap { margin-top: var(--space-8); }

.rt-comment-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.rt-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 100%;
}

.rt-field textarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  width: 100%;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.rt-field textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.6;
}

.rt-field input::placeholder,
.rt-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.rt-field input:focus,
.rt-field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.06);
}

.rt-comment-form__submit {
  flex: none;
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: 999px;
  padding: 12px 28px;
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.rt-comment-form__submit:hover {
  background: var(--color-accent-dark);
}

/* WordPress core's own cancel-reply link (auto-inserted, not part of
   our field templates). */
.rt-comment-form #cancel-comment-reply-link {
  flex: 1 1 100%;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
}

/* Our own fields array only ever renders the comment textarea (a
   .rt-field div) — any <p> a plugin injects into the form (GDPR
   consent, "notify me of follow-ups" checkboxes, etc.) isn't part of
   that, so it's hidden rather than styled. If a specific plugin keeps
   adding one after this, it needs unhooking at the source instead. */
.rt-comment-form > p {
  display: none;
}

@media (max-width: 560px) {
  .rt-comment__avatar img { width: 36px; height: 36px; }

  /* Each reply level indents var(--space-6) (24px) — fine on desktop,
     but a few levels deep eats a large share of a 320-375px screen.
     Halved on mobile so a thread can nest without squeezing the text
     column to nothing. */
  .rt-comment .children {
    padding-left: var(--space-3);
  }
}