/*
 * Noble Farm base: design tokens, type, layout, buttons, section backgrounds, shared components.
 * Foundation (reset + grid) loads separately inside the "foundation" cascade layer, so everything here is unlayered and wins.
 * Token names mirror the Figma variables (spec section 2).
 */

:root {
	--nf-white: #ffffff;
	--nf-paper: #f4eada;
	--nf-paper-30: rgb(244 234 218 / .3);
	--nf-olive: #363b1a;
	--nf-olive-deep: #262a12;
	--nf-crust: #b97d46;
	--nf-crust-dark: #8b5626;
	--nf-harvest: #8b5626; /* Spotlight Harvest panel only; same value as crust-dark */
	--nf-wheat: #c9ab8f;
	--nf-ink: #2a2716;
	--nf-muted: #6b6450;
	--nf-on-dark: #fdf6e8;
	--nf-rule: #d9cbb3;

	/* Sub-brand colors: only ever used inside .nf-plate, the sub-brand accordion card and the shop group bar. */
	--nf-bougie: #34354b;
	--nf-bougie-accent: #cc9a73;
	--nf-swirl: #853435;
	--nf-swirl-on: #fdf6e8;

	--nf-font-display: 'Arvo', Georgia, 'Times New Roman', serif;
	--nf-font-body: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--nf-gutter: 64px;
	--nf-content: 1312px;
	--nf-section-y: 104px;
	--nf-radius: 4px;
	--nf-radius-lg: 8px;
	--nf-header-h: 96px; /* shell sets the real value; used for sticky offsets and anchor scrolling */
}
@media (max-width: 1023.98px) { :root { --nf-gutter: 40px; --nf-section-y: 80px; } }
@media (max-width: 767.98px)  { :root { --nf-gutter: 20px; --nf-section-y: 56px; } }

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nf-header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

body {
	margin: 0;
	font-family: var(--nf-font-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--nf-ink);
	background: var(--nf-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--nf-font-display);
	font-weight: 700;
	color: var(--nf-ink);
	margin: 0 0 .5em;
}
h1 { font-size: 54px; line-height: 1.08; letter-spacing: -.01em; }
h2 { font-size: 44px; line-height: 1.1; }
h3 { font-size: 28px; line-height: 1.2; }
h4 { font-size: 22px; line-height: 1.25; }
h5 { font-size: 18px; line-height: 1.3; }
@media (max-width: 1023.98px) { h1 { font-size: 44px; } h2 { font-size: 36px; } h3 { font-size: 24px; } }
@media (max-width: 599.98px)  { h1 { font-size: 36px; } h2 { font-size: 30px; } h3 { font-size: 22px; } }

/* Visual scale, independent of the heading tag chosen for a module title. */
.nf-title-hero { font-size: 60px; line-height: 1.08; letter-spacing: -.01em; }
.nf-title-lg   { font-size: 44px; line-height: 1.1; }
.nf-title-md   { font-size: 28px; line-height: 1.2; }
@media (max-width: 1023.98px) { .nf-title-hero { font-size: 48px; } .nf-title-lg { font-size: 36px; } .nf-title-md { font-size: 24px; } }
@media (max-width: 599.98px)  { .nf-title-hero { font-size: 38px; } .nf-title-lg { font-size: 30px; } .nf-title-md { font-size: 22px; } }

.nf-muted { color: var(--nf-muted); }

/* ---------- Layout ---------- */

.nf-container {
	width: 100%;
	max-width: calc(var(--nf-content) + 2 * var(--nf-gutter));
	margin-inline: auto;
	padding-inline: var(--nf-gutter);
}
.nf-pad-section { padding-block: var(--nf-section-y); }

.nf-main { display: block; }

