/* ============================================================
   GLP-1 Meal Planner - Full Responsive Stylesheet
   Mobile-first. No frameworks. CSS Grid for recipe cards.
   Green / health colour palette.
   ============================================================ */

/* ----------------------------------------------------------
   CSS Custom Properties (Design Tokens)
   ---------------------------------------------------------- */
:root {
  /* Primary palette - health / green */
  --color-primary: #2d8a4e;
  --color-primary-light: #3fad66;
  --color-primary-dark: #1e6b38;
  --color-primary-bg: #eaf7ef;

  /* Extended green scale */
  --color-primary-50: #e8f5e9;
  --color-primary-100: #c8e6c9;
  --color-primary-200: #a5d6a7;
  --color-primary-300: #81c784;
  --color-primary-400: #66bb6a;
  --color-primary-500: #4caf50;
  --color-primary-600: #43a047;
  --color-primary-700: #388e3c;
  --color-primary-800: #2e7d32;
  --color-primary-900: #1b5e20;

  /* Accent */
  --color-accent: #e8a838;
  --color-accent-dark: #c78d2a;

  /* Neutrals */
  --color-text: #1a2e1a;
  --color-text-secondary: #4a5c4a;
  --color-text-muted: #7a8c7a;
  --color-text-inverse: #ffffff;
  --color-bg: #ffffff;
  --color-bg-alt: #f5f9f5;
  --color-bg-accent: #eaf7ef;
  --color-border: #d4e4d4;
  --color-border-light: #e8f0e8;

  /* Gray scale */
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #eeeeee;
  --color-gray-300: #e0e0e0;
  --color-gray-400: #bdbdbd;
  --color-gray-500: #9e9e9e;
  --color-gray-600: #757575;
  --color-gray-700: #616161;
  --color-gray-800: #424242;
  --color-gray-900: #212121;

  /* Semantic */
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-info: #17a2b8;

  /* Score bar colours */
  --score-high: #28a745;
  --score-medium: #ffc107;
  --score-low: #dc3545;
  --score-avoid: #c62828;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 5rem;

  /* Typography */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Georgia", "Times New Roman", serif;
  --font-mono: "SF Mono", "Fira Code", "Fira Mono", Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3rem;

  /* Layout */
  --max-width: 1200px;
  --max-width-narrow: 800px;
  --nav-height: 60px;
  --sidebar-width: 280px;
  --container-padding: var(--space-md);

  /* Borders & Shadows */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;

  /* Z-index layers */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ----------------------------------------------------------
   Reset & Base
   ---------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text);
  line-height: 1.3;
  margin-bottom: var(--space-sm);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p {
  margin-bottom: var(--space-md);
  color: var(--color-text-secondary);
}

strong {
  font-weight: 600;
}

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* ----------------------------------------------------------
   Accessibility
   ---------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--color-primary-dark);
  color: var(--color-text-inverse);
  padding: var(--space-sm) var(--space-md);
  z-index: var(--z-toast);
  border-radius: 0 0 var(--radius-md) 0;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
}

/* ----------------------------------------------------------
   Layout Containers
   ---------------------------------------------------------- */
.container,
.nav__container,
.hero__container,
.symptom-selector__container,
.featured-recipes__container,
.quick-links__container,
.seo-content__container,
.footer__container,
.listing-header__container,
.listing-content__container,
.recipe-hero__container,
.recipe-stats__container,
.symptom-badges__container,
.recipe-content__container,
.nutrition-card__container,
.related-recipes__container,
.app-cta__container,
.symptom-header__container,
.symptom-explanation__container,
.food-recommendations__container,
.symptom-recipes__container,
.meal-plan-link__container,
.plan-header__container,
.plan-summary__container,
.plan-days__container,
.plan-tips__container,
.guide-header__container,
.guide-intro__container,
.food-filter__container,
.food-cards__container,
.drug-header__container,
.drug-overview__container,
.drug-foods__container,
.drug-recipes__container,
.drug-meal-plan__container,
.drug-symptoms__container,
.drug-disclaimer__container,
.programmatic-header__container,
.programmatic-intro__container,
.programmatic-recipes__container,
.related-pages__container,
.programmatic-seo__container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.section-title {
  font-size: var(--text-2xl);
  text-align: center;
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

.section-subtitle {
  text-align: center;
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto var(--space-xl);
  font-size: var(--text-lg);
}

main {
  flex: 1;
}

/* ----------------------------------------------------------
   Navigation
   ---------------------------------------------------------- */
.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-light);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  box-shadow: var(--shadow-sm);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
}

.nav__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--text-xl);
  font-family: var(--font-heading);
  white-space: nowrap;
}

.nav__logo:hover {
  color: var(--color-primary-dark);
  text-decoration: none;
}

.nav__logo-icon {
  font-size: 1.5rem;
}

.nav__toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
}

.nav__toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition-normal), opacity var(--transition-fast);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.nav__menu {
  display: none;
  position: absolute;
  top: var(--nav-height);
  left: 0;
  right: 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-md) var(--space-lg);
  box-shadow: var(--shadow-md);
  list-style: none;
}

.nav__menu--open {
  display: block;
}

.nav__item {
  margin-bottom: var(--space-sm);
}

.nav__link {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text-secondary);
  font-weight: 500;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nav__link:hover {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  text-decoration: none;
}

.nav__link--cta {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  text-align: center;
  font-weight: 600;
}

.nav__link--cta:hover {
  background: var(--color-primary-dark);
  color: var(--color-text-inverse);
}

/* Legacy nav classes */
.main-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  padding: 0 var(--space-lg);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
}

.nav-logo {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}

.nav-logo:hover {
  color: var(--color-primary-dark);
  text-decoration: none;
}

.nav-links {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--space-lg);
}

.nav-links li a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  padding: var(--space-xs) 0;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
}

.nav-links li a:hover,
.nav-links li a.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  text-decoration: none;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition-normal);
}

