/* TAF 2026 — Recipe comments section
   Full file header, design notes and per-rule rationale: docs/design/css-rationale/taf-comments.css.md */

/* Column: spec says 760px centered; the single-post layout caps the content
   column at 728px (main.css post grid), so this fills that column. */
.taf-comments {
  max-width: 760px;
  margin: var(--space-32) auto 0;
}

/* --------------------------------------------------------------------------
   1. Section head
   -------------------------------------------------------------------------- */
.taf-comments__headrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
  margin: 0 0 var(--space-8);
}
.taf-comments__eyebrow {
  font-family: var(--display);
  font-size: var(--fs-12);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-14em);
  text-transform: uppercase;
  color: var(--rose-link);
  margin: 0;
  line-height: var(--lh-13);
}
.taf-comments .taf-comments__title {
  font-family: var(--display);
  font-size: var(--fs-30);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls--001em);
  color: var(--text-body);
  margin: var(--space-12) 0 0;
}
.taf-comments__agg {
  font-family: var(--sans);
  font-size: var(--fs-15);
  color: var(--text-body);
  white-space: nowrap;
  margin: 0;
}
.taf-comments__agg b { font-weight: var(--w-bold); }
.taf-comments__aggstars {
  color: var(--saffron);   /* 2026-08-01 star rework: saffron sitewide (rose reverted) */
  font-size: var(--star-display);   /* D6-A display tier */
  letter-spacing: var(--ls-1px);
}
.taf-comments__aggstars .taf-star-off { color: var(--line); }   /* D1-C quiet empty — already consistent */
.taf-comments__aggfrom { color: var(--cocoa); }
.taf-comments__lede {
  font-family: var(--sans);
  font-size: var(--fs-16);
  line-height: var(--lh-165);
  color: var(--cocoa);
  max-width: 52ch;
  margin: 0 0 var(--space-32);
}

/* .taf-comments .comment-list — rationale: docs/design/css-rationale/taf-comments.css.md#taf-comments-comment-list */
.taf-comments .comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.taf-comments .comment-list > li.comment,
.taf-comments .comment-list > li.pingback,
.taf-comments .comment-list > li.trackback {
  background: var(--paper);
  border: var(--bw-1) solid var(--line);
  border-radius: var(--radius);
  margin: 0;
  padding: var(--space-24) var(--space-24);
}
/* Counter Kadence comments.min.css (grey divider, absolute Reply,
   70px meta indent, 2rem content margin — all loaded before this sheet) */
.taf-comments .comment-list .comment-body {
  position: static;
  border-bottom: none;
  margin: 0;
  padding: 0;
}
.taf-comments .comment-list .comment-content {
  margin-bottom: 0;
  padding-top: 0;
}
.taf-comments .comment-list .comment-meta {
  position: static;
  margin-left: 0;
  font-size: 100%; /* token-exempt: a RESET that counters Kadence comments.min.css; not a size choice */
}

/* Header row: avatar + stacked name/date */
.taf-comment__headrow {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin: 0 0 var(--space-12);
}
.taf-comment__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-round);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: var(--w-bold);
  font-size: var(--fs-17);
  flex: none;
}
/* .taf-tint-0 — rationale: docs/design/css-rationale/taf-comments.css.md#taf-tint-0 */
.taf-tint-0 { background: var(--rose-tint); color: var(--rose-deep); }
.taf-tint-1 { background: var(--tag-season-bg); color: var(--tag-season-ink); }
.taf-tint-2 { background: var(--tag-veg-bg); color: var(--tag-veg-ink); }
.taf-comment__avatar--author { background: var(--rose); color: var(--color-on-accent); }

.taf-comment__name {
  font-family: var(--display);
  font-size: var(--fs-15);
  font-weight: var(--w-bold);
  color: var(--text-body);
  line-height: var(--lh-14);
  margin: 0;
}
.taf-comment__name .fn {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: normal;
  color: inherit;
}
.taf-comment__stars {
  color: var(--saffron);   /* 2026-08-01 star rework: saffron sitewide (rose reverted) */
  font-size: var(--star-meta);   /* D6-A meta tier */
  letter-spacing: var(--ls-1px);
  margin-left: var(--space-4);
}
.taf-comment__meta,
.taf-comment__meta time {
  font-family: var(--sans);
  font-size: var(--fs-13);
  color: var(--cocoa);
}
.taf-comment__meta { margin: 0; line-height: var(--lh-15); }

