/* ==========================================================================
   Succes News — comments.css
   Comment list (threaded), pingbacks, moderation note, navigation and the
   comment form (author/email two-column grid, textarea, cookies consent,
   submit). Markup: comments.php + the default WP html5 walker (or
   SuccesNews\Core\Comments::render_comment which keeps the same classes).
   Loaded only when a singular view has comments open. Tokens from main.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Section shell
   -------------------------------------------------------------------------- */
.sn-comments { margin-top: var(--sn-space-12); }
.sn-comments__title {
	display: flex;
	align-items: center;
	gap: .5em;
	margin: 0 0 var(--sn-space-6);
	padding-bottom: var(--sn-space-4);
	border-bottom: 2px solid var(--sn-heading);
	font-family: var(--sn-font-ui);
	font-size: var(--sn-fs-xl);
	font-weight: 800;
	text-transform: var(--sn-label-tt);
	letter-spacing: .02em;
}
.sn-comments__title .sn-icon { color: var(--sn-primary); }
.sn-comments__closed { margin: var(--sn-space-6) 0 0; }

/* --------------------------------------------------------------------------
   2. List & threads
   -------------------------------------------------------------------------- */
.sn-comments__list { list-style: none; margin: 0 0 var(--sn-space-6); padding: 0; }
.sn-comments__list .comment,
.sn-comments__list .pingback,
.sn-comments__list .trackback { margin: 0 0 var(--sn-space-5); }
.sn-comments__list ol.children {
	list-style: none;
	margin: var(--sn-space-5) 0 0;
	padding-left: var(--sn-space-6);
	border-left: 2px solid var(--sn-border);
}
@media (max-width: 639px) {
	.sn-comments__list ol.children { padding-left: var(--sn-space-4); }
	/* Cap visual indentation on small screens (depth ≥ 3 aligns flat). */
	.sn-comments__list ol.children ol.children ol.children { padding-left: 0; border-left: 0; }
}

.comment-body {
	position: relative;
	padding: var(--sn-space-5);
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-surface);
}
/* Post author highlight (no CSS-generated text — stays translatable). */
.bypostauthor > .comment-body { border-color: color-mix(in srgb, var(--sn-primary) 45%, var(--sn-border)); background: color-mix(in srgb, var(--sn-primary) 4%, var(--sn-surface)); }
.bypostauthor > .comment-body .comment-author .avatar { box-shadow: 0 0 0 2px var(--sn-primary); }

/* Meta row: avatar + author + date */
.comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35em var(--sn-space-3); margin-bottom: var(--sn-space-3); font-family: var(--sn-font-ui); }
.comment-author { display: flex; align-items: center; gap: var(--sn-space-3); min-width: 0; }
.comment-author .avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.comment-author .fn { font-style: normal; font-weight: 700; font-size: var(--sn-fs-md); color: var(--sn-heading); overflow-wrap: anywhere; }
.comment-author .fn a { color: inherit; }
.comment-author .fn a:hover { color: var(--sn-primary); }
.comment-author .says { display: none; }
.comment-metadata { font-size: var(--sn-fs-sm); color: var(--sn-text-muted); }
.comment-metadata a { color: inherit; }
.comment-metadata a:hover { color: var(--sn-primary); }
.comment-metadata .edit-link { margin-left: .6em; }
.comment-metadata .edit-link a { font-weight: 600; }
@media (min-width: 640px) {
	.comment-metadata { margin-left: auto; }
}

/* Body text */
.comment-content { font-size: var(--sn-fs-md); line-height: var(--sn-lh-body); overflow-wrap: break-word; }
.comment-content p { margin: 0 0 .8em; }
.comment-content > :last-child { margin-bottom: 0; }
.comment-content a { text-decoration: underline; text-underline-offset: .15em; overflow-wrap: anywhere; }
.comment-content blockquote { margin: .8em 0; padding-left: 1em; border-left: 3px solid var(--sn-border-strong); color: var(--sn-text-muted); }
.comment-content pre { overflow-x: auto; background: var(--sn-surface-2); border-radius: var(--sn-radius); padding: .8em 1em; font-size: .85em; }
.comment-content ul, .comment-content ol { padding-left: 1.4em; margin: 0 0 .8em; }

/* Awaiting moderation */
.comment-awaiting-moderation {
	display: block;
	margin: var(--sn-space-3) 0 0;
	padding: .5em .8em;
	border-radius: var(--sn-radius);
	background: color-mix(in srgb, var(--sn-accent) 14%, var(--sn-surface));
	border: 1px solid color-mix(in srgb, var(--sn-accent) 40%, transparent);
	font-family: var(--sn-font-ui);
	font-size: var(--sn-fs-sm);
	font-style: normal;
	color: var(--sn-text);
}

