/* First Nations Employment — the printed job record ("proof of advertisement") for a job posting (body.page-job),
   loaded with media="print" from views/public/job-fn.ejs. Everything is wrapped in @media print so it can never leak
   into the screen render.

   Posting spec 2026-10-01 §7 + brief 2026-10-16 §4: printing a posting is NOT "the web page on paper". It is the
   sheet an employer hands to ESDC for a Labour Market Impact Assessment file, carrying exactly the field set Canada
   Careers prints (see the comment above .print-doc in job-fn.ejs) — plain, legible, no site chrome, no navigation,
   no map tiles, no share row, no apply buttons, one Letter page for a typical posting. So the whole screen layout
   is hidden and only `.print-doc` prints; change the screen page freely, the document is its own markup.

   Look (deliberately unlike Canada Careers, Youth Future Jobs and Newcomer): First Nations Employment's own brand —
   the logo lockup over a Land Forest "horizon" rule with the Opportunity Copper sun, Inter in Forest green, a
   ruled record strip, then a two-column sheet: a "Posting details" ledger on the left (square, Warm Sand rules)
   and the numbered text sections (01 Job description …) on the right. Square corners throughout, as on screen.

   Tokens: --fn-ink (Land Forest text), --fn-ink-2 (secondary), --fn-accent / --fn-accent-text (copper),
   --fn-sand (Warm Sand), --fn-line-strong (rules). Fallbacks keep the sheet right if fn-tokens.css is missing.

   views/public/job.ejs (the old, unrendered job view) also links this file. Every rule that hides the screen page
   is guarded with :has(.print-doc), so a page without the document prints as itself, never as a blank sheet. */