.nav-toggle.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.nav-mobile {
  display: none;
  position: absolute;
  top: var(--nav-height);
  left: 0;
  right: 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  padding: var(--space-md) var(--space-lg);
}

.nav-mobile.open {
  display: block;
}

.nav-mobile a {
  display: block;
  padding: var(--space-sm) 0;
  font-size: var(--text-lg);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-light);
}

.nav-mobile a:last-child {
  border-bottom: none;
}

/* ----------------------------------------------------------
   Hero Section
   ---------------------------------------------------------- */
.hero {
  text-align: center;
  padding: var(--space-3xl) var(--space-md);
  background: linear-gradient(135deg, var(--color-primary-bg), var(--color-bg));
  margin-bottom: var(--space-2xl);
}

.hero__container {
  max-width: var(--max-width-narrow);
}

.hero__title,
.hero h1 {
  font-size: var(--text-3xl);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-md);
}

.hero__subtitle,
.hero p {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 640px;
  margin: 0 auto var(--space-xl);
  line-height: 1.7;
}

.hero__search {
  max-width: 560px;
  margin: 0 auto var(--space-lg);
}

.hero__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.hero__tags-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}

/* ----------------------------------------------------------
   Search
   ---------------------------------------------------------- */
.search-form {
  display: flex;
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-form:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-bg);
}

.search-form__input {
  flex: 1;
  padding: var(--space-sm) var(--space-lg);
  border: none;
  outline: none;
  font-size: var(--text-base);
  background: transparent;
}

.search-form__button {
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.search-form__button:hover {
  background: var(--color-primary-dark);
}

.search-container {
  position: relative;
  max-width: 500px;
  margin: 0 auto var(--space-xl);
}

.search-input {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  padding-left: 44px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-base);
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--transition-fast);
}

.search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-bg);
}

.search-input::placeholder {
  color: var(--color-text-muted);
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 400px;
  overflow-y: auto;
  z-index: 50;
  display: none;
}

.search-results.open {
  display: block;
}

.search-result-item {
  display: block;
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text);
  transition: background var(--transition-fast);
}

