/* ──────────────────────────────────────────────────────────────────────────
   content.css — recipe pages, category hubs and guides.

   Loaded only by the generated pages under /recipes/ and /guides/, on top of
   site.css. Every colour, radius and font here is a token already defined in
   site.css's :root, so the Noir & Gold palette stays in exactly one place.
   ────────────────────────────────────────────────────────────────────────── */

/* site.css hides every nav link except the CTA below 600px, which is right for
   the one-page homepage — every section is reachable by scrolling. On the
   content pages it would leave a phone with no way into the recipe library at
   all, so one link is brought back. Only one: brand + two links + the CTA
   button does not fit across a 390px viewport without the nav wrapping. Guides
   stays reachable from the breadcrumbs and the footer. */
@media (max-width: 600px) {
  body.content-page .nav-links a[href="/recipes/"] { display: inline; font-size: 0.84rem; }
  body.content-page .nav-links { gap: 14px; }
  body.content-page .site-nav .container { gap: 12px; }
}

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */

.breadcrumbs {
  border-bottom: 1px solid var(--border);
  background: rgba(27, 27, 27, 0.4);
  font-size: 0.8rem;
  color: var(--text-faint);
}
.breadcrumbs .container { padding-block: 12px; overflow-x: auto; white-space: nowrap; }
.breadcrumbs a { color: var(--text-dim); text-decoration: none; }
.breadcrumbs a:hover { color: var(--gold); }
.breadcrumbs [aria-current] { color: var(--text-faint); }
.crumb-sep { margin: 0 9px; color: var(--muted); }

/* ── Page + recipe heroes ────────────────────────────────────────────────── */

.container.narrow { max-width: 760px; }

.page-hero { padding: 56px 0 8px; }
.page-hero h1,
.recipe-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.page-hero h1 em, .recipe-hero h1 em { color: var(--gold); font-style: italic; }
.page-hero .lede, .recipe-hero .lede {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0 0 18px;
  max-width: 62ch;
}

.recipe-hero { padding: 44px 0 12px; }
.recipe-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 44px;
  align-items: start;
}
.recipe-photo { margin: 0; }
.recipe-photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: block;
}

/* The "answer" paragraph: a self-contained summary of the page, set apart so a
   reader who wants only the number can stop there. It is also the passage
   search engines and AI assistants most often lift, which is why it is written
   to stand alone without the surrounding page. */
.answer {
  border-left: 2px solid var(--gold);
  padding: 2px 0 2px 18px;
  margin: 22px 0;
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.66;
  max-width: 68ch;
}

.byline { font-size: 0.82rem; color: var(--text-faint); margin-top: 20px; }

/* ── Recipe facts strip ──────────────────────────────────────────────────── */

.recipe-facts {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.recipe-facts li {
  background: var(--surface);
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.recipe-facts span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-faint);
}
.recipe-facts strong { font-size: 0.98rem; color: var(--text); font-weight: 600; }

/* ── Prose ───────────────────────────────────────────────────────────────── */

.prose, .content-page .container.narrow { line-height: 1.72; }
.content-page .block h2 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 1.95rem);
  margin: 48px 0 16px;
  line-height: 1.2;
}
.content-page .block .container > h2:first-child,
.prose > h2:first-child { margin-top: 0; }
.content-page .block h3 {
  font-size: 1.06rem;
  margin: 30px 0 8px;
  color: var(--text);
  font-weight: 600;
}
.prose p, .content-page .container.narrow > p { color: var(--text-dim); max-width: 68ch; }
.prose ul, .prose ol { color: var(--text-dim); max-width: 68ch; padding-left: 1.25em; }
.prose li { margin-bottom: 9px; }
.prose strong { color: var(--text); }
.prose a, .qa a, .answer a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover, .qa a:hover { color: var(--text); }

