/* Restores Simvoly behaviors that the archived HTML expects from platform JavaScript. */

/* Opening the office menu adds no-overflow, and that rule drops the
   sticky header behind the page. Keep the open menu above the page. */
body.no-overflow .fixed-header-wrapper.burger-menu-visible,
body.no-overflow .main-header-wrapper.burger-menu-visible {
  z-index: 9996 !important;
}
.grid-row.with-video {
  position: relative;
  overflow: hidden;
}

.grid-row.with-video > .container-video {
  overflow: hidden;
  pointer-events: none;
}

/* The hero photo is an image in the HTML so the browser can fetch a
   right-sized file immediately. It covers the row the same way the
   old background did: cover, lined up to the top center. */
.grid-row > .tc-hero-picture {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
}
.tc-hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.grid-row.with-video > .container-video > .container-video-wrapper {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: 100%;
  height: 56.25vw;
  min-height: 100%;
  min-width: 177.78vh;
  transform: translate(-50%, -50%);
  opacity: 1;
  border: 0;
  pointer-events: none;
}

/* WebP picture wrappers should not change the image box. */
picture {
  display: contents;
}
.theme-logo img[width][height] {
  width: auto;
  height: auto;
  max-width: none;
}

/* The appointment survey starts when it is near the screen, then the
   page grows the frame if a later step is taller. Hold the finished
   size so the page does not jump.
   Phone: about 641px. Desktop: about 459px. */
.tc-survey-slot,
.tc-survey-slot iframe {
  display: block;
  width: 100%;
  min-height: 650px;
  height: 650px;
  background: transparent;
}
@media (min-width: 800px) {
  .tc-survey-slot,
  .tc-survey-slot iframe {
    min-height: 470px;
    height: 470px;
  }
}

/* Contact forms on /south-austin-contact and /contact-north-austin.
   The white card is the same width as the old site. GoHighLevel draws
   the form 37px in from each edge of the iframe, so the fields looked
   narrower than the old form. Grow the iframe into that padding so the
   fields line up with the "Hi," heading and the old fields. */
#form-widget-1709583140673 iframe {
  width: calc(100% + 74px) !important;
  margin-left: -37px !important;
  max-width: none !important;
}

