/* ==========================================================================
   togo-print.css — sitewide print + offline polish
   Cluster 35 (items 1126-1145) of upgrade-roadmap-2000.md.

   Strategy:
     - hide all chrome (header, footer, mobile nav, trust pills, widgets)
     - reset body to white-on-black, A4 with 1.5cm margin
     - underline links so URLs are still discoverable in print
     - show URLs via [href] expansion on real anchors (not nav/buttons)
     - keep page-break-inside on cards / sections for clean page flow
     - "screen-only" / "print-only" helper classes for content variants
     - lab-notebook / reference-card pages get explicit @page sizing rules
========================================================================== */

/* Screen-only: small print button helper available on every page that
   opts in. Stays compact, brand-tokenised, sits inline with other CTAs. */
.print-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45em 0.85em;
  border: 1px solid var(--color-line, #2a2a2a);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text, #f5f5f5);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  text-decoration: none;
}
.print-button:hover,
.print-button:focus-visible {
  background: var(--color-bg-soft, rgba(255, 255, 255, 0.06));
  border-color: var(--color-line-strong, #444);
  color: var(--color-text-strong, #fff);
}
.print-button__icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* Lab-notebook + reference-card screens (visible on screen too, just as
   a preview of what prints). Keep the visual close to print so users
   know what they will get. */
.lab-sheet {
  background: #fff;
  color: #000;
  padding: 1.5cm 1.25cm;
  margin: 0 auto 2rem;
  max-width: 21cm;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  border-radius: 4px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.lab-sheet__title {
  font-size: 1.4rem;
  margin: 0 0 0.25em;
  letter-spacing: 0.01em;
  color: #000;
}
.lab-sheet__sub {
  font-size: 0.9rem;
  color: #444;
  margin: 0 0 1.2rem;
}
.lab-sheet__field-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.lab-sheet__field {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  font-size: 0.78rem;
}
.lab-sheet__field-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #555;
}
.lab-sheet__field-line {
  height: 1.6em;
  border-bottom: 1px solid #999;
}
.lab-sheet__grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 1rem 0;
}
.lab-sheet__grid th,
.lab-sheet__grid td {
  border: 1px solid #999;
  padding: 0.45em 0.6em;
  text-align: left;
  vertical-align: top;
  height: 2.2em;
  color: #000;
}
.lab-sheet__grid th {
  background: #f0f0f0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lab-sheet__notes {
  border: 1px solid #999;
  min-height: 6em;
  padding: 0.6em;
  font-size: 0.8rem;
  color: #555;
}
.lab-sheet__footer {
  margin-top: 1.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #666;
}

/* Tiny reference-card screens (business-card / pocket-card sizing).
   The print rules below force exact A6 / letter-card sizing. */
.ref-card {
  background: #fff;
  color: #000;
  padding: 1cm;
  margin: 0 auto 2rem;
  max-width: 14.8cm;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  border-radius: 4px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.ref-card h2 {
  margin: 0 0 0.4em;
  font-size: 1.2rem;
  color: #000;
}
.ref-card__sub {
  font-size: 0.78rem;
  color: #444;
  margin: 0 0 1rem;
}
.ref-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.74rem;
}
.ref-card th,
.ref-card td {
  padding: 0.32em 0.4em;
  border-bottom: 1px solid #d0d0d0;
  text-align: left;
  color: #000;
}
.ref-card th {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.65rem;
  color: #555;
}
.ref-card__footer {
  margin-top: 0.8rem;
  font-size: 0.65rem;
  color: #777;
  text-align: center;
  letter-spacing: 0.04em;
}

.ref-card--tight th,
.ref-card--tight td {
  padding: 0.22em 0.35em;
  font-size: 0.68rem;
}

/* Glossary mini-poster: 3-column layout fits ~30 terms on one A4 page */
.glossary-mini {
  background: #fff;
  color: #000;
  padding: 1cm 1.25cm;
  margin: 0 auto 2rem;
  max-width: 21cm;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  border-radius: 4px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.glossary-mini h1 {
  margin: 0 0 0.2em;
  font-size: 1.4rem;
  color: #000;
}
.glossary-mini__sub {
  font-size: 0.85rem;
  color: #444;
  margin: 0 0 1rem;
}
.glossary-mini__columns {
  column-count: 3;
  column-gap: 1rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #000;
}
.glossary-mini__term {
  break-inside: avoid;
  margin-bottom: 0.6em;
}
.glossary-mini__term dt {
  font-weight: 700;
  color: #000;
  display: inline;
}
.glossary-mini__term dd {
  display: inline;
  margin: 0 0 0 0.3em;
  color: #333;
}

/* ===== PRINT MEDIA ===== */
@media print {
  /* A4 default; consumers can override with @page :first */
  @page {
    size: A4;
    margin: 1.5cm;
  }

  /* Hide every piece of UI chrome that isn't part of the artifact */
  .site-header,
  .site-footer,
  .nav-shop,
  .nav-search,
  .nav-cart,
  .nav-account,
  .togo-mobile-nav,
  .togo-back-to-top,
  .togo-pwa-install,
  .togo-pwa-prompt,
  .feedback-widget,
  .togo-trust-pills,
  .trust-bar,
  .breadcrumb,
  .legal-banner,
  .compliance-banner,
  .cookie-banner,
  .lang-switcher,
  .togo-search,
  [data-no-print],
  noscript {
    display: none !important;
  }

  /* The print buttons themselves should never appear in print */
  .print-button,
  .print-only-controls {
    display: none !important;
  }

  /* Reset page chrome */
  html,
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.45;
  }
  body {
    padding: 0;
    margin: 0;
  }

  /* Containers go full-width once chrome is stripped */
  .container,
  .app-shell,
  main,
  .section,
  .section--surface {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: none !important;
  }

  .section {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  /* Hero blocks get muted in print — keep title + lede only */
  .hero,
  .blog-hub-hero,
  .compound-hero {
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
  }
  .hero__actions,
  .success-actions,
  .compound-hero__cta,
  .compound-form,
  #compound-form,
  .qty-stepper,
  .variant-picker,
  .compound-add-row {
    display: none !important;
  }

  /* Links: black + underlined; expand href on real anchors that aren't
     navigation. Skip nav/menu/buttons that we already hid above. */
  a, a:visited {
    color: #000 !important;
    text-decoration: underline;
  }
  main a[href^="http"]::after,
  main a[href^="/"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
    word-break: break-all;
  }
  /* Don't expand internal anchors / mailto / tel — too noisy */
  main a[href^="#"]::after,
  main a[href^="mailto:"]::after,
  main a[href^="tel:"]::after {
    content: "";
  }
  /* Don't double-print URLs inside cards-of-cards / tag pills */
  .blog-card a::after,
  .card a::after,
  .shop-card::after {
    content: "" !important;
  }

  /* Cards: keep visible but de-skin; avoid splitting across pages */
  .card,
  .blog-card,
  .product-card,
  .compound-card,
  .stack-card,
  .lab-sheet,
  .ref-card {
    background: #fff !important;
    border: 1px solid #888 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    break-inside: avoid;
    color: #000 !important;
  }
  .card *,
  .blog-card *,
  .product-card * {
    color: #000 !important;
  }

  /* Images stay inside their containers; logos / decorative imgs hide */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  .site-header__brand__logo,
  [data-decorative],
  .blog-card__cover-icon,
  .success-confetti,
  .success-check svg {
    display: none !important;
  }

  /* Tables look correct in print */
  table {
    width: 100%;
    border-collapse: collapse;
    page-break-inside: auto;
  }
  th, td {
    border: 1px solid #888;
    padding: 0.4em 0.6em;
    color: #000 !important;
  }
  thead {
    display: table-header-group;
  }
  tr {
    page-break-inside: avoid;
  }

  /* Headings keep with following content */
  h1, h2, h3, h4 {
    color: #000 !important;
    page-break-after: avoid;
  }
  h1 { font-size: 18pt; margin-top: 0; }
  h2 { font-size: 14pt; }
  h3 { font-size: 12pt; }

  /* Lab-sheet / reference-card overrides for print: drop screen shadow,
     tighten margins, snap to A4 / A6 paper sizing where requested. */
  .lab-sheet,
  .ref-card,
  .glossary-mini {
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Reference cards request A6 (105 × 148 mm) when printed alone */
  .ref-card[data-print-size="A6"] {
    page: refcard;
  }
  @page refcard {
    size: A6;
    margin: 0.5cm;
  }

  /* Watermark stamp at the bottom of every printed page (research-frame) */
  body::after {
    content: "togopeptide.com · research-use only · for laboratory documentation";
    display: block;
    margin-top: 1.2cm;
    padding-top: 0.4cm;
    border-top: 1px solid #999;
    text-align: center;
    font-size: 8pt;
    color: #555;
    letter-spacing: 0.03em;
  }

  /* Blog articles: hide the "related articles" / cross-link strip */
  .blog-related,
  .blog-cross-links,
  .togo-newsletter,
  .blog-cta {
    display: none !important;
  }

  /* Catalog (shop): force compact card grid for print */
  body[data-page="shop"] .entry-grid,
  body[data-page="shop"] .product-grid,
  body[data-page="shop"] .blog-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5cm !important;
  }

  /* Calculator / interactive tools collapse non-active panes */
  .lab-tool { display: none !important; }
  .lab-tool[data-active="true"] { display: block !important; }
}

/* Letter sizing variant — opt in by adding data-print-size="letter" on body */
@media print {
  body[data-print-size="letter"] {
    /* Browsers respect the latest @page in cascade; declare a named page. */
    page: letter;
  }
  @page letter {
    size: letter;
    margin: 0.75in;
  }
}

/* ==========================================================================
   Item 1127 — per-compound spec sheet (compound.html?slug=…)
   When a user prints a compound page, only show the spec / identifiers /
   mechanism / reconstitution / quick-facts blocks. Hide reviews, related
   compounds, sticky add-bar, FAB, mini-cart, cookie banner, etc.
========================================================================== */
@media print {
  body[data-page="compound"] .sticky-bar,
  body[data-page="compound"] #sticky-bar,
  body[data-page="compound"] .togo-feedback-fab,
  body[data-page="compound"] #togo-feedback-fab,
  body[data-page="compound"] .togo-mini-cart,
  body[data-page="compound"] .togo-cart-drawer,
  body[data-page="compound"] .togo-search,
  body[data-page="compound"] .togo-search-trigger,
  body[data-page="compound"] .compound-reviews,
  body[data-page="compound"] .compound-related,
  body[data-page="compound"] .compound-cross-sell,
  body[data-page="compound"] .compound-faq,
  body[data-page="compound"] .compound-tabs__nav,
  body[data-page="compound"] .compound-tab[hidden],
  body[data-page="compound"] .compound-hero__media,
  body[data-page="compound"] .compound-add-row,
  body[data-page="compound"] .product-actions,
  body[data-page="compound"] .qty-stepper,
  body[data-page="compound"] .variant-picker,
  body[data-page="compound"] .reviews,
  body[data-page="compound"] .reviews-section,
  body[data-page="compound"] .togo-reviews,
  body[data-page="compound"] .togo-coa-cta,
  body[data-page="compound"] .compound-buy-box,
  body[data-page="compound"] .togo-recently-viewed {
    display: none !important;
  }
  /* Reveal every tab pane in print so all spec blocks are visible */
  body[data-page="compound"] .compound-tab,
  body[data-page="compound"] [role="tabpanel"] {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  /* Spec table: tighter whitespace */
  body[data-page="compound"] .compound-spec-table th,
  body[data-page="compound"] .compound-spec-table td {
    padding: 0.32em 0.5em !important;
  }
  /* Quick-facts strip: render as a 2-column block instead of a horizontal row */
  body[data-page="compound"] .compound-quickfacts,
  body[data-page="compound"] .quick-facts {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.4cm !important;
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   Item 1128 — stack overview pages (fat-loss-stack, recovery-stack, etc.)
   Print only the compound list + tier prices + research-frame summary.
   Hide the marketing/CTA blocks, FAQ-shouts, and stickies.
========================================================================== */
@media print {
  body[data-page="fat-loss-stack"] .stack-cta,
  body[data-page="fat-loss-stack"] .stack-faq,
  body[data-page="fat-loss-stack"] .stack-testimonials,
  body[data-page="fat-loss-stack"] .stack-banner,
  body[data-page="recovery-stack"] .stack-cta,
  body[data-page="recovery-stack"] .stack-faq,
  body[data-page="performance-stack"] .stack-cta,
  body[data-page="performance-stack"] .stack-faq,
  body[data-page="cognitive-stack"] .stack-cta,
  body[data-page="cognitive-stack"] .stack-faq,
  body[data-page="longevity-stack"] .stack-cta,
  body[data-page="longevity-stack"] .stack-faq,
  body[data-page="glow-stack"] .stack-cta,
  body[data-page="glow-stack"] .stack-faq,
  body[data-page$="-stack"] .togo-feedback-fab,
  body[data-page$="-stack"] .sticky-bar,
  body[data-page$="-stack"] .togo-mini-cart,
  body[data-page$="-stack"] .togo-recently-viewed,
  body[data-page$="-stack"] .togo-cross-stack,
  body[data-page$="-stack"] .stack-related,
  body[data-page$="-stack"] .stack-banner,
  body[data-page$="-stack"] video,
  body[data-page$="-stack"] iframe {
    display: none !important;
  }
  /* Tier cards stack vertically in print so each tier is fully visible */
  body[data-page$="-stack"] .tier-grid,
  body[data-page$="-stack"] .stack-tiers,
  body[data-page$="-stack"] .stack-cards {
    display: block !important;
  }
  body[data-page$="-stack"] .tier-card,
  body[data-page$="-stack"] .stack-card {
    width: 100% !important;
    margin: 0 0 0.4cm !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

/* ==========================================================================
   Item 1130 — individual blog articles. The togo-blog-print.css file (if
   loaded) handles fine-grained typography. These rules are the safety net:
   they apply on every blog page even if togo-blog-print.css is missing.
========================================================================== */
@media print {
  body[data-page="blog"] .blog-related,
  body[data-page="blog"] .blog-cross-links,
  body[data-page="blog"] .blog-newsletter-card,
  body[data-page="blog"] .blog-share,
  body[data-page="blog"] .blog-cta,
  body[data-page^="blog-"] .blog-related,
  body[data-page^="blog-"] .blog-cross-links,
  body[data-page^="blog-"] .blog-newsletter-card,
  body[data-page^="blog-"] .blog-share,
  body[data-page^="blog-"] .blog-cta,
  body[data-page^="blog-"] .togo-feedback-fab,
  body[data-page^="blog-"] .togo-toc-floating,
  body[data-page^="blog-"] .togo-reading-progress,
  body[data-page^="blog-"] .blog-card,
  body[data-page^="blog-"] .togo-newsletter,
  body[data-page^="blog-"] .togo-recently-viewed {
    display: none !important;
  }
  body[data-page^="blog-"] .blog-article,
  body[data-page="blog"] .blog-article {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* ==========================================================================
   Items 1141-1145 — lab-card-* pages. Pages opt-in by setting
   data-page="lab-card-*"; togo-lab-cards.css then handles A4 sheet sizing.
   Below: hide the site shell and print-button on these pages.
========================================================================== */
@media print {
  body[data-page^="lab-card-"] .site-header,
  body[data-page^="lab-card-"] .site-footer,
  body[data-page^="lab-card-"] .togo-trust-pills,
  body[data-page^="lab-card-"] .trust-bar,
  body[data-page^="lab-card-"] .breadcrumb,
  body[data-page^="lab-card-"] .legal-banner,
  body[data-page^="lab-card-"] .togo-feedback-fab,
  body[data-page^="lab-card-"] .togo-back-to-top,
  body[data-page^="lab-card-"] .togo-pwa-prompt {
    display: none !important;
  }
  /* Suppress the site-wide watermark on lab cards — they have their own footer */
  body[data-page^="lab-card-"]::after {
    content: "" !important;
    display: none !important;
  }
}