/* ==========================================================================
   NutriFoodGuide — the interaction chapter
   Loaded only on single posts.
   ========================================================================== */

/* --- Banner header --------------------------------------------------------
   One shared image behind a centred title. The banner is locked to the same
   measure as the body copy, so its edges line up exactly with the text below.
   Height is always less than width on tablet and up; on phones it grows only
   as far as the title needs. */
.nfg-banner {
	position: relative;
	width: min(100% - (2 * var(--nfg-gutter)), var(--nfg-reading));
	margin: var(--nfg-space-6) auto var(--nfg-space-5);
	border-radius: var(--nfg-radius-lg);
	overflow: hidden;
	isolation: isolate;
	min-height: 320px;
	background: linear-gradient(150deg, #24462F, var(--nfg-forest-deep) 60%, #101E15);
}

.nfg-banner__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.nfg-banner__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The scrim guarantees contrast. --nfg-banner-overlay is set inline from the
   Customizer and is clamped server-side so it can never drop below the level
   where white text fails WCAG AA over a light photograph. */
.nfg-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(11, 20, 14, 0.45) 0%, rgba(11, 20, 14, 0) 38%, rgba(11, 20, 14, 0) 62%, rgba(11, 20, 14, 0.45) 100%),
		rgba(22, 40, 29, var(--nfg-banner-overlay, 0.78));
}

/* A hairline of sage across the top reads as a section marker rather than
   decoration, and ties the banner to the Atlas card system. */
.nfg-banner::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	z-index: 3;
	background: linear-gradient(90deg, var(--nfg-sage), var(--nfg-amber) 55%, var(--nfg-sage));
	opacity: 0.9;
}

.nfg-banner__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: var(--nfg-space-4);
	min-height: 320px;
	padding: clamp(1.25rem, 4vw, 2.25rem);
	color: #fff;
}

/* Breadcrumb, badge and date sit left; only the title block is centred. */
.nfg-banner__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nfg-space-3);
	justify-content: flex-start;
	text-align: left;
}

.nfg-banner__center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--nfg-space-4);
	padding-block: var(--nfg-space-3);
}

.nfg-banner__bottom { text-align: left; }

.nfg-banner__title {
	margin: 0;
	color: #fff;
	font-size: clamp(1.7rem, 1.15rem + 2.6vw, 2.6rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	text-wrap: balance;
	max-width: 20ch;
	text-shadow: 0 1px 24px rgba(6, 12, 8, 0.35);
}

.nfg-banner__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--nfg-space-2);
	align-items: center;
	font-size: var(--nfg-text-sm);
	color: var(--nfg-sage-light);
}
.nfg-banner__sep { color: rgba(255, 255, 255, 0.45); }

