/**
 * Knowledge Hub PDF – Strict 1–2 page Recipe Card
 * Zero-waste header, compact content, thin branding footer
 */

/* Hide print-only blocks on live site */
@media screen {
  .next-steps-section,
  .print-footer {
    display: none !important;
  }
}

@media print {
  /* Recipe Card CSS reset */
  *, *::before, *::after { box-sizing: border-box !important; }
  @page {
    margin: 1.5cm;
    /* Remove browser-generated footers (URL, timestamp) */
    size: A4;
  }
  body {
    font-family: Arial, Helvetica, sans-serif !important;
    background: white !important;
    color: #000 !important;
    margin: 0 !important;
  }
  main,
  #main-content,
  article {
    font-family: Arial, Helvetica, sans-serif !important;
  }
  main,
  #main-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
  }
  * {
    widows: 3;
    orphans: 3;
  }

  /* Zero-waste header: hide Hero chrome (Need Professional Help?, Ready to Save?, large banners) */
  section.bg-primary,
  .bg-primary section,
  .hero-bg .hero-logo-container,
  .hero-bg a[href],
  .hero-bg .flex,
  nav,
  #navbar,
  #mobile-menu,
  #mobile-menu-button,
  #desktop-menu-button,
  .header-breadcrumb-sticky,
  .desktop-extra-strip,
  .breadcrumb-nav,
  .app-header-bar,
  .app-overlay-menu,
  footer,
  [role="contentinfo"],
  div[class*="mt-12"][class*="bg-neutral-100"][class*="border-l"],
  .bg-primary.rounded-lg,
  .pt-6.mt-12.border-t,
  .pt-6.mt-8.border-t,
  .pdf-download-btn,
  .no-print,
  .share-dropdown,
  .share-knowledge-btn,
  .js-share-product,
  .print-seal,
  .feedback-booking-box,
  .print-footer-qr,
  section[class*="bg-primary/10"],
  section[class*="bg-primary/5"],
  .print-hide,
  .hero-bg > a,
  a[class*="bg-primary"][class*="rounded-lg"],
  a[class*="hover:bg-primary-dark"][class*="shadow-lg"],
  section.bg-primary,
  .print-hide,
  div.bg-primary.rounded-lg,
  .cta-mid-page {
    display: none !important;
  }
  /* Show branding footer (text only); hide its QR if present */
  .print-footer {
    display: block !important;
  }
  .print-footer .print-footer-qr {
    display: none !important;
  }

  /* 2-column header at top: Left (Name/Phone) | Right (Logo) – minimal space */
  .print-header {
    display: block !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    position: relative !important;
  }
  .print-header-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }
  .print-company {
    font-size: 12pt !important;
    font-weight: bold !important;
    margin: 0 !important;
    color: #000 !important;
  }
  /* Combined header: Thanet Electrical Ltd | 07553 553 536 */
  .print-phone {
    display: inline !important;
    margin: 0 !important;
    font-size: 12pt !important;
    font-weight: bold !important;
  }
  .print-phone::before {
    content: " | " !important;
  }
  .print-header .print-logo {
    height: 50px !important;
    width: auto !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    /* Force absolute path in HTML: src="https://thanet-electrical.co.uk/img/logo/logo.png" */
  }
  .print-header .print-header-right {
    position: relative !important;
  }
  .print-header-divider {
    margin: 2px 0 4px 0 !important;
    border: none !important;
    border-top: 1px solid #999 !important;
  }

  /* Hero/title: minimal space – header is above this */
  .hero-bg {
    background: transparent !important;
    background-image: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .hero-bg::before {
    display: none !important;
  }
  .hero-bg > div {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }
  /* Article title: 18pt, no wasted space */
  .hero-bg h1 {
    font-size: 18pt !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: bold !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }
  /* Sub-headline: 10pt, minimal margin; single line space before first paragraph */
  .hero-bg p {
    font-size: 10pt !important;
    font-style: italic !important;
    color: #666 !important;
    margin: 0 0 1em 0 !important;
    padding: 0 !important;
  }

  /* Hide category/read-time bar; minimize intro margin */
  article > div[class*="flex"][class*="items-center"][class*="border-b"] {
    display: none !important;
  }
  article .prose,
  article [class*="prose-lg"] {
    margin-bottom: 6px !important;
  }

  /* Hide dark backgrounds */
  .hero-bg,
  .bg-neutral-950,
  .bg-neutral-800,
  .bg-neutral-700 {
    background: white !important;
    background-image: none !important;
  }

  /* Content compaction: tight line spacing, minimal padding */
  article {
    background: white !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  main .max-w-4xl {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  h1, h2, h3, h4 {
    color: #000 !important;
    font-family: Arial, Helvetica, sans-serif !important;
  }
  h2 { font-size: 14pt !important; margin: 0.75rem 0 0.5rem !important; }
  h3 { font-size: 12pt !important; margin: 0.5rem 0 0.25rem !important; }
  p, li {
    font-size: 10pt !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }
  a {
    color: #000 !important;
    text-decoration: underline !important;
  }

  /* Tables */
  table {
    page-break-inside: avoid;
    font-size: 9pt !important;
  }

  /* Pro Tip: Light yellow */
  [class*="bg-primary/10"],
  [class*="bg-primary/5"],
  [class*="border-primary"],
  aside[aria-label*="Roy"] {
    border: 1px solid #333 !important;
    background: #fefce8 !important;
    padding: 0.5rem 0.75rem !important;
    margin: 0.5rem 0 !important;
    font-size: 10pt !important;
  }

  /* Safety Warnings: Light red */
  .bg-red-50,
  [class*="border-red"],
  section[role="alert"] {
    border: 1px solid #333 !important;
    background: #fef2f2 !important;
    padding: 0.5rem 0.75rem !important;
    margin: 0.5rem 0 !important;
  }

  /* Annual Savings highlight */
  .overflow-x-auto + .bg-green-200 {
    background: #FDC700 !important;
    font-weight: bold !important;
    padding: 0.5rem !important;
  }

  /* Next Steps – SINGLE final action box (only QR section) */
  .next-steps-section {
    display: block !important;
    page-break-inside: avoid;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #333;
    background: #f9f9f9 !important;
  }
  .next-steps-section h3 {
    font-size: 12pt !important;
    margin: 0 0 0.5rem 0 !important;
  }
  .next-steps-section ul {
    margin: 0 0 1rem 0 !important;
    padding-left: 1.25rem !important;
  }
  .next-steps-section li {
    margin: 0.2rem 0 !important;
  }
  /* Bottom row: QR left | Center text | QR right */
  .next-steps-contact {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid #ccc !important;
  }
  .next-steps-qr-left,
  .next-steps-qr-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .next-steps-qr-left img,
  .next-steps-qr-right img {
    width: 70px !important;
    height: 70px !important;
  }
  .next-steps-center {
    flex: 1;
    text-align: center;
    font-size: 11pt !important;
    font-weight: bold !important;
  }

  /* Branding footer: thin text bar (no QR) */
  .print-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 1cm;
    font-size: 9pt;
    color: #333;
    border-top: 1px solid #ccc;
    background: white !important;
    text-align: center;
  }
  .print-footer .print-footer-text {
    margin: 0;
    font-size: 9pt;
    color: #333;
  }
}
