/* ==========================================================================
   Plantsky — Print Stylesheet
   Loaded via <link rel="stylesheet" href="/css/print.css" media="print">
   No @media print wrapper needed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hide non-essential UI elements
   -------------------------------------------------------------------------- */

.main-nav,
.admin-nav,
.footer,
.progress-bar,
.product-ad,
.plant-sidebar,
.sidebar-print-btn,
.filter-panel,
.search-bar,
.pagination,
.marketplace-buttons,
.products-filter,
.btn,
button,
[role="navigation"],
.breadcrumb,
.back-link,
.cookie-banner,
.notification,
.toast {
    display: none !important;
}

/* --------------------------------------------------------------------------
   2. Hide decorative elements
   -------------------------------------------------------------------------- */

.leaf-pattern,
.leaf-decoration,
.bg-decoration,
.decorative-border,
[class*="leaf-bg"],
[class*="pattern-"],
[class*="decoration"] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   3. Page & body reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-shadow: none !important;
    text-shadow: none !important;
    transition: none !important;
    animation: none !important;
}

html {
    font-size: 12pt;
}

body {
    margin: 0;
    padding: 0;
    color: #000 !important;
    background: #fff !important;
    font-family: "Georgia", "Times New Roman", serif;
    line-height: 1.5;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* --------------------------------------------------------------------------
   4. Layout — single-column, full width
   -------------------------------------------------------------------------- */

main,
.container,
.content-wrapper,
.plant-detail-section,
.products-section,
.product-detail-section,
.plants-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0.5cm 0 !important;
    display: block !important;
}

.plant-detail-grid,
.product-detail-grid,
.plants-grid,
.products-grid {
    display: block !important;
    width: 100% !important;
}

.plant-detail-grid > *,
.product-detail-grid > * {
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    margin-bottom: 0.5cm;
}

/* --------------------------------------------------------------------------
   5. Typography
   -------------------------------------------------------------------------- */

h1 {
    font-size: 18pt;
    margin: 0 0 0.3cm;
    color: #000 !important;
    page-break-after: avoid;
}

h2 {
    font-size: 15pt;
    margin: 0.4cm 0 0.2cm;
    color: #000 !important;
    page-break-after: avoid;
}

h3 {
    font-size: 13pt;
    margin: 0.3cm 0 0.15cm;
    color: #000 !important;
    page-break-after: avoid;
}

p,
li,
td,
th,
dd,
dt {
    font-size: 11pt;
    color: #000 !important;
}

a {
    color: #000 !important;
    text-decoration: underline;
}

/* Show URL for external links */
a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    font-weight: normal;
    color: #555 !important;
    word-break: break-all;
}

/* Don't show URL for internal/anchor links or image links */
a[href^="#"]::after,
a[href^="/"]::after,
a:has(img)::after {
    content: none !important;
}

/* --------------------------------------------------------------------------
   6. Images
   -------------------------------------------------------------------------- */

img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
    break-inside: avoid;
}

/* Force lazy-loaded images to display */
img[loading="lazy"] {
    content-visibility: auto;
}

img[data-src] {
    /* Fallback: if JS lazy-load hasn't swapped src, hide broken image */
    visibility: visible;
}

.plant-detail-image img,
.product-detail-image img {
    max-width: 60% !important;
    margin: 0 auto;
    display: block;
}

/* --------------------------------------------------------------------------
   7. Cards — keep together, light borders
   -------------------------------------------------------------------------- */

.card,
.step-card,
.plant-card,
.product-grid-item,
.tip-card,
.care-step {
    page-break-inside: avoid;
    break-inside: avoid;
    border: 1px solid #d0d0d0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    margin-bottom: 0.4cm;
    padding: 0.3cm;
}

/* --------------------------------------------------------------------------
   8. Step cards — avoid orphaned steps
   -------------------------------------------------------------------------- */

.step-card,
.care-step {
    page-break-inside: avoid;
    break-inside: avoid;
}

.step-card + .step-card,
.care-step + .care-step {
    margin-top: 0.3cm;
}

/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */

table {
    border-collapse: collapse;
    width: 100%;
    page-break-inside: auto;
}

tr {
    page-break-inside: avoid;
    break-inside: avoid;
}

th,
td {
    border: 1px solid #ccc !important;
    padding: 0.15cm 0.25cm;
    text-align: left;
}

th {
    font-weight: bold;
    background: #f5f5f5 !important;
}

/* --------------------------------------------------------------------------
   10. Badges and tags — make readable in B&W
   -------------------------------------------------------------------------- */

.badge,
.tag,
.difficulty-badge,
.type-badge {
    border: 1px solid #999 !important;
    background: #f0f0f0 !important;
    color: #000 !important;
    padding: 1pt 4pt;
    font-size: 9pt;
}

/* --------------------------------------------------------------------------
   11. Page margins and breaks
   -------------------------------------------------------------------------- */

@page {
    margin: 1.5cm 1.5cm 2cm 1.5cm;
    size: A4;
}

@page :first {
    margin-top: 1cm;
}

/* Prevent widows/orphans */
p,
li {
    orphans: 3;
    widows: 3;
}

/* Force page break before major sections when multiple articles print */
.product-detail-section,
.plant-detail-section {
    page-break-before: auto;
}

/* --------------------------------------------------------------------------
   12. Utility: force show/hide for print
   -------------------------------------------------------------------------- */

.print-only {
    display: block !important;
}

.no-print,
.screen-only {
    display: none !important;
}