/* ==========================================================================
   taliwood.com - shared print stylesheet
   --------------------------------------------------------------------------
   Every page on this site carries its own inline <style> block; there is no
   shared screen stylesheet. This file is the one exception. It is linked with
   media="print" from each content page, last in the <head>, so it loads after
   that page's own CSS and only ever applies on paper. Nothing in here can
   affect the on-screen rendering.

   Why it exists: content on 18 pages is hidden with
   .reveal { opacity: 0; transform: translateY(30px) }
   and only made visible when an IntersectionObserver adds .in on scroll.
   Anything the reader never scrolled past printed as blank paper. The worst
   case was warranty.html, where the whole warranty body is one .reveal
   section, so a printed warranty carried no warranty terms at all.

   terms-conditions.html is deliberately NOT linked to this file. It carries
   its own print block tuned for a 17 page legal document, and a generic sheet
   would fight it.
   ========================================================================== */

@page {
  size: Letter;
  margin: 0.5in;
}

/* ------------------------------------------------------------------ *
 * 1. UNHIDE SCROLL-REVEAL CONTENT.  This is the fix that matters.
 * ------------------------------------------------------------------ */

.reveal,
.reveal.in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  visibility: visible !important;
  filter: none !important;
}

/* Hero copy is hidden the same way, but by a CSS entrance animation
   (riseIn) rather than by the observer, so it sits at opacity 0 until the
   animation fills it in. Killing animations below would strip the `forwards`
   fill and leave it stuck invisible, so it is pinned visible explicitly.
   These are every selector carrying `animation: riseIn` across the site. */
