/* print.css — paper-optimized rendering, loaded media="print" only.
   Tuned for study-guide block pages (.bsg-*) so peers who prefer paper get a
   clean, ink-light printout (or print-to-PDF). Screen rendering is untouched.
   2026-06-09 */

@page { margin: 0.6in 0.55in; }

@media print {
  /* --- strip all interactive chrome --- */
  .page-header, .site-footer, .controls, .toggles, .translate,
  .skip-link, .site-nav, .breadcrumb, .site-search,
  .bsg-prev-next, .bsg-direction, [data-pagefind-ui], script, noscript {
    display: none !important;
  }

  /* --- ink-light base --- */
  html, body { background: #fff !important; color: #000 !important; }
  body { font-size: 11.5pt; line-height: 1.4; }
  .page, main, article.page { max-width: none !important; margin: 0 !important; padding: 0 !important; }

  a { color: #000 !important; text-decoration: none; }

  /* Title block */
  .page-title { margin: 0 0 0.4rem; padding: 0; border: none !important; }
  .page-title h1 { font-size: 18pt; margin: 0 0 0.15rem; }

  /* --- sections: keep them whole, give breathing room --- */
  .bsg-section { break-inside: avoid; page-break-inside: avoid; margin: 0 0 0.7rem; }
  .bsg-section h2, .bsg-section h3 { break-after: avoid; page-break-after: avoid; }

  /* --- callouts: light border instead of color fill so they read on paper --- */
  .bsg-callout, .bsg-cliff, .bsg-vocab-wrap {
    background: #fff !important;
    border: 1px solid #555 !important;
    box-shadow: none !important;
    break-inside: avoid; page-break-inside: avoid;
    padding: 0.4rem 0.6rem;
  }
  .bsg-callout--key { border-left: 4px solid #000 !important; }
  .bsg-callout--info { border-left: 4px solid #777 !important; }

  /* --- tables: keep rows together, visible grid --- */
  .bsg-pattern-table, .bsg-vocab table { break-inside: auto; width: 100%; border-collapse: collapse; }
  .bsg-pattern-table th, .bsg-pattern-table td,
  .bsg-vocab th, .bsg-vocab td { border: 1px solid #999 !important; padding: 3pt 5pt; }
  .bsg-vocab tr, .bsg-pattern-table tr { break-inside: avoid; page-break-inside: avoid; }
  thead { display: table-header-group; }  /* repeat header on each printed page */

  /* --- multilingual support: keep transliteration + Arabic legible --- */
  .bsg-translit { color: #333 !important; font-style: italic; }
  .bsg-arabic { color: #000 !important; }

  /* --- diagrams/SVGs scale to column, never clipped --- */
  img, svg, figure { max-width: 100% !important; height: auto; break-inside: avoid; }

  /* ============================================================
     TRUE BLACK & WHITE (2026-06-09)
     Force the entire printed page to grayscale so nothing uses color ink,
     and flatten colored fills to white so a B&W laser never lays down a
     toner-heavy gray block. Meaning is carried by borders + weight instead.
     The downloadable booklet PDF is Chrome-rendered, which honors filter.
     ============================================================ */
  /* Neutralize the color tokens to black/gray/white. The whole site is
     token-driven, so this makes every accent heading, link, eyebrow, card
     tint and rule monochrome WITHOUT a root filter — text stays sharp vector
     (small PDF) instead of being rasterized. */
  :root {
    --bg: #fff !important; --bg-tint: #fff !important; --bg-deep: #fff !important;
    --ink: #000 !important; --ink-dim: #2b2b2b !important; --ink-quiet: #4a4a4a !important;
    --accent: #000 !important; --accent-deep: #000 !important; --accent-soft: #fff !important;
    --rule: #9a9a9a !important; --rule-strong: #4a4a4a !important;
  }
  html { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Grayscale only raster images + colored diagrams — keeps text vector. */
  img, svg, figure svg { filter: grayscale(100%); }

  /* colored fills -> white (no gray blocks); text -> black */
  .bsg-callout, .bsg-callout--key, .bsg-callout--info, .bsg-cliff,
  .bsg-vocab-wrap, .bsg-vocab th, .bsg-pattern-table th,
  .bsg-card, .bsg-phase-header, .bsg-vocab-note,
  mark, .mark, .highlight, code, pre,
  [class*="badge"], [class*="pill"], [class*="chip"], [class*="tag"] {
    background: #fff !important;
    color: #000 !important;
  }

  /* highlights survive B&W as an underline, not a fill */
  mark, .mark, .highlight {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    box-shadow: none !important;
  }

  /* table headers: white bg, bold, strong rule for separation */
  .bsg-vocab th, .bsg-pattern-table th {
    font-weight: 700;
    border-bottom: 2px solid #000 !important;
  }

  /* ---- UNIVERSAL B&W FLATTEN (2026-06-09) ----
     Catches hardcoded + color-mix(...,transparent) backgrounds, accent-colored
     headings, and colored borders that token-neutralization can't reach (e.g.
     reading boxes, callouts). Everything prints black-on-white; structure is
     carried by borders + weight. The specific callout/table rules above keep
     higher specificity, so their darker accent borders survive. */
  *, *::before, *::after {
    background-color: #fff !important;
    background-image: none !important;
    color: #000 !important;
    border-color: #777 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  img, svg, figure svg { filter: grayscale(100%) !important; }

  /* ---- WIDE VOCAB / DEFINITIONS TABLE: fit the page ----
     No horizontal scroll exists on paper, so the 9-column multilingual table
     was running off the right edge. Force it to the printable width, wrap
     cells, drop the min-widths/nowrap, and shrink type so all columns fit. */
  .bsg-vocab-wrap { overflow: visible !important; border: none !important; }
  #bsg-vocab-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed !important;
    font-size: 7pt !important;
  }
  #bsg-vocab-table th, #bsg-vocab-table td {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    padding: 2pt 3pt !important;
    vertical-align: top !important;
    position: static !important;
    border: 0.5pt solid #999 !important;
  }
  #bsg-vocab-table .bsg-vocab-def,
  #bsg-vocab-table .bsg-vocab-ar { min-width: 0 !important; }
  #bsg-vocab-table .bsg-translit { font-size: 6pt !important; }
}