/* ==========================================================================
   Suburban Bolt — print stylesheet
   --------------------------------------------------------------------------
   Loaded by templates/layouts/base.hubl.html as
   <link rel="stylesheet" media="print">, AFTER standard_header_includes, so
   it applies to every template and never touches the screen. It runs for
   the header print button (site.js calls window.print()) and for the
   browser's own File > Print / Cmd+P.

   What the printed page is: the logo and branch phone numbers at the top,
   the page content in reading order, and the copyright line at the bottom.
   Everything interactive (menus, search, log in, cart, buttons, forms,
   carousel arrows, cookie and chat widgets) is left off the paper.

   Rules of the road:
   - Browsers drop background colors and images by default when printing,
     so light text on a dark band prints white on white. This sheet removes
     every background and prints all text dark, so the result is the same
     whether or not the visitor ticks "Background graphics".
   - Page width in print is about 700 to 720 CSS px (A4 or Letter, 0.5in
     margins). Media queries see that width, so modules fall back to their
     tablet layouts. The module blocks below restore compact print layouts.
   - Module stylesheets load in <body> (island CSS) after this sheet, and
     carousels write inline styles, so overrides here use !important.
   - Target modules by their stable class (hs-elevate-*), never the hashed
     CSS-module class (_hs-elevate-*_abc12_3), which changes every build.
   ========================================================================== */