.nf-visually-hidden {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.nf-skip-link {
	position: absolute; left: 16px; top: -60px; z-index: 1000; padding: 12px 20px;
	background: var(--nf-olive); color: var(--nf-on-dark); border-radius: var(--nf-radius); text-decoration: none;
}
.nf-skip-link:focus { top: 16px; }

:focus-visible { outline: 3px solid var(--nf-crust); outline-offset: 3px; }
.nf-bg--olive :focus-visible { outline-color: var(--nf-wheat); }

/* ---------- Module sections (wrapper rendered by nf_render_current_module) ---------- */

.nf-module { position: relative; }
.nf-pad--default { padding-block: var(--nf-section-y); }
.nf-pad--compact { padding-block: calc(var(--nf-section-y) * .6); }
.nf-pad--no-top  { padding-top: 0; padding-bottom: var(--nf-section-y); }

.nf-bg--white { background: var(--nf-white); }
.nf-bg--paper { background: var(--nf-paper); }
.nf-bg--paper-soft { background: var(--nf-paper-30); }
.nf-bg--olive { background: var(--nf-olive); color: var(--nf-on-dark); }
.nf-bg--olive :is(h1, h2, h3, h4, h5, h6) { color: var(--nf-on-dark); }
/* Fade seam: paper into white only, long and eased so neither end shows a band. Runs behind the content; adds no padding. */
.nf-bg--fade {
	background: linear-gradient(to bottom,
		var(--nf-paper) 0%, rgb(244 234 218 / .86) 12%, rgb(244 234 218 / .62) 30%,
		rgb(244 234 218 / .36) 50%, rgb(244 234 218 / .16) 70%, rgb(244 234 218 / .04) 88%, rgb(244 234 218 / 0) 100%), var(--nf-white);
}

/* Bleed illustration: one per page, ~440px tall, 20-25% opacity, aligned to the content edge, behind the content.
   Its bottom tucks just behind the next section, which paints over it (later sibling, position: relative, solid background). */
.nf-bleed__art { position: absolute; z-index: 0; bottom: calc(-1 * var(--nf-bleed-drop, 40px)); pointer-events: none; opacity: .22; }
.nf-bleed__art img { display: block; height: 440px; width: auto; max-width: none; }
.nf-bleed--right .nf-bleed__art { right: max(var(--nf-gutter), calc((100% - var(--nf-content)) / 2)); }
.nf-bleed--left  .nf-bleed__art { left:  max(var(--nf-gutter), calc((100% - var(--nf-content)) / 2)); }
.nf-has-bleed > :not(.nf-bleed__art) { position: relative; z-index: 1; }
@media (max-width: 767.98px) { .nf-bleed__art img { height: 240px; } .nf-bleed__art { opacity: .16; } }

/* ---------- Buttons and links ---------- */

.nf-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 14px 28px; min-height: 50px;
	font-family: var(--nf-font-body); font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase;
	text-decoration: none; text-align: center; cursor: pointer;
	border: 1.5px solid transparent; border-radius: var(--nf-radius);
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.nf-btn--primary { background: var(--nf-olive); border-color: var(--nf-olive); color: var(--nf-on-dark); }
.nf-btn--primary:hover { background: var(--nf-olive-deep); border-color: var(--nf-olive-deep); }
.nf-btn--secondary { background: transparent; border-color: var(--nf-olive); color: var(--nf-olive); }
.nf-btn--secondary:hover { background: var(--nf-olive); color: var(--nf-on-dark); }
.nf-btn--light { background: var(--nf-white); border-color: var(--nf-white); color: var(--nf-olive); }
.nf-btn--light:hover { background: var(--nf-paper); border-color: var(--nf-paper); }
.nf-btn--light_outline { background: transparent; border-color: var(--nf-on-dark); color: var(--nf-on-dark); }
.nf-btn--light_outline:hover { background: rgb(253 246 232 / .14); }
.nf-btn[disabled], .nf-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.nf-arrow { flex: none; }
.nf-link-arrow {
	display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px;
	font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3;
	color: var(--nf-ink); text-decoration: none; border-bottom: 2px solid var(--nf-crust);
}
.nf-link-arrow:hover { color: var(--nf-crust-dark); }
.nf-bg--olive .nf-link-arrow { color: var(--nf-on-dark); border-bottom-color: var(--nf-wheat); }

/* ---------- Rich text from WYSIWYG fields ---------- */

.nf-prose > :last-child { margin-bottom: 0; }
.nf-prose a { text-decoration: underline; text-decoration-color: var(--nf-crust); text-underline-offset: 3px; }
.nf-prose ul, .nf-prose ol { margin: 0 0 1em; padding-left: 1.25em; }
.nf-prose li { margin-bottom: .35em; }
.nf-prose h3, .nf-prose h4, .nf-prose h5 { margin-top: 1.4em; }

/* ---------- Sub-brand plates (nf_sub_brand_plate) ---------- */

.nf-plate { --nf-plate-bg: var(--nf-bougie); background: var(--nf-plate-bg); color: var(--nf-swirl-on); }
.nf-plate--danish-swirl { --nf-plate-bg: var(--nf-swirl); }
.nf-plate__logo { display: block; max-width: none; height: auto; }

/* Gluten Free flag (nf_gluten_free_flag): olive bookmark, 48 x 66, 16px in from the top-left of a position: relative photo box. */
.nf-gf-flag { position: absolute; top: 0; left: 16px; z-index: 2; width: 48px; height: 66px; pointer-events: none; }
.nf-gf-flag__shape { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nf-gf-flag__text {
	position: absolute; left: 0; right: 0; top: 14px; text-align: center;
	font-family: var(--nf-font-display); font-weight: 700; font-size: 18px; line-height: normal; color: var(--nf-on-dark); white-space: nowrap;
}

/* Product page main photo: 1.25x (60 x 83). */
.nf-gf-flag--lg { width: 60px; height: 83px; }
.nf-gf-flag--lg .nf-gf-flag__text { top: 17.5px; font-size: 22.5px; }
/* Plain-text line on the product page so the information never depends on the image alone. */
.nf-gf-line { margin: 0 0 12px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--nf-olive); }

/* Ribbon: a diagonal corner band across the top-right of a position: relative photo box. */
.nf-plate--ribbon {
	position: absolute; top: 0; right: 0; z-index: 2; pointer-events: none;
	width: var(--nf-ribbon-size, 34%); aspect-ratio: 1;
	clip-path: polygon(30.6% 0, 71.7% 0, 100% 28.3%, 100% 69.4%);
}
.nf-plate--ribbon .nf-plate__logo {
	position: absolute; left: 75.5%; top: 24.4%; width: 29%;
	transform: translate(-50%, -50%) rotate(45deg);
}

/* Panel: solid color + logo, only when no photo exists yet. */
.nf-plate--panel { display: grid; place-items: center; aspect-ratio: 440 / 280; border-radius: var(--nf-radius-lg); }
.nf-plate--panel .nf-plate__logo { width: 70%; }

/* Bar: logo and one-line description, the shop group header. */
.nf-plate--bar { display: flex; align-items: center; gap: 32px; min-height: 92px; padding: 14px 24px; border-radius: var(--nf-radius); }
.nf-plate--bar .nf-plate__logo { width: 120px; flex: none; }
.nf-plate--bar .nf-plate__text { margin: 0; font-size: 18px; line-height: 1.4; }
@media (max-width: 767.98px) { .nf-plate--bar { gap: 16px; padding: 12px 16px; } .nf-plate--bar .nf-plate__logo { width: 88px; } .nf-plate--bar .nf-plate__text { font-size: 16px; } }