/* Recipe page print sheet.
   This is the only print layout for recipe-page.html. The magazine
   sheet in style.css stays on other reading pages and does not apply
   here (recipe pages are not html.cj-reading).

   Chrome and Edge draw the date, title, and URL in the page margin.
   A zero page margin hides them, but it also drops the page counter
   and lets a fixed footer sit on top of the last line. Empty top
   margin boxes suppress that browser header, and our own bottom
   margin boxes replace the URL footer, in current Chrome and Edge.
   Checked with headless Chrome printing with headers left on. */

.rp-print-mast, .rp-hero-print { display: none; }

@page {
  size: A4;
  margin: 12mm 14mm 16mm 14mm;
  @top-left { content: ""; }
  @top-center { content: ""; }
  @top-right { content: ""; }
  @bottom-left {
    content: "The Culinary Journal";
    font-family: "DM Sans", "Segoe UI", sans-serif;
    font-size: 8pt;
    color: var(--text-high);
  }
  @bottom-center {
    content: "Page " counter(page);
    font-family: "DM Sans", "Segoe UI", sans-serif;
    font-size: 8pt;
    color: var(--text-high);
  }
  @bottom-right {
    content: "@MISEENPLACEKITCHEN";
    font-family: "DM Sans", "Segoe UI", sans-serif;
    font-size: 8pt;
    color: var(--text-high);
  }
}

