/* ============================================================
   Sanctum Print Templates  —  /assets/css/print-templates.css
   ============================================================

   Shared print stylesheet for every Brotherhood Pass tool.
   Built once. Used 4x (Rule of Life / Priest of the Home /
   Navigating Annulments / Fight Club).

   Covenant gate #5: every paid tool ships multiple print
   outputs.  This stylesheet provides the page-size + cut-mark
   + typography rules for all of them, so each tool only
   has to author the content.

   Page-size primitives  (all use real inches, NOT pixels):
     .sanctum-print.pocket-card    3.5"  x 2"     credit-card stock
     .sanctum-print.confession-card 3.5" x 5"     index-card stock
     .sanctum-print.missal-insert  4.25" x 5.5"   half-letter
     .sanctum-print.wall-sheet     8.5"  x 11"    letter, portrait
     .sanctum-print.wall-sheet-l   11"   x 8.5"   letter, landscape

   Two-sided primitives (each .face is one printed face):
     <article class="sanctum-print pocket-card two-sided">
       <div class="face front"> ... </div>
       <div class="face back">  ... </div>
     </article>

   On screen, the .sanctum-print frame is rendered at scale so
   the user sees an accurate preview before clicking print.
   On print, the screen chrome (banners, navigation, instructions,
   the rest of the page) is suppressed; only .sanctum-print frames
   are visible, one per physical sheet.

   Typography: inherits the project's Cinzel / Cormorant Garamond
   / EB Garamond stack.  Tools are responsible for the
   font-family @import — this stylesheet assumes those families
   are already loaded by the host page.

   Locked 2026-05-16, Fire #13 (shared-infrastructure track).
*/


/* ============================================================
   ROOT VARS (inherit if host page sets them; otherwise default)
   ============================================================ */
