/* Seek Above — print styles.
 *
 * Loaded with `media="print"` from BaseHead.astro, so screen visitors never
 * pay for it. People genuinely print from this site: video study notes,
 * reflection guides, saint stories, and the day's Mass readings all end up on
 * paper in small groups and classrooms.
 *
 * This file is served straight from `public/` rather than living in
 * `global.css`, so it stays a separate, non-render-blocking request — Tailwind
 * never processes `public/`, so everything here is plain CSS written against
 * stable hooks: `data-print="hide"` on site chrome, the ARIA roles and
 * accessible names components already expose, and the handful of literal class
 * names (`.mobile-bottom-nav`, Tailwind's `sticky`/`fixed`) that survive a
 * refactor.
 *
 * Goals: drop the site chrome, undo the neo-brutal ink-and-shadow treatment
 * (which eats toner and reads badly in greyscale), and keep the content
 * readable across page breaks.
 */

/* ---------------------------------------------------------------------------
   Page setup
   --------------------------------------------------------------------------- */
@page {
  margin: 18mm 16mm;
}

/* ---------------------------------------------------------------------------
   Chrome we never want on paper

   Targeted explicitly rather than by tag: a blanket `header`/`footer`/`nav`
   rule also eats an article's own title block and in-page navigation. Site
   chrome carries `data-print="hide"` (Header.tsx, Footer.tsx); the rest is
   matched on the accessible names and class hooks those components already
   expose.
   --------------------------------------------------------------------------- */
[data-print="hide"],
.mobile-bottom-nav,
[role="region"][aria-label="Audio player"],
[role="region"][aria-label="Video player"],
[role="region"][aria-label="Add Seek Above to your home screen"],
[role="dialog"],
[role="tablist"],
dialog,
iframe,
video,
audio {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Canvas: black on white, no halftone, no offset shadows
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
  /* Neither the halftone canvas nor the pop-colour slabs earn their toner. */
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  /* Undo the sticker rotations — charming on screen, sloppy on paper. */
  transform: none !important;
  color: #000 !important;
}

/* More specific than the `*` reset above, so these win. */
html,
body {
  background: #fff !important;
  color: #000 !important;
  font-size: 11pt;
  line-height: 1.5;
}

/* Pinned elements have nothing to pin to on paper — they'd otherwise stamp
   themselves over the first page. Matching the Tailwind class is the only
   handle CSS has on computed position, and both utilities are literal. */
[class~="sticky"],
[class~="fixed"] {
  position: static !important;
}

/* Keep a hairline where the design used a thick ink border, so cards still read
   as distinct blocks without a wall of black. */
[class*="border"] {
  border-color: #999 !important;
}

main {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Purely decorative elements — halftone watermarks, sticker overlays, the
   lucide icons paired with every heading — are all marked `aria-hidden` (see
   the accessibility rules in AGENTS.md), which makes that the one reliable
   hook for "carries no information". Anything conveying meaning is not
   aria-hidden, so nothing readable is lost. */
[aria-hidden="true"] {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Typography + pagination
   --------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  break-after: avoid-page;
  page-break-after: avoid; /* legacy alias for older print engines */
  line-height: 1.2;
}

h1 { font-size: 20pt; }
h2 { font-size: 15pt; }
h3 { font-size: 13pt; }

p,
li,
blockquote,
figure,
table {
  break-inside: avoid-page;
  page-break-inside: avoid;
  orphans: 3;
  widows: 3;
}

img {
  max-width: 100% !important;
  break-inside: avoid-page;
  page-break-inside: avoid;
}

/* ---------------------------------------------------------------------------
   Links
   --------------------------------------------------------------------------- */
a {
  text-decoration: underline;
}

/* Spell out where an outbound link goes — a printed page has nothing to hover.
   Only absolute URLs: a site-internal `/videos/…` path isn't clickable on
   paper and the reader is already holding the page it came from. */
main a[href^="http"]::after {
  content: " (" attr(href) ")";
  font-size: 9pt;
  word-break: break-all;
}

/* Glossary tooltips (`[[term|explanation]]`) can't be tapped on paper, so
   inline the explanation the bubble would have shown. */
.sa-tip {
  border: 0 !important;
  font-weight: inherit !important;
}

.sa-tip::after {
  content: " (" attr(data-tooltip) ")";
  font-size: 9pt;
  font-style: italic;
}