/**
 * NutriScrolls editorial templates: blog index and categories, blog article, long text pages, search, 404
 * (Figma "07 Templates · Editorial"). Enqueued in functions.php and added as editor style.
 * Tokens only (TOKENS.md); no hex values.
 */

:root {
	--ns-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3Cpath d='M12 11v5M12 8v.5'/%3E%3C/svg%3E");
	--ns-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9.5 16h-19L12 4Z'/%3E%3Cpath d='M12 10v4M12 17v.5'/%3E%3C/svg%3E");
	--ns-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
	--ns-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
	--ns-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.33 8h9.34M8.67 12l4-4-4-4'/%3E%3C/svg%3E");
	--ns-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.33 8l3.34 3.33 6.66-6.66'/%3E%3C/svg%3E");
	--ns-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4l4 4-4 4'/%3E%3C/svg%3E");
	--ns-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 9.17a5.83 5.83 0 1 1-11.67 0 5.83 5.83 0 0 1 11.67 0ZM16.67 16.67l-3.34-3.34'/%3E%3C/svg%3E");
}

/* ---------- Shared bits ---------- */

.ns-eyebrow-terms,
.ns-post-card__eyebrow,
.ns-featured__eyebrow,
.ns-tile__kicker,
.ns-result__eyebrow {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: var(--wp--custom--line-height--eyebrow);
	margin: 0;
	text-transform: uppercase;
}
.ns-eyebrow-terms a,
.ns-post-card__eyebrow a {
	color: inherit;
	text-decoration: none;
}
.ns-eyebrow-terms a:hover,
.ns-post-card__eyebrow a:hover {
	text-decoration: underline;
}

.ns-lead,
.ns-hero-band__lead {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--lead);
	line-height: var(--wp--custom--line-height--lead);
	max-width: 760px;
}
.ns-lead p {
	margin: 0;
}

.ns-count {
	background: var(--wp--preset--color--surface-strong);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--data);
	font-variant-numeric: tabular-nums;
	line-height: var(--wp--custom--line-height--data);
	margin: 0;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	white-space: nowrap;
}

.ns-section__title,
.ns-section-head__title {
	font-size: var(--wp--preset--font-size--h-2);
	line-height: var(--wp--custom--line-height--h-2);
	margin: 0;
}
.ns-section__title--small {
	font-size: var(--wp--preset--font-size--h-4);
	line-height: var(--wp--custom--line-height--h-4);
}
.ns-section > * + * {
	margin-block-start: var(--wp--preset--spacing--60);
}

.ns-empty-note {
	color: var(--wp--preset--color--ink-muted);
}

/* ---------- Hero band (blog index, category, search) ---------- */

.ns-hero-band .ns-breadcrumbs {
	margin-block-end: calc(-1 * var(--wp--preset--spacing--20));
}
.ns-title-row {
	align-items: baseline !important;
	column-gap: var(--wp--preset--spacing--50);
	row-gap: var(--wp--preset--spacing--20);
}
.ns-title-row > * {
	margin: 0;
}
.ns-hero-band__title {
	margin: 0;
}
.ns-hero-band__tools {
	gap: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--20);
}

/* Search field (Figma "Search field" lg): icon left, 52 px. */
.ns-search-field {
	flex: 0 1 560px;
	max-width: 100%;
}
.ns-search-field .wp-block-search__inside-wrapper {
	background: var(--wp--preset--color--surface-raised);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line-strong);
	border-radius: var(--wp--custom--radius--md);
	gap: 0;
	min-height: 52px;
	padding: 0;
}
.ns-search-field .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--action);
	box-shadow: 0 0 0 1px var(--wp--preset--color--action);
}
.ns-search-field .wp-block-search__input {
	background: transparent;
	border: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	min-height: 50px;
	padding-inline: 0 var(--wp--preset--spacing--40);
}
.ns-search-field .wp-block-search__input:focus-visible {
	outline: none;
}
.ns-search-field .wp-block-search__button {
	background: transparent !important;
	color: var(--wp--preset--color--ink-muted) !important;
	margin: 0;
	min-height: 50px;
	order: -1;
	padding: 0 var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--40) !important;
}
.ns-search-field .wp-block-search__button:hover {
	color: var(--wp--preset--color--action) !important;
}
.ns-search-field .wp-block-search__button svg {
	height: 20px;
	width: 20px;
}
.ns-search-field--large {
	flex-basis: 740px;
}
.ns-not-found .ns-search-field {
	width: 100%;
}

