/*
 * Comment Redirect Plus -- comment box visual skin.
 *
 * Deliberately targets WordPress core's own hard-coded IDs/classes
 * (#respond, #commentform, #submit, ol.comment-list, [id^="comment-"])
 * rather than theme-specific classes, so this applies consistently across
 * themes without needing per-theme tweaks. Uses :where() in a few spots to
 * keep specificity low so it doesn't need heavy !important overrides.
 */

:root {
	--crp-accent: #c0392b;
	--crp-ink: #1f2328;
	--crp-muted: #6b7280;
	--crp-border: #e5e7eb;
	--crp-bg: #ffffff;
	--crp-bg-soft: #f9fafb;
}

/* ---------- Comment form ---------- */

#respond {
	background: var(--crp-bg-soft);
	border: 1px solid var(--crp-border);
	border-radius: 12px;
	padding: 24px;
	margin: 28px 0;
}

#respond #reply-title {
	font-size: 1.25em;
	margin-top: 0;
	margin-bottom: 6px;
	color: var(--crp-ink);
}

#respond .comment-notes,
#respond .comment-form-comment label,
#respond .comment-form-author label,
#respond .comment-form-email label,
#respond .comment-form-url label {
	color: var(--crp-muted);
	font-size: 0.92em;
}

#commentform p {
	margin: 0 0 14px;
}

#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--crp-border);
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 15px;
	background: var(--crp-bg);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#commentform input[type="text"]:focus,
#commentform input[type="email"]:focus,
#commentform input[type="url"]:focus,
#commentform textarea:focus {
	outline: none;
	border-color: var(--crp-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--crp-accent) 20%, transparent);
}

#commentform textarea {
	min-height: 120px;
	resize: vertical;
}

#commentform .form-submit {
	margin-bottom: 0;
}

#commentform input#submit,
#commentform .form-submit input[type="submit"] {
	background: var(--crp-accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 11px 22px;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.05s ease;
}

#commentform input#submit:hover,
#commentform .form-submit input[type="submit"]:hover {
	filter: brightness(0.9);
}

#commentform input#submit:active,
#commentform .form-submit input[type="submit"]:active {
	transform: translateY(1px);
}

/* ---------- Comment list ---------- */

.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-list .children {
	list-style: none;
	margin: 0 0 0 28px;
	padding: 0;
}

[id^="comment-"] {
	background: var(--crp-bg);
	border: 1px solid var(--crp-border);
	border-radius: 10px;
	padding: 16px 18px;
	margin-bottom: 14px;
}

[id^="comment-"] img.avatar {
	border-radius: 50%;
	float: left;
	margin-right: 12px;
}

[id^="comment-"] .comment-author .fn,
[id^="comment-"] .comment-author cite {
	font-weight: 700;
	font-style: normal;
	color: var(--crp-ink);
}

[id^="comment-"] .comment-metadata,
[id^="comment-"] .comment-meta {
	font-size: 0.85em;
	color: var(--crp-muted);
	margin-bottom: 8px;
}

[id^="comment-"] .comment-metadata a,
[id^="comment-"] .comment-meta a {
	color: var(--crp-muted);
	text-decoration: none;
}

[id^="comment-"] .comment-content p {
	line-height: 1.6;
	color: var(--crp-ink);
}

[id^="comment-"] .comment-reply-link,
[id^="comment-"] .reply a {
	display: inline-block;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--crp-accent);
	border: 1px solid var(--crp-accent);
	border-radius: 999px;
	padding: 3px 12px;
	text-decoration: none;
}

[id^="comment-"] .comment-reply-link:hover,
[id^="comment-"] .reply a:hover {
	background: var(--crp-accent);
	color: #fff;
}

/* ---------- Custom engine: container, title, messages ---------- */

.crp-comments-area {
	margin-top: 32px;
}

.crp-comments-title {
	font-size: 1.4em;
	margin-bottom: 16px;
	color: var(--crp-ink);
}

.crp-comments-closed {
	color: var(--crp-muted);
	font-style: italic;
}

.crp-form-message {
	font-size: 0.92em;
	margin: 10px 0;
	min-height: 1.2em;
}

.crp-form-message-success {
	color: #1a7f37;
}

.crp-form-message-error {
	color: #b3261e;
}

.crp-field-error {
	border-color: #b3261e !important;
}

.comment-navigation {
	display: flex;
	justify-content: space-between;
	margin: 16px 0;
	font-size: 0.9em;
}

/* ---------- Most Discussed Posts widget ---------- */

.crp-most-discussed {
	background: var(--crp-bg-soft);
	border: 1px solid var(--crp-border);
	border-radius: 10px;
	padding: 16px 18px;
	margin: 20px 0;
}

.crp-most-discussed-title {
	margin: 0 0 10px;
	font-size: 1em;
	color: var(--crp-ink);
}

.crp-most-discussed-list {
	list-style: decimal;
	margin: 0 0 0 20px;
	padding: 0;
}

.crp-most-discussed-list li {
	margin-bottom: 6px;
	font-size: 0.92em;
}

.crp-most-discussed-list a {
	color: var(--crp-ink);
	text-decoration: none;
	font-weight: 600;
}

.crp-most-discussed-list a:hover {
	color: var(--crp-accent);
	text-decoration: underline;
}

.crp-most-discussed-count {
	color: var(--crp-muted);
	font-size: 0.9em;
}

/* ---------- "Join the conversation" CTA (injected by crp-comments-skin.js) ---------- */

.crp-comments-cta {
	display: inline-block;
	background: var(--crp-accent);
	color: #fff !important;
	font-weight: 600;
	text-decoration: none !important;
	padding: 10px 20px;
	border-radius: 999px;
	margin: 8px 0 20px;
}

.crp-comments-cta:hover {
	filter: brightness(0.9);
}