/* ————————————————————————————————————————————
   lil bit cycling v2 — the comments

   Ported from the first theme's blog.css (comments section), applied to
   WordPress's standard comment section as the parent prints it: the thread
   set quieter, replies tied to their parent by a rule down the left, the
   form's fields in the one text-field look the newsletter box wears, and
   the coral button. Scoped to .comments-area; the tokens are the theme's.
   ———————————————————————————————————————————— */

.comments-area {
  --paper:     #ffffff;
  --paper-2:   #faf9f7;
  --ink:       #212121;
  --ink-soft:  #6e6e6e;
  --ink-faint: rgba(0, 0, 0, .12);
  --rule:      rgba(0, 0, 0, .09);
  --coral:     #fc4c02;
  --coral-deep:#c93e04;
  --sans:      "Quicksand", "helvetica neue", helvetica, arial, sans-serif;

  font-family: var(--sans);
  color: var(--ink);
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 3rem 0 0;
}

/* ——— the headings ——— */

.comments-area .comments-title,
.comments-area .comment-reply-title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  text-transform: none;
  text-align: left;
  margin: 0 0 1.2rem;
  padding: 0;
  border: 0;
}
.comments-area .comment-reply-title { margin-top: 2.5rem; }
/* the parent centres the heading as `#comments h3#reply-title` — two ids,
   which outranks any class; this matches it and adds one */
#comments div#respond,
#comments div#respond h3#reply-title { text-align: left; }
.comments-area .comment-reply-title small { font-size: .8rem; font-weight: 400; margin-left: .6rem; }
.comments-area .comment-reply-title small a { color: var(--ink-soft); text-decoration: none; }
.comments-area .comment-reply-title small a:hover { color: var(--coral); }

/* ——— the thread ——— */

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

/* the parent rules every comment off with 40px and a line below, and sets
   its text in by 45px; here one rule between threads, text under the name */
.comments-area ol.comment-list > li,
.comments-area ol.comment-list .comment { padding: 1.4rem 0; margin: 0; border: 0; background: none; }
.comments-area ol.comment-list > li.comment + li.comment { border-top: 1px solid var(--rule); }
.comments-area .comment-body { padding: 0; margin: 0; border: 0; background: none; box-shadow: none; }
.comments-area .comment-content { padding: 0; margin: 0; }

/* A reply is set in from its parent and tied to it by the rule down the
   left — the same gesture the prose blockquote uses, one shade quieter. */
.comments-area .comment-list .children {
  margin-top: 1.2rem;
  padding-left: 1.4rem;
  border-left: 2px solid var(--ink-faint);
}
.comments-area ol.comment-list ol.children li { padding: 1rem 0 0; margin: 0; border: 0; }
.comments-area ol.comment-list ol.children li:first-child { padding-top: 0; }
/* past the third turn the indent costs more width than the nesting is worth */
.comments-area .comment-list .children .children .children { padding-left: 0; border-left: 0; }

.comments-area .comment-meta {
  border: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .7rem;
  margin: 0 0 .45rem;
}
.comments-area .comment-author { display: flex; align-items: center; gap: .5rem; margin: 0; }
.comments-area .comment-author .avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  position: static;
  margin: 0;
}
.comments-area .comment-author .fn {
  font-family: var(--sans);
  font-weight: 500;
  font-style: normal;
  font-size: 1.05rem;
  color: var(--ink);
}
.comments-area .comment-author .fn a { color: inherit; text-decoration: none; }
.comments-area .comment-author .says { display: none; }
.comments-area .comment-metadata { margin: 0; }
.comments-area .comment-metadata a,
.comments-area .comment-metadata time {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
  text-decoration: none;
}
.comments-area .comment-metadata a:hover { color: var(--coral); }

/* tighter than the article's prose: a comment is a note, not an article */
.comments-area .comment-content { font-size: 1rem; line-height: 1.65; color: var(--ink); }
.comments-area .comment-content p { margin: 0 0 1em; font-size: inherit; color: inherit; }
.comments-area .comment-content p:last-child { margin-bottom: 0; }
.comments-area .comment-content a { color: var(--coral); }

.comments-area .reply { margin: .5rem 0 0; padding: 0; text-align: left; }
.comments-area .comment-reply-link {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--coral);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
}
.comments-area .comment-reply-link:hover { color: var(--coral-deep); text-decoration: underline; }

/* ——— the form ——— */

.comments-area .comment-respond { background: none; border: 0; padding: 0; margin: 0; text-align: left; }
.comments-area .comment-form .form-submit { text-align: left; }
.comments-area .comment-form { display: flex; flex-wrap: wrap; gap: .9rem 1rem; }
.comments-area .comment-form > p { margin: 0; width: 100%; }
.comments-area .comment-form .comment-notes,
.comments-area .comment-form .logged-in-as {
  font-size: .85rem;
  color: var(--ink-soft);
}
.comments-area .comment-form .logged-in-as a { color: var(--coral); }
/* name and email side by side where there is room */
@media (min-width: 640px) {
  .comments-area .comment-form .comment-form-author,
  .comments-area .comment-form .comment-form-email { width: calc(50% - .5rem); }
}
.comments-area .comment-form label {
  display: block;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 .35rem;
}
.comments-area .comment-form .required { color: var(--coral); }

/* the one text-field look on the site — the newsletter box wears it too */
.comments-area .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: .75rem .9rem;
  box-shadow: none;
  box-sizing: border-box;
}
.comments-area .comment-form textarea { min-height: 9rem; resize: vertical; }
.comments-area .comment-form textarea::placeholder { color: var(--ink-soft); }
.comments-area .comment-form :is(input, textarea):focus {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
  border-color: transparent;
}

.comments-area .comment-form .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}
.comments-area .comment-form .comment-form-cookies-consent input { margin: .2rem 0 0; accent-color: var(--coral); }
.comments-area .comment-form .comment-form-cookies-consent label {
  display: inline;
  text-transform: none;
  letter-spacing: 0;
  font-size: .85rem;
  margin: 0;
}

/* the button, as the newsletter's */
.comments-area .comment-form .form-submit { margin: .3rem 0 0; }
.comments-area .comment-form .form-submit .submit {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin: 0;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.4;
  text-transform: none;
  color: #fff;
  background: var(--coral);
  border: 0;
  border-radius: 10px;
  padding: .8rem 1.3rem;
  box-shadow: none;
  cursor: pointer;
  transition: background .15s ease;
}
.comments-area .comment-form .form-submit .submit:hover { background: var(--coral-deep); color: #fff; }
.comments-area .comment-form .form-submit .submit:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }