/* PantryWeave — shared site layer (Field Forest)
   Load AFTER brand.css and after any page-local <style>, so the
   approved app tokens win over legacy per-page component colors. */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--pw-font);
    background: var(--pw-canvas);
    color: var(--pw-text);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--pw-font-display); color: var(--pw-text); }
:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--pw-surface); padding: 8px 12px; border-radius: 8px; z-index: 10; }

/* Top bar */
.topbar { border-bottom: 1px solid var(--pw-border); background: var(--pw-canvas); }
.topbar-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 36px; height: 36px; display: block; }
.brand span { font-family: var(--pw-font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.015em; color: var(--pw-action); }
.topnav { display: flex; align-items: center; gap: 24px; }
.topbar .lang-nav, .hero .lang-nav { position: static; display: flex; gap: 2px; }
.lang-nav a { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--pw-text-secondary); text-decoration: none; padding: 6px 8px; border-radius: 8px; background: transparent; }
.lang-nav a:hover { color: var(--pw-text); background: transparent; }
.lang-nav a.active { color: var(--pw-action); background: var(--pw-accent-soft); }
.nav-cta { font-size: 14px; font-weight: 600; color: var(--pw-action); text-decoration: none; border: 1px solid var(--pw-action); padding: 8px 16px; border-radius: 999px; white-space: nowrap; }
.nav-cta:hover { background: var(--pw-action); color: var(--pw-on-action); }

/* Programmatic page hero */
.hero { background: var(--pw-canvas); color: var(--pw-text); text-align: left; padding: 88px 0 72px; border-bottom: 1px solid var(--pw-border); }
.hero .container { max-width: 1120px; padding: 0 24px; }
.hero h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); font-weight: 600; letter-spacing: -0.032em; line-height: 1.06; max-width: 880px; margin-bottom: 22px; color: var(--pw-text); }
.hero .subtitle { font-size: 1.18rem; color: var(--pw-text-secondary); opacity: 1; max-width: 680px; margin: 0 0 28px; }
.hero .badge { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none; backdrop-filter: none; padding: 0; border-radius: 0; font-size: 14px; color: var(--pw-text-secondary); }
.hero .badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pw-warm); flex: none; }
.hero .back-link { color: var(--pw-accent); font-weight: 600; }
.hero .back-link:hover { color: var(--pw-action); }
.breadcrumb { max-width: 1120px; margin: 0 auto; padding: 16px 24px; font-size: 14px; color: var(--pw-text-secondary); }
.breadcrumb a { color: var(--pw-accent); }

/* Sections */
section { padding: 88px 0; border-top: 1px solid var(--pw-border); }
.hero + section, .breadcrumb + section { border-top: none; }
section h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 600; letter-spacing: -0.024em; line-height: 1.15; }
section .section-sub { color: var(--pw-text-secondary); font-size: 1.05rem; }
.content-section h2 { margin-bottom: 18px; }
.content-section p { color: var(--pw-text-secondary); font-size: 1.02rem; line-height: 1.75; }
.content-section a, .content-block a, .explainer-content a { color: var(--pw-accent); }

/* Cards — flat surfaces with a hairline, like the app */
.feature-card, .recipe-card, .staple-category, .staple-item, .testimonial, .comparison-col, .topic-card,
.ingredient-card, .plan-card, .choose-card, .cuisine-card, .diet-card, .coming-card, .meal-card,
.best-for-card, .problem-card, .meal-block, .diff-item, .weekly-plan, .pairings {
    background: var(--pw-surface);
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius-md);
    box-shadow: none;
}
a.card-link, .card-link { color: inherit; }
.feature-card h3, .staple-category h4, .recipe-card h3, .topic-card h3, .diet-card h3, .cuisine-card h3,
.ingredient-card h3, .choose-card h3, .meal-name { color: var(--pw-text); font-weight: 600; }
.feature-card p, .recipe-card p, .testimonial p { color: var(--pw-text-secondary); }
.staple-category li::before { color: var(--pw-warm); }
.comparison-col.highlight { border: 1.5px solid var(--pw-action); }
.comparison-col.highlight ul li::before { background: var(--pw-action); }
.comparison-col:not(.highlight) ul li::before { background: var(--pw-border); }
.check { color: var(--pw-success); }
.cross { color: var(--pw-danger); }
.tag, .macro-tag, .meal-cal { background: var(--pw-accent-soft); color: var(--pw-success); border: none; }
.pantry-hint { color: var(--pw-text-secondary); }
.pantry-items, .dish-preview { color: var(--pw-accent); }
.meal-block .meal-cal, .meal-card .meal-cal, .staple-item .macro-tag, .coming-card .tag { background: var(--pw-accent-soft); color: var(--pw-success); }
.choose-card ul li::before { color: var(--pw-success); }