/* Filter chips (Figma "Filter chip"): links, the current one filled. */
.ns-chips__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	margin: 0;
	padding: 0;
}
.ns-chips__list li {
	margin: 0;
}
.ns-chip {
	align-items: center;
	background: var(--wp--preset--color--surface-raised);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line-strong);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label-small);
	font-weight: 600;
	gap: var(--wp--preset--spacing--20);
	line-height: var(--wp--custom--line-height--label-small);
	min-height: 36px;
	padding: 0 var(--wp--preset--spacing--40);
	text-decoration: none;
	transition: var(--ns-transition-hover, background-color 120ms, border-color 120ms);
	white-space: nowrap;
}
.ns-chip:hover {
	border-color: var(--wp--preset--color--action);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.ns-chip.is-selected {
	background: var(--wp--preset--color--action);
	border-color: var(--wp--preset--color--action);
	color: var(--wp--preset--color--on-action);
}
.ns-chip.is-selected::before {
	background-color: currentcolor;
	content: "";
	height: 16px;
	-webkit-mask: var(--ns-icon-check) center / contain no-repeat;
	mask: var(--ns-icon-check) center / contain no-repeat;
	width: 16px;
}
@media (max-width: 599px) {
	.ns-chip {
		min-height: 44px;
	}
	.ns-search-field {
		flex-basis: 100%;
	}
}

/* ---------- Featured article (blog index) ---------- */

.ns-featured {
	align-items: center;
	background: var(--wp--preset--color--surface-raised);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	position: relative;
	transition: var(--ns-transition-hover, box-shadow 120ms);
}
.ns-featured:hover {
	box-shadow: var(--wp--preset--shadow--md);
}
.ns-featured__media {
	aspect-ratio: 16 / 10;
	background: var(--wp--preset--color--surface-strong);
	height: 100%;
}
.ns-featured__img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}
.ns-featured__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}
.ns-featured__body > * {
	margin: 0;
}
.ns-featured__title {
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: var(--wp--custom--line-height--h-2);
}
.ns-featured__link {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	width: fit-content;
}
.ns-featured__link::after {
	content: "";
	inset: 0;
	position: absolute;
}
.ns-featured:hover .ns-featured__link {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}
.ns-featured__excerpt {
	color: var(--wp--preset--color--ink-muted);
}
.ns-featured__meta {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--caption);
}
.ns-featured__button {
	align-items: center;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--action);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--link-default);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--label);
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--50);
}
@media (min-width: 782px) {
	.ns-featured {
		grid-template-columns: 55% minmax(0, 1fr);
	}
	.ns-featured__media {
		aspect-ratio: 8 / 5;
	}
	.ns-featured__body {
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--80);
	}
}

/* ---------- Section head ("Latest articles" + count) ---------- */

.ns-section-head {
	align-items: flex-end !important;
	gap: var(--wp--preset--spacing--40);
}
.ns-section-head > * {
	margin: 0;
}
.ns-section-head__meta {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--caption);
}
.ns-section-head + .ns-post-query {
	margin-block-start: var(--wp--preset--spacing--60);
}
/* The featured post is the first post of the main query: do not repeat it in the grid. */
.ns-section-head--skip-first + .ns-post-query .ns-post-grid > li:first-child {
	display: none;
}

/* ---------- Blog post card (Figma "Blog post card" 23:719) ---------- */

