/*
 * Comments section. Colors come from the theme via the --cjbec-* variables
 * (account-button.css). Form styles apply to every comment form; thread
 * styles only where the Comments block uses the "Threads" style.
 */

/* ---------- Comment form: a compact comment box ---------- */

.wp-block-post-comments-form .comment-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.75rem;
	align-items: center;
	margin: 0;
}

.wp-block-post-comments-form .comment-form > * {
	grid-column: 1 / -1;
	order: 5;
	margin: 0;
}

.wp-block-post-comments-form .comment-form-comment { order: 1; }
.wp-block-post-comments-form .comment-form-author { order: 2; }
.wp-block-post-comments-form .comment-form-email { order: 3; }
.wp-block-post-comments-form .comment-form-cookies-consent { order: 4; }

/* Guests' notes on the left, button on the right. */
.wp-block-post-comments-form .comment-form > .comment-notes {
	grid-column: 1;
	font-size: var(--wp--preset--font-size--x-small, 0.875rem);
}

/* "Sign up for free." stays whole: it wraps to the next line rather than splitting. */
.wp-block-post-comments-form .comment-notes a {
	white-space: nowrap;
}

/* Links in the form (Cancel reply, Sign up for free): no
   underline, which comes back on hover and keyboard focus. */
.wp-block-post-comments-form a {
	text-decoration: none;
}

.wp-block-post-comments-form a:not(.wp-element-button):is(:hover, :focus-visible) {
	text-decoration: underline; /* Not on button-styled links like "Log In to Comment". */
}

.wp-block-post-comments-form .comment-form > .form-submit {
	grid-column: 2;
	order: 6;
	justify-self: end;
}

.wp-block-post-comments-form .form-submit .wp-element-button,
.wp-block-post-comments-form .form-submit [type="submit"] {
	padding: 0.5em 1.2em;
	font-size: var(--wp--preset--font-size--x-small, 0.875rem);
}

/* While the comment is sending (a second click is ignored). */
.wp-block-post-comments-form .form-submit [type="submit"][aria-disabled="true"] {
	opacity: 0.6;
	cursor: progress;
}

.wp-block-post-comments-form textarea {
	min-height: 0;
	resize: vertical;
}

.wp-block-post-comments-form :is(input, textarea)::placeholder {
	color: var(--cjbec-muted);
	opacity: 1; /* Firefox dims placeholders by default. */
}

/* Name and Email side by side on wider screens (sites allowing anonymous comments). */
@media (min-width: 600px) {
	.wp-block-post-comments-form .comment-form {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.wp-block-post-comments-form .comment-form > .comment-form-author {
		grid-column: 1;
	}

	.wp-block-post-comments-form .comment-form > .comment-form-email {
		grid-column: 2;
	}
}

/* Cookie consent: a switch (account-button.css) beside its label. The ID
   selector matches core's own margin rule for this checkbox, so this wins. */
.wp-block-post-comments-form .comment-form-cookies-consent {
	align-items: center;
	gap: 0.6em;
	font-size: var(--wp--preset--font-size--x-small, 0.875rem);
}

.wp-block-post-comments-form .comment-form-cookies-consent #wp-comment-cookies-consent {
	margin: 0;
}

/* The heading ("Leave a comment") is for screen readers; when replying, the
   form moves into the thread and shows "Reply to …" with Cancel. */
.wp-block-post-comments-form .comment-reply-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.wp-block-comment-template .wp-block-post-comments-form {
	margin-block: 0.75rem;
}

.wp-block-comment-template .wp-block-post-comments-form .comment-reply-title {
	position: static;
	width: auto;
	height: auto;
	margin: 0 0 0.5rem;
	overflow: visible;
	clip-path: none;
	white-space: normal;
	font-size: var(--wp--preset--font-size--x-small, 0.875rem);
}

.wp-block-post-comments-form .comment-reply-title small {
	margin-left: 0.5em;
	font-size: inherit;
}

/* ---------- Threads styles for the Comments block ----------
   Two block styles share this layout: "Threads" (a straight line beside the
   replies) and "Curved Threads" (a rounded elbow into each reply). The
   attribute selector matches both style classes; rules for one style use its
   own class. */

/* The Comments block is the container the avatar sizes respond to (its own
   width, not the screen's, so a narrow column or sidebar layout counts). */
[class*="is-style-cjbec-threads"] {
	container: cjbec-comments / inline-size;
}

