/* Base layout */
:root {
  --content-max-width: 820px;
  --gutter: 1rem;
  --accent: #2a5bd7;
  --muted: #666;
}

body {
  margin: 0;
  padding: 0 1rem 2rem;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  line-height: 1.55;
  color: #111;
  background: #fff;
}

.recipe {
  margin: 0 auto;
  max-width: var(--content-max-width);
}

.recipe-title {
  font-size: clamp(1.8rem, 2.2vw + 1rem, 2.6rem);
  line-height: 1.1;
  margin: 1.25rem 0 0.5rem;
}

.recipe-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.recipe-meta p {
  margin: 0;
  color: var(--muted);
}

.recipe-meta a {
  color: var(--accent);
  text-decoration: none;
}

.recipe-meta a:hover {
  text-decoration: underline;
}

/* Lede section: image + intro side-by-side */
.recipe-lede {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--gutter);
  align-items: start;
  margin: 0.5rem 0 1.25rem;
}

/* When no image is present, make the intro full width */
.recipe-lede:not(:has(.recipe-image)) {
  grid-template-columns: 1fr;
}

.recipe-image {
  margin: 0;
}

.recipe-image img {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 8px;
}

.lede-right { display: grid; align-content: start; gap: 0.35rem; }

.ww-points { display: flex; align-items: center; gap: 0.5rem; }
.ww-coin { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #2a5bd7; background-color: #2a5bd7; color: #fff; font-weight: 700; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ww-coin > div { line-height: 1; }
.ww-points-label { color: var(--muted); font-size: 0.9rem; }

.recipe-details-inline {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Sections */
#serves,
#ingredients,
#steps,
#related-recipes {
  margin-top: 1.25rem;
}

ul, ol {
  padding-left: 1.25rem;
}

/* Responsive */
@media (max-width: 720px) {
  .recipe-lede {
    grid-template-columns: 1fr;
  }
  .recipe-image img {
    max-width: 100%;
  }
}

/* Ensure backgrounds are printed */
@media print {
  .ww-coin { background-color: #2a5bd7 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}