/* Body */
.taf-comments .comment-list .comment-content p {
  font-family: var(--sans);
  font-size: var(--fs-16);
  line-height: var(--lh-165);
  color: var(--text-body);
  margin: 0 0 var(--space-8);
}
.taf-comments .comment-list .comment-content p:last-child { margin-bottom: 0; }

/* Action row (Reply as rose link; no Helpful — no plugin provides it) */
.taf-comments .comment-list .reply {
  position: static; /* Kadence floats it top-right ≥767px */
  display: flex;
  gap: var(--space-16);
  margin: var(--space-12) 0 0;
}
.taf-comments .comment-list .reply a {
  display: inline;
  position: relative; /* anchors the 44px tap extension below */
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-family: var(--display);
  font-size: var(--fs-15);
  font-weight: var(--w-bold);
  line-height: var(--lh-14);
  color: var(--rose-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--speed) var(--ease);
}
.taf-comments .comment-list .reply a:hover,
.taf-comments .comment-list .reply a:focus-visible {
  color: var(--rose-deep);
  border: none;
}
.taf-comments .comment-list .reply a::after {
  /* .taf-comments .comment-list .reply a::after — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/taf-comments.css.md#taf-comments-comment-list-reply-a-after */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--space-44);
  transform: translateY(-50%); /* 44px tap target */
}

/* Awaiting-moderation notice (cream block) */
.taf-comment__moderation {
  background: var(--cream);
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: var(--fs-15);
  color: var(--cocoa);
  padding: var(--space-8) var(--space-12);
  margin: 0 0 var(--space-8);
}
.taf-comment--nested .taf-comment__moderation { background: var(--paper); }

/* .taf-comments .comment-list .children — rationale: docs/design/css-rationale/taf-comments.css.md#taf-comments-comment-list-children */
.taf-comments .comment-list .children {
  list-style: none;
  margin: var(--space-16) 0 0;
  padding: 0;
  border: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.taf-comments .comment-list .children li.comment {
  background: var(--cream);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-16) var(--space-20);
  margin: 0;
}
.taf-comments .comment-list .children .children { margin: var(--space-12) 0 0; }
.taf-comments .taf-comment--nested .taf-comment__body {
  display: flex;
  gap: var(--space-12);
}
.taf-comments .taf-comment--nested .taf-comment__avatar {
  width: 38px;
  height: 38px;
  font-size: var(--fs-15);
}
.taf-comments .taf-comment--nested .taf-comment__name {
  font-size: var(--fs-15);
  margin: 0 0 var(--space-4);
}
/* .taf-comments .taf-comment--nested .comment-content p — rationale: docs/design/css-rationale/taf-comments.css.md#taf-comments-taf-comment-nested-comment-content-p */
.taf-comments .taf-comment--nested .comment-content p {
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  margin: 0 0 var(--space-8);
}
.taf-comments .taf-comment--nested .comment-content p:last-child { margin-bottom: 0; }
.taf-comment__badge {
  display: inline-block;
  background: var(--rose);
  color: var(--color-on-accent);
  font-family: var(--display);
  font-size: var(--fs-12);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-04em);
  text-transform: uppercase;
  line-height: var(--lh-145);
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-99);
  margin-left: var(--space-4);
  vertical-align: 1px;
}
.taf-comment__date {
  /* .taf-comment__date — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/taf-comments.css.md#taf-comment-date */
  font-family: var(--sans);
  font-size: var(--fs-13);
  font-weight: var(--w-regular);
  color: var(--cocoa);
  margin-left: var(--space-4);
}

/* .taf-comments .comment-navigation — rationale: docs/design/css-rationale/taf-comments.css.md#taf-comments-comment-navigation */
.taf-comments .comment-navigation {
  margin: var(--space-24) 0 var(--space-48);
  border: none;
  padding: 0;
}
.taf-comments .comment-navigation .nav-links {
  display: flex;
  justify-content: center;
  gap: var(--space-12);
  border: none;
}
.taf-comments .comment-navigation a {
  display: inline-block;
  background: var(--paper);
  border: var(--bw-15) solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-12) var(--space-24);
  font-family: var(--display);
  font-size: var(--fs-15);
  font-weight: var(--w-bold);
  color: var(--text-body);
  text-decoration: none;
  transition: background var(--speed) var(--ease);
}
.taf-comments .comment-navigation a:hover,
.taf-comments .comment-navigation a:focus-visible {
  background: var(--cream);
  border-color: var(--line);
  color: var(--text-body);
}
/* Load-more (taf-comments.js): disabled "Loading…" state on the older link —
   muted text, no cream hover fill, inert to further clicks while fetching */
