/* ==========================================================================
   TAF 2026 — Recipe comments section
   Owned by the comments build unit (inc/comments.php + comments.php).
   Loads AFTER main.css: rules below intentionally override the interim
   comment restyle in main.css (RECIPE-PAGE QA BATCH items 16-17 and the
   comment parts of items 2, 3, 6, 12).
   Tokens: milk #FEFBFA, cream #FAEDF2, paper #FFF, chocolate #33202B,
   cocoa #6E5964, rose #E11584, rose-deep #B80E67, rose-link #D01277,
   rose-tint #FCE7F3, saffron #E29B32, line #F0DEE6; radius 8 / 6.
   ========================================================================== */

/* 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);
}

/* --------------------------------------------------------------------------
   2. Comment cards (paper, 1px line, radius 8, 24/26 padding, 16px stack gap)
   -------------------------------------------------------------------------- */
.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;
}
/* Deterministic tint rotation (name hash, stable across pages).
   Initial inks ≥4.5:1 on their tint grounds (2026-07-17): rose-deep 5.42:1 as-is;
   season/veg take the darkened companion tokens (--saffron-deep/--pistachio measure
   only 3.28/3.96 there — see the token block). Backgrounds unchanged. */
.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 {
  /* token-frozen: WCAG 2.5.5 — invisible centered extension takes the visually
     small Reply link to the 44px floor (the .taf-mm-chip idiom).
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  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); }

/* --------------------------------------------------------------------------
   3. Nested replies (cream block inside the parent card; author = rose
      avatar + AUTHOR badge). Visually one nesting level: deeper levels
      render flat inside the same block stack.
   -------------------------------------------------------------------------- */
.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);
}
/* Reply body matches a top-level comment body at 16. It was
   15, which made the SAME content type render at three sizes down the page
   (post prose 18 / comment 16 / reply 15). Comments sitting one step under the
   body copy is the intended hierarchy; nesting depth is already carried by the
   indent, rule and smaller avatar, and does not need a third type size. */
.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 {
  /* Mulish, deliberately. This <span> is nested INSIDE .taf-comment__name
     (inc/comments.php:243-248), which is var(--display) Poppins bold — so this
     declaration exists to OVERRIDE the parent back to the body face. That was
     the author's intent all along; it was written as var(--body), a token that
     is declared nowhere, so the override silently failed and the date inherited
     Poppins. Resolved 2026-07-14: name in Poppins bold, date beside it in Mulish
     regular. Consistent with every other timestamp in a reading context
     (.taf-comment__meta time and .taf-contact__meta are both var(--sans)); the
     one Poppins timestamp, .taf-time, is a chip on a card — a label, not prose. */
  font-family: var(--sans);
  font-size: var(--fs-13);
  font-weight: var(--w-regular);
  color: var(--cocoa);
  margin-left: var(--space-4);
}

/* --------------------------------------------------------------------------
   4. Pagination — centered outline button, hover fills cream
   -------------------------------------------------------------------------- */
.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; }

/* --------------------------------------------------------------------------
   5. Leave-a-note form (cream band, radius 8, 36/40 padding)
   -------------------------------------------------------------------------- */
.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 {
  /* Mulish — same resolution as .taf-comment__date. Its siblings in this form
     (.comment-notes, .logged-in-as) are both var(--sans); Poppins here was the
     outlier, inherited only because var(--body) was void. */
  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); }

/* Rating row: "Your rating" + tappable saffron stars (true again since the
   2026-08-01 star rework). The WPRM widget inlines its geometry with
   !important (24px radios over 16px star strips), so real font/width
   sizing toward the 20px interactive tier is not reachable from CSS —
   the scale(1.5) shim stays (24px glyphs, ~36px effective radio targets;
   the transform scales the hit boxes with the art). */
.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;
}
/* Star anatomy (2026-08-01 rework). The widget's light-DOM defs
   (path.wprm-star-empty / -full, cloned by <use> rows) already arrive
   saffron from wprm_settings — these rules only move them the last step
   to the sitewide anatomy (quiet grey empties per D1-C; deep-saffron
   stroke on fulls). The blanket force-rose rules were deleted. */
.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); }

/* --------------------------------------------------------------------------
   6. Mobile (<700px): head stacks, single-column fields, full-width submit.
      Card 24/26 and band 36/40 paddings hold per spec.
   -------------------------------------------------------------------------- */
@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; }
}