/* Site overrides that replace per-page runtime styling the Vue app used to apply.
   Toggled per page via classes on .layout-container (set in base.njk front matter). */

/* Dark top-bar menu text + submenu arrows, for pages with a light hero (products, about, etc.).
   The default is white (#fff) for the dark-hero home page. */
.topbar-dark
  .p-megamenu-horizontal
  .p-megamenu-root-list
  > .p-menuitem
  > .p-menuitem-content
  .p-menuitem-link
  .p-menuitem-text,
.topbar-dark
  .p-megamenu-horizontal
  .p-megamenu-root-list
  > .p-menuitem
  > .p-menuitem-content
  .p-menuitem-link
  .p-submenu-icon {
  color: #1f1f1f !important;
}

/* Footer "Innovative Solutions" CTA band — shown on sub-pages, hidden on home. */
.show-footer-cta .quote-container {
  display: block !important;
}

/* Home hero on mobile: the original Nuxt theme hid the heading + "Discover More"
   button below 500px. Show them, and keep the overlay over the upper sky area.
   Scoped to the home page (data-v-4138d5de, only present on main-index.njk) so
   no other page's hero is affected. */
@media (max-width: 500px) {
  [data-v-4138d5de] .big-container .titleArr[data-v-460f6f00] {
    display: block !important;
  }

  [data-v-4138d5de] .home-bg .href {
    display: block !important;
  }

  [data-v-4138d5de] .big-container .content[data-v-460f6f00] {
    top: 20% !important;
  }
}

/* Product pages: the global margin-top:-100px on .layout-content slides the hero
   panel up so its diagonal background fills the top of the page — including behind
   the transparent header (this is what we WANT: the header must sit on the
   pattern, not on a white strip, or the light hamburger icon vanishes on mobile).
   The side effect was that the product image/title got dragged up under the header.
   Fix: keep the pull, and add top padding to the hero so only the CONTENT moves
   down, clearing the header with a comfortable gap (~68px = 168 − the 100px pull).
   Scoped via the product-page class (base.njk sets it only when a `product` is set). */
.product-page .layout-content .main > section:first-child {
  padding-top: 168px !important;
}