/* CookCalculator — Checker / Nutrition Tool Stylesheet
   Linked from all checker & guide pages (FODMAP, histamine, oxalate, purine,
   glycemic index, anti-inflammatory, pregnancy, freezer, etc.)
   Requires style.css to already be loaded.
   Last updated: 2026-04-19
*/

/* ── Legend ── */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 12px 24px 4px;
  max-width: 860px;
  margin: 0 auto;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Checker wrapper ── */
.checker-wrap {
  max-width: 860px;
  margin: 0 auto 48px;
  padding: 0 24px;
}

/* ── Search row ── */
.search-row { margin-bottom: 12px; }
.search-row input,
.search-bar input {
  width: 100%;
  padding: 13px 18px;
  font-size: 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  outline: none;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.search-row input:focus,
.search-bar input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(172,83,22,.1);
}
.search-row input::placeholder,
.search-bar input::placeholder { color: var(--text-light); }

/* Freezer guide uses .search-bar */
.search-bar { margin-bottom: 12px; }

/* ── Filter row ── */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

/* ── Result count / info ── */
.results-count,
.results-info {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 12px;
  font-weight: 500;
}

/* ── Food grid ── */
.food-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

/* ── No results ── */
.no-results {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-light);
  font-size: 15px;
}

/* ── Food cards ── */
.food-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow .2s;
}
.food-card:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,.07);
}

/* Severity border colours */
.food-card.low    { border-left-color: var(--green); }
.food-card.medium { border-left-color: #D4A017; }
.food-card.high   { border-left-color: var(--red); }

/* Freezer duration colours */
.food-card.best       { border-left-color: var(--green); }
.food-card.good       { border-left-color: #D4A017; }
.food-card.short-term { border-left-color: #E06820; }

.food-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.food-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  line-height: 1.3;
}

/* ── Level / GI / score badges ── */
.level-badge,
.gi-badge,
.score-badge,
.dur-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge-low    { background: var(--green-bg);  color: var(--green); }
.badge-medium { background: #FFF8E0;           color: #7A5C00; }
.badge-high   { background: #FDECEA;           color: #B71C1C; }
.badge-best   { background: var(--green-bg);  color: var(--green); }
.badge-good   { background: #FFF8E0;           color: #7A5C00; }
.badge-short  { background: #FFF0E6;           color: #7A3610; }

/* ── Food detail rows ── */
.food-serving,
.food-time,
.food-score,
.food-gi {
  font-size: 12.5px;
  color: var(--text-light);
}
.food-serving strong,
.food-time strong { color: var(--text); }

.food-note,
.food-quality,
.food-tip {
  font-size: 12.5px;
  color: var(--text-light);
  line-height: 1.5;
}

/* ── Food tags (FODMAP triggers, risk tags, etc.) ── */
.food-tags,
.fodmap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.ftag {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--tag-bg);
  color: var(--tag-text);
}

/* ── Callout variants ── */
.callout-pink {
  background: #FFF0F5;
  border-left: 4px solid #C2185B;
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin: 24px 0;
}
.callout-pink p { margin: 0; font-size: 15px; color: #6B1234; line-height: 1.6; }

.callout-blue {
  background: var(--blue-bg);
  border-left: 4px solid var(--blue);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin: 24px 0;
}
.callout-blue p { margin: 0; font-size: 15px; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .food-grid { grid-template-columns: 1fr; }
  .legend { gap: 8px 16px; }
}