/*
 * K23 — the dealer one-pager: what the public site does when somebody presses
 * Print.
 *
 * Loaded with media="print", so it is fetched at low priority, blocks no
 * render, and costs nothing against the K09 payload budget the site is held to.
 *
 * WHY IT EXISTS SEPARATELY FROM THE PDF. K17 already generates a spec sheet at
 * build time from the same catalogue record the page renders from, and that
 * remains the artefact to email. This is the other path: a field rep with the
 * page open and a printer, or a browser's Save as PDF. Measured on
 * /products/phytospex at A4 before any of this existed:
 *
 *   • FOUR sheets, of which sheet 4 held exactly one line — the copyright
 *   • the spec table split across sheets 2 and 3, so sheet 3 opened with
 *     "Power  18650 Li-ion" and never repeated the "Electronics" heading it
 *     belonged under
 *   • 786px of the 3,112px flow — a quarter of it — was header, CTA band and
 *     footer; the footer alone printed three columns of navigation links
 *   • "Request a demo" and "Download spec sheet (PDF)" printed as buttons: a
 *     control on paper, with no address next to either
 *
 * There was no @media print rule anywhere on the site. shared/ui/print.css is
 * the STAFF PORTALS' sheet (R11) and targets the `k-` component kit, none of
 * which exists here, so this is its own file rather than a shared one.
 *
 * WHY !important. Astro scopes a component's styles by adding a
 * `[data-astro-cid-…]` attribute to its selectors, which makes
 * `.cta-band[data-astro-cid-x]` a 0,2,0 against this file's 0,1,0 — the band
 * printed in full on every sheet without it. Same reasoning as the portals'
 * sheet, and it is confined to the block that removes chrome.
 */

@page {
  size: A4;
  margin: 14mm;
}

@media print {
  /* A reader with the OS in dark mode must not be handed white-on-black, or —
     with backgrounds off — white on white. */
  :root {
    color-scheme: light;
  }

  html,
  body {
    background: #fff;
    color: #000;
    font-size: 10pt;
    line-height: 1.4;
  }

  /* ── chrome: navigation and calls to action, not product ────────────────
     Hidden by where it lives, so a new button inside the CTA band does not have
     to be listed here to be excluded. */
  .site-header,
  .site-footer,
  .cta-band,
  .skip-link,
  .lang,
  .btn,
  .product__crumb,
  nav {
    display: none !important;
  }

  /* ── give the content the sheet ─────────────────────────────────────────── */
  .wrap {
    max-width: none;
    width: auto;
    margin: 0;
    padding-inline: 0;
  }

  .section {
    padding-block: 0;
  }

  /* The two-column hero is a wide-screen device. On A4 the figure beside the
     title squeezed the specification off the first sheet. */
  .product__head {
    display: block !important;
    margin-block: 0 6mm;
  }

  .product__status {
    margin-block: 1.5mm 0 !important;
  }

  /* The spectrum figure is the product's one explanatory graphic and earns its
     place on a sheet a dealer hands over — but not a third of the page.
     Constrained by WIDTH, not height: the SVG is `width: 100%; height: auto`
     with the default preserveAspectRatio, so capping its height letterboxes it —
     it kept the full column width, drew the curve at a fraction of the size in
     the middle, and printed as a large empty box with a small chart in it.
     Capping the width scales the whole drawing instead.
     The border and padding go with it: a card outline is a screen device for
     lifting a surface off the page, and here the page is the page. */
  .spectrum {
    /* !important for the same reason the chrome block above uses it: this is
       another Astro-scoped component, so its own rules are `.spectrum[data-astro-cid-…]`
       at 0,2,0 and a bare class here cannot reach them. Without it the figure
       printed inside its full screen card — border, radius and 1rem of padding. */
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    max-width: 52mm !important;
    margin: 0 0 2mm !important;
  }

  /* Prose is set to a reading measure on screen. Paper already has a margin. */
  p,
  li,
  .product__body,
  .product__notice,
  .section__head {
    max-width: none;
  }

  /* ── specification: the reason the sheet is being printed ────────────────
     Two columns on A4 rather than the screen's one-below-56rem stack, which is
     what pushed the table onto a third sheet. Each group is kept whole: a
     "Power / Connectivity" pair stranded under no heading is worse than a
     slightly shorter page. */
  .grid--3 {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 3mm 5mm;
  }

  .grid--2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 3mm 5mm;
  }

  .product__benefits {
    columns: 2;
    column-gap: 6mm;
  }
  .product__benefits li {
    break-inside: avoid;
  }

  .card {
    background: none;
    border: 0;
    border-top: 0.5pt solid #999;
    border-radius: 0;
    box-shadow: none;
    padding: 1.5mm 0 0;
    break-inside: avoid;
  }

  .spec {
    font-size: 8.5pt;
    gap: 0.6mm 3mm;
  }

  /* ── ink ─────────────────────────────────────────────────────────────────
     Fills and pills are screen devices for separating surfaces; the page edge
     already does that. The notice keeps a rule because what it says — that this
     product is not yet on general sale — is the one thing on the sheet a dealer
     must not skim past. */
  .notice {
    background: none;
    border: 0;
    border-left: 2pt solid #000;
    border-radius: 0;
    padding: 0 0 0 3mm;
    margin-bottom: 5mm;
  }

  .tag {
    border: 0;
    background: none;
    padding: 0;
  }

  .card,
  .section--alt {
    background: none;
  }

  /* ── type ─────────────────────────────────────────────────────────────── */
  h1 {
    font-size: 17pt;
    margin: 0 0 1.5mm;
  }
  h2 {
    font-size: 11.5pt;
    margin: 0 0 1.5mm;
  }
  h3 {
    font-size: 9.5pt;
    margin-bottom: 1mm;
  }
  .lede {
    font-size: 11pt;
    opacity: 1;
  }

  /* A heading alone at the foot of a sheet is the commonest print defect after
     a table losing its header. */
  h1,
  h2,
  h3 {
    break-after: avoid;
  }

  ul,
  ol {
    margin-bottom: 3mm;
  }
  li {
    margin-bottom: 0.6mm;
  }

  p {
    margin-bottom: 2mm;
  }

  /* Measured: of the 1,544px this page occupied on paper, 384px was vertical
     rhythm — margins sized for a scrolling screen, where whitespace is free and
     a reader is not paying for a second sheet. Squeezing it is what buys the
     specification its place beside the description rather than after it, and it
     costs no type size and no words. */
  .product__benefits,
  .product__body,
  .product__notice {
    margin-bottom: 3mm;
  }

  .product__head {
    margin-block: 0 3mm !important;
  }

  .product__specsHead {
    display: block;
  }

  /* ── the handover block ──────────────────────────────────────────────────
     Hidden on screen (base.css), shown here. `body` is on the selector so this
     wins on specificity rather than on which stylesheet the bundler happened to
     emit first.

     It is the whole "offline-usable" half of this phase: paper carries no
     links, so an address a reader can type is the only route back to a current
     specification. Everything in it is rendered by Base.astro from the same
     canonical URL the page already computes for its <link rel="canonical">, so
     it cannot drift from the page it is printed on. */
  body .print-only {
    display: block;
  }

  .print-contact {
    border-top: 0.5pt solid #000;
    margin-top: 4mm;
    padding-top: 1.5mm;
    font-size: 8pt;
    line-height: 1.3;
    break-inside: avoid;
  }

  .print-contact p {
    margin: 0 0 0.5mm;
  }

  .print-contact__name {
    font-weight: 500;
  }
}