/* print.css — turns a listing into an A4 document.

   ⚠⚠ THIS FILE IS LOADED ON THE LISTING PAGE FOR SCREEN TOO (header.php:125).
   Everything that styles the document therefore lives inside `@media print`. The ONLY
   top-level rules allowed here are the ones that must also apply on screen — and there is
   exactly one: hiding the print-only DOM. A styling rule placed at top level would land on the
   live page; that is precisely how the ad slots once vanished in the browser.

   HOW IT WORKS (rebuilt DAY 30).
   Until now this file re-ordered the SCREEN markup into a document. That kept the text
   selectable and the photos full-resolution — both worth keeping, and both still true — but a
   document's structure is genuinely different from the page's, and reaching the layout the
   owner asked for by overriding the app's grid was going to be a pile of fragile rules on a
   design that must not change.

   So the listing page now emits a dedicated print-only document (`.cp-doc`, built in
   plugins/ads/index.php from the SAME resolved values the page shows). In print the app is
   hidden and the document is shown. The screen design is untouched, and no PDF library is
   involved: the browser exports real DOM, so text stays searchable and photos stay sharp.

   WHY NOT A PDF LIBRARY: mPDF/TCPDF is ~10 MB plus a build step to reproduce something the
   browser already does, and it would rasterise both the text and the photos. */

/* ---- THE ONLY TOP-LEVEL RULE SET: hide every print-only block on screen ----
   ⚠ REGRESSION FIXED HERE. The previous version of this file carried
   `.cp-printhead, .cp-printfoot, .cp-printshots { display:none }` at top level; rewriting the
   file dropped it, and because those three blocks are emitted unconditionally by the listing
   page they became VISIBLE in the browser — measured on the live page: the running header
   1170x24, the running footer 1170x23, and `.cp-printshots` at **762x3427**, i.e. a full-height
   column of every photo dumped into the middle of the listing. Nothing here may be forgotten.
   ⚠ Those three blocks are no longer emitted at all (the document carries its own masthead, photo
   strip and per-page footer), but the selectors STAY as a guard: they are cheap, and a print-only
   element that no stylesheet hides is the one mistake this file has already made once. */
.cp-doc, .cp-printhead, .cp-printfoot, .cp-printshots { display: none; }

/* ⚠⚠ EVERY COLOUR AND BACKGROUND BELOW CARRIES `!important`, AND IT IS NOT DECORATION.
   `bootstrap.min.css` (loaded first, header.php:95) ships its own print reset:

       @media print { *, :after, :before { color: #000 !important;
                                          background: 0 0 !important;
                                          text-shadow: none !important;
                                          box-shadow: none !important } }

   It matches every element with `!important`, so a plain `color:#1F3D30` in this file LOSES to it.
   The first real PDF export proved it: the wordmark, the condition badge and every muted label
   printed pure #000000, and no pill, badge or bar had a background. print.css is loaded last, so
   an `!important` here does win — but only where it is written.
   ⚠ It also appends " (href)" after every `<a>` in print (`a[href]:after`), which is one more
   reason the document is built from spans.
   ⚠⚠ AND: computed COLOUR cannot be measured through `Emulation.setEmulatedMedia({media:'print'})`
   in this environment — an element with an inline `style="color:#E08A2C"` reports rgb(0,0,0) there.
   Geometry measures fine; colour has to be checked by exporting a real PDF and sampling pixels.

   ⚠ SECOND RULE OF THIS DOCUMENT: it must stay legible with NO backgrounds at all. Chrome's
   "Save as PDF" ships with "Background graphics" UNCHECKED, and that switch beats any CSS — so
   white-on-dark text is invisible for the default user. Every backgrounded element here is
   therefore ALSO given a border and dark text; nothing depends on a background to be read. */