@media print {
  @page {
    margin: 0.5in;
  }

  /* ------------------------------------------------------------------------
     1. Global: paper colors, no effects
     ------------------------------------------------------------------------ */

  *,
  *::before,
  *::after {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #000 !important;
    animation: none !important;
    transition: none !important;
  }

  /* Theme type sizes are rem-based, so this one value scales all of it:
     body copy prints at 10.5pt instead of 12pt, and headings follow. */
  html {
    font-size: 87.5% !important;
  }

  html,
  body {
    background: #fff !important;
    min-width: 0 !important;
    height: auto !important;
  }

  /* The ERP stylesheet makes body a flex column (sticky-footer pattern).
     Plain block flow paginates more predictably. */
  body {
    display: block !important;
  }

  /* Headings keep the brand navy (theme Accent 3); it is dark enough for a
     black and white printer. */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .hs-elevate-h1,
  .hs-elevate-h2,
  .hs-elevate-h3,
  .hs-elevate-h4,
  .hs-elevate-h5,
  .hs-elevate-h6 {
    color: var(--hsElevate--color--accent--3, #354b97) !important;
    break-after: avoid;
    break-inside: avoid;
  }

  /* A module's title block (heading plus intro text) stays on the same
     page as the content under it. Timeline uses __description per item,
     not as a title block, so it is left out. */
  [class*='__header'],
  [class*='__intro'],
  [class*='__description']:not(.hs-elevate-timeline__description) {
    break-after: avoid;
  }

  p,
  li,
  blockquote {
    orphans: 3;
    widows: 3;
  }

  /* No list starts or ends a page with a single item. */
  li:first-child {
    break-after: avoid;
  }

  li:last-child {
    break-before: avoid;
  }

  img,
  svg,
  figure,
  picture,
  video,
  blockquote,
  tr {
    break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  /* Tables: nothing is cut off. A scroll wrapper clips a wide table at the
     page edge, and nowrap cells push it wider than the paper. Header rows
     repeat on each page, and cells get borders because the zebra and
     header fills are gone. */
  *:has(> table) {
    overflow: visible !important;
  }

  th,
  td {
    position: static !important;
    white-space: normal !important;
    border: 1px solid #999 !important;
  }

  thead {
    display: table-header-group;
  }

  /* A header row written as a plain first row (no <thead>) stays with the
     first data row. */
  tr:first-child:has(> th) {
    break-after: avoid;
  }

  /* Scroll-reveal targets start at opacity 0 and only fade in when they
     scroll into view (RevealIsland). Anything the visitor has not scrolled
     to would print blank. */
  .hs-elevate-anim-item {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Text links in body copy: underline them, and print the address after
     absolute links so the paper copy keeps the destination. Links that
     carry a class (buttons, tiles, cards, menus) are left alone. */
  main a:not([class]) {
    text-decoration: underline !important;
  }

  main a[href^='http']:not([class]):not(:has(img))::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    font-weight: normal;
    word-break: break-all;
  }

  /* ------------------------------------------------------------------------
     2. Screen-only chrome: never printed
     ------------------------------------------------------------------------ */

  .hs-elevate-header__skip,
  #fixedHeader .mainmenu,
  #mainmenu-toggle > button,
  #inxsqltandc,
  .hs-elevate-button,
  .btn,
  form,
  .hs-form,
  .hbspt-form,
  .hs-form-frame,
  .hs_cos_wrapper_type_form,
  .widget-type-form,
  .hs-elevate-back-to-top,
  .back-to-top,
  .hs-elevate-anchor-nav,
  .hs-elevate-pagination,
  .hs-elevate-social-share,
  .hs-elevate-social-follow,
  .hs-elevate-toc__progress,
  .hs-elevate-gallery__lightbox,
  .hs-elevate-imagehotspots__mobile-overlay,
  .hs-elevate-imagehotspots__tooltip--mobile,
  .splide__arrows,
  .splide__pagination,
  .splide__toggle,
  .splide__progress,
  .slick-arrow,
  .slick-dots,
  .hs-elevate-hero__overlay,
  .hs-elevate-hero__video-bg,
  .hs-elevate-cta-banner__overlay,
  .hs-elevate-accordion__title svg,
  .hs-elevate-testimonials__quote-mark,
  .hs-elevate-site-footer__columns,
  .hs-elevate-site-footer__social,
  .hs-elevate-site-footer__divider,
  .hs-elevate-site-footer img,
  #social-media,
  .hs-tools-menu,
  #hs-eu-cookie-confirmation,
  #hs-banner-parent,
  #hubspot-messages-iframe-container,
  [id^='hs-web-interactives'],
  .grecaptcha-badge {
    display: none !important;
  }

  /* A form does not print, so a Heading row directly above a form row (for
     example "Send Us Your List" on the SB Landing Page template) goes too. */
  .dnd-row:has(.hs-elevate-heading-container):has(
      + .dnd-row :is(form, .hs-form-frame, .hs_cos_wrapper_type_form, .widget-type-form)
    ) {
    display: none !important;
  }

  /* ------------------------------------------------------------------------
     3. Header: logo left, branch phones right, a rule underneath
     ------------------------------------------------------------------------ */

  #fixedHeader,
  .hs-elevate-header,
  div[data-global-resource-path*='header'] {
    position: static !important;
  }

  #fixedHeader {
    border-bottom: 1px solid #000;
    margin-bottom: 0.2in;
    padding-bottom: 0.1in;
  }

  #fixedHeader .container-fluid {
    padding: 0 !important;
  }

  #fixedHeader .menubar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #fixedHeader .logo-container {
    width: 2in !important;
  }

  /* The phone block is the mobile-menu copy of the phone line. It is the
     only copy that sits beside the logo, so it is forced on at every paper
     width (Bootstrap hides it at 768px and up). */
  #mainmenu-toggle {
    display: block !important;
  }

  #mainmenu-toggle > .d-md-none {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10pt !important;
    line-height: 1.4 !important;
    text-align: right;
  }

  /* The ERP header is position: fixed at 992px and up, and the content is
     padded down to clear it. Neither applies on paper. */
  body:has(#fixedHeader) .content {
    padding-top: 0 !important;
  }

  body:has(#fixedHeader) .content :target::before {
    display: none !important;
  }

  /* ------------------------------------------------------------------------
     4. Page sections: tighter vertical rhythm, full page width
     ------------------------------------------------------------------------ */

  .dnd-section {
    padding: 0.12in 0 !important;
  }

  /* HubSpot writes each section's fill as an !important class rule
     (.dnd_area-row-N-background-layers), which beats the global rule in
     section 1 when "Background graphics" is on. This selector outranks it. */
  .dnd-section[class*='-background-'] {
    background-color: transparent !important;
    background-image: none !important;
  }

  .dnd-section > .row-fluid,
  .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* The ported Bootstrap .container caps width at 540px below the 768px
     breakpoint, which is where paper sits. Use the full page width. */
  .container {
    max-width: none !important;
  }

  /* A Heading module sits in its own row above the module it introduces.
     Keep it on the same page as that module. */
  .dnd-row:has(.hs-elevate-heading-container) {
    break-after: avoid;
  }

  /* HubSpot's drag-and-drop rows (.row-fluid) are flex containers. Chrome
     ignored the rule above while they were, and left "How Can We Help?" at
     the foot of a page with its cards on the next (live Home page,
     2026-09-22). Below 768px every column is full width anyway, so plain
     block flow changes nothing else. Landscape paper (768px and up) keeps
     the side-by-side columns. */
  @media (max-width: 767px) {
    .row-fluid {
      display: block !important;
    }
  }

  /* ------------------------------------------------------------------------
     5. Modules
     ------------------------------------------------------------------------ */

  /* Hero and CTA Banner: the background photo and the dark overlay go, the
     copy stays. Min-height would leave a blank band on paper. */
  .hs-elevate-hero,
  .hs-elevate-cta-banner {
    min-height: 0 !important;
    padding: 0 !important;
  }

  .hs-elevate-hero__text-block {
    padding: 0 !important;
    max-width: none !important;
  }

  /* Image and Text: image and copy side by side, as on desktop. */
  .hs-elevate-image-and-text {
    flex-direction: row !important;
    align-items: flex-start !important;
    column-gap: 0.25in !important;
  }

  .hs-elevate-image-and-text__image-container {
    width: 40% !important;
    flex-shrink: 0 !important;
    order: var(--hsElevate--image-and-text__imageOrder, 0);
  }

  .hs-elevate-image-and-text__content-container {
    width: 60% !important;
  }

  /* Multi-Column Rich Text: columns side by side, as on desktop. */
  .hs-elevate-mcrt__columns {
    flex-direction: row !important;
    gap: 0.25in !important;
    margin-top: 0.1in !important;
  }

  /* Cards: two per row. A card set stays on one page with its title; a set
     taller than a page still breaks between rows. */
  .hs-elevate-card-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.15in !important;
    break-inside: avoid;
  }

  .hs-elevate-card {
    border: 1px solid #999 !important;
    break-inside: avoid;
  }

  /* Feature List: a custom icon is drawn as a CSS mask filled with its
     background color, so it needs its fill back and must print even when
     "Background graphics" is off. */
  .hs-elevate-feature-list__icon--custom {
    background-color: var(--hsElevate--feature-list__iconColor, #354b97) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .hs-elevate-feature-list__feature {
    break-inside: avoid;
  }

  /* Quote (featured portrait): photo beside the quote, as on desktop. The
     watermark quote mark is decoration and is not printed, so its gutter
     goes too. */
  .hs-elevate-quote__layout--portrait.hs-elevate-quote__layout--has-portrait {
    grid-template-columns: auto 1fr !important;
    gap: 0.3in !important;
  }

  .hs-elevate-quote__portrait {
    width: 1.3in !important;
  }

  .hs-elevate-quote__layout--portrait .hs-elevate-quote__main {
    padding-inline-start: 0 !important;
  }

  .hs-elevate-quote .hs-elevate-quote__blockquote--portrait::before {
    display: none !important;
  }

  .hs-elevate-quote__text,
  .hs-elevate-quote__author-name {
    color: var(--hsElevate--color--accent--3, #354b97) !important;
  }

  /* The name is set at 55% opacity on screen; too faint on paper. */
  .hs-elevate-quote .hs-elevate-quote__author-name {
    opacity: 1 !important;
  }

  .hs-elevate-quote {
    break-inside: avoid;
  }

  /* Accordion (FAQ): print every answer, open or closed. */
  details::details-content {
    content-visibility: visible !important;
    display: block !important;
  }

  .hs-elevate-accordion-wrapper {
    break-inside: avoid;
  }

  /* Tabs: print every panel, each under its tab label. Labels and panels
     are two separate lists in the markup; display: contents lifts both into
     one column, and order puts label N directly above panel N. */
  .hs-elevate-tabs {
    display: flex !important;
    flex-direction: column !important;
  }

  .hs-elevate-tabs__list,
  .hs-elevate-tabs__content {
    display: contents !important;
  }

  .hs-elevate-tabs__tab {
    display: block !important;
    margin: 0.12in 0 0.04in !important;
    padding: 0 !important;
    border: 0 !important;
    font-weight: 700 !important;
    text-align: start !important;
    break-after: avoid;
  }

  .hs-elevate-tabs__panel {
    display: block !important;
  }

  .hs-elevate-tabs__tab:nth-child(1) { order: 1; }
  .hs-elevate-tabs__panel:nth-child(1) { order: 2; }
  .hs-elevate-tabs__tab:nth-child(2) { order: 3; }
  .hs-elevate-tabs__panel:nth-child(2) { order: 4; }
  .hs-elevate-tabs__tab:nth-child(3) { order: 5; }
  .hs-elevate-tabs__panel:nth-child(3) { order: 6; }
  .hs-elevate-tabs__tab:nth-child(4) { order: 7; }
  .hs-elevate-tabs__panel:nth-child(4) { order: 8; }
  .hs-elevate-tabs__tab:nth-child(5) { order: 9; }
  .hs-elevate-tabs__panel:nth-child(5) { order: 10; }
  .hs-elevate-tabs__tab:nth-child(6) { order: 11; }
  .hs-elevate-tabs__panel:nth-child(6) { order: 12; }
  .hs-elevate-tabs__tab:nth-child(7) { order: 13; }
  .hs-elevate-tabs__panel:nth-child(7) { order: 14; }
  .hs-elevate-tabs__tab:nth-child(8) { order: 15; }
  .hs-elevate-tabs__panel:nth-child(8) { order: 16; }

  /* Marquee: one pass of the logos, wrapped onto rows. The track holds a
     second, aria-hidden copy for the seamless loop. */
  .hs-elevate-marquee,
  .hs-elevate-marquee__track-wrapper {
    overflow: visible !important;
  }

  .hs-elevate-marquee__track-wrapper::before,
  .hs-elevate-marquee__track-wrapper::after,
  .hs-elevate-marquee__content[aria-hidden='true'] {
    display: none !important;
  }

  .hs-elevate-marquee__track {
    width: auto !important;
    transform: none !important;
  }

  .hs-elevate-marquee__content {
    flex: 1 1 auto !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .hs-elevate-marquee__item--grayscale > * {
    filter: none !important;
  }

  /* Table of Contents: the sticky sidebar version prints in place. */
  .hs-elevate-toc-wrapper--sidebar-sticky {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Carousels (Splide): lay every real slide out in a grid. Loop mode adds
     cloned slides at both ends; those are copies and are dropped. */
  .splide {
    visibility: visible !important;
  }

  .splide__track {
    overflow: visible !important;
    height: auto !important;
    padding: 0 !important;
  }

  .splide__list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.15in !important;
    height: auto !important;
    width: auto !important;
    transform: none !important;
  }

  .splide__slide {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    break-inside: avoid;
  }

  .splide__slide--clone {
    display: none !important;
  }

  /* Product tiles: four per row with short images, so the whole range fits
     on about half a page. */
  .hs-elevate-product-carousel__list {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.1in !important;
  }

  .hs-elevate-product-carousel__tile {
    border: 1px solid #999 !important;
    padding: 0.06in !important;
  }

  .hs-elevate-product-carousel__tile-image {
    max-height: 0.6in !important;
    width: auto !important;
    margin: 0 auto;
  }

  /* Testimonials: two per row. The carousel keeps 48px of side padding for
     its arrows, and the cards pad twice; on paper that squeezes the quote
     to a few words per line. */
  .hs-elevate-testimonials__slider {
    padding-inline: 0 !important;
  }

  .hs-elevate-testimonials__list {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .hs-elevate-testimonials__card {
    border: 1px solid #999 !important;
    padding: 0.12in !important;
  }

  .hs-elevate-testimonials__quote {
    padding: 0 0 0 0.1in !important;
    margin-bottom: 0.08in !important;
  }

  /* Slick (sb-home replica hero): print the current slide only. */
  .slick-track {
    width: auto !important;
    transform: none !important;
  }

  .slick-cloned,
  .slick-slide:not(.slick-current) {
    display: none !important;
  }

  .slick-slide.slick-current {
    float: none !important;
    position: relative !important;
    left: 0 !important;
    width: auto !important;
    opacity: 1 !important;
  }

  #home-slider .home-slide {
    height: auto !important;
  }

  /* Scroll Film: the 560vh scroll runway would print as five blank pages.
     Print it the way the reduced-motion version shows it: every beat in
     order, as plain text. The film frames are not printed. */
  .hs-elevate-scroll-film {
    height: auto !important;
  }

  .hs-elevate-scroll-film__stage {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }

  .hs-elevate-scroll-film__canvas-holder,
  .hs-elevate-scroll-film__vignette,
  .hs-elevate-scroll-film__grain,
  .hs-elevate-scroll-film__readout,
  .hs-elevate-scroll-film__cue,
  .hs-elevate-scroll-film__handoff,
  .hs-elevate-scroll-film__loader,
  .hs-elevate-scroll-film__beat::before {
    display: none !important;
  }

  .hs-elevate-scroll-film__beats {
    position: static !important;
    display: block !important;
    padding: 0 !important;
  }

  .hs-elevate-scroll-film__beat {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    max-width: none !important;
    margin: 0 0 0.15in !important;
    break-inside: avoid;
  }

  .hs-elevate-scroll-film h1.hs-elevate-scroll-film__heading {
    font-size: 36pt !important;
  }

  .hs-elevate-scroll-film h2.hs-elevate-scroll-film__heading {
    font-size: 22pt !important;
  }

  .hs-elevate-scroll-film .hs-elevate-scroll-film__body {
    max-width: none !important;
  }

  /* ------------------------------------------------------------------------
     6. Footer: the copyright line under a rule
     ------------------------------------------------------------------------ */

  .hs-elevate-footer,
  .hs-elevate-site-footer {
    padding: 0 !important;
    margin: 0 !important;
  }

  .hs-elevate-site-footer__bottom {
    border-top: 1px solid #000 !important;
    margin-top: 0.2in !important;
    padding: 0.08in 0 0 !important;
    font-size: 9pt !important;
  }
}