/* custom overrides (loaded last) */
/* visually-hidden: accessible to AT/SEO but removed from visual layout */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* skip-to-content link: off-screen until keyboard-focused, then it drops in at
   the top-left. Uses the template's link color so it stays on-brand. */
.skip-link {
  position: absolute !important;
  left: -9999px !important;
  top: 0;
  z-index: 100000;
  padding: 10px 16px;
  background: #ffffff;
  color: #1a1a1a;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.skip-link:focus {
  left: 0 !important;
}
/* intrinsic width/height attributes are added to <img> so the browser can
   reserve space (prevents layout shift / CLS). Keep them fluid & undistorted:
   width scales to the container and height follows the aspect ratio. */
img[width][height] {
  max-width: 100%;
  height: auto;
}
/* footer app badges: the template sizes these via `.appDownload li img
   { max-height:42px }` and relies on auto width to keep the aspect ratio.
   The intrinsic width attribute (added above for CLS) would otherwise win and
   stretch them horizontally — force auto width/height so they render exactly
   like the MSI template (42px tall, proportional width). */
.appDownload li img {
  width: auto !important;
  height: auto !important;
  max-height: 42px;
}
/* respect users who prefer reduced motion: neutralize the template's entrance
   animations and smooth-scroll so nothing large moves for them. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .blockAnim, .blockAnim--hidden, .blockAnim--fade {
    opacity: 1 !important;
    transform: none !important;
  }
}
@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;
  }
}
/* Header eyebrow (.secondaryNav): the top bar is cloned from three footer
   blocks (address / phone+fax / hours). Those same blocks sit below the footer
   divider and carry the right-align inline styles, so the clones inherit them
   and break the top bar. Neutralize the inline styles here (loaded last, with
   !important so they beat the inline attribute), reveal the fax like the live
   site, keep spacing even, and allow a second line when it gets tight. */
/* keep the eyebrow on a single line: no wrapping, address / phone+fax / hours
   sit side by side, and the fax sits inline next to the phone (not stacked). */
.secondaryNavContent {
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  column-gap: 2.25em !important;
  row-gap: 0 !important;
}
.secondaryNavContent .blockContainer {
  float: none !important;
  clear: none !important;
  width: auto !important;
  text-align: left !important;
}
.secondaryNavContent .blockText p {
  display: inline-block !important;
  white-space: nowrap !important;
  margin: 0 !important;
  vertical-align: middle !important;
}
.secondaryNavContent .blockText p.contactFax {
  position: relative;
  margin-left: 1.6em !important;
}
/* the email and fax belong in the footer / contact page; keep the compact top
   bar to a single line (address | phone | hours) by hiding the cloned email
   and fax. */
.secondaryNavContent .blockText p.contactEmail,
.secondaryNavContent .blockText p.contactFax { display: none !important; }
.secondaryNavContent .blockText p.contactFax:before {
  content: '';
  display: inline-block;
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%2327251f'%3E%3Cpath%20d='M19%209h-1V4c0-.55-.45-1-1-1H7c-.55%200-1%20.45-1%201v5H5c-1.66%200-3%201.34-3%203v5h4v3h12v-3h4v-5c0-1.66-1.34-3-3-3zM8%205h8v4H8V5zm8%2014H8v-4h8v4zm2-6c-.55%200-1-.45-1-1s.45-1%201-1%201%20.45%201%201-.45%201-1%201z'/%3E%3C/svg%3E");
}
@media (max-width: 900px) {
  /* very narrow desktop/tablet: let it breathe rather than overflow */
  .secondaryNavContent { flex-wrap: wrap !important; row-gap: 4px !important; }
}
/* Newsletter: the signup uses a Lumistry capture embed (functional list
   integration) which ships its own system-ui form with a duplicate title,
   blue accent and rounded grey inputs. Restyle it to the template's own form
   language so it matches the rest of the site: Montserrat type, square
   #c8c8c8 inputs and the #003e7e brand button. The block's <h2> "Sign Up For
   Our Newsletter" is the heading, so Lumistry's own title/subtitle are hidden
   to avoid duplication. (!important: Lumistry injects its <style> at runtime,
   after our customCSS, at equal specificity.) */
.blockForm .lk-head { display: none !important; }
.blockForm .lk-form {
  font-family: 'Montserrat', Arial, Verdana, sans-serif !important;
  color: #27251f !important;
  background: transparent !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
}
.blockForm .lk-input {
  height: auto !important;
  padding: 0.5em !important;
  font-size: 18px !important;
  color: #555 !important;
  background: #fff !important;
  border: 1px solid #c8c8c8 !important;
  border-radius: 0 !important;
  line-height: 1.5 !important;
}
.blockForm .lk-input:focus {
  border-color: #003e7e !important;
  box-shadow: none !important;
}
.blockForm .lk-btn {
  height: auto !important;
  padding: 0.6em 1.4em !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #fff !important;
  background: #003e7e !important;
  border: 0 !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}
.blockForm .lk-btn:hover,
.blockForm .lk-btn:focus { background: #6caddf !important; }
.blockForm .lk-consent { color: #27251f !important; font-size: 13px !important; }
.blockForm .lk-consent a,
.blockForm .lk-ok { color: #003e7e !important; }
/* About: pharmacy team roster grid */
.teamRoster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem 1.5rem;
  margin-top: 1.5rem;
}
.teamRoster .teamMember { text-align: center; }
.teamRoster .teamMemberName { margin: 0 0 0.15rem; }
.teamRoster .teamMemberRole { margin: 0; opacity: 0.75; }
@media (max-width: 767px) {
  .teamRoster { grid-template-columns: repeat(2, 1fr); }
}
/* Reviews: patient testimonials grid */
.reviewsGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.reviewsGrid blockquote {
  margin: 0;
  padding: 1.5rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.035);
  font-style: italic;
  line-height: 1.55;
}
@media (max-width: 767px) {
  .reviewsGrid { grid-template-columns: 1fr; }
}