/* /spiritual/gods/styles/print.css -- print stylesheet for the gods tree.
 *
 * WHY THIS FILE EXISTS (2026-09-23): the 93 deity pages and 73 blog pages under
 * /spiritual/gods/ carried NO print styling whatsoever -- no @page, no @media
 * print, not in the page, not in styles/theme.css, not in /assets/hub-shell.css.
 * A live render of D027-ardhanarishvara.html came out 612x792 US LETTER with the
 * dark theme and the whole navigation printed onto the paper.
 *
 * WHY NOT THE ONE THAT ALREADY EXISTED: gods/assets/css/style.css does carry a
 * correct A4 print block -- but no page links it, and its selectors are the
 * ASTROLOGY app's (.ga-chart, .dasha-bar, .gc-house, .bf-field). These pages are
 * built from .site-header / .hero / .portal-wrap / .portal-sidebar / .portal-main.
 * Copying that block would have hidden nothing and fixed nothing. Every selector
 * below was read off the live markup.
 *
 * Loaded with media="print", so it cannot affect the screen.
 */

@page { size: A4; margin: 14mm 12mm 16mm; }

@media print {

  /* Paper is white and ink is black. The site is a dark theme; without this the
     printer is asked to lay down a full-bleed dark background on every sheet. */
  html, body {
    background: #fff !important;
    color: #111 !important;
    font-size: 10.5pt;
    line-height: 1.5;
  }

  /* Backgrounds and background-images are DROPPED by every browser on paper
     unless this is set. The deity artwork and the section tints are carried that
     way, so without this line the page prints with holes where the art was. */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* --- chrome off ------------------------------------------------------- */
  /* Navigation, search, buttons and the floating contact bar are controls. On
     paper they are dead ink. hs-dock and gd-contactbar are injected at runtime
     by hub-shell.js / contactbar.js, so they must be named here explicitly. */
  .site-header, .main-nav, .nav-toggle, .bar.container > .main-nav,
  .bottom-nav, .site-footer, .credit, .ab-credit,
  .gd-contactbar, .gd-cb, .hs-dock, .hs-dock-bar,
  .side-search, #pageSearch, #sidebarCatSelect,
  .hero-cta, .cta-row, .btn, .tabs, .share-row, .breadcrumbs-nav {
    display: none !important;
  }

  /* The sidebar is a navigation rail: category picker, search, related links.
     None of it is the document. Dropping it also gives the text the full width. */
  .portal-sidebar { display: none !important; }

  /* --- one column, full width ------------------------------------------- */
  .portal-wrap, .hero-grid, .container {
    display: block !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: none !important;
  }
  .portal-main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* --- keep the artwork ------------------------------------------------- */
  /* The deity image is the reason many of these pages get printed at all. */
  .hero-art, .hero-art img, figure, figure img, .topic-body img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* --- don't split things that read as units ---------------------------- */
  .virtue-item, .side-card, .quote-card, .category-info, .story-meta,
  figure, table, blockquote, li {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  h1, h2, h3, h4 {
    break-after: avoid;
    page-break-after: avoid;
    color: #111 !important;
  }

  /* The hero is a full-viewport banner on screen; on paper it is a title. */
  .hero {
    min-height: 0 !important;
    padding: 0 0 6mm !important;
  }

  /* A printed link cannot be clicked, so the destination has to be readable --
     but only for real external destinations, not for every in-page anchor. */
  .topic-body a[href^="http"]::after,
  .category-content a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #444;
    word-break: break-all;
  }
}