/* nav.css — compact non-mega dropdown for the nav sections other than
   Treatments (Costs, Patient Results, About Us, For Dentists). Pure CSS
   hover/focus reveal, mirroring the mega menu's interaction + light panel. */

.nav-item > .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 264px;
  margin-top: 14px;
  padding: 17px 0;
  background: rgba(0, 0, 0, 1.80);
  border-radius: 4px;
  box-shadow: 0 24px 48px rgba(10, 10, 10, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--dur, 300ms) var(--ease, ease),
    transform var(--dur, 300ms) var(--ease, ease),
    visibility var(--dur, 300ms) var(--ease, ease);
  z-index: 60;
}

.nav-item:hover > .submenu,
.nav-item:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.submenu__link {
  display: block;
  position: relative;
  /* font-family: var(--font-head); */
  font-size: 16px;
  line-height: 1.3;
  font-weight: 500;
  color: #fff;
  padding: 15px 33px;
  white-space: nowrap;
  transition: color var(--dur, 300ms) var(--ease, ease);
}
.submenu__link::after {
  content: "";
  display: block;
  width: 110px;
  height: 1px;
  background: rgba(255, 255, 255, .2);
  position: absolute;
  bottom: 0px;
}
.submenu > .submenu__link:last-child::after,
.submenu > .submenu__group:last-child .submenu__link--parent::after {
  display: none;
}
.submenu__link:hover,
.submenu__link.active {
  color: var(--c01);
}

/* Nested children under a submenu leaf (e.g. Online Referral Forms'
   Dental Referrals / QTOSS and QDDOSS / CBCT Referrals) — rendered
   indented directly beneath their parent link inside the same panel,
   collapsed by default and revealed by the caret toggle button. */
.submenu__parent-row { display: flex; align-items: center; justify-content: space-between; }
.submenu__parent-row .submenu__link--parent { flex: 1; }
.submenu__toggle {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  padding: 0; margin-right: 12px;
  background: none; border: 0; cursor: pointer;
  color: var(--c01);
}
.submenu__toggle .caret { transition: transform var(--dur, 300ms) var(--ease, ease); }
/* .nav-item:hover .caret (styles.css) rotates ANY .caret inside a hovered
   nav-item — including this one, since the submenu is only visible on
   hover. Reset it back to pointing down while merely hovered, and only
   rotate it up when its own group has actually been clicked open; both
   selectors below out-specificity that rule so this wins regardless of
   source order. */
.nav-item:hover .submenu__toggle .caret { transform: none; }
.nav-item:hover .submenu__group.open .submenu__toggle .caret { transform: rotate(180deg); }
.submenu__group.open .submenu__toggle .caret { transform: rotate(180deg); }
.submenu__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur, 300ms) var(--ease, ease);
}
.submenu__group.open .submenu__sub { grid-template-rows: 1fr; }
.submenu__sub > .submenu__sub-inner { overflow: hidden; }
.submenu__link--sub {
  padding-left: 57px;
  font-size: 14px;
  font-weight: 400;
}

/* Hover bridge over the 14px gap so the dropdown doesn't close mid-move
   (same trick as the mega menu). Lives on the nav item, which keeps
   pointer-events through the transition. */
.nav-item:has(> .submenu)::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
}