/* Tinted band (replaces the legacy inline #f1f5ff sections) */
.band, .explainer { background: var(--pw-surface); }
.band .feature-card, .band .recipe-card, .band .pairings, .band .staple-item, .band .meal-block,
.band .staple-category, .band .topic-card, .band .diff-item, .band .weekly-plan { background: var(--pw-canvas); }

/* Tables */
.meal-plan table, .table-wrap table, table { background: var(--pw-surface); border: 1px solid var(--pw-border); border-radius: var(--pw-radius-md); box-shadow: none; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.meal-plan th, table th { background: var(--pw-surface-raised); color: var(--pw-text); font-weight: 600; }
.meal-plan td, table td { border-bottom: 1px solid var(--pw-border); color: var(--pw-text-secondary); }
table tr:last-child td { border-bottom: none; }

/* Steps */
.step-num { background: transparent; color: var(--pw-warm); border: 1.5px solid var(--pw-warm); font-family: var(--pw-font-display); }

/* Testimonials / situations band */
.testimonials { background: var(--pw-surface); }
.testimonials .testimonial { background: var(--pw-canvas); }
.testimonial .author { color: var(--pw-text); }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--pw-border); }
.faq-item h3 { color: var(--pw-text); font-weight: 600; }
.faq-item p { color: var(--pw-text-secondary); }

/* Closing CTA — the app's launch Paper */
.cta { background: var(--pw-paper); color: var(--pw-text); padding: 104px 24px; }
.cta h2 { color: var(--pw-text); }
.cta p { color: var(--pw-text-secondary); }
.cta-mark { width: 96px; height: 96px; margin: 0 auto 28px; display: block; }

/* Waitlist form */
.waitlist-form { max-width: 480px; margin: 0 auto; text-align: left; }
.waitlist-row { display: flex; gap: 8px; margin-top: 0; background: var(--pw-surface); border: 1px solid var(--pw-border); border-radius: 999px; padding: 6px; }
.waitlist-row:focus-within { border-color: var(--pw-accent); }
.waitlist-row input { flex: 1; min-width: 0; border: none; border-radius: 999px; background: transparent; padding: 12px 18px; font: inherit; font-size: 1rem; color: var(--pw-text); }
.waitlist-row input:focus { outline: none; }
.waitlist-row button { border: none; border-radius: 999px; background: var(--pw-action); color: var(--pw-on-action); font: inherit; font-weight: 600; font-size: 0.98rem; padding: 12px 24px; cursor: pointer; white-space: nowrap; }
.waitlist-row button:hover { background: var(--pw-accent); }
.waitlist-row button:disabled { opacity: 0.6; cursor: wait; }
.cta .waitlist-note, .waitlist-note { font-size: 13px; color: var(--pw-text-secondary); opacity: 1; margin: 12px 0 0; padding-left: 18px; }
.waitlist-consent { color: var(--pw-text-secondary); padding-left: 18px; }
.waitlist-ok { font-size: 1.05rem; margin-top: 16px; color: var(--pw-success); font-weight: 600; }
.waitlist-err { font-size: 0.9rem; color: var(--pw-danger); margin-top: 8px; padding-left: 18px; }

