/* StepSpoon — static cooking-steps site
   Theme: green-primary, geometric sans (Outfit / Manrope)
   All files are English-only (no Chinese in source/comments). */

:root {
  --green-50:  #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-800: #166534;
  --green-900: #14532d; /* footer + anchor reserved bg */
  --ink:      #0f1f17;
  --muted:    #56706a;
  --line:     #e2ebe6;
  --paper:    #ffffff;
  --surface:  #f7faf8;
  --shadow:   0 10px 30px rgba(20, 83, 45, 0.08);
  --shadow-lg:0 18px 50px rgba(20, 83, 45, 0.14);
  --radius:   18px;
  --radius-sm:12px;
  --maxw:     1140px;
  --footer-bg: var(--green-900);
  --footer-fg: #e8f6ec;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Outfit", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 72px; /* room for anchor bar */
}

img { max-width: 100%; display: block; }

a { color: var(--green-700); text-decoration: none; }
a:hover { color: var(--green-800); }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--green-600); color: #fff; font-weight: 700;
  padding: 14px 26px; border-radius: 999px; border: none; cursor: pointer;
  font-size: 1rem; font-family: inherit; transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  box-shadow: 0 8px 20px rgba(22,163,74,.28);
}
.btn:hover { background: var(--green-700); transform: translateY(-1px); color:#fff; }
.btn--ghost { background: transparent; color: var(--green-700); border: 2px solid var(--green-200); box-shadow: none; }
.btn--ghost:hover { background: var(--green-50); }
.btn--dark { background: var(--green-900); box-shadow: 0 8px 20px rgba(20,83,45,.3); }
.btn--dark:hover { background: #0f3d22; }
.btn--block { width: 100%; justify-content: center; }
/* Disabled buttons must stay readable (e.g. "Previous" on step 1). */
.btn:disabled {
  opacity: .62;
  background: #fff;
  color: var(--green-800);
  border: 2px solid var(--green-300);
  box-shadow: none;
  cursor: default;
  transform: none;
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.25rem; color: var(--ink); }
.brand .logo { width: 34px; height: 34px; }
.brand .brand-name { color: var(--green-700); }
.nav-links { display: flex; align-items: center; gap: 18px; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--ink); font-weight: 600; font-size: .98rem; }
.nav-links a:hover { color: var(--green-700); }
.nav-search-btn {
  display: none; align-items: center; justify-content: center;
  width: 22px; height: 42px; padding: 0; margin-right: 12px;
  background: none; border: none; color: var(--green-700);
  cursor: pointer; text-decoration: none; transition: color .15s, transform .15s;
}
.nav-search-btn:hover { color: var(--green-800); transform: scale(1.06); }
.nav-search-btn svg { width: 22px; height: 22px; stroke-width: 2.4; }
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 28px; height: 42px; padding: 0; align-items: center; justify-content: center;
  flex-direction: column; gap: 5px; transition: transform .15s;
}
.nav-toggle:hover { transform: scale(1.06); }
.nav-toggle span { width: 26px; height: 3px; background: var(--green-700); border-radius: 2px; transition: .2s; }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1200px 500px at 80% -10%, var(--green-100), transparent 60%),
    linear-gradient(180deg, var(--green-50), #fff);
  padding: 70px 0 56px;
  border-bottom: 1px solid var(--line);
}
.hero .container { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.hero h1 { margin-bottom: 14px; }
.hero .lead { font-size: 1.15rem; color: var(--muted); max-width: 46ch; margin-bottom: 26px; }
.hero-art { width: 100%; border-radius: 24px; box-shadow: var(--shadow-lg); }
.eyebrow {
  display: inline-block; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  font-size: .78rem; color: var(--green-700); background: var(--green-100);
  padding: 6px 12px; border-radius: 999px; margin-bottom: 16px;
}

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px; text-align: center; }
.stat b { display: block; font-size: 1.7rem; color: var(--green-700); }
.stat span { color: var(--muted); font-size: .9rem; }

/* ---------- Sections ---------- */
.section { padding: 56px 0; }
.section--alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 34px; }
.section-head p { color: var(--muted); }

/* ---------- Category cards ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cat-card {
  position: relative; overflow: hidden; border-radius: var(--radius); color: #fff;
  min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease;
}
.cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.cat-card .cat-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cat-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,40,25,.05), rgba(15,40,25,.72)); z-index: 1; }
.cat-card .cat-icon { position: relative; z-index: 2; width: 46px; height: 46px; margin-bottom: auto; }
.cat-card h3, .cat-card p { position: relative; z-index: 2; margin: 0; }
.cat-card h3 { font-size: 1.35rem; }
.cat-card p { color: rgba(255,255,255,.85); font-size: .92rem; margin-top: 6px; }

/* ---------- Recipe cards ---------- */
.recipe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.recipe-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease;
}
.recipe-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.recipe-card .thumb { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; background: var(--green-50); }
.recipe-card .body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.recipe-card .cat-tag { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green-700); }
.recipe-card h3 { font-size: 1.12rem; margin: 0; }
.recipe-card p { color: var(--muted); font-size: .92rem; margin: 0 0 auto; }
.recipe-card .meta { display: flex; gap: 14px; color: var(--muted); font-size: .82rem; margin-top: 6px; }

/* ---------- Article (detail) ---------- */
.article { max-width: 760px; margin: 0 auto; }
.article-head { text-align: center; padding: 40px 0 10px; }
.article-head .cat-tag { color: var(--green-700); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; }
.article-head h1 { margin: 10px 0; }
.article-date { color: var(--muted); font-size: .9rem; }
.article-hero { width: 100%; border-radius: var(--radius); margin: 22px 0; box-shadow: var(--shadow); }
.article-body p { font-size: 1.06rem; color: #1c2b24; margin: 0 0 18px; }
.article-body h3 { margin-top: 30px; color: var(--green-800); }

/* ---------- Calorie panel (per-recipe total + calculation basis) ---------- */
.article-meta { margin-top: 10px; }
.article-meta .meta-cal {
  display: inline-block; font-weight: 700; color: var(--green-700);
  background: var(--green-100); padding: 6px 14px; border-radius: 999px; font-size: .92rem;
}
.cal-panel {
  background: var(--green-50); border: 1px solid var(--green-200);
  border-radius: var(--radius); padding: 22px 24px; margin: 22px 0 8px; box-shadow: var(--shadow);
}
.cal-head { display: flex; align-items: center; gap: 14px; }
.cal-flame { font-size: 1.8rem; line-height: 1; }
.cal-fig { flex: 1; }
.cal-num { font-size: 2.1rem; font-weight: 800; color: var(--green-800); line-height: 1; }
.cal-unit { color: var(--muted); font-size: .92rem; margin-top: 2px; }
.cal-tag {
  align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green-700); background: #fff; border: 1px solid var(--green-200); padding: 4px 10px; border-radius: 999px;
}
.cal-table { margin: 16px 0 4px; border-top: 1px solid var(--green-200); }
.cal-row { display: flex; justify-content: space-between; padding: 9px 2px; border-bottom: 1px solid var(--green-100); font-size: .96rem; }
.cal-ing { color: var(--ink); font-weight: 600; }
.cal-k { color: var(--muted); font-weight: 600; }
.cal-row--total { border-bottom: none; border-top: 2px solid var(--green-200); margin-top: 2px; padding-top: 12px; }
.cal-row--total .cal-ing, .cal-row--total .cal-k { font-weight: 800; color: var(--green-800); }
.cal-note { color: var(--muted); font-size: .82rem; line-height: 1.5; margin: 12px 0 0; }

/* "While you're making this" — personal failure log, styled to match the
   existing soft hint boxes (cal-note / cal-panel) rather than a new look. */
