/* Visoop — comments area */

.comments-area {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--visoop-color-border);
	/* Defense against deep nested threads + long unbroken strings
	   that would otherwise push the column wider than its parent. */
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-wrap: break-word;
}
.comments-title { margin-bottom: 24px; }

.comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
	max-width: 100%;
}
.comment-list .children {
	list-style: none;
	padding-left: clamp(12px, 2vw, 32px);   /* shrink the indent on narrow viewports so deep threads don't push wider */
	max-width: 100%;
}
.comment-body {
	padding: 20px;
	background: #fff;
	border: 1px solid var(--visoop-color-border);
	border-radius: var(--visoop-radius);
	margin-bottom: 16px;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-wrap: break-word;
}
.comment-author .avatar {
	border-radius: 999px;
	float: left;
	margin-right: 14px;
}
.comment-meta { font-size: .85rem; color: var(--visoop-color-muted); }
.comment-content { margin-top: 12px; clear: both; }

.comment-respond { margin-top: 24px; }
.comment-form label { display: block; font-weight: 600; margin-bottom: 6px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--visoop-color-border);
	border-radius: var(--visoop-radius);
	background: #fff;
	font: inherit;
}
.comment-form textarea { min-height: 140px; }
.comment-form .form-submit input {
	appearance: none;
	border: 0;
	cursor: pointer;
	padding: 12px 22px;
	background: var(--ss-lime);
	color: var(--ss-ink);
	border-radius: var(--visoop-radius);
	font-weight: 600;
}