/* Food Butler — shared styles for header, footer, blog and long-form pages.
   The landing page (index.html) keeps its own inline styles and loads this file for the chrome. */

:root{
  --fb-white:#ffffff; --fb-surface:#f6f7f9; --fb-ink:#171a1f; --fb-body:#2a2e35;
  --fb-muted:#565c66; --fb-meta:#6b717b; --fb-faint:#878e99; --fb-line:#e7e9ee;
  --fb-red:#D5252D; --fb-red-hover:#b01d24; --fb-red-tint:#fdecec;
  --fb-navy:#1b202b; --fb-navy-2:#242a37; --fb-salmon:#ff8a7d;
  --fb-footer-link:#d3d6dc; --fb-footer-rule:#2e333c; --fb-footer-small:#a3a8b1;
  --fb-display:'Bricolage Grotesque',sans-serif;
  --fb-sans:'Figtree',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fb-white);color:var(--fb-ink);font-family:var(--fb-sans);-webkit-font-smoothing:antialiased}
a{color:var(--fb-red)}
a:hover{color:var(--fb-red-hover)}
img{max-width:100%;height:auto}
/* Containers measure content width (1080px, 880px, 36em) with side padding outside, as in the designs. */
.site-header__inner,.site-footer__inner,.blog-intro,.featured-wrap,.post-grid-wrap,.post-header,
.post-cover-wrap,.prose,.closing-cta__inner{box-sizing:content-box}

/* ── Header ─────────────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--fb-line)}
.site-header__inner{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;padding:8px clamp(16px,2vw,20px)}
.site-brand{display:flex;align-items:center;gap:9px;min-height:44px;text-decoration:none;color:var(--fb-ink);flex:none}
.site-brand:hover{color:var(--fb-ink)}
.site-brand__name{font-family:var(--fb-display);font-weight:700;font-size:clamp(16px,calc(12px + 1vw),18px)}
.brand-mark{width:30px;height:30px;flex:none;border-radius:50%;background:var(--fb-red);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--fb-display);font-weight:700;font-size:14px;line-height:1}
.site-nav{display:flex;align-items:center;gap:clamp(4px,1.4vw,18px)}
.site-nav__link{display:flex;align-items:center;min-height:44px;padding:0 8px;font-size:14px;font-weight:600;color:var(--fb-ink);text-decoration:none}
.site-nav__link:hover,.site-nav__link[aria-current]{color:var(--fb-red)}
.site-nav__cta{display:flex;align-items:center;min-height:44px;margin-left:4px;padding:0 15px;border-radius:10px;background:var(--fb-red);color:#fff;font-size:13.5px;font-weight:700;text-decoration:none;white-space:nowrap}
.site-nav__cta:hover{background:var(--fb-red-hover);color:#fff}
@media (max-width:560px){.site-nav__link--wide{display:none}}

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer{background:var(--fb-ink);color:#fff}
.site-footer__inner{max-width:1080px;margin:0 auto;padding:44px clamp(16px,2vw,20px) 32px;display:flex;flex-direction:column;gap:28px}
.site-footer__top{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between}
.site-brand--light,.site-brand--light:hover{color:#fff;min-height:0}
.site-brand--light .site-brand__name{font-size:18px}
.site-footer__nav{display:flex;flex-wrap:wrap;gap:0 24px;margin:-10px 0}
.site-footer__nav a{display:flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;color:var(--fb-footer-link);text-decoration:none}
.site-footer__nav a:hover{color:#fff}
.site-footer__legal{margin:0;padding-top:22px;border-top:1px solid var(--fb-footer-rule);font-size:13px;color:var(--fb-footer-small)}

/* ── Shared blog bits ───────────────────────────────────────────────── */
.section-title{margin:0 0 28px;font-family:var(--fb-display);font-weight:800;font-size:clamp(24px,calc(20px + .6vw),28px);letter-spacing:-.012em}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:44px 32px}
.post-grid-wrap{max-width:1080px;margin:0 auto;padding:clamp(36px,4vw,56px) 20px clamp(64px,7vw,96px)}
.post-grid-wrap--related{padding-top:clamp(48px,5vw,72px)}

