/*
Comment list + comment form — shared by product reviews (which WooCommerce
builds on top of WordPress's native comment system) and blog post
comments (single.php via comments.php).
*/

.commentlist,
.commentlist .children {
	list-style: none;
}

.commentlist {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin-block-end: var(--space-6);
	padding: 0 !important;
	list-style: none !important;
}

.commentlist .comment_container {
	display: flex;
	gap: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
}

.commentlist img.avatar {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full);
	flex-shrink: 0;
}

/* Replies (WordPress nests them in a <ul class="children"> inside the
   parent <li>) get an indent plus a slightly muted, smaller-avatar
   treatment so they read as subordinate to the comment they're under. */
.commentlist .children {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin-block-start: var(--space-4);
	padding-inline-start: var(--space-6);
}

.commentlist .children .comment_container {
	background: var(--color-surface);
}

.commentlist .children img.avatar {
	width: 36px;
	height: 36px;
}

.commentlist .comment-text {
	flex: 1;
	min-width: 0;
}

.commentlist .star-rating {
	margin-block-end: var(--space-2);
}

.commentlist .meta {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	margin-block-end: var(--space-2);
	font-size: var(--text-xs);
	color: var(--color-muted);
}

.commentlist .meta strong {
	color: var(--color-ink);
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
}

.commentlist .comment-awaiting-moderation {
	font-size: var(--text-xs);
	color: var(--color-muted);
	font-style: italic;
	margin-block-end: var(--space-2);
}

.commentlist .description {
	font-size: var(--text-sm);
	line-height: 1.7;
}

.commentlist .description p {
	max-width: 65ch;
}

.commentlist .description p:last-child {
	margin-block-end: 0;
}

/* Same reasoning as .entry-content a in prose.css: a link inside actual
   comment-body prose needs its own affordance, not just inherited color. */
.commentlist .description a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.woocommerce-noreviews,
.no-comments {
	display: none;
}

/* Comment/review form -------------------------------------------------------
   One card holding: title, rating (reviews only), the review/comment field,
   then (logged-out only) name + email side by side, then submit -- that's
   also the field order WooCommerce/WP already render in, so no reordering
   is needed, only the visual treatment below. */

.comment-respond {
	border-radius: var(--radius-md);
	padding: var(--space-5);
}

.comment-reply-title {
	font-size: var(--text-lg);
	font-weight: var(--font-semibold);
	margin-block-end: var(--space-4);
}

.comment-notes {
	font-size: var(--text-sm);
	color: var(--color-muted);
	margin-block-end: var(--space-4);
}

.comment-form p {
	margin-block-end: var(--space-4);
}

.comment-form p:last-child {
	margin-block-end: 0;
}

.comment-form label {
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	margin-block-end: var(--space-2);
}

#review_form .stars {
	display: flex;
	gap: var(--space-1);
	list-style: none;
	font-size: var(--text-2xl);
}

#review_form .stars a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--color-border);
	transition: color var(--transition-fast);
}

#review_form .stars a.active {
	color: var(--color-primary);
}

.comment-form input:not([type='submit']):not([type='checkbox']),
.comment-form textarea {
	width: 100%;
	min-height: 44px;
	padding-inline: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	font-size: var(--text-base);
	font-family: inherit;
}

.comment-form textarea {
	min-height: 7.5rem;
	padding-block: var(--space-3);
	max-height: 220px;
}

/* Name + email side by side once there's room, since they're two short,
   related fields -- WP renders both as direct <p> children of the same
   <form>, so a two-column grid on the form itself (full-width for every
   other field) reaches them without needing to touch the markup. */
@media (min-width: 640px) {
	.comment-form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--space-4);
	}

	.comment-form > p {
		grid-column: 1 / -1;
	}

	.comment-form-author,
	.comment-form-email {
		grid-column: span 1;
		margin-block-end: var(--space-4);
	}
}

.comment-form .form-submit input[type='submit'] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding-inline: var(--space-5);
	border-radius: var(--radius-md);
	background: var(--color-primary);
	color: var(--color-bg);
	font-weight: var(--font-medium);
	width: 100%;
}

@media (min-width: 480px) {
	.comment-form .form-submit input[type='submit'] {
		width: auto;
	}
}

.comment-form .form-submit input[type='submit']:hover {
	background: var(--color-primary-hover);
}