/* Comments (spec 4: Jetpack comments and the 3,652 existing ones must survive).
   Token-only, so dark mode needs nothing here. Works for core's native form and,
   in production, for Jetpack's iframe replacement. One calm column; threads are
   shown by indentation and a single quiet bar, not a rule between every comment. */
.site-comments {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--rule);
	overflow-wrap: anywhere;
}

.site-comments .wp-block-comments-title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--structure);
}

.site-comments .wp-block-comment-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Reply nesting only. A bare "ol" would also catch a list the reader wrote in a comment body. */
.site-comments .wp-block-comment-template li[id^="comment-"] > ol {
	list-style: none;
	margin-bottom: 0;
	margin-top: var(--wp--preset--spacing--30);
	padding-inline-start: var(--wp--preset--spacing--30);
	border-inline-start: 2px solid var(--wp--preset--color--rule);
}

.site-comments .wp-block-comment-template li[id^="comment-"] + li[id^="comment-"],
.site-comments .wp-block-comment-template > li {
	margin-top: var(--wp--preset--spacing--40);
}

.site-comments .comment-meta {
	align-items: baseline;
	gap: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--20);
}

.site-comments .wp-block-comment-author-name {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.site-comments .wp-block-comment-date a,
.site-comments .wp-block-comment-edit-link a,
.site-comments .wp-block-comment-reply-link a {
	color: var(--wp--preset--color--ink-soft);
	text-decoration-color: var(--wp--preset--color--rule);
}

.site-comments .wp-block-comment-date a:hover,
.site-comments .wp-block-comment-edit-link a:hover,
.site-comments .wp-block-comment-reply-link a:hover,
.site-comments .wp-block-comment-reply-link a:focus-visible {
	color: var(--wp--preset--color--emphasis-ink);
	text-decoration-color: currentColor;
}

/* Reader-written text of unknown vintage: keep it inside the column. */
.site-comments .wp-block-comment-content {
	color: var(--wp--preset--color--ink);
}
.site-comments .wp-block-comment-content > * {
	margin-block: 0 var(--wp--preset--spacing--20);
}
.site-comments .wp-block-comment-content img,
.site-comments .wp-block-comment-content iframe,
.site-comments .wp-block-comment-content video {
	max-width: 100%;
	height: auto;
}
.site-comments .wp-block-comment-content blockquote {
	margin-inline: 0;
	padding-inline-start: var(--wp--preset--spacing--30);
	border-inline-start: 3px solid var(--wp--preset--color--structure);
	color: var(--wp--preset--color--ink-soft);
}
.site-comments .wp-block-comment-content pre {
	overflow-x: auto;
	padding: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

.site-comments .wp-block-comments-pagination {
	margin-top: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
}

/* The native respond form (absent when Jetpack replaces it with its iframe). */
.site-comments .comment-respond {
	margin-top: var(--wp--preset--spacing--50);
}
.site-comments .comment-reply-title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--structure);
}
.site-comments .comment-notes,
.site-comments .comment-form label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}
.site-comments .comment-form textarea,
.site-comments .comment-form input:not([type="submit"]):not([type="checkbox"]) {
	width: 100%;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	font: inherit;
}
.site-comments .comment-form input[type="submit"] {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--structure);
	color: var(--wp--preset--color--ground);
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

/* Jetpack's iframe fills the column in both modes.
   VERIFIED against the live site windypundit.com on 2026-10-22 (untestable in dev,
   where Jetpack is not installed). Production markup:
     <div id="respond" class="comment-respond"> ... <iframe name="jetpack_remote_comment"
       class="jetpack_remote_comment" id="jetpack_remote_comment"
       style="width:100%; height: 430px; border:0;" sandbox="..."></iframe>
   class, id and name are all "jetpack_remote_comment", and border:0 is an INLINE style,
   so no stylesheet rule on the iframe can set a border: dark.css frames the
   .comment-respond container instead. After cutover, check this by eye in both modes. */
.site-comments iframe.jetpack_remote_comment {
	width: 100%;
	max-width: 100%;
}