/* ==========================================================================
   Reciphy Print Stylesheet — Cookbook Recipe Card
   Single A4 page, elegant layout, keeps Reciphy's signature.
   Nutrition only for paid users (premium/plus/pro).
   ========================================================================== */

@media print {
  /* ── Reset all ──────────────────────────────────────────── */
  @page {
    size: A4;
    margin: 1.5cm 1.8cm 1.8cm 1.8cm;
  }

  body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 9.5pt;
    line-height: 1.45;
    color: #1c1917;
    background: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ── Hide everything that isn't recipe content ──────────── */
  [data-site-chrome],
  header, footer, nav,
  #recipe-actions,
  #cook-navigation,
  [data-print-hide],
  .no-print,
  button,
  .reciphy-button,
  .reciphy-button-secondary,
  .favorite-btn,
  .favorite-btn-hero,
  .unsave-btn,
  details summary,
  [data-card-menu],
  script, noscript,
  .blur-3xl,
  .pointer-events-none.absolute,
  #a11y-announce,
  [aria-hidden="true"],
  a[href^="#"] {
    display: none !important;
  }

  /* ── Main container ────────────────────────────────────── */
  #main-content {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ── Reciphy signature header ──────────────────────────── */
  body::before {
    content: "";
    display: block;
    border-top: 2px solid #4A7C59;
    margin-bottom: 12pt;
    padding-top: 4pt;
  }

  .recipe-printable::before {
    content: "Reciphy";
    display: block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 7pt;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #4A7C59;
    margin-bottom: 14pt;
  }

  /* ── Recipe title ──────────────────────────────────────── */
  h1 {
    font-size: 18pt;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 6pt 0;
    color: #1c1917;
    letter-spacing: -0.01em;
  }

  /* Description / subtitle */
  .recipe-printable > div > div:first-child p {
    font-size: 9pt;
    color: #57534e;
    margin: 0 0 10pt 0;
    max-width: 100%;
  }

  /* ── Stats bar ─────────────────────────────────────────── */
  .grid.grid-cols-2.sm\\:grid-cols-4,
  .grid.grid-cols-2.md\\:grid-cols-4,
  [class*="grid-cols-2"][class*="md:grid-cols-4"] {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8pt !important;
    margin-bottom: 12pt !important;
  }

  .grid.grid-cols-2 > div,
  .grid > div {
    flex: 1 1 auto;
    min-width: 60pt;
    border: 1px solid #d6d3d1 !important;
    border-radius: 4pt !important;
    padding: 6pt 8pt !important;
    text-align: center;
    background: #fff !important;
  }

  .grid svg {
    display: none !important;
  }

  .grid p {
    margin: 0 !important;
  }

  .grid .text-xs {
    font-size: 6.5pt !important;
    color: #78716c !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .grid .font-bold {
    font-size: 12pt !important;
    color: #1c1917 !important;
    font-weight: 700;
  }

  .grid .capitalize {
    font-size: 11pt !important;
  }

  /* Hide servings +/- buttons */
  #servings-control button {
    display: none !important;
  }

  /* ── Total time ────────────────────────────────────────── */
  .text-center.mb-8 {
    margin: 0 0 10pt 0 !important;
    text-align: left !important;
  }

  .text-center.mb-8 span {
    background: #4A7C59 !important;
    color: #fff !important;
    font-size: 8pt !important;
    padding: 3pt 10pt !important;
    border-radius: 999px;
  }

  /* ── Two-column: ingredients + steps ───────────────────── */
  @supports (display: grid) {
    .recipe-printable .space-y-8,
    .recipe-printable > div {
      display: block !important;
    }

    /* Put ingredients and steps side by side where possible */
    .recipe-printable {
      column-count: 1;
    }
  }

  /* ── Section headings ──────────────────────────────────── */
  h2, h3, .text-lg.font-extrabold {
    font-size: 11pt !important;
    font-weight: 700 !important;
    margin: 10pt 0 4pt 0 !important;
    padding-bottom: 2pt;
    border-bottom: 1px solid #d6d3d1;
    color: #1c1917 !important;
  }

  /* ── Allergens / Warnings ──────────────────────────────── */
  .bg-amber-50\\/80,
  .bg-amber-50,
  [class*="bg-amber"] {
    background: #fff !important;
    border: 1px solid #d6d3d1 !important;
    border-left: 3px solid #d97706 !important;
    padding: 6pt 8pt !important;
    margin-bottom: 8pt !important;
    border-radius: 0 !important;
  }

  .bg-amber-50\\/80 p,
  [class*="bg-amber"] p,
  [class*="bg-amber"] span {
    font-size: 8.5pt !important;
    color: #1c1917 !important;
  }

  /* ── Equipment / tools ─────────────────────────────────── */
  .flex-wrap.gap-2 {
    gap: 4pt !important;
    margin-bottom: 6pt !important;
  }

  .flex-wrap.gap-2 span,
  .flex-wrap.gap-2 [class*="rounded"] {
    font-size: 7.5pt !important;
    padding: 2pt 6pt !important;
    border: 1px solid #d6d3d1 !important;
    background: #fafaf9 !important;
    border-radius: 999px !important;
  }

  /* ── Ingredients ───────────────────────────────────────── */
  ul, ol {
    padding-left: 14pt;
    margin: 4pt 0 8pt 0;
  }

  li {
    font-size: 9pt;
    padding: 2pt 0 !important;
    page-break-inside: avoid;
  }

  .divide-y li {
    border-bottom: 0.5pt dotted #d6d3d1;
  }

  /* ── Steps ─────────────────────────────────────────────── */
  ol.space-y-5,
  ol[class*="space-y"] {
    gap: 0 !important;
    margin-top: 4pt;
  }

  ol.space-y-5 > li,
  ol[class*="space-y"] > li {
    padding: 5pt 0 !important;
    gap: 4pt !important;
    page-break-inside: avoid;
    display: flex !important;
    align-items: flex-start;
  }

  /* Step numbers — keep the green circle */
  ol li .w-7.h-7,
  ol li [class*="w-7"] {
    width: 18pt !important;
    height: 18pt !important;
    min-width: 18pt !important;
    font-size: 8pt !important;
    font-weight: 700;
    background: #4A7C59 !important;
    color: #fff !important;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
  }

  ol li p,
  ol li span:not(.w-7):not(.h-7) {
    font-size: 9pt !important;
    line-height: 1.4;
  }

  /* Hide the vertical connector line in steps */
  .cook-step .w-0\\.5,
  ol li [class*="w-0.5"] {
    display: none !important;
  }

  /* ── Chef tips ─────────────────────────────────────────── */
  .bg-stone-50.rounded-2xl,
  [class*="bg-stone-50"][class*="rounded"] {
    background: #fafaf9 !important;
    border: 1px solid #d6d3d1 !important;
    padding: 8pt 10pt !important;
    margin: 8pt 0 !important;
    border-radius: 4pt !important;
    page-break-inside: avoid;
  }

  .bg-stone-50.rounded-2xl h3 {
    border-bottom: none !important;
    margin-top: 0 !important;
    font-size: 9pt !important;
    color: #4A7C59 !important;
  }

  .bg-stone-50.rounded-2xl p,
  .bg-stone-50.rounded-2xl li {
    font-size: 8.5pt !important;
  }

  /* ── Tags ──────────────────────────────────────────────── */
  .flex-wrap.gap-1\\.5 {
    gap: 3pt !important;
    margin-bottom: 6pt;
  }

  .flex-wrap.gap-1\\.5 span {
    font-size: 7pt !important;
    padding: 1pt 6pt !important;
    border: 1px solid #d6d3d1 !important;
    background: #fafaf9 !important;
    border-radius: 999px !important;
  }

  /* ── Nutrition (paid only) ─────────────────────────────── */
  #recipe-macros[data-print-hide-nutrition] {
    display: none !important;
  }

  #recipe-macros:not([data-print-hide-nutrition]) {
    border: 1px solid #d6d3d1 !important;
    padding: 8pt !important;
    margin-top: 10pt !important;
    page-break-inside: avoid;
  }

  #recipe-macros .grid,
  #recipe-macros [class*="grid"] {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6pt !important;
  }

  #recipe-macros .grid > div {
    flex: 1 1 auto;
    min-width: 55pt;
    text-align: center;
    border: 1px solid #e7e5e4 !important;
    padding: 4pt !important;
    background: #fff !important;
  }

  /* ── "Made on" date ────────────────────────────────────── */
  .text-stone-400.text-xs.mt-2,
  p.text-stone-400 {
    color: #a8a29e !important;
    font-size: 7pt !important;
    margin-top: 10pt !important;
  }

  /* ── Back nav + bottom actions ─────────────────────────── */
  .flex.items-center.justify-between.mt-8,
  a[href="/recipes"],
  .mb-6 a[href="/recipes"] {
    display: none !important;
  }

  /* ── Footer ────────────────────────────────────────────── */
  body::after {
    content: "";
    display: block;
    border-top: 1px solid #d6d3d1;
    margin-top: 14pt;
    padding-top: 4pt;
  }

  .recipe-printable::after {
    content: "Cook with what you have  ·  reciphy.com";
    display: block;
    font-size: 6.5pt;
    color: #a8a29e;
    text-align: center;
  }

  /* ── Generic cleanup ───────────────────────────────────── */
  * {
    background-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a[href]:not([href^="#"]):after {
    content: none;
  }

  /* Override specific background colors that we DO want */
  ol li .w-7 {
    background-color: #4A7C59 !important;
  }

  .text-center.mb-8 span {
    background-color: #4A7C59 !important;
  }

  .recipe-printable::before,
  .recipe-printable::after {
    background-color: transparent !important;
  }
}