@media print {

  @page { size: A4 portrait; margin: 12mm 11mm 16mm; }

  html, body { background: #fff !important; }
  body {
    font: 400 9.5pt/1.45 Inter, system-ui, sans-serif !important;
    color: #15211C !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  /* ---- hide the application ------------------------------------------------
     One rule instead of the old long blacklist: the document carries everything,
     so nothing from the app is needed. */
  .cp-chrome, .cp-foot, footer, .breadcrumb, .crumb, .cp-vip, .mp-tabbar,
  .m-drawer, .m-sheet, .mp-sheet-backdrop, .lb, .lightbox, .vip-actionbar,
  .cp-band, .cp-theme-toggle, .skip-link, .cp-navctx, .cp-backbtn,
  /* ⚠ THE COOKIE BANNER. It is `position:fixed` with INLINE styles (functions.php,
     cp_cookie_banner) and is emitted on every page until `cp_consent` is set — so any visitor who
     has not answered it yet printed the banner ON TOP of the document. Measured in the first real
     export: its text and both buttons landed across the description on page 1 and again low on
     page 2. A stylesheet `display:none!important` beats a non-important inline `display:flex`.
     ⚠ It must stay INSIDE `@media print` — hiding it at top level would remove the consent
     banner from the live page, which is a GDPR requirement, not a style choice. */
  #cpCookie {
    display: none !important;
  }
  .container, .container.mp-page, .row, [class*="col-md"] {
    width: auto !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important; float: none !important;
    display: block !important; box-shadow: none !important;
  }

  .cp-doc { display: block !important; }
  /* the inline icons size with their text; :not() keeps this off the QR, which has its own
     size and was being shrunk to 13px by this rule (same specificity, later in the file) */
  .cp-doc svg:not(.d-qr) { width: 1em; height: 1em; flex: 0 0 auto; }
  /* ⚠⚠ THE COLOUR OF AN ICON MUST BE SET ON THE <svg> ITSELF, never on its container.
     Every glyph here is `<svg stroke="currentColor">`, and `currentColor` is resolved against the
     svg element — whose own `color` bootstrap's print reset pins to #000 with `!important`. A rule
     on the PARENT therefore does nothing: measured in a real export, 14 strokes on page 1 and 33 on
     page 2 printed pure black while the two icons that happened to carry their colour on the svg
     (`.d-loc svg`, `.d-brand svg`) came out right. Fern is the document's icon colour; the wordmark
     is the one exception, and it needs the extra `.cp-doc` to outrank this selector. */
  .cp-doc svg:not(.d-qr) { color: #4E8163 !important; }
  .cp-doc .d-brand svg { color: #1F3D30 !important; }
  /* ⚠⚠ AND THE PATHS INSIDE IT. `currentcolor` is resolved against the element that USES it, not
     against the one that declared the inherited `stroke` — so `*{color:#000!important}` reaches the
     <path> and repaints it black even when the <svg> above it is fern. Colouring the svg alone left
     all 47 strokes black; the paths have to inherit. */
  .cp-doc svg * { color: inherit !important; }

  /* ---- one sheet = one section -------------------------------------------------
     ⚠⚠ A PLAIN BLOCK — deliberately NOT `display:flex` with `min-height:267mm`.
     That was tried first, because a flex column can pin its footer with `margin-top:auto`. Measured
     in a real export: the moment a section is one line taller than the sheet, Chrome fragments the
     flex container badly — the description's last two lines and the footer moved to a second sheet
     and left a **48mm hole** at the bottom of page 1. A block fragments predictably, so the page
     count follows the content instead of the layout mode. */
  .d-page + .d-page { break-before: page; page-break-before: always; }

  /* ---- masthead ---------------------------------------------------------- */
  .d-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8mm;
    padding-bottom: 2.5mm; margin-bottom: 5mm; border-bottom: 0.5mm solid #1F3D30;
  }
  .d-brand {
    display: inline-flex; align-items: center; gap: 2mm;
    font: 800 14pt/1 Archivo, system-ui, sans-serif; letter-spacing: -.01em;
    color: #1F3D30 !important;
  }
  .d-brand svg { width: 5.5mm; height: 5.5mm; }
  /* ⚠ the whole wordmark is ONE flex item (`.d-wm`) — see the PHP: with the brand text as a bare
     text node, `.d-brand`'s 2mm flex gap fell between "CamperBay" and ".nl". */
  .d-wm { white-space: nowrap; color: #1F3D30 !important; }
  .d-wm b { color: #E08A2C !important; font-weight: 800; }
  .d-tag { font-size: 7.5pt; color: #5C6A62 !important; }

  /* ---- title block ------------------------------------------------------- */
  /* ⚠ border AND background: with "Background graphics" off the pill keeps its shape and its
     pine text, so the badge still reads as a badge. */
  .d-cond {
    display: inline-block; padding: 0.8mm 2.4mm; margin: 0 0 2mm;
    border-radius: 1.2mm; font: 700 7pt/1 Inter, sans-serif;
    letter-spacing: .08em; text-transform: uppercase;
    background: #E2E7E1 !important; color: #1F3D30 !important;
    border: 0.25mm solid #CBD4CC;
  }
  .d-cond.new { background: #DCEEE2 !important; color: #1F3D30 !important; }
  .d-cond.dmg { background: #F6E0DA !important; color: #7A3527 !important; border-color: #E0BDB3; }
  .d-title {
    font: 800 19pt/1.15 Archivo, system-ui, sans-serif !important;
    letter-spacing: -.015em; color: #15211C !important; margin: 0 0 2.5mm !important;
  }
  .d-priceline { display: flex; align-items: baseline; gap: 3mm; flex-wrap: wrap; margin: 0 0 3mm; }
  .d-price {
    font: 700 17pt/1 "JetBrains Mono", ui-monospace, monospace; color: #1F3D30 !important;
  }
  .d-psub { font-size: 8.5pt; color: #5C6A62 !important; }
  .d-loc {
    margin-left: auto; display: inline-flex; align-items: center; gap: 1.5mm;
    font-size: 8.5pt; color: #5C6A62 !important;
  }

  /* ---- cover photo -------------------------------------------------------- */
  /* ⚠ 74mm, not the 82mm this started at: page 1 measured 99.9% full in the first real export, so
     adding a footer to it cost a whole extra sheet. The cover pays for the footer. */
  .d-cover {
    display: block; width: 100%; height: 70mm; object-fit: cover;
    border-radius: 2.5mm; border: 0.25mm solid #CBD4CC;
    margin: 0 0 3mm; break-inside: avoid; page-break-inside: avoid;
  }

  /* ---- seller strip -------------------------------------------------------- */
  .d-seller {
    display: flex; align-items: center; gap: 3mm;
    border: 0.3mm solid #CBD4CC; border-radius: 2.5mm; padding: 3mm;
    margin: 0 0 4mm; break-inside: avoid; page-break-inside: avoid;
  }
  /* ⚠ the avatar was WHITE initials on a solid pine circle — invisible with backgrounds off, which
     is the default. Pine initials in a ringed light circle read either way. A seller WITH a photo
     is unaffected: an <img> is content, not a background. */
  .d-av {
    flex: 0 0 auto; width: 11mm; height: 11mm; border-radius: 50%; overflow: hidden;
    background: #E2E7E1 !important; color: #1F3D30 !important; border: 0.3mm solid #1F3D30;
    display: flex; align-items: center; justify-content: center;
    font: 700 9pt/1 Archivo, sans-serif;
  }
  .d-av img { width: 100%; height: 100%; object-fit: cover; }
  .d-sn { display: flex; flex-direction: column; gap: 1mm; font: 700 11pt/1.2 Archivo, sans-serif;
          color: #15211C !important; }
  .d-sn b {
    display: inline-block; margin-left: 1.5mm; padding: 0.6mm 2mm; border-radius: 1mm;
    background: #E2E7E1 !important; color: #1F3D30 !important; border: 0.2mm solid #CBD4CC;
    font: 700 6.5pt/1 Inter, sans-serif;
    letter-spacing: .07em; text-transform: uppercase; vertical-align: 0.7mm;
  }
  .d-sn i {
    display: inline-flex; align-items: center; gap: 1.2mm;
    font: 400 8.5pt/1.2 Inter, sans-serif; font-style: normal; color: #5C6A62 !important;
  }
  .d-sstats { margin-left: auto; display: flex; gap: 7mm; text-align: center; }
  .d-sstats > span { display: block; }
  .d-sstats b { display: block; font: 700 11pt/1.1 Archivo, sans-serif; color: #15211C !important; }
  .d-sstats i {
    display: block; font: 400 7pt/1.2 Inter, sans-serif; font-style: normal; color: #5C6A62 !important;
  }

  /* ---- key-fact tiles ------------------------------------------------------ */
  .d-tiles {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm;
    margin: 0 0 3mm; break-inside: avoid; page-break-inside: avoid;
  }
  .d-tile {
    border: 0.3mm solid #CBD4CC; border-radius: 2.5mm; padding: 3mm;
    display: flex; flex-direction: column; gap: 0.8mm;
  }
  .d-ti { color: #4E8163 !important; }   /* the tile's icon slot; the svg is coloured above */
  .d-ti svg { width: 4.5mm; height: 4.5mm; }
  .d-tk { font: 400 7.5pt/1.2 Inter, sans-serif; color: #5C6A62 !important; }
  .d-tv { font: 700 10.5pt/1.2 Archivo, sans-serif; color: #15211C !important; }

  /* ---- description + photo strip ------------------------------------------- */
  /* ⚠ NOT `break-inside: avoid` any more. A description of a few hundred words made the whole box
     un-fittable, and an unbreakable box that does not fit is MOVED to the next sheet — page 1 would
     have ended after the tiles with a hand's width of white space. It breaks like normal prose now
     (`orphans`/`widows` keep stray lines away) and only the photo strip stays atomic. */
  .d-descbox {
    border: 0.3mm solid #CBD4CC; border-radius: 2.5mm; padding: 3.5mm;
  }
  .d-descbox h2 {
    font: 700 10.5pt/1.2 Archivo, sans-serif !important; color: #15211C !important;
    margin: 0 0 1.5mm !important; break-after: avoid; page-break-after: avoid;
  }
  .d-descbox p {
    margin: 0 0 3mm !important; font-size: 9pt; color: #15211C !important; orphans: 3; widows: 3;
  }
  .d-strip {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 2mm;
    break-inside: avoid; page-break-inside: avoid;
  }
  .d-sh { position: relative; display: block; border-radius: 1.8mm; overflow: hidden; }
  .d-sh img {
    display: block; width: 100%; height: 22mm; object-fit: cover;
    border: 0.25mm solid #CBD4CC; border-radius: 1.8mm;
  }
  /* the "+N photos" caption — see the PHP: it replaced a white-on-translucent overlay that the
     default "no background graphics" print silently erased. */
  .d-more {
    margin: 1.6mm 0 0 !important; text-align: right;
    font: 600 7.5pt/1.2 Inter, sans-serif; color: #5C6A62 !important;
  }

  /* ---- page 2 --------------------------------------------------------------- */
  .d-p2 { padding-top: 1mm; }   /* the page break itself comes from `.d-page + .d-page` above */
  .d-h {
    font: 700 12pt/1.2 Archivo, system-ui, sans-serif !important; color: #15211C !important;
    margin: 0 0 3mm !important; break-after: avoid; page-break-after: avoid;
  }

  .d-specs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 8mm; margin: 0 0 6mm;
  }
  .d-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 4mm;
    padding: 1.6mm 0; border-bottom: 0.2mm solid #E2E7E1;
    break-inside: avoid; page-break-inside: avoid;
  }
  .d-k { display: inline-flex; align-items: center; gap: 1.5mm; font-size: 9pt; color: #5C6A62 !important; }
  .d-ki { color: #4E8163 !important; }
  .d-ki svg { width: 3.6mm; height: 3.6mm; }
  .d-v { font-size: 9pt; font-weight: 600; color: #15211C !important; text-align: right; }
  .d-v.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 8.5pt; }

  .d-eq { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4mm; margin: 0 0 6mm; }
  .d-eqg { break-inside: avoid; page-break-inside: avoid; }
  .d-eqg h3 {
    font: 700 8.5pt/1.2 Archivo, sans-serif !important; color: #1F3D30 !important;
    margin: 0 0 1.8mm !important; padding-bottom: 1.2mm; border-bottom: 0.25mm solid #CBD4CC;
  }
  .d-eqg ul { list-style: none; margin: 0; padding: 0; }
  .d-eqg li {
    display: flex; align-items: flex-start; gap: 1.5mm;
    font-size: 8.5pt; padding: 0.7mm 0; break-inside: avoid; color: #15211C !important;
  }
  .d-eqg li svg { width: 3.2mm; height: 3.2mm; margin-top: 0.4mm; }

  /* ---- seller card + QR ------------------------------------------------------ */
  .d-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; }
  .d-card {
    border: 0.3mm solid #CBD4CC; border-radius: 2.5mm; padding: 3.5mm;
    break-inside: avoid; page-break-inside: avoid;
  }
  .d-card h3 {
    display: flex; align-items: center; gap: 1.8mm;
    font: 700 10pt/1.2 Archivo, sans-serif !important; color: #15211C !important;
    margin: 0 0 2.5mm !important;
  }
  .d-card h3 svg { width: 4mm; height: 4mm; }
  .d-card .d-seller--card { border: 0; padding: 0; margin: 0 0 2.5mm; }
  .d-note { margin: 0 !important; font-size: 8pt; color: #5C6A62 !important; }
  .d-card--qr { display: flex; flex-direction: column; align-items: flex-start; }
  .d-qr { width: 30mm; height: 30mm; margin: 0 0 2mm; }
  .d-url {
    font: 400 7.5pt/1.35 "JetBrains Mono", ui-monospace, monospace;
    color: #5C6A62 !important; word-break: break-all;
  }

  /* ---- per-page footer -----------------------------------------------------------
     ⚠ THIS REPLACED A `position:fixed` RUNNING FOOTER, and the reason is measured, not stylistic.
     In a real export a fixed bar at `bottom:-11mm` is outside the page area, and Chrome wraps it to
     the TOP of the next sheet — it printed across the "Specifications" heading. `bottom:0` does
     repeat on every sheet correctly, but the page's own content then flows underneath it and there
     is no way to reserve the strip per page (CSS `@page` margin boxes are not implemented in
     Chrome). A footer that is the last flex item of its page section, pushed down by
     `margin-top:auto`, is in normal flow: it CANNOT overlap anything, ever.
     ⚠ Dark text on a hairline rule, never white-on-pine — see the note at the top of the file. */
  .d-foot {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 6mm; margin: 4mm 0 0; padding-top: 2.2mm;
    border-top: 0.3mm solid #CBD4CC; font-size: 7.5pt; color: #5C6A62 !important;
    break-inside: avoid; page-break-inside: avoid;
    /* ⚠ measured: with the description 3mm from the sheet's edge the footer was pushed onto a sheet
       of its OWN, one line on an otherwise empty page. `break-before:avoid` keeps it with the tail
       of the block above, so an overflowing page 1 ends with text AND its footer. */
    break-before: avoid; page-break-before: avoid;
  }
  .d-fb {
    font: 800 8.5pt/1 Archivo, system-ui, sans-serif; letter-spacing: -.01em;
    color: #1F3D30 !important; white-space: nowrap;
  }
  .d-fb b { color: #E08A2C !important; font-weight: 800; }
  .d-fu {
    font: 400 7pt/1.3 "JetBrains Mono", ui-monospace, monospace;
    color: #5C6A62 !important; word-break: break-all; text-align: center;
  }
  .d-fd { color: #5C6A62 !important; white-space: nowrap; }

  /* ⚠ NO blanket `* { overflow: visible }` here. It was inherited from the version that printed
     the app's own markup, where it stopped horizontal scrollers from clipping. It is actively
     harmful now: on a replaced element it lets an `object-fit: cover` image paint OUTSIDE its
     content box, so the cover photo spilled over the seller strip below it (measured — the boxes
     did not overlap, the pixels did). The document controls its own clipping instead. */
  .cp-doc .d-cover, .cp-doc .d-sh, .cp-doc .d-av { overflow: hidden; }
  img { break-inside: avoid; page-break-inside: avoid; }
}