/* site.css — glue between the refresh theme and our long-form Hugo content.
   The theme styles marketing sections; this styles the markdown body
   (.page-content) inside both the product detail panel and inner pages,
   matching the theme's blue (#00236f) / Poppins look. */

.page-content {
  font-family: 'Poppins', sans-serif;
  color: #232323;
}

/* Keep wide images (e.g. 640px performance graphs) and figures in bounds */
.page-content img { max-width: 100%; height: auto; }

/* Headings: scale the theme's very large defaults down to body size */
.page-content h1 { font-size: 2em; margin: 1em 0 .4em; }
.page-content h2 { font-size: 1.7em; margin: 1.2em 0 .4em; }
.page-content h3 { font-size: 1.3em; margin: 1em 0 .3em; }
.page-content h4 { font-size: 1.1em; margin: 1em 0 .3em; }

.page-content p { line-height: 1.6; margin: 0 0 1em; }
.page-content a { color: #00236f; text-decoration: underline; }
.page-content a:hover { color: #232323; }

/* Lists */
.page-content ul, .page-content ol { margin: 0 0 1em 1.4em; padding: 0; }
.page-content li { list-style: disc; line-height: 1.6; margin-bottom: 6px; }
.page-content ol li { list-style: decimal; }

/* The theme replaces list bullets with a small, blurry "pcs" image. Revert to
   normal bullets on body-content lists (remove the :before image, restore the
   native marker, and give the list room for it). */
.inner-content-wrapper ul li:before,
.inner-content-grey-wrapper ul li:before,
.product-specification-right ul li:before { content: none; }
.inner-content-wrapper ul li,
.inner-content-grey-wrapper ul li,
.product-specification-right ul li { list-style: disc; }
.inner-content-wrapper ul,
.inner-content-grey-wrapper ul,
.product-specification-right ul { padding-left: 1.4em; }

/* Spec / data tables — match the theme's inner-content table styling */
.page-content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.page-content th {
  background: #00236f; color: #fff; padding: 10px;
  text-align: left; font-weight: 500; vertical-align: top;
}
.page-content td {
  background: #fff; border: 1px solid #00236f; padding: 10px;
  vertical-align: top; font-size: .95em;
}

/* Figures (our <div class="figure"> with image + caption) */
.page-content .figure {
  display: inline-block; vertical-align: top;
  margin: 0 16px 16px 0; max-width: 100%;
  text-align: center; font-size: .9em; color: #555;
}
.page-content .figure img { display: block; margin: 0 auto 6px; }

/* Inline image+caption gallery rows on the home/legacy pages */
.page-content .gallery { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }

/* Page-title bars. The theme's default H1 is 53px, which dominates the viewport
   on every page (worst on mobile). Make the title-bar H1 fluid and a touch
   smaller — this also tames the desktop sizes the way you noted. */
.inner-title-wrapper h1,
.product-inner-title-left h1 {
  margin: 0;
  font-size: clamp(28px, 4.5vw, 44px);
  line-height: 1.15;
}

/* Trim the tall title-bar padding on small screens. */
@media all and (max-width: 650px) {
  .inner-title-wrapper { padding: 28px 0; }
}

/* Product-detail hero: the theme only ever lays this out as a 50/50 split, so on
   a phone the photo crowds the title text. Stack it — title first, photo below
   at full width — below the same 730px breakpoint the theme uses elsewhere. */
@media all and (max-width: 730px) {
  .product-inner-title-wrapper { flex-direction: column; }
  .product-inner-title-left,
  .product-inner-title-right { width: 100%; }
  .product-inner-title-left { padding: 30px 20px; }
  .product-inner-title-right { padding-top: 60%; }
}

/* Upgrades page: each upgrade-output is wrapped in .upgrade-block so the theme's
   brittle :nth-of-type(3) hide-rule (a CMS placeholder hack) can't fire on our
   data-driven boxes. Add the vertical gap the CMS got from its <p> wrappers. */
.upgrade-block { margin-bottom: 30px; }

/* Specials page image rows: a wrapping row of thirds; a lone image goes full width. */
.specials-images { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.specials-images img { flex: 1 1 0; min-width: 0; max-width: 100%; height: auto; }
.specials-images.single img { flex-basis: 100%; }
@media all and (max-width: 650px) { .specials-images img { flex-basis: 100%; } }

/* Home banner: the heading has margin:0, so the "About Us" button sits flush
   against it and the "y" descender in "Systems" touches the button. Add a gap. */
.home-banner-item-text .white-btn { margin-top: 22px; }

/* Contact form honeypot: off-screen for people, still in the DOM for bots. */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }