/* custom overrides (loaded last) */

/* ===== Eyebrow / secondary nav: force the template's intended clean,
   centered, single-line layout (address | phone | hours), with each icon
   hugging its text. The footer blocks the template JS hoists into this bar
   carry block-level paragraphs and uneven nesting, which otherwise makes the
   row spread edge-to-edge, detaches the phone icon from its number, and wraps
   the hours. We normalise all of that here. ===== */
.secondaryNav .blockContent {
  width: 100% !important;
  max-width: none !important;
}
.secondaryNavContent {
  display: flex !important;
  flex-flow: row nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 2.75em !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 4% !important;
  box-sizing: border-box !important;
}
.secondaryNavContent > .blockContainer {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  text-align: left !important;
}
/* one inline row of [icon][text] per item */
.secondaryNavContent .blockText,
.secondaryNavContent .blockInnerContent {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  margin: 0 !important;
}
.secondaryNavContent .blockInnerContent:before {
  flex: 0 0 auto !important;
  margin: 0 8px 0 0 !important;
}
.secondaryNavContent p {
  margin: 0 !important;
  white-space: nowrap !important;
  line-height: 1.25 !important;
}
/* address: drop the line break so it stays on a single line in the bar */
.secondaryNavContent .block_d1c3085901d84645b31bd09c4bae76b6 br {
  display: none !important;
}
/* contact: only the phone shows in the bar (fax/email stay in the footer) */
.secondaryNavContent .contactFax,
.secondaryNavContent .contactEmail {
  display: none !important;
}
.secondaryNavContent .contactPhone {
  display: inline-block !important;
}
/* phone label prefix to match the reference eyebrow format */
.secondaryNavContent .contactPhone:before {
  content: "p: ";
}

@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;
  }
}

/* stack the eyebrow items on narrow screens so they never overflow */
@media (max-width: 1024px) {
  .secondaryNavContent {
    flex-flow: column nowrap !important;
    gap: .4em !important;
    padding: 0 4% !important;
  }
}

/* ===== Primary nav: keep the links AND the Transfer/Refill buttons on a
   single row instead of wrapping the buttons onto a second line. The top-level
   items are inline-block, so forbidding wrap on the list (desktop only) keeps
   the whole nav on one line; the dropdown subnavs are absolutely positioned so
   they are unaffected. We trim the inter-item gap slightly so it fits. ===== */
@media (min-width: 1025px) {
  .navContainer {
    padding-left: 2% !important;
    padding-right: 2% !important;
  }
  .navContainer .navContent > ul#navTopLevel {
    white-space: nowrap !important;
  }
  .navContainer .navContent > ul#navTopLevel > li {
    display: inline-block !important;
    float: none !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    margin-left: 1.15em !important;
  }
}

/* ===== Newsletter signup: match the MSI template's two-column newsletter block
   (layoutD): the site-styled "Sign Up For Our Newsletter" heading (.contentTitle)
   beside a simple email + button form. The Lumistry capture embed is configured
   for MSI (blue #003e7e, no name/consent, inline, no background) but renders its
   OWN title + subtitle, so we hide those (the .contentTitle heading is the title)
   and align its input + button to the template's .scForm styling so the form
   matches the reference template exactly. The embed renders inline (not an
   iframe), so the .lk-* elements are styleable directly. ===== */
.newsletterSignup .lk-title,
.newsletterSignup .lk-sub,
.newsletterSignup .lk-head {
  display: none !important;
}
/* strip the embed's own card chrome so it sits flush in the blockForm column */
.newsletterSignup .lk-form,
.newsletterSignup .lk-scope {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
}
/* email input matches the template's .scForm input (grey border, #555 text,
   18px, square corners) */
.newsletterSignup .lk-input,
.newsletterSignup .lk-email {
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: #555 !important;
  background-color: #fff !important;
  border: 1px solid #c8c8c8 !important;
  border-radius: 0 !important;
  padding: .5em !important;
}
/* submit button matches the template's blue .button (proximanova, radius 6) */
.newsletterSignup .lk-btn {
  font-family: proximanova, Arial, Verdana, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #fff !important;
  background: #003e7e !important;
  border: 0 !important;
  border-radius: 6px !important;
  padding: .6em 1em !important;
}
.newsletterSignup .lk-btn:hover {
  background: #6caddf !important;
}