.sanctum-print {
  --sp-paper:      var(--paper, #f4eedd);
  --sp-paper-soft: var(--paper-soft, #e8e0c8);
  --sp-ink:        var(--dark, #0A0A0A);
  --sp-ink-soft:   #2a2a2a;
  --sp-gold:       var(--gold, #c9a96a);
  --sp-gold-bright:var(--gold-bright, #FFD400);
  --sp-line:       rgba(10, 10, 10, 0.18);
  --sp-line-soft:  rgba(10, 10, 10, 0.08);
  --sp-rose:       #b34a3a;     /* sparingly: warnings, refusals */
}


/* ============================================================
   SCREEN VIEW (preview mode)
   ============================================================ */
@media screen {

  .sanctum-print {
    display: block;
    background: var(--sp-paper);
    color: var(--sp-ink);
    font-family: 'EB Garamond', Georgia, serif;
    border: 1px solid var(--sp-line);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    margin: 1.5rem auto;
    overflow: hidden;
    position: relative;
  }

  /* Real inches → CSS px assuming 96dpi for the preview.
     Print rules below override with real physical inches. */
  .sanctum-print.pocket-card        { width: 3.5in;  min-height: 2in;    }
  .sanctum-print.confession-card    { width: 3.5in;  min-height: 5in;    }
  .sanctum-print.missal-insert      { width: 4.25in; min-height: 5.5in;  }
  .sanctum-print.wall-sheet         { width: 8.5in;  min-height: 11in;   }
  .sanctum-print.wall-sheet-l       { width: 11in;   min-height: 8.5in;  }

  /* Two-sided cards stack faces with a visible divider on screen
     so the user can see front + back without printing. */
  .sanctum-print.two-sided {
    border: none;
    background: transparent;
    box-shadow: none;
  }
  .sanctum-print.two-sided .face {
    background: var(--sp-paper);
    border: 1px solid var(--sp-line);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    margin: 0 auto 1.25rem;
    position: relative;
  }
  .sanctum-print.two-sided.pocket-card     .face { width: 3.5in;  min-height: 2in;   }
  .sanctum-print.two-sided.confession-card .face { width: 3.5in;  min-height: 5in;   }
  .sanctum-print.two-sided.missal-insert   .face { width: 4.25in; min-height: 5.5in; }

  /* Tiny "FRONT" / "BACK" labels for screen only. */
  .sanctum-print.two-sided .face::before {
    content: attr(data-face-label);
    position: absolute;
    top: -0.85rem;
    left: 0;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sp-gold);
  }
  .sanctum-print.two-sided .face.front::before { content: 'FRONT'; }
  .sanctum-print.two-sided .face.back::before  { content: 'BACK'; }

  /* A small print-this control area, opt-in via .sanctum-print-controls */
  .sanctum-print-controls {
    text-align: center;
    margin: 1rem auto 0.5rem;
  }
  .sanctum-print-controls button {
    background: var(--dark, #0A0A0A);
    color: var(--gold-bright, #FFD400);
    border: 1px solid var(--gold, #c9a96a);
    padding: 0.6rem 1.4rem;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 2px;
  }
  .sanctum-print-controls button:hover {
    background: var(--gold-bright, #FFD400);
    color: var(--dark, #0A0A0A);
  }
  .sanctum-print-controls .hint {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--paper-dim, #9a8d6f);
    font-style: italic;
  }
}


/* ============================================================
   PRINT VIEW (the moment of truth)
   ============================================================ */
@media print {

  /* Suppress all screen chrome.  Host page should add the
     .sanctum-no-print class to any wrapper that must NOT
     reach paper (navigation, banners, controls, the rest
     of the document). */
  .sanctum-no-print,
  .sanctum-no-print * { display: none !important; }

  /* Reset host body so the page is white and unstyled,
     letting the .sanctum-print frame own the entire page. */
  html, body {
    background: #ffffff !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Each .sanctum-print frame is its own physical page. */
  .sanctum-print {
    background: #ffffff !important;
    color: #000000 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0.25in;
    page-break-after: always;
    page-break-inside: avoid;
    overflow: visible;
  }
  .sanctum-print:last-child { page-break-after: auto; }

  /* Each .face of a two-sided card is its own physical page. */
  .sanctum-print.two-sided     { padding: 0; background: transparent !important; }
  .sanctum-print.two-sided .face {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.2in;
    page-break-after: always;
    page-break-inside: avoid;
  }
  .sanctum-print.two-sided .face::before { display: none !important; }

  /* Match @page size to the frame size so print previews
     don't add letter-page padding around the card. */
  .sanctum-print.pocket-card,
  .sanctum-print.two-sided.pocket-card .face {
    @page { size: 3.5in 2in; margin: 0; }
    width:  3.5in;
    height: 2in;
  }
  .sanctum-print.confession-card,
  .sanctum-print.two-sided.confession-card .face {
    @page { size: 3.5in 5in; margin: 0; }
    width:  3.5in;
    height: 5in;
  }
  .sanctum-print.missal-insert,
  .sanctum-print.two-sided.missal-insert .face {
    @page { size: 4.25in 5.5in; margin: 0; }
    width:  4.25in;
    height: 5.5in;
  }
  .sanctum-print.wall-sheet {
    @page { size: letter portrait; margin: 0.5in; }
    width:  7.5in;
    height: 10in;
  }
  .sanctum-print.wall-sheet-l {
    @page { size: letter landscape; margin: 0.5in; }
    width:  10in;
    height: 7.5in;
  }

  /* Hide controls block on paper. */
  .sanctum-print-controls { display: none !important; }
}


/* ============================================================
   SHARED CONTENT PRIMITIVES (used by all card sizes)
   ============================================================ */

.sanctum-print h1,
.sanctum-print h2,
.sanctum-print h3,
.sanctum-print .sp-title {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 0.4em;
  line-height: 1.2;
  color: var(--sp-ink);
}

.sanctum-print h1, .sanctum-print .sp-title {
  font-size: 1.05rem;
  text-align: center;
  text-transform: uppercase;
  border-bottom: 1px solid var(--sp-gold);
  padding-bottom: 0.35rem;
}

.sanctum-print h2 { font-size: 0.9rem;  }
.sanctum-print h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sp-gold); }

.sanctum-print p,
.sanctum-print li {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.78rem;
  line-height: 1.45;
  margin: 0 0 0.5em;
  color: var(--sp-ink);
}

.sanctum-print ul,
.sanctum-print ol {
  margin: 0 0 0.5em;
  padding-left: 1.1em;
}

.sanctum-print strong { color: var(--sp-ink); }
.sanctum-print em     { font-family: 'Cormorant Garamond', serif; font-style: italic; }

/* Layout containers — most tools use one of these inside .face */
.sp-pad       { padding: 0.18in; }
.sp-center    { text-align: center; }
.sp-tagline   {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-gold);
  text-align: center;
  margin-top: 0.4rem;
}
.sp-divider {
  border: none;
  border-top: 1px solid var(--sp-line);
  margin: 0.4rem 0;
}
.sp-divider-gold {
  border: none;
  border-top: 1px solid var(--sp-gold);
  margin: 0.5rem 0;
}

/* Cite stamp at the bottom of any frame */
.sp-cite {
  font-family: 'EB Garamond', serif;
  font-size: 0.6rem;
  font-style: italic;
  color: var(--sp-ink-soft);
  border-top: 1px solid var(--sp-line-soft);
  padding-top: 0.25rem;
  margin-top: 0.4rem;
  text-align: center;
}

/* Liturgical-color swatch (mirrors the Rule of Life Builder
   badge row palette).  Tools render <span class="sp-color sp-color-white">…</span> */
.sp-color {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  border: 1px solid var(--sp-ink);
  vertical-align: middle;
  margin-right: 0.2em;
}
.sp-color-white   { background: #ffffff; }
.sp-color-red     { background: #b22222; }
.sp-color-purple  { background: #6c3082; }
.sp-color-green   { background: #2f5d3a; }
.sp-color-gold    { background: var(--sp-gold-bright); }
.sp-color-rose    { background: #d18ba7; }
.sp-color-black   { background: #000000; }

/* Sanctum brand mark in the corner of any printed face.
   Tools render: <span class="sp-mark">1765 SANCTUM</span> */
.sp-mark {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sp-gold);
  display: inline-block;
}

/* Wall-sheet specific helpers */
.sanctum-print.wall-sheet h1,
.sanctum-print.wall-sheet-l h1 {
  font-size: 1.4rem;
}
.sanctum-print.wall-sheet h2,
.sanctum-print.wall-sheet-l h2 {
  font-size: 1.05rem;
}
.sanctum-print.wall-sheet p,
.sanctum-print.wall-sheet li,
.sanctum-print.wall-sheet-l p,
.sanctum-print.wall-sheet-l li {
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Three-column wall sheet (Rule of Life: daily / weekly / monthly) */
.sp-cols-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.35in;
}
.sp-cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3in;
}

/* The "morning offering" / standing prayer block — used in many tools */
.sp-prayer {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 0.3rem 0.5rem;
  border-left: 2px solid var(--sp-gold);
  margin: 0.5rem 0;
}
.sanctum-print.wall-sheet .sp-prayer,
.sanctum-print.wall-sheet-l .sp-prayer { font-size: 1rem; }

/* Box for a numbered list of items (Benedict's 74 instruments,
   examination questions, the eight beatitudes, etc.) */
.sp-list-numbered {
  list-style: decimal;
  font-size: 0.72rem;
  line-height: 1.35;
}
.sanctum-print.wall-sheet .sp-list-numbered { font-size: 0.85rem; }