[class*="is-style-cjbec-threads"] > .wp-block-comment-template {
	margin-top: var(--wp--preset--spacing--small, 1.25rem);
	padding-top: var(--wp--preset--spacing--small, 1.25rem);
	border-top: 1px solid var(--cjbec-border);
}

[class*="is-style-cjbec-threads"] > .wp-block-comment-template > li + li {
	--cjbec-gap: 1.25rem; /* The divider's space above the avatar, for the thread line. */
	margin-top: var(--cjbec-gap);
	padding-top: var(--cjbec-gap);
	border-top: 1px solid var(--cjbec-border);
}

[class*="is-style-cjbec-threads"] .cjbec-comment {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

[class*="is-style-cjbec-threads"] .cjbec-comment > * {
	margin: 0; /* Undo the group's default block spacing. */
}

[class*="is-style-cjbec-threads"] .cjbec-comment > .wp-block-avatar {
	flex-shrink: 0;
}

[class*="is-style-cjbec-threads"] .wp-block-avatar img {
	display: block;
	width: var(--cjbec-avatar);
	height: var(--cjbec-avatar);
	border-radius: 50%;
	object-fit: cover;
}

/* The comment's parts stack; Like and Reply share the last row. */
[class*="is-style-cjbec-threads"] .cjbec-comment__body {
	display: flex;
	flex-flow: row wrap;
	flex: 1;
	gap: 0.25rem 1rem;
	min-width: 0;
}

[class*="is-style-cjbec-threads"] .cjbec-comment__body > * {
	flex-basis: 100%;
}

[class*="is-style-cjbec-threads"] .cjbec-comment__body > :is(.wp-block-cjb-enhanced-comments-comment-like, .wp-block-comment-reply-link) {
	flex-basis: auto;
}

[class*="is-style-cjbec-threads"] .cjbec-comment__body > *,
[class*="is-style-cjbec-threads"] .cjbec-comment__meta > * {
	margin: 0;
}

[class*="is-style-cjbec-threads"] .cjbec-comment__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
}

[class*="is-style-cjbec-threads"] .wp-block-comment-author-name {
	font-size: var(--wp--preset--font-size--small, 1rem);
	font-weight: 700;
}

[class*="is-style-cjbec-threads"] .wp-block-comment-date {
	color: var(--cjbec-muted);
	font-size: 0.75rem;
}

[class*="is-style-cjbec-threads"] .wp-block-comment-date a {
	color: inherit;
	text-decoration: none;
}

[class*="is-style-cjbec-threads"] .wp-block-comment-date a:hover {
	color: var(--cjbec-link-hover);
}

[class*="is-style-cjbec-threads"] .wp-block-comment-content {
	/* Some themes (e.g. Ollie) force a top margin here with !important;
	   the Threads layout spaces the comment itself. */
	margin-top: 0 !important;
	font-size: var(--wp--preset--font-size--small, 1rem);
	overflow-wrap: anywhere;
}

[class*="is-style-cjbec-threads"] .wp-block-comment-content > * {
	margin-block: 0 0.5em;
}

[class*="is-style-cjbec-threads"] .wp-block-comment-content > :last-child {
	margin-bottom: 0;
}

/* Replies: a thread line runs down from just under the parent's avatar, and
   replies sit --cjbec-indent to its right. --cjbec-avatar is that level's
   avatar size; --cjbec-gap is any space above the avatar (the divider
   between threads). */
[class*="is-style-cjbec-threads"] .wp-block-comment-template li {
	--cjbec-avatar: 36px;
	--cjbec-indent: 13px;
	--cjbec-gap: 0px;
	position: relative;
}

[class*="is-style-cjbec-threads"] .wp-block-comment-template ol li {
	--cjbec-avatar: 28px;
}

/* Larger avatars where the comments area has room (44 / 36px); narrow
   columns and phones keep 36 / 28 so deep replies keep their text width. The
   Avatar block's size is 44, so these never scale an image up. */
@container cjbec-comments (min-width: 600px) {
	[class*="is-style-cjbec-threads"] .wp-block-comment-template li {
		--cjbec-avatar: 44px;
	}

	[class*="is-style-cjbec-threads"] .wp-block-comment-template ol li {
		--cjbec-avatar: 36px;
	}
}

.is-style-cjbec-threads .wp-block-comment-template li:has(> ol)::before {
	content: "";
	position: absolute;
	top: calc(var(--cjbec-gap) + var(--cjbec-avatar) + 4px);
	bottom: 0;
	left: calc(var(--cjbec-avatar) / 2); /* Whole pixels keep the 1px line crisp. */
	border-left: 1px solid var(--cjbec-border);
}

