/*
 * Print styles — a clean, ink-friendly printout on any kickstart page, whether
 * the visitor uses a site's „Drucken" button (window.print) or the browser's
 * own print (Ctrl/Cmd-P). Site chrome is dropped so only #main prints.
 *
 * Served as a `media="print"` stylesheet outside the entry bundle, so it never
 * blocks rendering (see lupus-nuxt-core/nuxt.config.ts).
 * Opt an element out of print with the `.print-hidden` class (or the
 * equivalent `data-print-hidden` attribute).
 */
@media print {
  /* Drop site chrome: header + topbar, footer, breadcrumbs, flash messages,
   * cookie banner, any modal/popup dialog, and anything a component opts out. */
  [data-id="site-header"],
  #footer,
  [data-id="footer-navigation"],
  #breadcrumbs,
  [data-id="messages"],
  section.cookieControl,
  [role="dialog"],
  .print-hidden,
  [data-print-hidden] {
    display: none !important;
  }

  /* Neutral page: white background, black text — no branded surfaces burning
   * ink, and readable if the visitor prints in grayscale. */
  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }

  /* An open modal or popup locks background scrolling by pinning the app shell
   * (inline `position: fixed` plus a negative `top` carrying the scroll offset).
   * The dialog itself is hidden above, but that pin survives into print: the
   * shell leaves the flow, the document collapses to viewport height, and the
   * printout is a single page cut at wherever the visitor had scrolled to. Put
   * the shell back in flow so the whole page prints. */
  #__nuxt {
    position: static !important;
    top: auto !important;
    overflow: visible !important;
  }

  /* Main content spans the full page — drop the on-screen container width. */
  #main {
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Nothing sticks or floats in print; boxes shed their on-screen chrome. */
  .sticky,
  [class*=":sticky"] {
    position: static !important;
    top: auto !important;
  }

  [class*="shadow"] {
    box-shadow: none !important;
  }

  /* Keep headings with their content, and don't split list rows or media. */
  h1,
  h2,
  h3,
  h4 {
    break-after: avoid;
  }

  li,
  tr,
  img,
  figure {
    break-inside: avoid;
  }

  /* Links print as plain text — no colour or underline noise. */
  a {
    color: inherit !important;
    text-decoration: none !important;
  }

  /* …except a link styled as a button, which carries its own fill: `inherit`
   * hands it the surrounding text colour, so a light pill inside a dark card
   * prints white-on-white — an empty pill with an invisible label — and a dark
   * pill prints dark-on-dark. Print every button the same way instead: black on
   * white, outlined. Legible on a dark card as well as a light one, and with
   * "background graphics" off — where the card colour is gone — unchanged. */
  a[data-id="lupus-button"],
  button[data-id="lupus-button"] {
    color: #000 !important;
    background: #fff !important;
    border: 1px solid #000 !important;
  }

  /* Sections sized to the screen (full-viewport heroes, large min-heights) turn
   * into near-empty sheets on paper. Let them shrink to their content. */
  [class*="h-dvh"],
  [class*="100vh"],
  [class*="min-h-"] {
    height: auto !important;
    min-height: 0 !important;
  }

  /* On-screen sections breathe with large vertical padding. That spacing
   * spreads a short printout across extra pages, so trim the biggest steps —
   * top and bottom independently, so only padding actually set gets shrunk. */
  [class*="pt-16"],
  [class*="pt-24"],
  [class*="py-16"],
  [class*="py-20"] {
    padding-top: 1rem !important;
  }

  [class*="pb-16"],
  [class*="pb-24"],
  [class*="py-16"],
  [class*="py-20"] {
    padding-bottom: 1rem !important;
  }
}