/*
 * The Kool Life — tkl-comments.css
 * Brands the post comment section (comments.php) to match the article design.
 * Namespaced .tkl-comment* and scoped overrides of WordPress's default
 * comment-form classes. Built entirely from the theme's :root tokens, mirroring
 * .author-bio/.author-av, .wpforms-container, .post-body h2, .faq-*, .pcard-more.
 * Loaded only on single posts.
 */

.tkl-comments{
  margin-top:44px;
  padding-top:32px;
  border-top:1px solid var(--gray-light);
}

/* Section heading — matches .post-body h2 / .faq-h */
.tkl-comments-title{
  font-family:var(--font-con);
  font-size:26px;font-weight:900;
  text-transform:uppercase;letter-spacing:.01em;
  color:var(--black);margin-bottom:6px;
}
.tkl-comments-title span{color:var(--blue)}
.tkl-comments-sub{
  font-family:var(--font-mono);font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray);margin-bottom:26px;display:block;
}

/* ── Comment list ── */
.tkl-comment-list{list-style:none;margin:0 0 8px;padding:0}
.tkl-comment-list ol{list-style:none;margin:0;padding:0}

.tkl-comment{margin:0}
.tkl-comment-inner{
  display:flex;gap:16px;align-items:flex-start;
  padding:22px 0;
  border-bottom:1px solid var(--gray-light);
}
/* Initials avatar — reuses the .author-av look */
.tkl-comment-av{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:var(--blue);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-con);font-size:15px;font-weight:900;
  color:var(--white);text-transform:uppercase;letter-spacing:.02em;
}
.tkl-comment-main{min-width:0;flex:1}
.tkl-comment-head{
  display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;margin-bottom:8px;
}
.tkl-comment-author{
  font-family:var(--font-con);font-size:16px;font-weight:900;
  text-transform:uppercase;letter-spacing:.02em;color:var(--black);
}
/* "Author" tag when the post author comments */
.tkl-comment-badge{
  font-family:var(--font-con);font-size:9px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);background:var(--blue-bg);border:1px solid var(--blue);
  padding:2px 7px;
}
.tkl-comment-date{
  font-family:var(--font-mono);font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gray);
}
.tkl-comment-body{
  font-family:var(--font-body);font-size:15px;line-height:1.72;
  color:var(--black2);
}
.tkl-comment-body p{margin-bottom:12px}
.tkl-comment-body p:last-child{margin-bottom:0}
.tkl-comment-body a{color:var(--blue);border-bottom:1px solid var(--blue-bg)}
.tkl-comment-body a:hover{border-color:var(--blue)}

.tkl-comment-pending{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue);margin-bottom:8px;display:block;
}

/* Reply link — styled like .pcard-more */
.tkl-comment-actions{margin-top:10px}
.tkl-comment-actions a{
  font-family:var(--font-con);font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);transition:color .15s;
}
.tkl-comment-actions a:hover{color:var(--black)}

/* Threaded replies — indented with a blue-ish left rule */
.tkl-comment-list .children{
  margin-left:22px;
  padding-left:22px;
  border-left:2px solid var(--gray-light);
}
@media(max-width:560px){
  .tkl-comment-list .children{margin-left:10px;padding-left:14px}
}

/* Comment pagination — matches .pagination */
.tkl-comments-nav{padding:24px 0;display:flex;justify-content:center;gap:8px}
.tkl-comments-nav a,.tkl-comments-nav span{
  font-family:var(--font-con);font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  padding:8px 12px;border:1px solid var(--gray-light);
  color:var(--black);text-decoration:none;transition:all .15s;
}
.tkl-comments-nav a:hover{background:var(--black);color:var(--white);border-color:var(--black)}

/* ── Respond / form ── */
.tkl-comment-respond{
  margin-top:34px;
  background:var(--off);
  border:1px solid var(--gray-light);
  padding:26px 28px;
  position:relative;
}
.tkl-comment-respond::before{
  content:'';position:absolute;top:-1px;left:-1px;right:-1px;
  height:4px;background:var(--blue);
}
.tkl-comment-respond .comment-reply-title{
  font-family:var(--font-con);font-size:22px;font-weight:900;
  text-transform:uppercase;letter-spacing:.01em;
  color:var(--black);margin-bottom:6px;
}
.tkl-comment-respond .comment-reply-title small{
  font-family:var(--font-mono);font-size:10px;font-weight:400;
  text-transform:uppercase;letter-spacing:.08em;margin-left:10px;
}
.tkl-comment-respond .comment-reply-title small a{color:var(--blue)}
.tkl-comment-notes{
  font-family:var(--font-body);font-size:13px;font-style:italic;
  color:var(--gray);margin-bottom:18px;
}

.tkl-comment-form .comment-form-comment,
.tkl-comment-form .comment-form-author,
.tkl-comment-form .comment-form-email{margin-bottom:14px}

.tkl-comment-form label{
  font-family:var(--font-con);font-size:11px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--black);margin-bottom:6px;display:block;
}
.tkl-comment-form input[type=text],
.tkl-comment-form input[type=email],
.tkl-comment-form textarea{
  width:100%;
  font-family:var(--font-body);font-size:15px;color:var(--black);
  background:var(--white);
  border:1px solid var(--gray-light);border-radius:0;
  padding:12px 14px;transition:border-color .15s;
}
.tkl-comment-form input:focus,
.tkl-comment-form textarea:focus{outline:none;border-color:var(--blue)}
.tkl-comment-form textarea{min-height:130px;resize:vertical;line-height:1.6}

/* Name + email side by side on wider screens (float avoids inline-block
   whitespace overflow that would wrap them onto separate lines) */
.tkl-comment-form .comment-form-author,
.tkl-comment-form .comment-form-email{float:left;width:calc(50% - 7px)}
.tkl-comment-form .comment-form-author{margin-right:12px}
@media(max-width:560px){
  .tkl-comment-form .comment-form-author,
  .tkl-comment-form .comment-form-email{float:none;width:100%;margin-right:0}
}

.tkl-comment-form .form-submit{clear:both;margin-top:4px}
.tkl-comment-submit{
  font-family:var(--font-con);font-size:13px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  background:var(--black);color:var(--white);
  border:none;border-radius:0;padding:14px 30px;cursor:pointer;
  transition:background .15s;
}
.tkl-comment-submit:hover{background:var(--blue)}

.tkl-comments-closed{
  font-family:var(--font-body);font-size:14px;font-style:italic;
  color:var(--gray);margin-top:24px;
}