.ns-post-grid {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ns-post-grid > li {
	display: flex;
	margin: 0;
}
.ns-post-card {
	background: var(--wp--preset--color--surface-raised);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	transition: var(--ns-transition-hover, box-shadow 120ms);
	width: 100%;
}
.ns-post-card:hover,
.ns-post-card:has(.ns-post-card__title a:focus-visible) {
	box-shadow: var(--wp--preset--shadow--md);
}
/* Keyboard focus on a card: a clear ring around the whole card, not only a faint shadow. */
.ns-post-card:has(a:focus-visible),
.is-style-card:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 2px;
}
.ns-post-card > * + * {
	margin-block-start: 0 !important;
}
.ns-post-card__media {
	background: var(--wp--preset--color--surface-strong);
	margin: 0;
}
.ns-post-card__media img {
	display: block;
}
.ns-post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--50);
}
.ns-post-card__body > * {
	margin: 0 !important;
}
.ns-post-card__eyebrow {
	position: relative;
	z-index: 1;
}
.ns-post-card__title {
	font-size: var(--wp--preset--font-size--h-5);
	font-weight: 600;
	letter-spacing: 0;
	line-height: var(--wp--custom--line-height--h-5);
}
.ns-post-card__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.ns-post-card__title a::after {
	content: "";
	inset: 0;
	position: absolute;
}
.ns-post-card__title a:focus-visible {
	outline: none;
}
.ns-post-card:hover .ns-post-card__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}
.ns-post-card .ns-post-card__excerpt,
.ns-post-card .ns-post-card__excerpt p {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: var(--wp--custom--line-height--body-small);
}
.ns-post-card__excerpt p {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	margin: 0;
	overflow: hidden;
}
.ns-post-card__excerpt .wp-block-post-excerpt__more-text {
	display: none;
}
.ns-post-card__meta {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--data-small);
	font-variant-numeric: tabular-nums;
	gap: 0 !important;
	line-height: var(--wp--custom--line-height--data-small);
	margin-block-start: auto !important;
	padding-block-start: var(--wp--preset--spacing--10);
}
.ns-post-card .ns-post-card__meta > * {
	color: inherit;
	font: inherit;
	margin: 0;
}
.ns-post-card__meta > * + *::before {
	content: "\00a0·\00a0";
}

/* Pagination (Figma "Pagination" 16:178) */
.ns-pagination {
	align-items: center;
	margin-block-start: var(--wp--preset--spacing--70);
}
.ns-pagination a,
.ns-pagination .page-numbers {
	align-items: center;
	border-radius: var(--wp--custom--radius--md);
	display: inline-flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
}
.ns-pagination .wp-block-query-pagination-numbers {
	display: flex;
	gap: var(--wp--preset--spacing--10);
}
.ns-pagination .page-numbers {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--data);
	font-weight: 600;
}
.ns-pagination .page-numbers.current {
	background: var(--wp--preset--color--action);
	color: var(--wp--preset--color--on-action);
}
.ns-pagination .wp-block-query-pagination-previous,
.ns-pagination .wp-block-query-pagination-next {
	color: var(--wp--preset--color--link-default);
	font-size: var(--wp--preset--font-size--label);
	gap: var(--wp--preset--spacing--20);
}

/* ---------- Info tiles (Figma "Info tile" 32:14) ---------- */

.ns-tiles {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}
.ns-tiles > li {
	display: flex;
	margin: 0;
}
@media (min-width: 900px) {
	.ns-tiles--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.ns-tile {
	background: var(--wp--preset--color--surface-raised);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--50);
	position: relative;
	transition: var(--ns-transition-hover, box-shadow 120ms);
	width: 100%;
}
.ns-tile:hover,
.ns-tile:has(.ns-tile__link:focus-visible) {
	box-shadow: var(--wp--preset--shadow--md);
}
.ns-tile > * {
	margin: 0;
}
.ns-tile__title {
	align-items: center;
	display: flex;
	font-size: var(--wp--preset--font-size--h-5);
	font-weight: 600;
	gap: var(--wp--preset--spacing--20);
	justify-content: space-between;
	letter-spacing: 0;
	line-height: var(--wp--custom--line-height--h-5);
}
.ns-tile__title::after {
	background-color: var(--wp--preset--color--action);
	content: "";
	flex: none;
	height: 20px;
	-webkit-mask: var(--ns-icon-arrow) center / contain no-repeat;
	mask: var(--ns-icon-arrow) center / contain no-repeat;
	transition: transform var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--easing);
	width: 20px;
}
.ns-tile:hover .ns-tile__title::after {
	transform: translateX(2px);
}
.ns-tile__link {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.ns-tile__link::after {
	content: "";
	inset: 0;
	position: absolute;
}
.ns-tile__link:focus-visible {
	outline: none;
}
.ns-tile__text {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: var(--wp--custom--line-height--body-small);
}

/* ---------- Article and text page ---------- */

.ns-post-hero > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}
.ns-post-hero .ns-breadcrumbs + * {
	margin-block-start: var(--wp--preset--spacing--30);
}
.ns-post-hero__title {
	font-size: var(--wp--preset--font-size--h-1);
	line-height: var(--wp--custom--line-height--h-1);
}
/* The view-transition title is fit-content wide: keep it on the column's left edge, not centred. */
.ns-post-hero > .ns-post-hero__title {
	margin-inline-end: auto !important;
	margin-inline-start: max(0px, calc((100% - 760px) / 2)) !important;
}
.ns-post-hero .wp-block-nutriscrolls-author-line {
	margin-block-start: var(--wp--preset--spacing--50);
}
.ns-post-hero__image {
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}
.ns-post-hero__image img {
	border-radius: var(--wp--custom--radius--lg);
}
@media (max-width: 781px) {
	.ns-post-hero__image img {
		aspect-ratio: 16 / 10 !important;
	}
}

