/* ==========================================================================
   COMMENTS SECTION — loaded only when comments are visible on a single
   post (see inc/enqueue.php). Every rule reuses the sitewide --aii-*
   tokens and existing visual language already used elsewhere:
     - Outer card   : same border / radius / shadow language as .aii-search
     - Inner card    : same "nested card on white" language as
                        .aii-single-disclaimer (background: var(--aii-bg))
     - Meta line     : same typography as .aii-post-meta-line
     - Buttons        : reuses .aii-btn / .aii-btn--primary as-is (set via
                        comment_form()'s class_submit arg, see inc/comments.php)
     - Thread guide  : same left-border idea as .aii-timeline
   No new colors, radii, shadows, or type scale are introduced here.
   ========================================================================== */

/* -------------------- Outer wrapper (the "card") -------------------- */
.aii-comments{
  background:var(--aii-white);border:1px solid #e6ebf1;border-radius:var(--aii-radius);
  box-shadow:0 8px 24px rgba(0,59,117,.06);
  padding:1.5rem;margin:2.5rem 0;
}
@media(max-width:559px){
  .aii-comments{padding:1.1rem;}
}

.aii-comments__title{
  font-size:1.125rem;font-weight:800;color:var(--aii-dark);margin:0 0 1.5rem;
  display:flex;align-items:center;gap:.5rem;
}
.aii-comments__title::before{
  content:"";display:inline-block;width:6px;height:1.1rem;background:var(--aii-primary);
  border-radius:2px;flex-shrink:0;
}
.aii-comments__closed-notice{
  color:#667685;font-size:.9375rem;background:var(--aii-bg);border:1px solid #e6ebf1;
  border-radius:var(--aii-radius);padding:.9rem 1.1rem;margin:0 0 1.5rem;
}

/* -------------------- Comments list -------------------- */
.aii-comments__list,
.aii-comments__list ul.children{list-style:none;margin:0;padding:0;}
.aii-comments__list{margin:0 0 1.5rem;}
.aii-comments__list > li.aii-comment{margin:0 0 1.25rem;}
.aii-comments__list > li.aii-comment:last-child{margin-bottom:0;}

/* Threaded replies — same "guide line" idea as .aii-timeline, just a
   plain left border instead of a dotted step-line since replies don't
   need the step markers. */
.aii-comments__list ul.children{
  margin:1.1rem 0 0;padding:0 0 0 1.5rem;border-left:2px solid #e6ebf1;
}
.aii-comments__list ul.children > li{margin:1.1rem 0 0;}
@media(max-width:559px){
  .aii-comments__list ul.children{padding-left:.85rem;}
}

/* -------------------- Individual comment card --------------------
   Nested-card treatment: reuses the same pattern as
   .aii-single-disclaimer (var(--aii-bg) fill + border) so each
   comment reads as a distinct card sitting inside the white
   .aii-comments wrapper, rather than duplicating the outer card's
   own white/shadow styling. */
.aii-comment__card{
  background:var(--aii-bg);border:1px solid #e6ebf1;border-radius:var(--aii-radius);
  padding:1.1rem 1.25rem;
}
@media(max-width:559px){
  .aii-comment__card{padding:.9rem 1rem;}
}

.aii-comment__header{display:flex;align-items:flex-start;gap:.75rem;margin:0 0 .65rem;}
.aii-comment__avatar{flex-shrink:0;}
.aii-comment__avatar-img{border-radius:50%;display:block;width:48px;height:48px;}
.aii-comment__identity{display:flex;flex-direction:column;gap:.2rem;min-width:0;}
.aii-comment__author{font-weight:700;font-size:.9375rem;color:var(--aii-dark);}

