/* ─────────────────────────────────────────────────────────
 * BD WordPress theme — comment widget styles
 *
 * The comment markup and CSS below are ported directly from the
 * DB horror database (assets/js/wp-comments.js + these rules,
 * originally in db/assets/css/main.css). Rather than load the
 * DB site's full main.css here — which risks class-name
 * collisions with this theme's own styles across two separately
 * built codebases — this file scopes just the comment-specific
 * rules and bridges the DB site's CSS variable names to this
 * theme's own custom properties (defined in style.css).
 *
 * The variable bridge is scoped to #comments-block so it can't
 * leak into or override anything else on the page.
 * ───────────────────────────────────────────────────────── */

#comments-block {
  --card-bg:      var(--bd-charcoal-2);
  --border:       color-mix(in srgb, var(--bd-gray) 25%, transparent);
  --border2:      color-mix(in srgb, var(--bd-gray) 40%, transparent);
  --bone:         var(--bd-off-white);
  --dim:          var(--bd-gray);
  --blood:        var(--bd-red);
  --blood-bright: var(--bd-red);
  /* No gold token in this theme — DB's --gold is used only for
     comment scores/leaderboards. Hardcoded to match the DB site's
     value exactly, so a score reads the same color on both sites. */
  --gold: #c8a84b;
  /* This theme never split font-mono from font-body (DB's --font-mono
     was retired the same way — see that file's own comment on it). */
  --font-mono: var(--font-body);
}

/* The native comments.php heading (.bd-comments__title) uses
   --font-display (Anton) — a heavy condensed display face that's
   right for eyebrow labels and big headlines elsewhere in this
   theme, but reads far too chunky for a small section label like
   "Discussion". This widget's heading gets its own class instead
   of inheriting that, so the native heading (used if Disqus is
   ever deactivated) is untouched. */
.bd-new-comments__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bd-off-white);
  margin: 0 0 1rem;
}

/* Logged-in identity row above the comment form — this widget has
   no other visible sign-in state anywhere on a WP page (unlike the
   DB site, which has an account menu in its nav), so this is the
   only place a WP visitor sees who they're commenting as and can
   log out. */
.comment-form__identity {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.comment-form__identity-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0; background: var(--border2);
}
.comment-form__identity-avatar-fallback {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--blood); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; flex-shrink: 0;
}
.comment-form__identity-name {
  font-family: var(--font-mono); font-size: 12px; color: var(--bone);
  flex: 1; min-width: 0;
}
.comment-form__identity-links {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.comment-form__identity-sep { color: var(--dim); font-size: 11px; }
.comment-form__identity-link {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; color: var(--dim);
  text-decoration: underline; padding: 0;
}
.comment-form__identity-link:hover { color: var(--bone); }



.comments-section .section-label { margin-bottom: 16px; }



.comments-signin-prompt {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--dim);
  padding: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 24px;
}


.comments-signin-prompt a { color: var(--blood); text-decoration: none; }


.comments-signin-prompt a:hover { text-decoration: underline; }



.comment-form { margin-bottom: 24px; }


.comment-form__replying {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--dim);
  margin-bottom: 6px;
}


.comment-form__textarea,
.comment__edit-textarea {
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 12px;
  resize: vertical;
  min-height: 72px;
}


.comment-form__textarea:focus,
.comment__edit-textarea:focus {
  outline: none;
  border-color: var(--border2);
}


.comment-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}



.comments-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  border-radius: 5px;
  padding: 7px 16px;
  cursor: pointer;
  border: 1px solid transparent;
}


.comments-btn--primary {
  background: var(--blood);
  color: var(--bone);
}


.comments-btn--primary:hover { background: var(--blood-bright); }


.comments-btn--secondary {
  background: transparent;
  color: var(--muted);
  border-color: var(--border2);
}


.comments-btn--secondary:hover { color: var(--bone); border-color: var(--muted); }



.comments-empty,
.comments-error {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--dim);
  padding: 16px 0;
}



.comments-list { display: flex; flex-direction: column; gap: 32px; }



.comment { }


.comment__main { }



.comment__replying-to {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--dim);
}


.comment__replying-to a {
  color: var(--dim);
  text-decoration: none;
}


.comment__replying-to a:hover {
  color: var(--blood);
  text-decoration: underline;
}



.comment__header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}


.comment__meta { flex: 1; min-width: 0; }


.comment__header-actions {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0; margin-left: auto;
}


.comment__icon-btn {
  background: none; border: none; cursor: pointer;
  color: var(--dim); display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; font-size: 15px; line-height: 1; padding: 0;
  border-radius: 2px; transition: color .15s, background .15s;
}


.comment__icon-btn:hover { color: var(--bone); background: var(--border); }


.comment__icon-btn[data-action="report"]:hover { color: var(--blood-bright); }



/* ── Collapsed comment state ──────────────────────────── */
.comment--collapsed .comment__body,
.comment--collapsed .comment__actions,
.comment--collapsed .comment__hidden-note {
  display: none;
}


.comment__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 700;
  color: var(--bone);
}


.comment__avatar img { width: 100%; height: 100%; object-fit: cover; }


.comment__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}


.comment__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}


.comment__name {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--bone);
  text-decoration: none;
}


.comment__name:hover { color: var(--blood); }


