/*
 * Roots 'n' Fruits — home (front page) styles.
 *
 * Enqueued only on the front page (see functions.php). Home-specific layout and
 * presentation, built on the shared design tokens (assets/css/tokens.css) and
 * shared shell/button components (assets/css/offer.css). No token duplication.
 */

/* ---------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------- */
.rnf-hero {
	position: relative;
	min-height: clamp(540px, 86vh, 760px);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* Reserve top space so the transparent over-header doesn't cover content. */
	padding: 120px 22px 64px;
	color: var(--paper);
}

/*
 * BACKGROUND VIDEO REVERTED 2026-08-06 (local only, reversible). The hero is back
 * to the inline background-image photo set in front-page.php. The video markup is
 * commented out there; this rule is commented out here. The video files were kept
 * on disk deliberately.
 *
 * TO RESTORE: un-comment this rule and the two media queries near the bottom of
 * this file, and re-add the z-index values noted on .rnf-hero__scrim and
 * .rnf-hero__inner below.
 *
 * .rnf-hero__video {
 *     position: absolute;
 *     inset: 0;
 *     width: 100%;
 *     height: 100%;
 *     object-fit: cover;
 *     z-index: 0;
 * }
 */

/* Tunable darkening for legibility — a CSS scrim over the photo, not baked in. */
.rnf-hero__scrim {
	position: absolute;
	inset: 0;
	/*
	 * LIGHTENED 2026-08-06 (local only, reversible) so more of the photo shows.
	 * Superseded: background: linear-gradient(180deg, rgba(22, 28, 21, .30), rgba(20, 26, 19, .52) 50%, rgba(22, 28, 21, .30));
	 *
	 * Roughly 55% of the previous opacity at every stop: .30 -> .16, .52 -> .34,
	 * .30 -> .16.
	 *
	 * THE THREE-STOP SHAPE IS DELIBERATE — do not flatten it to two. The hero is
	 * flex-centred, so the darker middle band sits directly behind the eyebrow and
	 * headline where contrast is actually needed, while the lighter top and bottom
	 * let the photo through. A monotonic top-to-bottom gradient would spend opacity
	 * where no text sits and starve the band where it does.
	 *
	 * Paired with the text-shadows added to .rnf-hero__eyebrow and
	 * .rnf .rnf-hero__title below — those are what make this lighter scrim safe, so
	 * revert the three together.
	 */
	background: linear-gradient(180deg, rgba(22, 28, 21, .16), rgba(20, 26, 19, .34) 50%, rgba(22, 28, 21, .16));
	pointer-events: none;
	/*
	 * z-index REMOVED 2026-08-06 with the video revert, returning this rule to its
	 * original form. With no video in the stack the scrim wins over the photo by DOM
	 * order alone, exactly as it did before. Restore "z-index: 1;" here if the video
	 * ever comes back.
	 */
}

.rnf-hero__inner {
	position: relative;
	/* Returned 2026-08-06 to its pre-video value. Was briefly z-index: 2 to clear the
	   scrim while the video occupied level 0. Restore 2 if the video comes back. */
	z-index: 1;
	/*
	 * Widened 2026-08-06 so the headline can reach two lines instead of four.
	 * Superseded: max-width: 720px;
	 *
	 * This is the SECONDARY constraint. The binding one is max-width on
	 * .rnf .rnf-hero__title below — raising this alone would have changed nothing.
	 * It is raised because 26ch at the 56px desktop size is roughly 730-800px and
	 * would otherwise be clipped by the old 720px ceiling.
	 */
	max-width: 900px;
}

.rnf-hero__eyebrow {
	margin: 0 0 14px;
	text-transform: uppercase;
	/* letter-spacing DELIBERATELY LEFT POSITIVE. --track-display is -0.02em and
	 * is for headlines only — negative tracking on uppercase text crowds the
	 * letterforms badly. Do not swap this for the token. */
	letter-spacing: 0.14em;
	font-size: 13px;
	/* was: (no font-family — inherited the sans stack) */
	/* was: font-weight: 500; */
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--sage3);
	/*
	 * Added 2026-08-06 with the lightened .rnf-hero__scrim above. This rule had NO
	 * text-shadow before, so delete this line to revert.
	 *
	 * Two layers: the tight 3px one gives edge definition against busy pixels, the
	 * diffuse 20px one lifts the text off the photo generally. Together they are what
	 * let the scrim drop to .16/.34/.16 without losing legibility.
	 */
	text-shadow: 0 1px 3px rgba(16,20,10,.5), 0 2px 20px rgba(16,20,10,.55);
}

