/* =============================================================================
   Matt's Fit Chef — comments.css
   Component styles for the comments section.
   All values use --mfc-* design tokens from style.css :root.
   No hardcoded hex values.
   ============================================================================= */


/* ── Section wrapper ─────────────────────────────────────────────────────────── */

.mfc-comments {
  margin-top: var(--mfc-space-12);
  border-top: 2px solid var(--mfc-border);
  padding-top: var(--mfc-space-8);
}

.mfc-comments__heading {
  font-size: var(--mfc-text-2xl);
  font-weight: 800;
  color: var(--mfc-text);
  margin: 0 0 var(--mfc-space-8);
  line-height: 1.2;
}


/* ── Comment list ────────────────────────────────────────────────────────────── */

.mfc-comment-list,
.mfc-comment-list .children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mfc-comment-list > .mfc-comment {
  margin-bottom: var(--mfc-space-6);
}

/* Nested replies — indent and connect visually */
.mfc-comment-list .children {
  margin-top: var(--mfc-space-4);
  margin-left: var(--mfc-space-8);
  padding-left: var(--mfc-space-4);
  border-left: 2px solid var(--mfc-border);
}

.mfc-comment-list .children .mfc-comment {
  margin-top: var(--mfc-space-4);
}


/* ── Comment card ────────────────────────────────────────────────────────────── */

.mfc-comment__inner {
  background: var(--mfc-bg-tertiary);
  border: 1px solid var(--mfc-border);
  border-radius: var(--mfc-radius-md);   /* 8px */
  padding: var(--mfc-space-5);            /* 1.25rem */
}


/* ── Comment header — avatar + meta ─────────────────────────────────────────── */

.mfc-comment__header {
  display: flex;
  align-items: flex-start;
  gap: var(--mfc-space-3);
  margin-bottom: var(--mfc-space-3);
}

.mfc-comment__avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--mfc-radius-full);
  border: 2px solid var(--mfc-border);
  object-fit: cover;
  display: block;
}

.mfc-comment__meta {
  display: flex;
  flex-direction: column;
  gap: var(--mfc-space-1);
  min-width: 0;
}

.mfc-comment__author {
  font-weight: 700;
  color: var(--mfc-text);
  font-size: var(--mfc-text-base);
  line-height: 1.3;
  word-break: break-word;
}

.mfc-comment__date {
  font-size: var(--mfc-text-sm);          /* 0.875rem */
  color: var(--mfc-forest);
  line-height: 1.4;
}


/* ── Pending notice ──────────────────────────────────────────────────────────── */

.mfc-comment__pending {
  font-size: var(--mfc-text-sm);
  color: var(--mfc-text-secondary);
  font-style: italic;
  margin: 0 0 var(--mfc-space-3);
}


/* ── Comment body ────────────────────────────────────────────────────────────── */

.mfc-comment__body {
  font-size: var(--mfc-text-base);
  color: var(--mfc-text);
  line-height: 1.7;
}

.mfc-comment__body p {
  margin: 0 0 var(--mfc-space-3);
}

.mfc-comment__body p:last-child {
  margin-bottom: 0;
}

.mfc-comment__body a {
  color: var(--mfc-forest);
  text-decoration: underline;
}

.mfc-comment__body a:hover {
  color: var(--mfc-text);
}


/* ── Comment footer — edit + reply links ─────────────────────────────────────── */

.mfc-comment__footer {
  display: flex;
  align-items: center;
  gap: var(--mfc-space-4);
  margin-top: var(--mfc-space-4);
  padding-top: var(--mfc-space-3);
  border-top: 1px solid var(--mfc-border);
}

.mfc-comment__edit a,
.mfc-comment__reply a {
  font-size: var(--mfc-text-sm);
  color: var(--mfc-forest);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--mfc-transition);
  /* Ensure tap target is accessible */
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  padding: 0 var(--mfc-space-1);
}

.mfc-comment__edit a:hover,
.mfc-comment__reply a:hover {
  color: var(--mfc-text);
  text-decoration: underline;
}


/* ── Pagination ──────────────────────────────────────────────────────────────── */

.mfc-comments__pagination {
  display: flex;
  justify-content: center;
  gap: var(--mfc-space-3);
  margin: var(--mfc-space-8) 0;
  flex-wrap: wrap;
}

.mfc-comments__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--mfc-space-2) var(--mfc-space-3);
  border-radius: var(--mfc-radius-sm);
  border: 1px solid var(--mfc-border);
  font-size: var(--mfc-text-sm);
  font-weight: 500;
  color: var(--mfc-text);
  text-decoration: none;
  transition: background var(--mfc-transition), border-color var(--mfc-transition);
  background: var(--mfc-bg);
}

.mfc-comments__pagination .page-numbers:hover {
  background: var(--mfc-bg-secondary);
  border-color: var(--mfc-border-strong);
}

.mfc-comments__pagination .page-numbers.current {
  background: var(--mfc-electric);
  border-color: var(--mfc-electric);
  color: var(--mfc-deep);
  font-weight: 700;
}

.mfc-comments__pagination a.prev,
.mfc-comments__pagination a.next {
  padding: var(--mfc-space-2) var(--mfc-space-4);
}


/* ── Closed notice ───────────────────────────────────────────────────────────── */

