/* ═══════════════════════════════════════════════════════════════
   Tank Logic — print.css  v1.0
   Print stylesheet for aquarium guides and species care sheets.

   Hobbyists print guides to read next to the tank. This stylesheet:
   - Hides nav, footer, ads, sidebar, TOC, reading-progress, hero image
   - Expands the main content to full width
   - Shows URLs after links (so printed links are usable)
   - Uses serif fonts for readability on paper
   - Forces page breaks before major sections
   - Ensures tables don't break across pages

   Auto-loaded via @media print — no <link> tag needed in HTML.
   ═══════════════════════════════════════════════════════════════ */

@media print {
  /* ─── 1. PAGE SETUP ─────────────────────────────────────────── */
  @page {
    margin: 1.5cm 1.8cm;
    size: A4;
  }

  /* ─── 2. GLOBAL PRINT RULES ─────────────────────────────────── */
  html, body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 11pt;
    line-height: 1.5;
    overflow: visible !important;
  }

  /* Switch to a serif font for better print readability */
  body, p, li, td, th {
    font-family: Georgia, 'Times New Roman', serif !important;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: Georgia, 'Times New Roman', serif !important;
    color: #000000 !important;
    page-break-after: avoid;
  }

  /* ─── 3. HIDE NON-PRINTABLE ELEMENTS ────────────────────────── */
  .nav,
  .nav__mobile,
  .footer,
  .ad-shell,
  .ad-label,
  .guide-sidebar,
  .toc-panel,
  .toc-list,
  .read-progress,
  .read-progress__bar,
  .related-guides,
  .related-grid,
  .related-card,
  .author-bio,
  .skip,
  .nav__hamburger,
  .nav__cta,
  .cta-banner,
  .db-filter-bar,
  .db-search-wrap,
  .hero-img,
  .guide-hero__meta .tag,
  .sidebar-panel,
  .fm-backdrop,
  .fm-modal,
  #hamburger,
  #mobileMenu,
  #ad-top-leaderboard,
  #progressBar {
    display: none !important;
  }

  /* Hide the cookie consent banner if present */
  .fc-consent-root,
  .fc-dialog-container,
  #cookieConsent,
  .cookie-banner {
    display: none !important;
  }

  /* ─── 4. EXPAND MAIN CONTENT ────────────────────────────────── */
  .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .guide-layout {
    display: block !important;
    grid-template-columns: none !important;
    padding: 0 !important;
  }

  .guide-body {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* ─── 5. HERO / HEADER TREATMENT ────────────────────────────── */
  .guide-hero,
  .page-hero,
  .db-hero,
  .hero {
    background: #ffffff !important;
    border: none !important;
    padding: 0 0 12pt 0 !important;
    margin: 0 0 12pt 0 !important;
  }

  .guide-hero__inner,
  .page-hero__inner,
  .db-hero__inner {
    padding: 0 !important;
  }

  .guide-hero h1,
  .page-hero h1,
  .db-hero h1,
  .hero h1 {
    font-size: 20pt !important;
    color: #000000 !important;
    margin-bottom: 6pt !important;
  }

  .guide-hero__desc,
  .page-hero .lead,
  .db-hero .lead,
  .hero .lead {
    font-size: 11pt !important;
    color: #333333 !important;
  }

  /* Byline + last-updated — keep for credibility */
  .byline {
    font-size: 9pt !important;
    color: #555555 !important;
    margin-bottom: 4pt !important;
  }
  .byline .avatar {
    display: none !important;  /* the "S" circle doesn't print well */
  }
  .last-updated {
    font-size: 9pt !important;
    color: #555555 !important;
    margin-bottom: 12pt !important;
  }

  /* ─── 6. LINKS — show URLs after links ──────────────────────── */
  a[href^="http"]::after,
  a[href^="//"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #666666;
    text-decoration: none;
    word-break: break-all;
  }

  /* Internal links — don't show full URL, just the anchor */
  a[href^="#"]::after {
    content: "" !important;
  }

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

  /* ─── 7. TABLES ─────────────────────────────────────────────── */
  table {
    width: 100% !important;
    border-collapse: collapse !important;
    page-break-inside: avoid;
    font-size: 10pt;
  }

  th, td {
    border: 1px solid #cccccc !important;
    padding: 4pt 6pt !important;
    color: #000000 !important;
    background: #ffffff !important;
  }

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

  /* ─── 8. GUIDE BODY / ARTICLE CONTENT ──────────────────────── */
  .guide-body h2,
  .page-body h2 {
    font-size: 15pt !important;
    margin-top: 18pt !important;
    margin-bottom: 6pt !important;
    border-bottom: 1px solid #999999 !important;
    padding-bottom: 2pt !important;
    page-break-after: avoid;
  }

  .guide-body h3,
  .page-body h3 {
    font-size: 12pt !important;
    margin-top: 12pt !important;
    page-break-after: avoid;
  }

  .guide-body p,
  .page-body p,
  .legal-body p {
    font-size: 11pt !important;
    color: #000000 !important;
    margin-bottom: 8pt !important;
    orphans: 3;
    widows: 3;
  }

  /* Lists — restore bullet points for print */
  .guide-body ul,
  .guide-body ol,
  .page-body ul,
  .page-body ol {
    list-style: disc !important;
    margin-left: 18pt !important;
    margin-bottom: 8pt !important;
  }
  .guide-body ol,
  .page-body ol {
    list-style: decimal !important;
  }
  .guide-body li,
  .page-body li {
    margin-bottom: 4pt !important;
    color: #000000 !important;
  }

  /* Step lists — restore numbering, hide the circular step badges */
  .steps-list {
    list-style: decimal !important;
    margin-left: 18pt !important;
  }
  .steps-list .step-num {
    display: none !important;
  }
  .steps-list .step-body {
    display: list-item !important;
  }

  /* FAQ — expand collapsible details for print */
  details {
    display: block !important;
    page-break-inside: avoid;
    margin-bottom: 8pt !important;
  }
  details summary {
    font-weight: bold !important;
    color: #000000 !important;
    list-style: none !important;
  }
  details summary::before {
    content: "Q: " !important;
  }
  details p {
    margin-top: 4pt !important;
  }
  details p::before {
    content: "A: ";
    font-weight: bold;
  }

  /* Callouts — print as boxes */
  .callout,
  .guide-highlight {
    border: 1px solid #999999 !important;
    background: #f5f5f5 !important;
    color: #000000 !important;
    padding: 8pt !important;
    margin: 8pt 0 !important;
    page-break-inside: avoid;
  }

  /* Tables — allow horizontal scroll wrapping */
  .guide-table-wrap,
  .table-wrap,
  .wc-table-wrap {
    overflow: visible !important;
    page-break-inside: avoid;
  }

  /* ─── 9. PAGE BREAKS ────────────────────────────────────────── */
  h2 {
    page-break-before: auto;
    page-break-after: avoid;
  }
  h2:first-of-type {
    page-break-before: avoid;
  }

  /* Avoid breaking inside these elements */
  img, figure, blockquote, pre {
    page-break-inside: avoid;
  }

  /* ─── 10. IMAGES — grayscale for print ──────────────────────── */
  img {
    max-width: 100% !important;
    filter: grayscale(40%);  /* slight grayscale saves ink */
  }

  /* ─── 11. PRINT HEADER / FOOTER (browser-controlled) ─────────── */
  /* Browsers add their own page headers/footers (URL, page number, date)
     by default. This is controlled in the user's print dialog, not CSS. */

  /* ─── 12. SPECIES PAGES — print the quick stats table nicely ── */
  .guide-table {
    page-break-inside: avoid;
  }

  /* ─── 13. MISC FIXES ─────────────────────────────────────────── */
  /* Reset flexbox/grid layouts that break in print */
  .guide-layout,
  .page-layout,
  .footer__inner,
  .nav__inner {
    display: block !important;
  }

  /* Hide background colors and gradients */
  * {
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Ensure code blocks wrap */
  pre, code {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    font-family: 'Courier New', monospace !important;
    font-size: 9pt !important;
  }
}