/* Contents rail + 740 px reading column (Figma "Article row"). */
.ns-article-row {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: minmax(0, 1fr);
}
.ns-article-row > * {
	margin: 0 !important;
}
@media (min-width: 1200px) {
	.ns-article-row {
		column-gap: var(--wp--preset--spacing--70);
		grid-template-columns: minmax(0, 1fr) minmax(0, var(--wp--style--global--content-size, 740px)) minmax(0, 1fr);
	}
	.ns-article-row > .wp-block-nutriscrolls-toc {
		grid-column: 1;
		grid-row: 1;
	}
	.ns-article-row > .ns-article-body {
		grid-column: 2;
		grid-row: 1;
	}
}
@media (max-width: 1199px) {
	.ns-article-row > .ns-article-body,
	.ns-article-row > .wp-block-nutriscrolls-toc {
		margin-inline: auto !important;
		max-width: var(--wp--style--global--content-size, 740px);
		width: 100%;
	}
}

/* Reading rhythm inside the post content. */
.ns-prose > h2 {
	margin-block-start: var(--wp--preset--spacing--80);
}
.ns-prose > h3 {
	margin-block-start: var(--wp--preset--spacing--60);
}
.ns-prose > h2 + *,
.ns-prose > h3 + * {
	margin-block-start: var(--wp--preset--spacing--40);
}
.ns-prose > :first-child {
	margin-block-start: 0;
}

/* ---------- Content patterns (look comes from block attributes; these add icons and lists) ---------- */

.ns-verdict > *,
.ns-callout > * {
	margin-block: 0;
}
.ns-verdict > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}
.ns-verdict__facts {
	list-style: none;
	padding-inline-start: 0;
}
.ns-verdict__facts li {
	padding-inline-start: calc(6px + var(--wp--preset--spacing--30));
	position: relative;
}
.ns-verdict__facts li + li {
	margin-block-start: var(--wp--preset--spacing--30);
}
.ns-verdict__facts li::before {
	background: var(--wp--preset--color--action);
	border-radius: 50%;
	content: "";
	height: 6px;
	left: 0;
	position: absolute;
	top: calc(var(--wp--custom--line-height--body) * 0.5em - 3px);
	width: 6px;
}
.ns-verdict .ns-tag {
	margin-inline-start: var(--wp--preset--spacing--10);
	vertical-align: 0.1em;
}

.ns-callout {
	padding-inline-start: calc(var(--wp--preset--spacing--50) + 24px + var(--wp--preset--spacing--40)) !important;
	position: relative;
}
.ns-callout::before {
	background-color: var(--wp--preset--color--ink-muted);
	content: "";
	height: 24px;
	left: var(--wp--preset--spacing--50);
	-webkit-mask: var(--ns-icon-info) center / contain no-repeat;
	mask: var(--ns-icon-info) center / contain no-repeat;
	position: absolute;
	top: var(--wp--preset--spacing--50);
	width: 24px;
}
.ns-callout--warning::before {
	background-color: var(--wp--preset--color--on-warning-subtle);
	-webkit-mask-image: var(--ns-icon-alert);
	mask-image: var(--ns-icon-alert);
}
.ns-callout * + * {
	margin-block-start: var(--wp--preset--spacing--10);
}
.ns-callout__title {
	font-size: var(--wp--preset--font-size--h-6);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--h-6);
}
.ns-callout--warning .ns-callout__title {
	color: var(--wp--preset--color--on-warning-subtle);
}
.ns-did-you-mean {
	border-inline-start: 4px solid var(--wp--preset--color--line-strong);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--50);
}
.ns-did-you-mean p {
	margin: 0;
}
.ns-callout__text {
	font-size: var(--wp--preset--font-size--body-small);
	line-height: var(--wp--custom--line-height--body-small);
}