/* ⤵ and ⤴ are text arrows in the headings. iOS would otherwise draw the emoji. */
.tc-text-arrow {
  font-variant-emoji: text;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* The phone menu slides in when the page has "open". The page layout
   clips anything inside it, which hides the drawer on iPhone. The script
   moves the drawer onto the body, and this keeps it on the screen. */
body.tc-phone-menu-open .page-layout {
  overflow: visible !important;
}
body.tc-phone-menu-open .mobile-header-overlay {
  display: block !important;
  position: fixed !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000 !important;
  background: transparent;
}
body.tc-phone-menu-open .mobile-header-wrapper {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 270px !important;
  height: 100% !important;
  z-index: 10001 !important;
  visibility: visible !important;
}

/* The phone menu button is the three lines. The theme paints a white
   circle behind them and draws the lines dark grey. Leave the circle off
   and keep the lines linen, including the X. */
.theme .mobile-burger,
.theme ul.mobile-burger.burger {
  background: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  box-shadow: none !important;
}
.theme .mobile-burger .before,
.theme .mobile-burger .after,
.theme .mobile-burger .middle {
  background: #f1eee9 !important;
  background-color: #f1eee9 !important;
}

/* A tablet (769px to 1024px) uses the same header as a phone. The phone
   styles stop at 768px, so this repeats them for the widths in between.
   The wide link row stays on a computer. */
@media (min-width: 769px) and (max-width: 1024px) {
  .main-header-wrapper {
    display: none !important;
  }
  .mobile-menu {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    float: left;
    width: 100%;
    padding: 10px 0;
    z-index: 131;
  }
  .theme .mobile-menu .burger {
    display: block !important;
    padding: 10px;
    z-index: 999999;
    box-sizing: content-box;
  }
  .mobile-menu-logo {
    float: left;
    width: 100%;
  }
  .theme .mobile-menu .theme-logo a img {
    float: none;
    margin: 0 auto;
    display: block;
  }
  .theme .mobile-menu-logo .theme-logo {
    min-height: 40px;
    text-align: center;
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header-wrapper .header-row-space,
  .header-wrapper .header-widget:not([data-type="headers/Logo"]) {
    display: none !important;
  }
  .header-wrapper .header-widget[data-type="headers/Logo"] {
    display: block !important;
    margin-bottom: 0;
  }
  .header-wrapper .header-widget[data-type="headers/Logo"] img {
    max-width: 260px;
    float: none;
    margin: 0 auto;
    display: block;
  }
  .header-wrapper .flex-header,
  .header-wrapper .header-widget-container {
    display: block !important;
    width: 100% !important;
    min-height: 0;
  }
  .header-wrapper .menuWidget .horizontal-menu-styling {
    display: none !important;
  }
  .theme .header-wrapper .theme-logo {
    width: 100%;
  }
  .theme .header-wrapper .theme-logo a {
    float: none;
    display: block;
    margin: 0 auto;
  }
  .theme .header-wrapper .theme-logo a img {
    float: none;
    max-width: 260px;
  }
  .mobile-header-wrapper.background-transparent {
    background: #2f323a;
  }
  .mobile-header-wrapper {
    display: block;
    width: 270px;
    height: 100%;
    position: fixed;
    left: -290px;
    top: 0;
    margin: 0;
    padding: 30px 20px;
    box-sizing: border-box;
    z-index: 131;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .mobile-header-wrapper.background-transparent .vertical-menu-styling li a {
    color: #fff !important;
  }
  .theme .mobile-header-wrapper .mobile-column nav li > div > ul {
    position: relative;
    width: 100%;
    top: auto !important;
    left: auto;
    box-shadow: none;
    border: none !important;
  }
  .theme .mobile-header-wrapper .mobile-column nav > ul > li {
    flex-direction: column;
    align-items: stretch;
  }
  .page-layout.open .header-wrapper,
  .page-layout.open .mobile-menu,
  .page-layout.open > .content {
    left: 260px !important;
  }
  .page-layout.open .mobile-header-wrapper {
    left: 0;
  }
}
.mobile-header-wrapper a.website-nav-link[href="/services"],
.mobile-header-wrapper a.website-nav-link[href="/resources"] {
  pointer-events: auto !important;
}
.mobile-header-wrapper .vertical-menu-styling li.with-submenu.visible > div {
  display: block;
}

/* Services and Resources open their menus. Hover already does this on a computer. */
.theme nav li.with-submenu.visible > div > ul {
  display: block;
  visibility: visible;
  top: 99%;
}
.theme .burger-menu-styling nav li.with-submenu.visible > div {
  height: auto;
}

.guide-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: guide-popup-fade 0.25s ease;
}
.guide-popup[hidden] {
  display: none;
}
@keyframes guide-popup-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.guide-popup-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}
.guide-popup-card {
  position: relative;
  z-index: 1;
  display: flex;
  box-sizing: border-box;
  width: 1010px;
  max-width: 100%;
  height: 543px;
  overflow: hidden;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.1);
}
.guide-popup-image {
  flex: 0 0 485px;
  width: 485px;
  height: 100%;
  background-color: #f1eee9;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.guide-popup-panel {
  box-sizing: border-box;
  flex: 1 1 525px;
  width: 525px;
  max-width: 525px;
  height: 100%;
  padding: 50px;
  overflow: hidden;
  background: #fff;
}
.guide-popup-heading {
  margin: 0 0 16px;
  color: #111111;
  font-family: "DM Serif Display", "Times New Roman", serif;
  font-size: 55px;
  font-weight: 400;
  line-height: 55px;
  letter-spacing: normal;
  text-align: center;
}
.guide-popup-line {
  display: block;
}
.guide-popup-heading em {
  font-style: italic;
  font-weight: 400;
}
.guide-popup-arrow {
  display: inline-block;
  width: calc(1em * 1716 / 2048);
  height: calc(1em * 1233 / 2048);
  vertical-align: baseline;
}
.guide-popup-slot {
  min-height: 300px;
}
.guide-popup-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  box-sizing: border-box;
  width: 51px;
  height: 50px;
  padding: 10px 13px;
  border: 0;
  border-radius: 0;
  background: #f7f7f7;
  color: #000;
  font-size: 30px;
  line-height: 30px;
  cursor: pointer;
}
.guide-popup-slot[hidden] {
  display: none !important;
}
.guide-popup-slot iframe,
.guide-popup-slot .ep-iFrameContainer,
.guide-popup-slot .ep-wrapper {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
body.guide-popup-open {
  overflow: hidden;
}
@media (max-width: 768px) {
  .guide-popup {
    align-items: flex-start;
    padding: 12px;
  }
  .guide-popup-card {
    flex-direction: column;
    height: auto;
    max-height: calc(100dvh - 24px);
    overflow: auto;
  }
  .guide-popup-panel {
    order: 1;
    width: 100%;
    max-width: none;
    height: auto;
    padding: 56px 25px 25px;
    overflow: visible;
  }
  .guide-popup-image {
    order: 2;
    flex: 0 0 100px;
    width: 100%;
    height: 100px;
  }
  .guide-popup-line {
    display: inline;
  }
}