/* Preserve the imported theme's palette, typography, desktop geometry and handlers. */
:is(
  .mobile-trigger,
  .submenu-icon,
  .slide-down-trigger,
  .load-more-btn,
  .modal-popup-trigger,
  .carousel-nav-trigger,
  .search-trigger,
  .mfp-close,
  .owl-prev,
  .owl-next,
  .owl-dot
):focus-visible {
  /* The imported theme resets every outline with !important. */
  outline: 2px solid currentColor !important;
  outline-offset: 4px;
}

@media (max-width: 991px) {
  /* Both legacy captions were absolutely positioned below the same thumbnail.
     Normal flow reserves the full caption height before the transcript action.
     The imported theme's tablet layout ends at 991px, not 767px. */
  .video-testimonial-a .flex-layout .item .video-img-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  /* The generic 65px color bar must stay over the thumbnail rather than
     following the wrapper's new height down over the caption/actions. */
  .video-testimonial-a .flex-layout .item .video-img-wrap::after,
  .video-testimonial-a .flex-layout .item .video-img-wrap > a.popup-video {
    grid-area: 1 / 1 / 2 / 2;
  }

  .video-testimonial-a .flex-layout .item .video-img-wrap > .patient-title,
  .video-testimonial-a .flex-layout .item .video-img-wrap > .video-title {
    /* The theme also emits this equal-specificity rule later inline. */
    position: static !important;
    inset: auto;
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-wrap: anywhere;
  }

  .video-testimonial-a .flex-layout .item .video-img-wrap > .patient-title {
    grid-row: 2;
    margin-top: 1rem;
  }

  .video-testimonial-a .flex-layout .item .video-img-wrap > .video-title {
    grid-row: 3;
    margin-top: 0.5rem;
  }

  .video-testimonial-a .flex-layout .item .video-img-wrap > .video-title a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.25rem 0;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* The theme uses white text/shadow for its on-video tablet action. The action
     now sits on the page below the video, so inherit the existing text color. */
  .video-testimonial-a .flex-layout .item .video-img-wrap > .video-title {
    color: inherit;
    text-shadow: none;
  }

  .video-testimonial-a .flex-layout .item .video-img-wrap > .video-title a:any-link {
    color: inherit;
  }
}

@media (min-width: 992px) {
  /* The imported main.css disables desktop phone links with
     `.disable-tel { cursor: default; pointer-events: none }`, emitted inline
     after this stylesheet. The type and attribute selectors outrank that
     equal-media rule without !important, and only tel: links regain input. */
  a.disable-tel[href^='tel:'] {
    cursor: pointer;
    pointer-events: auto;
  }
}

/* Navigation panels. Every rule starts at body or #mobile-menu because the theme
   prints its own CSS inline after this file, so an equal-specificity rule here loses. */