/* FAQ (Figma "FAQ item" 25:687): plus / minus icons instead of the text glyphs of theme.json. */
/* The FAQ is its own chapter: extra space above it. */
.ns-faq {
	margin-block-start: var(--wp--preset--spacing--90);
}
.ns-faq > h2 {
	margin-block-end: var(--wp--preset--spacing--40);
}
.ns-faq .wp-block-details {
	margin-block-start: 0;
	padding-block: 0;
}
.ns-faq .wp-block-details summary {
	padding-block: var(--wp--preset--spacing--40);
}
.ns-faq .wp-block-details summary::after {
	background-color: var(--wp--preset--color--action);
	content: "";
	height: 24px;
	margin-inline-end: 10px;
	-webkit-mask: var(--ns-icon-plus) center / contain no-repeat;
	mask: var(--ns-icon-plus) center / contain no-repeat;
	width: 24px;
}
.ns-faq .wp-block-details[open] summary::after {
	content: "";
	-webkit-mask-image: var(--ns-icon-minus);
	mask-image: var(--ns-icon-minus);
}
.ns-faq .wp-block-details > :not(summary) {
	margin-block: 0;
	padding-inline-end: var(--wp--preset--spacing--80);
}
.ns-faq .wp-block-details > :last-child:not(summary) {
	padding-block-end: var(--wp--preset--spacing--50);
}

/* Sources (Figma "References list" 25:698) */
.ns-references > * {
	margin-block: 0;
}
.ns-references > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}
.ns-references__heading {
	font-family: var(--wp--preset--font-family--body);
}
.ns-references__list {
	counter-reset: ns-ref;
	list-style: none;
	padding-inline-start: 0;
}
.ns-references__list > li {
	counter-increment: ns-ref;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: 24px minmax(0, 1fr);
	margin-block-start: var(--wp--preset--spacing--30);
	overflow-wrap: anywhere; /* long URLs and DOIs on phones */
}
.ns-references__list > li::before {
	color: var(--wp--preset--color--ink-muted);
	content: counter(ns-ref) ".";
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--data-small);
	line-height: var(--wp--custom--line-height--body-small);
}
.ns-references__list > li:target {
	background: var(--wp--preset--color--action-subtle);
}

/* Study cards (patterns/study-card.php): title, key finding (the focus), what was done, then the meta line. */
.ns-study {
	background: var(--wp--preset--color--surface-raised);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--50);
}
.ns-study + .ns-study {
	margin-block-start: var(--wp--preset--spacing--40);
}
.ns-study > * {
	margin-block: 0;
}
/* The key finding is the card's heading: a plain sentence in ink, the result itself bold on a soft blue highlighter (mark.ns-hl). */
.ns-study__key {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.3;
	text-wrap: pretty;
}
.ns-study__key .ns-hl {
	background: var(--wp--preset--color--highlighter);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--on-highlighter);
	font-weight: 800;
	margin: 0;
	padding: 0.02em 0.22em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
@media (min-width: 640px) {
	.ns-study__key {
		font-size: var(--wp--preset--font-size--h-3);
	}
}
.ns-study__about {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: var(--wp--custom--line-height--body-small);
	margin-block-start: var(--wp--preset--spacing--30);
}
.ns-study__meta {
	align-items: center;
	border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line);
	column-gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--30);
	row-gap: var(--wp--preset--spacing--20);
}
.ns-study__meta > * {
	margin-block: 0;
}
.ns-study__cite,
.ns-study__link {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--line-height--caption);
}
.ns-study__link {
	font-weight: 500;
	margin-inline-start: auto;
}
.ns-study__link a {
	color: var(--wp--preset--color--link-default);
	text-underline-offset: 0.2em;
}
.ns-study__link a:hover {
	color: var(--wp--preset--color--link-hover);
}
@media (max-width: 479px) {
	.ns-study {
		padding: var(--wp--preset--spacing--40);
	}
	.ns-study__link {
		margin-inline-start: 0;
	}
}