.note-box {
  background: var(--green-50); border: 1px solid var(--green-200);
  border-left: 3px solid var(--green-600);
  border-radius: var(--radius); padding: 16px 18px; margin: 26px 0 0;
}
.note-box h4 {
  margin: 0 0 8px; font-size: .95rem; font-weight: 800;
  color: var(--green-800); letter-spacing: .01em;
}
.note-box p { margin: 0; font-size: .96rem; line-height: 1.65; color: #1c2b24; }

/* Step player (Take the Gavel equivalent) */
.step-player {
  background: var(--green-50); border: 1px solid var(--green-200); border-radius: var(--radius);
  padding: 22px; margin: 26px 0; box-shadow: var(--shadow);
}
.step-player .sp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.step-player .sp-counter { font-weight: 700; color: var(--green-700); }
.step-player .sp-progress { height: 8px; background: var(--green-100); border-radius: 999px; overflow: hidden; margin-bottom: 16px; }
.step-player .sp-bar { height: 100%; width: 0; background: var(--green-600); transition: width .3s ease; border-radius: 999px; }
.step-player .sp-step-title { font-size: 1.2rem; margin: 0 0 8px; color: var(--green-800); }
.step-player .sp-step-text { color: #1c2b24; margin: 0 0 18px; }
.step-player .sp-actions { display: flex; gap: 12px; }
.step-player .sp-dot { display:inline-block; width:10px; height:10px; border-radius:50%; background: var(--green-400); margin-right:6px; }

/* Page-flip transition between steps */
.step-player .sp-flipbox { perspective: 1200px; }
.step-player .sp-page { transform-origin: left center; backface-visibility: hidden; }
.step-player .sp-page.flip-next { animation: spFlipNext .45s ease; }
.step-player .sp-page.flip-prev { transform-origin: right center; animation: spFlipPrev .45s ease; }
@keyframes spFlipNext {
  0%   { transform: rotateY(-65deg); opacity: 0; }
  100% { transform: rotateY(0deg);   opacity: 1; }
}
@keyframes spFlipPrev {
  0%   { transform: rotateY(65deg);  opacity: 0; }
  100% { transform: rotateY(0deg);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .step-player .sp-page.flip-next,
  .step-player .sp-page.flip-prev { animation: none; }
}

/* Done state: hide the live player, show the summary + back button */
.step-player .sp-done { display: none; }
.step-player.is-done .sp-live { display: none; }
.step-player.is-done .sp-done { display: block; }
.step-player .sp-done .btn { margin-top: 10px; }

.sp-done { text-align: center; padding: 14px 0; }
.sp-done .sp-emoji { font-size: 2.4rem; }

/* Related */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* ---------- Footer ----------
   Brand intro block sits ABOVE the link columns (footer-brand). */
.site-footer { background: var(--footer-bg); color: var(--footer-fg); padding: 46px 0 30px; margin-top: 40px; }
.site-footer a { color: var(--green-200); }
.site-footer a:hover { color: #fff; }
.footer-brand { padding-bottom: 26px; margin-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.14); }
.footer-brand h4 { font-size: 1.15rem; }
.footer-grid--two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 640px; }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 12px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer .foot-note { color: rgba(232,246,236,.7); font-size: .88rem; max-width: 52ch; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 28px; padding-top: 18px; font-size: .82rem; color: rgba(232,246,236,.7); }
.cookie-note { font-size: .8rem; color: rgba(232,246,236,.75); margin-top: 14px; }

/* Master off-switch: while ads are not connected (ADS_VISIBLE=false in ads.js),
   every ad surface stays fully hidden. Flip the switch to turn them back on. */
body.ads-hidden { padding-bottom: 0; }
body.ads-hidden .ad-wrap,
body.ads-hidden .ad-slot,
body.ads-hidden #adAnchor,
body.ads-hidden #adInterstitial { display: none !important; }

/* ---------- AD SYSTEM ---------- */
/* Inline slots are VISIBLE by default in demo (AD_DEMO). Real creatives
   are detected in pure CSS via :has() — no JS class writes on inline slots,
   so the "late iframe stays hidden" bug and the MutationObserver-freeze bug
   are both structurally impossible. */
.ad-wrap { width: 100%; max-width: 336px; margin: 26px auto; text-align: center; }
.ad-wrap--full { max-width: 100%; }

.ad-slot {
  width: 100%;
  min-height: 250px;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--green-300);
  border-radius: var(--radius-sm);
  background: var(--green-50);
  color: var(--muted);
  position: relative;
  overflow: hidden;
}
.ad-slot::after {
  content: "advertisement";
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-600); opacity: .8;
}
/* When a real creative lands, drop the placeholder chrome (pure CSS, freeze-proof). */
.ad-slot:has(iframe),
.ad-slot:has(ins[data-ad-status="filled"]) {
  border: none; background: transparent; min-height: 0; padding: 0;
}
.ad-slot:has(iframe)::after,
.ad-slot:has(ins[data-ad-status="filled"])::after { content: ""; }

/* Production (no demo): empty slots start hidden, revealed only when filled.
   The MutationObserver in ads.js removes .is-empty once a real creative appears. */
body:not([data-ad-demo="true"]) .ad-slot.is-empty { display: none; }