/* Post card */
.post-card{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--fb-ink)}
.post-card:hover{color:var(--fb-red)}
.post-card__cover,.featured__cover{aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--fb-surface)}
.post-card__cover img,.featured__cover img,.post-cover img{display:block;width:100%;height:100%;object-fit:cover}
.post-card__body{display:flex;flex-direction:column;gap:8px}
.post-card__title{margin:0;font-family:var(--fb-display);font-weight:700;font-size:21px;line-height:1.25;letter-spacing:-.01em;color:inherit;text-wrap:pretty}
.post-card__excerpt{margin:0;font-size:15.5px;line-height:1.55;color:var(--fb-muted);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-card__meta,.featured__meta{margin:0;font-size:13.5px;font-weight:600;color:var(--fb-meta)}

/* ── Blog index ─────────────────────────────────────────────────────── */
.blog-intro{max-width:1080px;margin:0 auto;padding:clamp(40px,5vw,72px) 20px clamp(28px,3vw,44px)}
.blog-intro h1{margin:0 0 12px;font-family:var(--fb-display);font-weight:800;font-size:clamp(36px,calc(26px + 2.5vw),60px);line-height:1.02;letter-spacing:-.02em}
.blog-intro p{margin:0;max-width:520px;font-size:clamp(16px,calc(14px + .4vw),18px);line-height:1.55;color:var(--fb-muted);text-wrap:pretty}
.featured-wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.featured{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(20px,3vw,44px);align-items:center;padding-bottom:clamp(40px,4vw,56px);border-bottom:1px solid var(--fb-line);text-decoration:none;color:var(--fb-ink)}
.featured:hover{color:var(--fb-red)}
.featured__cover{border-radius:18px}
.featured__copy{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.featured__eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fb-red)}
.featured__title{margin:0;font-family:var(--fb-display);font-weight:800;font-size:clamp(28px,calc(20px + 1.4vw),40px);line-height:1.08;letter-spacing:-.018em;color:inherit;text-wrap:pretty}
.featured__excerpt{margin:0;font-size:clamp(16px,calc(14px + .3vw),17.5px);line-height:1.6;color:var(--fb-muted);text-wrap:pretty}
.featured__more{font-size:15px;font-weight:700;color:var(--fb-red)}
.blog-empty{margin:0;padding-bottom:clamp(64px,7vw,96px);color:var(--fb-muted)}
.blog-bottom-space{height:clamp(64px,7vw,96px)}

