/* ============================================================
   CalorieLab for All — Food Calorie Index styles
   Additive only. Reuses design tokens from styles.css
   (--teal, --coral, --amber, --bg-card, --radius-*, --sp-*, etc.)
   ============================================================ */

/* Breadcrumb (matches supplements.css pattern) */
.breadcrumb { font-size: 0.8rem; color: var(--text-faint); margin: var(--sp-lg) 0; }
.breadcrumb a { color: var(--text-faint); }
.breadcrumb span { color: var(--teal); }

/* ── Cuisine cards (Section 1) ───────────────────────────── */
.cuisine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-lg); margin-top: var(--sp-lg); }

.cuisine-card {
  display: block; position: relative; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-xl) var(--sp-lg); text-decoration: none; color: var(--text);
  text-align: center; transition: transform var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.cuisine-card:hover { transform: translateY(-4px); border-color: var(--teal); box-shadow: var(--shadow-md); opacity: 1; }
.cuisine-flag { font-size: 3rem; line-height: 1; margin-bottom: var(--sp-md); display: block; }
.cuisine-name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin-bottom: 4px; }
.cuisine-count { font-size: 0.78rem; color: var(--text-faint); }
.cuisine-card::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--teal-glow), transparent 60%);
  opacity: 0; transition: opacity var(--duration) var(--ease); pointer-events: none;
}
.cuisine-card:hover::after { opacity: 1; }

@media (max-width: 480px) { .cuisine-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); } }

/* ── Section heading with eyebrow ────────────────────────── */
.food-section-head { margin-bottom: var(--sp-lg); }
.food-section-head .section-eyebrow { font-size: 0.78rem; color: var(--teal); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-bottom: 4px; }
.food-section-head h2 { font-size: 1.6rem; margin-bottom: 6px; }
.food-section-head p { color: var(--text-muted); font-size: 0.92rem; max-width: 62ch; }

/* ── Dish / food card grid ───────────────────────────────── */
.food-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--sp-lg); }

.food-card {
  display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; text-decoration: none; color: var(--text); transition: transform var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
  position: relative;
}
.food-card:hover { transform: translateY(-3px); border-color: var(--teal); box-shadow: var(--shadow-md); opacity: 1; }
.food-card.filtered-out { display: none; }

.food-card-img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--bg-card-2);
  display: flex; align-items: center; justify-content: center; font-size: 2.6rem; color: var(--text-faint);
}
.food-card-img.placeholder { background: linear-gradient(135deg, var(--teal-glow), var(--bg-card-2)); }

.food-card-body { padding: var(--sp-md) var(--sp-lg) var(--sp-lg); display: flex; flex-direction: column; flex: 1; }
.food-card-cat { font-size: 0.7rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.food-card-name { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; margin-bottom: 6px; line-height: 1.3; }
.food-card-cals { display: flex; align-items: baseline; gap: 6px; margin-bottom: var(--sp-sm); }
.food-card-cals strong { font-family: var(--font-display); color: var(--teal); font-size: 1.2rem; }
.food-card-cals span { font-size: 0.72rem; color: var(--text-faint); }

.food-macro-row { display: flex; gap: var(--sp-sm); margin-bottom: var(--sp-sm); font-size: 0.7rem; }
.food-macro-chip { flex: 1; text-align: center; background: var(--bg-card-2); border-radius: var(--radius-sm); padding: 4px 2px; }
.food-macro-chip b { display: block; font-family: var(--font-display); font-size: 0.85rem; color: var(--text); }
.food-macro-chip span { color: var(--text-faint); font-size: 0.62rem; text-transform: uppercase; }

.food-tags-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--sp-sm); }
.food-tag { font-size: 0.64rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--teal-glow); color: var(--teal); border: 1px solid var(--teal); white-space: nowrap; }

.food-health-score { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--text-faint); margin-top: auto; padding-top: var(--sp-sm); }
.health-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.health-dot.hs-high { background: var(--teal); }
.health-dot.hs-mid { background: var(--amber); }
.health-dot.hs-low { background: var(--coral); }

.food-compare-btn {
  width: 100%; margin-top: var(--sp-sm); background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 7px; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); cursor: pointer;
  transition: all var(--duration) var(--ease); min-height: 34px;
}
.food-compare-btn:hover { border-color: var(--teal); color: var(--teal); }
.food-compare-btn.added { background: var(--teal-glow); border-color: var(--teal); color: var(--teal); }

@media (max-width: 480px) { .food-grid { grid-template-columns: 1fr; } }

/* ── Filters / search / sort (shared with supplements pattern) ── */
.filter-chip { /* fallback definition in case supplements.css absent on this page */
  background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px;
  font-size: 0.8rem; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: all var(--duration) var(--ease);
}
.filter-chip:hover { border-color: var(--teal); color: var(--teal); }
.filter-chip.active { background: var(--teal-glow); border-color: var(--teal); color: var(--teal); }

.filter-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-lg); margin-bottom: var(--sp-xl); }
.filter-row { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: var(--sp-md); }
.filter-group-label { font-size: 0.72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; margin: var(--sp-md) 0 6px; }

