/**
 * Modern Comments — front-end styles
 *
 * Scoped entirely under .mc-enhanced so nothing leaks into other content.
 * Color/size tokens come from :root custom properties injected from settings
 * (--mc-accent, --mc-radius, --mc-avatar-size, --mc-anim); the surface palette
 * is defined here with a prefers-color-scheme dark override and a
 * [data-mc-theme] hook reserved for the manual toggle in a later step.
 *
 * @package ModernComments
 */

/* Token defaults. The plugin injects a :root block built from saved settings
 * AFTER this stylesheet, which overrides these. Defined non-cyclically so the
 * variables always resolve even if that inline block is somehow absent. */
:root {
	--mc-accent: #2563eb;
	--mc-radius: 12px;
	--mc-avatar-size: 48px;
	--mc-anim: 250ms;
}

.mc-enhanced {
	/* Surface palette (light). Tokens are namespaced to avoid theme clashes. */
	--mc-surface: #ffffff;
	--mc-surface-2: #f8fafc;
	--mc-border: #e5e7eb;
	--mc-text: #1f2937;
	--mc-muted: #6b7280;
	--mc-rail: color-mix( in srgb, var( --mc-accent, #2563eb ) 35%, transparent );

	color: var( --mc-text );
	font-size: 1rem;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * Heading
 * ---------------------------------------------------------------------- */
.mc-enhanced .wp-block-comments-title,
.mc-enhanced .comments-title {
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-bottom: 1.25rem;
}

/* -------------------------------------------------------------------------
 * Comment list + cards
 * ---------------------------------------------------------------------- */
.mc-enhanced .wp-block-comment-template {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.mc-enhanced .wp-block-comment-template li {
	position: relative;
	background: var( --mc-surface );
	border: 1px solid var( --mc-border );
	border-radius: var( --mc-radius );
	padding: 1.1rem 1.25rem;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.04 );
	transition: box-shadow var( --mc-anim ) ease, transform var( --mc-anim ) ease, border-color var( --mc-anim ) ease;
}

.mc-enhanced .wp-block-comment-template li:hover {
	border-color: color-mix( in srgb, var( --mc-accent ) 30%, var( --mc-border ) );
	box-shadow: 0 6px 18px rgba( 15, 23, 42, 0.07 );
	transform: translateY( -1px );
}

/* -------------------------------------------------------------------------
 * Avatar + meta
 * ---------------------------------------------------------------------- */
.mc-enhanced .wp-block-avatar img,
.mc-enhanced .comment-author img.avatar {
	width: var( --mc-avatar-size );
	height: var( --mc-avatar-size );
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var( --mc-surface );
	box-shadow: 0 0 0 1px var( --mc-border );
}

.mc-enhanced .wp-block-comment-author-name,
.mc-enhanced .comment-author .fn {
	font-weight: 600;
	color: var( --mc-text );
	text-decoration: none;
}

.mc-enhanced .wp-block-comment-author-name a {
	color: inherit;
	text-decoration: none;
}

.mc-enhanced .wp-block-comment-date,
.mc-enhanced .comment-meta time,
.mc-enhanced .comment-metadata time {
	font-size: 0.82rem;
	color: var( --mc-muted );
}

.mc-enhanced .wp-block-comment-date a {
	color: inherit;
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Comment body
 * ---------------------------------------------------------------------- */
.mc-enhanced .wp-block-comment-content,
.mc-enhanced .comment-content {
	margin: 0.65rem 0 0.5rem;
	color: var( --mc-text );
}

.mc-enhanced .wp-block-comment-content p:last-child {
	margin-bottom: 0;
}

/* Moderation / awaiting-approval notice. */
.mc-enhanced .comment-awaiting-moderation {
	display: inline-block;
	font-size: 0.8rem;
	color: var( --mc-muted );
	font-style: italic;
}

/* -------------------------------------------------------------------------
 * Action links (reply / edit)
 * ---------------------------------------------------------------------- */
.mc-enhanced .wp-block-comment-reply-link a,
.mc-enhanced .wp-block-comment-edit-link a,
.mc-enhanced .comment-reply-link,
.mc-enhanced .comment-edit-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1;
	padding: 0.4rem 0.75rem;
	border-radius: 999px;
	color: var( --mc-accent );
	background: color-mix( in srgb, var( --mc-accent ) 10%, transparent );
	text-decoration: none;
	transition: background var( --mc-anim ) ease, color var( --mc-anim ) ease;
}

.mc-enhanced .wp-block-comment-reply-link a:hover,
.mc-enhanced .comment-reply-link:hover,
.mc-enhanced .comment-edit-link:hover {
	background: var( --mc-accent );
	color: #fff;
}

/* -------------------------------------------------------------------------
 * Threaded replies — the accent rail encodes depth
 * ---------------------------------------------------------------------- */
.mc-enhanced .wp-block-comment-template ol,
.mc-enhanced .comment .children {
	list-style: none;
	margin: 1rem 0 0;
	padding-left: clamp( 0.75rem, 3vw, 1.5rem );
	border-left: 2px solid var( --mc-rail );
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.mc-enhanced .wp-block-comment-template ol li {
	background: var( --mc-surface-2 );
}

/* -------------------------------------------------------------------------
 * Comment form
 * ---------------------------------------------------------------------- */
.mc-enhanced .wp-block-post-comments-form,
.mc-enhanced .comment-respond {
	margin-top: 1.75rem;
	padding: 1.25rem;
	background: var( --mc-surface-2 );
	border: 1px solid var( --mc-border );
	border-radius: var( --mc-radius );
}

.mc-enhanced .comment-form input[type="text"],
.mc-enhanced .comment-form input[type="email"],
.mc-enhanced .comment-form input[type="url"],
.mc-enhanced .comment-form textarea {
	width: 100%;
	padding: 0.65rem 0.8rem;
	border: 1px solid var( --mc-border );
	border-radius: calc( var( --mc-radius ) * 0.66 );
	background: var( --mc-surface );
	color: var( --mc-text );
	font: inherit;
	transition: border-color var( --mc-anim ) ease, box-shadow var( --mc-anim ) ease;
}

.mc-enhanced .comment-form input:focus,
.mc-enhanced .comment-form textarea:focus {
	outline: none;
	border-color: var( --mc-accent );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --mc-accent ) 25%, transparent );
}

.mc-enhanced .comment-form .submit,
.mc-enhanced .wp-block-button__link {
	background: var( --mc-accent );
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 0.6rem 1.4rem;
	font-weight: 600;
	cursor: pointer;
	transition: filter var( --mc-anim ) ease;
}

.mc-enhanced .comment-form .submit:hover {
	filter: brightness( 1.08 );
}

/* -------------------------------------------------------------------------
 * Pagination
 * ---------------------------------------------------------------------- */
.mc-enhanced .wp-block-comments-pagination {
	margin-top: 1.5rem;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.mc-enhanced .wp-block-comments-pagination a,
.mc-enhanced .wp-block-comments-pagination span {
	padding: 0.4rem 0.8rem;
	border: 1px solid var( --mc-border );
	border-radius: calc( var( --mc-radius ) * 0.66 );
	text-decoration: none;
	color: var( --mc-text );
}

/* -------------------------------------------------------------------------
 * Classic themes (comments.php + wp_list_comments)
 *
 * The card sits on .comment-body (the per-comment <article>) so the nested
 * .children list stays outside the card and the reply rail reads cleanly.
 * Scoped to .mc-classic, added to <body> only on classic-theme singular views.
 * ---------------------------------------------------------------------- */
.mc-classic .commentlist,
.mc-classic .comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mc-classic li.comment {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.mc-classic li.comment:last-child {
	margin-bottom: 0;
}

.mc-classic .comment-body {
	position: relative;
	margin: 0;
	background: var( --mc-surface );
	border: 1px solid var( --mc-border );
	border-radius: var( --mc-radius );
	padding: 1.1rem 1.25rem;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.04 );
	transition: box-shadow var( --mc-anim ) ease, transform var( --mc-anim ) ease, border-color var( --mc-anim ) ease;
}

.mc-classic .comment-body:hover {
	border-color: color-mix( in srgb, var( --mc-accent ) 30%, var( --mc-border ) );
	box-shadow: 0 6px 18px rgba( 15, 23, 42, 0.07 );
	transform: translateY( -1px );
}

/* Author + meta row */
.mc-classic .comment-author.vcard {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.mc-classic .comment-metadata {
	margin: 0.15rem 0 0.5rem;
}

.mc-classic .comment-metadata a {
	text-decoration: none;
}

/* Reply link inside the .reply wrapper */
.mc-classic .reply {
	margin-top: 0.5rem;
}

/* Threaded replies — accent rail, nested cards on the secondary surface */
.mc-classic .children {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0 0 0 clamp( 0.75rem, 3vw, 1.5rem );
	border-left: 2px solid var( --mc-rail );
}

.mc-classic .children > li.comment:last-child {
	margin-bottom: 0;
}

.mc-classic .children .comment-body {
	background: var( --mc-surface-2 );
}

@media ( prefers-reduced-motion: reduce ) {
	.mc-classic .comment-body:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Load-more button + hide native pagination when active
 * ---------------------------------------------------------------------- */
.mc-has-loadmore .wp-block-comments-pagination,
.mc-has-loadmore .comment-navigation,
.mc-has-loadmore .comments-pagination,
.mc-has-loadmore .nav-below {
	display: none;
}

.mc-enhanced .mc-load-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1rem 0 0;
	padding: 0.6rem 1.4rem;
	border: 1px solid var( --mc-border );
	border-radius: 999px;
	background: var( --mc-surface );
	color: var( --mc-accent );
	font-weight: 600;
	cursor: pointer;
	transition: background var( --mc-anim ) ease, border-color var( --mc-anim ) ease;
}

.mc-enhanced .mc-load-more:hover {
	border-color: var( --mc-accent );
	background: color-mix( in srgb, var( --mc-accent ) 10%, var( --mc-surface ) );
}

.mc-enhanced .mc-load-more.mc-loading::before {
	content: "";
	width: 0.9rem;
	height: 0.9rem;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: mc-spin 0.6s linear infinite;
}

@keyframes mc-spin {
	to {
		transform: rotate( 360deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.mc-enhanced .mc-load-more.mc-loading::before {
		animation-duration: 1.5s;
	}
}

/* -------------------------------------------------------------------------
 * Dark-mode toggle button
 * ---------------------------------------------------------------------- */
.mc-enhanced .mc-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin: 0 0 1rem;
	padding: 0;
	border: 1px solid var( --mc-border );
	border-radius: 999px;
	background: var( --mc-surface );
	color: var( --mc-text );
	cursor: pointer;
	transition: background var( --mc-anim ) ease, border-color var( --mc-anim ) ease, color var( --mc-anim ) ease;
}

.mc-enhanced .mc-theme-toggle:hover {
	border-color: var( --mc-accent );
	color: var( --mc-accent );
}

.mc-enhanced .mc-theme-toggle svg {
	width: 1.15rem;
	height: 1.15rem;
}

/* -------------------------------------------------------------------------
 * AJAX: appended-comment meta row + status/error notice
 * ---------------------------------------------------------------------- */
.mc-enhanced .comment-author.vcard {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.mc-enhanced .mc-form-notice {
	margin: 0 0 1rem;
	padding: 0.7rem 0.9rem;
	border-radius: calc( var( --mc-radius ) * 0.66 );
	background: color-mix( in srgb, var( --mc-accent ) 12%, transparent );
	color: var( --mc-text );
	font-size: 0.9rem;
}

.mc-enhanced .mc-form-notice:empty {
	display: none;
}

.mc-enhanced .mc-form-notice--error {
	background: color-mix( in srgb, #dc2626 12%, transparent );
	color: #b91c1c;
}

.mc-enhanced .mc-submitting [type="submit"] {
	opacity: 0.65;
	cursor: progress;
}

/* -------------------------------------------------------------------------
 * Accessibility: visible keyboard focus everywhere
 * ---------------------------------------------------------------------- */
.mc-enhanced a:focus-visible,
.mc-enhanced button:focus-visible,
.mc-enhanced input:focus-visible,
.mc-enhanced textarea:focus-visible {
	outline: 2px solid var( --mc-accent );
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Dark mode — automatic (OS) now; [data-mc-theme] reserved for the toggle
 * ---------------------------------------------------------------------- */
@media ( prefers-color-scheme: dark ) {
	.mc-enhanced {
		--mc-surface: #1e293b;
		--mc-surface-2: #0f172a;
		--mc-border: #334155;
		--mc-text: #e2e8f0;
		--mc-muted: #94a3b8;
	}
}

.mc-enhanced[data-mc-theme="dark"] {
	--mc-surface: #1e293b;
	--mc-surface-2: #0f172a;
	--mc-border: #334155;
	--mc-text: #e2e8f0;
	--mc-muted: #94a3b8;
}

.mc-enhanced[data-mc-theme="light"] {
	--mc-surface: #ffffff;
	--mc-surface-2: #f8fafc;
	--mc-border: #e5e7eb;
	--mc-text: #1f2937;
	--mc-muted: #6b7280;
}

/* -------------------------------------------------------------------------
 * Reduced motion
 * ---------------------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.mc-enhanced * {
		transition: none !important;
	}

	.mc-enhanced .wp-block-comment-template li:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * WooCommerce product reviews
 *
 * WooCommerce renders reviews with .comment_container > .comment-text rather
 * than the standard .comment-body, and applies its own plain card to
 * .comment-text. These rules map the plugin's card design + dark mode onto
 * that markup. Scoped to #reviews so regular comments are unaffected; selector
 * depth matches WooCommerce's own (#reviews #comments ol.commentlist) to win.
 * The .star-rating is intentionally left alone so WooCommerce's stars render.
 * ---------------------------------------------------------------------- */
.mc-enhanced #reviews #comments ol.commentlist,
#reviews #comments ol.commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mc-enhanced #reviews #comments ol.commentlist li.comment {
	margin: 0 0 1rem;
	padding: 0;
}

/* Card moves onto .comment_container; override WooCommerce's .comment-text card. */
.mc-enhanced #reviews #comments ol.commentlist li .comment_container {
	display: block;
	position: relative;
	background: var( --mc-surface );
	border: 1px solid var( --mc-border );
	border-radius: var( --mc-radius );
	padding: 1.1rem 1.25rem;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.04 );
	transition: box-shadow var( --mc-anim ) ease, border-color var( --mc-anim ) ease;
}

.mc-enhanced #reviews #comments ol.commentlist li .comment_container:hover {
	border-color: color-mix( in srgb, var( --mc-accent ) 30%, var( --mc-border ) );
	box-shadow: 0 6px 18px rgba( 15, 23, 42, 0.07 );
}

/* Neutralise WooCommerce's inner card so it doesn't double-border. */
.mc-enhanced #reviews #comments ol.commentlist li .comment_container .comment-text {
	margin: 0;
	border: 0;
	border-radius: 0;
	padding: 0 0 0 calc( var( --mc-avatar-size ) + 1rem );
	background: transparent;
	color: var( --mc-text );
}

/* Avatar sized to the plugin token, pulled into the card. */
.mc-enhanced #reviews #comments ol.commentlist li .comment_container img.avatar {
	position: absolute;
	top: 1.1rem;
	left: 1.25rem;
	width: var( --mc-avatar-size );
	height: var( --mc-avatar-size );
	margin: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 1px var( --mc-border );
}

.mc-enhanced #reviews #comments ol.commentlist li .comment_container .comment-text p.meta {
	color: var( --mc-muted );
	font-size: 0.85rem;
}

.mc-enhanced #reviews #comments ol.commentlist li .comment_container .comment-text .description {
	color: var( --mc-text );
}

/* Review form as a card so labels are readable in dark mode (they sit on the
 * page background otherwise), matching the comment form treatment. */
.mc-enhanced #reviews #review_form_wrapper {
	margin-top: 1.5rem;
	padding: 1.25rem;
	background: var( --mc-surface-2 );
	border: 1px solid var( --mc-border );
	border-radius: var( --mc-radius );
	color: var( --mc-text );
}

.mc-enhanced #reviews #review_form_wrapper label,
.mc-enhanced #reviews #review_form_wrapper .comment-reply-title,
.mc-enhanced #reviews #review_form_wrapper p {
	color: var( --mc-text );
}

/* Accent the rating: filled stars take the accent, empties stay muted.
 * Only the color is changed — the star glyphs/widths are left to WooCommerce. */
.mc-enhanced #reviews .star-rating::before {
	color: var( --mc-muted );
}

.mc-enhanced #reviews .star-rating span::before {
	color: var( --mc-accent );
}

/* Interactive rating picker in the form — tint to the accent. Class-based
 * selection logic is untouched, so clicking to choose a rating still works. */
.mc-enhanced #reviews .comment-form-rating .stars a {
	color: var( --mc-accent );
}

/* Accent the Submit button (out-specifies WooCommerce's default button). */
.mc-enhanced #reviews #respond input#submit,
.mc-enhanced #reviews #respond .form-submit input[type="submit"] {
	background: var( --mc-accent );
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 0.6rem 1.4rem;
	font-weight: 600;
	cursor: pointer;
	transition: filter var( --mc-anim ) ease;
}

.mc-enhanced #reviews #respond input#submit:hover,
.mc-enhanced #reviews #respond .form-submit input[type="submit"]:hover {
	filter: brightness( 1.08 );
}