.search-result-item:hover {
  background: var(--color-bg-alt);
  text-decoration: none;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-name {
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.search-result-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.search-no-results {
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ----------------------------------------------------------
   Tags / Badges
   ---------------------------------------------------------- */
.tag {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.tag:hover {
  background: var(--color-primary);
  color: white;
  text-decoration: none;
}

.tag--nausea { background: #e8f5e9; color: #2e7d32; }
.tag--protein { background: #e3f2fd; color: #1565c0; }
.tag--digest { background: #fff3e0; color: #e65100; }
.tag--quick { background: #f3e5f5; color: #7b1fa2; }
.tag--small { font-size: var(--text-xs); padding: 2px var(--space-sm); }

/* ----------------------------------------------------------
   Symptom Selector
   ---------------------------------------------------------- */
.symptom-selector {
  padding: var(--space-3xl) 0;
  background: var(--color-bg-alt);
}

.symptom-selector__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
  max-width: 800px;
  margin: 0 auto;
}

.symptom-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-bg);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  text-align: center;
}

.symptom-card:hover {
  border-color: var(--color-primary-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.symptom-card[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  box-shadow: 0 0 0 3px rgba(45, 138, 78, 0.2);
}

.symptom-card__icon { font-size: 2rem; line-height: 1; }
.symptom-card__label { font-weight: 600; font-size: var(--text-sm); color: var(--color-text); }
.symptom-card__desc { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Legacy symptom nav */
.symptom-nav { margin-bottom: var(--space-2xl); }
.symptom-nav h2 { text-align: center; margin-bottom: var(--space-lg); }
.symptom-links { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }
.symptom-link {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-primary-bg);
  color: var(--color-primary-dark);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.symptom-link:hover { background: var(--color-primary); color: white; text-decoration: none; }

/* Feeling selector */
.feeling-selector {
  background: var(--color-primary-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.feeling-selector h2 { color: var(--color-primary-dark); margin-bottom: var(--space-lg); }
.feeling-buttons { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }
.feeling-btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-bg);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.feeling-btn:hover, .feeling-btn.active { background: var(--color-primary); color: white; }

/* ----------------------------------------------------------
   Buttons
   ---------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-base);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--color-primary); color: var(--color-text-inverse); }
.btn--primary:hover { background: var(--color-primary-dark); color: var(--color-text-inverse); }
.btn--secondary { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--secondary:hover { background: var(--color-primary-bg); }
.btn--large { padding: var(--space-md) var(--space-2xl); font-size: var(--text-lg); }
.btn--full { display: block; width: 100%; }

.view-all {
  display: inline-block;
  padding: var(--space-sm) var(--space-xl);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  font-weight: 600;
  text-align: center;
  transition: all var(--transition-fast);
}
.view-all:hover { background: var(--color-primary); color: white; text-decoration: none; }

/* ----------------------------------------------------------
   Recipe Grid (CSS Grid)
   ---------------------------------------------------------- */
.recipe-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.recipe-grid-sm {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

/* ----------------------------------------------------------
   Recipe Card
   ---------------------------------------------------------- */
.recipe-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.recipe-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.recipe-card a,
.recipe-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.recipe-card__link:hover { text-decoration: none; }

.recipe-card img,
.recipe-card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.recipe-card:hover .recipe-card__image { transform: scale(1.05); }

.recipe-card__image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--color-primary-bg);
}

.recipe-card__body { padding: var(--space-md); }

.recipe-card h3,
.recipe-card__title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  padding: var(--space-md) var(--space-md) var(--space-xs);
  margin-bottom: var(--space-sm);
}

.recipe-card__body .recipe-card__title { padding: 0; }

.recipe-card p,
.recipe-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding: 0 var(--space-md);
  margin-bottom: var(--space-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recipe-card__body .recipe-card__desc { padding: 0; }

.recipe-meta,
.recipe-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md) var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.recipe-card__body .recipe-card__meta { padding: 0; margin-bottom: var(--space-sm); }

.recipe-meta span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.recipe-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.recipe-card--horizontal .recipe-card__link { display: flex; align-items: center; }
.recipe-card--horizontal .recipe-card__image-wrap { width: 120px; min-height: 90px; flex-shrink: 0; aspect-ratio: auto; }
.recipe-card--horizontal .recipe-card__body { flex: 1; }

/* Small recipe cards */
.recipe-card-sm {
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: all var(--transition-fast);
}
.recipe-card-sm:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.recipe-card-sm a { display: block; color: inherit; text-decoration: none; }
.recipe-card-sm h3 { font-family: var(--font-body); font-size: var(--text-base); margin-bottom: var(--space-xs); }
.recipe-card-sm span { font-size: var(--text-xs); color: var(--color-text-muted); margin-right: var(--space-sm); }

/* Recipe list items */
.recipe-list { display: flex; flex-direction: column; gap: var(--space-md); }
.recipe-list-item { border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: var(--space-md); transition: border-color var(--transition-fast); }
.recipe-list-item:hover { border-color: var(--color-primary); }
.recipe-list-item a { display: block; color: inherit; text-decoration: none; }
.recipe-list-item h3 { font-family: var(--font-body); font-size: var(--text-base); margin-bottom: var(--space-xs); }
.recipe-list-item p { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-xs); }
.recipe-list-item span { font-size: var(--text-xs); color: var(--color-text-muted); margin-right: var(--space-md); }

/* ----------------------------------------------------------
   Quick Link Cards
   ---------------------------------------------------------- */
.quick-links { padding: var(--space-3xl) 0; }
.quick-links__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.quick-link-card {
  display: block;
  padding: var(--space-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.quick-link-card:hover { border-color: var(--color-primary-300); box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.quick-link-card__title { font-size: var(--text-lg); color: var(--color-primary); margin-bottom: var(--space-sm); }
.quick-link-card__desc { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: 0; }

/* ----------------------------------------------------------
   Featured Recipes
   ---------------------------------------------------------- */
.featured-recipes {
  text-align: center;
  padding: var(--space-3xl) 0;
}
.featured-recipes h2 { margin-bottom: var(--space-lg); }
.featured-recipes__cta { text-align: center; margin-top: var(--space-xl); }

/* ----------------------------------------------------------
   SEO Content
   ---------------------------------------------------------- */
.seo-content { padding: var(--space-3xl) 0; background: var(--color-bg-alt); }
.seo-content__body { max-width: var(--max-width-narrow); margin: 0 auto; }
.seo-content__body h3 { margin-top: var(--space-xl); margin-bottom: var(--space-sm); color: var(--color-primary-dark); }
.seo-content__body p { line-height: 1.7; }
.seo-content__body ul { list-style: disc; padding-left: var(--space-lg); margin-bottom: var(--space-md); }
.seo-content__body li { margin-bottom: var(--space-sm); color: var(--color-text-secondary); line-height: 1.7; }

/* ----------------------------------------------------------
   Recipe Detail Page
   ---------------------------------------------------------- */
.recipe-page { max-width: var(--max-width-narrow); margin: 0 auto; }

.recipe-hero { position: relative; }
.recipe-hero__image-wrap { aspect-ratio: 16 / 9; overflow: hidden; max-height: 450px; background: var(--color-primary-bg); }
.recipe-hero__image,
.recipe-hero-image { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); margin-bottom: var(--space-lg); }
.recipe-hero__overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%); padding: var(--space-2xl) 0 var(--space-lg); }
.recipe-hero__title { color: var(--color-text-inverse); font-size: var(--text-3xl); margin-bottom: var(--space-sm); }
.recipe-hero__description { color: rgba(255, 255, 255, 0.9); font-size: var(--text-lg); max-width: 640px; }

.recipe-header { margin-bottom: var(--space-xl); }
.recipe-description { font-size: var(--text-lg); color: var(--color-text-secondary); margin-bottom: var(--space-lg); }
.recipe-meta-bar { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); }
.recipe-meta-bar span { font-size: var(--text-sm); color: var(--color-text-secondary); background: var(--color-bg-alt); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); border: 1px solid var(--color-border-light); }
.recipe-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-lg); }

/* Recipe stats bar */
.recipe-stats { background: var(--color-bg-alt); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border-light); }
.recipe-stats__container { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; }
.recipe-stat { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); min-width: 80px; }
.recipe-stat__label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; }
.recipe-stat__value { font-size: var(--text-lg); font-weight: 700; color: var(--color-primary); }

/* ----------------------------------------------------------
   Symptom Badges & Score Bars
   ---------------------------------------------------------- */
.symptom-badges { padding: var(--space-xl) 0; }
.symptom-badges__heading { font-size: var(--text-xl); text-align: center; margin-bottom: var(--space-lg); }
.symptom-badges__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); max-width: 600px; margin: 0 auto; }

.symptom-badge {
  display: grid;
  grid-template-columns: 100px 1fr 50px;
  align-items: center;
  gap: var(--space-sm);
}
.symptom-badge__name { font-size: var(--text-sm); font-weight: 500; text-transform: capitalize; }
.symptom-badge__bar { height: 10px; background: var(--color-border-light); border-radius: var(--radius-full); overflow: hidden; }
.symptom-badge__fill { height: 100%; border-radius: var(--radius-full); transition: width var(--transition-slow); }
.symptom-badge--high .symptom-badge__fill { background: var(--score-high); }
.symptom-badge--medium .symptom-badge__fill { background: var(--score-medium); }
.symptom-badge--low .symptom-badge__fill { background: var(--score-low); }
.symptom-badge__score { font-size: var(--text-sm); font-weight: 600; text-align: right; }

