/* ================================================================
 *  NHI Archive Print Stylesheet (Hyperagent 21 Jun 2026; Cowork QA fixes: home-button hide + footer copyright)
 *  ─────────────────────────────
 *  Clean, ink-friendly output for researchers printing case files,
 *  exhibition pages, biographies, disclosure profiles, timeline
 *  entries, and government records.
 *
 *  Principles:
 *    - Remove all UI chrome (nav, footer controls, filters, overlays)
 *    - Preserve all content (text, images, tables, quotes, metadata)
 *    - White background, black text, minimal ink
 *    - Show URLs after links so printed pages remain navigable
 *    - Prevent orphaned headings and broken images across pages
 *    - Respect the four-tier typography system
 *
 *  LOAD via: <link rel="stylesheet" href="/css/print.css" media="print">
 *  Or append to main.css inside @media print { }
 *
 *  All values use CSS custom properties where applicable.
 *  Fallback values included for print rendering engines that
 *  may not support custom properties.
 * ================================================================ */

@media print {

  /* ════════════════════════════════════════════════════════════
   *  1. RESET: White canvas, black ink
   * ════════════════════════════════════════════════════════════ */

  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html, body {
    background: #fff !important;
    font-size: 11pt;
    line-height: 1.5;
  }

  /* ════════════════════════════════════════════════════════════
   *  2. HIDE: UI chrome that has no meaning on paper
   * ════════════════════════════════════════════════════════════ */

  /* Site header and navigation */
  .page-frame,
  .site-nav,
  .frame-wrap,
  .frame-inner,
  .rivet,
  .mobile-menu-btn,
  .mobile-nav,
  .dd-link,
  .dd-section-label,
  .nav-item,
  .nav-trigger,
  [class*="nav-left"],
  [class*="nav-right"],
  .search-trigger,
  .search-modal {
    display: none !important;
  }

  /* Footer chrome (keep copyright, hide nav links) */
  .footer-heading,
  .footer-links,
  .footer-wellbeing,
  .footer-wellbeing-link {
    display: none !important;
  }

  /* Keep the copyright line */
  .footer-mark-copyright {
    display: block !important;
    text-align: center;
    font-size: 8pt;
    margin-top: 2em;
    padding-top: 1em;
    border-top: 0.5pt solid #999;
  }

  /* Interactive controls */
  #ufo-legend,
  .ufo-legend-btn,
  .btt,
  .back-to-top,
  .filter-btn,
  .bio-filter,
  .bio-filter-pill,
  .tl-jump-nav,
  .tl-expand-decade,
  .tl-read-more,
  .people-tier-bar,
  .people-search,
  .people-show-more,
  .hub-card-read-more,
  [class*="read-aloud"],
  .perf-monitor,
  [class*="perf-"] {
    display: none !important;
  }

  /* Overlays and modals */
  .bio-lightbox,
  .grain-overlay,
  [class*="-scrim"],
  [class*="-overlay"],
  .modal,
  .toast {
    display: none !important;
  }

  /* Skip links and screen-reader-only elements */
  .sr-only,
  [class*="skip-to"] {
    display: none !important;
  }

  /* Decorative elements */
  .rivet,
  .glow-frame--brass::before,
  .glow-frame--brass::after,
  [class*="glow-frame"]::before,
  [class*="glow-frame"]::after {
    display: none !important;
  }

  /* Carousel/slider navigation */
  .hpc-nav,
  .hpc-scrim {
    display: none !important;
  }

  /* Facet footer (topic/era chips on biography pages) */
  .facet-footer {
    display: none !important;
  }

  /* ════════════════════════════════════════════════════════════
   *  3. LAYOUT: Single column, full width, no margins wasted
   * ════════════════════════════════════════════════════════════ */

  body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  main,
  [id="main-content"],
  .max-w-content,
  .max-w-article,
  section {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.5cm 0 !important;
    float: none !important;
  }

  /* Sticky elements become static */
  .site-breadcrumb,
  .tl-jump-nav,
  [style*="position: sticky"],
  [style*="position:sticky"] {
    position: static !important;
  }

  /* ════════════════════════════════════════════════════════════
   *  4. TYPOGRAPHY: Optimised for paper
   * ════════════════════════════════════════════════════════════ */

  /* Preserve the archive's typography hierarchy */
  h1 {
    font-size: 18pt !important;
    margin-bottom: 6pt !important;
    page-break-after: avoid;
  }

  h2 {
    font-size: 14pt !important;
    margin-top: 16pt !important;
    margin-bottom: 6pt !important;
    page-break-after: avoid;
  }

  h3 {
    font-size: 12pt !important;
    margin-top: 12pt !important;
    margin-bottom: 4pt !important;
    page-break-after: avoid;
  }

  p, li, td, th, dd, dt {
    font-size: 10pt !important;
    line-height: 1.5 !important;
    orphans: 3;
    widows: 3;
  }

  /* Metadata lines (IBM Plex Mono tier) */
  .tl-date,
  .bx-life,
  .bio-meta-bar .field,
  .landmark-id,
  .landmark-card-loc,
  .dn-eyebrow,
  [class*="font-mono"],
  [class*="font-data"] {
    font-size: 8pt !important;
    letter-spacing: 0.04em !important;
  }

  /* Monospace elements */
  code, pre, kbd, samp {
    font-size: 9pt !important;
    border: 0.5pt solid #ccc;
    padding: 1pt 3pt;
  }

  pre {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    page-break-inside: avoid;
  }

  /* ════════════════════════════════════════════════════════════
   *  5. LINKS: Show URLs after anchor text
   * ════════════════════════════════════════════════════════════ */

  a[href]::after {
    content: " [" attr(href) "]";
    font-size: 8pt;
    font-family: 'IBM Plex Mono', monospace;
    color: #555 !important;
    word-break: break-all;
  }

  /* Do not show URLs for internal anchors, empty hrefs, or
     JavaScript hrefs */
  a[href^="#"]::after,
  a[href^="javascript"]::after,
  a[href=""]::after {
    content: none;
  }

  /* Do not show URLs for navigation links that are being hidden */
  .site-nav a::after,
  .mobile-nav a::after,
  .footer-links a::after,
  .dd-link::after {
    content: none;
  }

  /* Breadcrumb links: show path, not full URLs */
  .site-breadcrumb a::after,
  .ex-breadcrumb a::after,
  .dn-breadcrumb a::after {
    content: none;
  }

  /* ════════════════════════════════════════════════════════════
   *  6. IMAGES: Preserve content images, handle gracefully
   * ════════════════════════════════════════════════════════════ */

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

  /* Hero images: break out of absolute positioning, constrain for paper */
  .page-hero-bg,
  .bio-hero-image img,
  .au-bleed-hero,
  [class*="hero-bg"] {
    position: static !important;
    inset: auto !important;
    max-height: 200pt !important;
    max-width: 80% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto 12pt !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* Hide hero scrim overlays so image is visible */
  .page-hero-scrim,
  [class*="hero-scrim"] {
    display: none !important;
  }

  /* Photo grids: single column on paper */
  .bio-photo-grid {
    display: block !important;
  }

  .bio-photo {
    max-width: 60% !important;
    margin: 8pt auto !important;
    page-break-inside: avoid;
  }

  /* Exhibition images: keep brass-frame figures */
  figure {
    page-break-inside: avoid;
    margin: 12pt 0 !important;
  }

  figcaption {
    font-size: 8pt !important;
    font-style: italic;
    margin-top: 4pt;
  }

  /* ════════════════════════════════════════════════════════════
   *  7. TABLES: Bordered for clarity on paper
   * ════════════════════════════════════════════════════════════ */

  table {
    border-collapse: collapse !important;
    width: 100% !important;
    page-break-inside: auto;
  }

  thead {
    display: table-header-group;
  }

  tr {
    page-break-inside: avoid;
  }

  th, td {
    border: 0.5pt solid #999 !important;
    padding: 4pt 6pt !important;
    font-size: 9pt !important;
    text-align: left;
  }

  th {
    font-weight: bold;
  }

  /* ════════════════════════════════════════════════════════════
   *  8. QUOTES: Preserve pull quotes with attribution
   * ════════════════════════════════════════════════════════════ */

  blockquote,
  .ex-pull-quote {
    border-left: 2pt solid #999 !important;
    margin: 12pt 0 12pt 12pt !important;
    padding: 6pt 0 6pt 12pt !important;
    font-style: italic;
    page-break-inside: avoid;
  }

  /* ════════════════════════════════════════════════════════════
   *  9. PAGE BREAKS: Keep content together intelligently
   * ════════════════════════════════════════════════════════════ */

  /* Never break inside these elements */
  .bx-card,
  .pd-card,
  .landmark-card,
  .tl-card,
  .bio-accord,
  .key-facts,
  .ex-source-card,
  .case-card,
  [class*="-card"] {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Break before major sections */
  .ex-section-header {
    page-break-before: auto;
    margin-top: 16pt !important;
  }

  /* ════════════════════════════════════════════════════════════
   *  10. CARD GRIDS: Linearise for print
   * ════════════════════════════════════════════════════════════ */

  .bx-grid,
  .bx-hero-grid,
  .landmark-tier1,
  .landmark-tier2,
  .people-dir-grid,
  [class*="-grid"] {
    display: block !important;
  }

  .bx-card,
  .pd-card,
  .landmark-card {
    display: block !important;
    margin-bottom: 8pt !important;
    border: 0.5pt solid #ccc !important;
    padding: 6pt !important;
  }

  /* Hide card images in grid views (saves ink, keeps names visible) */
  .bx-card .bx-img,
  .landmark-card-media {
    display: none !important;
  }

  /* ════════════════════════════════════════════════════════════
   *  11. TIMELINE: Linearise, show all entries
   * ════════════════════════════════════════════════════════════ */

  /* Remove the visual spine and left/right alternation */
  .tl-spine,
  .tl-connector,
  .tl-node {
    display: none !important;
  }

  .tl-entry {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8pt !important;
    padding: 0 !important;
    float: none !important;
    position: static !important;
  }

  /* Show collapsed entries */
  .tl-collapsed {
    display: block !important;
  }

  /* Show clamped summaries in full */
  .tl-summary,
  .tl-summary-expanded {
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    display: block !important;
    overflow: visible !important;
  }

  /* Decade headers */
  .tl-decade {
    page-break-before: auto;
    margin-top: 12pt !important;
    padding-bottom: 4pt !important;
    border-bottom: 1pt solid #999 !important;
    font-size: 14pt !important;
    font-weight: bold !important;
  }

  /* Hide decade context images (save ink) */
  .tl-decade-image {
    display: none !important;
  }

  /* ════════════════════════════════════════════════════════════
   *  12. DISCLOSURE PAGES: Clean profile output
   * ════════════════════════════════════════════════════════════ */

  .dn-portrait-placeholder {
    display: none !important;
  }

  .dn-portrait img {
    max-width: 120pt !important;
    height: auto !important;
  }

  .dn-role-chip {
    border: 0.5pt solid #999 !important;
    padding: 1pt 4pt !important;
    font-size: 8pt !important;
  }

  /* ════════════════════════════════════════════════════════════
   *  13. EXHIBITION PAGES: Preserve content density
   * ════════════════════════════════════════════════════════════ */

  /* Stats row: keep but simplify */
  .page-hero-stats,
  [class*="stats-row"],
  [class*="stat-bar"] {
    border: 0.5pt solid #ccc !important;
    padding: 6pt !important;
    margin: 8pt 0 !important;
  }

  /* Exhibition tier badge */
  .exh-tier-bar {
    display: none !important;
  }

  .exh-tier-badge {
    border: 1pt solid #000 !important;
    padding: 2pt 6pt !important;
    font-size: 8pt !important;
  }

  /* ════════════════════════════════════════════════════════════
   *  14. BIOGRAPHY PAGES: Expand all accordion panels
   * ════════════════════════════════════════════════════════════ */

  /* Phase 4 structured-data panels */
  .bio-accord-body[hidden] {
    display: block !important;
  }

  .bio-accord-chevron {
    display: none !important;
  }

  /* Era accordion bodies */
  .bio-era-body[hidden] {
    display: block !important;
  }

  .bio-era-chevron,
  .bio-era-toggle {
    pointer-events: none;
  }

  /* Card text truncation: show full text */
  .bx-card p,
  .landmark-card-deck,
  [class*="line-clamp"] {
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    display: block !important;
    overflow: visible !important;
  }

  /* ════════════════════════════════════════════════════════════
   *  15. PAGE HEADER: Archive identity on first page
   * ════════════════════════════════════════════════════════════ */

  /* Hero container: flatten for paper */
  .page-hero {
    position: static !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12pt 0 !important;
    margin: 0 0 12pt !important;
    border-bottom: 1pt solid #000 !important;
  }

  .page-hero-inner {
    position: static !important;
    z-index: auto !important;
  }

  .page-hero-eyebrow {
    font-size: 8pt !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  .page-hero-title {
    font-size: 18pt !important;
    margin: 4pt 0 !important;
  }

  .page-hero-deck {
    font-size: 10pt !important;
    font-style: italic;
  }

  /* ════════════════════════════════════════════════════════════
   *  16. BREADCRUMB: Print as a path line
   * ════════════════════════════════════════════════════════════ */

  .site-breadcrumb,
  .ex-breadcrumb,
  .dn-breadcrumb {
    position: static !important;
    border-bottom: none !important;
    box-shadow: none !important;
    font-size: 8pt !important;
    padding: 4pt 0 !important;
    margin-bottom: 8pt !important;
  }

  /* ════════════════════════════════════════════════════════════
   *  17. DIVIDERS: Simplify for print
   * ════════════════════════════════════════════════════════════ */

  .ex-divider,
  .dn-section-divider,
  .section-rule--fade,
  .section-rule--double,
  .section-rule--ornament,
  .divider-rivet,
  .brass-rule,
  hr {
    background: none !important;
    border: none !important;
    border-top: 0.5pt solid #999 !important;
    height: auto !important;
    margin: 10pt 0 !important;
  }

  /* Hide ornament pseudo-elements */
  .section-rule--ornament::before,
  .divider-rivet::before {
    display: none !important;
  }

  /* ════════════════════════════════════════════════════════════
   *  18. FOOTER: Minimal, just copyright
   * ════════════════════════════════════════════════════════════ */

  .site-footer {
    border-top: 0.5pt solid #999 !important;
    padding: 8pt 0 !important;
    margin-top: 16pt !important;
    font-size: 8pt !important;
    text-align: center;
  }

  .footer-text {
    display: block !important;
    font-size: 8pt !important;
  }

  /* ════════════════════════════════════════════════════════════
   *  19. PAGE MARGINS (if supported by browser)
   * ════════════════════════════════════════════════════════════ */

  @page {
    margin: 2cm 1.5cm;
    size: A4;
  }

  @page :first {
    margin-top: 1.5cm;
  }

}