/* =========================================================================
   Premier Dental Implant Centers — Print stylesheet
   -------------------------------------------------------------------------
   Patients print treatment, cost and aftercare pages to discuss at home or
   take to another provider. Everything below turns the screen design into a
   plain, high-contrast document: black text on white paper, no interface
   chrome, FAQs expanded, tables and process steps intact.

   WHY SO MANY `!important`s
   global.css @imports this file at the very top, so every rule here sits at
   the START of the bundled cascade. Astro also scopes component styles with
   an attribute selector (`.foo[data-astro-cid-…]`, specificity 0-2-0), which
   outranks a bare class. Marking print declarations important is the only
   reliable way for them to win. This is scoped entirely inside `@media
   print`, so nothing here can affect the screen experience.

   MOTION: nothing here animates. The universal reset below also removes any
   animation or transition that would otherwise be mid-flight at print time,
   so `prefers-reduced-motion` needs no special handling in this file.
   ========================================================================= */

@media print {
  /* =======================================================================
     1. Page box
     ===================================================================== */
  @page {
    margin: 0.6in 0.55in 0.7in;
  }

  /* =======================================================================
     2. Design-token overrides
     Re-pointing the design system's custom properties is cheaper and far
     more reliable than chasing every component rule. Fluid clamp()/vw type
     collapses to fixed points, gradients become nothing, and every surface
     colour becomes paper.
     ===================================================================== */
  :root {
    /* Type — fixed points, no vw */
    --fs-eyebrow: 8pt !important;
    --fs-sm: 8.5pt !important;
    --fs-base: 10.5pt !important;
    --fs-lg: 11.5pt !important;
    --fs-h4: 11pt !important;
    --fs-h3: 12.5pt !important;
    --fs-h2: 15pt !important;
    --fs-h1: 20pt !important;
    --fs-display: 20pt !important;

    --lh-tight: 1.15 !important;
    --lh-snug: 1.22 !important;
    --lh-body: 1.45 !important;

    /* Layout — the @page margin is the only gutter we need */
    --container: 100% !important;
    --container-narrow: 100% !important;
    --container-wide: 100% !important;
    --gutter: 0pt !important;
    --section-y: 12pt !important;
    --header-h: 0px !important;

    /* Ink — everything reads as a document, not a webpage */
    --brand: #000 !important;
    --brand-deep: #000 !important;
    --accent: #000 !important;
    --accent-strong: #000 !important;
    --ink: #000 !important;
    --ink-soft: #000 !important;
    --muted: #333333 !important;
    --muted-light: #444444 !important;

    --surface: #ffffff !important;
    --surface-2: #ffffff !important;
    --surface-3: #ffffff !important;
    --surface-navy: #ffffff !important;
    --sky-50: #ffffff !important;
    --sky-100: #ffffff !important;
    --sky-200: #ffffff !important;
    --lavender-50: #ffffff !important;
    --lavender-100: #ffffff !important;

    --line: #b8b8b8 !important;
    --line-strong: #8c8c8c !important;

    --grad-navy: none !important;
    --grad-gold: none !important;
    --grad-sky: none !important;

    --shadow-xs: none !important;
    --shadow-sm: none !important;
    --shadow-md: none !important;
    --shadow-lg: none !important;
    --shadow-gold: none !important;
    --ring: none !important;

    --r-sm: 0 !important;
    --r-md: 0 !important;
    --r-lg: 0 !important;
    --r-xl: 0 !important;
  }

  /* =======================================================================
     3. Universal reset
     Components hardcode light-on-dark values (#fff, #cdddf1, #b5c7e0…).
     Browsers drop backgrounds when printing but keep `color`, so without
     this the H1, hero copy and footer would print white-on-white.
     ===================================================================== */
  *,
  *::before,
  *::after {
    color: #000000 !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    animation: none !important;
    animation-timeline: none !important;
    transition: none !important;
    /* transform and the independent transform properties are separate
       cascades — motion.css animates translate/scale, so null all of them. */
    transform: none !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    opacity: 1 !important;
    outline: none !important;
  }

  html,
  body {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    /* MobileCtaBar reserves 74px of body padding below 1180px, which the
       paper width also matches. Clear it. */
    padding-bottom: 0 !important;
    /* body{overflow-x:hidden} clips wide tables in paged media. */
    overflow: visible !important;
    font-size: 10.5pt !important;
    line-height: 1.45 !important;
  }

  /* Containers that clip on screen must not clip across a page break. */
  main,
  section,
  article,
  .section,
  .container,
  .hero,
  .page-hero,
  .post-hero,
  .cta__inner,
  .card,
  .faq,
  .faq__item,
  .ct,
  .service-card,
  .post-card,
  .svc-card,
  .steps__item,
  .rt-card,
  .tst-card,
  .site-footer {
    overflow: visible !important;
  }

  /* =======================================================================
     4. Document header — first page only
     Generated content so a printed sheet is always traceable back to the
     practice. Values come from src/data/site.ts (name, address.full, phone).
     ===================================================================== */
  body::before {
    /* Deliberately ASCII-only: a printed page must not depend on the
       stylesheet's charset being negotiated correctly. */
    content: 'Premier Dental Implant Centers\A 26342 Oso Pkwy Ste 204, Mission Viejo, CA 92691\A (949) 773-4170';
    display: block !important;
    white-space: pre-line;
    font-size: 9pt !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    color: #000000 !important;
    padding-bottom: 6pt !important;
    margin-bottom: 14pt !important;
    border-bottom: 1pt solid #000000 !important;
    break-after: avoid;
    break-inside: avoid;
  }

  /* =======================================================================
     5. Hide interface chrome
     Every selector below was read out of the components that render it —
     Header.astro, Footer.astro, MobileCtaBar.astro, Cta.astro, PageHero.astro,
     HomeHero.astro, FaqAccordion.astro, BlogCard.astro, ServiceCard.astro.
     ===================================================================== */

  /* Header, mobile drawer + scrim, skip link */
  .site-header,
  .primary-nav,
  .nav-dropdown,
  .nav-toggle,
  .nav-close,
  .header-actions,
  .mobile-menu,
  .mobile-menu__panel,
  .mobile-menu__scrim,
  .mobile-nav,
  .mobile-subnav,
  .skip-link,
  /* Sticky mobile call/book bar */
  .mcta,
  /* Footer newsletter + social + link columns (pure navigation) */
  .footer-news,
  .news-form,
  .footer-social,
  nav.footer-col,
  .footer-legal,
  .footer-logo,
  /* Conversion bands and forms */
  .cta,
  .apptf,
  form,
  .btn,
  .btn-row,
  .hero__actions,
  .hero__pills,
  .hero-pill,
  .cta__actions,
  .offer__call,
  .ra__call,
  /* Cross-navigation blocks on article pages */
  .post-share,
  .related-title,
  .related-grid,
  .nsteps,
  /* Reading progress bar + back-to-top (both position:fixed) */
  .rp-bar,
  .rp-bar__fill,
  .rp-sentinel,
  .to-top,
  /* In-page table of contents — jump links do nothing on paper */
  .toc,
  .toc__disclosure,
  .toc__sidebar,
  /* Blog search / category filter UI */
  .bb__tools,
  .bb__search,
  .bb__chips,
  .bb__clear,
  .bb__status,
  /* Interactive treatment finder */
  .tf__form,
  .tf-res,
  .tf__badge,
  /* Embedded maps and media */
  iframe,
  video,
  audio,
  embed,
  object,
  .contact-map,
  .visit-map,
  .visit-grid__map,
  /* Decorative glows, blobs and background layers */
  .cta__glow,
  .page-hero__glow,
  .hero__bg,
  .hero__blob,
  .hero__grid,
  .offer__bg,
  .ra__bg,
  /* Decorative card furniture */
  .faq__toggle,
  .eyebrow::before,
  .tst-card__quote,
  .tst-card__avatar,
  .svc-card__ico,
  .rt-card__ico,
  .offer__values-ico,
  .ra__reassure-ico,
  .service-card__media,
  .service-card__icon,
  .post-card__media,
  .hero__media,
  .hero__card,
  .hero__badge,
  .page-hero__media,
  .nf__code {
    display: none !important;
  }

  /* =======================================================================
     6. Force revealed content visible
     .reveal starts at opacity 0 once the `js` class lands. Print must never
     depend on an IntersectionObserver having fired.
     ===================================================================== */
  .reveal,
  .js .reveal,
  .reveal.is-visible,
  .reveal-group,
  .reveal-group > * {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    visibility: visible !important;
    content-visibility: visible !important;
  }
  /* content-visibility:auto on below-fold sections must not defer rendering
     when the whole document is being paginated at once. */
  [style*='content-visibility'],
  .section {
    content-visibility: visible !important;
  }

  /* =======================================================================
     7. Typography
     ===================================================================== */
  body {
    font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    -webkit-font-smoothing: auto;
    text-rendering: auto;
    orphans: 3;
    widows: 3;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .page-hero__title,
  .post-hero__title,
  .hero__title,
  .offer__title,
  .ra__title,
  .section-heading__title,
  .nsteps__title,
  .footer-heading {
    font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    color: #000000 !important;
    letter-spacing: 0 !important;
    text-wrap: pretty;
    break-after: avoid-page;
    break-inside: avoid;
    page-break-after: avoid; /* legacy engines */
    page-break-inside: avoid;
  }

  h1,
  .page-hero__title,
  .post-hero__title,
  .hero__title,
  .offer__title,
  .ra__title {
    font-size: 20pt !important;
    line-height: 1.15 !important;
    margin: 0 0 8pt !important;
  }
  h2 {
    font-size: 15pt !important;
    margin: 16pt 0 5pt !important;
  }
  h3 {
    font-size: 12.5pt !important;
    margin: 12pt 0 4pt !important;
  }
  h4,
  h5,
  h6 {
    font-size: 11pt !important;
    margin: 10pt 0 3pt !important;
  }

  p,
  li,
  dd,
  dt,
  blockquote,
  figcaption {
    orphans: 3;
    widows: 3;
  }
  p {
    margin: 0 0 7pt !important;
  }

  .lead,
  .page-hero__sub,
  .post-hero__meta,
  .offer__sub,
  .ra__sub {
    font-size: 11pt !important;
    line-height: 1.45 !important;
    color: #000000 !important;
  }

  .eyebrow,
  .post-hero__cat,
  .post-card__cat {
    font-size: 8pt !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    color: #333333 !important;
    gap: 0 !important;
  }

  blockquote,
  .prose blockquote {
    border-left: 2pt solid #000000 !important;
    padding-left: 10pt !important;
    margin: 8pt 0 !important;
    break-inside: avoid;
  }

  /* =======================================================================
     8. Layout — single, predictable column
     Multi-column CSS grids fragment badly across page breaks. Reading order
     on paper is top-to-bottom anyway, so collapse card grids to block flow.
     The comparison table (.ct) keeps its grid: it IS the table.
     ===================================================================== */
  .container,
  .container--narrow,
  .container--wide {
    max-width: 100% !important;
    width: 100% !important;
    padding-inline: 0 !important;
    margin-inline: 0 !important;
  }

  .section,
  .section--tight,
  .section--sky,
  .section--soft,
  .section--lavender,
  .section--navy,
  .page-hero,
  .hero,
  .post-hero {
    padding-block: 10pt !important;
    background: none !important;
    border: 0 !important;
  }

  .grid,
  .grid--2,
  .grid--3,
  .grid--4,
  .steps,
  .svc-cards,
  .svc-split,
  .rt-grid,
  .faq,
  .footer-main,
  .page-hero__inner,
  .hero__inner,
  .svc-checklist {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }

  .grid > * + *,
  .svc-cards > * + *,
  .rt-grid > * + * {
    margin-top: 9pt !important;
  }

  /* Testimonials are a horizontal scroll-snap rail (Testimonials.astro).
     Left as-is, paper would show only the first slide and clip the rest.
     Unroll it into stacked blocks and drop the carousel controls. */
  .tst__track {
    display: block !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    gap: 0 !important;
    padding: 0 !important;
  }
  .tst__slide {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    scroll-snap-align: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .tst__controls,
  .tst__nav,
  .tst__dots,
  .tst__dot,
  .tst__dot-mark {
    display: none !important;
  }

  .measure,
  .measure-tight,
  .prose,
  .page-hero__text,
  .cta__text,
  .footer-blurb {
    max-width: none !important;
  }

  /* =======================================================================
     9. Cards, notes and process steps
     ===================================================================== */
  .card,
  .svc-card,
  .rt-card,
  .tst-card,
  .post-card,
  .service-card,
  .steps__item,
  .svc-note,
  .chip {
    border: 1pt solid #b8b8b8 !important;
    border-radius: 0 !important;
    padding: 8pt 10pt !important;
    margin-bottom: 8pt !important;
    background: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .chip {
    display: inline-block !important;
    padding: 1pt 5pt !important;
    margin: 0 3pt 3pt 0 !important;
    font-size: 8.5pt !important;
  }

  /* Numbered treatment/process steps stay legible without their navy fill. */
  .steps {
    counter-reset: pstep;
  }
  .steps__item {
    display: flex !important;
    flex-direction: row !important;
    gap: 9pt !important;
    align-items: flex-start !important;
  }
  .steps__num {
    display: inline-grid !important;
    place-items: center !important;
    width: 20pt !important;
    height: 20pt !important;
    min-width: 20pt !important;
    flex: 0 0 auto !important;
    border: 1pt solid #000000 !important;
    border-radius: 50% !important;
    font-size: 10pt !important;
    font-weight: 700 !important;
    color: #000000 !important;
  }
  .steps__title {
    font-size: 11.5pt !important;
    margin: 0 0 3pt !important;
  }
  .steps__text {
    margin: 0 !important;
  }

  .svc-checklist li {
    display: flex !important;
    gap: 5pt !important;
    margin-bottom: 4pt !important;
    break-inside: avoid;
  }

  /* =======================================================================
     10. Tables — markdown tables in .prose and the CompareTable component
     ===================================================================== */
  table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 9.5pt !important;
    margin: 8pt 0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group; /* repeat header if a table must split */
  }
  tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  th,
  td {
    border: 0.75pt solid #8c8c8c !important;
    padding: 4pt 6pt !important;
    text-align: left !important;
    vertical-align: top !important;
    color: #000000 !important;
  }
  thead th {
    font-weight: 700 !important;
    border-bottom-width: 1.5pt !important;
  }

  /* CompareTable (div grid, not a real <table>) */
  .ct {
    border: 1pt solid #8c8c8c !important;
    border-radius: 0 !important;
    margin: 8pt 0 !important;
    font-size: 9.5pt !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .ct__row {
    border-bottom: 0.75pt solid #b8b8b8 !important;
    padding: 5pt 6pt !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .ct__row--head {
    display: grid !important;
    border-bottom-width: 1.5pt !important;
    border-bottom-color: #000000 !important;
    font-weight: 700 !important;
  }
  .ct__cell,
  .ct__cell--head,
  .ct__feature,
  .ct__cell.is-accent {
    color: #000000 !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .ct__mlabel {
    display: none !important;
  }

  /* =======================================================================
     11. FAQ accordions — print expanded
     <details> collapses its content via ::details-content in current
     engines; older ones simply skip rendering non-summary children. Both
     paths are forced open here so answers always reach the paper.
     ===================================================================== */
  details,
  .faq__item {
    border: 1pt solid #b8b8b8 !important;
    border-radius: 0 !important;
    margin-bottom: 7pt !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  details > *:not(summary) {
    display: block !important;
  }
  details:not([open]) > *:not(summary) {
    display: block !important;
  }
  details::details-content {
    content-visibility: visible !important;
    display: block !important;
    block-size: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
  }
  summary,
  .faq__q {
    display: block !important;
    list-style: none !important;
    cursor: auto !important;
    padding: 6pt 8pt 3pt !important;
    font-size: 11pt !important;
    font-weight: 700 !important;
    color: #000000 !important;
    break-after: avoid;
    page-break-after: avoid;
  }
  summary::marker,
  summary::-webkit-details-marker {
    display: none !important;
    content: '' !important;
  }
  .faq__a {
    padding: 0 8pt 7pt !important;
  }
  .faq__a .prose {
    font-size: 10pt !important;
    max-width: none !important;
  }

  /* =======================================================================
     12. Links
     External destinations are printed so a reader can follow a citation on
     paper. Internal navigation would just be noise, so `/`, `#`, `tel:` and
     `mailto:` are deliberately left bare.
     ===================================================================== */
  a,
  .prose a,
  .arrow-link,
  .footer-contact a {
    color: #000000 !important;
    text-decoration: none !important;
    word-wrap: break-word;
  }
  .prose a {
    text-decoration: underline !important;
    text-underline-offset: 2px;
  }

  a[href^='http']:not([href*='premierdentalimplantcenters.com'])::after {
    content: ' (' attr(href) ')';
    font-size: 8pt !important;
    font-weight: 400 !important;
    color: #444444 !important;
    text-decoration: none !important;
    word-break: break-all;
  }
  /* Never annotate a breadcrumb, or the footer address link (the address is
     already printed as text, and again in the page header block). */
  .breadcrumbs a[href^='http']::after,
  .footer-contact a[href^='http']::after {
    content: none !important;
  }
  /* Image-only links have no text for a URL to trail. Kept in its own block
     so engines without :has() still get the rules above. */
  a[href^='http']:has(img)::after {
    content: none !important;
  }

  .breadcrumbs {
    font-size: 8.5pt !important;
    margin-bottom: 6pt !important;
  }
  .breadcrumbs a,
  .breadcrumbs span[aria-current] {
    color: #333333 !important;
    font-weight: 400 !important;
  }
  .arrow-link svg,
  .breadcrumbs svg {
    display: none !important;
  }

  /* =======================================================================
     13. Pricing and disclaimers — the reason many of these pages get printed
     ===================================================================== */
  .svc-price,
  .price-card {
    border: 1.5pt solid #000000 !important;
    border-radius: 0 !important;
    padding: 10pt 12pt !important;
    margin: 10pt 0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .svc-price__amount,
  .price-card__amount,
  .offer__price {
    font-size: 22pt !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: #000000 !important;
  }
  .svc-price__from,
  .svc-price__unit {
    font-size: 10pt !important;
    color: #333333 !important;
  }

  .disclaimer,
  .price-disclaimer,
  .offer__disc,
  .tst-note,
  .footer-disclaimer,
  .svc-note {
    font-size: 8.5pt !important;
    line-height: 1.4 !important;
    color: #333333 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .price-disclaimer,
  .offer__disc {
    margin-top: 8pt !important;
    padding-top: 5pt !important;
    border-top: 0.75pt solid #b8b8b8 !important;
  }

  /* =======================================================================
     14. Images — keep the informative ones, keep them small
     ===================================================================== */
  img,
  picture,
  svg {
    max-width: 100% !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .prose img,
  .svc-split__img,
  .post-cover,
  .care__img,
  .gallery__img,
  .doctor-card__img {
    display: block !important;
    width: auto !important;
    max-width: 3.2in !important;
    max-height: 2.6in !important;
    margin: 8pt 0 !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;
  }
  figure {
    margin: 8pt 0 !important;
    break-inside: avoid;
  }
  figcaption {
    font-size: 8.5pt !important;
    color: #333333 !important;
  }

  /* =======================================================================
     15. Footer — keep the contact block and the medical disclaimer only
     ===================================================================== */
  .site-footer {
    border-top: 1pt solid #000000 !important;
    margin-top: 14pt !important;
    padding-top: 8pt !important;
    background: none !important;
  }
  .footer-main {
    padding-block: 6pt !important;
  }
  .footer-col--brand .footer-blurb {
    display: none !important;
  }
  .footer-heading {
    font-size: 10pt !important;
    margin-bottom: 4pt !important;
  }
  .footer-contact,
  .footer-links {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  .footer-contact li {
    display: block !important;
    font-size: 9pt !important;
    margin-bottom: 3pt !important;
    color: #000000 !important;
  }
  .footer-contact svg {
    display: none !important;
  }
  .footer-bottom {
    border-top: 0.75pt solid #b8b8b8 !important;
    padding-block: 5pt 0 !important;
  }
  .footer-copy {
    font-size: 8.5pt !important;
    color: #333333 !important;
  }
}