/* Legacy symptom badges */
.symptom-badge--inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
}
.symptom-badge--nausea { background: #e8f5e9; color: #2e7d32; }
.symptom-badge--low-appetite { background: #fff3e0; color: #e65100; }
.symptom-badge--fatigue { background: #e3f2fd; color: #1565c0; }
.symptom-badge--bloating { background: #fce4ec; color: #c62828; }
.symptom-badge--constipation { background: #f3e5f5; color: #6a1b9a; }

/* Score bars */
.recipe-scores { margin-bottom: var(--space-xl); }
.score-bar { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-sm); }
.score-bar--simple { height: 8px; background: var(--color-border-light); border-radius: var(--radius-full); overflow: hidden; flex: 1; gap: 0; margin-bottom: 0; }
.score-label { flex: 0 0 120px; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary); }
.score-track { flex: 1; height: 10px; background: var(--color-border-light); border-radius: var(--radius-full); overflow: hidden; }
.score-fill { height: 100%; border-radius: var(--radius-full); background: var(--color-primary); transition: width var(--transition-normal); }
.score-fill--high { background: var(--score-high); }
.score-fill--medium { background: var(--score-medium); }
.score-fill--low { background: var(--score-low); }
.score-fill--avoid { background: var(--score-avoid); }
.score-value { flex: 0 0 40px; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); text-align: right; }
.score-bar__fill { height: 100%; border-radius: var(--radius-full); }
.score-bar__fill--high { background: var(--score-high); }
.score-bar__fill--medium { background: var(--score-medium); }
.score-bar__fill--low { background: var(--score-low); }
.score-bar__fill--avoid { background: var(--score-avoid); }
.score-bar__value { font-size: var(--text-sm); font-weight: 600; min-width: 36px; text-align: right; }

/* ----------------------------------------------------------
   Recipe Ingredients & Instructions
   ---------------------------------------------------------- */
.recipe-content { padding: var(--space-xl) 0; }
.recipe-content__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }

.recipe-ingredients {
  padding: var(--space-lg);
  background: var(--color-primary-bg);
  border-radius: var(--radius-lg);
}
.recipe-ingredients h2,
.recipe-ingredients__heading { font-size: var(--text-xl); margin-bottom: var(--space-md); color: var(--color-primary-dark); }
.recipe-ingredients ul,
.recipe-ingredients__list { list-style: none; padding: 0; }
.recipe-ingredients li,
.recipe-ingredients__item { padding: var(--space-sm) 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); font-size: var(--text-base); }
.recipe-ingredients li:last-child,
.recipe-ingredients__item:last-child { border-bottom: none; }
.recipe-ingredients__quantity { font-weight: 600; color: var(--color-primary); }
.recipe-ingredients__name { color: var(--color-text); }
.recipe-ingredients__prep { color: var(--color-text-muted); font-style: italic; }

.recipe-instructions { padding: var(--space-lg) 0; }
.recipe-instructions h2,
.recipe-instructions__heading { font-size: var(--text-xl); margin-bottom: var(--space-lg); }
.recipe-instructions ol { padding-left: var(--space-lg); }
.recipe-instructions li { padding: var(--space-sm) 0; line-height: 1.7; }
.recipe-instructions__list { list-style: none; counter-reset: step; }
.recipe-instructions__step { display: flex; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border-light); }
.recipe-instructions__step:last-child { border-bottom: none; }
.recipe-instructions__step-number { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-text-inverse); font-weight: 700; font-size: var(--text-sm); flex-shrink: 0; }
.recipe-instructions__step-text { flex: 1; color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 0; }

/* Tips & Storage */
.recipe-tips { background: var(--color-primary-bg); border-left: 4px solid var(--color-primary); padding: var(--space-lg); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin-bottom: var(--space-xl); }
.recipe-tips h3 { color: var(--color-primary-dark); margin-bottom: var(--space-sm); }
.recipe-tips ul { list-style: disc; padding-left: var(--space-lg); margin-bottom: 0; }
.recipe-tips li { margin-bottom: var(--space-xs); font-size: var(--text-sm); }
.recipe-storage { background: var(--color-bg-alt); padding: var(--space-lg); border-radius: var(--radius-md); margin-bottom: var(--space-xl); }
.recipe-body section { margin-bottom: var(--space-xl); }
.recipe-body h2 { font-size: var(--text-xl); border-bottom: 2px solid var(--color-primary-bg); padding-bottom: var(--space-sm); margin-bottom: var(--space-md); }

/* ----------------------------------------------------------
   Nutrition
   ---------------------------------------------------------- */
.nutrition-card {
  padding: var(--space-xl) 0;
  background: var(--color-bg-alt);
}
.nutrition-card__heading { text-align: center; margin-bottom: var(--space-sm); }
.nutrition-card__serving { text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-lg); }
.nutrition-card__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); max-width: 500px; margin: 0 auto; }
.nutrition-card__item { text-align: center; padding: var(--space-md); background: var(--color-bg); border-radius: var(--radius-md); }
.nutrition-card__item--primary { background: var(--color-primary-bg); }
.nutrition-card__value { display: block; font-size: var(--text-2xl); font-weight: 700; color: var(--color-primary); }
.nutrition-card__label { display: block; font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: var(--space-xs); }

/* Legacy nutrition */
.nutrition-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.nutrition-table tr { border-bottom: 1px solid var(--color-border-light); }
.nutrition-table td { padding: var(--space-sm) var(--space-md); }
.nutrition-table td:first-child { font-weight: 500; color: var(--color-text); }
.nutrition-table td:last-child { text-align: right; color: var(--color-text-secondary); }
.nutrition-note { font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; margin-top: var(--space-sm); }
.nutrition-card--legacy { background: var(--color-bg-alt); border-radius: var(--radius-md); padding: var(--space-lg); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
.nutrition-card--legacy .nutrient { display: flex; justify-content: space-between; font-size: var(--text-sm); padding: var(--space-xs) 0; }
.nutrition-card--legacy .nutrient-label { color: var(--color-text-secondary); }
.nutrition-card--legacy .nutrient-value { font-weight: 600; color: var(--color-text); }

/* ----------------------------------------------------------
   Listing Page
   ---------------------------------------------------------- */
.listing-header { background: var(--color-primary-bg); padding: var(--space-2xl) 0; text-align: center; }
.listing-header__title { font-size: var(--text-3xl); color: var(--color-primary-dark); }
.listing-header__description { max-width: 640px; margin: var(--space-sm) auto 0; }
.listing-header__count { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-sm); }
.listing-content { padding: var(--space-xl) 0; }
.listing-content__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
.listing-main { min-width: 0; }

