/* ==========================================================================
   Excellar Global — print stylesheet.

   Printing any page of this site should produce a document a buyer can file:
   A4, sensible margins, a running header and footer on every sheet, no
   navigation furniture, no call-to-action buttons, and no page break through
   the middle of a specification table.

   Structure follows the botanical catalogue PDF. Typeface and palette stay the
   site's own — Manrope/Inter, navy #1B2A4A, gold #C9A24B.

   The site is styled almost entirely with inline `style` attributes, so these
   rules need `!important` to win. Same approach as responsive.css.
   ========================================================================== */

@page {
  size: A4;
  /* Generous top and bottom margins: the running header and footer are pulled
     up into them with a negative offset, so body text never flows under. */
  margin: 24mm 15mm 26mm;
}

@media print {

  /* ---------- base ---------------------------------------------------- */

  html,
  body {
    background: #FFFFFF !important;
    color: #1B2A4A !important;
    /* `clip` here would trap content; printing needs the normal flow. */
    overflow: visible !important;
    max-width: none !important;
  }

  body {
    font-family: Inter, sans-serif !important;
    font-size: 9.5pt !important;
    line-height: 1.5 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Containers lose their screen padding: the @page margin is the margin now. */
  main [style*="max-width: 1200px"],
  main [style*="max-width:1200px"] {
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  main section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 7mm !important;
    padding-bottom: 0 !important;
    background: #FFFFFF !important;
    border: 0 !important;
    margin: 0 !important;
  }

  /* ---------- remove the furniture ------------------------------------ */

  .eg-header,
  .eg-topbar,
  .eg-mainbar,
  .eg-nav,
  .eg-navwrap,
  .eg-burger,
  .eg-menu-toggle,
  .eg-cta,
  footer,
  /* every call to action: a button is useless on paper, and the footer
     carries the address to act on instead */
  a[href="/quote"],
  /* the prev/next pager between SKU pages — navigation, not content */
  .eg-pager,
  form,
  input,
  textarea,
  button,
  script,
  noscript {
    display: none !important;
  }

  /* ---------- running header and footer ------------------------------- */

  /* Printed once each — a masthead at the top, a colophon at the end. See the
     note in build/lib/print-chrome.mjs for why these are not `position: fixed`
     running blocks: in Chrome's paged output a fixed footer landed on top of
     body text. */
  .pr-head,
  .pr-foot {
    display: block !important;
    color: #1B2A4A !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .pr-head {
    display: flex !important;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8mm;
    margin: 0 0 6mm !important;
    padding-bottom: 2.5mm;
    border-bottom: 1pt solid #C9A24B;
  }

  .pr-head-meta {
    text-align: right;
  }

  .pr-url {
    display: block;
    margin-top: 1mm;
    font-family: ui-monospace, monospace !important;
    font-size: 6.8pt !important;
    color: #6B7280 !important;
  }

  .pr-logo {
    width: 30mm !important;
    height: auto !important;
    display: block !important;
  }

  .pr-label {
    font-family: Manrope, sans-serif !important;
    font-size: 8pt !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: right;
  }

  .pr-foot {
    margin: 8mm 0 0 !important;
    padding-top: 3mm;
    border-top: 1pt solid #1B2A4A;
  }

  .pr-disclaimer {
    margin: 0 0 1.5mm !important;
    font-size: 6.6pt !important;
    line-height: 1.4 !important;
    color: #4A5563 !important;
  }

  .pr-meta {
    margin: 0 !important;
    display: flex !important;
    justify-content: space-between;
    gap: 6mm;
    font-family: ui-monospace, monospace !important;
    font-size: 6.4pt !important;
    color: #6B7280 !important;
  }

  /* ---------- typography ---------------------------------------------- */

  h1 {
    font-size: 19pt !important;
    line-height: 1.14 !important;
    margin: 0 0 4mm !important;
    max-width: none !important;
  }

  h2 {
    font-size: 13pt !important;
    line-height: 1.2 !important;
    margin: 0 0 3mm !important;
    max-width: none !important;
  }

  h3 {
    font-size: 10.5pt !important;
    line-height: 1.25 !important;
    margin: 0 0 2mm !important;
  }

  h4 {
    font-size: 9pt !important;
  }

  p,
  li,
  td,
  th {
    font-size: 9.5pt !important;
    line-height: 1.5 !important;
  }

  p {
    max-width: none !important;
    orphans: 3;
    widows: 3;
  }

  /* A heading must not be the last thing on a sheet. */
  h1, h2, h3, h4 {
    break-after: avoid;
    page-break-after: avoid;
    color: #1B2A4A !important;
  }

  /* ---------- keep related things together ---------------------------- */

  tr,
  figure,
  .eg-idx,
  .eg-defrow,
  .alert-box,
  .grade-badge {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* A specification table that spans a break repeats its header. */
  thead {
    display: table-header-group;
  }

  tfoot {
    display: table-footer-group;
  }

  table {
    width: 100% !important;
    border-collapse: collapse !important;
    break-inside: auto;
  }

  /* ---------- grids collapse to a readable column count --------------- */

  /* Three and four across is too tight at A4 width minus margins. */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 5mm !important;
  }

  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 5mm !important;
  }

  /* The asymmetric editorial grids read better stacked on paper. */
  [style*="grid-template-columns: 7fr 5fr"],
  [style*="grid-template-columns: 4fr 8fr"],
  [style*="grid-template-columns: 3fr 9fr"] {
    grid-template-columns: 1fr !important;
    gap: 5mm !important;
  }

  /* A sticky rail has no meaning on paper. */
  .eg-rail {
    position: static !important;
  }

  /* ---------- ink discipline ------------------------------------------ */

  /* Dark bands become ruled white blocks: a full-bleed navy panel is a
     cartridge of ink and reads worse than a rule. */
  [style*="background: #1B2A4A"],
  [style*="background: #24483A"],
  [style*="background:#1B2A4A"],
  [style*="background:#24483A"] {
    background: #FFFFFF !important;
    color: #1B2A4A !important;
    border: 0.6pt solid #1B2A4A !important;
  }

  [style*="background: #1B2A4A"] *,
  [style*="background: #24483A"] * {
    color: #1B2A4A !important;
  }

  /* Pale tints flatten to white; the border carries the structure. */
  [style*="background: #FAFAF8"],
  [style*="background: #F4F8F3"],
  [style*="background: #F0F4EE"],
  [style*="background: #EDF2EC"],
  [style*="background: #FBF6E9"] {
    background: #FFFFFF !important;
  }

  /* The trust strip is a navy band of five items — as a ruled row it survives. */
  .eg-strip-item {
    border-left: 0.5pt solid #DFDCD4 !important;
    padding: 0 4mm !important;
  }

  .eg-strip-item:first-child {
    border-left: 0 !important;
    padding-left: 0 !important;
  }

  /* ---------- images -------------------------------------------------- */

  img {
    max-width: 100% !important;
    break-inside: avoid;
  }

  /* A full-bleed photograph should be a plate, not a whole sheet. */
  figure img {
    max-height: 75mm !important;
    object-fit: cover !important;
  }

  /* Card and index thumbnails stay small and sharp. */
  .eg-idx img {
    width: 18mm !important;
  }

  /* ---------- components ---------------------------------------------- */

  /* The specimen COA panel is the most document-like thing on the site and
     should print as a table, not a tinted card. */
  figure[style*="border"] {
    border: 0.6pt solid #1B2A4A !important;
    background: #FFFFFF !important;
  }

  figcaption {
    background: #FFFFFF !important;
    color: #1B2A4A !important;
    border-bottom: 0.6pt solid #1B2A4A !important;
  }

  /* SKU spec tables: hairlines, not heavy borders. */
  .spec-table td,
  .spec-table th,
  table td,
  table th {
    border-color: #DFDCD4 !important;
    padding: 1.6mm 2.5mm !important;
  }

  .td-key {
    color: #6B7280 !important;
  }

  .td-val {
    font-weight: 600 !important;
  }

  .alert-box {
    border-left: 1.2pt solid #B58F38 !important;
    background: #FFFFFF !important;
    padding: 3mm 4mm !important;
  }

  .grade-badge,
  [class^="badge-"] {
    border: 0.5pt solid #B58F38 !important;
    background: #FFFFFF !important;
    color: #4A3010 !important;
  }

  /* WhatsApp links are kept rather than hidden: on /quote the sidebar link is
     what carries the phone number. They print as plain text, not buttons. */
  a[href^="https://wa.me/"] {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    display: inline !important;
  }

  /* Underlined text links read as noise once there is nothing to click. */
  a {
    color: #1B2A4A !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
  }

  /* Hover-generated classes have no print meaning. */
  [class^="scp"] {
    background: transparent !important;
  }
}

/* NOTE: the screen-side hiding of .pr-head / .pr-foot lives in responsive.css.
   It cannot live here — this file is loaded with media="print", so nothing in
   it applies to screen at all. */
