/**
 * SNYCF — Discussion
 *
 * The comment section from the approved story design. Mobile-first: nesting
 * indentation is deliberately small, and stops entirely at the third level
 * so a reply never collapses to a two-word column on a phone.
 *
 * @package snycf
 */

.snycf-discussion {
	border-top: var( --snycf-divider );
	margin-top: var( --snycf-section-gap );
}

.snycf-discussion__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var( --snycf-space-2xs ) var( --snycf-space-sm );
	border-top: var( --snycf-border-width-rule ) solid var( --snycf-accent );
	padding-top: var( --snycf-rule-gap );
}

.snycf-discussion__head .snycf-section-heading {
	border-top: 0;
	padding-top: 0;
}

.snycf-discussion__count {
	margin: 0;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.8125rem;
	font-weight: var( --snycf-weight-black );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --snycf-accent );
}

.snycf-discussion__policy {
	margin-inline-start: auto;
	min-height: var( --snycf-target-min );
	display: inline-flex;
	align-items: center;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-kicker );
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --snycf-text-meta );
}

.snycf-discussion__intro,
.snycf-discussion__closed {
	margin: var( --snycf-space-xs ) 0 0;
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: 0.96875rem;
	color: var( --snycf-text-prose );
}

.snycf-discussion__notice {
	margin: var( --snycf-space-sm ) 0 0;
	padding: var( --snycf-space-xs ) var( --snycf-space-sm );
	background-color: var( --snycf-paper );
	border-inline-start: var( --snycf-border-width-rule ) solid var( --snycf-accent );
	font-size: 0.875rem;
}

/* =====================================================================
 * Form
 * ================================================================== */

.snycf-comment-form {
	margin-top: var( --snycf-space-lg );
	padding: var( --snycf-space-md );
	background-color: var( --snycf-paper );
	border: var( --snycf-border-width-hair ) solid var( --snycf-rule );
}

.snycf-comment-form__title {
	margin: 0 0 var( --snycf-space-2xs );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.8125rem;
	font-weight: var( --snycf-weight-black );
	letter-spacing: var( --snycf-tracking-label );
	text-transform: uppercase;
}

.snycf-comment-form__notes,
.snycf-comment-form .comment-notes {
	margin: 0 0 var( --snycf-space-xs );
	font-size: 0.75rem;
	color: var( --snycf-meta-on-stock );
}

.snycf-comment-form p {
	margin: 0 0 var( --snycf-space-xs );
}

.snycf-comment-form label {
	display: block;
	margin-bottom: var( --snycf-space-3xs );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-kicker );
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --snycf-meta-on-stock );
}

.snycf-comment-form input[ type='text' ],
.snycf-comment-form input[ type='email' ],
.snycf-comment-form textarea {
	width: 100%;
}

.snycf-comment-form textarea {
	min-height: 7rem;
}

.snycf-comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var( --snycf-space-2xs );
}

.snycf-comment-form .comment-form-cookies-consent label {
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.75rem;
	font-weight: var( --snycf-weight-medium );
}

.snycf-comment-form .comment-form-cookies-consent input {
	min-height: 0;
	margin-top: 0.2rem;
}

/* Two-up on wider screens, matching the approved layout. */
@media ( min-width: 40rem ) {

	.snycf-comment-form .comment-form-author,
	.snycf-comment-form .comment-form-email {
		display: inline-block;
		width: calc( 50% - var( --snycf-space-2xs ) );
		vertical-align: top;
	}

	.snycf-comment-form .comment-form-author {
		margin-inline-end: var( --snycf-space-xs );
	}
}

@media ( min-width: 48rem ) {

	.snycf-comment-form {
		padding: var( --snycf-space-lg );
	}
}

/* =====================================================================
 * Sorting
 * ================================================================== */

.snycf-discussion__sort {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --snycf-space-2xs ) var( --snycf-space-sm );
	margin-top: var( --snycf-space-xl );
	padding-bottom: var( --snycf-space-xs );
	border-bottom: var( --snycf-divider );
}

.snycf-discussion__sort-label {
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-kicker );
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: var( --snycf-tracking-meta );
	text-transform: uppercase;
	color: var( --snycf-meta-on-stock );
}

