/* Shared public comment and moderation styles. */
.comments-section,
.comments-admin {
  max-width: 720px;
  margin: 64px auto 0;
  padding-top: 56px;
  border-top: 1px solid #000000;
  color: #000000;
  background: #ffffff;
  text-align: left;
}

.comments-section > h2,
.comments-admin > h1 {
  margin: 0 0 40px;
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-align: center;
}

.comments-section h3,
.comments-admin h2,
.comments-admin h3 {
  font-weight: 400;
  line-height: 1.2;
}

.comments-section h3,
.comments-admin h2 {
  margin: 0 0 16px;
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.025em;
}

.comments-list,
.admin-comments-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.comment,
.admin-comment {
  padding: 28px 0;
  border-top: 1px solid #d9d9d9;
}

.comment:first-child,
.admin-comment:first-child {
  border-top: 0;
}

.comment-header,
.admin-comment-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.comment-name,
.admin-comment h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
}

.comment time,
.admin-comment time,
.admin-comment-meta {
  color: #4d4d4d;
  font-size: 14px;
  line-height: 1.45;
}

.comment-body,
.admin-comment-body {
  margin: 16px 0 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-size: 18px;
  line-height: 1.65;
}

.comments-list-status,
.comment-form-status,
.admin-status,
.admin-auth-message,
.comments-empty,
.admin-empty,
.comment-form-note,
.comments-noscript {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.55;
}

.comments-list-status[data-state="error"],
.comment-form-status[data-state="error"],
.admin-status[data-state="error"],
.admin-auth-message[data-state="error"] {
  font-weight: 700;
}

.comments-empty,
.admin-empty {
  padding: 24px 0;
  border-top: 1px solid #d9d9d9;
}

.comments-load-more,
.admin-load-more {
  margin: 8px 0 0;
}

.comment-form-section {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid #d9d9d9;
}

.comment-form {
  margin-top: 28px;
}

.comment-field {
  display: block;
  margin: 0 0 24px;
}

.comment-field > span {
  display: block;
  margin-bottom: 9px;
  font-size: 17px;
  line-height: 1.35;
}

.comment-field input,
.comment-field textarea,
.admin-filter-select {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #000000;
  border-radius: 0;
  color: #000000;
  background: #ffffff;
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
}

.comment-field textarea {
  display: block;
  min-height: 180px;
  resize: vertical;
}

.comment-field input:focus,
.comment-field textarea:focus,
.admin-filter-select:focus {
  outline: 2px solid #000000;
  outline-offset: 2px;
}

.comment-form-actions,
.admin-comment-actions,
.admin-auth-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.comment-button,
.comments-load-more,
.admin-load-more,
.admin-action,
.admin-logout {
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid #000000;
  border-radius: 0;
  color: #ffffff;
  background: #000000;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
}

.comments-load-more,
.admin-load-more,
.admin-action--reject,
.admin-logout {
  color: #000000;
  background: #ffffff;
}

.comment-button:hover,
.admin-action:hover,
.admin-logout:hover,
.comments-load-more:hover,
.admin-load-more:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.comment-button:focus-visible,
.comments-load-more:focus-visible,
.admin-load-more:focus-visible,
.admin-action:focus-visible,
.admin-logout:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 3px;
}

.comment-button:disabled,
.comments-load-more:disabled,
.admin-load-more:disabled,
.admin-action:disabled,
.admin-logout:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  text-decoration: none;
}

.comments-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  padding: 0;
  white-space: nowrap;
}

.admin-auth {
  margin-bottom: 32px;
  padding: 24px;
  border: 1px solid #d9d9d9;
}

.admin-auth-message {
  margin-bottom: 16px;
}

.admin-login-link,
.admin-blog-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #000000;
  text-underline-offset: 4px;
}

.admin-controls {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 28px;
}

.admin-filter-label {
  display: block;
  max-width: 300px;
  flex: 1 1 220px;
  font-size: 17px;
  line-height: 1.35;
}

.admin-filter-select {
  display: block;
  margin-top: 9px;
}

.admin-comment-meta {
  margin: 10px 0 0;
  overflow-wrap: anywhere;
}

.admin-comment-actions {
  margin-top: 20px;
}

.comment-field > span,
.comment-field input,
.comment-field textarea,
.comment-button,
.comments-load-more,
.comments-list-status,
.comment-form-status,
.comment-form-note,
.comments-empty,
.comments-noscript,
.comment time,
.admin-filter-label,
.admin-filter-select,
.admin-load-more,
.admin-action,
.admin-logout,
.admin-status,
.admin-auth-message,
.admin-empty,
.admin-comment-meta,
.admin-login-link,
.admin-blog-back {
  font-family: Arial, Helvetica, sans-serif;
}

@media (max-width: 600px) {
  .comments-section,
  .comments-admin {
    margin-top: 48px;
    padding-top: 40px;
  }

  .comment-form-section {
    margin-top: 40px;
    padding-top: 40px;
  }

  .comment-header,
  .admin-comment-heading,
  .admin-controls {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .admin-filter-label {
    width: 100%;
    max-width: none;
  }

  .comment-button,
  .comments-load-more,
  .admin-load-more,
  .admin-action,
  .admin-logout {
    min-height: 48px;
  }
}