/**
 * Print styles for Hinario Publisher.
 * Used by Paged.js for pagination, @page, and mirrored margins.
 * Design inspired by mobile app (Lora, repeat borders) but no shared deps.
 */

@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400&family=Public+Sans:wght@400;700;900&display=swap");

/* ---------------------------------------------------------------------------
   @page: A4, A5, A6 with gutter for binding
   --------------------------------------------------------------------------- */

/* Page size set via usePrintHead in App; base margins */
@page {
  margin-top: 18mm;
  margin-bottom: 12mm;
  margin-left: 22mm;
  margin-right: 12mm;
}

/* Base margins: symmetric. Duplex gutter overrides in print-duplex.css */

/* Page size variants - Paged.js applies via data-page-size (A4 height −2mm for Safari print) */
[data-page-size="A4"] { --page-width: 210mm; --page-height: 296.8mm; }
[data-page-size="A5"] { --page-width: 148mm; --page-height: 210mm; }
[data-page-size="A6"] { --page-width: 105mm; --page-height: 148mm; }

/* ---------------------------------------------------------------------------
   Base typography (mobile app reference: Lora body, Public Sans titles)
   --------------------------------------------------------------------------- */

.print-layout {
  font-family: "Lora", Georgia, serif;
  font-size: var(--font-size-base, 10pt);
  line-height: 1.5;
  color: #1e293b;
}

.print-cover__title,
.print-hino__title {
  font-family: "Public Sans", system-ui, sans-serif;
  font-weight: 700;
}

.print-hino__author,
.print-cover__author {
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  color: #64748b;
}

/* ---------------------------------------------------------------------------
   Cover page
   --------------------------------------------------------------------------- */

.print-layout__cover {
  break-after: page;
  text-align: center;
  /* Extra two blank lines (2 × line-height) before the title */
  padding: calc(2em + 3em) 0 2em 0;
}

/* ---------------------------------------------------------------------------
   Owner page (blank page with centered box)
   --------------------------------------------------------------------------- */

/* Owner line + box only — keep total block well under @page body height (Paged.js
   overflows unbreakable nodes). Page break is on .print-page-break-after sibling. */
.print-owner-content {
  box-sizing: border-box;
  /* Three blank lines before "This hinário belongs to:" / PT equivalent */
  padding: calc(12mm + (3 * 1.5em)) 4mm 14mm;
  text-align: center;
}

.print-page-break-after {
  break-after: page;
  page-break-after: always;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  visibility: hidden;
}

.print-page-break-before {
  break-before: page;
  page-break-before: always;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  visibility: hidden;
}

.print-owner-page__label {
  margin: 0 0 1em;
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 1em;
}

.print-owner-page__box {
  margin: 0 auto;
  width: 55mm;
  max-width: 100%;
  height: 3em;
  border: 0.4px solid #606060;
}

/* Empty lines between owner box and credit line (same page as owner block).
   Previously 3 lines; +3 more before "This hinário was created…" / PT equivalent. */
