/*
 * Single post layout and components. Loaded only on single posts
 * (functions.php). Tokens only: var(--wp--preset--*).
 */

/* ------------------------------------------------------------------ */
/* Layout: one column on narrow screens (head, table of contents,
 * body); two columns from 1100px with a sticky sidebar.               */
/* ------------------------------------------------------------------ */

.post-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"head"
		"aside"
		"body";
	gap: var(--wp--preset--spacing--40);
}

.post-layout > * {
	margin-block: 0;
}

.post-head {
	grid-area: head;
}

.post-aside {
	grid-area: aside;
}

.post-body {
	grid-area: body;
	min-width: 0;
}

/* One column: keep the prose at the content measure, not the wide size. */
main > .post-layout.alignwide {
	max-width: var(--wp--style--global--content-size);
}

/* No table of contents: drop the empty sidebar, and on narrow screens its
 * row, whose two gutters would otherwise double the head-to-body gap. */
.post-layout:not(:has(.cloudbound-toc)) {
	grid-template-areas:
		"head"
		"body";
}

.post-aside:not(:has(.cloudbound-toc)) {
	display: none;
}

@media (min-width: 1100px) {
	main > .post-layout.alignwide {
		max-width: var(--wp--style--global--wide-size);
	}

	.post-layout {
		grid-template-columns: minmax(0, 1fr) 14rem;
		grid-template-areas:
			"head aside"
			"body aside";
		column-gap: var(--wp--preset--spacing--60);
	}

	.post-aside {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--40));
		align-self: start;
		max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--wp--preset--spacing--40));
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
}

/* ------------------------------------------------------------------ */
/* Post head: tag chips, title, deck, meta row                        */
/* ------------------------------------------------------------------ */

/* Tag chips (.post-chips) are in style.css: the post list uses them too. */

/* Headlines avoid a lone last word where the browser can. */
.post-head .wp-block-post-title {
	text-wrap: pretty;
}

.post-deck .wp-block-post-excerpt__excerpt {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-style: italic;
	line-height: 1.4;
}

.post-layout .post-meta {
	gap: var(--wp--preset--spacing--10) calc(1ch + 2 * var(--wp--preset--spacing--10));
	overflow-x: clip;
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--20);
	border-block: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted-deep);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

/* Each separator hangs in the gap before its item. An item that wraps to
 * the start of a line (narrow phones) pushes its "/" past the row's edge,
 * where the clip above hides it. 1ch is the width of "/" in the mono face. */
.post-layout .post-meta > * + * {
	margin-inline-start: calc(-1ch - var(--wp--preset--spacing--10));
}

.post-meta > * + *::before {
	content: "/";
	content: "/" / "";
	margin-inline-end: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--line-strong);
}

.post-meta .wp-block-post-author-name {
	color: var(--wp--preset--color--contrast);
}

/* The featured image under the meta row, unless the post already shows it
 * in its content (inc/single.php). */
.post-head .post-hero {
	margin-block: var(--wp--preset--spacing--40) 0;
	border: 1px solid var(--wp--preset--color--line);
}

.post-head .post-hero img {
	display: block;
}

/* ------------------------------------------------------------------ */
/* Table of contents                                                  */
/* ------------------------------------------------------------------ */

.cloudbound-toc {
	font-size: var(--wp--preset--font-size--meta);
}

.cloudbound-toc__label {
	color: var(--wp--preset--color--muted-deep);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
}

.cloudbound-toc__label::-webkit-details-marker {
	display: none;
}

.cloudbound-toc__list {
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
	list-style: none;
}

.cloudbound-toc__item {
	margin: 0;
}

.cloudbound-toc__item a {
	display: block;
	padding: 0.35em 0 0.35em var(--wp--preset--spacing--20);
	border-inline-start: 1px solid var(--wp--preset--color--line-strong);
	color: var(--wp--preset--color--muted);
	line-height: 1.4;
	text-decoration: none;
}

.cloudbound-toc__item.is-depth-2 a {
	padding-inline-start: calc(var(--wp--preset--spacing--20) * 2);
	font-size: 0.92em;
}

/* Touch screens keep :hover on the last tapped entry, which would leave two
 * entries highlighted; only pointers that can hover get the hover color. */
@media (hover: hover) {
	.cloudbound-toc__item a:hover {
		color: var(--wp--preset--color--heading);
		text-decoration: none;
	}
}

/* The sidebar scroll box clips outlines; keep focus rings inside it. */
.cloudbound-toc__item a:focus-visible {
	outline-offset: -2px;
}

