/*
 * Print stylesheet — the worksheet path (docs/tasks/exercise-linking-and-print.md §2).
 * Turns any /uebungen/ or /lektion/ page into a printable sheet: content only,
 * answer keys included, nothing collapsed, nothing clipped.
 *
 * WHY IT LIVES IN public/ AND NOT src/styles/: base.astro links it with
 * media="print", so the browser fetches it at its lowest priority and it adds
 * ZERO render-blocking bytes to the screen CSS. An @media print block inside
 * global.css would ship inside the 54 KB base bundle on every request instead.
 * Consequence: it is NOT a Tailwind entry point — plain CSS, no @theme tokens.
 *
 * WHY !important IS EVERYWHERE: Astro appends its own bundled <link>s AFTER the
 * ones written in the layout, so base.css / dma-set.css win every specificity
 * tie against this file. The declarations are scoped to the print media and can
 * never reach the screen view.
 *
 * The @media print wrapper is redundant with media="print" on the <link> and
 * kept on purpose: if the attribute is ever dropped this file still cannot
 * damage the screen rendering.
 */

@media print {
  @page {
    margin: 14mm 12mm;
  }

  /* Black on white, no fills, no shadows. Backgrounds are re-added below only
     where they carry meaning (table head). */
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html,
  body {
    /* global.css sets overflow-x: clip on both; a clipping box can truncate the
       document at the first page. */
    overflow: visible !important;
    background: #fff !important;
  }

  body {
    /* The sticky-footer flex column (base.astro) is a fragmentation hazard —
       block layout paginates predictably. */
    display: block !important;
    /* Serif at a paper size: better legibility and less toner than Poppins,
       which is a screen face. */
    font-family: Georgia, 'Times New Roman', Times, serif !important;
    font-size: 11pt !important;
    line-height: 1.45 !important;
  }

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

  /* ---- chrome ---------------------------------------------------------------
     [data-pagefind-ignore] is already the site's marker for "chrome, not
     content" (header, footer, breadcrumb, relation tabs, author boxes, comments,
     related posts) and new chrome gets it anyway — reusing it keeps this list
     from going stale. The rest are the pieces that carry no such marker:
     the closed-comments band, the print button itself, the TOC control, and the
     ad slots the ad work will use (hiding them now costs nothing).
     There is no cookie/consent UI on this site (2026-07-26). */
  [data-pagefind-ignore],
  [aria-label='Kommentare'],
  .ad,
  .adsbygoogle,
  .dma-print,
  .dma-toc-toggle,
  .search-sec,
  audio,
  video,
  iframe {
    display: none !important;
  }

  /* Onward-link blocks. A printed worksheet must not carry a list of site links
     — the reader cannot follow one on paper, and it is the first thing that
     dates a photocopy. Two sources, both hidden:
       .ex-reco                 the recommendation card (score screen AND the
                                visible article-column copy from peer-links.astro)
       .display-posts-listing   the migrated WordPress "Weitere …:" listing
                                (133 content files)
     …plus the "Weitere hilfreiche …:" paragraph directly above the listing,
     which would otherwise print as a heading introducing nothing. The HTML
     comment the shortcode leaves between them is not an element, so the
     adjacent-sibling match still holds.

     Scoped to article[data-collection] — the SINGLE-page template. The
     content-topic archives render the same .display-posts-listing as their
     actual page content and carry no such <article>, so they still print.

     DO NOT broaden the heading rule to "the element before/after a
     <!--display-posts:…--> comment". One marker resolves to nothing
     (/uebungen/ordinalzahlen-uebungen/ — its topic has a single member), and the
     element following it there is a real paragraph pointing at the /uebungen/
     overview. A comment-anchored rule would delete that sentence from the
     printout. Keying on the rendered .display-posts-listing is what makes the
     zero-yield case safe: no listing, nothing hidden. */
  article[data-collection] :is(.ex-reco, .display-posts-listing),
  article[data-collection] :is(p, h2, h3, h4):has(+ .display-posts-listing) {
    display: none !important;
  }

  /* ---- typography ---- */
  :is(h1, h2, h3, h4, h5, h6) {
    font-family: inherit !important;
    color: #000 !important;
    break-after: avoid;
    page-break-after: avoid; /* legacy alias — older WebKit ignores break-after */
    break-inside: avoid;
  }
  h1 {
    font-size: 18pt !important;
    line-height: 1.25 !important;
    margin: 0 0 5mm !important;
    padding: 0 !important;
  }
  h2 {
    font-size: 14pt !important;
    margin: 6mm 0 2mm !important;
  }
  h3 {
    font-size: 12pt !important;
    margin: 4mm 0 2mm !important;
  }
  :is(h4, h5, h6) {
    font-size: 11pt !important;
    margin: 3mm 0 2mm !important;
  }

  p {
    margin: 0 0 3mm !important;
    padding: 0 !important;
    orphans: 3;
    widows: 3;
  }
  :is(ul, ol) {
    margin: 0 0 3mm !important;
    padding-inline-start: 7mm !important;
  }
  li {
    padding: 0 !important;
    orphans: 2;
    widows: 2;
  }

  /* In-content URLs are NOT expanded: a worksheet interleaved with
     https://deutsch-mit-anna.de/… is unreadable, and every one of these links is
     an internal cross-reference the reader cannot follow on paper anyway. The
     sheet stays attributable through the source line at the end of the article
     (and the browser's own URL running head). */
  a {
    text-decoration: none !important;
  }
  article[data-print-source]::after {
    content: 'Quelle: ' attr(data-print-source);
    display: block;
    margin-top: 6mm;
    padding-top: 2mm;
    border-top: 0.5pt solid #999;
    font-size: 8.5pt;
  }

  /* ---- tables ---------------------------------------------------------------
     The wrappers carry overflow-x: auto for the phone layout (content.css). In
     print that makes them scroll containers, which clip everything past the
     first page — the 221-row table on /lektion/nomen-verb-verbindungen-liste/
     printed as one page and nothing else. */
  :is(.wp-block-table, .table-scroll, .tablepress-scroll-wrapper, figure) {
    overflow: visible !important;
    max-width: none !important;
    margin: 0 0 4mm !important;
  }
  table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 0 4mm !important;
    break-inside: auto;
  }
  /* Repeat the header row on every page of a long table. */
  thead {
    display: table-header-group !important;
  }
  tfoot {
    display: table-footer-group !important;
  }
  tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  :is(th, td) {
    padding: 1.5mm 2.5mm !important;
    border: 0.4pt solid #999 !important;
    border-radius: 0 !important;
    font-size: 9pt !important;
    line-height: 1.3 !important;
    vertical-align: top !important;
    text-align: start !important;
  }
  thead th {
    background: #e8e8e8 !important;
    font-weight: 700 !important;
    /* Without this the grey is dropped by the browser's "no background graphics"
       default and a 200-row table loses its column boundary. */
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
    break-inside: avoid;
  }
  figure {
    break-inside: avoid;
  }

  /* ---- collapsed content ----------------------------------------------------
     Nothing may be silently missing from a printout. */

  /* toc-collapse.astro clips rows 3+ with max-height + a mask, never display. */
  #ez-toc-container[data-toc-expanded='false'] .ez-toc-list li {
    max-height: none !important;
    overflow: visible !important;
    mask-image: none !important;
  }

  /* Yoast FAQ accordion (content.css .schema-faq): answers are display:none
     until the question carries .active. */
  .schema-faq-answer {
    display: block !important;
    margin-block-start: 2mm !important;
  }
  .schema-faq-question::after {
    content: none !important;
  }
  .schema-faq-section {
    break-inside: avoid;
    padding: 0 !important;
    margin: 0 0 3mm !important;
  }

  /* CSS cannot force a <details> open, but it can reveal its content box.
     ::details-content is Chrome 131 / Safari 18.4 / Firefox 139 and up; on an
     older engine the answer key stays collapsed rather than breaking anything. */
  details {
    display: block !important;
  }
  details > summary {
    display: none !important;
  }
  details::details-content {
    content-visibility: visible !important;
    block-size: auto !important;
  }

  /* ---- exercises ------------------------------------------------------------
     With JS the island runs one question at a time and hides the served answer
     keys (exercises.css "boot state", gated on html.js). Print restores exactly
     the no-JS worksheet the server sent: every question, every key. */
  .ex-app :is(.ex-head, .ex-question, .ex-solutions) {
    display: block !important;
  }
  /* Interactive-only chrome: the start screen, the progress bar, the buttons,
     the score screen, the umlaut helper row, the live-region result line, and
     the "Tipp anzeigen" disclosure (its value is in-exercise; the printed sheet
     already carries the full solution). */
  .ex-app :is(
      .ex-set__intro,
      .ex-appbar,
      .ex-actions,
      .ex-summary,
      .ex-chars,
      .ex-result,
      .ex-tip,
      .ex-nav-arrow,
      .ex-btn,
      .ex-eyebrow
    ) {
    display: none !important;
  }
  /* The card shell (.ex-card: hairline, 24px radius, 22px padding) is screen
     furniture — on paper it draws a broken frame down the margin of every page
     the set spans. */
  .ex-app,
  .ex-card {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 5mm !important;
  }
  .ex-question {
    break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 4mm !important;
    padding: 0 !important;
  }
  .ex-ex__num {
    font-weight: 700 !important;
  }

  /* Paper economy. The on-screen sizes are touch ergonomics — 48px option rows,
     12px gaps, line-height 2.6 on gap sentences — and cost roughly half a sheet
     per question when a teacher is running 25 copies. The tick box, the border
     and the answer stay; the finger-sized empty space goes. */
  .ex-options {
    gap: 1.5mm !important;
  }
  .ex-option {
    min-height: 0 !important;
    gap: 2mm !important;
    padding: 1mm 2mm !important;
    border: 0.4pt solid #666 !important;
    border-radius: 2pt !important;
    font-size: 10pt !important;
  }
  .ex-sentence {
    line-height: 1.9 !important; /* still leaves room to write in the gaps */
    padding: 0 !important;
    font-size: 10.5pt !important;
  }

  /* Typed gaps and dropdowns become writable rules on paper. */
  :is(.ex-input, .ex-select, .ex-slot) {
    appearance: none !important;
    -webkit-appearance: none !important;
    min-width: 30mm !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 1mm !important;
    border: 0 !important;
    border-bottom: 0.5pt solid #000 !important;
    border-radius: 0 !important;
    font-size: 10pt !important;
  }
  /* Prompts that only make sense on screen: the text input's "Deine Antwort"
     and the dropdown's "…" placeholder option both print as grey noise on top
     of the rule the reader is meant to write on. A gap the reader already
     answered on screen keeps its text — only the untouched placeholder goes. */
  ::placeholder {
    color: transparent !important;
  }
  .ex-select:has(option[value='']:checked) {
    color: transparent !important;
  }
  /* Word banks / markable words / drop buckets are the exercise's content, so
     they print — outlined, because their meaning is "this is a chip". */
  :is(.ex-word, .ex-markword, .ex-bucket) {
    border: 0.4pt solid #666 !important;
    border-radius: 2pt !important;
    padding: 0.5mm 1.5mm !important;
    font-size: 10pt !important;
  }

  .ex-solutions {
    margin: 2mm 0 0 !important;
    padding: 1.5mm 0 0 !important;
    border: 0 !important;
    border-top: 0.4pt solid #999 !important;
  }
  /* The <summary> that said "Lösung anzeigen" is hidden above, so the key needs
     its own label. */
  .ex-solution-body::before {
    content: 'Lösung: ';
    font-weight: 700;
  }
}