.hero-eyebrow,
.hero h1,
.hero-lede,
.hero-actions,
.hero-meta,
.hero-editorial .hero-eyebrow,
.hero-editorial h1,
.hero-editorial .hero-lede,
.hero-editorial .hero-actions,
.hero-door-strip .door-tile {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Nothing should be mid-animation on paper. */
*,
*::before,
*::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* ------------------------------------------------------------------ *
 * 2. INK ON PAPER.
 *    Several sections are cream copy on a dark ground (.paths,
 *    .factories, the closing CTA bands, the "coming soon" product card,
 *    the photographic hero). A print job drops background graphics by
 *    default, so that copy printed white on white: present in the PDF,
 *    invisible on the sheet. Rather than bet on print-color-adjust being
 *    honoured, every ground is stripped and every character is forced to
 *    ink. Borders survive, so cards and buttons still read as cards and
 *    buttons.
 * ------------------------------------------------------------------ */

body,
body *,
body *::before,
body *::after {
  color: #14120f !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #14120f !important;
}

/* Eyebrows, tags, and captions stay a shade back so a page does not read as
   one undifferentiated block of black. */
[class*="eyebrow"],
[class*="-label"],
[class*="-tag"],
[class*="-meta"],
[class*="-caption"],
figcaption,
small {
  color: #57524b !important;
  -webkit-text-fill-color: #57524b !important;
}

/* Images are content, not decoration, and must not be bleached. */
img,
video,
svg,
svg * {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

/* ------------------------------------------------------------------ *
 * 3. SITE CHROME OFF.  Navigation is not content.
 * ------------------------------------------------------------------ */

.announce,
.announce-show,
#show-strip,
nav.main,
.nav-left,
.nav-right,
.nav-dropdown,
.nav-dropdown-menu,
.nav-cta,
.mobile-menu,
.mobile-toggle,
.skip-link,
.footer-social,
.back-to-top,
.hero-seal,
.hero-bg,
.hero-overlay,
.coming-soon-badge {
  display: none !important;
}

/* The dark mega footer. Selected through a child so a page whose <footer> is
   real content (the Acumatica guide) keeps its footer. */
footer:has(.footer-inner),
footer:has(.footer-grid) {
  display: none !important;
}
/* Fallback for engines without :has(). The wrapper is then empty, so its
   padding is stripped too and it cannot push a blank sheet. */
.footer-inner,
.footer-grid,
.footer-bottom,
.footer-brand,
.footer-col,
.footer-legal,
.footer-tag {
  display: none !important;
}
footer:has(.footer-grid),
footer:has(.footer-inner) {
  padding: 0 !important;
  margin: 0 !important;
}

/* Embedded third-party widgets (the dealer-locator map) render as an empty
   grey rectangle on paper and were claiming most of a sheet. */
.fad-locator-widget,
.fad-locator,
iframe {
  display: none !important;
}

/* ------------------------------------------------------------------ *
 * 4. PAGE GEOMETRY.
 *    A Letter sheet is roughly 720 CSS px wide once the margins are
 *    taken out, so every narrow-viewport rule on the site matches when
 *    printing. Single-column stacking is fine on paper. The mobile
 *    gutters and the 5rem section padding are not: they sit on top of
 *    the page margin and cost a third of every sheet.
 * ------------------------------------------------------------------ */

html {
  font-size: 10pt;
}

html,
body {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  overflow: visible !important;
}

section,
main,
.shell,
.wrap,
.page-hero-inner,
.section-inner {
  max-width: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

section {
  padding: 0.5rem 0 0.9rem !important;
  overflow: visible !important;
}

.wr-body,
.cc-body,
.res-body,
.lg-body,
.page-body,
.contact-inner,
.dealer-login-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0.5rem !important;
  max-width: none !important;
  margin: 0 !important;
}

/* ------------------------------------------------------------------ *
 * 5. HERO AND FULL-BLEED MEDIA.
 *    These are sized in viewport units (92vh, 80vh, 70vh) or by
 *    aspect-ratio against the full column width, so each one claimed a
 *    whole sheet on its own. Heights are released and media is capped
 *    to a band instead.
 * ------------------------------------------------------------------ */

.hero,
.hero-editorial,
.page-hero,
.masthead,
.wr-hero,
.cc-hero,
.ab-hero,
.fad-hero,
.res-hero,
.lg-hero,
.coming-soon-hero,
.login-copy,
.split-cta-block {
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  display: block !important;
  padding: 0 0 0.6rem !important;
  overflow: visible !important;
}

.hero-content,
.hero-editorial .hero-content {
  padding: 0 !important;
  gap: 0.9rem !important;
  display: block !important;
  color: #14120f !important;
}

/* Media containers whose height is driven by the viewport or by an
   aspect-ratio against the full column width. */
.collection-image,
.collection-poster,
.builders-spread .collection-poster,
.feature-spread-media,
.feature-spread-video,
.feature-spread-still,
.inventory-photo,
.poster-display,
.login-visual,
.product-img,
.door-tile-img,
.vanity-gallery-item,
.vanity-video,
.res-card,
.empty-state,
.frameA {
  aspect-ratio: auto !important;
  min-height: 0 !important;
  max-height: 2.1in !important;
  height: auto !important;
  overflow: hidden !important;
}

img,
video {
  max-width: 100% !important;
  height: auto !important;
}

.collection-image img,
.collection-poster img,
.feature-spread-media img,
.feature-spread-media video,
.product-img img,
.door-tile-img img,
.inventory-photo img,
.vanity-gallery-item img,
.vanity-video {
  max-height: 2.1in !important;
  height: auto !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* Decorative bands that are pure ground and carry no copy. */
.program-panel::after {
  display: none !important;
}

/* ------------------------------------------------------------------ *
 * 6. TYPOGRAPHY AND PAGINATION.
 * ------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  break-after: avoid;
  page-break-after: avoid;
  break-inside: avoid;
  page-break-inside: avoid;
  orphans: 3;
  widows: 3;
}

p, li, blockquote, tr, dd, dt {
  break-inside: avoid;
  page-break-inside: avoid;
  orphans: 2;
  widows: 2;
}

ul, ol, dl, table, figure, .stat, .faq-item, .wr-claim-box {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Long bodies of copy must be allowed to flow across sheets. A section that
   will not fit otherwise gets pushed whole and leaves the sheet before it
   empty, which is the other half of why the homepage printed 16 sheets. */
section,
main,
.wr-body,
.cc-body,
.collection-spread,
.feature-spread,
.ab-section,
.cc-sec,
.res-section {
  break-inside: auto;
  page-break-inside: auto;
}


/* FAQ answers live in a collapsed <details>. On screen the reader can open
   them; on paper they simply vanish, so a printed FAQ carried questions and
   no answers. Forced open for print. */
details > *:not(summary) {
  display: block !important;
}
/* Chrome 127+ hides a closed <details> through the ::details-content
   pseudo-element rather than through the child's display, so the rule above
   is not enough on its own. */
details::details-content {
  content-visibility: visible !important;
  block-size: auto !important;
}
details summary .toggle,
details summary::-webkit-details-marker,
details summary::marker {
  display: none !important;
  content: "" !important;
}

a {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Link targets are spelled out only inside legal and care copy, where a
   reader working from paper actually needs them. Site wide it would turn the
   marketing pages into a wall of URLs. */
.wr-body a[href^="http"]::after,
.cc-body a[href^="http"]::after {
  content: " (" attr(href) ")";
  font-size: 0.82em;
  word-break: break-all;
  font-weight: 400;
}