/*
 * Print stylesheet for the gift voucher sheet (/gifts).
 *
 * Linked from app/+html.tsx with media="print", so it costs nothing on any
 * other route and never touches the screen render path. The React Native Web
 * tree cannot express @page, page-break or print-only rules, hence a
 * hand-written stylesheet — same approach as public-seo-responsive.css.
 *
 * Targets `data-gift-print="…"` attributes emitted by the `printMarker()`
 * helper in components/gift/GiftBatchList.tsx (react-native-web maps `dataSet`
 * onto data-* attributes, which is the supported way to attach real CSS to an
 * RNW view).
 *
 * DESIGN: each voucher prints as an A6 landscape postcard (148x105mm) on
 * heavier stock, two per A4 portrait page, with cut guides. The wave artwork
 * is an inline SVG in the DOM rather than a CSS background — backgrounds are
 * dropped unless the user happens to enable "Background graphics", and a card
 * whose whole design silently vanishes is worse than no design at all.
 */

@page {
  size: A4 portrait;
  margin: 10mm;
}

@media print {
  /* Everything that is not a voucher is chrome: navigation, buttons, batch
     summaries, the shareable link. Hide rather than restyle. */
  [data-gift-print='hide'] {
    display: none !important;
  }

  html,
  body {
    background: #ffffff !important;
  }

  /* The app renders inside scroll containers with fixed heights; print needs
     the content to flow across pages instead of being clipped to one viewport. */
  html,
  body,
  #root,
  #root > div,
  [data-gift-print='sheet-root'] {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
  }

  [data-gift-print='sheet'] {
    display: grid !important;
    /* One column: an A6 landscape card is 148mm wide, so two side by side
       would not fit A4's 190mm printable width. Two stack vertically instead. */
    grid-template-columns: 148mm;
    justify-content: center;
    gap: 8mm;
  }

  /* ---- the postcard ---------------------------------------------------- */

  [data-gift-print='card'] {
    /* A6 landscape. Fixed physical size, not a screen-derived one, so the
       printed artifact is predictable regardless of viewport. */
    width: 148mm !important;
    height: 105mm !important;
    min-height: 105mm !important;
    box-sizing: border-box !important;

    /* A card must never split across a page break — half a QR is an unusable
       gift, and half a postcard is waste. */
    break-inside: avoid;
    page-break-inside: avoid;

    position: relative !important;
    overflow: hidden !important;
    padding: 9mm 9mm 7mm !important;
    border-radius: 0 !important;

    /* Dashed rule doubles as a cut guide for scissors or a trimmer. */
    border: 0.3mm dashed rgba(18, 60, 66, 0.45) !important;
    background: #f7f9f7 !important;

    /* Without this the tinted stock and the wave print as blank white in
       Chrome, Edge and Safari. Firefox honours it too. */
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;

    /* Override the screen layout: on paper the QR is the focal point, seated
       on the right while the brand block and code run down the left. Every
       child is placed explicitly — auto-placement would reflow unpredictably
       as elements are conditionally hidden. */
    display: grid !important;
    grid-template-columns: 1fr 40mm;
    grid-template-rows: auto auto 1fr auto;
    align-items: start;
    justify-items: start;
    gap: 0 7mm;
  }

  [data-gift-print='wave'] {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34mm !important;
    z-index: 0 !important;
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }

  /* Everything except the wave sits above it. */
  [data-gift-print='brand'],
  [data-gift-print='gift-label'],
  [data-gift-print='message'],
  [data-gift-print='qr'],
  [data-gift-print='code'] {
    position: relative;
    z-index: 1;
  }

  /* Logo + wordmark, top-left. */
  [data-gift-print='brand'] {
    grid-column: 1;
    grid-row: 1;
  }

  [data-gift-print='brand'] img {
    width: 13mm !important;
    height: 13mm !important;
  }

  [data-gift-print='brand'] > div:last-child,
  [data-gift-print='brand'] span {
    font-size: 7mm !important;
    line-height: 8.5mm !important;
  }

  [data-gift-print='gift-label'] {
    grid-column: 1;
    grid-row: 2;
    margin-top: 3mm;
    font-size: 3.4mm !important;
  }

  /* The explanatory paragraph — row 3 is the flexible one, so this is the
     vertical middle of the card. See the QR rule below for why they pair. */
  [data-gift-print='message'] {
    grid-column: 1;
    grid-row: 3;
    align-self: center !important;
    max-width: 72mm !important;
    font-size: 3.6mm !important;
    line-height: 5.2mm !important;
  }

  /* QR and the paragraph share row 3 and are both centred within it, which is
     what makes them line up vertically. Centring each against the whole card
     instead would leave them at subtly different heights, because the brand
     lockup above is taller than the code below. */
  [data-gift-print='qr'] {
    grid-column: 2;
    grid-row: 3;
    /* !important throughout this file is not defensive noise: react-native-web
       injects its own atomic classes at runtime, after this stylesheet is
       linked in <head>, so at equal specificity RNW wins. */
    align-self: center !important;
    justify-self: end !important;
    background: #ffffff !important;
    padding: 3mm !important;
    border-radius: 1.5mm !important;
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }

  [data-gift-print='qr'] svg {
    width: 32mm !important;
    height: 32mm !important;
  }

  [data-gift-print='code'] {
    grid-column: 1;
    grid-row: 4;
    font-size: 5mm !important;
  }

  /* Redemption state is a screen affordance. A printed card is handed over
     before anyone redeems, so the badge would only confuse. */
  [data-gift-print='status'] {
    display: none !important;
  }
}