.cloudbound-toc__item a[aria-current] {
	border-inline-start-color: var(--wp--preset--color--accent);
	box-shadow: inset 1px 0 0 var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* The exact complement of (min-width: 1100px), so fractional widths from
 * zoom or OS scaling never fall between the two. */
@media not all and (min-width: 1100px) {
	.cloudbound-toc {
		padding: var(--wp--preset--spacing--20);
		border: 1px solid var(--wp--preset--color--line);
		background-color: var(--wp--preset--color--surface);
	}

	/* The toggle fills the box: a negative margin stretches it over the
	 * box padding, so the whole box is the tap target and nothing moves,
	 * closed or open. */
	.cloudbound-toc__label {
		display: flex;
		justify-content: space-between;
		margin: calc(-1 * var(--wp--preset--spacing--20));
		padding: var(--wp--preset--spacing--20);
	}

	.cloudbound-toc__label::after {
		content: "+";
		content: "+" / "";
		color: var(--wp--preset--color--muted);
	}

	.cloudbound-toc__details[open] .cloudbound-toc__label::after {
		content: "\2212";
		content: "\2212" / "";
	}
}

@media (min-width: 1100px) {
	/* Always open in the sidebar; the label is just a label there. */
	.cloudbound-toc__label {
		pointer-events: none;
	}
}

/* ------------------------------------------------------------------ */
/* Post content                                                       */
/* ------------------------------------------------------------------ */

/* The amber rule that sets off the "what did we learn" section. */
.wp-block-post-content .is-takeaways {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--accent);
}

/* Front end only (these would hide an editable separator in the editor,
 * where this file is also loaded; the editor rewrites "body" selectors to
 * its own wrapper, so they never match there). */
body:not(.editor-styles-wrapper) .wp-block-post-content .wp-block-separator:has(+ .is-takeaways),
body:not(.editor-styles-wrapper) .wp-block-post-content > .wp-block-separator:first-child {
	display: none;
}

/* ------------------------------------------------------------------ */
/* After the post: author card, previous/next, all posts              */
/* ------------------------------------------------------------------ */

.post-body .post-author {
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	background-color: var(--wp--preset--color--surface);
}

/* Beside the monogram while the text gets at least 16rem; below it on
 * phones. The wrap above overrides the part's nowrap layout setting. */
.post-author__text {
	flex: 1 1 16rem;
}

/* Decorative monogram, drawn so screen readers skip it and go straight to
 * the name. */
.post-author::before {
	content: "NS";
	content: "NS" / "";
	display: grid;
	flex: none;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	margin: 0;
	border: 1px solid var(--wp--preset--color--line-strong);
	background-color: var(--wp--preset--color--sunken);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1;
}

.post-author__text > * {
	margin-block: 0;
}

.post-author__text > * + * {
	margin-block-start: var(--wp--preset--spacing--10);
}

.post-author__name {
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 600;
}

.post-author__bio {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.6;
}

.post-author__more {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

.post-body .post-nav {
	container-type: inline-size;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
}

.post-nav .wp-block-post-navigation-link {
	flex: 1 1 15rem;
}

.post-nav .wp-block-post-navigation-link:empty {
	display: none;
}

.post-nav .post-navigation-link-next {
	text-align: end;
}

/* Once the two 15rem links (plus the 1.5rem gap) stack, start-align
 * "Next" like "Previous". Keep 31.5rem in step with the flex basis and
 * gap; custom properties cannot be used in the query. */
@container (width < 31.5rem) {
	.post-nav .post-navigation-link-next {
		text-align: start;
	}
}

.post-nav a {
	text-decoration: none;
}

.post-navigation-link__label {
	display: block;
	color: var(--wp--preset--color--muted-deep);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.post-navigation-link__title {
	display: block;
	margin-block-start: 0.3em;
	color: var(--wp--preset--color--heading);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}

.post-nav a:hover .post-navigation-link__title,
.post-nav a:focus-visible .post-navigation-link__title {
	color: var(--wp--preset--color--accent-bright);
}

.post-body .post-all {
	margin-block-start: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

/* Touch screens: taller hit areas on the small mono links (see the footer
 * rule in style.css). */
@media (pointer: coarse) {
	.post-author__more a,
	.post-all a {
		padding: 0.875rem var(--wp--preset--spacing--10);
		margin-inline: calc(-1 * var(--wp--preset--spacing--10));
	}

	.post-author__more a:focus:not(:focus-visible),
	.post-all a:focus:not(:focus-visible) {
		outline: none;
	}
}