.taf-comments .comment-navigation a[aria-busy="true"],
.taf-comments .comment-navigation a[aria-busy="true"]:hover,
.taf-comments .comment-navigation a[aria-busy="true"]:focus-visible {
  background: var(--paper);
  color: var(--cocoa);
  cursor: default;
  pointer-events: none;
}
/* Programmatic focus target: the first newly appended card gets tabindex=-1
   and .focus() for keyboard/screen-reader continuity; it is not interactive,
   so no focus ring */
.taf-comments .comment-list > li[tabindex="-1"]:focus { outline: none; }

.taf-comments .taf-comments__closed {
  font-family: var(--sans);
  font-size: var(--fs-15);
  color: var(--cocoa);
  margin: 0 0 var(--space-24);
}

/* The aggregate moved into the section head; hide WPRM's own summary block */
.taf-comments .wprm-user-rating-summary { display: none; }

/* .taf-comments #respond — rationale: docs/design/css-rationale/taf-comments.css.md#taf-comments-respond */
.taf-comments #respond {
  background: var(--cream);
  border-radius: var(--radius);
  padding: var(--space-32) var(--space-40) var(--space-40);
  margin: var(--space-40) 0 0;
}
.taf-comments #respond .comment-reply-title {
  font-family: var(--display);
  font-size: var(--fs-24);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls--001em);
  color: var(--text-body);
  margin: 0;
}
.taf-comments #respond .taf-cancel-reply a {
  /* .taf-comments #respond .taf-cancel-reply a — rationale: docs/design/css-rationale/taf-comments.css.md#taf-comments-respond-taf-cancel-reply-a */
  font-family: var(--sans);
  font-size: var(--fs-15);
  font-weight: var(--w-regular);
  color: var(--rose-link);
  margin-left: var(--space-8);
}
.taf-comments #respond .comment-notes {
  font-family: var(--sans);
  font-size: var(--fs-15);
  font-style: normal; /* Kadence italicizes comment-notes */
  color: var(--cocoa);
  margin: var(--space-8) 0 var(--space-24);
}
.taf-comments #respond .comment-notes .required-field-message { display: none; }
.taf-comments #respond .logged-in-as {
  font-family: var(--sans);
  font-size: var(--fs-15);
  color: var(--cocoa);
  margin: var(--space-8) 0 var(--space-16);
}

/* Form grid: full-width rows; the last row pairs the consent checkbox (left)
   with the submit button (right, space-between). */
.taf-comments #respond form.comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-20);
}
.taf-comments #respond form.comment-form > * {
  grid-column: 1 / -1;
  min-width: 0;
}
.taf-comments #respond p { margin: 0 0 var(--space-12); }

/* .taf-comments #respond .comment-form-wprm-rating — rationale: docs/design/css-rationale/taf-comments.css.md#taf-comments-respond-comment-form-wprm-rating */
.taf-comments #respond .comment-form-wprm-rating {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin: 0 0 var(--space-16);
}
.taf-comments #respond .comment-form-wprm-rating > label {
  font-family: var(--display);
  font-size: var(--fs-15);
  font-weight: var(--w-bold);
  color: var(--text-body);
  margin: 0;
  padding: 0; /* Kadence gives form labels .4em bottom padding */
}
.taf-comments #respond .comment-form-wprm-rating .wprm-rating-stars {
  transform: scale(1.5);
  transform-origin: left center;
}
.taf-comments .wprm-comment-ratings-container {
  border: none;
  margin: 0;
  padding: 0;
}
/* .taf-comments .wprm-comment-ratings-container svg path.wpr… — rationale: docs/design/css-rationale/taf-comments.css.md#taf-comments-wprm-comment-ratings-container-svg-path-wprm-st */
.taf-comments .wprm-comment-ratings-container svg path.wprm-star-empty {
  fill: var(--line) !important;
  stroke: var(--line) !important;
}
.taf-comments .wprm-comment-ratings-container svg path.wprm-star-full {
  fill: var(--saffron) !important;
  stroke: var(--saffron-deep) !important;
}