/* Footer */
footer { border-top: 1px solid var(--pw-border); padding: 40px 24px; font-size: 14px; color: var(--pw-text-secondary); text-align: left; }
.footer-inner { max-width: 1120px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; }
.footer-links { display: flex; gap: 8px 24px; flex-wrap: wrap; margin: 0; }
.footer-links a, footer a { color: var(--pw-text-secondary); text-decoration: none; margin: 0; }
footer a:hover { color: var(--pw-action); text-decoration: underline; }

/* Site footer with sitemap columns */
.site-footer { padding: 64px 24px 40px; }
.footer-map { max-width: 1120px; margin: 0 auto 32px; display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer-map .brand { margin-bottom: 10px; }
.footer-map p { font-size: 14px; max-width: 280px; }
.footer-map h4 { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pw-text); margin-bottom: 12px; }
.footer-map ul { list-style: none; display: grid; gap: 8px; }
.footer-map a { color: var(--pw-text-secondary); text-decoration: none; font-size: 14px; }
.footer-map a:hover { color: var(--pw-action); text-decoration: underline; }
.footer-bottom { max-width: 1120px; margin: 0 auto; padding-top: 24px; border-top: 1px solid var(--pw-border); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Primary nav in the top bar */
.mainnav { display: flex; gap: 22px; }
.mainnav a { font-size: 14px; font-weight: 500; color: var(--pw-text-secondary); text-decoration: none; }
.mainnav a:hover { color: var(--pw-text); }

@media (max-width: 1080px) {
    .mainnav { display: none; }
    .footer-map { grid-template-columns: repeat(2, 1fr); }
    .footer-map > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .footer-map { grid-template-columns: 1fr 1fr; gap: 24px; } }

/* PWA install banner */
.pwa-install-banner { bottom: 16px; left: 16px; right: 16px; max-width: 560px; margin: 0 auto; background: var(--pw-surface); border: 1px solid var(--pw-border); border-radius: var(--pw-radius-md); box-shadow: none; }
.pwa-install-btn { background: var(--pw-action); color: var(--pw-on-action); border-radius: 999px; }
.pwa-dismiss-btn { border: 1px solid var(--pw-border); border-radius: 999px; color: var(--pw-text-secondary); }

@media (max-width: 900px) {
    .hero { padding: 56px 0 56px; }
    section { padding: 64px 0; }
}
@media (max-width: 520px) {
    .topbar-inner { padding: 0 20px; }
    .topbar .lang-nav { display: none; }
    .nav-cta { display: inline-block !important; padding: 7px 14px; font-size: 13px; }
    .hero .container { padding: 0 20px; }
    .waitlist-row { flex-direction: column; border-radius: var(--pw-radius-md); }
    .waitlist-row button { border-radius: var(--pw-radius-sm); padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Hub link lists */
.hub-links { list-style: none; display: grid; gap: 10px; margin-top: 8px; }
.hub-links a { color: var(--pw-accent); font-weight: 600; text-decoration: none; }
.hub-links a:hover { color: var(--pw-action); text-decoration: underline; }

/* Hero food cluster — the app's own onboarding images */
.hero.has-food .container { position: relative; }
.hero-food { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: 340px; height: 300px; pointer-events: none; }
.hero-food::before { content: ""; position: absolute; inset: 20px 30px; border-radius: 50%; background: var(--pw-accent-soft); }
.hf { position: absolute; height: auto; }
.hf-1 { width: 210px; left: 40px; top: 30px; }
.hf-2 { width: 120px; right: 0; top: 0; }
.hf-3 { width: 104px; right: 24px; bottom: 6px; }
.hero.has-food h1, .hero.has-food .subtitle { max-width: min(680px, calc(100% - 380px)); }
@media (max-width: 1080px) {
    .hero-food { position: relative; right: auto; top: auto; transform: none; margin: 0 0 24px; width: 260px; height: 220px; }
    .hf-1 { width: 160px; left: 24px; top: 24px; } .hf-2 { width: 92px; } .hf-3 { width: 80px; }
    .hero.has-food h1, .hero.has-food .subtitle { max-width: none; }
}
@media (max-width: 560px) {
    .hero-food { width: 220px; height: 170px; margin-bottom: 16px; }
    .hf-1 { width: 124px; left: 18px; top: 18px; } .hf-2 { width: 74px; } .hf-3 { width: 64px; right: 16px; }
}


/* Download CTA — official App Store badge + QR for desktop visitors */
.download { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.appstore-badge { display: inline-block; line-height: 0; border-radius: 10px; }
.appstore-badge img { height: 52px; width: auto; }
.appstore-badge:focus-visible { outline-offset: 4px; }
.dl-qr { display: flex; align-items: center; gap: 12px; margin: 0; }
.dl-qr img { width: 76px; height: 76px; border-radius: 10px; border: 1px solid var(--pw-border); background: var(--pw-surface); }
.dl-qr figcaption { font-size: 13px; color: var(--pw-text-secondary); max-width: 120px; line-height: 1.35; }
.dl-note { flex-basis: 100%; font-size: 14px; color: var(--pw-text-secondary); margin: 0; }
@media (hover: none), (max-width: 900px) { .dl-qr { display: none; } }
.cta .download { justify-content: center; margin-top: 32px; }
.cta .dl-note { text-align: center; }

/* Site footer — forest surface */
.site-footer { background: var(--pw-action); color: #DCE6DA; border-top: none; padding: 72px 24px 36px; }
.site-footer a { color: #DCE6DA; }
.site-footer a:hover { color: #FFFCF5; }
.footer-hero { max-width: 1120px; margin: 0 auto 56px; padding-bottom: 48px; border-bottom: 1px solid rgba(220, 230, 218, .22); display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.brand-light span { color: #FFFCF5 !important; display: inline !important; }
.brand-light img { background: #F7F3E8; border-radius: 50%; padding: 3px; }
.footer-motto { margin-top: 20px; font-family: var(--pw-font-display); font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: #FFFCF5; }
.footer-motto span { display: block; }
.footer-motto span:last-child { color: #A9C5A0; }
.site-footer .download { gap: 16px; }
.site-footer .dl-qr img { border-color: transparent; }
.site-footer .dl-qr figcaption, .site-footer .dl-note { color: #DCE6DA; }
.site-footer .footer-map p { color: #DCE6DA; }
.site-footer .footer-map h4 { color: #FFFCF5; }
.site-footer .footer-map a { color: #DCE6DA; }
.site-footer .footer-bottom { border-top-color: rgba(220, 230, 218, .22); color: #DCE6DA; }
@media (max-width: 560px) {
    .site-footer { padding: 56px 20px 32px; }
    .footer-hero { margin-bottom: 40px; padding-bottom: 36px; }
}

.footer-langs { display: flex; gap: 14px; flex-wrap: wrap; }
.footer-langs a { color: #DCE6DA; text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.footer-langs a[aria-current] { color: #FFFCF5; text-decoration: underline; }

/* Hero with a real app screen */
.hero-food-shot { height: 360px; }
.hero-food-shot .hf-phone { width: 168px; left: 86px; top: 0; border: 6px solid var(--pw-text); border-radius: 26px; background: var(--pw-canvas); z-index: 2; }
.hero-food-shot .hf-2 { width: 120px; right: 0; top: 24px; z-index: 3; }
.hero-food-shot .hf-3 { width: 110px; left: 0; right: auto; bottom: 10px; z-index: 3; }
@media (max-width: 1080px) {
    .hero-food-shot { height: 330px; }
    .hero-food-shot .hf-phone { width: 150px; left: 60px; }
}
@media (max-width: 560px) {
    .hero-food-shot { width: 260px; height: 300px; }
    .hero-food-shot .hf-phone { width: 136px; left: 62px; }
    .hero-food-shot .hf-2 { width: 84px; } .hero-food-shot .hf-3 { width: 78px; }
}