/* "Show N more studies" (core/details, class ns-study-more) after the 4th card: link-coloured text plus a chevron that
   flips when open, like "Full breakdown" in the nutrition panel. The cards inside keep the gap between cards.
   assets/js/study-more.js swaps the text to "Show fewer" while it is open. */
.wp-block-details.ns-study-more {
	border: 0;
	margin-block-start: var(--wp--preset--spacing--40);
	padding: 0;
}
.wp-block-details.ns-study-more > summary {
	align-items: center;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--link-default);
	cursor: pointer;
	display: flex;
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 600;
	gap: var(--wp--preset--spacing--10);
	justify-content: flex-start;
	line-height: var(--wp--custom--line-height--body-small);
	list-style: none;
	min-height: 44px;
	width: fit-content;
}
.wp-block-details.ns-study-more > summary::-webkit-details-marker {
	display: none;
}
.wp-block-details.ns-study-more > summary:hover {
	color: var(--wp--preset--color--link-hover);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.wp-block-details.ns-study-more > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 2px;
}
/* The chevron icon points right; turned down when closed, up when open. */
.wp-block-details.ns-study-more > summary::after {
	background-color: currentcolor;
	color: inherit;
	content: "";
	flex: none;
	height: 20px;
	-webkit-mask: var(--ns-icon-chevron) center / contain no-repeat;
	mask: var(--ns-icon-chevron) center / contain no-repeat;
	transform: rotate(90deg);
	width: 20px;
}
.wp-block-details.ns-study-more[open] > summary::after {
	content: "";
	transform: rotate(-90deg);
}
.wp-block-details.ns-study-more > .ns-study {
	margin-block-start: var(--wp--preset--spacing--40);
}
@media (prefers-reduced-motion: no-preference) {
	.wp-block-details.ns-study-more > summary::after {
		transition: transform var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--easing);
	}
}

/* Mechanism figures (phytonutrient pages, "How {name} works"): a card like the study cards holding an inline SVG drawing,
   a caption and the meta line (cite + evidence label). The SVG draws with the classes below, so it follows dark mode:
   .f-* fill, .s-* stroke; .lbl / .sm / .val are text sizes in viewBox units (drawings are 600 units wide). */
