/* RecipesDiet Mobile App route bundle: mobile-app-recipe-print.css; version: 0.4.89-phase2-dynamic-recipe-print */

/* Simple, ink-saving recipe print surface.
 * Source module for 0.4.89-phase2-dynamic-recipe-print.
 * It uses the original recipe DOM and never creates a print-only copy.
 */

@media print {
  @page {
    size: A4;
    margin: 17mm 17mm 19mm;
  }

  html[data-rd-mobile-app-view="recipe"],
  html[data-rd-mobile-app-view="recipe"] body {
    background: #ffffff !important;
    color: #111111 !important;
    print-color-adjust: economy;
    -webkit-print-color-adjust: economy;
  }

  html[data-rd-mobile-app-view="recipe"] body {
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    font-size: 10pt !important;
    line-height: 1.5 !important;
    font-variant-ligatures: none !important;
    letter-spacing: 0 !important;
  }

  /* Print is a reading surface, not a screenshot of the mobile UI. Keep one
   * deterministic family and one page-column geometry so every section lands
   * on the same left/right edges, regardless of the source screen wrapper. */
  html[data-rd-mobile-app-view="recipe"] body * {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    font-variant-ligatures: none !important;
    letter-spacing: 0 !important;
  }

  /* Screen chrome, ads, actions, and plugin-owned fixed UI do not belong on paper. */
  html[data-rd-mobile-app-view="recipe"] :is(
    .rd-mobile-app-shell,
    .rd-mobile-app-bar,
    .rd-mobile-app-dock,
    .rd-mobile-app-menu-backdrop,
    .rd-mobile-app-menu-drawer,
    .rd-mobile-app-appearance-options,
    .rd-mobile-app-cook-modal,
    .rd-top,
    .rd-mobile-app-favorite-toggle,
    .rd-hero-thumbs,
    .rank-math-breadcrumb,
    body > header,
    body > footer .wp-block-columns,
    body > footer nav,
    body > footer .rd-top,
    .recipesdiet-ads-slot,
    .rd-acts,
    .rd-related-articles,
    .rd-reviews,
    .rd-filters,
    .rd-kinds,
    .rd-skip-link,
    #wpconsent-root,
    #wpconsent-container
  ) {
    display: none !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe {
    box-sizing: border-box;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    background: #ffffff !important;
    color: #111111 !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe > *,
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe :is(
    .rd-recipe-head,
    .rd-recipe-body,
    .rd-cook,
    .rd-cook-grid,
    .rd-cook-col,
    .rd-tail,
    .rd-faq,
    .rd-nutri,
    .rd-read
  ) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-cook,
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-recipe-body {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-recipe-hero,
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-recipe-hero img,
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe figure.wp-block-image,
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe figure.wp-block-image img {
    display: block !important;
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
    max-height: 92mm !important;
    margin: 0 0 7mm !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    object-fit: contain !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* The source hero is often portrait-oriented. A restrained landscape crop
   * uses the paper width and removes the empty side gutters without stretching
   * the image. */
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-hero-media,
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-recipe-hero,
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-recipe-hero img {
    width: 100% !important;
    height: 70mm !important;
    min-height: 0 !important;
    max-height: 70mm !important;
    overflow: hidden !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-recipe-head,
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-facts {
    display: block !important;
    width: 100% !important;
    margin: 0 0 7mm !important;
    padding: 0 0 5mm !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Keep the opening copy with the title/facts when there is room. The screen
   * recipe layout has its own sectioning rules; those must never force a blank
   * print page before the first paragraph. */
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-recipe-body,
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-recipe-body > .rd-intro {
    break-before: auto !important;
    page-break-before: auto !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-recipe-head::before {
    display: none !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe h1.rd-recipe-title {
    margin: 0 0 4mm !important;
    color: #111111 !important;
    font-size: 25pt !important;
    line-height: 1.1 !important;
    letter-spacing: -.02em;
    break-after: avoid;
    page-break-after: avoid;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .taxonomy-diet {
    display: block !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: fit-content !important;
    margin: 0 0 4mm !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #444444 !important;
    background: transparent !important;
    font-size: 8pt !important;
    font-weight: 700 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .taxonomy-diet a {
    color: #444444 !important;
    text-decoration: none !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-recipe-dek,
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-intro__text {
    margin: 0 0 5mm !important;
    max-width: 72ch !important;
    color: #333333 !important;
    font-size: 10.5pt !important;
    line-height: 1.5 !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-mobile-app-recipe-meta {
    display: flex !important;
    justify-content: space-between !important;
    gap: 8mm !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #333333 !important;
    font-size: 9pt !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe :is(.rd-macros2, .rd-times) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3mm !important;
    margin: 4mm 0 0 !important;
    padding: 3mm 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #222222 !important;
    list-style: none !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe :is(.rd-macros2 li, .rd-times li) {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #222222 !important;
    box-shadow: none !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe :is(.rd-macros2 svg, .rd-times svg, .rd-macros2 small, .rd-macros2 i) {
    display: none !important;
  }

  /* The interactive contents drawer is a screen affordance, not part of the
   * requested paper copy. */
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-toc {
    display: none !important;
  }

  /* Each top-level recipe tab/section starts on a fresh page. Long sections may
   * continue naturally, but a table, image, FAQ item, or list item never gets
   * split when it can fit on one page. */
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-recipe-body > :is(.rd-card, h2, .rd-nutri, .rd-faq) {
    break-before: auto;
    page-break-before: auto;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-recipe-body > .rd-why {
    break-before: auto !important;
    page-break-before: auto !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-recipe-body > :is(.rd-intro, .rd-card, .rd-nutri, .rd-faq),
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe :is(.rd-card .rd-cook-col, .rd-faq details, figure.wp-block-table, table, figure.wp-block-image) {
    margin: 0 0 7mm !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* The source card uses a two-column cooking grid on screen. Print it as a
   * vertical sequence so Ingredients/Equipment and How to make it are never
   * stranded side-by-side or split at an arbitrary column boundary. */
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-cook-grid {
    display: block !important;
    width: 100% !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-cook-col--a h2:nth-of-type(2) {
    break-before: auto !important;
    page-break-before: auto !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-cook-col--a > section[data-rd-recipe-section="equipment"] {
    break-before: auto !important;
    page-break-before: auto !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-cook-col--b,
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-nutri,
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-read > .rd-read-card {
    break-before: auto !important;
    page-break-before: auto !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-cook-col,
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-cook-col > .rd-mobile-app-recipe-section {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe[data-rd-cook-mode-ready="true"] .rd-mobile-app-instructions-collapsed {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-read > .rd-read-card {
    display: block !important;
    width: 100% !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-read {
    display: block !important;
    width: 100% !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-tail {
    display: block !important;
    width: 100% !important;
    position: static !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-faq {
    display: block !important;
    width: 100% !important;
    position: static !important;
    break-before: auto !important;
    page-break-before: auto !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-faq > h2 {
    break-after: avoid !important;
    page-break-after: avoid !important;
  }

  /* The direct-child print section rule above is intentionally relaxed here:
   * FAQ content is longer than a sheet and must flow onto the next sheet
   * instead of asking Chromium to keep an oversized section intact. */
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-recipe-body > .rd-faq {
    break-before: page !important;
    page-break-before: always !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  /* Introductory copy may flow into the remaining space on the title page;
   * making it unbreakable would strand a short paragraph on a blank page. */
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-recipe-body > .rd-intro {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-recipe-body > h2 {
    margin: 0 0 4mm !important;
    padding: 0 !important;
    border: 0 !important;
    color: #111111 !important;
    font-size: 16pt !important;
    line-height: 1.2 !important;
    break-after: avoid;
    page-break-after: avoid;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe :is(h3, h4) {
    margin: 4mm 0 2mm !important;
    color: #222222 !important;
    font-size: 11.5pt !important;
    line-height: 1.2 !important;
    break-after: avoid;
    page-break-after: avoid;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe :is(p, li, td, th) {
    color: #222222 !important;
    font-size: 10pt !important;
    line-height: 1.5 !important;
    orphans: 3;
    widows: 3;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe figcaption {
    margin: 2mm 0 0 !important;
    color: #555555 !important;
    font-size: 8pt !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe li {
    margin-bottom: 1.5mm !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe :is(
    .rd-recipe-dek,
    .rd-intro__text,
    .rd-tail p,
    .rd-read p,
    .rd-faq p
  ) {
    max-width: 72ch !important;
    font-size: 10pt !important;
    line-height: 1.5 !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe :is(a, a:visited) {
    color: #222222 !important;
    text-decoration: underline !important;
  }

  /* Parent recipe CSS uses dark panels and accent text on screen. Flatten every
   * print-only descendant so no inherited dark fill or low-contrast token survives. */
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe :is(
    .rd-intro,
    .rd-intro *,
    .rd-why,
    .rd-why *,
    .rd-block,
    .rd-block *,
    .rd-card,
    .rd-card *,
    .rd-nutri,
    .rd-nutri *,
    .rd-read,
    .rd-read *,
    .rd-faq,
    .rd-faq *
  ) {
    color: #222222 !important;
    background: transparent !important;
    border-color: #888888 !important;
    box-shadow: none !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe :is(
    .rd-why li,
    .rd-why li *,
    .rd-block li,
    .rd-block li *
  ) {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe :is(h2, h3, h4, strong, b, span, small, dt, dd) {
    color: #222222 !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe :is(
    .rd-intro::before,
    .rd-intro::after,
    .rd-card::before,
    .rd-card::after,
    .rd-block::before,
    .rd-block::after
  ) {
    display: none !important;
  }

  /* Paper copy is deliberately flat: no framed text panels or decorative
   * block borders. Tables retain their own light grid below for legibility. */
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe :is(
    .rd-recipe-head,
    .rd-facts,
    .rd-intro,
    .rd-why,
    .rd-block,
    .rd-card,
    .rd-nutri,
    .rd-read,
    .rd-tail,
    .rd-faq,
    .rd-mobile-app-recipe-section,
    .rd-macros2,
    .rd-times
  ) {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-recipe-body > h2 {
    border: 0 !important;
  }

  /* Details are closed in the screen UI. Print must expose the original
   * answers without changing their interactive screen state. */
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-faq details {
    display: block !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-faq__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 8mm !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-faq__grid details {
    margin: 0 0 6mm !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-recipe-body > .rd-faq .rd-faq__grid details {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-faq details > :not(summary) {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-faq details > summary {
    display: block !important;
    margin: 0 0 2mm !important;
    padding: 0 !important;
    list-style: none !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-faq details > summary::-webkit-details-marker {
    display: none !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-faq details > summary::before,
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe .rd-faq details > summary::after {
    display: none !important;
    content: none !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe figure.wp-block-table {
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    background: #ffffff !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe thead {
    display: table-header-group !important;
  }

  html[data-rd-mobile-app-view="recipe"] main.rd-recipe :is(th, td) {
    padding: 2mm !important;
    border: .75pt solid #888888 !important;
    color: #222222 !important;
    overflow-wrap: anywhere !important;
  }

  /* The parent footer is a screen card with its own dark surface. It is not a
   * recipe tab, so omit it entirely rather than allowing a dark orphan page.
   * The recipe itself remains the sole print source of truth. */
  html[data-rd-mobile-app-view="recipe"] body footer {
    display: none !important;
  }

  /* A small paper-only attribution fills the final section without touching
   * the source DOM. Keeping it in normal flow avoids a fixed overlay. */
  html[data-rd-mobile-app-view="recipe"] main.rd-recipe::after {
    content: "recipesdiet.com - recipe print copy";
    display: block !important;
    margin: 4mm 0 0 !important;
    padding-top: 2mm !important;
    border: 0 !important;
    color: #555555 !important;
    font-size: 6.5pt !important;
    line-height: 1 !important;
    text-align: center !important;
    break-before: avoid !important;
    page-break-before: avoid !important;
  }

  html[data-rd-mobile-app-view="recipe"] :is(input, button, select, textarea) {
    color: #111111 !important;
    background: #ffffff !important;
  }
}