/* This site is an interactive photo catalog, not a document, so most of what's on screen isn't
   sensible to print. Without this, a browser's "Print" command tries to print the entire page,
   including content that's only meant to be seen on screen — for example the full family photo
   gallery sitting behind the "Welcome" message, producing dozens of unwanted pages. By default,
   this hides everything on the page when printing and shows a short, plain explanation instead,
   pointing people to the selections-list buttons, which already open a separate, genuinely
   printable page in a new tab.

   The one exception: on the family catalog page, while the "Welcome" instructions card is on
   screen, printing shows just that card, cleanly formatted — so a family member can print the
   instructions and keep a paper copy next to them while they use the site.

   Note: the Welcome card (#startGuide) lives inside <main>, alongside the sign-in section and the
   photo gallery section. A hidden ancestor blocks all of its children from rendering no matter
   what display value the child itself has — so <main> must stay visible, and only its OTHER two
   children get hidden, rather than hiding <main> and trying to force the card back on. */
@media print {
  body > * { display: none !important; }
  body::before {
    display: block !important;
    content: "This page is part of an interactive family photo catalog and is not meant to be printed directly. To print a list of the family's selections, use the selections list buttons inside the site — they open a separate, plain page made for printing.";
    position: fixed;
    top: 60px;
    left: 40px;
    right: 40px;
    font: 16px/1.6 Arial, Helvetica, sans-serif;
    color: #000;
  }

  /* When the Welcome instructions card is showing, print it instead of the notice above. */
  body:has(#startGuide:not(.hidden)) > * { display: none !important; }
  body:has(#startGuide:not(.hidden))::before { display: none !important; }
  body:has(#startGuide:not(.hidden)) > main {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body:has(#startGuide:not(.hidden)) main > *:not(#startGuide) { display: none !important; }
  body:has(#startGuide:not(.hidden)) #startGuide {
    display: block !important;
    position: static !important;
    inset: auto !important;
    background: #fff !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: auto !important;
  }
  body:has(#startGuide:not(.hidden)) .start-guide-card {
    box-shadow: none !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    text-align: left !important;
    background: #fff !important;
  }
  body:has(#startGuide:not(.hidden)) #dismissGuide { display: none !important; }
}