/*
 * 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);
}

/* After the sort tabs, whose underline is the divider. */
[class*="is-style-cjbec-threads"] > .cjbec-comment-sort + .wp-block-comment-template {
	margin-top: 0;
	border-top: 0;
}

[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);
	object-fit: cover;
}

/* Round unless the Avatar block or the theme sets a radius: :where() carries
   no weight, so either one wins. */
:where([class*="is-style-cjbec-threads"] .wp-block-avatar img) {
	border-radius: 50%;
}

/* 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: min(36px, var(--cjbec-avatar-size, 44px));
	--cjbec-indent: 13px;
	--cjbec-gap: 0px;
	position: relative;
}

[class*="is-style-cjbec-threads"] .wp-block-comment-template ol li {
	--cjbec-avatar: min(28px, var(--cjbec-reply-avatar-size, 36px));
}

/* Where the comments area has room, the Avatar block's size for comments
   and 9/11 of it for replies (cjbec_comment_avatar_sizes(); 44 / 36 without
   it). Narrow columns and phones keep 36 / 28 (or less, for smaller avatars)
   so deep replies keep their text width. */
@container cjbec-comments (min-width: 600px) {
	[class*="is-style-cjbec-threads"] .wp-block-comment-template li {
		--cjbec-avatar: var(--cjbec-avatar-size, 44px);
	}

	[class*="is-style-cjbec-threads"] .wp-block-comment-template ol li {
		--cjbec-avatar: var(--cjbec-reply-avatar-size, 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);
}

/* The last reply: the elbow, from the parent's line into the avatar's middle. */
.is-style-cjbec-threads-curved .wp-block-comment-template ol > li:last-child::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;
}

/* The other replies: the parent's line continuing to the next reply, with the
   same elbow branching off it. They're one shape, masked from a fill: the
   lines are translucent, and drawn separately they overlapped (and drew
   darker) where the curve leaves the line. Mask layers: the line, the 12px
   arc, then the stretch into the avatar. */
.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));
	width: calc(var(--cjbec-indent) - 4px);
	background: var(--cjbec-border);
	mask:
		linear-gradient(#000 0 0) 0 0 / 1px 100% no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M.5 0A11.5 11.5 0 0 0 12 11.5' fill='none' stroke='%23000'/%3E%3C/svg%3E") 0 calc(var(--cjbec-avatar) / 2 - 12px) / 12px 12px no-repeat,
		linear-gradient(#000 0 0) 12px calc(var(--cjbec-avatar) / 2 - 1px) / calc(100% - 12px) 1px no-repeat;
}

/* 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;
}

/* "Call to action" style of the Comments Form block: a card in place of the
   form for visitors who must log in, in the theme's main text color. Sign Up
   Now uses the theme's button style. The buttons sit side by side where the
   card has room (its own width, so narrow columns count) and stack below
   that, with "or" between them. */
.cjbec-cta {
	container: cjbec-cta / inline-size;
	padding: 1.25rem 1rem;
	background: var(--cjbec-tint);
	color: var(--wp--preset--color--main, currentColor);
	text-align: center;
}

.cjbec-cta__title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	margin: 0;
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: 700;
}

.cjbec-cta__title svg {
	flex-shrink: 0;
}

.cjbec-cta__text {
	max-width: 30rem;
	margin: 0.25rem auto 0;
	font-size: var(--wp--preset--font-size--x-small, 0.875rem);
}

.cjbec-cta__actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 20rem;
	margin: 1rem auto 0;
}

.cjbec-cta__actions > :is(a, button) {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
}

.cjbec-cta__or {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	color: var(--cjbec-muted);
	font-size: var(--wp--preset--font-size--x-small, 0.875rem);
}

.cjbec-cta__or::before,
.cjbec-cta__or::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--cjbec-border);
}

.cjbec-cta__login {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small, 0.875rem);
}

@container cjbec-cta (min-width: 32rem) {
	.cjbec-cta__actions {
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
		max-width: 30rem;
	}

	.cjbec-cta__actions > :is(a, button) {
		flex: 1 1 0;
		width: auto;
	}

	.cjbec-cta__or::before,
	.cjbec-cta__or::after {
		content: none;
	}

	.cjbec-cta__login {
		flex-basis: 100%;
	}
}

/* The card says it all, so the heading's log-in label is for screen readers
   only there. */
.wp-block-comments:has(.cjbec-cta) .cjbec-login-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Sort tabs (Best, Newest, Oldest) above the list: the current one bold and
   underlined, on a divider line. */
.cjbec-comment-sort {
	display: flex;
	gap: 1.25rem;
	margin-top: var(--wp--preset--spacing--medium, 2rem);
	border-bottom: 1px solid var(--cjbec-border);
	font-size: var(--wp--preset--font-size--x-small, 0.875rem);
}

.cjbec-comment-sort a {
	margin-bottom: -1px;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid transparent;
	color: var(--cjbec-muted);
	text-decoration: none;
}

.cjbec-comment-sort a:hover {
	color: var(--cjbec-link-hover);
}

.cjbec-comment-sort a[aria-current] {
	border-bottom-color: currentColor;
	color: inherit;
	font-weight: 700;
}

/* 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;
}