/* ==========================================================================
   NutriFoodGuide — base, layout, primitives
   Loaded on every page. Mobile-first: base rules describe the small screen.
   ========================================================================== */

/* --- Reset-ish ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--nfg-canvas);
	color: var(--nfg-ink);
	font-family: var(--nfg-font-body);
	font-size: var(--nfg-text-base);
	line-height: var(--nfg-leading-normal);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

h1, h2, h3, h4 {
	font-family: var(--nfg-font-display);
	font-weight: 600;
	color: var(--nfg-forest-deep);
	line-height: var(--nfg-leading-snug);
	margin: 0 0 var(--nfg-space-4);
	text-wrap: balance;
}

h1 { font-size: var(--nfg-text-3xl); line-height: var(--nfg-leading-tight); }
h2 { font-size: var(--nfg-text-2xl); }
h3 { font-size: var(--nfg-text-lg); }

p { margin: 0 0 var(--nfg-space-4); }

a { color: var(--nfg-forest); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--nfg-moss); }

/* Visible focus everywhere, never removed. */
:focus-visible {
	outline: 2px solid var(--nfg-focus);
	outline-offset: 3px;
	border-radius: var(--nfg-radius-sm);
}

/* --- Accessibility helpers ---------------------------------------------- */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

.nfg-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--nfg-space-3) var(--nfg-space-5);
	background: var(--nfg-forest);
	color: #fff;
	border-radius: 0 0 var(--nfg-radius-md) 0;
	text-decoration: none;
}
.nfg-skip-link:focus { left: 0; color: #fff; }

/* --- Layout primitives --------------------------------------------------- */
.nfg-container {
	width: 100%;
	max-width: var(--nfg-container);
	margin-inline: auto;
	padding-inline: var(--nfg-gutter);
}

.nfg-container--reading { max-width: var(--nfg-reading); }

.nfg-main { display: block; }

.nfg-panel {
	background: var(--nfg-panel);
	border-radius: var(--nfg-radius-lg);
	padding: clamp(1.5rem, 4vw, 3.25rem);
	margin-block: var(--nfg-space-7);
}

/* Block-editor alignment support. */
.nfg-main > .alignfull { width: 100%; }
.nfg-main > .alignwide,
.nfg-page > .alignwide {
	max-width: var(--nfg-container);
	margin-inline: auto;
}

.nfg-page > *:not(.alignfull) {
	max-width: var(--nfg-container);
	margin-inline: auto;
	padding-inline: var(--nfg-gutter);
}
.nfg-page > .alignfull { padding-inline: 0; max-width: none; }

/* --- Type utilities ------------------------------------------------------- */
.nfg-eyebrow {
	font-family: var(--nfg-font-body);
	font-size: var(--nfg-text-xs);
	font-weight: 600;
	letter-spacing: var(--nfg-tracking-wide);
	text-transform: uppercase;
	color: var(--nfg-moss);
	margin: 0 0 var(--nfg-space-3);
}

.nfg-meta {
	font-size: var(--nfg-text-sm);
	color: var(--nfg-muted);
	display: flex;
	flex-wrap: wrap;
	gap: var(--nfg-space-2);
	align-items: center;
}

.nfg-empty { color: var(--nfg-muted); padding-block: var(--nfg-space-7); }

.nfg-editor-hint {
	border: 1px dashed var(--nfg-line-strong);
	border-radius: var(--nfg-radius-md);
	padding: var(--nfg-space-4);
	color: var(--nfg-muted);
	font-size: var(--nfg-text-sm);
	background: var(--nfg-panel-warm);
}

/* --- Buttons -------------------------------------------------------------- */
.nfg-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--nfg-space-2);
	padding: 0.7rem 1.35rem;
	background: var(--nfg-forest);
	color: #fff;
	border: 1px solid var(--nfg-forest);
	border-radius: var(--nfg-radius-sm);
	font-size: var(--nfg-text-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background var(--nfg-duration) var(--nfg-ease), transform var(--nfg-duration) var(--nfg-ease);
}

.nfg-button:hover,
.wp-block-button__link:hover {
	background: var(--nfg-forest-deep);
	color: #fff;
}

.nfg-button .nfg-icon { transition: transform var(--nfg-duration) var(--nfg-ease); }
.nfg-button:hover .nfg-icon { transform: translateX(3px); }

.nfg-button--ghost {
	background: transparent;
	color: var(--nfg-forest);
	border-color: var(--nfg-line-strong);
}
.nfg-button--ghost:hover { background: var(--nfg-sage-light); color: var(--nfg-forest-deep); }

.nfg-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--nfg-space-2);
	font-size: var(--nfg-text-sm);
	font-weight: 600;
	color: var(--nfg-forest);
	text-decoration: none;
	white-space: nowrap;
}
.nfg-link-arrow:hover { text-decoration: underline; }
.nfg-link-arrow .nfg-icon { transition: transform var(--nfg-duration) var(--nfg-ease); }
.nfg-link-arrow:hover .nfg-icon { transform: translateX(3px); }

/* --- Badges and chips ------------------------------------------------------ */
.nfg-badge {
	display: inline-block;
	padding: 0.28rem 0.7rem;
	border-radius: var(--nfg-radius-pill);
	background: var(--nfg-sage-light);
	color: var(--nfg-forest-deep);
	font-size: var(--nfg-text-xs);
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
}
a.nfg-badge:hover { background: var(--nfg-sage); color: var(--nfg-forest-deep); }

.nfg-badge--quiet {
	background: transparent;
	border-color: var(--nfg-line-strong);
	color: var(--nfg-muted);
	font-weight: 500;
}

.nfg-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--nfg-space-2);
	padding: 0.42rem 0.85rem;
	border: 1px solid var(--nfg-line-strong);
	border-radius: var(--nfg-radius-pill);
	background: var(--nfg-surface);
	color: var(--nfg-ink);
	font-size: var(--nfg-text-sm);
	text-decoration: none;
	transition: background var(--nfg-duration) var(--nfg-ease), border-color var(--nfg-duration) var(--nfg-ease);
}
.nfg-chip:hover { background: var(--nfg-sage-light); border-color: var(--nfg-sage); color: var(--nfg-forest-deep); }
.nfg-chip.is-active {
	background: var(--nfg-forest);
	border-color: var(--nfg-forest);
	color: #fff;
}
.nfg-chip__count { font-size: var(--nfg-text-xs); color: var(--nfg-muted); }
.nfg-chip.is-active .nfg-chip__count { color: rgba(255, 255, 255, 0.75); }

.nfg-chip-list {
	list-style: none;
	margin: 0 0 var(--nfg-space-5);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--nfg-space-2);
}

/* --- Header ---------------------------------------------------------------- */
.nfg-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: color-mix(in srgb, var(--nfg-canvas) 92%, transparent);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--nfg-duration) var(--nfg-ease);
}
.nfg-header.is-compact { border-bottom-color: var(--nfg-line); }

.nfg-header__inner {
	max-width: var(--nfg-container);
	margin-inline: auto;
	padding: var(--nfg-space-4) var(--nfg-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nfg-space-4);
}

.nfg-brand { display: flex; align-items: center; gap: var(--nfg-space-3); }
.nfg-brand__logo img { width: auto; max-height: 44px; }
.nfg-brand__name {
	margin: 0;
	font-family: var(--nfg-font-display);
	font-size: 1.4rem;
	line-height: 1.1;
	letter-spacing: -0.01em;
}
.nfg-brand__name a { color: var(--nfg-forest-deep); text-decoration: none; }
.nfg-brand__a { font-weight: 400; }
.nfg-brand__b { font-weight: 700; }
.nfg-brand__project {
	margin: 0.15rem 0 0;
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nfg-moss);
}

.nfg-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 1px solid var(--nfg-line-strong);
	border-radius: var(--nfg-radius-sm);
	color: var(--nfg-forest-deep);
	cursor: pointer;
}
.nfg-header__toggle-close { display: none; }
.nfg-header__toggle[aria-expanded="true"] .nfg-header__toggle-open { display: none; }
.nfg-header__toggle[aria-expanded="true"] .nfg-header__toggle-close { display: inline-flex; }