/* Textarea */
.taf-comments #respond .comment-form-comment textarea,
.taf-comments #respond textarea {
  width: 100%;
  min-height: 120px;
  max-height: none;
  background: var(--paper);
  border: var(--bw-15) solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-16) var(--space-16);
  font-family: var(--sans);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--text-body);
  resize: vertical;
  box-shadow: none;
}

/* Name + email: 2-col grid, 52px inputs */
.taf-comments #respond .taf-comment-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  margin: 0 0 var(--space-16);
}
.taf-comments #respond .taf-comment-form-grid p { margin: 0; }
.taf-comments #respond .taf-comment-form-grid input {
  width: 100%;
  height: 52px;
  background: var(--paper);
  border: var(--bw-15) solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-16);
  font-family: var(--sans);
  font-size: var(--fs-16);
  color: var(--text-body);
  box-shadow: none;
}
.taf-comments #respond textarea::placeholder,
.taf-comments #respond .taf-comment-form-grid input::placeholder {
  color: var(--cocoa);
  opacity: var(--o-8);
}
.taf-comments #respond textarea:focus,
.taf-comments #respond .taf-comment-form-grid input:focus {
  border-color: var(--rose);
  outline: none;
}

/* Bottom row: consent left, submit right (selectors carry form.comment-form
   to out-specify the > * catch-all above) */
.taf-comments #respond form.comment-form > .comment-form-cookies-consent {
  grid-column: 1;
  align-self: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-8);
  margin: var(--space-4) 0 0;
  text-align: left;
}
.taf-comments #respond .comment-form-cookies-consent input[type="checkbox"] {
  /* 24px (was 18): WCAG 2.5.8 floor for the box itself; the for-linked label
     beside it extends the effective target. */
  width: 24px;
  height: 24px;
  accent-color: var(--rose);
  margin: 0;
  flex: none;
}
.taf-comments #respond .comment-form-cookies-consent label {
  font-family: var(--sans);
  font-size: var(--fs-15);
  color: var(--cocoa);
  cursor: pointer;
  margin: 0;
  padding: 0; /* Kadence: label padding-bottom + checkbox+label padding-left */
}
.taf-comments #respond form.comment-form > .form-submit {
  grid-column: 2;
  grid-row: auto;
  justify-self: end;
  align-self: center;
  margin: var(--space-4) 0 0;
}
.taf-comments #respond .form-submit .submit,
.taf-comments #respond input[type="submit"] {
  background: var(--rose);
  color: var(--color-on-accent);
  font-family: var(--display);
  font-size: var(--fs-16);
  font-weight: var(--w-bold);
  padding: var(--space-12) var(--space-24);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--speed) var(--ease);
}
.taf-comments #respond .form-submit .submit:hover,
.taf-comments #respond .form-submit .submit:focus-visible,
.taf-comments #respond input[type="submit"]:hover {
  background: var(--rose-deep);
}

/* Inline reply (comment-reply.js moves #respond under the comment):
   same styling minus the rating row, sized to sit inside the card */
.taf-comments .comment-list #respond {
  margin: var(--space-16) 0 0;
  padding: var(--space-24);
}
.taf-comments .comment-list #respond .comment-form-wprm-rating { display: none; }
.taf-comments .comment-list #respond .comment-reply-title { font-size: var(--fs-20); }

/* @media (max-width: 699.98px) — rationale: docs/design/css-rationale/taf-comments.css.md#media-max-width-699-98px */
@media (max-width: 699.98px) {
  .taf-comments__headrow {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
  }
  /* Mobile heading steps down with the responsive H2 scale (the old var(--fs-30)
     here restated the base size — a no-op media query). */
  .taf-comments .taf-comments__title { font-size: var(--fs-h2); }
  .taf-comments #respond form.comment-form { grid-template-columns: minmax(0, 1fr); }
  .taf-comments #respond .taf-comment-form-grid { grid-template-columns: 1fr; }
  .taf-comments #respond form.comment-form > .comment-form-cookies-consent {
    grid-column: 1 / -1;
    margin: var(--space-4) 0 0;
  }
  .taf-comments #respond form.comment-form > .form-submit {
    grid-column: 1 / -1;
    justify-self: stretch;
    margin: var(--space-16) 0 0;
  }
  .taf-comments #respond .form-submit .submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .taf-comments a,
  .taf-comments .submit { transition: none !important; }
}