/*
 * Shared styles for the template editor and example variant pages.
 * Provides an A4-like paper container, responsive behavior, editing helpers,
 * and print styling.
 */

/* Simple A4 paper: one element that looks right on screen and prints as A4 */
:root { --paper-w: 210mm; --paper-h: 297mm; --screen-gutter: 16px; --screen-padding: 20mm; }

/* Screen layout */
.paper {
  background: #fff;
  color: #000;
  width: var(--paper-w);
  min-height: var(--paper-h);
  padding: var(--screen-padding);
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12pt;
  line-height: 1.5;
  transform-origin: top center;
  margin: var(--screen-gutter) auto;
}

/* Scale the paper to fit mobile width while keeping A4 proportions */
@media (max-width: 768px) {
  .paper {
    /* Fluid A4: fill width without transform to avoid horizontal shift */
    width: calc(100vw - (2 * var(--screen-gutter)));
    /* 20mm padding on a 210mm page = ~9.5238% of width */
    padding: 9.5238%;
    margin: var(--screen-gutter) auto;
    transform: none;
  }
}

/* Editing helpers */
.editable-line { white-space: pre-wrap; }
.right { text-align: right; }
.bold { font-weight: 600; }
.italic { font-style: italic; }

/* Print: only the paper, exactly A4 with 1in margins inside the paper */
@page { size: A4; margin: 0; }
@media print {
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; height: auto !important; }

  /* Hide site chrome and non-essential sections */
  nav, footer, section.flex, .breadcrumbs, .action-buttons, .editor-related-links { display: none !important; }

  div.flex, section.w-full, #editor-container { margin: 0 !important; padding: 0 !important; }

  /* Print the paper as a single A4 page with 1in inner margins */
  .paper {
    aspect-ratio: 210 / 297;
    width: var(--paper-w) !important;
    min-height: var(--paper-h) !important;
    padding: 25.4mm !important; /* 1 inch margin inside the page */
    margin: 0 auto !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    position: static !important;
    page-break-inside: avoid !important;
    page-break-after: avoid !important;
    box-sizing: border-box;
  }
}