@media print {
  @page { size: Letter; margin: 11mm 12mm 12mm; }
  html, body { background: #fff !important; color: var(--fn-ink, #34453F) !important; font-size: 9pt; line-height: 1.32; }
  .print-only { display: block !important; }

  /* ---------- the screen page does not print at all ----------
     Guarded with :has(.print-doc). This stylesheet is served straight off disk by express.static while the compiled
     EJS is held in Express's view cache, so between a file sync and a service restart the browser can pair NEW css
     with OLD html. Without the guard that pairing prints a blank sheet. */
  body.page-job:has(.print-doc) > *:not(main) { display: none !important; }
  body.page-job:has(.print-doc) main > *:not(.print-doc) { display: none !important; }
  body.page-job:has(.print-doc) main {
    display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; background: none !important;
  }
  /* belt and braces for a browser without :has() — never hide everything, just drop the obvious chrome */
  body.page-job .fn-chrome, body.page-job .site-header, body.page-job .site-footer,
  body.page-job .skip-link, body.page-job .flash, body.page-job [data-applybar], body.page-job [data-chapters],
  body.page-job [data-apply-panel], body.page-job .share, body.page-job .cc-map, body.page-job [data-map],
  body.page-job [data-toast-region] { display: none !important; }

  /* ---------- the document ---------- */
  .print-doc {
    display: block !important; color: var(--fn-ink, #34453F) !important;
    font-family: var(--fn-font-body, "Inter", system-ui, sans-serif);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .print-doc * { color: inherit; background: none; box-shadow: none !important; border-radius: 0 !important; }
  .print-doc a { color: inherit !important; text-decoration: none; }
  .print-doc a[href]::after { content: "" !important; }
  .print-doc p { margin: 0; }
  .print-doc dl, .print-doc dd { margin: 0; }

  .pd-kicker, .pd-label {
    font-size: 7pt; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fn-accent-text, #9A4A22) !important;
  }

  /* masthead: logo lockup left, the record's identity right */
  .pd-mast { display: flex; align-items: flex-end; justify-content: space-between; gap: 12pt; break-after: avoid; }
  .pd-mast__logo { display: block; height: 30pt; width: auto; }
  .pd-mast__id { text-align: right; }
  .pd-mast__pid { margin-top: 2pt !important; font-size: 13pt; font-weight: 800; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
  .pd-mast__pid span { font-size: 7.5pt; font-weight: 500; letter-spacing: .04em; color: var(--fn-ink-2, #52625B) !important; margin-right: 3pt; }

  /* the horizon: Land Forest rule with the copper sun rising at its left end */
  .pd-horizon { position: relative; height: 0; margin: 12pt 0 8pt; border-top: 2.2pt solid var(--fn-forest, #34453F); }
  .pd-horizon::before {
    content: ""; position: absolute; left: 14pt; bottom: 1.1pt; width: 15pt; height: 7.5pt;
    background: var(--fn-accent, #B85B2C); border-radius: 7.5pt 7.5pt 0 0;
  }

  .pd-title { break-after: avoid; }
  .pd-title__job { font-size: 19pt; line-height: 1.08; font-weight: 800; letter-spacing: -.02em; color: var(--fn-foundation, #11191D) !important; }
  .pd-title__co { margin-top: 3pt !important; font-size: 10.5pt; }
  .pd-title__co strong { font-weight: 700; }
  .pd-sep { color: var(--fn-accent, #B85B2C) !important; margin: 0 2pt; }
  .pd-title__legal { margin-top: 1pt !important; font-size: 8.5pt; color: var(--fn-ink-2, #52625B) !important; }
  .pd-title__wage { margin-top: 4pt !important; font-size: 12pt; font-weight: 800; color: var(--fn-accent-text, #9A4A22) !important; }

  /* the dated record strip an officer reads first: four cells between two rules, the URL full width beneath */
  .pd-record {
    display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; margin: 8pt 0 9pt !important;
    border-top: 1.5pt solid var(--fn-ink, #34453F); border-bottom: 1.5pt solid var(--fn-ink, #34453F); break-inside: avoid;
  }
  .pd-record > div { padding: 4pt 7pt 4pt 0; }
  .pd-record > div + div:not(.pd-record__url) { padding-left: 7pt; border-left: .6pt solid var(--fn-sand, #D8C4AA); }
  .pd-record dt { font-size: 7pt; letter-spacing: .1em; text-transform: uppercase; color: var(--fn-ink-2, #52625B) !important; }
  .pd-record dd { font-size: 9.5pt; font-weight: 700; }
  .pd-record dd small { display: block; font-size: 7pt; font-weight: 400; color: var(--fn-ink-2, #52625B) !important; }
  .pd-record__url { grid-column: 1 / -1; display: flex; gap: 8pt; align-items: baseline; border-top: .6pt solid var(--fn-sand, #D8C4AA); padding-left: 0 !important; }
  .pd-record__url dd { font-weight: 600; overflow-wrap: anywhere; }

  /* ledger left, text right — the ledger FLOATS, so once it ends the text takes the full width of the sheet (a long
     Job Bank posting does not run on as a narrow column beside an empty margin). Headings (flex), lists (flow-root)
     and the multi-column lists form their own boxes, so none of them runs under the ledger. */
  .pd-body { display: flow-root; }

  .pd-ledger {
    float: left; width: 64mm; margin: 0 7mm 6pt 0;
    border-top: 3pt solid var(--fn-forest, #34453F); padding-top: 4pt; font-size: 8.5pt; line-height: 1.25;
  }
  .pd-text ul, .pd-text dl, .pd-skills { display: flow-root; }
  .pd-ledger .pd-label { margin: 0 0 2pt !important; }
  .pd-ledger dl > div {
    display: grid; grid-template-columns: 21mm 1fr; gap: 4pt; align-items: baseline;
    padding: 2pt 0; border-bottom: .6pt solid var(--fn-sand, #D8C4AA); break-inside: avoid;
  }
  .pd-ledger dt { font-size: 7.3pt; color: var(--fn-ink-2, #52625B) !important; }
  .pd-ledger dd { font-weight: 600; overflow-wrap: anywhere; }
  .pd-ledger dl + .pd-label { margin-top: 7pt !important; }
  .pd-places { margin: 0 0 2pt; padding: 0; list-style: none; }
  .pd-places li { padding: 2pt 0; border-bottom: .6pt solid var(--fn-sand, #D8C4AA); font-weight: 600; break-inside: avoid; }
  .pd-places em { font-style: normal; font-weight: 400; color: var(--fn-ink-2, #52625B) !important; }
  .pd-apply { margin-top: 8pt; padding: 5pt 6pt 6pt; border: 1pt solid var(--fn-ink, #34453F); border-top: 3pt solid var(--fn-accent, #B85B2C); break-inside: avoid; }
  .pd-apply p + p { margin-top: 3pt !important; }
  .pd-apply p:not(.pd-label) { overflow-wrap: anywhere; }

  /* the wide sheet (.print-doc--wide, set in job-fn.ejs when the text is short — client DOC013 2026-10-22): the
     ledger stops floating and spans the page — details in two columns, then Work location | How to apply side by
     side — and the text runs full width beneath, so a short hand-filled posting leaves no empty column. */
  .print-doc--wide .pd-ledger {
    float: none; width: auto; margin: 0 0 9pt;
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 7mm;
    grid-template-areas: "l1 l1" "dl dl" "l2 ap" "pl ap"; grid-template-rows: auto auto auto 1fr;
  }
  .print-doc--wide .pd-ledger > .pd-label:first-child { grid-area: l1; }
  .print-doc--wide .pd-ledger > dl { grid-area: dl; display: grid; grid-template-columns: 1fr 1fr; column-gap: 7mm; }
  .print-doc--wide .pd-ledger > .pd-label--loc { grid-area: l2; margin-top: 7pt !important; }
  .print-doc--wide .pd-ledger > .pd-places { grid-area: pl; }
  .print-doc--wide .pd-ledger > .pd-apply { grid-area: ap; align-self: start; margin-top: 7pt; }
  .print-doc--wide .pd-ledger dl > div { grid-template-columns: 26mm 1fr; }

  .pd-sec { margin: 0 0 7pt; }
  .pd-sec h2 {
    display: flex; align-items: baseline; gap: 6pt; margin: 0 0 3pt; padding-bottom: 2pt;
    font-size: 10.5pt; font-weight: 800; letter-spacing: -.005em; border-bottom: .8pt solid var(--fn-line-strong, #BCB2A3); break-after: avoid;
  }
  .pd-sec h2 span { font-size: 8pt; font-weight: 700; color: var(--fn-accent, #B85B2C) !important; font-variant-numeric: tabular-nums; }
  .pd-sec--lead h2 { font-size: 12pt; border-bottom: 1.5pt solid var(--fn-ink, #34453F); }
  .pd-prose { line-height: 1.26; }
  .pd-prose p { margin: 0 0 2pt; orphans: 3; widows: 3; }
  .pd-prose li { margin: 0 0 .6pt; orphans: 3; widows: 3; }
  .pd-prose ul { margin: 0 0 4pt; padding-left: 12pt; list-style: square outside; }
  .pd-prose li { list-style: square outside; }
  .pd-prose li::marker { color: var(--fn-accent, #B85B2C); }
  .pd-prose .rt-lead { font-weight: 700; margin-bottom: 2pt; }
  .pd-prose ul.pd-cols { columns: 2; column-gap: 12pt; }
  .pd-prose ul.pd-cols li { break-inside: avoid; }
  .pd-skills { font-weight: 600; }
  .pd-contact > div { display: grid; grid-template-columns: 70pt 1fr; gap: 5pt; }
  .pd-contact dt { color: var(--fn-ink-2, #52625B) !important; }
  .pd-contact dd { font-weight: 600; }

  .pd-foot {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2pt 10pt;
    margin: 10pt 0 0 !important; padding-top: 4pt; border-top: 1.5pt solid var(--fn-ink, #34453F);
    font-size: 7.5pt; color: var(--fn-ink-2, #52625B) !important; break-inside: avoid;
  }
  .pd-foot span:first-child { overflow-wrap: anywhere; font-weight: 600; color: var(--fn-ink, #34453F) !important; }
}