.sort-select-wrap select { min-height: 44px; }

/* ── Pagination ───────────────────────────────────────────── */
.pagination { display: flex; justify-content: center; align-items: center; gap: var(--sp-sm); margin-top: var(--sp-xl); flex-wrap: wrap; }
.page-btn {
  min-width: 40px; min-height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-muted); font-weight: 600; cursor: pointer; font-size: 0.85rem; transition: all var(--duration) var(--ease);
}
.page-btn:hover { border-color: var(--teal); color: var(--teal); }
.page-btn.active { background: var(--teal); border-color: var(--teal); color: var(--navy); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Category pills grid (Section 2 categories) ─────────────── */
.category-pill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: var(--sp-sm); margin-top: var(--sp-md); }
.category-pill {
  background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-sm) var(--sp-md);
  font-size: 0.8rem; font-weight: 600; color: var(--text-muted); cursor: pointer; text-align: center; transition: all var(--duration) var(--ease);
}
.category-pill:hover, .category-pill.active { border-color: var(--teal); color: var(--teal); background: var(--teal-glow); }

/* ── Detail page (dish / food) ──────────────────────────────── */
.food-detail-hero { display: grid; grid-template-columns: 280px 1fr; gap: var(--sp-xl); margin: var(--sp-xl) 0; align-items: start; }
.food-detail-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); background: var(--bg-card-2); }
.food-detail-eyebrow { font-size: 0.78rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.food-detail-hero h1 { font-size: 1.9rem; margin-bottom: var(--sp-sm); }
.food-detail-badges { display: flex; flex-wrap: wrap; gap: var(--sp-sm); align-items: center; margin-bottom: var(--sp-md); }
@media (max-width: 700px) { .food-detail-hero { grid-template-columns: 1fr; } }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px,1fr)); gap: var(--sp-sm); margin: var(--sp-lg) 0; }
.stat-box { background: var(--bg-card-2); border-radius: var(--radius-md); padding: var(--sp-md); text-align: center; }
.stat-box b { display: block; font-family: var(--font-display); font-size: 1.3rem; color: var(--teal); }
.stat-box span { font-size: 0.7rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; }

.macro-bar-row { display: flex; align-items: center; gap: var(--sp-md); margin-bottom: var(--sp-sm); font-size: 0.85rem; }
.macro-bar-label { width: 90px; flex-shrink: 0; color: var(--text-muted); }
.macro-bar-track { flex: 1; height: 10px; background: var(--bg-card-2); border-radius: 999px; overflow: hidden; }
.macro-bar-fill { height: 100%; border-radius: 999px; }
.macro-bar-value { width: 56px; text-align: right; font-weight: 600; flex-shrink: 0; }

.micro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: var(--sp-sm); }
.micro-item { background: var(--bg-card-2); border-radius: var(--radius-sm); padding: var(--sp-sm) var(--sp-md); font-size: 0.8rem; display: flex; justify-content: space-between; }
.micro-item span:first-child { color: var(--text-muted); }
.micro-item span:last-child { font-weight: 700; color: var(--text); }

.health-score-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; }
.health-score-ring { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: var(--navy); }

.diet-tags-list, .chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
.diet-tags-list li, .chip-list li { background: var(--teal-glow); color: var(--teal); border: 1px solid var(--teal); border-radius: 999px; padding: 6px 14px; font-size: 0.82rem; }

.disclaimer-note { font-size: 0.8rem; color: var(--text-faint); margin-top: var(--sp-lg); padding-top: var(--sp-lg); border-top: 1px solid var(--border); line-height: 1.6; }
.ref-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-sm); }
.ref-list li { font-size: 0.85rem; color: var(--text-muted); }

/* ── Compare tool table ──────────────────────────────────── */
#foodCompareTableWrap table { width: 100%; border-collapse: collapse; min-width: 640px; }
#foodCompareTableWrap th, #foodCompareTableWrap td { text-align: left; padding: var(--sp-sm) var(--sp-md); border-bottom: 1px solid var(--border); font-size: 0.82rem; vertical-align: top; }
#foodCompareTableWrap th { font-family: var(--font-display); color: var(--text-faint); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.04em; }
#foodCompareTableWrap td:first-child, #foodCompareTableWrap th:first-child { font-weight: 700; color: var(--text); position: sticky; left: 0; background: var(--bg-card); }

.compare-select-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: var(--sp-sm); margin-bottom: var(--sp-lg); }

/* ── Autocomplete dropdown ───────────────────────────────── */
.search-wrap { position: relative; }
.autocomplete-list {
  position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); max-height: 320px; overflow-y: auto; z-index: 50; margin-top: 4px; display: none;
}
.autocomplete-list.open { display: block; }
.autocomplete-item { padding: var(--sp-sm) var(--sp-md); cursor: pointer; font-size: 0.85rem; display: flex; justify-content: space-between; gap: var(--sp-sm); }
.autocomplete-item:hover, .autocomplete-item.highlighted { background: var(--teal-glow); color: var(--teal); }
.autocomplete-item small { color: var(--text-faint); }

.results-count { font-size: 0.8rem; color: var(--text-faint); margin-top: var(--sp-md); }