/* --------------------------------------------------------------------------
   print.css - shared rules for both the visitor's Ctrl+P and the Playwright-
   driven one-pager / slide-deck builds in CI. Single source of truth so the
   two paths can never drift.

   Loaded via <link rel="stylesheet" media="print">, so every rule here runs
   only at print time. Internal @media print blocks keep the source readable
   when grepping for behaviour.

   Per-route page-size selection uses CSS named pages:
     - default @page    -> A4 portrait, used by module routes and any
                          route without an explicit page assignment
     - @page deck       -> 1280x720 landscape, assigned to body[data-route="/"]
   That `page: deck` declaration is plain (not inside @media print) because
   browsers consume `page:` at parse time, not at media-query evaluation.
   -------------------------------------------------------------------------- */

/* Print-only / web-only toggling. The matching `[data-print-only] {
   display: none !important; }` rule lives in main.css - this file is
   loaded with media="print" so a screen-time hide rule here would
   never apply. The print-time visibility flip happens below.

   Page size is set by the caller, NOT by CSS - the Playwright CI job
   passes `{ format: 'A4', landscape: <bool> }` per route, and visitor
   Ctrl+P picks whatever the print dialog has set. A CSS `@page size`
   here would fight Playwright's option (Chromium's behaviour varies by
   version) so we leave it out entirely. */

@media print {
  [data-print-only] { display: revert !important; }
  [data-screen-only] { display: none !important; }

  /* Reset SPA backgrounds. printBackground:true on the Playwright side
     still lets explicit card/CTA fills through. */
  html, body {
    background: #ffffff !important;
    color: #0e0b1f;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body { margin: 0; }

  /* Strip web-only chrome regardless of route. The mount points stay in
     the DOM but render empty so the per-route content gets the full page. */
  #nav-mount,
  #footer-mount,
  .dropdown-panel,
  .mobile-menu,
  #menu-btn,
  #pc-demo-trigger { display: none !important; }

  /* Hero animation can't paginate. Hide it everywhere; module pages and
     the home deck supply static fallback images via [data-print-only]. */
  .hero-anim-root,
  [data-init="hero-anim"] { display: none !important; }

  /* Reveal-on-scroll opacity stays 0 in print if the IntersectionObserver
     never fired (headless Chromium prints immediately). Force visible. */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Links: monochrome body anchors look like editor's marks on paper.
     Brand-coloured CTAs still render because they carry an explicit
     background-color (printBackground:true keeps it). */
  a { color: inherit; text-decoration: none; }

  /* Tighter base typography. Tailwind's 16px is a touch large at 96dpi. */
  html { font-size: 13.5px; }
  h1, h2, h3, h4 { page-break-after: avoid; }
  img, svg, .card-hover, .rounded-2xl { page-break-inside: avoid; }

  /* Sections marked by the page author as not fitting the one-pager.
     module-page.js applies this to platforms / use cases / planned
     and to the module-nav strip + per-module animation block. */
  [data-print-skip] { display: none !important; }
}

/* --------------------------------------------------------------------------
   Module pages: A4 portrait one-pager.

   Selectors key off data-print-section markers (set in module-page.js +
   cta.js) so a Tailwind class rename can't silently break the print
   layout. Long-form blocks (platforms / use cases / planned / module
   nav / animation) carry data-print-skip and are hidden by the shared
   rule above.
   -------------------------------------------------------------------------- */
@media print {
  /* Decorative blob backgrounds and grid-bg waste ink. */
  body[data-route^="/modules/"] .grid-bg,
  body[data-route^="/modules/"] .blob { display: none !important; }

  /* Header: compact, hide the icon badge (the brand mark on the page
     header below already carries identity) and the on-page CTA row
     (the closing CTA card is the single call to action on print). */
  body[data-route^="/modules/"] [data-print-section="header"] {
    padding-top: 0 !important;
    padding-bottom: 1.5rem !important;
  }
  /* The inner wrapper carries Tailwind's pt-20 / lg:pt-24 (5-6rem); on
     print that's too much air above the "Module · X" eyebrow tag.
     Pull it close to the print header strip - a hairline of breathing
     room is enough on a one-pager. */
  body[data-route^="/modules/"] [data-print-section="header"] > .relative {
    padding-top: 0.75rem !important;
    padding-bottom: 0.5rem !important;
  }
  body[data-route^="/modules/"] [data-print-section="header"] h1 {
    font-size: 1.9rem !important;
    line-height: 1.15 !important;
    margin-top: 0.75rem !important;
  }
  body[data-route^="/modules/"] [data-print-section="header"] p {
    font-size: 1rem !important;
    margin-top: 0.75rem !important;
  }
  body[data-route^="/modules/"] [data-print-section="header"] .h-14.w-14,
  body[data-route^="/modules/"] [data-print-section="header"] .mt-8.flex {
    display: none !important;
  }

  /* Feature grid: tighter cards, two-column to fit alongside the rest. */
  body[data-route^="/modules/"] [data-print-section="features"] { padding: 0.75rem 0 !important; }
  body[data-route^="/modules/"] [data-print-section="features"] .max-w-2xl { display: none !important; }
  body[data-route^="/modules/"] [data-print-section="features"] .grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem !important;
    margin-top: 0.4rem !important;
  }
  body[data-route^="/modules/"] [data-print-section="features"] .grid > div {
    padding: 0.7rem 0.85rem !important;
    border-radius: 0.6rem !important;
  }
  body[data-route^="/modules/"] [data-print-section="features"] .grid > div h3 {
    font-size: 0.92rem !important;
    line-height: 1.25 !important;
  }
  body[data-route^="/modules/"] [data-print-section="features"] .grid > div p {
    font-size: 0.72rem !important;
    margin-top: 0.35rem !important;
    line-height: 1.4 !important;
  }
  body[data-route^="/modules/"] [data-print-section="features"] .grid > div .h-11 {
    height: 1.6rem !important;
    width: 1.6rem !important;
    margin-bottom: 0.4rem !important;
  }
  body[data-route^="/modules/"] [data-print-section="features"] .grid > div .h-11 svg {
    width: 14px;
    height: 14px;
  }

  /* Print-only header strip with brand mark + module name. */
  body[data-route^="/modules/"] .print-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(14, 11, 31, 0.08);
  }
  body[data-route^="/modules/"] .print-header-logo {
    height: 1.4rem;
    width: auto;
  }
  body[data-route^="/modules/"] .print-header-module {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6028e0;
  }

  /* Closing CTA card: compact, full-width, brand colours kept. */
  body[data-route^="/modules/"] [data-print-section="cta"] {
    page-break-inside: avoid;
    padding: 0.5rem 0 !important;
  }
  body[data-route^="/modules/"] [data-print-section="cta"] .max-w-5xl {
    max-width: none !important;
    padding: 0 !important;
  }
  body[data-route^="/modules/"] [data-print-cta-card] {
    padding: 0.9rem 1.2rem !important;
    border-radius: 0.7rem !important;
  }
  body[data-route^="/modules/"] [data-print-cta-card] .blob,
  body[data-route^="/modules/"] [data-print-cta-card] .grid-bg {
    display: none !important;
  }
  body[data-route^="/modules/"] [data-print-cta-card] h2 {
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
    margin-top: 0.4rem !important;
  }
  body[data-route^="/modules/"] [data-print-cta-card] p {
    font-size: 0.78rem !important;
    margin-top: 0.4rem !important;
  }
  body[data-route^="/modules/"] [data-print-cta-card] .mt-8 {
    margin-top: 0.55rem !important;
    gap: 0.5rem !important;
  }
  body[data-route^="/modules/"] [data-print-cta-card] .mt-8 a {
    padding: 0.45rem 0.9rem !important;
    font-size: 0.78rem !important;
  }

  /* Print-only footer with brand URL + contact email. Pinned to the
     bottom of the page via a single flex column on .page-enter (the
     deepest common ancestor of all printed content). `min-height: 100vh`
     equals one A4 page under @page A4, so the footer's `margin-top: auto`
     pushes it past whatever the features section produced. Keep this
     scoped to .page-enter only - chaining flex up to body/#app risks
     each level enforcing its own 100vh and overflowing to page 2. */
  body[data-route^="/modules/"] #app > .page-enter {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  body[data-route^="/modules/"] .print-footer {
    display: flex !important;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(14, 11, 31, 0.08);
    font-size: 0.7rem;
    color: #5a5775;
  }
}

/* --------------------------------------------------------------------------
   Home / overview deck: 16:9 landscape, one slide per section.

   Slide order (after data-print-skip suppresses TrustedBy + Testimonial):
     1. Cover           [data-print-section="cover"]            - the hero, minus animation
     2. Agenda          [data-print-section="agenda"]           - print-only list of slides
     3. Features        [data-print-section="features-summary"] - 3-up of pillars
     4-9. Modules       [data-print-modules-grid] > a           - one card per slide
     10. Quickstart     [data-print-section="quickstart"]
     11. Closing CTA    [data-print-section="cta"]
   -------------------------------------------------------------------------- */
@media print {
  /* Generic slide envelope. Every direct-child section of the page wrap
     becomes one slide. The flex column centers content vertically inside
     the slide so cards don't crash into the top edge. */
  body[data-route="/"] #app > .page-enter > section {
    break-after: page;
    page-break-after: always;
    height: 100vh;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    padding: 0.6rem 2.4rem !important;
  }
  body[data-route="/"] #app > .page-enter > section:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  /* Hide the same decoration that wastes ink in module pages. */
  body[data-route="/"] .grid-bg,
  body[data-route="/"] .blob { display: none !important; }

  /* Cover slide. Hero with no animation; pull title up so it sits
     mid-slide rather than near the bottom. */
  body[data-route="/"] [data-print-section="cover"] {
    text-align: center;
  }
  body[data-route="/"] [data-print-section="cover"] .pt-20 { padding-top: 0 !important; }
  body[data-route="/"] [data-print-section="cover"] .pb-12 { padding-bottom: 0 !important; }
  body[data-route="/"] [data-print-section="cover"] h1 {
    font-size: 3rem !important;
    line-height: 1.05 !important;
  }
  body[data-route="/"] [data-print-section="cover"] .mt-9.flex { display: none !important; }
  body[data-route="/"] [data-print-section="cover"] .mt-4.text-sm { display: none !important; }

  /* Agenda slide - print-only section, simple ordered list. */
  body[data-route="/"] .print-agenda { text-align: center; }
  body[data-route="/"] .print-agenda-inner {
    max-width: 60rem;
    margin: 0 auto;
  }
  body[data-route="/"] .print-agenda-eyebrow {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6028e0;
  }
  body[data-route="/"] .print-agenda-title {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 2.6rem;
    font-weight: 700;
    margin: 0.6rem 0 1.6rem;
    color: #0e0b1f;
  }
  body[data-route="/"] .print-agenda-list {
    list-style: none;
    counter-reset: agenda;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem 2rem;
    text-align: left;
    font-size: 1.05rem;
    color: #1c1834;
  }
  body[data-route="/"] .print-agenda-list li {
    counter-increment: agenda;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(14, 11, 31, 0.08);
  }
  body[data-route="/"] .print-agenda-list li::before {
    content: counter(agenda, decimal-leading-zero);
    display: inline-block;
    width: 2.4rem;
    color: #9560ff;
    font-weight: 700;
  }

  /* Features-summary slide: keep the 3-up grid but shrink padding so
     the slide fits. */
  body[data-route="/"] [data-print-section="features-summary"] {
    padding: 0.6rem 2.4rem !important;
  }
  body[data-route="/"] [data-print-section="features-summary"] .max-w-2xl {
    max-width: 48rem;
  }
  body[data-route="/"] [data-print-section="features-summary"] h2 {
    font-size: 2rem !important;
  }
  body[data-route="/"] [data-print-section="features-summary"] .mt-14 {
    margin-top: 1.2rem !important;
    gap: 1rem !important;
  }

  /* Modules section: split the 6-card grid into 6 separate slides via
     break-before on each card. The card itself becomes a full-slide
     hero with its title + blurb on a clean background. */
  body[data-route="/"] [data-print-section="modules"] {
    break-after: auto !important;
    page-break-after: auto !important;
    /* The card slides drive their own pagination - the section wrapper
       collapses to nothing. */
    height: auto !important;
    padding: 0 !important;
    display: block !important;
  }
  body[data-route="/"] [data-print-section="modules"] > .relative,
  body[data-route="/"] [data-print-section="modules"] .max-w-2xl {
    /* Suppress the section's own title block - each module slide
       carries its own framing. */
    display: none !important;
  }
  body[data-route="/"] [data-print-modules-grid] {
    display: block !important;
    margin-top: 0 !important;
  }
  body[data-route="/"] [data-print-modules-grid] > a {
    break-before: page;
    page-break-before: always;
    break-inside: avoid;
    height: 100vh;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0.6rem 4rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
  }
  body[data-route="/"] [data-print-modules-grid] > a .h-11 {
    height: 4rem !important;
    width: 4rem !important;
    margin-bottom: 1.5rem !important;
    border-radius: 1rem !important;
  }
  body[data-route="/"] [data-print-modules-grid] > a .h-11 i {
    font-size: 40px !important;
  }
  body[data-route="/"] [data-print-modules-grid] > a h3 {
    font-size: 3rem !important;
    line-height: 1.1 !important;
    margin-top: 0 !important;
  }
  body[data-route="/"] [data-print-modules-grid] > a p {
    font-size: 1.2rem !important;
    margin-top: 1.2rem !important;
    max-width: 36rem;
    line-height: 1.5 !important;
  }
  body[data-route="/"] [data-print-modules-grid] > a .mt-5.inline-flex,
  body[data-route="/"] [data-print-modules-grid] > a [class*="bg-brand-50"] {
    display: none !important;
  }

  /* Quickstart slide: 3 step cards. */
  body[data-route="/"] [data-print-section="quickstart"] h2 {
    font-size: 2rem !important;
  }
  body[data-route="/"] [data-print-section="quickstart"] .mt-14 {
    margin-top: 1.2rem !important;
    gap: 1rem !important;
  }

  /* Closing CTA slide. Reuse the module-page CTA rules: same component,
     same data-print-cta-card hook. Override only the slide-specific bits. */
  body[data-route="/"] [data-print-section="cta"] {
    padding: 0.6rem 2.4rem !important;
  }
  body[data-route="/"] [data-print-cta-card] {
    padding: 2.4rem 3rem !important;
    border-radius: 1.5rem !important;
  }
  body[data-route="/"] [data-print-cta-card] .blob,
  body[data-route="/"] [data-print-cta-card] .grid-bg {
    display: none !important;
  }
  body[data-route="/"] [data-print-cta-card] h2 {
    font-size: 2.4rem !important;
  }
  body[data-route="/"] [data-print-cta-card] p {
    font-size: 1.2rem !important;
  }
}