/* Anchor (bottom floating bar, 320x50). Reserved padding bg = footer bg. */
#adAnchor {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  display: flex; justify-content: center; align-items: center;
  min-height: 56px; padding: 6px 0;
  background: var(--footer-bg); /* reserved padding bg matches footer */
  box-shadow: 0 -6px 20px rgba(0,0,0,.12);
}
#adAnchor .ad-slot { min-height: 50px; max-width: 320px; margin: 0; border-color: var(--green-800); background: rgba(255,255,255,.06); }
body:not([data-ad-demo="true"]) #adAnchor.is-empty { display: none; }
body:not([data-ad-demo="true"]) #adAnchor:has(.ad-slot.is-empty) { display: none; }
body[data-ad-demo="true"] #adAnchor .ad-slot::after { color: var(--green-200); }
#adAnchor .ad-close {
  position: absolute; right: 10px; top: 4px; background: rgba(255,255,255,.18); color: #fff;
  border: none; border-radius: 6px; width: 22px; height: 22px; cursor: pointer; font-size: 13px; line-height: 1;
}

/* Interstitial (full-screen). Hidden until triggered AND filled. */
#adInterstitial {
  position: fixed; inset: 0; z-index: 60; display: none;
  align-items: center; justify-content: center;
  background: rgba(8, 22, 14, .72); backdrop-filter: blur(3px);
}
#adInterstitial.is-open { display: flex; }
#adInterstitial .inter-box {
  background: var(--paper); border-radius: var(--radius); padding: 18px;
  max-width: 360px; width: calc(100% - 40px); text-align: center; box-shadow: var(--shadow-lg);
}
#adInterstitial .ad-slot { min-height: 250px; }
#adInterstitial .inter-continue {
  margin-top: 14px;
}

/* Back to top: fixed, 100px from viewport bottom. */
#backToTop {
  position: fixed; right: 20px; bottom: 100px; z-index: 38;
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--green-700); color: #fff; font-size: 20px; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
#backToTop.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
#backToTop:hover { background: var(--green-800); }

