/**
 * Corevia — comments.
 *
 * Enqueued only when the current document actually renders a comment list or a
 * comment form. On a brochure site built entirely in a page builder this file
 * is never requested.
 *
 * @package Corevia
 * @since   1.0.0
 */

.corevia-comments {
	margin-block-start: var(--theme-space-xl);
	padding-block-start: var(--theme-space-lg);
	border-block-start: var(--theme-border-width) solid var(--theme-border);
}

.corevia-comments__title {
	margin-block-end: var(--theme-space-md);
	font-size: var(--theme-h4);
}

.corevia-comments__list {
	margin: 0 0 var(--theme-space-lg);
	padding: 0;
	list-style: none;
}

.corevia-comments__list .children {
	margin: 0;
	padding-inline-start: var(--theme-space-md);
	list-style: none;
	border-inline-start: var(--theme-border-width) solid var(--theme-border);
}

.corevia-comment {
	padding-block: var(--theme-space-md);
	border-block-end: var(--theme-border-width) solid var(--theme-border);
}

.corevia-comment__header {
	display: flex;
	align-items: center;
	gap: var(--theme-space-sm);
	margin-block-end: var(--theme-space-sm);
}

.corevia-comment__avatar img {
	border-radius: var(--theme-radius-full);
}

.corevia-comment__author {
	color: var(--theme-heading);
	font-weight: 600;
}

.corevia-comment__meta {
	color: var(--theme-muted);
	font-size: var(--theme-text-sm);
}

.corevia-comment__meta a {
	color: inherit;
	text-decoration: none;
}

.corevia-comment__meta a:hover {
	color: var(--theme-primary);
	text-decoration: underline;
}

.corevia-comment__body > :last-child {
	margin-block-end: 0;
}

.corevia-comment__actions {
	margin-block-start: var(--theme-space-sm);
	font-size: var(--theme-text-sm);
}

.corevia-comment--pending {
	color: var(--theme-warning);
	font-size: var(--theme-text-sm);
	font-style: italic;
}

/* -------------------------------------------------------------------- Form */

.comment-form {
	display: grid;
	gap: var(--theme-space-sm);
}

.comment-form p {
	margin: 0;
}

.comment-form .comment-notes,
.comment-form .logged-in-as {
	color: var(--theme-muted);
	font-size: var(--theme-text-sm);
}

.comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
}

.comment-form .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
}

.comment-form .form-submit {
	margin-block-start: var(--theme-space-xs);
}

@media (min-width: 40em) {
	.comment-form__fields {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--theme-space-sm);
	}
}