/**
 * Recipe Print Stylesheet — Oja Aed v3
 * 
 * This file is loaded with media="print" ONLY on recipe pages.
 * It must override aggressive screen CSS including:
 *   - position:absolute on .recipe-hero-content
 *   - overflow:hidden + height:55vh on .recipe-hero
 *   - inline style="width:100%;height:100%;object-fit:cover" on hero img
 *   - color:#fff on .recipe-title (white text for dark overlay)
 */

/* ── Force print colours ── */
*,
*::before,
*::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
}

/* ── A4 page with generous margins ── */
@page {
    size: A4 portrait;
    margin: 18mm 20mm 15mm 20mm;
}

/* ══════════════════════════════════════
   GLOBAL RESETS
   ══════════════════════════════════════ */
html {
    font-size: 10.5pt !important;
}

body,
body.site-wrapper,
body.single-recipe {
    background: white !important;
    color: #1a1a1a !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 10.5pt !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

/* All containers → full width, no padding fighting @page margins */
.site-main,
.site-main > *,
main,
.container,
.recipe-article,
.recipe-body {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* ══════════════════════════════════════
   HIDE EVERYTHING SCREEN-ONLY
   ══════════════════════════════════════ */
.site-header,
.site-footer,
.back-to-top,
.mobile-menu-toggle,
.cart-link,
.hero-indicators,
.no-print,
.recipe-back-link,
.recipe-print-btn,
.recipe-actions,
.recipe-hero-badge,
.recipe-hero-meta,
.recipe-meta-sep,
.recipe-hero-overlay,
.related-posts-title,
.bg-muted-section,
.section.bg-muted-section,
.section.no-print,
.post-tags,
.cta-section {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ══════════════════════════════════════
   PRINT HEADER — Logo + divider
   ══════════════════════════════════════ */
.recipe-print-header {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 0 10pt 0 !important;
    padding: 0 !important;
}

.recipe-print-header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 0 8pt 0 !important;
    margin: 0 !important;
}

.recipe-print-logo {
    height: 48pt !important;
    width: auto !important;
    max-width: 170pt !important;
    object-fit: contain !important;
    display: block !important;
}

.recipe-print-header-text {
    text-align: right !important;
}

.recipe-print-site {
    font-size: 8.5pt !important;
    color: #666 !important;
    font-style: italic !important;
}

.recipe-print-divider {
    height: 2pt !important;
    background: #3f5d44 !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* ══════════════════════════════════════
   HERO — The critical fix area
   
   Screen CSS has:
     .recipe-hero { position:relative; overflow:hidden; height:55vh }
     .recipe-hero img { width:100%; height:100% }  (+ inline style!)
     .recipe-hero-content { position:absolute; bottom:0 }
     .recipe-title { color:#fff }
   
   We must flatten all of this to a simple top-to-bottom flow.
   ══════════════════════════════════════ */

/* The hero wrapper: kill the viewport height and overflow clip */
.recipe-hero {
    position: static !important;
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 8pt 0 !important;
    padding: 0 !important;
    background: none !important;
}

/* Hero image: override BOTH the CSS rule AND the inline style attribute.
   The inline style says height:100% which in print resolves to 0 or 55vh.
   We force a sensible fixed max-height instead. */
.recipe-hero > img,
.recipe-hero img,
.recipe-hero-img,
.recipe-article .recipe-hero img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;           /* Override inline height:100% */
    max-height: 170pt !important;
    min-height: 0 !important;
    object-fit: cover !important;
    border-radius: 4pt !important;
    overflow: hidden !important;
}

/* The content block inside hero (title etc): pull it out of absolute */
.recipe-hero-content,
.recipe-hero > .container,
.recipe-hero .container.recipe-hero-content {
    position: static !important;
    display: block !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    inset: auto !important;
    z-index: auto !important;
    float: none !important;
    padding: 8pt 0 0 0 !important;
    margin: 0 !important;
    background: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Title: was white for dark overlay, needs to be dark for paper */
.recipe-title,
h1.recipe-title {
    font-size: 20pt !important;
    color: #1a1a1a !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    line-height: 1.2 !important;
    margin: 0 0 2pt 0 !important;
    padding: 0 !important;
    position: static !important;
    display: block !important;
}

/* ══════════════════════════════════════
   INFO BAR
   ══════════════════════════════════════ */
.recipe-info-bar {
    display: block !important;
    position: static !important;
    background: #f5f2ec !important;
    border: 1pt solid #d5ccba !important;
    border-radius: 4pt !important;
    padding: 8pt 12pt !important;
    margin: 8pt 0 10pt 0 !important;
    overflow: visible !important;
}

.recipe-info-bar .container {
    padding: 0 !important;
}

.recipe-info-grid {
    display: flex !important;
    justify-content: space-around !important;
    gap: 6pt !important;
    flex-wrap: nowrap !important;
}

.recipe-info-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1pt !important;
    min-width: 0 !important;
    position: static !important;
}

.recipe-info-icon { display: none !important; }

.recipe-info-label {
    font-size: 6.5pt !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #555 !important;
    display: block !important;
    font-weight: 700 !important;
}

.recipe-info-value {
    font-size: 11pt !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

/* ══════════════════════════════════════
   RECIPE LAYOUT — Force single column
   ══════════════════════════════════════ */
.recipe-layout {
    display: block !important;
    grid-template-columns: unset !important;
}

.recipe-body {
    margin: 0 !important;
    padding: 0 !important;
}

/* ══════════════════════════════════════
   INGREDIENTS
   ══════════════════════════════════════ */
.recipe-sidebar {
    position: static !important;
    margin: 0 0 10pt 0 !important;
    float: none !important;
    width: 100% !important;
}

.recipe-ingredients-card {
    position: static !important;
    background: #faf8f4 !important;
    border: 1.5pt solid #3f5d44 !important;
    border-radius: 4pt !important;
    padding: 10pt 12pt !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.recipe-section-title {
    font-size: 12pt !important;
    font-family: Georgia, serif !important;
    color: #3f5d44 !important;
    border-bottom: 1.5pt solid #3f5d44 !important;
    padding: 0 0 4pt 0 !important;
    margin: 0 0 6pt 0 !important;
    display: block !important;
}

.recipe-section-icon { display: none !important; }

.recipe-ingredient-group {
    font-size: 8pt !important;
    color: #3f5d44 !important;
    margin: 8pt 0 3pt !important;
    padding-top: 5pt !important;
    border-top: 0.75pt solid #ccc !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-weight: 700 !important;
}

.recipe-ingredients-list {
    columns: 2 !important;
    column-gap: 16pt !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.recipe-ingredients-list li {
    font-size: 9.5pt !important;
    padding: 2pt 0 !important;
    border-bottom: none !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 4pt !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    /* Reset any checked state for clean print */
    opacity: 1 !important;
    text-decoration: none !important;
    cursor: default !important;
}

.recipe-checkbox {
    width: 10pt !important;
    height: 10pt !important;
    min-width: 10pt !important;
    border: 0.75pt solid #777 !important;
    border-radius: 1.5pt !important;
    margin-top: 2pt !important;
    display: inline-block !important;
    background: transparent !important;
    flex-shrink: 0 !important;
}

/* Reset checked state for print (clean empty checkboxes) */
.recipe-ingredients-list li.checked {
    opacity: 1 !important;
    text-decoration: none !important;
}
.recipe-ingredients-list li.checked .recipe-checkbox {
    background: transparent !important;
    border-color: #777 !important;
}
.recipe-ingredients-list li.checked .recipe-checkbox::after {
    display: none !important;
}

/* ══════════════════════════════════════
   DESCRIPTION
   ══════════════════════════════════════ */
.recipe-description {
    margin: 0 0 8pt 0 !important;
    padding: 0 0 6pt 0 !important;
    border-bottom: 0.5pt solid #ccc !important;
}

.recipe-description p {
    font-size: 10pt !important;
    line-height: 1.6 !important;
    margin: 0 0 4pt 0 !important;
}

/* ══════════════════════════════════════
   STEPS
   ══════════════════════════════════════ */
.recipe-steps-section {
    margin: 0 0 8pt 0 !important;
}

.recipe-steps {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.recipe-step {
    display: flex !important;
    gap: 7pt !important;
    padding: 5pt 0 !important;
    border-bottom: 0.5pt solid #ddd !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

.recipe-step:last-child {
    border-bottom: none !important;
}

.recipe-step-number {
    width: 18pt !important;
    height: 18pt !important;
    min-width: 18pt !important;
    font-size: 8pt !important;
    font-weight: 700 !important;
    background: #3f5d44 !important;
    color: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 1pt !important;
    flex-shrink: 0 !important;
}

.recipe-step p {
    font-size: 10pt !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* ══════════════════════════════════════
   NOTES
   ══════════════════════════════════════ */
.recipe-notes {
    background: #f0f5ec !important;
    border: 0.75pt solid #c5d6b8 !important;
    border-radius: 4pt !important;
    padding: 8pt 10pt !important;
    margin: 8pt 0 0 0 !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

.recipe-notes-title {
    font-size: 9.5pt !important;
    color: #3f5d44 !important;
    font-weight: 700 !important;
    margin: 0 0 3pt 0 !important;
    display: block !important;
}

.recipe-notes-title svg { display: none !important; }

.recipe-notes p {
    font-size: 9pt !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* ══════════════════════════════════════
   PRINT FOOTER
   ══════════════════════════════════════ */
.recipe-print-footer {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    margin: 14pt 0 0 0 !important;
    padding: 0 !important;
}

.recipe-print-footer .recipe-print-divider {
    height: 1pt !important;
    background: #3f5d44 !important;
    margin: 0 0 5pt 0 !important;
}

.recipe-print-footer p {
    font-size: 7.5pt !important;
    color: #888 !important;
    text-align: center !important;
    margin: 0 !important;
}

.recipe-print-footer strong {
    color: #3f5d44 !important;
}

/* ══════════════════════════════════════
   LINKS → plain text
   ══════════════════════════════════════ */
a, a:visited, a:active, a:hover {
    color: inherit !important;
    text-decoration: none !important;
}

/* ══════════════════════════════════════
   PAGE BREAK HINTS
   ══════════════════════════════════════ */
.recipe-print-header {
    break-after: avoid !important;
    page-break-after: avoid !important;
}

.recipe-ingredients-card,
.recipe-notes,
.recipe-print-footer {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}