/* Verified-account badge — the red disc behind the white check.
 *
 * wp-comments.js emits the same <span class="verified-badge"> markup the
 * DB site uses (auth.js / home.js / community.php), but the rules that
 * make it a badge live in db/assets/css/main.css, which this theme
 * deliberately doesn't load. Without them the SVG rendered as a bare
 * check with no disc — the inline stroke="#fff" on a transparent
 * background. Ported verbatim from the DB site so the badge reads
 * identically in both places; --blood is bridged to --bd-red above.
 *
 * Scoped to #comments-block, like the variable bridge, because
 * .verified-badge is a generic enough class name to collide with this
 * theme's own styles — everything the widget renders, including the
 * badge inside .comment__replying-to, is inside that container.
 */
#comments-block .verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: var(--blood);
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
  margin-left: 4px;
  position: relative;
  top: -1px;
}

#comments-block .verified-badge svg {
  width: 8px;
  height: 8px;
  stroke: #fff;
  stroke-width: 2.5;
  fill: none;
}

#comments-block .verified-badge[title] { cursor: default; }


.comment__time {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--dim);
}



.comment__hidden-note {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--gold);
  margin-bottom: 6px;
}



.comment__body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--bone);
  white-space: pre-wrap;
  word-break: break-word;
}


.comment__deleted {
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  color: var(--dim);
}



.comment__actions {
  display: flex;
  gap: 14px;
  margin-top: 8px;
}


.comment__action {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  color: var(--dim);
  cursor: pointer;
}


.comment__action:hover { color: var(--bone); }



.comment-thread { }



.comment__replies {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px;
  padding-left: 20px;
  border-left: 2px solid var(--border);
}



.comment--reply .comment__body {
  font-size: 15px;
}


.comment--reply .comment__name {
  font-size: 14px;
}



.comments-btn--text {
  display: inline-block;
  margin-top: 12px;
  padding: 0;
  background: none;
  border: none;
  color: var(--dim);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}


.comments-btn--text:hover { color: var(--blood); }


.comments-btn--text:disabled { color: var(--border2); cursor: default; }



@media (max-width: 600px) {
  .comment__replies {
    padding-left: 12px;
    border-left-width: 1px;
  }
}



.comments-join-cta {
  background: linear-gradient(135deg, rgba(231,15,72,.14), rgba(231,15,72,.04));
  border: 1px solid rgba(231,15,72,.28);
  border-radius: 4px;
  padding: 32px 24px;
  text-align: center;
  margin-bottom: 24px;
}


.comments-join-cta__heading {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.25;
}


.comments-join-cta__heading .accent { color: var(--blood-bright); }


.comments-join-cta__text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--dim);
  max-width: 460px;
  margin: 0 auto 20px;
  line-height: 1.5;
}


.comments-join-cta__login {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--dim);
  margin: 14px 0 0;
}


.comments-join-cta__login a { color: var(--blood-bright); text-decoration: none; }


.comments-join-cta__login a:hover { text-decoration: underline; }



.join-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blood);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 34px;
  border-radius: 2px;
  transition: background .15s;
}


.join-cta-btn:hover { background: var(--blood-bright); }



@media (max-width: 600px) {
  .comments-join-cta { padding: 24px 18px; }
  .comments-join-cta__heading { font-size: 18px; }
}



/* ── Comment vote widget (inline, bottom actions row) ─── */
.comment__votes-inline {
  display: flex; align-items: center; gap: 4px;
}


.comment__votes-inline--readonly { gap: 3px; }
.comment__vote-icon { color: var(--dim); font-size: 11px; line-height: 1; }


.comment__vote-btn {
  background: none; border: none; cursor: pointer;
  color: var(--dim); font-size: 12px; line-height: 1; padding: 3px;
  transition: color .15s;
}


.comment__vote-btn:hover { color: var(--bone); }


.comment__vote-btn.active[data-action="upvote"]   { color: var(--gold); }


.comment__vote-btn.active[data-action="downvote"] { color: var(--blood-bright); }


.comment__vote-btn:disabled { opacity: .5; cursor: default; }


.comment__vote-score {
  font-family: var(--font-mono); font-size: 12px; color: var(--dim); font-weight: 600;
}




/* ── Rich text: bold/italic already inherit body type; spoiler ── */
.comment-spoiler {
  background: var(--border2); color: transparent;
  border-radius: 2px; cursor: pointer; user-select: none;
  transition: background .1s;
}


.comment-spoiler.revealed {
  background: transparent; color: inherit; cursor: text; user-select: text;
}



/* ── Rich text toolbar (comment form + edit mode) ─────── */
.comment-form__toolbar { display: flex; gap: 4px; margin-bottom: 6px; }


.comment-toolbar-btn {
  background: var(--card-bg); border: 1px solid var(--border2); color: var(--dim);
  font-family: var(--font-body); font-size: 12px; width: 26px; height: 26px;
  border-radius: 2px; cursor: pointer; transition: all .15s;
}


.comment-toolbar-btn:hover { color: var(--bone); border-color: var(--blood-bright); }



/* ── Comment count header + sort tabs ─────────────────── */
.comments-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}


.comments-count {
  font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--bone);
}


.comments-sort-tabs { display: flex; gap: 4px; }


.comments-sort-tab {
  background: none; border: none; color: var(--dim);
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  padding: 4px 10px; cursor: pointer; border-radius: 2px; transition: all .15s;
}


.comments-sort-tab:hover { color: var(--bone); }


.comments-sort-tab.active { background: var(--card-bg); color: var(--bone); border: 1px solid var(--border2); }