/*
 * Native Comments blocks: inline disclosures and the mobile discussion sheet.
 * Buttons, colors and spacing use the theme.json design tokens.
 */

.pst-comments__action {
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.pst-comments .pst-comments__button {
	min-height: 44px;
	cursor: pointer;
}

/* Inline disclosure uses the secondary Ghost button treatment. */
.pst-comments .pst-comments__action--more .pst-comments__button {
	border: 1px solid var(--wp--preset--color--line);
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
}

.pst-comments .pst-comments__action--more .pst-comments__button:hover {
	border-color: var(--wp--preset--color--muted);
}

/* Folded comments take no room (until-found keeps them in the find-in-page index). */
.pst-comments li[hidden="until-found"] {
	margin: 0;
	padding: 0;
	border: 0;
}

.pst-comments #respond[hidden] {
	display: none;
}

/* Focus moved here by the script (the first comment it revealed, the form). */
.pst-comments [tabindex="-1"]:focus {
	outline: none;
}

.pst-comments [tabindex="-1"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--action);
	outline-offset: 4px;
	border-radius: var(--wp--preset--border-radius--xs);
}

.pst-comments-tools {
	display: contents;
}

.pst-comments-trigger,
.pst-comments-sheet:not([open]) {
	display: none;
}

.pst-comments-trigger[hidden] {
	display: none;
}

/* Core owns the label, count, URL and post context of this pattern. */
.wp-block-post-comments-link.pst-comments-entry {
	display: none;
}

/* Native dialog supplies modality, focus containment and Escape handling. */
.pst-comments-sheet[open] {
	position: fixed;
	inset: auto 0 var(--pst-comments-keyboard-inset, 0px);
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: min(40rem, calc(var(--pst-comments-viewport-height, 100dvh) - var(--wp--preset--spacing--30)));
	max-height: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-bottom: 0;
	border-radius: var(--wp--preset--border-radius--xl) var(--wp--preset--border-radius--xl) 0 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	overflow: hidden;
}

.pst-comments-sheet::backdrop {
	background: rgba(14, 15, 18, 0.5);
}

.pst-comments-sheet__grip {
	flex: none;
	width: var(--wp--preset--spacing--50);
	height: 4px;
	margin: var(--wp--preset--spacing--20) auto 0;
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--wp--preset--color--line);
}

.pst-comments-sheet__header {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--gutter);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.pst-comments-sheet__heading {
	flex: 1;
	min-width: 0;
}

.pst-comments-sheet__heading h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
}

.pst-comments-sheet__heading h2:focus {
	outline: none;
}

.pst-comments-sheet__count,
.pst-comments-trigger__count {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

.pst-comments-sheet__count {
	margin-inline-start: var(--wp--preset--spacing--10);
}

.pst-comments-sheet__context {
	margin: var(--wp--preset--spacing--10) 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.pst-comments-sheet__context > span {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pst-comments-sheet__reading[hidden] {
	display: none;
}

.pst-comments-sheet__close {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--wp--preset--border-radius--full);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.pst-comments-sheet__close:hover {
	background: var(--wp--preset--color--surface);
}

.pst-comments-sheet__close:focus-visible,
.pst-comments-trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--action);
	outline-offset: 2px;
}

.pst-comments-sheet__body {
	flex: 1;
	min-height: 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--gutter) calc(var(--wp--preset--spacing--40) + env(safe-area-inset-bottom, 0px));
	overflow: auto;
	overscroll-behavior: contain;
}

.pst-comments-sheet__body > .pst-comments {
	max-width: none;
	margin: 0;
}

.pst-comments-sheet .wp-block-comments-title,
.pst-comments-sheet .pst-comments__action--start,
.pst-comments-sheet__footer[hidden] {
	display: none;
}

.pst-comments-sheet [id] {
	scroll-margin-block: var(--wp--preset--spacing--30);
}

.pst-comments-sheet .wp-block-comment-template {
	margin-top: 0;
}

