/* ===========================================================================
   Print - a guest printing this is printing an itinerary.

   So the hero, the RSVP page and the FAQ survive, and the tab row, the scrims
   and the decorative grounds go. Text is forced to near-black on white,
   because cream type on white paper is nothing at all (FR-068, research R14).
   =========================================================================== */

@media print {
  :root {
    --ink: #1c1c1c;
    --ink-muted: #3a3a3a;
    --ink-reversed: #1c1c1c;
  }

  html,
  body {
    background: #fff !important;
    color: var(--ink) !important;
    font-size: 11pt;
    overflow: visible;
  }

  /* Chrome that only makes sense on a screen. */
  .site-nav,
  .skip-link,
  .scrim,
  .hero__scrim {
    display: none !important;
  }

  /* Decorative grounds would either print over the text or be dropped by the
     browser, leaving pale type on white. Both are failures, so they go. */
  .section__ground,
  .ground--olive,
  .ground--olive-deep,
  .ground--pink,
  .ground--cream,
  .ground--tile-above,
  .ground--tile-below {
    background: #fff !important;
    color: var(--ink) !important;
  }

  .section__ground,
  .faq__wash,
  .faq__band {
    display: none !important;
  }

  /* The hero photograph is the one image worth the ink: it is the invitation.
     The selector is the hero's real one (.section--home); an earlier `.hero`
     matched nothing, so the photograph silently never printed. */
  .section--home .hero__photograph {
    display: block !important;
    position: static;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 9cm;
    aspect-ratio: auto !important;
    object-fit: contain;
    margin-block-end: var(--space-md);
  }

  .section {
    min-height: 0 !important;
    padding-block: var(--space-md) !important;
    padding-inline: 0 !important;
    break-inside: auto;
  }

  /* Sections that carry no printable information. */
  .section--rsvp-moment .section__ground,
  .section--bridal-party {
    display: none;
  }

  /* Every answer open, because a collapsed answer prints as a question with no
     answer (FR-068). */
  details {
    display: block !important;
  }

  /* Chromium keeps a closed disclosure's contents behind its own content-
     visibility slot; display alone does not always reach them. */
  details::details-content {
    content-visibility: visible !important;
    display: block !important;
  }

  details > summary {
    list-style: none;
  }

  details > summary::marker,
  details > summary::-webkit-details-marker {
    display: none;
  }

  .faq__item {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .faq__item + .faq__item {
    margin-block-start: var(--space-sm);
  }

  /* A printed link is useless without its destination, and the RSVP link is
     the one a guest will actually want to type in. */
  .rsvp-link::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
    word-break: break-all;
  }

  a {
    color: var(--ink) !important;
    text-decoration: underline;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
    page-break-after: avoid;
    color: var(--ink) !important;
  }

  .pending {
    border-block-start-color: var(--ink-muted);
    opacity: 1;
  }
}