/* ── Post ───────────────────────────────────────────────────────────── */
.post-header{max-width:880px;margin:0 auto;padding:clamp(36px,4.5vw,64px) 20px clamp(28px,3vw,40px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.back-link{display:flex;align-items:center;min-height:44px;margin:-12px 0 -10px;padding:0 8px;font-size:14px;font-weight:700;color:var(--fb-red);text-decoration:none}
.back-link:hover{color:var(--fb-red-hover)}
.post-header h1{margin:0;font-family:var(--fb-display);font-weight:800;font-size:clamp(34px,calc(26px + 2.2vw),56px);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.post-header__meta{margin:0;font-size:15px;font-weight:600;color:var(--fb-meta)}
.post-cover-wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.post-cover{max-width:923px;margin:0 auto;aspect-ratio:923/560;border-radius:clamp(14px,1.6vw,20px);overflow:hidden;background:var(--fb-surface)}
.post-body{padding:clamp(36px,4vw,56px) 20px clamp(56px,6vw,80px)}

/* ── Prose (markdown body: posts + long-form pages) ─────────────────── */
.prose{max-width:36em;margin:0 auto;font-size:clamp(17px,calc(15.5px + .35vw),19px);line-height:1.7;color:var(--fb-body);overflow-wrap:break-word}
.prose p{margin:0 0 1.15em}
.prose h2{margin:2.1em 0 .6em;font-family:var(--fb-display);font-weight:800;font-size:1.6em;line-height:1.15;letter-spacing:-.015em;color:var(--fb-ink);text-wrap:balance}
.prose h3{margin:1.7em 0 .4em;font-family:var(--fb-display);font-weight:700;font-size:1.15em;line-height:1.3;color:var(--fb-ink)}
.prose h4{margin:1.5em 0 .4em;font-size:1em;font-weight:700;color:var(--fb-ink)}
.prose > :first-child{margin-top:0}
.prose h2 + h3{margin-top:.8em}
.prose ul,.prose ol{margin:0 0 1.3em;padding-left:1.25em}
.prose ol{padding-left:1.4em}
.prose li{margin:0 0 .4em;padding-left:.25em}
.prose ol > li{padding-left:.3em}
.prose li > ul,.prose li > ol{margin:.4em 0 0}
.prose li > p{margin:0 0 .4em}
.prose strong{font-weight:700;color:var(--fb-ink)}
.prose a{color:var(--fb-red);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.prose a:hover{color:var(--fb-red-hover)}
.prose hr{margin:2.2em 0;border:0;border-top:1px solid var(--fb-line)}
.prose code{font-size:.88em;background:var(--fb-surface);border:1px solid var(--fb-line);border-radius:6px;padding:.1em .35em}
.prose blockquote{margin:1.8em 0;padding:0}
.prose blockquote .quote-mark{display:block;height:.6em;font-family:var(--fb-display);font-weight:800;font-size:2.6em;line-height:1;color:var(--fb-red)}
.prose blockquote p{margin:0 0 .5em;font-family:var(--fb-display);font-weight:600;font-size:1.3em;line-height:1.35;letter-spacing:-.01em;color:var(--fb-ink);text-wrap:pretty}
.prose blockquote cite{font-style:normal;font-size:.8em;font-weight:600;color:var(--fb-meta)}
.prose figure{margin:1.8em 0}
.prose figure img,.prose > p img{display:block;width:100%;border-radius:14px}
.prose figcaption{margin-top:.7em;font-size:.78em;line-height:1.5;color:var(--fb-meta)}
.prose .table-wrap{margin:1.4em 0 1.8em;overflow-x:auto}
.prose table{width:100%;border-collapse:collapse;font-size:.92em;line-height:1.45;color:var(--fb-ink)}
.prose th{text-align:left;padding:.6em 1em .6em 0;border-bottom:2px solid var(--fb-ink);font-size:.82em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;vertical-align:bottom}
.prose td{padding:.75em 1em .75em 0;border-bottom:1px solid var(--fb-line);vertical-align:top}
.prose th:last-child,.prose td:last-child{padding-right:0}
.prose .align-right{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.prose .align-center{text-align:center}
.prose tfoot td{padding:.85em 1em .85em 0;border-top:2px solid var(--fb-ink);border-bottom:0;font-weight:800}
.prose tfoot td:last-child{padding-right:0;color:var(--fb-red)}

/* TL;DR */
.prose .tldr{margin:0 0 2em;padding:clamp(16px,2vw,22px) clamp(16px,2.4vw,26px);background:var(--fb-surface);border:1px solid var(--fb-line);border-radius:14px}
.prose .tldr p{color:var(--fb-ink)}
.prose .tldr > :last-child{margin-bottom:0}
.prose .tldr .tldr__label{margin:0 0 .45em;font-size:.68em;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--fb-red)}

/* App callout */
.prose .app-callout{margin:1.8em 0 2.2em;background:var(--fb-ink);color:#fff;border-radius:20px;overflow:hidden;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));align-items:stretch}
.app-callout__copy{padding:1.5em 1.45em;display:flex;flex-direction:column;justify-content:center;gap:1em;align-items:flex-start}
.app-callout__brand{display:flex;align-items:center;gap:8px;font-size:.7em;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fb-footer-link)}
.app-callout__mark{width:22px;height:22px;flex:none;border-radius:50%;background:var(--fb-red);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--fb-display);font-size:10px;letter-spacing:0;line-height:1}
.prose .app-callout__headline{margin:0;font-family:var(--fb-display);font-weight:800;font-size:1.45em;line-height:1.1;letter-spacing:-.015em;color:#fff;text-wrap:balance}
.prose .app-callout__btn{display:inline-block;background:var(--fb-red);color:#fff;font-size:.84em;font-weight:700;line-height:1.2;text-decoration:none;border-radius:10px;padding:.85em 1.3em}
.prose .app-callout__btn:hover{background:var(--fb-red-hover);color:#fff}
.app-callout__media{min-height:200px;background:var(--fb-navy-2);position:relative;overflow:hidden}
.prose .app-callout__media img{position:absolute;left:50%;top:26px;width:min(62%,220px);height:auto;transform:translateX(-50%);border-radius:18px 18px 0 0;border:5px solid #0d0f12;border-bottom:none;display:block}

/* FAQ */
.prose .faq{margin-top:2.6em}
.prose .faq h2{margin:0 0 .5em}
.faq__list{border-top:1px solid var(--fb-line)}
.faq__item{padding:1.1em 0 1.15em;border-bottom:1px solid var(--fb-line)}
.prose .faq__item h3{margin:0 0 .35em;font-size:1.1em;text-wrap:pretty}
.prose .faq__item > :last-child{margin-bottom:0}

/* ── Closing CTA ────────────────────────────────────────────────────── */
.closing-cta{background:var(--fb-red);color:#fff}
.closing-cta__inner{max-width:880px;margin:0 auto;padding:clamp(48px,5vw,72px) 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.closing-cta h2{margin:0;font-family:var(--fb-display);font-weight:800;font-size:clamp(28px,calc(20px + 1.6vw),42px);line-height:1.08;letter-spacing:-.018em;text-wrap:balance}
.closing-cta p{margin:0;max-width:480px;font-size:clamp(16px,calc(14px + .3vw),18px);line-height:1.55;text-wrap:pretty}
.closing-cta__btn{margin-top:6px;display:inline-block;width:min(100%,320px);padding:15px 24px;border-radius:12px;background:#fff;color:var(--fb-ink);font-size:15px;font-weight:700;text-decoration:none}
.closing-cta__btn:hover{background:var(--fb-ink);color:#fff}

/* ── Long-form pages (Privacy, Terms, Affiliate Disclosure) ─────────── */
.prose.longform{padding:clamp(40px,5vw,72px) 20px clamp(64px,7vw,96px)}
.longform-header{margin:0 0 2.2em;padding-bottom:1.4em;border-bottom:1px solid var(--fb-line)}
.longform-header--plain{border-bottom:0;padding-bottom:0;margin-bottom:1em}
.longform-header h1{margin:0 0 .35em;font-family:var(--fb-display);font-weight:800;font-size:clamp(34px,calc(26px + 1.6vw),48px);line-height:1.05;letter-spacing:-.02em;color:var(--fb-ink);text-wrap:balance}
.longform-header--plain h1{margin:0}
.longform-header__meta{margin:0;font-size:15px;font-weight:600;color:var(--fb-meta)}
.longform h2{font-size:1.45em}
.longform--status{min-height:52vh}
/* Legal notices are blockquotes in the source; show them as a boxed notice, not a pull quote. */
.longform blockquote{margin:1.4em 0;padding:1em 1.2em;background:var(--fb-surface);border-left:3px solid var(--fb-red);border-radius:0 10px 10px 0}
.longform blockquote .quote-mark{display:none}
.longform blockquote p{font-family:var(--fb-sans);font-weight:600;font-size:.84em;line-height:1.6;letter-spacing:0}
.longform blockquote > :last-child{margin-bottom:0}
.prose .button{display:inline-block;margin-top:.4em;padding:.8em 1.3em;border-radius:12px;background:var(--fb-red);color:#fff;font-size:.88em;font-weight:700;text-decoration:none}
.prose .button:hover{background:var(--fb-red-hover);color:#fff}