/**
 *  @package michael-travels-theme
 *
 *  The discussion on a post, trip, day or visit.
 *
 *  Named default-comments so Fuse loads it alongside default.css.
 */

.travels-discussion {
  max-width: var(--mt-measure);
}

.travels-discussion-heading {
  margin-bottom: var(--mt-space-6);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
}




/*  ============================================================================
    The comments
    ============================================================================  */

.travels-comment-list,
.travels-comment-list .children {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*  WordPress's own indenting for a reply, kept.  */
.travels-comment-list .children {
  margin-top: var(--mt-space-4);
  padding-left: var(--mt-space-5);
  border-left: 1px solid var(--mt-line);
}

.travels-comment-list .comment,
.travels-comment-list .pingback {
  margin-bottom: var(--mt-space-4);
}

.travels-comment-list .comment-body {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: var(--mt-space-4);
  padding: var(--mt-space-4);
  background: var(--mt-ground);
  border: 1px solid var(--mt-line);
  border-radius: var(--mt-radius);
}

.travels-comment-list .avatar {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.travels-comment-list .comment-author {
  font-weight: 600;
}

.travels-comment-list .comment-author .says {
  display: none;
}

.travels-comment-list .comment-meta {
  grid-column: 2;
  margin-bottom: var(--mt-space-2);
  font-size: 0.8125rem;
}

.travels-comment-list .comment-metadata {
  color: var(--mt-muted);
  font-size: 0.75rem;
}

.travels-comment-list .comment-metadata a {
  color: inherit;
  text-decoration: none;
}

.travels-comment-list .comment-content {
  grid-column: 2;
}

.travels-comment-list .comment-content :last-child {
  margin-bottom: 0;
}

.travels-comment-list .reply {
  grid-column: 2;
  margin-top: var(--mt-space-3);
}

.travels-comment-list .comment-reply-link {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--mt-line);
  border-radius: var(--mt-radius);
  color: var(--mt-text);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.travels-comment-list .comment-reply-link:hover {
  background: var(--mt-accent);
  color: var(--mt-on-accent);
  border-color: var(--mt-accent);
}

/*  The author's own comments, marked so a reply from Michael reads as one.  */
.travels-comment-list .bypostauthor > .comment-body {
  border-left: 3px solid var(--mt-accent);
}




/*  ============================================================================
    The form
    ============================================================================  */

.comment-respond {
  padding: var(--mt-space-6);
  background: var(--mt-ground);
  border: 1px solid var(--mt-line);
  border-radius: var(--mt-radius);
}

.comment-reply-title {
  margin-bottom: var(--mt-space-4);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.comment-reply-title small {
  margin-left: var(--mt-space-3);
  font-family: var(--mt-font-body);
  font-size: 0.8125rem;
  font-weight: 400;
}

.comment-form label {
  display: block;
  margin-bottom: var(--mt-space-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/*  No url: the comment form has no website field, and is not getting one.  */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  background: var(--mt-ground-alt);
  border: 1px solid var(--mt-line);
  border-radius: var(--mt-radius);
  color: var(--mt-text);
  font-family: inherit;
  font-size: 1rem;
}

.comment-form textarea {
  min-height: 140px;
  resize: vertical;
}

.comment-form input:focus,
.comment-form textarea:focus {
  border-color: var(--mt-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--mt-accent-rgb), 0.18);
}

.comment-form p {
  margin-bottom: var(--mt-space-4);
}

.comment-form .comment-form-cookies-consent label {
  display: inline;
  margin-left: var(--mt-space-2);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/**
 *  The submit paragraph is followed by a hidden input and a script tag, so
 *  :last-child never matches it — it has to be named.
 */
.comment-form .form-submit {
  margin-bottom: 0;
}

.travels-discussion-closed {
  color: var(--mt-muted);
  font-style: italic;
}