/* .rnf prefix raises specificity to 0,2,0 so this beats `.rnf .disp`
   (color: var(--ink)) from offer.css — keeps the H1 light over the photo. */
.rnf .rnf-hero__title {
	/* was: font-weight: 500; */
	/* was: letter-spacing: -0.01em; */
	/* was: 700, not the 600 used for ordinary headings: this is a main hook line. */
	/*
	 * ============================================================
	 * SCRIPT HEADLINE 2026-08-08 (local only, reversible)
	 * ============================================================
	 * The hook became a two-line Alex Brush script:
	 *     Rooted in Purity
	 *     Fruiting Peace of Mind
	 *
	 * was: font-family: var(--font-serif);        (resolved to Montserrat)
	 * was: font-weight: 700;
	 * was: font-size: clamp(34px, 6vw, 56px);
	 * was: line-height: 1.12;
	 * was: letter-spacing: var(--track-display);  (-0.02em)
	 *
	 * WEIGHT 400, NOT 700. Alex Brush ships a single weight; a declared 700 makes
	 * the browser synthesise a faux-bold, which smears a connected script.
	 *
	 * LETTER-SPACING normal, NOT --track-display. Negative tracking pulls the
	 * joining strokes of a connected script into each other.
	 *
	 * SIZING, MEASURED (headless Chrome, not estimated). "Fruiting Peace of Mind"
	 * is the binding line and needs 8.588x its font-size in width; Alex Brush is
	 * only 72% the width of Montserrat 700 for the same string, but its ascent is
	 * 0.645em so it reads SMALLER per px than Montserrat's ~0.70em cap-height.
	 * Available title width is viewport-40px at <=640px, viewport-44px above,
	 * capped at 900px by .rnf-hero__inner.
	 *
	 *     vw     title box   max font-size   at 9vw    margin left
	 *     320px  280px       32.6px          30 (floor) 22px
	 *     360px  320px       37.3px          32.4px     42px  (13%)
	 *     390px  350px       40.8px          35.1px     49px  (14%)
	 *     400px  360px       41.9px          36.0px     51px  (14%)
	 *     889px+ 900px       104.8px         80 (cap)   213px (24%)
	 *
	 *   - 30px floor is set by the 320px case, where the ceiling is 32.6px. A 34px
	 *     floor overflows 320px by 12px.
	 *   - 9vw rather than 8vw: at 8vw the floor binds all the way to 375px and the
	 *     script renders smaller than the Montserrat it replaced (19.4px ascent vs
	 *     23.8px cap-height).
	 *   - 80px cap gives a 51.6px visual ascent against the old 56px Montserrat's
	 *     39.2px cap — clearly a hero, with 24% width margin still in hand.
	 *
	 * line-height 1.05 verified against the descenders: at 80px the baselines sit
	 * 84px apart while ink height is 68px (ascent 51.6 + descent 16.4), leaving
	 * 16px clearance, so the "y" of Purity cannot reach the "F" of Fruiting.
	 */
	font-family: var(--font-script);
	font-weight: 400;
	color: var(--paper2);
	font-size: clamp(30px, 9vw, 80px);
	line-height: 1.05;
	letter-spacing: normal;
	/*
	 * Belt-and-braces: .rnf-hero already sets text-align:center (home.css:21) and
	 * nothing in the chain resets it, so the lines were centred anyway. Declared
	 * explicitly so this rule is self-describing — it is what puts the short line 1
	 * and the long line 2 on a single shared centre axis.
	 */
	text-align: center;
	/*
	 * Added 2026-08-06 with the lightened .rnf-hero__scrim. This rule had NO
	 * text-shadow before — delete this line to revert. Same two-layer treatment as
	 * .rnf-hero__eyebrow; see the note there.
	 *
	 * font-family, font-size, color and max-width are deliberately untouched, so this
	 * selector keeps the 0,2,0 specificity that beats `.rnf .disp` from offer.css and
	 * keeps the headline light over the photo.
	 */
	text-shadow: 0 1px 3px rgba(16,20,10,.5), 0 2px 20px rgba(16,20,10,.55);
	/* Already present before 2026-08-06 — splits the two lines evenly. No change. */
	text-wrap: balance;
	margin: 0 auto 18px;
	/*
	 * Widened 2026-08-06 (local only, reversible) so the headline sits on TWO lines
	 * instead of four. Superseded: max-width: 16ch;
	 *
	 * THIS IS THE BINDING CONSTRAINT, not .rnf-hero__inner. The copy is 44 characters;
	 * a 16ch cap allows roughly 18 per line, forcing 3-4 lines. 26ch allows roughly
	 * 29-31, so it breaks to two and text-wrap:balance evens them out.
	 *
	 * font-size, font-family, colour, line-height and letter-spacing are all
	 * deliberately untouched, so this selector keeps the 0,2,0 specificity that lets
	 * it beat `.rnf .disp` from offer.css and keep the H1 light over the photo.
	 *
	 * Mobile is unaffected: ch scales with font-size, so at the 34px mobile size 26ch
	 * is ~440-480px — wider than a phone viewport minus the hero's 22px side padding,
	 * so the container binds and the headline wraps naturally as before.
	 */
	max-width: 26ch;
}

