/* Combined sitewide stylesheet — tokens.css + base.css + components.css, in this order for cascade.
 * Generated to serve as a single render-blocking request instead of three (PageSpeed Insights finding, 2026-07-27).
 * Source of truth remains the three separate files below — regenerate this file after editing any of them. */

/* FoodCostCalculators.com — design tokens
   Single source of truth for palette/type/shadow values, cloned from
   the homepage + Recipe Cost Calculator prototypes. Every page loads
   this file first so nothing restyles from scratch. */

/* Metric-matched fallback fonts.

   Fraunces and Public Sans load from Google Fonts with display=swap, so
   text first paints in a system fallback and swaps when the webfont
   arrives. Left unadjusted, the fallbacks are narrower than the real
   fonts, so at narrow (phone) widths the h1 and hero subhead wrapped to
   one fewer line before the swap and one more line after it — moving
   everything below them ~59px and producing a measured CLS of 0.239,
   with the hero's .mini-calc named as the culprit.

   size-adjust scales each fallback to the real font's advance width, so
   line breaks land identically before and after the swap and the swap
   costs no layout shift. These use local() only — they add no network
   requests.

   Values were solved empirically in-browser at 412px against the real
   headline/subhead strings, tuned on rendered line count rather than on
   the raw font ratio: the h1's fixed letter-spacing (-0.015em) does not
   scale with size-adjust, so the naive width ratio (109.3%) still left
   the h1 one line short. Measured h1 line count flips to match Fraunces
   between 112% and 114% and holds through 120%; 116% sits mid-range, so
   it stays correct across the different local fallbacks below and other
   pages' headline lengths. Public Sans at 105.3% matched the subhead
   exactly on the first pass. Re-solve these if the hero copy, the type
   scale, or letter-spacing changes. */

@font-face {
  font-family: 'Fraunces Fallback';
  src: local('Times New Roman'), local('Liberation Serif'), local('Nimbus Roman'), local('Tinos');
  size-adjust: 116%;
}

@font-face {
  font-family: 'Public Sans Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans'), local('Arimo');
  size-adjust: 105.3%;
}

:root {
  /* palette */
  --ivory: #FBF7F0;
  --ivory-dim: #F3ECDF;
  --ink: #1C2B22;
  --ink-soft: #4A5A4F;
  --marigold: #E8A33D;
  --marigold-deep: #C67F1E;
  --marigold-pale: #FDF3E3;
  --herb: #4C7A5B;
  --herb-deep: #38614A;
  --herb-pale: #EAF3EC;
  --brick: #B44B34;
  --brick-pale: #FBEAE4;
  --line: #DED2BA;
  --paper: #FFFFFF;

  /* elevation */
  --shadow: 0 1px 2px rgba(28, 43, 34, .06), 0 8px 24px rgba(28, 43, 34, .06);
  --shadow-lift: 0 10px 30px rgba(28, 43, 34, .12);

  /* type */
  --font-serif: 'Fraunces', 'Fraunces Fallback', serif;
  --font-body: 'Public Sans', 'Public Sans Fallback', system-ui, sans-serif;

  /* radii used consistently across cards/buttons/pills */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 20px;
}

/* FoodCostCalculators.com — base layer
   Reset + typography + the sitewide nav/footer/skip-link that every
   page shares, so header/footer markup (duplicated per page, since
   this is a no-build-step static site) always looks identical. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-serif); letter-spacing: -.01em; margin: 0; }
img, svg { max-width: 100%; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* skip link for keyboard/screen-reader users */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--herb-deep); color: var(--ivory);
  padding: 12px 18px; border-radius: 0 0 8px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* focus visibility (contrast beyond color alone, keyboard operability) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2.5px solid var(--marigold-deep);
  outline-offset: 2px;
}

/* screen-reader-only utility */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- sitewide nav ------------------------------------------------ */
nav.top { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 40; }
.navrow { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 36px; height: 36px; border-radius: 9px; background: var(--herb); display: flex; align-items: center; justify-content: center; color: var(--ivory); font-family: var(--font-serif); font-weight: 700; font-size: 19px; }
.brand-name { font-family: var(--font-serif); font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.brand-name span { color: var(--herb-deep); }
.navlinks { display: flex; gap: 30px; font-size: 14.5px; font-weight: 600; }
.navlinks a { position: relative; padding: 6px 0; color: var(--ink); }
.navlinks a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--marigold-deep); transition: width .2s; }
.navlinks a:hover::after, .navlinks a[aria-current="page"]::after { width: 100%; }
@media (max-width: 860px) { .navlinks { display: none; } }

