/* custom overrides (loaded last) */
@media (max-width: 767px) {
  .headerAndNavContainer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
  }
  /* eyebrow (secondary nav) collapses on scroll to reclaim space */
  .secondaryNav {
    overflow: hidden;
    max-height: 300px;
    transition: max-height 0.25s ease, opacity 0.2s ease;
  }
  .secondaryNav.eyebrow-collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
  }
}

/* Nav logo: reduced to ~70% of its previous rendered size.
   Desktop img was 66.667% of the logo container; 66.667% * 0.7 = 46.667%.
   Mobile logo container max-width was 125px; 125 * 0.7 = 87.5px. */
.headerContent h1.logo img,
.headerContent div.logo img,
.headerContent a.logo img {
  width: 46.67% !important;
}
@media only screen and (max-width: 767px) {
  .headerContent h1.logo,
  .headerContent div.logo,
  .headerContent a.logo,
  .headerContent h1.logoAndSiteName a.logo,
  .headerContent div.logoAndSiteName a.logo {
    max-width: 88px !important;
  }
}

/* accessibility: skip-to-content link, visible only on keyboard focus */
.skipToMain {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 10px 16px;
  background: #0b5fa5;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}
.skipToMain:focus {
  left: 0;
}

/* Newsletter: hide the Lumistry widget's own heading + description,
   keeping only the site's "Sign Up For Our Newsletter" H2 above it. */
[data-lumistry-capture] .lk-head {
  display: none !important;
}

/* App-store badges on the home "mobile app" section: two badges that open the
   store in a new tab (plain links, no lightbox modal). Match the MSI template:
   the original block is a 2-column grid gallery capped at ~325px with 48%-wide
   items and a 4% gutter, so each badge renders at ~156px, side by side. We free
   the block from its layoutA 48% float first so the 325px box has room. */
.blockContent.appBadges .blockText,
.blockContent.appBadges .blockInnerContent {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
}
.appBadges .appBadgesList {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 325px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 4%;
}
.appBadges .appBadgesList li {
  margin: 0;
  padding: 0;
  flex: 0 0 48%;
  min-width: 0;
}
.appBadges .appBadgesList a {
  display: block;
}
.appBadges .appBadgeImg {
  width: 100%;
  height: auto;
  display: block;
}