/* 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;
  }
}
/* screen-reader-only utility for accessible-but-invisible text */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
/* skip link: hidden until focused, then visible top-left */
.skip-link {
  position: absolute; left: 8px; top: -48px;
  z-index: 2000;
  background: #003e7e; color: #fff;
  padding: 10px 16px; border-radius: 0 0 6px 6px;
  text-decoration: none; font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }
/* Newsletter: hide the Lumistry embed's own heading + subtitle (its <h3> and
   <p>) so only the template's "Sign Up For Our Newsletter" <h2> remains. */
[data-lumistry-capture] .lk-head { display: none !important; }
/* Contact page: tighten the excessive gap between the contact-info cards and
   the Google map. The map block carries the template's image padding; drop it
   so the map sits directly under the cards. */
.blockContent.hasMap .blockImg { padding-top: 0 !important; padding-bottom: 0 !important; }
.blockContent.hasMap { margin-top: 0 !important; padding-top: 0 !important; }
.blockWrap_e99b34ca4267448e98ff37391cbdd9b3 { margin-bottom: 0 !important; }
.blockWrap_a668b16c463445b582468ac3c201c03b { margin-top: 0 !important; padding-top: 0 !important; }
/* Header logo + footer app-store badges: the theme sets img width via CSS and
   ships a global `img{max-width:100%}` but never resets `height:auto`, so the
   HTML height attribute distorts the aspect ratio. Force height:auto so both
   keep their intrinsic proportions. */
.headerContent h1.logo img, .headerContent div.logo img, .headerContent a.logo img { height: auto !important; }
.appDownload img { height: auto !important; width: auto !important; max-width: 100% !important; }
.appDownload ul li a { display: inline-block; }
.appDownload ul li a img { max-height: 48px; }