/* Critical Styles for FOUC and Instant First Paint */
*, ::before, ::after { box-sizing: border-box; }
body { margin: 0; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: #FAF9F6; color: #1E293B; }
a { text-decoration: none; color: inherit; }
svg { max-width: 100%; height: auto; }
header svg, nav svg { display: inline-block; vertical-align: middle; }

/* Core Web Vitals (CLS) Protection for all Images */
img {
  max-width: 100%;
  height: auto;
}
img:not([width]) {
  width: 100%;
}
img:not([height]) {
  height: auto;
}
img:not([width]):not([height]) {
  aspect-ratio: 16 / 9;
}
article img:not([width]),
.prose img:not([width]),
.prose-diet img:not([width]) {
  width: 100%;
}
article img:not([height]),
.prose img:not([height]),
.prose-diet img:not([height]) {
  height: auto;
}
article img:not([width]):not([height]),
.prose img:not([width]):not([height]),
.prose-diet img:not([width]):not([height]) {
  aspect-ratio: 16 / 9;
}

.w-5 { width: 1.25rem !important; height: 1.25rem !important; max-width: 1.25rem !important; max-height: 1.25rem !important; }
.w-4 { width: 1rem !important; height: 1rem !important; max-width: 1rem !important; max-height: 1rem !important; }
.w-6 { width: 1.5rem !important; height: 1.5rem !important; max-width: 1.5rem !important; max-height: 1.5rem !important; }
.text-emerald-500 { color: #10b981 !important; fill: #10b981 !important; }
.text-emerald-600 { color: #059669 !important; fill: #059669 !important; }
.bg-white { background-color: #ffffff !important; }
.border-b { border-bottom-width: 1px !important; border-bottom-style: solid !important; }
.border-slate-200 { border-color: #e2e8f0 !important; }
.flex { display: flex !important; }
.items-center { align-items: center !important; }
.justify-between { justify-content: space-between !important; }
.sticky { position: sticky !important; }
.top-0 { top: 0 !important; }
.z-40 { z-index: 40 !important; }