/* Without JS the nav is simply always visible. */
html:not(.nfg-js) .nfg-header__toggle { display: none; }

.nfg-header__nav {
	display: flex;
	align-items: center;
	gap: var(--nfg-space-5);
}

html.nfg-js .nfg-header__nav[data-open="false"] { display: none; }

.nfg-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--nfg-space-3);
}

.nfg-nav__list a {
	color: var(--nfg-ink);
	text-decoration: none;
	font-size: var(--nfg-text-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.nfg-nav__list a:hover { color: var(--nfg-moss); }
.nfg-nav__list .current-menu-item > a { color: var(--nfg-forest); text-decoration: underline; }

.nfg-header__search-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--nfg-space-2);
	padding: 0.5rem 1rem;
	background: var(--nfg-surface);
	border: 1px solid var(--nfg-line-strong);
	border-radius: var(--nfg-radius-pill);
	color: var(--nfg-forest-deep);
	font-size: var(--nfg-text-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}
.nfg-header__search-toggle:hover { background: var(--nfg-sage-light); }

.nfg-header__search-panel {
	border-top: 1px solid var(--nfg-line);
	background: var(--nfg-canvas);
}
html.nfg-js .nfg-header__search-panel[data-open="false"] { display: none; }
.nfg-header__search-inner {
	max-width: var(--nfg-container);
	margin-inline: auto;
	padding: var(--nfg-space-4) var(--nfg-gutter);
}

/* --- Search form ------------------------------------------------------------ */
.nfg-search__field {
	display: flex;
	align-items: center;
	gap: var(--nfg-space-3);
	background: var(--nfg-surface);
	border: 1px solid var(--nfg-line-strong);
	border-radius: var(--nfg-radius-pill);
	padding: 0.35rem 0.4rem 0.35rem 1rem;
	transition: border-color var(--nfg-duration) var(--nfg-ease), box-shadow var(--nfg-duration) var(--nfg-ease);
}
.nfg-search__field:focus-within {
	border-color: var(--nfg-moss);
	box-shadow: 0 0 0 3px var(--nfg-sage-light);
}
.nfg-search__icon { display: inline-flex; color: var(--nfg-muted); }
.nfg-search__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 0.55rem 0;
	font: inherit;
	font-size: var(--nfg-text-base);
	color: var(--nfg-ink);
}
.nfg-search__input:focus { outline: none; }
.nfg-search__submit {
	flex-shrink: 0;
	padding: 0.55rem 1.15rem;
	border: 0;
	border-radius: var(--nfg-radius-pill);
	background: var(--nfg-forest);
	color: #fff;
	font-size: var(--nfg-text-sm);
	font-weight: 600;
	cursor: pointer;
}
.nfg-search__submit:hover { background: var(--nfg-forest-deep); }

/* --- Breadcrumbs ------------------------------------------------------------- */
.nfg-breadcrumb { margin-bottom: var(--nfg-space-4); }
.nfg-breadcrumb__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--nfg-space-2);
	font-size: var(--nfg-text-sm);
	color: var(--nfg-muted);
}
.nfg-breadcrumb__item + .nfg-breadcrumb__item::before {
	content: "/";
	margin-right: var(--nfg-space-2);
	color: var(--nfg-line-strong);
}
.nfg-breadcrumb a { color: var(--nfg-muted); text-decoration: none; }
.nfg-breadcrumb a:hover { color: var(--nfg-forest); text-decoration: underline; }
.nfg-breadcrumb [aria-current="page"] { color: var(--nfg-ink); }

/* --- Pagination --------------------------------------------------------------- */
.wp-block-query-pagination,
.navigation.pagination {
	margin-block: var(--nfg-space-7);
	display: flex;
	justify-content: center;
}
.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nfg-space-2);
	align-items: center;
}
.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.6rem;
	border: 1px solid var(--nfg-line-strong);
	border-radius: var(--nfg-radius-sm);
	color: var(--nfg-ink);
	text-decoration: none;
	font-size: var(--nfg-text-sm);
}
.navigation.pagination .page-numbers:hover { background: var(--nfg-sage-light); }
.navigation.pagination .page-numbers.current {
	background: var(--nfg-forest);
	border-color: var(--nfg-forest);
	color: #fff;
}
.navigation.pagination .page-numbers.dots { border-color: transparent; }

/* --- Footer -------------------------------------------------------------------- */
.nfg-footer {
	margin-top: var(--nfg-space-8);
	background: var(--nfg-forest-deep);
	color: #E8EDE6;
}
.nfg-footer a { color: #E8EDE6; text-decoration: none; }
.nfg-footer a:hover { color: #fff; text-decoration: underline; }

.nfg-footer__inner {
	max-width: var(--nfg-container);
	margin-inline: auto;
	padding: var(--nfg-space-8) var(--nfg-gutter) var(--nfg-space-6);
	display: grid;
	gap: var(--nfg-space-6);
}

.nfg-footer__name {
	font-family: var(--nfg-font-display);
	font-size: 1.5rem;
	margin: 0;
	color: #fff;
}
.nfg-footer__project {
	margin: var(--nfg-space-2) 0 0;
	font-size: var(--nfg-text-sm);
	color: #B9C7B5;
	max-width: 34ch;
}

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

.nfg-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--nfg-space-2);
	font-size: var(--nfg-text-sm);
}

.nfg-footer__base {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.nfg-footer__base > * {
	max-width: var(--nfg-container);
	margin-inline: auto;
	padding-inline: var(--nfg-gutter);
}
.nfg-footer__disclaimer {
	padding-top: var(--nfg-space-5);
	font-size: var(--nfg-text-sm);
	color: #A9BBA5;
	max-width: 80ch;
}
.nfg-footer__copyright {
	padding-bottom: var(--nfg-space-6);
	font-size: var(--nfg-text-sm);
	color: #8FA48B;
}

/* --- Prose ---------------------------------------------------------------------- */
.nfg-prose { font-size: var(--nfg-text-md); }
.nfg-prose > * { max-width: var(--nfg-reading); margin-inline: auto; }
.nfg-prose > .alignwide { max-width: 1000px; }
.nfg-prose > .alignfull { max-width: none; }

.nfg-prose h2 {
	margin-top: var(--nfg-space-7);
	padding-top: var(--nfg-space-4);
	border-top: 1px solid var(--nfg-line);
}
.nfg-prose h3 { margin-top: var(--nfg-space-6); }
.nfg-prose li { margin-bottom: var(--nfg-space-2); }
.nfg-prose figure { margin-inline: auto; }
.nfg-prose figcaption {
	font-size: var(--nfg-text-sm);
	color: var(--nfg-muted);
	margin-top: var(--nfg-space-2);
}

/* --- Media placeholder ------------------------------------------------------------
   Reserves layout space so a missing image never causes a layout shift, and
   reads as a deliberate part of the system rather than a broken image. */
.nfg-media-placeholder {
	width: 100%;
	aspect-ratio: 3 / 2;
	background:
		radial-gradient(circle at 30% 35%, var(--nfg-sage-light) 0 6px, transparent 7px),
		radial-gradient(circle at 68% 30%, var(--nfg-sage) 0 5px, transparent 6px),
		radial-gradient(circle at 52% 70%, var(--nfg-sage-light) 0 7px, transparent 8px),
		linear-gradient(160deg, var(--nfg-panel-warm), var(--nfg-panel));
	border-radius: var(--nfg-radius-md);
}

/* ==========================================================================
   Desktop and tablet
   ========================================================================== */
@media (min-width: 768px) {
	.nfg-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 901px) {
	.nfg-header__toggle { display: none; }

	html.nfg-js .nfg-header__nav[data-open="false"] { display: flex; }

	.nfg-nav__list {
		flex-direction: row;
		align-items: center;
		gap: var(--nfg-space-6);
	}
}

@media (max-width: 900px) {
	.nfg-header__inner { flex-wrap: wrap; }

	.nfg-header__nav {
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: var(--nfg-space-4);
		padding-block: var(--nfg-space-4);
		border-top: 1px solid var(--nfg-line);
	}

	.nfg-nav__list a { font-size: var(--nfg-text-base); }
}