/* ----------------------------------------------------------
   Filter Sidebar
   ---------------------------------------------------------- */
.filter-sidebar {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  display: none;
}
.filter-sidebar h3,
.filter-sidebar__heading { font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-md); color: var(--color-primary-dark); }
.filter-group { margin-bottom: var(--space-lg); border: none; }
.filter-group__title { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-sm); }
.filter-group label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary); margin-bottom: var(--space-xs); }
.filter-group select, .filter-group input[type="range"] { width: 100%; padding: var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-sm); background: var(--color-bg); color: var(--color-text); }
.filter-group select:focus, .filter-group input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-bg); }
.filter-checkbox { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; cursor: pointer; }
.filter-checkbox__input { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; }
.filter-checkbox__label { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* ----------------------------------------------------------
   Pagination
   ---------------------------------------------------------- */
.pagination { margin-top: var(--space-2xl); display: flex; justify-content: center; }
.pagination__list { display: flex; gap: var(--space-xs); }
.pagination__link { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; text-decoration: none; color: var(--color-text-secondary); transition: background var(--transition-fast), color var(--transition-fast); }
.pagination__link:hover { background: var(--color-primary-bg); color: var(--color-primary); border-color: var(--color-primary-300); text-decoration: none; }
.pagination__link--current { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }

/* ----------------------------------------------------------
   Food Table
   ---------------------------------------------------------- */
.food-table-wrap { overflow-x: auto; margin-bottom: var(--space-lg); }
.food-table { min-width: 600px; }
.food-table__th { text-align: left; padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--color-border); }
.food-table__th--score { min-width: 180px; }
.food-table__th--num { text-align: right; }
.food-table__row { border-bottom: 1px solid var(--color-border-light); transition: background var(--transition-fast); }
.food-table__row:hover { background: var(--color-primary-bg); }
.food-table__td { padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); }
.food-table__td--score { display: flex; align-items: center; gap: var(--space-sm); }
.food-table__td--num { text-align: right; }
.food-table__link { font-weight: 500; }

/* ----------------------------------------------------------
   Symptom, Food, Drug, Plan page sections
   ---------------------------------------------------------- */
.symptom-header, .guide-header, .drug-header, .plan-header, .programmatic-header { background: var(--color-primary-bg); padding: var(--space-2xl) 0; text-align: center; }
.symptom-header__title, .guide-header__title, .drug-header__title, .plan-header__title, .programmatic-header__title { font-size: var(--text-3xl); color: var(--color-primary-dark); }
.symptom-header__subtitle, .drug-header__subtitle { font-size: var(--text-lg); color: var(--color-text-secondary); margin-top: var(--space-sm); }
.guide-header__intro, .plan-header__description { max-width: 640px; margin: var(--space-sm) auto 0; }
.plan-header__meta { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-text-secondary); }

/* Symptoms index page */
.symptoms-index { padding: var(--space-2xl) 0; }
.symptoms-index__container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); }
.symptoms-index__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
.symptom-index-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl);
  background: var(--color-bg);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.symptom-index-card:hover {
  border-color: var(--color-primary-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.symptom-index-card__icon { font-size: 2.5rem; line-height: 1; }
.symptom-index-card__title { font-size: var(--text-xl); color: var(--color-primary-dark); margin: 0; }
.symptom-index-card__desc { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; line-height: 1.5; }
.symptom-index-card__count { font-size: var(--text-xs); font-weight: 600; color: var(--color-primary); }

@media (min-width: 600px) {
  .symptoms-index__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .symptoms-index__grid { grid-template-columns: repeat(3, 1fr); }
}

.symptom-explanation, .guide-intro, .drug-overview, .programmatic-intro { padding: var(--space-2xl) 0; }
.symptom-explanation__body, .guide-intro__body, .drug-overview__body, .programmatic-intro__body { max-width: var(--max-width-narrow); margin: 0 auto; }
.symptom-explanation__tips { margin-top: var(--space-lg); padding: var(--space-lg); background: var(--color-primary-bg); border-radius: var(--radius-lg); }
.symptom-explanation__tips h3 { color: var(--color-primary-dark); }
.symptom-explanation__tip-list { list-style: disc; padding-left: var(--space-lg); }
.symptom-explanation__tip { margin-bottom: var(--space-sm); color: var(--color-text-secondary); }

.food-recommendations { padding: var(--space-2xl) 0; background: var(--color-bg-alt); }
.food-recommendations__cta { text-align: center; margin-top: var(--space-lg); }
.symptom-recipes { padding: var(--space-2xl) 0; }
.symptom-recipes__cta { text-align: center; margin-top: var(--space-xl); }

.meal-plan-link, .drug-meal-plan { padding: var(--space-2xl) 0; background: var(--color-bg-alt); }
.meal-plan-link__card, .drug-meal-plan__card { max-width: var(--max-width-narrow); margin: 0 auto; padding: var(--space-xl); background: var(--color-bg); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); text-align: center; }
.meal-plan-link__title, .drug-meal-plan__title { color: var(--color-primary-dark); }
.meal-plan-link__text { margin-bottom: var(--space-lg); }

/* Plan Summary */
.plan-summary { padding: var(--space-xl) 0; border-bottom: 1px solid var(--color-border-light); }
.plan-summary__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); max-width: 600px; margin: 0 auto; }
.plan-summary__item { text-align: center; padding: var(--space-md); background: var(--color-bg-alt); border-radius: var(--radius-md); }
.plan-summary__value { display: block; font-size: var(--text-2xl); font-weight: 700; color: var(--color-primary); }
.plan-summary__label { display: block; font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; margin-top: var(--space-xs); }

