/*
 * Roots 'n' Fruits — feedback questionnaire styles.
 *
 * Enqueued only on the /feedback/ route (see functions.php). Ported from
 * feedback-questionnaire-mockup.html. The mockup's :root tokens are scoped to
 * .rnf-feedback (not global :root) so they style the page body exactly as
 * designed WITHOUT overriding the shared portal header/footer tokens. The
 * mockup's own .topbar/.footer are NOT ported — chrome comes from
 * get_header/get_footer('portal').
 */

.rnf-feedback {
	/*
	 * ROLLBACK 2026-09-13 unify page background. Was: --cream:#F3EEE1;
	 *
	 * Removed, not just unused: this token existed ONLY to paint the page canvas
	 * below, and leaving it declared invites a later edit to paint #F3EEE1 again.
	 * Verified no other rule in this file referenced var(--cream).
	 *
	 * The canvas now falls through to body (tokens.css:159 -> --paper -> --rnf-cream
	 * #F5F0E8), which is the SAME value the site footer paints (offer.css:158), so
	 * the seam where this page met the footer is gone.
	 */
	--surface:#FBF8F0;
	--ink:#272320;
	--muted:#736C5F;
	--faint:#756d5a; /* Brand retune 2026-09-15 (local only): was #A79E8C (2.65:1 on white, failed AA). Orange-anchor hue, own sat, darkened to clear 4.5:1 on white/surface/paper. */
	--pine:#414e2c; /* Brand retune 2026-09-15 (local only): was #2F4733. Green anchor #6a8048 hue+sat, L24%. */
	--pine-soft:#596c3d; /* Brand retune 2026-09-15 (local only): was #5C7460. Anchor hue, L33% -- solved against its worst bg (--sage-tint) for 4.5:1. */
	--sage:#a4b983; /* Brand retune 2026-09-15 (local only): was #9BAA8C. Anchor hue+sat, L62%. */
	--sage-tint:#e0e7d4; /* Brand retune 2026-09-15 (local only): was #E7E6D4. Hue 57->83.6 (anchor), sat+lightness kept. */
	--blush:#ECD7CC;
	--terracotta:#8e6501; /* Brand retune 2026-09-15 (local only): was #C0734F (3.62:1 on white, failed AA). Orange anchor hue+sat, L28%. */
	--line:#e3dbc8; /* Brand retune 2026-09-15 (local only): was #E3DAC8. Hue 40->42.7 (orange anchor); sat+lightness kept, so borders barely move. */
	--radius:18px;
	/* was: --serif:'Lora',Georgia,serif; */
	/* was: --sans:'Inter',system-ui,sans-serif; */
	/* Repointed at the global tokens 2026-08-08. The .rnf-feedback headings
	 * (.pagehead h1, .pagehead h2) are already font-weight:600, which is
	 * loaded. .incentive .txt strong is prose and moves to --font-body below. */
	/* ROLLBACK 2026-09-08 cardo, was: --serif:var(--font-display); */
	/* ROLLBACK 2026-09-08 fraunces, was: --serif:var(--font-cardo); */
	--serif:var(--font-display);
	--sans:var(--font-body);

	/*
	 * ROLLBACK 2026-09-13 unify page background. Was: background:var(--cream);
	 *
	 * DELETED rather than repointed. .rnf-feedback is a full-bleed wrapper, so this
	 * declaration WAS the page canvas and painted over body. With it gone the page
	 * simply shows body, which means there is now exactly one page-background rule
	 * on this route and the canvas can never drift from the footer again.
	 *
	 * Everything else in this scoped block is untouched; only the canvas moved.
	 */
	color:var(--ink);
	font-family:var(--sans);
	line-height:1.5;
	-webkit-font-smoothing:antialiased;
}

/* layout */
.rnf-feedback .wrap{max-width:760px;margin:0 auto;padding:30px 24px 60px;}
.rnf-feedback .crumb{display:inline-flex;align-items:center;gap:6px;color:var(--pine-soft);text-decoration:none;font-size:14px;font-weight:500;margin-bottom:22px;}
.rnf-feedback .crumb:hover{color:var(--pine);}