/*
 * Sentence-per-line spans for the script headline. Added 2026-08-08 (local only,
 * reversible) — deleting this rule and restoring the old <h1> text reverts it.
 *
 * display:block makes each span fill the title box, so the inherited
 * text-align:center centres BOTH lines on the same axis rather than letting the
 * short line 1 and long line 2 drift apart. white-space:nowrap keeps each
 * sentence on one row.
 *
 * DELIBERATELY NO width AND NO float. Either would take the span out of the
 * centred flow and left-bias the text.
 *
 * max-width:26ch on the title above was left alone on purpose: `ch` is
 * font-relative, so under Alex Brush it re-resolves to ~0.576em and computes to
 * 1138px at 80px — it never binds at any viewport, and text-wrap:balance above
 * is likewise inert now that both lines are nowrap.
 */
.rnf .rnf-hero__title .rnf-hero__title-line {
	display: block;
	white-space: nowrap;
}

.rnf-hero__sub {
	color: var(--paper2);
	font-size: clamp(16px, 2.2vw, 19px);
	line-height: 1.55;
	max-width: 40ch;
	margin: 0 auto 28px;
}

/* Keep grouped words together so the line breaks before the group (e.g.
   "toxic chemicals" in the hero subhead), without a hard <br>. */
.rnf-nowrap {
	white-space: nowrap;
}

/* Desktop-only forced break before "and" in the hero subhead. Suppressed on
   phones so the line wraps naturally; restored at the desktop breakpoint. */
.rnf-hero__br {
	display: none;
}

@media (min-width: 768px) {
	.rnf-hero__br {
		display: inline;
	}
}

.rnf-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

/*
 * BACKGROUND-VIDEO FALLBACKS REVERTED 2026-08-06 (local only, reversible).
 *
 * These two blocks existed only to hide the hero video from phones and from
 * prefers-reduced-motion users, letting the background photo show instead. With the
 * video gone the photo is what everyone gets, so they have nothing left to do.
 *
 * TO RESTORE, un-comment both blocks alongside the .rnf-hero__video rule near the
 * top of this file:
 *
 * @media (prefers-reduced-motion: reduce) {
 *     .rnf-hero__video { display: none; }
 * }
 *
 * @media (max-width: 768px) {
 *     .rnf-hero__video { display: none; }
 * }
 */

/* Cream button variants for the hero (over a dark photo). Built on .rnf-btn. */
.rnf-btn--cream {
	background: var(--paper);
	color: var(--pine);
	border: none;
}

.rnf-btn--cream:hover {
	background: #fff;
	color: var(--pine);
}

.rnf-btn--cream-ghost {
	background: transparent;
	color: var(--paper);
	border: 1.5px solid var(--paper);
}

.rnf-btn--cream-ghost:hover {
	background: rgba(246, 242, 232, 0.14);
	color: var(--paper);
}

/* ---------------------------------------------------------------------------
 * What we stand for (#about) — centered cream intro band
 *
 * Plain cream background with dark body text in a centered, readability-
 * constrained column. (This section was previously a Scotland-photo hero; the
 * background + white text were reverted to cream/dark — /about keeps the hero.)
 * ------------------------------------------------------------------------- */
.rnf-about {
	background: var(--paper2);
}

/* Comfortable vertical padding (side padding stays from .rnf-sec). */
.rnf-sec.rnf-about {
	padding-block: clamp(72px, 10vw, 120px);
}

.rnf-about__grid {
	max-width: 680px; /* readable measure (~640–720px), centered column */
	margin-inline: auto;
}

.rnf-about__p {
	color: var(--inks); /* original dark body text */
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 18px;
}

.rnf-about__p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Follow along
 * ------------------------------------------------------------------------- */
.rnf-follow {
	background: var(--paper);
}

.rnf-follow__kick {
	text-align: center;
}

