/* ─────────────────────────────────────────────────────────────────────
   MBK TOOLS — PRINT STYLESHEET
   Shared by catalogue.html and brochure.html. Everything here is scoped
   to @media print — it only takes effect during window.print() / Save
   as PDF, and has zero effect on the on-screen page.
   ───────────────────────────────────────────────────────────────────── */
@media print {

  /* Base page box: zero margin. Cover and back cover live here (no .sp
     class), so their dark background bleeds to the literal page edge
     instead of sitting inside a reserved white margin frame. */
  @page {
    size: A4;
    margin: 0;
  }

  /* Named page for every regular content section (assigned below via
     `.sp { page: content-page }`) — this is where the running header,
     footer and page numbers live. Switching between this and the
     zero-margin base page also forces a page break at the boundary,
     which is why cover → stats and how-to-order → back-cover both
     start clean pages without an explicit break rule. */
  @page content-page {
    size: A4;
    margin: 16mm 14mm 18mm 14mm;
    @top-left {
      content: "MBK Tools [P] Ltd.";
      font-family: 'Geist', sans-serif; font-size: 8pt; font-weight: 600; color: #C8651B;
    }
    @top-right {
      content: string(chapter-title);
      font-family: 'Geist', sans-serif; font-size: 8pt; color: #2C3E6B;
    }
    @bottom-center {
      content: "MBK Tools [P] Ltd.  ·  www.mbktoolsindia.com  ·  +91 93284 00000";
      font-family: 'Inter', sans-serif; font-size: 7.5pt; color: #888888;
    }
    @bottom-right {
      content: "Page " counter(page) " of " counter(pages);
      font-family: 'Inter', sans-serif; font-size: 7.5pt; color: #aaaaaa;
    }
  }
  .sp { page: content-page; }

  /* html carries the white canvas fallback; body must stay transparent —
     body is normal-flow content, so an opaque body background paints in
     the same layer as page content, above the negative-z-index
     watermark, and blanks it out on every page rather than just the
     dark cover/back-cover. */
  html { background: #fff !important; }
  body { background: transparent !important; }

  /* Every major heading updates the running header title (top-right).
     GCPM string-set/content(string(...)) support varies by engine — if
     the box renders empty in a given browser, the static top-left
     company name still carries the folio, so nothing breaks either way. */
  .sec-title, .doc-cat__title, .doc-cover__title { string-set: chapter-title content(); }

  /* ── Hide screen-only chrome ── */
  /* The whole site footer (product/company/resource link directory,
     newsletter, social icons, legal boilerplate) is website navigation,
     not document content — the back-cover section already carries the
     right contact details for a printed piece. */
  .nav, .nav__overlay, .footer,
  .doc-print-cta,
  .bento-cta__marquee-wrap, .bento-cta__divider,
  .doc-toc__row svg {
    display: none !important;
  }

  /* ── Watermark: invisible on screen, shown fixed + faint here.
     Company logo (not the gear mark), sized by width only so its own
     820:420 aspect ratio holds — 0.12 opacity is a deliberate step up
     from the original 0.05, which read as barely-there.
     z-index:-1 (not 0) is load-bearing: a fixed element at z-index:0
     paints ABOVE normal-flow content regardless of DOM order — it only
     looked correctly hidden behind the cover by coincidence, and still
     showed through faintly on the back cover. Negative z-index reliably
     paints behind static content on every page, cover and back cover
     included, since their opaque backgrounds are themselves ordinary
     static content. ── */
  /* left is 43.5%, not 50% — measured empirically. A fixed element here
     renders ~6.5% of the page width right of true center regardless of
     centering technique (confirmed: switching from transform:translateX
     to left:0/right:0/margin-inline:auto made no difference), while
     normal margin:auto content centers correctly — this is a Chromium
     print quirk specific to `position:fixed` across the two differently
     -margined @page types in this file, not a logic error in either
     centering method. Direct correction, verified by pixel-measuring
     the rendered PDF output rather than assumed. */
  .doc-watermark {
    display: block !important;
    position: fixed;
    top: 50%;
    left: 43.5%;
    width: 58vw;
    transform: translate(-50%, -50%);
    opacity: 0.12;
    z-index: -1;
    pointer-events: none;
  }
  .doc-watermark img {
    display: block;
    width: 100%;
    height: auto;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* ── Nothing should be scroll-gated when printing a page the user
     never fully scrolled through ── */
  [data-reveal] { opacity: 1 !important; transform: none !important; }

  /* ── Dark, full-bleed pages: force the background to actually print ── */
  .doc-cover, .doc-backcover {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    background: #0E1426 !important;
    min-height: 100vh;
  }
  .doc-orange-strip {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    background: #C8651B !important;
  }
  .stats-bar {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  img {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    max-width: 100%;
  }
  /* These already carry an explicit fixed height + object-fit:cover for
     their banner/photo-fill role — the generic max-width rule above must
     not collapse them back to auto height. */
  .doc-cat__photo, .doc-cover__photo, .doc-chapter-banner img {
    width: 100%;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* ── Page breaks ──
     Modern + legacy properties both set, since print/PDF engines vary
     in which one they actually honour. */
  #stats, #brands, #toc, #about, #global, #supply, #catalogue, #other-products,
  #inside-back-cover, #how-to-order, .doc-backcover,
  .doc-topic-page, .doc-supply-grid {
    break-before: page;
    page-break-before: always;
  }

  /* Every card/tile/tag-group that shouldn't be allowed to open on one
     page and continue on the next. .bento-card (the "What We Supply"
     tiles) was the actual source of the mid-card splits and the
     misaligned 01–05 watermark digits — its big number is an
     absolutely-positioned child, so keeping the whole card intact is
     what keeps the number correctly pinned to its own card. */
  .pcard, .elec-box, .doc-cat, .val-card, .tl-new__item, .av-item, .doc-contact-row,
  .doc-timeline__item, .doc-value, .doc-country, .doc-region,
  .bento-card, .doc-chapter-banner, .doc-supply-grid {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* ── Orphan/widow control — no single dangling line left alone at a
     page boundary. ── */
  p, li, blockquote, .doc-cat__desc, .bento-card__desc, .doc-value__desc,
  .doc-timeline__item p, .sec-sub {
    orphans: 3;
    widows: 3;
  }

  /* ── A4-width grid overrides (~182mm usable — screen breakpoints don't apply) ── */
  .prod-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .elec-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .doc-brands__grid { grid-template-columns: repeat(3, 1fr) !important; }
  .doc-contact-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .doc-other-grid { grid-template-columns: repeat(3, 1fr) !important; }
  /* 3 narrow columns made card 01's long description wrap onto ~9 lines,
     making the whole 5-card grid taller than one page even in isolation —
     break-inside:avoid on the grid container isn't reliably honoured by
     Chromium's print engine for CSS Grid, so it kept splitting 3+2
     regardless. 2 wider columns cuts the wrap count enough for all 5 to
     fit together; break-before:page above gives it a full page to do so. */
  .doc-supply-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .doc-timeline { grid-template-columns: repeat(3, 1fr) !important; }
  .doc-country-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .doc-region-grid { grid-template-columns: repeat(4, 1fr) !important; }

  a { color: inherit; text-decoration: none; }

  /* ── Trim the screen-scroll breathing room that's dead weight once a
     section is forced to the top of its own printed page. .sp's 100px
     top padding (sized for comfortable scrolling) plus the chapter
     banner's own top margin was stacking into ~50mm of blank space
     above "About Us" / "Global Presence" / "What We Supply". ── */
  .sp { padding-top: 8px; padding-bottom: 18px; }
  .doc-chapter-banner { margin-top: 0; }
}