/* Plan Days */
.plan-days { padding: var(--space-2xl) 0; }
.plan-day { margin-bottom: var(--space-2xl); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); overflow: hidden; }
.plan-day__heading { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); background: var(--color-primary-bg); border-bottom: 1px solid var(--color-border-light); }
.plan-day__number { font-weight: 700; color: var(--color-primary); }
.plan-day__date { color: var(--color-text-muted); font-weight: 400; }
.plan-day__meals { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-md); }
.plan-meal__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-sm); }
.plan-meal__type { font-weight: 600; color: var(--color-primary); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; }
.plan-meal__calories { font-size: var(--text-sm); color: var(--color-text-muted); }
.plan-day__summary { display: flex; justify-content: center; gap: var(--space-lg); padding: var(--space-sm) var(--space-lg); background: var(--color-bg-alt); border-top: 1px solid var(--color-border-light); font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); }

/* Plan Tips */
.plan-tips { padding: var(--space-2xl) 0; background: var(--color-bg-alt); }
.plan-tips__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.plan-tip { padding: var(--space-lg); background: var(--color-bg); border-radius: var(--radius-lg); border-left: 4px solid var(--color-primary); }
.plan-tip__title { font-size: var(--text-lg); color: var(--color-primary); margin-bottom: var(--space-sm); }
.plan-tip__text { font-size: var(--text-sm); margin-bottom: 0; }

/* Legacy day plans / meal plan */
.day-plans { display: flex; flex-direction: column; gap: var(--space-lg); }
.day-plan { background: var(--color-bg-alt); border-radius: var(--radius-md); padding: var(--space-lg); }
.day-plan h3 { font-family: var(--font-body); color: var(--color-primary-dark); margin-bottom: var(--space-md); }
.meal-slot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border-light); }
.meal-slot:last-child { border-bottom: none; }
.meal-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; color: var(--color-text-muted); min-width: 80px; }
.meal-macros { font-size: var(--text-xs); color: var(--color-text-muted); margin-left: auto; }

/* Score Legend */
.score-legend { max-width: 400px; margin: 0 auto; padding: var(--space-lg); background: var(--color-bg-alt); border-radius: var(--radius-lg); }
.score-legend__title { font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-sm); color: var(--color-text); }
.score-legend__items { display: flex; flex-direction: column; gap: var(--space-sm); }
.score-legend__item { display: flex; align-items: center; gap: var(--space-sm); }
.score-legend__bar { width: 24px; height: 8px; border-radius: var(--radius-full); }
.score-legend__bar--high { background: var(--score-high); }
.score-legend__bar--medium { background: var(--score-medium); }
.score-legend__bar--low { background: var(--score-low); }
.score-legend__bar--avoid { background: var(--score-avoid); }
.score-legend__label { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* Food Filter Tabs */
.food-filter { padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-border-light); }
.food-filter__tabs { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }
.food-filter__tab { padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-bg); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.food-filter__tab:hover { border-color: var(--color-primary-300); background: var(--color-primary-bg); }
.food-filter__tab--active { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }

/* Food Cards */
.food-cards { padding: var(--space-xl) 0; }
.food-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.food-card { padding: var(--space-lg); background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); transition: box-shadow var(--transition-fast), border-color var(--transition-fast); }
.food-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary-200); }
.food-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-sm); }
.food-card__name { font-size: var(--text-lg); margin-bottom: 0; }
.food-card__name a { color: var(--color-text); }
.food-card__name a:hover { color: var(--color-primary); }
.food-card__category { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.food-card__nutrition { display: flex; gap: var(--space-sm); margin-bottom: var(--space-md); font-size: var(--text-sm); color: var(--color-text-secondary); }
.food-card__scores { display: flex; flex-direction: column; gap: var(--space-sm); }
.food-card__score { display: grid; grid-template-columns: 90px 1fr 36px; align-items: center; gap: var(--space-sm); }
.food-card__score-label { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Legacy food list */
.food-list { display: flex; flex-direction: column; gap: var(--space-md); }
.food-item { padding: var(--space-md); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); }
.food-item h3 { font-family: var(--font-body); font-size: var(--text-base); margin-bottom: var(--space-xs); }
.food-meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.food-meta span { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ----------------------------------------------------------
   Drug Page
   ---------------------------------------------------------- */
.drug-overview__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
.drug-fact { padding: var(--space-md); background: var(--color-bg-alt); border-radius: var(--radius-md); }
.drug-fact__label { display: block; font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-xs); }
.drug-fact__value { font-weight: 600; color: var(--color-text); }
.drug-foods { padding: var(--space-2xl) 0; background: var(--color-bg-alt); }
.drug-foods__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.drug-foods__cta, .drug-recipes__cta { text-align: center; margin-top: var(--space-xl); }
.drug-food-card { padding: var(--space-lg); background: var(--color-bg); border-radius: var(--radius-lg); border: 1px solid var(--color-border-light); }
.drug-food-card__name { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.drug-food-card__why { font-size: var(--text-sm); margin-bottom: var(--space-sm); }
.drug-food-card__scores { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.drug-food-card__score { font-size: var(--text-xs); font-weight: 600; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); }
.drug-food-card__score--high { background: #e8f5e9; color: #2e7d32; }
.drug-food-card__score--medium { background: #fff3e0; color: #e65100; }
.drug-recipes { padding: var(--space-2xl) 0; }
.drug-symptoms { padding: var(--space-2xl) 0; }
.drug-symptoms__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.drug-symptom-card { display: block; padding: var(--space-lg); background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); text-decoration: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.drug-symptom-card:hover { border-color: var(--color-primary-300); box-shadow: var(--shadow-md); text-decoration: none; }
.drug-symptom-card__title { color: var(--color-primary); margin-bottom: var(--space-xs); }
.drug-symptom-card__prevalence { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); margin-bottom: var(--space-sm); }
.drug-symptom-card__desc { font-size: var(--text-sm); }
.drug-symptom-card__link { display: block; margin-top: var(--space-sm); font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); }
.drug-disclaimer { padding: var(--space-xl) 0; background: var(--color-bg-alt); }
.drug-disclaimer__text { max-width: var(--max-width-narrow); margin: 0 auto; font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; }

/* Legacy drug guides */
.drug-guides { text-align: center; margin-bottom: var(--space-2xl); }
.drug-links { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; }
.drug-links a { padding: var(--space-md) var(--space-xl); background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-weight: 500; transition: all var(--transition-fast); }
.drug-links a:hover { background: var(--color-primary); color: white; border-color: var(--color-primary); text-decoration: none; }

/* ----------------------------------------------------------
   Programmatic & Related Pages
   ---------------------------------------------------------- */
.programmatic-recipes { padding: var(--space-xl) 0; }
.programmatic-seo { padding: var(--space-2xl) 0; background: var(--color-bg-alt); }
.programmatic-seo__body { max-width: var(--max-width-narrow); margin: 0 auto; }
.related-pages { padding: var(--space-2xl) 0; background: var(--color-bg-alt); }
.related-pages__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
.related-pages__group-title { font-size: var(--text-lg); color: var(--color-primary-dark); margin-bottom: var(--space-sm); }
.related-pages__list { list-style: none; }
.related-pages__item { margin-bottom: var(--space-sm); }
.related-pages__link { font-size: var(--text-sm); color: var(--color-primary); }
.related-pages__link:hover { color: var(--color-primary-dark); }

/* ----------------------------------------------------------
   App CTA
   ---------------------------------------------------------- */
.app-cta,
.cta {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: white;
  text-align: center;
  padding: var(--space-3xl) var(--space-md);
  margin: var(--space-2xl) 0;
}
.app-cta { margin: 0; border-radius: 0; }
.cta { border-radius: var(--radius-lg); }
.app-cta__title, .cta h2 { color: white; font-size: var(--text-2xl); }
.app-cta__text, .cta p { color: rgba(255, 255, 255, 0.9); max-width: 600px; margin: 0 auto var(--space-xl); font-size: var(--text-lg); }
.cta-button { display: inline-block; padding: var(--space-md) var(--space-2xl); background: white; color: var(--color-primary-dark); border-radius: var(--radius-full); font-weight: 700; font-size: var(--text-lg); transition: all var(--transition-fast); }
.cta-button:hover { background: var(--color-accent); color: white; text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ----------------------------------------------------------
   Related Recipes
   ---------------------------------------------------------- */
.related-recipes { padding: var(--space-2xl) 0; }
.related-recipes__cta { text-align: center; margin-top: var(--space-xl); }

/* ----------------------------------------------------------
   Email CTA Form (within .app-cta)
   ---------------------------------------------------------- */
.email-cta__form { width: 100%; }
.email-cta__fields { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-sm); }
.email-cta__input { flex: 1 1 260px; max-width: 340px; padding: var(--space-md) var(--space-lg); border: 2px solid rgba(255,255,255,0.6); border-radius: var(--radius-full); background: rgba(255,255,255,0.15); color: white; font-size: var(--text-base); outline: none; }
.email-cta__input::placeholder { color: rgba(255,255,255,0.7); }
.email-cta__input:focus { border-color: white; background: rgba(255,255,255,0.25); }
.email-cta__button { padding: var(--space-md) var(--space-2xl); background: white; color: var(--color-primary-dark); border: none; border-radius: var(--radius-full); font-weight: 700; font-size: var(--text-base); cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; }
.email-cta__button:hover { background: var(--color-accent); color: white; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.email-cta__fine-print { color: rgba(255,255,255,0.7); font-size: var(--text-sm); margin: 0; }
.email-cta__success { color: white; font-size: var(--text-lg); font-weight: 600; margin: 0; }

/* ----------------------------------------------------------
   Medical Disclaimer
   ---------------------------------------------------------- */
.medical-disclaimer { background: #fffbeb; border-left: 4px solid #f59e0b; padding: var(--space-md) 0; margin: var(--space-xl) 0 0; }
.medical-disclaimer__container { max-width: var(--max-width); margin: 0 auto; padding-left: var(--container-padding); padding-right: var(--container-padding); }
.medical-disclaimer__text { font-size: var(--text-sm); color: #78350f; margin: 0; line-height: 1.6; }
.medical-disclaimer--short { background: #f9fafb; border-left-color: #9ca3af; }
.medical-disclaimer--short .medical-disclaimer__text { color: var(--color-text-secondary); }

/* ----------------------------------------------------------
   Breadcrumbs
   ---------------------------------------------------------- */
.breadcrumb,
.breadcrumbs {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-sm) 0;
  margin-bottom: var(--space-lg);
}
.breadcrumb__list { display: flex; flex-wrap: wrap; gap: var(--space-xs); max-width: var(--max-width); margin: 0 auto; padding: 0 var(--container-padding); }
.breadcrumb__item { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-text-muted); }
.breadcrumb__item::before { content: '/'; color: var(--color-border); }
.breadcrumb__item:first-child::before { content: ''; }
.breadcrumb__link { color: var(--color-text-muted); font-size: var(--text-sm); }
.breadcrumb__link:hover { color: var(--color-primary); }
.breadcrumb__current { color: var(--color-text-muted); }
.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs a:hover { color: var(--color-primary); }

/* ----------------------------------------------------------
   Footer
   ---------------------------------------------------------- */
.site-footer {
  background: var(--color-gray-900);
  color: var(--color-gray-400);
  padding: var(--space-2xl) 0 var(--space-lg);
  margin-top: auto;
}

.footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); margin-bottom: var(--space-2xl); }
.footer__heading { color: var(--color-text-inverse); font-size: var(--text-base); margin-bottom: var(--space-md); }
.footer__text { font-size: var(--text-sm); line-height: 1.7; color: var(--color-gray-400); }
.footer__links { list-style: none; }
.footer__links li { margin-bottom: var(--space-sm); }
.footer__links a { color: var(--color-gray-400); font-size: var(--text-sm); text-decoration: none; transition: color var(--transition-fast); }
.footer__links a:hover { color: var(--color-primary-300); }
.footer__bottom { border-top: 1px solid var(--color-gray-800); padding-top: var(--space-lg); text-align: center; }
.footer__disclaimer { font-size: var(--text-xs); line-height: 1.7; max-width: var(--max-width-narrow); margin: 0 auto var(--space-md); color: var(--color-gray-500); }
.footer__copyright { font-size: var(--text-xs); color: var(--color-gray-600); }

/* Legacy footer */
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; margin-bottom: var(--space-md); }
.footer-links a { font-size: var(--text-sm); color: var(--color-text-secondary); }
.footer-links a:hover { color: var(--color-primary); }

/* ----------------------------------------------------------
   Intro & Related
   ---------------------------------------------------------- */
.intro { font-size: var(--text-lg); color: var(--color-text-secondary); line-height: 1.7; margin-bottom: var(--space-xl); }
.related-links ul { list-style: none; padding: 0; }
.related-links li { margin-bottom: var(--space-sm); }
.related-links a { font-weight: 500; }

/* ----------------------------------------------------------
   Loading Spinner
   ---------------------------------------------------------- */
.loading { display: flex; justify-content: center; align-items: center; padding: var(--space-2xl); }
.spinner { width: 32px; height: 32px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------
   Utility Classes
   ---------------------------------------------------------- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-md); }