.print-owner-page__post-box-gap {
  height: calc(6 * 1.5em);
  min-height: calc(6 * 1.5em);
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.print-footer-page__text {
  margin: 0;
  font-family: "Lora", Georgia, serif;
  font-size: 0.95em;
  text-align: center;
}

.print-cover__title {
  /* ~30% larger than previous 1.8em */
  font-size: 2.34em;
  margin: 0 0 0.5em;
  line-height: 1.2;
}

.print-cover__author {
  /* ~30% larger than previous 1.1em */
  font-size: 1.43em;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Hino block: each starts on a new page (inline break-before: page in PrintLayout)
   --------------------------------------------------------------------------- */

.print-hino {
  page-break-inside: avoid;
}

.print-hino__header {
  margin-bottom: 1em;
}

.print-hino__number {
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 1.4em;
  font-weight: 700;
  color: #111827;
  line-height: 1.1;
}

.print-hino__title {
  font-size: 1.4em;
  margin: 0;
  text-transform: uppercase;
}

.print-hino__author {
  font-size: 0.95em;
  margin: 0;
  text-align: left;
  margin-left: calc(2em + 1.2em + 0.6em);
  color: #111827;
}

.print-hino__meta {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.75rem;
  margin-top: 0.15em;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.print-hino__notation {
  margin: 0;
  font-size: 0.95em;
  font-style: italic;
  color: #111827;
  margin-left: auto;
  text-align: right;
}

.print-hino__heading {
  text-align: center;
}

.print-hino__rule {
  height: 0;
  border-top: 1px solid #000000;
  margin: 0.075em auto 0.125em;
  width: 80%;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.print-hino__last-block {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* SLE = Sol, Lua, Estrelas: sun, moon, star icons centered */
.print-sle {
  /* One blank line (body line-height) before SLE */
  margin-top: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #1e293b;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.print-sle__icon {
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Strophes and lines (aligned with mobile layout: l-notation, bars, text)
   --------------------------------------------------------------------------- */

.print-strophe {
  margin-bottom: 1em;
  /* Keep each stanza together on one page */
  page-break-inside: avoid;
  break-inside: avoid-page;
}

.print-strophe:last-child {
  margin-bottom: 0;
}

/* Extra blank line before the first stanza in each hino body */
.print-hino__body > .print-strophe:first-child {
  margin-top: 1em;
}

.print-hino {
  /* Let the absolute page-turn marker anchor to the full page content area. */
  height: 100%;
  display: flex;
  flex-direction: column;
}

.print-hino__body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Extra gap at top of continuation pages after a page break */
.print-hino__resume-gap {
  /* From "2 blank lines" to "4 blank lines" (continuation pages only). */
  height: 4em;
}

/* Page-turn arrow on pages that break to a following page of the same hino */
.print-page-turn-marker {
  position: absolute;
  right: 0;
  bottom: 0;
  /* Keep it in the page margin area (same anchor as bottom/right content). */
  width: 4mm;
  height: 4mm;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  /* Lighter visual weight for the page-turn cue. */
  font-size: 4mm;
  line-height: 1;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.print-line {
  display: flex;
  align-items: baseline;
  min-height: 1.4em;
}

.print-line--paragraph {
  margin-top: 0.7em;
}

.print-line__lnotation {
  width: 2em;
  text-align: right;
  padding-right: 0.35em;
  font-size: 0.8em;
  color: #6b7280;
}

.print-line__bars {
  position: relative;
  width: 1.2em;
  margin-right: 0.6em;
  min-height: 1.2em;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.print-line__bar-layer {
  position: absolute;
  width: 1px;
  min-width: 1px;
  min-height: 1em;
  background: #000000;
  flex-shrink: 0;
  transform: translateY(5px);
}

.print-line__content {
  flex: 1;
}

.print-line__text {
  display: inline-block;
}

/* (Page-turn markers intentionally omitted in print layout:
   can only be set reliably with a pagination engine.) */

/* ---------------------------------------------------------------------------
   N-up imposition layout (4-up A6 on A4)
   --------------------------------------------------------------------------- */

@media print {
  /* Hide Paged.js own preview DOM only in print context,
     so it does not interfere while Paged.js is still laying out. */
  /* Keep .pagedjs_margin in layout when imposition margins are 0 (grid slots). */
  .pagedjs_pages {
    display: none !important;
  }

  /* Same as App.css: never print raw export source with imposition (double pages). */
  .print-export-source {
    display: none !important;
  }

  @page {
    size: 210mm 296.8mm;
    margin: 0 !important;
  }

  html,
  body {
    width: 210mm !important;
    max-width: 210mm !important;
    height: 296.8mm !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #root,
  .print-preview-pane,
  .print-preview-pane__frame-wrapper,
  .print-preview-pane__content,
  .hinario-publisher__layout {
    display: block !important;
    width: 210mm !important;
    max-width: 210mm !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Remove any Paged.js debug frames/edges from the final PDF */
  .pagedjs_page,
  .pagedjs_sheet,
  .pagedjs_pagebox,
  .pagedjs_page_content {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-clip: padding-box !important;
  }

  .imposition-root {
    width: 210mm !important;
    max-width: 210mm !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* A4 sequential print: full page shell, not A6 vars */
  .one-up-preview .pagedjs_page--a4,
  .one-up-preview .pagedjs_page--a4 .pagedjs_sheet {
    --pagedjs-width: 210mm !important;
    --pagedjs-height: 296.8mm !important;
    --pagedjs-pagebox-width: 210mm !important;
    --pagedjs-pagebox-height: 296.8mm !important;
    --pagedjs-margin-top: 18mm !important;
    --pagedjs-margin-bottom: 12mm !important;
    --pagedjs-margin-left: 22mm !important;
    --pagedjs-margin-right: 12mm !important;
    width: 210mm !important;
    height: 296.8mm !important;
  }

  .imposition-sheet {
    width: 210mm !important;
    height: 296.8mm !important;
    max-width: 210mm !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Do not print preview-only sheet outline/grid borders */
  .imposition-grid {
    border: none !important;
  }

  /* Cut marks (ticks + cross) should print when enabled */
  .imposition-sheet__cut-marks {
    visibility: visible !important;
    display: block !important;
    z-index: 999 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .imposition-cut-line {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    border-color: #9ca3af !important;
  }

  /* No UI copy on the PDF */
  .print-preview-pane__title,
  .one-up-preview__label,
  .one-up-preview__num,
  .imposition-root__hint,
  .imposition-root > p,
  .imposition-sheet__label,
  .imposition-slot__debug-label {
    display: none !important;
  }

  .one-up-preview__stack,
  .one-up-preview__slot {
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .one-up-preview__clone {
    margin: 0 !important;
    padding: 0 !important;
  }

  .one-up-preview__clone {
    box-shadow: none !important;
  }

  .imposition-sheet:last-child {
    break-after: auto !important;
    page-break-after: auto !important;
  }
}

.imposition-root {
  display: block;
  width: 210mm;
  font-family: "Lora", Georgia, serif;
}

.imposition-sheet {
  position: relative;
  box-sizing: border-box;
  width: 210mm;
  height: 296.8mm;
  margin: 0 0 6px;
  padding: 0;
  overflow: visible;
  background: #ffffff;
  break-after: page;
  page-break-after: always;
}

/* Dotted center lines (same geometry as former solid crop lines) */
.imposition-sheet__cut-marks {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.imposition-cut-line {
  position: absolute;
  box-sizing: border-box;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* 1 cm each, dotted, centered on former full cut lines (not edge-to-edge) */
.imposition-cut-line--vertical {
  left: 50%;
  top: 50%;
  width: 0;
  height: 10mm;
  transform: translate(-50%, -50%);
  border-left: 0.2pt dotted #c5cdd6;
}

.imposition-cut-line--horizontal {
  left: 50%;
  top: 50%;
  width: 10mm;
  height: 0;
  transform: translate(-50%, -50%);
  border-top: 0.2pt dotted #c5cdd6;
}

/* Mid-edge: 1 cm inward from each side */
.imposition-cut-line--edge-top {
  left: 50%;
  top: 0;
  width: 0;
  height: 10mm;
  transform: translateX(-50%);
  border-left: 0.2pt dotted #c5cdd6;
}

.imposition-cut-line--edge-bottom {
  left: 50%;
  bottom: 0;
  width: 0;
  height: 10mm;
  transform: translateX(-50%);
  border-left: 0.2pt dotted #c5cdd6;
}

.imposition-cut-line--edge-left {
  left: 0;
  top: 50%;
  width: 10mm;
  height: 0;
  transform: translateY(-50%);
  border-top: 0.2pt dotted #c5cdd6;
}

.imposition-cut-line--edge-right {
  right: 0;
  top: 50%;
  width: 10mm;
  height: 0;
  transform: translateY(-50%);
  border-top: 0.2pt dotted #c5cdd6;
}

.imposition-sheet__side {
  box-sizing: border-box;
  width: 210mm;
  height: 296.8mm;
  padding: 0;
  margin: 0;
  display: block;
  position: relative;
}

/* On-screen only; does not consume vertical space (avoids shrinking the grid below A4). */
.imposition-sheet__label {
  position: absolute;
  right: 2mm;
  bottom: 1mm;
  margin: 0;
  font-size: 0.65rem;
  color: #6b7280;
  text-align: right;
  pointer-events: none;
  z-index: 2;
}

/* 2×2 on A4 sheet (296.8mm — Safari); rows = half sheet */
.imposition-grid {
  display: grid;
  grid-template-columns: 105mm 105mm;
  grid-template-rows: 148.4mm 148.4mm;
  width: 210mm;
  height: 296.8mm;
  margin: 0;
  padding: 0;
  flex: none;
  box-sizing: border-box;
  border: 0.2pt dotted #c5cdd6;
}

.imposition-slot {
  position: relative;
  box-sizing: border-box;
  width: 105mm;
  height: 148.4mm;
  border: none;
  overflow: visible;
}

.imposition-slot__inner {
  width: 105mm;
  height: 148.4mm;
  margin: 0;
  padding: 0;
  overflow: visible;
  display: block;
}

@media print {
  .imposition-sheet {
    overflow: hidden !important;
  }
  .imposition-slot {
    border: none !important;
    overflow: hidden !important;
  }
  .imposition-slot__inner {
    overflow: hidden !important;
  }

  .imposition-grid {
    border: none !important;
  }
}

.imposition-slot__debug-label {
  position: absolute;
  right: 2mm;
  top: 2mm;
  padding: 0.5mm 1mm;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  font-size: 0.6rem;
  color: #111827;
}

/* ---------------------------------------------------------------------------
   Legacy Safari (< 18) specific fixes for Paged.js extra blank pages
   --------------------------------------------------------------------------- */
.is-legacy-safari .imposition-sheet {
  margin-bottom: 0 !important;
}

.is-legacy-safari .pagedjs_page {
  max-height: calc(var(--pagedjs-height) - 0.5px) !important;
  contain: size layout !important;
}

.is-legacy-safari .pagedjs_margin-bottom {
  height: 0px !important;
  min-height: 0px !important;
  overflow: hidden !important;
}

.is-legacy-safari .pagedjs_pagebox {
  grid-template-rows: [header] var(--pagedjs-margin-top) [page] 1fr [footer] 0px !important;
  margin-bottom: -1px !important;
}

/* ---------------------------------------------------------------------------
   Safari 17 "Emergency Patch" for Paged.js blank page issue
   --------------------------------------------------------------------------- */
@media print {
  /* 1. Remove vertical margin from imposition sheet and avoid forcing extra page breaks */
  .imposition-sheet {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 2. Constrain Paged.js containers for Safari 17 */
  .pagedjs_pages,
  .pagedjs_page,
  .imposition-root .pagedjs_sheet {
    overflow: hidden !important;
    max-height: var(--pagedjs-height);
    /* Prevent rounding errors from leaking out */
    contain: paint;
  }

  /* 3. Sub-pixel buffer: shrink inner pagebox slightly without changing @page size */
  .imposition-root .pagedjs_pagebox {
    max-height: calc(var(--pagedjs-pagebox-height) - 0.5mm) !important;
  }

  /* 5. Remove ghost margin elements at bottom of page */
  .pagedjs_margin-bottom,
  .pagedjs_margin-bottom-left,
  .pagedjs_margin-bottom-right {
    display: none !important;
    height: 0 !important;
  }
}

/* (Safari < 18) specific hack intentionally removed here to avoid cumulative vertical drift */