/* ---------- Legal pages ---------- */
.legal { max-width: 820px; margin: 0 auto; }
.legal h2 { margin-top: 34px; color: var(--green-800); }
.legal p, .legal li { color: #1c2b24; }

/* ---------- Nav search (icook.tw style) ---------- */
.nav-search-form { display: flex; align-items: center; gap: 6px; }
.nav-search-form input {
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  font-family: inherit; font-size: .9rem; width: 160px; background: var(--surface);
  color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.nav-search-form input:focus { outline: none; border-color: var(--green-400); box-shadow: 0 0 0 3px var(--green-100); }
.nav-search-form button {
  border: none; background: var(--green-600); color: #fff; border-radius: 50%;
  width: 34px; height: 34px; cursor: pointer; font-size: .9rem;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.nav-search-form button:hover { background: var(--green-700); }

/* ---------- Nav dropdown (categories) ---------- */
.nav-links .has-dropdown { position: relative; }
.nav-links .caret { font-size: .7rem; opacity: .7; }
.nav-links .dropdown {
  position: absolute; top: 100%; left: 0; min-width: 360px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 10px; display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px;
  max-height: 64vh; overflow-y: auto; z-index: 50;
}
.nav-links .has-dropdown:hover .dropdown,
.nav-links .has-dropdown.open .dropdown { display: grid; }
.nav-links .dropdown a { color: var(--ink); font-weight: 600; font-size: .9rem; padding: 8px 10px; border-radius: 9px; }
.nav-links .dropdown a:hover { background: var(--green-50); color: var(--green-700); }
.nav-links .dropdown .dropdown-sep { grid-column: 1 / -1; height: 1px; background: var(--line); margin: 6px 4px; }

/* ---------- Current-page highlight (req 5: padding so text never touches edges) ---------- */
.nav-links a.active {
  background: var(--green-600); color: #fff; padding: 7px 14px; padding-left: 15px; border-radius: 999px;
}
.nav-links a.active:hover { color: #fff; }
.nav-links .dropdown a.active { background: var(--green-600); color: #fff; padding-left: 15px; }

/* ---------- Recipe actions: like / save / share ---------- */
/* Single row, never wraps; gap keeps the buttons spaced apart. */
.recipe-actions {
  display: flex; flex-wrap: nowrap; justify-content: center;
  gap: 14px; margin: 4px 0 10px;
}
.act {
  flex: 0 0 auto; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--green-200); color: var(--green-700);
  font-family: inherit; font-weight: 700; font-size: .95rem; padding: 10px 18px; border-radius: 999px;
  transition: transform .12s, background .15s, border-color .15s, color .15s;
}
.act:hover { transform: translateY(-1px); border-color: var(--green-400); }
.act:active { transform: translateY(0); }
.act .ico { font-size: 1.05rem; line-height: 1; }
.act .cnt { background: var(--green-100); color: var(--green-800); border-radius: 999px; padding: 1px 8px; font-size: .85rem; }
.act.on { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.act.on .cnt { background: rgba(255,255,255,.22); color: #fff; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(20px);
  background: var(--green-900); color: #fff; padding: 12px 22px; border-radius: 999px;
  font-weight: 700; font-size: .95rem; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 70; max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Categories filter bar (search + ingredient chips) ---------- */
.filter-bar { display: flex; flex-direction: column; gap: 16px; margin: 0 auto 18px; max-width: 760px; }
.cat-search input {
  width: 100%; padding: 14px 18px; border: 1px solid var(--line); border-radius: 999px;
  font-family: inherit; font-size: 1rem; background: var(--surface); color: var(--ink);
}
.cat-search input:focus { outline: none; border-color: var(--green-400); box-shadow: 0 0 0 3px var(--green-100); }
.chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.chip {
  cursor: pointer; border: 1.5px solid var(--green-200); background: #fff; color: var(--green-700);
  font-family: inherit; font-weight: 600; font-size: .86rem; padding: 7px 14px; border-radius: 999px;
  transition: background .15s, border-color .15s, color .15s;
}
.chip:hover { border-color: var(--green-400); }
.chip.active { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.result-count { text-align: center; color: var(--muted); font-size: .92rem; margin-bottom: 18px; }
.empty { text-align: center; color: var(--muted); padding: 40px 0; font-size: 1.05rem; }

/* ---------- Calorie calculator ---------- */
.calc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 880px; margin: 0 auto 26px; }
.calc-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.calc-card h3 { margin: 0 0 14px; color: var(--green-800); }
.calc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-weight: 600; color: var(--muted); font-size: .82rem; }
.calc-field select {
  font-family: inherit; font-size: .95rem; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; color: var(--ink); width: 100%;
}
.calc-card-sum { text-align: right; font-weight: 800; color: var(--green-700); font-size: 1.15rem; margin-top: 4px; }
.calc-total {
  max-width: 520px; margin: 0 auto; background: var(--green-50); border: 1px solid var(--green-200);
  border-radius: var(--radius); padding: 18px 22px;
}
.calc-total-row { display: flex; justify-content: space-between; padding: 8px 0; color: var(--ink); }
.calc-total-row.calc-grand {
  border-top: 1px solid var(--green-200); margin-top: 6px; padding-top: 14px;
  font-size: 1.2rem; font-weight: 800; color: var(--green-800);
}
.calc-note { text-align: center; color: var(--muted); font-size: .85rem; max-width: 560px; margin: 18px auto 0; }

/* ---------- Homepage category/ingredient nav bar ---------- */
/* Mobile-first: a horizontally swipeable strip of pills (no dropdown). */
.cat-bar {
  position: relative;
  background: var(--green-50);
  border-bottom: 1px solid var(--line);
}
.cat-scroll {
  max-width: var(--maxw); margin: 0 auto; padding: 12px 20px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.cat-scroll::-webkit-scrollbar { display: none; }
.cat-bar-inner {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; width: max-content;
}
.cat-bar a {
  flex: 0 0 auto; white-space: nowrap; font-weight: 600; font-size: .9rem;
  color: var(--green-800); background: #fff; border: 1px solid var(--green-200);
  padding: 7px 14px; border-radius: 999px;
  transition: background .15s, color .15s, border-color .15s;
}
.cat-bar a:hover { background: var(--green-100); border-color: var(--green-300); color: var(--green-800); }
.cat-bar .cat-bar-sep { flex: 0 0 auto; width: 1px; height: 22px; background: var(--green-200); margin: 0 4px; }

/* Right-side expand / collapse button (mobile) */
.cat-row {
  display: flex; align-items: center; gap: 10px;
  max-width: var(--maxw); margin: 0 auto; padding: 10px 20px;
}
.cat-row .cat-scroll { flex: 1 1 auto; min-width: 0; padding: 0; }
.cat-toggle {
  flex: none; display: inline-flex; align-items: center; justify-content: flex-start;
  width: 34px; height: 34px; padding: 0 0 0 15px;   /* arrow sits 15px from the rule */
  color: var(--green-800);
  background: var(--green-50);                        /* same as the nav bar, no white */
  border: none; border-radius: 0;
  border-left: 3px solid var(--green-600);           /* colored vertical rule on the left */
  cursor: pointer;
}
.cat-toggle:active { background: var(--green-100); }
/* Single chevron drawn as an inline SVG so it sits perfectly centred; the whole
   icon rotates 180° on expand (down when collapsed, up when expanded). */
.cat-toggle-icon {
  display: block; width: 16px; height: 16px;
  transition: transform .18s ease;
}
.cat-toggle-icon polyline {
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.cat-bar.open .cat-toggle-icon { transform: rotate(180deg); }

/* Expanded: a panel drops down from the bottom of the bar as an overlay (absolute
   positioned) so it covers the content below instead of pushing it down. The
   original strip stays in place; the panel shares the bar's background. */
.cat-bar.open { border-bottom: none; }

/* Dropdown panel for the expanded state — positioned absolutely from the bottom of
   the bar, overlaying the content below (does not shift the page layout). */
.cat-panel {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
  display: none;
  background: var(--green-50);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .06);
  max-height: 60vh; overflow-y: auto;
}
.cat-bar.open .cat-panel { display: block; animation: catPanelIn .18s ease-out; }
@keyframes catPanelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cat-panel-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  max-width: var(--maxw); margin: 0 auto; padding: 4px 20px 14px;
}

/* Desktop (>= 981px): the "Browse recipes" dropdown now lives in the header,
   so the homepage strip is desktop-hidden; mobile keeps the swipeable strip. */
@media (min-width: 981px) {
  .cat-bar { display: none; }
}

/* ---------- Responsive ---------- */
/* Collapse the nav a bit earlier so the dropdown + search always fit. */
@media (max-width: 980px) {
  .nav-links {
    position: absolute; top: 68px; left: 0; right: 0; background: #fff;
    border-bottom: 1px solid var(--line); flex-direction: column; align-items: flex-start;
    gap: 0; padding: 8px 20px 16px; display: none; box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 12px 16px; width: 100%; }
  /* Highlight stays a full-row block; same horizontal padding keeps every
     item's text aligned whether or not it is the active page. */
  .nav-links a.active { display: block; width: 100%; padding: 12px 16px; border-radius: 10px; }
  .nav-toggle { display: flex; }
  .nav-search-btn { display: flex; }
  /* On mobile the collapsed nav-links is out of flow; keep brand left and pin
     the search + hamburger pair to the right, 12px apart (no space-between spread). */
  .nav { justify-content: flex-start; }
  .nav-search-btn { margin-left: auto; }
  .nav-cta { display: none; }
  .nav-search { width: 100%; }
  .nav-search-form { width: 100%; }
  .nav-search-form input { width: 100%; flex: 1; }
  /* Browse recipes = desktop-header dropdown only; on mobile the recipe nav is
   the standalone cat-bar below the header, never inside the hamburger menu. */
  .nav-links .has-dropdown { display: none; }
}

@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .cat-grid, .recipe-grid, .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  /* Keep Like/Save/Share on one line on narrow screens. */
  .recipe-actions { gap: 8px; }
  .act { padding: 9px 12px; font-size: .88rem; gap: 6px; }
  .nav-links {
    position: absolute; top: 68px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 20px 16px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 12px 16px; width: 100%; }
  .nav-toggle { display: flex; }
  .stats { grid-template-columns: 1fr 1fr; }
  .cat-grid, .recipe-grid, .related-grid { grid-template-columns: 1fr; }
  .section { padding: 40px 0; }
  #backToTop { bottom: 100px; }
  .cal-num { font-size: 1.8rem; }
  .cal-panel { padding: 18px 16px; }
  .article-meta .meta-cal { font-size: .86rem; }

  /* Mobile footer: centered brand intro, two tidy link columns, big tap targets */
  .site-footer { padding: 36px 0 26px; }
  .footer-brand { text-align: center; padding-bottom: 20px; margin-bottom: 22px; }
  .footer-brand .foot-note { margin-left: auto; margin-right: auto; }
  .footer-brand .cookie-note { text-align: left; }
  .footer-grid--two { gap: 20px 14px; }
  .site-footer h4 { margin-bottom: 6px; }
  .site-footer ul { gap: 0; }
  .site-footer li a { display: block; padding: 10px 0; font-size: .95rem; }
  .footer-bottom { text-align: center; }
}