/*
 * Comments — Editorial Discussion.
 *
 * Layout: constrained 760px reading column → "Comments (N)" title → borderless
 *   comment rows (square avatar + body, top-divider between) → indented reply
 *   thread (one level) → centered pagination → underline-only respond form.
 * Purely token-driven; only consumes --wp--custom--* vars. Section vertical
 *   spacing comes from the preset (spacing|normal Normal) in the pattern markup.
 *
 * Design ref: docs/design-refs/comments/comments-section.tokens.json
 *
 * Token map (design semantic → generated var):
 *   color.primary   → semantic.color.text.primary   — title, author, avatar border, submit bg
 *   color.secondary → semantic.color.text.secondary  — comment body copy
 *   color.muted     → semantic.color.text.muted      — date, field labels
 *   color.accent    → semantic.color.text.brand      — "Author" badge
 *   color.border    → semantic.color.border.base     — row/form dividers, field underline
 *   color.background→ semantic.color.bg.base          — section bg, submit text
 *   color.focus     → semantic.color.interactive.focus— focus outline
 *   typography.display (Cormorant) — title
 *   typography.body (Jost)         — everything else
 *   space.2 – 9  ·  duration.base  ·  easing.default
 */

/* stylelint-disable no-descending-specificity -- a11y focus + pagination
   rules follow their base link rules; source order reads top-to-bottom. */

.wpdl-comments {
	/* background inherits from page (bg-base) */
}

/* Constrained reading column — 760px per design ref */
.wpdl-comments.wp-block-group > .wpdl-comments__list {
	max-inline-size: 47.5rem; /* 760px */
	margin-inline: auto;
}

/* ── Title — "Comments (N)" ───────────────────────────────────────── */
.wpdl-comments__title {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.1875rem, 1rem + 1.1vw, 1.75rem); /* 19 → 28px */
	font-weight: 500;
	line-height: 1.2;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--8);
}

/* ── Comment row (borderless, top divider) ────────────────────────── */
.wpdl-comments__item.wp-block-group {
	gap: var(--wp--custom--space--4); /* 16px */
	align-items: flex-start;
	padding-block: var(--wp--custom--space--6); /* 24px */
	border-block-start: 1px solid var(--wp--custom--semantic--color--border--base);
	margin-block: 0;
}

/* Square avatar with hairline border (matches My Account treatment) */
.wpdl-comments__avatar {
	flex: 0 0 auto;
}

.wpdl-comments__avatar img {
	inline-size: 2.75rem; /* 44px */
	block-size: 2.75rem;
	border-radius: 0;
	border: 1px solid var(--wp--custom--semantic--color--text--primary);
	object-fit: cover;
}

.wpdl-comments__body.wp-block-group {
	flex: 1 1 auto;
	gap: var(--wp--custom--space--2);
	min-inline-size: 0;
}

/* Meta line: author + date */
.wpdl-comments__meta.wp-block-group {
	gap: var(--wp--custom--space--3);
	align-items: baseline;
	margin-block: 0;
}

.wpdl-comments__author {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.8125rem; /* 13px */
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
}

.wpdl-comments__author a {
	color: inherit;
	text-decoration: none;
}

.wpdl-comments__date {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem; /* 11px */
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--wp--custom--semantic--color--text--muted);
}

.wpdl-comments__date a {
	color: inherit;
	text-decoration: none;
}

/* Comment body copy — light weight, secondary tone */
.wpdl-comments__content {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.8125rem; /* 13px */
	font-weight: 300;
	line-height: 1.7;
	color: var(--wp--custom--semantic--color--text--secondary);
	margin-block: 0;
}

.wpdl-comments__content p {
	margin-block: 0 var(--wp--custom--space--3);
}

.wpdl-comments__content p:last-child {
	margin-block-end: 0;
}

/* Reply link — uppercase, underlined accent */
.wpdl-comments__reply a {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem; /* 11px */
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--primary);
	text-decoration: none;
	border-block-end: 1.5px solid var(--wp--custom--semantic--color--text--primary);
	padding-block-end: 0.125rem;
	transition: opacity var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-comments__reply a:hover {
	opacity: 0.6;
}