@media (min-width: 992px) {
  /* All three panels: white, lifted off the hero, opened from the header's bottom edge. */
  body .header-a .main-menu > li.menu-item-has-children::after {
    display: none;
  }

  body .header-a .main-menu > li.menu-item-has-children > .sub-menu {
    top: calc(100% + 34px);
    background-color: #fff;
    border-top: 1px solid #e4e6ec;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 28px 48px -24px rgba(38, 59, 129, 0.38);
    transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
  }

  body .header-a .main-menu .sub-menu .sub-menu {
    background-color: transparent;
    padding: 0.25rem 0 0;
  }

  body .header-a .main-menu .sub-menu li {
    transition: none;
  }

  /* The panel opens below the header, so the pointer has to cross a gap to reach it. */
  body .header-a .main-menu > li.menu-item-has-children > a::before,
  body .header-a .main-menu > li.menu-item-has-children > .replace-href::before {
    content: "";
    position: absolute;
    top: 100%;
    left: -16px;
    right: -16px;
    height: 96px;
  }

  body .header-a .main-menu > li.menu-item-has-children:focus-within > .sub-menu,
  body .header-a .main-menu > li.menu-item-has-children:focus-within .sub-menu {
    opacity: 1;
    visibility: visible;
    z-index: 1;
  }

  /* Our Services: eight groups on two rows of four, the width of the header's content.
     The item goes static so the header, not the item, positions the panel. */
  body .header-a .main-menu > li.halcy-services-menu {
    position: static;
  }

  body .header-a .main-menu > li.halcy-services-menu > .sub-menu {
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    width: min(1290px, calc(100vw - 64px));
    max-height: calc(100vh - 168px);
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-count: auto;
    column-gap: 0;
    row-gap: 1.75rem;
    /* Even 2rem on three sides. 18px on the left lined the first column up with the
       logo's visible edge but read as cramped on a card floating over the hero photo. */
    padding: 2rem 2rem 0;
  }

  body .header-a .main-menu .halcy-services-menu > .sub-menu > li {
    margin: 0;
    padding-right: 2rem;
  }

  body .header-a .main-menu .halcy-services-menu > .sub-menu .sub-menu {
    padding: 0;
  }

  body .header-a .main-menu .halcy-services-menu > .sub-menu > li.menu-item-has-children > a {
    display: block;
    white-space: normal;
    font-family: orpheuspro, "Cormorant Garamond", serif;
    font-weight: 500;
    font-size: 1.375rem;
    line-height: 1.75rem;
    color: #3d55a5;
  }

  body .header-a .main-menu .halcy-services-menu > .sub-menu .sub-menu li a {
    display: block;
    padding: 0.25rem 0;
    white-space: normal;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25rem;
    color: #383839;
  }

  body .header-a .main-menu .halcy-services-menu > .sub-menu a:hover,
  body .header-a .main-menu .halcy-services-menu > .sub-menu a:focus-visible {
    color: #263b81;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  body .header-a .main-menu .halcy-services-menu > .sub-menu .current-menu-item > a {
    color: #263b81;
    font-weight: 600;
  }

  /* The band: Dental Emergencies beside the phone and button the theme prints inside
     this item. It comes first in the markup so the phone drawer opens with it. */
  body .header-a .main-menu .halcy-services-menu > .sub-menu > li.halcy-nav-urgent {
    grid-row: 3;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    background: #f0f0f1;
    min-height: 4.5rem;
    margin: 0 -2rem;
    padding: 0 2rem;
    border-radius: 0 0 8px 8px;
  }

  body .header-a .main-menu .halcy-services-menu > .sub-menu > li.halcy-nav-urgent > a {
    font-size: 1rem;
    font-weight: 700;
    color: #263b81;
    white-space: nowrap;
  }

  body .header-a .main-menu .halcy-services-menu > .sub-menu > li.halcy-nav-urgent > a::after {
    content: " \2192";
  }

  body .header-a .main-menu .halcy-services-menu .cta-menu-float {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0;
    position: static;
    transform: none;
  }
}

@media (min-width: 1200px) {
  /* The header is 62px taller from here up, so the nav item sits further from its edge. */
  body .header-a .main-menu > li.menu-item-has-children:not(.halcy-services-menu) > .sub-menu {
    top: calc(100% + 65px);
  }

  body .header-a .main-menu > li.halcy-services-menu > .sub-menu {
    max-height: calc(100vh - 230px);
  }
}

@media (max-width: 991px) {
  /* Phone drawer: every chevron on one line, 44px rows, an open group on a faint tint. */
  #mobile-menu .mobile-menu .sub-menu {
    padding: 0 0 0 1rem;
  }

  #mobile-menu .mobile-menu .sub-menu a {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  #mobile-menu .mobile-menu .sub-menu .submenu-icon {
    height: 2.75rem;
    line-height: 2.75rem;
  }

  #mobile-menu .mobile-menu .sub-menu .sub-menu {
    margin: 0.25rem 0 0.5rem;
    padding: 0.25rem 0 0.25rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
  }
}