/* PulseWatch custom theme for Waline comments.
   Waline's own variables are mapped onto the site's theme variables
   (--bg, --s1, --s2, --bd, --tx, --mu, --ac, --gr), so the comment
   section follows the site's light/dark toggle automatically.
   Scoped under #waline so these win over Waline's built-in palette. */

#waline {
  --waline-font-size: 15px;

  /* keep button/overlay text white in both themes */
  --waline-white: #fff;

  --waline-light-grey: var(--mu);
  --waline-dark-grey: var(--tx);

  /* brand blues */
  --waline-theme-color: var(--ac);
  --waline-active-color: #60a5fa;

  /* surfaces + text follow the site theme */
  --waline-color: var(--tx);
  --waline-bg-color: var(--s2);
  --waline-bg-color-light: var(--s1);
  --waline-bg-color-hover: var(--bd);
  --waline-border-color: var(--bd);
  --waline-disable-bg-color: var(--s1);
  --waline-disable-color: var(--mu);

  /* code blocks stay dark in both themes */
  --waline-code-bg-color: #0a0e27;

  --waline-bq-color: var(--s1);

  --waline-avatar-size: 2.75rem;

  /* author/admin badge in PulseWatch green */
  --waline-badge-color: var(--gr);

  --waline-info-bg-color: var(--s1);
  --waline-info-color: var(--mu);

  /* flat 1px borders like the rest of the site, no shadows */
  --waline-border: 1px solid var(--bd);
  --waline-avatar-radius: 50%;
  --waline-box-shadow: none;

  font-family: "DM Sans", "Segoe UI", Helvetica, Arial, sans-serif;
}

/* light theme: slightly darker greys for readable secondary text */
html[data-theme="light"] #waline {
  --waline-light-grey: #6b7280;
  --waline-dark-grey: #374151;
}

/* comment section wrapper */
.comments-wrap {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--bd);
}

.comments-wrap > h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  color: var(--tx);
}

.comments-wrap > .comments-sub {
  color: var(--mu);
  font-size: 14px;
  margin-bottom: 24px;
}

/* mono touches inside the comment box (counts, timestamps) */
#waline .wl-count,
#waline .wl-time,
#waline .wl-meta {
  font-family: "Space Mono", monospace;
}

@media (max-width: 768px) {
  .comments-wrap > h2 {
    font-size: 22px;
  }
}