/* 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;
  }
}
/* Ensure typed text is visible in form fields (the JS-rendered "text me the
   app" phone input rendered transparent/white-on-white text). Scoped to text
   entry fields so submit buttons keep their white-on-blue styling. */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="password"],
input:not([type]),
textarea,
select {
  color: #27251f !important;
  -webkit-text-fill-color: #27251f !important;
  opacity: 1 !important;
  caret-color: #27251f;
}

/* Newsletter section (home page): hide the Lumistry embed's own heading + intro
   paragraph (<div class="lk-head"><h3 class="lk-title"/><p class="lk-sub"/>) --
   they duplicate the template's "Sign Up For Our Newsletter" H2, which stays.
   The form, consent checkbox and success message are outside .lk-head. */
[data-lumistry-capture] .lk-head {
  display: none !important;
}