/* Header social icons (Facebook, Instagram). Sits right after the header's
   "Contact Us" pill. Colours are the header's own: phone-number grey at
   rest, the Contact Us blue on hover. 44px hit area around a 1.25rem icon
   (same icon size as the footer). */
.nav_social {
  display: flex;
  align-items: center;
}
.nav_social_link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #757575;
  text-decoration: none;
  transition: color .15s;
}
/* Hover only where a real pointer hovers, so a tap doesn't leave the icon
   stuck blue on phones. */
@media (hover: hover) {
  .nav_social_link:hover {
    color: #3e6cb2;
  }
}
.nav_social_link:focus-visible {
  color: #3e6cb2;
}
/* Keyboard focus ring on the header and footer icon links. A runtime-injected
   rule sets a:focus-visible { outline: 2px solid currentColor !important },
   which would paint the footer ring grey, so the colour and offset carry
   !important here too. */
.nav_social_link:focus-visible,
a.w-inline-block[href^="https://www.facebook.com/"]:focus-visible,
a.w-inline-block[href^="https://www.instagram.com/"]:focus-visible {
  outline: 2px solid #3e6cb2 !important;
  outline-offset: 2px !important;
  border-radius: .5rem;
}
/* Footer icons (the only w-inline-block social links): 44px tap area around
   the same 1.25rem glyph; the negative margin gives the padding back so the
   footer layout doesn't move. */
a.w-inline-block[href^="https://www.facebook.com/"],
a.w-inline-block[href^="https://www.instagram.com/"] {
  box-sizing: content-box;
  padding: calc((44px - 1.25rem) / 2);
  margin: calc((1.25rem - 44px) / 2);
}
.nav_social_link .icon-embed-custom {
  width: 1.25rem;
  height: 1.25rem;
}
/* Homepage header: the icons sit beside Contact Us on desktop; on tablet and
   phone Contact Us is hidden and they lead the opened menu. Pull the row in
   so the icon glyph, not its hit area, lines up with the text edge. */
.flex-horizontal-2.is-nav > .nav_social {
  margin-left: -12px;
  margin-right: -12px;
}
@media screen and (max-width: 991px) {
  .flex-horizontal-2.is-nav > .nav_social {
    margin-left: 0;
    margin-right: 0;
  }
}
/* Homepage header, second copy in the always-visible top row: shown only
   while the menu is collapsed (991px and below), pushed right so it sits
   just before the menu button. The menu copy above stays too. */
.nav_social--bar {
  display: none;
}
@media screen and (max-width: 991px) {
  .uui-navbar07_container-6 > .nav_social--bar {
    display: flex;
    margin-left: auto;
    margin-right: .375rem;
  }
}
/* Inner-page header, 992–1439px: the icons make the row tight, so the nav
   links close up to the gap the homepage header already uses at these
   widths (1.15rem), keeping 16px+ clear on both sides of the link row. */
@media (min-width: 992px) and (max-width: 1439px) {
  .nav_container > .nav_menu {
    grid-column-gap: 1.15rem;
    grid-row-gap: 1.15rem;
  }
}
/* 992–1023px: technology and blog pages keep a fixed 16px root (book and
   patient-intake scale theirs down), so there the nav links match the 12.8px
   book.html already renders at 992px, with a 1rem (16px) gap. */
@media (min-width: 992px) and (max-width: 1023px) {
  .nav_container > .nav_menu {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }
  .nav_container > .nav_menu .vavbar_link {
    font-size: .8rem;
  }
}
/* The site hides the hours pill up to 1200px; with the icons in the row it
   has no room until 1290px, so it stays hidden until then. From 1290–1329px
   the nav links keep the site's own compact size from 992–1200px (.85rem). */
@media (min-width: 1201px) and (max-width: 1289px) {
  .nav_container > .nav_contact > .nav_active_box,
  .uui-navbar07_container-6 .nav_contact-2 > .nav_active_box {
    display: none;
  }
}
@media (min-width: 1290px) and (max-width: 1329px) {
  .nav_container > .nav_menu .vavbar_link {
    font-size: .85rem;
  }
}
/* Inner-page header on phones: burger, logo and Contact Us fill the row, so
   the icons wrap onto a centred row of their own. */
.nav_links > .nav_social {
  margin-left: -12px;
  margin-right: -12px;
}
@media screen and (max-width: 767px) {
  .nav_links > .nav_social {
    flex-basis: 100%;
    justify-content: center;
    margin: -.5rem 0 -.75rem;
  }
}