.mfc-comments__closed {
  font-size: var(--mfc-text-sm);
  color: var(--mfc-text-secondary);
  font-style: italic;
  margin: var(--mfc-space-6) 0 0;
  padding: var(--mfc-space-4);
  background: var(--mfc-bg-secondary);
  border: 1px solid var(--mfc-border);
  border-radius: var(--mfc-radius-md);
}


/* ── Comment form ────────────────────────────────────────────────────────────── */

.mfc-comments__form-title {
  font-size: var(--mfc-text-xl);
  font-weight: 700;
  color: var(--mfc-text);
  margin: var(--mfc-space-10) 0 var(--mfc-space-6);
}

/* small cancel-reply element that WordPress wraps in <small> */
.mfc-comments__form-title small {
  font-size: var(--mfc-text-sm);
  font-weight: 400;
  margin-left: var(--mfc-space-3);
}

.mfc-comments__form-title small a {
  color: var(--mfc-forest);
  text-decoration: underline;
}

.mfc-comments__form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Field wrapper <p> reset */
.mfc-field {
  margin: 0 0 var(--mfc-space-5);
}

.mfc-field label {
  display: block;
  font-size: var(--mfc-text-sm);
  font-weight: 700;
  color: var(--mfc-text);
  margin-bottom: var(--mfc-space-2);
}

.mfc-field .required {
  color: var(--mfc-pop);
  margin-left: 2px;
}

.mfc-field input[type="text"],
.mfc-field input[type="email"],
.mfc-field textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
  display: block;
  width: 100%;
  padding: var(--mfc-space-3) var(--mfc-space-4);
  font-family: var(--mfc-font);
  font-size: var(--mfc-text-base);
  color: var(--mfc-text);
  background: var(--mfc-bg-tertiary);
  border: 1px solid var(--mfc-border);
  border-radius: var(--mfc-radius-sm);
  line-height: 1.5;
  transition: border-color var(--mfc-transition), box-shadow var(--mfc-transition);
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  /* Minimum tap target */
  min-height: 44px;
}

.mfc-field input[type="text"]::placeholder,
.mfc-field input[type="email"]::placeholder,
.mfc-field textarea::placeholder,
.comment-form input[type="text"]::placeholder,
.comment-form input[type="email"]::placeholder,
.comment-form textarea::placeholder {
  color: var(--mfc-text-muted);
}

.mfc-field input[type="text"]:focus,
.mfc-field input[type="email"]:focus,
.mfc-field textarea:focus,
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--mfc-electric);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mfc-electric) 25%, transparent);
}

.comment-form textarea {
  resize: vertical;
  min-height: 140px;
}

/* Cookie consent checkbox (WP may inject) */
.comment-form-cookies-consent label {
  display: flex;
  align-items: flex-start;
  gap: var(--mfc-space-2);
  font-size: var(--mfc-text-sm);
  font-weight: 400;
  cursor: pointer;
}

.comment-form-cookies-consent input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: var(--mfc-electric);
}


/* ── Submit button ───────────────────────────────────────────────────────────── */

.mfc-comments__submit,
.comment-form .mfc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--mfc-space-3) var(--mfc-space-8);
  background: var(--mfc-electric);
  color: var(--mfc-deep);
  font-family: var(--mfc-font);
  font-size: var(--mfc-text-base);
  font-weight: 700;
  line-height: 1;
  border: none;
  border-radius: var(--mfc-radius-md);  /* 6px spec mapped to closest token (8px) */
  cursor: pointer;
  transition: background var(--mfc-transition), transform var(--mfc-transition);
  /* Minimum tap target */
  min-height: 44px;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
}

.mfc-comments__submit:hover,
.comment-form .mfc-btn:hover {
  background: var(--mfc-electric-dark);
}

.mfc-comments__submit:focus-visible,
.comment-form .mfc-btn:focus-visible {
  outline: 3px solid var(--mfc-electric);
  outline-offset: 2px;
}

.mfc-comments__submit:active,
.comment-form .mfc-btn:active {
  transform: translateY(1px);
}

/* form-submit wrapper */
.comment-form .form-submit {
  margin: var(--mfc-space-2) 0 0;
}


/* ── Logged-in "commenting as" note ─────────────────────────────────────────── */

.comment-form .logged-in-as {
  font-size: var(--mfc-text-sm);
  color: var(--mfc-text-secondary);
  margin-bottom: var(--mfc-space-4);
}

.comment-form .logged-in-as a {
  color: var(--mfc-forest);
  text-decoration: underline;
}


/* ── Mobile — 375px breakpoint ───────────────────────────────────────────────── */

@media (max-width: 480px) {
  .mfc-comment-list .children {
    margin-left: var(--mfc-space-4);
    padding-left: var(--mfc-space-3);
  }

  .mfc-comment__inner {
    padding: var(--mfc-space-4);
  }

  .mfc-comment__header {
    gap: var(--mfc-space-2);
  }

  .mfc-comment__footer {
    flex-wrap: wrap;
    gap: var(--mfc-space-2);
  }

  .mfc-comments__pagination {
    gap: var(--mfc-space-2);
  }

  .mfc-comments__submit,
  .comment-form .mfc-btn {
    width: 100%;
    justify-content: center;
  }
}