.snycf-discussion__sort-options {
	display: flex;
	flex-wrap: wrap;
	gap: var( --snycf-space-sm );
}

.snycf-discussion__sort-link {
	display: inline-flex;
	align-items: center;
	min-height: var( --snycf-target-min );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.71875rem;
	font-weight: var( --snycf-weight-bold );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --snycf-meta-on-stock );
}

.snycf-discussion__sort-link.is-active {
	font-weight: var( --snycf-weight-black );
	color: var( --snycf-text );
	border-bottom: 2px solid var( --snycf-accent );
}

/* =====================================================================
 * Thread
 * ================================================================== */

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

.snycf-comment {
	min-width: 0;
}

.snycf-comment__inner {
	padding-block: var( --snycf-space-md );
	border-bottom: var( --snycf-divider );
	min-width: 0;
}

.snycf-comment--pending .snycf-comment__inner {
	opacity: 0.75;
}

.snycf-comment__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --snycf-space-2xs ) var( --snycf-space-xs );
	min-width: 0;
}

.snycf-comment__avatar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	background-color: var( --snycf-ink );
	color: var( --snycf-paper );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-weight: var( --snycf-weight-black );
	font-size: 0.8125rem;
}

/* Staff replies take the accent mark, matching the approved design. */
.snycf-comment__head:has( .snycf-comment__staff ) .snycf-comment__avatar {
	background-color: var( --snycf-accent );
}

.snycf-comment__author {
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.84375rem;
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: 0.04em;

	/* A pasted 60-character "name" must not blow out the column. */
	min-width: 0;
	overflow-wrap: anywhere;
}

.snycf-comment__date {
	font-size: 0.75rem;
	color: var( --snycf-meta-on-stock );
}

.snycf-comment__replying {
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.6875rem;
	font-weight: var( --snycf-weight-bold );
	letter-spacing: 0.06em;
	color: var( --snycf-meta-on-stock );
	min-width: 0;
	overflow-wrap: anywhere;
}

.snycf-comment__pending-badge {
	margin-inline-start: auto;
	padding: var( --snycf-space-3xs ) var( --snycf-space-2xs );
	border: var( --snycf-border-width-hair ) solid var( --snycf-rule-soft );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.625rem;
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --snycf-meta-on-stock );
}

.snycf-comment__body {
	margin-top: var( --snycf-space-xs );
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: 1.03125rem;
	line-height: 1.6;
	color: var( --snycf-ink-2 );
	min-width: 0;

	/* Unbroken URLs and long strings wrap instead of overflowing. */
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

.snycf-comment__body > * + * {
	margin-top: var( --snycf-space-xs );
}

.snycf-comment__body a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.snycf-comment__removed {
	margin: 0;
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-style: italic;
	font-size: 0.90625rem;
	color: var( --snycf-meta-on-stock );
}

.snycf-comment__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var( --snycf-space-md );
	margin-top: var( --snycf-space-2xs );
}

.snycf-comment__actions a {
	display: inline-flex;
	align-items: center;
	min-height: var( --snycf-target-min );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-kicker );
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.snycf-comment__report {
	font-weight: var( --snycf-weight-bold ) !important;
	color: var( --snycf-meta-on-stock );
}

.snycf-comment__report:hover {
	color: var( --snycf-accent );
}

/*
 * Nesting.
 *
 * 12px on a phone, 20px from tablet up. The third level is rendered flat by
 * the walker with an explicit "replying to" line, so indentation never
 * compounds beyond two steps.
 */
.snycf-comment-list .children {
	margin-inline-start: 0.75rem;
	padding-inline-start: 0.75rem;
	border-inline-start: var( --snycf-border-width-button ) solid var( --snycf-accent );
}

.snycf-comment-list .children .children {
	border-inline-start-color: var( --snycf-rule );
}

.snycf-comment--flat {
	border-inline-start: 0;
}

@media ( min-width: 48rem ) {

	.snycf-comment-list .children {
		margin-inline-start: 1.25rem;
		padding-inline-start: 1.25rem;
	}
}

/* Reply form nested in the thread. */
.snycf-comment-list .comment-respond {
	margin-block: var( --snycf-space-sm ) var( --snycf-space-md );
}

.snycf-comment-pagination {
	padding-top: var( --snycf-space-lg );
}