.ns-figure {
	background: var(--wp--preset--color--surface-raised);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	margin-block: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
}
.ns-figure > * {
	margin-block: 0;
}
.ns-figure svg {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	height: auto;
	width: 100%;
}
.ns-figure__caption {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: var(--wp--custom--line-height--body-small);
	margin-block-start: var(--wp--preset--spacing--40);
}
.ns-figure .lbl { font-size: 24px; font-weight: 700; }
.ns-figure .sm { font-size: 20px; font-weight: 500; }
.ns-figure .val { font-size: 21px; font-weight: 800; }
.ns-figure .f-ink { fill: var(--wp--preset--color--ink); }
.ns-figure .f-muted { fill: var(--wp--preset--color--ink-muted); }
.ns-figure .f-panel { fill: var(--wp--preset--color--surface); }
.ns-figure .f-line { fill: var(--wp--preset--color--line); }
.ns-figure .f-white { fill: #ffffff; }
.ns-figure .f-axn { fill: #d93a25; }
.ns-figure .f-axn-soft { fill: #fbd5cc; }
.ns-figure .f-beta { fill: #e07b16; }
.ns-figure .f-lyco { fill: #c2185b; }
.ns-figure .f-good { fill: #0b7a75; }
.ns-figure .f-accent { fill: var(--wp--preset--color--accent); }
.ns-figure .f-bad { fill: #c0392b; }
.ns-figure .f-head { fill: #f2c46d; }
.ns-figure .f-off { fill: var(--wp--preset--color--line-strong); }
.ns-figure .s-axn { stroke: #d93a25; fill: none; }
.ns-figure .s-beta { stroke: #e07b16; fill: none; }
.ns-figure .s-lyco { stroke: #c2185b; fill: none; }
.ns-figure .s-tail { stroke: var(--wp--preset--color--line-strong); fill: none; }
.ns-figure .s-ink { stroke: var(--wp--preset--color--ink); fill: none; }
.ns-figure .s-muted { stroke: var(--wp--preset--color--ink-muted); fill: none; }
.ns-figure .s-halo { stroke: var(--wp--preset--color--surface-raised); fill: none; }
/* Blog charts are drawn on a narrow canvas (viewBox 420 wide) so their text stays readable on a phone; on wide screens
   they stop at 560 px and sit centred instead of growing with the column. */
.ns-figure--compact svg {
	margin-inline: auto;
	max-width: 560px;
}
/* Chart series for blog figures: the dataviz tokens switch with light and dark mode. Text on a filled bar uses f-on-dv. */
.ns-figure .f-dv1 { fill: var(--wp--preset--color--dataviz-1); }
.ns-figure .f-dv2 { fill: var(--wp--preset--color--dataviz-2); }
.ns-figure .f-dv3 { fill: var(--wp--preset--color--dataviz-3); }
.ns-figure .f-dv4 { fill: var(--wp--preset--color--dataviz-4); }
.ns-figure .f-dv5 { fill: var(--wp--preset--color--dataviz-5); }
.ns-figure .f-dv6 { fill: var(--wp--preset--color--dataviz-6); }
.ns-figure .s-dv1 { stroke: var(--wp--preset--color--dataviz-1); fill: none; }
.ns-figure .s-dv2 { stroke: var(--wp--preset--color--dataviz-2); fill: none; }
.ns-figure .s-dv3 { stroke: var(--wp--preset--color--dataviz-3); fill: none; }
.ns-figure .f-track { fill: var(--wp--preset--color--dv-track); }
.ns-figure .f-on-dv { fill: var(--wp--preset--color--bg); }
.ns-figure .s-grid { stroke: var(--wp--preset--color--line); fill: none; }
@media (max-width: 479px) {
	.ns-figure {
		padding: var(--wp--preset--spacing--40);
	}
}

/* Small source list under a section (History of oats): "Sources" label and a compact numbered list. */
.ns-sources {
	margin-block-start: var(--wp--preset--spacing--50);
}
.ns-sources > * {
	margin-block: 0;
}
.ns-sources__label {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: var(--wp--custom--line-height--eyebrow);
	text-transform: uppercase;
}
.ns-sources__list {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--line-height--caption);
	margin-block-start: var(--wp--preset--spacing--20);
	padding-inline-start: 1.25em;
}
.ns-sources__list li + li {
	margin-block-start: var(--wp--preset--spacing--10);
}

/* ---------- Search results (Figma 48:5846) ---------- */

.ns-search-results {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--80);
}
.ns-search-split {
	display: grid;
	gap: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
	.ns-search-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	}
	.ns-search-split__side .ns-search-group__cards {
		grid-template-columns: minmax(0, 1fr);
	}
}
.ns-search-split__side,
.ns-search-split__main {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--70);
}
.ns-search-group__head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	justify-content: space-between;
	margin-block-end: var(--wp--preset--spacing--50);
}
.ns-search-group__title {
	font-size: var(--wp--preset--font-size--h-3);
	line-height: var(--wp--custom--line-height--h-3);
	margin: 0;
}
.ns-search-group__count {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--data-small);
	font-weight: 400;
	letter-spacing: 0;
	margin-inline-start: var(--wp--preset--spacing--20);
	vertical-align: 0.4em;
}
.ns-search-group__all {
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 600;
}
.ns-search-group__all::after {
	background-color: currentcolor;
	content: "";
	display: inline-block;
	height: 16px;
	margin-inline-start: var(--wp--preset--spacing--10);
	-webkit-mask: var(--ns-icon-arrow) center / contain no-repeat;
	mask: var(--ns-icon-arrow) center / contain no-repeat;
	vertical-align: -0.2em;
	width: 16px;
}
.ns-search-group__cards {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ns-results {
	list-style: none;
	margin: 0;
	max-width: 740px;
	padding: 0;
}
.ns-search-split__main .ns-results {
	max-width: none;
}
.ns-result {
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line);
	display: flex;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}
.ns-result:first-child {
	padding-block-start: 0;
}
.ns-result__media {
	border-radius: var(--wp--custom--radius--md);
	flex: none;
	height: 60px;
	overflow: hidden;
	width: 60px;
}
.ns-result__img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}
.ns-result__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	min-width: 0;
}
.ns-result__body > * {
	margin: 0;
}
.ns-result__title {
	font-size: var(--wp--preset--font-size--h-5);
	font-weight: 600;
	letter-spacing: 0;
	line-height: var(--wp--custom--line-height--h-5);
}
.ns-result__link {
	color: var(--wp--preset--color--link-default);
	text-decoration: none;
}
.ns-result__link:hover {
	color: var(--wp--preset--color--link-hover);
	text-decoration: underline;
}
.ns-result__excerpt {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: var(--wp--custom--line-height--body-small);
}
.ns-result__excerpt strong {
	color: var(--wp--preset--color--ink);
}
.ns-result__url {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--data-small);
	line-height: var(--wp--custom--line-height--data-small);
	overflow-wrap: anywhere;
}

/* Empty search and 404 */
.ns-search-empty > *,
.ns-not-found > * {
	margin-block: 0;
}
.ns-search-empty > * + * {
	margin-block-start: var(--wp--preset--spacing--50);
}
.ns-search-empty .ns-section__title--small {
	margin-block-start: var(--wp--preset--spacing--60);
}
.ns-search-empty .ns-chip {
	font-weight: 600;
}
.ns-not-found > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}
.ns-not-found .is-style-eyebrow + h1 {
	margin-block-start: var(--wp--preset--spacing--40);
}
.ns-not-found .ns-search-field {
	margin-block-start: var(--wp--preset--spacing--50);
}
.ns-search-field--large .wp-block-search__inside-wrapper {
	min-height: 56px;
}

/* ---------- Food page (templates/single-food.html) ----------
 * One container, two columns from 1080 px: the text column (head, highlights, lead + author, article) and a side
 * column (photo, nutrition facts) that spans every row, so the article continues right under the author line.
 * Below 1080 px one centred column in the order head, photo, highlights, nutrition facts, lead + author, article:
 * the side group is display: contents and its children are placed with `order` (no duplicated blocks).
 * DOM order (head, highlights, side, intro, body) keeps the keyboard order equal to the visual order on mobile.
 */
.is-layout-constrained > .ns-food.alignwide {
	max-width: var(--wp--style--global--content-size, 740px);
}
.ns-food {
	--ns-food-side: clamp(380px, 30vw, 440px);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
}
.ns-food > *,
.ns-food__side > * {
	margin-block: 0 !important;
}
.ns-food__side {
	display: contents;
}
.ns-food__head { order: 1; }
.ns-food__media { order: 2; }
.ns-food > .wp-block-nutriscrolls-food-highlights { order: 3; }
.ns-food__side > .wp-block-nutriscrolls-nutrition-facts { order: 4; }
.ns-food__intro { order: 5; }
.ns-food__body { order: 6; }

.ns-food__media,
.ns-food__media img {
	border-radius: var(--wp--custom--radius--lg);
}
.ns-food__media {
	overflow: hidden;
}
.ns-food__body .ns-prose > :first-child {
	margin-block-start: 0;
}

/* Tablet: the photo spans the 740 px column, so keep it low. */
@media (min-width: 600px) and (max-width: 1079px) {
	.ns-food__media img {
		aspect-ratio: 16 / 9 !important;
	}
}

@media (min-width: 1080px) {
	.is-layout-constrained > .ns-food.alignwide {
		max-width: var(--wp--style--global--wide-size, 1312px);
	}
	.ns-food {
		column-gap: var(--wp--preset--spacing--80);
		display: grid;
		/* rows: head, highlights, intro, body; the side spans them all and only stretches the last (1fr) row */
		grid-template-columns: minmax(0, 760px) var(--ns-food-side);
		grid-template-rows: auto auto auto 1fr;
		justify-content: space-between;
		row-gap: 0;
	}
	.ns-food > * {
		grid-column: 1;
	}
	.ns-food__head { grid-row: 1; }
	.ns-food > .wp-block-nutriscrolls-food-highlights {
		grid-row: 2;
		margin-block-start: var(--wp--preset--spacing--60) !important;
	}
	.ns-food > .ns-food__intro {
		grid-row: 3;
		margin-block-start: var(--wp--preset--spacing--60) !important;
	}
	.ns-food > .ns-food__body {
		grid-row: 4;
		margin-block-start: var(--wp--preset--spacing--70) !important;
	}
	.ns-food > .ns-food__side {
		align-self: start;
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--60);
		grid-column: 2;
		grid-row: 1 / -1;
	}
}