/* Same meta-line pattern as .aii-post-meta-line (icon + text, muted color). */
.aii-comment__date{display:inline-flex;align-items:center;gap:.35rem;font-size:.8125rem;color:#667685;}
.aii-comment__date-icon{width:14px;height:14px;color:var(--aii-primary);flex-shrink:0;}
.aii-comment__date a{color:inherit;text-decoration:none;}
.aii-comment__date a:hover{text-decoration:underline;}

.aii-comment__moderation{
  display:inline-block;font-size:.8125rem;font-weight:600;color:#8a6416;
  background:#fff7e6;border:1px solid #f4dfa8;border-radius:var(--aii-radius);
  padding:.4rem .7rem;margin:0 0 .75rem;
}

.aii-comment__content{font-size:.9375rem;color:var(--aii-text);}
.aii-comment__content p{margin:0 0 .8rem;}
.aii-comment__content p:last-child{margin-bottom:0;}

.aii-comment__footer{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.75rem;}

/* Reply link — core's own .comment-reply-link class, styled as a
   compact version of the existing .aii-btn--outline language. */
.aii-comment__footer .comment-reply-link,
.aii-comment__footer .comment-edit-link,
.aii-comment__ping .comment-edit-link{
  display:inline-flex;align-items:center;gap:.35rem;font-size:.8125rem;font-weight:600;
  text-decoration:none;padding:.3rem .65rem;border-radius:var(--aii-radius);
  border:1.5px solid var(--aii-primary);color:var(--aii-primary);
  transition:background-color .15s ease,color .15s ease;
}
.aii-comment__footer .comment-reply-link:hover,
.aii-comment__footer .comment-reply-link:focus-visible,
.aii-comment__footer .comment-edit-link:hover,
.aii-comment__footer .comment-edit-link:focus-visible,
.aii-comment__ping .comment-edit-link:hover,
.aii-comment__ping .comment-edit-link:focus-visible{
  background:var(--aii-primary);color:#fff;
}
.aii-comment__reply-icon{width:14px;height:14px;flex-shrink:0;}

/* Pingbacks / trackbacks — compact single line, no card/avatar. */
.aii-comment--ping{margin:0 0 .75rem;}
.aii-comment__ping{
  display:flex;align-items:center;gap:.6rem;font-size:.875rem;color:#667685;
  padding:.6rem 0;border-bottom:1px solid #eef1f5;
}
.aii-comment__ping a{color:var(--aii-primary);text-decoration:none;font-weight:600;}
.aii-comment__ping a:hover{text-decoration:underline;}

/* -------------------- Pagination -------------------- */
.aii-comments .comments-pagination{margin:1.5rem 0 0;display:flex;justify-content:center;}
.aii-comments .comments-pagination .nav-links{display:flex;flex-wrap:wrap;gap:.5rem;}
.aii-comments .comments-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;
  padding:0 .6rem;border-radius:var(--aii-radius);border:1.5px solid #d5dce4;
  color:var(--aii-text);text-decoration:none;font-size:.875rem;font-weight:600;
}
.aii-comments .comments-pagination .page-numbers.current{
  background:var(--aii-primary);border-color:var(--aii-primary);color:#fff;
}
.aii-comments .comments-pagination .page-numbers:hover:not(.current){
  border-color:var(--aii-primary);color:var(--aii-primary);
}

/* -------------------- Comment form --------------------
   Field-level styling below targets core WordPress's own stable
   classes/IDs (.comment-form-author, #author, #comment, etc.) — no
   field markup is rebuilt in PHP, so autofill, HTML5 required
   attributes, and the GDPR cookie-consent opt-in keep working as-is. */
.aii-comment-form{
  margin-top:2rem;padding-top:1.75rem;border-top:1px solid #eef1f5;
  display:grid;gap:1rem;grid-template-columns:1fr;
}
.aii-comment-form .comment-reply-title{margin:0 0 .25rem;}
.aii-comment-form .comment-notes,
.aii-comment-form .logged-in-as{font-size:.875rem;color:#667685;margin:0;}
.aii-comment-form .logged-in-as a{color:var(--aii-primary);}
#cancel-comment-reply-link{margin-left:.6rem;font-size:.8125rem;font-weight:600;color:var(--aii-primary);text-decoration:none;}
#cancel-comment-reply-link:hover{text-decoration:underline;}

.aii-comment-form p{margin:0;}
.aii-comment-form label{
  display:block;font-size:.8125rem;font-weight:600;color:var(--aii-dark);margin:0 0 .35rem;
}
.aii-comment-form .required{color:#b91c1c;text-decoration:none;}

/* Text inputs + textarea — same declared values as .aii-search__input
   (border, radius, padding, font-size, focus style) so the comment
   form matches the Search widget's input language exactly. */
.aii-comment-form input[type="text"],
.aii-comment-form input[type="email"],
.aii-comment-form input[type="url"],
.aii-comment-form textarea{
  width:100%;padding:.65rem .75rem;border:1.5px solid #d5dce4;border-radius:var(--aii-radius);
  font-size:1rem;font-family:inherit;color:var(--aii-text);background:var(--aii-white);
}
.aii-comment-form input[type="text"]:focus,
.aii-comment-form input[type="email"]:focus,
.aii-comment-form input[type="url"]:focus,
.aii-comment-form textarea:focus{
  outline:2px solid var(--aii-primary);outline-offset:1px;border-color:var(--aii-primary);
}
.aii-comment-form textarea{min-height:150px;resize:vertical;line-height:1.55;}

/* Checkbox opt-in row — proper alignment, larger accessible hit target. */
.aii-comment-form .comment-form-cookies-consent{
  display:flex;align-items:flex-start;gap:.6rem;
}
.aii-comment-form .comment-form-cookies-consent input[type="checkbox"]{
  width:18px;height:18px;margin:.15rem 0 0;flex-shrink:0;accent-color:var(--aii-primary);
}
.aii-comment-form .comment-form-cookies-consent label{
  margin:0;font-size:.8125rem;font-weight:400;color:#526070;line-height:1.5;cursor:pointer;
}

.aii-comment-form .form-submit{margin-top:.25rem;}

/* Responsive 2-column layout for the short fields (Name / Email),
   Website / checkbox / Comment / Submit stay full-width. */
@media(min-width:720px){
  .aii-comment-form{grid-template-columns:1fr 1fr;}
  .aii-comment-form .comment-form-url,
  .aii-comment-form .comment-form-cookies-consent,
  .aii-comment-form .comment-form-comment,
  .aii-comment-form .comment-notes,
  .aii-comment-form .logged-in-as,
  .aii-comment-form .form-submit{grid-column:1 / -1;}
}

@media(prefers-reduced-motion:reduce){
  .aii-comment__footer .comment-reply-link,
  .aii-comment__footer .comment-edit-link{transition:none;}
}