@media print {
  html, body, .cj-body, .page-bg, #rp-wrap, #rp-wrap.rp-cook-high {
    background: #fff !important;
    color: #111 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  body {
    font-family: "DM Sans", "Segoe UI", sans-serif !important;
    font-size: 10.75pt !important;
    line-height: 1.35 !important;
    display: block !important;
  }
  #rp-wrap, #rp-wrap * {
    color: #111 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  #rp-wrap img, #rp-wrap svg, .rp-print-mark {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Screen chrome, controls, and private household notes. */
  nav, .nav, .tab-nav, .footer, .rp-back, .cj-search-btn, .cj-skip-link,
  .tcj-fb-btn, .tcj-fb-ov, .nav-notif-panel, .rp-toolbar, .rp-toolbar-tools,
  .rp-font-ctrl, .rp-cook-btn, .rp-view-toggle, .rp-meta-actions,
  .rp-tried-btn, .rp-print-btn, .rp-share-btn, .rp-save-btn,
  .rp-serves-btn, .rp-spice-adj, .rp-add-all, .rp-ing-cb, .rp-ing-actions,
  .rp-ing-cart-btn, .rp-ing-info-btn, .rp-ing-sub-btn, .rp-ing-lib-btn,
  .rp-timer-btn, .rp-timer-active, #rp-timer-widget,
  .rp-toast, .pd-toast, .pd-modal, #pd-modal, #rp-cook-bridge, .rp-cook-nav,
  .rp-qr-modal, .rp-coll-modal, .rp-personal-notes, .rp-related,
  #combined-view, #tab-utensils, #tab-nutrition,
  #family-allergy-banner, .rp-ing-private,
  #credit-source, #credit-preserved, .rp-preserved,
  .rp-tag.original, .rp-tag.external,
  #spice-meta, #div-spice, .rp-meta-divider, .rp-meta-item svg,
  .rp-hero-ring, .rp-hero-placeholder, .rp-hero-vignette,
  .rp-identity-chip.meal {
    display: none !important;
  }

  .rp-print-mast {
    display: flex !important;
    align-items: center;
    gap: 6pt;
    margin: 0 0 8pt;
    padding: 0 0 4pt;
    border-bottom: 0.6pt solid #111;
    break-after: avoid;
    page-break-after: avoid;
  }
  .rp-print-mark { width: 7mm; height: 7mm; display: block; }
  .rp-print-name {
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
    font-size: 12pt !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    color: #111 !important;
  }
  .rp-print-est {
    font-family: "DM Sans", "Segoe UI", sans-serif !important;
    font-size: 7.5pt !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #333 !important;
  }

  .rp-wrap { max-width: none !important; padding: 0 !important; }
  .rp-header, .rp-header-masthead { text-align: left !important; max-width: none !important; }
  .rp-header-masthead .rp-intro,
  .rp-header-masthead .rp-tags,
  .rp-header-masthead .rp-credit { margin-left: 0 !important; margin-right: 0 !important; justify-content: flex-start !important; }

  /* Hero sits beside the title and the description.
     The on-screen circle uses a cover rendition. Print uses the original file,
     at its own aspect ratio, so the corner marks are not cropped. */
  .rp-hero-frame:not(:has(img.rp-hero-print[src])) { display: none !important; }
  .rp-hero-frame:has(img.rp-hero-print[src]) {
    float: right;
    width: 65mm;
    margin: 0 0 6pt 8pt;
    break-inside: avoid;
    page-break-inside: avoid;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 0 !important;
  }
  .rp-hero-ring-wrap, .rp-hero-circle {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    inset: auto !important;
    transform: none !important;
    width: 65mm !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  .rp-hero-circle {
    border: 0.4pt solid #222 !important;
    background: #fff !important;
  }
  .rp-hero-img { display: none !important; }
  .rp-hero-print {
    display: block !important;
    width: 65mm !important;
    height: auto !important;
    max-width: 65mm !important;
    max-height: 78mm !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  .rp-meta-block { clear: both; }

  .rp-title, .rp-native-title, .rp-also-known, h1 {
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
    color: #111 !important;
  }
  .rp-title {
    font-size: 20pt !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    margin: 0 0 2pt !important;
  }
  .rp-native-title, .rp-also-known {
    font-size: 12pt !important;
    font-style: italic !important;
    margin: 0 0 4pt !important;
  }
  /* Cormorant has no Malayalam, Tamil, Devanagari, or Arabic.
     Those faces sit after it so Latin stays in the journal serif
     and the other scripts still draw. */
  .rp-native-title {
    font-family: "Cormorant Garamond", "Noto Sans Malayalam", "Noto Sans Tamil", "Noto Sans Devanagari", "Noto Naskh Arabic", Georgia, "Times New Roman", serif !important;
  }
  .rp-intro {
    font-size: 10.75pt !important;
    line-height: 1.4 !important;
    color: #111 !important;
    max-width: none !important;
    margin: 0 0 6pt !important;
  }

  /* Placement line: plain, dark, no small-caps tracking. Emoji is removed in the markup. */
  .rp-category-eyebrow, .rp-placement-cat, .rp-placement-sub, .rp-placement-sep, .rp-placement-division {
    font-family: "DM Sans", "Segoe UI", sans-serif !important;
    font-size: 10.5pt !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #111 !important;
    opacity: 1 !important;
  }
  .rp-placement-sub, .rp-placement-sep, .rp-placement-division { font-weight: 400 !important; }
  .rp-placement-demo .rp-placement-division {
    display: block !important;
    max-height: none !important;
    margin-top: 1pt !important;
    overflow: visible !important;
  }
  .rp-category-eyebrow { margin: 0 0 3pt !important; break-after: avoid; page-break-after: avoid; }

  .rp-identity { justify-content: flex-start !important; margin: 0 0 4pt !important; }
  .rp-identity:not(:has(.rp-identity-chip:not(.meal))) { display: none !important; }
  .rp-identity-chip {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 10.75pt !important;
    gap: 0.3em !important;
  }
  .rp-identity-kicker {
    font-size: 10.75pt !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #111 !important;
  }
  .rp-identity-kicker::after { content: ":"; }

  /* Facts: one even line. The difficulty word comes from data-tip. */
  .rp-meta-block { margin: 2pt 0 6pt !important; align-items: flex-start !important; gap: 4pt !important; }
  .rp-meta-row {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    align-items: baseline !important;
    gap: 0.15em 1.05em !important;
    width: 100% !important;
  }
  .rp-meta-item {
    font-size: 10.75pt !important;
    font-weight: 400 !important;
    color: #111 !important;
    gap: 0.3em !important;
    letter-spacing: 0 !important;
  }
  .rp-difficulty-kicker, .rp-difficulty-value, #meta-difficulty .rp-difficulty-kicker, #meta-difficulty .rp-difficulty-value {
    font-size: 10.75pt !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #111 !important;
  }
  #meta-difficulty .rp-diff-dot {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: none !important;
    vertical-align: baseline !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #meta-difficulty .rp-diff-dot::after {
    content: attr(data-tip);
    display: inline !important;
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    box-shadow: none !important;
    font-size: 10.75pt !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #111 !important;
    font-family: "DM Sans", "Segoe UI", sans-serif !important;
  }
  .rp-serves-wrap { display: inline-flex !important; gap: 0.3em !important; align-items: baseline !important; }
  .rp-serves-label, .rp-serves-unit, .rp-serves-num {
    font-size: 10.75pt !important;
    font-weight: 400 !important;
    color: #111 !important;
    border: none !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  /* Chips become one plain metadata line. Meal type is only here, not in the header pill. */
  #rp-tags, #rp-keeping {
    display: block !important;
    margin: 0 0 6pt !important;
    overflow: visible !important;
    max-height: none !important;
  }
  .rp-tag-panel { display: block !important; }
  .rp-tag-group { display: inline !important; }
  .rp-tag-group:not(:last-child)::after { content: " \00b7  "; }
  .rp-tag-group-label {
    font-size: 10.75pt !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #111 !important;
  }
  .rp-tag-group-label::after { content: ": "; font-weight: 400; }
  .rp-tag:not(.original):not(.external),
  #rp-tags .rp-tag:not(.original):not(.external),
  #rp-keeping .rp-tag {
    display: inline !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 10.75pt !important;
    font-weight: 400 !important;
    color: #111 !important;
  }
  .rp-tag-group .rp-tag:not(:last-child)::after { content: ", "; }
  #rp-tags .rp-tag.original,
  #rp-tags .rp-tag.external,
  .rp-tag.original,
  .rp-tag.external,
  #rp-sub-signin { display: none !important; }

  .rp-credit {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 0.6em !important;
    margin: 0 0 8pt !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    font-size: 10.5pt !important;
  }
  .rp-credit-item, .rp-credit-item strong, .rp-credit a {
    font-size: 10.5pt !important;
    color: #111 !important;
  }

  /* Allergens stay visible. Family dietary notes do not.
     hidden on the box must win over any display rule. */
  #rp-diet-box[hidden],
  #rp-diet-box:not(:has(#allergen-banner:not([hidden]))) { display: none !important; }
  #rp-diet-box:not([hidden]):has(#allergen-banner:not([hidden])) {
    display: block !important;
    border: 1pt solid #222 !important;
    border-radius: 1pt !important;
    padding: 5pt 7pt !important;
    margin: 0 0 6pt !important;
    background: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .rp-allergen-icon { display: none !important; }
  .rp-diet-box { grid-template-columns: minmax(0, 1fr) !important; }
  .rp-allergen-label {
    font-size: 10.5pt !important;
    font-weight: 700 !important;
    color: #111 !important;
    border: none !important;
  }
  .rp-allergen-pill {
    display: inline-block !important;
    border: 0.7pt solid #222 !important;
    border-radius: 2pt !important;
    background: #fff !important;
    color: #111 !important;
    font-weight: 700 !important;
    font-size: 9.5pt !important;
    padding: 0 5pt !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  #rp-disclaimers, #rp-disclaimers div {
    font-size: 9.5pt !important;
    color: #111 !important;
    border-color: #222 !important;
    background: none !important;
  }

  a, a:visited, a:hover {
    color: #111 !important;
    text-decoration: none !important;
  }
  a[href]::after, a[href]:after { content: none !important; }

  #tabs-view { display: block !important; clear: both; }
  #tab-ingredients, #tab-procedure { display: block !important; padding: 2pt 0 4pt !important; }
  #tab-notes:has(.rp-notes-item) { display: block !important; padding: 2pt 0 4pt !important; }
  #tab-notes:not(:has(.rp-notes-item)) { display: none !important; }
  #tab-ingredients::before, #tab-procedure::before, #tab-notes:has(.rp-notes-item)::before {
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    font-size: 14pt;
    font-weight: 600;
    color: #111;
    display: block;
    margin: 8pt 0 3pt;
    line-height: 1.1;
    break-after: avoid;
    page-break-after: avoid;
  }
  #tab-ingredients::before { content: "Ingredients"; }
  #tab-procedure::before { content: "Method"; }
  #tab-notes:has(.rp-notes-item)::before { content: "Notes"; }

  #ingredients-content {
    column-count: 2;
    column-gap: 8mm;
  }
  .rp-ing-section {
    /* Full width under the heading, and allowed to continue on the next
       page between rows. A row itself still stays in one piece. */
    column-span: all;
    break-inside: auto;
    page-break-inside: auto;
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0 0 7pt;
  }
  /* One group cannot sit beside another group, so its rows use the two columns. */
  #ingredients-content:has(.rp-ing-section:only-child) { column-count: 1; }
  #ingredients-content:has(.rp-ing-section:only-child) .rp-ing-section {
    column-count: 2;
    column-gap: 8mm;
    display: block;
    width: auto;
  }
  #ingredients-content:has(.rp-ing-section:only-child) .rp-ing-section-title { column-span: all; }
  .rp-ing-section-title, .rp-proc-block-title {
    font-family: "DM Sans", "Segoe UI", sans-serif !important;
    font-size: 9pt !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase;
    color: #111 !important;
    border: none !important;
    border-bottom: 0.6pt solid #222 !important;
    padding: 0 0 1pt !important;
    margin: 0 0 2pt !important;
    break-after: avoid;
    page-break-after: avoid;
    display: block !important;
  }
  .rp-ing-section-title::after { display: none !important; content: none !important; }
  .rp-ing-row {
    display: block !important;
    padding: 1pt 0 !important;
    margin: 0 !important;
    text-align: left !important;
    break-inside: avoid;
    page-break-inside: avoid;
    grid-template-columns: none !important;
  }
  .rp-ing-qty, .rp-ing-name, .rp-notes-item, .rp-proc-step-text, .rp-proc-single {
    font-size: 10.75pt !important;
    line-height: 1.4 !important;
    color: #111 !important;
  }
  .rp-ing-qty, .rp-ing-name { display: inline !important; }
  .rp-ing-qty { font-weight: 700 !important; }
  .rp-ing-qty::after { content: "\00a0"; }
  .rp-ing-name, .rp-ing-name span {
    text-align: left !important;
    font-size: 10.75pt !important;
  }
  .rp-ing-name span { font-style: italic !important; }

  #procedure-content { counter-reset: cj-step; }
  .rp-proc-block { margin: 0 0 7pt !important; }
  .rp-proc-block:not(.rp-proc-tip) .rp-proc-step { counter-increment: cj-step; }
  .rp-proc-step {
    break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 3pt !important;
    gap: 0.4em !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .rp-proc-step-num {
    font-size: 0 !important;
    width: auto;
    flex: 0 0 auto;
    min-width: 1.5em;
    color: transparent !important;
  }
  .rp-proc-step-num::after { content: none !important; display: none !important; }
  .rp-proc-block:not(.rp-proc-tip) .rp-proc-step-num::before {
    content: counter(cj-step) "." !important;
    font-size: 11pt !important;
    color: #111 !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-weight: 600;
  }
  .rp-proc-step-text em {
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
    font-style: italic !important;
    font-weight: 600 !important;
  }
  .rp-proc-tip {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .rp-proc-tip .rp-proc-step-num { display: none !important; }
  .rp-proc-tip .rp-proc-block-title {
    font-size: 0 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 6pt 0 2pt !important;
  }
  .rp-proc-tip.rp-tip-prefixed .rp-proc-block-title { display: none !important; }
  .rp-proc-tip .rp-proc-block-title::before {
    content: "Tip";
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
    font-size: 12pt !important;
    font-style: italic !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #111 !important;
  }
  .rp-proc-plain .rp-proc-block-title { display: none !important; }
  .rp-notes-block-title, .rp-notes-block-title span {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 12pt !important;
    font-weight: 600 !important;
    font-style: italic !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #111 !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
  }
  .rp-notes-block-title span { font-size: 11pt !important; margin-left: 0.4em; }
  .rp-notes-block-title span::before { content: "· "; }
  .rp-notes-block {
    break-inside: avoid;
    page-break-inside: avoid;
    margin: 2pt 0 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
  }
  .rp-notes-item {
    break-inside: avoid;
    page-break-inside: avoid;
    border: none !important;
    padding: 0 !important;
  }
  .rp-proc-scale-note { font-size: 9pt !important; color: #333 !important; }

  h1, h2, h3, .rp-title, .rp-ing-section-title, .rp-proc-block-title {
    break-after: avoid;
    page-break-after: avoid;
  }
  p, li { orphans: 3; widows: 3; }
}