[class*="is-style-cjbec-threads"] .wp-block-comment-template ol {
	margin: 0.75rem 0 0;
	padding-left: calc(var(--cjbec-avatar) / 2 + var(--cjbec-indent));
}

[class*="is-style-cjbec-threads"] .wp-block-comment-template ol > li + li {
	margin-top: 0.75rem;
}

/* The comment a link points to (the bell, a reply email, Your comments),
   tinted so readers can spot it. The shadow extends the tint without moving
   anything. */
[class*="is-style-cjbec-threads"] li:target > .cjbec-comment {
	--cjbec-target: color-mix(in srgb, var(--cjbec-accent) 8%, transparent);
	border-radius: 6px;
	background: var(--cjbec-target);
	box-shadow: 0 0 0 0.5rem var(--cjbec-target);
}

/* Stop indenting past the fourth level so deep threads stay readable: deeper
   replies sit flush with their parent, without lines. (These rules must
   outweigh the line rules above, hence .wp-block-comment-template.) */
.is-style-cjbec-threads .wp-block-comment-template li:is(.depth-4, .depth-5, .depth-6, .depth-7, .depth-8, .depth-9, .depth-10)::before {
	content: none;
}

[class*="is-style-cjbec-threads"] li:is(.depth-4, .depth-5, .depth-6, .depth-7, .depth-8, .depth-9, .depth-10) ol {
	padding-left: 0;
}

/* Curved Threads: the parent's line runs down to its replies, and each reply
   joins it with a rounded elbow into its avatar. The line ends at the last
   reply. Wider indent, to give the curve room. */
.is-style-cjbec-threads-curved .wp-block-comment-template li {
	--cjbec-indent: 20px;
}

/* The parent's line, from under its avatar to the top of its replies. */
.is-style-cjbec-threads-curved li:has(> ol) > .cjbec-comment {
	position: relative;
}

.is-style-cjbec-threads-curved li:has(> ol) > .cjbec-comment::before {
	content: "";
	position: absolute;
	top: calc(var(--cjbec-avatar) + 4px);
	bottom: -0.75rem; /* The replies list's top margin. */
	left: calc(var(--cjbec-avatar) / 2);
	border-left: 1px solid var(--cjbec-border);
}

/* Each reply: the elbow, from the parent's line into the avatar's middle. */
.is-style-cjbec-threads-curved .wp-block-comment-template ol > li::after {
	content: "";
	position: absolute;
	top: 0;
	left: calc(-1 * var(--cjbec-indent));
	box-sizing: border-box;
	width: calc(var(--cjbec-indent) - 4px);
	height: calc(var(--cjbec-avatar) / 2);
	border-bottom: 1px solid var(--cjbec-border);
	border-left: 1px solid var(--cjbec-border);
	border-bottom-left-radius: 12px;
}

/* ...and the parent's line continuing past it to the next reply. */
.is-style-cjbec-threads-curved .wp-block-comment-template ol > li:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: -0.75rem; /* The gap between replies. */
	left: calc(-1 * var(--cjbec-indent));
	border-left: 1px solid var(--cjbec-border);
}

/* Past the fourth level, replies sit flush with their parent: no connectors
   (more specific than the connector rules above, so they win). */
.is-style-cjbec-threads-curved .wp-block-comment-template li:is(.depth-4, .depth-5, .depth-6, .depth-7, .depth-8, .depth-9, .depth-10) > .cjbec-comment::before,
.is-style-cjbec-threads-curved .wp-block-comment-template li:is(.depth-4, .depth-5, .depth-6, .depth-7, .depth-8, .depth-9, .depth-10) > ol > li::before,
.is-style-cjbec-threads-curved .wp-block-comment-template li:is(.depth-4, .depth-5, .depth-6, .depth-7, .depth-8, .depth-9, .depth-10) > ol > li::after {
	content: none;
}

/* Reply link: quiet text with an icon, the link color on hover. */
.wp-block-comment-reply-link :is(.comment-reply-link, .comment-reply-login) {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	text-decoration: none;
}

[class*="is-style-cjbec-threads"] :is(.wp-block-comment-reply-link, .wp-block-cjb-enhanced-comments-comment-like) {
	font-size: var(--wp--preset--font-size--x-small, 0.875rem);
}

[class*="is-style-cjbec-threads"] .wp-block-comment-reply-link :is(.comment-reply-link, .comment-reply-login) {
	color: var(--cjbec-muted);
}

[class*="is-style-cjbec-threads"] .wp-block-comment-reply-link :is(.comment-reply-link, .comment-reply-login):is(:hover, :focus-visible) {
	color: var(--cjbec-link-hover);
}

/*
 * Reply icon: an outline arrow as a CSS mask filled with currentColor, so it
 * follows the link color and stays out of the accessibility tree.
 * Icon: Phosphor "share-fat", mirrored - https://phosphoricons.com (MIT License)
 */
.wp-block-comment-reply-link :is(.comment-reply-link, .comment-reply-login)::before {
	content: "";
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg transform='matrix(-1 0 0 1 256 0)'%3E%3Cpath d='M237.66,106.35l-80-80A8,8,0,0,0,144,32V72.35c-25.94,2.22-54.59,14.92-78.16,34.91-28.38,24.08-46.05,55.11-49.76,87.37a12,12,0,0,0,20.68,9.58h0c11-11.71,50.14-48.74,107.24-52V192a8,8,0,0,0,13.66,5.65l80-80A8,8,0,0,0,237.66,106.35ZM160,172.69V144a8,8,0,0,0-8-8c-28.08,0-55.43,7.33-81.29,21.8a196.17,196.17,0,0,0-36.57,26.52c5.8-23.84,20.42-46.51,42.05-64.86C99.41,99.77,127.75,88,152,88a8,8,0,0,0,8-8V51.32L220.69,112Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

@media (forced-colors: active) {
	.wp-block-comment-reply-link :is(.comment-reply-link, .comment-reply-login)::before {
		forced-color-adjust: none;
		background-color: LinkText;
	}
}

/*
 * Comment Like: an outline thumbs-up with the count ("0" included),
 * filled in the accent color once liked. The icon is a CSS mask filled with
 * currentColor, like the reply arrow.
 * Icon: Phosphor "thumbs-up" (regular and fill) - https://phosphoricons.com (MIT License)
 */
.cjbec-like {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0;
	border: 0;
	background: none;
	color: var(--cjbec-muted);
	font: inherit;
	line-height: inherit;
	text-decoration: none;
	cursor: pointer;
}

.cjbec-like::before {
	content: "";
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M234,80.12A24,24,0,0,0,216,72H160V56a40,40,0,0,0-40-40,8,8,0,0,0-7.16,4.42L75.06,96H32a16,16,0,0,0-16,16v88a16,16,0,0,0,16,16H204a24,24,0,0,0,23.82-21l12-96A24,24,0,0,0,234,80.12ZM32,112H72v88H32ZM223.94,97l-12,96a8,8,0,0,1-7.94,7H88V105.89l36.71-73.43A24,24,0,0,1,144,56V80a8,8,0,0,0,8,8h64a8,8,0,0,1,7.94,9Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.cjbec-like[aria-pressed="true"] {
	color: var(--cjbec-accent);
}

.cjbec-like[aria-pressed="true"]::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M234,80.12A24,24,0,0,0,216,72H160V56a40,40,0,0,0-40-40,8,8,0,0,0-7.16,4.42L75.06,96H32a16,16,0,0,0-16,16v88a16,16,0,0,0,16,16H204a24,24,0,0,0,23.82-21l12-96A24,24,0,0,0,234,80.12ZM32,112H72v88H32Z'/%3E%3C/svg%3E");
}

button.cjbec-like:is(:hover, :focus-visible) {
	color: var(--cjbec-link-hover);
}

.cjbec-like:focus-visible {
	outline: 2px solid var(--cjbec-accent);
	outline-offset: 2px;
}

.cjbec-like--readonly {
	cursor: default;
}

@media (forced-colors: active) {
	.cjbec-like::before {
		forced-color-adjust: none;
		background-color: CanvasText;
	}
}

/* Staff (the site's title) and "You" tags after the author's name. */
.cjbec-tag {
	display: inline-block;
	margin-left: 0.8em;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	background: var(--cjbec-accent);
	color: var(--cjbec-on-accent);
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.5;
	vertical-align: 0.1em;
}

.cjbec-tag--you {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--cjbec-accent);
	color: var(--cjbec-accent);
}

/* "↪ Name" after the author of a reply past the fourth level. */
.cjbec-reply-to {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	margin-left: 0.4em;
	color: var(--cjbec-muted);
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
}

.cjbec-reply-to svg {
	width: 1em;
	height: 1em;
}