/* --- sitewide footer ---------------------------------------------- */
footer.site { background: var(--ink); color: #CFE0D5; padding: 52px 0 26px; margin-top: 40px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; margin-bottom: 40px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
footer.site .brand-name { color: var(--ivory); }
footer.site .brand-name span { color: #8FCB9F; }
footer.site p { font-size: 13.5px; line-height: 1.6; color: #9FB6A6; max-width: 34ch; }
footer.site h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #8FCB9F; margin: 0 0 14px; }
footer.site ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
footer.site ul a:hover, footer.site ul a:focus-visible { color: var(--ivory); }
.foot-bottom { border-top: 1px solid #2C3F34; padding-top: 20px; display: flex; justify-content: space-between; font-size: 12.5px; color: #7E9689; flex-wrap: wrap; gap: 8px; }

/* --- generic content page shell (legal/about/methodology pages) --- */
.content-page { max-width: 780px; margin: 0 auto; padding: 48px 24px 88px; }
.content-page .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); font-weight: 700; }
.content-page h1 { font-size: clamp(28px, 4vw, 40px); margin: 8px 0 6px; }
.content-page .updated { font-size: 13px; color: var(--ink-soft); margin-bottom: 32px; }
.content-page h2 { font-size: 21px; margin: 36px 0 12px; }
.content-page h3 { font-size: 16.5px; margin: 22px 0 8px; }
.content-page p { font-size: 15.5px; color: var(--ink); margin: 0 0 14px; }
.content-page ul, .content-page ol { font-size: 15.5px; color: var(--ink); padding-left: 22px; margin: 0 0 14px; }
.content-page li { margin-bottom: 6px; }
a.inline-link { color: var(--herb-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.content-page .callout { background: var(--herb-pale); border: 1px solid #D3E5D9; border-radius: var(--radius-md); padding: 16px 18px; font-size: 14.5px; margin: 18px 0; }
.content-page .callout.warn { background: var(--marigold-pale); border-color: #F0DBAE; }

/* FoodCostCalculators.com — shared components
   Receipt/ticket motif, tooltips, donut chart, cards, forms, and the
   cookie consent banner — cloned from the prototypes so every
   calculator/page reuses the same visual language. */

.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill); background: #EFF6F1; color: var(--herb-deep); letter-spacing: .02em; }
.example-badge { position: absolute; top: 14px; right: 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--marigold-deep); background: var(--marigold-pale); border: 1px solid #F0DBAE; padding: 3px 8px; border-radius: var(--radius-pill); }

/* --- cards --- */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); }
.card + .card { margin-top: 20px; }
.card h2 { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.card .hint { font-size: 13px; color: var(--ink-soft); margin: 0 0 18px; }

/* --- form fields (used by calculators + contact form) --- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 15px; padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--ivory); color: var(--ink);
  transition: border-color .15s, background .15s; width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; font-family: inherit; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--marigold-deep); background: var(--paper); }
.field .field-error { font-size: 13px; color: var(--brick); font-weight: 600; display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--brick); background: var(--brick-pale); }
.field.has-error .field-error { display: block; }

.btn-primary {
  background: var(--herb); color: var(--ivory); border: none; border-radius: var(--radius-md);
  padding: 13px 22px; font-weight: 700; font-size: 14.5px; cursor: pointer;
  transition: background .15s, transform .1s; font-family: inherit;
}
.btn-primary:hover { background: var(--herb-deep); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }

/* --- tooltip (Vendor Explanation Layer inline help) --- */
.tip { position: relative; display: inline-flex; }
.tip .dot { width: 15px; height: 15px; border-radius: 50%; background: var(--ivory-dim); border: 1px solid var(--line); color: var(--ink-soft); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: help; }
.tip .bubble {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--ink); color: var(--ivory); font-size: 12.5px; font-weight: 400; line-height: 1.4;
  padding: 10px 12px; border-radius: 8px; width: 220px; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 5;
}
.tip .bubble::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--ink); }
.tip:hover .bubble, .tip:focus-within .bubble { opacity: 1; transform: translateX(-50%) translateY(0); }
.tip .dot:focus-visible { outline: 2.5px solid var(--marigold-deep); outline-offset: 2px; }

/* --- receipt result panel --- */
.receipt { background: var(--paper); border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.receipt-head { background: var(--herb); color: var(--ivory); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; }
.receipt-head .label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; opacity: .85; font-weight: 600; }
.receipt-head .big { font-family: var(--font-serif); font-size: 38px; font-weight: 700; line-height: 1; margin-top: 4px; transition: opacity .12s; }
.receipt-body { padding: 20px 24px 8px; }
.rline { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.rline .k { color: var(--ink-soft); }
.rline .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.rline.total { border-bottom: none; padding-top: 12px; font-size: 15.5px; }
.rline.total .v { color: var(--herb-deep); font-size: 18px; }

.torn-edge {
  height: 14px;
  background:
    linear-gradient(-45deg, var(--ivory) 8px, transparent 0),
    linear-gradient(45deg, var(--ivory) 8px, transparent 0);
  background-size: 16px 16px; background-position: left bottom; background-repeat: repeat-x;
}

.donut-wrap { display: flex; align-items: center; gap: 18px; padding: 6px 24px 20px; }
.donut { width: 118px; height: 118px; border-radius: 50%; flex: none; transition: background .35s ease; }
.legend { font-size: 13px; flex: 1; }
.legend-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.legend-row .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend-row .name { color: var(--ink-soft); flex: 1; }
.legend-row .pct { font-weight: 700; font-variant-numeric: tabular-nums; }

.pulse { animation: pulse .4s ease; }
@keyframes pulse { 0% { transform: scale(1); } 30% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* --- formula accordion --- */
.formula-accordion { margin-top: 20px; }
.formula-accordion details { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 4px 20px; }
.formula-accordion summary { cursor: pointer; padding: 14px 0; font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: space-between; list-style: none; }
.formula-accordion summary::-webkit-details-marker { display: none; }
.formula-accordion summary .chev { transition: transform .2s; color: var(--ink-soft); }
.formula-accordion details[open] summary .chev { transform: rotate(90deg); }
.formula-accordion .formula-body { padding-bottom: 18px; font-size: 13.5px; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 14px; }
.formula-accordion .formula-body code { background: var(--ivory-dim); padding: 2px 6px; border-radius: 6px; font-size: 12.5px; color: var(--ink); }

/* --- trust bar --- */
.trust { background: var(--herb-pale); border-radius: 24px; padding: 44px 32px; }
.trust h3 { text-align: center; font-family: var(--font-serif); font-weight: 600; font-size: 22px; margin: 0 0 32px; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
@media (max-width: 760px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
.trust-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--paper); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; color: var(--herb-deep); box-shadow: var(--shadow); }
.trust-grid .t { font-weight: 700; font-size: 14.5px; margin-bottom: 4px; }
.trust-grid .d { font-size: 12.5px; color: var(--ink-soft); }

/* --- cookie consent banner --- */
.consent-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--ink); color: #E7EFE9; padding: 18px 24px;
  box-shadow: 0 -8px 24px rgba(0,0,0,.18);
  transform: translateY(100%); transition: transform .25s ease;
}
.consent-banner.visible { transform: translateY(0); }
.consent-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.consent-inner p { margin: 0; font-size: 13.5px; line-height: 1.5; max-width: 62ch; color: #C7D6CC; }
.consent-inner a { color: #8FCB9F; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.consent-actions { display: flex; gap: 10px; flex-shrink: 0; }
.consent-actions button { font-family: inherit; font-size: 13.5px; font-weight: 700; padding: 10px 18px; border-radius: 10px; cursor: pointer; border: none; }
.consent-accept { background: var(--marigold); color: var(--ink); }
.consent-accept:hover { background: #F0B65C; }
.consent-decline { background: transparent; color: #C7D6CC; border: 1.5px solid #3E4F44 !important; }
.consent-decline:hover { border-color: #8FCB9F !important; color: var(--ivory); }
@media (max-width: 640px) { .consent-inner { flex-direction: column; align-items: stretch; } .consent-actions { justify-content: flex-end; } }