/* ==========================================================================
   print.css — resources.html on paper
   --------------------------------------------------------------------------
   The screen page is a riso-zine grid of bordered cards. On paper that is
   four sheets of ink for a list of phone numbers, so print drops the
   decoration and renders every entry as a plain two-line block:

       Name                                 905-688-2558
       What they do                           questchc.ca

   The target is one US Letter sheet, so somebody can print this and hand it
   to a person who needs a number today. `npm run check:print` fails if it
   spills onto a second page.

   The list runs in two columns. Twenty-six entries down a single column
   needs about 6.5pt type to fit, and this is a sheet somebody reads on a bad
   day — two columns buy the room at a size that stays readable.

   Everything from the site furniture goes except the masthead logo and
   wordmark: no nav, no footer. The emergency callout carries the 9-1-1 line
   that the footer's crisis note would otherwise repeat.

   Loaded with media="print" after styles.css, so it overrides the small
   print block there — including its `.masthead{display:none}`.
   ========================================================================== */

@page{ size: letter; margin: 10mm 12mm; }

@media print{

  /* ---- ground ------------------------------------------------------------ */

  html,body{
    background:#fff!important; color:#000;
    font-size:9pt; line-height:1.2;
  }
  body{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }

  /* Navigation, decoration, and the whole site footer. A handout is read in
     the hand: there is nothing to navigate to and nobody to link. */
  /* `.rhead` is the page's hero — "Who else can help" over a lede. On screen
     it introduces the page; on a sheet of phone numbers it is a second title
     under the masthead, and it reads as confusing. The one thing in it worth
     printing is the address of the live list, which moves to the masthead. */
  .grain,.skip,.nav,.foot,.rhead,
  .chan,.rhead__jump,.rcard__meta{ display:none!important; }

  main,.wrap{ max-width:none; margin:0; padding:0; width:auto; }

  a{ color:#000!important; text-decoration:none!important; }

  /* ---- masthead: logo and wordmark only ---------------------------------- */

  /* styles.css hides the masthead in print with !important; we want it. */
  .masthead{
    display:block!important;
    position:static; background:#fff!important;
    border-bottom:1pt solid #000;
    margin-bottom:5pt;
  }
  .masthead__in{
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:8pt; min-height:0; padding:0 0 3pt;
  }
  /* The sheet goes stale; the live list doesn't. Generated content on a flex
     container is a flex item, so this sits on the baseline opposite the logo. */
  .masthead__in::after{
    content:"transmissionsniagara.ca/resources";
    font-family:var(--mono); font-weight:400;
    font-size:7pt; letter-spacing:.04em; color:#000;
  }
  .brand{ display:flex; align-items:center; gap:5pt; }
  .brand__mark{ width:24pt; height:auto; }
  .brand__name{ font-size:14pt; letter-spacing:-.01em; }
  .brand__place{ font-size:5.6pt; letter-spacing:.24em; color:#000; }

  /* ---- 9-1-1 stays the loudest thing on the sheet ------------------------ */

  .sec,.sec--ink,.sec--tint{
    background:#fff!important; color:#000!important;
    padding:0; margin:0 0 4pt;
  }

  .emerg{
    background:#fff!important; color:#000!important;
    border:1.5pt solid #000; box-shadow:none;
    max-width:none; padding:3.5pt 5pt; margin:0 0 5pt;
    break-inside:avoid; break-after:avoid;
  }
  .emerg__big{ font-size:11.5pt; line-height:1.1; margin:0; }
  .emerg__big a{
    text-decoration:underline!important; text-decoration-thickness:1.25pt;
    text-underline-offset:2pt;
  }
  .emerg__sub{ font-size:7.2pt; line-height:1.2; margin:1pt 0 0; }

  /* ---- section headings -------------------------------------------------- */

  /* The headings break over two lines on screen. On paper they are single
     uppercase rules, so the `br` is dropped — which is why resources.html
     carries a space before each one ("Care that <br>starts with you").
     Without it the halves weld into "CARE THATSTARTS WITH YOU", and
     generated content can't put the space back: it doesn't apply to `br`.
     The space is invisible on screen, where it collapses at the line end. */
  .sec__h br{ display:none; }

  .sec__h,.sec__h--on-ink{
    font-size:9.5pt; line-height:1.05; letter-spacing:.02em;
    text-transform:uppercase;
    color:#000!important;
    margin:0 0 2pt; padding-bottom:1.25pt;
    border-bottom:.75pt solid #000;
    break-after:avoid;
  }

  .sec__intro{ font-size:7.2pt; line-height:1.2; margin:0 0 2.5pt; max-width:none; }

  /* ---- the list ---------------------------------------------------------- */

  .res{
    display:block;
    margin:0; padding:0;
    /* the screen grid's `gap` would reset `column-gap` back to 0 and run the
       two columns into the rule, so it is cleared first */
    gap:normal;
    columns:2; column-gap:20pt; column-rule:.4pt solid #ccc;
  }

  /* Two lines per entry. DOM order is name, blurb, phone, link — the grid
     puts the phone back up beside the name without touching the markup. */
  .rcard{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;   /* minmax(0,…): a long name
       would otherwise floor the first track at min-content and shove the
       phone number off the edge of the column */
    column-gap:5pt;
    background:none!important; border:0!important; box-shadow:none!important;
    padding:.6pt 0; margin:0;
    border-bottom:.4pt solid #ccc;
    break-inside:avoid;
  }
  /* The screen rotates card shadows by position; nothing to rotate here. */
  .rcard:nth-child(3n+1),.rcard:nth-child(3n+2),.rcard:nth-child(3n+3),
  .res--crisis .rcard{ box-shadow:none!important; }

  .rcard__name{
    grid-column:1; grid-row:1;
    font-size:8.8pt; font-weight:800; line-height:1.05;
    margin:0; text-wrap:initial;
  }

  .rcard__tel{
    grid-column:2; grid-row:1;
    margin:0; text-align:right; align-self:baseline;
  }
  .rcard__tel a{
    display:inline; background:none!important; border:0!important; padding:0;
    font-family:var(--mono); font-weight:500; font-size:8.2pt;
    letter-spacing:-.01em; white-space:nowrap;
  }

  .rcard__what{
    grid-column:1 / -1; grid-row:2;
    font-size:7pt; line-height:1.15; color:#333;
    margin:0;
  }

  /* The web address is the fallback contact, not the primary one — on paper
     it only earns a line for the entries that have no phone number (PFLAG,
     OUTniagara, the Friendship Centre, Independent Legal Advice, and so on).
     Where there is a number to call, the sheet gives the number and leaves
     the link to the live page named at the top. */
  .rcard__link{
    grid-column:1 / -1; grid-row:3;
    margin:0; text-align:right; align-self:baseline;
    font-family:var(--mono); font-size:6.6pt; color:#555!important;
    word-break:normal; white-space:nowrap;
  }
  .rcard:has(.rcard__tel) .rcard__link,
  .rcard:has(.rcard__lines) .rcard__link{ display:none; }

  /* Cards with several numbers (Distress Centre, CARSA) run them inline
     under the name rather than as a bordered table. */
  .rcard__lines{
    grid-column:1 / -1; grid-row:4;
    display:block; margin:.5pt 0 0; padding:0;
  }
  .rcard__lines li{
    display:inline; border:0; padding:0;
    font-size:7pt; line-height:1.25;
  }
  .rcard__lines li::after{ content:" \00b7 "; color:#777; }
  .rcard__lines li:last-child::after{ content:""; }
  .rcard__lines span{ font-size:7pt; color:#333; }
  .rcard__lines span::after{ content:" "; }
  .rcard__lines a{
    font-family:var(--mono); font-size:7pt; font-weight:500; white-space:nowrap;
  }

  /* ---- the one disclaimer that has to survive ---------------------------- */

  /* "We don't run these services" lives in the credit block, not the footer,
     so it stays. The sourcing paragraph and its heading don't earn the space. */
  .credit{
    background:#fff!important; color:#000!important;
    border:0; box-shadow:none; max-width:none;
    padding:0; margin:3pt 0 0;
    break-inside:avoid;
  }
  .credit__h,.credit p:not(.credit__fine){ display:none!important; }
  .credit__fine{
    font-size:6.8pt!important; line-height:1.2; color:#333!important;
    border-top:.75pt solid #000; padding-top:2.5pt; margin:0;
  }
  .credit__fine .eml{ text-decoration:underline; }
}