/* Use the native nested thread; compact its inline card styling for a phone. */
.pst-comments-sheet .wp-block-comment-template .wp-block-columns {
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
}

.pst-comments-sheet .wp-block-comment-template .wp-block-avatar {
	width: var(--wp--preset--spacing--50);
}

.pst-comments-sheet .wp-block-comment-template ol {
	padding-inline-start: var(--wp--preset--spacing--40);
}

.pst-comments-sheet .wp-block-post-comments-form {
	margin-block: var(--wp--preset--spacing--40) 0;
}

.pst-comments-sheet .wp-block-post-comments-form:first-child {
	margin-top: 0;
}

.pst-comments-sheet .comment-reply-title {
	font-size: var(--wp--preset--font-size--large);
}

.pst-comments-sheet .wp-block-post-comments-form input:not([type="checkbox"], [type="hidden"]),
.pst-comments-sheet .wp-block-post-comments-form textarea {
	box-sizing: border-box;
	max-width: 100%;
	min-height: 44px;
	font-size: max(1rem, var(--wp--preset--font-size--medium));
}

.pst-comments-sheet .wp-block-post-comments-form textarea {
	min-height: 8rem;
}

.pst-comments-sheet__footer {
	flex: none;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--gutter) calc(var(--wp--preset--spacing--30) + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--wp--preset--color--line);
}

.pst-comments-sheet__footer p {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.pst-comments-sheet__footer .pst-comments__write {
	width: 100%;
	min-height: 44px;
	cursor: pointer;
}

@media (max-width: 782px) {

	.pst-comments-trigger {
		position: fixed;
		inset-inline-end: calc(var(--wp--preset--spacing--gutter) + env(safe-area-inset-right, 0px));
		bottom: calc(var(--pst-comments-bottom-offset, calc(var(--pst-mobile-bar-height, 61px) + env(safe-area-inset-bottom, 0px))) + var(--wp--preset--spacing--30));
		z-index: var(--wp--custom--z-index--popover);
		display: inline-flex;
		align-items: center;
		gap: var(--wp--preset--spacing--20);
		box-sizing: border-box;
		min-height: 44px;
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
		border: 1px solid var(--wp--preset--color--line);
		border-radius: var(--wp--preset--border-radius--full);
		background: var(--wp--preset--color--base);
		box-shadow: var(--wp--preset--shadow--md);
		color: var(--wp--preset--color--contrast);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
		line-height: 1.4;
		text-decoration: none;
	}

	.pst-comments-trigger:hover {
		background: var(--wp--preset--color--surface);
		text-decoration: none;
	}

	.pst-comments-tools[data-pst-comments-access="edge"] .pst-comments-trigger {
		inset-inline-end: env(safe-area-inset-right, 0);
		flex-direction: column;
		justify-content: center;
		gap: var(--wp--preset--spacing--10);
		width: 48px;
		min-height: 72px;
		padding: var(--wp--preset--spacing--20);
		border-start-end-radius: 0;
		border-end-end-radius: 0;
		border-start-start-radius: var(--wp--preset--border-radius--md);
		border-end-start-radius: var(--wp--preset--border-radius--md);
	}

	.pst-comments-tools[data-pst-comments-access="edge"] .pst-comments-trigger__label {
		display: none;
	}

	.wp-block-post-comments-link.pst-comments-entry {
		display: block;
	}

	.pst-comments-entry a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
		border: 1px solid var(--wp--preset--color--line);
		border-radius: var(--wp--preset--border-radius--md);
		background: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--action);
		text-decoration: none;
	}

	.pst-comments-entry a:hover {
		text-decoration: underline;
	}

	/* Fixed body also prevents background scrolling on iOS. */
	html[data-pst-comments-open] {
		overflow: hidden;
	}

	html[data-pst-comments-open] body {
		position: fixed;
		top: var(--pst-comments-scroll-y);
		width: 100%;
	}
}