/* Reply link */
.comment-body .reply { margin-top: var(--sn-space-3); font-family: var(--sn-font-ui); }
.comment-reply-link {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	padding: .35em .85em;
	border: 1px solid var(--sn-border-strong);
	border-radius: var(--sn-radius-full);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	color: var(--sn-text);
	transition: color var(--sn-dur), border-color var(--sn-dur), background var(--sn-dur);
}
.comment-reply-link:hover { color: var(--sn-on-primary); background: var(--sn-primary); border-color: var(--sn-primary); }

/* Pingbacks / trackbacks — compact single line */
.sn-comments__list .pingback .comment-body,
.sn-comments__list .trackback .comment-body { padding: var(--sn-space-3) var(--sn-space-4); font-size: var(--sn-fs-sm); color: var(--sn-text-muted); background: var(--sn-surface-2); border-color: transparent; }
.sn-comments__list .pingback .url,
.sn-comments__list .trackback .url { font-weight: 600; color: var(--sn-text); overflow-wrap: anywhere; }
.sn-comments__list .pingback .edit-link { margin-left: .5em; }

/* Comments navigation */
.sn-comments__nav { margin: var(--sn-space-6) 0; font-family: var(--sn-font-ui); }
.sn-comments__nav .nav-links { display: flex; justify-content: space-between; gap: var(--sn-space-4); }
.sn-comments__nav a { display: inline-flex; align-items: center; gap: .35em; font-weight: 600; }

/* --------------------------------------------------------------------------
   3. Comment form
   -------------------------------------------------------------------------- */
.sn-comments__respond { margin-top: var(--sn-space-8); }
.comment .sn-comments__respond { margin-top: var(--sn-space-5); }
.sn-comments__reply-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5em;
	margin: 0 0 var(--sn-space-2);
	font-size: var(--sn-fs-2xl);
}
.sn-comments__cancel { font-family: var(--sn-font-ui); font-size: var(--sn-fs-sm); font-weight: 600; }
.sn-comments__cancel a { color: var(--sn-text-muted); text-decoration: underline; text-underline-offset: 2px; }
.sn-comments__cancel a:hover { color: var(--sn-primary); }

.sn-comment-form { margin-top: var(--sn-space-2); }
.sn-comment-form__notes { margin: 0 0 var(--sn-space-5); font-family: var(--sn-font-ui); font-size: var(--sn-fs-sm); color: var(--sn-text-muted); }
.sn-comment-form .required { color: var(--sn-breaking, #dc2626); }

.sn-comment-form__row { margin-bottom: var(--sn-space-4); }
.sn-comment-form__row label { display: block; margin-bottom: .35em; font-family: var(--sn-font-ui); font-size: var(--sn-fs-sm); font-weight: 600; }
.sn-comment-form__row textarea { resize: vertical; min-height: 140px; }

/* Author / email side by side on wider screens (form is a flat list of rows —
   grid on the form container places the two rows in one line). */
@media (min-width: 640px) {
	.sn-comment-form {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--sn-space-5);
	}
	.sn-comment-form > * { grid-column: 1 / -1; }
	.sn-comment-form .sn-comment-form__row--author { grid-column: 1 / 2; }
	.sn-comment-form .sn-comment-form__row--email { grid-column: 2 / 3; }
}

.sn-comment-form__check { display: flex; align-items: flex-start; gap: .6em; font-size: var(--sn-fs-sm); color: var(--sn-text-muted); cursor: pointer; }
.sn-comment-form__check input[type="checkbox"] { width: 1.05em; height: 1.05em; margin-top: .2em; accent-color: var(--sn-primary); flex: 0 0 auto; }

.sn-comment-form__row--submit { margin-bottom: 0; display: flex; align-items: center; gap: var(--sn-space-4); }
.sn-comment-form__submit { min-width: 180px; }

/* Logged-in row printed by comment_form() */
.sn-comment-form .logged-in-as,
.sn-comment-form .must-log-in { grid-column: 1 / -1; margin: 0 0 var(--sn-space-4); font-family: var(--sn-font-ui); font-size: var(--sn-fs-sm); color: var(--sn-text-muted); }
.sn-comment-form .logged-in-as a, .sn-comment-form .must-log-in a { font-weight: 600; }

/* --------------------------------------------------------------------------
   4. Dark mode nuances
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] .comment-body { background: var(--sn-surface-2); }
:root[data-theme="dark"] .sn-comments__list .pingback .comment-body,
:root[data-theme="dark"] .sn-comments__list .trackback .comment-body { background: var(--sn-surface); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .comment-body { background: var(--sn-surface-2); }
	:root:not([data-theme="light"]) .sn-comments__list .pingback .comment-body,
	:root:not([data-theme="light"]) .sn-comments__list .trackback .comment-body { background: var(--sn-surface); }
}

/* --------------------------------------------------------------------------
   5. Print (main.css already hides .sn-comments in print — safety only)
   -------------------------------------------------------------------------- */
@media print {
	.sn-comments { display: none !important; }
}