/* ===================================================================
   Comments (design: .comments on recipe-single / article-single).
   Real WordPress comments: threaded list + comment form.
   Base input styles come from base.css (.comment-form inputs).
   =================================================================== */

.comments{border-top:2px solid var(--ink); padding-top:32px; margin-bottom:60px; scroll-margin-top:110px;}
.comments-head{margin-bottom:26px;}
.comments-head h2{font-family:var(--font-display); font-size:24px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px;}
.comments-head p{font-size:14px; opacity:.6;}

/* ---- list ---- */
.comment-list,.comment-list .children{list-style:none; margin:0; padding:0;}
.comment-list{display:flex; flex-direction:column; gap:22px; margin-bottom:34px;}
.comment-list > .comment{padding-bottom:22px; border-bottom:1px solid var(--line-soft);}
.comment-list > .comment:last-child{border-bottom:none; padding-bottom:0;}
.comment-list .children{margin:18px 0 0 22px; padding-left:18px; border-left:2px solid var(--gold); display:flex; flex-direction:column; gap:18px;}
.comment{scroll-margin-top:110px;}
.comment-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; margin-bottom:8px;}
.comment-name{font-family:var(--font-mono); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.03em;}
.comment-date{font-family:var(--font-mono); font-size:11px; opacity:.45;}
.comment-date:hover{opacity:.8; text-decoration:underline;}
.comment-badge{font-family:var(--font-mono); font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:var(--gold); padding:3px 7px;}
.comment-awaiting{font-family:var(--font-mono); font-size:11px; color:var(--orange); margin-bottom:6px;}
.comment-text{font-size:14.5px; line-height:1.6; opacity:.85; overflow-wrap:anywhere;}
.comment-text > * + *{margin-top:.6em;}
.comment-text a{text-decoration:underline;}
.comment-actions{display:flex; gap:14px; margin-top:8px;}
.comment-actions a{font-family:var(--font-mono); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--mgshop);}
.comment-actions a:hover{text-decoration:underline;}
.comment.pingback .comment-text,.comment.trackback .comment-text{font-size:13px;}

.comments .comment-navigation,.comments .comments-pagination{margin:0 0 30px;}
.comments .nav-links{display:flex; justify-content:space-between; gap:12px; font-family:var(--font-mono); font-size:11px; font-weight:700; text-transform:uppercase;}
.no-comments{font-family:var(--font-mono); font-size:12px; opacity:.6; margin-bottom:20px;}

/* ---- form ---- */
.comment-respond{border:1.5px solid var(--ink); padding:26px; background:var(--paper);}
.comment-list .comment-respond{margin-top:18px;}
.comment-reply-title{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px; font-family:var(--font-mono); font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:18px;}
.comment-reply-title small a{font-size:10.5px; color:var(--orange); text-decoration:underline;}
.comment-form .comment-notes,.comment-form .logged-in-as{font-size:12.5px; opacity:.6; margin-bottom:16px;}
.comment-form .logged-in-as a{text-decoration:underline;}
.comment-form .field{margin-bottom:16px;}
.comment-form .field label{display:block; font-family:var(--font-mono); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; opacity:.6;}
.comment-form .required{color:var(--orange);}
.comment-form input[type=text],.comment-form input[type=email],.comment-form textarea{padding:12px 13px; font-size:14px;}
.comment-form textarea{resize:vertical; min-height:100px;}
.comment-form .comment-form-author,.comment-form .comment-form-email{display:inline-block; width:calc(50% - 8px); vertical-align:top;}
.comment-form .comment-form-author{margin-right:12px;}
.comment-form .field-check{display:flex; align-items:flex-start; gap:10px; margin-bottom:18px; font-size:13px; line-height:1.45;}
.comment-form .field-check input{flex:0 0 auto; width:17px; height:17px; margin-top:1px; accent-color:var(--mgshop);}
.comment-form .form-submit{margin:0;}
.comment-form .btn{margin-top:4px;}

@media (max-width:640px){
  .comment-respond{padding:20px;}
  .comment-form .comment-form-author,.comment-form .comment-form-email{display:block; width:100%; margin-right:0;}
  .comment-list .children{margin-left:6px; padding-left:12px;}
}