.fineprint { font-size: 0.82rem; color: var(--text-faint); }
.disclosure {
  background: var(--gold-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 0.9rem;
}

/* ── Method list ─────────────────────────────────────────────────────────── */

ol.method { counter-reset: step; list-style: none; padding: 0; margin: 18px 0 0; }
ol.method li {
  counter-increment: step;
  position: relative;
  padding: 0 0 20px 46px;
  color: var(--text-dim);
  max-width: 66ch;
}
ol.method li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.82rem;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */

/* Wide tables scroll inside their own box; the page body must never scroll
   sideways on a phone. */
.table-scroll { overflow-x: auto; margin: 20px 0; -webkit-overflow-scrolling: touch; }

.recipe-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.recipe-table caption { text-align: left; }
.recipe-table th, .recipe-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  color: var(--text-dim);
}
.recipe-table thead th {
  color: var(--gold);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom-color: var(--border-strong);
  white-space: nowrap;
}
.recipe-table tbody th { color: var(--text); font-weight: 600; }
.recipe-table tbody tr:hover { background: rgba(212, 175, 55, 0.04); }
/* min-width belongs to the *wrapped* tables only. A wide table inside
   .table-scroll should keep its columns and scroll; a small two-column table
   written straight into prose should just wrap and fit the phone. Putting the
   min-width on .recipe-table itself made the second kind push the page
   sideways. */
.table-scroll .recipe-table { min-width: 480px; }
.table-scroll .chart-table { min-width: 640px; }
.chart-table td, .chart-table th { padding: 8px 12px; }

/* ── Note card + Q&A ─────────────────────────────────────────────────────── */

.note-card {
  border: 1px solid var(--border-strong);
  background: var(--gold-soft);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 30px 0;
}
.note-card h3 { margin: 0 0 8px; color: var(--gold); }
.note-card p { margin: 0; color: var(--text-dim); }

.qa h3 { margin-top: 26px; }
.qa p { color: var(--text-dim); max-width: 68ch; }

/* ── Card grids ──────────────────────────────────────────────────────────── */

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 22px;
}
.recipe-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.recipe-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}
.recipe-card img {
  width: 100%;
  height: 172px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--border);
}
.recipe-card-body { padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 7px; }
.recipe-card h3 { margin: 0; font-size: 1.02rem; color: var(--text); }
.recipe-card p { margin: 0; font-size: 0.86rem; color: var(--text-dim); line-height: 1.5; }
.recipe-card-meta { font-size: 0.74rem !important; color: var(--text-faint) !important; margin-top: auto !important; }

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 20px;
}
.hub-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.hub-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.hub-card h3 { margin: 0; font-size: 1.1rem; font-family: var(--font-display); }
.hub-card p { margin: 0; font-size: 0.88rem; color: var(--text-dim); line-height: 1.55; }
.hub-kicker {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gold);
}
.hub-count { font-size: 0.76rem; color: var(--text-faint); margin-top: auto; }

/* ── Closing CTA ─────────────────────────────────────────────────────────── */

.cta-block { padding-bottom: 76px; }
.cta-card {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  padding: 44px 40px;
  text-align: center;
}
.cta-card h2 { font-family: var(--font-display); margin: 8px 0 14px; }
.cta-card p { color: var(--text-dim); max-width: 62ch; margin: 0 auto 22px; }
.cta-card .hero-ctas { justify-content: center; }
.cta-card .hero-note { margin-top: 20px; }

.footer-legal { font-size: 0.76rem; color: var(--text-faint); margin-top: 14px; }

/* ── Narrow screens ──────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .recipe-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  /* Photo first on a phone: it is the reason the page was clicked. */
  .recipe-hero-grid > div { order: 2; }
  .recipe-photo { order: 1; }
}

@media (max-width: 560px) {
  .page-hero, .recipe-hero { padding-top: 34px; }
  .cta-card { padding: 32px 22px; }
  .recipe-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .recipe-card img { height: 122px; }
  .recipe-card-body { padding: 12px 13px 14px; }
  .recipe-card p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .recipe-card, .hub-card { transition: none; }
  .recipe-card:hover, .hub-card:hover { transform: none; }
}

/* ── Homepage recipe teaser ──────────────────────────────────────────────── */
/* content.css is loaded by index.html too, purely for this block and the card
   styles above. Everything typographic in this file is scoped to
   .content-page so it cannot restyle the homepage. */
.recipes-more { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }