/* ==========================================================================
   Augusta Pediatric Associates — header dropdowns

   The theme opened the dropdowns through hoverIntent: a plugin that watches the
   pointer and only fires once it has slowed below 7px per 100ms sample. On a
   horizontal menu that is a coin toss — sweep across "Services" at any speed
   and the panel never opens, and because the close handler runs on `mouseout`
   with no timeout, a single stray `mouseout` closes one that did.

   `menu-hover.js` unbinds it. The panels are opened here instead, by `:hover`
   and `:focus-within` on the parent item, which cannot miss: the browser is the
   one deciding whether the pointer is over the element.

   The fade and the small stagger down the list are kept, as transitions.
   ========================================================================== */

/* The theme parks the panel at `opacity: 0; visibility: hidden`, and its links
   at `opacity: 0`. Those stay the resting state; all that is added is the
   transition to and from it. */
.thb-full-menu li.menu-item-has-children > .sub-menu,
.thb-header-menu li.menu-item-has-children > .sub-menu {
  transition: opacity .26s cubic-bezier(.22, .61, .36, 1),
              visibility .26s cubic-bezier(.22, .61, .36, 1);
}

.thb-full-menu li.menu-item-has-children > .sub-menu > li > a,
.thb-header-menu li.menu-item-has-children > .sub-menu > li > a {
  transition: opacity .22s ease, color .2s ease;
}

/* `!important` because GSAP wrote the resting values inline on any panel that
   had already been opened once before the script unbound the plugin. */
.thb-full-menu li.menu-item-has-children:hover > .sub-menu,
.thb-full-menu li.menu-item-has-children:focus-within > .sub-menu,
.thb-header-menu li.menu-item-has-children:hover > .sub-menu,
.thb-header-menu li.menu-item-has-children:focus-within > .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
}

.thb-full-menu li.menu-item-has-children:hover > .sub-menu > li > a,
.thb-full-menu li.menu-item-has-children:focus-within > .sub-menu > li > a,
.thb-header-menu li.menu-item-has-children:hover > .sub-menu > li > a,
.thb-header-menu li.menu-item-has-children:focus-within > .sub-menu > li > a {
  opacity: 1 !important;
  transform: none !important;
}

/* the list fills in top to bottom, the way the GSAP stagger read */
.thb-full-menu li.menu-item-has-children:hover > .sub-menu > li:nth-child(1) > a,
.thb-header-menu li.menu-item-has-children:hover > .sub-menu > li:nth-child(1) > a { transition-delay: .02s; }
.thb-full-menu li.menu-item-has-children:hover > .sub-menu > li:nth-child(2) > a,
.thb-header-menu li.menu-item-has-children:hover > .sub-menu > li:nth-child(2) > a { transition-delay: .05s; }
.thb-full-menu li.menu-item-has-children:hover > .sub-menu > li:nth-child(3) > a,
.thb-header-menu li.menu-item-has-children:hover > .sub-menu > li:nth-child(3) > a { transition-delay: .08s; }
.thb-full-menu li.menu-item-has-children:hover > .sub-menu > li:nth-child(4) > a,
.thb-header-menu li.menu-item-has-children:hover > .sub-menu > li:nth-child(4) > a { transition-delay: .11s; }
.thb-full-menu li.menu-item-has-children:hover > .sub-menu > li:nth-child(5) > a,
.thb-header-menu li.menu-item-has-children:hover > .sub-menu > li:nth-child(5) > a { transition-delay: .14s; }
.thb-full-menu li.menu-item-has-children:hover > .sub-menu > li:nth-child(6) > a,
.thb-header-menu li.menu-item-has-children:hover > .sub-menu > li:nth-child(6) > a { transition-delay: .17s; }
.thb-full-menu li.menu-item-has-children:hover > .sub-menu > li:nth-child(n+7) > a,
.thb-header-menu li.menu-item-has-children:hover > .sub-menu > li:nth-child(n+7) > a { transition-delay: .2s; }

/* no delay on the way out — the panel should be gone the moment it is left */
.thb-full-menu li.menu-item-has-children > .sub-menu > li > a,
.thb-header-menu li.menu-item-has-children > .sub-menu > li > a { transition-delay: 0s; }

/* The panel sits directly under the item, so there is no gap to cross. This
   only guarantees it: the parent item keeps a hit area the full height of the
   header row, so the pointer is never briefly over neither of the two. */
.thb-full-menu > li.menu-item-has-children,
.thb-header-menu > li.menu-item-has-children { position: relative; }