/* Halo Comment Widget's public custom properties cross its Shadow DOM.
   Keep the integration scoped so plugin pages and other widgets retain their styles. */
.comments {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
  color: var(--text-primary);
  color-scheme: inherit;
}

.comments-heading {
  margin: 0 0 1.5rem;
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  line-height: 1.75;
  letter-spacing: var(--spacing-m);
}

.comments,
.comments comment-widget {
  --halo-cw-base-font-family: var(--sans);
  --halo-cw-base-font-size: var(--font-size-m);
  --halo-cw-base-rounded: 0.375rem;
  --halo-cw-avatar-size: 1.75rem;
  --halo-cw-avatar-rounded: 50%;

  /* The submit button uses white text; keep its neutral fill legible in both modes. */
  --halo-cw-primary-1-color: #525252;
  --halo-cw-primary-2-color: #404040;
  --halo-cw-primary-3-color: var(--selection);
  --halo-cw-text-1-color: var(--text-primary);
  --halo-cw-text-2-color: color-mix(in srgb, var(--text-primary) 75%, var(--bg));
  --halo-cw-text-3-color: var(--text-secondary);
  --halo-cw-muted-1-color: var(--border);
  --halo-cw-muted-2-color: var(--selection);
  --halo-cw-muted-3-color: var(--code-bg);
  --halo-cw-muted-4-color: var(--text-tertiary);

  --halo-cw-emoji-picker-rgb-color: 38, 38, 38;
  --halo-cw-emoji-picker-rgb-accent: 82, 82, 82;
  --halo-cw-emoji-picker-rgb-background: 255, 255, 255;
  --halo-cw-emoji-picker-rgb-input: 248, 248, 248;
  --halo-cw-emoji-picker-color-border: var(--border);
  --halo-cw-emoji-picker-color-border-over: var(--text-tertiary);
}

.comments comment-widget {
  display: block;
  min-width: 0;
  font-family: var(--sans);
  font-size: var(--font-size-m);
  line-height: 1.75;
  letter-spacing: var(--spacing-m);
}

html.dark .comments,
html.dark .comments comment-widget {
  --halo-cw-primary-1-color: #737373;
  --halo-cw-primary-2-color: #626262;
  --halo-cw-emoji-picker-rgb-color: 230, 230, 230;
  --halo-cw-emoji-picker-rgb-accent: 163, 163, 163;
  --halo-cw-emoji-picker-rgb-background: 28, 28, 28;
  --halo-cw-emoji-picker-rgb-input: 36, 36, 36;
}

@media (max-width: 600px) {
  .comments {
    margin-top: 2.5rem;
    padding-top: 2rem;
  }
}