/*
 * Layer: components. Long-form prose (kit .nd-article): 19px/1.7 on the 820 measure. Classic
 * content is the norm (2 items have blocks), so this styles ELEMENTS inside `.nd-prose` (the
 * post-content class), not block classes. The kit draws p/strong/links/media/link card; the rest
 * is derived (plan §6 gap). Body blockquotes get their own reading treatment, NOT the testimonial
 * size theme.json gives core/quote (that is the front page's porcelain quote).
 */
@layer components {

	.nd-prose {
		color: var(--wp--preset--color--ink);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--article);
		line-height: var(--wp--custom--line-height--article);
		overflow-wrap: break-word;
		text-wrap: pretty;
	}

	/* Rhythm: kit p { margin: 0 0 1.4em }, as a gap so the first and last child sit flush. */
	.nd-prose > * {
		margin-block: 0;
	}

	.nd-prose > * + * {
		margin-block-start: 1.4em;
	}

	/* wpautop leaves empty paragraphs around shortcodes and embeds. */
	.nd-prose p:empty {
		display: none;
	}

	.nd-prose :is(strong, b) {
		font-weight: 600;
	}

	.nd-prose a:not([class]):hover {
		color: var(--wp--preset--color--brand);
	}

	.nd-prose :is(sup, sub) {
		line-height: 0;
	}

	/* Headings: h1 in a body (2 items) reads as a section head under the page title. */
	.nd-prose :is(h1, h2, h3, h4, h5, h6) {
		text-wrap: balance;
	}

	.nd-prose > :is(h1, h2) {
		margin-block-start: var(--wp--preset--spacing--56);
		font-size: var(--wp--preset--font-size--display-s);
		letter-spacing: 0;
		line-height: var(--wp--custom--line-height--display-s);
	}

	.nd-prose > h3 {
		margin-block-start: var(--wp--preset--spacing--48);
	}

	.nd-prose > :is(h4, h5, h6) {
		margin-block-start: var(--wp--preset--spacing--40);
	}

	.nd-prose > :is(h1, h2, h3, h4, h5, h6) + * {
		margin-block-start: var(--wp--preset--spacing--16);
	}

	/* Lists. */
	.nd-prose :is(ul, ol) {
		padding-inline-start: 1.4em;
	}

	.nd-prose li + li,
	.nd-prose li > :is(ul, ol) {
		margin-block-start: 0.5em;
	}

	.nd-prose li::marker {
		color: var(--wp--preset--color--brand-deep);
	}

	.nd-prose ol > li::marker {
		font-family: var(--wp--preset--font-family--mono);
		font-size: 0.8em;
	}

	.nd-prose dt {
		font-weight: 600;
	}

	.nd-prose dd {
		margin-inline-start: 1.4em;
	}

	/* Body quote: the display italic of the kit's quote, at reading size, under a brand rule. */
	.nd-prose blockquote:not(.wp-embedded-content, .is-style-porcelain) {
		margin-inline: 0;
		padding-inline-start: 28px;
		border-inline-start: 2px solid var(--wp--preset--color--glass-border);
		color: var(--wp--preset--color--ink);
		font-family: var(--wp--preset--font-family--display);
		font-size: var(--wp--preset--font-size--row-title);
		font-style: italic;
		font-weight: 400;
		line-height: 1.35;
	}

	.nd-prose blockquote:not(.wp-embedded-content, .is-style-porcelain) > * + * {
		margin-block-start: 0.8em;
	}

	.nd-prose blockquote :is(p, ul, ol):first-child {
		margin-block-start: 0;
	}

	.nd-prose blockquote :is(cite, footer) {
		display: block;
		margin-block-start: 16px;
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--eyebrow);
		font-style: normal;
		font-weight: 600;
		letter-spacing: var(--wp--custom--tracking--byline);
		line-height: 1.4;
		text-transform: uppercase;
		color: var(--wp--preset--color--ink-soft);
	}

	/*
	 * Tables (3 site-wide, legacy fixed widths): scroll inside their own box on phones rather than
	 * widening the page. Headings typed into cells keep the cell's text size.
	 */
	.nd-prose table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		border-collapse: collapse;
		font-size: var(--wp--preset--font-size--small);
		line-height: var(--wp--custom--line-height--small);
	}

	.nd-prose :is(th, td) {
		padding: 10px 14px;
		border: 0;
		border-bottom: 1px solid var(--wp--preset--color--line);
		text-align: start;
		vertical-align: top;
	}

	.nd-prose th,
	.nd-prose thead td {
		font-weight: 600;
	}

	.nd-prose table :is(h1, h2, h3, h4, h5, h6, p) {
		margin: 0;
		font: inherit;
		letter-spacing: normal;
	}

	/* Code. */
	.nd-prose :is(code, kbd, samp) {
		padding: 0.1em 0.35em;
		border-radius: var(--wp--preset--border-radius--input-glass);
		background-color: var(--wp--preset--color--paper);
		box-shadow: 0 0 0 1px var(--wp--preset--color--line);
		font-family: var(--wp--preset--font-family--mono);
		font-size: 0.85em;
	}

	.nd-prose pre {
		overflow-x: auto;
		padding: 20px 24px;
		border-radius: var(--wp--preset--border-radius--panel);
		background-color: var(--wp--preset--color--paper);
		box-shadow: 0 0 0 1px var(--wp--preset--color--line);
		font-size: var(--wp--preset--font-size--small);
		line-height: var(--wp--custom--line-height--small);
	}

	.nd-prose pre code {
		padding: 0;
		background: none;
		box-shadow: none;
		font-size: inherit;
	}

	/* A quiet rule; the ornament wave stays a deliberate separator style. */
	.nd-prose hr:not(.is-style-ornament-wave) {
		height: 1px;
		margin-block: var(--wp--preset--spacing--48);
		border: 0;
		background-color: var(--wp--preset--color--line);
	}

	/* Images and figures (kit .nd-media radius). */
	.nd-prose img:not(.emoji, .wp-smiley) {
		height: auto;
		border-radius: var(--wp--preset--border-radius--media);
	}

	.nd-prose figure {
		margin-inline: 0;
	}

	.nd-prose figcaption {
		margin-block-start: 12px;
		color: var(--wp--preset--color--ink-soft);
		font-size: var(--wp--preset--font-size--small);
		line-height: var(--wp--custom--line-height--small);
	}

	.nd-prose .aligncenter {
		display: block;
		margin-inline: auto;
	}

	@media (min-width: 601px) {

		.nd-prose .alignleft {
			float: left;
			max-width: 50%;
			margin: 0.3em 1.5em 1em 0;
		}

		.nd-prose .alignright {
			float: right;
			max-width: 50%;
			margin: 0.3em 0 1em 1.5em;
		}
	}

	.nd-prose::after {
		content: "";
		display: table;
		clear: both;
	}

	/* Galleries: classic [gallery] markup and the gallery block. */
	.nd-prose .gallery {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 16px;
	}

	.nd-prose .gallery-item {
		margin: 0;
	}

	.nd-prose :is(.gallery-item, .wp-block-gallery .wp-block-image) img {
		width: 100%;
		object-fit: cover;
	}

	/* Video embeds (kit .nd-media): oEmbed iframes arrive bare inside a paragraph. */
	.nd-prose :is(iframe[src*="youtube.com/embed"], iframe[src*="youtube-nocookie.com/embed"], iframe[src*="player.vimeo.com"]) {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		border: 0;
		border-radius: var(--wp--preset--border-radius--card-sm);
		background-color: var(--wp--preset--color--cobalt);
		box-shadow: var(--wp--preset--shadow--island);
	}

	/* Kit: the media block is followed by 48px before the text. */
	.nd-prose > :is(p:has(> iframe:only-child), .wp-block-embed) + * {
		margin-block-start: var(--wp--preset--spacing--48);
	}

	/* A WordPress post embed's fallback link (kit .nd-link-card); core's hidden iframe stays out. */
	.nd-prose blockquote.wp-embedded-content {
		margin-inline: 0;
	}

	.nd-prose blockquote.wp-embedded-content a {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 20px;
		align-items: center;
		padding: 22px 26px;
		border-radius: var(--wp--preset--border-radius--media);
		background-color: var(--wp--preset--color--paper);
		box-shadow: 0 0 0 1px var(--wp--preset--color--line);
		color: var(--wp--preset--color--ink);
		font-family: var(--wp--preset--font-family--display);
		font-size: var(--wp--preset--font-size--row-title);
		font-weight: 500;
		line-height: 1.15;
		text-decoration: none;
		transition:
			transform var(--wp--custom--duration--base) var(--wp--custom--ease),
			box-shadow var(--wp--custom--duration--base);
	}

	.nd-prose blockquote.wp-embedded-content a::after {
		content: "→" / "";
		color: var(--wp--preset--color--brand-deep);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--cta);
		font-weight: 600;
	}

	.nd-prose blockquote.wp-embedded-content a:hover {
		box-shadow: var(--wp--preset--shadow--island);
		color: var(--wp--preset--color--ink);
	}

	.nd-prose blockquote.wp-embedded-content a:focus-visible {
		outline: 2px solid transparent;
		box-shadow: var(--wp--custom--focus-ring);
	}

	.nd-prose iframe.wp-embedded-content {
		display: none;
	}

	/* File block (block content only) and buttons in the body. */
	.nd-prose .wp-block-file {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 12px 20px;
		padding: 18px 22px;
		border-radius: var(--wp--preset--border-radius--media);
		background-color: var(--wp--preset--color--paper);
		box-shadow: 0 0 0 1px var(--wp--preset--color--line);
		font-size: var(--wp--preset--font-size--medium);
	}

	.nd-prose .wp-block-buttons {
		gap: 14px;
	}

	@media (prefers-reduced-motion: no-preference) {

		.nd-prose blockquote.wp-embedded-content a:hover {
			transform: translateY(-4px);
		}
	}
}