/* "Author" badge on post-author comments (core adds .bypostauthor) */
.wpdl-comments__item.bypostauthor .wpdl-comments__author::after {
	content: "Author";
	display: inline-block;
	margin-inline-start: var(--wp--custom--space--2);
	font-size: 0.625rem; /* 10px */
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--brand--primary);
	vertical-align: middle;
}

/* ── Reply thread — one indented level, collapses on mobile ────────── */
.wpdl-comments__list .wp-block-comment-template ol {
	list-style: none;
	margin-block: 0;
	margin-inline-start: 3.75rem; /* 60px */
	padding-inline-start: 0;
}

.wpdl-comments__list .wp-block-comment-template ol .wpdl-comments__avatar img {
	inline-size: 2.25rem; /* 36px reply avatar */
	block-size: 2.25rem;
}

/* ── Pagination ───────────────────────────────────────────────────── */
.wpdl-comments__pagination {
	gap: var(--wp--custom--space--4);
	margin-block-start: var(--wp--custom--space--7);
}

.wpdl-comments__pagination a,
.wpdl-comments__pagination .current {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.875rem;
	color: var(--wp--custom--semantic--color--text--primary);
	text-decoration: none;
}

.wpdl-comments__pagination .current {
	font-weight: 700;
	color: var(--wp--custom--semantic--color--brand--primary);
}

/* ── Respond form — underline-only fields (reuse Checkout/Contact) ─── */
.wpdl-comments__form {
	margin-block-start: var(--wp--custom--space--9);
	padding-block-start: var(--wp--custom--space--8);
	border-block-start: 1px solid var(--wp--custom--semantic--color--border--base);
}

.wpdl-comments__form .comment-reply-title {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.1875rem, 1rem + 0.8vw, 1.5rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--6);
}

.wpdl-comments__form label {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem;
	font-weight: 400;
	color: var(--wp--custom--semantic--color--text--muted);
	display: block;
	margin-block-end: var(--wp--custom--space--2);
}

/* Underline-only inputs: no box, hairline base line */
.wpdl-comments__form input:not([type="submit"], [type="checkbox"]),
.wpdl-comments__form textarea {
	inline-size: 100%;
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.875rem;
	color: var(--wp--custom--semantic--color--text--primary);
	background-color: transparent;
	border: none;
	border-block-end: 1px solid var(--wp--custom--semantic--color--border--base);
	border-radius: 0;
	padding: var(--wp--custom--space--2) 0;
	margin-block-end: var(--wp--custom--space--6);
	transition: border-color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-comments__form input:not([type="submit"], [type="checkbox"]):focus,
.wpdl-comments__form textarea:focus {
	outline: none;
	border-block-end-color: var(--wp--custom--semantic--color--text--primary);
}

/* Dark submit button — bg primary, text background (per design ref) */
.wpdl-comments__form .form-submit .submit {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--background--canvas);
	background-color: var(--wp--custom--semantic--color--text--primary);
	border: none;
	border-radius: 0;
	min-block-size: 3.125rem; /* 50px */
	padding-inline: var(--wp--custom--space--7);
	cursor: pointer;
	transition: opacity var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-comments__form .form-submit .submit:hover {
	opacity: 0.85;
}

/* ── A11y: visible focus on all interactive targets ───────────────── */
.wpdl-comments a:focus-visible,
.wpdl-comments input:focus-visible,
.wpdl-comments textarea:focus-visible,
.wpdl-comments .submit:focus-visible {
	outline: 2px solid var(--wp--custom--semantic--color--focus--ring);
	outline-offset: 2px;
}

/* ── Tablet (< 48em / 768px) ──────────────────────────────────────── */
@media (width < 48em) {
	.wpdl-comments__avatar img {
		inline-size: 2.375rem; /* 38px */
		block-size: 2.375rem;
	}

	.wpdl-comments__list .wp-block-comment-template ol {
		margin-inline-start: 2.75rem; /* 44px */
	}
}

/* ── Mobile (< 30em / 480px) ──────────────────────────────────────── */
@media (width < 30em) {
	.wpdl-comments__avatar img {
		inline-size: 2rem; /* 32px */
		block-size: 2rem;
	}

	/* Reply thread collapses to full width — avoids deep-indent squeeze */
	.wpdl-comments__list .wp-block-comment-template ol {
		margin-inline-start: 0;
	}

	.wpdl-comments__form .form-submit .submit {
		inline-size: 100%;
		min-block-size: 2.75rem; /* 44px */
	}
}