/**
 * Hayder Voice — Comments Styles
 */

@layer components {

	.comments-area {
		padding: clamp(3rem, 6vw, 5rem) 0;
		max-width: var(--container-sm);
		margin-inline: auto;
		padding-inline: var(--container-pad);
	}

	.comments-title {
		font-size: var(--text-2xl);
		font-weight: 300;
		color: var(--c-heading);
		margin-bottom: 2.5rem;
		padding-bottom: 1rem;
		border-bottom: 1px solid var(--c-border);
	}

	/* Comment list */
	.comment-list {
		list-style: none;
		padding: 0;
		margin: 0 0 3rem;
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.comment-item {
		padding: 1.5rem 0;
		border-bottom: 1px solid var(--c-border);
	}

	.comment-item .children {
		list-style: none;
		padding-left: 2rem;
		margin-top: 1.5rem;
		border-left: 2px solid var(--c-border);
	}

	.comment-body {}

	.comment-header {
		display: flex;
		align-items: center;
		gap: 1rem;
		margin-bottom: 0.75rem;
	}

	.comment-avatar {
		width: 40px;
		height: 40px;
		border-radius: var(--radius-full);
		border: 1px solid var(--c-border);
		flex-shrink: 0;
	}

	.comment-meta {
		display: flex;
		flex-direction: column;
		gap: 0.2rem;
	}

	.comment-author-name { font-size: 0; }
	.comment-author-name a {
		font-family: var(--font-sans);
		font-size: var(--text-sm);
		font-weight: 600;
		color: var(--c-heading);
		text-decoration: none;
	}

	.comment-date {
		font-family: var(--font-sans);
		font-size: var(--text-xs);
		color: var(--c-dust);
		text-decoration: none;
	}

	.comment-content {
		font-family: var(--font-sans);
		font-size: var(--text-sm);
		color: var(--c-muted);
		line-height: var(--lh-relaxed);
	}

	.comment-content p { margin-bottom: 0.75rem; }
	.comment-content p:last-child { margin-bottom: 0; }

	.comment-footer {
		margin-top: 0.75rem;
	}

	.comment-reply-link {
		font-family: var(--font-sans);
		font-size: var(--text-xs);
		color: var(--c-amber);
		text-decoration: none;
		transition: color var(--duration-fast) var(--ease-smooth);
	}

	.comment-reply-link:hover { color: var(--c-amber-bright); }

	.comment-awaiting {
		font-family: var(--font-sans);
		font-size: var(--text-xs);
		color: var(--c-dust);
		font-style: italic;
		margin-bottom: 0.75rem;
	}

	/* Comment form */
	.comment-form {
		margin-top: 3rem;
		padding-top: 2rem;
		border-top: 1px solid var(--c-border);
	}

	.comment-form .comment-notes,
	.comment-form label { display: none; } /* Labels hidden, using placeholders */

	.comment-navigation {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		padding: 1.5rem 0;
		margin-bottom: 2rem;
		border-bottom: 1px solid var(--c-border);
	}

	.comment-navigation a {
		font-family: var(--font-sans);
		font-size: var(--text-sm);
		color: var(--c-muted);
		text-decoration: none;
	}

	.comment-navigation a:hover { color: var(--c-amber); }

	.no-comments {
		font-family: var(--font-sans);
		font-size: var(--text-sm);
		color: var(--c-muted);
		padding: 2rem 0;
		font-style: italic;
	}

} /* @layer components */