/*
 * Print layout for recipe pages. Loaded with media="print" on every page (Base.astro), and switched
 * to media="all" for the on-screen print view (html.print-view) that the Print button opens,
 * because some phone browsers ignore window.print().
 */
:root, :root[data-theme="dark"]{
  color-scheme:light;
  --bg:#fff; --surface:#fff; --surface-2:#fff; --surface-3:#fff;
  --ink:#000; --ink-2:#333; --ink-3:#555; --line:#bbb; --line-2:#999;
  --accent-ink:#000; --accent-wash:#fff; --green:#000; --red:#000;
}
@page{margin:14mm 14mm 16mm}
html, body{background:#fff !important; color:#000; padding:0 !important; font-size:11.5pt}
.skip, .notice-bar, .preview-bar, .family, header.masthead, footer.site, .readbar, .crumbs,
.r-actions, .r-meta, .taste, .after-cta, .comments, section[aria-labelledby="h-related"],
section[aria-labelledby="h-watch"], section[aria-labelledby="h-photos"], .story,
.ing-tools, .timer-tray, #toast, .toast, #cook-root, dialog, .mini, .fallback, .ing-i, .ingc-pop,
button.seek, .step-timers, .sbs-pick, .lp-open{display:none !important}

/* photos (the cover and step photos): only with "With photos", the default (html.print-photos, set in recipe.ts) */
html:not(.print-photos) ol.steps li.fig, html:not(.print-photos) .r-photo{display:none !important}
html:not(.print-photos) .r-hero{grid-template-columns:1fr}
.print-photos ol.steps li.fig{display:block; padding:2mm 0; border:0; break-inside:avoid}
.print-photos .rfig .zoom{background:none; border-radius:0; cursor:default; width:auto; display:inline-block}
.print-photos .rfig img{width:auto; max-width:100%; max-height:70mm; border-radius:1.5mm}
.print-photos .rfig .zoom-ic{display:none}
.print-photos .rfig figcaption{font-size:9.5pt; color:#444; margin-top:1mm}
.print-only{display:block}
.wrap{max-width:none; padding:0}
.section, .section-sm{padding:0}
a{color:inherit; text-decoration:none}
a.xlink::after{content:" (xawaash.com" attr(href) ")"; font-size:9pt; color:#555}
.ing-group h3{break-after:avoid}
/* title block: name, other names, small cover */
.r-hero{display:grid; grid-template-columns:1fr 42mm; gap:8mm; align-items:start; margin:0 0 6mm; padding:0; border:0; box-shadow:none}
.r-photo{order:2; border-radius:0; box-shadow:none}
.r-photo img{width:42mm; height:auto; border-radius:2mm}
.r-title{order:1; padding:0}
.r-title .eyebrow{color:#555}
.r-title h1{font-size:24pt; margin:1mm 0 2mm}
.voices{margin:0; font-size:10pt} .voices dl{gap:1mm 4mm}
/* ingredients, then the method */
.r-body{display:block}
.panel{border:0; box-shadow:none; padding:0; margin:0 0 6mm; background:none; position:static}
.panel h2{font-size:15pt; margin:0 0 2mm; border-bottom:1px solid #999; padding-bottom:1mm}
.measure{font-size:9pt; color:#555}
.ing-panel{columns:2; column-gap:8mm}
.ing-panel h2, .ing-panel .measure{column-span:all}
.ing-panel li, ol.steps li{break-inside:avoid}
.ing-panel input[type=checkbox]{appearance:none; -webkit-appearance:none; width:3.2mm; height:3.2mm; border:1px solid #000; border-radius:0.6mm; background:#fff}
.ing-panel .done, .ing-panel .checked{text-decoration:none !important; opacity:1 !important}
ol.steps li.st{padding:1.4mm 0; border:0; opacity:1 !important; text-decoration:none !important; background:none !important}
ol.steps li.st.done .tx{text-decoration:none !important}
ol.steps li.st .n{font-size:15pt; color:#000 !important; background:none !important}
.tap-hint{display:none}
ol.steps li.sub h3{font-size:12pt; margin:3mm 0 1mm; break-after:avoid}
.print-source{margin-top:6mm; padding-top:2mm; border-top:1px solid #999; font-size:9pt; color:#555}
/* other pages print without the site's menus too */
main{margin:0 !important}
.print-only{display:block}

/* on screen, the print view gets a margin and a bar with Print / Back */
@media screen{
  html.print-view main{max-width:820px; margin:0 auto !important; padding:12px 16px 40px}
  .pv-bar{position:sticky; top:0; z-index:50; display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; padding:10px 16px; background:#2B1D14; color:#F6ECDF; font:600 14px/1.3 system-ui, sans-serif}
  .pv-bar b{margin-inline-end:auto}
  .pv-bar button{font:inherit; border-radius:99px; padding:7px 14px; cursor:pointer; border:1px solid #4A3727; background:none; color:#F6ECDF}
  .pv-bar button.pv-print{background:#D58B3A; border-color:#D58B3A; color:#1F140B}
  .pv-seg{display:inline-flex; border:1px solid #4A3727; border-radius:99px; padding:2px}
  .pv-bar .pv-seg button{border:0; padding:5px 12px}
  .pv-bar .pv-seg button[aria-pressed="true"]{background:#F6ECDF; color:#2B1D14}
  .pv-bar p{flex-basis:100%; margin:0; font-weight:400; font-size:13px; color:#CBB59C}
}
@media screen and (max-width: 560px){ html.print-view .ing-panel{columns:1} }
@media print{ .pv-bar{display:none !important} }