.rnf-follow__title {
	/* was: font-weight: 500; */
	font-family: var(--font-serif);
	font-weight: 600;
	color: var(--ink);
	font-size: clamp(24px, 4vw, 32px);
	line-height: 1.2;
	text-align: center;
	margin: 0 0 26px;
}

.rnf-follow__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

/* Portrait tiles (~3:4). Full-bleed cover photo per tile (same pattern as the
   portal category cards), with --sage2 as a load/fallback tint. The pill below
   keeps the link text readable over any photo. */
.rnf-tile {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	background: var(--sage2);
	background-size: cover;
	background-position: center;
}

/* Exact filenames/case are intentional — the live host is case-sensitive. */
.rnf-tile--yt { background-image: url('../images/youtube.JPG'); }   /* YouTube */
.rnf-tile--ig { background-image: url('../images/instagram.JPG'); } /* Instagram */
.rnf-tile--tt { background-image: url('../images/tiktok.JPG'); }    /* TikTok */
.rnf-tile--fb { background-image: url('../images/facebook.JPG'); }  /* Facebook */

.rnf-tile__label {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	background: rgba(246, 242, 232, 0.78);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--pine);
	font-size: 14px;
	font-weight: 500;
}

.rnf-tile:hover .rnf-tile__label {
	background: rgba(255, 255, 255, 0.92);
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.rnf-about,
	.rnf-follow {
		padding: 64px 26px;
	}
}

/* Follow tiles reflow: 4-up (desktop) → 2-up (tablet) → stacked (phone). */
@media (max-width: 860px) {
	.rnf-follow__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 520px) {
	.rnf-follow__grid {
		grid-template-columns: 1fr;
		max-width: 420px;
		margin: 0 auto;
	}
}

@media (max-width: 640px) {
	.rnf-hero {
		padding-left: 20px;
		padding-right: 20px;
	}
	.rnf-sec {
		padding-left: 20px;
		padding-right: 20px;
	}

	/*
	 * HERO BUTTONS SCALED DOWN ON MOBILE 2026-08-08 (local only, reversible).
	 *
	 * WHY. .rnf-btn had NO responsive treatment at all — flat 15px / 13px 26px /
	 * 52px tall from 320px to 1920px — while the script headline scales
	 * clamp(30px, 9vw, 80px). So the button-height : headline-font ratio ran from
	 * 0.65 on desktop up to 1.6 at 360px: the pills were over half again taller
	 * than the headline type and visually dominated it.
	 *
	 *     vw     headline   btn box   btnH:headline
	 *     1280   80px       135x52    0.65
	 *      640   57.6px     135x52    0.90
	 *      400   36px       135x52    1.44
	 *      390   35.1px     135x52    1.48
	 *      360   32.4px     135x52    1.60
	 *
	 * AFTER (measured): 121x44 / 109x44, ratio 1.26 at 390px, 1.37 at 360px.
	 *
	 * WHY 10px VERTICAL PADDING IS THE FLOOR, NOT A GUESS. .rnf-btn carries a
	 * FIXED line-height: 24px (offer.css:376-390), so button height is
	 * padding*2 + 24 and does NOT shrink with font-size — dropping font-size
	 * alone would have changed nothing vertically. 10px padding gives exactly
	 * 44px, the standard minimum touch-target size. Going below this shrinks the
	 * pill past the accessible tap target for no real visual gain, so do not
	 * reduce the vertical padding further; reduce the horizontal padding if the
	 * pills still need to be narrower.
	 *
	 * SCOPED TO .rnf-hero__cta ON PURPOSE. The .rnf-btn base rule lives in
	 * offer.css, which is enqueued on EVERY page. An unscoped .rnf-btn override
	 * here would be contained to the front page (home.css is is_front_page()
	 * only) but would still catch any future non-hero button on it. The descendant
	 * selector is also (0,2,0), so it beats the (0,1,0) base regardless of order.
	 *
	 * NO width / min-width / height is set — the pills stay sized to their own
	 * text + padding, so "Learn more" and "Our story" keep their individual
	 * balance rather than being forced equal.
	 *
	 * DESKTOP IS UNTOUCHED: everything here is inside max-width:640px, and the
	 * base rule in offer.css is not edited.
	 */
	.rnf-hero__cta .rnf-btn {
		/* was: font-size: 15px;   (offer.css:376-390 base, left intact) */
		/* was: padding: 13px 26px; */
		font-size: 14px;
		padding: 10px 22px;
	}

	.rnf-hero__cta {
		/* was: gap: 14px;  (home.css:264 base, left intact) — tightened so the
		   spacing stays proportional to the now-smaller pills. */
		gap: 12px;
	}
}