/* honeypot — off-screen, not display:none */
.rnf-feedback .rnf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* confirmation notices */
.rnf-notice{border-radius:var(--radius);padding:14px 18px;margin-bottom:22px;font-size:14.5px;line-height:1.5;border:1px solid var(--line);}
.rnf-notice--thanks{background:var(--sage-tint);border-color:var(--sage);color:var(--pine);}
.rnf-notice--empty{background:var(--blush);border-color:var(--terracotta);color:#7A4B33;}
.rnf-notice--error{background:#F6E2D8;border-color:var(--terracotta);color:#8A3B2A;}

/* incentive banner */
.rnf-feedback .incentive{display:flex;align-items:center;gap:14px;background:var(--sage-tint);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin-bottom:26px;}
.rnf-feedback .incentive .ic{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--terracotta);}
/* was: .rnf-feedback .incentive .txt strong{ … font-family:var(--serif); … } — prose, not a heading. */
.rnf-feedback .incentive .txt strong{display:block;font-family:var(--font-body);font-weight:600;font-size:16px;color:var(--pine);}
.rnf-feedback .incentive .txt span{font-size:13.5px;color:var(--muted);}

/* was: .rnf-feedback .pagehead h1{ … font-weight:600 … letter-spacing:-.01em … } */
.rnf-feedback .pagehead h1{font-family:var(--serif);font-weight:700;font-size:30px;color:var(--pine);letter-spacing:var(--track-display);margin:0 0 10px;}
/* Added 2026-07-29: the page now has two peer sections ("Leave a review" and
   "Provide feedback"), so it needs a section-level heading. No h2 rule existed, so
   without this the new heading fell back to browser defaults and did not match the
   page. Same family/weight/colour as the h1 above, sized down to read as a subhead. */
.rnf-feedback .pagehead h2{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--pine);letter-spacing:-.01em;margin:36px 0 10px;}
/* Added 2026-07-29: .incentive is display:flex/align-items:center, which laid the
   review form out horizontally beside its heading. This modifier stacks it instead.
   The base .incentive rule is untouched, so the box styling is still shared. */
.rnf-feedback .incentive--stack{display:block;}
.rnf-feedback .incentive--stack .txt strong{margin-bottom:4px;}
.rnf-feedback .pagehead .lede{font-size:15.5px;color:var(--muted);max-width:62ch;margin:0 0 30px;}

/* form */
.rnf-feedback .qfield{margin-bottom:24px;}
.rnf-feedback .q-label{display:flex;gap:12px;font-size:16px;font-weight:600;color:var(--ink);line-height:1.4;margin-bottom:8px;}
.rnf-feedback .q-num{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--pine);color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.rnf-feedback .q-help{font-size:13.5px;color:var(--faint);margin:-2px 0 10px 38px;}
.rnf-feedback .q-input{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 15px;font-family:var(--sans);font-size:15px;color:var(--ink);resize:vertical;transition:border-color .15s,box-shadow .15s;}
.rnf-feedback .q-input::placeholder{color:var(--faint);}
.rnf-feedback .q-input:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px rgba(164,185,131,.18); /* Brand retune 2026-09-15: decimal form of --sage; was rgba(155,170,140,.18) = #9BAA8C. */}

/* submit */
.rnf-feedback .submit-row{margin-top:32px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
.rnf-feedback .btn-submit{display:inline-flex;align-items:center;gap:9px;background:var(--pine);color:#fff;border:none;border-radius:999px;padding:14px 26px;font-family:var(--sans);font-size:15px;font-weight:600;cursor:pointer;transition:background .15s;}
.rnf-feedback .btn-submit:hover{background:#364125; /* Brand retune 2026-09-15: was #26392b. Anchor hue+sat, L20%. */}
.rnf-feedback .email-note{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:7px;}

@media (prefers-reduced-motion:reduce){
	.rnf-feedback .q-input,.rnf-feedback .btn-submit{transition:none;}
}