.mt-8 { margin-top: var(--space-xl); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-md); }
.mb-8 { margin-bottom: var(--space-xl); }
.p-4 { padding: var(--space-md); }
.p-6 { padding: var(--space-lg); }
.p-8 { padding: var(--space-xl); }
.hidden { display: none; }
.block { display: block; }
.flex { display: flex; }
.grid { display: grid; }
.gap-2 { gap: var(--space-sm); }
.gap-4 { gap: var(--space-md); }
.gap-6 { gap: var(--space-lg); }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.bg-primary { background: var(--color-bg); }
.bg-secondary { background: var(--color-bg-alt); }
.bg-accent { background: var(--color-primary-bg); }
.text-primary { color: var(--color-text); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.w-full { width: 100%; }
.max-w-narrow { max-width: var(--max-width-narrow); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ----------------------------------------------------------
   Tablet Breakpoint (600px+)
   ---------------------------------------------------------- */
@media (min-width: 600px) {
  :root { --container-padding: var(--space-lg); }

  .recipe-grid { grid-template-columns: repeat(2, 1fr); }
  .recipe-grid-sm { grid-template-columns: repeat(2, 1fr); }
  .hero h1, .hero__title { font-size: var(--text-4xl); }
  .nutrition-card__grid { grid-template-columns: repeat(3, 1fr); }
  .score-label { flex: 0 0 140px; }
  .quick-links__grid { grid-template-columns: repeat(2, 1fr); }
  .food-grid { grid-template-columns: repeat(2, 1fr); }
  .plan-summary__grid { grid-template-columns: repeat(4, 1fr); }
  .plan-tips__grid { grid-template-columns: repeat(2, 1fr); }
  .drug-foods__grid { grid-template-columns: repeat(2, 1fr); }
  .drug-symptoms__grid { grid-template-columns: repeat(2, 1fr); }
  .related-pages__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ----------------------------------------------------------
   Desktop Breakpoint (900px+)
   ---------------------------------------------------------- */
@media (min-width: 900px) {
  :root { --container-padding: var(--space-xl); }

  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .nav-mobile { display: none !important; }
  .nav__toggle { display: none; }
  .nav__menu { display: flex; position: static; background: none; border: none; box-shadow: none; padding: 0; gap: var(--space-xs); align-items: center; }
  .nav__item { margin-bottom: 0; }
  .nav__link { padding: var(--space-sm) var(--space-sm); }

  .recipe-grid { grid-template-columns: repeat(3, 1fr); }
  .recipe-grid-sm { grid-template-columns: repeat(3, 1fr); }
  .listing-content__grid { grid-template-columns: var(--sidebar-width) 1fr; }
  .filter-sidebar { display: block; }
  .filter-sidebar__sticky { position: sticky; top: calc(var(--nav-height) + var(--space-lg)); }
  .recipe-content__grid { grid-template-columns: 300px 1fr; }
  .nutrition-card__grid { grid-template-columns: repeat(3, 1fr); }
  .nutrition-card--legacy { grid-template-columns: repeat(4, 1fr); }
  .page-with-sidebar { display: grid; grid-template-columns: var(--sidebar-width) 1fr; gap: var(--space-xl); }
  .page-with-sidebar .filter-sidebar { position: sticky; top: calc(var(--nav-height) + var(--space-lg)); align-self: start; }
  .quick-links__grid { grid-template-columns: repeat(3, 1fr); }
  .food-grid { grid-template-columns: repeat(3, 1fr); }
  .drug-foods__grid { grid-template-columns: repeat(3, 1fr); }
  .drug-symptoms__grid { grid-template-columns: repeat(3, 1fr); }
  .plan-tips__grid { grid-template-columns: repeat(4, 1fr); }
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .symptom-selector__grid { grid-template-columns: repeat(5, 1fr); }
  .recipe-card--horizontal .recipe-card__image-wrap { width: 160px; min-height: 120px; }
}

/* ----------------------------------------------------------
   Large Desktop (1200px+)
   ---------------------------------------------------------- */
@media (min-width: 1200px) {
  .recipe-grid { grid-template-columns: repeat(4, 1fr); }
  .recipe-grid-sm { grid-template-columns: repeat(4, 1fr); }
}

/* ----------------------------------------------------------
   Print Styles
   ---------------------------------------------------------- */
@media print {
  .main-nav,
  .site-header,
  .site-footer,
  .app-cta,
  .cta,
  .filter-sidebar,
  .search-container,
  .search-form,
  .nav-toggle,
  .nav__toggle,
  .btn {
    display: none !important;
  }

  body { font-size: 12pt; color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  .recipe-page { max-width: 100%; }
  .recipe-hero__overlay { position: static; background: none; padding: 0; }
  .recipe-hero__title { color: #000; }
}