/* 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;
  }
}
/* The injected "Text me the FREE app now" widget on the mobile page renders its
   phone input with light/transparent text, so digits typed in the masked field
   are invisible. Force the field's text (and caret) to the site's dark body
   colour so the number is readable as it is entered. */
.mobileInfo input:not([type="submit"]):not([type="button"]),
.mobileInfo input[type="tel"],
.mobileInfo input[type="text"],
.mobileInfo input[type="number"] {
  color: #27251f !important;
  -webkit-text-fill-color: #27251f !important;
  opacity: 1 !important;
  caret-color: #27251f !important;
}
/* ...but the widget's SEND TEXT submit sits on the dark navy button
   (input[type=submit]#phoneLanding, background #003e7e), so it needs white
   text. Match it by id/form as well, since the injected form
   (#form-phoneLanding) may sit outside .mobileInfo. */
.mobileInfo input[type="submit"],
.mobileInfo input[type="button"],
.mobileInfo button,
input[type="submit"]#phoneLanding,
#form-phoneLanding input[type="submit"],
#form-phoneLanding button {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}
/* The Lumistry newsletter capture embed renders its OWN heading ("Sign Up For
   Our Newsletter") and subtitle ("Get pharmacy news and reminders by email."),
   which duplicates the template's static h2.contentTitle above the form. Hide the
   embed's header block so only the template heading shows, matching the MSI
   template exactly. The capture form (.lk-form) is unaffected. */
.blockForm [data-lumistry-capture] .lk-head {
  display: none !important;
}
/* Four-column footer (desktop): logo | Services | Company | contact group.
   The template's float grid gives every footer .blockContainer ~21.7% width,
   but its custom CSS forces the phone/fax/email, hours and address blocks to
   width:100% so they stack as full-width rows. customize_mirror groups those
   three blocks into .footerContactCol; here we lay the footer out with flexbox
   so the contact group becomes the far-right fourth column and the three blocks
   stack vertically inside it. Divider, copyright row and app-download keep their
   own full-width / 30% rows below. */
@media (min-width: 768px) {
  .footerContent .footerInner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 4.34%;
  }
  .footerContent .footerInner > .blockContainer,
  .footerContent .footerInner > .footerContactCol {
    float: none !important;
    margin: 0 0 1.5em 0 !important;
  }
  /* the four top columns */
  .footerContent .footerInner > .blockWrap_e4313e133efb4d99b3404aa6bd45229e,
  .footerContent .footerInner > .blockWrap_f9989481473748f8a0040040781eec2f,
  .footerContent .footerInner > .blockWrap_ce44f1cc14b544c7860d3e6c82afc72c,
  .footerContent .footerInner > .footerContactCol {
    width: 21.74% !important;
  }
  /* the three blocks stack vertically inside the contact column */
  .footerContent .footerContactCol > .blockContainer {
    float: none !important;
    width: 100% !important;
    margin: 0 0 1.25em 0 !important;
    padding: 0 !important;
  }
  .footerContent .footerContactCol > .blockContainer:last-child {
    margin-bottom: 0 !important;
  }
  /* full-width rows below the four columns */
  .footerContent .footerInner > .socialIconsContainer,
  .footerContent .footerInner > .blockWrap_a947967bfe954a6a9761613052288ba0 {
    width: 100% !important;
    margin-right: 0 !important;
  }
  /* bottom row: copyright | (blank) | app download */
  .footerContent .footerInner > .blockWrap_e1ab2a4fc0ca471fbc30e07bb0a2d0f9,
  .footerContent .footerInner > .blockWrap_d6e1858f40e64497a900cc2568b58e1a,
  .footerContent .footerInner > .blockWrap_db86d595c9424d9f9d4d0403895bf81e {
    width: 30% !important;
  }
}
/* Keep responsive aspect ratio for images that now carry width/height
   attributes (added at build time to prevent layout shift). The template
   authored ALL imgs without width/height attributes, so both dimensions must
   resolve to auto or CSS constraints like the footer badges' max-height:42px
   stretch the image instead of scaling it proportionally. */
img[width][height] {
  width: auto;
  height: auto;
}
/* Accessibility: keyboard skip-to-content link, visually hidden until focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 10px 16px;
  background: #21548f;
  color: #fff !important;
  border-radius: 0 0 6px 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}