/* Print Styles for PDF Export 
 *
 * IMPORTANT: To export with backgrounds, you MUST enable "Background graphics" 
 * in your browser's print dialog:
 * 
 * Chrome/Edge:  ☑ Background graphics (in "More settings")
 * Firefox:      ☑ Print backgrounds (in print dialog)
 * Safari:       ☑ Print backgrounds (in print dialog)
 * 
 * Without this setting enabled, backgrounds will NOT print regardless of CSS.
 */

/* CRITICAL: Force backgrounds outside @media print for better browser support */
html {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

@media print {
  /* Page setup for 1440x810 landscape format */
  @page {
    size: 1440px 810px;
    margin: 0;
  }

  /* Global print settings - force all colors and backgrounds */
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  html {
    width: 100% !important;
    height: 100% !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Hide password gate for print */
  #gate {
    display: none !important;
  }

  /* Show content always in print */
  #content {
    display: block !important;
  }

  /* Page wrapper for consistent sizing - Each section on its own page */
  .page-wrap {
    width: 100% !important;
    max-width: 100% !important;
    height: 810px !important;
    min-height: 810px !important;
    page-break-before: always;
    page-break-after: always;
    page-break-inside: avoid;
    break-before: page;
    break-after: page;
    break-inside: avoid;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    position: relative !important;
    box-sizing: border-box !important;
  }
  
  /* First page should not have break before */
  .page-wrap:first-child {
    page-break-before: auto;
    break-before: auto;
  }

  /* Force specific page backgrounds */
  .page-wrap.bg-cream,
  .page-wrap[class*="bg-cream"] {
    background: #eae8c9 !important;
    background-color: #eae8c9 !important;
  }

  .page-wrap.bg-cream-warm,
  .page-wrap[class*="bg-cream-warm"] {
    background: #f1eed5 !important;
    background-color: #f1eed5 !important;
  }

  .page-wrap.bg-brown,
  .page-wrap[class*="bg-brown"] {
    background: #381a05 !important;
    background-color: #381a05 !important;
  }

  .page-wrap.bg-terracotta,
  .page-wrap[class*="bg-terracotta"] {
    background: #88411e !important;
    background-color: #88411e !important;
  }

  /* Last page should not break after */
  .page-wrap:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  /* Preserve all Tailwind background colors */
  .bg-brown { background: #381a05 !important; background-color: #381a05 !important; }
  .bg-brown\/5 { background: rgba(56, 26, 5, 0.05) !important; background-color: rgba(56, 26, 5, 0.05) !important; }
  .bg-brown\/20 { background: rgba(56, 26, 5, 0.2) !important; background-color: rgba(56, 26, 5, 0.2) !important; }
  .bg-brown\/40 { background: rgba(56, 26, 5, 0.4) !important; background-color: rgba(56, 26, 5, 0.4) !important; }
  .bg-brown\/60 { background: rgba(56, 26, 5, 0.6) !important; background-color: rgba(56, 26, 5, 0.6) !important; }
  .bg-cream { background: #eae8c9 !important; background-color: #eae8c9 !important; }
  .bg-cream-warm { background: #f1eed5 !important; background-color: #f1eed5 !important; }
  .bg-cream-warm\/50 { background: rgba(241, 238, 213, 0.5) !important; background-color: rgba(241, 238, 213, 0.5) !important; }
  .bg-mustard { background: #ce8715 !important; background-color: #ce8715 !important; }
  .bg-mustard\/20 { background: rgba(206, 135, 21, 0.2) !important; background-color: rgba(206, 135, 21, 0.2) !important; }
  .bg-olive\/20 { background: rgba(97, 108, 36, 0.2) !important; background-color: rgba(97, 108, 36, 0.2) !important; }
  .bg-rose { background: #ca9f91 !important; background-color: #ca9f91 !important; }
  .bg-rose\/20 { background: rgba(202, 159, 145, 0.2) !important; background-color: rgba(202, 159, 145, 0.2) !important; }
  .bg-slate\/20 { background: rgba(148, 170, 178, 0.2) !important; background-color: rgba(148, 170, 178, 0.2) !important; }
  .bg-terracotta { background: #88411e !important; background-color: #88411e !important; }

  /* Force background on image containers */
  .bg-cover[style*="background-image"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Preserve gradient backgrounds */
  .p-cover {
    background: radial-gradient(at 30% 40%, rgba(255, 235, 180, 0.1) 0%, rgba(0, 0, 0, 0) 55%),
                linear-gradient(135deg, #b89856 0%, #a2884b 45%, #8a7339 100%) !important;
  }

  .p-between::before {
    content: "" !important;
    background: radial-gradient(at 80% 20%, rgba(148, 170, 178, 0.22), rgba(0, 0, 0, 0) 50%),
                radial-gradient(at 10% 90%, rgba(202, 159, 145, 0.2), rgba(0, 0, 0, 0) 55%) !important;
    position: absolute !important;
    inset: 0 !important;
  }

  .p-promise .left {
    background: linear-gradient(#94aab2 0%, #7a8e96 100%) !important;
  }

  .p-end {
    background: linear-gradient(135deg, #ca9f91 0%, #d4b0a3 50%, #eae8c9 100%) !important;
  }

  /* Preserve grain texture */
  .grain::after,
  .grain-light::after {
    content: "" !important;
    pointer-events: none !important;
    mix-blend-mode: multiply !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.22 0 0 0 0 0.10 0 0 0 0 0.02 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") !important;
    position: absolute !important;
    inset: 0 !important;
  }

  .grain::after { opacity: 0.55 !important; }
  .grain-light::after { opacity: 0.28 !important; }

  /* Preserve all text colors */
  .text-brown { color: #381a05 !important; }
  .text-brown-soft { color: #4a2510 !important; }
  .text-terracotta { color: #88411e !important; }
  .text-olive { color: #616c24 !important; }
  .text-mustard { color: #ce8715 !important; }
  .text-rose { color: #ca9f91 !important; }
  .text-slate { color: #94aab2 !important; }
  .text-cream { color: #eae8c9 !important; }
  .text-cream-warm { color: #f1eed5 !important; }
  .text-cream-soft { color: #e2dfc0 !important; }

  /* Preserve border colors */
  .border-brown { border-color: #381a05 !important; }
  .border-brown\/10 { border-color: rgba(56, 26, 5, 0.1) !important; }
  .border-brown\/15 { border-color: rgba(56, 26, 5, 0.15) !important; }
  .border-brown\/20 { border-color: rgba(56, 26, 5, 0.2) !important; }
  .border-brown\/25 { border-color: rgba(56, 26, 5, 0.25) !important; }
  .border-cream { border-color: #eae8c9 !important; }
  .border-cream\/10 { border-color: rgba(234, 232, 201, 0.1) !important; }
  .border-cream\/20 { border-color: rgba(234, 232, 201, 0.2) !important; }
  .border-mustard { border-color: #ce8715 !important; }
  .border-rose { border-color: #ca9f91 !important; }
  .border-rose\/10 { border-color: rgba(202, 159, 145, 0.1) !important; }
  .border-rose\/20 { border-color: rgba(202, 159, 145, 0.2) !important; }
  .border-terracotta { border-color: #88411e !important; }

  /* Individual pages - prevent content from breaking across pages.
     NOTE: Only .page here (not section.page) — the element+class selector
     "section.page" has specificity 0-1-1 which would beat .grid/.flex at 0-1-0,
     causing grid/flex sections to wrongly render as block and lose their columns. */
  .page {
    width: 100% !important;
    height: 810px !important;
    min-height: 810px !important;
    max-height: 810px !important;
    page-break-inside: avoid;
    break-inside: avoid;
    overflow: hidden !important;
    display: block !important;
    position: relative !important;
  }

  /* Restore grid/flex for pages that need them — these must come AFTER the
     .page rule above so equal-specificity !important cascade picks the later one */
  section.page.grid, .page.grid { display: grid !important; }
  section.page.flex, .page.flex { display: flex !important; }
  
  /* Allow content inside pages to fit properly */
  .page > *,
  section.page > * {
    max-width: 100%;
  }

  /* Ensure SVGs are visible */
  svg,
  svg * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Prevent orphaned elements */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }

  /* Images and graphics */
  img, 
  svg {
    page-break-inside: avoid;
  }

  /* Ensure proper font rendering */
  body,
  .font-sans {
    font-family: 'Rubik', sans-serif !important;
  }

  .font-display {
    font-family: 'DM Serif Display', serif !important;
  }

  .font-jp {
    font-family: 'Noto Sans JP', sans-serif !important;
  }

  /* Fix any potential layout issues in print */
  .page-fixed-height {
    height: 810px !important;
  }

  /* Ensure grid layouts work properly */
  .grid {
    display: grid !important;
  }

  .flex {
    display: flex !important;
  }

  /* Preserve all Tailwind layout utilities */
  .relative { position: relative !important; }
  .absolute { position: absolute !important; }
  .overflow-hidden { overflow: hidden !important; }
  .h-full { height: 100% !important; }
  .w-full { width: 100% !important; }
  
  /* Ensure all grid layouts have proper gap preservation */
  .gap-6 { gap: 1.5rem !important; }
  .gap-8 { gap: 2rem !important; }
  .gap-12 { gap: 3rem !important; }
  .gap-16 { gap: 4rem !important; }
  
  /* Preserve padding overrides at large sizes */
  .lg\:px-16 { padding-left: 4rem !important; padding-right: 4rem !important; }
  .lg\:py-24 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
  .lg\:py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
  
  /* Grid column templates for complex grids */
  .grid-cols-\[60px_1fr\] { grid-template-columns: 60px 1fr !important; }
  
  /* Preserve responsive utilities at print size (1440px = xl breakpoint) */
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  
  /* Column spans for complex layouts */
  .xl\:col-span-2 { grid-column: span 2 / span 2 !important; }
  .xl\:col-span-3 { grid-column: span 3 / span 3 !important; }
  .col-span-1 { grid-column: span 1 / span 1 !important; }
  
  /* Fix Brand Promise page layout (md:grid-cols-2 xl:grid-cols-5) */
  .p-promise.grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  
  .p-promise .left {
    grid-column: span 2 / span 2 !important;
  }
  
  .p-promise .bg-terracotta {
    grid-column: span 3 / span 3 !important;
  }
  
  /* Preserve flex direction */
  .md\:flex-row { flex-direction: row !important; }
  .lg\:flex-row { flex-direction: row !important; }
  .xl\:flex-row { flex-direction: row !important; }
  
  /* Preserve alignment utilities */
  .lg\:items-center { align-items: center !important; }
  .lg\:items-end { align-items: flex-end !important; }
  .xl\:items-center { align-items: center !important; }
  .xl\:items-end { align-items: flex-end !important; }

  /* Force 2xl (1536px) layouts at print resolution (1440px = xl, not 2xl)
     Print renders at 1440px so 2xl breakpoint never fires — apply manually */
  .\32 xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .\32 xl\:col-span-1 { grid-column: span 1 / span 1 !important; }

  /* Fix oversized inner image containers that exceed page height at xl breakpoint.
     xl:h-180 = 720px is too tall for an 810px page with padding and header/footer.
     Make it flex-grow to fill remaining space instead. */
  .page .xl\:h-180,
  .page .lg\:h-150 {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 0% !important;
  }
}