/* ──────────────────────────────────────────────────────────────
   Desktop dropdown menus for The Dental Index main nav.

   The links themselves live in each page's static HTML — this file
   only styles them. That matters here: AI crawlers (GPTBot and
   friends) frequently don't execute JS, and these are the internal
   links pointing at every audit, county report, and study.

   Uses its own jn-dd-* namespace so it can't collide with the older
   .nav-has-menu / .nav-panel county-chooser rules that 11 pages
   still carry inline.
   ────────────────────────────────────────────────────────────── */

.nav-links > li.jn-dd { position: relative; }

.nav-links > li.jn-dd > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.nav-links > li.jn-dd > a .chev {
  font-size: 9px;
  line-height: 1;
  color: var(--muted2, #918F8C);
  transition: transform 0.2s, color 0.2s;
}

.jn-dd:hover > a,
.jn-dd:focus-within > a { color: var(--ink, #1A1A19); }

.jn-dd:hover > a .chev,
.jn-dd:focus-within > a .chev {
  transform: rotate(180deg);
  color: var(--ink, #1A1A19);
}

/* Transparent wrapper: the padding-top is the hover bridge between
   the nav item and the panel, so the menu doesn't close in the gap. */
.jn-dd-panel {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 13px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s;
  z-index: 200;
}

.jn-dd:hover > .jn-dd-panel,
.jn-dd:focus-within > .jn-dd-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.jn-dd-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 232px;
  background: var(--cream, #FDFAF7);
  border: 1px solid var(--bw, rgba(26, 26, 25, 0.10));
  box-shadow: 0 10px 28px rgba(26, 26, 25, 0.10);
}

.jn-dd-panel li { border-bottom: 1px solid var(--bw, rgba(26, 26, 25, 0.10)); }
.jn-dd-panel li:last-child { border-bottom: none; }

.nav-links .jn-dd-panel a {
  display: block;
  padding: 11px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink3, #4C4643);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.nav-links .jn-dd-panel a:hover,
.nav-links .jn-dd-panel a:focus {
  background: var(--cream2, #F5F2EE);
  color: var(--gold, #C38C37);
}

/* First row of each panel is the hub ("All Practice Audits"). */
.nav-links .jn-dd-panel .jn-dd-all a {
  color: var(--gold, #C38C37);
  letter-spacing: 0.08em;
}

/* The drawer takes over below the desktop breakpoint; make sure a
   panel can never hang around as a stray absolute box. */
@media (max-width: 900px) {
  .jn-dd-panel { display: none; }
}