/* Breadcrumb inherits the on-dark treatment inside the banner. */
.nfg-banner .nfg-breadcrumb { margin: 0; }
.nfg-banner .nfg-breadcrumb__list { color: var(--nfg-sage-light); }
.nfg-banner .nfg-breadcrumb a { color: var(--nfg-sage-light); }
.nfg-banner .nfg-breadcrumb a:hover { color: #fff; }
.nfg-banner .nfg-breadcrumb [aria-current="page"] { color: #fff; }
.nfg-banner .nfg-breadcrumb__item + .nfg-breadcrumb__item::before { color: rgba(255, 255, 255, 0.4); }

.nfg-badge--ondark {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
	backdrop-filter: blur(4px);
}
a.nfg-badge--ondark:hover { background: rgba(255, 255, 255, 0.24); color: #fff; }

.nfg-banner :focus-visible { outline-color: #fff; }

/* --- Byline ---------------------------------------------------------------- */
.nfg-byline {
	display: inline-flex;
	align-items: center;
	gap: var(--nfg-space-3);
	margin: 0;
	font-size: var(--nfg-text-sm);
	color: var(--nfg-sage-light);
}
.nfg-byline__name { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
.nfg-byline__name:hover { color: #fff; border-bottom-color: #fff; }
.nfg-byline__role {
	display: block;
	font-size: var(--nfg-text-xs);
	color: rgba(255, 255, 255, 0.65);
}

/* Monogram avatar — no third-party request, matches the Atlas symbol circles. */
.nfg-avatar {
	display: inline-grid;
	place-items: center;
	flex-shrink: 0;
	width: var(--nfg-avatar-size, 40px);
	height: var(--nfg-avatar-size, 40px);
	border-radius: 50%;
	background: var(--nfg-sage);
	color: var(--nfg-forest-deep);
	font-family: var(--nfg-font-display);
	font-size: calc(var(--nfg-avatar-size, 40px) * 0.42);
	font-weight: 600;
	line-height: 1;
}
.nfg-avatar__img { border-radius: 50%; }

/* --- Chapter frame ---------------------------------------------------------- */
.nfg-chapter__standfirst {
	width: min(100% - (2 * var(--nfg-gutter)), var(--nfg-reading));
	margin: 0 auto var(--nfg-space-6);
	font-family: var(--nfg-font-display);
	font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem);
	line-height: 1.5;
	color: var(--nfg-muted);
	text-align: center;
	text-wrap: pretty;
}

.nfg-chapter__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-content: center;
	gap: var(--nfg-space-6);
	padding-inline: var(--nfg-gutter);
}

.nfg-chapter__body {
	min-width: 0;
	width: min(100%, var(--nfg-reading));
	margin-inline: auto;
}
.nfg-chapter__body > * { margin-inline: 0; }

/* Lead paragraph gets a touch more presence than the rest of the copy. */
.nfg-chapter__body > p:first-of-type {
	font-size: 1.15em;
	line-height: 1.6;
	color: var(--nfg-ink);
}

/* --- Table of contents ------------------------------------------------------
   A plain anchor list. On wide screens it becomes a sticky rail; on mobile it
   collapses to a compact card above the article. */
.nfg-toc {
	background: var(--nfg-panel-warm);
	border: 1px solid var(--nfg-line);
	border-radius: var(--nfg-radius-md);
	padding: var(--nfg-space-4) var(--nfg-space-5);
}

.nfg-toc__title {
	font-family: var(--nfg-font-body);
	font-size: var(--nfg-text-xs);
	letter-spacing: var(--nfg-tracking-wide);
	text-transform: uppercase;
	color: var(--nfg-moss);
	margin: 0 0 var(--nfg-space-3);
}

.nfg-toc__list {
	margin: 0;
	padding: 0 0 0 1.1rem;
	display: grid;
	gap: var(--nfg-space-2);
	font-size: var(--nfg-text-sm);
}
.nfg-toc__list::marker { color: var(--nfg-muted); }
.nfg-toc__list a { color: var(--nfg-muted); text-decoration: none; }
.nfg-toc__list a:hover { color: var(--nfg-forest); text-decoration: underline; }
.nfg-toc__list a.is-current,
.nfg-toc__list a[aria-current="true"] {
	color: var(--nfg-forest-deep);
	font-weight: 600;
}

/* --- Quick answer ------------------------------------------------------------ */
.nfg-answer {
	background: var(--nfg-sage-light);
	border-radius: var(--nfg-radius-md);
	padding: var(--nfg-space-5) clamp(1.25rem, 3vw, 2rem);
	margin-block: var(--nfg-space-6);
}
.nfg-answer__text {
	font-family: var(--nfg-font-display);
	font-size: var(--nfg-text-lg);
	line-height: 1.5;
	color: var(--nfg-forest-deep);
	margin: 0;
}

.nfg-standfirst {
	font-size: var(--nfg-text-lg);
	line-height: 1.55;
	color: var(--nfg-muted);
}

/* --- At a glance table --------------------------------------------------------- */
.nfg-glance { margin-block: var(--nfg-space-6); }
.nfg-glance table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.97rem;
}
.nfg-glance th,
.nfg-glance td {
	text-align: left;
	padding: var(--nfg-space-3) var(--nfg-space-4);
	border-bottom: 1px solid var(--nfg-line);
	vertical-align: top;
}
.nfg-glance th {
	width: 34%;
	font-family: var(--nfg-font-body);
	font-size: var(--nfg-text-sm);
	font-weight: 600;
	color: var(--nfg-moss);
}
.nfg-glance tr:last-child th,
.nfg-glance tr:last-child td { border-bottom: 0; }

/* --- Relationship diagram --------------------------------------------------------
   The signature element: two nodes joined by a dotted connector. Built from
   real text, so it degrades to a readable sentence when styles are absent. */
.nfg-relationship {
	background: var(--nfg-panel-warm);
	border: 1px solid var(--nfg-line);
	border-radius: var(--nfg-radius-lg);
	padding: clamp(1.5rem, 4vw, 2.75rem);
	margin-block: var(--nfg-space-6);
}

.nfg-relationship__diagram {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--nfg-space-3);
	text-align: center;
}

.nfg-node {
	display: grid;
	place-items: center;
	width: 8.5rem;
	height: 8.5rem;
	margin: 0;
	padding: var(--nfg-space-3);
	border-radius: 50%;
	font-family: var(--nfg-font-display);
	font-size: 1.02rem;
	line-height: 1.2;
	text-wrap: balance;
}
.nfg-node--a { background: var(--nfg-amber-soft); color: #6B4A11; }
.nfg-node--b { background: var(--nfg-forest); color: #fff; }

.nfg-relationship__link {
	position: relative;
	margin: 0;
	font-size: var(--nfg-text-sm);
	color: var(--nfg-muted);
	font-style: italic;
	padding-block: var(--nfg-space-4);
}
.nfg-relationship__link::before,
.nfg-relationship__link::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 0;
	height: var(--nfg-space-3);
	border-left: 2px dotted var(--nfg-sage);
}
.nfg-relationship__link::before { top: 0; }
.nfg-relationship__link::after { bottom: 0; }

.nfg-relationship__caption {
	margin: var(--nfg-space-5) 0 0;
	font-size: 0.95rem;
	color: var(--nfg-muted);
	text-align: center;
	max-width: 58ch;
	margin-inline: auto;
}

/* --- Food examples ---------------------------------------------------------------- */
.nfg-foods { margin-block: var(--nfg-space-7); }
.nfg-foods__image { margin: 0 0 var(--nfg-space-3); }
.nfg-foods__image img { border-radius: var(--nfg-radius-md); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.nfg-foods__image:not(:has(img)) {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--nfg-radius-md);
	background: linear-gradient(150deg, var(--nfg-panel-warm), var(--nfg-panel));
}
.nfg-foods__name { font-size: var(--nfg-text-md); margin-bottom: var(--nfg-space-2); }
.nfg-foods p { color: var(--nfg-muted); font-size: 0.97rem; }

/* --- Evidence cards ------------------------------------------------------------------
   Certainty is encoded in the left rule, not in colour alone: each card also
   carries a written label. */
.nfg-evidence-cards { margin-block: var(--nfg-space-7); display: grid; gap: var(--nfg-space-4); }

.nfg-evidence-card {
	background: var(--nfg-surface);
	border: 1px solid var(--nfg-line);
	border-left-width: 4px;
	border-radius: var(--nfg-radius-md);
	padding: var(--nfg-space-5);
}
.nfg-evidence-card p:last-child { margin-bottom: 0; }
.nfg-evidence-card__label {
	font-size: var(--nfg-text-xs);
	letter-spacing: var(--nfg-tracking-wide);
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: var(--nfg-space-2);
}
.nfg-evidence-card--established { border-left-color: var(--nfg-moss); }
.nfg-evidence-card--established .nfg-evidence-card__label { color: var(--nfg-moss); }
.nfg-evidence-card--context { border-left-color: var(--nfg-amber); }
.nfg-evidence-card--context .nfg-evidence-card__label { color: var(--nfg-amber-text); }
.nfg-evidence-card--uncertain { border-left-color: #6C5F86; }
.nfg-evidence-card--uncertain .nfg-evidence-card__label { color: #6C5F86; }

/* --- Limits, takeaway, sources ---------------------------------------------------------- */
.nfg-limits { margin-block: var(--nfg-space-7); }
.nfg-limits ul { color: var(--nfg-muted); }

.nfg-takeaway {
	background: var(--nfg-forest-deep);
	color: #E8EDE6;
	border-radius: var(--nfg-radius-lg);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	margin-block: var(--nfg-space-7);
}
.nfg-takeaway .nfg-eyebrow { color: var(--nfg-sage); }
.nfg-takeaway p:last-child { margin-bottom: 0; }

.nfg-sources { margin-block: var(--nfg-space-7); }
.nfg-sources__note { font-size: var(--nfg-text-sm); color: var(--nfg-muted); }
.nfg-sources__list { font-size: 0.95rem; color: var(--nfg-muted); }
.nfg-sources__list li { margin-bottom: var(--nfg-space-3); }

/* --- FAQ ------------------------------------------------------------------------------
   Native <details>, so it is keyboard accessible and open-by-default when
   JavaScript is unavailable in the browser's find-on-page. */
.nfg-faq { margin-block: var(--nfg-space-7); }

.nfg-faq__item {
	border-bottom: 1px solid var(--nfg-line);
	padding-block: var(--nfg-space-4);
}
.nfg-faq__item summary {
	cursor: pointer;
	font-family: var(--nfg-font-display);
	font-size: var(--nfg-text-md);
	color: var(--nfg-forest-deep);
	list-style: none;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--nfg-space-4);
}
.nfg-faq__item summary::-webkit-details-marker { display: none; }
.nfg-faq__item summary::after {
	content: "+";
	flex-shrink: 0;
	font-family: var(--nfg-font-body);
	font-size: 1.3rem;
	line-height: 1;
	color: var(--nfg-moss);
	transition: transform var(--nfg-duration) var(--nfg-ease);
}
.nfg-faq__item[open] summary::after { content: "−"; }
.nfg-faq__item > *:not(summary) { margin-top: var(--nfg-space-3); color: var(--nfg-muted); }

/* --- Knowledge check --------------------------------------------------------------------- */
.nfg-quiz {
	background: var(--nfg-panel-warm);
	border: 1px solid var(--nfg-line);
	border-radius: var(--nfg-radius-lg);
	padding: clamp(1.25rem, 3vw, 2rem);
	margin-block: var(--nfg-space-7);
}

.nfg-quiz__field { border: 0; margin: 0; padding: 0; }
.nfg-quiz__legend { padding: 0; }
.nfg-quiz__question {
	display: block;
	font-family: var(--nfg-font-display);
	font-size: var(--nfg-text-md);
	color: var(--nfg-forest-deep);
	margin-bottom: var(--nfg-space-4);
}

.nfg-quiz__options { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nfg-space-2); }
.nfg-quiz__option { display: flex; align-items: center; gap: var(--nfg-space-3); }
.nfg-quiz__option input { flex-shrink: 0; width: 1.1rem; height: 1.1rem; accent-color: var(--nfg-forest); }
.nfg-quiz__option label {
	flex: 1;
	padding: var(--nfg-space-3) var(--nfg-space-4);
	background: var(--nfg-surface);
	border: 1px solid var(--nfg-line);
	border-radius: var(--nfg-radius-sm);
	cursor: pointer;
	font-size: 0.97rem;
}
.nfg-quiz__option label:hover { border-color: var(--nfg-sage); }
.nfg-quiz__option label.is-chosen { border-color: var(--nfg-line-strong); background: var(--nfg-panel); }
.nfg-quiz__option label.is-answer { border-color: var(--nfg-moss); background: var(--nfg-sage-light); }

.nfg-quiz__result {
	margin: var(--nfg-space-4) 0 0;
	font-size: 0.95rem;
	color: var(--nfg-forest-deep);
}

.nfg-quiz__reveal { margin-top: var(--nfg-space-4); }
.nfg-quiz__reveal summary {
	cursor: pointer;
	font-size: var(--nfg-text-sm);
	font-weight: 600;
	color: var(--nfg-forest);
}
.nfg-quiz__answer { margin-top: var(--nfg-space-3); font-size: 0.95rem; color: var(--nfg-muted); }

/* --- Entities and editorial note ------------------------------------------------------------ */
.nfg-entities {
	margin-top: var(--nfg-space-7);
	padding-top: var(--nfg-space-5);
	border-top: 1px solid var(--nfg-line);
}
.nfg-entities__title {
	font-family: var(--nfg-font-body);
	font-size: var(--nfg-text-xs);
	letter-spacing: var(--nfg-tracking-wide);
	text-transform: uppercase;
	color: var(--nfg-muted);
	margin-bottom: var(--nfg-space-3);
}

.nfg-note--editorial {
	margin-top: var(--nfg-space-6);
	background: var(--nfg-panel);
	color: var(--nfg-muted);
}
.nfg-note--editorial p:last-child { margin-bottom: 0; }

/* --- Related + post navigation ----------------------------------------------------------------- */
.nfg-related {
	margin-top: var(--nfg-space-8);
	padding-block: var(--nfg-space-7);
	background: var(--nfg-panel);
}

.nfg-postnav {
	display: grid;
	gap: var(--nfg-space-4);
	margin-block: var(--nfg-space-7);
}
.nfg-postnav__link {
	display: block;
	padding: var(--nfg-space-5);
	border: 1px solid var(--nfg-line);
	border-radius: var(--nfg-radius-md);
	background: var(--nfg-surface);
	text-decoration: none;
	transition: border-color var(--nfg-duration) var(--nfg-ease);
}
.nfg-postnav__link:hover { border-color: var(--nfg-sage); }
.nfg-postnav__label {
	display: block;
	font-size: var(--nfg-text-xs);
	letter-spacing: var(--nfg-tracking-wide);
	text-transform: uppercase;
	color: var(--nfg-moss);
	margin-bottom: var(--nfg-space-2);
}
.nfg-postnav__title {
	font-family: var(--nfg-font-display);
	font-size: var(--nfg-text-md);
	color: var(--nfg-forest-deep);
}
.nfg-postnav__link--next { text-align: right; }

/* ==========================================================================
   Wide screens
   ========================================================================== */
@media (min-width: 782px) {
	.nfg-relationship__diagram { flex-direction: row; justify-content: center; gap: var(--nfg-space-5); }

	.nfg-relationship__link { padding-block: 0; padding-inline: var(--nfg-space-5); }
	.nfg-relationship__link::before,
	.nfg-relationship__link::after {
		left: auto;
		top: 50%;
		width: var(--nfg-space-4);
		height: 0;
		border-left: 0;
		border-top: 2px dotted var(--nfg-sage);
	}
	.nfg-relationship__link::before { left: 0; }
	.nfg-relationship__link::after { right: 0; }

	.nfg-postnav { grid-template-columns: 1fr 1fr; }
}

/* Below the three-column breakpoint (1320px) the contents list simply sits above the
   article, still as plain anchor links. */
@media (max-width: 1319px) {
	.nfg-chapter__aside {
		width: min(100%, var(--nfg-reading));
		margin-inline: auto;
	}
}

/* Wide screens: a symmetrical grid keeps the body copy optically centred on
   the page and in line with the banner, while the contents list occupies the
   left gutter rather than pushing the text off-centre. */
@media (min-width: 1320px) {
	.nfg-chapter__layout {
		grid-template-columns: 1fr min(var(--nfg-reading), 100%) 1fr;
		gap: 0;
		align-items: start;
	}

	.nfg-chapter__aside {
		grid-column: 1;
		grid-row: 1;
		justify-self: end;
		width: 200px;
		margin-right: var(--nfg-space-5);
		position: sticky;
		top: 6.5rem;
	}

	.nfg-chapter__body {
		grid-column: 2;
		grid-row: 1;
	}
}


/* --- Long author section ------------------------------------------------------ */
.nfg-author {
	display: grid;
	gap: var(--nfg-space-4);
	margin-top: var(--nfg-space-7);
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--nfg-panel-warm);
	border: 1px solid var(--nfg-line);
	border-radius: var(--nfg-radius-lg);
}

.nfg-author__portrait .nfg-avatar {
	background: var(--nfg-forest);
	color: #fff;
}

.nfg-author__name {
	font-size: var(--nfg-text-lg);
	margin: 0 0 var(--nfg-space-2);
}
.nfg-author__name a { color: var(--nfg-forest-deep); text-decoration: none; }
.nfg-author__name a:hover { text-decoration: underline; }

.nfg-author__role {
	margin: 0 0 var(--nfg-space-3);
	font-size: var(--nfg-text-sm);
	color: var(--nfg-moss);
}

.nfg-author__bio {
	margin: 0 0 var(--nfg-space-4);
	color: var(--nfg-muted);
	font-size: 0.97rem;
}

.nfg-author__links {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nfg-space-2) var(--nfg-space-5);
	font-size: var(--nfg-text-sm);
}
.nfg-author__count { color: var(--nfg-muted); }
.nfg-author__site { color: var(--nfg-forest); }

.nfg-author--compact { align-items: center; }
.nfg-author--compact .nfg-author__bio { display: none; }

@media (min-width: 600px) {
	.nfg-author {
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--nfg-space-5);
		align-items: start;
	}
	.nfg-author--compact { align-items: center; }
}

@media (min-width: 600px) {
	.nfg-banner { min-height: 0; aspect-ratio: 16 / 9; }
	.nfg-banner__inner { min-height: 0; height: 100%; }
}

@media (min-width: 1000px) {
	.nfg-banner { aspect-ratio: 2 / 1; min-height: 380px; }
}

@media print {
	.nfg-header, .nfg-footer, .nfg-toc, .nfg-related, .nfg-postnav, .nfg-quiz { display: none; }
	.nfg-banner { min-height: 0; aspect-ratio: auto; }
	.nfg-banner::after { background: none; }
	.nfg-banner__title, .nfg-banner__meta, .nfg-byline { color: #000; }
	.nfg-faq__item > *:not(summary) { display: block; }
}